diff --git a/theseus_gui/src/pages/Browse.vue b/theseus_gui/src/pages/Browse.vue
index 1df994c1a..da378b43f 100644
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -144,7 +144,7 @@ watch(
           )
         "
         @click="handleReset"
-      ><ClearIcon />Clear Filters</Button
+        ><ClearIcon />Clear Filters</Button
       >
       <div
         v-for="categoryList in Array.from(sortedCategories)"
@@ -454,5 +454,4 @@ watch(
     }
   }
 }
-
 </style>
diff --git a/theseus_gui/src/pages/Index.vue b/theseus_gui/src/pages/Index.vue
index 6097552f8..89d141cf2 100644
--- a/theseus_gui/src/pages/Index.vue
+++ b/theseus_gui/src/pages/Index.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { list } from '@/helpers/profile.js'
-import {ref, onUnmounted, shallowRef} from 'vue'
+import { ref, onUnmounted, shallowRef } from 'vue'
 import { ofetch } from 'ofetch'
 import { useRoute } from 'vue-router'
 import RowDisplay from '@/components/RowDisplay.vue'
diff --git a/theseus_gui/src/pages/Library.vue b/theseus_gui/src/pages/Library.vue
index eea87050b..34303d438 100644
--- a/theseus_gui/src/pages/Library.vue
+++ b/theseus_gui/src/pages/Library.vue
@@ -23,12 +23,8 @@ loading_listener(async (profile) => {
   console.log(profile)
   if (profile.event === 'loaded') {
     const profiles = await list()
-    instances.value = Object.values(profiles).filter(
-      (prof) => !prof.metadata.linked_project_id
-    )
-    modpacks.value = Object.values(profiles).filter(
-      (prof) => prof.metadata.linked_project_id
-    )
+    instances.value = Object.values(profiles).filter((prof) => !prof.metadata.linked_project_id)
+    modpacks.value = Object.values(profiles).filter((prof) => prof.metadata.linked_project_id)
   }
 })
 </script>
diff --git a/theseus_gui/src/pages/Settings.vue b/theseus_gui/src/pages/Settings.vue
index 1a604d22e..a66bcef8e 100644
--- a/theseus_gui/src/pages/Settings.vue
+++ b/theseus_gui/src/pages/Settings.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import {
   Card,
   Slider,
@@ -22,20 +22,15 @@ import { open } from '@tauri-apps/api/dialog'
 
 const themeStore = useTheming()
 
-const settings = ref(null)
-const loading = ref(true)
+const fetchSettings = await get()
 
-onMounted(async () => {
-  const fetchSettings = await get()
+if (!fetchSettings.java_globals?.JAVA_8)
+  fetchSettings.java_globals.JAVA_8 = { path: '', version: '' }
+if (!fetchSettings.java_globals?.JAVA_17)
+  fetchSettings.java_globals.JAVA_17 = { path: '', version: '' }
 
-  if (!fetchSettings.java_globals?.JAVA_8)
-    fetchSettings.java_globals.JAVA_8 = { path: '', version: '' }
-  if (!fetchSettings.java_globals?.JAVA_17)
-    fetchSettings.java_globals.JAVA_17 = { path: '', version: '' }
+const settings = ref(fetchSettings)
 
-  settings.value = fetchSettings
-  loading.value = false
-})
 const chosenInstallOptions = ref([])
 const browsingInstall = ref(0)
 
@@ -353,7 +348,6 @@ const setJavaInstall = (javaInstall) => {
   </div>
 </template>
 
-
 <style lang="scss">
 .concurrent-downloads {
   width: 80% !important;
diff --git a/theseus_gui/src/pages/instance/Index.vue b/theseus_gui/src/pages/instance/Index.vue
index 43d440213..225b383ae 100644
--- a/theseus_gui/src/pages/instance/Index.vue
+++ b/theseus_gui/src/pages/instance/Index.vue
@@ -31,7 +31,7 @@
             Play
           </Button>
           <Button v-else-if="loading === true && playing === false" disabled class="instance-button"
-          >Loading...</Button
+            >Loading...</Button
           >
           <Button class="instance-button" icon-only @click="open({ defaultPath: instance.path })">
             <OpenFolderIcon />
@@ -68,7 +68,7 @@ import {
   get_uuids_by_profile_path,
   kill_by_uuid,
 } from '@/helpers/process'
-import {process_listener, profile_listener} from '@/helpers/events'
+import { process_listener, profile_listener } from '@/helpers/events'
 import { useRoute } from 'vue-router'
 import { ref, onUnmounted } from 'vue'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
diff --git a/theseus_gui/src/pages/project/Index.vue b/theseus_gui/src/pages/project/Index.vue
index a943df959..07a1e0d56 100644
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -1,198 +1,190 @@
 <template>
-    <div class="root-container">
-      <div v-if="data" class="project-sidebar">
-        <Instance v-if="instance" :instance="instance" small />
-        <Card class="sidebar-card">
-          <Avatar size="lg" :src="data.icon_url" />
-          <div class="instance-info">
-            <h2 class="name">{{ data.title }}</h2>
-            {{ data.description }}
-          </div>
-          <Categories
-            class="tags"
-            type=""
-            :categories="[
-              ...categories.filter(
-                (cat) => data.categories.includes(cat.name) && cat.project_type === 'mod'
-              ),
-              ...loaders.filter(
-                (loader) =>
-                  data.categories.includes(loader.name) &&
-                  loader.supported_project_types?.includes('modpack')
-              ),
-            ]"
+  <div class="root-container">
+    <div v-if="data" class="project-sidebar">
+      <Instance v-if="instance" :instance="instance" small />
+      <Card class="sidebar-card">
+        <Avatar size="lg" :src="data.icon_url" />
+        <div class="instance-info">
+          <h2 class="name">{{ data.title }}</h2>
+          {{ data.description }}
+        </div>
+        <Categories
+          class="tags"
+          type=""
+          :categories="[
+            ...categories.filter(
+              (cat) => data.categories.includes(cat.name) && cat.project_type === 'mod'
+            ),
+            ...loaders.filter(
+              (loader) =>
+                data.categories.includes(loader.name) &&
+                loader.supported_project_types?.includes('modpack')
+            ),
+          ]"
+        >
+          <EnvironmentIndicator
+            :client-side="data.client_side"
+            :server-side="data.server_side"
+            :type="data.project_type"
+          />
+        </Categories>
+        <hr class="card-divider" />
+        <div class="button-group">
+          <Button
+            color="primary"
+            class="instance-button"
+            :disabled="installed === true || installing === true"
+            @click="install(null)"
           >
-            <EnvironmentIndicator
-              :client-side="data.client_side"
-              :server-side="data.server_side"
-              :type="data.project_type"
-            />
-          </Categories>
-          <hr class="card-divider" />
-          <div class="button-group">
-            <Button
-              color="primary"
-              class="instance-button"
-              :disabled="installed === true || installing === true"
-              @click="install(null)"
-            >
-              <DownloadIcon v-if="!installed && !installing" />
-              <CheckIcon v-else-if="installed" />
-              {{ installing ? 'Installing...' : installed ? 'Installed' : 'Install' }}
-            </Button>
-            <a
-              :href="`https://modrinth.com/${data.project_type}/${data.slug}`"
-              rel="external"
-              target="_blank"
-              class="btn"
-            >
-              <ExternalIcon />
-              Site
-            </a>
+            <DownloadIcon v-if="!installed && !installing" />
+            <CheckIcon v-else-if="installed" />
+            {{ installing ? 'Installing...' : installed ? 'Installed' : 'Install' }}
+          </Button>
+          <a
+            :href="`https://modrinth.com/${data.project_type}/${data.slug}`"
+            rel="external"
+            target="_blank"
+            class="btn"
+          >
+            <ExternalIcon />
+            Site
+          </a>
+        </div>
+        <hr class="card-divider" />
+        <div class="stats">
+          <div class="stat">
+            <DownloadIcon aria-hidden="true" />
+            <p>
+              <strong>{{ formatNumber(data.downloads) }}</strong>
+              <span class="stat-label"> download<span v-if="data.downloads !== '1'">s</span></span>
+            </p>
           </div>
-          <hr class="card-divider" />
-          <div class="stats">
-            <div class="stat">
-              <DownloadIcon aria-hidden="true" />
-              <p>
-                <strong>{{ formatNumber(data.downloads) }}</strong>
-                <span class="stat-label">
-                  download<span v-if="data.downloads !== '1'">s</span></span
-                >
-              </p>
-            </div>
-            <div class="stat">
-              <HeartIcon aria-hidden="true" />
-              <p>
-                <strong>{{ formatNumber(data.followers) }}</strong>
-                <span class="stat-label">
-                  follower<span v-if="data.followers !== '1'">s</span></span
-                >
-              </p>
-            </div>
-            <div class="stat date">
-              <CalendarIcon aria-hidden="true" />
-              <span
-                ><span class="date-label">Created </span>
-                {{ dayjs(data.published).fromNow() }}</span
-              >
-            </div>
-            <div class="stat date">
-              <UpdatedIcon aria-hidden="true" />
-              <span
-                ><span class="date-label">Updated </span> {{ dayjs(data.updated).fromNow() }}</span
-              >
-            </div>
+          <div class="stat">
+            <HeartIcon aria-hidden="true" />
+            <p>
+              <strong>{{ formatNumber(data.followers) }}</strong>
+              <span class="stat-label"> follower<span v-if="data.followers !== '1'">s</span></span>
+            </p>
           </div>
-          <hr class="card-divider" />
-          <div class="button-group">
-            <Button class="instance-button">
-              <ReportIcon />
-              Report
-            </Button>
-            <Button class="instance-button">
-              <HeartIcon />
-              Follow
-            </Button>
+          <div class="stat date">
+            <CalendarIcon aria-hidden="true" />
+            <span
+              ><span class="date-label">Created </span> {{ dayjs(data.published).fromNow() }}</span
+            >
           </div>
-          <hr class="card-divider" />
-          <div class="links">
-            <a
-              v-if="data.issues_url"
-              :href="data.issues_url"
-              class="title"
-              rel="noopener nofollow ugc"
+          <div class="stat date">
+            <UpdatedIcon aria-hidden="true" />
+            <span
+              ><span class="date-label">Updated </span> {{ dayjs(data.updated).fromNow() }}</span
             >
-              <IssuesIcon aria-hidden="true" />
-              <span>Issues</span>
-            </a>
-            <a
-              v-if="data.source_url"
-              :href="data.source_url"
-              class="title"
-              rel="noopener nofollow ugc"
-            >
-              <CodeIcon aria-hidden="true" />
-              <span>Source</span>
-            </a>
-            <a v-if="data.wiki_url" :href="data.wiki_url" class="title" rel="noopener nofollow ugc">
-              <WikiIcon aria-hidden="true" />
-              <span>Wiki</span>
-            </a>
-            <a v-if="data.wiki_url" :href="data.wiki_url" class="title" rel="noopener nofollow ugc">
-              <DiscordIcon aria-hidden="true" />
-              <span>Discord</span>
-            </a>
-            <a
-              v-for="(donation, index) in data.donation_urls"
-              :key="index"
-              :href="donation.url"
-              rel="noopener nofollow ugc"
-            >
-              <BuyMeACoffeeIcon v-if="donation.id === 'bmac'" aria-hidden="true" />
-              <PatreonIcon v-else-if="donation.id === 'patreon'" aria-hidden="true" />
-              <KoFiIcon v-else-if="donation.id === 'ko-fi'" aria-hidden="true" />
-              <PaypalIcon v-else-if="donation.id === 'paypal'" aria-hidden="true" />
-              <OpenCollectiveIcon
-                v-else-if="donation.id === 'open-collective'"
-                aria-hidden="true"
-              />
-              <HeartIcon v-else-if="donation.id === 'github'" />
-              <CoinsIcon v-else />
-              <span v-if="donation.id === 'bmac'">Buy Me a Coffee</span>
-              <span v-else-if="donation.id === 'patreon'">Patreon</span>
-              <span v-else-if="donation.id === 'paypal'">PayPal</span>
-              <span v-else-if="donation.id === 'ko-fi'">Ko-fi</span>
-              <span v-else-if="donation.id === 'github'">GitHub Sponsors</span>
-              <span v-else>Donate</span>
-            </a>
           </div>
-        </Card>
-      </div>
-      <div v-if="data" class="content-container">
-        <Promotion />
-        <Card class="tabs">
-          <NavRow
-            v-if="data.gallery.length > 0"
-            :links="[
-              {
-                label: 'Description',
-                href: `/project/${$route.params.id}/`,
-              },
-              {
-                label: 'Versions',
-                href: `/project/${$route.params.id}/versions`,
-              },
-              {
-                label: 'Gallery',
-                href: `/project/${$route.params.id}/gallery`,
-              },
-            ]"
-          />
-          <NavRow
-            v-else
-            :links="[
-              {
-                label: 'Description',
-                href: `/project/${$route.params.id}/`,
-              },
-              {
-                label: 'Versions',
-                href: `/project/${$route.params.id}/versions`,
-              },
-            ]"
-          />
-        </Card>
-        <RouterView
-          :project="data"
-          :versions="versions"
-          :members="members"
-          :dependencies="dependencies"
-          :install="install"
-          :installed="installed"
-        />
-      </div>
+        </div>
+        <hr class="card-divider" />
+        <div class="button-group">
+          <Button class="instance-button">
+            <ReportIcon />
+            Report
+          </Button>
+          <Button class="instance-button">
+            <HeartIcon />
+            Follow
+          </Button>
+        </div>
+        <hr class="card-divider" />
+        <div class="links">
+          <a
+            v-if="data.issues_url"
+            :href="data.issues_url"
+            class="title"
+            rel="noopener nofollow ugc"
+          >
+            <IssuesIcon aria-hidden="true" />
+            <span>Issues</span>
+          </a>
+          <a
+            v-if="data.source_url"
+            :href="data.source_url"
+            class="title"
+            rel="noopener nofollow ugc"
+          >
+            <CodeIcon aria-hidden="true" />
+            <span>Source</span>
+          </a>
+          <a v-if="data.wiki_url" :href="data.wiki_url" class="title" rel="noopener nofollow ugc">
+            <WikiIcon aria-hidden="true" />
+            <span>Wiki</span>
+          </a>
+          <a v-if="data.wiki_url" :href="data.wiki_url" class="title" rel="noopener nofollow ugc">
+            <DiscordIcon aria-hidden="true" />
+            <span>Discord</span>
+          </a>
+          <a
+            v-for="(donation, index) in data.donation_urls"
+            :key="index"
+            :href="donation.url"
+            rel="noopener nofollow ugc"
+          >
+            <BuyMeACoffeeIcon v-if="donation.id === 'bmac'" aria-hidden="true" />
+            <PatreonIcon v-else-if="donation.id === 'patreon'" aria-hidden="true" />
+            <KoFiIcon v-else-if="donation.id === 'ko-fi'" aria-hidden="true" />
+            <PaypalIcon v-else-if="donation.id === 'paypal'" aria-hidden="true" />
+            <OpenCollectiveIcon v-else-if="donation.id === 'open-collective'" aria-hidden="true" />
+            <HeartIcon v-else-if="donation.id === 'github'" />
+            <CoinsIcon v-else />
+            <span v-if="donation.id === 'bmac'">Buy Me a Coffee</span>
+            <span v-else-if="donation.id === 'patreon'">Patreon</span>
+            <span v-else-if="donation.id === 'paypal'">PayPal</span>
+            <span v-else-if="donation.id === 'ko-fi'">Ko-fi</span>
+            <span v-else-if="donation.id === 'github'">GitHub Sponsors</span>
+            <span v-else>Donate</span>
+          </a>
+        </div>
+      </Card>
     </div>
+    <div v-if="data" class="content-container">
+      <Promotion />
+      <Card class="tabs">
+        <NavRow
+          v-if="data.gallery.length > 0"
+          :links="[
+            {
+              label: 'Description',
+              href: `/project/${$route.params.id}/`,
+            },
+            {
+              label: 'Versions',
+              href: `/project/${$route.params.id}/versions`,
+            },
+            {
+              label: 'Gallery',
+              href: `/project/${$route.params.id}/gallery`,
+            },
+          ]"
+        />
+        <NavRow
+          v-else
+          :links="[
+            {
+              label: 'Description',
+              href: `/project/${$route.params.id}/`,
+            },
+            {
+              label: 'Versions',
+              href: `/project/${$route.params.id}/versions`,
+            },
+          ]"
+        />
+      </Card>
+      <RouterView
+        :project="data"
+        :versions="versions"
+        :members="members"
+        :dependencies="dependencies"
+        :install="install"
+        :installed="installed"
+      />
+    </div>
+  </div>
   <InstallConfirmModal ref="confirmModal" />
   <InstanceInstallModal ref="modInstallModal" />
 </template>
@@ -234,7 +226,7 @@ import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { ofetch } from 'ofetch'
 import { useRoute, useRouter } from 'vue-router'
-import { onMounted, ref, watch } from 'vue'
+import { ref, shallowRef, watch } from 'vue'
 import { checkInstalled, installVersionDependencies } from '@/helpers/utils'
 import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
 import InstanceInstallModal from '@/components/ui/InstanceInstallModal.vue'
@@ -247,37 +239,24 @@ const searchStore = useSearch()
 const route = useRoute()
 const router = useRouter()
 const breadcrumbs = useBreadcrumbs()
-const loading = ref(true)
 
 const confirmModal = ref(null)
 const modInstallModal = ref(null)
-const loaders = ref(null)
-const categories = ref(null)
+const loaders = ref(await get_loaders())
+const categories = ref(await get_categories())
 const instance = ref(searchStore.instanceContext)
 const installing = ref(false)
 
-const data = ref(null)
-const versions = ref(null)
-const members = ref(null)
-const dependencies = ref(null)
-const installed = ref(false)
+const [data, versions, members, dependencies] = await Promise.all([
+  ofetch(`https://api.modrinth.com/v2/project/${route.params.id}`).then(shallowRef),
+  ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/version`).then(shallowRef),
+  ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/members`).then(shallowRef),
+  ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/dependencies`).then(shallowRef),
+])
 
-onMounted(async () => {
-  ;[data.value, versions.value, members.value, dependencies.value] = await Promise.all([
-    ofetch(`https://api.modrinth.com/v2/project/${route.params.id}`),
-    ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/version`),
-    ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/members`),
-    ofetch(`https://api.modrinth.com/v2/project/${route.params.id}/dependencies`),
-  ])
+const installed = ref(instance.value && checkInstalled(instance.value, data.value.id))
 
-  loaders.value = await get_loaders()
-  categories.value = await get_categories()
-
-  loading.value = false
-
-  installed.value = instance.value && checkInstalled(instance.value, data.value.id)
-  breadcrumbs.setName('Project', data.value.title)
-})
+breadcrumbs.setName('Project', data.value.title)
 
 watch(
   () => route.params.id,