diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index b22ead562..5fd41453d 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -24,9 +24,20 @@ import SplashScreen from '@/components/ui/SplashScreen.vue'
 import ModrinthLoadingIndicator from '@/components/modrinth-loading-indicator'
 import { handleError, useNotifications } from '@/store/notifications.js'
 import { command_listener, offline_listener, warning_listener } from '@/helpers/events.js'
-import { ArrowLeftFromLineIcon, ArrowRightFromLineIcon, ChatIcon, MaximizeIcon, MinimizeIcon } from '@/assets/icons'
+import {
+  ArrowLeftFromLineIcon,
+  ArrowRightFromLineIcon,
+  ChatIcon,
+  MaximizeIcon,
+  MinimizeIcon,
+} from '@/assets/icons'
 import { getOS, isDev, isOffline, showLauncherLogsFolder } from '@/helpers/utils.js'
-import { mixpanel_init, mixpanel_is_loaded, mixpanel_opt_out_tracking, mixpanel_track } from '@/helpers/mixpanel.js'
+import {
+  mixpanel_init,
+  mixpanel_is_loaded,
+  mixpanel_opt_out_tracking,
+  mixpanel_track,
+} from '@/helpers/mixpanel.js'
 import { useDisableClicks } from '@/composables/click.js'
 import { openExternal } from '@/helpers/external.js'
 import { await_sync, check_safe_loading_bars_complete } from '@/helpers/state.js'
@@ -67,6 +78,7 @@ const os = ref('')
 
 const instances = useInstances()
 const { instancesByPlayed } = storeToRefs(instances)
+watch(() => instances)
 
 defineExpose({
   initialize: async () => {
@@ -78,9 +90,8 @@ defineExpose({
       opt_out_analytics,
       collapsed_navigation,
       advanced_rendering,
-      fully_onboarded
-    } =
-      await get()
+      fully_onboarded,
+    } = await get()
     // video should play if the user is not on linux, and has not onboarded
     os.value = await getOS()
     // videoPlaying.value = !fully_onboarded && os.value !== 'Linux'
@@ -98,7 +109,10 @@ defineExpose({
 
     mixpanel_init('014c7d6a336d0efaefe3aca91063748d', { debug: dev, persistence: 'localStorage' })
     if (opt_out_analytics) {
-      console.info('[AR • Hard Disable Patch] • OPT_OUT_ANALYTICS (DISABLED) status is ', opt_out_analytics)
+      console.info(
+        '[AR • Hard Disable Patch] • OPT_OUT_ANALYTICS (DISABLED) status is ',
+        opt_out_analytics,
+      )
       mixpanel_opt_out_tracking()
     }
     mixpanel_track('Launched', { version, dev, fully_onboarded })
@@ -120,8 +134,8 @@ defineExpose({
       notificationsWrapper.value.addNotification({
         title: 'Warning',
         text: e.message,
-        type: 'warn'
-      })
+        type: 'warn',
+      }),
     )
 
     // if (showOnboarding.value) {
@@ -132,7 +146,7 @@ defineExpose({
     isLoading.value = false
     failureText.value = e
     os.value = await getOS()
-  }
+  },
 })
 
 const confirmClose = async () => {
@@ -140,8 +154,8 @@ const confirmClose = async () => {
     'An action is currently in progress. Are you sure you want to exit?',
     {
       title: 'AstralRinth',
-      type: 'warning'
-    }
+      type: 'warning',
+    },
   )
   return confirmed
 }
@@ -156,7 +170,7 @@ const handleClose = async () => {
   // (Exception: if the user is changing config directory, which takes control of the state, and it's taking a significant amount of time for some reason)
   const isSafe = await Promise.race([
     check_safe_loading_bars_complete(),
-    new Promise((r) => setTimeout(r, 2000))
+    new Promise((r) => setTimeout(r, 2000)),
   ])
   if (!isSafe) {
     const response = await confirmClose()
@@ -203,7 +217,7 @@ command_listener(async (e) => {
     if (e.path.endsWith('.mrpack')) {
       await install_from_file(e.path).catch(handleError)
       mixpanel_track('InstanceCreate', {
-        source: 'CreationModalFileDrop'
+        source: 'CreationModalFileDrop',
       })
     }
   } else {
@@ -215,6 +229,19 @@ command_listener(async (e) => {
 const toggleSidebar = () => {
   sidebarOpen.value = !sidebarOpen.value
 }
+
+async function openInstance(instance) {
+  const instancePath = `/instance/${encodeURIComponent(instance.path)}/`
+  if (route.path.startsWith('/instance')) {
+    await router.replace({ path: `/library` }).then(() => {
+      setTimeout(() => {
+        router.replace({ path: instancePath }).catch(() => { })
+      }, 128)
+    })
+  } else {
+    router.push({ path: instancePath })
+  }
+}
 </script>
 
 <template>
@@ -241,8 +268,8 @@ const toggleSidebar = () => {
           </h3>
         </div>
         <div class="error-div">
-          AstralRinth App failed to load correctly. This may be because of a corrupted file, or because
-          the app is missing crucial files.
+          AstralRinth App failed to load correctly. This may be because of a corrupted file, or
+          because the app is missing crucial files.
         </div>
         <div class="error-div">You may be able to fix it one of the following ways:</div>
         <ul class="error-div">
@@ -310,12 +337,11 @@ const toggleSidebar = () => {
         <hr />
       </div>
       <div class="instances pages-list">
-        <!-- FIXME: Fix visual issuesin future... maybe :D -->
-        <RouterLink v-for="instance in instancesByPlayed" :key="instance.id"
-          :to="`/instance/${encodeURIComponent(instance.path)}`" class="btn icon-only collapsed-button">
+        <Button v-for="instance in instancesByPlayed" :key="instance.id" @click="openInstance(instance)"
+          style="display: inline-flex; background-color: transparent" class="collapsed-button">
           <Avatar class="collapsed-avatar__icon" :src="iconPathAsUrl(instance.metadata?.icon)" size="xl" />
           <span class="collapsed-button__label">{{ instance.metadata.name }}</span>
-        </RouterLink>
+        </Button>
       </div>
       <div class="divider">
         <hr />
@@ -728,4 +754,4 @@ const toggleSidebar = () => {
     padding: var(--gap-sm) 0;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/app-frontend/src/components/ui/ExportModal.vue b/apps/app-frontend/src/components/ui/ExportModal.vue
index 35281e092..05c699928 100644
--- a/apps/app-frontend/src/components/ui/ExportModal.vue
+++ b/apps/app-frontend/src/components/ui/ExportModal.vue
@@ -7,8 +7,8 @@ import { export_profile_mrpack, get_pack_export_candidates } from '@/helpers/pro
 import { open } from '@tauri-apps/api/dialog'
 import { handleError } from '@/store/notifications.js'
 import { useTheming } from '@/store/theme'
-import { i18n } from '@/main.js';
-const t = i18n.global.t;
+import { i18n } from '@/main.js'
+const t = i18n.global.t
 const props = defineProps({
   instance: {
     type: Object,
@@ -110,17 +110,22 @@ const exportPack = async () => {
   <Modal ref="exportModal" header="Export modpack" :noblur="!themeStore.advancedRendering">
     <div class="modal-body">
       <div class="labeled_input">
-        <p>{{ t('ExportModal.ModpackName')}}</p>
+        <p>{{ t('ExportModal.ModpackName') }}</p>
         <div class="iconified-input">
           <PackageIcon />
-          <input v-model="nameInput" type="text" :placeholder="t('ExportModal.ModpackName')" class="input" />
+          <input
+            v-model="nameInput"
+            type="text"
+            :placeholder="t('ExportModal.ModpackName')"
+            class="input"
+          />
           <Button class="r-btn" @click="nameInput = ''">
             <XIcon />
           </Button>
         </div>
       </div>
       <div class="labeled_input">
-        <p>{{ t('ExportModal.Version')}}</p>
+        <p>{{ t('ExportModal.Version') }}</p>
         <div class="iconified-input">
           <VersionIcon />
           <input v-model="versionInput" type="text" placeholder="1.0.0" class="input" />
@@ -131,7 +136,7 @@ const exportPack = async () => {
       </div>
       <div class="adjacent-input">
         <div class="labeled_input">
-          <p>{{ t('ExportModal.Description')}}</p>
+          <p>{{ t('ExportModal.Description') }}</p>
 
           <div class="textarea-wrapper">
             <textarea v-model="exportDescription" :placeholder="t('ExportModal.DescriptionPl')" />
@@ -142,12 +147,8 @@ const exportPack = async () => {
       <div class="table">
         <div class="table-head">
           <div class="table-cell row-wise">
-            {{ t('ExportModal.SelectFiles')}}
-            <Button
-              class="sleek-primary collapsed-button"
-              icon-only
-              @click="() => (showingFiles = !showingFiles)"
-            >
+            {{ t('ExportModal.SelectFiles') }}
+            <Button icon-only @click="() => (showingFiles = !showingFiles)">
               <PlusIcon v-if="!showingFiles" />
               <XIcon v-else />
             </Button>
@@ -201,11 +202,11 @@ const exportPack = async () => {
       <div class="button-row push-right">
         <Button @click="exportModal.hide">
           <XIcon />
-          {{ t('ExportModal.Cancel')}}
+          {{ t('ExportModal.Cancel') }}
         </Button>
         <Button color="primary" @click="exportPack">
           <PackageIcon />
-          {{ t('ExportModal.Export')}}
+          {{ t('ExportModal.Export') }}
         </Button>
       </div>
     </div>