diff --git a/src/app.css b/src/app.css
index 71c7d4d1..640e908e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -8,19 +8,19 @@ html {
 
 .x-container {
     position: relative;
-    padding: 10px;
+    padding: 8px;
     overflow: hidden auto;
     box-sizing: border-box;
     min-width: 0;
     background: var(--background);
     height: calc(100% - 20px);
-    margin: 10px 0 10px 0;
+    margin: 8px 0 8px 0;
     border-radius: var(--radius);
     border: 1px solid var(--border);
 }
 
 .aside-collapsed .x-container {
-    margin-right: 10px;
+    margin-right: 8px;
 }
 
 html.dark .x-container {
diff --git a/src/components/InstanceActionBar.vue b/src/components/InstanceActionBar.vue
index 9080f728..e6fb259d 100644
--- a/src/components/InstanceActionBar.vue
+++ b/src/components/InstanceActionBar.vue
@@ -53,10 +53,9 @@
         </TooltipWrapper>
         <TooltipWrapper v-if="showHistoryButton" side="top" :content="historyTooltip">
             <Button
-                class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
+                class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground ml-1.5"
                 size="icon-sm"
                 variant="outline"
-                style="margin-left: 5px"
                 @click="handleHistory">
                 <History class="h-4 w-4" />
             </Button>
@@ -101,7 +100,7 @@
                         </span>
                         <span v-if="instance?.users?.length">{{ t('dialog.user.info.instance_users') }}<br /></span>
                         <template v-for="user in instance?.users || []" :key="user.id">
-                            <span style="cursor: pointer; margin-right: 5px" @click="showUserDialog(user.id)">
+                            <span style="cursor: pointer; margin-right: 6px" @click="showUserDialog(user.id)">
                                 {{ user.displayName }}
                             </span>
                         </template>
@@ -268,7 +267,7 @@
     const showLaunchButton = computed(() => props.showLaunch && checkCanInviteSelf(resolvedLaunchLocation.value));
     const showInviteYourself = computed(() => props.showInvite && checkCanInviteSelf(resolvedInviteLocation.value));
 
-    const inviteStyle = computed(() => (showLaunchButton.value ? 'margin-left: 5px' : ''));
+    const inviteStyle = computed(() => (showLaunchButton.value ? 'margin-left: 6px' : ''));
     const showRefreshButton = computed(() => props.showRefresh && typeof props.onRefresh === 'function');
     const showHistoryButton = computed(() => props.showHistory && typeof props.onHistory === 'function');
 
diff --git a/src/components/LocationWorld.vue b/src/components/LocationWorld.vue
index 713787d9..86721799 100644
--- a/src/components/LocationWorld.vue
+++ b/src/components/LocationWorld.vue
@@ -9,7 +9,7 @@
         <TooltipWrapper v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
             <AlertTriangle :class="['inline-block', 'ml-1']" style="color: lightcoral" />
         </TooltipWrapper>
-        <Lock v-if="strict" style="display: inline-block; margin-left: 5px" />
+        <Lock class="ml-1.5" v-if="strict" style="display: inline-block" />
     </span>
 </template>
 
@@ -50,6 +50,9 @@
     const groupName = ref('');
     const isClosed = ref(false);
 
+    /**
+     *
+     */
     function parse() {
         const locObj = props.locationobject;
         location.value = locObj.tag;
@@ -94,6 +97,10 @@
         }
     }
 
+    /**
+     *
+     * @param accessTypeNameRaw
+     */
     function translateAccessType(accessTypeNameRaw) {
         const key = accessTypeLocaleKeyMap[accessTypeNameRaw];
         if (!key) {
@@ -118,10 +125,16 @@
         { immediate: true }
     );
 
+    /**
+     *
+     */
     function showLaunchDialog() {
         launchStore.showLaunchDialog(location.value, shortName.value);
     }
 
+    /**
+     *
+     */
     function showGroupDialog() {
         if (!location.value) return;
         const L = parseLocation(location.value);
diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
index f06c30da..f819ffa0 100644
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -539,7 +539,7 @@
         align-items: center;
         width: 100%;
         height: 100%;
-        padding: 0 6px;
+        padding: 0 8px;
     }
 
     .status-bar-left {
@@ -561,7 +561,7 @@
         display: flex;
         align-items: center;
         gap: 4px;
-        padding: 0 6px;
+        padding: 0 8px;
         height: 22px;
         white-space: nowrap;
         border-right: 1px solid var(--border);
diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index 9014396f..87764512 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -16,16 +16,16 @@
                         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">
+                <div class="ml-4" style="flex: 1; display: flex; align-items: flex-start">
                     <div style="flex: 1">
                         <div>
                             <span
-                                class="font-bold"
-                                style="margin-right: 5px; cursor: pointer"
+                                class="font-bold mr-1.5"
+                                style="cursor: pointer"
                                 v-text="avatarDialog.ref.name"
                                 @click="copyToClipboard(avatarDialog.ref.name)"></span>
                         </div>
-                        <div style="margin-top: 5px">
+                        <div class="mt-1.5">
                             <span
                                 class="cursor-pointer x-grey"
                                 style="font-family: monospace"
@@ -34,19 +34,16 @@
                         </div>
                         <div>
                             <Badge
+                                class="mr-1.5 mt-1.5"
                                 v-if="avatarDialog.ref.releaseStatus === 'public'"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
+                                variant="outline">
                                 {{ t('dialog.avatar.tags.public') }}
                             </Badge>
-                            <Badge v-else variant="outline" style="margin-right: 5px; margin-top: 5px">
+                            <Badge class="mr-1.5 mt-1.5" v-else variant="outline">
                                 {{ t('dialog.avatar.tags.private') }}
                             </Badge>
                             <TooltipWrapper v-if="avatarDialog.isPC" side="top" content="PC">
-                                <Badge
-                                    class="text-platform-pc border-platform-pc!"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px"
+                                <Badge class="text-platform-pc border-platform-pc! mr-1.5 mt-1.5" variant="outline"
                                     ><Monitor class="h-4 w-4 text-platform-pc" />
                                     <span
                                         v-if="avatarDialog.platformInfo.pc"
@@ -62,9 +59,8 @@
                             </TooltipWrapper>
                             <TooltipWrapper v-if="avatarDialog.isQuest" side="top" content="Android">
                                 <Badge
-                                    class="text-platform-quest border-platform-quest!"
+                                    class="text-platform-quest border-platform-quest! mr-1.5 mt-1.5"
                                     variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px"
                                     ><Smartphone class="h-4 w-4 text-platform-quest" />
                                     <span
                                         v-if="avatarDialog.platformInfo.android"
@@ -79,10 +75,7 @@
                                 </Badge>
                             </TooltipWrapper>
                             <TooltipWrapper v-if="avatarDialog.isIos" side="top" content="iOS">
-                                <Badge
-                                    class="text-platform-ios border-platform-ios"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px"
+                                <Badge class="text-platform-ios border-platform-ios mr-1.5 mt-1.5" variant="outline"
                                     ><Apple class="h-4 w-4 text-platform-ios" />
                                     <span
                                         v-if="avatarDialog.platformInfo.ios"
@@ -99,16 +92,15 @@
                             <Badge
                                 v-if="avatarDialog.inCache"
                                 variant="outline"
-                                class="cursor-pointer"
-                                style="margin-right: 5px; margin-top: 5px"
+                                class="cursor-pointer mr-1.5 mt-1.5"
                                 @click="openFolderGeneric(avatarDialog.cachePath)">
                                 <span v-text="avatarDialog.cacheSize"></span>
                                 &nbsp;{{ t('dialog.avatar.tags.cache') }}
                             </Badge>
                             <Badge
+                                class="mr-1.5 mt-1.5"
                                 v-if="avatarDialog.ref.styles?.primary || avatarDialog.ref.styles?.secondary"
                                 variant="outline"
-                                style="margin-right: 5px; margin-top: 5px"
                                 >{{ t('view.favorite.avatars.styles') }}
                                 <span
                                     v-if="avatarDialog.ref.styles.primary"
@@ -121,16 +113,10 @@
                                     >{{ avatarDialog.ref.styles.secondary }}</span
                                 >
                             </Badge>
-                            <Badge
-                                v-if="avatarDialog.isQuestFallback"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
+                            <Badge class="mr-1.5 mt-1.5" v-if="avatarDialog.isQuestFallback" variant="outline">
                                 {{ t('dialog.avatar.tags.fallback') }}
                             </Badge>
-                            <Badge
-                                v-if="avatarDialog.hasImposter"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px"
+                            <Badge class="mr-1.5 mt-1.5" v-if="avatarDialog.hasImposter" variant="outline"
                                 >{{ t('dialog.avatar.tags.impostor') }}
                                 <span
                                     v-if="avatarDialog.imposterVersion"
@@ -138,18 +124,12 @@
                                     >v{{ avatarDialog.imposterVersion }}</span
                                 >
                             </Badge>
-                            <Badge
-                                v-if="avatarDialog.ref.unityPackageUrl"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
+                            <Badge class="mr-1.5 mt-1.5" v-if="avatarDialog.ref.unityPackageUrl" variant="outline">
                                 {{ t('dialog.avatar.tags.future_proofing') }}
                             </Badge>
                             <div>
                                 <template v-for="tag in avatarDialog.ref.tags" :key="tag">
-                                    <Badge
-                                        v-if="tag.startsWith('content_')"
-                                        variant="outline"
-                                        style="margin-right: 5px; margin-top: 5px">
+                                    <Badge class="mr-1.5 mt-1.5" v-if="tag.startsWith('content_')" variant="outline">
                                         <span v-if="tag === 'content_horror'">{{
                                             t('dialog.avatar.tags.content_horror')
                                         }}</span>
@@ -167,10 +147,7 @@
                                         }}</span>
                                         <span v-else>{{ tag.replace('content_', '') }}</span>
                                     </Badge>
-                                    <Badge
-                                        v-if="tag.startsWith('author_tag_')"
-                                        variant="outline"
-                                        style="margin-right: 5px; margin-top: 5px">
+                                    <Badge class="mr-1.5 mt-1.5" v-if="tag.startsWith('author_tag_')" variant="outline">
                                         <span>
                                             {{ tag.replace('author_tag_', '') }}
                                         </span>
@@ -178,7 +155,7 @@
                                 </template>
                             </div>
                         </div>
-                        <div style="margin-top: 5px">
+                        <div style="margin-top: 6px">
                             <span
                                 v-show="avatarDialog.ref.name !== avatarDialog.ref.description"
                                 style="font-size: 12px"
@@ -412,7 +389,7 @@
                         </div>
                         <div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
                             <div class="flex-1 overflow-hidden">
-                                <span class="block truncate font-medium leading-[18px]" style="margin-bottom: 5px">{{
+                                <span class="block truncate font-medium leading-[18px]" style="margin-bottom: 6px">{{
                                     t('dialog.avatar.info.memo')
                                 }}</span>
                                 <InputGroupTextareaField
@@ -473,7 +450,7 @@
                                 <TooltipWrapper
                                     v-if="Object.keys(avatarDialog.fileAnalysis).length"
                                     side="top"
-                                    style="margin-left: 5px">
+                                    style="margin-left: 6px">
                                     <template #content>
                                         <template
                                             v-for="(created_at, platform) in avatarDialogPlatformCreatedAt"
diff --git a/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue b/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue
index 2497ea9a..b15e7e55 100644
--- a/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue
+++ b/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue
@@ -65,8 +65,7 @@
                     :autosize="{ minRows: 2, maxRows: 5 }"
                     :rows="2"
                     placeholder=""
-                    style="margin-top: 10px"
-                    input-class="resize-none"
+                    input-class="resize-none mt-2"
                     @update:modelValue="(v) => updateDialog({ authorTags: v })" />
             </template>
 
@@ -83,8 +82,8 @@
 </template>
 
 <script setup>
-    import { Button } from '@/components/ui/button';
     import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { Button } from '@/components/ui/button';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
@@ -118,6 +117,10 @@
         }
     );
 
+    /**
+     *
+     * @param patch
+     */
     function updateDialog(patch) {
         emit('update:setAvatarStylesDialog', {
             ...props.setAvatarStylesDialog,
@@ -125,6 +128,9 @@
         });
     }
 
+    /**
+     *
+     */
     async function getAvatarStyles() {
         try {
             const ref = await avatarRequest.getAvailableAvatarStyles();
@@ -144,10 +150,16 @@
         }
     }
 
+    /**
+     *
+     */
     function closeSetAvatarStylesDialog() {
         updateDialog({ visible: false });
     }
 
+    /**
+     *
+     */
     function saveSetAvatarStylesDialog() {
         const primaryStyleId =
             props.setAvatarStylesDialog.availableAvatarStylesMap.get(props.setAvatarStylesDialog.primaryStyle) || '';
diff --git a/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue b/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
index fedab66c..de667867 100644
--- a/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
+++ b/src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
@@ -43,7 +43,7 @@
                     v-model="setAvatarTagsDialog.selectedTagsCsv"
                     :rows="2"
                     :placeholder="t('dialog.set_avatar_tags.custom_tags_placeholder')"
-                    style="margin-top: 10px"
+                    class="mt-2"
                     input-class="resize-none"
                     @input="updateInputAvatarTags" />
                 <br />
@@ -59,7 +59,7 @@
                         t('dialog.set_avatar_tags.select_all')
                     }}</Button>
                 </template>
-                <span style="margin-left: 5px"
+                <span style="margin-left: 6px"
                     >{{ props.setAvatarTagsDialog.selectedAvatarIds.length }} /
                     {{ setAvatarTagsDialog.ownAvatars.length }}</span
                 >
@@ -67,7 +67,7 @@
                 <br />
                 <div
                     class="flex flex-wrap items-start max-h-[300px] overflow-hidden auto"
-                    style="margin-top: 10px; min-height: 60px">
+                    style="margin-top: 8px; min-height: 60px">
                     <div
                         v-for="avatar in setAvatarTagsDialog.ownAvatars"
                         :key="avatar.id"
@@ -96,7 +96,7 @@
                             <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>
+                        <Button size="sm" variant="ghost" style="margin-left: 6px" @click.stop>
                             <Checkbox
                                 :model-value="props.setAvatarTagsDialog.selectedAvatarIds.includes(avatar.id)"
                                 @update:modelValue="(val) => toggleAvatarSelection(avatar.id, val)" />
diff --git a/src/components/dialogs/GroupDialog/GallerySelectDialog.vue b/src/components/dialogs/GroupDialog/GallerySelectDialog.vue
index 5db04f41..a501cc70 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 style="color: #909399; font-size: 12px; margin-left: 5px">{{ galleryTable.length }}/64</span>
+                <span class="ml-1.5" style="color: #909399; font-size: 12px">{{ galleryTable.length }}/64</span>
                 <br />
                 <input
                     id="GalleryUploadButton"
@@ -82,6 +82,11 @@
         }
     });
 
+    /**
+     *
+     * @param imageUrl
+     * @param fileId
+     */
     function selectImageGallerySelect(imageUrl, fileId) {
         const D = props.gallerySelectDialog;
         D.selectedFileId = fileId;
@@ -89,10 +94,17 @@
         D.visible = false;
     }
 
+    /**
+     *
+     */
     function displayGalleryUpload() {
         document.getElementById('GalleryUploadButton').click();
     }
 
+    /**
+     *
+     * @param e
+     */
     function onFileChangeGallery(e) {
         const clearFile = function () {
             const fileInput = /** @type{HTMLInputElement} */ (document.querySelector('#GalleryUploadButton'));
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index 3877e652..cc77b812 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -17,17 +17,15 @@
                         @click="showFullscreenImageDialog(groupDialog.ref.iconUrl)"
                         loading="lazy" />
                 </div>
-                <div style="flex: 1; display: flex; align-items: flex-start; margin-left: 15px">
+                <div class="ml-4" style="flex: 1; display: flex; align-items: flex-start">
                     <div class="group-header" style="flex: 1">
-                        <span v-if="groupDialog.ref.ownerId === currentUser.id" style="margin-right: 5px">👑</span>
+                        <span class="mr-1.5" v-if="groupDialog.ref.ownerId === currentUser.id">👑</span>
                         <span
-                            class="font-bold"
-                            style="margin-right: 5px; cursor: pointer"
+                            class="font-bold mr-1.5"
+                            style="cursor: pointer"
                             v-text="groupDialog.ref.name"
                             @click="copyToClipboard(groupDialog.ref.name)"></span>
-                        <span
-                            class="group-discriminator x-grey"
-                            style="font-family: monospace; font-size: 12px; margin-right: 5px">
+                        <span class="group-discriminator x-grey mr-1.5" style="font-family: monospace; font-size: 12px">
                             {{ groupDialog.ref.shortCode }}.{{ groupDialog.ref.discriminator }}
                         </span>
                         <TooltipWrapper v-for="item in groupDialog.ref.$languages" :key="item.key" side="top">
@@ -37,9 +35,9 @@
                             <span
                                 class="flags"
                                 :class="languageClass(item.key)"
-                                style="display: inline-block; margin-right: 5px"></span>
+                                style="display: inline-block; margin-right: 6px"></span>
                         </TooltipWrapper>
-                        <div style="margin-top: 5px">
+                        <div style="margin-top: 6px">
                             <span
                                 class="cursor-pointer x-grey"
                                 style="font-family: monospace"
@@ -50,85 +48,85 @@
                             <Badge
                                 v-if="groupDialog.ref.isVerified"
                                 variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
+                                style="margin-right: 6px; margin-top: 6px">
                                 {{ t('dialog.group.tags.verified') }}
                             </Badge>
                             <Badge
                                 v-if="groupDialog.ref.privacy === 'private'"
                                 variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
+                                style="margin-right: 6px; margin-top: 6px">
                                 {{ t('dialog.group.tags.private') }}
                             </Badge>
                             <Badge
                                 v-if="groupDialog.ref.privacy === 'default'"
                                 variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
+                                style="margin-right: 6px; margin-top: 6px">
                                 {{ t('dialog.group.tags.public') }}
                             </Badge>
                             <Badge
                                 v-if="groupDialog.ref.joinState === 'open'"
                                 variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
+                                style="margin-right: 6px; margin-top: 6px">
                                 {{ t('dialog.group.tags.open') }}
                             </Badge>
                             <Badge
                                 v-else-if="groupDialog.ref.joinState === 'request'"
                                 variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
+                                style="margin-right: 6px; margin-top: 6px">
                                 {{ t('dialog.group.tags.request') }}
                             </Badge>
                             <Badge
                                 v-else-if="groupDialog.ref.joinState === 'invite'"
                                 variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
+                                style="margin-right: 6px; margin-top: 6px">
                                 {{ t('dialog.group.tags.invite') }}
                             </Badge>
                             <Badge
                                 v-else-if="groupDialog.ref.joinState === 'closed'"
                                 variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
+                                style="margin-right: 6px; margin-top: 6px">
                                 {{ t('dialog.group.tags.closed') }}
                             </Badge>
                             <Badge
                                 v-if="groupDialog.inGroup"
                                 variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
+                                style="margin-right: 6px; margin-top: 6px">
                                 {{ t('dialog.group.tags.joined') }}
                             </Badge>
                             <Badge
                                 v-if="groupDialog.ref.myMember && groupDialog.ref.myMember.bannedAt"
                                 variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
+                                style="margin-right: 6px; margin-top: 6px">
                                 {{ t('dialog.group.tags.banned') }}
                             </Badge>
                             <template v-if="groupDialog.inGroup && groupDialog.ref.myMember">
                                 <Badge
                                     v-if="groupDialog.ref.myMember.visibility === 'visible'"
                                     variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
+                                    style="margin-right: 6px; margin-top: 6px">
                                     {{ t('dialog.group.tags.visible') }}
                                 </Badge>
                                 <Badge
                                     v-else-if="groupDialog.ref.myMember.visibility === 'friends'"
                                     variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
+                                    style="margin-right: 6px; margin-top: 6px">
                                     {{ t('dialog.group.tags.friends') }}
                                 </Badge>
                                 <Badge
                                     v-else-if="groupDialog.ref.myMember.visibility === 'hidden'"
                                     variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
+                                    style="margin-right: 6px; margin-top: 6px">
                                     {{ t('dialog.group.tags.hidden') }}
                                 </Badge>
                                 <Badge
                                     v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements"
                                     variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
+                                    style="margin-right: 6px; margin-top: 6px">
                                     {{ t('dialog.group.tags.subscribed') }}
                                 </Badge>
                             </template>
                         </div>
-                        <div style="margin-top: 5px">
+                        <div style="margin-top: 6px">
                             <pre
                                 v-show="groupDialog.ref.name !== groupDialog.ref.description"
                                 style="
@@ -151,7 +149,7 @@
                                     class="rounded-full mr-2"
                                     variant="secondary"
                                     size="icon-lg"
-                                    style="margin-left: 5px"
+                                    style="margin-left: 6px"
                                     @click="clearGroupRepresentation(groupDialog.id)">
                                     <BookmarkCheck />
                                 </Button>
@@ -362,11 +360,11 @@
                     <div class="flex flex-wrap items-start px-2.5" style="max-height: none">
                         <span
                             v-if="groupDialog.instances.length"
-                            style="font-size: 12px; font-weight: bold; margin: 5px">
+                            style="font-size: 12px; font-weight: bold; margin: 6px">
                             {{ t('dialog.group.info.instances') }}
                         </span>
                         <div v-for="room in groupDialog.instances" :key="room.tag" style="width: 100%">
-                            <div style="margin: 5px 0" class="flex items-center">
+                            <div style="margin: 6px 0" class="flex items-center">
                                 <Location :location="room.tag" class="text-sm" />
                                 <InstanceActionBar
                                     class="ml-1"
@@ -380,7 +378,7 @@
                             <div
                                 v-if="room.users.length"
                                 class="flex flex-wrap items-start"
-                                style="margin: 10px 0; padding: 0; max-height: unset">
+                                style="margin: 8px 0; padding: 0; max-height: unset">
                                 <div
                                     v-for="user in room.users"
                                     :key="user.id"
@@ -418,7 +416,7 @@
                                 <span style="display: block" v-text="groupDialog.announcement.title" />
                                 <div
                                     v-if="groupDialog.announcement.imageUrl"
-                                    style="display: inline-block; margin-right: 5px">
+                                    style="display: inline-block; margin-right: 6px">
                                     <img
                                         :src="groupDialog.announcement.imageUrl"
                                         class="cursor-pointer"
@@ -448,7 +446,7 @@
                                 <div
                                     v-if="groupDialog.announcement.id"
                                     class="text-xs"
-                                    style="float: right; margin-left: 5px">
+                                    style="float: right; margin-left: 6px">
                                     <TooltipWrapper v-if="groupDialog.announcement.roleIds.length" side="top">
                                         <template #content>
                                             <span>{{ t('dialog.group.posts.visibility') }}</span>
@@ -466,12 +464,12 @@
                                                 </span>
                                             </template>
                                         </template>
-                                        <Eye style="margin-right: 5px" />
+                                        <Eye style="margin-right: 6px" />
                                     </TooltipWrapper>
                                     <DisplayName
                                         :userid="groupDialog.announcement.authorId"
-                                        style="margin-right: 5px" />
-                                    <span v-if="groupDialog.announcement.editorId" style="margin-right: 5px">
+                                        style="margin-right: 6px" />
+                                    <span v-if="groupDialog.announcement.editorId" style="margin-right: 6px">
                                         ({{ t('dialog.group.posts.edited_by') }}
                                         <DisplayName :userid="groupDialog.announcement.editorId" />)
                                     </span>
@@ -502,7 +500,7 @@
                                             <Button
                                                 size="sm"
                                                 variant="ghost"
-                                                style="margin-left: 5px; padding: 0"
+                                                style="margin-left: 6px; padding: 0"
                                                 @click="
                                                     showGroupPostEditDialog(groupDialog.id, groupDialog.announcement)
                                                 "></Button>
@@ -511,7 +509,7 @@
                                             <Button
                                                 size="sm"
                                                 variant="ghost"
-                                                style="margin-left: 5px; padding: 0"
+                                                style="margin-left: 6px; padding: 0"
                                                 @click="confirmDeleteGroupPost(groupDialog.announcement)"></Button>
                                         </TooltipWrapper>
                                     </template>
@@ -623,7 +621,7 @@
                                 }}</span>
                                 <div
                                     v-if="groupDialog.ref.links && groupDialog.ref.links.length > 0"
-                                    style="margin-top: 5px"
+                                    style="margin-top: 6px"
                                     class="flex">
                                     <template v-for="(link, index) in groupDialog.ref.links" :key="index">
                                         <TooltipWrapper v-if="link">
@@ -636,7 +634,7 @@
                                                     width: 16px;
                                                     height: 16px;
                                                     vertical-align: middle;
-                                                    margin-right: 5px;
+                                                    margin-right: 6px;
                                                     cursor: pointer;
                                                 "
                                                 @click.stop="openExternalLink(link)"
@@ -687,8 +685,8 @@
                         </div>
                         <div
                             v-if="groupDialog.ref.membershipStatus === 'member'"
-                            style="width: 100%; margin-top: 10px; border-top: 1px solid #e4e7ed14">
-                            <div style="width: 100%; display: flex; margin-top: 10px">
+                            style="width: 100%; margin-top: 8px; border-top: 1px solid #e4e7ed14">
+                            <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">
                                         <span class="block truncate font-medium leading-[18px]">{{
@@ -755,7 +753,7 @@
                 </template>
                 <template #Posts>
                     <template v-if="groupDialog.visible">
-                        <span style="margin-right: 10px; vertical-align: top"
+                        <span style="margin-right: 8px; vertical-align: top"
                             >{{ t('dialog.group.posts.posts_count') }} {{ groupDialog.posts.length }}</span
                         >
                         <InputGroupField
@@ -763,7 +761,7 @@
                             clearable
                             size="sm"
                             :placeholder="t('dialog.group.posts.search_placeholder')"
-                            style="width: 89%; margin-bottom: 10px"
+                            style="width: 89%; margin-bottom: 8px"
                             @input="updateGroupPostSearch" />
                         <div class="flex flex-wrap items-start">
                             <div
@@ -772,7 +770,7 @@
                                 class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
                                 <div class="flex-1 overflow-hidden">
                                     <span style="display: block" v-text="post.title" />
-                                    <div v-if="post.imageUrl" style="display: inline-block; margin-right: 5px">
+                                    <div v-if="post.imageUrl" style="display: inline-block; margin-right: 6px">
                                         <img
                                             :src="post.imageUrl"
                                             class="cursor-pointer"
@@ -799,7 +797,7 @@
                                         >{{ post.text || '-' }}</pre
                                     >
                                     <br />
-                                    <div v-if="post.authorId" class="text-xs" style="float: right; margin-left: 5px">
+                                    <div v-if="post.authorId" class="text-xs" style="float: right; margin-left: 6px">
                                         <TooltipWrapper v-if="post.roleIds.length" side="top">
                                             <template #content>
                                                 <span>{{ t('dialog.group.posts.visibility') }}</span>
@@ -816,10 +814,10 @@
                                                     >
                                                 </template>
                                             </template>
-                                            <Eye style="margin-right: 5px" />
+                                            <Eye style="margin-right: 6px" />
                                         </TooltipWrapper>
-                                        <DisplayName :userid="post.authorId" style="margin-right: 5px" />
-                                        <span v-if="post.editorId" style="margin-right: 5px"
+                                        <DisplayName :userid="post.authorId" style="margin-right: 6px" />
+                                        <span v-if="post.editorId" style="margin-right: 6px"
                                             >({{ t('dialog.group.posts.edited_by') }}
                                             <DisplayName :userid="post.editorId" />)</span
                                         >
@@ -878,7 +876,7 @@
                         <span v-else style="font-weight: bold; font-size: 16px">{{
                             t('dialog.group.members.friends_only')
                         }}</span>
-                        <div style="margin-top: 10px">
+                        <div style="margin-top: 8px">
                             <Button
                                 class="rounded-full h-6 w-6"
                                 variant="ghost"
@@ -892,23 +890,23 @@
                                 class="rounded-full h-6 w-6 ml-2"
                                 size="icon-sm"
                                 variant="ghost"
-                                style="margin-left: 5px"
+                                style="margin-left: 6px"
                                 @click="downloadAndSaveJson(`${groupDialog.id}_members`, groupDialog.members)">
                                 <Download class="h-4 w-4" />
                             </Button>
                             <span
                                 v-if="groupDialog.memberSearch.length"
-                                style="font-size: 14px; margin-left: 5px; margin-right: 5px"
+                                style="font-size: 14px; margin-left: 6px; margin-right: 6px"
                                 >{{ groupDialog.memberSearchResults.length }}/{{ groupDialog.ref.memberCount }}</span
                             >
-                            <span v-else style="font-size: 14px; margin-left: 5px; margin-right: 5px"
+                            <span v-else style="font-size: 14px; margin-left: 6px; margin-right: 6px"
                                 >{{ groupDialog.members.length }}/{{ groupDialog.ref.memberCount }}</span
                             >
                             <div
                                 v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')"
                                 style="float: right"
                                 class="flex items-center">
-                                <span style="margin-right: 5px">{{ t('dialog.group.members.sort_by') }}</span>
+                                <span style="margin-right: 6px">{{ t('dialog.group.members.sort_by') }}</span>
                                 <Select
                                     v-model="groupDialogMemberSortValue"
                                     :disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0">
@@ -948,13 +946,13 @@
                                 clearable
                                 size="sm"
                                 :placeholder="t('dialog.group.members.search')"
-                                style="margin-top: 10px; margin-bottom: 10px"
+                                style="margin-top: 8px; margin-bottom: 8px"
                                 @input="groupMembersSearch" />
                         </div>
                         <div
                             v-if="groupDialog.memberSearch.length"
                             class="flex flex-wrap items-start"
-                            style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
+                            style="margin-top: 8px; overflow: auto; max-height: 250px; min-width: 130px">
                             <div
                                 v-for="user in groupDialog.memberSearchResults"
                                 :key="user.id"
@@ -977,7 +975,7 @@
                                                 v-if="user.isRepresenting"
                                                 side="top"
                                                 :content="t('dialog.group.members.representing')">
-                                                <Tag style="margin-right: 5px" />
+                                                <Tag style="margin-right: 6px" />
                                             </TooltipWrapper>
                                             <TooltipWrapper v-if="user.visibility !== 'visible'" side="top">
                                                 <template #content>
@@ -986,13 +984,13 @@
                                                         {{ user.visibility }}</span
                                                     >
                                                 </template>
-                                                <Eye style="margin-right: 5px" />
+                                                <Eye style="margin-right: 6px" />
                                             </TooltipWrapper>
                                             <TooltipWrapper
                                                 v-if="!user.isSubscribedToAnnouncements"
                                                 side="top"
                                                 :content="t('dialog.group.members.unsubscribed_announcements')">
-                                                <MessageSquare style="margin-right: 5px" />
+                                                <MessageSquare style="margin-right: 6px" />
                                             </TooltipWrapper>
                                             <TooltipWrapper v-if="user.managerNotes" side="top">
                                                 <template #content>
@@ -1000,7 +998,7 @@
                                                     <br />
                                                     <span>{{ user.managerNotes }}</span>
                                                 </template>
-                                                <Pencil style="margin-right: 5px" />
+                                                <Pencil style="margin-right: 6px" />
                                             </TooltipWrapper>
                                         </template>
                                         <template v-for="roleId in user.roleIds" :key="roleId">
@@ -1017,7 +1015,7 @@
                         <ul
                             v-else-if="groupDialog.members.length > 0"
                             class="infinite-list flex flex-wrap items-start"
-                            style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
+                            style="margin-top: 8px; overflow: auto; max-height: 250px; min-width: 130px">
                             <li
                                 v-for="user in groupDialog.members"
                                 :key="user.id"
@@ -1040,7 +1038,7 @@
                                                 v-if="user.isRepresenting"
                                                 side="top"
                                                 :content="t('dialog.group.members.representing')">
-                                                <Tag style="margin-right: 5px" />
+                                                <Tag style="margin-right: 6px" />
                                             </TooltipWrapper>
                                             <TooltipWrapper v-if="user.visibility !== 'visible'" side="top">
                                                 <template #content>
@@ -1049,13 +1047,13 @@
                                                         {{ user.visibility }}</span
                                                     >
                                                 </template>
-                                                <Eye style="margin-right: 5px" />
+                                                <Eye style="margin-right: 6px" />
                                             </TooltipWrapper>
                                             <TooltipWrapper
                                                 v-if="!user.isSubscribedToAnnouncements"
                                                 side="top"
                                                 :content="t('dialog.group.members.unsubscribed_announcements')">
-                                                <MessageSquare style="margin-right: 5px" />
+                                                <MessageSquare style="margin-right: 6px" />
                                             </TooltipWrapper>
                                             <TooltipWrapper v-if="user.managerNotes" side="top">
                                                 <template #content>
@@ -1063,7 +1061,7 @@
                                                     <br />
                                                     <span>{{ user.managerNotes }}</span>
                                                 </template>
-                                                <Pencil style="margin-right: 5px" />
+                                                <Pencil style="margin-right: 6px" />
                                             </TooltipWrapper>
                                         </template>
                                         <template v-for="roleId in user.roleIds" :key="roleId">
@@ -1110,8 +1108,8 @@
                             :key="`label-${index}`"
                             v-slot:[`label-${index}`]>
                             <span style="font-weight: bold; font-size: 16px" v-text="gallery.name" />
-                            <i class="x-status-icon" style="margin-left: 5px" :class="groupGalleryStatus(gallery)" />
-                            <span style="color: #909399; font-size: 12px; margin-left: 5px">{{
+                            <i class="x-status-icon" style="margin-left: 6px" :class="groupGalleryStatus(gallery)" />
+                            <span style="color: #909399; font-size: 12px; margin-left: 6px">{{
                                 groupDialog.galleries[gallery.id] ? groupDialog.galleries[gallery.id].length : 0
                             }}</span>
                         </template>
@@ -1119,13 +1117,13 @@
                             v-for="(gallery, index) in groupDialog.ref.galleries"
                             :key="`content-${index}`"
                             v-slot:[String(index)]>
-                            <span style="color: #c7c7c7; padding: 10px" v-text="gallery.description" />
+                            <span style="color: #c7c7c7; padding: 8px" v-text="gallery.description" />
                             <div
                                 style="
                                     display: grid;
                                     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-                                    gap: 15px;
-                                    margin-top: 10px;
+                                    gap: 16px;
+                                    margin-top: 8px;
                                     max-height: 600px;
                                     overflow-y: auto;
                                 ">
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationBanExportDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationBanExportDialog.vue
index af8348c8..09813924 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationBanExportDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationBanExportDialog.vue
@@ -11,7 +11,7 @@
                 <DialogTitle>{{ t('dialog.group_member_moderation.export_bans') }}</DialogTitle>
             </DialogHeader>
 
-            <div style="margin-bottom: 10px" class="flex flex-col gap-2">
+            <div class="flex flex-col gap-2 mb-2">
                 <label v-for="option in exportBansOptions" :key="option.label" class="inline-flex items-center gap-2">
                     <Checkbox
                         :model-value="checkedExportBansOptions.includes(option.label)"
@@ -24,8 +24,7 @@
                 v-model="exportContent"
                 :rows="15"
                 readonly
-                style="margin-top: 15px"
-                input-class="resize-none"
+                input-class="resize-none mt-4"
                 @click="handleCopyExportContent" />
         </DialogContent>
     </Dialog>
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationBanImportDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationBanImportDialog.vue
index 6f78fb96..b1e316d6 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationBanImportDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationBanImportDialog.vue
@@ -53,7 +53,7 @@
                 <Button size="sm" variant="secondary" @click="errors = ''">
                     {{ t('dialog.group_member_moderation.import_bans_clear_errors') }}
                 </Button>
-                <pre style="white-space: pre-wrap; font-size: 12px; margin-top: 5px" v-text="errors"></pre>
+                <pre class="mt-1.5" style="white-space: pre-wrap; font-size: 12px" v-text="errors"></pre>
             </template>
 
             <template v-if="resultMessage">
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
index 448b7160..d7fd682e 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
@@ -9,7 +9,7 @@
                 <h3>{{ groupMemberModeration.groupRef.name }}</h3>
                 <TabsUnderline default-value="members" :items="groupModerationTabs" :unmount-on-hide="false">
                     <template #members>
-                        <div style="margin-top: 10px">
+                        <div class="mt-2">
                             <Button
                                 class="rounded-full"
                                 variant="outline"
@@ -19,13 +19,13 @@
                                 <Spinner v-if="isGroupMembersLoading" />
                                 <RefreshCw v-else />
                             </Button>
-                            <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">
+                            <span class="ml-1.5 mr-1.5" style="font-size: 14px">
                                 {{ groupMemberModerationTable.data.length }}/{{
                                     groupMemberModeration.groupRef.memberCount
                                 }}
                             </span>
-                            <div style="float: right; margin-top: 5px">
-                                <span style="margin-right: 5px">{{ t('dialog.group.members.sort_by') }}</span>
+                            <div class="mt-1.5" style="float: right">
+                                <span class="mr-1.5">{{ t('dialog.group.members.sort_by') }}</span>
                                 <DropdownMenu>
                                     <DropdownMenuTrigger
                                         as-child
@@ -51,7 +51,7 @@
                                             "
                                             @click.stop>
                                             {{ t(memberSortOrder.name) }}
-                                            <ArrowDown style="margin-left: 5px" />
+                                            <ArrowDown class="ml-1.5" />
                                         </Button>
                                     </DropdownMenuTrigger>
                                     <DropdownMenuContent>
@@ -63,9 +63,7 @@
                                         </DropdownMenuItem>
                                     </DropdownMenuContent>
                                 </DropdownMenu>
-                                <span class="ml-2" style="margin-right: 5px">{{
-                                    t('dialog.group.members.filter')
-                                }}</span>
+                                <span class="ml-2 mr-1.5">{{ t('dialog.group.members.filter') }}</span>
                                 <DropdownMenu>
                                     <DropdownMenuTrigger
                                         as-child
@@ -91,7 +89,7 @@
                                             "
                                             @click.stop>
                                             {{ t(memberFilter.name) }}
-                                            <ArrowDown style="margin-left: 5px" />
+                                            <ArrowDown class="ml-1.5" />
                                         </Button>
                                     </DropdownMenuTrigger>
                                     <DropdownMenuContent>
@@ -117,14 +115,14 @@
                                 clearable
                                 size="sm"
                                 :placeholder="t('dialog.group.members.search')"
-                                style="margin-top: 10px; margin-bottom: 10px"
+                                style="margin-top: 8px; margin-bottom: 8px"
                                 @input="groupMembersSearch" />
                             <Button size="sm" variant="outline" @click="selectAll(groupMemberModerationTable.data)">{{
                                 t('dialog.group_member_moderation.select_all')
                             }}</Button>
                             <DataTableLayout
                                 v-if="groupMemberModerationTable.data.length"
-                                style="margin-top: 10px"
+                                style="margin-top: 8px"
                                 :table="groupMemberModerationTanstackTable"
                                 :loading="isGroupMembersLoading"
                                 :page-sizes="pageSizes"
@@ -133,7 +131,7 @@
                     </template>
 
                     <template #bans>
-                        <div style="margin-top: 10px">
+                        <div style="margin-top: 8px">
                             <div class="flex justify-between">
                                 <div class="flex gap-2 items-center">
                                     <Button
@@ -151,7 +149,7 @@
                                         @click="selectAll(groupBansModerationTable.data)"
                                         >{{ t('dialog.group_member_moderation.select_all') }}</Button
                                     >
-                                    <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
+                                    <span style="font-size: 14px; margin-left: 6px; margin-right: 6px">{{
                                         groupBansModerationTable.data.length
                                     }}</span>
                                 </div>
@@ -183,7 +181,7 @@
                             </div>
 
                             <DataTableLayout
-                                style="margin-top: 10px"
+                                style="margin-top: 8px"
                                 :table="groupBansModerationTanstackTable"
                                 :loading="isGroupMembersLoading"
                                 :page-sizes="pageSizes"
@@ -192,7 +190,7 @@
                     </template>
 
                     <template #invites>
-                        <div style="margin-top: 10px">
+                        <div style="margin-top: 8px">
                             <Button
                                 class="rounded-full"
                                 variant="outline"
@@ -208,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: 5px">{{
+                                    <span style="color: #909399; font-size: 12px; margin-left: 6px">{{
                                         groupInvitesModerationTable.data.length
                                     }}</span>
                                 </template>
@@ -216,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: 5px">{{
+                                    <span style="color: #909399; font-size: 12px; margin-left: 6px">{{
                                         groupJoinRequestsModerationTable.data.length
                                     }}</span>
                                 </template>
@@ -224,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: 5px">{{
+                                    <span style="color: #909399; font-size: 12px; margin-left: 6px">{{
                                         groupBlockedModerationTable.data.length
                                     }}</span>
                                 </template>
@@ -236,7 +234,7 @@
                                         >{{ t('dialog.group_member_moderation.select_all') }}</Button
                                     >
                                     <DataTableLayout
-                                        style="margin-top: 10px"
+                                        style="margin-top: 8px"
                                         :table="groupInvitesModerationTanstackTable"
                                         :loading="isGroupMembersLoading"
                                         :page-sizes="pageSizes"
@@ -266,7 +264,7 @@
                                         >{{ t('dialog.group_member_moderation.select_all') }}</Button
                                     >
                                     <DataTableLayout
-                                        style="margin-top: 10px"
+                                        style="margin-top: 8px"
                                         :table="groupJoinRequestsModerationTanstackTable"
                                         :loading="isGroupMembersLoading"
                                         :page-sizes="pageSizes"
@@ -326,7 +324,7 @@
                                         >{{ t('dialog.group_member_moderation.select_all') }}</Button
                                     >
                                     <DataTableLayout
-                                        style="margin-top: 10px"
+                                        style="margin-top: 8px"
                                         :table="groupBlockedModerationTanstackTable"
                                         :loading="isGroupMembersLoading"
                                         :page-sizes="pageSizes"
@@ -352,7 +350,7 @@
                     </template>
 
                     <template #logs>
-                        <div style="margin-top: 10px">
+                        <div style="margin-top: 8px">
                             <Button
                                 class="rounded-full"
                                 variant="outline"
@@ -362,14 +360,14 @@
                                 <Spinner v-if="isGroupMembersLoading" />
                                 <RefreshCw v-else />
                             </Button>
-                            <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
+                            <span style="font-size: 14px; margin-left: 6px; margin-right: 6px">{{
                                 groupLogsModerationTable.data.length
                             }}</span>
                             <br />
                             <div style="display: flex; justify-content: space-between; align-items: center">
                                 <div>
                                     <Select v-model="selectedAuditLogTypes" multiple>
-                                        <SelectTrigger style="margin: 10px 0; width: 250px">
+                                        <SelectTrigger style="margin: 8px 0; width: 250px">
                                             <SelectValue
                                                 :placeholder="t('dialog.group_member_moderation.filter_type')" />
                                         </SelectTrigger>
@@ -394,10 +392,10 @@
                                 clearable
                                 size="sm"
                                 :placeholder="t('dialog.group.members.search')"
-                                style="margin-top: 10px; margin-bottom: 10px" />
+                                style="margin-top: 8px; margin-bottom: 8px" />
                             <br />
                             <DataTableLayout
-                                style="margin-top: 10px"
+                                style="margin-top: 8px"
                                 :table="groupLogsModerationTanstackTable"
                                 :loading="isGroupMembersLoading"
                                 :page-sizes="pageSizes"
@@ -413,13 +411,13 @@
                 <InputGroupField
                     v-model="selectUserId"
                     size="sm"
-                    style="margin-top: 5px"
+                    style="margin-top: 6px"
                     :placeholder="t('dialog.group_member_moderation.user_id_placeholder')"
                     clearable />
                 <Button
                     size="sm"
                     variant="outline"
-                    style="margin-top: 10px"
+                    style="margin-top: 8px"
                     :disabled="!selectUserId"
                     @click="selectGroupMemberUserId"
                     >{{ t('dialog.group_member_moderation.select_user') }}</Button
@@ -431,7 +429,7 @@
                     class="rounded-full"
                     size="icon-sm"
                     variant="outline"
-                    style="margin-left: 5px"
+                    style="margin-left: 6px"
                     @click="clearAllSelected">
                     <Trash2
                 /></Button>
@@ -440,7 +438,7 @@
                     v-for="user in selectedUsersArray"
                     :key="user.id"
                     variant="outline"
-                    style="margin-right: 5px; margin-top: 5px">
+                    style="margin-right: 6px; margin-top: 6px">
                     <TooltipWrapper v-if="user.membershipStatus !== 'member'" side="top">
                         <template #content>
                             <span>{{ t('dialog.group_member_moderation.user_isnt_in_group') }}</span>
@@ -449,11 +447,11 @@
                     </TooltipWrapper>
                     <span
                         v-text="user.user?.displayName || user.userId"
-                        style="font-weight: bold; margin-left: 5px"></span>
+                        style="font-weight: bold; margin-left: 6px"></span>
                     <button
                         type="button"
                         style="
-                            margin-left: 6px;
+                            margin-left: 8px;
                             border: none;
                             background: transparent;
                             padding: 0;
@@ -474,14 +472,14 @@
                     class="text-xs"
                     :rows="2"
                     :placeholder="t('dialog.group_member_moderation.note_placeholder')"
-                    style="margin-top: 5px"
+                    style="margin-top: 6px"
                     input-class="resize-none min-h-0" />
                 <br />
                 <br />
                 <span class="name">{{ t('dialog.group_member_moderation.selected_roles') }}</span>
                 <br />
                 <Select v-model="selectedRoles" multiple>
-                    <SelectTrigger style="margin-top: 5px">
+                    <SelectTrigger style="margin-top: 6px">
                         <SelectValue :placeholder="t('dialog.group_member_moderation.choose_roles_placeholder')" />
                     </SelectTrigger>
                     <SelectContent>
@@ -566,14 +564,14 @@
                         @click="handleUnban"
                         >{{ t('dialog.group_member_moderation.unban') }}</Button
                     >
-                    <span v-if="progressCurrent" style="margin-top: 10px">
+                    <span v-if="progressCurrent" style="margin-top: 8px">
                         <Spinner class="inline-block ml-2 mr-2" />
                         {{ t('dialog.group_member_moderation.progress') }} {{ progressCurrent }}/{{ progressTotal }}
                     </span>
                     <Button
                         variant="secondary"
                         v-if="progressCurrent"
-                        style="margin-left: 5px"
+                        style="margin-left: 6px"
                         @click="progressTotal = 0"
                         >{{ t('dialog.group_member_moderation.cancel') }}</Button
                     >
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationExportDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationExportDialog.vue
index 2cda7aa2..4545ae6c 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationExportDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationExportDialog.vue
@@ -11,7 +11,7 @@
                 <DialogTitle>{{ t('dialog.group_member_moderation.export_logs') }}</DialogTitle>
             </DialogHeader>
 
-            <div style="margin-bottom: 10px" class="flex flex-col gap-2">
+            <div class="flex flex-col gap-2 mb-2">
                 <label
                     v-for="option in checkGroupsLogsExportLogsOptions"
                     :key="option.label"
@@ -27,8 +27,7 @@
                 v-model="groupLogsExportContent"
                 :rows="15"
                 readonly
-                style="margin-top: 15px"
-                input-class="resize-none"
+                input-class="resize-none mt-4"
                 @click="handleCopyGroupLogsExportContent" />
         </DialogContent>
     </Dialog>
diff --git a/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue b/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
index 87d29c6f..13df8058 100644
--- a/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
@@ -19,8 +19,7 @@
                             <InputGroupTextareaField
                                 v-model="groupPostEditDialog.text"
                                 :rows="4"
-                                style="margin-top: 10px"
-                                input-class="resize-none" />
+                                input-class="resize-none mt-2" />
                         </FieldContent>
                     </Field>
                     <Field v-if="!groupPostEditDialog.postId">
@@ -84,7 +83,7 @@
                         <FieldLabel>{{ t('dialog.group_post_edit.image') }}</FieldLabel>
                         <FieldContent>
                             <template v-if="gallerySelectDialog.selectedFileId">
-                                <div style="display: inline-block; flex: none; margin-right: 5px">
+                                <div class="mr-1.5" style="display: inline-block; flex: none">
                                     <img
                                         :src="gallerySelectDialog.selectedImageUrl"
                                         style="
@@ -195,16 +194,26 @@
         return names.slice(0, 3).join(', ') + (names.length > 3 ? ` +${names.length - 3}` : '');
     });
 
+    /**
+     *
+     * @param value
+     */
     function handleRoleIdsChange(value) {
         const next = Array.isArray(value) ? value.map((v) => String(v ?? '')).filter(Boolean) : [];
         groupPostEditDialog.value.roleIds = next;
     }
 
+    /**
+     *
+     */
     function showGallerySelectDialog() {
         const D = gallerySelectDialog.value;
         D.visible = true;
         refreshGalleryTable();
     }
+    /**
+     *
+     */
     async function refreshGalleryTable() {
         const params = {
             n: 100,
@@ -216,6 +225,9 @@
             galleryTable.value = args.json.reverse();
         }
     }
+    /**
+     *
+     */
     function editGroupPost() {
         const D = groupPostEditDialog.value;
         if (!D.groupId || !D.postId) {
@@ -243,6 +255,9 @@
         });
         D.visible = false;
     }
+    /**
+     *
+     */
     function createGroupPost() {
         const D = groupPostEditDialog.value;
         if (!D.title || !D.text) {
@@ -267,6 +282,9 @@
         });
         D.visible = false;
     }
+    /**
+     *
+     */
     function clearImageGallerySelect() {
         const D = gallerySelectDialog.value;
         D.selectedFileId = '';
diff --git a/src/components/dialogs/InviteDialog/InviteDialog.vue b/src/components/dialogs/InviteDialog/InviteDialog.vue
index b00d11d5..1dcca53e 100644
--- a/src/components/dialogs/InviteDialog/InviteDialog.vue
+++ b/src/components/dialogs/InviteDialog/InviteDialog.vue
@@ -14,28 +14,27 @@
             <div v-if="inviteDialog.visible" class="overflow-hidden">
                 <Location :location="inviteDialog.worldId" :link="false" class="cursor-default" />
                 <br />
-                <Button size="sm" class="mr-2" variant="outline" style="margin-top: 10px" @click="addSelfToInvite">{{
+                <Button size="sm" class="mr-2 mt-2" variant="outline" @click="addSelfToInvite">{{
                     t('dialog.invite.add_self')
                 }}</Button>
                 <Button
                     size="sm"
-                    class="mr-2"
+                    class="mr-2 mt-2"
                     variant="outline"
                     :disabled="inviteDialog.friendsInInstance.length === 0"
-                    style="margin-top: 10px"
                     @click="addFriendsInInstanceToInvite"
                     >{{ t('dialog.invite.add_friends_in_instance') }}</Button
                 >
                 <Button
+                    class="mt-2"
                     size="sm"
                     variant="outline"
                     :disabled="vipFriends.length === 0"
-                    style="margin-top: 10px"
                     @click="addFavoriteFriendsToInvite"
                     >{{ t('dialog.invite.add_favorite_friends') }}</Button
                 >
 
-                <div style="width: 100%; margin-top: 15px">
+                <div class="mt-4" style="width: 100%">
                     <VirtualCombobox
                         :model-value="Array.isArray(inviteDialog.userIds) ? inviteDialog.userIds : []"
                         @update:modelValue="setInviteUserIds"
diff --git a/src/components/dialogs/InviteDialog/SendInviteDialog.vue b/src/components/dialogs/InviteDialog/SendInviteDialog.vue
index e69129c4..97d5340b 100644
--- a/src/components/dialogs/InviteDialog/SendInviteDialog.vue
+++ b/src/components/dialogs/InviteDialog/SendInviteDialog.vue
@@ -13,7 +13,7 @@
 
             <template v-if="isLocalUserVrcPlusSupporter">
                 <!--            <template v-if="gallerySelectDialog.selectedFileId">-->
-                <!--                <div style="display: inline-block; flex: none; margin-right: 5px">-->
+                <!--                <div class="mr-1.5" style="display: inline-block; flex: none">-->
                 <!--                    <el-popover placement="right" :width="500px" trigger="click">-->
                 <!--                        <template #reference>-->
                 <!--                            <img-->
@@ -33,7 +33,7 @@
                 <!--                </el-button>-->
                 <!--            </template>-->
                 <!--            <template v-else>-->
-                <!--                <el-button size="small" @click="showGallerySelectDialog" style="margin-right: 5px">-->
+                <!--                <el-button size="small" @click="showGallerySelectDialog" style="margin-right: 6px">-->
                 <!--                    {{ t('dialog.invite_message.select_image') }}-->
                 <!--                </el-button>-->
                 <!--            </template>-->
@@ -41,7 +41,7 @@
             </template>
 
             <DataTableLayout
-                style="margin-top: 10px"
+                style="margin-top: 8px"
                 :table="inviteMessageTanstackTable"
                 :loading="false"
                 :show-pagination="false"
@@ -137,15 +137,27 @@
         initialSorting: [{ id: 'slot', desc: false }]
     });
 
+    /**
+     *
+     * @param row
+     */
     function handleInviteMessageRowClick(row) {
         showSendInviteConfirmDialog(row?.original);
     }
 
+    /**
+     *
+     * @param row
+     */
     function showSendInviteConfirmDialog(row) {
         emit('update:sendInviteDialog', { ...props.sendInviteDialog, messageSlot: row });
         isSendInviteConfirmDialogVisible.value = true;
     }
 
+    /**
+     *
+     * @param row
+     */
     function showEditAndSendInviteDialog(row) {
         emit('update:sendInviteDialog', { ...props.sendInviteDialog, messageSlot: row });
         editAndSendInviteDialog.value = {
@@ -154,10 +166,16 @@
         };
     }
 
+    /**
+     *
+     */
     function cancelSendInvite() {
         emit('update:sendInviteDialogVisible', false);
     }
 
+    /**
+     *
+     */
     function closeInviteDialog() {
         cancelSendInvite();
         emit('closeInviteDialog');
diff --git a/src/components/dialogs/InviteGroupDialog.vue b/src/components/dialogs/InviteGroupDialog.vue
index 5af3a054..9414b2d6 100644
--- a/src/components/dialogs/InviteGroupDialog.vue
+++ b/src/components/dialogs/InviteGroupDialog.vue
@@ -9,7 +9,7 @@
                 <span>{{ t('dialog.invite_to_group.description') }}</span>
                 <br />
 
-                <div style="margin-top: 15px; width: 100%">
+                <div class="mt-4" style="width: 100%">
                     <VirtualCombobox
                         v-model="inviteGroupDialog.groupId"
                         :groups="groupPickerGroups"
@@ -36,7 +36,7 @@
                     </VirtualCombobox>
                 </div>
 
-                <div style="width: 100%; margin-top: 15px">
+                <div style="width: 100%; margin-top: 16px">
                     <VirtualCombobox
                         v-model="inviteGroupDialog.userIds"
                         :groups="friendPickerGroups"
diff --git a/src/components/dialogs/ModerateGroupDialog.vue b/src/components/dialogs/ModerateGroupDialog.vue
index 27f2d72a..e03739a9 100644
--- a/src/components/dialogs/ModerateGroupDialog.vue
+++ b/src/components/dialogs/ModerateGroupDialog.vue
@@ -23,7 +23,7 @@
                     </div>
                 </div>
 
-                <div style="margin-top: 15px; width: 100%">
+                <div class="mt-4" style="width: 100%">
                     <VirtualCombobox
                         :model-value="moderateGroupDialog.groupId"
                         @update:modelValue="setGroupId"
diff --git a/src/components/dialogs/SendBoopDialog.vue b/src/components/dialogs/SendBoopDialog.vue
index 5d905875..47bf9ca6 100644
--- a/src/components/dialogs/SendBoopDialog.vue
+++ b/src/components/dialogs/SendBoopDialog.vue
@@ -28,8 +28,8 @@
                 style="
                     display: grid;
                     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-                    gap: 5px;
-                    margin-top: 10px;
+                    gap: 6px;
+                    margin-top: 8px;
                     max-height: 600px;
                     overflow-y: auto;
                 ">
@@ -109,6 +109,9 @@
         }
     );
 
+    /**
+     *
+     */
     function closeDialog() {
         sendBoopDialog.value.visible = false;
     }
@@ -120,6 +123,10 @@
         }
     });
 
+    /**
+     *
+     * @param emojiName
+     */
     function getEmojiValue(emojiName) {
         if (!emojiName) {
             return '';
@@ -139,6 +146,9 @@
         }
     ]);
 
+    /**
+     *
+     */
     function sendBoop() {
         const D = sendBoopDialog.value;
         dismissBoop(D.userId);
@@ -152,6 +162,10 @@
         D.visible = false;
     }
 
+    /**
+     *
+     * @param userId
+     */
     function dismissBoop(userId) {
         // JANK: This is a hack to remove boop notifications when responding
         const array = notificationTable.value.data;
diff --git a/src/components/dialogs/UserDialog/BioDialog.vue b/src/components/dialogs/UserDialog/BioDialog.vue
index 3abac0aa..5984e79b 100644
--- a/src/components/dialogs/UserDialog/BioDialog.vue
+++ b/src/components/dialogs/UserDialog/BioDialog.vue
@@ -16,13 +16,13 @@
                     autosize />
 
                 <InputGroupAction
+                    class="mt-1.5"
                     v-for="(link, index) in bioDialog.bioLinks"
                     :key="index"
                     v-model="bioDialog.bioLinks[index]"
                     :maxlength="1000"
                     show-count
-                    size="sm"
-                    style="margin-top: 5px">
+                    size="sm">
                     <template #leading>
                         <img :src="getFaviconUrl(link)" style="width: 16px; height: 16px; vertical-align: middle" />
                     </template>
@@ -71,6 +71,9 @@
         }
     });
 
+    /**
+     *
+     */
     function saveBio() {
         const D = props.bioDialog;
         if (D.loading) {
diff --git a/src/components/dialogs/UserDialog/LanguageDialog.vue b/src/components/dialogs/UserDialog/LanguageDialog.vue
index 8c27a0bc..0cf1e5ea 100644
--- a/src/components/dialogs/UserDialog/LanguageDialog.vue
+++ b/src/components/dialogs/UserDialog/LanguageDialog.vue
@@ -6,20 +6,19 @@
             </DialogHeader>
 
             <div>
-                <div v-for="item in currentUser.$languages" :key="item.key" style="margin: 6px 0">
-                    <Badge variant="outline" style="margin-right: 5px">
+                <div class="my-2 mx-0" v-for="item in currentUser.$languages" :key="item.key">
+                    <Badge class="mr-1.5" variant="outline">
                         <span
-                            class="flags"
+                            class="flags mr-1.5"
                             :class="languageClass(item.key)"
-                            style="display: inline-block; margin-right: 5px"></span>
+                            style="display: inline-block"></span>
                         {{ item.value }} ({{ item.key.toUpperCase() }})
                         <button
+                            class="ml-2 p-0"
                             type="button"
                             style="
-                                margin-left: 6px;
                                 border: none;
                                 background: transparent;
-                                padding: 0;
                                 display: inline-flex;
                                 align-items: center;
                                 color: inherit;
@@ -36,7 +35,7 @@
                         languageDialog.loading || (currentUser.$languages && currentUser.$languages.length === 3)
                     "
                     @update:modelValue="handleAddUserLanguage">
-                    <SelectTrigger size="sm" style="margin-top: 14px">
+                    <SelectTrigger class="mt-3.5" size="sm">
                         <SelectValue :placeholder="t('dialog.language.select_language')" />
                     </SelectTrigger>
                     <SelectContent>
@@ -47,9 +46,9 @@
                                 :value="item.key"
                                 :text-value="item.value">
                                 <span
-                                    class="flags"
+                                    class="flags mr-1.5"
                                     :class="languageClass(item.key)"
-                                    style="display: inline-block; margin-right: 5px"></span>
+                                    style="display: inline-block"></span>
                                 {{ item.value }} ({{ item.key.toUpperCase() }})
                             </SelectItem>
                         </SelectGroup>
@@ -79,11 +78,19 @@
 
     const selectedLanguageToAdd = ref('');
 
+    /**
+     *
+     * @param language
+     */
     function handleAddUserLanguage(language) {
         addUserLanguage(language);
         selectedLanguageToAdd.value = '';
     }
 
+    /**
+     *
+     * @param language
+     */
     function removeUserLanguage(language) {
         if (language !== String(language)) {
             return;
@@ -99,6 +106,10 @@
             });
     }
 
+    /**
+     *
+     * @param language
+     */
     function addUserLanguage(language) {
         if (language !== String(language)) {
             return;
diff --git a/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue b/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
index ccdc49ca..5bb2d768 100644
--- a/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
+++ b/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
@@ -16,7 +16,7 @@
             </template>
 
             <DataTableLayout
-                style="margin-top: 10px"
+                style="margin-top: 8px"
                 :table="inviteRequestMessageTanstackTable"
                 :loading="false"
                 :show-pagination="false"
@@ -114,15 +114,27 @@
         initialSorting: [{ id: 'slot', desc: false }]
     });
 
+    /**
+     *
+     * @param row
+     */
     function handleInviteRequestMessageRowClick(row) {
         showSendInviteConfirmDialog(row?.original);
     }
 
+    /**
+     *
+     * @param row
+     */
     function showSendInviteConfirmDialog(row) {
         emit('update:sendInviteDialog', { ...props.sendInviteDialog, messageSlot: row });
         isSendInviteConfirmDialogVisible.value = true;
     }
 
+    /**
+     *
+     * @param row
+     */
     function showEditAndSendInviteDialog(row) {
         emit('update:sendInviteDialog', { ...props.sendInviteDialog, messageSlot: row });
         editAndSendInviteDialog.value = {
@@ -130,10 +142,16 @@
             visible: true
         };
     }
+    /**
+     *
+     */
     function cancelSendInviteRequest() {
         emit('update:sendInviteRequestDialogVisible', false);
     }
 
+    /**
+     *
+     */
     function closeInviteDialog() {
         cancelSendInviteRequest();
     }
diff --git a/src/components/dialogs/UserDialog/UserDialog.vue b/src/components/dialogs/UserDialog/UserDialog.vue
index bb275b84..f7e58fa0 100644
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -21,14 +21,9 @@
             <template #Info>
                 <template v-if="isFriendOnline(userDialog.friend) || currentUser.id === userDialog.id">
                     <div
+                        class="mb-2 pb-2"
                         v-if="userDialog.ref.location"
-                        style="
-                            display: flex;
-                            flex-direction: column;
-                            margin-bottom: 10px;
-                            padding-bottom: 10px;
-                            border-bottom: 1px solid #e4e7ed14;
-                        ">
+                        style="display: flex; flex-direction: column; border-bottom: 1px solid #e4e7ed14">
                         <div style="flex: none">
                             <template v-if="isRealInstance(userDialog.$location.tag)">
                                 <InstanceActionBar
@@ -48,7 +43,7 @@
                         </div>
                         <div
                             class="flex flex-wrap items-start"
-                            style="flex: 1; margin-top: 10px; max-height: 150px; overflow: auto">
+                            style="flex: 1; margin-top: 8px; max-height: 150px; overflow: auto">
                             <div
                                 v-if="userDialog.$location.userId"
                                 class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
@@ -177,7 +172,7 @@
                     </div>
                     <div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
                         <div class="flex-1 overflow-hidden">
-                            <span class="block truncate font-medium leading-[18px]" style="margin-bottom: 5px">{{
+                            <span class="block truncate font-medium leading-[18px]" style="margin-bottom: 6px">{{
                                 t('dialog.user.info.represented_group')
                             }}</span>
                             <div
@@ -186,7 +181,7 @@
                                     (userDialog.representedGroup && userDialog.representedGroup.isRepresenting)
                                 "
                                 class="text-xs">
-                                <div style="display: inline-block; flex: none; margin-right: 5px">
+                                <div style="display: inline-block; flex: none; margin-right: 6px">
                                     <Avatar
                                         class="cursor-pointer size-15! rounded-lg!"
                                         :style="{
@@ -206,10 +201,10 @@
                                     @click="showGroupDialog(userDialog.representedGroup.groupId)">
                                     <span
                                         v-if="userDialog.representedGroup.ownerId === userDialog.id"
-                                        style="margin-right: 5px"
+                                        style="margin-right: 6px"
                                         >👑</span
                                     >
-                                    <span style="margin-right: 5px" v-text="userDialog.representedGroup.name"></span>
+                                    <span style="margin-right: 6px" v-text="userDialog.representedGroup.name"></span>
                                     <span>({{ userDialog.representedGroup.memberCount }})</span>
                                 </span>
                             </div>
@@ -248,12 +243,12 @@
                                     size="icon-sm"
                                     variant="ghost"
                                     v-if="userDialog.id === currentUser.id"
-                                    style="margin-left: 5px; padding: 0"
+                                    style="margin-left: 6px; padding: 0"
                                     @click="showBioDialog"
                                     ><Pencil class="h-3 w-3" />
                                 </Button>
                             </div>
-                            <div style="margin-top: 5px" class="flex items-center">
+                            <div style="margin-top: 6px" class="flex items-center">
                                 <TooltipWrapper v-for="(link, index) in userDialog.ref.bioLinks" :key="index">
                                     <template #content>
                                         <span v-text="link"></span>
@@ -265,7 +260,7 @@
                                             width: 16px;
                                             height: 16px;
                                             vertical-align: middle;
-                                            margin-right: 5px;
+                                            margin-right: 6px;
                                             cursor: pointer;
                                         "
                                         @click.stop="openExternalLink(link)"
@@ -570,12 +565,12 @@
                             <Spinner v-if="userDialog.isMutualFriendsLoading" />
                             <RefreshCw v-else />
                         </Button>
-                        <span style="margin-left: 5px">{{
+                        <span style="margin-left: 6px">{{
                             t('dialog.user.groups.total_count', { count: userDialog.mutualFriends.length })
                         }}</span>
                     </div>
                     <div style="display: flex; align-items: center">
-                        <span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span>
+                        <span style="margin-right: 6px">{{ t('dialog.user.groups.sort_by') }}</span>
                         <Select
                             :model-value="userDialogMutualFriendSortingKey"
                             :disabled="userDialog.isMutualFriendsLoading"
@@ -596,7 +591,7 @@
                 </div>
                 <ul
                     class="flex flex-wrap items-start"
-                    style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
+                    style="margin-top: 8px; overflow: auto; max-height: 250px; min-width: 130px">
                     <li
                         v-for="user in userDialog.mutualFriends"
                         :key="user.id"
@@ -627,13 +622,13 @@
                             <Spinner v-if="userDialog.isGroupsLoading" />
                             <RefreshCw v-else />
                         </Button>
-                        <span style="margin-left: 5px">{{
+                        <span style="margin-left: 6px">{{
                             t('dialog.user.groups.total_count', { count: userDialog.userGroups.groups.length })
                         }}</span>
                         <template v-if="userDialogGroupEditMode">
                             <span
                                 style="
-                                    margin-left: 10px;
+                                    margin-left: 8px;
 
                                     font-size: 10px;
                                 "
@@ -643,7 +638,7 @@
                     </div>
                     <div style="display: flex; align-items: center">
                         <template v-if="!userDialogGroupEditMode">
-                            <span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span>
+                            <span style="margin-right: 6px">{{ t('dialog.user.groups.sort_by') }}</span>
                             <Select
                                 :model-value="userDialogGroupSortingKey"
                                 :disabled="userDialog.isGroupsLoading"
@@ -682,14 +677,14 @@
                         </Button>
                     </div>
                 </div>
-                <div style="margin-top: 10px">
+                <div style="margin-top: 8px">
                     <template v-if="userDialogGroupEditMode">
                         <div
                             class="flex flex-wrap items-start"
-                            style="margin-top: 10px; margin-bottom: 15px; max-height: unset">
+                            style="margin-top: 8px; margin-bottom: 16px; max-height: unset">
                             <!-- Bulk actions dropdown (shown only in edit mode) -->
                             <Select :model-value="bulkGroupActionValue" @update:modelValue="handleBulkGroupAction">
-                                <SelectTrigger size="sm" style="margin-right: 5px; margin-bottom: 5px" @click.stop>
+                                <SelectTrigger size="sm" style="margin-right: 6px; margin-bottom: 6px" @click.stop>
                                     <SelectValue :placeholder="t('dialog.group.actions.manage_selected')" />
                                 </SelectTrigger>
                                 <SelectContent>
@@ -712,7 +707,7 @@
                             <Button
                                 size="sm"
                                 variant="outline"
-                                style="padding: 7px 15px; margin-bottom: 5px"
+                                style="padding: 7px 16px; margin-bottom: 6px"
                                 @click="selectAllGroups">
                                 {{
                                     userDialogGroupAllSelected
@@ -729,8 +724,8 @@
                                 <!-- Manual checkbox -->
                                 <div
                                     style="
-                                        margin-left: 5px;
-                                        margin-right: 5px;
+                                        margin-left: 6px;
+                                        margin-right: 6px;
                                         transform: scale(0.8);
                                         transform-origin: left center;
                                     "
@@ -740,7 +735,7 @@
                                         @update:modelValue="() => toggleGroupSelection(group.id)" />
                                 </div>
 
-                                <div style="margin-right: 3px; margin-left: 5px" @click.stop>
+                                <div style="margin-right: 3px; margin-left: 6px" @click.stop>
                                     <Button
                                         size="icon-sm"
                                         variant="ghost"
@@ -762,7 +757,7 @@
                                         <DownloadIcon />
                                     </Button>
                                 </div>
-                                <div style="margin-right: 10px" @click.stop>
+                                <div style="margin-right: 8px" @click.stop>
                                     <Button
                                         size="icon-sm"
                                         variant="outline"
@@ -791,7 +786,7 @@
                                             v-if="group.isRepresenting"
                                             side="top"
                                             :content="t('dialog.group.members.representing')">
-                                            <Tag style="margin-right: 5px" />
+                                            <Tag style="margin-right: 6px" />
                                         </TooltipWrapper>
                                         <TooltipWrapper v-if="group.myMember?.visibility !== 'visible'" side="top">
                                             <template #content>
@@ -800,7 +795,7 @@
                                                     {{ group.myMember.visibility }}</span
                                                 >
                                             </template>
-                                            <Eye style="margin-right: 5px" />
+                                            <Eye style="margin-right: 6px" />
                                         </TooltipWrapper>
                                         <span>({{ group.memberCount }})</span>
                                     </span>
@@ -840,11 +835,11 @@
                                             setGroupSubscription(group.id, !group.myMember.isSubscribedToAnnouncements)
                                         ">
                                         <span v-if="group.myMember.isSubscribedToAnnouncements"
-                                            ><BellOff style="margin-left: 5px" />
+                                            ><BellOff style="margin-left: 6px" />
                                             {{ t('dialog.group.tags.subscribed') }}</span
                                         >
                                         <span v-else
-                                            ><Bell style="margin-left: 5px" />
+                                            ><Bell style="margin-left: 6px" />
                                             {{ t('dialog.group.tags.unsubscribed') }}</span
                                         >
                                     </Button> -->
@@ -854,7 +849,7 @@
                                         size="icon-sm"
                                         variant="outline"
                                         v-if="shiftHeld"
-                                        style="margin-left: 5px"
+                                        style="margin-left: 6px"
                                         @click.stop="leaveGroup(group.id)">
                                         <LogOut />
                                     </Button>
@@ -863,7 +858,7 @@
                                         size="icon-sm"
                                         variant="outline"
                                         v-else
-                                        style="margin-left: 5px"
+                                        style="margin-left: 6px"
                                         @click.stop="leaveGroupPrompt(group.id)">
                                         <LogOut />
                                     </Button>
@@ -876,7 +871,7 @@
                             <span style="font-weight: bold; font-size: 16px">{{
                                 t('dialog.user.groups.own_groups')
                             }}</span>
-                            <span style="font-size: 12px; margin-left: 5px"
+                            <span style="font-size: 12px; margin-left: 6px"
                                 >{{ userDialog.userGroups.ownGroups.length }}/{{
                                     // @ts-ignore
                                     cachedConfig?.constants?.GROUPS?.MAX_OWNED
@@ -884,7 +879,7 @@
                             >
                             <div
                                 class="flex flex-wrap items-start"
-                                style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
+                                style="margin-top: 8px; margin-bottom: 16px; min-height: 60px">
                                 <div
                                     v-for="group in userDialog.userGroups.ownGroups"
                                     :key="group.id"
@@ -905,7 +900,7 @@
                                                 v-if="group.isRepresenting"
                                                 side="top"
                                                 :content="t('dialog.group.members.representing')">
-                                                <Tag style="margin-right: 5px" />
+                                                <Tag style="margin-right: 6px" />
                                             </TooltipWrapper>
                                             <TooltipWrapper v-if="group.memberVisibility !== 'visible'" side="top">
                                                 <template #content>
@@ -914,7 +909,7 @@
                                                         {{ group.memberVisibility }}</span
                                                     >
                                                 </template>
-                                                <Eye style="margin-right: 5px" />
+                                                <Eye style="margin-right: 6px" />
                                             </TooltipWrapper>
                                             <span>({{ group.memberCount }})</span>
                                         </span>
@@ -926,12 +921,12 @@
                             <span style="font-weight: bold; font-size: 16px">{{
                                 t('dialog.user.groups.mutual_groups')
                             }}</span>
-                            <span style="font-size: 12px; margin-left: 5px">{{
+                            <span style="font-size: 12px; margin-left: 6px">{{
                                 userDialog.userGroups.mutualGroups.length
                             }}</span>
                             <div
                                 class="flex flex-wrap items-start"
-                                style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
+                                style="margin-top: 8px; margin-bottom: 16px; min-height: 60px">
                                 <div
                                     v-for="group in userDialog.userGroups.mutualGroups"
                                     :key="group.id"
@@ -952,7 +947,7 @@
                                                 v-if="group.isRepresenting"
                                                 side="top"
                                                 :content="t('dialog.group.members.representing')">
-                                                <Tag style="margin-right: 5px" />
+                                                <Tag style="margin-right: 6px" />
                                             </TooltipWrapper>
                                             <TooltipWrapper v-if="group.memberVisibility !== 'visible'" side="top">
                                                 <template #content>
@@ -961,7 +956,7 @@
                                                         {{ group.memberVisibility }}</span
                                                     >
                                                 </template>
-                                                <Eye style="margin-right: 5px" />
+                                                <Eye style="margin-right: 6px" />
                                             </TooltipWrapper>
                                             <span>({{ group.memberCount }})</span>
                                         </span>
@@ -971,7 +966,7 @@
                         </template>
                         <template v-if="userDialog.userGroups.remainingGroups.length > 0">
                             <span style="font-weight: bold; font-size: 16px">{{ t('dialog.user.groups.groups') }}</span>
-                            <span style="font-size: 12px; margin-left: 5px">
+                            <span style="font-size: 12px; margin-left: 6px">
                                 {{ userDialog.userGroups.remainingGroups.length }}
                                 <template v-if="currentUser.id === userDialog.id">
                                     /
@@ -985,7 +980,7 @@
                             </span>
                             <div
                                 class="flex flex-wrap items-start"
-                                style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
+                                style="margin-top: 8px; margin-bottom: 16px; min-height: 60px">
                                 <div
                                     v-for="group in userDialog.userGroups.remainingGroups"
                                     :key="group.id"
@@ -1006,7 +1001,7 @@
                                                 v-if="group.isRepresenting"
                                                 side="top"
                                                 :content="t('dialog.group.members.representing')">
-                                                <Tag style="margin-right: 5px" />
+                                                <Tag style="margin-right: 6px" />
                                             </TooltipWrapper>
                                             <TooltipWrapper v-if="group.memberVisibility !== 'visible'" side="top">
                                                 <template #content>
@@ -1015,7 +1010,7 @@
                                                         {{ group.memberVisibility }}</span
                                                     >
                                                 </template>
-                                                <Eye style="margin-right: 5px" />
+                                                <Eye style="margin-right: 6px" />
                                             </TooltipWrapper>
                                             <span>({{ group.memberCount }})</span>
                                         </div>
@@ -1039,7 +1034,7 @@
                             <Spinner v-if="userDialog.isWorldsLoading" />
                             <RefreshCw v-else />
                         </Button>
-                        <span style="margin-left: 5px">{{
+                        <span style="margin-left: 6px">{{
                             t('dialog.user.worlds.total_count', { count: userDialog.worlds.length })
                         }}</span>
                     </div>
@@ -1080,7 +1075,7 @@
                         </Select>
                     </div>
                 </div>
-                <div class="flex flex-wrap items-start" style="margin-top: 10px; min-height: 60px">
+                <div class="flex flex-wrap items-start" style="margin-top: 8px; min-height: 60px">
                     <template v-if="userDialog.worlds.length">
                         <div
                             v-for="world in userDialog.worlds"
@@ -1136,7 +1131,7 @@
                         :items="favoriteWorldTabs"
                         :unmount-on-hide="false"
                         class="zero-margin-tabs"
-                        style="margin-top: 10px; height: 50vh">
+                        style="margin-top: 8px; height: 50vh">
                         <template
                             v-for="(list, index) in userDialog.userFavoriteWorlds"
                             :key="`favorite-worlds-label-${index}`"
@@ -1144,11 +1139,11 @@
                             <span>
                                 <i
                                     class="x-status-icon"
-                                    style="margin-right: 6px"
+                                    style="margin-right: 8px"
                                     :class="userFavoriteWorldsStatus(list[1])">
                                 </i>
                                 <span style="font-weight: bold; font-size: 14px" v-text="list[0]"></span>
-                                <span style="font-size: 10px; margin-left: 5px"
+                                <span style="font-size: 10px; margin-left: 6px"
                                     >{{ list[2].length }}/{{ favoriteLimits.maxFavoritesPerGroup.world }}</span
                                 >
                             </span>
@@ -1159,7 +1154,7 @@
                             v-slot:[String(index)]>
                             <div
                                 class="flex flex-wrap items-start"
-                                style="margin-top: 10px; margin-bottom: 15px; min-height: 60px; max-height: none">
+                                style="margin-top: 8px; margin-bottom: 16px; min-height: 60px; max-height: none">
                                 <div
                                     v-for="world in list[2]"
                                     :key="world.favoriteId"
@@ -1217,7 +1212,7 @@
                             <Spinner v-if="userDialog.isAvatarsLoading" />
                             <RefreshCw v-else />
                         </Button>
-                        <span style="margin-left: 5px">{{
+                        <span style="margin-left: 6px">{{
                             t('dialog.user.avatars.total_count', { count: userDialogAvatars.length })
                         }}</span>
                     </div>
@@ -1267,7 +1262,7 @@
                 </div>
                 <div
                     class="flex flex-wrap items-start"
-                    style="margin-top: 10px; min-height: 60px; max-height: 50vh; overflow: auto">
+                    style="margin-top: 8px; min-height: 60px; max-height: 50vh; overflow: auto">
                     <template v-if="filteredUserDialogAvatars.length">
                         <div
                             v-for="avatar in filteredUserDialogAvatars"
diff --git a/src/components/dialogs/UserDialog/UserSummaryHeader.vue b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
index 059602da..07c86772 100644
--- a/src/components/dialogs/UserDialog/UserSummaryHeader.vue
+++ b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
@@ -19,7 +19,7 @@
                 @click="showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)"
                 loading="lazy" />
         </div>
-        <div style="flex: 1; display: flex; align-items: flex-start; margin-left: 15px">
+        <div class="ml-4" style="flex: 1; display: flex; align-items: flex-start">
             <div style="flex: 1">
                 <div>
                     <TooltipWrapper v-if="userDialog.ref.status" side="top">
@@ -47,13 +47,13 @@
                     </template>
                     <span
                         class="font-bold"
-                        style="margin-left: 5px; margin-right: 5px; cursor: pointer"
+                        style="margin-left: 6px; margin-right: 6px; cursor: pointer"
                         v-text="userDialog.ref.displayName"
                         @click="copyUserDisplayName(userDialog.ref.displayName)"></span>
                     <TooltipWrapper v-if="userDialog.ref.pronouns" side="top" :content="t('dialog.user.pronouns')">
                         <span
                             class="x-grey"
-                            style="margin-right: 5px; font-family: monospace; font-size: 12px"
+                            style="margin-right: 6px; font-family: monospace; font-size: 12px"
                             v-text="userDialog.ref.pronouns"></span>
                     </TooltipWrapper>
                     <TooltipWrapper v-for="item in userDialog.ref.$languages" :key="item.key" side="top">
@@ -63,13 +63,13 @@
                         <span
                             class="flags"
                             :class="languageClass(item.key)"
-                            style="display: inline-block; margin-right: 5px"></span>
+                            style="display: inline-block; margin-right: 6px"></span>
                     </TooltipWrapper>
                     <template v-if="userDialog.ref.id === currentUser.id">
                         <br />
                         <span
                             class="x-grey"
-                            style="margin-right: 10px; font-family: monospace; font-size: 12px; cursor: pointer"
+                            style="margin-right: 8px; font-family: monospace; font-size: 12px; cursor: pointer"
                             v-text="currentUser.username"
                             @click="copyUserDisplayName(currentUser.username)"></span>
                     </template>
@@ -181,8 +181,8 @@
                                             width: 32px;
                                             border-radius: var(--radius-sm);
                                             object-fit: cover;
-                                            margin-top: 5px;
-                                            margin-right: 5px;
+                                            margin-top: 6px;
+                                            margin-right: 6px;
                                         "
                                         :class="{ grayscale: badge.hidden }"
                                         loading="lazy" />
@@ -208,7 +208,7 @@
                                         </span>
                                         <template v-if="userDialog.id === currentUser.id">
                                             <br />
-                                            <label class="inline-flex items-center gap-2" style="margin-top: 5px">
+                                            <label class="inline-flex items-center gap-2" style="margin-top: 6px">
                                                 <Checkbox
                                                     v-model="badge.hidden"
                                                     @update:modelValue="toggleBadgeVisibility(badge)" />
@@ -233,7 +233,7 @@
                 </div>
             </div>
 
-            <div v-if="userDialog.ref.userIcon" style="flex: none; margin-right: 10px">
+            <div v-if="userDialog.ref.userIcon" style="flex: none; margin-right: 8px">
                 <img
                     class="cursor-pointer"
                     :src="userImage(userDialog.ref, true, '256', true)"
diff --git a/src/components/dialogs/VRCXUpdateDialog.vue b/src/components/dialogs/VRCXUpdateDialog.vue
index f774951b..6256c339 100644
--- a/src/components/dialogs/VRCXUpdateDialog.vue
+++ b/src/components/dialogs/VRCXUpdateDialog.vue
@@ -4,14 +4,14 @@
             <DialogHeader>
                 <DialogTitle>{{ t('dialog.vrcx_updater.header') }}</DialogTitle>
             </DialogHeader>
-            <div style="margin-top: 15px">
+            <div class="mt-4">
                 <template v-if="updateInProgress">
                     <Progress :model-value="updateProgress" class="w-full" />
                     <div class="mt-2 text-xs" v-text="updateProgressText()"></div>
                     <br />
                 </template>
                 <template v-else>
-                    <div v-if="VRCXUpdateDialog.updatePending" style="margin-bottom: 15px">
+                    <div v-if="VRCXUpdateDialog.updatePending" style="margin-bottom: 16px">
                         <span>{{ pendingVRCXInstall }}</span>
                         <br />
                         <span>{{ t('dialog.vrcx_updater.ready_for_update') }}</span>
diff --git a/src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue b/src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue
index 88f4637a..e81d117e 100644
--- a/src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue
+++ b/src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue
@@ -19,14 +19,14 @@
                 <Checkbox v-model="setWorldTagsDialog.debugAllowed" />
                 <span>{{ t('dialog.set_world_tags.enable_debugging') }}</span>
             </label>
-            <div style="font-size: 12px; margin-top: 10px">{{ t('dialog.set_world_tags.author_tags') }}<br /></div>
+            <div class="mt-2" style="font-size: 12px">{{ t('dialog.set_world_tags.author_tags') }}<br /></div>
             <InputGroupTextareaField
                 v-model="setWorldTagsDialog.authorTags"
                 :rows="2"
                 placeholder=""
-                style="margin-top: 10px"
-                input-class="resize-none" />
-            <div style="font-size: 12px; margin-top: 10px">{{ t('dialog.set_world_tags.content_tags') }}<br /></div>
+               
+                input-class="resize-none mt-2" />
+            <div class="mt-2" style="font-size: 12px">{{ t('dialog.set_world_tags.content_tags') }}<br /></div>
             <label class="inline-flex items-center gap-2">
                 <Checkbox v-model="setWorldTagsDialog.contentHorror" />
                 <span>{{ t('dialog.set_world_tags.content_horror') }}</span>
@@ -51,7 +51,7 @@
                 <Checkbox v-model="setWorldTagsDialog.contentSex" />
                 <span>{{ t('dialog.set_world_tags.content_sex') }}</span>
             </label>
-            <div style="font-size: 12px; margin-top: 10px">
+            <div class="mt-2" style="font-size: 12px">
                 {{ t('dialog.set_world_tags.default_content_settings') }}<br />
             </div>
             <label class="inline-flex items-center gap-2">
diff --git a/src/components/dialogs/WorldDialog/WorldAllowedDomainsDialog.vue b/src/components/dialogs/WorldDialog/WorldAllowedDomainsDialog.vue
index d27b0261..9af1e055 100644
--- a/src/components/dialogs/WorldDialog/WorldAllowedDomainsDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldAllowedDomainsDialog.vue
@@ -7,16 +7,16 @@
 
             <div>
                 <InputGroupAction
+                    class="mt-1.5"
                     v-for="(domain, index) in urlList"
                     :key="index"
                     v-model="urlList[index]"
-                    size="sm"
-                    style="margin-top: 5px">
+                    size="sm">
                     <template #actions>
                         <Button variant="ghost" @click="urlList.splice(index, 1)"><Trash2 /></Button>
                     </template>
                 </InputGroupAction>
-                <Button size="sm" variant="outline" style="margin-top: 5px" @click="urlList.push('')">
+                <Button size="sm" variant="outline" style="margin-top: 6px" @click="urlList.push('')">
                     {{ t('dialog.allowed_video_player_domains.add_domain') }}
                 </Button>
             </div>
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index 17cf12e9..5e9ac614 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -17,10 +17,10 @@
                         @click="showFullscreenImageDialog(worldDialog.ref.imageUrl)"
                         loading="lazy" />
                 </div>
-                <div style="flex: 1; display: flex; align-items: flex-start; margin-left: 15px">
+                <div class="ml-4" style="flex: 1; display: flex; align-items: flex-start">
                     <div style="flex: 1">
                         <div>
-                            <span class="font-bold" style="margin-right: 5px; cursor: pointer" @click="copyWorldName">
+                            <span class="font-bold mr-1.5" style="cursor: pointer" @click="copyWorldName">
                                 <Home
                                     v-if="
                                         currentUser.$homeLocation &&
@@ -30,7 +30,7 @@
                                 {{ worldDialog.ref.name }}
                             </span>
                         </div>
-                        <div style="margin-top: 5px">
+                        <div class="mt-1.5">
                             <span
                                 class="cursor-pointer x-grey"
                                 style="font-family: monospace"
@@ -38,26 +38,20 @@
                                 v-text="worldDialog.ref.authorName" />
                         </div>
                         <div>
-                            <Badge
-                                v-if="worldDialog.ref.$isLabs"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
+                            <Badge class="mr-1.5 mt-1.5" v-if="worldDialog.ref.$isLabs" variant="outline">
                                 {{ t('dialog.world.tags.labs') }}
                             </Badge>
                             <Badge
+                                class="mr-1.5 mt-1.5"
                                 v-else-if="worldDialog.ref.releaseStatus === 'public'"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
+                                variant="outline">
                                 {{ t('dialog.world.tags.public') }}
                             </Badge>
-                            <Badge v-else variant="outline" style="margin-right: 5px; margin-top: 5px">
+                            <Badge class="mr-1.5 mt-1.5" v-else variant="outline">
                                 {{ t('dialog.world.tags.private') }}
                             </Badge>
                             <TooltipWrapper v-if="worldDialog.isPC" side="top" content="PC">
-                                <Badge
-                                    class="text-platform-pc border-platform-pc!"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
+                                <Badge class="text-platform-pc border-platform-pc! mr-1.5 mt-1.5" variant="outline">
                                     <Monitor class="h-4 w-4 text-platform-pc" />
                                     <span
                                         v-if="worldDialog.fileAnalysis.standalonewindows?._fileSize"
@@ -69,9 +63,8 @@
 
                             <TooltipWrapper v-if="worldDialog.isQuest" side="top" content="Quest">
                                 <Badge
-                                    class="text-platform-quest border-platform-quest!"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
+                                    class="text-platform-quest border-platform-quest! mr-1.5 mt-1.5"
+                                    variant="outline">
                                     <Smartphone class="h-4 w-4 text-platform-quest" />
                                     <span
                                         v-if="worldDialog.fileAnalysis.android?._fileSize"
@@ -82,10 +75,7 @@
                             </TooltipWrapper>
 
                             <TooltipWrapper v-if="worldDialog.isIos" side="top" content="iOS">
-                                <Badge
-                                    class="text-platform-ios border-platform-ios"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
+                                <Badge class="text-platform-ios border-platform-ios mr-1.5 mt-1.5" variant="outline">
                                     <Apple class="h-4 w-4 text-platform-ios" />
                                     <span
                                         v-if="worldDialog.fileAnalysis.ios?._fileSize"
@@ -95,29 +85,19 @@
                                 </Badge>
                             </TooltipWrapper>
 
-                            <Badge
-                                v-if="worldDialog.avatarScalingDisabled"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
+                            <Badge class="mr-1.5 mt-1.5" v-if="worldDialog.avatarScalingDisabled" variant="outline">
                                 {{ t('dialog.world.tags.avatar_scaling_disabled') }}
                             </Badge>
-                            <Badge
-                                v-if="worldDialog.focusViewDisabled"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
+                            <Badge class="mr-1.5 mt-1.5" v-if="worldDialog.focusViewDisabled" variant="outline">
                                 {{ t('dialog.world.tags.focus_view_disabled') }}
                             </Badge>
-                            <Badge
-                                v-if="worldDialog.ref.unityPackageUrl"
-                                variant="outline"
-                                style="margin-right: 5px; margin-top: 5px">
+                            <Badge class="mr-1.5 mt-1.5" v-if="worldDialog.ref.unityPackageUrl" variant="outline">
                                 {{ t('dialog.world.tags.future_proofing') }}
                             </Badge>
                             <Badge
                                 v-if="worldDialog.inCache"
                                 variant="outline"
-                                class="cursor-pointer"
-                                style="margin-right: 5px; margin-top: 5px"
+                                class="cursor-pointer mr-1.5 mt-1.5"
                                 @click="openFolderGeneric(worldDialog.cachePath)">
                                 <span v-text="worldDialog.cacheSize" />
                                 | {{ t('dialog.world.tags.cache') }}
@@ -125,10 +105,7 @@
                         </div>
                         <div>
                             <template v-for="tag in worldDialog.ref.tags" :key="tag">
-                                <Badge
-                                    v-if="tag.startsWith('content_')"
-                                    variant="outline"
-                                    style="margin-right: 5px; margin-top: 5px">
+                                <Badge class="mr-1.5 mt-1.5" v-if="tag.startsWith('content_')" variant="outline">
                                     <span v-if="tag === 'content_horror'">
                                         {{ t('dialog.world.tags.content_horror') }}
                                     </span>
@@ -150,7 +127,7 @@
                                 </Badge>
                             </template>
                         </div>
-                        <div style="margin-top: 5px; display: flex; align-items: center">
+                        <div style="margin-top: 6px; display: flex; align-items: center">
                             <span
                                 v-show="worldDialog.ref.name !== worldDialog.ref.description"
                                 style="font-size: 12px; flex: 1; margin-right: 0.5em"
@@ -334,13 +311,13 @@
                     <div class="flex items-center text-sm">
                         <User />
                         {{ t('dialog.world.instances.public_count', { count: worldDialog.ref.publicOccupants }) }}
-                        <User style="margin-left: 10px" />
+                        <User style="margin-left: 8px" />
                         {{
                             t('dialog.world.instances.private_count', {
                                 count: worldDialog.ref.privateOccupants
                             })
                         }}
-                        <Check style="margin-left: 10px" />
+                        <Check style="margin-left: 8px" />
                         {{
                             t('dialog.world.instances.capacity_count', {
                                 count: worldDialog.ref.recommendedCapacity,
@@ -351,7 +328,7 @@
                     <div v-for="room in worldDialog.rooms" :key="room.id">
                         <template
                             v-if="isAgeGatedInstancesVisible || !(room.ageGate || room.location?.includes('~ageGate'))">
-                            <div style="margin: 5px 0">
+                            <div style="margin: 6px 0">
                                 <div class="flex items-center">
                                     <LocationWorld
                                         class="text-sm"
@@ -376,7 +353,7 @@
                                 <div
                                     v-if="room.$location.userId || room.users.length"
                                     class="flex flex-wrap items-start"
-                                    style="margin: 10px 0; max-height: unset">
+                                    style="margin: 8px 0; max-height: unset">
                                     <div
                                         v-if="room.$location.userId"
                                         class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
@@ -582,7 +559,7 @@
                                 <TooltipWrapper
                                     v-if="Object.keys(worldDialog.fileAnalysis).length"
                                     side="top"
-                                    style="margin-left: 5px">
+                                    style="margin-left: 6px">
                                     <template #content>
                                         <template
                                             v-for="(created_at, platform) in worldDialogPlatformCreatedAt"
@@ -619,7 +596,7 @@
                                 <span class="block truncate font-medium leading-[18px]" style="display: inline">
                                     {{ t('dialog.world.info.publication_date') }}
                                 </span>
-                                <TooltipWrapper v-if="isTimeInLabVisible" side="top" style="margin-left: 5px">
+                                <TooltipWrapper v-if="isTimeInLabVisible" side="top" style="margin-left: 6px">
                                     <template #content>
                                         <span>
                                             {{ t('dialog.world.info.time_in_labs') }}
diff --git a/src/styles/options-container.css b/src/styles/options-container.css
index 246c1b5a..36c7e122 100644
--- a/src/styles/options-container.css
+++ b/src/styles/options-container.css
@@ -5,7 +5,7 @@
 
 .options-container {
     margin-top: 30px;
-    padding: 0 10px 10px 10px;
+    padding: 0 8px 8px 8px;
 }
 
 .options-container .header-bar {
@@ -25,7 +25,7 @@
 
 .options-container-item {
     font-size: 12px;
-    margin-top: 5px;
+    margin-top: 6px;
     display: flex;
     align-items: center;
 }
diff --git a/src/views/Charts/components/InstanceActivity.vue b/src/views/Charts/components/InstanceActivity.vue
index 26655297..68cbe601 100644
--- a/src/views/Charts/components/InstanceActivity.vue
+++ b/src/views/Charts/components/InstanceActivity.vue
@@ -2,12 +2,12 @@
     <div id="chart" class="x-container">
         <div ref="instanceActivityRef" class="pt-12">
             <BackToTop :target="instanceActivityRef" :right="30" :bottom="30" :teleport="false" />
-            <div class="options-container instance-activity" style="margin-top: 0">
+            <div class="options-container instance-activity mt-0">
                 <div>
                     <span>{{ t('view.charts.instance_activity.header') }}</span>
                     <HoverCard>
                         <HoverCardTrigger as-child>
-                            <Info style="margin-left: 4px; font-size: 12px; opacity: 0.7" />
+                            <Info class="ml-1" style="font-size: 12px; opacity: 0.7" />
                         </HoverCardTrigger>
                         <HoverCardContent side="bottom" align="start" class="w-75">
                             <div class="tips-popover">
@@ -21,12 +21,7 @@
 
                 <div>
                     <TooltipWrapper :content="t('view.charts.instance_activity.refresh')" side="top">
-                        <Button
-                            class="rounded-full"
-                            size="icon"
-                            variant="ghost"
-                            style="margin-right: 5px"
-                            @click="reloadData">
+                        <Button class="rounded-full mr-1.5" size="icon" variant="ghost" @click="reloadData">
                             <RefreshCcw />
                         </Button>
                     </TooltipWrapper>
@@ -37,7 +32,7 @@
                                 <TooltipWrapper
                                     :content="t('view.charts.instance_activity.settings.header')"
                                     side="top">
-                                    <Button class="rounded-full" size="icon" variant="ghost" style="margin-right: 5px">
+                                    <Button class="rounded-full mr-1.5" size="icon" variant="ghost">
                                         <Settings />
                                     </Button>
                                 </TooltipWrapper>
@@ -215,6 +210,9 @@
         setInstanceActivityHeight();
     });
 
+    /**
+     *
+     */
     function setInstanceActivityHeight() {
         if (instanceActivityRef.value) {
             const availableHeight = window.innerHeight - 110;
@@ -259,6 +257,10 @@
         }
     });
 
+    /**
+     *
+     * @param value
+     */
     function handleBarWidthCommit(value) {
         changeBarWidth(value?.[0] ?? barWidthDraft.value, () => handleEchartsRerender());
     }
@@ -303,6 +305,10 @@
         return fromDate(selectedDate.value ?? new Date(), calendarTimeZone);
     });
 
+    /**
+     *
+     * @param dateValue
+     */
     function isCalendarDateDisabled(dateValue) {
         try {
             return getDatePickerDisabledDate(toDate(dateValue, calendarTimeZone));
@@ -311,6 +317,10 @@
         }
     }
 
+    /**
+     *
+     * @param dateValue
+     */
     function handleCalendarModelUpdate(dateValue) {
         if (!dateValue) return;
         selectedDate.value = toDate(dateValue, calendarTimeZone);
@@ -430,6 +440,10 @@
         }
     };
 
+    /**
+     *
+     * @param params
+     */
     function handleYAxisLabelClick(params) {
         const targetActivity = activityData.value[params?.dataIndex];
         if (!targetActivity) {
@@ -463,6 +477,9 @@
         }
     }
 
+    /**
+     *
+     */
     function getYAxisData() {
         return worldNameArray.value.map((worldName, index) => {
             const activityItem = activityData.value[index];
@@ -479,6 +496,9 @@
         });
     }
 
+    /**
+     *
+     */
     function initEcharts() {
         const chartsHeight = activityData.value.length * (barWidth.value + 10) + 200;
         const chartDom = activityChartRef.value;
@@ -533,6 +553,9 @@
         }
         afterInit();
     }
+    /**
+     *
+     */
     function getNewOption() {
         const getTooltip = (params) => {
             const activityDataArray = activityData.value;
@@ -560,7 +583,7 @@
 
             return `
                         <div style="display: flex; align-items: center;">
-                            <div style="width: 10px; height: 55px; background-color: ${color}; margin-right: 5px;"></div>
+                            <div style="width: 10px; height: 55px; background-color: ${color}; margin-right: 6px;"></div>
                             <div>
                                 <div>${name} #${location.instanceName} ${location.accessTypeName}</div>
                                 <div>${formattedJoinDateTime} - ${formattedLeftDateTime}</div>
@@ -673,10 +696,16 @@
         return echartsOption;
     }
 
+    /**
+     *
+     */
     function handleEchartsRerender() {
         initEcharts();
         handleSettingsChange();
     }
+    /**
+     *
+     */
     function handleSettingsChange() {
         handleChangeSettings(activityDetailChartRef);
 
@@ -716,12 +745,12 @@
     }
     .tips-popover {
         & > div {
-            margin-bottom: 5px;
+            margin-bottom: 6px;
             font-size: 12px;
         }
         & > div:last-child {
             @extend %flex;
-            margin-top: 10px;
+            margin-top: 8px;
             i {
                 margin-right: 3px;
             }
diff --git a/src/views/Charts/components/InstanceActivityDetail.vue b/src/views/Charts/components/InstanceActivityDetail.vue
index 9b5b0a90..6a4ad01e 100644
--- a/src/views/Charts/components/InstanceActivityDetail.vue
+++ b/src/views/Charts/components/InstanceActivityDetail.vue
@@ -1,6 +1,6 @@
 <template>
     <div style="width: 100%">
-        <div style="height: 25px; margin-top: 60px">
+        <div class="mt-15" style="height: 25px">
             <transition name="el-fade-in-linear">
                 <Location
                     v-show="!isLoading"
@@ -106,6 +106,9 @@
         }
     });
 
+    /**
+     *
+     */
     function initResizeObserver() {
         resizeObserver.value = new ResizeObserver((entries) => {
             if (!echartsInstance) {
@@ -126,6 +129,9 @@
         });
     }
 
+    /**
+     *
+     */
     async function initEcharts() {
         if (!activityDetailChartRef.value || !props.activityDetailData || props.activityDetailData.length === 0) {
             isLoading.value = false;
@@ -183,6 +189,10 @@
         setTimeout(afterInit, 50);
     }
 
+    /**
+     *
+     * @param params
+     */
     function handleClickYAxisLabel(params) {
         const userData = usersFirstActivity.value[params.dataIndex];
         if (userData?.user_id) {
@@ -190,6 +200,9 @@
         }
     }
 
+    /**
+     *
+     */
     function getNewOption() {
         if (!props.activityDetailData || props.activityDetailData.length === 0) {
             return {
@@ -346,7 +359,7 @@
 
             return `
                     <div style="display: flex; align-items: center;">
-                        <div style="width: 10px; height: 55px; background-color: ${color}; margin-right: 5px;"></div>
+                        <div style="width: 10px; height: 55px; background-color: ${color}; margin-right: 6px;"></div>
                         <div>
                             <div>${instanceData.display_name} ${friendOrFavIcon(instanceData.display_name)}</div>
                             <div>${formattedJoinDateTime} - ${formattedLeftDateTime}</div>
diff --git a/src/views/Favorites/FavoritesAvatar.vue b/src/views/Favorites/FavoritesAvatar.vue
index 96bb288b..9c8bad77 100644
--- a/src/views/Favorites/FavoritesAvatar.vue
+++ b/src/views/Favorites/FavoritesAvatar.vue
@@ -1683,7 +1683,7 @@
     }
 
     .favorites-dropdown {
-        padding: 10px;
+        padding: 8px;
     }
 
     .group-section {
@@ -1752,7 +1752,7 @@
     .group-item__visibility {
         display: flex;
         align-items: center;
-        gap: 5px;
+        gap: 6px;
     }
 
     .group-item__visibility-text {
@@ -1792,7 +1792,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        gap: 6px;
+        gap: 8px;
         font-size: 14px;
     }
 
@@ -1912,7 +1912,7 @@
         box-sizing: border-box;
         border: 1px solid var(--border);
         border-radius: calc(var(--radius-lg) * var(--favorites-card-scale, 1));
-        padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
+        padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 8px);
         cursor: pointer;
         transition: background-color 0.15s ease;
         width: 100%;
@@ -1928,7 +1928,7 @@
     :deep(.favorites-search-card__content) {
         display: flex;
         align-items: center;
-        gap: var(--favorites-card-content-gap, 10px);
+        gap: var(--favorites-card-content-gap, 8px);
         flex: 1;
         min-width: 0;
     }
@@ -1982,7 +1982,7 @@
     :deep(.favorites-search-card__title) {
         display: flex;
         align-items: center;
-        gap: 6px;
+        gap: 8px;
     }
 
     :deep(.favorites-search-card__badges) {
@@ -2015,7 +2015,7 @@
 
     :deep(.favorites-search-card__action-group) {
         display: flex;
-        gap: var(--favorites-card-action-group-gap, 6px);
+        gap: var(--favorites-card-action-group-gap, 8px);
         width: 100%;
     }
 
@@ -2026,7 +2026,7 @@
     :deep(.favorites-search-card__action--checkbox) {
         align-items: center;
         justify-content: flex-end;
-        margin-right: var(--favorites-card-checkbox-margin, 10px);
+        margin-right: var(--favorites-card-checkbox-margin, 8px);
     }
 
     :deep(.favorites-search-card__action--checkbox [data-slot='checkbox']) {
@@ -2058,7 +2058,7 @@
         justify-content: space-between;
         font-size: 13px;
         font-weight: 600;
-        margin-bottom: 6px;
+        margin-bottom: 8px;
     }
 
     .favorites-dropdown__control-value {
diff --git a/src/views/Favorites/FavoritesFriend.vue b/src/views/Favorites/FavoritesFriend.vue
index 04b72d43..16518b2d 100644
--- a/src/views/Favorites/FavoritesFriend.vue
+++ b/src/views/Favorites/FavoritesFriend.vue
@@ -1323,7 +1323,7 @@
     }
 
     .favorites-dropdown {
-        padding: 10px;
+        padding: 8px;
     }
 
     .group-section {
@@ -1392,7 +1392,7 @@
     .group-item__visibility {
         display: flex;
         align-items: center;
-        gap: 5px;
+        gap: 6px;
     }
 
     .group-item__visibility-text {
@@ -1430,7 +1430,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        gap: 6px;
+        gap: 8px;
         font-size: 14px;
     }
 
@@ -1539,7 +1539,7 @@
         box-sizing: border-box;
         border: 1px solid var(--border);
         border-radius: calc(var(--radius-lg) * var(--favorites-card-scale, 1));
-        padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
+        padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 8px);
         cursor: pointer;
         transition: background-color 0.15s ease;
         width: 100%;
@@ -1558,7 +1558,7 @@
     :deep(.favorites-search-card__content) {
         display: flex;
         align-items: center;
-        gap: var(--favorites-card-content-gap, 10px);
+        gap: var(--favorites-card-content-gap, 8px);
         flex: 1;
         min-width: 0;
     }
@@ -1612,7 +1612,7 @@
     :deep(.favorites-search-card__title) {
         display: flex;
         align-items: center;
-        gap: 6px;
+        gap: 8px;
     }
 
     :deep(.favorites-search-card__badges) {
@@ -1645,7 +1645,7 @@
 
     :deep(.favorites-search-card__action-group) {
         display: flex;
-        gap: var(--favorites-card-action-group-gap, 6px);
+        gap: var(--favorites-card-action-group-gap, 8px);
         width: 100%;
     }
 
@@ -1656,7 +1656,7 @@
     :deep(.favorites-search-card__action--checkbox) {
         align-items: center;
         justify-content: flex-end;
-        margin-right: var(--favorites-card-checkbox-margin, 10px);
+        margin-right: var(--favorites-card-checkbox-margin, 8px);
     }
 
     :deep(.favorites-search-card__action--checkbox [data-slot='checkbox']) {
@@ -1698,7 +1698,7 @@
         justify-content: space-between;
         font-size: 13px;
         font-weight: 600;
-        margin-bottom: 6px;
+        margin-bottom: 8px;
     }
 
     .favorites-dropdown__control-value {
diff --git a/src/views/Favorites/FavoritesWorld.vue b/src/views/Favorites/FavoritesWorld.vue
index 69a03a0a..b89d2e9f 100644
--- a/src/views/Favorites/FavoritesWorld.vue
+++ b/src/views/Favorites/FavoritesWorld.vue
@@ -1545,7 +1545,7 @@
     }
 
     .favorites-dropdown {
-        padding: 10px;
+        padding: 8px;
     }
 
     .favorites-groups-panel {
@@ -1623,7 +1623,7 @@
     .group-item__visibility {
         display: flex;
         align-items: center;
-        gap: 5px;
+        gap: 6px;
     }
 
     .group-item__visibility-text {
@@ -1666,7 +1666,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        gap: 6px;
+        gap: 8px;
         font-size: 14px;
     }
 
@@ -1828,7 +1828,7 @@
         box-sizing: border-box;
         border: 1px solid var(--border);
         border-radius: calc(var(--radius-lg) * var(--favorites-card-scale, 1));
-        padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
+        padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 8px);
         cursor: pointer;
         transition: background-color 0.15s ease;
         width: 100%;
@@ -1847,7 +1847,7 @@
     :deep(.favorites-search-card__content) {
         display: flex;
         align-items: center;
-        gap: var(--favorites-card-content-gap, 10px);
+        gap: var(--favorites-card-content-gap, 8px);
         flex: 1;
         min-width: 0;
     }
@@ -1901,7 +1901,7 @@
     :deep(.favorites-search-card__title) {
         display: flex;
         align-items: center;
-        gap: 6px;
+        gap: 8px;
     }
 
     :deep(.favorites-search-card__badges) {
@@ -1934,7 +1934,7 @@
 
     :deep(.favorites-search-card__action-group) {
         display: flex;
-        gap: var(--favorites-card-action-group-gap, 6px);
+        gap: var(--favorites-card-action-group-gap, 8px);
         width: 100%;
     }
 
@@ -1945,7 +1945,7 @@
     :deep(.favorites-search-card__action--checkbox) {
         align-items: center;
         justify-content: flex-end;
-        margin-right: var(--favorites-card-checkbox-margin, 10px);
+        margin-right: var(--favorites-card-checkbox-margin, 8px);
     }
 
     :deep(.favorites-search-card__action--checkbox [data-slot='checkbox']) {
@@ -1980,7 +1980,7 @@
         justify-content: space-between;
         font-size: 13px;
         font-weight: 600;
-        margin-bottom: 6px;
+        margin-bottom: 8px;
     }
 
     .favorites-dropdown__control-value {
diff --git a/src/views/Favorites/components/FavoritesMoveDropdown.vue b/src/views/Favorites/components/FavoritesMoveDropdown.vue
index aa24c5b4..14c5e975 100644
--- a/src/views/Favorites/components/FavoritesMoveDropdown.vue
+++ b/src/views/Favorites/components/FavoritesMoveDropdown.vue
@@ -1,5 +1,5 @@
 <template>
-    <DropdownMenu v-model:open="moveDropdownOpen" style="margin-left: 5px">
+    <DropdownMenu class="ml-1.5" v-model:open="moveDropdownOpen">
         <DropdownMenuTrigger as-child>
             <Button class="rounded-full w-6 h-6 text-xs" size="icon-sm" variant="ghost"
                 ><ArrowLeft class="h-4 w-4"
@@ -11,10 +11,11 @@
             </span>
             <DropdownMenuSeparator />
             <DropdownMenuItem
+                class="my-2 mx-0"
                 v-for="groupAPI in favoriteGroupList"
                 :key="groupAPI.name"
                 v-if="isLocalFavorite || groupAPI?.name !== currentGroup?.name"
-                style="display: block; margin: 10px 0"
+                style="display: block"
                 :disabled="groupAPI.count >= groupAPI.capacity"
                 @click="handleDropdownItemClick(groupAPI)">
                 {{ groupAPI.displayName }} ({{ groupAPI.count }} / {{ groupAPI.capacity }})
@@ -74,6 +75,10 @@
     });
     const moveDropdownOpen = ref(false);
 
+    /**
+     *
+     * @param groupAPI
+     */
     function handleDropdownItemClick(groupAPI) {
         moveDropdownOpen.value = false;
         if (props.isLocalFavorite) {
@@ -87,6 +92,11 @@
         }
     }
 
+    /**
+     *
+     * @param ref
+     * @param group
+     */
     function moveFavorite(ref, group) {
         favoriteRequest.deleteFavorite({ objectId: ref.id }).then(() => {
             favoriteRequest.addFavorite({
@@ -97,6 +107,10 @@
         });
     }
 
+    /**
+     *
+     * @param groupAPI
+     */
     function addFavoriteAvatar(groupAPI) {
         return favoriteRequest
             .addFavorite({
@@ -110,6 +124,10 @@
             });
     }
 
+    /**
+     *
+     * @param groupAPI
+     */
     function addFavoriteWorld(groupAPI) {
         return favoriteRequest
             .addFavorite({
diff --git a/src/views/Favorites/dialogs/AvatarExportDialog.vue b/src/views/Favorites/dialogs/AvatarExportDialog.vue
index d2be634f..58f6e403 100644
--- a/src/views/Favorites/dialogs/AvatarExportDialog.vue
+++ b/src/views/Favorites/dialogs/AvatarExportDialog.vue
@@ -5,7 +5,7 @@
                 <DialogTitle>{{ t('dialog.avatar_export.header') }}</DialogTitle>
             </DialogHeader>
 
-            <div style="margin-bottom: 10px" class="flex flex-col gap-2">
+            <div class="flex flex-col gap-2 mb-2">
                 <label v-for="option in exportSelectOptions" :key="option.value" class="inline-flex items-center gap-2">
                     <Checkbox
                         :model-value="exportSelectedOptions.includes(option.label)"
@@ -35,9 +35,9 @@
                 </Select>
 
                 <Select
+                    class="ml-2"
                     :model-value="avatarExportLocalFavoriteGroupSelection"
-                    @update:modelValue="handleAvatarExportLocalFavoriteGroupSelect"
-                    style="margin-left: 10px">
+                    @update:modelValue="handleAvatarExportLocalFavoriteGroupSelect">
                     <SelectTrigger size="sm">
                         <SelectValue placeholder="Select Group" />
                     </SelectTrigger>
@@ -56,8 +56,7 @@
                 v-model="avatarExportContent"
                 :rows="15"
                 readonly
-                style="margin-top: 15px"
-                input-class="resize-none"
+                input-class="resize-none mt-4"
                 @click="handleCopyAvatarExportData" />
         </DialogContent>
     </Dialog>
diff --git a/src/views/Favorites/dialogs/AvatarImportDialog.vue b/src/views/Favorites/dialogs/AvatarImportDialog.vue
index 720e45c5..812365cf 100644
--- a/src/views/Favorites/dialogs/AvatarImportDialog.vue
+++ b/src/views/Favorites/dialogs/AvatarImportDialog.vue
@@ -20,18 +20,14 @@
                     </Button>
                 </div>
             </div>
-            <InputGroupTextareaField
-                v-model="avatarImportDialog.input"
-                :rows="10"
-                style="margin-top: 10px"
-                input-class="resize-none" />
-            <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 5px">
+            <InputGroupTextareaField v-model="avatarImportDialog.input" :rows="10" input-class="resize-none mt-2" />
+            <div class="mt-1.5" style="display: flex; align-items: center; justify-content: space-between">
                 <div>
                     <div class="flex items-center gap-2">
                         <Select
+                            class="mr-1.5"
                             :model-value="avatarImportFavoriteGroupSelection"
-                            @update:modelValue="handleAvatarImportGroupSelect"
-                            style="margin-right: 5px">
+                            @update:modelValue="handleAvatarImportGroupSelect">
                             <SelectTrigger size="sm">
                                 <SelectValue :placeholder="t('dialog.avatar_import.select_group_placeholder')" />
                             </SelectTrigger>
@@ -49,9 +45,9 @@
                         </Select>
 
                         <Select
+                            class="ml-2"
                             :model-value="avatarImportLocalFavoriteGroupSelection"
-                            @update:modelValue="handleAvatarImportLocalGroupSelect"
-                            style="margin-left: 10px">
+                            @update:modelValue="handleAvatarImportLocalGroupSelect">
                             <SelectTrigger size="sm">
                                 <SelectValue :placeholder="t('dialog.avatar_import.select_group_placeholder')" />
                             </SelectTrigger>
@@ -64,7 +60,7 @@
                             </SelectContent>
                         </Select>
                     </div>
-                    <span v-if="avatarImportDialog.avatarImportFavoriteGroup" style="margin-left: 5px">
+                    <span class="ml-1.5" v-if="avatarImportDialog.avatarImportFavoriteGroup">
                         {{ avatarImportTable.data.length }} /
                         {{
                             avatarImportDialog.avatarImportFavoriteGroup.capacity -
@@ -88,7 +84,7 @@
                     </Button>
                 </div>
             </div>
-            <span v-if="avatarImportDialog.importProgress" style="margin: 10px">
+            <span class="m-2" v-if="avatarImportDialog.importProgress">
                 <Spinner class="inline-block ml-2 mr-2" />
                 {{ t('dialog.avatar_import.import_progress') }}
                 {{ avatarImportDialog.importProgress }}/{{ avatarImportDialog.importProgressTotal }}
@@ -98,7 +94,7 @@
                 <Button size="sm" variant="secondary" @click="avatarImportDialog.errors = ''">
                     {{ t('dialog.avatar_import.clear_errors') }}
                 </Button>
-                <h2 style="font-weight: bold; margin: 5px 0">
+                <h2 class="my-1.5 mx-0" style="font-weight: bold">
                     {{ t('dialog.avatar_import.errors') }}
                 </h2>
                 <pre style="white-space: pre-wrap; font-size: 12px" v-text="avatarImportDialog.errors"></pre>
@@ -109,7 +105,7 @@
                 :loading="avatarImportDialog.loading"
                 :table-style="tableStyle"
                 :show-pagination="false"
-                style="margin-top: 10px" />
+                style="margin-top: 8px" />
         </DialogContent>
     </Dialog>
 </template>
@@ -212,6 +208,9 @@
         }
     );
 
+    /**
+     *
+     */
     async function processAvatarImportList() {
         const D = avatarImportDialog.value;
         D.loading = true;
@@ -253,21 +252,35 @@
         D.progressTotal = 0;
     }
 
+    /**
+     *
+     * @param ref
+     */
     function deleteItemAvatarImport(ref) {
         removeFromArray(avatarImportTable.value.data, ref);
         avatarImportDialog.value.avatarIdList.delete(ref.id);
     }
 
+    /**
+     *
+     */
     function resetAvatarImport() {
         avatarImportDialog.value.input = '';
         avatarImportDialog.value.errors = '';
     }
 
+    /**
+     *
+     */
     function clearAvatarImportTable() {
         avatarImportTable.value.data = [];
         avatarImportDialog.value.avatarIdList = new Set();
     }
 
+    /**
+     *
+     * @param group
+     */
     function selectAvatarImportGroup(group) {
         avatarImportDialog.value.avatarImportLocalFavoriteGroup = null;
         avatarImportDialog.value.avatarImportFavoriteGroup = group;
@@ -275,6 +288,10 @@
         avatarImportLocalFavoriteGroupSelection.value = '';
     }
 
+    /**
+     *
+     * @param group
+     */
     function selectAvatarImportLocalGroup(group) {
         avatarImportDialog.value.avatarImportFavoriteGroup = null;
         avatarImportDialog.value.avatarImportLocalFavoriteGroup = group;
@@ -282,20 +299,37 @@
         avatarImportLocalFavoriteGroupSelection.value = group ?? '';
     }
 
+    /**
+     *
+     * @param value
+     */
     function handleAvatarImportGroupSelect(value) {
         avatarImportFavoriteGroupSelection.value = value;
         const group = favoriteAvatarGroups.value.find((g) => g.name === value) ?? null;
         selectAvatarImportGroup(group);
     }
 
+    /**
+     *
+     * @param value
+     */
     function handleAvatarImportLocalGroupSelect(value) {
         avatarImportLocalFavoriteGroupSelection.value = value;
         selectAvatarImportLocalGroup(value || null);
     }
 
+    /**
+     *
+     */
     function cancelAvatarImport() {
         avatarImportDialog.value.loading = false;
     }
+    /**
+     *
+     * @param ref
+     * @param group
+     * @param message
+     */
     function addFavoriteAvatar(ref, group, message) {
         return favoriteRequest
             .addFavorite({
@@ -310,6 +344,9 @@
                 return args;
             });
     }
+    /**
+     *
+     */
     async function importAvatarImportTable() {
         const D = avatarImportDialog.value;
         if (!D.avatarImportFavoriteGroup && !D.avatarImportLocalFavoriteGroup) {
diff --git a/src/views/Favorites/dialogs/FriendExportDialog.vue b/src/views/Favorites/dialogs/FriendExportDialog.vue
index f9c9a153..348e81ba 100644
--- a/src/views/Favorites/dialogs/FriendExportDialog.vue
+++ b/src/views/Favorites/dialogs/FriendExportDialog.vue
@@ -24,9 +24,9 @@
             </Select>
 
             <Select
+                class="mt-4"
                 :model-value="friendExportLocalFavoriteGroupSelection"
-                @update:modelValue="handleFriendExportLocalGroupSelect"
-                style="margin-top: 15px">
+                @update:modelValue="handleFriendExportLocalGroupSelect">
                 <SelectTrigger size="sm">
                     <SelectValue placeholder="Select Group" />
                 </SelectTrigger>
@@ -45,8 +45,7 @@
                 v-model="friendExportContent"
                 :rows="15"
                 readonly
-                style="margin-top: 15px"
-                input-class="resize-none"
+                input-class="resize-none mt-4"
                 @click="handleCopyFriendExportData" />
         </DialogContent>
     </Dialog>
diff --git a/src/views/Favorites/dialogs/FriendImportDialog.vue b/src/views/Favorites/dialogs/FriendImportDialog.vue
index 7d922d0f..cb036b18 100644
--- a/src/views/Favorites/dialogs/FriendImportDialog.vue
+++ b/src/views/Favorites/dialogs/FriendImportDialog.vue
@@ -23,8 +23,8 @@
             <InputGroupTextareaField
                 v-model="friendImportDialog.input"
                 :rows="10"
-                style="margin-top: 10px"
-                input-class="resize-none" />
+               
+                input-class="resize-none mt-2" />
             <div>
                 <div class="mb-2">
                     <div class="flex items-center gap-2">
@@ -47,10 +47,10 @@
                             </SelectContent>
                         </Select>
 
-                        <Select
+                        <Select class="ml-2"
                             :model-value="friendImportLocalFavoriteGroupSelection"
                             @update:modelValue="handleFriendImportLocalGroupSelect"
-                            style="margin-left: 10px">
+                           >
                             <SelectTrigger size="sm">
                                 <SelectValue :placeholder="t('dialog.world_import.select_local_group_placeholder')" />
                             </SelectTrigger>
@@ -63,7 +63,7 @@
                             </SelectContent>
                         </Select>
                     </div>
-                    <span v-if="friendImportDialog.friendImportFavoriteGroup" style="margin-left: 5px">
+                    <span class="ml-1.5" v-if="friendImportDialog.friendImportFavoriteGroup">
                         {{ friendImportTable.data.length }} /
                         {{
                             friendImportDialog.friendImportFavoriteGroup.capacity -
@@ -92,7 +92,7 @@
                     </Button>
                 </div>
             </div>
-            <span v-if="friendImportDialog.importProgress" style="margin: 10px">
+            <span class="m-2" v-if="friendImportDialog.importProgress">
                 <Spinner class="inline-block ml-2 mr-2" />
                 {{ t('dialog.friend_import.import_progress') }} {{ friendImportDialog.importProgress }}/{{
                     friendImportDialog.importProgressTotal
@@ -103,7 +103,7 @@
                 <Button size="sm" variant="secondary" @click="friendImportDialog.errors = ''">
                     {{ t('dialog.friend_import.clear_errors') }}
                 </Button>
-                <h2 style="font-weight: bold; margin: 5px 0">{{ t('dialog.friend_import.errors') }}</h2>
+                <h2 class="my-1.5 mx-0" style="font-weight: bold">{{ t('dialog.friend_import.errors') }}</h2>
                 <pre style="white-space: pre-wrap; font-size: 12px" v-text="friendImportDialog.errors"></pre>
             </template>
             <DataTableLayout
@@ -112,7 +112,7 @@
                 :loading="friendImportDialog.loading"
                 :table-style="tableStyle"
                 :show-pagination="false"
-                style="margin-top: 10px" />
+                style="margin-top: 8px" />
         </DialogContent>
     </Dialog>
 </template>
diff --git a/src/views/Favorites/dialogs/WorldExportDialog.vue b/src/views/Favorites/dialogs/WorldExportDialog.vue
index 695a18ca..62bb052d 100644
--- a/src/views/Favorites/dialogs/WorldExportDialog.vue
+++ b/src/views/Favorites/dialogs/WorldExportDialog.vue
@@ -5,7 +5,7 @@
                 <DialogTitle>{{ t('dialog.world_export.header') }}</DialogTitle>
             </DialogHeader>
 
-            <div style="margin-bottom: 10px" class="flex flex-col gap-2">
+            <div class="flex flex-col gap-2 mb-2">
                 <label v-for="option in exportSelectOptions" :key="option.value" class="inline-flex items-center gap-2">
                     <Checkbox
                         :model-value="exportSelectedOptions.includes(option.label)"
@@ -35,9 +35,9 @@
                 </Select>
 
                 <Select
+                    class="ml-2"
                     :model-value="worldExportLocalFavoriteGroupSelection"
-                    @update:modelValue="handleWorldExportLocalGroupSelect"
-                    style="margin-left: 10px">
+                    @update:modelValue="handleWorldExportLocalGroupSelect">
                     <SelectTrigger size="sm">
                         <SelectValue placeholder="Select Group" />
                     </SelectTrigger>
@@ -58,8 +58,7 @@
                 v-model="worldExportContent"
                 :rows="15"
                 readonly
-                style="margin-top: 15px"
-                input-class="resize-none"
+                input-class="resize-none mt-4"
                 @click="handleCopyWorldExportData" />
         </DialogContent>
     </Dialog>
diff --git a/src/views/Favorites/dialogs/WorldImportDialog.vue b/src/views/Favorites/dialogs/WorldImportDialog.vue
index 9c46b114..d00e5a9c 100644
--- a/src/views/Favorites/dialogs/WorldImportDialog.vue
+++ b/src/views/Favorites/dialogs/WorldImportDialog.vue
@@ -20,11 +20,7 @@
                     </Button>
                 </div>
             </div>
-            <InputGroupTextareaField
-                v-model="worldImportDialog.input"
-                :rows="10"
-                style="margin-top: 10px"
-                input-class="resize-none" />
+            <InputGroupTextareaField v-model="worldImportDialog.input" :rows="10" input-class="resize-none mt-2" />
             <div>
                 <div class="mb-2">
                     <div class="flex items-center gap-2">
@@ -48,9 +44,9 @@
                         </Select>
 
                         <Select
+                            class="ml-2"
                             :model-value="worldImportLocalFavoriteGroupSelection"
-                            @update:modelValue="handleWorldImportLocalGroupSelect"
-                            style="margin-left: 10px">
+                            @update:modelValue="handleWorldImportLocalGroupSelect">
                             <SelectTrigger size="sm">
                                 <SelectValue :placeholder="t('dialog.world_import.select_local_group_placeholder')" />
                             </SelectTrigger>
@@ -63,7 +59,7 @@
                             </SelectContent>
                         </Select>
                     </div>
-                    <span v-if="worldImportDialog.worldImportFavoriteGroup" style="margin-left: 5px">
+                    <span class="ml-1.5" v-if="worldImportDialog.worldImportFavoriteGroup">
                         {{ worldImportTable.data.length }} /
                         {{
                             worldImportDialog.worldImportFavoriteGroup.capacity -
@@ -92,7 +88,7 @@
                     </Button>
                 </div>
             </div>
-            <span v-if="worldImportDialog.importProgress" style="margin: 10px">
+            <span class="m-2" v-if="worldImportDialog.importProgress">
                 <Spinner class="inline-block ml-2 mr-2" />
                 {{ t('dialog.world_import.import_progress') }}
                 {{ worldImportDialog.importProgress }}/{{ worldImportDialog.importProgressTotal }}
@@ -102,7 +98,7 @@
                 <Button size="sm" variant="secondary" @click="worldImportDialog.errors = ''">
                     {{ t('dialog.world_import.clear_errors') }}
                 </Button>
-                <h2 style="font-weight: bold; margin: 5px 0">
+                <h2 class="my-1.5 mx-0" style="font-weight: bold">
                     {{ t('dialog.world_import.errors') }}
                 </h2>
                 <pre style="white-space: pre-wrap; font-size: 12px" v-text="worldImportDialog.errors"></pre>
@@ -113,7 +109,7 @@
                 :loading="worldImportDialog.loading"
                 :table-style="tableStyle"
                 :show-pagination="false"
-                style="margin-top: 10px" />
+                style="margin-top: 8px" />
         </DialogContent>
     </Dialog>
 </template>
@@ -218,11 +214,17 @@
         }
     );
 
+    /**
+     *
+     */
     function resetWorldImport() {
         worldImportDialog.value.input = '';
         worldImportDialog.value.errors = '';
     }
 
+    /**
+     *
+     */
     async function processWorldImportList() {
         const D = worldImportDialog.value;
         D.loading = true;
@@ -263,16 +265,27 @@
         D.progressTotal = 0;
     }
 
+    /**
+     *
+     * @param ref
+     */
     function deleteItemWorldImport(ref) {
         removeFromArray(worldImportTable.value.data, ref);
         worldImportDialog.value.worldIdList.delete(ref.id);
     }
 
+    /**
+     *
+     */
     function clearWorldImportTable() {
         worldImportTable.value.data = [];
         worldImportDialog.value.worldIdList = new Set();
     }
 
+    /**
+     *
+     * @param group
+     */
     function selectWorldImportGroup(group) {
         worldImportDialog.value.worldImportLocalFavoriteGroup = null;
         worldImportDialog.value.worldImportFavoriteGroup = group;
@@ -280,6 +293,10 @@
         worldImportLocalFavoriteGroupSelection.value = '';
     }
 
+    /**
+     *
+     * @param group
+     */
     function selectWorldImportLocalGroup(group) {
         worldImportDialog.value.worldImportFavoriteGroup = null;
         worldImportDialog.value.worldImportLocalFavoriteGroup = group;
@@ -287,21 +304,35 @@
         worldImportLocalFavoriteGroupSelection.value = group ?? '';
     }
 
+    /**
+     *
+     * @param value
+     */
     function handleWorldImportGroupSelect(value) {
         worldImportFavoriteGroupSelection.value = value;
         const group = favoriteWorldGroups.value.find((g) => g.name === value) ?? null;
         selectWorldImportGroup(group);
     }
 
+    /**
+     *
+     * @param value
+     */
     function handleWorldImportLocalGroupSelect(value) {
         worldImportLocalFavoriteGroupSelection.value = value;
         selectWorldImportLocalGroup(value || null);
     }
 
+    /**
+     *
+     */
     function cancelWorldImport() {
         worldImportDialog.value.loading = false;
     }
 
+    /**
+     *
+     */
     async function importWorldImportTable() {
         const D = worldImportDialog.value;
         if (!D.worldImportFavoriteGroup && !D.worldImportLocalFavoriteGroup) {
@@ -338,6 +369,12 @@
         }
     }
 
+    /**
+     *
+     * @param ref
+     * @param group
+     * @param message
+     */
     function addFavoriteWorld(ref, group, message) {
         return favoriteRequest
             .addFavorite({
diff --git a/src/views/Feed/Feed.vue b/src/views/Feed/Feed.vue
index 358c6b4e..39a9c690 100644
--- a/src/views/Feed/Feed.vue
+++ b/src/views/Feed/Feed.vue
@@ -8,7 +8,7 @@
             :total-items="totalItems"
             :on-page-size-change="handlePageSizeChange">
             <template #toolbar>
-                <div style="margin: 0 0 10px; display: flex; align-items: center">
+                <div class="mt-0 mx-0 mb-2" style="display: flex; align-items: center">
                     <div style="flex: none; display: flex; align-items: center" class="mr-2">
                         <Popover v-model:open="popoverOpen">
                             <PopoverTrigger as-child>
@@ -72,10 +72,11 @@
                         </ToggleGroupItem>
                     </ToggleGroup>
                     <InputGroupField
+                        class="ml-2"
                         v-model="feedTable.search"
                         :placeholder="t('view.feed.search_placeholder')"
                         clearable
-                        style="flex: 0.4; margin-left: 10px"
+                        style="flex: 0.4"
                         @keyup.enter="feedTableLookup"
                         @change="feedTableLookup" />
                 </div>
diff --git a/src/views/FriendList/FriendList.vue b/src/views/FriendList/FriendList.vue
index b88b74f3..31af5023 100644
--- a/src/views/FriendList/FriendList.vue
+++ b/src/views/FriendList/FriendList.vue
@@ -68,7 +68,7 @@
                                 <Button variant="outline" @click="showBulkUnfriendSelectionConfirm">
                                     {{ t('view.friend_list.bulk_unfriend_selection') }}
                                 </Button>
-                                <!-- el-button(size="small" @click="showBulkUnfriendAllConfirm" style="margin-right:5px") Bulk Unfriend All-->
+                                <!-- el-button(size="small" @click="showBulkUnfriendAllConfirm") Bulk Unfriend All-->
                             </div>
                             <div class="flex items-center mr-2">
                                 <span class="name mr-2 text-xs">{{ t('view.friend_list.bulk_unfriend') }}</span>
@@ -98,12 +98,12 @@
                     <DialogHeader>
                         <DialogTitle>{{ t('view.friend_list.load_dialog_title') }}</DialogTitle>
                     </DialogHeader>
-                    <div style="margin-bottom: 10px" v-text="t('view.friend_list.load_dialog_message')"></div>
+                    <div style="margin-bottom: 8px" v-text="t('view.friend_list.load_dialog_message')"></div>
                     <div class="flex items-center gap-2">
                         <Progress :model-value="friendsListLoadingPercent" class="h-4 w-full" />
                         <span class="text-xs w-10 text-right">{{ friendsListLoadingPercent }}%</span>
                     </div>
-                    <div style="margin-top: 10px; text-align: right">
+                    <div style="margin-top: 8px; text-align: right">
                         <span>{{ friendsListLoadingCurrent }} / {{ friendsListLoadingTotal }}</span>
                     </div>
                     <DialogFooter>
diff --git a/src/views/FriendLog/FriendLog.vue b/src/views/FriendLog/FriendLog.vue
index 05167d5b..b55258ac 100644
--- a/src/views/FriendLog/FriendLog.vue
+++ b/src/views/FriendLog/FriendLog.vue
@@ -8,7 +8,7 @@
             :total-items="totalItems"
             :on-page-size-change="handlePageSizeChange">
             <template #toolbar>
-                <div style="margin: 0 0 10px; display: flex; align-items: center">
+                <div class="mt-0 mx-0 mb-2" style="display: flex; align-items: center">
                     <Select
                         multiple
                         :model-value="
@@ -37,9 +37,10 @@
                         </SelectContent>
                     </Select>
                     <InputGroupField
+                        class="ml-2"
                         v-model="friendLogTable.filters[1].value"
                         :placeholder="t('view.friend_log.search_placeholder')"
-                        style="flex: 0.4; margin-left: 10px" />
+                        style="flex: 0.4" />
                 </div>
             </template>
         </DataTableLayout>
@@ -142,13 +143,24 @@
     );
 
     const { t } = useI18n();
+    /**
+     *
+     */
     function saveTableFilters() {
         configRepository.setString('VRCX_friendLogTableFilters', JSON.stringify(friendLogTable.value.filters[0].value));
     }
+    /**
+     *
+     * @param value
+     */
     function handleFriendLogFilterChange(value) {
         friendLogTable.value.filters[0].value = Array.isArray(value) ? value : [];
         saveTableFilters();
     }
+    /**
+     *
+     * @param row
+     */
     function deleteFriendLogPrompt(row) {
         modalStore
             .confirm({
@@ -158,6 +170,10 @@
             .then(({ ok }) => ok && deleteFriendLog(row))
             .catch(() => {});
     }
+    /**
+     *
+     * @param row
+     */
     function deleteFriendLog(row) {
         removeFromArray(friendLogTable.value.data, row);
         database.deleteFriendLogHistory(row.rowId);
diff --git a/src/views/FriendsLocations/FriendsLocations.vue b/src/views/FriendsLocations/FriendsLocations.vue
index 9d3a1158..cbefc38f 100644
--- a/src/views/FriendsLocations/FriendsLocations.vue
+++ b/src/views/FriendsLocations/FriendsLocations.vue
@@ -429,6 +429,10 @@
         });
     });
 
+    /**
+     *
+     * @param groupKey
+     */
     function toggleGroupCollapse(groupKey) {
         if (collapsedGroups.has(groupKey)) {
             collapsedGroups.delete(groupKey);
@@ -898,6 +902,9 @@
         }
     });
 
+    /**
+     *
+     */
     async function loadInitialSettings() {
         try {
             const [storedScale, storedSpacing, storedShowSameInstance] = await Promise.all([
@@ -954,7 +961,7 @@
         display: flex;
         gap: 20px;
         align-items: center;
-        padding: 6px 2px 0 2px;
+        padding: 8px 2px 0 2px;
     }
 
     .friend-view__tabs {
@@ -1002,7 +1009,7 @@
     }
 
     .friend-view__virtual-row--header {
-        padding: 4px 10px;
+        padding: 4px 8px;
         padding-bottom: calc(var(--friend-card-gap, 14px) - 4px);
     }
 
@@ -1044,7 +1051,7 @@
     .friend-view__scale-control {
         display: flex;
         align-items: center;
-        gap: 10px;
+        gap: 8px;
         min-width: 160px;
     }
 
diff --git a/src/views/FriendsLocations/components/FriendsLocationsCard.vue b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
index bc891beb..93cf60ca 100644
--- a/src/views/FriendsLocations/components/FriendsLocationsCard.vue
+++ b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
@@ -337,7 +337,7 @@
     }
 
     .friend-card__signature {
-        margin-top: calc(6px * var(--card-spacing));
+        margin-top: calc(8px * var(--card-spacing));
         font-size: calc(13px * var(--card-scale));
         line-height: 1.4;
         overflow: hidden;
@@ -352,7 +352,7 @@
         align-items: center;
         justify-content: center;
         min-height: calc(40px * var(--card-scale));
-        padding: calc(6px * var(--card-scale)) calc(10px * var(--card-scale));
+        padding: calc(8px * var(--card-scale)) calc(8px * var(--card-scale));
         border-radius: calc(var(--radius-lg) * var(--card-scale));
         font-size: calc(12px * var(--card-scale));
         line-height: 1.3;
diff --git a/src/views/GameLog/GameLog.vue b/src/views/GameLog/GameLog.vue
index a5aeadac..ae01e010 100644
--- a/src/views/GameLog/GameLog.vue
+++ b/src/views/GameLog/GameLog.vue
@@ -8,8 +8,8 @@
             :total-items="totalItems"
             :on-page-size-change="handlePageSizeChange">
             <template #toolbar>
-                <div style="margin: 0 0 10px; display: flex; align-items: center">
-                    <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
+                <div class="mt-0 mx-0 mb-2" style="display: flex; align-items: center">
+                    <div class="mr-2" style="flex: none; display: flex; align-items: center">
                         <TooltipWrapper side="bottom" :content="t('view.feed.favorites_only_tooltip')">
                             <div>
                                 <Toggle
@@ -55,10 +55,11 @@
                         </SelectContent>
                     </Select>
                     <InputGroupField
+                        class="ml-2"
                         v-model="gameLogTable.search"
                         :placeholder="t('view.game_log.search_placeholder')"
                         clearable
-                        style="flex: 0.4; margin-left: 10px"
+                        style="flex: 0.4"
                         @keyup.enter="gameLogTableLookup"
                         @change="gameLogTableLookup" />
                 </div>
@@ -90,6 +91,10 @@
     const vrcxStore = useVrcxStore();
     const modalStore = useModalStore();
 
+    /**
+     *
+     * @param row
+     */
     function getGameLogCreatedAt(row) {
         if (typeof row?.created_at === 'string' && row.created_at.length > 0) {
             return row.created_at;
@@ -112,6 +117,10 @@
         paginationHeight: 52
     });
 
+    /**
+     *
+     * @param row
+     */
     function deleteGameLogEntryPrompt(row) {
         modalStore
             .confirm({
@@ -122,6 +131,10 @@
             .catch(() => {});
     }
 
+    /**
+     *
+     * @param row
+     */
     function deleteGameLogEntry(row) {
         removeFromArray(gameLogTableData.value, row);
         database.deleteGameLogEntry(row);
@@ -133,6 +146,10 @@
         onDeletePrompt: deleteGameLogEntryPrompt
     });
 
+    /**
+     *
+     * @param value
+     */
     function handleGameLogFilterChange(value) {
         gameLogTable.value.filter = Array.isArray(value) ? value : [];
         gameLogTableLookup();
@@ -140,6 +157,10 @@
 
     const pageSizes = computed(() => appearanceSettingsStore.tablePageSizes);
 
+    /**
+     *
+     * @param row
+     */
     function getGameLogRowId(row) {
         if (row?.rowId != null) return `row:${row.rowId}`;
 
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 716267a0..a4b820cb 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="x-login-container">
-        <div style="position: absolute; top: 0; left: 0; margin: 5px">
+        <div class="m-1.5" style="position: absolute; top: 0; left: 0">
             <LoginSettingsDialog />
             <TooltipWrapper v-if="!noUpdater" side="top" :content="t('view.login.updater')">
                 <Button class="rounded-full mr-2 text-xs" size="icon-sm" variant="ghost" @click="showVRCXUpdateDialog"
@@ -29,7 +29,7 @@
         <div class="x-login">
             <div class="x-login-form-container">
                 <div>
-                    <h2 style="font-weight: bold; text-align: center; margin: 0">{{ t('view.login.login') }}</h2>
+                    <h2 class="m-0" style="font-weight: bold; text-align: center">{{ t('view.login.login') }}</h2>
                     <form id="login-form" @submit.prevent="onSubmit">
                         <FieldGroup class="gap-3">
                             <VeeField v-slot="{ field, errors }" name="username">
@@ -95,10 +95,10 @@
                 <hr v-if="Object.keys(savedCredentials).length !== 0" class="x-vertical-divider" />
 
                 <div v-if="Object.keys(savedCredentials).length !== 0">
-                    <h2 style="font-weight: bold; text-align: center; margin: 0">
+                    <h2 class="m-0" style="font-weight: bold; text-align: center">
                         {{ t('view.login.savedAccounts') }}
                     </h2>
-                    <div class="x-scroll-wrapper" style="margin-top: 10px">
+                    <div class="x-scroll-wrapper mt-2">
                         <div class="x-saved-account-list">
                             <div
                                 v-for="user in savedCredentials"
diff --git a/src/views/Notifications/Notification.vue b/src/views/Notifications/Notification.vue
index 584a48b3..f14cd70a 100644
--- a/src/views/Notifications/Notification.vue
+++ b/src/views/Notifications/Notification.vue
@@ -57,8 +57,7 @@
                         v-model="notificationTable.filters[1].value"
                         :placeholder="t('view.notification.search_placeholder')"
                         clearable
-                        class="flex-[0.4]"
-                        style="margin: 0 10px" />
+                        class="flex-[0.4] my-0 mx-2" />
                     <TooltipWrapper side="bottom" :content="t('view.notification.refresh_tooltip')">
                         <Button
                             class="rounded-full"
@@ -139,6 +138,10 @@
         paginationHeight: 52
     });
 
+    /**
+     *
+     * @param row
+     */
     function getNotificationCreatedAt(row) {
         if (typeof row?.created_at === 'string' && row.created_at.length > 0) {
             return row.created_at;
@@ -149,6 +152,10 @@
         return '';
     }
 
+    /**
+     *
+     * @param row
+     */
     function getNotificationCreatedAtTs(row) {
         const createdAtRaw = row?.created_at ?? row?.createdAt;
         if (typeof createdAtRaw === 'number') {
@@ -263,6 +270,9 @@
 
     const sendInviteRequestResponseDialogVisible = ref(false);
 
+    /**
+     *
+     */
     function saveTableFilters() {
         configRepository.setString(
             'VRCX_notificationTableFilters',
@@ -270,15 +280,27 @@
         );
     }
 
+    /**
+     *
+     * @param value
+     */
     function handleNotificationFilterChange(value) {
         notificationTable.value.filters[0].value = Array.isArray(value) ? value : [];
         saveTableFilters();
     }
 
+    /**
+     *
+     * @param url
+     */
     function getSmallThumbnailUrl(url) {
         return convertFileUrlToImageUrl(url);
     }
 
+    /**
+     *
+     * @param invite
+     */
     function showSendInviteResponseDialog(invite) {
         sendInviteResponseDialog.value.invite = invite;
         sendInviteResponseDialog.value.messageSlot = {};
@@ -287,6 +309,10 @@
         sendInviteResponseDialogVisible.value = true;
     }
 
+    /**
+     *
+     * @param invite
+     */
     function showSendInviteRequestResponseDialog(invite) {
         sendInviteResponseDialog.value.invite = invite;
         sendInviteResponseDialog.value.messageSlot = {};
diff --git a/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue b/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue
index 5545c43d..e88fd050 100644
--- a/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue
+++ b/src/views/Notifications/dialogs/SendInviteRequestResponseDialog.vue
@@ -11,7 +11,7 @@
             </template>
 
             <DataTableLayout
-                style="margin-top: 10px"
+                style="margin-top: 8px"
                 :table="inviteRequestResponseTable"
                 :loading="false"
                 :show-pagination="false"
@@ -102,10 +102,18 @@
         initialSorting: [{ id: 'slot', desc: false }]
     });
 
+    /**
+     *
+     * @param row
+     */
     function handleInviteRequestResponseRowClick(row) {
         showSendInviteResponseConfirmDialog(row?.original);
     }
 
+    /**
+     *
+     * @param row
+     */
     function showEditAndSendInviteResponseDialog(row) {
         emit('update:sendInviteResponseDialog', { ...props.sendInviteResponseDialog, messageSlot: row });
         editAndSendInviteResponseDialog.value = {
@@ -114,15 +122,25 @@
         };
     }
 
+    /**
+     *
+     * @param row
+     */
     function showSendInviteResponseConfirmDialog(row) {
         emit('update:sendInviteResponseDialog', { ...props.sendInviteResponseDialog, messageSlot: row });
         sendInviteResponseConfirmDialog.value.visible = true;
     }
 
+    /**
+     *
+     */
     function closeInviteDialog() {
         cancelSendInviteRequestResponse();
     }
 
+    /**
+     *
+     */
     function closeResponseConfirmDialog() {
         sendInviteResponseConfirmDialog.value.visible = false;
         editAndSendInviteResponseDialog.value.visible = false;
@@ -132,6 +150,9 @@
     //     inviteMessagesRequest.refreshInviteMessageTableData(arg);
     // }
 
+    /**
+     *
+     */
     function cancelSendInviteRequestResponse() {
         emit('update:sendInviteRequestResponseDialogVisible', false);
     }
diff --git a/src/views/Notifications/dialogs/SendInviteResponseDialog.vue b/src/views/Notifications/dialogs/SendInviteResponseDialog.vue
index 19f11487..73b6af74 100644
--- a/src/views/Notifications/dialogs/SendInviteResponseDialog.vue
+++ b/src/views/Notifications/dialogs/SendInviteResponseDialog.vue
@@ -9,7 +9,7 @@
             </template>
 
             <DataTableLayout
-                style="margin-top: 10px"
+                style="margin-top: 8px"
                 :table="inviteResponseTable"
                 :loading="false"
                 :show-pagination="false"
@@ -101,23 +101,40 @@
         initialSorting: [{ id: 'slot', desc: false }]
     });
 
+    /**
+     *
+     * @param row
+     */
     function handleInviteResponseRowClick(row) {
         showSendInviteResponseConfirmDialog(row?.original);
     }
 
+    /**
+     *
+     */
     function closeInviteDialog() {
         cancelSendInviteResponse();
     }
 
+    /**
+     *
+     */
     function cancelSendInviteResponse() {
         emit('update:sendInviteResponseDialogVisible', false);
     }
 
+    /**
+     *
+     */
     function closeResponseConfirmDialog() {
         sendInviteResponseConfirmDialog.value.visible = false;
         editAndSendInviteResponseDialog.value.visible = false;
     }
 
+    /**
+     *
+     * @param row
+     */
     function showEditAndSendInviteResponseDialog(row) {
         emit('update:sendInviteResponseDialog', { ...props.sendInviteResponseDialog, messageSlot: row });
         editAndSendInviteResponseDialog.value = {
@@ -125,6 +142,10 @@
             visible: true
         };
     }
+    /**
+     *
+     * @param row
+     */
     function showSendInviteResponseConfirmDialog(row) {
         emit('update:sendInviteResponseDialog', { ...props.sendInviteResponseDialog, messageSlot: row });
         sendInviteResponseConfirmDialog.value.visible = true;
diff --git a/src/views/PlayerList/PlayerList.vue b/src/views/PlayerList/PlayerList.vue
index aa2825fd..3fe77718 100644
--- a/src/views/PlayerList/PlayerList.vue
+++ b/src/views/PlayerList/PlayerList.vue
@@ -12,7 +12,7 @@
                     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%">
+                <div class="ml-2" style="display: flex; flex-direction: column; min-width: 320px; width: 100%">
                     <div class="flex items-center">
                         <span
                             class="cursor-pointer"
@@ -41,27 +41,24 @@
                             @click="showUserDialog(currentInstanceWorld.ref.authorId)"
                             v-text="currentInstanceWorld.ref.authorName"></span>
                     </div>
-                    <div style="margin-top: 5px">
-                        <Badge v-if="currentInstanceWorld.ref.$isLabs" variant="outline" style="margin-right: 5px">
+                    <div class="mt-1.5">
+                        <Badge class="mr-1.5" v-if="currentInstanceWorld.ref.$isLabs" variant="outline">
                             {{ t('dialog.world.tags.labs') }}
                         </Badge>
                         <Badge
+                            class="mr-1.5"
                             v-else-if="currentInstanceWorld.ref.releaseStatus === 'public'"
-                            variant="outline"
-                            style="margin-right: 5px">
+                            variant="outline">
                             {{ t('dialog.world.tags.public') }}
                         </Badge>
                         <Badge
+                            class="mr-1.5"
                             v-else-if="currentInstanceWorld.ref.releaseStatus === 'private'"
-                            variant="outline"
-                            style="margin-right: 5px">
+                            variant="outline">
                             {{ t('dialog.world.tags.private') }}
                         </Badge>
                         <TooltipWrapper v-if="currentInstanceWorld.isPC" side="top" content="PC">
-                            <Badge
-                                class="text-platform-pc border-platform-pc!"
-                                variant="outline"
-                                style="margin-right: 5px"
+                            <Badge class="text-platform-pc border-platform-pc! mr-1.5" variant="outline"
                                 ><Monitor class="h-4 w-4" />
                                 <span
                                     v-if="currentInstanceWorld.fileAnalysis.standalonewindows?._fileSize"
@@ -71,10 +68,7 @@
                             </Badge>
                         </TooltipWrapper>
                         <TooltipWrapper v-if="currentInstanceWorld.isQuest" side="top" content="Android">
-                            <Badge
-                                class="text-platform-quest border-platform-quest!"
-                                variant="outline"
-                                style="margin-right: 5px"
+                            <Badge class="text-platform-quest border-platform-quest! mr-1.5" variant="outline"
                                 ><Smartphone class="h-4 w-4" />
                                 <span
                                     v-if="currentInstanceWorld.fileAnalysis.android?._fileSize"
@@ -84,10 +78,7 @@
                             </Badge>
                         </TooltipWrapper>
                         <TooltipWrapper v-if="currentInstanceWorld.isIos" side="top" content="iOS">
-                            <Badge
-                                class="text-platform-ios border-platform-ios"
-                                variant="outline"
-                                style="margin-right: 5px"
+                            <Badge class="text-platform-ios border-platform-ios mr-1.5" variant="outline"
                                 ><Apple class="h-4 w-4 text-platform-ios" />
                                 <span
                                     v-if="currentInstanceWorld.fileAnalysis.ios?._fileSize"
@@ -97,18 +88,18 @@
                             </Badge>
                         </TooltipWrapper>
                         <Badge
+                            class="mr-1.5 mt-1.5"
                             v-if="currentInstanceWorld.avatarScalingDisabled"
-                            variant="outline"
-                            style="margin-right: 5px; margin-top: 5px">
+                            variant="outline">
                             {{ t('dialog.world.tags.avatar_scaling_disabled') }}
                         </Badge>
-                        <Badge v-if="currentInstanceWorld.inCache" variant="outline" style="margin-right: 5px">
+                        <Badge class="mr-1.5" v-if="currentInstanceWorld.inCache" variant="outline">
                             <span>{{ currentInstanceWorld.cacheSize }} {{ t('dialog.world.tags.cache') }}</span>
                         </Badge>
                     </div>
-                    <div style="margin-top: 5px">
+                    <div class="mt-1.5">
                         <LocationWorld :locationobject="currentInstanceLocation" :currentuserid="currentUser.id" />
-                        <span v-if="lastLocation.playerList.size > 0" style="margin-left: 5px">
+                        <span class="ml-1.5" v-if="lastLocation.playerList.size > 0">
                             {{ lastLocation.playerList.size }}
                             <template v-if="lastLocation.friendList.size > 0"
                                 >({{ lastLocation.friendList.size }})</template
@@ -116,14 +107,14 @@
                             &nbsp;&horbar; <Timer v-if="lastLocation.date" :epoch="lastLocation.date" />
                         </span>
                     </div>
-                    <div style="margin-top: 5px">
+                    <div class="mt-1.5">
                         <span
                             v-show="currentInstanceWorld.ref.name !== currentInstanceWorld.ref.description"
                             class="inline-block max-w-full align-middle text-xs break-words"
                             v-text="currentInstanceWorld.ref.description"></span>
                     </div>
                 </div>
-                <div style="display: flex; flex-direction: column; margin-left: 20px">
+                <div class="ml-5" style="display: flex; flex-direction: column">
                     <div class="box-border flex items-center p-1.5 text-[13px] cursor-default">
                         <div class="flex-1 overflow-hidden">
                             <span class="block truncate font-medium leading-[18px]">{{
@@ -162,7 +153,7 @@
                 </div>
             </div>
 
-            <div v-if="photonLoggingEnabled" ref="playerListPhotonRef" style="margin-bottom: 10px">
+            <div class="mb-2" v-if="photonLoggingEnabled" ref="playerListPhotonRef">
                 <PhotonEventTable @show-chatbox-blacklist="showChatboxBlacklistDialog" />
             </div>
 
diff --git a/src/views/PlayerList/components/PhotonEventTable.vue b/src/views/PlayerList/components/PhotonEventTable.vue
index 59a8b4d2..773201d0 100644
--- a/src/views/PlayerList/components/PhotonEventTable.vue
+++ b/src/views/PlayerList/components/PhotonEventTable.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="mt-5">
-        <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap">
+        <div class="gap-2 mb-2" style="display: flex; align-items: center; flex-wrap: wrap">
             <Select
                 :model-value="photonEventTableTypeFilter"
                 multiple
@@ -39,14 +39,14 @@
         <TabsUnderline default-value="current" :items="photonTabs" :unmount-on-hide="false">
             <template #current>
                 <DataTableLayout
-                    class="min-w-0 w-full"
+                    class="min-w-0 w-full mb-2"
                     :table="currentTable"
                     :loading="false"
                     :table-style="tableStyle"
                     :page-sizes="pageSizes"
                     :total-items="currentTotal"
                     :on-page-size-change="handleCurrentPageSizeChange"
-                    style="margin-bottom: 10px" />
+                    />
             </template>
             <template #previous>
                 <DataTableLayout
@@ -57,7 +57,7 @@
                     :page-sizes="pageSizes"
                     :total-items="previousTotal"
                     :on-page-size-change="handlePreviousPageSizeChange"
-                    style="margin-bottom: 10px" />
+                    style="margin-bottom: 8px" />
             </template>
         </TabsUnderline>
     </div>
diff --git a/src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue b/src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue
index 6572e2c7..464fae2f 100644
--- a/src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue
+++ b/src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue
@@ -7,11 +7,11 @@
             <div v-if="chatboxBlacklistDialog.visible">
                 <h2>{{ t('dialog.chatbox_blacklist.keyword_blacklist') }}</h2>
                 <InputGroupAction
+                    class="mt-1.5"
                     v-for="(item, index) in chatboxBlacklist"
                     :key="index"
                     v-model="chatboxBlacklist[index]"
                     size="sm"
-                    style="margin-top: 5px"
                     @change="saveChatboxBlacklist">
                     <template #actions>
                         <Button
@@ -23,7 +23,7 @@
                         </Button>
                     </template>
                 </InputGroupAction>
-                <Button size="sm" variant="outline" style="margin-top: 5px" @click="chatboxBlacklist.push('')">
+                <Button size="sm" variant="outline" style="margin-top: 6px" @click="chatboxBlacklist.push('')">
                     {{ t('dialog.chatbox_blacklist.add_item') }}
                 </Button>
                 <br />
@@ -32,12 +32,12 @@
                     v-for="user in chatboxUserBlacklist"
                     :key="user[0]"
                     variant="outline"
-                    style="margin-right: 5px; margin-top: 5px">
+                    style="margin-right: 6px; margin-top: 6px">
                     <span>{{ user[1] }}</span>
                     <button
                         type="button"
                         style="
-                            margin-left: 6px;
+                            margin-left: 8px;
                             border: none;
                             background: transparent;
                             padding: 0;
@@ -81,6 +81,10 @@
 
     const emit = defineEmits(['deleteChatboxUserBlacklist']);
 
+    /**
+     *
+     * @param userId
+     */
     function deleteChatboxUserBlacklist(userId) {
         emit('deleteChatboxUserBlacklist', userId);
     }
diff --git a/src/views/Search/Search.vue b/src/views/Search/Search.vue
index 35a0b779..b90702cf 100644
--- a/src/views/Search/Search.vue
+++ b/src/views/Search/Search.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="x-container">
-        <div style="margin: 0 0 10px; display: flex; align-items: center">
+        <div class="mt-0 mx-0 mb-2" style="display: flex; align-items: center">
             <InputGroupField
                 :model-value="searchText"
                 :placeholder="t('view.search.search_placeholder')"
@@ -15,18 +15,18 @@
             </TooltipWrapper>
         </div>
         <TabsUnderline
+            class="mt-4"
             v-model="activeSearchTab"
             :items="searchTabs"
             aria-label="Search tabs"
-            :unmount-on-hide="false"
-            style="margin-top: 15px">
+            :unmount-on-hide="false">
             <template #user>
                 <div style="min-height: 60px">
-                    <label class="inline-flex items-center gap-2" style="margin-left: 10px">
+                    <label class="inline-flex items-center gap-2 ml-2">
                         <Checkbox v-model="searchUserByBio" />
                         <span>{{ t('view.search.user.search_by_bio') }}</span>
                     </label>
-                    <label class="inline-flex items-center gap-2" style="margin-left: 10px">
+                    <label class="inline-flex items-center gap-2 ml-2">
                         <Checkbox v-model="searchUserSortByLastLoggedIn" />
                         <span>{{ t('view.search.user.sort_by_last_logged_in') }}</span>
                     </label>
@@ -59,7 +59,7 @@
                             </div>
                         </div>
                     </div>
-                    <ButtonGroup v-if="searchUserResults.length" style="margin-top: 15px">
+                    <ButtonGroup class="mt-4" v-if="searchUserResults.length">
                         <Button
                             variant="outline"
                             size="sm"
@@ -85,7 +85,7 @@
                         <Select
                             :model-value="searchWorldCategoryIndex"
                             @update:modelValue="handleSearchWorldCategorySelect"
-                            style="margin-bottom: 15px">
+                            style="margin-bottom: 16px">
                             <SelectTrigger size="sm">
                                 <SelectValue :placeholder="t('view.search.world.category')" />
                             </SelectTrigger>
@@ -100,7 +100,7 @@
                                 </SelectGroup>
                             </SelectContent>
                         </Select>
-                        <label class="inline-flex items-center gap-2" style="margin-left: 10px">
+                        <label class="inline-flex items-center gap-2" style="margin-left: 8px">
                             <Checkbox v-model="searchWorldLabs" />
                             <span>{{ t('view.search.world.community_lab') }}</span>
                         </label>
@@ -126,7 +126,7 @@
                             </div>
                         </div>
                     </div>
-                    <ButtonGroup v-if="searchWorldResults.length" style="margin-top: 15px">
+                    <ButtonGroup v-if="searchWorldResults.length" style="margin-top: 16px">
                         <Button
                             variant="outline"
                             size="sm"
@@ -154,7 +154,7 @@
                                 v-if="avatarRemoteDatabaseProviderList.length > 1"
                                 :model-value="avatarRemoteDatabaseProvider"
                                 @update:modelValue="setAvatarProvider"
-                                style="margin-right: 5px">
+                                style="margin-right: 6px">
                                 <SelectTrigger size="sm">
                                     <SelectValue :placeholder="t('view.search.avatar.search_provider')" />
                                 </SelectTrigger>
@@ -180,7 +180,7 @@
                                     <RefreshCw v-else />
                                 </Button>
                             </TooltipWrapper>
-                            <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
+                            <span style="font-size: 14px; margin-left: 6px; margin-right: 6px">{{
                                 t('view.search.avatar.result_count', {
                                     count: searchAvatarResults.length
                                 })
@@ -190,7 +190,7 @@
                             <RadioGroup
                                 :model-value="searchAvatarFilter"
                                 class="flex items-center gap-4"
-                                style="margin: 5px"
+                                style="margin: 6px"
                                 @update:modelValue="handleSearchAvatarFilterChange">
                                 <div class="flex items-center space-x-2">
                                     <RadioGroupItem id="searchAvatarFilter-all" value="all" />
@@ -211,7 +211,7 @@
                             <RadioGroup
                                 :model-value="searchAvatarFilterRemote"
                                 class="flex items-center gap-4"
-                                style="margin: 5px"
+                                style="margin: 6px"
                                 @update:modelValue="handleSearchAvatarFilterRemoteChange">
                                 <div class="flex items-center space-x-2">
                                     <RadioGroupItem id="searchAvatarFilterRemote-all" value="all" />
@@ -239,7 +239,7 @@
                         <Select
                             :model-value="searchAvatarSort"
                             :disabled="searchAvatarFilterRemote !== 'local'"
-                            style="margin: 5px"
+                            style="margin: 6px"
                             @update:modelValue="handleSearchAvatarSortChange">
                             <SelectTrigger size="sm">
                                 <SelectValue :placeholder="t('view.search.avatar.sort_name')" />
@@ -292,7 +292,7 @@
                             </div>
                         </div>
                     </div>
-                    <ButtonGroup v-if="searchAvatarPage.length" style="margin-top: 15px">
+                    <ButtonGroup v-if="searchAvatarPage.length" style="margin-top: 16px">
                         <Button
                             variant="outline"
                             size="sm"
@@ -332,10 +332,10 @@
                             <div class="flex-1 overflow-hidden">
                                 <span class="block truncate font-medium leading-[18px]">
                                     <span v-text="group.name"></span>
-                                    <span style="margin-left: 5px; font-weight: normal">({{ group.memberCount }})</span>
+                                    <span style="margin-left: 6px; font-weight: normal">({{ group.memberCount }})</span>
                                     <span
                                         style="
-                                            margin-left: 5px;
+                                            margin-left: 6px;
                                             color: #909399;
                                             font-weight: normal;
                                             font-family: monospace;
@@ -348,7 +348,7 @@
                             </div>
                         </div>
                     </div>
-                    <ButtonGroup v-if="searchGroupResults.length" style="margin-top: 15px">
+                    <ButtonGroup v-if="searchGroupResults.length" style="margin-top: 16px">
                         <Button
                             variant="outline"
                             size="sm"
diff --git a/src/views/Settings/Settings.vue b/src/views/Settings/Settings.vue
index 8e15448b..71a55674 100644
--- a/src/views/Settings/Settings.vue
+++ b/src/views/Settings/Settings.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="x-container">
-        <div class="options-container" style="margin-top: 0; padding: 5px">
+        <div class="options-container mt-0 p-1.5">
             <span class="header">{{ t('view.settings.header') }}</span>
         </div>
         <TabsUnderline
diff --git a/src/views/Settings/components/SimpleSwitch.vue b/src/views/Settings/components/SimpleSwitch.vue
index 9047acfe..9506ec2d 100644
--- a/src/views/Settings/components/SimpleSwitch.vue
+++ b/src/views/Settings/components/SimpleSwitch.vue
@@ -25,6 +25,10 @@
 
     const emit = defineEmits(['change']);
 
+    /**
+     *
+     * @param event
+     */
     function change(event) {
         emit('change', event);
     }
@@ -45,7 +49,7 @@
         align-items: center;
     }
     .simple-switch > .switch {
-        margin-left: 10px;
+        margin-left: 8px;
     }
     .simple-switch .tooltip {
         margin-left: 3px;
diff --git a/src/views/Settings/components/Tabs/AdvancedTab.vue b/src/views/Settings/components/Tabs/AdvancedTab.vue
index d2779755..59bba203 100644
--- a/src/views/Settings/components/Tabs/AdvancedTab.vue
+++ b/src/views/Settings/components/Tabs/AdvancedTab.vue
@@ -76,7 +76,7 @@
         </div>
         <div class="options-container">
             <span class="header">{{ t('view.profile.game_info.header') }}</span>
-            <div class="px-2.5 overflow-y-auto overflow-x-hidden" style="margin-top: 10px">
+            <div class="px-2.5 overflow-y-auto overflow-x-hidden mt-2">
                 <div class="box-border flex items-center p-1.5 text-[13px] cursor-pointer">
                     <div class="flex-1 overflow-hidden" @click="getVisits">
                         <span class="block truncate font-medium leading-[18px]">{{
@@ -107,7 +107,7 @@
             <div class="options-container">
                 <span class="header">{{ t('view.settings.advanced.advanced.app_launcher.header') }}</span>
                 <br />
-                <Button size="sm" variant="outline" style="margin-top: 5px" @click="openShortcutFolder()">{{
+                <Button class="mt-1.5" size="sm" variant="outline" @click="openShortcutFolder()">{{
                     t('view.settings.advanced.advanced.app_launcher.folder')
                 }}</Button>
                 <simple-switch
@@ -152,7 +152,7 @@
                 @change="changeTranslationAPI('VRCX_translationAPI')" />
             <div class="options-container-item">
                 <Button size="sm" variant="outline" @click="showTranslationApiDialog">
-                    <Languages class="h-4 w-4" style="margin-right: 5px" />
+                    <Languages class="h-4 w-4" style="margin-right: 6px" />
                     {{ t('view.settings.advanced.advanced.translation_api.translation_api_key') }}
                 </Button>
             </div>
@@ -505,18 +505,30 @@
 
     const isLinux = computed(() => LINUX);
 
+    /**
+     *
+     */
     function openShortcutFolder() {
         AppApi.OpenShortcutFolder();
     }
 
+    /**
+     *
+     */
     function showYouTubeApiDialog() {
         isYouTubeApiDialogVisible.value = true;
     }
 
+    /**
+     *
+     */
     function showTranslationApiDialog() {
         isTranslationApiDialogVisible.value = true;
     }
 
+    /**
+     *
+     */
     function refreshCacheSize() {
         cacheSize.cachedUsers = cachedUsers.size;
         cacheSize.cachedWorlds = cachedWorlds.size;
@@ -526,6 +538,10 @@
         cacheSize.cachedInstances = cachedInstances.size;
     }
 
+    /**
+     *
+     * @param configKey
+     */
     async function changeYouTubeApi(configKey = '') {
         if (configKey === 'VRCX_youtubeAPI') {
             advancedSettingsStore.setYouTubeApi();
@@ -538,17 +554,27 @@
         updateOpenVR();
     }
 
+    /**
+     *
+     * @param configKey
+     */
     async function changeTranslationAPI(configKey = '') {
         if (configKey === 'VRCX_translationAPI') {
             advancedSettingsStore.setTranslationApi();
         }
     }
 
+    /**
+     *
+     */
     async function refreshConfigTreeData() {
         await authRequest.getConfig();
         configTreeData.value = cachedConfig.value;
     }
 
+    /**
+     *
+     */
     function getVisits() {
         miscRequest.getVisits().then((args) => {
             visits.value = args.json;
diff --git a/src/views/Settings/components/Tabs/AppearanceTab.vue b/src/views/Settings/components/Tabs/AppearanceTab.vue
index bb86c8ae..156d4d67 100644
--- a/src/views/Settings/components/Tabs/AppearanceTab.vue
+++ b/src/views/Settings/components/Tabs/AppearanceTab.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="options-container" style="margin-top: 0">
+        <div class="options-container mt-0">
             <span class="header">{{ t('view.settings.appearance.appearance.header') }}</span>
             <div class="options-container-item">
                 <span class="name">{{ t('view.settings.appearance.appearance.language') }}</span>
@@ -23,8 +23,8 @@
                     {{ t('view.settings.appearance.appearance.font_family') }}
 
                     <TooltipWrapper
+                        class="ml-1.5"
                         side="top"
-                        style="margin-left: 5px"
                         :content="t('view.settings.appearance.appearance.font_family_tooltip')">
                         <Info />
                     </TooltipWrapper>
@@ -443,6 +443,10 @@
 
     initGetZoomLevel();
 
+    /**
+     *
+     * @param value
+     */
     function handleSortFavoritesRadio(value) {
         const nextValue = value === 'true';
         if (nextValue !== sortFavorites.value) {
@@ -450,6 +454,10 @@
         }
     }
 
+    /**
+     *
+     * @param value
+     */
     function handleInstanceUsersSortAlphabeticalRadio(value) {
         const nextValue = value === 'true';
         if (nextValue !== instanceUsersSortAlphabetical.value) {
@@ -457,6 +465,10 @@
         }
     }
 
+    /**
+     *
+     * @param value
+     */
     function handleDtHour12Radio(value) {
         const nextValue = value === 'true';
         if (nextValue !== dtHour12.value) {
@@ -502,6 +514,9 @@
         }
     });
 
+    /**
+     *
+     */
     function addTablePageSizeFromInput() {
         const raw = String(tablePageSizesSearchTerm.value ?? '').trim();
         if (!raw) {
@@ -515,6 +530,9 @@
         tablePageSizesSearchTerm.value = '';
     }
 
+    /**
+     *
+     */
     async function initGetZoomLevel() {
         const handleWheel = (event) => {
             if (event.ctrlKey) {
@@ -528,10 +546,16 @@
         getZoomLevel();
     }
 
+    /**
+     *
+     */
     async function getZoomLevel() {
         zoomLevel.value = ((await AppApi.GetZoom()) + 10) * 10;
     }
 
+    /**
+     *
+     */
     function setZoomLevel() {
         AppApi.SetZoom(zoomLevel.value / 10 - 10);
     }
diff --git a/src/views/Settings/components/Tabs/DiscordPresenceTab.vue b/src/views/Settings/components/Tabs/DiscordPresenceTab.vue
index 3d29f83b..44bd8bcb 100644
--- a/src/views/Settings/components/Tabs/DiscordPresenceTab.vue
+++ b/src/views/Settings/components/Tabs/DiscordPresenceTab.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="options-container" style="margin-top: 0">
+    <div class="options-container mt-0">
         <span class="header">{{ t('view.settings.discord_presence.discord_presence.header') }}</span>
         <div class="options-container-item">
             <span>{{ t('view.settings.discord_presence.discord_presence.description') }}</span>
diff --git a/src/views/Settings/components/Tabs/GeneralTab.vue b/src/views/Settings/components/Tabs/GeneralTab.vue
index c9bcab8e..99e227ad 100644
--- a/src/views/Settings/components/Tabs/GeneralTab.vue
+++ b/src/views/Settings/components/Tabs/GeneralTab.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
-        <div class="options-container" style="margin-top: 0">
+        <div class="options-container mt-0">
             <span class="header">{{ t('view.settings.general.general.header') }}</span>
-            <div class="px-2.5 overflow-y-auto overflow-x-hidden" style="margin-top: 10px">
+            <div class="px-2.5 overflow-y-auto overflow-x-hidden mt-2">
                 <div class="box-border flex items-center p-1.5 text-[13px] cursor-default">
                     <div class="flex-1 overflow-hidden">
                         <span class="block truncate font-medium leading-[18px]">{{
@@ -57,12 +57,12 @@
             <div v-if="!noUpdater" class="text-sm mt-2 flex flex-col align-baseline">
                 <span class="name">{{ t('view.settings.general.vrcx_updater.update_action') }}</span>
                 <ToggleGroup
+                    class="mt-1.5"
                     type="single"
                     required
                     variant="outline"
                     size="sm"
                     :model-value="autoUpdateVRCX"
-                    style="margin-top: 5px"
                     @update:model-value="setAutoUpdateVRCX">
                     <ToggleGroupItem value="Off">{{
                         t('view.settings.general.vrcx_updater.auto_update_off')
@@ -124,7 +124,7 @@
             <span class="header inline-flex items-center"
                 >{{ t('view.settings.general.favorites.header') }}
                 <TooltipWrapper side="top" :content="t('view.settings.general.favorites.header_tooltip')">
-                    <Info style="width: 12px; height: 12px; margin-left: 4px; vertical-align: middle; cursor: help" />
+                    <Info class="ml-1" style="width: 12px; height: 12px; vertical-align: middle; cursor: help" />
                 </TooltipWrapper>
             </span>
             <br />
@@ -132,7 +132,7 @@
                 :model-value="localFavoriteFriendsGroups"
                 multiple
                 @update:modelValue="setLocalFavoriteFriendsGroups">
-                <SelectTrigger style="margin-top: 8px">
+                <SelectTrigger class="mt-2">
                     <SelectValue :placeholder="t('view.settings.general.favorites.group_placeholder')" />
                 </SelectTrigger>
                 <SelectContent>
@@ -253,6 +253,9 @@
         () => import('../../dialogs/OpenSourceSoftwareNoticeDialog.vue')
     );
 
+    /**
+     *
+     */
     function openOSSDialog() {
         ossDialog.value = true;
     }
diff --git a/src/views/Settings/components/Tabs/NotificationsTab.vue b/src/views/Settings/components/Tabs/NotificationsTab.vue
index d3794e2c..0c42eb68 100644
--- a/src/views/Settings/components/Tabs/NotificationsTab.vue
+++ b/src/views/Settings/components/Tabs/NotificationsTab.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="options-container" style="margin-top: 0">
+        <div class="options-container mt-0">
             <span class="header">{{ t('view.settings.notifications.notifications.header') }}</span>
             <div class="options-container-item">
                 <Button size="sm" variant="outline" @click="showNotyFeedFiltersDialog">{{
@@ -23,6 +23,7 @@
                 }}</span>
                 <br />
                 <ToggleGroup
+                    class="mt-1.5"
                     type="single"
                     required
                     variant="outline"
@@ -34,7 +35,6 @@
                         !ovrtHudNotifications &&
                         !ovrtWristNotifications
                     "
-                    style="margin-top: 5px"
                     @update:model-value="
                         setOverlayToast($event);
                         saveOpenVROption();
@@ -82,7 +82,7 @@
                 </div>
             </template>
             <div class="options-container-item">
-                <span class="name" style="vertical-align: top; padding-top: 10px">{{
+                <span class="name" style="vertical-align: top; padding-top: 8px">{{
                     t('view.settings.notifications.notifications.steamvr_notifications.notification_opacity')
                 }}</span>
                 <div style="flex: 0 0 300px; width: 300px; max-width: 100%; padding-top: 16px">
@@ -120,9 +120,7 @@
             </template>
             <template v-else>
                 <simple-switch
-                    :label="
-                        t('view.settings.notifications.notifications.steamvr_notifications.wayvr_notifications')
-                    "
+                    :label="t('view.settings.notifications.notifications.steamvr_notifications.wayvr_notifications')"
                     :value="xsNotifications"
                     @change="
                         setXsNotifications();
@@ -169,7 +167,7 @@
                     variant="outline"
                     size="sm"
                     :model-value="desktopToast"
-                    style="margin-top: 5px"
+                    style="margin-top: 6px"
                     @update:model-value="setDesktopToast(String($event))">
                     <ToggleGroupItem value="Never">{{
                         t('view.settings.notifications.notifications.conditions.never')
@@ -214,7 +212,7 @@
                     variant="outline"
                     size="sm"
                     :model-value="notificationTTS"
-                    style="margin-top: 5px"
+                    style="margin-top: 6px"
                     @update:model-value="saveNotificationTTS">
                     <ToggleGroupItem value="Never">{{
                         t('view.settings.notifications.notifications.conditions.never')
@@ -260,7 +258,7 @@
                 :label="t('view.settings.notifications.notifications.text_to_speech.tts_test_placeholder')"
                 :value="isTestTTSVisible"
                 @change="isTestTTSVisible = !isTestTTSVisible" />
-            <div v-if="isTestTTSVisible" style="margin-top: 5px">
+            <div v-if="isTestTTSVisible" style="margin-top: 6px">
                 <InputGroupTextareaField
                     v-model="notificationTTSTest"
                     :placeholder="t('view.settings.notifications.notifications.text_to_speech.tts_test_placeholder')"
@@ -372,10 +370,16 @@
         }
     });
 
+    /**
+     *
+     */
     function showNotyFeedFiltersDialog() {
         feedFiltersDialogMode.value = 'noty';
     }
 
+    /**
+     *
+     */
     function showNotificationPositionDialog() {
         isNotificationPositionDialogVisible.value = true;
     }
diff --git a/src/views/Settings/components/Tabs/PicturesTab.vue b/src/views/Settings/components/Tabs/PicturesTab.vue
index 8282b1a4..54a68cff 100644
--- a/src/views/Settings/components/Tabs/PicturesTab.vue
+++ b/src/views/Settings/components/Tabs/PicturesTab.vue
@@ -1,6 +1,6 @@
 <template>
     <!--//- Pictures | Screenshot Helper-->
-    <div class="options-container" style="margin-top: 0">
+    <div class="options-container mt-0">
         <span class="header">{{ t('view.settings.advanced.advanced.screenshot_helper.header') }}</span>
         <div class="options-container-item">
             <span class="name">{{ t('view.settings.advanced.advanced.screenshot_helper.description') }}</span>
@@ -41,7 +41,7 @@
     <div class="options-container">
         <span class="header">{{ t('view.settings.advanced.advanced.user_generated_content.header') }}</span>
         <br />
-        <div class="options-container-item" style="margin-bottom: 5px">
+        <div class="options-container-item mb-1.5">
             <span class="name" style="min-width: 300px">{{
                 t('view.settings.advanced.advanced.user_generated_content.description')
             }}</span>
@@ -61,7 +61,7 @@
         <br />
         <br />
         <br />
-        <span class="sub-header" style="margin-right: 5px">{{
+        <span class="sub-header mr-1.5">{{
             t('view.settings.advanced.advanced.save_instance_prints_to_file.header')
         }}</span>
         <TooltipWrapper
@@ -87,7 +87,7 @@
             @change="setSaveInstanceStickers()"
             :long-label="true" />
         <br />
-        <span class="sub-header" style="margin-right: 5px"
+        <span class="sub-header mr-1.5"
             >{{ t('view.settings.advanced.advanced.save_instance_emoji_to_file.header') }}
         </span>
         <TooltipWrapper
diff --git a/src/views/Settings/components/WristOverlaySettings.vue b/src/views/Settings/components/WristOverlaySettings.vue
index d6c916a3..a6cfbec1 100644
--- a/src/views/Settings/components/WristOverlaySettings.vue
+++ b/src/views/Settings/components/WristOverlaySettings.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="options-container" style="margin-top: 0">
+    <div class="options-container mt-0">
         <span class="header">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.header') }}</span>
         <div class="options-container-item">
             <Button
@@ -46,8 +46,7 @@
             <RadioGroup
                 :model-value="openVRAlways ? 'true' : 'false'"
                 :disabled="!openVR"
-                class="gap-2 flex"
-                style="margin-top: 8px"
+                class="gap-2 flex mt-2"
                 @update:modelValue="handleOpenVRAlwaysRadio">
                 <div class="flex items-center space-x-2">
                     <RadioGroupItem id="openVRAlways-false" value="false" />
@@ -64,8 +63,7 @@
             <RadioGroup
                 :model-value="overlaybutton ? 'true' : 'false'"
                 :disabled="!openVR || !overlayWrist"
-                class="gap-2 flex"
-                style="margin-top: 8px"
+                class="gap-2 flex mt-2"
                 @update:modelValue="handleOverlayButtonRadio">
                 <div class="flex items-center space-x-2">
                     <RadioGroupItem id="overlaybutton-false" value="false" />
@@ -206,6 +204,10 @@
 
     const { saveOpenVROption } = useVrStore();
 
+    /**
+     *
+     * @param value
+     */
     function handleOpenVRAlwaysRadio(value) {
         const nextValue = value === 'true';
         if (nextValue !== openVRAlways.value) {
@@ -214,6 +216,10 @@
         }
     }
 
+    /**
+     *
+     * @param value
+     */
     function handleOverlayButtonRadio(value) {
         const nextValue = value === 'true';
         if (nextValue !== overlaybutton.value) {
diff --git a/src/views/Settings/dialogs/AvatarProviderDialog.vue b/src/views/Settings/dialogs/AvatarProviderDialog.vue
index 074941d1..4f06e747 100644
--- a/src/views/Settings/dialogs/AvatarProviderDialog.vue
+++ b/src/views/Settings/dialogs/AvatarProviderDialog.vue
@@ -6,18 +6,20 @@
             </DialogHeader>
             <div>
                 <InputGroupAction
+                    class="mt-1.5"
                     v-for="(provider, index) in avatarRemoteDatabaseProviderList"
                     :key="index"
                     v-model="avatarRemoteDatabaseProviderList[index]"
                     size="sm"
-                    style="margin-top: 5px"
                     @change="saveAvatarProviderList">
                     <template #actions>
-                        <Trash2 class="cursor-pointer opacity-80 hover:opacity-100" @click="removeAvatarProvider(provider)" />
+                        <Trash2
+                            class="cursor-pointer opacity-80 hover:opacity-100"
+                            @click="removeAvatarProvider(provider)" />
                     </template>
                 </InputGroupAction>
 
-                <Button size="sm" style="margin-top: 5px" @click="avatarRemoteDatabaseProviderList.push('')">
+                <Button size="sm" style="margin-top: 6px" @click="avatarRemoteDatabaseProviderList.push('')">
                     {{ t('dialog.avatar_database_provider.add_provider') }}
                 </Button>
             </div>
@@ -51,6 +53,9 @@
 
     const emit = defineEmits(['update:isAvatarProviderDialogVisible']);
 
+    /**
+     *
+     */
     function closeDialog() {
         emit('update:isAvatarProviderDialogVisible', false);
     }
diff --git a/src/views/Settings/dialogs/ChangelogDialog.vue b/src/views/Settings/dialogs/ChangelogDialog.vue
index 813fe81d..f4e7d15c 100644
--- a/src/views/Settings/dialogs/ChangelogDialog.vue
+++ b/src/views/Settings/dialogs/ChangelogDialog.vue
@@ -20,12 +20,12 @@
                     >.
                 </span>
                 <VueShowdown
-                    class="changelog-markdown"
+                    class="changelog-markdown mt-2"
                     :markdown="changeLogDialog.changeLog"
                     flavor="github"
                     :options="showdownOptions"
                     @click="handleLinkClick"
-                    style="height: 62vh; overflow-y: auto; margin-top: 10px" />
+                    style="height: 62vh; overflow-y: auto" />
             </div>
             <DialogFooter>
                 <Button
diff --git a/src/views/Settings/dialogs/FeedFiltersDialog.vue b/src/views/Settings/dialogs/FeedFiltersDialog.vue
index 42ad79da..5686131a 100644
--- a/src/views/Settings/dialogs/FeedFiltersDialog.vue
+++ b/src/views/Settings/dialogs/FeedFiltersDialog.vue
@@ -8,11 +8,7 @@
                 <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"
-                            side="top"
-                            style="margin-left: 5px"
-                            :content="setting.tooltip">
+                        }}<TooltipWrapper class="ml-1.5" v-if="setting.tooltip" side="top" :content="setting.tooltip">
                             <AlertTriangle class="inline-block" v-if="setting.tooltipWarning" />
                             <Info class="inline-block" v-else />
                         </TooltipWrapper>
diff --git a/src/views/Settings/dialogs/NotificationPositionDialog.vue b/src/views/Settings/dialogs/NotificationPositionDialog.vue
index f47011fa..bb6143bf 100644
--- a/src/views/Settings/dialogs/NotificationPositionDialog.vue
+++ b/src/views/Settings/dialogs/NotificationPositionDialog.vue
@@ -15,9 +15,8 @@
                     x="0px"
                     y="0px"
                     viewBox="80 80 80 100"
-                    style="margin-top: 24px"
                     xml:space="preserve"
-                    class="absolute inset-0 size-full">
+                    class="absolute inset-0 size-full mt-6">
                     <path
                         style="fill: black"
                         d="M291.89,5A3.11,3.11,0,0,1,295,8.11V160.64a3.11,3.11,0,0,1-3.11,3.11H8.11A3.11,3.11,0,0,1,5,160.64V8.11A3.11,3.11,0,0,1,8.11,5H291.89m0-5H8.11A8.11,8.11,0,0,0,0,8.11V160.64a8.11,8.11,0,0,0,8.11,8.11H291.89a8.11,8.11,0,0,0,8.11-8.11V8.11A8.11,8.11,0,0,0,291.89,0Z" />
@@ -109,6 +108,9 @@
 
     const emit = defineEmits(['update:isNotificationPositionDialogVisible']);
 
+    /**
+     *
+     */
     function closeDialog() {
         emit('update:isNotificationPositionDialogVisible', false);
     }
diff --git a/src/views/Settings/dialogs/OpenSourceSoftwareNoticeDialog.vue b/src/views/Settings/dialogs/OpenSourceSoftwareNoticeDialog.vue
index f6c9ace8..fa9f9a3e 100644
--- a/src/views/Settings/dialogs/OpenSourceSoftwareNoticeDialog.vue
+++ b/src/views/Settings/dialogs/OpenSourceSoftwareNoticeDialog.vue
@@ -9,7 +9,7 @@
                     <span>{{ t('dialog.open_source.description') }}</span>
                 </div>
 
-                <div v-for="lib in openSourceSoftwareLicenses" :key="lib.name" style="margin-top: 15px">
+                <div class="mt-4" v-for="lib in openSourceSoftwareLicenses" :key="lib.name">
                     <p style="font-weight: bold">{{ lib.name }}</p>
                     <pre style="font-size: 12px; white-space: pre-line">{{ lib.licenseText }}</pre>
                 </div>
@@ -35,6 +35,9 @@
 
     const emit = defineEmits(['update:ossDialog']);
 
+    /**
+     *
+     */
     function closeDialog() {
         emit('update:ossDialog', false);
     }
diff --git a/src/views/Settings/dialogs/PrimaryPasswordDialog.vue b/src/views/Settings/dialogs/PrimaryPasswordDialog.vue
index ecbddf8e..fdf10dab 100644
--- a/src/views/Settings/dialogs/PrimaryPasswordDialog.vue
+++ b/src/views/Settings/dialogs/PrimaryPasswordDialog.vue
@@ -12,10 +12,10 @@
                 :maxlength="32"
                 autofocus />
             <InputGroupField
+                class="mt-1.5"
                 v-model="enablePrimaryPasswordDialog.rePassword"
                 :placeholder="t('dialog.primary_password.re_input_placeholder')"
                 type="password"
-                style="margin-top: 5px"
                 size="sm"
                 :maxlength="32" />
             <DialogFooter>
@@ -47,6 +47,9 @@
     const { enablePrimaryPasswordDialog } = storeToRefs(authStore);
     const { setPrimaryPassword } = authStore;
 
+    /**
+     *
+     */
     function handleSetPrimaryPassword() {
         setPrimaryPassword(enablePrimaryPasswordDialog.value.password);
         enablePrimaryPasswordDialog.value.visible = false;
diff --git a/src/views/Settings/dialogs/VRChatConfigDialog.vue b/src/views/Settings/dialogs/VRChatConfigDialog.vue
index 1a1a4fe7..14702af4 100644
--- a/src/views/Settings/dialogs/VRChatConfigDialog.vue
+++ b/src/views/Settings/dialogs/VRChatConfigDialog.vue
@@ -10,46 +10,42 @@
                     {{ t('dialog.config_json.description2') }}
                 </div>
                 <br />
-                <span style="margin-right: 5px">{{ t('dialog.config_json.cache_size') }}</span>
+                <span class="mr-1.5">{{ t('dialog.config_json.cache_size') }}</span>
                 <span v-text="VRChatUsedCacheSize"></span>
                 <span>/</span>
                 <span v-text="totalCacheSize"></span>
                 <span>GB</span>
                 <TooltipWrapper side="top" :content="t('dialog.config_json.refresh')">
                     <Button
-                        class="rounded-full"
+                        class="rounded-full ml-1.5"
                         variant="outline"
                         size="icon-sm"
                         :disabled="VRChatCacheSizeLoading"
-                        style="margin-left: 5px"
                         @click="getVRChatCacheSize">
                         <Spinner v-if="VRChatCacheSizeLoading" />
                         <RefreshCw v-else />
                     </Button>
                 </TooltipWrapper>
 
-                <div style="margin-top: 10px">
-                    <span style="margin-right: 5px">{{ t('dialog.config_json.delete_all_cache') }}</span>
-                    <Button
-                        size="sm"
-                        variant="outline"
-                        style="margin-left: 5px"
-                        @click="showDeleteAllVRChatCacheConfirm"
-                        >{{ t('dialog.config_json.delete_cache') }}</Button
-                    >
+                <div class="mt-2">
+                    <span class="mr-1.5">{{ t('dialog.config_json.delete_all_cache') }}</span>
+                    <Button class="ml-1.5" size="sm" variant="outline" @click="showDeleteAllVRChatCacheConfirm">{{
+                        t('dialog.config_json.delete_cache')
+                    }}</Button>
                 </div>
 
-                <div style="margin-top: 10px">
-                    <span style="margin-right: 5px">{{ t('dialog.config_json.delete_old_cache') }}</span>
-                    <Button size="sm" variant="outline" style="margin-left: 5px" @click="sweepVRChatCache">{{
+                <div class="mt-2">
+                    <span class="mr-1.5">{{ t('dialog.config_json.delete_old_cache') }}</span>
+                    <Button class="ml-1.5" size="sm" variant="outline" @click="sweepVRChatCache">{{
                         t('dialog.config_json.sweep_cache')
                     }}</Button>
                 </div>
 
-                <div v-for="(item, value) in VRChatConfigList" :key="value" style="display: block; margin-top: 10px">
+                <div class="mt-2" v-for="(item, value) in VRChatConfigList" :key="value" style="display: block">
                     <span style="word-break: keep-all">{{ item.name }}:</span>
                     <div style="display: flex">
                         <InputGroupAction
+                            class="mt-1.5"
                             v-model="VRChatConfigFile[value]"
                             :placeholder="item.default"
                             size="sm"
@@ -57,7 +53,7 @@
                             :min="item.min"
                             :max="item.max"
                             @input="refreshDialogValues"
-                            style="flex: 1; margin-top: 5px">
+                            style="flex: 1">
                             <template #actions>
                                 <Button
                                     size="icon-sm"
@@ -71,13 +67,13 @@
                     </div>
                 </div>
 
-                <div style="display: inline-block; margin-top: 10px">
+                <div style="display: inline-block; margin-top: 8px">
                     <span>{{ t('dialog.config_json.camera_resolution') }}</span>
                     <br />
                     <Select
                         :model-value="vrchatCameraResolutionKey"
                         @update:modelValue="(v) => (vrchatCameraResolutionKey = v)">
-                        <SelectTrigger size="sm" style="margin-top: 5px">
+                        <SelectTrigger size="sm" style="margin-top: 6px">
                             <SelectValue :placeholder="getVRChatCameraResolution()" />
                         </SelectTrigger>
                         <SelectContent>
@@ -94,13 +90,13 @@
                 </div>
                 <br />
 
-                <div style="display: inline-block; margin-top: 10px">
+                <div style="display: inline-block; margin-top: 8px">
                     <span>{{ t('dialog.config_json.spout_resolution') }}</span>
                     <br />
                     <Select
                         :model-value="vrchatSpoutResolutionKey"
                         @update:modelValue="(v) => (vrchatSpoutResolutionKey = v)">
-                        <SelectTrigger size="sm" style="margin-top: 5px">
+                        <SelectTrigger size="sm" style="margin-top: 6px">
                             <SelectValue :placeholder="getVRChatSpoutResolution()" />
                         </SelectTrigger>
                         <SelectContent>
@@ -117,13 +113,13 @@
                 </div>
                 <br />
 
-                <div style="display: inline-block; margin-top: 10px">
+                <div style="display: inline-block; margin-top: 8px">
                     <span>{{ t('dialog.config_json.screenshot_resolution') }}</span>
                     <br />
                     <Select
                         :model-value="vrchatScreenshotResolutionKey"
                         @update:modelValue="(v) => (vrchatScreenshotResolutionKey = v)">
-                        <SelectTrigger size="sm" style="margin-top: 5px">
+                        <SelectTrigger size="sm" style="margin-top: 6px">
                             <SelectValue :placeholder="getVRChatScreenshotResolution()" />
                         </SelectTrigger>
                         <SelectContent>
@@ -140,13 +136,13 @@
                 </div>
                 <br />
 
-                <label class="inline-flex items-center gap-2" style="margin-top: 5px; display: block">
+                <label class="inline-flex items-center gap-2" style="margin-top: 6px; display: block">
                     <Checkbox
                         v-model="VRChatConfigFile.picture_output_split_by_date"
                         @update:modelValue="refreshDialogValues" />
                     <span>{{ t('dialog.config_json.picture_sort_by_date') }}</span>
                 </label>
-                <label class="inline-flex items-center gap-2" style="margin-top: 5px; display: block">
+                <label class="inline-flex items-center gap-2" style="margin-top: 6px; display: block">
                     <Checkbox v-model="VRChatConfigFile.disableRichPresence" @update:modelValue="refreshDialogValues" />
                     <span>{{ t('dialog.config_json.disable_discord_presence') }}</span>
                 </label>
@@ -267,6 +263,10 @@
 
     const VRCHAT_RESOLUTION_DEFAULT_KEY = '__default__';
 
+    /**
+     *
+     * @param row
+     */
     function getVRChatResolutionKey(row) {
         const width = Number(row?.width);
         const height = Number(row?.height);
@@ -327,6 +327,9 @@
         }
     });
 
+    /**
+     *
+     */
     function showDeleteAllVRChatCacheConfirm() {
         modalStore
             .confirm({
@@ -341,6 +344,9 @@
             .catch(() => {});
     }
 
+    /**
+     *
+     */
     async function deleteAllVRChatCache() {
         try {
             await AssetBundleManager.DeleteAllCache();
@@ -351,6 +357,10 @@
         getVRChatCacheSize();
     }
 
+    /**
+     *
+     * @param value
+     */
     async function openConfigFolderBrowser(value) {
         const oldPath = VRChatConfigFile.value[value];
         const newPath = await folderSelectorDialog(oldPath);
@@ -360,29 +370,47 @@
         }
     }
 
+    /**
+     *
+     */
     function refreshDialogValues() {
         loading.value = true;
         loading.value = false;
     }
 
+    /**
+     *
+     * @param res
+     */
     function setVRChatSpoutResolution(res) {
         VRChatConfigFile.value.camera_spout_res_height = res.height;
         VRChatConfigFile.value.camera_spout_res_width = res.width;
         refreshDialogValues();
     }
 
+    /**
+     *
+     * @param res
+     */
     function setVRChatCameraResolution(res) {
         VRChatConfigFile.value.camera_res_height = res.height;
         VRChatConfigFile.value.camera_res_width = res.width;
         refreshDialogValues();
     }
 
+    /**
+     *
+     * @param res
+     */
     function setVRChatScreenshotResolution(res) {
         VRChatConfigFile.value.screenshot_res_height = res.height;
         VRChatConfigFile.value.screenshot_res_width = res.width;
         refreshDialogValues();
     }
 
+    /**
+     *
+     */
     function getVRChatCameraResolution() {
         if (VRChatConfigFile.value.camera_res_height && VRChatConfigFile.value.camera_res_width) {
             const res = `${VRChatConfigFile.value.camera_res_width}x${VRChatConfigFile.value.camera_res_height}`;
@@ -391,6 +419,9 @@
         return '1920x1080 (1080p)';
     }
 
+    /**
+     *
+     */
     function getVRChatSpoutResolution() {
         if (VRChatConfigFile.value.camera_spout_res_height && VRChatConfigFile.value.camera_spout_res_width) {
             const res = `${VRChatConfigFile.value.camera_spout_res_width}x${VRChatConfigFile.value.camera_spout_res_height}`;
@@ -399,6 +430,9 @@
         return '1920x1080 (1080p)';
     }
 
+    /**
+     *
+     */
     function getVRChatScreenshotResolution() {
         if (VRChatConfigFile.value.screenshot_res_height && VRChatConfigFile.value.screenshot_res_width) {
             const res = `${VRChatConfigFile.value.screenshot_res_width}x${VRChatConfigFile.value.screenshot_res_height}`;
@@ -407,6 +441,9 @@
         return '1920x1080 (1080p)';
     }
 
+    /**
+     *
+     */
     function saveVRChatConfigFile() {
         for (const item in VRChatConfigFile.value) {
             if (item === 'picture_output_split_by_date') {
@@ -429,11 +466,17 @@
         closeDialog();
     }
 
+    /**
+     *
+     */
     function WriteVRChatConfigFile() {
         const json = JSON.stringify(VRChatConfigFile.value, null, '\t');
         AppApi.WriteConfigFile(json);
     }
 
+    /**
+     *
+     */
     async function readVRChatConfigFile() {
         const config = await AppApi.ReadConfigFileSafe();
         if (config) {
@@ -450,6 +493,9 @@
         }
     }
 
+    /**
+     *
+     */
     function closeDialog() {
         isVRChatConfigDialogVisible.value = false;
     }
diff --git a/src/views/Sidebar/Sidebar.vue b/src/views/Sidebar/Sidebar.vue
index 52a32a49..ccab1e4d 100644
--- a/src/views/Sidebar/Sidebar.vue
+++ b/src/views/Sidebar/Sidebar.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="x-aside-container">
         <div style="display: flex; align-items: baseline">
-            <div class="search-container" style="flex: 1; padding: 10px; padding-left: 0">
+            <div class="search-container p-2 pl-0" style="flex: 1">
                 <button
                     type="button"
                     class="border-input dark:bg-input/30 flex h-9 w-full items-center gap-2 rounded-md border bg-transparent px-3 shadow-xs transition-[color,box-shadow] hover:border-ring cursor-pointer overflow-hidden"
@@ -209,7 +209,7 @@
             variant="equal"
             fill
             class="zero-margin-tabs"
-            style="height: calc(100% - 70px); margin-top: 5px">
+            style="height: calc(100% - 70px); margin-top: 6px">
             <template #label-friends>
                 <span>{{ t('side_panel.friends') }}</span>
                 <span class="sidebar-tab-count"> ({{ onlineFriendCount }}/{{ friends.size }}) </span>
@@ -380,16 +380,16 @@
         display: flex;
         flex: none;
         flex-direction: column;
-        padding: 10px 5px 5px 5px;
+        padding: 8px 6px 6px 6px;
         order: 99;
         height: 100%;
         box-sizing: border-box;
-        padding-left: 10px;
+        padding-left: 8px;
     }
 
     .sidebar-tab-count {
         font-size: 12px;
-        margin-left: 10px;
+        margin-left: 8px;
     }
 
     .search-container {
diff --git a/src/views/Sidebar/components/FriendsSidebar.vue b/src/views/Sidebar/components/FriendsSidebar.vue
index 8405b249..7c6212dc 100644
--- a/src/views/Sidebar/components/FriendsSidebar.vue
+++ b/src/views/Sidebar/components/FriendsSidebar.vue
@@ -482,7 +482,7 @@
                             buildFriendRow(friend, `instance:${groupKey}:${friend?.id ?? idx}`, {
                                 isGroupByInstance: true,
                                 paddingBottom: idx === friendArr.length - 1 ? 5 : undefined,
-                                itemStyle: idx === friendArr.length - 1 ? { marginBottom: '5px' } : undefined
+                                itemStyle: idx === friendArr.length - 1 ? { marginBottom: '6px' } : undefined
                             })
                         );
                     });
diff --git a/src/views/Tools/Gallery.vue b/src/views/Tools/Gallery.vue
index a9aff75d..21b634c8 100644
--- a/src/views/Tools/Gallery.vue
+++ b/src/views/Tools/Gallery.vue
@@ -97,7 +97,7 @@
                                     :src="image.versions[image.versions.length - 1].file.url"
                                     loading="lazy" />
                             </div>
-                            <div class="float-right" style="margin-top: 5px">
+                            <div class="float-right" style="margin-top: 6px">
                                 <Button
                                     class="rounded-full mr-2"
                                     size="icon-sm"
@@ -169,7 +169,7 @@
                                     :src="image.versions[image.versions.length - 1].file.url"
                                     loading="lazy" />
                             </div>
-                            <div class="float-right" style="margin-top: 5px">
+                            <div class="float-right" style="margin-top: 6px">
                                 <Button
                                     class="rounded-full mr-2"
                                     size="icon-sm"
@@ -203,7 +203,7 @@
                     <br />
                     <br />
                     <div>
-                        <ButtonGroup style="margin-right: 10px">
+                        <ButtonGroup style="margin-right: 8px">
                             <Button variant="outline" size="sm" @click="refreshEmojiTable">
                                 <RefreshCw />
                                 {{ t('dialog.gallery_icons.refresh') }}
@@ -251,7 +251,7 @@
                                 @click="openExternalLink('https://vrcemoji.com')">
                                 {{ t('dialog.gallery_icons.create_animated_emoji') }}
                             </Button>
-                            <span style="margin-right: 10px">{{ t('dialog.gallery_icons.emoji_animation_fps') }}</span>
+                            <span style="margin-right: 8px">{{ t('dialog.gallery_icons.emoji_animation_fps') }}</span>
                             <NumberField
                                 v-model="emojiAnimFps"
                                 :min="1"
@@ -265,7 +265,7 @@
                                     <NumberFieldIncrement />
                                 </NumberFieldContent>
                             </NumberField>
-                            <span style="margin-right: 10px">{{
+                            <span style="margin-right: 8px">{{
                                 t('dialog.gallery_icons.emoji_animation_frame_count')
                             }}</span>
                             <NumberField
@@ -281,7 +281,7 @@
                                     <NumberFieldIncrement />
                                 </NumberFieldContent>
                             </NumberField>
-                            <label class="inline-flex items-center gap-2" style="margin-left: 10px; margin-right: 10px">
+                            <label class="inline-flex items-center gap-2" style="margin-left: 8px; margin-right: 8px">
                                 <Checkbox v-model="emojiAnimLoopPingPong" />
                                 <span>{{ t('dialog.gallery_icons.emoji_loop_pingpong') }}</span>
                             </label>
@@ -306,18 +306,18 @@
                                     :imageUrl="image.versions[image.versions.length - 1].file.url"
                                     :size="200"></Emoji>
                             </div>
-                            <div style="display: inline-block; margin: 5px">
+                            <div style="display: inline-block; margin: 6px">
                                 <span v-if="image.loopStyle === 'pingpong'">
-                                    <RefreshCw style="margin-right: 5px" />
+                                    <RefreshCw style="margin-right: 6px" />
                                 </span>
-                                <span style="margin-right: 5px">{{ image.animationStyle }}</span>
-                                <span v-if="image.framesOverTime" style="margin-right: 5px"
+                                <span style="margin-right: 6px">{{ image.animationStyle }}</span>
+                                <span v-if="image.framesOverTime" style="margin-right: 6px"
                                     >{{ image.framesOverTime }}fps</span
                                 >
-                                <span v-if="image.frames" style="margin-right: 5px">{{ image.frames }}frames</span>
+                                <span v-if="image.frames" style="margin-right: 6px">{{ image.frames }}frames</span>
                                 <br />
                             </div>
-                            <div class="float-right" style="margin-top: 5px">
+                            <div class="float-right" style="margin-top: 6px">
                                 <Button
                                     class="rounded-full mr-2"
                                     size="icon-sm"
@@ -382,7 +382,7 @@
                                     :src="image.versions[image.versions.length - 1].file.url"
                                     loading="lazy" />
                             </div>
-                            <div class="float-right" style="margin-top: 5px">
+                            <div class="float-right" style="margin-top: 6px">
                                 <Button
                                     class="rounded-full mr-2"
                                     size="icon-sm"
@@ -434,10 +434,10 @@
                             v-model="printUploadNote"
                             :rows="1"
                             :maxlength="32"
-                            style="margin-left: 10px; width: 300px"
+                            style="margin-left: 8px; width: 300px"
                             :placeholder="t('dialog.gallery_icons.note')"
                             input-class="resize-none min-h-0" />
-                        <label class="inline-flex items-center gap-2" style="margin-left: 10px; margin-right: 10px">
+                        <label class="inline-flex items-center gap-2" style="margin-left: 8px; margin-right: 8px">
                             <Checkbox v-model="printCropBorder" />
                             <span>{{ t('dialog.gallery_icons.crop_print_border') }}</span>
                         </label>
@@ -452,7 +452,7 @@
                                 :src="image.files.image"
                                 loading="lazy" />
                         </div>
-                        <div style="margin-top: 5px; width: 208px">
+                        <div style="margin-top: 6px; width: 208px">
                             <span class="block truncate" v-if="image.note" v-text="image.note"></span>
                             <span v-else class="block">&nbsp;</span>
                             <Location
@@ -519,7 +519,7 @@
                                 :src="item.imageUrl"
                                 loading="lazy" />
                         </div>
-                        <div style="margin-top: 5px; width: 208px">
+                        <div style="margin-top: 6px; width: 208px">
                             <span class="block truncate" v-text="item.name"></span>
                             <span v-if="item.description" class="block truncate" v-text="item.description"></span>
                             <span v-else class="block">&nbsp;</span>
diff --git a/src/views/Tools/ScreenshotMetadata.vue b/src/views/Tools/ScreenshotMetadata.vue
index e7e58b25..8443d5b4 100644
--- a/src/views/Tools/ScreenshotMetadata.vue
+++ b/src/views/Tools/ScreenshotMetadata.vue
@@ -56,7 +56,7 @@
                     style="width: 200px"
                     @input="screenshotMetadataSearch" />
                 <Select :model-value="screenshotMetadataDialog.searchType" @update:modelValue="handleSearchTypeChange">
-                    <SelectTrigger size="sm" style="width: 150px; margin-left: 10px">
+                    <SelectTrigger class="ml-2" size="sm" style="width: 150px">
                         <SelectValue :placeholder="t('dialog.screenshot_metadata.search_type_placeholder')" />
                     </SelectTrigger>
                     <SelectContent>
@@ -69,7 +69,7 @@
                 </Select>
             </div>
             <template v-if="screenshotMetadataDialog.searchIndex !== null">
-                <span style="white-space: pre-wrap; font-size: 12px; margin-left: 10px">{{
+                <span class="ml-2" style="white-space: pre-wrap; font-size: 12px">{{
                     screenshotMetadataDialog.searchIndex + 1 + '/' + screenshotMetadataDialog.searchResults.length
                 }}</span>
             </template>
@@ -81,12 +81,12 @@
                 <span v-text="screenshotMetadataDialog.metadata.note"></span>
                 <br />
             </template>
-            <span v-if="screenshotMetadataDialog.metadata.dateTime" style="margin-right: 5px">{{
+            <span v-if="screenshotMetadataDialog.metadata.dateTime" style="margin-right: 6px">{{
                 formatDateFilter(screenshotMetadataDialog.metadata.dateTime, 'long')
             }}</span>
             <span
                 v-if="screenshotMetadataDialog.metadata.fileResolution"
-                style="margin-right: 5px"
+                style="margin-right: 6px"
                 v-text="screenshotMetadataDialog.metadata.fileResolution"></span>
             <Badge v-if="screenshotMetadataDialog.metadata.fileSize" variant="outline">{{
                 screenshotMetadataDialog.metadata.fileSize
@@ -138,7 +138,7 @@
                     v-text="screenshotMetadataDialog.metadata.error"></pre>
                 <br />
             </template>
-            <span v-for="user in screenshotMetadataDialog.metadata.players" :key="user.id" style="margin-top: 5px">
+            <span v-for="user in screenshotMetadataDialog.metadata.players" :key="user.id" style="margin-top: 6px">
                 <span class="cursor-pointer" @click="lookupUser(user)" v-text="user.displayName"></span>
                 <span v-if="user.pos" v-text="'(' + user.pos.x + ', ' + user.pos.y + ', ' + user.pos.z + ')'"></span>
                 <br />
@@ -222,10 +222,17 @@
         }
     };
 
+    /**
+     *
+     */
     function goBack() {
         router.push({ name: 'tools' });
     }
 
+    /**
+     *
+     * @param event
+     */
     function handleDrop(event) {
         if (currentlyDroppingFile.value === null) {
             return;
@@ -238,6 +245,9 @@
         event.preventDefault();
     }
 
+    /**
+     *
+     */
     async function getAndDisplayScreenshotFromFile() {
         let filePath = '';
 
@@ -259,6 +269,9 @@
         getAndDisplayScreenshot(filePath);
     }
 
+    /**
+     *
+     */
     function getAndDisplayLastScreenshot() {
         screenshotMetadataResetSearch();
         AppApi.GetLastScreenshot().then((path) => {
@@ -269,6 +282,10 @@
         });
     }
 
+    /**
+     *
+     * @param path
+     */
     function copyImageToClipboard(path) {
         if (!path) {
             return;
@@ -277,6 +294,10 @@
             toast.success('Image copied to clipboard');
         });
     }
+    /**
+     *
+     * @param path
+     */
     function openImageFolder(path) {
         if (!path) {
             return;
@@ -285,6 +306,10 @@
             toast.success('Opened image folder');
         });
     }
+    /**
+     *
+     * @param path
+     */
     function deleteMetadata(path) {
         if (!path) {
             return;
@@ -299,6 +324,9 @@
             getAndDisplayScreenshot(D.metadata.filePath, true);
         });
     }
+    /**
+     *
+     */
     function uploadScreenshotToGallery() {
         const D = screenshotMetadataDialog;
         if (D.metadata.fileSizeBytes > 10000000) {
@@ -325,6 +353,9 @@
                 D.isUploading = false;
             });
     }
+    /**
+     *
+     */
     function screenshotMetadataSearch() {
         const D = screenshotMetadataDialog;
 
@@ -370,11 +401,19 @@
         }, 500);
     }
 
+    /**
+     *
+     * @param value
+     */
     function handleSearchTypeChange(value) {
         screenshotMetadataDialog.searchType = value;
         screenshotMetadataSearch();
     }
 
+    /**
+     *
+     * @param index
+     */
     function screenshotMetadataCarouselChange(index) {
         const D = screenshotMetadataDialog;
         const searchIndex = D.searchIndex;
@@ -405,6 +444,9 @@
         }
     }
 
+    /**
+     *
+     */
     function screenshotMetadataResetSearch() {
         const D = screenshotMetadataDialog;
 
@@ -413,6 +455,10 @@
         D.searchResults = null;
     }
 
+    /**
+     *
+     * @param index
+     */
     function screenshotMetadataCarouselChangeSearch(index) {
         const D = screenshotMetadataDialog;
         let searchIndex = D.searchIndex;
@@ -445,6 +491,10 @@
         D.searchIndex = searchIndex;
     }
 
+    /**
+     *
+     * @param api
+     */
     function handleScreenshotMetadataCarouselInit(api) {
         screenshotMetadataCarouselApi.value = api;
         api.on('select', handleCarouselSelect);
@@ -452,6 +502,9 @@
         resetCarouselIndex();
     }
 
+    /**
+     *
+     */
     function handleCarouselSelect() {
         if (ignoreCarouselSelect.value || !screenshotMetadataCarouselApi.value) {
             return;
@@ -460,6 +513,9 @@
         screenshotMetadataCarouselChange(index);
     }
 
+    /**
+     *
+     */
     function resetCarouselIndex() {
         const api = screenshotMetadataCarouselApi.value;
         if (!api) {
@@ -472,6 +528,11 @@
         }, 0);
     }
 
+    /**
+     *
+     * @param path
+     * @param needsCarouselFiles
+     */
     async function getAndDisplayScreenshot(path, needsCarouselFiles = true) {
         const metadata = await AppApi.GetScreenshotMetadata(path);
         displayScreenshotMetadata(metadata, needsCarouselFiles);
diff --git a/src/views/Tools/Tools.vue b/src/views/Tools/Tools.vue
index 74aa6a79..36a660a0 100644
--- a/src/views/Tools/Tools.vue
+++ b/src/views/Tools/Tools.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="chart" class="x-container">
-        <div class="options-container" style="margin-top: 0">
+        <div class="options-container mt-0">
             <span class="header">{{ t('view.tools.header') }}</span>
 
             <div class="tool-categories">
@@ -539,7 +539,7 @@
             }
 
             .category-title {
-                margin-left: 5px;
+                margin-left: 6px;
                 font-size: 16px;
                 font-weight: 600;
             }
diff --git a/src/views/Tools/components/GroupCalendarEventCard.vue b/src/views/Tools/components/GroupCalendarEventCard.vue
index 326edd76..cb21b521 100644
--- a/src/views/Tools/components/GroupCalendarEventCard.vue
+++ b/src/views/Tools/components/GroupCalendarEventCard.vue
@@ -333,7 +333,7 @@
         height: 24px;
         gap: 4px;
         cursor: pointer;
-        margin-left: 5px;
+        margin-left: 6px;
     }
 
     .event-card .event-content {
diff --git a/src/views/Tools/components/GroupCalendarMonth.vue b/src/views/Tools/components/GroupCalendarMonth.vue
index a6b7a74c..e70c4d85 100644
--- a/src/views/Tools/components/GroupCalendarMonth.vue
+++ b/src/views/Tools/components/GroupCalendarMonth.vue
@@ -56,20 +56,36 @@
 
     const selectedDayKey = computed(() => dayjs(props.modelValue).format('YYYY-MM-DD'));
 
+    /**
+     *
+     * @param dateValue
+     */
     function toKey(dateValue) {
         return dayjs(toDate(dateValue, timeZone)).format('YYYY-MM-DD');
     }
 
+    /**
+     *
+     * @param dateValue
+     */
     function eventCountFor(dateValue) {
         const key = toKey(dateValue);
         return props.eventsByDate?.[key]?.length ?? 0;
     }
 
+    /**
+     *
+     * @param dateValue
+     */
     function hasFollowingFor(dateValue) {
         const key = toKey(dateValue);
         return Boolean(props.followingByDate?.[key]);
     }
 
+    /**
+     *
+     * @param next
+     */
     function onUpdateModelValue(next) {
         if (!next) return;
         internalValue.value = next;
@@ -78,6 +94,10 @@
         emit('update:modelValue', asDate);
     }
 
+    /**
+     *
+     * @param next
+     */
     function onUpdatePlaceholder(next) {
         if (!next) return;
         placeholder.value = next;
@@ -85,6 +105,10 @@
         emit('update:modelValue', toDate(next, timeZone));
     }
 
+    /**
+     *
+     * @param dateValue
+     */
     function dayLabel(dateValue) {
         return dayjs(toDate(dateValue, timeZone)).format('D');
     }
@@ -195,7 +219,7 @@
         justify-content: center;
         font-size: 12px;
         z-index: 10;
-        padding: 0 5px;
+        padding: 0 6px;
         line-height: 14px;
     }
 
diff --git a/src/views/Tools/dialogs/EditInviteMessagesDialog.vue b/src/views/Tools/dialogs/EditInviteMessagesDialog.vue
index 74d6e6b4..a7041a81 100644
--- a/src/views/Tools/dialogs/EditInviteMessagesDialog.vue
+++ b/src/views/Tools/dialogs/EditInviteMessagesDialog.vue
@@ -6,8 +6,8 @@
             </DialogHeader>
             <TabsUnderline v-model="activeTab" :items="editInviteTabs" :unmount-on-hide="false" class="mt-2.5">
                 <template #message>
-                    <DataTableLayout
-                        style="margin-top: 10px; cursor: pointer"
+                    <DataTableLayout class="mt-2"
+                        style="cursor: pointer"
                         :table="inviteMessageTanstackTable"
                         :loading="false"
                         :show-pagination="false"
@@ -15,7 +15,7 @@
                 </template>
                 <template #request>
                     <DataTableLayout
-                        style="margin-top: 10px; cursor: pointer"
+                        style="margin-top: 8px; cursor: pointer"
                         :table="inviteRequestTanstackTable"
                         :loading="false"
                         :show-pagination="false"
@@ -23,7 +23,7 @@
                 </template>
                 <template #requestResponse>
                     <DataTableLayout
-                        style="margin-top: 10px; cursor: pointer"
+                        style="margin-top: 8px; cursor: pointer"
                         :table="inviteRequestResponseTanstackTable"
                         :loading="false"
                         :show-pagination="false"
@@ -31,7 +31,7 @@
                 </template>
                 <template #response>
                     <DataTableLayout
-                        style="margin-top: 10px; cursor: pointer"
+                        style="margin-top: 8px; cursor: pointer"
                         :table="inviteResponseTanstackTable"
                         :loading="false"
                         :show-pagination="false"
diff --git a/src/views/Tools/dialogs/ExportAvatarsListDialog.vue b/src/views/Tools/dialogs/ExportAvatarsListDialog.vue
index 9abe0801..8bd60f3a 100644
--- a/src/views/Tools/dialogs/ExportAvatarsListDialog.vue
+++ b/src/views/Tools/dialogs/ExportAvatarsListDialog.vue
@@ -6,11 +6,9 @@
             </DialogHeader>
             <InputGroupTextareaField
                 v-model="exportAvatarsListCsv"
-                
                 :rows="15"
                 readonly
-                style="margin-top: 15px"
-                input-class="resize-none"
+                input-class="resize-none mt-4"
                 @click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
         </DialogContent>
     </Dialog>
diff --git a/src/views/Tools/dialogs/ExportDiscordNamesDialog.vue b/src/views/Tools/dialogs/ExportDiscordNamesDialog.vue
index da5d5879..62da1ad4 100644
--- a/src/views/Tools/dialogs/ExportDiscordNamesDialog.vue
+++ b/src/views/Tools/dialogs/ExportDiscordNamesDialog.vue
@@ -11,8 +11,7 @@
                 v-model="discordNamesContent"
                 :rows="15"
                 readonly
-                style="margin-top: 15px"
-                input-class="resize-none" />
+                input-class="resize-none mt-4" />
         </DialogContent>
     </Dialog>
 </template>
diff --git a/src/views/Tools/dialogs/ExportFriendsListDialog.vue b/src/views/Tools/dialogs/ExportFriendsListDialog.vue
index 8e60e1e0..7f19656e 100644
--- a/src/views/Tools/dialogs/ExportFriendsListDialog.vue
+++ b/src/views/Tools/dialogs/ExportFriendsListDialog.vue
@@ -10,8 +10,7 @@
                         v-model="exportFriendsListCsv"
                         :rows="15"
                         readonly
-                        style="margin-top: 15px"
-                        input-class="resize-none"
+                        input-class="resize-none mt-4"
                         @click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
                 </template>
                 <template #json>
@@ -19,7 +18,7 @@
                         v-model="exportFriendsListJson"
                         :rows="15"
                         readonly
-                        style="margin-top: 15px"
+                        style="margin-top: 16px"
                         input-class="resize-none"
                         @click="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
                 </template>
@@ -79,6 +78,9 @@
         }
     );
 
+    /**
+     *
+     */
     function initExportFriendsListDialog() {
         const { friends } = currentUser.value;
         if (Array.isArray(friends) === false) {
diff --git a/src/views/Tools/dialogs/GroupCalendarDialog.vue b/src/views/Tools/dialogs/GroupCalendarDialog.vue
index d5a6d35a..f2707185 100644
--- a/src/views/Tools/dialogs/GroupCalendarDialog.vue
+++ b/src/views/Tools/dialogs/GroupCalendarDialog.vue
@@ -453,8 +453,8 @@
                     min-width: 200px;
                     padding-left: 4px;
                     padding-right: 16px;
-                    margin-left: 10px;
-                    margin-right: 6px;
+                    margin-left: 8px;
+                    margin-right: 8px;
                     overflow: auto;
                     height: 50vh;
 
@@ -465,7 +465,7 @@
                     }
 
                     .timeline-group {
-                        padding: 0 20px 6px 10px;
+                        padding: 0 20px 8px 8px;
                     }
 
                     .timeline-timestamp {
@@ -545,10 +545,10 @@
         display: flex;
         justify-content: flex-end;
         align-items: center;
-        margin-top: 10px;
+        margin-top: 8px;
         .featured-switch-text {
             font-size: 13px;
-            margin-right: 5px;
+            margin-right: 6px;
         }
     }
 
@@ -589,10 +589,10 @@
                     .group-header {
                         font-size: 16px;
                         font-weight: bold;
-                        padding: 4px 12px 10px 12px;
+                        padding: 4px 12px 8px 12px;
                         cursor: pointer;
                         border-radius: var(--radius-md);
-                        margin: 0 -12px 10px -12px;
+                        margin: 0 -12px 8px -12px;
                         display: flex;
                         align-items: center;
 
diff --git a/src/views/Tools/dialogs/NoteExportDialog.vue b/src/views/Tools/dialogs/NoteExportDialog.vue
index 30a89c5c..55200aaf 100644
--- a/src/views/Tools/dialogs/NoteExportDialog.vue
+++ b/src/views/Tools/dialogs/NoteExportDialog.vue
@@ -15,28 +15,16 @@
                 {{ t('dialog.note_export.description8') }} <br />
             </div>
 
-            <Button
-                size="sm"
-                class="mr-2"
-                variant="outline"
-                :disabled="loading"
-                style="margin-top: 10px"
-                @click="updateNoteExportDialog">
+            <Button size="sm" class="mr-2 mt-2" variant="outline" :disabled="loading" @click="updateNoteExportDialog">
                 {{ t('dialog.note_export.refresh') }}
             </Button>
-            <Button
-                size="sm"
-                class="mr-2"
-                variant="outline"
-                :disabled="loading"
-                style="margin-top: 10px"
-                @click="exportNoteExport">
+            <Button size="sm" class="mr-2 mt-2" variant="outline" :disabled="loading" @click="exportNoteExport">
                 {{ t('dialog.note_export.export') }}
             </Button>
-            <Button v-if="loading" size="sm" variant="outline" style="margin-top: 10px" @click="cancelNoteExport">
+            <Button class="mt-2" v-if="loading" size="sm" variant="outline" @click="cancelNoteExport">
                 {{ t('dialog.note_export.cancel') }}
             </Button>
-            <span v-if="loading" style="margin: 10px">
+            <span class="m-2" v-if="loading">
                 <Spinner class="inline-block ml-2 mr-2" />
                 {{ t('dialog.note_export.progress') }} {{ progress }}/{{ progressTotal }}
             </span>
@@ -45,7 +33,7 @@
                 <Button size="sm" variant="outline" @click="errors = ''">
                     {{ t('dialog.note_export.clear_errors') }}
                 </Button>
-                <h2 style="font-weight: bold; margin: 0">
+                <h2 class="m-0" style="font-weight: bold">
                     {{ t('dialog.note_export.errors') }}
                 </h2>
                 <pre style="white-space: pre-wrap; font-size: 12px" v-text="errors"></pre>
@@ -57,7 +45,7 @@
                 :loading="loading"
                 :table-style="tableStyle"
                 :show-pagination="false"
-                style="margin-top: 10px" />
+                style="margin-top: 8px" />
         </DialogContent>
     </Dialog>
 </template>
diff --git a/src/views/Tools/dialogs/RegistryBackupDialog.vue b/src/views/Tools/dialogs/RegistryBackupDialog.vue
index 4057ba6c..b30292c2 100644
--- a/src/views/Tools/dialogs/RegistryBackupDialog.vue
+++ b/src/views/Tools/dialogs/RegistryBackupDialog.vue
@@ -4,32 +4,24 @@
             <DialogHeader>
                 <DialogTitle>{{ t('dialog.registry_backup.header') }}</DialogTitle>
             </DialogHeader>
-            <div style="margin-top: 10px">
+            <div class="mt-2">
                 <div style="display: flex; align-items: center; justify-content: space-between; font-size: 12px">
-                    <span class="name" style="margin-right: 24px">{{ t('dialog.registry_backup.auto_backup') }}</span>
+                    <span class="name mr-6">{{ t('dialog.registry_backup.auto_backup') }}</span>
                     <Switch :model-value="vrcRegistryAutoBackup" @update:modelValue="setVrcRegistryAutoBackup" />
                 </div>
                 <div
-                    style="
-                        display: flex;
-                        align-items: center;
-                        justify-content: space-between;
-                        font-size: 12px;
-                        margin-top: 5px;
-                    ">
-                    <span class="name" style="margin-right: 24px">{{
-                        t('dialog.registry_backup.ask_to_restore')
-                    }}</span>
+                    class="mt-1.5"
+                    style="display: flex; align-items: center; justify-content: space-between; font-size: 12px">
+                    <span class="name mr-6">{{ t('dialog.registry_backup.ask_to_restore') }}</span>
                     <Switch :model-value="vrcRegistryAskRestore" @update:modelValue="setVrcRegistryAskRestore" />
                 </div>
                 <DataTableLayout
-                    class="min-w-0 w-full"
+                    class="min-w-0 w-full mt-2"
                     :table="table"
                     :loading="false"
                     :table-style="tableStyle"
-                    :show-pagination="false"
-                    style="margin-top: 10px" />
-                <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 10px">
+                    :show-pagination="false" />
+                <div class="mt-2" style="display: flex; align-items: center; justify-content: space-between">
                     <Button size="sm" variant="destructive" @click="deleteVrcRegistry">{{
                         t('dialog.registry_backup.reset')
                     }}</Button>
@@ -111,11 +103,18 @@
         }
     );
 
+    /**
+     *
+     */
     async function updateRegistryBackupDialog() {
         const backupsJson = await configRepository.getString('VRCX_VRChatRegistryBackups');
         registryBackupTable.value.data = JSON.parse(backupsJson || '[]');
     }
 
+    /**
+     *
+     * @param row
+     */
     function restoreVrcRegistryBackup(row) {
         modalStore
             .confirm({
@@ -139,10 +138,18 @@
             .catch(() => {});
     }
 
+    /**
+     *
+     * @param row
+     */
     function saveVrcRegistryBackupToFile(row) {
         downloadAndSaveJson(row.name, row.data);
     }
 
+    /**
+     *
+     * @param row
+     */
     async function deleteVrcRegistryBackup(row) {
         const backups = registryBackupTable.value.data;
         removeFromArray(backups, row);
@@ -150,6 +157,9 @@
         await updateRegistryBackupDialog();
     }
 
+    /**
+     *
+     */
     function deleteVrcRegistry() {
         modalStore
             .confirm({
@@ -167,11 +177,18 @@
             .catch(() => {});
     }
 
+    /**
+     *
+     * @param name
+     */
     async function handleBackupVrcRegistry(name) {
         await backupVrcRegistry(name);
         await updateRegistryBackupDialog();
     }
 
+    /**
+     *
+     */
     function promptVrcRegistryBackupName() {
         modalStore
             .prompt({
@@ -188,6 +205,9 @@
             .catch(() => {});
     }
 
+    /**
+     *
+     */
     async function openJsonFileSelectorDialogElectron() {
         return new Promise((resolve) => {
             const fileInput = document.createElement('input');
@@ -216,6 +236,9 @@
         });
     }
 
+    /**
+     *
+     */
     async function restoreVrcRegistryFromFile() {
         const filePath = await AppApi.OpenFileSelectorDialog(null, '.json', 'JSON Files (*.json)|*.json');
         if (WINDOWS) {
@@ -256,10 +279,16 @@
         }
     }
 
+    /**
+     *
+     */
     function clearVrcRegistryDialog() {
         registryBackupTable.value.data = [];
     }
 
+    /**
+     *
+     */
     function closeAndClearDialog() {
         closeDialog();
         // TODO: Element Plus had a distinct @closed event after animation.
@@ -267,6 +296,9 @@
         clearVrcRegistryDialog();
     }
 
+    /**
+     *
+     */
     function closeDialog() {
         isRegistryBackupDialogVisible.value = false;
     }