diff --git a/theseus_gui/src/App.vue b/theseus_gui/src/App.vue
index f374636b4..278368012 100644
--- a/theseus_gui/src/App.vue
+++ b/theseus_gui/src/App.vue
@@ -2,18 +2,17 @@
 import { onMounted, ref } from 'vue'
 import { RouterView, RouterLink } from 'vue-router'
 import { HomeIcon, SearchIcon, LibraryIcon, PlusIcon, SettingsIcon, Button } from 'omorphia'
-import { useLoading, useTheming } from '@/store/state'
+import { useTheming } from '@/store/state'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
 import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
 import { get } from '@/helpers/settings'
 import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
 import RunningAppBar from '@/components/ui/RunningAppBar.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
-import ModrinthLoadingIndicator from '@/components/modrinth-loading-indicator'
 
 const themeStore = useTheming()
 
-const isLoading = ref(true)
+const loading = ref(true)
 onMounted(async () => {
   const { settings, collapsed_navigation } = await get()
   themeStore.setThemeState(settings)
@@ -22,16 +21,15 @@ onMounted(async () => {
 
 defineExpose({
   initialize: async () => {
-    isLoading.value = false
+    loading.value = false
     const { theme } = await get()
     themeStore.setThemeState(theme)
   },
 })
-const loading = useLoading()
 </script>
 
 <template>
-  <SplashScreen v-if="isLoading" app-loading />
+  <SplashScreen v-if="loading" app-loading />
   <div v-else class="container">
     <div class="nav-container" :class="{ expanded: !themeStore.collapsedNavigation }">
       <div class="nav-section">
@@ -119,13 +117,9 @@ const loading = useLoading()
         </section>
       </div>
       <div class="router-view">
-        <ModrinthLoadingIndicator
-          offset-height="var(--appbar-height)"
-          offset-width="var(--sidebar-width)"
-        />
         <RouterView v-slot="{ Component }">
           <template v-if="Component">
-            <Suspense @pending="loading.startLoading()" @resolve="loading.stopLoading()">
+            <Suspense>
               <component :is="Component"></component>
             </Suspense>
           </template>
@@ -137,20 +131,17 @@ const loading = useLoading()
 
 <style lang="scss" scoped>
 .container {
-  --appbar-height: 3.25rem;
-  --sidebar-width: 5rem;
-
   height: 100vh;
   display: flex;
   flex-direction: row;
   overflow: hidden;
 
   .view {
-    &.expanded {
-      --sidebar-width: 13rem;
-    }
+    width: var(--view-width);
 
-    width: calc(100% - var(--sidebar-width));
+    &.expanded {
+      width: var(--expanded-view-width);
+    }
 
     .appbar {
       display: flex;
@@ -239,11 +230,9 @@ const loading = useLoading()
   background: var(--color-raised-bg);
 
   &.expanded {
-    --sidebar-width: 13rem;
-
-    width: var(--sidebar-width);
-    max-width: var(--sidebar-width);
-    min-width: var(--sidebar-width);
+    width: 13rem;
+    max-width: 13rem;
+    min-width: 13rem;
   }
 }
 
diff --git a/theseus_gui/src/components/modrinth-loading-indicator.js b/theseus_gui/src/components/modrinth-loading-indicator.js
deleted file mode 100644
index d3e78e3d9..000000000
--- a/theseus_gui/src/components/modrinth-loading-indicator.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import { computed, defineComponent, h, onBeforeUnmount, ref, watch } from 'vue'
-import { useLoading } from '@/store/state.js'
-
-export default defineComponent({
-  props: {
-    throttle: {
-      type: Number,
-      default: 50,
-    },
-    duration: {
-      type: Number,
-      default: 500,
-    },
-    height: {
-      type: Number,
-      default: 3,
-    },
-    color: {
-      type: [String, Boolean],
-      default:
-        'repeating-linear-gradient(to right, var(--color-brand) 0%, var(--color-brand) 100%)',
-    },
-    offsetWidth: {
-      type: String,
-      default: '208px',
-    },
-    offsetHeight: {
-      type: String,
-      default: '52px',
-    },
-  },
-  setup(props, { slots }) {
-    const indicator = useLoadingIndicator({
-      duration: props.duration,
-      throttle: props.throttle,
-    })
-
-    onBeforeUnmount(() => indicator.clear)
-
-    const loading = useLoading()
-
-    watch(loading, (newValue) => {
-      if (newValue.loading) {
-        indicator.start()
-      } else {
-        indicator.finish()
-      }
-    })
-
-    return () =>
-      h(
-        'div',
-        {
-          style: {
-            position: 'fixed',
-            top: props.offsetHeight,
-            right: 0,
-            left: props.offsetWidth,
-            pointerEvents: 'none',
-            width: `calc((100vw - ${props.offsetWidth}) * ${indicator.progress.value / 100})`,
-            height: `${props.height}px`,
-            opacity: indicator.isLoading.value ? 1 : 0,
-            background: props.color || undefined,
-            backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
-            transition: 'width 0.1s, height 0.4s, opacity 0.4s',
-            zIndex: 99,
-          },
-        },
-        slots
-      )
-  },
-})
-
-function useLoadingIndicator(opts) {
-  const progress = ref(0)
-  const isLoading = ref(false)
-  const step = computed(() => 10000 / opts.duration)
-
-  let _timer = null
-  let _throttle = null
-
-  function start() {
-    clear()
-    progress.value = 0
-    if (opts.throttle) {
-      _throttle = setTimeout(() => {
-        isLoading.value = true
-        _startTimer()
-      }, opts.throttle)
-    } else {
-      isLoading.value = true
-      _startTimer()
-    }
-  }
-  function finish() {
-    progress.value = 100
-    _hide()
-  }
-
-  function clear() {
-    clearInterval(_timer)
-    clearTimeout(_throttle)
-    _timer = null
-    _throttle = null
-  }
-
-  function _increase(num) {
-    progress.value = Math.min(100, progress.value + num)
-  }
-
-  function _hide() {
-    clear()
-    setTimeout(() => {
-      isLoading.value = false
-      setTimeout(() => {
-        progress.value = 0
-      }, 400)
-    }, 500)
-  }
-
-  function _startTimer() {
-    _timer = setInterval(() => {
-      _increase(step.value)
-    }, 100)
-  }
-
-  return {
-    progress,
-    isLoading,
-    start,
-    finish,
-    clear,
-  }
-}
diff --git a/theseus_gui/src/pages/AddInstance.vue b/theseus_gui/src/pages/AddInstance.vue
new file mode 100644
index 000000000..68d916608
--- /dev/null
+++ b/theseus_gui/src/pages/AddInstance.vue
@@ -0,0 +1,7 @@
+<script setup></script>
+
+<template>
+  <div>
+    <p>Add Instance</p>
+  </div>
+</template>
diff --git a/theseus_gui/src/pages/Index.vue b/theseus_gui/src/pages/Index.vue
index 14c523b15..89d3bf0c8 100644
--- a/theseus_gui/src/pages/Index.vue
+++ b/theseus_gui/src/pages/Index.vue
@@ -47,7 +47,7 @@ await getInstances()
 await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
 
 const unlisten = await profile_listener(async (e) => {
-  if (e.event === 'created' || e.event === 'removed') {
+  if (e.event === 'edited') {
     await getInstances()
     await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
   }
diff --git a/theseus_gui/src/store/loading.js b/theseus_gui/src/store/loading.js
deleted file mode 100644
index 379417306..000000000
--- a/theseus_gui/src/store/loading.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useLoading = defineStore('loadingStore', {
-  state: () => ({ loading: false }),
-  actions: {
-    startLoading() {
-      this.loading = true
-    },
-    stopLoading() {
-      this.loading = false
-    },
-  },
-})
diff --git a/theseus_gui/src/store/state.js b/theseus_gui/src/store/state.js
index 7b59a066f..c8dd645cd 100644
--- a/theseus_gui/src/store/state.js
+++ b/theseus_gui/src/store/state.js
@@ -1,6 +1,5 @@
 import { useSearch } from './search'
 import { useTheming } from './theme'
 import { useBreadcrumbs } from './breadcrumbs'
-import { useLoading } from './loading'
 
-export { useSearch, useTheming, useBreadcrumbs, useLoading }
+export { useSearch, useTheming, useBreadcrumbs }