From c326e4fd3e1ca3b370c59cc1054c0da6de7d6d62 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Sun, 18 Jan 2026 15:45:36 +0900
Subject: [PATCH] add midnight theme and fix some styles

---
 src/components/AvatarInfo.vue                 |  12 +-
 src/components/InstanceActionBar.vue          | 385 ++++++++++++++++++
 src/components/InstanceInfo.vue               | 140 -------
 src/components/InviteYourself.vue             |  91 -----
 src/components/LastJoin.vue                   |  46 ---
 src/components/Launch.vue                     |  44 --
 src/components/Location.vue                   |   2 +-
 src/components/NavMenu.vue                    |   2 +-
 .../dialogs/AvatarDialog/AvatarDialog.vue     |   7 +-
 .../dialogs/GroupDialog/GroupDialog.vue       |  21 +-
 .../groupMemberModerationBansColumns.jsx      |  21 +-
 .../groupMemberModerationBlockedColumns.jsx   |  13 +-
 .../groupMemberModerationInvitesColumns.jsx   |  13 +-
 ...oupMemberModerationJoinRequestsColumns.jsx |  13 +-
 .../groupMemberModerationMembersColumns.jsx   |  17 +-
 .../dialogs/UserDialog/UserActionDropdown.vue |   7 +-
 .../dialogs/UserDialog/UserDialog.vue         |  60 +--
 .../dialogs/UserDialog/UserSummaryHeader.vue  |   5 +-
 .../dialogs/WorldDialog/WorldDialog.vue       |  53 +--
 src/components/ui/button/index.js             |   2 +-
 src/components/ui/tooltip/TooltipWrapper.vue  |   7 +-
 src/lib/table/useVrcxVueTable.js              |   1 -
 src/localization/en.json                      |   3 +
 src/plugin/components.js                      |   8 -
 src/shared/constants/fonts.js                 |  15 +
 src/shared/constants/themes.js                |   9 +-
 src/shared/utils/base/ui.js                   |  29 ++
 src/stores/settings/appearance.js             |  41 +-
 src/styles/globals.css                        |   3 +-
 src/styles/themes/midnight.css                |  35 ++
 src/views/Feed/columns.jsx                    |   2 +-
 src/views/FriendList/columns.jsx              |   1 -
 src/views/FriendLog/columns.jsx               |   1 -
 src/views/GameLog/columns.jsx                 |   1 -
 src/views/Moderation/columns.jsx              |   1 -
 src/views/Notifications/columns.jsx           |   2 -
 .../components/Tabs/AppearanceTab.vue         |  13 +-
 37 files changed, 655 insertions(+), 471 deletions(-)
 create mode 100644 src/components/InstanceActionBar.vue
 delete mode 100644 src/components/InstanceInfo.vue
 delete mode 100644 src/components/InviteYourself.vue
 delete mode 100644 src/components/LastJoin.vue
 delete mode 100644 src/components/Launch.vue
 create mode 100644 src/styles/themes/midnight.css

diff --git a/src/components/AvatarInfo.vue b/src/components/AvatarInfo.vue
index f5a2ee2b..777d2a5a 100644
--- a/src/components/AvatarInfo.vue
+++ b/src/components/AvatarInfo.vue
@@ -1,9 +1,8 @@
 <template>
     <div @click="confirm" class="cursor-pointer w-fit align-top flex items-center">
-        <span>{{ avatarName }}</span>
-        <span v-if="avatarType === '(own)'" :class="color" class="mx-1">
-            <Lock v-if="avatarType" class="h-4 w-4" />
-        </span>
+        <span class="flex items-center"
+            >{{ avatarName }} <Lock v-if="avatarType && avatarType === '(own)'" class="h-4 w-4 mx-1"
+        /></span>
         <span v-if="avatarTags" style="font-size: 12px">{{ avatarTags }}</span>
     </div>
 </template>
@@ -27,14 +26,12 @@
     const avatarName = ref('');
     const avatarType = ref('');
     const avatarTags = ref('');
-    const color = ref('');
     let ownerId = '';
 
     const parse = async () => {
         ownerId = '';
         avatarName.value = '';
         avatarType.value = '';
-        color.value = '';
         avatarTags.value = '';
 
         if (!props.imageurl) {
@@ -55,13 +52,10 @@
         }
 
         if (typeof props.userid === 'undefined' || !ownerId) {
-            color.value = '';
             avatarType.value = '';
         } else if (ownerId === props.userid) {
-            color.value = 'avatar-info-own';
             avatarType.value = '(own)';
         } else {
-            color.value = 'avatar-info-public';
             avatarType.value = '(public)';
         }
 
diff --git a/src/components/InstanceActionBar.vue b/src/components/InstanceActionBar.vue
new file mode 100644
index 00000000..f65b85b2
--- /dev/null
+++ b/src/components/InstanceActionBar.vue
@@ -0,0 +1,385 @@
+<template>
+    <div class="flex items-center" v-bind="$attrs">
+        <div v-if="showLaunchButton" class="inline-block">
+            <TooltipWrapper side="top" :content="t('dialog.user.info.launch_invite_tooltip')">
+                <Button
+                    class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
+                    size="icon-sm"
+                    variant="outline"
+                    @click="confirmLaunch">
+                    <LogIn />
+                </Button>
+            </TooltipWrapper>
+        </div>
+        <div v-if="showInviteYourself" class="inline-block" :style="inviteStyle">
+            <TooltipWrapper
+                v-if="!canOpenInstanceInGame"
+                side="top"
+                :content="t('dialog.user.info.self_invite_tooltip')">
+                <Button
+                    class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
+                    size="icon-sm"
+                    variant="outline"
+                    @click="confirmInvite">
+                    <Mail class="h-4 w-4" />
+                </Button>
+            </TooltipWrapper>
+            <TooltipWrapper v-else side="top" :content="t('dialog.user.info.open_in_vrchat_tooltip')">
+                <Button
+                    class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
+                    size="icon-sm"
+                    variant="outline"
+                    v-if="isOpeningInstance">
+                    <Loader2 class="h-4 w-4 animate-spin" />
+                </Button>
+                <Button
+                    class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
+                    size="icon-sm"
+                    variant="outline"
+                    v-else
+                    @click="openInstance">
+                    <Mail class="h-4 w-4" />
+                </Button>
+            </TooltipWrapper>
+        </div>
+        <TooltipWrapper v-if="showRefreshButton" side="top" :content="refreshTooltip">
+            <Button
+                class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
+                size="icon"
+                variant="outline"
+                @click="handleRefresh">
+                <RefreshCw class="h-4 w-4" />
+            </Button>
+        </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"
+                size="icon-sm"
+                variant="outline"
+                style="margin-left: 5px"
+                @click="handleHistory">
+                <History class="h-4 w-4" />
+            </Button>
+        </TooltipWrapper>
+        <span v-if="showLastJoinIndicator" class="inline-block ml-2">
+            <TooltipWrapper side="top" class="ml-5">
+                <template #content>
+                    <span>{{ t('dialog.user.info.last_join') }} <Timer :epoch="lastJoin" /></span>
+                </template>
+                <MapPin class="h-4 w-4 text-muted-foreground" />
+            </TooltipWrapper>
+        </span>
+        <div v-if="showInstanceInfo" class="flex items-center ml-2">
+            <TooltipWrapper v-if="instanceInfoState.isValidInstance" side="top">
+                <template #content>
+                    <div>
+                        <span v-if="instance?.closedAt">
+                            Closed At: {{ formatDateFilter(instance.closedAt, 'long') }}<br />
+                        </span>
+                        <template v-if="instanceInfoState.canCloseInstance">
+                            <Button
+                                class="mt-1"
+                                size="sm"
+                                :disabled="!!instance?.closedAt"
+                                @click="closeInstance(resolvedInstanceLocation)">
+                                {{ t('dialog.user.info.close_instance') }}
+                            </Button>
+                            <br /><br />
+                        </template>
+                        <span>
+                            <span class="x-tag-platform-pc">PC: </span>{{ instance?.platforms?.standalonewindows }}
+                        </span>
+                        <br />
+                        <span>
+                            <span class="x-tag-platform-quest">Android: </span>{{ instance?.platforms?.android }}
+                        </span>
+                        <br />
+                        <span><span>iOS: </span>{{ instance?.platforms?.ios }}</span>
+                        <br />
+                        <span>{{ t('dialog.user.info.instance_game_version') }} {{ instance?.gameServerVersion }}</span>
+                        <br />
+                        <span v-if="instance?.queueEnabled"
+                            >{{ t('dialog.user.info.instance_queuing_enabled') }}<br
+                        /></span>
+                        <span v-if="instanceInfoState.disabledContentSettings">
+                            {{ t('dialog.user.info.instance_disabled_content') }}
+                            {{ instanceInfoState.disabledContentSettings }}<br />
+                        </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)">
+                                {{ user.displayName }}
+                            </span>
+                        </template>
+                    </div>
+                </template>
+                <div class="mr-2 text-muted-foreground">
+                    <span v-if="resolvedInstanceLocation === locationStore.lastLocation.location">
+                        {{ locationStore.lastLocation.playerList.size }}/{{ instance?.capacity }}
+                    </span>
+                    <span v-else-if="instance?.userCount"> {{ instance.userCount }}/{{ instance?.capacity }} </span>
+                </div>
+            </TooltipWrapper>
+
+            <span v-if="friendcount" class="ml-1 flex items-center text-muted-foreground"
+                ><UsersRound />{{ friendcount }}</span
+            >
+            <span v-if="instanceInfoState.isValidInstance && !instance?.hasCapacityForYou" class="ml-1">
+                {{ t('dialog.user.info.instance_full') }}
+            </span>
+            <span v-if="instance?.queueSize" class="ml-1">
+                {{ t('dialog.user.info.instance_queue') }} {{ instance.queueSize }}
+            </span>
+            <span v-if="instanceInfoState.isAgeGated" class="ml-1">
+                {{ t('dialog.user.info.instance_age_gated') }}
+            </span>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { History, Loader2, LogIn, Mail, MapPin, RefreshCw, UsersRound } from 'lucide-vue-next';
+    import { computed, reactive, ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
+    import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
+    import { useI18n } from 'vue-i18n';
+
+    import {
+        useGroupStore,
+        useInstanceStore,
+        useInviteStore,
+        useLaunchStore,
+        useLocationStore,
+        useModalStore,
+        useUserStore
+    } from '../stores';
+    import { checkCanInviteSelf, formatDateFilter, hasGroupPermission, parseLocation } from '../shared/utils';
+    import { instanceRequest, miscRequest } from '../api';
+
+    defineOptions({
+        inheritAttrs: false
+    });
+
+    const { t } = useI18n();
+
+    const locationStore = useLocationStore();
+    const userStore = useUserStore();
+    const groupStore = useGroupStore();
+    const instanceStore = useInstanceStore();
+    const modalStore = useModalStore();
+    const launchStore = useLaunchStore();
+    const inviteStore = useInviteStore();
+
+    const { instanceJoinHistory } = storeToRefs(instanceStore);
+    const { canOpenInstanceInGame } = storeToRefs(inviteStore);
+    const { isOpeningInstance } = storeToRefs(launchStore);
+
+    const props = defineProps({
+        location: {
+            type: String,
+            default: ''
+        },
+        launchLocation: {
+            type: String,
+            default: ''
+        },
+        inviteLocation: {
+            type: String,
+            default: ''
+        },
+        lastJoinLocation: {
+            type: String,
+            default: ''
+        },
+        instanceLocation: {
+            type: String,
+            default: ''
+        },
+        shortname: {
+            type: String,
+            default: ''
+        },
+        instance: {
+            type: Object,
+            default: null
+        },
+        friendcount: {
+            type: Number,
+            default: undefined
+        },
+        currentlocation: {
+            type: String,
+            default: ''
+        },
+        showLaunch: {
+            type: Boolean,
+            default: true
+        },
+        showInvite: {
+            type: Boolean,
+            default: true
+        },
+        showRefresh: {
+            type: Boolean,
+            default: true
+        },
+        showHistory: {
+            type: Boolean,
+            default: false
+        },
+        showLastJoin: {
+            type: Boolean,
+            default: true
+        },
+        showInstanceInfo: {
+            type: Boolean,
+            default: true
+        },
+        refreshTooltip: {
+            type: String,
+            default: ''
+        },
+        historyTooltip: {
+            type: String,
+            default: ''
+        },
+        onRefresh: {
+            type: Function,
+            default: null
+        },
+        onHistory: {
+            type: Function,
+            default: null
+        }
+    });
+
+    const resolvedLaunchLocation = computed(() => props.launchLocation || props.location);
+    const resolvedInviteLocation = computed(() => props.inviteLocation || props.location);
+    const resolvedLastJoinLocation = computed(() => props.lastJoinLocation || props.location);
+    const resolvedInstanceLocation = computed(() => props.instanceLocation || props.location);
+
+    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 showRefreshButton = computed(() => props.showRefresh && typeof props.onRefresh === 'function');
+    const showHistoryButton = computed(() => props.showHistory && typeof props.onHistory === 'function');
+
+    const lastJoin = ref(null);
+    const showLastJoinIndicator = computed(() => props.showLastJoin && lastJoin.value);
+
+    const instanceInfoState = reactive({
+        isValidInstance: false,
+        canCloseInstance: false,
+        isAgeGated: false,
+        disabledContentSettings: ''
+    });
+
+    const handleRefresh = () => {
+        if (typeof props.onRefresh === 'function') {
+            props.onRefresh();
+        }
+    };
+
+    const handleHistory = () => {
+        if (typeof props.onHistory === 'function') {
+            props.onHistory();
+        }
+    };
+
+    const confirmLaunch = () => {
+        launchStore.showLaunchDialog(resolvedLaunchLocation.value);
+    };
+
+    const confirmInvite = () => {
+        const L = parseLocation(resolvedInviteLocation.value);
+        if (!L.isRealInstance) {
+            return;
+        }
+
+        instanceRequest
+            .selfInvite({
+                instanceId: L.instanceId,
+                worldId: L.worldId,
+                shortName: props.shortname
+            })
+            .then((args) => {
+                toast.success('Self invite sent');
+                return args;
+            });
+    };
+
+    const openInstance = () => {
+        const L = parseLocation(resolvedInviteLocation.value);
+        if (!L.isRealInstance) {
+            return;
+        }
+
+        launchStore.tryOpenInstanceInVrc(L.tag, props.shortname);
+    };
+
+    const parseLastJoin = () => {
+        lastJoin.value = instanceJoinHistory.value.get(resolvedLastJoinLocation.value);
+    };
+
+    const parseInstanceInfo = () => {
+        Object.assign(instanceInfoState, {
+            isValidInstance: false,
+            canCloseInstance: false,
+            isAgeGated: false,
+            disabledContentSettings: ''
+        });
+
+        if (!resolvedInstanceLocation.value || !props.instance || Object.keys(props.instance).length === 0) return;
+
+        instanceInfoState.isValidInstance = true;
+        if (props.instance.ownerId === userStore.currentUser.id) {
+            instanceInfoState.canCloseInstance = true;
+        } else if (props.instance.ownerId?.startsWith('grp_')) {
+            const group = groupStore.cachedGroups.get(props.instance.ownerId);
+            instanceInfoState.canCloseInstance = hasGroupPermission(group, 'group-instance-moderate');
+        }
+        instanceInfoState.isAgeGated = props.instance.ageGate === true;
+        if (resolvedInstanceLocation.value?.includes('~ageGate')) instanceInfoState.isAgeGated = true;
+        if (props.instance.$disabledContentSettings?.length) {
+            instanceInfoState.disabledContentSettings = props.instance.$disabledContentSettings.join(', ');
+        }
+    };
+
+    const showUserDialog = (userId) => {
+        userStore.showUserDialog(userId);
+    };
+
+    const closeInstance = (location) => {
+        modalStore
+            .confirm({
+                description: 'Continue? X Instance, nobody will be able to join',
+                title: 'Confirm'
+            })
+            .then(async ({ ok }) => {
+                if (!ok) return;
+                const args = await miscRequest.closeInstance({ location, hardClose: false });
+                if (args.json) {
+                    toast.success(t('message.instance.closed'));
+                    instanceStore.applyInstance(args.json);
+                }
+            })
+            .catch(() => {});
+    };
+
+    watch(() => resolvedLastJoinLocation.value, parseLastJoin, { immediate: true });
+    watch(() => props.currentlocation, parseLastJoin);
+    watch([resolvedInstanceLocation, () => props.instance, () => props.friendcount], parseInstanceInfo, {
+        immediate: true
+    });
+</script>
+
+<style scoped>
+    .inline-block {
+        display: inline-block;
+    }
+    .ml-5 {
+        margin-left: 5px;
+    }
+</style>
diff --git a/src/components/InstanceInfo.vue b/src/components/InstanceInfo.vue
deleted file mode 100644
index 749da48e..00000000
--- a/src/components/InstanceInfo.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-    <div class="flex items-center ml-2">
-        <TooltipWrapper v-if="state.isValidInstance" side="bottom">
-            <template #content>
-                <div>
-                    <span v-if="props.instance.closedAt"
-                        >Closed At: {{ formatDateFilter(props.instance.closedAt, 'long') }}<br
-                    /></span>
-                    <template v-if="state.canCloseInstance">
-                        <Button
-                            class="mt-1"
-                            size="sm"
-                            :disabled="!!props.instance.closedAt"
-                            @click="closeInstance(props.location)">
-                            {{ t('dialog.user.info.close_instance') }} </Button
-                        ><br /><br />
-                    </template>
-                    <span
-                        ><span class="x-tag-platform-pc">PC: </span
-                        >{{ props.instance.platforms.standalonewindows }}</span
-                    ><br />
-                    <span
-                        ><span class="x-tag-platform-quest">Android: </span>{{ props.instance.platforms.android }}</span
-                    ><br />
-                    <span><span>iOS: </span>{{ props.instance.platforms.ios }}</span
-                    ><br />
-                    <span>{{ t('dialog.user.info.instance_game_version') }} {{ props.instance.gameServerVersion }}</span
-                    ><br />
-                    <span v-if="props.instance.queueEnabled"
-                        >{{ t('dialog.user.info.instance_queuing_enabled') }}<br
-                    /></span>
-                    <span v-if="state.disabledContentSettings"
-                        >{{ t('dialog.user.info.instance_disabled_content') }} {{ state.disabledContentSettings }}<br
-                    /></span>
-                    <span v-if="props.instance.users.length">{{ t('dialog.user.info.instance_users') }}<br /></span>
-                    <template v-for="user in props.instance.users" :key="user.id">
-                        <span style="cursor: pointer; margin-right: 5px" @click="showUserDialog(user.id)">{{
-                            user.displayName
-                        }}</span>
-                    </template>
-                </div>
-            </template>
-            <Info class="text-xs text-accent-foreground" />
-        </TooltipWrapper>
-        <span v-if="props.location === locationStore.lastLocation.location" style="margin-left: 5px"
-            >{{ locationStore.lastLocation.playerList.size }}/{{ props.instance.capacity }}</span
-        >
-        <span v-else-if="props.instance.userCount" style="margin-left: 5px"
-            >{{ props.instance.userCount }}/{{ props.instance.capacity }}</span
-        >
-        <span v-if="props.friendcount" style="margin-left: 5px">({{ props.friendcount }})</span>
-        <span v-if="state.isValidInstance && !props.instance.hasCapacityForYou" style="margin-left: 5px">{{
-            t('dialog.user.info.instance_full')
-        }}</span>
-        <span v-if="props.instance.queueSize" style="margin-left: 5px"
-            >{{ t('dialog.user.info.instance_queue') }} {{ props.instance.queueSize }}</span
-        >
-        <span v-if="state.isAgeGated" style="margin-left: 5px">{{ t('dialog.user.info.instance_age_gated') }}</span>
-    </div>
-</template>
-
-<script setup>
-    import { reactive, watch } from 'vue';
-    import { Button } from '@/components/ui/button';
-    import { Info } from 'lucide-vue-next';
-    import { toast } from 'vue-sonner';
-    import { useI18n } from 'vue-i18n';
-
-    import { useGroupStore, useInstanceStore, useLocationStore, useModalStore, useUserStore } from '../stores';
-    import { formatDateFilter, hasGroupPermission } from '../shared/utils';
-    import { miscRequest } from '../api';
-
-    const { t } = useI18n();
-
-    const locationStore = useLocationStore();
-    const userStore = useUserStore();
-    const groupStore = useGroupStore();
-    const instanceStore = useInstanceStore();
-    const modalStore = useModalStore();
-
-    const props = defineProps({
-        location: String,
-        instance: Object,
-        friendcount: Number
-    });
-
-    const state = reactive({
-        isValidInstance: false,
-        canCloseInstance: false,
-        isAgeGated: false,
-        disabledContentSettings: ''
-    });
-
-    function parse() {
-        Object.assign(state, {
-            isValidInstance: false,
-            canCloseInstance: false,
-            isAgeGated: false,
-            disabledContentSettings: ''
-        });
-
-        if (!props.location || !props.instance || Object.keys(props.instance).length === 0) return;
-
-        state.isValidInstance = true;
-        if (props.instance.ownerId === userStore.currentUser.id) {
-            state.canCloseInstance = true;
-        } else if (props.instance.ownerId?.startsWith('grp_')) {
-            const group = groupStore.cachedGroups.get(props.instance.ownerId);
-            state.canCloseInstance = hasGroupPermission(group, 'group-instance-moderate');
-        }
-        state.isAgeGated = props.instance.ageGate === true;
-        if (props.location?.includes('~ageGate')) state.isAgeGated = true;
-        if (props.instance.$disabledContentSettings?.length) {
-            state.disabledContentSettings = props.instance.$disabledContentSettings.join(', ');
-        }
-    }
-
-    watch([() => props.location, () => props.instance, () => props.friendcount], parse, { immediate: true });
-
-    function showUserDialog(userId) {
-        userStore.showUserDialog(userId);
-    }
-
-    function closeInstance(location) {
-        modalStore
-            .confirm({
-                description: 'Continue? X Instance, nobody will be able to join',
-                title: 'Confirm'
-            })
-            .then(async ({ ok }) => {
-                if (!ok) return;
-                const args = await miscRequest.closeInstance({ location, hardClose: false });
-                if (args.json) {
-                    toast.success(t('message.instance.closed'));
-                    instanceStore.applyInstance(args.json);
-                }
-            })
-            .catch(() => {});
-    }
-</script>
diff --git a/src/components/InviteYourself.vue b/src/components/InviteYourself.vue
deleted file mode 100644
index e3a4e9f7..00000000
--- a/src/components/InviteYourself.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-    <div v-if="isVisible" :class="['inline-block']">
-        <TooltipWrapper v-if="!canOpenInstanceInGame" side="top" :content="t('dialog.user.info.self_invite_tooltip')">
-            <Button
-                class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
-                size="icon-sm"
-                variant="outline"
-                v-show="isVisible"
-                @click="confirmInvite"
-                ><Mail class="h-4 w-4"
-            /></Button>
-        </TooltipWrapper>
-        <TooltipWrapper v-else side="top" :content="t('dialog.user.info.open_in_vrchat_tooltip')">
-            <Button
-                class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
-                size="icon-sm"
-                variant="outline"
-                v-if="isOpeningInstance">
-                <Loader2 class="h-4 w-4 animate-spin" />
-            </Button>
-            <Button
-                class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
-                size="icon-sm"
-                variant="outline"
-                v-else
-                @click="openInstance"
-                ><Mail class="h-4 w-4"
-            /></Button>
-        </TooltipWrapper>
-    </div>
-</template>
-
-<script setup>
-    import { Loader2, Mail } from 'lucide-vue-next';
-    import { Button } from '@/components/ui/button';
-    import { computed } from 'vue';
-    import { storeToRefs } from 'pinia';
-    import { toast } from 'vue-sonner';
-    import { useI18n } from 'vue-i18n';
-
-    import { checkCanInviteSelf, parseLocation } from '../shared/utils';
-    import { useInviteStore, useLaunchStore } from '../stores';
-    import { instanceRequest } from '../api';
-
-    const props = defineProps({
-        location: String,
-        shortname: String
-    });
-
-    const { t } = useI18n();
-
-    const { canOpenInstanceInGame } = storeToRefs(useInviteStore());
-    const { tryOpenInstanceInVrc } = useLaunchStore();
-
-    const { isOpeningInstance } = storeToRefs(useLaunchStore());
-
-    const isVisible = computed(() => checkCanInviteSelf(props.location));
-
-    function confirmInvite() {
-        const L = parseLocation(props.location);
-        if (!L.isRealInstance) {
-            return;
-        }
-
-        instanceRequest
-            .selfInvite({
-                instanceId: L.instanceId,
-                worldId: L.worldId,
-                shortName: props.shortname
-            })
-            .then((args) => {
-                toast.success('Self invite sent');
-                return args;
-            });
-    }
-
-    function openInstance() {
-        const L = parseLocation(props.location);
-        if (!L.isRealInstance) {
-            return;
-        }
-
-        tryOpenInstanceInVrc(L.tag, props.shortname);
-    }
-</script>
-
-<style scoped>
-    .inline-block {
-        display: inline-block;
-    }
-</style>
diff --git a/src/components/LastJoin.vue b/src/components/LastJoin.vue
deleted file mode 100644
index b3b0c6b5..00000000
--- a/src/components/LastJoin.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-    <span v-if="lastJoin" :class="['inline-block', 'ml-5']">
-        <TooltipWrapper side="top" class="ml-5">
-            <template #content>
-                <span>{{ t('dialog.user.info.last_join') }} <Timer :epoch="lastJoin" /></span>
-            </template>
-            <MapPin class="h-4 w-4 text-muted-foreground" />
-        </TooltipWrapper>
-    </span>
-</template>
-
-<script setup>
-    // TODO(icon): time aspect lost (map pin with time)
-    import { ref, watch } from 'vue';
-    import { MapPin } from 'lucide-vue-next';
-    import { storeToRefs } from 'pinia';
-    import { useI18n } from 'vue-i18n';
-
-    import { useInstanceStore } from '../stores';
-
-    const { instanceJoinHistory } = storeToRefs(useInstanceStore());
-    const { t } = useI18n();
-
-    const props = defineProps({
-        location: String,
-        currentlocation: String
-    });
-
-    const lastJoin = ref(null);
-
-    function parse() {
-        lastJoin.value = instanceJoinHistory.value.get(props.location);
-    }
-
-    watch(() => props.location, parse, { immediate: true });
-    watch(() => props.currentlocation, parse);
-</script>
-
-<style scoped>
-    .ml-5 {
-        margin-left: 5px;
-    }
-    .inline-block {
-        display: inline-block;
-    }
-</style>
diff --git a/src/components/Launch.vue b/src/components/Launch.vue
deleted file mode 100644
index 51dfc7cd..00000000
--- a/src/components/Launch.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-    <div v-if="isVisible" class="inline-block">
-        <TooltipWrapper side="top" :content="t('dialog.user.info.launch_invite_tooltip')"
-            ><Button
-                class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
-                size="icon-sm"
-                variant="outline"
-                @click="confirm"
-                ><LogIn />
-            </Button>
-        </TooltipWrapper>
-    </div>
-</template>
-
-<script setup>
-    import { Button } from '@/components/ui/button';
-    import { LogIn } from 'lucide-vue-next';
-    import { computed } from 'vue';
-    import { useI18n } from 'vue-i18n';
-
-    import { checkCanInviteSelf } from '../shared/utils';
-    import { useLaunchStore } from '../stores';
-
-    const launchStore = useLaunchStore();
-    const { t } = useI18n();
-
-    const props = defineProps({
-        location: String
-    });
-
-    const isVisible = computed(() => {
-        return checkCanInviteSelf(props.location);
-    });
-
-    function confirm() {
-        launchStore.showLaunchDialog(props.location);
-    }
-</script>
-
-<style scoped>
-    .inline-block {
-        display: inline-block;
-    }
-</style>
diff --git a/src/components/Location.vue b/src/components/Location.vue
index f92b0992..c1755f40 100644
--- a/src/components/Location.vue
+++ b/src/components/Location.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="cursor-pointer">
         <div v-if="!text" class="transparent">-</div>
         <div v-show="text" class="flex items-center">
             <div v-if="region" :class="['flags', 'mr-1.5', region]"></div>
diff --git a/src/components/NavMenu.vue b/src/components/NavMenu.vue
index 1c6d4239..8e3bedbe 100644
--- a/src/components/NavMenu.vue
+++ b/src/components/NavMenu.vue
@@ -574,7 +574,7 @@
     };
 
     const handleThemeToggle = () => {
-        appearanceSettingsStore.setThemeMode(isDarkMode.value ? 'light' : 'dark');
+        appearanceSettingsStore.toggleThemeMode();
     };
 
     const handleTableDensitySelect = (density) => {
diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index f832fe44..3030eec4 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -207,12 +207,17 @@
                             <TooltipWrapper
                                 v-if="avatarDialog.isFavorite"
                                 side="top"
+                                :ignore-non-keyboard-focus="true"
                                 :content="t('dialog.avatar.actions.favorite_tooltip')">
                                 <Button class="rounded-full" size="icon-lg" @click="avatarDialogCommand('Add Favorite')"
                                     ><Star
                                 /></Button>
                             </TooltipWrapper>
-                            <TooltipWrapper v-else side="top" :content="t('dialog.avatar.actions.favorite_tooltip')">
+                            <TooltipWrapper
+                                v-else
+                                side="top"
+                                :ignore-non-keyboard-focus="true"
+                                :content="t('dialog.avatar.actions.favorite_tooltip')">
                                 <Button
                                     class="rounded-full"
                                     size="icon-lg"
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index f4386622..a26a2838 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -377,21 +377,15 @@
                             <div v-for="room in groupDialog.instances" :key="room.tag" style="width: 100%">
                                 <div style="margin: 5px 0">
                                     <Location :location="room.tag" style="display: inline-block" />
-                                    <InviteYourself :location="room.tag" style="margin-left: 5px" />
-                                    <TooltipWrapper side="top" content="RefreshCw player count">
-                                        <Button
-                                            class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
-                                            size="icon"
-                                            variant="outline"
-                                            @click="refreshInstancePlayerCount(room.tag)"
-                                            ><RefreshCw class="h-4 w-4" />
-                                        </Button>
-                                    </TooltipWrapper>
-                                    <LastJoin :location="room.tag" :currentlocation="lastLocation.location" />
-                                    <InstanceInfo
+                                    <InstanceActionBar
+                                        class="ml-1"
                                         :location="room.tag"
+                                        :currentlocation="lastLocation.location"
                                         :instance="room.ref"
-                                        :friendcount="room.friendCount" />
+                                        :friendcount="room.friendCount"
+                                        :show-launch="false"
+                                        refresh-tooltip="RefreshCw player count"
+                                        :on-refresh="() => refreshInstancePlayerCount(room.tag)" />
                                 </div>
                                 <div
                                     v-if="room.users.length"
@@ -1244,6 +1238,7 @@
 
     import GroupCalendarEventCard from '../../../views/Tools/components/GroupCalendarEventCard.vue';
     import GroupPostEditDialog from './GroupPostEditDialog.vue';
+    import InstanceActionBar from '../../InstanceActionBar.vue';
     import PreviousInstancesGroupDialog from '../PreviousInstancesDialog/PreviousInstancesGroupDialog.vue';
 
     import * as workerTimers from 'worker-timers';
diff --git a/src/components/dialogs/GroupDialog/groupMemberModerationBansColumns.jsx b/src/components/dialogs/GroupDialog/groupMemberModerationBansColumns.jsx
index fb405b0e..eb4d5aad 100644
--- a/src/components/dialogs/GroupDialog/groupMemberModerationBansColumns.jsx
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationBansColumns.jsx
@@ -18,7 +18,6 @@ export const createColumns = ({
         header: () => null,
         size: 55,
         enableSorting: false,
-        enableResizing: false,
         cell: ({ row }) => {
             const original = row.original;
             return (
@@ -70,7 +69,9 @@ export const createColumns = ({
         cell: ({ row }) => {
             const original = row.original;
             const useColors = !!(randomUserColours?.value ?? randomUserColours);
-            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+            const colorStyle = useColors
+                ? { color: original?.user?.$userColour }
+                : null;
 
             return (
                 <span
@@ -80,7 +81,9 @@ export const createColumns = ({
                         onShowUser?.(original?.userId);
                     }}
                 >
-                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                    <span style={colorStyle}>
+                        {original?.user?.displayName}
+                    </span>
                 </span>
             );
         }
@@ -98,19 +101,25 @@ export const createColumns = ({
         accessorKey: 'managerNotes',
         header: () => t('dialog.group_member_moderation.notes'),
         cell: ({ row }) => (
-            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+            <span onClick={(e) => e.stopPropagation()}>
+                {row.original?.managerNotes}
+            </span>
         )
     },
     {
         accessorKey: 'joinedAt',
         header: () => t('dialog.group_member_moderation.joined_at'),
         size: 170,
-        cell: ({ row }) => <span>{formatDateFilter(row.original?.joinedAt, 'long')}</span>
+        cell: ({ row }) => (
+            <span>{formatDateFilter(row.original?.joinedAt, 'long')}</span>
+        )
     },
     {
         accessorKey: 'bannedAt',
         header: () => t('dialog.group_member_moderation.banned_at'),
         size: 170,
-        cell: ({ row }) => <span>{formatDateFilter(row.original?.bannedAt, 'long')}</span>
+        cell: ({ row }) => (
+            <span>{formatDateFilter(row.original?.bannedAt, 'long')}</span>
+        )
     }
 ];
diff --git a/src/components/dialogs/GroupDialog/groupMemberModerationBlockedColumns.jsx b/src/components/dialogs/GroupDialog/groupMemberModerationBlockedColumns.jsx
index 2293b343..6b579855 100644
--- a/src/components/dialogs/GroupDialog/groupMemberModerationBlockedColumns.jsx
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationBlockedColumns.jsx
@@ -16,7 +16,6 @@ export const createColumns = ({
         header: () => null,
         size: 55,
         enableSorting: false,
-        enableResizing: false,
         cell: ({ row }) => {
             const original = row.original;
             return (
@@ -68,7 +67,9 @@ export const createColumns = ({
         cell: ({ row }) => {
             const original = row.original;
             const useColors = !!(randomUserColours?.value ?? randomUserColours);
-            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+            const colorStyle = useColors
+                ? { color: original?.user?.$userColour }
+                : null;
 
             return (
                 <span
@@ -78,7 +79,9 @@ export const createColumns = ({
                         onShowUser?.(original?.userId);
                     }}
                 >
-                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                    <span style={colorStyle}>
+                        {original?.user?.displayName}
+                    </span>
                 </span>
             );
         }
@@ -87,7 +90,9 @@ export const createColumns = ({
         accessorKey: 'managerNotes',
         header: () => t('dialog.group_member_moderation.notes'),
         cell: ({ row }) => (
-            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+            <span onClick={(e) => e.stopPropagation()}>
+                {row.original?.managerNotes}
+            </span>
         )
     }
 ];
diff --git a/src/components/dialogs/GroupDialog/groupMemberModerationInvitesColumns.jsx b/src/components/dialogs/GroupDialog/groupMemberModerationInvitesColumns.jsx
index 2293b343..6b579855 100644
--- a/src/components/dialogs/GroupDialog/groupMemberModerationInvitesColumns.jsx
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationInvitesColumns.jsx
@@ -16,7 +16,6 @@ export const createColumns = ({
         header: () => null,
         size: 55,
         enableSorting: false,
-        enableResizing: false,
         cell: ({ row }) => {
             const original = row.original;
             return (
@@ -68,7 +67,9 @@ export const createColumns = ({
         cell: ({ row }) => {
             const original = row.original;
             const useColors = !!(randomUserColours?.value ?? randomUserColours);
-            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+            const colorStyle = useColors
+                ? { color: original?.user?.$userColour }
+                : null;
 
             return (
                 <span
@@ -78,7 +79,9 @@ export const createColumns = ({
                         onShowUser?.(original?.userId);
                     }}
                 >
-                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                    <span style={colorStyle}>
+                        {original?.user?.displayName}
+                    </span>
                 </span>
             );
         }
@@ -87,7 +90,9 @@ export const createColumns = ({
         accessorKey: 'managerNotes',
         header: () => t('dialog.group_member_moderation.notes'),
         cell: ({ row }) => (
-            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+            <span onClick={(e) => e.stopPropagation()}>
+                {row.original?.managerNotes}
+            </span>
         )
     }
 ];
diff --git a/src/components/dialogs/GroupDialog/groupMemberModerationJoinRequestsColumns.jsx b/src/components/dialogs/GroupDialog/groupMemberModerationJoinRequestsColumns.jsx
index 2293b343..6b579855 100644
--- a/src/components/dialogs/GroupDialog/groupMemberModerationJoinRequestsColumns.jsx
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationJoinRequestsColumns.jsx
@@ -16,7 +16,6 @@ export const createColumns = ({
         header: () => null,
         size: 55,
         enableSorting: false,
-        enableResizing: false,
         cell: ({ row }) => {
             const original = row.original;
             return (
@@ -68,7 +67,9 @@ export const createColumns = ({
         cell: ({ row }) => {
             const original = row.original;
             const useColors = !!(randomUserColours?.value ?? randomUserColours);
-            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+            const colorStyle = useColors
+                ? { color: original?.user?.$userColour }
+                : null;
 
             return (
                 <span
@@ -78,7 +79,9 @@ export const createColumns = ({
                         onShowUser?.(original?.userId);
                     }}
                 >
-                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                    <span style={colorStyle}>
+                        {original?.user?.displayName}
+                    </span>
                 </span>
             );
         }
@@ -87,7 +90,9 @@ export const createColumns = ({
         accessorKey: 'managerNotes',
         header: () => t('dialog.group_member_moderation.notes'),
         cell: ({ row }) => (
-            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+            <span onClick={(e) => e.stopPropagation()}>
+                {row.original?.managerNotes}
+            </span>
         )
     }
 ];
diff --git a/src/components/dialogs/GroupDialog/groupMemberModerationMembersColumns.jsx b/src/components/dialogs/GroupDialog/groupMemberModerationMembersColumns.jsx
index b5d53402..3ebcbdf6 100644
--- a/src/components/dialogs/GroupDialog/groupMemberModerationMembersColumns.jsx
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationMembersColumns.jsx
@@ -18,7 +18,6 @@ export const createColumns = ({
         header: () => null,
         size: 55,
         enableSorting: false,
-        enableResizing: false,
         cell: ({ row }) => {
             const original = row.original;
             return (
@@ -70,7 +69,9 @@ export const createColumns = ({
         cell: ({ row }) => {
             const original = row.original;
             const useColors = !!(randomUserColours?.value ?? randomUserColours);
-            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+            const colorStyle = useColors
+                ? { color: original?.user?.$userColour }
+                : null;
 
             return (
                 <span
@@ -80,7 +81,9 @@ export const createColumns = ({
                         onShowUser?.(original?.userId);
                     }}
                 >
-                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                    <span style={colorStyle}>
+                        {original?.user?.displayName}
+                    </span>
                 </span>
             );
         }
@@ -98,14 +101,18 @@ export const createColumns = ({
         accessorKey: 'managerNotes',
         header: () => t('dialog.group_member_moderation.notes'),
         cell: ({ row }) => (
-            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+            <span onClick={(e) => e.stopPropagation()}>
+                {row.original?.managerNotes}
+            </span>
         )
     },
     {
         accessorKey: 'joinedAt',
         header: () => t('dialog.group_member_moderation.joined_at'),
         size: 170,
-        cell: ({ row }) => <span>{formatDateFilter(row.original?.joinedAt, 'long')}</span>
+        cell: ({ row }) => (
+            <span>{formatDateFilter(row.original?.joinedAt, 'long')}</span>
+        )
     },
     {
         accessorKey: 'visibility',
diff --git a/src/components/dialogs/UserDialog/UserActionDropdown.vue b/src/components/dialogs/UserDialog/UserActionDropdown.vue
index 86cbef07..b9b4e9cc 100644
--- a/src/components/dialogs/UserDialog/UserActionDropdown.vue
+++ b/src/components/dialogs/UserDialog/UserActionDropdown.vue
@@ -4,10 +4,15 @@
             <TooltipWrapper
                 v-if="userDialog.isFavorite"
                 side="top"
+                :ignore-non-keyboard-focus="true"
                 :content="t('dialog.user.actions.unfavorite_tooltip')">
                 <Button class="rounded-full" size="icon-lg" @click="userDialogCommand('Add Favorite')"><Star /></Button>
             </TooltipWrapper>
-            <TooltipWrapper v-else side="top" :content="t('dialog.user.actions.favorite_tooltip')">
+            <TooltipWrapper
+                v-else
+                side="top"
+                :ignore-non-keyboard-focus="true"
+                :content="t('dialog.user.actions.favorite_tooltip')">
                 <Button class="rounded-full" size="icon-lg" variant="outline" @click="userDialogCommand('Add Favorite')"
                     ><Star
                 /></Button>
diff --git a/src/components/dialogs/UserDialog/UserDialog.vue b/src/components/dialogs/UserDialog/UserDialog.vue
index 911dc031..c7999a6e 100644
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -36,31 +36,15 @@
                                 ">
                                 <div style="flex: none">
                                     <template v-if="isRealInstance(userDialog.$location.tag)">
-                                        <div class="flex items-center mb-1">
-                                            <Launch :location="userDialog.$location.tag" />
-                                            <InviteYourself
-                                                :location="userDialog.$location.tag"
-                                                :shortname="userDialog.$location.shortName"
-                                                style="margin-left: 5px" />
-                                            <TooltipWrapper
-                                                side="top"
-                                                :content="t('dialog.user.info.refresh_instance_info')"
-                                                ><Button
-                                                    class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
-                                                    size="icon"
-                                                    variant="outline"
-                                                    @click="refreshInstancePlayerCount(userDialog.$location.tag)"
-                                                    ><RefreshCw class="h-4 w-4" />
-                                                </Button>
-                                            </TooltipWrapper>
-                                            <LastJoin
-                                                :location="userDialog.$location.tag"
-                                                :currentlocation="lastLocation.location" />
-                                            <InstanceInfo
-                                                :location="userDialog.$location.tag"
-                                                :instance="userDialog.instance.ref"
-                                                :friendcount="userDialog.instance.friendCount" />
-                                        </div>
+                                        <InstanceActionBar
+                                            class="mb-1"
+                                            :location="userDialog.$location.tag"
+                                            :shortname="userDialog.$location.shortName"
+                                            :currentlocation="lastLocation.location"
+                                            :instance="userDialog.instance.ref"
+                                            :friendcount="userDialog.instance.friendCount"
+                                            :refresh-tooltip="t('dialog.user.info.refresh_instance_info')"
+                                            :on-refresh="() => refreshInstancePlayerCount(userDialog.$location.tag)" />
                                     </template>
                                     <Location
                                         :location="userDialog.ref.location"
@@ -154,22 +138,14 @@
                             </div>
                             <div class="x-friend-item" style="width: 100%; cursor: default">
                                 <div class="detail">
-                                    <span
-                                        v-if="
+                                    <span class="name">
+                                        {{
                                             userDialog.id !== currentUser.id &&
                                             userDialog.ref.profilePicOverride &&
                                             userDialog.ref.currentAvatarImageUrl
-                                        "
-                                        class="name">
-                                        {{ t('dialog.user.info.avatar_info_last_seen') }}
-                                    </span>
-                                    <span v-else class="name">{{ t('dialog.user.info.avatar_info') }}</span>
-                                    <div class="extra">
-                                        <AvatarInfo
-                                            :imageurl="userDialog.ref.currentAvatarImageUrl"
-                                            :userid="userDialog.id"
-                                            :avatartags="userDialog.ref.currentAvatarTags"
-                                            style="display: inline-block" />
+                                                ? t('dialog.user.info.avatar_info_last_seen')
+                                                : t('dialog.user.info.avatar_info')
+                                        }}
                                         <TooltipWrapper
                                             v-if="
                                                 userDialog.ref.profilePicOverride &&
@@ -179,6 +155,13 @@
                                             :content="t('dialog.user.info.vrcplus_hides_avatar')">
                                             <Info />
                                         </TooltipWrapper>
+                                    </span>
+                                    <div class="extra">
+                                        <AvatarInfo
+                                            :imageurl="userDialog.ref.currentAvatarImageUrl"
+                                            :userid="userDialog.id"
+                                            :avatartags="userDialog.ref.currentAvatarTags"
+                                            style="display: inline-block" />
                                     </div>
                                 </div>
                             </div>
@@ -1385,6 +1368,7 @@
     import { userDialogWorldOrderOptions, userDialogWorldSortingOptions } from '../../../shared/constants/';
     import { database } from '../../../service/database';
 
+    import InstanceActionBar from '../../InstanceActionBar.vue';
     import SendInviteDialog from '../InviteDialog/SendInviteDialog.vue';
     import UserSummaryHeader from './UserSummaryHeader.vue';
 
diff --git a/src/components/dialogs/UserDialog/UserSummaryHeader.vue b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
index 1c30622a..308fdd4f 100644
--- a/src/components/dialogs/UserDialog/UserSummaryHeader.vue
+++ b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
@@ -111,7 +111,10 @@
                         v-if="userDialog.mutualFriendCount"
                         side="top"
                         :content="t('dialog.user.tags.mutual_friends')">
-                        <Badge variant="outline" class="x-tag-mutual-friend" style="margin-right: 5px; margin-top: 5px">
+                        <Badge
+                            variant="outline"
+                            class="x-tag-mutual-friend border-zinc-500/50! dark:border-zinc-400!"
+                            style="margin-right: 5px; margin-top: 5px">
                             <Users class="mr-1 h-4 w-4 inline-block" />
                             {{ userDialog.mutualFriendCount }}
                         </Badge>
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index defa3d5b..4e3435b8 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -184,12 +184,17 @@
                             <TooltipWrapper
                                 v-if="worldDialog.isFavorite"
                                 side="top"
+                                :ignore-non-keyboard-focus="true"
                                 :content="t('dialog.world.actions.favorites_tooltip')">
                                 <Button class="rounded-full" size="icon-lg" @click="worldDialogCommand('Add Favorite')"
                                     ><Star
                                 /></Button>
                             </TooltipWrapper>
-                            <TooltipWrapper v-else side="top" :content="t('dialog.world.actions.favorites_tooltip')">
+                            <TooltipWrapper
+                                v-else
+                                side="top"
+                                :ignore-non-keyboard-focus="true"
+                                :content="t('dialog.world.actions.favorites_tooltip')">
                                 <Button
                                     class="rounded-full"
                                     size="icon-lg"
@@ -355,42 +360,20 @@
                                             :locationobject="room.$location"
                                             :currentuserid="currentUser.id"
                                             :worlddialogshortname="worldDialog.$location.shortName" />
-                                        <Launch :location="room.tag" style="margin-left: 5px" />
-                                        <InviteYourself
+                                        <InstanceActionBar
+                                            class="ml-1"
                                             :location="room.$location.tag"
+                                            :launch-location="room.tag"
+                                            :instance-location="room.tag"
                                             :shortname="room.$location.shortName"
-                                            style="margin-left: 5px" />
-                                        <TooltipWrapper
-                                            side="top"
-                                            :content="t('dialog.world.instances.refresh_instance_info')">
-                                            <Button
-                                                class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
-                                                size="icon"
-                                                variant="outline"
-                                                @click="refreshInstancePlayerCount(room.tag)"
-                                                ><RefreshCw class="h-4 w-4" />
-                                            </Button>
-                                        </TooltipWrapper>
-                                        <TooltipWrapper
-                                            v-if="instanceJoinHistory.get(room.$location.tag)"
-                                            side="top"
-                                            :content="t('dialog.previous_instances.info')">
-                                            <Button
-                                                class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
-                                                size="icon-sm"
-                                                variant="outline"
-                                                style="margin-left: 5px"
-                                                @click="showPreviousInstancesInfoDialog(room.location)"
-                                                ><History class="h-4 w-4" />
-                                            </Button>
-                                        </TooltipWrapper>
-                                        <LastJoin
-                                            :location="room.$location.tag"
-                                            :currentlocation="lastLocation.location" />
-                                        <InstanceInfo
-                                            :location="room.tag"
+                                            :currentlocation="lastLocation.location"
                                             :instance="room.ref"
-                                            :friendcount="room.friendCount" />
+                                            :friendcount="room.friendCount"
+                                            :refresh-tooltip="t('dialog.world.instances.refresh_instance_info')"
+                                            :show-history="!!instanceJoinHistory.get(room.$location.tag)"
+                                            :history-tooltip="t('dialog.previous_instances.info')"
+                                            :on-refresh="() => refreshInstancePlayerCount(room.tag)"
+                                            :on-history="() => showPreviousInstancesInfoDialog(room.location)" />
                                     </div>
                                     <div
                                         v-if="room.$location.userId || room.users.length"
@@ -804,6 +787,8 @@
     import { database } from '../../../service/database.js';
     import { formatJsonVars } from '../../../shared/utils/base/ui';
 
+    import InstanceActionBar from '../../InstanceActionBar.vue';
+
     const modalStore = useModalStore();
 
     const NewInstanceDialog = defineAsyncComponent(() => import('../NewInstanceDialog.vue'));
diff --git a/src/components/ui/button/index.js b/src/components/ui/button/index.js
index f1411dcc..16a1b76f 100644
--- a/src/components/ui/button/index.js
+++ b/src/components/ui/button/index.js
@@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority';
 export { default as Button } from './Button.vue';
 
 export const buttonVariants = cva(
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:bg-muted aria-disabled:text-muted-foreground aria-disabled:shadow-none aria-disabled:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none data-[disabled]:opacity-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:bg-muted aria-disabled:text-muted-foreground aria-disabled:shadow-none aria-disabled:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none data-[disabled]:opacity-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
     {
         variants: {
             variant: {
diff --git a/src/components/ui/tooltip/TooltipWrapper.vue b/src/components/ui/tooltip/TooltipWrapper.vue
index eaa17b4a..b0fcce28 100644
--- a/src/components/ui/tooltip/TooltipWrapper.vue
+++ b/src/components/ui/tooltip/TooltipWrapper.vue
@@ -16,6 +16,7 @@
         sideOffset: { type: Number, required: false },
         delayDuration: { type: Number, required: false },
         disableHoverableContent: { type: Boolean, required: false },
+        ignoreNonKeyboardFocus: { type: Boolean, required: false },
         disabled: { type: Boolean, required: false },
         triggerAsChild: { type: Boolean, required: false, default: true },
         contentClass: { type: null, required: false }
@@ -27,7 +28,11 @@
 </script>
 
 <template>
-    <Tooltip :delay-duration="delayDuration" :disable-hoverable-content="disableHoverableContent" :disabled="disabled">
+    <Tooltip
+        :delay-duration="delayDuration"
+        :disable-hoverable-content="disableHoverableContent"
+        :ignore-non-keyboard-focus="ignoreNonKeyboardFocus"
+        :disabled="disabled">
         <TooltipTrigger :as-child="triggerAsChild" v-bind="attrs">
             <slot />
         </TooltipTrigger>
diff --git a/src/lib/table/useVrcxVueTable.js b/src/lib/table/useVrcxVueTable.js
index 59048c50..46ca4b2c 100644
--- a/src/lib/table/useVrcxVueTable.js
+++ b/src/lib/table/useVrcxVueTable.js
@@ -89,7 +89,6 @@ function withSpacerColumn(columns, enabled, spacerId, stretchAfterId) {
         header: () => null,
         cell: () => null,
         enableSorting: false,
-        enableResizing: false,
         size: 0,
         minSize: 0,
         meta: { thClass: 'p-0', tdClass: 'p-0' }
diff --git a/src/localization/en.json b/src/localization/en.json
index 8152b31a..6b0bf50b 100644
--- a/src/localization/en.json
+++ b/src/localization/en.json
@@ -559,6 +559,9 @@
                     "font_family_source_sans_3": "Source Sans 3",
                     "font_family_ibm_plex_sans": "IBM Plex Sans",
                     "font_family_harmonyos_sans": "HarmonyOS Sans",
+                    "font_family_jetbrains_mono": "JetBrains Mono",
+                    "font_family_roboto": "Roboto",
+                    "font_family_fantasque_sans_mono": "Fantasque Sans Mono",
                     "font_family_system_ui": "System Font",
                     "theme_mode_system": "System",
                     "theme_mode_light": "Light",
diff --git a/src/plugin/components.js b/src/plugin/components.js
index 45f3e79b..86273551 100644
--- a/src/plugin/components.js
+++ b/src/plugin/components.js
@@ -3,10 +3,6 @@ import { TooltipWrapper } from '../components/ui/tooltip';
 import AvatarInfo from '../components/AvatarInfo.vue';
 import CountdownTimer from '../components/CountdownTimer.vue';
 import DisplayName from '../components/DisplayName.vue';
-import InstanceInfo from '../components/InstanceInfo.vue';
-import InviteYourself from '../components/InviteYourself.vue';
-import LastJoin from '../components/LastJoin.vue';
-import Launch from '../components/Launch.vue';
 import Location from '../components/Location.vue';
 import LocationWorld from '../components/LocationWorld.vue';
 import Timer from '../components/Timer.vue';
@@ -14,13 +10,9 @@ import Timer from '../components/Timer.vue';
 export function initComponents(app) {
     app.component('Location', Location);
     app.component('Timer', Timer);
-    app.component('InstanceInfo', InstanceInfo);
-    app.component('LastJoin', LastJoin);
     app.component('CountdownTimer', CountdownTimer);
     app.component('AvatarInfo', AvatarInfo);
     app.component('DisplayName', DisplayName);
-    app.component('InviteYourself', InviteYourself);
-    app.component('Launch', Launch);
     app.component('LocationWorld', LocationWorld);
     app.component('TooltipWrapper', TooltipWrapper);
 }
diff --git a/src/shared/constants/fonts.js b/src/shared/constants/fonts.js
index 410acd5a..03d8f729 100644
--- a/src/shared/constants/fonts.js
+++ b/src/shared/constants/fonts.js
@@ -25,6 +25,21 @@ const APP_FONT_CONFIG = Object.freeze({
         cssImport:
             "@import url('https://fonts.cdnfonts.com/css/harmonyos-sans');"
     },
+    jetbrains_mono: {
+        cssName: "'JetBrains Mono'",
+        cssImport:
+            "@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');"
+    },
+    roboto: {
+        cssName: "'Roboto'",
+        cssImport:
+            "@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');"
+    },
+    fantasque_sans_mono: {
+        cssName: "'Fantasque Sans Mono'",
+        cssImport:
+            "@import url('https://fonts.cdnfonts.com/css/fantasque-sans-mono');"
+    },
     system_ui: {
         cssName: 'system-ui',
         link: null
diff --git a/src/shared/constants/themes.js b/src/shared/constants/themes.js
index 962ee7f2..4564fcfa 100644
--- a/src/shared/constants/themes.js
+++ b/src/shared/constants/themes.js
@@ -10,11 +10,12 @@ export const THEME_CONFIG = {
     dark: {
         isDark: true,
         name: 'Dark'
+    },
+    midnight: {
+        isDark: true,
+        name: 'Midnight',
+        file: 'midnight.css'
     }
-    // midnight: {
-    //     isDark: true,
-    //     name: 'Midnight'
-    // }
 };
 
 export const THEME_COLORS = [
diff --git a/src/shared/utils/base/ui.js b/src/shared/utils/base/ui.js
index 06bc3aa8..0c653754 100644
--- a/src/shared/utils/base/ui.js
+++ b/src/shared/utils/base/ui.js
@@ -17,6 +17,7 @@ import configRepository from '../../../service/config.js';
 
 const THEME_COLOR_STORAGE_KEY = 'VRCX_themeColor';
 const THEME_COLOR_STYLE_ID = 'app-theme-color-style';
+const THEME_MODE_STYLE_ID = 'app-theme-mode-style';
 const DEFAULT_THEME_COLOR_KEY = 'default';
 
 const APP_FONT_LINK_ATTR = 'data-app-font';
@@ -139,6 +140,33 @@ function applyThemeFonts(themeKey, fontLinks = []) {
     });
 }
 
+function applyThemeModeStyle(themeMode) {
+    const themeConfig = THEME_CONFIG[themeMode];
+    const themeFile = themeConfig?.file;
+    let styleEl = document.getElementById(THEME_MODE_STYLE_ID);
+
+    if (!themeFile) {
+        styleEl?.remove();
+        return;
+    }
+
+    const themeHref = new URL(
+        `../../../styles/themes/${themeFile}`,
+        import.meta.url
+    ).href;
+
+    if (!styleEl) {
+        styleEl = document.createElement('link');
+        styleEl.id = THEME_MODE_STYLE_ID;
+        styleEl.rel = 'stylesheet';
+        document.head.appendChild(styleEl);
+    }
+
+    if (styleEl.getAttribute('href') !== themeHref) {
+        styleEl.setAttribute('href', themeHref);
+    }
+}
+
 function resolveAppFontFamily(fontKey) {
     const normalized = String(fontKey || '')
         .trim()
@@ -209,6 +237,7 @@ function changeAppThemeStyle(themeMode) {
     }
 
     applyThemeFonts(themeMode, themeConfig.fontLinks);
+    applyThemeModeStyle(themeMode);
 
     document.documentElement.setAttribute('data-theme', themeMode);
 
diff --git a/src/stores/settings/appearance.js b/src/stores/settings/appearance.js
index df88258d..5c08b8f9 100644
--- a/src/stores/settings/appearance.js
+++ b/src/stores/settings/appearance.js
@@ -13,7 +13,8 @@ import {
 } from '../../shared/utils/base/ui';
 import {
     APP_FONT_DEFAULT_KEY,
-    APP_FONT_FAMILIES
+    APP_FONT_FAMILIES,
+    THEME_CONFIG
 } from '../../shared/constants';
 import { database } from '../../service/database';
 import { getNameColour } from '../../shared/utils';
@@ -51,6 +52,7 @@ export const useAppearanceSettingsStore = defineStore(
         const appLanguage = ref('en');
         const themeMode = ref('');
         const isDarkMode = ref(false);
+        const lastDarkTheme = ref('dark');
         const appFontFamily = ref('inter');
         const displayVRCPlusIconsAsAvatar = ref(false);
         const hideNicknames = ref(false);
@@ -107,9 +109,20 @@ export const useAppearanceSettingsStore = defineStore(
             return Math.min(max, Math.max(min, n));
         };
 
+        const resolveLastDarkTheme = (value, fallback = 'dark') => {
+            const normalized = String(value || '').trim();
+            return THEME_CONFIG[normalized]?.isDark === true
+                ? normalized
+                : fallback;
+        };
+
         async function initAppearanceSettings() {
             const { initThemeMode, isDarkMode: initDarkMode } =
                 await getThemeMode(configRepository);
+            const fallbackDarkTheme =
+                THEME_CONFIG[initThemeMode]?.isDark === true
+                    ? initThemeMode
+                    : 'dark';
             const [
                 appLanguageConfig,
                 displayVRCPlusIconsAsAvatarConfig,
@@ -137,7 +150,8 @@ export const useAppearanceSettingsStore = defineStore(
                 trustColorConfig,
                 notificationIconDotConfig,
                 navIsCollapsedConfig,
-                appFontFamilyConfig
+                appFontFamilyConfig,
+                lastDarkThemeConfig
             ] = await Promise.all([
                 configRepository.getString('VRCX_appLanguage'),
                 configRepository.getBool('displayVRCPlusIconsAsAvatar', true),
@@ -196,6 +210,10 @@ export const useAppearanceSettingsStore = defineStore(
                 configRepository.getString(
                     'VRCX_fontFamily',
                     APP_FONT_DEFAULT_KEY
+                ),
+                configRepository.getString(
+                    'VRCX_lastDarkTheme',
+                    fallbackDarkTheme
                 )
             ]);
 
@@ -216,6 +234,10 @@ export const useAppearanceSettingsStore = defineStore(
 
             themeMode.value = initThemeMode;
             isDarkMode.value = initDarkMode;
+            lastDarkTheme.value = resolveLastDarkTheme(
+                lastDarkThemeConfig,
+                fallbackDarkTheme
+            );
             appFontFamily.value = normalizeAppFontFamily(appFontFamilyConfig);
             applyAppFontFamily(appFontFamily.value);
 
@@ -463,12 +485,24 @@ export const useAppearanceSettingsStore = defineStore(
         function setThemeMode(mode) {
             themeMode.value = mode;
             configRepository.setString('VRCX_ThemeMode', mode);
+            if (THEME_CONFIG[mode]?.isDark === true) {
+                const normalized = resolveLastDarkTheme(mode);
+                lastDarkTheme.value = normalized;
+                configRepository.setString('VRCX_lastDarkTheme', normalized);
+            }
             const { isDark } = changeAppThemeStyle(mode);
             isDarkMode.value = isDark;
             vrStore.updateVRConfigVars();
             updateTrustColor(undefined, undefined);
         }
 
+        function toggleThemeMode() {
+            const nextMode = isDarkMode.value
+                ? 'light'
+                : resolveLastDarkTheme(lastDarkTheme.value);
+            setThemeMode(nextMode);
+        }
+
         function normalizeAppFontFamily(value) {
             return APP_FONT_FAMILIES.includes(value)
                 ? value
@@ -914,7 +948,8 @@ export const useAppearanceSettingsStore = defineStore(
             setNavCollapsed,
             toggleNavCollapsed,
             setAppFontFamily,
-            setThemeMode
+            setThemeMode,
+            toggleThemeMode
         };
     }
 );
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 07234397..182c8f57 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -84,7 +84,8 @@
 }
 
 .dark {
-    --background: oklch(0.145 0 0);
+    /* --background: oklch(0.145 0 0); */
+    --background: oklch(0.205 0 0);
     --foreground: oklch(0.985 0 0);
     --card: oklch(0.145 0 0);
     --card-foreground: oklch(0.985 0 0);
diff --git a/src/styles/themes/midnight.css b/src/styles/themes/midnight.css
new file mode 100644
index 00000000..2a87780e
--- /dev/null
+++ b/src/styles/themes/midnight.css
@@ -0,0 +1,35 @@
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.145 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.145 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.985 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.396 0.141 25.723);
+    --destructive-foreground: oklch(0.637 0.237 25.331);
+    --border: oklch(0.269 0 0);
+    --input: oklch(0.269 0 0);
+    --ring: oklch(0.439 0 0);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.145 0 0);
+    /* --sidebar: oklch(0.205 0 0); */
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(0.269 0 0);
+    --sidebar-ring: oklch(0.439 0 0);
+}
\ No newline at end of file
diff --git a/src/views/Feed/columns.jsx b/src/views/Feed/columns.jsx
index ad31b8e0..d91d2ec1 100644
--- a/src/views/Feed/columns.jsx
+++ b/src/views/Feed/columns.jsx
@@ -280,7 +280,7 @@ export const columns = [
             const original = row.original;
             return (
                 <span
-                    class="x-link pr-2.5"
+                    class="x-link pr-2.5 cursor-pointer"
                     onClick={() => showUserDialog(original.userId)}
                 >
                     {original.displayName}
diff --git a/src/views/FriendList/columns.jsx b/src/views/FriendList/columns.jsx
index 6ce48049..920771ad 100644
--- a/src/views/FriendList/columns.jsx
+++ b/src/views/FriendList/columns.jsx
@@ -115,7 +115,6 @@ export const createColumns = ({
             header: () => null,
             size: 55,
             enableSorting: false,
-            enableResizing: false,
             meta: {
                 thClass: 'p-0',
                 tdClass: 'p-0'
diff --git a/src/views/FriendLog/columns.jsx b/src/views/FriendLog/columns.jsx
index 57696d08..07e5abdf 100644
--- a/src/views/FriendLog/columns.jsx
+++ b/src/views/FriendLog/columns.jsx
@@ -118,7 +118,6 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
             meta: {
                 class: 'w-[80px] max-w-[80px] text-right'
             },
-            enableResizing: false,
             size: 80,
             maxSize: 80,
             header: () => t('table.friendLog.action'),
diff --git a/src/views/GameLog/columns.jsx b/src/views/GameLog/columns.jsx
index d3c20b1c..3a192301 100644
--- a/src/views/GameLog/columns.jsx
+++ b/src/views/GameLog/columns.jsx
@@ -241,7 +241,6 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
             meta: {
                 class: 'text-right'
             },
-            enableResizing: false,
             size: 90,
             minSize: 90,
             maxSize: 90,
diff --git a/src/views/Moderation/columns.jsx b/src/views/Moderation/columns.jsx
index f49f9131..554e21d9 100644
--- a/src/views/Moderation/columns.jsx
+++ b/src/views/Moderation/columns.jsx
@@ -124,7 +124,6 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
             minSize: 80,
             maxSize: 80,
             enableSorting: false,
-            enableResizing: false,
             header: () => t('table.moderation.action'),
             cell: ({ row }) => {
                 const original = row.original;
diff --git a/src/views/Notifications/columns.jsx b/src/views/Notifications/columns.jsx
index ccb348ce..56ef985c 100644
--- a/src/views/Notifications/columns.jsx
+++ b/src/views/Notifications/columns.jsx
@@ -389,7 +389,6 @@ export const createColumns = ({
         },
         {
             accessorKey: 'photo',
-            enableResizing: false,
             size: 80,
             header: () => t('table.notification.photo'),
             cell: ({ row }) => {
@@ -502,7 +501,6 @@ export const createColumns = ({
             size: 120,
             minSize: 120,
             maxSize: 120,
-            enableResizing: false,
             header: () => t('table.notification.action'),
             enableSorting: false,
             cell: ({ row }) => {
diff --git a/src/views/Settings/components/Tabs/AppearanceTab.vue b/src/views/Settings/components/Tabs/AppearanceTab.vue
index eae90105..2caf3328 100644
--- a/src/views/Settings/components/Tabs/AppearanceTab.vue
+++ b/src/views/Settings/components/Tabs/AppearanceTab.vue
@@ -21,12 +21,12 @@
                 <span class="name">{{ t('view.settings.appearance.appearance.theme_mode') }}</span>
                 <Select :model-value="themeMode" @update:modelValue="setThemeMode">
                     <SelectTrigger size="sm">
-                        <SelectValue :placeholder="t(`view.settings.appearance.appearance.theme_mode_${themeMode}`)" />
+                        <SelectValue :placeholder="themeDisplayName(themeMode)" />
                     </SelectTrigger>
                     <SelectContent>
                         <SelectGroup>
                             <SelectItem v-for="(config, themeKey) in THEME_CONFIG" :key="themeKey" :value="themeKey">
-                                {{ t(`view.settings.appearance.appearance.theme_mode_${themeKey}`) }}
+                                {{ themeDisplayName(themeKey) }}
                             </SelectItem>
                         </SelectGroup>
                     </SelectContent>
@@ -473,6 +473,15 @@
 
     const { t } = useI18n();
 
+    const themeDisplayName = (themeKey) => {
+        const i18nKey = `view.settings.appearance.appearance.theme_mode_${themeKey}`;
+        const translated = t(i18nKey);
+        if (translated !== i18nKey) {
+            return translated;
+        }
+        return THEME_CONFIG[themeKey]?.name ?? themeKey;
+    };
+
     const appearanceSettingsStore = useAppearanceSettingsStore();
     const { saveOpenVROption, updateVRConfigVars } = useVrStore();