diff --git a/AquaNet/src/components/StatusOverlays.svelte b/AquaNet/src/components/StatusOverlays.svelte
index 2b6d2024..7ea84310 100644
--- a/AquaNet/src/components/StatusOverlays.svelte
+++ b/AquaNet/src/components/StatusOverlays.svelte
@@ -1,87 +1,54 @@
-<!-- Svelte 4.2.11 -->
-
-<script lang="ts">
-  import { fade } from 'svelte/transition'
-  import type { ConfirmProps } from "../libs/generalTypes";
-  import { DISCORD_INVITE } from "../libs/config";
-  import Icon from "@iconify/svelte";
-  import { t } from "../libs/i18n"
-
-  // Props
-  export let confirm: ConfirmProps | null = null
-  export let error: string | null
-  export let loading: boolean = false
-</script>
-
-{#if confirm}
-  <div class="overlay" transition:fade>
-    <div>
-      <h2>{confirm.title}</h2>
-      <span>{confirm.message}</span>
-
-      <div class="actions">
-        {#if confirm.cancel}
-          <!-- Svelte LSP is very annoying here -->
-          <button on:click={() => {
-            confirm && confirm.cancel && confirm.cancel()
-
-            // Set to null
-            confirm = null
-          }}>{t('action.cancel')}</button>
-        {/if}
-        <button on:click={() => confirm && confirm.confirm()} class:error={confirm.dangerous}>{t('action.confirm')}</button>
-      </div>
-    </div>
-  </div>
-{/if}
-
-{#if error}
-  <div class="overlay" transition:fade>
-    <div>
-      <h2 class="error">{t('status.error')}</h2>
-      <span>{t('status.error.hint')}<a href={DISCORD_INVITE}>{t('status.error.hint.link')}</a></span>
-      <span>{t('status.detail', { detail: error })}</span>
-
-      <div class="actions">
-        <button on:click={() => location.reload()} class="error">
-          {t('action.refresh')}
-        </button>
-      </div>
-    </div>
-  </div>
-{/if}
-
-{#if loading && !error}
-  <div class="overlay loading" transition:fade>
-    <Icon class="icon" icon="svg-spinners:pulse-2"/>
-    <span><span>LOADING</span></span>
-  </div>
-{/if}
-
-<style lang="sass">
-  .actions
-    display: flex
-    gap: 16px
-
-    button
-      width: 100%
-
-  .loading.overlay
-    font-size: 28rem
-
-    :global(.icon)
-      opacity: 0.5
-
-    > span
-      position: absolute
-      inset: 0
-      display: flex
-      justify-content: center
-      align-items: center
-      background: transparent
-
-      letter-spacing: 20px
-      margin-left: 20px
-
-      font-size: 1.5rem
-</style>
+<!-- Svelte 4.2.11 -->
+
+<script lang="ts">
+  import { fade } from 'svelte/transition'
+  import type { ConfirmProps } from "../libs/generalTypes";
+  import { DISCORD_INVITE } from "../libs/config";
+  import { t } from "../libs/i18n"
+  import Loading from './ui/Loading.svelte';
+  import Error from './ui/Error.svelte';
+
+  // Props
+  export let confirm: ConfirmProps | null = null
+  export let error: string | null
+  export let loading: boolean = false
+</script>
+
+{#if confirm}
+  <div class="overlay" transition:fade>
+    <div>
+      <h2>{confirm.title}</h2>
+      <span>{confirm.message}</span>
+
+      <div class="actions">
+        {#if confirm.cancel}
+          <!-- Svelte LSP is very annoying here -->
+          <button on:click={() => {
+            confirm && confirm.cancel && confirm.cancel()
+
+            // Set to null
+            confirm = null
+          }}>{t('action.cancel')}</button>
+        {/if}
+        <button on:click={() => confirm && confirm.confirm()} class:error={confirm.dangerous}>{t('action.confirm')}</button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+{#if error}
+  <Error {error}/>
+{/if}
+
+{#if loading && !error}
+  <Loading/>
+{/if}
+
+<style lang="sass">
+  .actions
+    display: flex
+    gap: 16px
+
+    button
+      width: 100%
+</style>
diff --git a/AquaNet/src/components/ui/Error.svelte b/AquaNet/src/components/ui/Error.svelte
new file mode 100644
index 00000000..a3caf0d6
--- /dev/null
+++ b/AquaNet/src/components/ui/Error.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { fade } from "svelte/transition";
+  import { t } from "../../libs/i18n";
+  import { DISCORD_INVITE } from "../../libs/config";
+
+  export let error: string;
+</script>
+
+<div class="overlay" transition:fade>
+  <div>
+    <h2 class="error">{t('status.error')}</h2>
+    <span>{t('status.error.hint')}<a href={DISCORD_INVITE}>{t('status.error.hint.link')}</a></span>
+    <span>{t('status.detail', { detail: error })}</span>
+
+    <div class="actions">
+      <button on:click={() => location.reload()} class="error">
+        {t('action.refresh')}
+      </button>
+    </div>
+  </div>
+</div>
+
+<style lang="sass">
+  .actions
+    display: flex
+    gap: 16px
+
+    button
+      width: 100%
+</style>
diff --git a/AquaNet/src/components/ui/Loading.svelte b/AquaNet/src/components/ui/Loading.svelte
new file mode 100644
index 00000000..32d9328a
--- /dev/null
+++ b/AquaNet/src/components/ui/Loading.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import { fade } from 'svelte/transition'
+</script>
+
+<div class="overlay loading" transition:fade>
+  <Icon class="icon" icon="svg-spinners:pulse-2"/>
+  <span><span>LOADING</span></span>
+</div>
+
+<style lang="sass">
+.loading.overlay
+  font-size: 28rem
+
+  :global(.icon)
+    opacity: 0.5
+
+  > span
+    position: absolute
+    inset: 0
+    display: flex
+    justify-content: center
+    align-items: center
+    background: transparent
+
+    letter-spacing: 20px
+    margin-left: 20px
+
+    font-size: 1.5rem
+</style>