Update changelog for 0.9.4

Bump app version + update posthog URL
Direct World Joining (#3457 )
2025-04-26 19:28:44 -07:00 · 2025-04-26 18:14:17 -07:00 · 2025-04-26 18:09:58 -07:00 · 2025-04-25 19:41:41 -07:00 · 2025-04-26 02:35:30 +00:00 · 2025-04-25 19:31:36 +00:00
518 changed files with 24971 additions and 12032 deletions
--- a/.cargo/config.toml
+++ b/.cargo/config.toml
@@ -1,3 +1,6 @@
 # Windows has stack overflows when calling from Tauri, so we increase compiler size
 [target.'cfg(windows)']
 rustflags = ["-C", "link-args=/STACK:16777220"]
+
+[build]
+rustflags = ["--cfg", "tokio_unstable"]
--- a/.github/ISSUE_TEMPLATE/1-app-bug.yml
+++ b/.github/ISSUE_TEMPLATE/1-app-bug.yml
@@ -16,7 +16,7 @@ body:
    id: version
    attributes:
      label: What version of the Modrinth App are you using?
-      description: Find this in ⚙️ Settings (bottom right) -> About -> App version.
+      description: Find this in ⚙️ Settings (bottom right) -> After Modrinth App (bottom left)
    validations:
      required: true
  - type: dropdown
--- a/.github/assets/api_cover.png
+++ b/.github/assets/api_cover.png
--- a/.github/workflows/daedalus-docker.yml
+++ b/.github/workflows/daedalus-docker.yml
@@ -7,11 +7,13 @@ on:
    paths:
      - .github/workflows/daedalus-docker.yml
      - 'apps/daedalus_client/**'
+      - 'packages/daedalus/**'
  pull_request:
    types: [opened, synchronize]
    paths:
      - .github/workflows/daedalus-docker.yml
      - 'apps/daedalus_client/**'
+      - 'packages/daedalus/**'
  merge_group:
    types: [checks_requested]

--- a/.github/workflows/labrinth-docker.yml
+++ b/.github/workflows/labrinth-docker.yml
@@ -38,8 +38,10 @@ jobs:
      - name: Build and push
        id: docker_build
        uses: docker/build-push-action@v2
+        env:
+          SQLX_OFFLINE: true
        with:
-          context: ./apps/labrinth
+          file: ./apps/labrinth/Dockerfile
          push: ${{ github.event_name != 'pull_request' }}
          tags: ${{ steps.docker_meta.outputs.tags }}
          labels: ${{ steps.docker_meta.outputs.labels }}
--- a/.github/workflows/theseus-release.yml
+++ b/.github/workflows/theseus-release.yml
@@ -6,9 +6,11 @@ on:
    tags:
      - 'v*'
    paths:
-      - .github/workflows/app-release.yml
+      - .github/workflows/theseus-release.yml
      - 'apps/app/**'
      - 'apps/app-frontend/**'
+      - 'apps/labrinth/src/common/**'
+      - 'apps/labrinth/Cargo.toml'
      - 'packages/app-lib/**'
      - 'packages/app-macros/**'
      - 'packages/assets/**'
--- a/.idea/code.iml
+++ b/.idea/code.iml
@@ -10,9 +10,11 @@
      <sourceFolder url="file://$MODULE_DIR$/apps/labrinth/src" isTestSource="false" />
      <sourceFolder url="file://$MODULE_DIR$/apps/labrinth/tests" isTestSource="true" />
      <sourceFolder url="file://$MODULE_DIR$/packages/app-lib/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/rust-common/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/ariadne/src" isTestSource="false" />
      <excludeFolder url="file://$MODULE_DIR$/target" />
    </content>
    <orderEntry type="inheritedJdk" />
    <orderEntry type="sourceFolder" forTests="false" />
  </component>
-</module>
+</module>
--- a/Cargo.lock
+++ b/Cargo.lock
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -7,6 +7,7 @@ members = [
  './apps/labrinth',
    './apps/daedalus_client',
    './packages/daedalus',
+    './packages/ariadne',
 ]

 # Optimize for speed and reduce size on release builds
@@ -21,4 +22,4 @@ strip = true # Remove debug symbols
 opt-level = 3

 [patch.crates-io]
-wry = { git = "https://github.com/modrinth/wry", rev = "51907c6" }
+wry = { git = "https://github.com/modrinth/wry", rev = "51907c6" }
--- a/apps/app-frontend/package.json
+++ b/apps/app-frontend/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@modrinth/app-frontend",
  "private": true,
-  "version": "0.9.3",
+  "version": "0.9.4",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -16,6 +16,7 @@
    "@modrinth/ui": "workspace:*",
    "@modrinth/utils": "workspace:*",
    "@sentry/vue": "^8.27.0",
+    "@geometrically/minecraft-motd-parser": "^1.1.4",
    "@tauri-apps/api": "^2.1.1",
    "@tauri-apps/plugin-dialog": "^2.2.0",
    "@tauri-apps/plugin-os": "^2.2.0",
@@ -50,7 +51,8 @@
    "tsconfig": "workspace:*",
    "typescript": "^5.5.4",
    "vite": "^5.4.6",
-    "vue-tsc": "^2.1.6"
+    "vue-tsc": "^2.1.6",
+    "@taijased/vue-render-tracker": "^1.0.7"
  },
  "packageManager": "pnpm@9.4.0",
  "web-types": "../../web-types.json"
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -16,6 +16,7 @@ import {
  RestoreIcon,
  RightArrowIcon,
  SettingsIcon,
+  WorldIcon,
  XIcon,
 } from '@modrinth/assets'
 import { Avatar, Button, ButtonStyled, Notifications, OverflowMenu } from '@modrinth/ui'
@@ -166,11 +167,17 @@ async function setupApp() {
    `https://api.modrinth.com/appCriticalAnnouncement.json?version=${version}`,
    'criticalAnnouncements',
    true,
-  ).then((res) => {
-    if (res && res.header && res.body) {
-      criticalErrorMessage.value = res
-    }
-  })
+  )
+    .then((res) => {
+      if (res && res.header && res.body) {
+        criticalErrorMessage.value = res
+      }
+    })
+    .catch(() => {
+      console.log(
+        `No critical announcement found at https://api.modrinth.com/appCriticalAnnouncement.json?version=${version}`,
+      )
+    })

  useFetch(`https://modrinth.com/blog/news.json`, 'news', true).then((res) => {
    if (res && res.articles) {
@@ -359,7 +366,7 @@ function handleAuxClick(e) {
 <template>
  <SplashScreen v-if="!stateFailed" ref="splashScreen" data-tauri-drag-region />
  <div id="teleports"></div>
-  <div v-if="stateInitialized" class="app-grid-layout relative">
+  <div v-if="stateInitialized" class="app-grid-layout experimental-styles-within relative">
    <Suspense>
      <AppSettingsModal ref="settingsModal" />
    </Suspense>
@@ -372,6 +379,9 @@ function handleAuxClick(e) {
      <NavButton v-tooltip.right="'Home'" to="/">
        <HomeIcon />
      </NavButton>
+      <NavButton v-if="themeStore.featureFlags.worlds_tab" v-tooltip.right="'Worlds'" to="/worlds">
+        <WorldIcon />
+      </NavButton>
      <NavButton
        v-tooltip.right="'Discover content'"
        to="/browse/modpack"
@@ -473,7 +483,7 @@ function handleAuxClick(e) {
            <RunningAppBar />
          </Suspense>
        </div>
-        <section v-if="!nativeDecorations" class="window-controls">
+        <section v-if="!nativeDecorations" class="window-controls" data-tauri-drag-region-exclude>
          <Button class="titlebar-button" icon-only @click="() => getCurrentWindow().minimize()">
            <MinimizeIcon />
          </Button>
@@ -521,6 +531,16 @@ function handleAuxClick(e) {
          width: 'calc(100% - var(--right-bar-width))',
        }"
      ></div>
+      <div
+        v-if="criticalErrorMessage"
+        class="m-6 mb-0 flex flex-col border-red bg-bg-red rounded-2xl border-2 border-solid p-4 gap-1 font-semibold text-contrast"
+      >
+        <h1 class="m-0 text-lg font-extrabold">{{ criticalErrorMessage.header }}</h1>
+        <div
+          class="markdown-body text-primary"
+          v-html="renderString(criticalErrorMessage.body ?? '')"
+        ></div>
+      </div>
      <RouterView v-slot="{ Component }">
        <template v-if="Component">
          <Suspense @pending="loading.startLoading()" @resolve="loading.stopLoading()">
@@ -592,12 +612,6 @@ function handleAuxClick(e) {
        <PromotionWrapper />
      </template>
    </div>
-    <div class="view">
-      <div v-if="criticalErrorMessage" class="critical-error-banner" data-tauri-drag-region>
-        <h1>{{ criticalErrorMessage.header }}</h1>
-        <div class="markdown-body" v-html="renderString(criticalErrorMessage.body ?? '')"></div>
-      </div>
-    </div>
  </div>
  <URLConfirmModal ref="urlModal" />
  <Notifications ref="notificationsWrapper" sidebar />
@@ -700,6 +714,14 @@ function handleAuxClick(e) {
  grid-area: status;
 }

+[data-tauri-drag-region] {
+  -webkit-app-region: drag;
+}
+
+[data-tauri-drag-region-exclude] {
+  -webkit-app-region: no-drag;
+}
+
 .app-contents {
  position: absolute;
  z-index: 1;
--- a/apps/app-frontend/src/assets/font/minecraft_font.ttf
+++ b/apps/app-frontend/src/assets/font/minecraft_font.ttf
--- a/apps/app-frontend/src/assets/stylesheets/global.scss
+++ b/apps/app-frontend/src/assets/stylesheets/global.scss
@@ -2,8 +2,44 @@
@tailwind components;
@tailwind utilities;

+@font-face {
+  font-family: 'bundled-minecraft-font-mrapp';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('https://cdn.modrinth.com/fonts/minecraft/regular.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'bundled-minecraft-font-mrapp';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 400;
+  src: url('https://cdn.modrinth.com/fonts/minecraft/italic.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'bundled-minecraft-font-mrapp';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url('https://cdn.modrinth.com/fonts/minecraft/bold.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'bundled-minecraft-font-mrapp';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 600;
+  src: url('https://cdn.modrinth.com/fonts/minecraft/bold-italic.otf') format('opentype');
+}
+
+.font-minecraft {
+  font-family: 'bundled-minecraft-font-mrapp', monospace;
+}
+
 :root {
-  font-family: var(--font-standard);
+  font-family: var(--font-standard, sans-serif), sans-serif;
  color-scheme: dark;
  --view-width: calc(100% - 5rem);
  --expanded-view-width: calc(100% - 13rem);
--- a/apps/app-frontend/src/components/RowDisplay.vue
+++ b/apps/app-frontend/src/components/RowDisplay.vue
@@ -10,7 +10,6 @@ import {
  StopCircleIcon,
  ExternalIcon,
  EyeIcon,
-  ChevronRightIcon,
 } from '@modrinth/assets'
 import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 import Instance from '@/components/ui/Instance.vue'
@@ -26,6 +25,7 @@ import { trackEvent } from '@/helpers/analytics'
 import { handleSevereError } from '@/store/error.js'
 import { install as installVersion } from '@/store/install.js'
 import { openUrl } from '@tauri-apps/plugin-opener'
+import { HeadingLink } from '@modrinth/ui'

 const router = useRouter()

@@ -44,7 +44,9 @@ const props = defineProps({
 })

 const actualInstances = computed(() =>
-  props.instances.filter((x) => x && x.instances && x.instances[0]),
+  props.instances.filter(
+    (x) => (x && x.instances && x.instances[0] && x.show === undefined) || x.show,
+  ),
 )

 const modsRow = ref(null)
@@ -181,6 +183,10 @@ const maxInstancesPerRow = ref(1)
 const maxProjectsPerRow = ref(1)

 const calculateCardsPerRow = () => {
+  if (rows.value.length === 0) {
+    return
+  }
+
  // Calculate how many cards fit in one row
  const containerWidth = rows.value[0].clientWidth
  // Convert container width from pixels to rem
@@ -204,16 +210,21 @@ const calculateCardsPerRow = () => {

 const rowContainer = ref(null)
 const resizeObserver = ref(null)
+
 onMounted(() => {
  calculateCardsPerRow()
  resizeObserver.value = new ResizeObserver(calculateCardsPerRow)
-  resizeObserver.value.observe(rowContainer.value)
+  if (rowContainer.value) {
+    resizeObserver.value.observe(rowContainer.value)
+  }
  window.addEventListener('resize', calculateCardsPerRow)
 })

 onUnmounted(() => {
  window.removeEventListener('resize', calculateCardsPerRow)
-  resizeObserver.value.unobserve(rowContainer.value)
+  if (rowContainer.value) {
+    resizeObserver.value.unobserve(rowContainer.value)
+  }
 })
 </script>

@@ -227,17 +238,10 @@ onUnmounted(() => {
    @proceed="deleteProfile"
  />
  <div ref="rowContainer" class="flex flex-col gap-4">
-    <div v-for="(row, rowIndex) in actualInstances" ref="rows" :key="row.label" class="row">
-      <router-link
-        class="flex mb-3 leading-none items-center gap-1 text-primary text-lg font-bold hover:underline group"
-        :class="{ 'mt-1': rowIndex > 0 }"
-        :to="row.route"
-      >
+    <div v-for="row in actualInstances" ref="rows" :key="row.label" class="row">
+      <HeadingLink class="mt-1" :to="row.route">
        {{ row.label }}
-        <ChevronRightIcon
-          class="h-5 w-5 stroke-[3px] group-hover:translate-x-1 transition-transform group-hover:text-brand"
-        />
-      </router-link>
+      </HeadingLink>
      <section
        v-if="row.instance"
        ref="modsRow"
--- a/apps/app-frontend/src/components/ui/Breadcrumbs.vue
+++ b/apps/app-frontend/src/components/ui/Breadcrumbs.vue
@@ -19,6 +19,7 @@
          path: breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id)),
          query: breadcrumb.query,
        }"
+        class="text-primary"
        >{{
          breadcrumb.name.charAt(0) === '?'
            ? breadcrumbData.getName(breadcrumb.name.slice(1))
--- a/apps/app-frontend/src/components/ui/ErrorModal.vue
+++ b/apps/app-frontend/src/components/ui/ErrorModal.vue
@@ -1,7 +1,16 @@
 <script setup>
-import { XIcon, HammerIcon, LogInIcon, UpdatedIcon } from '@modrinth/assets'
+import {
+  CheckIcon,
+  DropdownIcon,
+  XIcon,
+  HammerIcon,
+  LogInIcon,
+  UpdatedIcon,
+  CopyIcon,
+} from '@modrinth/assets'
 import { ChatIcon } from '@/assets/icons'
-import { ref } from 'vue'
+import { ButtonStyled, Collapsible } from '@modrinth/ui'
+import { ref, computed } from 'vue'
 import { login as login_flow, set_default_user } from '@/helpers/auth.js'
 import { handleError } from '@/store/notifications.js'
 import { handleSevereError } from '@/store/error.js'
@@ -13,6 +22,7 @@ import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 const errorModal = ref()
 const error = ref()
 const closable = ref(true)
+const errorCollapsed = ref(false)

 const title = ref('An error occurred')
 const errorType = ref('unknown')
@@ -118,6 +128,26 @@ async function repairInstance() {
  }
  loadingRepair.value = false
 }
+
+const hasDebugInfo = computed(
+  () =>
+    errorType.value === 'directory_move' ||
+    errorType.value === 'minecraft_auth' ||
+    errorType.value === 'state_init' ||
+    errorType.value === 'no_loader_version',
+)
+
+const debugInfo = computed(() => error.value.message ?? error.value ?? 'No error message.')
+
+const copied = ref(false)
+
+async function copyToClipboard(text) {
+  await navigator.clipboard.writeText(text)
+  copied.value = true
+  setTimeout(() => {
+    copied.value = false
+  }, 3000)
+}
 </script>

 <template>
@@ -244,16 +274,9 @@ async function repairInstance() {
          </div>
        </template>
        <template v-else>
-          {{ error.message ?? error }}
+          {{ debugInfo }}
        </template>
-        <template
-          v-if="
-            errorType === 'directory_move' ||
-            errorType === 'minecraft_auth' ||
-            errorType === 'state_init' ||
-            errorType === 'no_loader_version'
-          "
-        >
+        <template v-if="hasDebugInfo">
          <hr />
          <p>
            If nothing is working and you need help, visit
@@ -261,16 +284,39 @@ async function repairInstance() {
            and start a chat using the widget in the bottom right and we will be more than happy to
            assist! Make sure to provide the following debug information to the agent:
          </p>
-          <details>
-            <summary>Debug information</summary>
-            {{ error.message ?? error }}
-          </details>
        </template>
      </div>
-      <div class="input-group push-right">
-        <a :href="supportLink" class="btn" @click="errorModal.hide()"><ChatIcon /> Get support</a>
-        <button v-if="closable" class="btn" @click="errorModal.hide()"><XIcon /> Close</button>
+      <div class="flex items-center gap-2">
+        <ButtonStyled>
+          <a :href="supportLink" @click="errorModal.hide()"><ChatIcon /> Get support</a>
+        </ButtonStyled>
+        <ButtonStyled v-if="closable">
+          <button @click="errorModal.hide()"><XIcon /> Close</button>
+        </ButtonStyled>
+        <ButtonStyled v-if="hasDebugInfo">
+          <button :disabled="copied" @click="copyToClipboard(debugInfo)">
+            <template v-if="copied"> <CheckIcon class="text-green" /> Copied! </template>
+            <template v-else> <CopyIcon /> Copy debug info </template>
+          </button>
+        </ButtonStyled>
      </div>
+      <template v-if="hasDebugInfo">
+        <div class="bg-button-bg rounded-xl mt-2 overflow-clip">
+          <button
+            class="flex items-center justify-between w-full bg-transparent border-0 px-4 py-3 cursor-pointer"
+            @click="errorCollapsed = !errorCollapsed"
+          >
+            <span class="text-contrast font-extrabold m-0">Debug information:</span>
+            <DropdownIcon
+              class="h-5 w-5 text-secondary transition-transform"
+              :class="{ 'rotate-180': !errorCollapsed }"
+            />
+          </button>
+          <Collapsible :collapsed="errorCollapsed">
+            <pre class="m-0 px-4 py-3 bg-bg rounded-none">{{ debugInfo }}</pre>
+          </Collapsible>
+        </div>
+      </template>
    </div>
  </ModalWrapper>
 </template>
--- a/apps/app-frontend/src/components/ui/ExportModal.vue
+++ b/apps/app-frontend/src/components/ui/ExportModal.vue
@@ -151,7 +151,7 @@ const exportPack = async () => {
          </div>
        </div>
        <div v-if="showingFiles" class="table-content">
-          <div v-for="[path, children] of folders" :key="path.name" class="table-row">
+          <div v-for="[path, children] in folders" :key="path.name" class="table-row">
            <div class="table-cell file-entry">
              <div class="file-primary">
                <Checkbox
--- a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
+++ b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
@@ -70,7 +70,7 @@ const onHide = () => {
              v-for="version in filteredVersions"
              :key="version.id"
              class="table-row with-columns selectable"
-              @click="$router.push(`/project/${$route.params.id}/version/${version.id}`)"
+              @click="$router.push(`/project/${version.project_id}/version/${version.id}`)"
            >
              <div class="table-cell table-text">
                <Button
--- a/apps/app-frontend/src/components/ui/NavButton.vue
+++ b/apps/app-frontend/src/components/ui/NavButton.vue
@@ -7,7 +7,7 @@
      'router-link-active': isPrimary && isPrimary(route),
      'subpage-active': isSubpage && isSubpage(route),
    }"
-    class="w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
+    class="w-12 h-12 text-primary rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
  >
    <slot />
  </RouterLink>
--- a/apps/app-frontend/src/components/ui/RunningAppBar.vue
+++ b/apps/app-frontend/src/components/ui/RunningAppBar.vue
@@ -14,7 +14,10 @@
    <div v-if="selectedProcess" class="status">
      <span class="circle running" />
      <div ref="profileButton" class="running-text">
-        <router-link :to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`">
+        <router-link
+          class="text-primary"
+          :to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`"
+        >
          {{ selectedProcess.profile.name }}
        </router-link>
        <div
--- a/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue
@@ -5,7 +5,7 @@ import { handleError } from '@/store/notifications'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { get } from '@/helpers/settings'
 import { edit } from '@/helpers/profile'
-import type { InstanceSettingsTabProps, AppSettings } from '../../../helpers/types'
+import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'

 const { formatMessage } = useVIntl()

@@ -114,7 +114,6 @@ const messages = defineMessages({
      <Toggle
        id="fullscreen"
        :model-value="overrideWindowSettings ? fullscreenSetting : globalSettings.force_fullscreen"
-        :checked="fullscreenSetting"
        :disabled="!overrideWindowSettings"
        @update:model-value="
          (e) => {
--- a/apps/app-frontend/src/components/ui/modal/ConfirmModalWrapper.vue
+++ b/apps/app-frontend/src/components/ui/modal/ConfirmModalWrapper.vue
@@ -41,6 +41,10 @@ const props = defineProps({
    type: Boolean,
    default: true,
  },
+  markdown: {
+    type: Boolean,
+    default: true,
+  },
 })

 const emit = defineEmits(['proceed'])
@@ -80,6 +84,7 @@ function proceed() {
    :on-hide="onModalHide"
    :noblur="!themeStore.advancedRendering"
    :danger="danger"
+    :markdown="markdown"
    @proceed="proceed"
  />
 </template>
--- a/apps/app-frontend/src/components/ui/modal/InstanceModalTitlePrefix.vue
+++ b/apps/app-frontend/src/components/ui/modal/InstanceModalTitlePrefix.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ChevronRightIcon } from '@modrinth/assets'
+import { Avatar } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import type { GameInstance } from '@/helpers/types'
+
+defineProps<{
+  instance: GameInstance
+}>()
+</script>
+<template>
+  <span class="flex items-center gap-2 text-lg font-semibold text-primary">
+    <Avatar
+      :src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
+      size="24px"
+      :tint-by="instance.path"
+    />
+    {{ instance.name }} <ChevronRightIcon />
+  </span>
+</template>
--- a/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
+++ b/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
@@ -43,7 +43,7 @@ function onModalHide() {
  if (props.showAdOnClose) {
    show_ads_window()
  }
-  props.onHide()
+  props.onHide?.()
 }
 </script>

--- a/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { Toggle, ThemeSelector, TeleportDropdownMenu } from '@modrinth/ui'
+import { TeleportDropdownMenu, ThemeSelector, Toggle } from '@modrinth/ui'
 import { useTheming } from '@/store/state'
 import { get, set } from '@/helpers/settings'
-import { watch, ref } from 'vue'
+import { ref, watch } from 'vue'
 import { getOS } from '@/helpers/utils'

 const themeStore = useTheming()
@@ -46,7 +46,6 @@ watch(
    <Toggle
      id="advanced-rendering"
      :model-value="themeStore.advancedRendering"
-      :checked="themeStore.advancedRendering"
      @update:model-value="
        (e) => {
          themeStore.advancedRendering = e
@@ -61,16 +60,7 @@ watch(
      <h2 class="m-0 text-lg font-extrabold text-contrast">Native Decorations</h2>
      <p class="m-0 mt-1">Use system window frame (app restart required).</p>
    </div>
-    <Toggle
-      id="native-decorations"
-      :model-value="settings.native_decorations"
-      :checked="settings.native_decorations"
-      @update:model-value="
-        (e) => {
-          settings.native_decorations = e
-        }
-      "
-    />
+    <Toggle id="native-decorations" v-model="settings.native_decorations" />
  </div>

  <div class="mt-4 flex items-center justify-between">
@@ -78,16 +68,7 @@ watch(
      <h2 class="m-0 text-lg font-extrabold text-contrast">Minimize launcher</h2>
      <p class="m-0 mt-1">Minimize the launcher when a Minecraft process starts.</p>
    </div>
-    <Toggle
-      id="minimize-launcher"
-      :model-value="settings.hide_on_process_start"
-      :checked="settings.hide_on_process_start"
-      @update:model-value="
-        (e) => {
-          settings.hide_on_process_start = e
-        }
-      "
-    />
+    <Toggle id="minimize-launcher" v-model="settings.hide_on_process_start" />
  </div>

  <div class="mt-4 flex items-center justify-between">
@@ -111,7 +92,6 @@ watch(
    <Toggle
      id="toggle-sidebar"
      :model-value="settings.toggle_sidebar"
-      :checked="settings.toggle_sidebar"
      @update:model-value="
        (e) => {
          settings.toggle_sidebar = e
--- a/apps/app-frontend/src/components/ui/settings/DefaultInstanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/DefaultInstanceSettings.vue
@@ -57,16 +57,7 @@ watch(
        </p>
      </div>

-      <Toggle
-        id="fullscreen"
-        :model-value="settings.force_fullscreen"
-        :checked="settings.force_fullscreen"
-        @update:model-value="
-          (e) => {
-            settings.force_fullscreen = e
-          }
-        "
-      />
+      <Toggle id="fullscreen" v-model="settings.force_fullscreen" />
    </div>

    <div class="flex items-center justify-between gap-4">
--- a/apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/FeatureFlagSettings.vue
@@ -7,7 +7,7 @@ import { get, set } from '@/helpers/settings'
 const themeStore = useTheming()

 const settings = ref(await get())
-const options = ref(['project_background', 'page_path'])
+const options = ref(['project_background', 'page_path', 'worlds_tab'])

 function getStoreValue(key: string) {
  return themeStore.featureFlags[key] ?? false
@@ -30,14 +30,13 @@ watch(
  <div v-for="option in options" :key="option" class="mt-4 flex items-center justify-between">
    <div>
      <h2 class="m-0 text-lg font-extrabold text-contrast capitalize">
-        {{ option }}
+        {{ option.replaceAll('_', ' ') }}
      </h2>
    </div>

    <Toggle
      id="advanced-rendering"
      :model-value="getStoreValue(option)"
-      :checked="getStoreValue(option)"
      @update:model-value="() => setStoreValue(option, !themeStore.featureFlags[option])"
    />
  </div>
--- a/apps/app-frontend/src/components/ui/settings/PrivacySettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/PrivacySettings.vue
@@ -30,16 +30,7 @@ watch(
        option, you opt out and ads will no longer be shown based on your interests.
      </p>
    </div>
-    <Toggle
-      id="personalized-ads"
-      :model-value="settings.personalized_ads"
-      :checked="settings.personalized_ads"
-      @update:model-value="
-        (e) => {
-          settings.personalized_ads = e
-        }
-      "
-    />
+    <Toggle id="personalized-ads" v-model="settings.personalized_ads" />
  </div>

  <div class="mt-4 flex items-center justify-between gap-4">
@@ -51,16 +42,7 @@ watch(
        longer be collected.
      </p>
    </div>
-    <Toggle
-      id="opt-out-analytics"
-      :model-value="settings.telemetry"
-      :checked="settings.telemetry"
-      @update:model-value="
-        (e) => {
-          settings.telemetry = e
-        }
-      "
-    />
+    <Toggle id="opt-out-analytics" v-model="settings.telemetry" />
  </div>

  <div class="mt-4 flex items-center justify-between gap-4">
@@ -75,10 +57,6 @@ watch(
        as those added by mods. (app restart required to take effect)
      </p>
    </div>
-    <Toggle
-      id="disable-discord-rpc"
-      v-model="settings.discord_rpc"
-      :checked="settings.discord_rpc"
-    />
+    <Toggle id="disable-discord-rpc" v-model="settings.discord_rpc" />
  </div>
 </template>
--- a/apps/app-frontend/src/components/ui/world/InstanceItem.vue
+++ b/apps/app-frontend/src/components/ui/world/InstanceItem.vue
@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import {
+  EyeIcon,
+  FolderOpenIcon,
+  MoreVerticalIcon,
+  PlayIcon,
+  SpinnerIcon,
+  StopCircleIcon,
+} from '@modrinth/assets'
+import { Avatar, ButtonStyled, commonMessages, OverflowMenu, SmartClickable } from '@modrinth/ui'
+import { useVIntl } from '@vintl/vintl'
+import { computed, nextTick, ref, onMounted, onUnmounted } from 'vue'
+import { showProfileInFolder } from '@/helpers/utils'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { useRouter } from 'vue-router'
+import type { GameInstance } from '@/helpers/types'
+import { get_project } from '@/helpers/cache'
+import { capitalizeString } from '@modrinth/utils'
+import { kill, run } from '@/helpers/profile'
+import { handleSevereError } from '@/store/error'
+import { trackEvent } from '@/helpers/analytics'
+import { get_by_profile_path } from '@/helpers/process'
+import { handleError } from '@/store/notifications'
+import { process_listener } from '@/helpers/events'
+
+const { formatMessage } = useVIntl()
+
+const router = useRouter()
+
+const emit = defineEmits<{
+  (e: 'play' | 'stop'): void
+}>()
+
+const props = defineProps<{
+  instance: GameInstance
+}>()
+
+const loadingModpack = ref(!!props.instance.linked_data)
+
+const modpack = ref()
+
+if (props.instance.linked_data) {
+  nextTick().then(async () => {
+    modpack.value = await get_project(props.instance.linked_data?.project_id, 'must_revalidate')
+    loadingModpack.value = false
+  })
+}
+
+const instanceIcon = computed(() => props.instance.icon_path)
+
+const loader = computed(() => {
+  if (props.instance.loader === 'vanilla') {
+    return 'Minecraft'
+  } else if (props.instance.loader === 'neoforge') {
+    return 'NeoForge'
+  } else {
+    return capitalizeString(props.instance.loader)
+  }
+})
+
+const loading = ref(false)
+const playing = ref(false)
+
+const play = async (event: MouseEvent) => {
+  event?.stopPropagation()
+  loading.value = true
+  await run(props.instance.path)
+    .catch((err) => handleSevereError(err, { profilePath: props.instance.path }))
+    .finally(() => {
+      trackEvent('InstancePlay', {
+        loader: props.instance.loader,
+        game_version: props.instance.game_version,
+        source: 'InstanceItem',
+      })
+    })
+  emit('play')
+  loading.value = false
+}
+
+const stop = async (event: MouseEvent) => {
+  event?.stopPropagation()
+  loading.value = true
+  await kill(props.instance.path).catch(handleError)
+  trackEvent('InstanceStop', {
+    loader: props.instance.loader,
+    game_version: props.instance.game_version,
+    source: 'InstanceItem',
+  })
+  emit('stop')
+  loading.value = false
+}
+
+const unlistenProcesses = await process_listener(async () => {
+  await checkProcess()
+})
+
+const checkProcess = async () => {
+  const runningProcesses = await get_by_profile_path(props.instance.path).catch(handleError)
+
+  playing.value = runningProcesses.length > 0
+}
+
+onMounted(() => {
+  checkProcess()
+})
+
+onUnmounted(() => {
+  unlistenProcesses()
+})
+</script>
+<template>
+  <SmartClickable>
+    <template #clickable>
+      <router-link
+        class="no-click-animation"
+        :to="`/instance/${encodeURIComponent(instance.path)}`"
+      />
+    </template>
+    <div
+      class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised rounded-xl smart-clickable:highlight-on-hover"
+    >
+      <Avatar
+        :src="instanceIcon ? convertFileSrc(instanceIcon) : undefined"
+        :tint-by="instance.path"
+        size="48px"
+      />
+      <div class="flex flex-col col-span-2 justify-between h-full">
+        <div class="flex items-center gap-2">
+          <div class="text-lg text-contrast font-bold truncate smart-clickable:underline-on-hover">
+            {{ instance.name }}
+          </div>
+        </div>
+        <div class="flex items-center gap-2 text-sm text-secondary">
+          <div
+            v-tooltip="
+              instance.last_played
+                ? dayjs(instance.last_played).format('MMMM D, YYYY [at] h:mm A')
+                : null
+            "
+            class="w-fit shrink-0"
+            :class="{ 'cursor-help smart-clickable:allow-pointer-events': instance.last_played }"
+          >
+            <template v-if="instance.last_played">
+              {{
+                formatMessage(commonMessages.playedLabel, {
+                  time: dayjs(instance.last_played).fromNow(),
+                })
+              }}
+            </template>
+            <template v-else> Not played yet </template>
+          </div>
+          •
+          <span v-if="modpack" class="flex items-center gap-1 truncate text-secondary">
+            <router-link
+              class="inline-flex items-center gap-1 truncate hover:underline text-secondary"
+              :to="`/project/${modpack.id}`"
+            >
+              <Avatar :src="modpack.icon_url" size="16px" class="shrink-0" />
+              <span class="truncate">{{ modpack.title }}</span>
+            </router-link>
+            ({{ loader }} {{ instance.game_version }})
+          </span>
+          <span v-else-if="loadingModpack" class="flex items-center gap-1 truncate text-secondary">
+            <SpinnerIcon class="animate-spin shrink-0" />
+            <span class="truncate">Loading modpack...</span>
+          </span>
+          <span v-else class="flex items-center gap-1 truncate text-secondary">
+            {{ loader }}
+            {{ instance.game_version }}
+          </span>
+        </div>
+      </div>
+      <div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
+        <ButtonStyled v-if="playing && !loading" color="red">
+          <button @click="stop">
+            <StopCircleIcon aria-hidden="true" />
+            {{ formatMessage(commonMessages.stopButton) }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled v-else>
+          <button
+            v-tooltip="playing ? 'Instance is already open' : null"
+            :disabled="playing || loading"
+            @click="play"
+          >
+            <SpinnerIcon v-if="loading" class="animate-spin" />
+            <PlayIcon v-else aria-hidden="true" />
+            {{ formatMessage(commonMessages.playButton) }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled circular type="transparent">
+          <OverflowMenu
+            :options="[
+              {
+                id: 'open-instance',
+                shown: !!instance.path,
+                action: () => router.push(encodeURI(`/instance/${instance.path}`)),
+              },
+              {
+                id: 'open-folder',
+                action: () => showProfileInFolder(instance.path),
+              },
+            ]"
+          >
+            <MoreVerticalIcon aria-hidden="true" />
+            <template #open-instance>
+              <EyeIcon aria-hidden="true" />
+              View instance
+            </template>
+            <template #open-folder>
+              <FolderOpenIcon aria-hidden="true" />
+              {{ formatMessage(commonMessages.openFolderButton) }}
+            </template>
+          </OverflowMenu>
+        </ButtonStyled>
+      </div>
+    </div>
+  </SmartClickable>
+</template>
--- a/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
+++ b/apps/app-frontend/src/components/ui/world/RecentWorldsList.vue
@@ -0,0 +1,275 @@
+<script setup lang="ts">
+import {
+  type ServerWorld,
+  type ServerData,
+  type WorldWithProfile,
+  get_recent_worlds,
+  getWorldIdentifier,
+  get_profile_protocol_version,
+  refreshServerData,
+  start_join_server,
+  start_join_singleplayer_world,
+} from '@/helpers/worlds.ts'
+import { HeadingLink, GAME_MODES } from '@modrinth/ui'
+import WorldItem from '@/components/ui/world/WorldItem.vue'
+import InstanceItem from '@/components/ui/world/InstanceItem.vue'
+import { watch, onMounted, onUnmounted, ref } from 'vue'
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
+import { useTheming } from '@/store/theme'
+import { kill } from '@/helpers/profile'
+import { handleError } from '@/store/notifications'
+import { trackEvent } from '@/helpers/analytics'
+import { process_listener, profile_listener } from '@/helpers/events'
+import { get_all } from '@/helpers/process'
+import type { GameInstance } from '@/helpers/types'
+
+const props = defineProps<{
+  recentInstances: GameInstance[]
+}>()
+
+const theme = useTheming()
+
+const jumpBackInItems = ref<JumpBackInItem[]>([])
+const serverData = ref<Record<string, ServerData>>({})
+const protocolVersions = ref<Record<string, number | null>>({})
+
+const MIN_JUMP_BACK_IN = 3
+const MAX_JUMP_BACK_IN = 6
+const TWO_WEEKS_AGO = dayjs().subtract(14, 'day')
+
+type BaseJumpBackInItem = {
+  last_played: Dayjs
+  instance: GameInstance
+}
+
+type InstanceJumpBackInItem = BaseJumpBackInItem & {
+  type: 'instance'
+}
+
+type WorldJumpBackInItem = BaseJumpBackInItem & {
+  type: 'world'
+  world: WorldWithProfile
+}
+
+type JumpBackInItem = InstanceJumpBackInItem | WorldJumpBackInItem
+
+watch(props.recentInstances, async () => {
+  await populateJumpBackIn().catch(() => {
+    console.error('Failed to populate jump back in')
+  })
+})
+
+await populateJumpBackIn().catch(() => {
+  console.error('Failed to populate jump back in')
+})
+
+async function populateJumpBackIn() {
+  console.info('Repopulating jump back in...')
+  const worlds = await get_recent_worlds(MAX_JUMP_BACK_IN)
+
+  const worldItems: WorldJumpBackInItem[] = []
+  worlds.forEach((world) => {
+    const instance = props.recentInstances.find((instance) => instance.path === world.profile)
+
+    if (!instance || !world.last_played) {
+      return
+    }
+
+    worldItems.push({
+      type: 'world',
+      last_played: dayjs(world.last_played),
+      world: world,
+      instance: instance,
+    })
+  })
+
+  const servers: {
+    instancePath: string
+    address: string
+  }[] = worldItems
+    .filter((item) => item.world.type === 'server' && item.instance)
+    .map((item) => ({
+      instancePath: item.instance.path,
+      address: (item.world as ServerWorld).address,
+    }))
+
+  // fetch protocol versions for all unique MC versions with server worlds
+  const uniqueServerInstances = new Set<string>(servers.map((x) => x.instancePath))
+  await Promise.all(
+    [...uniqueServerInstances].map((path) => {
+      get_profile_protocol_version(path)
+        .then((protoVer) => (protocolVersions.value[path] = protoVer))
+        .catch(() => {
+          console.error(`Failed to get profile protocol for: ${path} `)
+        })
+    }),
+  )
+
+  // initialize server data
+  servers.forEach(({ address }) => {
+    if (!serverData.value[address]) {
+      serverData.value[address] = {
+        refreshing: true,
+      }
+    }
+  })
+
+  // fetch each server's data
+  await Promise.all(
+    servers.map(({ instancePath, address }) =>
+      refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address),
+    ),
+  )
+
+  const instanceItems: InstanceJumpBackInItem[] = []
+  props.recentInstances.forEach((instance) => {
+    if (worldItems.some((item) => item.instance.path === instance.path) || !instance.last_played) {
+      return
+    }
+
+    instanceItems.push({
+      type: 'instance',
+      last_played: dayjs(instance.last_played),
+      instance: instance,
+    })
+  })
+
+  const items: JumpBackInItem[] = [...worldItems, ...instanceItems]
+  items.sort((a, b) => dayjs(b.last_played).diff(dayjs(a.last_played)))
+  jumpBackInItems.value = items.filter(
+    (item, index) => index < MIN_JUMP_BACK_IN || item.last_played.isAfter(TWO_WEEKS_AGO),
+  )
+}
+
+async function refreshServer(address: string, instancePath: string) {
+  await refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address)
+}
+
+async function joinWorld(world: WorldWithProfile) {
+  console.log(`Joining world ${getWorldIdentifier(world)}`)
+  if (world.type === 'server') {
+    await start_join_server(world.profile, world.address).catch(handleError)
+  } else if (world.type === 'singleplayer') {
+    await start_join_singleplayer_world(world.profile, world.path).catch(handleError)
+  }
+}
+
+async function stopInstance(path: string) {
+  await kill(path).catch(handleError)
+  trackEvent('InstanceStop', {
+    source: 'RecentWorldsList',
+  })
+}
+
+const currentProfile = ref<string>()
+const currentWorld = ref<string>()
+
+const unlistenProcesses = await process_listener(async () => {
+  await checkProcesses()
+})
+
+const unlistenProfiles = await profile_listener(async () => {
+  await populateJumpBackIn().catch(() => {
+    console.error('Failed to populate jump back in')
+  })
+})
+
+const runningInstances = ref<string[]>([])
+
+type ProcessMetadata = {
+  uuid: string
+  profile_path: string
+  start_time: string
+}
+
+const checkProcesses = async () => {
+  const runningProcesses: ProcessMetadata[] = await get_all().catch(handleError)
+
+  const runningPaths = runningProcesses.map((x) => x.profile_path)
+
+  const stoppedInstances = runningInstances.value.filter((x) => !runningPaths.includes(x))
+  if (currentProfile.value && stoppedInstances.includes(currentProfile.value)) {
+    currentProfile.value = undefined
+    currentWorld.value = undefined
+  }
+
+  runningInstances.value = runningPaths
+}
+
+onMounted(() => {
+  checkProcesses()
+})
+
+onUnmounted(() => {
+  unlistenProcesses()
+  unlistenProfiles()
+})
+</script>
+
+<template>
+  <div v-if="jumpBackInItems.length > 0" class="flex flex-col gap-2">
+    <HeadingLink
+      v-if="(theme.featureFlags as Record<string, boolean>)['worlds_tab']"
+      to="/worlds"
+      class="mt-1"
+    >
+      Jump back in
+    </HeadingLink>
+    <span
+      v-else
+      class="flex mt-1 mb-3 leading-none items-center gap-1 text-primary text-lg font-bold"
+    >
+      Jump back in
+    </span>
+    <div class="flex flex-col w-full gap-2">
+      <template
+        v-for="item in jumpBackInItems"
+        :key="`${item.instance.path}-${item.type === 'world' ? getWorldIdentifier(item.world) : 'instance'}`"
+      >
+        <WorldItem
+          v-if="item.type === 'world'"
+          :world="item.world"
+          :playing-instance="runningInstances.includes(item.instance.path)"
+          :playing-world="
+            currentProfile === item.instance.path && currentWorld === getWorldIdentifier(item.world)
+          "
+          :refreshing="
+            item.world.type === 'server'
+              ? serverData[item.world.address].refreshing && !serverData[item.world.address].status
+              : undefined
+          "
+          supports-quick-play
+          :server-status="
+            item.world.type === 'server' ? serverData[item.world.address].status : undefined
+          "
+          :rendered-motd="
+            item.world.type === 'server' ? serverData[item.world.address].renderedMotd : undefined
+          "
+          :current-protocol="protocolVersions[item.instance.game_version]"
+          :game-mode="
+            item.world.type === 'singleplayer' ? GAME_MODES[item.world.game_mode] : undefined
+          "
+          :instance-path="item.instance.path"
+          :instance-name="item.instance.name"
+          :instance-icon="item.instance.icon_path"
+          @refresh="
+            () =>
+              item.world.type === 'server'
+                ? refreshServer(item.world.address, item.instance.path)
+                : {}
+          "
+          @play="
+            () => {
+              currentProfile = item.instance.path
+              currentWorld = getWorldIdentifier(item.world)
+              joinWorld(item.world)
+            }
+          "
+          @stop="() => stopInstance(item.instance.path)"
+        />
+        <InstanceItem v-else :instance="item.instance" />
+      </template>
+    </div>
+  </div>
+</template>
--- a/apps/app-frontend/src/components/ui/world/WorldItem.vue
+++ b/apps/app-frontend/src/components/ui/world/WorldItem.vue
@@ -0,0 +1,470 @@
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import type { ServerStatus, ServerWorld, World } from '@/helpers/worlds.ts'
+import { getWorldIdentifier, showWorldInFolder } from '@/helpers/worlds.ts'
+import { formatNumber } from '@modrinth/utils'
+import {
+  IssuesIcon,
+  EyeIcon,
+  ClipboardCopyIcon,
+  EditIcon,
+  FolderOpenIcon,
+  MoreVerticalIcon,
+  NoSignalIcon,
+  PlayIcon,
+  SignalIcon,
+  SkullIcon,
+  SpinnerIcon,
+  StopCircleIcon,
+  TrashIcon,
+  UpdatedIcon,
+  UserIcon,
+} from '@modrinth/assets'
+import { Avatar, ButtonStyled, commonMessages, OverflowMenu, SmartClickable } from '@modrinth/ui'
+import type { MessageDescriptor } from '@vintl/vintl'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import type { Component } from 'vue'
+import { computed } from 'vue'
+import { copyToClipboard } from '@/helpers/utils'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { useRouter } from 'vue-router'
+import { Tooltip } from 'floating-vue'
+
+const { formatMessage } = useVIntl()
+
+const router = useRouter()
+
+const emit = defineEmits<{
+  (e: 'play' | 'stop' | 'refresh' | 'edit' | 'delete'): void
+}>()
+
+const props = withDefaults(
+  defineProps<{
+    world: World
+    playingInstance?: boolean
+    playingWorld?: boolean
+    startingInstance?: boolean
+    supportsQuickPlay?: boolean
+    currentProtocol?: number | null
+    highlighted?: boolean
+
+    // Server only
+    refreshing?: boolean
+    serverStatus?: ServerStatus
+    renderedMotd?: string
+
+    // Singleplayer only
+    gameMode?: {
+      icon: Component
+      message: MessageDescriptor
+    }
+
+    // Instance
+    instancePath?: string
+    instanceName?: string
+    instanceIcon?: string
+  }>(),
+  {
+    playingInstance: false,
+    playingWorld: false,
+    startingInstance: false,
+    supportsQuickPlay: false,
+
+    refreshing: false,
+    serverStatus: undefined,
+    renderedMotd: undefined,
+
+    gameMode: undefined,
+
+    instancePath: undefined,
+    instanceName: undefined,
+    instanceIcon: undefined,
+  },
+)
+
+const playingOtherWorld = computed(() => props.playingInstance && !props.playingWorld)
+const hasPlayersTooltip = computed(
+  () => !!props.serverStatus?.players?.sample && props.serverStatus.players?.sample?.length > 0,
+)
+const serverIncompatible = computed(
+  () =>
+    !!props.serverStatus &&
+    !!props.serverStatus.version?.protocol &&
+    !!props.currentProtocol &&
+    props.serverStatus.version.protocol !== props.currentProtocol,
+)
+
+function getPingLevel(ping: number) {
+  if (ping < 150) {
+    return 5
+  } else if (ping < 300) {
+    return 4
+  } else if (ping < 600) {
+    return 3
+  } else if (ping < 1000) {
+    return 2
+  } else {
+    return 1
+  }
+}
+
+const locked = computed(() => props.world.type === 'singleplayer' && props.world.locked)
+
+const messages = defineMessages({
+  hardcore: {
+    id: 'instance.worlds.hardcore',
+    defaultMessage: 'Hardcore mode',
+  },
+  cantConnect: {
+    id: 'instance.worlds.cant_connect',
+    defaultMessage: "Can't connect to server",
+  },
+  aMinecraftServer: {
+    id: 'instance.worlds.a_minecraft_server',
+    defaultMessage: 'A Minecraft Server',
+  },
+  noQuickPlay: {
+    id: 'instance.worlds.no_quick_play',
+    defaultMessage: 'You can only jump straight into worlds on Minecraft 1.20+',
+  },
+  gameAlreadyOpen: {
+    id: 'instance.worlds.game_already_open',
+    defaultMessage: 'Instance is already open',
+  },
+  copyAddress: {
+    id: 'instance.worlds.copy_address',
+    defaultMessage: 'Copy address',
+  },
+  viewInstance: {
+    id: 'instance.worlds.view_instance',
+    defaultMessage: 'View instance',
+  },
+  playAnyway: {
+    id: 'instance.worlds.play_anyway',
+    defaultMessage: 'Play anyway',
+  },
+  worldInUse: {
+    id: 'instance.worlds.world_in_use',
+    defaultMessage: 'World is in use',
+  },
+})
+</script>
+<template>
+  <SmartClickable>
+    <template v-if="instancePath" #clickable>
+      <router-link
+        class="no-click-animation"
+        :to="`/instance/${encodeURIComponent(instancePath)}/worlds?highlight=${encodeURIComponent(getWorldIdentifier(world))}`"
+      />
+    </template>
+    <div
+      class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised smart-clickable:highlight-on-hover rounded-xl"
+      :class="{
+        'world-item-highlighted': highlighted,
+      }"
+    >
+      <Avatar
+        :src="
+          world.type === 'server' && serverStatus ? serverStatus.favicon ?? world.icon : world.icon
+        "
+        size="48px"
+      />
+      <div class="flex flex-col justify-between h-full">
+        <div class="flex items-center gap-2">
+          <div class="text-lg text-contrast font-bold truncate smart-clickable:underline-on-hover">
+            {{ world.name }}
+          </div>
+          <div
+            v-if="world.type === 'singleplayer'"
+            class="text-sm text-secondary flex items-center gap-1 font-semibold"
+          >
+            <UserIcon
+              aria-hidden="true"
+              class="h-4 w-4 text-secondary shrink-0"
+              stroke-width="3px"
+            />
+            {{ formatMessage(commonMessages.singleplayerLabel) }}
+          </div>
+          <div
+            v-else-if="world.type === 'server'"
+            class="text-sm text-secondary flex items-center gap-1 font-semibold flex-nowrap whitespace-nowrap"
+          >
+            <template v-if="refreshing">
+              <SpinnerIcon aria-hidden="true" class="animate-spin shrink-0" />
+              Loading...
+            </template>
+            <template v-else-if="serverStatus">
+              <template v-if="serverIncompatible">
+                <IssuesIcon class="shrink-0 text-orange" aria-hidden="true" />
+                <span class="text-orange">
+                  Incompatible version {{ serverStatus.version?.name }}
+                </span>
+              </template>
+              <template v-else>
+                <SignalIcon
+                  v-tooltip="serverStatus ? `${serverStatus.ping}ms` : null"
+                  aria-hidden="true"
+                  :style="`--_signal-${getPingLevel(serverStatus.ping || 0)}: var(--color-green)`"
+                  stroke-width="3px"
+                  class="shrink-0"
+                  :class="{
+                    'smart-clickable:allow-pointer-events': serverStatus,
+                  }"
+                />
+                <Tooltip :disabled="!hasPlayersTooltip">
+                  <span :class="{ 'cursor-help': hasPlayersTooltip }">
+                    {{ formatNumber(serverStatus.players?.online, false) }} online
+                  </span>
+                  <template #popper>
+                    <div class="flex flex-col gap-1">
+                      <span v-for="player in serverStatus.players?.sample" :key="player.name">
+                        {{ player.name }}
+                      </span>
+                    </div>
+                  </template>
+                </Tooltip>
+              </template>
+            </template>
+            <template v-else>
+              <NoSignalIcon aria-hidden="true" stroke-width="3px" class="shrink-0" /> Offline
+            </template>
+          </div>
+        </div>
+        <div class="flex items-center gap-2 text-sm text-secondary">
+          <div
+            v-tooltip="
+              world.last_played ? dayjs(world.last_played).format('MMMM D, YYYY [at] h:mm A') : null
+            "
+            class="w-fit shrink-0"
+            :class="{ 'cursor-help smart-clickable:allow-pointer-events': world.last_played }"
+          >
+            <template v-if="world.last_played">
+              {{
+                formatMessage(commonMessages.playedLabel, {
+                  time: dayjs(world.last_played).fromNow(),
+                })
+              }}
+            </template>
+            <template v-else> Not played yet </template>
+          </div>
+          <template v-if="instancePath">
+            •
+            <router-link
+              class="flex items-center gap-1 truncate hover:underline text-secondary smart-clickable:allow-pointer-events"
+              :to="`/instance/${instancePath}`"
+            >
+              <Avatar
+                :src="instanceIcon ? convertFileSrc(instanceIcon) : undefined"
+                size="16px"
+                :tint-by="instancePath"
+                class="shrink-0"
+              />
+              <span class="truncate">{{ instanceName }}</span>
+            </router-link>
+          </template>
+        </div>
+      </div>
+      <div
+        class="font-semibold flex items-center gap-1 justify-center text-center"
+        :class="world.type === 'singleplayer' && world.hardcore ? `text-red` : 'text-secondary'"
+      >
+        <template v-if="world.type === 'server'">
+          <template v-if="refreshing">
+            <SpinnerIcon aria-hidden="true" class="animate-spin" />
+            {{ formatMessage(commonMessages.loadingLabel) }}
+          </template>
+          <div
+            v-else-if="renderedMotd"
+            class="motd-renderer font-normal font-minecraft line-clamp-2 text-secondary leading-5"
+            v-html="renderedMotd"
+          />
+          <div v-else-if="!serverStatus" class="font-normal font-minecraft text-red leading-5">
+            {{ formatMessage(messages.cantConnect) }}
+          </div>
+          <div v-else class="font-normal font-minecraft text-secondary leading-5">
+            {{ formatMessage(messages.aMinecraftServer) }}
+          </div>
+        </template>
+        <template v-else-if="world.type === 'singleplayer' && gameMode">
+          <template v-if="world.hardcore">
+            <SkullIcon aria-hidden="true" class="h-4 w-4 shrink-0" />
+            {{ formatMessage(messages.hardcore) }}
+          </template>
+          <template v-else>
+            <component :is="gameMode.icon" aria-hidden="true" class="h-4 w-4 shrink-0" />
+            {{ formatMessage(gameMode.message) }}
+          </template>
+        </template>
+      </div>
+      <div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
+        <template v-if="world.type === 'singleplayer' || serverStatus">
+          <ButtonStyled
+            v-if="(playingWorld || (locked && playingInstance)) && !startingInstance"
+            color="red"
+          >
+            <button @click="emit('stop')">
+              <StopCircleIcon aria-hidden="true" />
+              {{ formatMessage(commonMessages.stopButton) }}
+            </button>
+          </ButtonStyled>
+          <ButtonStyled v-else>
+            <button
+              v-tooltip="
+                serverIncompatible
+                  ? 'Server is incompatible'
+                  : !supportsQuickPlay
+                    ? formatMessage(messages.noQuickPlay)
+                    : playingOtherWorld || locked
+                      ? formatMessage(messages.gameAlreadyOpen)
+                      : null
+              "
+              :disabled="!supportsQuickPlay || playingOtherWorld || startingInstance"
+              @click="emit('play')"
+            >
+              <SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
+              <PlayIcon v-else aria-hidden="true" />
+              {{ formatMessage(commonMessages.playButton) }}
+            </button>
+          </ButtonStyled>
+        </template>
+        <ButtonStyled v-else>
+          <button class="invisible">
+            <PlayIcon aria-hidden="true" />
+            {{ formatMessage(commonMessages.playButton) }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled circular type="transparent">
+          <OverflowMenu
+            :options="[
+              {
+                id: 'play-anyway',
+                shown: serverIncompatible && !playingInstance && supportsQuickPlay,
+                action: () => emit('play'),
+              },
+              {
+                id: 'open-instance',
+                shown: !!instancePath,
+                action: () => router.push(encodeURI(`/instance/${instancePath}/worlds`)),
+              },
+              {
+                id: 'refresh',
+                shown: world.type === 'server',
+                action: () => emit('refresh'),
+              },
+              {
+                id: 'copy-address',
+                shown: world.type === 'server',
+                action: () => copyToClipboard((world as ServerWorld).address),
+              },
+              {
+                id: 'edit',
+                action: () => emit('edit'),
+                shown: !instancePath,
+                disabled: locked,
+                tooltip: locked ? formatMessage(messages.worldInUse) : undefined,
+              },
+              {
+                id: 'open-folder',
+                shown: world.type === 'singleplayer',
+                action: () =>
+                  world.type === 'singleplayer' ? showWorldInFolder(instancePath, world.path) : {},
+              },
+              {
+                divider: true,
+                shown: !instancePath,
+              },
+              {
+                id: 'delete',
+                color: 'red',
+                hoverFilled: true,
+                action: () => emit('delete'),
+                shown: !instancePath,
+                disabled: locked,
+                tooltip: locked ? formatMessage(messages.worldInUse) : undefined,
+              },
+            ]"
+          >
+            <MoreVerticalIcon aria-hidden="true" />
+            <template #play-anyway>
+              <PlayIcon aria-hidden="true" />
+              {{ formatMessage(messages.playAnyway) }}
+            </template>
+            <template #open-instance>
+              <EyeIcon aria-hidden="true" />
+              {{ formatMessage(messages.viewInstance) }}
+            </template>
+            <template #edit>
+              <EditIcon aria-hidden="true" /> {{ formatMessage(commonMessages.editButton) }}
+            </template>
+            <template #open-folder>
+              <FolderOpenIcon aria-hidden="true" />
+              {{ formatMessage(commonMessages.openFolderButton) }}
+            </template>
+            <template #copy-address>
+              <ClipboardCopyIcon aria-hidden="true" /> {{ formatMessage(messages.copyAddress) }}
+            </template>
+            <template #refresh>
+              <UpdatedIcon aria-hidden="true" /> {{ formatMessage(commonMessages.refreshButton) }}
+            </template>
+            <template #delete>
+              <TrashIcon aria-hidden="true" />
+              {{
+                formatMessage(
+                  world.type === 'server'
+                    ? commonMessages.removeButton
+                    : commonMessages.deleteLabel,
+                )
+              }}
+            </template>
+          </OverflowMenu>
+        </ButtonStyled>
+      </div>
+    </div>
+  </SmartClickable>
+</template>
+<style scoped lang="scss">
+.world-item-highlighted {
+  position: relative;
+  animation: fade-highlight 4s ease-out;
+  filter: brightness(1);
+
+  &::before {
+    @apply rounded-xl inset-0 absolute;
+
+    animation: fade-opacity 4s ease-out;
+
+    content: '';
+    box-shadow: 0 0 8px 2px var(--color-brand);
+    border: 1.5px solid var(--color-brand);
+    opacity: 0;
+  }
+}
+
+@keyframes fade-highlight {
+  0% {
+    filter: brightness(1.25);
+  }
+  75% {
+    filter: brightness(1.25);
+  }
+  100% {
+    filter: brightness(1);
+  }
+}
+
+@keyframes fade-opacity {
+  0% {
+    opacity: 0.5;
+  }
+  75% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.light-mode .motd-renderer {
+  filter: brightness(0.75);
+}
+</style>
--- a/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, commonMessages } from '@modrinth/ui'
+import { ref } from 'vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import type { GameInstance } from '@/helpers/types'
+import InstanceModalTitlePrefix from '@/components/ui/modal/InstanceModalTitlePrefix.vue'
+import { add_server_to_profile, type ServerPackStatus, type ServerWorld } from '@/helpers/worlds.ts'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { handleError } from '@/store/notifications'
+import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
+
+const { formatMessage } = useVIntl()
+
+const emit = defineEmits<{
+  submit: [server: ServerWorld, play: boolean]
+}>()
+
+const props = defineProps<{
+  instance: GameInstance
+}>()
+
+const modal = ref()
+
+const name = ref()
+const address = ref()
+const resourcePack = ref<ServerPackStatus>('enabled')
+
+async function addServer(play: boolean) {
+  const serverName = name.value ? name.value : address.value
+  const resourcePackStatus = resourcePack.value
+  const index =
+    (await add_server_to_profile(
+      props.instance.path,
+      serverName,
+      address.value,
+      resourcePackStatus,
+    ).catch(handleError)) ?? 0
+  emit(
+    'submit',
+    {
+      name: serverName,
+      type: 'server',
+      index,
+      address: address.value,
+      pack_status: resourcePackStatus,
+    },
+    play,
+  )
+  hide()
+}
+
+function show() {
+  name.value = ''
+  address.value = ''
+  resourcePack.value = 'enabled'
+  modal.value.show()
+}
+
+function hide() {
+  modal.value.hide()
+}
+
+const messages = defineMessages({
+  title: {
+    id: 'instance.add-server.title',
+    defaultMessage: 'Add a server',
+  },
+  addServer: {
+    id: 'instance.add-server.add-server',
+    defaultMessage: 'Add server',
+  },
+  addAndPlay: {
+    id: 'instance.add-server.add-and-play',
+    defaultMessage: 'Add and play',
+  },
+})
+
+defineExpose({ show, hide })
+</script>
+<template>
+  <ModalWrapper ref="modal">
+    <template #title>
+      <span class="flex items-center gap-2 text-lg font-semibold text-primary">
+        <InstanceModalTitlePrefix :instance="instance" />
+        <span class="font-extrabold text-contrast">{{ formatMessage(messages.title) }}</span>
+      </span>
+    </template>
+    <ServerModalBody
+      v-model:name="name"
+      v-model:address="address"
+      v-model:resource-pack="resourcePack"
+    />
+    <div class="flex gap-2 mt-4">
+      <ButtonStyled color="brand">
+        <button :disabled="!address" @click="addServer(true)">
+          <PlayIcon />
+          {{ formatMessage(messages.addAndPlay) }}
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button :disabled="!address" @click="addServer(false)">
+          <PlusIcon />
+          {{ formatMessage(messages.addServer) }}
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button @click="hide()">
+          <XIcon />
+          {{ formatMessage(commonMessages.cancelButton) }}
+        </button>
+      </ButtonStyled>
+    </div>
+  </ModalWrapper>
+</template>
--- a/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { SaveIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, commonMessages } from '@modrinth/ui'
+import { ref } from 'vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import type { GameInstance } from '@/helpers/types'
+import { edit_server_in_profile, type ServerWorld } from '@/helpers/worlds.ts'
+import { defineMessage, useVIntl } from '@vintl/vintl'
+import { handleError } from '@/store/notifications'
+import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
+
+const { formatMessage } = useVIntl()
+
+const emit = defineEmits<{
+  submit: [server: ServerWorld]
+}>()
+
+const props = defineProps<{
+  instance: GameInstance
+}>()
+
+const modal = ref()
+
+const name = ref()
+const address = ref()
+const resourcePack = ref('enabled')
+const index = ref()
+
+async function saveServer() {
+  const serverName = name.value ? name.value : address.value
+  const resourcePackStatus = resourcePack.value
+  await edit_server_in_profile(
+    props.instance.path,
+    index.value,
+    serverName,
+    address.value,
+    resourcePackStatus,
+  ).catch(handleError)
+  emit('submit', {
+    name: serverName,
+    type: 'server',
+    index: index.value,
+    address: address.value,
+    pack_status: resourcePackStatus,
+  })
+  hide()
+}
+
+function show(server: ServerWorld) {
+  name.value = server.name
+  address.value = server.address
+  resourcePack.value = server.pack_status
+  index.value = server.index
+  modal.value.show()
+}
+
+function hide() {
+  modal.value.hide()
+}
+
+defineExpose({ show })
+
+const titleMessage = defineMessage({
+  id: 'instance.edit-server.title',
+  defaultMessage: 'Edit server',
+})
+</script>
+<template>
+  <ModalWrapper ref="modal">
+    <template #title>
+      <span class="font-extrabold text-lg text-contrast">{{ formatMessage(titleMessage) }}</span>
+    </template>
+    <ServerModalBody
+      v-model:name="name"
+      v-model:address="address"
+      v-model:resource-pack="resourcePack"
+    />
+    <div class="flex gap-2 mt-4">
+      <ButtonStyled color="brand">
+        <button :disabled="!address" @click="saveServer">
+          <SaveIcon />
+          {{ formatMessage(commonMessages.saveChangesButton) }}
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button @click="hide()">
+          <XIcon />
+          {{ formatMessage(commonMessages.cancelButton) }}
+        </button>
+      </ButtonStyled>
+    </div>
+  </ModalWrapper>
+</template>
--- a/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { ChevronRightIcon, SaveIcon, XIcon, UndoIcon } from '@modrinth/assets'
+import { Avatar, ButtonStyled, commonMessages } from '@modrinth/ui'
+import { ref } from 'vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import type { GameInstance } from '@/helpers/types'
+import type { SingleplayerWorld } from '@/helpers/worlds.ts'
+import { rename_world, reset_world_icon } from '@/helpers/worlds.ts'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { handleError } from '@/store/notifications'
+
+const { formatMessage } = useVIntl()
+
+const emit = defineEmits<{
+  submit: [path: string, name: string, removeIcon: boolean]
+}>()
+
+const props = defineProps<{
+  instance: GameInstance
+}>()
+
+const modal = ref()
+
+const icon = ref()
+const name = ref()
+const path = ref()
+const removeIcon = ref(false)
+
+async function saveWorld() {
+  await rename_world(props.instance.path, path.value, name.value).catch(handleError)
+
+  if (removeIcon.value) {
+    await reset_world_icon(props.instance.path, path.value).catch(handleError)
+  }
+
+  emit('submit', path.value, name.value, removeIcon.value)
+  hide()
+}
+
+function show(world: SingleplayerWorld) {
+  name.value = world.name
+  path.value = world.path
+  icon.value = world.icon
+  modal.value.show()
+}
+
+function hide() {
+  modal.value.hide()
+}
+
+defineExpose({ show })
+
+const messages = defineMessages({
+  title: {
+    id: 'instance.edit-world.title',
+    defaultMessage: 'Edit world',
+  },
+  name: {
+    id: 'instance.edit-world.name',
+    defaultMessage: 'Name',
+  },
+  placeholderName: {
+    id: 'instance.edit-world.placeholder-name',
+    defaultMessage: 'Minecraft World',
+  },
+  resetIcon: {
+    id: 'instance.edit-world.reset-icon',
+    defaultMessage: 'Reset icon',
+  },
+})
+</script>
+<template>
+  <ModalWrapper ref="modal">
+    <template #title>
+      <Avatar :src="removeIcon || !icon ? undefined : icon" size="24px" />
+      {{ instance.name }} <ChevronRightIcon />
+      <span class="font-extrabold text-lg text-contrast">{{ formatMessage(messages.title) }}</span>
+    </template>
+    <div class="w-[450px]">
+      <h2 class="text-lg font-extrabold text-contrast mt-0 mb-1">
+        {{ formatMessage(messages.name) }}
+      </h2>
+      <input
+        v-model="name"
+        type="text"
+        :placeholder="formatMessage(messages.placeholderName)"
+        class="w-full"
+        autocomplete="off"
+      />
+    </div>
+    <div class="flex gap-2 mt-4">
+      <ButtonStyled color="brand">
+        <button @click="saveWorld">
+          <SaveIcon />
+          {{ formatMessage(commonMessages.saveChangesButton) }}
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button :disabled="removeIcon || !icon" @click="removeIcon = true">
+          <UndoIcon />
+          {{ formatMessage(messages.resetIcon) }}
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button @click="hide()">
+          <XIcon />
+          {{ formatMessage(commonMessages.cancelButton) }}
+        </button>
+      </ButtonStyled>
+    </div>
+  </ModalWrapper>
+</template>
--- a/apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { TeleportDropdownMenu } from '@modrinth/ui'
+import type { ServerPackStatus } from '@/helpers/worlds.ts'
+import { type MessageDescriptor, defineMessages, useVIntl } from '@vintl/vintl'
+
+const { formatMessage } = useVIntl()
+
+const name = defineModel<string>('name')
+const address = defineModel<string>('address')
+const resourcePack = defineModel<ServerPackStatus>('resourcePack')
+
+const resourcePackOptions: ServerPackStatus[] = ['enabled', 'prompt', 'disabled']
+
+const resourcePackOptionMessages: Record<ServerPackStatus, MessageDescriptor> = defineMessages({
+  enabled: {
+    id: 'instance.add-server.resource-pack.enabled',
+    defaultMessage: 'Enabled',
+  },
+  prompt: {
+    id: 'instance.add-server.resource-pack.prompt',
+    defaultMessage: 'Prompt',
+  },
+  disabled: {
+    id: 'instance.add-server.resource-pack.disabled',
+    defaultMessage: 'Disabled',
+  },
+})
+
+const messages = defineMessages({
+  name: {
+    id: 'instance.server-modal.name',
+    defaultMessage: 'Name',
+  },
+  address: {
+    id: 'instance.server-modal.address',
+    defaultMessage: 'Address',
+  },
+  resourcePack: {
+    id: 'instance.server-modal.resource-pack',
+    defaultMessage: 'Resource pack',
+  },
+  placeholderName: {
+    id: 'instance.server-modal.placeholder-name',
+    defaultMessage: 'Minecraft Server',
+  },
+})
+
+defineExpose({ resourcePackOptions })
+</script>
+<template>
+  <div class="w-[450px]">
+    <h2 class="text-lg font-extrabold text-contrast mt-0 mb-1">
+      {{ formatMessage(messages.name) }}
+    </h2>
+    <input
+      v-model="name"
+      type="text"
+      :placeholder="formatMessage(messages.placeholderName)"
+      class="w-full"
+      autocomplete="off"
+    />
+    <h2 class="text-lg font-extrabold text-contrast mt-3 mb-1">
+      {{ formatMessage(messages.address) }}
+    </h2>
+    <input
+      v-model="address"
+      type="text"
+      placeholder="example.modrinth.gg"
+      class="w-full"
+      autocomplete="off"
+    />
+    <h2 class="text-lg font-extrabold text-contrast mt-3 mb-1">
+      {{ formatMessage(messages.resourcePack) }}
+    </h2>
+    <div>
+      <TeleportDropdownMenu
+        v-model="resourcePack"
+        :options="resourcePackOptions"
+        name="Server resource pack"
+        :display-name="
+          (option: ServerPackStatus) => formatMessage(resourcePackOptionMessages[option])
+        "
+      />
+    </div>
+  </div>
+</template>
--- a/apps/app-frontend/src/helpers/analytics.js
+++ b/apps/app-frontend/src/helpers/analytics.js
@@ -1,8 +1,9 @@
 import { posthog } from 'posthog-js'

 export const initAnalytics = () => {
-  posthog.init('phc_hm2ihMpTAoE86xIm7XzsCB8RPiTRKivViK5biiHedm', {
+  posthog.init('phc_9Iqi6lFs9sr5BSqh9RRNRSJ0mATS9PSgirDiX3iOYJ', {
    persistence: 'localStorage',
+    api_host: 'https://posthog.modrinth.com',
  })
 }

--- a/apps/app-frontend/src/helpers/events.js
+++ b/apps/app-frontend/src/helpers/events.js
@@ -62,7 +62,7 @@ export async function process_listener(callback) {
    ProfilePayload {
        uuid: unique identification of the process in the state (currently identified by path, but that will change)
        name: name of the profile
-        profile_path: relative path to profile (used for path identification)
+        profile_path: relative path toprofile_listener profile (used for path identification)
        path: path to profile (used for opening the profile in the OS file explorer)
        event: event type ("Created", "Added", "Edited", "Removed")
    }
--- a/apps/app-frontend/src/helpers/utils.js
+++ b/apps/app-frontend/src/helpers/utils.js
@@ -37,6 +37,13 @@ export async function restartApp() {
  return await invoke('restart_app')
 }

+/**
+ * @deprecated This method is no longer needed, and just returns its parameter
+ */
+export function sanitizePotentialFileUrl(url) {
+  return url
+}
+
 export const releaseColor = (releaseType) => {
  switch (releaseType) {
    case 'release':
@@ -49,3 +56,7 @@ export const releaseColor = (releaseType) => {
      return ''
  }
 }
+
+export async function copyToClipboard(text) {
+  await navigator.clipboard.writeText(text)
+}
--- a/apps/app-frontend/src/helpers/worlds.ts
+++ b/apps/app-frontend/src/helpers/worlds.ts
@@ -0,0 +1,303 @@
+import { invoke } from '@tauri-apps/api/core'
+import { get_full_path } from '@/helpers/profile'
+import { openPath } from '@/helpers/utils'
+import { autoToHTML } from '@geometrically/minecraft-motd-parser'
+import dayjs from 'dayjs'
+import type { GameVersion } from '@modrinth/ui'
+
+type BaseWorld = {
+  name: string
+  last_played?: string
+  icon?: string
+}
+
+export type SingleplayerWorld = BaseWorld & {
+  type: 'singleplayer'
+  path: string
+  game_mode: SingleplayerGameMode
+  hardcore: boolean
+  locked: boolean
+}
+
+export type ServerWorld = BaseWorld & {
+  type: 'server'
+  index: number
+  address: string
+  pack_status: ServerPackStatus
+}
+
+export type World = SingleplayerWorld | ServerWorld
+
+export type WorldWithProfile = {
+  profile: string
+} & World
+
+export type SingleplayerGameMode = 'survival' | 'creative' | 'adventure' | 'spectator'
+export type ServerPackStatus = 'enabled' | 'disabled' | 'prompt'
+
+export type ServerStatus = {
+  // https://minecraft.wiki/w/Text_component_format
+  description?: string | Chat
+  players?: {
+    max: number
+    online: number
+    sample: { name: string; id: string }[]
+  }
+  version?: {
+    name: string
+    protocol: number
+  }
+  favicon?: string
+  enforces_secure_chat: boolean
+  ping?: number
+}
+
+export interface Chat {
+  text: string
+  bold: boolean
+  italic: boolean
+  underlined: boolean
+  strikethrough: boolean
+  obfuscated: boolean
+  color?: string
+  extra: Chat[]
+}
+
+export type ServerData = {
+  refreshing: boolean
+  status?: ServerStatus
+  rawMotd?: string | Chat
+  renderedMotd?: string
+}
+
+export async function get_recent_worlds(limit: number): Promise<WorldWithProfile[]> {
+  return await invoke('plugin:worlds|get_recent_worlds', { limit })
+}
+
+export async function get_profile_worlds(path: string): Promise<World[]> {
+  return await invoke('plugin:worlds|get_profile_worlds', { path })
+}
+
+export async function get_singleplayer_world(
+  instance: string,
+  world: string,
+): Promise<SingleplayerWorld> {
+  return await invoke('plugin:worlds|get_singleplayer_world', { instance, world })
+}
+
+export async function rename_world(
+  instance: string,
+  world: string,
+  newName: string,
+): Promise<void> {
+  return await invoke('plugin:worlds|rename_world', { instance, world, newName })
+}
+
+export async function reset_world_icon(instance: string, world: string): Promise<void> {
+  return await invoke('plugin:worlds|reset_world_icon', { instance, world })
+}
+
+export async function backup_world(instance: string, world: string): Promise<number> {
+  return await invoke('plugin:worlds|backup_world', { instance, world })
+}
+
+export async function delete_world(instance: string, world: string): Promise<void> {
+  return await invoke('plugin:worlds|delete_world', { instance, world })
+}
+
+export async function add_server_to_profile(
+  path: string,
+  name: string,
+  address: string,
+  packStatus: ServerPackStatus,
+): Promise<number> {
+  return await invoke('plugin:worlds|add_server_to_profile', { path, name, address, packStatus })
+}
+
+export async function edit_server_in_profile(
+  path: string,
+  index: number,
+  name: string,
+  address: string,
+  packStatus: ServerPackStatus,
+): Promise<void> {
+  return await invoke('plugin:worlds|edit_server_in_profile', {
+    path,
+    index,
+    name,
+    address,
+    packStatus,
+  })
+}
+
+export async function remove_server_from_profile(path: string, index: number): Promise<void> {
+  return await invoke('plugin:worlds|remove_server_from_profile', { path, index })
+}
+
+export async function get_profile_protocol_version(path: string): Promise<number | null> {
+  return await invoke('plugin:worlds|get_profile_protocol_version', { path })
+}
+
+export async function get_server_status(
+  address: string,
+  protocolVersion: number | null = null,
+): Promise<ServerStatus> {
+  return await invoke('plugin:worlds|get_server_status', { address, protocolVersion })
+}
+
+export async function start_join_singleplayer_world(path: string, world: string): Promise<unknown> {
+  return await invoke('plugin:worlds|start_join_singleplayer_world', { path, world })
+}
+
+export async function start_join_server(path: string, address: string): Promise<unknown> {
+  return await invoke('plugin:worlds|start_join_server', { path, address })
+}
+
+export async function showWorldInFolder(instancePath: string, worldPath: string) {
+  const fullPath = await get_full_path(instancePath)
+  return await openPath(fullPath + '/saves/' + worldPath)
+}
+
+export function getWorldIdentifier(world: World) {
+  return world.type === 'singleplayer' ? world.path : world.address
+}
+
+export function sortWorlds(worlds: World[]) {
+  worlds.sort((a, b) => {
+    if (!a.last_played) {
+      return 1
+    }
+    if (!b.last_played) {
+      return -1
+    }
+    return dayjs(b.last_played).diff(dayjs(a.last_played))
+  })
+}
+
+export function isSingleplayerWorld(world: World): world is SingleplayerWorld {
+  return world.type === 'singleplayer'
+}
+
+export function isServerWorld(world: World): world is ServerWorld {
+  return world.type === 'server'
+}
+
+export async function refreshServerData(
+  serverData: ServerData,
+  protocolVersion: number | null,
+  address: string,
+): Promise<void> {
+  serverData.refreshing = true
+  await get_server_status(address, protocolVersion)
+    .then((status) => {
+      serverData.status = status
+      if (status.description) {
+        serverData.rawMotd = status.description
+        serverData.renderedMotd = autoToHTML(status.description)
+      }
+    })
+    .catch((err) => {
+      console.error(`Refreshing addr: ${address}`, err)
+    })
+    .finally(() => {
+      serverData.refreshing = false
+    })
+}
+
+export async function refreshServers(
+  worlds: World[],
+  serverData: Record<string, ServerData>,
+  protocolVersion: number | null,
+) {
+  const servers = worlds.filter(isServerWorld)
+  servers.forEach((server) => {
+    if (!serverData[server.address]) {
+      serverData[server.address] = {
+        refreshing: true,
+      }
+    } else {
+      serverData[server.address].refreshing = true
+    }
+  })
+
+  // noinspection ES6MissingAwait - handled with .then by refreshServerData already
+  Promise.all(
+    Object.keys(serverData).map((address) =>
+      refreshServerData(serverData[address], protocolVersion, address),
+    ),
+  )
+}
+
+export async function refreshWorld(worlds: World[], instancePath: string, worldPath: string) {
+  const index = worlds.findIndex((w) => w.type === 'singleplayer' && w.path === worldPath)
+  if (index !== -1) {
+    worlds[index] = await get_singleplayer_world(instancePath, worldPath)
+    sortWorlds(worlds)
+  } else {
+    console.error(`Error refreshing world, could not find world at path ${worldPath}.`)
+  }
+}
+
+export async function handleDefaultProfileUpdateEvent(
+  worlds: World[],
+  instancePath: string,
+  e: ProfileEvent,
+) {
+  if (e.event === 'world_updated') {
+    await refreshWorld(worlds, instancePath, e.world)
+  }
+
+  if (e.event === 'server_joined') {
+    const world = worlds.find(
+      (w) =>
+        w.type === 'server' &&
+        (w.address === `${e.host}:${e.port}` || (e.port == 25565 && w.address == e.host)),
+    )
+    if (world) {
+      world.last_played = e.timestamp
+      sortWorlds(worlds)
+    } else {
+      console.error(`Could not find world for server join event: ${e.host}:${e.port}`)
+    }
+  }
+}
+
+export async function refreshWorlds(instancePath: string): Promise<World[]> {
+  const worlds = await get_profile_worlds(instancePath).catch((err) => {
+    console.error(`Error refreshing worlds for instance: ${instancePath}`, err)
+  })
+  if (worlds) {
+    sortWorlds(worlds)
+  }
+
+  return worlds ?? []
+}
+
+const FIRST_QUICK_PLAY_VERSION = '23w14a'
+
+export function hasQuickPlaySupport(gameVersions: GameVersion[], currentVersion: string) {
+  if (!gameVersions.length) {
+    return false
+  }
+
+  const versionIndex = gameVersions.findIndex((v) => v.version === currentVersion)
+  const targetIndex = gameVersions.findIndex((v) => v.version === FIRST_QUICK_PLAY_VERSION)
+
+  return versionIndex !== -1 && targetIndex !== -1 && versionIndex <= targetIndex
+}
+
+export type ProfileEvent = { profile_path_id: string } & (
+  | {
+      event: 'servers_updated'
+    }
+  | {
+      event: 'world_updated'
+      world: string
+    }
+  | {
+      event: 'server_joined'
+      host: string
+      port: number
+      timestamp: string
+    }
+)
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -20,12 +20,57 @@
  "app.settings.tabs.resource-management": {
    "message": "Resource management"
  },
+  "instance.add-server.add-and-play": {
+    "message": "Add and play"
+  },
+  "instance.add-server.add-server": {
+    "message": "Add server"
+  },
+  "instance.add-server.resource-pack.disabled": {
+    "message": "Disabled"
+  },
+  "instance.add-server.resource-pack.enabled": {
+    "message": "Enabled"
+  },
+  "instance.add-server.resource-pack.prompt": {
+    "message": "Prompt"
+  },
+  "instance.add-server.title": {
+    "message": "Add a server"
+  },
+  "instance.edit-server.title": {
+    "message": "Edit server"
+  },
+  "instance.edit-world.name": {
+    "message": "Name"
+  },
+  "instance.edit-world.placeholder-name": {
+    "message": "Minecraft World"
+  },
+  "instance.edit-world.reset-icon": {
+    "message": "Reset icon"
+  },
+  "instance.edit-world.title": {
+    "message": "Edit world"
+  },
  "instance.filter.disabled": {
    "message": "Disabled projects"
  },
  "instance.filter.updates-available": {
    "message": "Updates available"
  },
+  "instance.server-modal.address": {
+    "message": "Address"
+  },
+  "instance.server-modal.name": {
+    "message": "Name"
+  },
+  "instance.server-modal.placeholder-name": {
+    "message": "Minecraft Server"
+  },
+  "instance.server-modal.resource-pack": {
+    "message": "Resource pack"
+  },
  "instance.settings.tabs.general": {
    "message": "General"
  },
@@ -308,6 +353,42 @@
  "instance.settings.title": {
    "message": "Settings"
  },
+  "instance.worlds.a_minecraft_server": {
+    "message": "A Minecraft Server"
+  },
+  "instance.worlds.cant_connect": {
+    "message": "Can't connect to server"
+  },
+  "instance.worlds.copy_address": {
+    "message": "Copy address"
+  },
+  "instance.worlds.filter.available": {
+    "message": "Available"
+  },
+  "instance.worlds.game_already_open": {
+    "message": "Instance is already open"
+  },
+  "instance.worlds.hardcore": {
+    "message": "Hardcore mode"
+  },
+  "instance.worlds.no_quick_play": {
+    "message": "You can only jump straight into worlds on Minecraft 1.20+"
+  },
+  "instance.worlds.play_anyway": {
+    "message": "Play anyway"
+  },
+  "instance.worlds.type.server": {
+    "message": "Server"
+  },
+  "instance.worlds.type.singleplayer": {
+    "message": "Singleplayer"
+  },
+  "instance.worlds.view_instance": {
+    "message": "View instance"
+  },
+  "instance.worlds.world_in_use": {
+    "message": "World is in use"
+  },
  "search.filter.locked.instance": {
    "message": "Provided by the instance"
  },
--- a/apps/app-frontend/src/main.js
+++ b/apps/app-frontend/src/main.js
@@ -6,6 +6,7 @@ import FloatingVue from 'floating-vue'
 import 'floating-vue/dist/style.css'
 import { createPlugin } from '@vintl/vintl/plugin'
 import * as Sentry from '@sentry/vue'
+import { VueScanPlugin } from '@taijased/vue-render-tracker'

 const VIntlPlugin = createPlugin({
  controllerOpts: {
@@ -24,6 +25,13 @@ const VIntlPlugin = createPlugin({
  injectInto: [],
 })

+const vueScan = new VueScanPlugin({
+  enabled: false, // Enable or disable the tracker
+  showOverlay: true, // Show overlay to visualize renders
+  log: false, // Log render events to the console
+  playSound: false, // Play sound on each render
+})
+
 const pinia = createPinia()

 let app = createApp(App)
@@ -35,6 +43,7 @@ Sentry.init({
  tracesSampleRate: 0.1,
 })

+app.use(vueScan)
 app.use(router)
 app.use(pinia)
 app.use(FloatingVue, {
--- a/apps/app-frontend/src/pages/Index.vue
+++ b/apps/app-frontend/src/pages/Index.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref, onUnmounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import RowDisplay from '@/components/RowDisplay.vue'
@@ -8,19 +8,32 @@ import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { handleError } from '@/store/notifications.js'
 import dayjs from 'dayjs'
 import { get_search_results } from '@/helpers/cache.js'
-
-const featuredModpacks = ref({})
-const featuredMods = ref({})
-const filter = ref('')
+import type { SearchResult } from '@modrinth/utils'
+import RecentWorldsList from '@/components/ui/world/RecentWorldsList.vue'

 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()

 breadcrumbs.setRootContext({ name: 'Home', link: route.path })

-const recentInstances = ref([])
+const instances = ref<GameInstance[]>([])

-const offline = ref(!navigator.onLine)
+const featuredModpacks = ref<SearchResult[]>([])
+const featuredMods = ref<SearchResult[]>([])
+const installedModpacksFilter = ref('')
+
+const recentInstances = computed(() =>
+  instances.value
+    .filter((x) => x.last_played)
+    .slice()
+    .sort((a, b) => dayjs(b.last_played).diff(dayjs(a.last_played))),
+)
+
+const hasFeaturedProjects = computed(
+  () => (featuredModpacks.value?.length ?? 0) + (featuredMods.value?.length ?? 0) > 0,
+)
+
+const offline = ref<boolean>(!navigator.onLine)
 window.addEventListener('offline', () => {
  offline.value = true
 })
@@ -28,34 +41,21 @@ window.addEventListener('online', () => {
  offline.value = false
 })

-const getInstances = async () => {
-  const profiles = await list().catch(handleError)
-
-  recentInstances.value = profiles
-    .filter((x) => x.last_played)
-    .sort((a, b) => {
-      const dateA = dayjs(a.last_played)
-      const dateB = dayjs(b.last_played)
-
-      if (dateA.isSame(dateB)) {
-        return a.name.localeCompare(b.name)
-      }
-
-      return dateB - dateA
-    })
+async function fetchInstances() {
+  instances.value = await list().catch(handleError)

  const filters = []
-  for (const instance of profiles) {
+  for (const instance of instances.value) {
    if (instance.linked_data && instance.linked_data.project_id) {
      filters.push(`NOT"project_id"="${instance.linked_data.project_id}"`)
    }
  }
-  filter.value = filters.join(' AND ')
+  installedModpacksFilter.value = filters.join(' AND ')
 }

-const getFeaturedModpacks = async () => {
+async function fetchFeaturedModpacks() {
  const response = await get_search_results(
-    `?facets=[["project_type:modpack"]]&limit=10&index=follows&filters=${filter.value}`,
+    `?facets=[["project_type:modpack"]]&limit=10&index=follows&filters=${installedModpacksFilter.value}`,
  )

  if (response) {
@@ -64,7 +64,8 @@ const getFeaturedModpacks = async () => {
    featuredModpacks.value = []
  }
 }
-const getFeaturedMods = async () => {
+
+async function fetchFeaturedMods() {
  const response = await get_search_results('?facets=[["project_type:mod"]]&limit=10&index=follows')

  if (response) {
@@ -74,27 +75,21 @@ const getFeaturedMods = async () => {
  }
 }

-await getInstances()
+async function refreshFeaturedProjects() {
+  await Promise.all([fetchFeaturedModpacks(), fetchFeaturedMods()])
+}

-await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
+await fetchInstances()
+await refreshFeaturedProjects()

 const unlistenProfile = await profile_listener(async (e) => {
-  await getInstances()
+  await fetchInstances()

  if (e.event === 'added' || e.event === 'created' || e.event === 'removed') {
-    await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
+    await refreshFeaturedProjects()
  }
 })

-// computed sums of recentInstances, featuredModpacks, featuredMods, treating them as arrays if they are not
-const total = computed(() => {
-  return (
-    (recentInstances.value?.length ?? 0) +
-    (featuredModpacks.value?.length ?? 0) +
-    (featuredMods.value?.length ?? 0)
-  )
-})
-
 onUnmounted(() => {
  unlistenProfile()
 })
@@ -104,17 +99,10 @@ onUnmounted(() => {
  <div class="p-6 flex flex-col gap-2">
    <h1 v-if="recentInstances" class="m-0 text-2xl">Welcome back!</h1>
    <h1 v-else class="m-0 text-2xl">Welcome to Modrinth App!</h1>
+    <RecentWorldsList :recent-instances="recentInstances" />
    <RowDisplay
-      v-if="total > 0"
+      v-if="hasFeaturedProjects"
      :instances="[
-        {
-          label: 'Recently played',
-          route: '/library',
-          instances: recentInstances,
-          instance: true,
-          downloaded: true,
-          compact: true,
-        },
        {
          label: 'Discover a modpack',
          route: '/browse/modpack',
--- a/apps/app-frontend/src/pages/Worlds.vue
+++ b/apps/app-frontend/src/pages/Worlds.vue
@@ -0,0 +1,4 @@
+<script setup lang="ts"></script>
+<template>
+  <div class="p-6 flex flex-col gap-2">Worlds</div>
+</template>
--- a/apps/app-frontend/src/pages/index.js
+++ b/apps/app-frontend/src/pages/index.js
@@ -1,4 +1,5 @@
 import Index from './Index.vue'
 import Browse from './Browse.vue'
+import Worlds from './Worlds.vue'

-export { Index, Browse }
+export { Index, Browse, Worlds }
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -1,152 +1,156 @@
 <template>
-  <div
-    class="p-6 pr-2 pb-4"
-    @contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
-  >
-    <ExportModal ref="exportModal" :instance="instance" />
-    <InstanceSettingsModal ref="settingsModal" :instance="instance" :offline="offline" />
-    <ContentPageHeader>
-      <template #icon>
-        <Avatar :src="icon" :alt="instance.name" size="96px" :tint-by="instance.path" />
-      </template>
-      <template #title>
-        {{ instance.name }}
-      </template>
-      <template #summary> </template>
-      <template #stats>
-        <div
-          class="flex items-center gap-2 font-semibold transform capitalize border-0 border-solid border-divider pr-4 md:border-r"
-        >
-          <GameIcon class="h-6 w-6 text-secondary" />
-          {{ instance.loader }} {{ instance.game_version }}
-        </div>
-        <div class="flex items-center gap-2 font-semibold">
-          <TimerIcon class="h-6 w-6 text-secondary" />
-          <template v-if="timePlayed > 0">
-            {{ timePlayedHumanized }}
-          </template>
-          <template v-else> Never played </template>
-        </div>
-      </template>
-      <template #actions>
-        <div class="flex gap-2">
-          <ButtonStyled
-            v-if="instance.install_stage.includes('installing')"
-            color="brand"
-            size="large"
-          >
-            <button disabled>Installing...</button>
-          </ButtonStyled>
-          <ButtonStyled
-            v-else-if="instance.install_stage !== 'installed'"
-            color="brand"
-            size="large"
-          >
-            <button @click="repairInstance()">
-              <DownloadIcon />
-              Repair
-            </button>
-          </ButtonStyled>
-          <ButtonStyled v-else-if="playing === true" color="red" size="large">
-            <button @click="stopInstance('InstancePage')">
-              <StopCircleIcon />
-              Stop
-            </button>
-          </ButtonStyled>
-          <ButtonStyled
-            v-else-if="playing === false && loading === false"
-            color="brand"
-            size="large"
-          >
-            <button @click="startInstance('InstancePage')">
-              <PlayIcon />
-              Play
-            </button>
-          </ButtonStyled>
-          <ButtonStyled
-            v-else-if="loading === true && playing === false"
-            color="brand"
-            size="large"
-          >
-            <button disabled>Loading...</button>
-          </ButtonStyled>
-          <ButtonStyled size="large" circular>
-            <button v-tooltip="'Instance settings'" @click="settingsModal.show()">
-              <SettingsIcon />
-            </button>
-          </ButtonStyled>
-          <ButtonStyled size="large" type="transparent" circular>
-            <OverflowMenu
-              :options="[
-                {
-                  id: 'open-folder',
-                  action: () => showProfileInFolder(instance.path),
-                },
-                {
-                  id: 'export-mrpack',
-                  action: () => $refs.exportModal.show(),
-                },
-              ]"
-            >
-              <MoreVerticalIcon />
-              <template #share-instance> <UserPlusIcon /> Share instance </template>
-              <template #host-a-server> <ServerIcon /> Create a server </template>
-              <template #open-folder> <FolderOpenIcon /> Open folder </template>
-              <template #export-mrpack> <PackageIcon /> Export modpack </template>
-            </OverflowMenu>
-          </ButtonStyled>
-        </div>
-      </template>
-    </ContentPageHeader>
-  </div>
-  <div class="px-6">
-    <NavTabs :links="tabs" />
-  </div>
-  <div class="p-6 pt-4">
-    <RouterView v-slot="{ Component }" :key="instance.path">
-      <template v-if="Component">
-        <Suspense
-          :key="instance.path"
-          @pending="loadingBar.startLoading()"
-          @resolve="loadingBar.stopLoading()"
-        >
-          <component
-            :is="Component"
-            :instance="instance"
-            :options="options"
-            :offline="offline"
-            :playing="playing"
-            :versions="modrinthVersions"
-            :installed="instance.install_stage !== 'installed'"
-          ></component>
-          <template #fallback>
-            <LoadingIndicator />
-          </template>
-        </Suspense>
-      </template>
-    </RouterView>
-  </div>
-  <ContextMenu ref="options" @option-clicked="handleOptionsClick">
-    <template #play> <PlayIcon /> Play </template>
-    <template #stop> <StopCircleIcon /> Stop </template>
-    <template #add_content> <PlusIcon /> Add content </template>
-    <template #edit> <EditIcon /> Edit </template>
-    <template #copy_path> <ClipboardCopyIcon /> Copy path </template>
-    <template #open_folder> <ClipboardCopyIcon /> Open folder </template>
-    <template #copy_link> <ClipboardCopyIcon /> Copy link </template>
-    <template #open_link> <ClipboardCopyIcon /> Open in Modrinth <ExternalIcon /> </template>
-    <template #copy_names><EditIcon />Copy names</template>
-    <template #copy_slugs><HashIcon />Copy slugs</template>
-    <template #copy_links><GlobeIcon />Copy links</template>
-    <template #toggle><EditIcon />Toggle selected</template>
-    <template #disable><XIcon />Disable selected</template>
-    <template #enable><CheckCircleIcon />Enable selected</template>
-    <template #hide_show><EyeIcon />Show/Hide unselected</template>
-    <template #update_all
-      ><UpdatedIcon />Update {{ selected.length > 0 ? 'selected' : 'all' }}</template
+  <div>
+    <div
+      class="p-6 pr-2 pb-4"
+      @contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
    >
-    <template #filter_update><UpdatedIcon />Select Updatable</template>
-  </ContextMenu>
+      <ExportModal ref="exportModal" :instance="instance" />
+      <InstanceSettingsModal ref="settingsModal" :instance="instance" :offline="offline" />
+      <ContentPageHeader>
+        <template #icon>
+          <Avatar :src="icon" :alt="instance.name" size="96px" :tint-by="instance.path" />
+        </template>
+        <template #title>
+          {{ instance.name }}
+        </template>
+        <template #summary> </template>
+        <template #stats>
+          <div
+            class="flex items-center gap-2 font-semibold transform capitalize border-0 border-solid border-divider pr-4 md:border-r"
+          >
+            <GameIcon class="h-6 w-6 text-secondary" />
+            {{ instance.loader }} {{ instance.game_version }}
+          </div>
+          <div class="flex items-center gap-2 font-semibold">
+            <TimerIcon class="h-6 w-6 text-secondary" />
+            <template v-if="timePlayed > 0">
+              {{ timePlayedHumanized }}
+            </template>
+            <template v-else> Never played </template>
+          </div>
+        </template>
+        <template #actions>
+          <div class="flex gap-2">
+            <ButtonStyled
+              v-if="instance.install_stage.includes('installing')"
+              color="brand"
+              size="large"
+            >
+              <button disabled>Installing...</button>
+            </ButtonStyled>
+            <ButtonStyled
+              v-else-if="instance.install_stage !== 'installed'"
+              color="brand"
+              size="large"
+            >
+              <button @click="repairInstance()">
+                <DownloadIcon />
+                Repair
+              </button>
+            </ButtonStyled>
+            <ButtonStyled v-else-if="playing === true" color="red" size="large">
+              <button @click="stopInstance('InstancePage')">
+                <StopCircleIcon />
+                Stop
+              </button>
+            </ButtonStyled>
+            <ButtonStyled
+              v-else-if="playing === false && loading === false"
+              color="brand"
+              size="large"
+            >
+              <button @click="startInstance('InstancePage')">
+                <PlayIcon />
+                Play
+              </button>
+            </ButtonStyled>
+            <ButtonStyled
+              v-else-if="loading === true && playing === false"
+              color="brand"
+              size="large"
+            >
+              <button disabled>Loading...</button>
+            </ButtonStyled>
+            <ButtonStyled size="large" circular>
+              <button v-tooltip="'Instance settings'" @click="settingsModal.show()">
+                <SettingsIcon />
+              </button>
+            </ButtonStyled>
+            <ButtonStyled size="large" type="transparent" circular>
+              <OverflowMenu
+                :options="[
+                  {
+                    id: 'open-folder',
+                    action: () => showProfileInFolder(instance.path),
+                  },
+                  {
+                    id: 'export-mrpack',
+                    action: () => $refs.exportModal.show(),
+                  },
+                ]"
+              >
+                <MoreVerticalIcon />
+                <template #share-instance> <UserPlusIcon /> Share instance </template>
+                <template #host-a-server> <ServerIcon /> Create a server </template>
+                <template #open-folder> <FolderOpenIcon /> Open folder </template>
+                <template #export-mrpack> <PackageIcon /> Export modpack </template>
+              </OverflowMenu>
+            </ButtonStyled>
+          </div>
+        </template>
+      </ContentPageHeader>
+    </div>
+    <div class="px-6">
+      <NavTabs :links="tabs" />
+    </div>
+    <div v-if="!!instance" class="p-6 pt-4">
+      <RouterView v-slot="{ Component }" :key="instance.path">
+        <template v-if="Component">
+          <Suspense
+            :key="instance.path"
+            @pending="loadingBar.startLoading()"
+            @resolve="loadingBar.stopLoading()"
+          >
+            <component
+              :is="Component"
+              :instance="instance"
+              :options="options"
+              :offline="offline"
+              :playing="playing"
+              :versions="modrinthVersions"
+              :installed="instance.install_stage !== 'installed'"
+              @play="updatePlayState"
+              @stop="() => stopInstance('InstanceSubpage')"
+            ></component>
+            <template #fallback>
+              <LoadingIndicator />
+            </template>
+          </Suspense>
+        </template>
+      </RouterView>
+    </div>
+    <ContextMenu ref="options" @option-clicked="handleOptionsClick">
+      <template #play> <PlayIcon /> Play </template>
+      <template #stop> <StopCircleIcon /> Stop </template>
+      <template #add_content> <PlusIcon /> Add content </template>
+      <template #edit> <EditIcon /> Edit </template>
+      <template #copy_path> <ClipboardCopyIcon /> Copy path </template>
+      <template #open_folder> <ClipboardCopyIcon /> Open folder </template>
+      <template #copy_link> <ClipboardCopyIcon /> Copy link </template>
+      <template #open_link> <ClipboardCopyIcon /> Open in Modrinth <ExternalIcon /> </template>
+      <template #copy_names><EditIcon />Copy names</template>
+      <template #copy_slugs><HashIcon />Copy slugs</template>
+      <template #copy_links><GlobeIcon />Copy links</template>
+      <template #toggle><EditIcon />Toggle selected</template>
+      <template #disable><XIcon />Disable selected</template>
+      <template #enable><CheckCircleIcon />Enable selected</template>
+      <template #hide_show><EyeIcon />Show/Hide unselected</template>
+      <template #update_all
+        ><UpdatedIcon />Update {{ selected.length > 0 ? 'selected' : 'all' }}</template
+      >
+      <template #filter_update><UpdatedIcon />Select Updatable</template>
+    </ContextMenu>
+  </div>
 </template>
 <script setup>
 import {
@@ -238,6 +242,10 @@ async function fetchInstance() {
      })
  }

+  await updatePlayState()
+}
+
+async function updatePlayState() {
  const runningProcesses = await get_by_profile_path(route.params.id).catch(handleError)

  playing.value = runningProcesses.length > 0
@@ -253,14 +261,20 @@ watch(
  },
 )

+const basePath = computed(() => `/instance/${encodeURIComponent(route.params.id)}`)
+
 const tabs = computed(() => [
  {
    label: 'Content',
-    href: `/instance/${encodeURIComponent(route.params.id)}`,
+    href: `${basePath.value}`,
+  },
+  {
+    label: 'Worlds',
+    href: `${basePath.value}/worlds`,
  },
  {
    label: 'Logs',
-    href: `/instance/${encodeURIComponent(route.params.id)}/logs`,
+    href: `${basePath.value}/logs`,
  },
 ])

--- a/apps/app-frontend/src/pages/instance/Logs.vue
+++ b/apps/app-frontend/src/pages/instance/Logs.vue
@@ -117,15 +117,37 @@ const route = useRoute()
 const props = defineProps({
  instance: {
    type: Object,
-    required: true,
+    default() {
+      return {}
+    },
+  },
+  options: {
+    type: Object,
+    default() {
+      return {}
+    },
  },
  offline: {
    type: Boolean,
-    default: false,
+    default() {
+      return false
+    },
  },
  playing: {
    type: Boolean,
-    default: false,
+    default() {
+      return false
+    },
+  },
+  versions: {
+    type: Array,
+    required: true,
+  },
+  installed: {
+    type: Boolean,
+    default() {
+      return false
+    },
  },
 })

--- a/apps/app-frontend/src/pages/instance/Mods.vue
+++ b/apps/app-frontend/src/pages/instance/Mods.vue
@@ -1,252 +1,252 @@
 <template>
-  <template v-if="projects?.length > 0">
-    <div class="flex items-center gap-2 mb-4">
-      <div class="iconified-input flex-grow">
-        <SearchIcon />
-        <input
-          v-model="searchFilter"
-          type="text"
-          :placeholder="`Search ${filteredProjects.length} project${filteredProjects.length === 1 ? '' : 's'}...`"
-          class="text-input search-input"
-          autocomplete="off"
+  <div>
+    <template v-if="projects?.length > 0">
+      <div class="flex items-center gap-2 mb-4">
+        <div class="iconified-input flex-grow">
+          <SearchIcon />
+          <input
+            v-model="searchFilter"
+            type="text"
+            :placeholder="`Search ${filteredProjects.length} project${filteredProjects.length === 1 ? '' : 's'}...`"
+            class="text-input search-input"
+            autocomplete="off"
+          />
+          <Button class="r-btn" @click="() => (searchFilter = '')">
+            <XIcon />
+          </Button>
+        </div>
+        <AddContentButton :instance="instance" />
+      </div>
+      <div class="flex items-center justify-between">
+        <div v-if="filterOptions.length > 1" class="flex flex-wrap gap-1 items-center pb-4">
+          <FilterIcon class="text-secondary h-5 w-5 mr-1" />
+          <button
+            v-for="filter in filterOptions"
+            :key="filter"
+            :class="`px-2 py-1 rounded-full font-semibold leading-none border-none cursor-pointer active:scale-[0.97] duration-100 transition-all ${selectedFilters.includes(filter.id) ? 'bg-brand-highlight text-brand' : 'bg-bg-raised text-secondary'}`"
+            @click="toggleArray(selectedFilters, filter.id)"
+          >
+            {{ filter.formattedName }}
+          </button>
+        </div>
+        <Pagination
+          v-if="search.length > 0"
+          :page="currentPage"
+          :count="Math.ceil(search.length / 20)"
+          :link-function="(page) => `?page=${page}`"
+          @switch-page="(page) => (currentPage = page)"
        />
-        <Button class="r-btn" @click="() => (searchFilter = '')">
-          <XIcon />
-        </Button>
      </div>
-      <AddContentButton :instance="instance" />
-    </div>
-    <div class="flex items-center justify-between">
-      <div v-if="filterOptions.length > 1" class="flex flex-wrap gap-1 items-center pb-4">
-        <FilterIcon class="text-secondary h-5 w-5 mr-1" />
-        <button
-          v-for="filter in filterOptions"
-          :key="filter"
-          :class="`px-2 py-1 rounded-full font-semibold leading-none border-none cursor-pointer active:scale-[0.97] duration-100 transition-all ${selectedFilters.includes(filter.id) ? 'bg-brand-highlight text-brand' : 'bg-bg-raised text-secondary'}`"
-          @click="toggleArray(selectedFilters, filter.id)"
-        >
-          {{ filter.formattedName }}
-        </button>
-      </div>
-      <Pagination
-        v-if="search.length > 0"
-        :page="currentPage"
-        :count="Math.ceil(search.length / 20)"
-        :link-function="(page) => `?page=${page}`"
-        @switch-page="(page) => (currentPage = page)"
-      />
-    </div>

-    <ContentListPanel
-      v-model="selectedFiles"
-      :locked="isPackLocked"
-      :items="
-        search.map((x) => {
-          const item: ContentItem<any> = {
-            path: x.path,
-            disabled: x.disabled,
-            filename: x.file_name,
-            icon: x.icon,
-            title: x.name,
-            data: x,
-          }
-
-          if (x.version) {
-            item.version = x.version
-            item.versionId = x.version
-          }
-
-          if (x.id) {
-            item.project = {
-              id: x.id,
-              link: { path: `/project/${x.id}`, query: { i: props.instance.path } },
-              linkProps: {},
+      <ContentListPanel
+        v-model="selectedFiles"
+        :locked="isPackLocked"
+        :items="
+          search.map((x) => {
+            const item: ContentItem<any> = {
+              path: x.path,
+              disabled: x.disabled,
+              filename: x.file_name,
+              icon: x.icon,
+              title: x.name,
+              data: x,
            }
-          }

-          if (x.author) {
-            item.creator = {
-              name: x.author,
-              type: 'user',
-              id: x.author,
-              link: 'https://modrinth.com/user/' + x.author,
-              linkProps: { target: '_blank' },
+            if (x.version) {
+              item.version = x.version
+              item.versionId = x.version
            }
-          }

-          return item
-        })
-      "
-      :sort-column="sortColumn"
-      :sort-ascending="ascending"
-      :update-sort="sortProjects"
-      :current-page="currentPage"
-    >
-      <template v-if="selectedProjects.length > 0" #headers>
-        <div class="flex gap-2">
+            if (x.id) {
+              item.project = {
+                id: x.id,
+                link: { path: `/project/${x.id}`, query: { i: props.instance.path } },
+                linkProps: {},
+              }
+            }
+
+            if (x.author) {
+              item.creator = {
+                name: x.author.name,
+                type: x.author.type,
+                id: x.author.slug,
+                link: `https://modrinth.com/${x.author.type}/${x.author.slug}`,
+                linkProps: { target: '_blank' },
+              }
+            }
+
+            return item
+          })
+        "
+        :sort-column="sortColumn"
+        :sort-ascending="ascending"
+        :update-sort="sortProjects"
+        :current-page="currentPage"
+      >
+        <template v-if="selectedProjects.length > 0" #headers>
+          <div class="flex gap-2">
+            <ButtonStyled
+              v-if="!isPackLocked && selectedProjects.some((m) => m.outdated)"
+              color="brand"
+              color-fill="text"
+              hover-color-fill="text"
+            >
+              <button @click="updateSelected()"><DownloadIcon /> Update</button>
+            </ButtonStyled>
+            <ButtonStyled>
+              <OverflowMenu
+                :options="[
+                  {
+                    id: 'share-names',
+                    action: () => shareNames(),
+                  },
+                  {
+                    id: 'share-file-names',
+                    action: () => shareFileNames(),
+                  },
+                  {
+                    id: 'share-urls',
+                    action: () => shareUrls(),
+                  },
+                  {
+                    id: 'share-markdown',
+                    action: () => shareMarkdown(),
+                  },
+                ]"
+              >
+                <ShareIcon /> Share <DropdownIcon />
+                <template #share-names> <TextInputIcon /> Project names </template>
+                <template #share-file-names> <FileIcon /> File names </template>
+                <template #share-urls> <LinkIcon /> Project links </template>
+                <template #share-markdown> <CodeIcon /> Markdown links </template>
+              </OverflowMenu>
+            </ButtonStyled>
+            <ButtonStyled v-if="selectedProjects.some((m) => m.disabled)">
+              <button @click="enableAll()"><CheckCircleIcon /> Enable</button>
+            </ButtonStyled>
+            <ButtonStyled v-if="selectedProjects.some((m) => !m.disabled)">
+              <button @click="disableAll()"><SlashIcon /> Disable</button>
+            </ButtonStyled>
+            <ButtonStyled color="red">
+              <button @click="deleteSelected()"><TrashIcon /> Remove</button>
+            </ButtonStyled>
+          </div>
+        </template>
+        <template #header-actions>
+          <ButtonStyled type="transparent" color-fill="text" hover-color-fill="text">
+            <button :disabled="refreshingProjects" class="w-max" @click="refreshProjects">
+              <UpdatedIcon />
+              Refresh
+            </button>
+          </ButtonStyled>
          <ButtonStyled
-            v-if="!isPackLocked && selectedProjects.some((m) => m.outdated)"
+            v-if="!isPackLocked && projects.some((m) => (m as any).outdated)"
+            type="transparent"
+            color="brand"
+            color-fill="text"
+            hover-color-fill="text"
+            @click="updateAll"
+          >
+            <button class="w-max"><DownloadIcon /> Update all</button>
+          </ButtonStyled>
+          <ButtonStyled
+            v-if="canUpdatePack"
+            type="transparent"
            color="brand"
            color-fill="text"
            hover-color-fill="text"
          >
-            <button @click="updateSelected()"><DownloadIcon /> Update</button>
+            <button class="w-max" :disabled="installing" @click="modpackVersionModal.show()">
+              <DownloadIcon /> Update pack
+            </button>
          </ButtonStyled>
-          <ButtonStyled>
+        </template>
+        <template #actions="{ item }">
+          <ButtonStyled
+            v-if="!isPackLocked && (item.data as any).outdated"
+            type="transparent"
+            color="brand"
+            circular
+          >
+            <button
+              v-tooltip="`Update`"
+              :disabled="(item.data as any).updating"
+              @click="updateProject(item.data)"
+            >
+              <DownloadIcon />
+            </button>
+          </ButtonStyled>
+          <div v-else class="w-[36px]"></div>
+          <Toggle
+            class="!mx-2"
+            :model-value="!item.data.disabled"
+            @update:model-value="toggleDisableMod(item.data)"
+          />
+          <ButtonStyled type="transparent" circular>
+            <button v-tooltip="'Remove'" @click="removeMod(item)">
+              <TrashIcon />
+            </button>
+          </ButtonStyled>
+
+          <ButtonStyled type="transparent" circular>
            <OverflowMenu
              :options="[
                {
-                  id: 'share-names',
-                  action: () => shareNames(),
+                  id: 'show-file',
+                  action: () => highlightModInProfile(instance.path, item.path),
                },
                {
-                  id: 'share-file-names',
-                  action: () => shareFileNames(),
-                },
-                {
-                  id: 'share-urls',
-                  action: () => shareUrls(),
-                },
-                {
-                  id: 'share-markdown',
-                  action: () => shareMarkdown(),
+                  id: 'copy-link',
+                  shown: item.data !== undefined && item.data.slug !== undefined,
+                  action: () => copyModLink(item),
                },
              ]"
+              direction="left"
            >
-              <ShareIcon /> Share <DropdownIcon />
-              <template #share-names> <TextInputIcon /> Project names </template>
-              <template #share-file-names> <FileIcon /> File names </template>
-              <template #share-urls> <LinkIcon /> Project links </template>
-              <template #share-markdown> <CodeIcon /> Markdown links </template>
+              <MoreVerticalIcon />
+              <template #show-file> <ExternalIcon /> Show file </template>
+              <template #copy-link> <ClipboardCopyIcon /> Copy link </template>
            </OverflowMenu>
          </ButtonStyled>
-          <ButtonStyled v-if="selectedProjects.some((m) => m.disabled)">
-            <button @click="enableAll()"><CheckCircleIcon /> Enable</button>
-          </ButtonStyled>
-          <ButtonStyled v-if="selectedProjects.some((m) => !m.disabled)">
-            <button @click="disableAll()"><SlashIcon /> Disable</button>
-          </ButtonStyled>
-          <ButtonStyled color="red">
-            <button @click="deleteSelected()"><TrashIcon /> Remove</button>
-          </ButtonStyled>
-        </div>
-      </template>
-      <template #header-actions>
-        <ButtonStyled type="transparent" color-fill="text" hover-color-fill="text">
-          <button :disabled="refreshingProjects" class="w-max" @click="refreshProjects">
-            <UpdatedIcon />
-            Refresh
-          </button>
-        </ButtonStyled>
-        <ButtonStyled
-          v-if="!isPackLocked && projects.some((m) => (m as any).outdated)"
-          type="transparent"
-          color="brand"
-          color-fill="text"
-          hover-color-fill="text"
-          @click="updateAll"
-        >
-          <button class="w-max"><DownloadIcon /> Update all</button>
-        </ButtonStyled>
-        <ButtonStyled
-          v-if="canUpdatePack"
-          type="transparent"
-          color="brand"
-          color-fill="text"
-          hover-color-fill="text"
-        >
-          <button class="w-max" :disabled="installing" @click="modpackVersionModal.show()">
-            <DownloadIcon /> Update pack
-          </button>
-        </ButtonStyled>
-      </template>
-      <template #actions="{ item }">
-        <ButtonStyled
-          v-if="!isPackLocked && (item.data as any).outdated"
-          type="transparent"
-          color="brand"
-          circular
-        >
-          <button
-            v-tooltip="`Update`"
-            :disabled="(item.data as any).updating"
-            @click="updateProject(item.data)"
-          >
-            <DownloadIcon />
-          </button>
-        </ButtonStyled>
-        <div v-else class="w-[36px]"></div>
-        <Toggle
-          class="!mx-2"
-          :model-value="!item.data.disabled"
-          :checked="!item.data.disabled"
-          @update:model-value="toggleDisableMod(item.data)"
+        </template>
+      </ContentListPanel>
+      <div class="flex justify-end mt-4">
+        <Pagination
+          v-if="search.length > 0"
+          :page="currentPage"
+          :count="Math.ceil(search.length / 20)"
+          :link-function="(page) => `?page=${page}`"
+          @switch-page="(page) => (currentPage = page)"
        />
-        <ButtonStyled type="transparent" circular>
-          <button v-tooltip="'Remove'" @click="removeMod(item)">
-            <TrashIcon />
-          </button>
-        </ButtonStyled>
-
-        <ButtonStyled type="transparent" circular>
-          <OverflowMenu
-            :options="[
-              {
-                id: 'show-file',
-                action: () => highlightModInProfile(instance.path, item.path),
-              },
-              {
-                id: 'copy-link',
-                shown: item.data !== undefined && item.data.slug !== undefined,
-                action: () => copyModLink(item),
-              },
-            ]"
-            direction="left"
+      </div>
+    </template>
+    <div v-else class="w-full max-w-[48rem] mx-auto flex flex-col mt-6">
+      <RadialHeader class="">
+        <div class="flex items-center gap-6 w-[32rem] mx-auto">
+          <img src="@/assets/sad-modrinth-bot.webp" class="h-24" />
+          <span class="text-contrast font-bold text-xl"
+            >You haven't added any content to this instance yet.</span
          >
-            <MoreVerticalIcon />
-            <template #show-file> <ExternalIcon /> Show file </template>
-            <template #copy-link> <ClipboardCopyIcon /> Copy link </template>
-          </OverflowMenu>
-        </ButtonStyled>
-      </template>
-    </ContentListPanel>
-    <div class="flex justify-end mt-4">
-      <Pagination
-        v-if="search.length > 0"
-        :page="currentPage"
-        :count="Math.ceil(search.length / 20)"
-        :link-function="(page) => `?page=${page}`"
-        @switch-page="(page) => (currentPage = page)"
-      />
-    </div>
-  </template>
-  <div v-else class="w-full flex flex-col items-center justify-center mt-6 max-w-[48rem] mx-auto">
-    <div class="top-box w-full">
-      <div class="flex items-center gap-6 w-[32rem] mx-auto">
-        <img src="@/assets/sad-modrinth-bot.webp" class="h-24" />
-        <span class="text-contrast font-bold text-xl"
-          >You haven't added any content to this instance yet.</span
-        >
+        </div>
+      </RadialHeader>
+      <div class="flex mt-4 mx-auto">
+        <AddContentButton :instance="instance" />
      </div>
    </div>
-    <div class="top-box-divider"></div>
-    <div class="flex items-center gap-6 py-4">
-      <AddContentButton :instance="instance" />
-    </div>
+    <ShareModalWrapper
+      ref="shareModal"
+      share-title="Sharing modpack content"
+      share-text="Check out the projects I'm using in my modpack!"
+      :open-in-new-tab="false"
+    />
+    <ExportModal v-if="projects.length > 0" ref="exportModal" :instance="instance" />
+    <ModpackVersionModal
+      v-if="instance.linked_data"
+      ref="modpackVersionModal"
+      :instance="instance"
+      :versions="props.versions"
+    />
  </div>
-  <ShareModalWrapper
-    ref="shareModal"
-    share-title="Sharing modpack content"
-    share-text="Check out the projects I'm using in my modpack!"
-    :open-in-new-tab="false"
-  />
-  <ExportModal v-if="projects.length > 0" ref="exportModal" :instance="instance" />
-  <ModpackVersionModal
-    v-if="instance.linked_data"
-    ref="modpackVersionModal"
-    :instance="instance"
-    :versions="props.versions"
-  />
 </template>
 <script setup lang="ts">
 import {
@@ -273,6 +273,7 @@ import {
  ContentListPanel,
  OverflowMenu,
  Pagination,
+  RadialHeader,
  Toggle,
 } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
@@ -324,12 +325,46 @@ const props = defineProps({
      return false
    },
  },
+  playing: {
+    type: Boolean,
+    default() {
+      return false
+    },
+  },
  versions: {
    type: Array,
    required: true,
  },
+  installed: {
+    type: Boolean,
+    default() {
+      return false
+    },
+  },
 })

+type ProjectListEntryAuthor = {
+  name: string
+  slug: string
+  type: 'user' | 'organization'
+}
+
+type ProjectListEntry = {
+  path: string
+  name: string
+  slug?: string
+  author: ProjectListEntryAuthor | null
+  version: string | null
+  file_name: string
+  icon: string | null
+  disabled: boolean
+  updateVersion?: string
+  outdated: boolean
+  updated: dayjs.Dayjs
+  project_type: string
+  id?: string
+}
+
 const isPackLocked = computed(() => {
  return props.instance.linked_data && props.instance.linked_data.locked
 })
@@ -339,7 +374,7 @@ const canUpdatePack = computed(() => {
 })
 const exportModal = ref(null)

-const projects = ref([])
+const projects = ref<ProjectListEntry[]>([])
 const selectedFiles = ref([])
 const selectedProjects = computed(() =>
  projects.value.filter((x) => selectedFiles.value.includes(x.file_name)),
@@ -348,7 +383,7 @@ const selectedProjects = computed(() =>
 const selectionMap = ref(new Map())

 const initProjects = async (cacheBehaviour?) => {
-  const newProjects = []
+  const newProjects: ProjectListEntry[] = []

  const profileProjects = await get_projects(props.instance.path, cacheBehaviour)
  const fetchProjects = []
@@ -385,21 +420,29 @@ const initProjects = async (cacheBehaviour?) => {

        const team = modrinthTeams.find((x) => x[0].team_id === project.team)

-        let owner
-
+        let author: ProjectListEntryAuthor | null
        if (org) {
-          owner = org.name
+          author = {
+            name: org.name,
+            slug: org.slug,
+            type: 'organization',
+          }
        } else if (team) {
-          owner = team.find((x) => x.is_owner).user.username
+          const teamMember = team.find((x) => x.is_owner)
+          author = {
+            name: teamMember.user.username,
+            slug: teamMember.user.username,
+            type: 'user',
+          }
        } else {
-          owner = null
+          author = null
        }

        newProjects.push({
          path,
          name: project.title,
          slug: project.slug,
-          author: owner,
+          author,
          version: version.version_number,
          file_name: file.file_name,
          icon: project.icon_url,
@@ -418,7 +461,7 @@ const initProjects = async (cacheBehaviour?) => {
    newProjects.push({
      path,
      name: file.file_name.replace('.disabled', ''),
-      author: '',
+      author: null,
      version: null,
      file_name: file.file_name,
      icon: null,
@@ -429,7 +472,7 @@ const initProjects = async (cacheBehaviour?) => {
    })
  }

-  projects.value = newProjects
+  projects.value = newProjects ?? []

  const newSelectionMap = new Map()
  for (const project of projects.value) {
--- a/apps/app-frontend/src/pages/instance/Overview.vue
+++ b/apps/app-frontend/src/pages/instance/Overview.vue
@@ -0,0 +1,15 @@
+<template>{{ instance.name }} overview</template>
+<script setup lang="ts">
+import type { GameInstance } from '@/helpers/types'
+import type ContextMenu from '@/components/ui/ContextMenu.vue'
+import type { Version } from '@modrinth/utils'
+
+defineProps<{
+  instance: GameInstance
+  options: InstanceType<typeof ContextMenu>
+  offline: boolean
+  playing: boolean
+  versions: Version[]
+  installed: boolean
+}>()
+</script>
--- a/apps/app-frontend/src/pages/instance/Worlds.vue
+++ b/apps/app-frontend/src/pages/instance/Worlds.vue
@@ -0,0 +1,447 @@
+<template>
+  <AddServerModal
+    ref="addServerModal"
+    :instance="instance"
+    @submit="
+      (server, start) => {
+        addServer(server)
+        if (start) {
+          joinWorld(server)
+        }
+      }
+    "
+  />
+  <EditServerModal ref="editServerModal" :instance="instance" @submit="editServer" />
+  <EditWorldModal ref="editWorldModal" :instance="instance" @submit="editWorld" />
+  <ConfirmModalWrapper
+    ref="removeServerModal"
+    :title="`Are you sure you want to remove ${serverToRemove?.name ?? 'this server'}?`"
+    :description="`'${serverToRemove?.name}'${serverToRemove?.address === serverToRemove?.name ? ' ' : ` (${serverToRemove?.address})`} will be removed from your list, including in-game, and there will be no way to recover it.`"
+    :markdown="false"
+    @proceed="proceedRemoveServer"
+  />
+  <ConfirmModalWrapper
+    ref="deleteWorldModal"
+    :title="`Are you sure you want to permanently delete this world?`"
+    :description="`'${worldToDelete?.name}' will be **permanently deleted**, and there will be no way to recover it.`"
+    @proceed="proceedDeleteWorld"
+  />
+  <div v-if="worlds.length > 0" class="flex flex-col gap-4">
+    <div class="flex flex-wrap gap-2 items-center">
+      <div class="iconified-input flex-grow">
+        <SearchIcon />
+        <input
+          v-model="searchFilter"
+          type="text"
+          :placeholder="`Search worlds...`"
+          class="text-input search-input"
+          autocomplete="off"
+        />
+        <Button v-if="searchFilter" class="r-btn" @click="() => (searchFilter = '')">
+          <XIcon />
+        </Button>
+      </div>
+      <ButtonStyled>
+        <button :disabled="refreshingAll" @click="refreshAllWorlds">
+          <template v-if="refreshingAll">
+            <SpinnerIcon class="animate-spin" />
+            Refreshing...
+          </template>
+          <template v-else>
+            <UpdatedIcon />
+            Refresh
+          </template>
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button @click="addServerModal?.show()">
+          <PlusIcon />
+          Add a server
+        </button>
+      </ButtonStyled>
+    </div>
+    <FilterBar v-model="filters" :options="filterOptions" />
+    <div class="flex flex-col w-full gap-2">
+      <WorldItem
+        v-for="world in filteredWorlds"
+        :key="`world-${world.type}-${world.type == 'singleplayer' ? world.path : `${world.address}-${world.index}`}`"
+        :world="world"
+        :highlighted="highlightedWorld === getWorldIdentifier(world)"
+        :supports-quick-play="supportsQuickPlay"
+        :current-protocol="protocolVersion"
+        :playing-instance="playing"
+        :playing-world="worldsMatch(world, worldPlaying)"
+        :starting-instance="startingInstance"
+        :refreshing="world.type === 'server' ? serverData[world.address]?.refreshing : undefined"
+        :server-status="world.type === 'server' ? serverData[world.address]?.status : undefined"
+        :rendered-motd="
+          world.type === 'server' ? serverData[world.address]?.renderedMotd : undefined
+        "
+        :game-mode="world.type === 'singleplayer' ? GAME_MODES[world.game_mode] : undefined"
+        @play="() => joinWorld(world)"
+        @stop="() => emit('stop')"
+        @refresh="() => refreshServer((world as ServerWorld).address)"
+        @edit="
+          () =>
+            world.type === 'server' ? editServerModal?.show(world) : editWorldModal?.show(world)
+        "
+        @delete="() => promptToRemoveWorld(world)"
+      />
+    </div>
+  </div>
+  <div v-else class="w-full max-w-[48rem] mx-auto flex flex-col mt-6">
+    <RadialHeader class="">
+      <div class="flex items-center gap-6 w-[32rem] mx-auto">
+        <img src="@/assets/sad-modrinth-bot.webp" alt="" aria-hidden="true" class="h-24" />
+        <span class="text-contrast font-bold text-xl"> You don't have any worlds yet. </span>
+      </div>
+    </RadialHeader>
+    <div class="flex gap-2 mt-4 mx-auto">
+      <ButtonStyled>
+        <button @click="addServerModal?.show()">
+          <PlusIcon aria-hidden="true" />
+          Add a server
+        </button>
+      </ButtonStyled>
+      <ButtonStyled>
+        <button :disabled="refreshingAll" @click="refreshAllWorlds">
+          <template v-if="refreshingAll">
+            <SpinnerIcon aria-hidden="true" class="animate-spin" />
+            Refreshing...
+          </template>
+          <template v-else>
+            <UpdatedIcon aria-hidden="true" />
+            Refresh
+          </template>
+        </button>
+      </ButtonStyled>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onUnmounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { GameInstance } from '@/helpers/types'
+import {
+  Button,
+  ButtonStyled,
+  RadialHeader,
+  FilterBar,
+  type FilterBarOption,
+  type GameVersion,
+  GAME_MODES,
+} from '@modrinth/ui'
+import { PlusIcon, SpinnerIcon, UpdatedIcon, SearchIcon, XIcon } from '@modrinth/assets'
+import {
+  type SingleplayerWorld,
+  type World,
+  type ServerWorld,
+  type ServerData,
+  type ProfileEvent,
+  get_profile_protocol_version,
+  remove_server_from_profile,
+  delete_world,
+  start_join_server,
+  start_join_singleplayer_world,
+  getWorldIdentifier,
+  refreshServerData,
+  refreshWorld,
+  sortWorlds,
+  refreshServers,
+  hasQuickPlaySupport,
+  refreshWorlds,
+  handleDefaultProfileUpdateEvent,
+} from '@/helpers/worlds.ts'
+import AddServerModal from '@/components/ui/world/modal/AddServerModal.vue'
+import EditServerModal from '@/components/ui/world/modal/EditServerModal.vue'
+import EditWorldModal from '@/components/ui/world/modal/EditSingleplayerWorldModal.vue'
+import WorldItem from '@/components/ui/world/WorldItem.vue'
+
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { handleError } from '@/store/notifications'
+import type ContextMenu from '@/components/ui/ContextMenu.vue'
+import type { Version } from '@modrinth/utils'
+import { profile_listener } from '@/helpers/events'
+import { get_game_versions } from '@/helpers/tags'
+import { defineMessages } from '@vintl/vintl'
+
+const route = useRoute()
+
+const addServerModal = ref<InstanceType<typeof AddServerModal>>()
+const editServerModal = ref<InstanceType<typeof EditServerModal>>()
+const editWorldModal = ref<InstanceType<typeof EditWorldModal>>()
+const removeServerModal = ref<InstanceType<typeof ConfirmModalWrapper>>()
+const deleteWorldModal = ref<InstanceType<typeof ConfirmModalWrapper>>()
+
+const serverToRemove = ref<ServerWorld>()
+const worldToDelete = ref<SingleplayerWorld>()
+
+const emit = defineEmits<{
+  (event: 'play', world: World): void
+  (event: 'stop'): void
+}>()
+
+const props = defineProps<{
+  instance: GameInstance
+  options: InstanceType<typeof ContextMenu> | null
+  offline: boolean
+  playing: boolean
+  versions: Version[]
+  installed: boolean
+}>()
+
+const instance = computed(() => props.instance)
+const playing = computed(() => props.playing)
+
+function play(world: World) {
+  emit('play', world)
+}
+
+const filters = ref<string[]>([])
+const searchFilter = ref('')
+
+const refreshingAll = ref(false)
+const hadNoWorlds = ref(true)
+const startingInstance = ref(false)
+const worldPlaying = ref<World>()
+
+const worlds = ref<World[]>([])
+const serverData = ref<Record<string, ServerData>>({})
+
+const protocolVersion = ref<number | null>(await get_profile_protocol_version(instance.value.path))
+
+const unlistenProfile = await profile_listener(async (e: ProfileEvent) => {
+  if (e.profile_path_id !== instance.value.path) return
+
+  console.info(`Handling profile event '${e.event}' for profile: ${e.profile_path_id}`)
+
+  if (e.event === 'servers_updated') {
+    await refreshAllWorlds()
+  }
+
+  await handleDefaultProfileUpdateEvent(worlds.value, instance.value.path, e)
+})
+
+await refreshAllWorlds()
+
+async function refreshServer(address: string) {
+  await refreshServerData(serverData.value[address], protocolVersion.value, address)
+}
+
+async function refreshAllWorlds() {
+  if (refreshingAll.value) {
+    console.log(`Already refreshing, cancelling refresh.`)
+    return
+  }
+
+  refreshingAll.value = true
+
+  worlds.value = await refreshWorlds(instance.value.path).finally(
+    () => (refreshingAll.value = false),
+  )
+  await refreshServers(worlds.value, serverData.value, protocolVersion.value)
+
+  const hasNoWorlds = worlds.value.length === 0
+
+  if (hadNoWorlds.value && hasNoWorlds) {
+    setTimeout(() => {
+      refreshingAll.value = false
+    }, 1000)
+  } else {
+    refreshingAll.value = false
+  }
+
+  hadNoWorlds.value = hasNoWorlds
+}
+
+async function addServer(server: ServerWorld) {
+  worlds.value.push(server)
+  sortWorlds(worlds.value)
+  await refreshServer(server.address)
+}
+
+async function editServer(server: ServerWorld) {
+  const index = worlds.value.findIndex((w) => w.type === 'server' && w.index === server.index)
+  if (index !== -1) {
+    worlds.value[index] = server
+    sortWorlds(worlds.value)
+    await refreshServer(server.address)
+  } else {
+    handleError(`Error refreshing server, refreshing all worlds`)
+    await refreshAllWorlds()
+  }
+}
+
+async function removeServer(server: ServerWorld) {
+  await remove_server_from_profile(instance.value.path, server.index).catch(handleError)
+  worlds.value = worlds.value.filter((w) => w.type !== 'server' || w.index !== server.index)
+}
+
+async function editWorld(path: string, name: string, removeIcon: boolean) {
+  const world = worlds.value.find((world) => world.type === 'singleplayer' && world.path === path)
+  if (world) {
+    world.name = name
+    if (removeIcon) {
+      world.icon = undefined
+    }
+    sortWorlds(worlds.value)
+  } else {
+    handleError(`Error finding world in list, refreshing all worlds`)
+    await refreshAllWorlds()
+  }
+}
+
+async function deleteWorld(world: SingleplayerWorld) {
+  await delete_world(instance.value.path, world.path).catch(handleError)
+  worlds.value = worlds.value.filter((w) => w.type !== 'singleplayer' || w.path !== world.path)
+}
+
+function handleJoinError(err: unknown) {
+  handleError(err)
+  startingInstance.value = false
+  worldPlaying.value = undefined
+}
+
+async function joinWorld(world: World) {
+  console.log(`Joining world ${getWorldIdentifier(world)}`)
+  startingInstance.value = true
+  worldPlaying.value = world
+  if (world.type === 'server') {
+    await start_join_server(instance.value.path, world.address).catch(handleJoinError)
+  } else if (world.type === 'singleplayer') {
+    await start_join_singleplayer_world(instance.value.path, world.path).catch(handleJoinError)
+  }
+  play(world)
+  startingInstance.value = false
+}
+
+watch(
+  () => playing.value,
+  (playing) => {
+    if (!playing) {
+      worldPlaying.value = undefined
+
+      setTimeout(async () => {
+        for (const world of worlds.value) {
+          if (world.type === 'singleplayer' && world.locked) {
+            await refreshWorld(worlds.value, instance.value.path, world.path)
+          }
+        }
+      }, 1000)
+    }
+  },
+)
+
+function worldsMatch(world: World, other: World | undefined) {
+  if (world.type === 'server' && other?.type === 'server') {
+    return world.address === other.address
+  } else if (world.type === 'singleplayer' && other?.type === 'singleplayer') {
+    return world.path === other.path
+  }
+  return false
+}
+
+const gameVersions = ref<GameVersion[]>(await get_game_versions().catch(() => []))
+const supportsQuickPlay = computed(() =>
+  hasQuickPlaySupport(gameVersions.value, instance.value.game_version),
+)
+
+const filterOptions = computed(() => {
+  const options: FilterBarOption[] = []
+
+  if (worlds.value.some((x) => x.type === 'singleplayer')) {
+    options.push({
+      id: 'singleplayer',
+      message: messages.singleplayer,
+    })
+  }
+
+  if (worlds.value.some((x) => x.type === 'server')) {
+    options.push({
+      id: 'server',
+      message: messages.server,
+    })
+
+    // add available filter if there's any offline ("unavailable") servers
+    if (
+      worlds.value.some(
+        (x) =>
+          x.type === 'server' &&
+          !serverData.value[x.address]?.status &&
+          !serverData.value[x.address]?.refreshing,
+      )
+    ) {
+      options.push({
+        id: 'available',
+        message: messages.available,
+      })
+    }
+  }
+
+  return options
+})
+
+const filteredWorlds = computed(() =>
+  worlds.value.filter((x) => {
+    const availableFilter = filters.value.includes('available')
+    const typeFilter = filters.value.includes('server') || filters.value.includes('singleplayer')
+
+    return (
+      (!typeFilter || filters.value.includes(x.type)) &&
+      (!availableFilter || x.type !== 'server' || serverData.value[x.address]?.status) &&
+      (!searchFilter.value || x.name.toLowerCase().includes(searchFilter.value.toLowerCase()))
+    )
+  }),
+)
+
+const highlightedWorld = ref(route.query.highlight)
+
+function promptToRemoveWorld(world: World): boolean {
+  if (world.type === 'server') {
+    serverToRemove.value = world
+    removeServerModal.value?.show()
+    return !!removeServerModal.value
+  } else {
+    worldToDelete.value = world
+    deleteWorldModal.value?.show()
+    return !!deleteWorldModal.value
+  }
+}
+
+async function proceedRemoveServer() {
+  if (!serverToRemove.value) {
+    handleError(`Error removing server, no server marked for removal.`)
+    return
+  }
+  await removeServer(serverToRemove.value)
+  serverToRemove.value = undefined
+}
+
+async function proceedDeleteWorld() {
+  if (!worldToDelete.value) {
+    handleError(`Error deleting world, no world marked for removal.`)
+    return
+  }
+  await deleteWorld(worldToDelete.value)
+  worldToDelete.value = undefined
+}
+
+onUnmounted(() => {
+  unlistenProfile()
+})
+
+const messages = defineMessages({
+  singleplayer: {
+    id: 'instance.worlds.type.singleplayer',
+    defaultMessage: 'Singleplayer',
+  },
+  server: {
+    id: 'instance.worlds.type.server',
+    defaultMessage: 'Server',
+  },
+  available: {
+    id: 'instance.worlds.filter.available',
+    defaultMessage: 'Available',
+  },
+})
+</script>
--- a/apps/app-frontend/src/pages/instance/index.js
+++ b/apps/app-frontend/src/pages/instance/index.js
@@ -1,5 +1,7 @@
 import Index from './Index.vue'
+import Overview from './Overview.vue'
+import Worlds from './Worlds.vue'
 import Mods from './Mods.vue'
 import Logs from './Logs.vue'

-export { Index, Mods, Logs }
+export { Index, Overview, Worlds, Mods, Logs }
--- a/apps/app-frontend/src/pages/project/Gallery.vue
+++ b/apps/app-frontend/src/pages/project/Gallery.vue
@@ -31,10 +31,10 @@
            : 'https://cdn.modrinth.com/placeholder-banner.svg'
        "
        :alt="expandedGalleryItem.title ? expandedGalleryItem.title : 'gallery-image'"
-        @click.stop=""
+        @click.stop="() => {}"
      />

-      <div class="floating" @click.stop="">
+      <div class="floating" @click.stop="() => {}">
        <div class="text">
          <h2 v-if="expandedGalleryItem.title">
            {{ expandedGalleryItem.title }}
@@ -99,7 +99,7 @@ import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
 const props = defineProps({
  project: {
    type: Object,
-    default: () => {},
+    default: () => ({}),
  },
 })

--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -192,6 +192,11 @@ const [allLoaders, allGameVersions] = await Promise.all([
 async function fetchProjectData() {
  const project = await get_project(route.params.id, 'must_revalidate').catch(handleError)

+  if (!project) {
+    handleError('Error loading project')
+    return
+  }
+
  data.value = project
  ;[versions.value, members.value, categories.value, instance.value, instanceProjects.value] =
    await Promise.all([
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -18,6 +18,14 @@ export default new createRouter({
        breadcrumb: [{ name: 'Home' }],
      },
    },
+    {
+      path: '/worlds',
+      name: 'Worlds',
+      component: Pages.Worlds,
+      meta: {
+        breadcrumb: [{ name: 'Worlds' }],
+      },
+    },
    {
      path: '/browse/:projectType',
      name: 'Discover content',
@@ -106,13 +114,31 @@ export default new createRouter({
      component: Instance.Index,
      props: true,
      children: [
+        // {
+        //   path: '',
+        //   name: 'Overview',
+        //   component: Instance.Overview,
+        //   meta: {
+        //     useRootContext: true,
+        //     breadcrumb: [{ name: '?Instance' }],
+        //   },
+        // },
+        {
+          path: 'worlds',
+          name: 'InstanceWorlds',
+          component: Instance.Worlds,
+          meta: {
+            useRootContext: true,
+            breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Worlds' }],
+          },
+        },
        {
          path: '',
          name: 'Mods',
          component: Instance.Mods,
          meta: {
            useRootContext: true,
-            breadcrumb: [{ name: '?Instance' }],
+            breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Content' }],
          },
        },
        {
@@ -121,7 +147,7 @@ export default new createRouter({
          component: Instance.Mods,
          meta: {
            useRootContext: true,
-            breadcrumb: [{ name: '?Instance' }],
+            breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Content' }],
          },
        },
        {
--- a/apps/app-playground/.cargo/config.toml
+++ b/apps/app-playground/.cargo/config.toml
@@ -0,0 +1,2 @@
+[env]
+SQLX_OFFLINE = "true"
--- a/apps/app-playground/Cargo.toml
+++ b/apps/app-playground/Cargo.toml
@@ -7,18 +7,7 @@ edition = "2021"

 [dependencies]
 theseus = { path = "../../packages/app-lib", features = ["cli"] }
-
-serde_json = "1.0"
-serde = { version = "1.0", features = ["derive"] }
 tokio = { version = "1", features = ["full"] }
-thiserror = "1.0"
-url = "2.2"
 webbrowser = "0.8.13"
-dunce = "1.0.3"
-
-futures = "0.3"
-uuid = { version = "1.1", features = ["serde", "v4"] }

 tracing = "0.1.37"
-tracing-subscriber = "0.3.18"
-tracing-error = "0.2.0"
--- a/apps/app-playground/src/main.rs
+++ b/apps/app-playground/src/main.rs
@@ -4,8 +4,7 @@
 )]

 use theseus::prelude::*;
-
-use theseus::profile::create::profile_create;
+use theseus::worlds::get_recent_worlds;

 // A simple Rust implementation of the authentication run
 // 1) call the authenticate_begin_flow() function to get the URL to open (like you would in the frontend)
@@ -41,54 +40,16 @@ async fn main() -> theseus::Result<()> {
    // Initialize state
    State::init().await?;

-    if minecraft_auth::users().await?.is_empty() {
-        println!("No users found, authenticating.");
-        authenticate_run().await?; // could take credentials from here direct, but also deposited in state users
+    let worlds = get_recent_worlds(4).await?;
+    for world in worlds {
+        println!(
+            "World: {:?}/{:?} played at {:?}: {:#?}",
+            world.profile,
+            world.world.name,
+            world.world.last_played,
+            world.world.details
+        );
    }
-    //
-    // st.settings
-    //     .write()
-    //     .await
-    //     .java_globals
-    //     .insert(JAVA_8_KEY.to_string(), check_jre(path).await?.unwrap());
-    // Clear profiles
-    println!("Clearing profiles.");
-    {
-        let h = profile::list().await?;
-        for profile in h.into_iter() {
-            profile::remove(&profile.path).await?;
-        }
-    }
-
-    println!("Creating/adding profile.");
-
-    let name = "Example".to_string();
-    let game_version = "1.16.1".to_string();
-    let modloader = ModLoader::Forge;
-    let loader_version = "stable".to_string();
-
-    let profile_path = profile_create(
-        name,
-        game_version,
-        modloader,
-        Some(loader_version),
-        None,
-        None,
-        None,
-    )
-    .await?;
-
-    println!("running");
-    // Run a profile, running minecraft and store the RwLock to the process
-    let process = profile::run(&profile_path).await?;
-
-    println!("Minecraft UUID: {}", process.uuid);
-
-    println!("All running process UUID {:?}", process::get_all().await?);
-
-    // hold the lock to the process until it ends
-    println!("Waiting for process to end...");
-    process::wait_for(process.uuid).await?;

    Ok(())
 }
--- a/apps/app/.cargo/config.toml
+++ b/apps/app/.cargo/config.toml
@@ -0,0 +1,2 @@
+[env]
+SQLX_OFFLINE = "true"
--- a/apps/app/Cargo.toml
+++ b/apps/app/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "theseus_gui"
-version = "0.9.3"
+version = "0.9.4"
 description = "The Modrinth App is a desktop application for managing your Minecraft mods"
 license = "GPL-3.0-only"
 repository = "https://github.com/modrinth/code/apps/app/"
@@ -28,22 +28,18 @@ tauri-plugin-single-instance = { version = "2.2.0" }

 tokio = { version = "1", features = ["full"] }
 thiserror = "1.0"
-futures = "0.3"
 daedalus = { path = "../../packages/daedalus" }
 chrono = "0.4.26"
-
-dirs = "5.0.1"
+either = "1.15"

 url = "2.2"
+urlencoding = "2.1"
 uuid = { version = "1.1", features = ["serde", "v4"] }
 os_info = "3.7.0"

 tracing = "0.1.37"
 tracing-error = "0.2.0"

-lazy_static = "1"
-once_cell = "1"
-
 dashmap = "6.0.1"
 paste = "1.0.15"

--- a/apps/app/build.rs
+++ b/apps/app/build.rs
@@ -240,6 +240,29 @@ fn main() {
                    .default_permission(
                        DefaultPermissionRule::AllowAllCommands,
                    ),
+            )
+            .plugin(
+                "worlds",
+                InlinedPlugin::new()
+                    .commands(&[
+                        "get_recent_worlds",
+                        "get_profile_worlds",
+                        "get_singleplayer_world",
+                        "rename_world",
+                        "reset_world_icon",
+                        "backup_world",
+                        "delete_world",
+                        "add_server_to_profile",
+                        "edit_server_in_profile",
+                        "remove_server_from_profile",
+                        "get_profile_protocol_version",
+                        "get_server_status",
+                        "start_join_singleplayer_world",
+                        "start_join_server",
+                    ])
+                    .default_permission(
+                        DefaultPermissionRule::AllowAllCommands,
+                    ),
            ),
    )
    .expect("Failed to run tauri-build");
--- a/apps/app/capabilities/plugins.json
+++ b/apps/app/capabilities/plugins.json
@@ -35,6 +35,7 @@
    "tags:default",
    "utils:default",
    "ads:default",
-    "friends:default"
+    "friends:default",
+    "worlds:default"
  ]
 }
--- a/apps/app/src/api/mod.rs
+++ b/apps/app/src/api/mod.rs
@@ -19,6 +19,7 @@ pub mod utils;
 pub mod ads;
 pub mod cache;
 pub mod friends;
+pub mod worlds;

 pub type Result<T> = std::result::Result<T, TheseusSerializableError>;

--- a/apps/app/src/api/profile.rs
+++ b/apps/app/src/api/profile.rs
@@ -4,6 +4,7 @@ use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
 use std::path::{Path, PathBuf};
 use theseus::prelude::*;
+use theseus::profile::QuickPlayType;

 pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
    tauri::plugin::Builder::new("profile")
@@ -250,7 +251,7 @@ pub async fn profile_get_pack_export_candidates(
 // invoke('plugin:profile|profile_run', path)
 #[tauri::command]
 pub async fn profile_run(path: &str) -> Result<ProcessMetadata> {
-    let process = profile::run(path).await?;
+    let process = profile::run(path, &QuickPlayType::None).await?;

    Ok(process)
 }
@@ -264,7 +265,9 @@ pub async fn profile_run_credentials(
    path: &str,
    credentials: Credentials,
 ) -> Result<ProcessMetadata> {
-    let process = profile::run_credentials(path, &credentials).await?;
+    let process =
+        profile::run_credentials(path, &credentials, &QuickPlayType::None)
+            .await?;

    Ok(process)
 }
@@ -347,6 +350,9 @@ pub async fn profile_edit(path: &str, edit_profile: EditProfile) -> Result<()> {
            prof.name = name;
        }
        if let Some(game_version) = edit_profile.game_version.clone() {
+            if game_version != prof.game_version {
+                prof.protocol_version = None;
+            }
            prof.game_version = game_version;
        }
        if let Some(loader) = edit_profile.loader {
--- a/apps/app/src/api/utils.rs
+++ b/apps/app/src/api/utils.rs
@@ -4,9 +4,11 @@ use theseus::{
    prelude::{CommandPayload, DirectoryInfo},
 };

-use crate::api::Result;
+use crate::api::{Result, TheseusSerializableError};
 use dashmap::DashMap;
-use std::path::PathBuf;
+use std::path::{Path, PathBuf};
+use theseus::prelude::canonicalize;
+use url::Url;

 pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
    tauri::plugin::Builder::new("utils")
@@ -140,3 +142,28 @@ pub async fn handle_command(command: String) -> Result<()> {
    tracing::info!("handle command: {command}");
    Ok(theseus::handler::parse_and_emit_command(&command).await?)
 }
+
+// Remove when (and if) https://github.com/tauri-apps/tauri/issues/12022 is implemented
+pub(crate) fn tauri_convert_file_src(path: &Path) -> Result<Url> {
+    #[cfg(any(windows, target_os = "android"))]
+    const BASE: &str = "http://asset.localhost/";
+    #[cfg(not(any(windows, target_os = "android")))]
+    const BASE: &str = "asset://localhost/";
+
+    macro_rules! theseus_try {
+        ($test:expr) => {
+            match $test {
+                Ok(val) => val,
+                Err(e) => {
+                    return Err(TheseusSerializableError::Theseus(e.into()))
+                }
+            }
+        };
+    }
+
+    let path = theseus_try!(canonicalize(path));
+    let path = path.to_string_lossy();
+    let encoded = urlencoding::encode(&path);
+
+    Ok(theseus_try!(Url::parse(&format!("{BASE}{encoded}"))))
+}
--- a/apps/app/src/api/worlds.rs
+++ b/apps/app/src/api/worlds.rs
@@ -0,0 +1,195 @@
+use crate::api::Result;
+use either::Either;
+use tauri::{AppHandle, Manager, Runtime};
+use theseus::prelude::ProcessMetadata;
+use theseus::profile::{get_full_path, QuickPlayType};
+use theseus::worlds::{
+    ServerPackStatus, ServerStatus, World, WorldWithProfile,
+};
+use theseus::{profile, worlds};
+
+pub fn init<R: Runtime>() -> tauri::plugin::TauriPlugin<R> {
+    tauri::plugin::Builder::new("worlds")
+        .invoke_handler(tauri::generate_handler![
+            get_recent_worlds,
+            get_profile_worlds,
+            get_singleplayer_world,
+            rename_world,
+            reset_world_icon,
+            backup_world,
+            delete_world,
+            add_server_to_profile,
+            edit_server_in_profile,
+            remove_server_from_profile,
+            get_profile_protocol_version,
+            get_server_status,
+            start_join_singleplayer_world,
+            start_join_server,
+        ])
+        .build()
+}
+
+#[tauri::command]
+pub async fn get_recent_worlds<R: Runtime>(
+    app_handle: AppHandle<R>,
+    limit: usize,
+) -> Result<Vec<WorldWithProfile>> {
+    let mut result = worlds::get_recent_worlds(limit).await?;
+    for world in result.iter_mut() {
+        adapt_world_icon(&app_handle, &mut world.world);
+    }
+    Ok(result)
+}
+
+#[tauri::command]
+pub async fn get_profile_worlds<R: Runtime>(
+    app_handle: AppHandle<R>,
+    path: &str,
+) -> Result<Vec<World>> {
+    let mut result = worlds::get_profile_worlds(path).await?;
+    for world in result.iter_mut() {
+        adapt_world_icon(&app_handle, world);
+    }
+    Ok(result)
+}
+
+#[tauri::command]
+pub async fn get_singleplayer_world<R: Runtime>(
+    app_handle: AppHandle<R>,
+    instance: &str,
+    world: &str,
+) -> Result<World> {
+    let instance = get_full_path(instance).await?;
+    let mut world = worlds::get_singleplayer_world(&instance, world).await?;
+    adapt_world_icon(&app_handle, &mut world);
+    Ok(world)
+}
+
+fn adapt_world_icon<R: Runtime>(app_handle: &AppHandle<R>, world: &mut World) {
+    if let Some(Either::Left(icon_path)) = &world.icon {
+        let icon_path = icon_path.clone();
+        if let Ok(new_url) = super::utils::tauri_convert_file_src(&icon_path) {
+            world.icon = Some(Either::Right(new_url));
+            if let Err(e) =
+                app_handle.asset_protocol_scope().allow_file(&icon_path)
+            {
+                tracing::warn!(
+                    "Failed to allow file access for icon {}: {}",
+                    icon_path.display(),
+                    e
+                );
+            }
+        } else {
+            tracing::warn!(
+                "Encountered invalid icon path for world {}: {}",
+                world.name,
+                icon_path.display()
+            );
+            world.icon = None;
+        }
+    }
+}
+
+#[tauri::command]
+pub async fn rename_world(
+    instance: &str,
+    world: &str,
+    new_name: &str,
+) -> Result<()> {
+    let instance = get_full_path(instance).await?;
+    worlds::rename_world(&instance, world, new_name).await?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn reset_world_icon(instance: &str, world: &str) -> Result<()> {
+    let instance = get_full_path(instance).await?;
+    worlds::reset_world_icon(&instance, world).await?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn backup_world(instance: &str, world: &str) -> Result<u64> {
+    let instance = get_full_path(instance).await?;
+    Ok(worlds::backup_world(&instance, world).await?)
+}
+
+#[tauri::command]
+pub async fn delete_world(instance: &str, world: &str) -> Result<()> {
+    let instance = get_full_path(instance).await?;
+    worlds::delete_world(&instance, world).await?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn add_server_to_profile(
+    path: &str,
+    name: String,
+    address: String,
+    pack_status: ServerPackStatus,
+) -> Result<usize> {
+    let path = get_full_path(path).await?;
+    Ok(
+        worlds::add_server_to_profile(&path, name, address, pack_status)
+            .await?,
+    )
+}
+
+#[tauri::command]
+pub async fn edit_server_in_profile(
+    path: &str,
+    index: usize,
+    name: String,
+    address: String,
+    pack_status: ServerPackStatus,
+) -> Result<()> {
+    let path = get_full_path(path).await?;
+    worlds::edit_server_in_profile(&path, index, name, address, pack_status)
+        .await?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn remove_server_from_profile(
+    path: &str,
+    index: usize,
+) -> Result<()> {
+    let path = get_full_path(path).await?;
+    worlds::remove_server_from_profile(&path, index).await?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn get_profile_protocol_version(path: &str) -> Result<Option<i32>> {
+    Ok(worlds::get_profile_protocol_version(path).await?)
+}
+
+#[tauri::command]
+pub async fn get_server_status(
+    address: &str,
+    protocol_version: Option<i32>,
+) -> Result<ServerStatus> {
+    Ok(worlds::get_server_status(address, protocol_version).await?)
+}
+
+#[tauri::command]
+pub async fn start_join_singleplayer_world(
+    path: &str,
+    world: String,
+) -> Result<ProcessMetadata> {
+    let process =
+        profile::run(path, &QuickPlayType::Singleplayer(world)).await?;
+
+    Ok(process)
+}
+
+#[tauri::command]
+pub async fn start_join_server(
+    path: &str,
+    address: &str,
+) -> Result<ProcessMetadata> {
+    let process =
+        profile::run(path, &QuickPlayType::Server(address.to_owned())).await?;
+
+    Ok(process)
+}
--- a/apps/app/src/main.rs
+++ b/apps/app/src/main.rs
@@ -268,6 +268,7 @@ fn main() {
        .plugin(api::cache::init())
        .plugin(api::ads::init())
        .plugin(api::friends::init())
+        .plugin(api::worlds::init())
        .invoke_handler(tauri::generate_handler![
            initialize_state,
            is_dev,
--- a/apps/app/tauri.conf.json
+++ b/apps/app/tauri.conf.json
@@ -39,12 +39,12 @@
    "fileAssociations": [
      {
        "ext": ["mrpack"],
-        "mimeType": "application/zip+mrpack"
+        "mimeType": "application/x-modrinth-modpack+zip"
      }
    ]
  },
  "productName": "Modrinth App",
-  "version": "0.9.3",
+  "version": "0.9.4",
  "mainBinaryName": "Modrinth App",
  "identifier": "ModrinthApp",
  "plugins": {
@@ -76,7 +76,7 @@
    ],
    "security": {
      "assetProtocol": {
-        "scope": ["$APPDATA/caches/icons/*", "$APPCONFIG/caches/icons/*", "$CONFIG/caches/icons/*"],
+        "scope": ["$APPDATA/caches/icons/*", "$APPCONFIG/caches/icons/*", "$CONFIG/caches/icons/*", "$APPDATA/profiles/*/saves/*/icon.png", "$APPCONFIG/profiles/*/saves/*/icon.png", "$CONFIG/profiles/*/saves/*/icon.png"],
        "enable": true
      },
      "capabilities": ["ads", "core", "plugins"],
--- a/apps/daedalus_client/Cargo.toml
+++ b/apps/daedalus_client/Cargo.toml
@@ -22,7 +22,6 @@ reqwest = { version = "0.12.5", default-features = false, features = [
    "rustls-tls-native-roots",
 ] }
 async_zip = { version = "0.0.17", features = ["full"] }
-semver = "1.0"
 chrono = { version = "0.4", features = ["serde"] }
 bytes = "1.6.0"
 rust-s3 = { version = "0.33.0", default-features = false, features = [
@@ -39,4 +38,3 @@ tracing-error = "0.2.0"

 tracing = "0.1"
 tracing-subscriber = { version = "0.3", features = ["env-filter"] }
-tracing-futures = { version = "0.2.5", features = ["futures", "tokio"] }
--- a/apps/daedalus_client/src/forge.rs
+++ b/apps/daedalus_client/src/forge.rs
@@ -598,7 +598,7 @@ async fn fetch(
                            ))
                                })?;

-                        let file_name = value.split('/').last()
+                        let file_name = value.split('/').next_back()
                            .ok_or_else(|| {
                                crate::ErrorKind::InvalidInput(format!(
                                    "Unable reading filename for data key {key} at path {value}",
--- a/apps/docs/astro.config.mjs
+++ b/apps/docs/astro.config.mjs
@@ -44,6 +44,10 @@ export default defineConfig({
          label: 'Contributing to Modrinth',
          autogenerate: { directory: 'contributing' },
        },
+        {
+          label: 'Guides',
+          autogenerate: { directory: 'guide' },
+        },
        // Add the generated sidebar group to the sidebar.
        ...openAPISidebarGroups,
      ],
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -10,12 +10,12 @@
    "astro": "astro"
  },
  "dependencies": {
-    "@astrojs/check": "^0.9.3",
-    "@astrojs/starlight": "^0.26.3",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/starlight": "^0.32.2",
    "@modrinth/assets": "workspace:*",
-    "astro": "^4.10.2",
-    "sharp": "^0.32.5",
-    "starlight-openapi": "^0.7.0",
-    "typescript": "^5.5.4"
+    "astro": "^5.4.1",
+    "sharp": "^0.33.5",
+    "starlight-openapi": "^0.14.0",
+    "typescript": "^5.8.2"
  }
-}
+}
--- a/apps/docs/public/openapi.yaml
+++ b/apps/docs/public/openapi.yaml
@@ -1,7 +1,7 @@
 openapi: '3.0.0'

 info:
-  version: v2.7.0/15cf3fc
+  version: v2.7.0/366f528
  title: Labrinth
  termsOfService: https://modrinth.com/legal/terms
  contact:
@@ -51,35 +51,7 @@ info:
    Please note that certain scopes and requests cannot be completed with a personal access token or using OAuth.
    For example, deleting a user account can only be done through Modrinth's frontend.

-    ### OAuth2
-    Applications interacting with an authenticated API should create an OAuth2 application.
-    You can do this in [the developer settings](https://modrinth.com/settings/applications).
-
-    Make sure to save your application secret, as you will not be able to access it after you leave the page.
-
-    Once you have created a client, use the following URL to have a user authorize your client:
-    ```
-    https://modrinth.com/auth/authorize?client_id=<CLIENT_ID>&redirect_uri=<CALLBACK_URL>&scope=<SCOPE_ONE>+<SCOPE_TWO>+<SCOPE_THREE>
-    ```
-    > You can get a list of all scope names [here](https://github.com/modrinth/code/tree/main/apps/labrinth/src/models/v3/pats.rs).
-
-    Then, send a `POST` request to the following URL to get the token:
-
-    ```
-    https://api.modrinth.com/_internal/oauth/token
-    ```
-
-    > Note that you will need to provide your application's secret under the Authorization header.
-
-    In the body of your request, make sure to include the following:
-    - `code`: The code generated when authorizing your client
-    - `client_id`: Your client ID (found in developer settings)
-    - `redirect_uri`: A valid redirect URI provided in your application's settings
-    - `grant_type`: This will need to be `authorization_code`.
-
-    If your token request fails for any reason, you will need to get another code from the authorization process.
-
-    This route will be changed in the future to move the `_internal` part to `v3`.
+    A detailed guide on OAuth has been published in [Modrinth's technical documentation](https://docs.modrinth.com/guide/oauth).

    ### Personal access tokens
    Personal access tokens (PATs) can be generated in from [the user settings](https://modrinth.com/settings/account).
@@ -1823,7 +1795,7 @@ components:
          description: Number of projects on Modrinth
        versions:
          type: integer
-          description: Number of projects on Modrinth
+          description: Number of versions on Modrinth
        files:
          type: integer
          description: Number of version files on Modrinth
@@ -3018,6 +2990,24 @@ paths:
                $ref: '#/components/schemas/InvalidInputError'
        '404':
          description: The requested item(s) were not found or no authorization to access the requested item(s)
+    delete:
+      summary: Remove user's avatar
+      operationId: deleteUserIcon
+      tags:
+        - users
+      security:
+        - TokenAuth: ['USER_WRITE']
+      responses:
+        '204':
+          description: Expected response to a valid request
+        '400':
+          description: Request was invalid, see given error
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/InvalidInputError'
+        '404':
+          description: The requested item(s) were not found or no authorization to access the requested item(s)
  /user/{id|username}/projects:
    parameters:
      - $ref: '#/components/parameters/UserIdentifier'
--- a/apps/docs/src/content.config.ts
+++ b/apps/docs/src/content.config.ts
@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+import { docsLoader } from '@astrojs/starlight/loaders';
+import { docsSchema } from '@astrojs/starlight/schema';
+
+export const collections = {
+  docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+};
--- a/apps/docs/src/content/config.ts
+++ b/apps/docs/src/content/config.ts
@@ -1,6 +0,0 @@
-import { defineCollection } from 'astro:content'
-import { docsSchema } from '@astrojs/starlight/schema'
-
-export const collections = {
-  docs: defineCollection({ schema: docsSchema() }),
-}
--- a/apps/docs/src/content/docs/guide/oauth.md
+++ b/apps/docs/src/content/docs/guide/oauth.md
@@ -0,0 +1,95 @@
+---
+title: The hitchhiker's guide to OAuth
+description: Guide for using Modrinth OAuth to interact with the API on users' behalf.
+---
+
+Modrinth allows developers to create applications which, once authorized by a Modrinth user, let the developer interact with the API on their behalf. The flow used to get an API token is based on the OAuth 2 protocol. It is recommended that most people use an existing OAuth library to handle the authentication. If you want to implement it from scratch, you will need to look into [RFC 6749]. If the only user of the application is yourself, a personal access token (PAT) may be a better fit.
+
+If you're familiar with OAuth 2, these are the URLs you will need:
+
+| Name               | URL                                              |
+|--------------------|--------------------------------------------------|
+| Authorization page | `https://modrinth.com/auth/authorize`            |
+| Token exchange     | `https://api.modrinth.com/_internal/oauth/token` |
+
+The flow will generally look like this:
+
+1. User is redirected to Modrinth to authorize your application
+2. User is redirected back to your site after authorizing, with an authorization code
+3. Your backend exchanges this code for an access token
+
+## Register your application
+
+To start off, you need to [register an application] in Modrinth's systems. The settings chosen here can always be changed later. You need to select what permissions you need, called scopes. For security reasons you will want to select only the scopes you need. See the [principle of least privilege].
+
+In addition to name and scopes, you will also need to add one or more redirect URIs. These are the URIs that the user can be redirected to after they authorize your application.
+
+After you've registered your application, it is important that you take note of the client secret somewhere safe. If the client secret is to ever leak, it is important that you regenerate it to ensure the security of your authorized users. If your client secret or access tokens are found exposed in the wild, your application may be disabled without prior notice.
+
+## Getting authorization
+
+Once the user is ready to authorize your application, you need to construct a URL to redirect them to. The authorization URL for Modrinth is `https://api.modrinth.com/_internal/oauth/token`. Supply the following query parameters:
+
+| Query parameter | Description                                                                               |
+|-----------------|-------------------------------------------------------------------------------------------|
+| `response_type` | In Modrinth this always needs to be `code`, since only code grants are supported          |
+| `client_id`     | The application identifier found in the settings                                          |
+| `scope`         | The permissions you need access to                                                        |
+| `state`         | A mechanism to prevent certain attacks. Explained further below. Recommended but optional |
+| `redirect_uri`  | The URI the user is redirect to after finishing authorization                             |
+
+You might have noticed the `state` parameter. [CSRF] (Cross-site request forgery), and [clickjacking] are security vulnerabilities that you're recommended to protect against. In OAuth2 this is usually done with the `state` parameter. When the user initiates a request to start authorization, you include a `state` which is unique to this request. This can, for example, be saved in localStorge or a cookie. When the redirect URI is called, you verify that the `state` parameter is the same. Using `state` is optional, but recommended.
+
+The scope identifiers are currently best found in the backend source code located at [`apps/labrinth/src/models/v3/pats.rs`]. The scope parameter is an array of scope identifiers, seperated by a plus sign (`+`).
+
+The redirect URI is the endpoint on your server that will receive the code which can eventually be used to act on the user's behalf. For security reasons the redirect URI used has to be allowlisted in your application settings. The redirect will contain the following query parameters:
+
+| Query parameter | Description                                        |
+|-----------------|----------------------------------------------------|
+| `code`          | The code that can be exchanged for an access token |
+| `client_id`     | Your client id                                     |
+| `redirect_uri`  | The redirect URI which was used                    |
+| `grant_type`    | Always `authorization_code` in Modrinth            |
+
+## Exchanging tokens
+
+If you've followed the previous section on getting authorization, you should now have an authorization code. Before you can access the API, you need to exchange this code for an access token. This is done by sending a POST request to the exchange token endpoint, `https://api.modrinth.com/_internal/oauth/token`. This request has to be of type urlencoded form. Make sure the `Content-Type` header is set to `application/x-www-form-urlencoded`. To authenticate this request you need to place your client secret in the `Authorization` header.
+
+In the body use these fields:
+
+| Field          | Description                                                  |
+|----------------|--------------------------------------------------------------|
+| `code`         | The authorization code                                       |
+| `client_id`    | Your client id, the same as in the authorization request     |
+| `redirect_uri` | The redirect URI which was redirected to after authorization |
+| `grant_type`   | Always `authorization_code` in Modrinth                      |
+
+If the request succeeds, you should receive a JSON payload with these fields:
+
+| Field          | Description                                          |
+|----------------|------------------------------------------------------|
+| `access_token` | The access token you can use to access the API       |
+| `token_type`   | Currently only `Bearer`                              |
+| `expires_in`   | The amount of seconds until the access token expires |
+
+To use this access token, you attach it to API requests in the `Authorization` header. To get basic information about the authorizer, you can use the [`/user` endpoint], which automatically gets the user from the header.
+
+If you have any questions, you're welcome to ask in #api-development in the [Discord guild], or create a ticket on the [support portal].
+
+[RFC 6749]: https://datatracker.ietf.org/doc/html/rfc6749
+
+[register an application]: https://modrinth.com/settings/applications
+
+[principle of least privilege]: https://en.wikipedia.org/wiki/Principle_of_least_privilege
+
+[`apps/labrinth/src/models/v3/pats.rs`]: https://github.com/modrinth/code/blob/main/apps/labrinth/src/models/v3/pats.rs
+
+[CSRF]: https://en.wikipedia.org/wiki/Cross-site_request_forgery
+
+[Clickjacking]: https://en.wikipedia.org/wiki/Clickjacking
+
+[`/user` endpoint]: https://docs.modrinth.com/api/operations/getuserfromauth/
+
+[Discord guild]: https://discord.modrinth.com
+
+[support portal]: https://support.modrinth.com/en/
--- a/apps/frontend/.env.example
+++ b/apps/frontend/.env.example
@@ -1,2 +1,3 @@
 BASE_URL=https://api.modrinth.com/v2/
 BROWSER_BASE_URL=https://api.modrinth.com/v2/
+PYRO_BASE_URL=https://archon.modrinth.com/
--- a/apps/frontend/nuxt.config.ts
+++ b/apps/frontend/nuxt.config.ts
@@ -126,6 +126,7 @@ export default defineNuxtConfig({
        homePageSearch?: any[];
        homePageNotifs?: any[];
        products?: any[];
+        errors?: number[];
      } = {};

      try {
@@ -157,6 +158,14 @@ export default defineNuxtConfig({
        },
      };

+      const caughtErrorCodes = new Set<number>();
+
+      function handleFetchError(err: any, defaultValue: any) {
+        console.error("Error generating state: ", err);
+        caughtErrorCodes.add(err.status);
+        return defaultValue;
+      }
+
      const [
        categories,
        loaders,
@@ -168,15 +177,25 @@ export default defineNuxtConfig({
        homePageNotifs,
        products,
      ] = await Promise.all([
-        $fetch(`${API_URL}tag/category`, headers),
-        $fetch(`${API_URL}tag/loader`, headers),
-        $fetch(`${API_URL}tag/game_version`, headers),
-        $fetch(`${API_URL}tag/donation_platform`, headers),
-        $fetch(`${API_URL}tag/report_type`, headers),
-        $fetch(`${API_URL}projects_random?count=60`, headers),
-        $fetch(`${API_URL}search?limit=3&query=leave&index=relevance`, headers),
-        $fetch(`${API_URL}search?limit=3&query=&index=updated`, headers),
-        $fetch(`${API_URL.replace("/v2/", "/_internal/")}billing/products`, headers),
+        $fetch(`${API_URL}tag/category`, headers).catch((err) => handleFetchError(err, [])),
+        $fetch(`${API_URL}tag/loader`, headers).catch((err) => handleFetchError(err, [])),
+        $fetch(`${API_URL}tag/game_version`, headers).catch((err) => handleFetchError(err, [])),
+        $fetch(`${API_URL}tag/donation_platform`, headers).catch((err) =>
+          handleFetchError(err, []),
+        ),
+        $fetch(`${API_URL}tag/report_type`, headers).catch((err) => handleFetchError(err, [])),
+        $fetch(`${API_URL}projects_random?count=60`, headers).catch((err) =>
+          handleFetchError(err, []),
+        ),
+        $fetch(`${API_URL}search?limit=3&query=leave&index=relevance`, headers).catch((err) =>
+          handleFetchError(err, {}),
+        ),
+        $fetch(`${API_URL}search?limit=3&query=&index=updated`, headers).catch((err) =>
+          handleFetchError(err, {}),
+        ),
+        $fetch(`${API_URL.replace("/v2/", "/_internal/")}billing/products`, headers).catch((err) =>
+          handleFetchError(err, []),
+        ),
      ]);

      state.categories = categories;
@@ -188,6 +207,7 @@ export default defineNuxtConfig({
      state.homePageSearch = homePageSearch;
      state.homePageNotifs = homePageNotifs;
      state.products = products;
+      state.errors = [...caughtErrorCodes];

      await fs.writeFile("./src/generated/state.json", JSON.stringify(state));

--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -10,7 +10,7 @@
    "postinstall": "nuxi prepare",
    "lint": "eslint . && prettier --check .",
    "fix": "eslint . --fix && prettier --write .",
-    "intl:extract": "formatjs extract \"{,src/components,src/composables,src/layouts,src/middleware,src/modules,src/pages,src/plugins,src/utils}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore '**/*.d.ts' --ignore 'node_modules' --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace"
+    "intl:extract": "formatjs extract \"{,src/components,src/composables,src/layouts,src/middleware,src/modules,src/pages,src/plugins,src/utils}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" \"src/error.vue\" --ignore '**/*.d.ts' --ignore 'node_modules' --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace"
  },
  "devDependencies": {
    "@formatjs/cli": "^6.2.12",
@@ -57,6 +57,8 @@
    "pinia": "^2.1.7",
    "qrcode.vue": "^3.4.0",
    "semver": "^7.5.4",
+    "three": "^0.172.0",
+    "@types/three": "^0.172.0",
    "vue-multiselect": "3.0.0-alpha.2",
    "vue-typed-virtual-list": "^1.0.10",
    "vue3-ace-editor": "^2.2.4",
--- a/apps/frontend/src/assets/images/utils/align-left.svg
+++ b/apps/frontend/src/assets/images/utils/align-left.svg
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <line x1="21" y1="6" x2="3" y2="6"></line>
-  <line x1="15" y1="12" x2="3" y2="12"></line>
-  <line x1="17" y1="18" x2="3" y2="18"></line>
-
-</svg>
--- a/apps/frontend/src/assets/images/utils/archive.svg
+++ b/apps/frontend/src/assets/images/utils/archive.svg
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <rect x="2" y="4" width="20" height="5" rx="2"></rect>
-  <path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"></path>
-  <path d="M10 13h4"></path>
-
-</svg>
--- a/apps/frontend/src/assets/images/utils/asterisk.svg
+++ b/apps/frontend/src/assets/images/utils/asterisk.svg
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M12 6v12"></path>
-  <path d="M17.196 9 6.804 15"></path>
-  <path d="m6.804 9 10.392 6"></path>
-
-</svg>
--- a/apps/frontend/src/assets/images/utils/bell-ring.svg
+++ b/apps/frontend/src/assets/images/utils/bell-ring.svg
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
-  <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
-  <path d="M2 8c0-2.2.7-4.3 2-6"></path>
-  <path d="M22 8a10 10 0 0 0-2-6"></path>
-
-</svg>
--- a/apps/frontend/src/assets/images/utils/bell.svg
+++ b/apps/frontend/src/assets/images/utils/bell.svg
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
-  <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
-
-</svg>
--- a/apps/frontend/src/assets/images/utils/box.svg
+++ b/apps/frontend/src/assets/images/utils/box.svg
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
-  <polyline points="3.29 7 12 12 20.71 7"></polyline>
-  <line x1="12" y1="22" x2="12" y2="12"></line>
-
-</svg>
--- a/apps/frontend/src/assets/images/utils/calendar-clock.svg
+++ b/apps/frontend/src/assets/images/utils/calendar-clock.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-clock"><path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h5"/><path d="M17.5 17.5 16 16.25V14"/><path d="M22 16a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z"/></svg>
--- a/apps/frontend/src/assets/images/utils/calendar.svg
+++ b/apps/frontend/src/assets/images/utils/calendar.svg
@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path
-		d="M8 7V3M16 7V3M7 11H17M5 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V19C3 20.1046 3.89543 21 5 21Z"
-		stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-</svg>
--- a/apps/frontend/src/assets/images/utils/chart.svg
+++ b/apps/frontend/src/assets/images/utils/chart.svg
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M3 3v18h18"></path>
-  <path d="M18 17V9"></path>
-  <path d="M13 17V5"></path>
-  <path d="M8 17v-3"></path>
-
-</svg>
--- a/apps/frontend/src/assets/images/utils/check-circle.svg
+++ b/apps/frontend/src/assets/images/utils/check-circle.svg
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
-  <path d="m9 12 2 2 4-4"></path>
-</svg>
--- a/apps/frontend/src/assets/images/utils/check.svg
+++ b/apps/frontend/src/assets/images/utils/check.svg
@@ -1,4 +0,0 @@
-<svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-	viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-	<path d="M20 6L9 17l-5-5" />
-</svg>
--- a/apps/frontend/src/assets/images/utils/chevron-left.svg
+++ b/apps/frontend/src/assets/images/utils/chevron-left.svg
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <polyline points="15 18 9 12 15 6"></polyline>
-
-</svg>
--- a/apps/frontend/src/assets/images/utils/chevron-right.svg
+++ b/apps/frontend/src/assets/images/utils/chevron-right.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
--- a/apps/frontend/src/assets/images/utils/clear.svg
+++ b/apps/frontend/src/assets/images/utils/clear.svg
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <circle cx="12" cy="12" r="10"></circle>
-  <line x1="15" y1="9" x2="9" y2="15"></line>
-  <line x1="9" y1="9" x2="15" y2="15"></line>
-</svg>
--- a/apps/frontend/src/assets/images/utils/client.svg
+++ b/apps/frontend/src/assets/images/utils/client.svg
@@ -1,4 +0,0 @@
-<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-    d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-</svg>
--- a/apps/frontend/src/assets/images/utils/clipboard-copy.svg
+++ b/apps/frontend/src/assets/images/utils/clipboard-copy.svg
@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" /></svg>
--- a/apps/frontend/src/assets/images/utils/coins.svg
+++ b/apps/frontend/src/assets/images/utils/coins.svg
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <circle cx="8" cy="8" r="6"></circle>
-  <path d="M18.09 10.37A6 6 0 1 1 10.34 18"></path>
-  <path d="M7 6h1v4"></path>
-  <path d="m16.71 13.88.7.71-2.82 2.82"></path>
-
-</svg>
--- a/apps/frontend/src/assets/images/utils/contract.svg
+++ b/apps/frontend/src/assets/images/utils/contract.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24" xml:space="preserve"><path d="M9 5v4m0 0H5m4 0L4 4m11 1v4m0 0h4m-4 0 5-5M9 19v-4m0 0H5m4 0-5 5m11-5 5 5m-5-5v4m0-4h4" style="fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"/></svg>
--- a/apps/frontend/src/assets/images/utils/copyright.svg
+++ b/apps/frontend/src/assets/images/utils/copyright.svg
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <circle cx="12" cy="12" r="10"></circle>
-  <path d="M15 9.354a4 4 0 1 0 0 5.292"></path>
-
-</svg>
--- a/apps/frontend/src/assets/images/utils/currency.svg
+++ b/apps/frontend/src/assets/images/utils/currency.svg
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <line x1="12" y1="2" x2="12" y2="22"></line>
-  <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
-
-</svg>
--- a/apps/frontend/src/assets/images/utils/dashboard.svg
+++ b/apps/frontend/src/assets/images/utils/dashboard.svg
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <rect x="3" y="3" width="7" height="9"></rect>
-  <rect x="14" y="3" width="7" height="5"></rect>
-  <rect x="14" y="12" width="7" height="9"></rect>
-  <rect x="3" y="16" width="7" height="5"></rect>
-
-</svg>
--- a/apps/frontend/src/assets/images/utils/download.svg
+++ b/apps/frontend/src/assets/images/utils/download.svg
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-</svg>
--- a/apps/frontend/src/assets/images/utils/dropdown.svg
+++ b/apps/frontend/src/assets/images/utils/dropdown.svg
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path d="M19 9L12 16L5 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-</svg>
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-clock"><path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h5"/><path d="M17.5 17.5 16 16.25V14"/><path d="M22 16a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z"/></svg>`
				`@@ -1 +0,0 @@`
				`<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" /></svg>`