fix: qa

2026-07-31 13:16:38 +00:00 · 2026-07-31 14:08:20 +01:00 · 2026-07-31 14:07:21 +01:00 · 2026-07-31 13:53:24 +01:00 · 2026-07-31 13:52:45 +01:00 · 2026-07-31 13:45:26 +01:00
2164 changed files with 267477 additions and 58502 deletions
@@ -1,5 +1,5 @@
 # Windows has stack overflows when calling from Tauri, so we increase the default stack size used by the compiler
-[target.'cfg(windows)']
+[target."cfg(windows)"]
 rustflags = ["-C", "link-args=/STACK:16777220"]

 [target.x86_64-pc-windows-msvc]
@@ -81,6 +81,6 @@ Please follow these rules precisely:
 Use existing patterns from our codebase:

 - Variables/plurals: see `apps/frontend/src/pages/frog.vue`
- Rich-text link tags: see `apps/frontend/src/pages/auth/welcome.vue` and `apps/frontend/src/error.vue`
+- Rich-text link tags: see `apps/frontend/src/error.vue`

 When you finish, there should be no hard-coded English strings left in the template—everything comes from `formatMessage` or `<IntlFormatted>`.
@@ -27,7 +27,7 @@ jobs:
      BUMP_TYPE: minor
    steps:
      - name: Check out code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with:
          fetch-depth: 0

@@ -47,7 +47,7 @@ jobs:

      - name: Setup Node
        if: steps.changes.outputs.changed == 'true'
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
        with:
          node-version-file: .nvmrc
          registry-url: https://registry.npmjs.org
@@ -63,7 +63,7 @@ jobs:

      - name: Restore pnpm cache
        if: steps.changes.outputs.changed == 'true'
-        uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
        with:
          path: ${{ steps.pnpm-store.outputs.store-path }}
          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
@@ -14,7 +14,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@85880fa0301c86cca9da44039ee3bb12d3bedbfa # 0.12.1
+        uses: styfle/cancel-workflow-action@d07a454dad7609a92316b57b23c9ccfd4f59af66 # 0.13.1
        with:
          workflow_id: all
          access_token: ${{ secrets.GITHUB_TOKEN }}
@@ -17,7 +17,7 @@ jobs:

    steps:
      - name: Post or update changelog comment
-        uses: actions/github-script@d746ffe35508b1917358783b479e04febd2b8f71 # v9.0.0
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
        with:
          github-token: ${{ secrets.CROWDIN_GH_TOKEN }}
          script: |
@@ -12,15 +12,15 @@ jobs:
  typos:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-      - uses: crate-ci/typos@6ac2ebd1b93eade61faf7e12688ad87a073fea59 # v1.46.0
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: crate-ci/typos@bee27e3a4fd1ea2111cf90ab89cd076c870fce14 # v1.48.0

  # see <https://github.com/influxdata/datafusion-udf-wasm/pull/275>
  tombi:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-      - uses: taiki-e/install-action@b5fddbb5361bce8a06fb168c9d403a6cc552b084 # v2.75.29
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: taiki-e/install-action@fd2f5e3d644b484055ebf4268f474c565f148f25 # v2.81.9
        with:
          tool: tombi
      - run: tombi lint
@@ -6,14 +6,15 @@ on:

 env:
  CARGO_TERM_COLOR: always
+  CARGO_INCREMENTAL: 0
  SQLX_OFFLINE: true

 jobs:
  shear:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-      - uses: dtolnay/rust-toolchain@29eef336d9b2848a0b548edc03f92a220660cdb8 # stable
-      - uses: cargo-bins/cargo-binstall@dc19f1e48450eefe5a29b8da6c6b00a87d730b37 # v1.18.1
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: dtolnay/rust-toolchain@4cda84d5c5c54efe2404f9d843567869ab1699d4 # stable
+      - uses: cargo-bins/cargo-binstall@ead08b90bd7b2e6d81963fb9cf0b7239f66d5db4 # v1.21.0
      - run: cargo binstall --no-confirm cargo-shear
      - run: cargo shear
@@ -35,7 +35,7 @@ jobs:
    if: ${{ always() }}
    steps:
      - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1

      - name: Check if workflow runs on an internal branch
        id: check-internal
@@ -72,49 +72,21 @@ jobs:
          fi

  docker:
-    runs-on: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'blacksmith-4vcpu-ubuntu-2404' || 'ubuntu-latest' }}
-    env:
-      SCCACHE_DIR: ${{ needs.skip-if-clean.outputs.internal == 'true' && '/mnt/sccache' || '' }}
-      SCCACHE_CACHE_SIZE: ${{ needs.skip-if-clean.outputs.internal == 'true' && '10G' || '' }}
-      SCCACHE_MULTILEVEL_CHAIN: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'disk,s3' || '' }}
-      SCCACHE_S3_KEY_PREFIX: ${{ needs.skip-if-clean.outputs.internal == 'true' && format('{0}/', github.repository) || '' }}
-      SCCACHE_BUCKET: ${{ secrets.SCCACHE_BUCKET }}
-      SCCACHE_REGION: ${{ secrets.SCCACHE_REGION }}
-      SCCACHE_ENDPOINT: ${{ secrets.SCCACHE_ENDPOINT }}
-      AWS_ACCESS_KEY_ID: ${{ secrets.SCCACHE_S3_ACCESS_KEY_ID }}
-      AWS_SECRET_ACCESS_KEY: ${{ secrets.SCCACHE_S3_SECRET_ACCESS_KEY }}
-      RUSTC_WRAPPER: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'sccache' || '' }}
+    runs-on: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'namespace-profile-medium-amd64' || 'ubuntu-latest' }}
    needs: [skip-if-clean]
    if: ${{ needs.skip-if-clean.outputs.skip != 'true' }}
    steps:
      - name: Check out code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1

      - name: Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
+        uses: actions-rust-lang/setup-rust-toolchain@166cdcfd11aee3cb47222f9ddb555ce30ddb9659 # v1.17.0
        with:
          rustflags: ''
          cache: false

-      - name: Cache Cargo registry and index
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
-        with:
-          path: |
-            ~/.cargo/registry
-            ~/.cargo/git
-            ~/.cargo/bin
-          key: ${{ runner.os }}-${{ runner.arch }}-cargo-${{ hashFiles('**/Cargo.lock') }}
-
-      - name: Mount sccache disk cache
-        if: needs.skip-if-clean.outputs.internal == 'true'
-        uses: useblacksmith/stickydisk@13af8883542ca949a717e70fef89d15edbb29d88 # v1.2.0
-        with:
-          key: ${{ github.repository }}-daedalus-sccache
-          path: /mnt/sccache
-
-      - name: Setup sccache
-        if: needs.skip-if-clean.outputs.internal == 'true'
-        uses: mozilla-actions/sccache-action@9e7fa8a12102821edf02ca5dbea1acd0f89a2696 # v0.0.10
+      - name: Setup mold
+        uses: rui314/setup-mold@9c9c13bf4c3f1adef0cc596abc155580bcb04444 # v1 / Mold 2.41.0

      - name: Build daedalus_client
        run: cargo build --release --package daedalus_client
@@ -125,11 +97,11 @@ jobs:
          cp target/release/daedalus_client apps/daedalus_client/docker-stage/daedalus_client

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4.0.0
+        uses: docker/setup-buildx-action@bb05f3f5519dd87d3ba754cc423b652a5edd6d2c # v4.2.0

      - name: Generate Docker image metadata
        id: docker-meta
-        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf # v6.0.0
+        uses: docker/metadata-action@dc802804100637a589fabce1cb79ff13a1411302 # v6.2.0
        env:
          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
        with:
@@ -144,14 +116,14 @@ jobs:
            org.opencontainers.image.licenses=MIT

      - name: Login to GitHub Packages
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@abd2ef45e78c5afb21d64d4ca52ee8550d9572c7 # v4.5.1
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}

      - name: Build and push
-        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
+        uses: docker/build-push-action@53b7df96c91f9c12dcc8a07bcb9ccacbed38856a # v7.3.0
        with:
          context: ./apps/daedalus_client/docker-stage
          file: ./apps/daedalus_client/Dockerfile
@@ -12,10 +12,10 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1

      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@abd2ef45e78c5afb21d64d4ca52ee8550d9572c7 # v4.5.1
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
@@ -16,46 +16,68 @@ on:
  workflow_dispatch:
  workflow_call:
    inputs:
-      environment:
-        required: true
+      preview:
+        required: false
+        type: boolean
+        description: 'Whether this is a preview deployment'
+      head_sha:
+        required: false
        type: string
-        description: 'The environment to deploy to (staging-preview or production-preview)'
+        description: 'The commit SHA to deploy (defaults to github.sha)'
+      head_ref:
+        required: false
+        type: string
+        description: 'The branch name to deploy (defaults to github.ref_name)'
+      branch_alias:
+        required: false
+        type: string
+        description: 'The persistent preview alias for the branch'

 concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}-${{ inputs.environment || 'push' }}
+  group: ${{ github.workflow }}-${{ github.ref }}-${{ inputs.preview && 'preview' || 'push' }}
  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}

 jobs:
  deploy:
-    runs-on: blacksmith-2vcpu-ubuntu-2404
+    runs-on: namespace-profile-modrinth-frontend
    permissions:
      contents: read
      deployments: write
      pull-requests: write
    steps:
      - name: Checkout code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with:
          fetch-depth: 0

      - name: Configure environment
        id: meta
+        env:
+          PREVIEW_INPUT: ${{ inputs.preview }}
+          REF: ${{ github.ref }}
+          DEPLOY_SHA: ${{ inputs.head_sha || github.sha }}
+          BRANCH_ALIAS: ${{ inputs.branch_alias }}
        run: |
          echo "cmd=deploy" >> $GITHUB_OUTPUT

-          ENV_INPUT="${{ inputs.environment }}"
-          REF="${{ github.ref }}"
-          SHA_SHORT="${GITHUB_SHA::8}"
+          SHA_SHORT="${DEPLOY_SHA::8}"

-          if [ "$ENV_INPUT" = "staging-preview" ]; then
-            echo "env=staging" >> $GITHUB_OUTPUT
-            echo "url=https://git-$SHA_SHORT-frontend-staging.modrinth.workers.dev" >> $GITHUB_OUTPUT
-            echo "cmd=versions upload --preview-alias git-$SHA_SHORT --var PREVIEW:true" >> $GITHUB_OUTPUT
-
-          elif [ "$ENV_INPUT" = "production-preview" ]; then
+          if [ "$PREVIEW_INPUT" = "true" ]; then
+            URL="https://git-$SHA_SHORT-frontend.modrinth.workers.dev"
+            STAGING_URL="https://git-$SHA_SHORT-staging-frontend.modrinth.workers.dev"
            echo "env=production" >> $GITHUB_OUTPUT
-            echo "url=https://git-$SHA_SHORT-frontend.modrinth.workers.dev" >> $GITHUB_OUTPUT
-            echo "cmd=versions upload --preview-alias git-$SHA_SHORT --var PREVIEW:true" >> $GITHUB_OUTPUT
+            echo "url=$URL" >> $GITHUB_OUTPUT
+            echo "staging_url=$STAGING_URL" >> $GITHUB_OUTPUT
+            echo "cmd=versions upload --preview-alias git-$SHA_SHORT --var PREVIEW:true --var CF_PAGES_URL:$URL" >> $GITHUB_OUTPUT
+
+            STAGING_VARS=$(jq -r '.env.staging.vars | to_entries[] | "--var \(.key):\(.value)"' ./apps/frontend/wrangler.jsonc | tr '\n' ' ')
+            echo "staging_cmd=versions upload --preview-alias git-$SHA_SHORT-staging ${STAGING_VARS}--var PREVIEW:true --var CF_PAGES_URL:$STAGING_URL" >> $GITHUB_OUTPUT
+
+            if [ -n "$BRANCH_ALIAS" ]; then
+              echo "branch_alias_url=https://$BRANCH_ALIAS-frontend.modrinth.workers.dev" >> $GITHUB_OUTPUT
+              echo "staging_branch_alias_url=https://$BRANCH_ALIAS-staging-frontend.modrinth.workers.dev" >> $GITHUB_OUTPUT
+              echo "staging_branch_alias_cmd=versions upload --preview-alias $BRANCH_ALIAS-staging ${STAGING_VARS}--var PREVIEW:true --var CF_PAGES_URL:https://$BRANCH_ALIAS-staging-frontend.modrinth.workers.dev" >> $GITHUB_OUTPUT
+            fi

          elif [ "$REF" = "refs/heads/main" ]; then
            echo "env=staging" >> $GITHUB_OUTPUT
@@ -68,24 +90,23 @@ jobs:
          fi

      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
        with:
          node-version-file: .nvmrc

      - name: Enable Corepack
        run: corepack enable

-      - name: Get pnpm store path
-        id: pnpm-store
-        run: echo "store-path=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
-
-      - name: Restore pnpm cache
-        uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+      - name: Set up caches
+        uses: namespacelabs/nscloud-cache-action@c5f8dab7560444c4bf8dbc64f1b203431873c547 # v1.6.1
        with:
-          path: ${{ steps.pnpm-store.outputs.store-path }}
-          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            pnpm-cache-
+          cache: |
+            rust
+            pnpm
+            apt
+
+      - name: Set up Turborepo caching
+        uses: namespace-actions/setup-turbocache@f96bd6befa13ae74b2858a5be49573640d4636f5 # v0.0.2

      - name: Inject build variables
        working-directory: ./apps/frontend
@@ -106,15 +127,15 @@ jobs:
        working-directory: ./apps/frontend
        run: pnpm build
        env:
-          CF_PAGES_BRANCH: ${{ github.ref_name }}
-          CF_PAGES_COMMIT_SHA: ${{ github.sha }}
+          CF_PAGES_BRANCH: ${{ inputs.head_ref || github.ref_name }}
+          CF_PAGES_COMMIT_SHA: ${{ inputs.head_sha || github.sha }}
          CF_PAGES_URL: ${{ steps.meta.outputs.url }}
          BUILD_ENV: ${{ steps.meta.outputs.env }}
-          PREVIEW: ${{ inputs.environment != '' && 'true' || 'false' }}
+          PREVIEW: ${{ inputs.preview && 'true' || 'false' }}
          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}

      - name: Create Sentry release and upload sourcemaps
-        uses: getsentry/action-release@5657c9e888b4e2cc85f4d29143ea4131fde4a73a # v3.6.0
+        uses: getsentry/action-release@ff07929a6537bac57790c3451cf4d364aca38528 # v3.7.0
        env:
          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
          SENTRY_ORG: modrinth
@@ -124,17 +145,53 @@ jobs:
          sourcemaps: ./apps/frontend/.output/server
          url_prefix: '~/'

-      - name: Deploy Cloudflare Worker
-        id: wrangler
-        uses: cloudflare/wrangler-action@9acf94ace14e7dc412b076f2c5c20b8ce93c79cd # v3.15.0
+      - name: Install Wrangler CLI
+        uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 # v4.0.0
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}
          accountId: ${{ secrets.CF_ACCOUNT_ID }}
-          environment: ${{ steps.meta.outputs.env != 'production' && steps.meta.outputs.env || '' }}
          workingDirectory: ./apps/frontend
          packageManager: pnpm
-          wranglerVersion: '4.54.0'
-          command: ${{ steps.meta.outputs.cmd }}
+          wranglerVersion: '4.112.0'
+          command: --version
+
+      - parallel:
+          - name: Deploy Cloudflare Worker
+            id: wrangler
+            uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 # v4.0.0
+            with:
+              apiToken: ${{ secrets.CF_API_TOKEN }}
+              accountId: ${{ secrets.CF_ACCOUNT_ID }}
+              environment: ${{ steps.meta.outputs.env != 'production' && steps.meta.outputs.env || '' }}
+              workingDirectory: ./apps/frontend
+              command: ${{ steps.meta.outputs.cmd }}
+
+          - name: Deploy staging Cloudflare Worker preview
+            if: ${{ inputs.preview }}
+            uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 # v4.0.0
+            with:
+              apiToken: ${{ secrets.CF_API_TOKEN }}
+              accountId: ${{ secrets.CF_ACCOUNT_ID }}
+              workingDirectory: ./apps/frontend
+              command: ${{ steps.meta.outputs.staging_cmd }}
+
+          - name: Deploy persistent Cloudflare Worker preview
+            if: ${{ inputs.preview && inputs.branch_alias != '' }}
+            uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 # v4.0.0
+            with:
+              apiToken: ${{ secrets.CF_API_TOKEN }}
+              accountId: ${{ secrets.CF_ACCOUNT_ID }}
+              workingDirectory: ./apps/frontend
+              command: versions upload --preview-alias ${{ inputs.branch_alias }} --var PREVIEW:true --var CF_PAGES_URL:${{ steps.meta.outputs.branch_alias_url }}
+
+          - name: Deploy persistent staging Cloudflare Worker preview
+            if: ${{ inputs.preview && inputs.branch_alias != '' }}
+            uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 # v4.0.0
+            with:
+              apiToken: ${{ secrets.CF_API_TOKEN }}
+              accountId: ${{ secrets.CF_ACCOUNT_ID }}
+              workingDirectory: ./apps/frontend
+              command: ${{ steps.meta.outputs.staging_branch_alias_cmd }}

      - name: Purge cache
        if: github.ref == 'refs/heads/prod'
@@ -145,14 +202,23 @@ jobs:
            --data '{"hosts": ["modrinth.com", "www.modrinth.com", "staging.modrinth.com"]}' \
            https://api.cloudflare.com/client/v4/zones/e39df17b9c4ef44cbce2646346ee6d33/purge_cache

-      - name: Write deployment URL to file
-        if: ${{ inputs.environment != '' }}
+      - name: Write deployment URLs to files
+        if: ${{ inputs.preview }}
        run: |
-          echo "${{ steps.meta.outputs.url }}" > deployment-url-${{ inputs.environment }}.txt
+          echo "${{ steps.meta.outputs.url }}" > deployment-url-production.txt
+          echo "${{ steps.meta.outputs.staging_url }}" > deployment-url-staging.txt

-      - name: Upload deployment URL
-        if: ${{ inputs.environment != '' }}
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
-        with:
-          name: deployment-url-${{ inputs.environment }}
-          path: deployment-url-${{ inputs.environment }}.txt
+      - parallel:
+          - name: Upload production deployment URL
+            if: ${{ inputs.preview }}
+            uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+            with:
+              name: deployment-url-production
+              path: deployment-url-production.txt
+
+          - name: Upload staging deployment URL
+            if: ${{ inputs.preview }}
+            uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+            with:
+              name: deployment-url-staging
+              path: deployment-url-staging.txt
@@ -12,22 +12,34 @@ on:
      - '.github/workflows/frontend-preview.yml'

 jobs:
+  metadata:
+    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
+    runs-on: ubuntu-latest
+    outputs:
+      branch-alias: ${{ steps.meta.outputs.branch_alias }}
+    steps:
+      - name: Configure branch alias
+        id: meta
+        run: echo "branch_alias=pr-${{ github.event.pull_request.number }}" >> $GITHUB_OUTPUT
+
  deploy:
    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
+    needs: metadata
    uses: ./.github/workflows/frontend-deploy.yml
    secrets: inherit
    concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}-${{ matrix.environment }}
+      group: ${{ github.workflow }}-${{ github.ref }}-deploy
      cancel-in-progress: true
-    strategy:
-      matrix:
-        environment: [staging-preview, production-preview]
    with:
-      environment: ${{ matrix.environment }}
+      preview: true
+      head_sha: ${{ github.event.pull_request.head.sha }}
+      head_ref: ${{ github.event.pull_request.head.ref }}
+      branch_alias: ${{ needs.metadata.outputs.branch-alias }}

  deploy-storybook:
    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
-    runs-on: blacksmith-2vcpu-ubuntu-2404
+    needs: metadata
+    runs-on: namespace-profile-modrinth-frontend
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}-storybook
      cancel-in-progress: true
@@ -36,27 +48,21 @@ jobs:
      deployments: write
    steps:
      - name: Checkout code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1

      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
        with:
          node-version-file: .nvmrc

      - name: Enable Corepack
        run: corepack enable

-      - name: Get pnpm store path
-        id: pnpm-store
-        run: echo "store-path=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
-
-      - name: Restore pnpm cache
-        uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+      - name: Set up caches
+        uses: namespacelabs/nscloud-cache-action@c5f8dab7560444c4bf8dbc64f1b203431873c547 # v1.6.1
        with:
-          path: ${{ steps.pnpm-store.outputs.store-path }}
-          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            pnpm-cache-
+          cache: |
+            pnpm

      - name: Install dependencies
        working-directory: ./packages/ui
@@ -64,26 +70,53 @@ jobs:

      - name: Build Storybook
        working-directory: ./packages/ui
+        env:
+          NODE_OPTIONS: --max-old-space-size=6144
        run: pnpm run build-storybook

      - name: Configure short SHA
        id: meta
-        run: echo "sha_short=${GITHUB_SHA::8}" >> $GITHUB_OUTPUT
+        env:
+          HEAD_SHA: ${{ github.event.pull_request.head.sha }}
+        run: echo "sha_short=${HEAD_SHA::8}" >> $GITHUB_OUTPUT

-      - name: Deploy Storybook preview
-        uses: cloudflare/wrangler-action@9acf94ace14e7dc412b076f2c5c20b8ce93c79cd # v3.15.0
+      - name: Install Wrangler CLI
+        uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 # v4.0.0
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}
          accountId: ${{ secrets.CF_ACCOUNT_ID }}
          workingDirectory: ./packages/ui
          packageManager: pnpm
-          wranglerVersion: '4.54.0'
-          command: versions upload --preview-alias git-${{ steps.meta.outputs.sha_short }}
+          wranglerVersion: '4.112.0'
+          command: --version
+
+      - parallel:
+          - name: Deploy Storybook preview
+            uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 # v4.0.0
+            with:
+              apiToken: ${{ secrets.CF_API_TOKEN }}
+              accountId: ${{ secrets.CF_ACCOUNT_ID }}
+              workingDirectory: ./packages/ui
+              command: versions upload --preview-alias git-${{ steps.meta.outputs.sha_short }}
+
+          - name: Deploy persistent Storybook preview
+            uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 # v4.0.0
+            env:
+              NODE_OPTIONS: --max-old-space-size=6144
+            with:
+              apiToken: ${{ secrets.CF_API_TOKEN }}
+              accountId: ${{ secrets.CF_ACCOUNT_ID }}
+              workingDirectory: ./packages/ui
+              command: versions upload --preview-alias ${{ needs.metadata.outputs.branch-alias }}

  comment:
-    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
+    if: |
+      !cancelled()
+      && github.repository_owner == 'modrinth'
+      && github.event.pull_request.head.repo.full_name == github.repository
+      && needs.deploy.result == 'success'
    runs-on: ubuntu-latest
-    needs: [deploy, deploy-storybook]
+    needs: [metadata, deploy, deploy-storybook]
    steps:
      - name: Download deployment URLs
        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
@@ -93,16 +126,31 @@ jobs:

      - name: Read deployment URLs
        id: urls
+        env:
+          HEAD_SHA: ${{ github.event.pull_request.head.sha }}
+          BRANCH_ALIAS: ${{ needs.metadata.outputs.branch-alias }}
+          STORYBOOK_RESULT: ${{ needs.deploy-storybook.result }}
+          RUN_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
        run: |
-          STAGING_PREVIEW_URL=$(cat deployment-url-staging-preview.txt)
-          PRODUCTION_PREVIEW_URL=$(cat deployment-url-production-preview.txt)
+          STAGING_SHA_URL=$(cat deployment-url-staging.txt)
+          PRODUCTION_SHA_URL=$(cat deployment-url-production.txt)
+          STAGING_BRANCH_URL="https://$BRANCH_ALIAS-staging-frontend.modrinth.workers.dev"
+          PRODUCTION_BRANCH_URL="https://$BRANCH_ALIAS-frontend.modrinth.workers.dev"

-          echo "Production preview URL: $PRODUCTION_PREVIEW_URL"
-          echo "Staging preview URL: $STAGING_PREVIEW_URL"
+          if [ "$STORYBOOK_RESULT" = "success" ]; then
+            STORYBOOK_SHA_URL="https://git-${HEAD_SHA::8}-storybook.modrinth.workers.dev"
+            STORYBOOK_BRANCH_URL="https://$BRANCH_ALIAS-storybook.modrinth.workers.dev"
+          else
+            STORYBOOK_SHA_URL="⚠️ Deployment $STORYBOOK_RESULT ([logs]($RUN_URL))"
+            STORYBOOK_BRANCH_URL="⚠️ Deployment $STORYBOOK_RESULT ([logs]($RUN_URL))"
+          fi

-          echo "staging-preview-url=$STAGING_PREVIEW_URL" >> $GITHUB_OUTPUT
-          echo "production-preview-url=$PRODUCTION_PREVIEW_URL" >> $GITHUB_OUTPUT
-          echo "storybook-preview-url=https://git-${GITHUB_SHA::8}-storybook.modrinth.workers.dev" >> $GITHUB_OUTPUT
+          echo "staging-sha-url=$STAGING_SHA_URL" >> $GITHUB_OUTPUT
+          echo "production-sha-url=$PRODUCTION_SHA_URL" >> $GITHUB_OUTPUT
+          echo "storybook-sha-url=$STORYBOOK_SHA_URL" >> $GITHUB_OUTPUT
+          echo "staging-branch-url=$STAGING_BRANCH_URL" >> $GITHUB_OUTPUT
+          echo "production-branch-url=$PRODUCTION_BRANCH_URL" >> $GITHUB_OUTPUT
+          echo "storybook-branch-url=$STORYBOOK_BRANCH_URL" >> $GITHUB_OUTPUT

      - name: Find comment
        if: github.event_name == 'pull_request'
@@ -123,11 +171,21 @@ jobs:
          body: |
            ## Frontend previews

-            Last deployed commit is [${{ github.sha }}](${{ github.event.pull_request.head.repo.html_url }}/commit/${{ github.sha }})
+            Last deployed commit is [${{ github.event.pull_request.head.sha }}](${{ github.event.pull_request.head.repo.html_url }}/commit/${{ github.event.pull_request.head.sha }})
+
+            ### Persistent

            | Environment | URL |
            |-------------|-----|
-            | staging     | ${{ steps.urls.outputs.staging-preview-url }} |
-            | production  | ${{ steps.urls.outputs.production-preview-url }} |
-            | storybook   | ${{ steps.urls.outputs.storybook-preview-url }} |
+            | staging     | ${{ steps.urls.outputs.staging-branch-url }} |
+            | production  | ${{ steps.urls.outputs.production-branch-url }} |
+            | storybook   | ${{ steps.urls.outputs.storybook-branch-url }} |
+
+            ### Latest commit
+
+            | Environment | URL |
+            |-------------|-----|
+            | staging     | ${{ steps.urls.outputs.staging-sha-url }} |
+            | production  | ${{ steps.urls.outputs.production-sha-url }} |
+            | storybook   | ${{ steps.urls.outputs.storybook-sha-url }} |
          edit-mode: replace
@@ -51,13 +51,13 @@ jobs:
          CROWDIN_GH_TOKEN_DEFINED: ${{ secrets.CROWDIN_GH_TOKEN != '' }}

      - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with:
          ref: ${{ github.ref }}
          token: ${{ secrets.CROWDIN_GH_TOKEN }}

      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
        with:
          node-version-file: .nvmrc

@@ -90,7 +90,7 @@ jobs:
          echo "safe_branch_name=$SAFE_BRANCH_NAME" >> "$GITHUB_OUTPUT"

      - name: Download translations from Crowdin
-        uses: crowdin/github-action@8868a33591d21088edfc398968173a3b98d51706 # v2.16.2
+        uses: crowdin/github-action@c7af9bc98b01694653031fef2a0dc6c7888ce9bc # v2.17.0
        with:
          upload_sources: false
          upload_translations: false
@@ -56,13 +56,13 @@ jobs:
          CROWDIN_PERSONAL_TOKEN_DEFINED: ${{ secrets.CROWDIN_PERSONAL_TOKEN != '' }}

      - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with:
          ref: ${{ github.ref }}
          fetch-depth: 2

      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
        with:
          node-version-file: .nvmrc

@@ -83,7 +83,7 @@ jobs:
          echo "safe_branch_name=$SAFE_BRANCH_NAME" >> "$GITHUB_OUTPUT"

      - name: Upload translations to Crowdin
-        uses: crowdin/github-action@8868a33591d21088edfc398968173a3b98d51706 # v2.16.2
+        uses: crowdin/github-action@c7af9bc98b01694653031fef2a0dc6c7888ce9bc # v2.17.0
        with:
          upload_sources: true
          upload_translations: false
@@ -33,7 +33,7 @@ jobs:
    if: ${{ always() }}
    steps:
      - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1

      - name: Check if workflow runs on an internal branch
        id: check-internal
@@ -70,28 +70,21 @@ jobs:
          fi

  docker:
-    runs-on: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'blacksmith-4vcpu-ubuntu-2404' || 'ubuntu-latest' }}
+    runs-on: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'namespace-profile-modrinth-labrinth' || 'ubuntu-latest' }}
    needs: [skip-if-clean]
    if: ${{ needs.skip-if-clean.outputs.skip != 'true' }}
    env:
      SQLX_OFFLINE: 'true'
      GIT_HASH: ${{ github.sha }}
-      SCCACHE_DIR: ${{ needs.skip-if-clean.outputs.internal == 'true' && '/mnt/sccache' || '' }}
-      SCCACHE_CACHE_SIZE: ${{ needs.skip-if-clean.outputs.internal == 'true' && '10G' || '' }}
-      SCCACHE_MULTILEVEL_CHAIN: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'disk,s3' || '' }}
-      SCCACHE_S3_KEY_PREFIX: ${{ needs.skip-if-clean.outputs.internal == 'true' && format('{0}/', github.repository) || '' }}
-      SCCACHE_BUCKET: ${{ secrets.SCCACHE_BUCKET }}
-      SCCACHE_REGION: ${{ secrets.SCCACHE_REGION }}
-      SCCACHE_ENDPOINT: ${{ secrets.SCCACHE_ENDPOINT }}
-      AWS_ACCESS_KEY_ID: ${{ secrets.SCCACHE_S3_ACCESS_KEY_ID }}
-      AWS_SECRET_ACCESS_KEY: ${{ secrets.SCCACHE_S3_SECRET_ACCESS_KEY }}
+      SCCACHE_CACHE_SIZE: ${{ needs.skip-if-clean.outputs.internal == 'true' && '20G' || '' }}
      RUSTC_WRAPPER: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'sccache' || '' }}
+      RUST_MIN_STACK: '16777216'
    steps:
      - name: Check out code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1

      - name: Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
+        uses: actions-rust-lang/setup-rust-toolchain@166cdcfd11aee3cb47222f9ddb555ce30ddb9659 # v1.17.0
        with:
          rustflags: ''
          cache: false
@@ -99,26 +92,24 @@ jobs:
      - name: Setup mold
        uses: rui314/setup-mold@9c9c13bf4c3f1adef0cc596abc155580bcb04444 # v1 / Mold 2.41.0

-      - name: Cache Cargo registry and index
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
-        with:
-          path: |
-            ~/.cargo/registry
-            ~/.cargo/git
-            ~/.cargo/bin
-          key: ${{ runner.os }}-${{ runner.arch }}-cargo-${{ hashFiles('**/Cargo.lock') }}
-
-      - name: Mount sccache disk cache
-        if: needs.skip-if-clean.outputs.internal == 'true'
-        uses: useblacksmith/stickydisk@13af8883542ca949a717e70fef89d15edbb29d88 # v1.2.0
-        with:
-          key: ${{ github.repository }}-labrinth-sccache
-          path: /mnt/sccache
-
      - name: Setup sccache
-        if: needs.skip-if-clean.outputs.internal == 'true'
        uses: mozilla-actions/sccache-action@9e7fa8a12102821edf02ca5dbea1acd0f89a2696 # v0.0.10

+      - name: Set up caches
+        if: needs.skip-if-clean.outputs.internal == 'true'
+        uses: namespacelabs/nscloud-cache-action@c5f8dab7560444c4bf8dbc64f1b203431873c547 # v1.6.1
+        with:
+          cache: |
+            rust
+            apt
+
+      - name: Configure sccache
+        if: needs.skip-if-clean.outputs.internal == 'true'
+        run: nsc cache sccache setup --cache_name default >> "$GITHUB_ENV"
+
+      - name: Install build dependencies
+        run: sudo apt-get update && sudo apt-get install -y --no-install-recommends cmake libcurl4-openssl-dev
+
      - name: Build labrinth
        run: cargo build --profile release-labrinth --package labrinth

@@ -130,11 +121,11 @@ jobs:
          cp -r apps/labrinth/assets apps/labrinth/docker-stage/assets

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4.0.0
+        uses: docker/setup-buildx-action@bb05f3f5519dd87d3ba754cc423b652a5edd6d2c # v4.2.0

      - name: Generate Docker image metadata
        id: docker-meta
-        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf # v6.0.0
+        uses: docker/metadata-action@dc802804100637a589fabce1cb79ff13a1411302 # v6.2.0
        env:
          # GitHub Packages requires annotations metadata in at least the index descriptor to show them
          # up properly in its UI it seems, but it's not clear about it, because the docs refer to the
@@ -153,14 +144,14 @@ jobs:
            org.opencontainers.image.licenses=AGPL-3.0-only

      - name: Login to GitHub Packages
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@abd2ef45e78c5afb21d64d4ca52ee8550d9572c7 # v4.5.1
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}

      - name: Build and push
-        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
+        uses: docker/build-push-action@53b7df96c91f9c12dcc8a07bcb9ccacbed38856a # v7.3.0
        with:
          context: ./apps/labrinth/docker-stage
          file: ./apps/labrinth/Dockerfile
@@ -1,41 +0,0 @@
-name: Prepare pnpm cache
-
-on:
-  push:
-    paths:
-      - .github/workflows/prepare-pnpm-cache.yml
-      - package.json
-      - pnpm-lock.yaml
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
-
-jobs:
-  prepare:
-    if: github.repository_owner == 'modrinth'
-    runs-on: blacksmith-2vcpu-ubuntu-2404
-    steps:
-      - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: .nvmrc
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Get pnpm store path
-        id: pnpm-store
-        run: echo "store-path=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
-
-      - name: Cache pnpm
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
-        with:
-          path: ${{ steps.pnpm-store.outputs.store-path }}
-          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-
-      - name: Install dependencies
-        run: pnpm recursive install --frozen-lockfile
@@ -30,6 +30,10 @@ on:
          - prod-with-staging-archon
        default: prod
        required: false
+      app-version-override:
+        description: Temporary app version override for updater testing
+        type: string
+        required: false

 concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
@@ -40,57 +44,62 @@ jobs:
    name: Build
    env:
      VITE_STRIPE_PUBLISHABLE_KEY: pk_live_51JbFxJJygY5LJFfKLVVldb10HlLt24p421OWRsTOWc5sXYFOnFUXWieSc6HD3PHo25ktx8db1WcHr36XGFvZFVUz00V9ixrCs5
-      # SCCACHE_DIR: '/mnt/sccache'
-      # SCCACHE_CACHE_SIZE: '10G'
-      # SCCACHE_MULTILEVEL_CHAIN: 'disk,s3'
-      SCCACHE_S3_KEY_PREFIX: '${{ github.repository }}/'
-      SCCACHE_BUCKET: ${{ secrets.SCCACHE_BUCKET }}
-      SCCACHE_REGION: ${{ secrets.SCCACHE_REGION }}
-      SCCACHE_ENDPOINT: ${{ secrets.SCCACHE_ENDPOINT }}
-      AWS_ACCESS_KEY_ID: ${{ secrets.SCCACHE_S3_ACCESS_KEY_ID }}
-      AWS_SECRET_ACCESS_KEY: ${{ secrets.SCCACHE_S3_SECRET_ACCESS_KEY }}
      RUSTC_WRAPPER: 'sccache'
    strategy:
      fail-fast: false
      matrix:
-        platform: [
-            blacksmith-6vcpu-macos-26,
-            blacksmith-8vcpu-windows-2025, # At time of writing, Windows 4 vCPU VMs don't seem to actually exist
-            blacksmith-4vcpu-ubuntu-2404,
+        platform:
+          [
+            namespace-profile-medium-amd64-macos,
+            namespace-profile-medium-amd64-windows,
+            namespace-profile-medium-amd64,
          ]
        include:
-          - platform: blacksmith-6vcpu-macos-26
+          - platform: namespace-profile-medium-amd64-macos
            artifact-target-name: universal-apple-darwin
-          - platform: blacksmith-8vcpu-windows-2025
+          - platform: namespace-profile-medium-amd64-windows
            artifact-target-name: x86_64-pc-windows-msvc
-          - platform: blacksmith-4vcpu-ubuntu-2404
+          - platform: namespace-profile-medium-amd64
            artifact-target-name: x86_64-unknown-linux-gnu

    runs-on: ${{ matrix.platform }}

    steps:
      - name: Check out code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with:
          fetch-depth: 0

      - name: Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
+        uses: actions-rust-lang/setup-rust-toolchain@166cdcfd11aee3cb47222f9ddb555ce30ddb9659 # v1.17.0
        with:
          rustflags: ''
-          target: ${{ contains(matrix.platform, 'macos') && 'x86_64-apple-darwin' || '' }}
+          target: ${{ contains(matrix.artifact-target-name, 'darwin') && 'x86_64-apple-darwin' || '' }}
+
+      - name: Setup mold
+        if: contains(matrix.artifact-target-name, 'linux')
+        uses: rui314/setup-mold@9c9c13bf4c3f1adef0cc596abc155580bcb04444 # v1 / Mold 2.41.0

      - name: Setup sccache
        uses: mozilla-actions/sccache-action@9e7fa8a12102821edf02ca5dbea1acd0f89a2696 # v0.0.10

+      - name: Setup Node
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version-file: .nvmrc
+
      - name: Enable Corepack
        run: corepack enable

-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      - name: Set up caches
+        uses: namespacelabs/nscloud-cache-action@c5f8dab7560444c4bf8dbc64f1b203431873c547 # v1.6.1
        with:
-          node-version-file: .nvmrc
-          cache: 'pnpm'
+          cache: |
+            rust
+            pnpm
+
+      - name: Configure sccache
+        run: nsc cache sccache setup --cache_name default >> "$GITHUB_ENV"

      - name: Generate tauri-dev.conf.json
        shell: bash
@@ -108,11 +117,16 @@ jobs:
          EOF

      - name: Install Linux build dependencies
-        if: contains(matrix.platform, 'ubuntu')
-        uses: awalsh128/cache-apt-pkgs-action@acb598e5ddbc6f68a970c5da0688d2f3a9f04d05 # v1.6.0
+        if: contains(matrix.artifact-target-name, 'linux')
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
+
+      - name: Setup Java
+        uses: actions/setup-java@03ad4de0992f5dab5e18fcb136590ce7c4a0ac95 # v5.6.0
        with:
-          packages: libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
-          version: v1 # cache key
+          distribution: temurin
+          java-version: 17

      - name: Setup Dasel
        uses: jaxxstorm/action-install-gh-release@25e24d2d23ae098373794ef1d6faecb48ee52da8 # v3.0.0
@@ -120,13 +134,16 @@ jobs:
          repo: TomWright/dasel
          tag: v2.8.1
          extension-matching: disable
-          rename-to: ${{ contains(matrix.platform, 'windows') && 'dasel.exe' || 'dasel' }}
+          rename-to: ${{ contains(matrix.artifact-target-name, 'windows') && 'dasel.exe' || 'dasel' }}
          chmod: 0755

      - name: Set application version and environment
        shell: bash
        run: |
-          APP_VERSION="$(git describe --tags --always | sed -E 's/-([0-9]+)-(g[0-9a-fA-F]+)$/-canary+\1.\2/')"
+          APP_VERSION="${{ inputs.app-version-override }}"
+          if [ -z "$APP_VERSION" ]; then
+            APP_VERSION="$(git describe --tags --always | sed -E 's/-([0-9]+)-(g[0-9a-fA-F]+)$/-canary+\1.\2/')"
+          fi
          BUILD_ENVIRONMENT="${{ inputs.environment || 'prod' }}"
          echo "Setting application version to $APP_VERSION"
          echo "Using environment $BUILD_ENVIRONMENT"
@@ -136,14 +153,11 @@ jobs:

          cp "packages/app-lib/.env.${BUILD_ENVIRONMENT}" packages/app-lib/.env

-      - name: Setup Turbo cache
-        uses: rharkor/caching-for-turbo@56219402aacc0d06b650d898c222996dbc1191ec # v2.3.14
-
      - name: Install dependencies
        run: pnpm install

      - name: Set up Windows code signing
-        if: contains(matrix.platform, 'windows')
+        if: contains(matrix.artifact-target-name, 'windows')
        shell: bash
        run: |
          if [ '${{ startsWith(github.ref, 'refs/tags/v') || inputs.sign-windows-binaries }}' = 'true' ]; then
@@ -153,8 +167,8 @@ jobs:
          fi

      - name: Build macOS app
-        run: ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v')) && 'pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-release.conf.json' || 'pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-dev.conf.json' }}
-        if: contains(matrix.platform, 'macos')
+        run: ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v') || inputs.app-version-override != '') && 'pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-release.conf.json' || 'pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-dev.conf.json' }}
+        if: contains(matrix.artifact-target-name, 'darwin')
        env:
          TAURI_BUNDLER_DMG_IGNORE_CI: 'true'
          ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
@@ -168,8 +182,8 @@ jobs:
          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}

      - name: Build Linux app
-        run: ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v')) && 'pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json' || 'pnpm --filter=@modrinth/app run tauri build --config tauri-dev.conf.json' }}
-        if: contains(matrix.platform, 'ubuntu')
+        run: ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v') || inputs.app-version-override != '') && 'pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json' || 'pnpm --filter=@modrinth/app run tauri build --config tauri-dev.conf.json' }}
+        if: contains(matrix.artifact-target-name, 'linux')
        env:
          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
@@ -179,9 +193,9 @@ jobs:
          [System.Convert]::FromBase64String("$env:DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_BASE64") | Set-Content -Path signer-client-cert.p12 -AsByteStream
          $env:DIGICERT_ONE_SIGNER_CREDENTIALS = "$env:DIGICERT_ONE_SIGNER_API_KEY|$PWD\signer-client-cert.p12|$env:DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD"
          $env:JAVA_HOME = "$env:JAVA_HOME_17_X64"
-          ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v')) && 'pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json --verbose --bundles "nsis,updater"' || 'pnpm --filter=@modrinth/app run tauri build --config tauri-dev.conf.json --verbose --bundles "nsis,updater"' }}
+          ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v') || inputs.app-version-override != '') && 'pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json --verbose --bundles "nsis,updater"' || 'pnpm --filter=@modrinth/app run tauri build --config tauri-dev.conf.json --verbose --bundles "nsis,updater"' }}
          Remove-Item -Path signer-client-cert.p12 -ErrorAction SilentlyContinue
-        if: contains(matrix.platform, 'windows')
+        if: contains(matrix.artifact-target-name, 'windows')
        env:
          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
@@ -15,7 +15,7 @@ jobs:
      github.event.workflow_run.conclusion == 'success' &&
      github.event.workflow_run.event == 'push' &&
      startsWith(github.event.workflow_run.head_branch, 'v')
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: namespace-profile-medium-amd64
    env:
      VERSION_TAG: ${{ github.event.workflow_run.head_branch }}
      LINUX_X64_BUNDLE_ARTIFACT_NAME: App bundle (x86_64-unknown-linux-gnu)
@@ -25,7 +25,7 @@ jobs:

    steps:
      - name: Check out code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1

      - name: Verify ref is a tag
        env:
@@ -57,8 +57,11 @@ jobs:

      - name: Extract app changelog
        env:
+          GH_TOKEN: ${{ github.token }}
          VERSION: ${{ env.VERSION_TAG }}
-        run: npx --yes tsx scripts/build-theseus-release-notes.ts
+        run: |
+          LAST_GITHUB_RELEASE_PUBLISHED_AT=$(gh api "repos/${{ github.repository }}/releases/latest" --jq '.published_at // ""' 2>/dev/null || true)
+          LAST_GITHUB_RELEASE_PUBLISHED_AT="$LAST_GITHUB_RELEASE_PUBLISHED_AT" npx --yes tsx scripts/build-theseus-release-notes.ts

      - name: Generate version manifest
        run: |
@@ -22,7 +22,7 @@ jobs:
    if: ${{ always() }}
    steps:
      - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1

      - name: Check if workflow runs on an internal branch
        id: check-internal
@@ -62,7 +62,7 @@ jobs:

  build:
    name: Lint and Test
-    runs-on: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'blacksmith-4vcpu-ubuntu-2404' || 'ubuntu-latest' }}
+    runs-on: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'namespace-profile-modrinth-turbo' || 'ubuntu-latest' }}
    needs: [skip-if-clean]
    if: ${{ needs.skip-if-clean.outputs.skip != 'true' }}

@@ -76,98 +76,71 @@ jobs:
      # since we don't want warnings to become errors
      # while developing)
      RUSTFLAGS: -Dwarnings
-      # sccache config (only populated for internal branches; secrets aren't
-      # available to forked PRs, and blacksmith stickydisk requires a
-      # blacksmith runner)
-      SCCACHE_DIR: ${{ needs.skip-if-clean.outputs.internal == 'true' && '/mnt/sccache' || '' }}
-      SCCACHE_CACHE_SIZE: ${{ needs.skip-if-clean.outputs.internal == 'true' && '10G' || '' }}
-      SCCACHE_MULTILEVEL_CHAIN: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'disk,s3' || '' }}
-      SCCACHE_S3_KEY_PREFIX: ${{ needs.skip-if-clean.outputs.internal == 'true' && format('{0}/', github.repository) || '' }}
-      SCCACHE_BUCKET: ${{ secrets.SCCACHE_BUCKET }}
-      SCCACHE_REGION: ${{ secrets.SCCACHE_REGION }}
-      SCCACHE_ENDPOINT: ${{ secrets.SCCACHE_ENDPOINT }}
-      AWS_ACCESS_KEY_ID: ${{ secrets.SCCACHE_S3_ACCESS_KEY_ID }}
-      AWS_SECRET_ACCESS_KEY: ${{ secrets.SCCACHE_S3_SECRET_ACCESS_KEY }}
-      RUSTC_WRAPPER: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'sccache' || '' }}
+      # Redis config for tests
+      REDIS_TOPOLOGY: cluster
+      REDIS_CONNECTION_TYPE: multiplexed
+      REDIS_URL: redis://127.0.0.1:7000,redis://127.0.0.1:7001,redis://127.0.0.1:7002,redis://127.0.0.1:7003,redis://127.0.0.1:7004,redis://127.0.0.1:7005
+      # Avoid stack overflows in tests
+      RUST_MIN_STACK: 134217728

    steps:
      - name: Check out code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with:
          fetch-depth: 2

-      - name: Install build dependencies
-        uses: awalsh128/cache-apt-pkgs-action@acb598e5ddbc6f68a970c5da0688d2f3a9f04d05 # v1.6.0
-        with:
-          packages: libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
-          version: v1 # cache key
-
      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
        with:
          node-version-file: .nvmrc

      - name: Enable Corepack
        run: corepack enable

-      - name: Get pnpm store path
-        id: pnpm-store
-        run: echo "store-path=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
-
-      - name: Restore pnpm cache
-        uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+      - name: Set up caches
+        if: needs.skip-if-clean.outputs.internal == 'true'
+        uses: namespacelabs/nscloud-cache-action@c5f8dab7560444c4bf8dbc64f1b203431873c547 # v1.6.1
        with:
-          path: ${{ steps.pnpm-store.outputs.store-path }}
-          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            pnpm-cache-
+          cache: |
+            rust
+            pnpm
+            apt
+
+      - name: Set up Turborepo caching
+        if: needs.skip-if-clean.outputs.internal == 'true'
+        uses: namespace-actions/setup-turbocache@f96bd6befa13ae74b2858a5be49573640d4636f5 # v0.0.2
+
+      - name: Install apt dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y cmake libcurl4-openssl-dev libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev

      - name: Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
+        uses: actions-rust-lang/setup-rust-toolchain@166cdcfd11aee3cb47222f9ddb555ce30ddb9659 # v1.17.0
        with:
          rustflags: ''
          components: clippy, rustfmt
          cache: false

-      - name: Cache Cargo registry and index
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae #v5.0.5
-        with:
-          path: |
-            ~/.cargo/registry
-            ~/.cargo/git
-            ~/.cargo/bin
-          key: ${{ runner.os }}-${{ runner.arch }}-cargo-${{ hashFiles('**/Cargo.lock') }}
-
-      - name: Mount sccache disk cache
-        if: needs.skip-if-clean.outputs.internal == 'true'
-        uses: useblacksmith/stickydisk@13af8883542ca949a717e70fef89d15edbb29d88 # v1.2.0
-        with:
-          key: ${{ github.repository }}-turbo-sccache
-          path: /mnt/sccache
-
-      - name: Setup sccache
-        if: needs.skip-if-clean.outputs.internal == 'true'
-        uses: mozilla-actions/sccache-action@9e7fa8a12102821edf02ca5dbea1acd0f89a2696 # v0.0.10
+      - name: Setup mold
+        uses: rui314/setup-mold@9c9c13bf4c3f1adef0cc596abc155580bcb04444 # v1 / Mold 2.41.0

      - name: Setup binstall
-        uses: cargo-bins/cargo-binstall@dc19f1e48450eefe5a29b8da6c6b00a87d730b37 # v1.18.1
+        uses: cargo-bins/cargo-binstall@ead08b90bd7b2e6d81963fb9cf0b7239f66d5db4 # v1.21.0

      - name: Setup nextest
-        run: cargo binstall --no-confirm --secure cargo-nextest@0.9.133
+        run: cargo binstall --no-confirm --secure --locked cargo-nextest@0.9.133

      # cargo-binstall does not have pre-built binaries for sqlx-cli, so we fall
      # back to a cached cargo install
      - name: Setup cargo-sqlx
-        uses: taiki-e/cache-cargo-install-action@f9eed3e4680f27610dc6d8c67be1b88593f7dade # v3.0.6
+        uses: taiki-e/cache-cargo-install-action@417450f3c33ee20393705369577571770643d4c7 # v3.0.7
        with:
          tool: sqlx-cli@0.8.6
          locked: false
          no-default-features: true
          features: rustls,postgres

-      - name: Setup Turbo cache
-        uses: rharkor/caching-for-turbo@56219402aacc0d06b650d898c222996dbc1191ec # v2.3.14
-
      - name: Install dependencies
        run: pnpm install

@@ -189,7 +162,7 @@ jobs:

      - name: Start services
        if: steps.check-labrinth.outputs.needs_services == 'true'
-        run: docker compose up --wait
+        run: docker compose --profile clustered-redis up --wait

      - name: Setup labrinth environment and database
        if: steps.check-labrinth.outputs.needs_services == 'true'
@@ -22,6 +22,7 @@ node_modules
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+!.vscode/i18n-ally-custom-framework.yml

 # IDE - IntelliJ
 .idea/*
@@ -1,3 +1,3 @@
 {
-  "recommendations": ["esbenp.prettier-vscode", "Vue.volar", "rust-lang.rust-analyzer"]
+  "recommendations": ["esbenp.prettier-vscode", "Vue.volar", "rust-lang.rust-analyzer", "lokalise.i18n-ally"]
 }
@@ -0,0 +1,10 @@
+languageIds:
+  - vue
+  - typescript
+  - javascript
+  - typescriptreact
+
+usageMatchRegex:
+  - id:\s*['"]({key})['"]
+
+monopoly: true
@@ -9,7 +9,7 @@
 	"files.insertFinalNewline": true,
 	"editor.codeActionsOnSave": {
 		"source.fixAll.eslint": "explicit",
-		"source.organizeImports": "always"
+		"source.organizeImports": "never"
 	},
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"[vue]": {
@@ -31,5 +31,15 @@
 		"editor.defaultFormatter": "rust-lang.rust-analyzer"
 	},
 	"css.lint.unknownAtRules": "ignore",
-	"scss.lint.unknownAtRules": "ignore"
+	"scss.lint.unknownAtRules": "ignore",
+	"i18n-ally.localesPaths": [
+		"packages/ui/src/locales",
+		"apps/frontend/src/locales",
+		"packages/moderation/src/locales"
+	],
+	"i18n-ally.pathMatcher": "{locale}/index.{ext}",
+	"i18n-ally.keystyle": "flat",
+	"i18n-ally.sourceLanguage": "en-US",
+	"i18n-ally.namespace": false,
+	"i18n-ally.includeSubfolders": true
 }
@@ -50,7 +50,7 @@ Run these from the **root** folder before opening a pull request - do not run th
 - **App frontend:** `pnpm prepr:frontend:app`
 - **Frontend libs:** `pnpm prepr:frontend:lib`
 - **All frontend (app+web):** `pnpm prepr`
- **Labrinth (backend):** See `apps/labrinth/CLAUDE.md`
+- **Labrinth (backend):** See `apps/labrinth/AGENTS.md`

 The website and app `prepr` commands

@@ -62,9 +62,9 @@ The website and app `prepr` commands

 ## Project-Specific Instructions

-Each project may have its own `CLAUDE.md` with detailed instructions:
+Each project may have its own file with detailed instructions:

- [`apps/labrinth/CLAUDE.md`](apps/labrinth/CLAUDE.md) — Backend API
+- [`apps/labrinth/AGENTS.md`](apps/labrinth/AGENTS.md) — Backend API
 - [`apps/frontend/CLAUDE.md`](apps/frontend/CLAUDE.md) - Frontend Website

 ## Code Guidelines
@@ -9,10 +9,13 @@ members = [
  "packages/ariadne",
  "packages/daedalus",
  "packages/labrinth-derive",
+  "packages/modrinth-content-management",
  "packages/modrinth-log",
  "packages/modrinth-maxmind",
  "packages/modrinth-util",
+  "packages/neverbounce",
  "packages/path-util",
+  "packages/xredis",
 ]

 [workspace.package]
@@ -32,7 +35,6 @@ actix-ws = "0.3.0"
 arc-swap = "1.7.1"
 argon2 = { version = "0.5.3", features = ["std"] }
 ariadne = { path = "packages/ariadne" }
-async-compression = { version = "0.4.32", default-features = false }
 async-minecraft-ping = { path = "packages/async-minecraft-ping" }
 async-recursion = "1.1.1"
 async-stripe = { version = "0.41.0", default-features = false, features = [
@@ -51,11 +53,13 @@ aws-sdk-s3 = { version = "=1.122.0", default-features = false, features = [
 ] }
 base64 = "0.22.1"
 bitflags = "2.9.4"
+bon = "3.9.3"
 bytemuck = "1.24.0"
 bytes = "1.10.1"
 censor = "0.3.0"
 chardetng = "0.1.17"
 chrono = "0.4.42"
+chumsky = "0.9.3"
 cidre = { version = "0.15.0", default-features = false, features = [
  "macos_15_0"
 ] }
@@ -70,7 +74,7 @@ daedalus = { path = "packages/daedalus" }
 darling = { version = "0.23" }
 dashmap = "6.1.0"
 data-url = "0.3.2"
-deadpool-redis = { git = "https://github.com/modrinth/deadpool", rev = "db5fb00b036ecc8fe5f18853c559b745ffe47bde", version = "0.22.1" }
+deadpool-redis = { git = "https://github.com/modrinth/deadpool", rev = "c7209b086829572f368f1194aba54bdea8dc540b", version = "0.23.0" }
 derive_more = "2.1.1"
 directories = "6.0.0"
 dirs = "6.0.0"
@@ -85,11 +89,14 @@ eyre = "0.6.12"
 flate2 = "1.1.4"
 fs4 = { version = "0.13.1", default-features = false }
 futures = "0.3.31"
+futures-lite = "2.6.1"
 futures-util = "0.3.31"
+governor = "0.10.4"
 heck = "0.5.0"
 hex = "0.4.3"
 hickory-resolver = "0.25.2"
 hmac = "0.12.1"
+httpdate = "1.0.3"
 hyper = "1.7.0"
 hyper-rustls = { version = "0.27.7", default-features = false, features = [
  "aws-lc-rs",
@@ -116,13 +123,21 @@ lettre = { version = "0.11.19", default-features = false, features = [
  "tokio1",
  "tokio1-rustls",
 ] }
+lz4_flex = { version = "0.11.5", default-features = false, features = [
+  "checked-decode",
+  "safe-decode",
+  "safe-encode",
+  "std",
+] }
 maxminddb = "0.26.0"
 meilisearch-sdk = { version = "0.30.0", default-features = false }
+modrinth-content-management = { path = "packages/modrinth-content-management" }
 modrinth-log = { path = "packages/modrinth-log" }
 modrinth-util = { path = "packages/modrinth-util" }
 muralpay = { path = "packages/muralpay" }
 murmur2 = "0.1.0"
 native-dialog = "0.9.2"
+neverbounce = { path = "packages/neverbounce" }
 notify = { version = "8.2.0", default-features = false }
 notify-debouncer-mini = { version = "0.7.0", default-features = false }
 objc2-app-kit = { version = "0.3.2", default-features = false }
@@ -132,6 +147,7 @@ paste = "1.0.15"
 path-util = { path = "packages/path-util" }
 phf = { version = "0.13.1", features = ["macros"] }
 png = "0.18.0"
+postcard = { version = "1.1.3", default-features = false, features = ["alloc"] }
 proc-macro2 = { version = "1.0" }
 prometheus = "0.14.0"
 quartz_nbt = "0.2.9"
@@ -139,7 +155,8 @@ quick-xml = "0.38.3"
 quote = { version = "1.0" }
 rand = "=0.8.5"  # Locked on 0.8 until argon2 and p256 update to 0.9
 rand_chacha = "=0.3.1"  # Locked on 0.3 until we can update rand to 0.9
-redis = "0.32.7"
+rdkafka = { version = "0.36.2", features = ["cmake-build"] }
+redis = "1.4.1"
 regex = "1.12.2"
 reqwest = { version = "0.12.24", default-features = false }
 rgb = "0.8.52"
@@ -155,6 +172,7 @@ rust-s3 = { version = "0.37.0", default-features = false, features = [
 ] }
 rustls = "0.23.32"
 rusty-money = "0.4.1"
+scalar_api_reference = { version = "0.2.2", default-features = false }
 secrecy = "0.10.3"
 sentry = { version = "0.45.0", default-features = false, features = [
  "backtrace",
@@ -175,6 +193,7 @@ sha1 = "0.10.6"
 sha1_smol = { version = "1.0.1", features = ["std"] }
 sha2 = "0.10.9"
 shlex = "1.3.0"
+smallvec = "1.15.1"
 spdx = "0.12.0"
 sqlx = { version = "0.8.6", default-features = false }
 sqlx-tracing = { path = "packages/sqlx-tracing" }
@@ -191,7 +210,7 @@ tauri-plugin-http = "2.5.7"
 tauri-plugin-opener = "2.5.0"
 tauri-plugin-os = "2.3.1"
 tauri-plugin-single-instance = "2.3.4"
-tauri-plugin-updater = { version = "2.9.0", default-features = false, features = [
+tauri-plugin-updater = { git = "https://github.com/modrinth/plugins-workspace", rev = "0d30f2aa28ec668ce187d527da1c475da3c01cbc", default-features = false, features = [
  "rustls-tls",
  "zip",
 ] }
@@ -214,10 +233,10 @@ typed-path = "0.12.0"
 url = "2.5.7"
 urlencoding = "2.1.3"
 utoipa = { version = "5.4.0", features = ["actix_extras", "chrono", "decimal"] }
-utoipa-actix-web = { version = "0.1.2" }
-utoipa-scalar = { version = "0.3.0", default-features = false }
 uuid = "1.18.1"
 validator = "0.20.0"
+webauthn-rs = "0.5.5"
+webauthn-rs-proto = "0.5.5"
 webp = { version = "0.3.1", default-features = false }
 webview2-com = "0.38.0"  # Should be updated in lockstep with wry
 whoami = "1.6.1"
@@ -225,6 +244,7 @@ windows = "=0.61.3"  # Locked on 0.61 until we can update windows-core to 0.62
 windows-core = "=0.61.2"  # Locked on 0.61 until webview2-com updates to 0.62
 winreg = "0.55.0"
 woothee = "0.13.0"
+xredis = { path = "packages/xredis" }
 yaserde = "0.12.0"
 zbus = "5.11.0"
 zip = { version = "6.0.0", default-features = false, features = [
@@ -268,6 +288,7 @@ redundant_type_annotations = "warn"
 result_large_err = "allow"
 todo = "warn"
 too_many_arguments = "allow"
+type_complexity = "allow"
 uninlined_format_args = "warn"
 unnested_or_patterns = "warn"
 wildcard_dependencies = "warn"
@@ -3,13 +3,13 @@
 ![Issues](https://img.shields.io/github/issues-raw/Modrinth/code?color=c78aff&label=issues&style=for-the-badge)
 ![Pull Requests](https://img.shields.io/github/issues-pr-raw/Modrinth/code?color=c78aff&label=PRs&style=for-the-badge)
 ![Contributors](https://img.shields.io/github/contributors/Modrinth/code?color=c78aff&label=contributors&style=for-the-badge)
-![Lines](https://img.shields.io/endpoint?url=https://ghloc.vercel.app/api/modrinth/code/badge?style=flat&logoColor=white&color=c78aff&style=for-the-badge)
+![Lines of Code](https://img.shields.io/endpoint?url=https://loctopus.creeperkatze.dev/github/modrinth/code/badge?style=flat&logoColor=white&color=c78aff&style=for-the-badge)
 ![Commit Activity](https://img.shields.io/github/commit-activity/m/Modrinth/code?color=c78aff&label=commits&style=for-the-badge)
 ![Last Commit](https://img.shields.io/github/last-commit/Modrinth/code?color=c78aff&label=last%20commit&style=for-the-badge)

 ## Modrinth Monorepo

-Welcome to the Modrinth Monorepo, the primary codebase for the Modrinth web interface and app. It contains ![Lines](https://img.shields.io/endpoint?url=https://ghloc.vercel.app/api/modrinth/olympus/badge?logoColor=white&color=black&label=) lines of code and has ![Contributors](https://img.shields.io/github/contributors/Modrinth/code?color=black&label=) contributors!
+Welcome to the Modrinth Monorepo, the primary codebase for the Modrinth web interface and app. It contains ![Lines of Code](https://img.shields.io/endpoint?url=https://loctopus.creeperkatze.dev/github/modrinth/code/badge%3Fformat%3Dhuman&logoColor=white&color=black&label=) lines of code and has ![Contributors](https://img.shields.io/github/contributors/Modrinth/code?color=black&label=) contributors!

 If you're not a developer and you've stumbled upon this repository, you can access the web interface on the [Modrinth website](https://modrinth.com) and download the latest release of the app [here](https://modrinth.com/app).

@@ -8,8 +8,11 @@ extend-exclude = [
  "packages/blog/",
  # contains licenses like `CC-BY-ND-4.0`
  "packages/moderation/src/data/stages/license.ts",
+  "packages/moderation/src/utils.ts",
  # contains payment card IDs like `IY1VMST1MOXS` which are flagged
  "apps/labrinth/src/queue/payouts/mod.rs",
+  # contains domain names with deliberate typos
+  "apps/labrinth/assets/disposable_email_blocklist.txt"
 ]

 [default.extend-words]
@@ -44,7 +44,8 @@
 		"vue": "^3.5.13",
 		"vue-i18n": "^10.0.0",
 		"vue-router": "^4.6.0",
-		"vue-virtual-scroller": "v2.0.0-beta.8"
+		"vue-virtual-scroller": "v2.0.0-beta.8",
+		"vuedraggable": "^4.1.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.1.1",
@@ -24,7 +24,8 @@ import { computed, ref } from 'vue'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import Instance from '@/components/ui/Instance.vue'
 import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
-import { duplicate, remove } from '@/helpers/profile.js'
+import { install_duplicate_instance } from '@/helpers/install'
+import { remove } from '@/helpers/instance'

 const { handleError } = injectNotificationManager()

@@ -48,24 +49,23 @@ const instanceComponents = ref(null)
 const currentDeleteInstance = ref(null)
 const confirmModal = ref(null)

-async function deleteProfile() {
+async function deleteInstance() {
 	if (currentDeleteInstance.value) {
 		instanceComponents.value = instanceComponents.value.filter(
-			(x) => x.instance.path !== currentDeleteInstance.value,
+			(x) => x.instance.id !== currentDeleteInstance.value,
 		)
 		await remove(currentDeleteInstance.value).catch(handleError)
 	}
 }

-async function duplicateProfile(p) {
-	await duplicate(p).catch(handleError)
+async function duplicateInstance(p) {
+	await install_duplicate_instance(p).catch(handleError)
 }

-const handleRightClick = (event, profilePathId) => {
-	const item = instanceComponents.value.find((x) => x.instance.path === profilePathId)
+const handleRightClick = (event, instanceId) => {
+	const item = instanceComponents.value.find((x) => x.instance.id === instanceId)
 	const baseOptions = [
-		{ name: 'add_content' },
-		{ type: 'divider' },
+		...(item.instance.quarantined ? [] : [{ name: 'add_content' }, { type: 'divider' }]),
 		{ name: 'edit' },
 		{ name: 'duplicate' },
 		{ name: 'open' },
@@ -89,10 +89,14 @@ const handleRightClick = (event, profilePathId) => {
 					...baseOptions,
 				]
 			: [
-					{
-						name: 'play',
-						color: 'primary',
-					},
+					...(item.instance.quarantined
+						? []
+						: [
+								{
+									name: 'play',
+									color: 'primary',
+								},
+							]),
 					...baseOptions,
 				],
 	)
@@ -114,16 +118,16 @@ const handleOptionsClick = async (args) => {
 			break
 		case 'duplicate':
 			if (args.item.instance.install_stage == 'installed')
-				await duplicateProfile(args.item.instance.path)
+				await duplicateInstance(args.item.instance.id)
 			break
 		case 'open':
 			await args.item.openFolder()
 			break
 		case 'copy':
-			await navigator.clipboard.writeText(args.item.instance.path)
+			await navigator.clipboard.writeText(args.item.instance.id)
 			break
 		case 'delete':
-			currentDeleteInstance.value = args.item.instance.path
+			currentDeleteInstance.value = args.item.instance.id
 			confirmModal.value.show()
 			break
 	}
@@ -321,13 +325,13 @@ const filteredResults = computed(() => {
 			<Instance
 				v-for="instance in instanceSection.value"
 				ref="instanceComponents"
-				:key="instance.path + instance.install_stage"
+				:key="instance.id + instance.install_stage"
 				:instance="instance"
-				@contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
+				@contextmenu.prevent.stop="(event) => handleRightClick(event, instance.id)"
 			/>
 		</section>
 	</Accordion>
-	<ConfirmDeleteInstanceModal ref="confirmModal" @delete="deleteProfile" />
+	<ConfirmDeleteInstanceModal ref="confirmModal" @delete="deleteInstance" />
 	<ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
 		<template #play> <PlayIcon /> Play </template>
 		<template #stop> <StopCircleIcon /> Stop </template>
@@ -21,9 +21,10 @@ import Instance from '@/components/ui/Instance.vue'
 import LegacyProjectCard from '@/components/ui/LegacyProjectCard.vue'
 import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
 import { trackEvent } from '@/helpers/analytics'
-import { get_by_profile_path } from '@/helpers/process.js'
-import { duplicate, kill, remove, run } from '@/helpers/profile.js'
-import { showProfileInFolder } from '@/helpers/utils.js'
+import { install_duplicate_instance } from '@/helpers/install'
+import { kill, remove, run } from '@/helpers/instance'
+import { get_by_instance_id } from '@/helpers/process.js'
+import { showInstanceInFolder } from '@/helpers/utils.js'
 import { injectContentInstall } from '@/providers/content-install'
 import { handleSevereError } from '@/store/error.js'

@@ -60,20 +61,19 @@ const deleteConfirmModal = ref(null)

 const currentDeleteInstance = ref(null)

-async function deleteProfile() {
+async function deleteInstance() {
 	if (currentDeleteInstance.value) {
 		await remove(currentDeleteInstance.value).catch(handleError)
 	}
 }

-async function duplicateProfile(p) {
-	await duplicate(p).catch(handleError)
+async function duplicateInstance(p) {
+	await install_duplicate_instance(p).catch(handleError)
 }

 const handleInstanceRightClick = async (event, passedInstance) => {
 	const baseOptions = [
-		{ name: 'add_content' },
-		{ type: 'divider' },
+		...(passedInstance.quarantined ? [] : [{ name: 'add_content' }, { type: 'divider' }]),
 		{ name: 'edit' },
 		{ name: 'duplicate' },
 		{ name: 'open_folder' },
@@ -85,7 +85,7 @@ const handleInstanceRightClick = async (event, passedInstance) => {
 		},
 	]

-	const runningProcesses = await get_by_profile_path(passedInstance.path).catch(handleError)
+	const runningProcesses = await get_by_instance_id(passedInstance.id).catch(handleError)

 	const options =
 		runningProcesses.length > 0
@@ -97,10 +97,14 @@ const handleInstanceRightClick = async (event, passedInstance) => {
 					...baseOptions,
 				]
 			: [
-					{
-						name: 'play',
-						color: 'primary',
-					},
+					...(passedInstance.quarantined
+						? []
+						: [
+								{
+									name: 'play',
+									color: 'primary',
+								},
+							]),
 					...baseOptions,
 				]

@@ -126,16 +130,14 @@ const handleProjectClick = (event, passedInstance) => {
 const handleOptionsClick = async (args) => {
 	switch (args.option) {
 		case 'play':
-			await run(args.item.path).catch((err) =>
-				handleSevereError(err, { profilePath: args.item.path }),
-			)
+			await run(args.item.id).catch((err) => handleSevereError(err, { instanceId: args.item.id }))
 			trackEvent('InstanceStart', {
 				loader: args.item.loader,
 				game_version: args.item.game_version,
 			})
 			break
 		case 'stop':
-			await kill(args.item.path).catch(handleError)
+			await kill(args.item.id).catch(handleError)
 			trackEvent('InstanceStop', {
 				loader: args.item.loader,
 				game_version: args.item.game_version,
@@ -144,26 +146,26 @@ const handleOptionsClick = async (args) => {
 		case 'add_content':
 			await router.push({
 				path: `/browse/${args.item.loader === 'vanilla' ? 'datapack' : 'mod'}`,
-				query: { i: args.item.path },
+				query: { i: args.item.id },
 			})
 			break
 		case 'edit':
 			await router.push({
-				path: `/instance/${encodeURIComponent(args.item.path)}`,
+				path: `/instance/${encodeURIComponent(args.item.id)}`,
 			})
 			break
 		case 'duplicate':
-			if (args.item.install_stage == 'installed') await duplicateProfile(args.item.path)
+			if (args.item.install_stage == 'installed') await duplicateInstance(args.item.id)
 			break
 		case 'delete':
-			currentDeleteInstance.value = args.item.path
+			currentDeleteInstance.value = args.item.id
 			deleteConfirmModal.value.show()
 			break
 		case 'open_folder':
-			await showProfileInFolder(args.item.path)
+			await showInstanceInFolder(args.item.id)
 			break
 		case 'copy_path':
-			await navigator.clipboard.writeText(args.item.path)
+			await navigator.clipboard.writeText(args.item.id)
 			break
 		case 'install': {
 			await installVersion(
@@ -239,7 +241,7 @@ onUnmounted(() => {
 </script>

 <template>
-	<ConfirmDeleteInstanceModal ref="deleteConfirmModal" @delete="deleteProfile" />
+	<ConfirmDeleteInstanceModal ref="deleteConfirmModal" @delete="deleteInstance" />
 	<div ref="rowContainer" class="flex flex-col gap-4">
 		<div v-for="row in actualInstances" ref="rows" :key="row.label" class="row">
 			<HeadingLink class="mt-1" :to="row.route">
@@ -256,7 +258,7 @@ onUnmounted(() => {
 						0,
 						row.compact ? maxInstancesPerCompactRow : maxInstancesPerRow,
 					)"
-					:key="row.label + instance.path"
+					:key="row.label + instance.id"
 					:instance="instance"
 					:compact="row.compact"
 					:first="instanceIndex === 0"
@@ -4,13 +4,11 @@
 		class="flex flex-col gap-3 bg-button-bg border border-solid border-surface-5 rounded-xl p-3 mt-2"
 	>
 		<span>{{ formatMessage(messages.notSignedIn) }}</span>
-		<ButtonStyled color="brand">
-			<button color="primary" :disabled="loginDisabled" @click="login()">
-				<LogInIcon v-if="!loginDisabled" />
-				<SpinnerIcon v-else class="animate-spin" />
-				{{ formatMessage(messages.signInToMinecraft) }}
-			</button>
-		</ButtonStyled>
+		<Button type="colored" color="brand" :disabled="loginDisabled" @click="login()">
+			<LogInIcon v-if="!loginDisabled" />
+			<SpinnerIcon v-else class="animate-spin" />
+			{{ formatMessage(messages.signInToMinecraft) }}
+		</Button>
 	</div>
 	<Accordion
 		v-else
@@ -60,30 +58,27 @@
 							{{ account.profile.name }}
 						</p>
 					</button>
-					<ButtonStyled circular color="red" color-fill="none" hover-color-fill="background">
-						<button
+					<IconButton type="quiet" color="red" :label="formatMessage(messages.removeAccount)"
 							v-tooltip="formatMessage(messages.removeAccount)"
-							class="mr-2"
+							class="mr-2 hover:!bg-red focus-visible:!bg-red hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
 							@click="logout(account.profile.id)"
 						>
-							<TrashIcon />
-						</button>
-					</ButtonStyled>
+						<TrashIcon />
+					</IconButton>
 				</div>
 			</template>
 			<div class="flex flex-col gap-2 px-2 pt-2">
-				<ButtonStyled v-if="accounts.length > 0" class="w-full">
-					<button :disabled="loginDisabled" @click="login()">
-						<PlusIcon />
-						{{ formatMessage(messages.addAccount) }}
-					</button>
-				</ButtonStyled>
+				<Button v-if="accounts.length > 0" class="w-full" :disabled="loginDisabled" @click="login()">
+					<PlusIcon />
+					{{ formatMessage(messages.addAccount) }}
+				</Button>
 			</div>
 		</div>
 	</Accordion>
 </template>

 <script setup lang="ts">
+import { Button, IconButton } from '@modrinth/ui'
 import {
 	LogInIcon,
 	PlusIcon,
@@ -95,7 +90,6 @@ import {
 import {
 	Accordion,
 	Avatar,
-	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
 	useVIntl,
@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import { Button, TeleportOverflowMenu } from '@modrinth/ui'
 import { DropdownIcon, FolderOpenIcon, PlusIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, OverflowMenu } from '@modrinth/ui'
+import { injectNotificationManager } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { useRouter } from 'vue-router'

-import { add_project_from_path } from '@/helpers/profile.js'
+import { add_project_from_path } from '@/helpers/instance'

 const { handleError } = injectNotificationManager()

@@ -22,41 +23,38 @@ const handleAddContentFromFile = async () => {
 	if (!newProject) return

 	for (const project of newProject) {
-		await add_project_from_path(props.instance.path, project.path ?? project).catch(handleError)
+		await add_project_from_path(props.instance.id, project.path ?? project).catch(handleError)
 	}
 }

 const handleSearchContent = async () => {
 	await router.push({
 		path: `/browse/${props.instance.loader === 'vanilla' ? 'resourcepack' : 'mod'}`,
-		query: { i: props.instance.path },
+		query: { i: props.instance.id },
 	})
 }
 </script>

 <template>
 	<div class="joined-buttons">
-		<ButtonStyled>
-			<button @click="handleSearchContent">
-				<PlusIcon />
-				Install content
-			</button>
-		</ButtonStyled>
-		<ButtonStyled>
-			<OverflowMenu
+		<Button @click="handleSearchContent">
+			<PlusIcon />
+			Install content
+		</Button>
+		<TeleportOverflowMenu label="More options"
 				:options="[
 					{
 						id: 'from_file',
+						label: 'Add from file',
 						action: handleAddContentFromFile,
 					},
 				]"
-			>
-				<DropdownIcon />
-				<template #from_file>
-					<FolderOpenIcon />
-					<span class="no-wrap"> Add from file </span>
-				</template>
-			</OverflowMenu>
-		</ButtonStyled>
+			 class="!w-auto !px-2.5 !rounded-xl">
+			<DropdownIcon />
+			<template #from_file>
+				<FolderOpenIcon />
+				<span class="no-wrap"> Add from file </span>
+			</template>
+		</TeleportOverflowMenu>
 	</div>
 </template>
@@ -1,19 +1,13 @@
 <template>
-	<div class="flex gap-4 items-center">
-		<ButtonStyled
-			v-if="hasActiveLoadingBars && !hasVisibleActiveDownloadToasts"
-			color="brand"
-			type="transparent"
-			circular
-		>
-			<button v-tooltip="formatMessage(messages.viewActiveDownloads)" @click="openDownloadToast()">
-				<DownloadIcon />
-			</button>
-		</ButtonStyled>
+	<div class="flex gap-2 items-center">
+		<IconButton type="quiet" color="brand" :label="formatMessage(messages.viewActiveDownloads)" v-if="hasActiveLoadingBars && !hasVisibleActiveDownloadToasts" v-tooltip="formatMessage(messages.viewActiveDownloads)" @click="openDownloadToast()">
+			<DownloadIcon />
+		</IconButton>
 		<div v-if="offline" class="flex items-center gap-1">
 			<UnplugIcon class="text-secondary" />
 			<span class="text-sm text-contrast"> {{ formatMessage(messages.offline) }} </span>
 		</div>
+		<AppUpdateButton />
 		<div
 			class="flex border-solid border-surface-5 text-sm items-center gap-2 py-1.5 px-3 rounded-xl border"
 		>
@@ -22,30 +16,32 @@
 				<div class="text-contrast flex items-center gap-2">
 					<router-link
 						v-tooltip="formatMessage(messages.viewInstance)"
-						:to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`"
+						:to="`/instance/${encodeURIComponent(selectedProcess.instance.id)}`"
 						class="hover:underline"
 					>
-						{{ selectedProcess.profile.name }}
+						{{ selectedProcess.instance.name }}
 					</router-link>
 					<Dropdown
 						v-if="currentProcesses.length > 1"
 						placement="bottom"
 						:triggers="['click']"
 						:hide-triggers="['click']"
-						@show="showProfiles = true"
-						@hide="showProfiles = false"
+						@show="showInstances = true"
+						@hide="showInstances = false"
 					>
-						<ButtonStyled type="transparent" circular size="small">
-							<button
+						<IconButton class="!size-6" type="quiet" size="xs" :label="
+									showInstances
+										? formatMessage(messages.hideMoreRunningInstances)
+										: formatMessage(messages.showMoreRunningInstances)
+								"
 								v-tooltip="
-									showProfiles
+									showInstances
 										? formatMessage(messages.hideMoreRunningInstances)
 										: formatMessage(messages.showMoreRunningInstances)
 								"
 							>
-								<DropdownIcon :class="{ 'rotate-180': !!showProfiles }" />
-							</button>
-						</ButtonStyled>
+							<DropdownIcon :class="{ 'rotate-180': !!showInstances }" />
+						</IconButton>
 						<template #popper>
 							<div class="flex w-[20rem] max-h-[24rem] flex-col gap-2 overflow-auto">
 								<div
@@ -68,7 +64,7 @@
 									>
 										<OnlineIndicatorIcon />
 										<span class="mr-auto text-contrast flex items-center gap-2">
-											{{ process.profile.name }}
+											{{ process.instance.name }}
 											<StarIcon v-if="process.uuid === selectedProcess.uuid" class="text-orange" />
 										</span>
 									</button>
@@ -82,7 +78,7 @@
 									<button
 										v-tooltip="formatMessage(messages.viewLogs)"
 										class="active:scale-95 flex"
-										@click.stop="goToTerminal(process.profile.path)"
+										@click.stop="goToTerminal(process.instance.id)"
 									>
 										<TerminalSquareIcon class="text-secondary size-5" />
 									</button>
@@ -115,6 +111,7 @@
 </template>

 <script setup lang="ts">
+import { IconButton } from '@modrinth/ui'
 import {
 	DownloadIcon,
 	DropdownIcon,
@@ -125,7 +122,6 @@ import {
 	UnplugIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
 	injectPopupNotificationManager,
@@ -133,14 +129,17 @@ import {
 	type PopupNotificationProgressItem,
 	useVIntl,
 } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
 import { Dropdown } from 'floating-vue'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'

+import AppUpdateButton from '@/components/ui/app-update-button/index.vue'
+import { useInstallJobNotifications } from '@/composables/browse/install-job-notifications'
 import { trackEvent } from '@/helpers/analytics'
 import { loading_listener, process_listener } from '@/helpers/events'
+import { get_many as getInstances } from '@/helpers/instance'
 import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
-import { get_many as getInstances } from '@/helpers/profile.js'
 import type { LoadingBar } from '@/helpers/state'
 import { progress_bars_list } from '@/helpers/state'
 import type { GameInstance } from '@/helpers/types'
@@ -151,12 +150,12 @@ const { formatMessage } = useVIntl()

 const router = useRouter()

-const showProfiles = ref(false)
+const showInstances = ref(false)

 interface RunningProcess {
 	uuid: string
-	profile_path: string
-	profile: GameInstance
+	instance_id: string
+	instance: GameInstance
 }

 const messages = defineMessages({
@@ -217,22 +216,22 @@ const refresh = async () => {
 	const processes = ((await getRunningProcesses().catch((error) => {
 		handleError(error)
 		return []
-	})) ?? []) as Array<{ uuid: string; profile_path: string }>
-	const paths = processes.map((process) => process.profile_path)
-	const profiles: GameInstance[] = await getInstances(paths).catch((error) => {
+	})) ?? []) as Array<{ uuid: string; instance_id: string }>
+	const instanceIds = processes.map((process) => process.instance_id)
+	const instances: GameInstance[] = await getInstances(instanceIds).catch((error) => {
 		handleError(error)
 		return []
 	})

 	currentProcesses.value = processes
 		.map((process) => {
-			const profile = profiles.find((item) => process.profile_path === item.path)
-			if (!profile) {
+			const instance = instances.find((item) => process.instance_id === item.id)
+			if (!instance) {
 				return null
 			}
 			return {
 				...process,
-				profile,
+				instance,
 			}
 		})
 		.filter((process): process is RunningProcess => process !== null)
@@ -265,8 +264,8 @@ const stop = async (process: RunningProcess) => {
 		await killProcess(process.uuid).catch(handleError)

 		trackEvent('InstanceStop', {
-			loader: process.profile.loader,
-			game_version: process.profile.game_version,
+			loader: process.instance.loader,
+			game_version: process.instance.game_version,
 			source: 'AppBar',
 		})
 	} catch (e) {
@@ -275,15 +274,16 @@ const stop = async (process: RunningProcess) => {
 	await refresh()
 }

-function goToTerminal(path?: string) {
-	const selectedPath = path ?? selectedProcess.value?.profile.path
-	if (!selectedPath) {
+function goToTerminal(instanceId?: string) {
+	const selectedInstanceId = instanceId ?? selectedProcess.value?.instance.id
+	if (!selectedInstanceId) {
 		return
 	}
-	router.push(`/instance/${encodeURIComponent(selectedPath)}/logs`)
+	router.push(`/instance/${encodeURIComponent(selectedInstanceId)}/logs`)
 }

 const currentLoadingBars = ref<LoadingBar[]>([])
+const currentLoadingBarIconUrls = ref<Record<string, string | null>>({})
 const notificationId = ref<string | number | null>(null)
 const dismissed = ref(false)

@@ -299,8 +299,17 @@ function getLoadingProgress(loadingBar: LoadingBar): number {
 }

 function getLoadingText(loadingBar: LoadingBar): string {
-	const percent = Math.floor(getLoadingProgress(loadingBar) * 100)
-	return loadingBar.message ? `${percent}% ${loadingBar.message}` : `${percent}%`
+	return loadingBar.message ?? ''
+}
+
+function getDisplayIconUrl(icon: string | null | undefined): string | null {
+	if (!icon) {
+		return null
+	}
+	if (/^(https?:|data:|blob:|asset:|tauri:)/.test(icon)) {
+		return icon
+	}
+	return convertFileSrc(icon)
 }

 function getNotification(): PopupNotification | null {
@@ -322,24 +331,33 @@ function removeNotification(): void {
 }

 function buildDownloadItems(): PopupNotificationProgressItem[] {
-	return currentLoadingBars.value.map((bar) => ({
-		id: getLoadingBarKey(bar),
-		title: bar.title ?? '',
-		text: getLoadingText(bar),
-		progress: getLoadingProgress(bar),
-		waiting: !bar.total || bar.total <= 0,
-	}))
+	return [
+		...installJobNotifications.progressItems.value,
+		...currentLoadingBars.value.map((bar) => ({
+			id: getLoadingBarKey(bar),
+			title: bar.title ?? '',
+			text: getLoadingText(bar),
+			iconUrl: currentLoadingBarIconUrls.value[getLoadingBarKey(bar)] ?? null,
+			progress: getLoadingProgress(bar),
+			waiting: !bar.total || bar.total <= 0,
+			progressType: 'percentage',
+			progressCurrent: bar.current,
+			progressTotal: bar.total,
+		})),
+	]
 }

 const hasVisibleActiveDownloadToasts = computed(() => !!getNotification())
-const hasActiveLoadingBars = computed(() => currentLoadingBars.value.length > 0)
+const hasActiveLoadingBars = computed(
+	() => currentLoadingBars.value.length > 0 || installJobNotifications.active.value,
+)

 function updateNotification(resummon = false): void {
 	if (resummon) {
 		dismissed.value = false
 	}

-	if (currentLoadingBars.value.length === 0) {
+	if (currentLoadingBars.value.length === 0 && !installJobNotifications.active.value) {
 		removeNotification()
 		dismissed.value = false
 		return
@@ -358,17 +376,23 @@ function updateNotification(resummon = false): void {
 	const progressItems = buildDownloadItems()

 	if (notif) {
-		notif.title = formatMessage(messages.downloads)
+		notif.title = installJobNotifications.active.value
+			? installJobNotifications.title.value
+			: formatMessage(messages.downloads)
 		notif.text = undefined
 		notif.progressItems = progressItems
+		notif.buttons = installJobNotifications.buttons.value
 		notif.progress = undefined
 		notif.waiting = undefined
 	} else {
 		notif = popupNotificationManager.addPopupNotification({
-			title: formatMessage(messages.downloads),
+			title: installJobNotifications.active.value
+				? installJobNotifications.title.value
+				: formatMessage(messages.downloads),
 			type: 'download',
 			autoCloseMs: null,
 			progressItems,
+			buttons: installJobNotifications.buttons.value,
 		})
 		notificationId.value = notif.id
 	}
@@ -381,8 +405,8 @@ function formatLoadingBars(loadingBar: LoadingBar): LoadingBar {
 			version: formatted.bar_type.version,
 		})
 	}
-	if (formatted.bar_type?.profile_path) {
-		formatted.title = formatted.bar_type.profile_path
+	if (formatted.bar_type?.instance_id) {
+		formatted.title = formatted.bar_type.instance_name ?? formatted.bar_type.instance_id
 	}
 	if (formatted.bar_type?.pack_name) {
 		formatted.title = formatted.bar_type.pack_name
@@ -398,7 +422,43 @@ async function refreshLoadingBars() {

 	currentLoadingBars.value = Object.values(bars)
 		.map(formatLoadingBars)
-		.filter((bar) => bar?.bar_type?.type !== 'launcher_update')
+		.filter(
+			(bar) =>
+				bar?.bar_type?.type !== 'launcher_update' &&
+				![
+					'java_download',
+					'pack_file_download',
+					'pack_download',
+					'minecraft_download',
+					'copy_instance',
+				].includes(bar?.bar_type?.type ?? ''),
+		)
+
+	const instanceIds = Array.from(
+		new Set(
+			currentLoadingBars.value
+				.map((bar) => bar.bar_type?.instance_id)
+				.filter((instanceId): instanceId is string => !!instanceId),
+		),
+	)
+	const instances = instanceIds.length
+		? await getInstances(instanceIds).catch((error) => {
+				handleError(error)
+				return []
+			})
+		: []
+	const instanceIconUrls = new Map(
+		instances.map((instance) => [instance.id, getDisplayIconUrl(instance.icon_path)]),
+	)
+	currentLoadingBarIconUrls.value = Object.fromEntries(
+		currentLoadingBars.value.map((bar) => {
+			const barIconUrl = getDisplayIconUrl(bar.bar_type?.icon)
+			const instanceIconUrl = bar.bar_type?.instance_id
+				? instanceIconUrls.get(bar.bar_type.instance_id)
+				: null
+			return [getLoadingBarKey(bar), barIconUrl ?? instanceIconUrl ?? null]
+		}),
+	)

 	currentLoadingBars.value.sort((a, b) => {
 		const aKey = `${a.loading_bar_uuid ?? a.id ?? ''}`
@@ -409,6 +469,12 @@ async function refreshLoadingBars() {
 	updateNotification()
 }

+const installJobNotifications = await useInstallJobNotifications({
+	router,
+	handleError,
+	onChange: updateNotification,
+})
+
 await refreshLoadingBars()

 const unlistenLoading = await loading_listener(async () => {
@@ -430,5 +496,6 @@ onBeforeUnmount(() => {
 	window.removeEventListener('online', handleOnline)
 	unlistenProcess()
 	unlistenLoading()
+	installJobNotifications.dispose()
 })
 </script>
@@ -2,7 +2,7 @@
 	<div
 		ref="outerRef"
 		data-tauri-drag-region
-		class="min-w-0 overflow-hidden pl-3"
+		class="min-w-0 overflow-hidden pl-4"
 		:class="{ 'breadcrumb-fade-mask': isOverflowing }"
 		:style="isOverflowing ? { '--scroll-distance': `-${overflowAmount}px` } : undefined"
 		@mouseenter="onMouseEnter"
@@ -11,30 +11,48 @@
 		<div
 			ref="innerRef"
 			data-tauri-drag-region
-			class="flex w-fit items-center gap-1"
+			class="flex w-fit items-center gap-2 pr-4"
 			:class="{ 'breadcrumbs-scroll': isAnimating }"
 			@animationiteration="onAnimationIteration"
 		>
-			{{ breadcrumbData.resetToNames(breadcrumbs) }}
-			<template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name">
-				<router-link
-					v-if="breadcrumb.link"
-					:to="{
-						path: breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id as string)),
-						query: breadcrumb.query,
-					}"
-					class="shrink-0 whitespace-nowrap text-primary"
+			<template v-for="(breadcrumb, index) in breadcrumbs" :key="breadcrumb.slot">
+				<component
+					:is="index < breadcrumbs.length - 1 && breadcrumb.to ? RouterLink : 'span'"
+					v-bind="index < breadcrumbs.length - 1 && breadcrumb.to ? { to: breadcrumb.to } : {}"
+					:data-tauri-drag-region="index === breadcrumbs.length - 1 ? '' : undefined"
+					class="flex shrink-0 items-center gap-1.5 whitespace-nowrap text-base font-medium leading-6"
+					:class="
+						index === breadcrumbs.length - 1
+							? 'cursor-default select-none text-contrast'
+							: 'text-primary hover:text-contrast'
+					"
+					:aria-current="index === breadcrumbs.length - 1 ? 'page' : undefined"
 				>
-					{{ resolveLabel(breadcrumb.name) }}
-				</router-link>
-				<span
-					v-else
+					<Avatar
+						v-if="breadcrumb.visual?.type === 'image'"
+						:src="breadcrumb.visual.src"
+						:alt="breadcrumb.visual.alt ?? breadcrumb.label"
+						:circle="breadcrumb.visual.circle"
+						:tint-by="breadcrumb.visual.tintBy ?? breadcrumb.id"
+						size="20px"
+						no-shadow
+						raised
+						class="inline-block shrink-0 align-middle"
+						:class="{ '!rounded-md': !breadcrumb.visual.circle }"
+					/>
+					<component
+						:is="breadcrumb.visual.component"
+						v-else-if="breadcrumb.visual?.type === 'icon'"
+						class="size-5 shrink-0 text-primary"
+						aria-hidden="true"
+					/>
+					<span>{{ breadcrumb.label }}</span>
+				</component>
+				<ChevronRightIcon
+					v-if="index < breadcrumbs.length - 1"
 					data-tauri-drag-region
-					class="shrink-0 whitespace-nowrap text-contrast font-semibold cursor-default select-none"
-				>
-					{{ resolveLabel(breadcrumb.name) }}
-				</span>
-				<ChevronRightIcon v-if="breadcrumb.link" data-tauri-drag-region class="w-5 h-5 shrink-0" />
+					class="size-5 shrink-0 text-primary"
+				/>
 			</template>
 		</div>
 	</div>
@@ -42,34 +60,13 @@

 <script setup lang="ts">
 import { ChevronRightIcon } from '@modrinth/assets'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { Avatar } from '@modrinth/ui'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { RouterLink } from 'vue-router'

-import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { injectBreadcrumbManager } from '@/providers/breadcrumbs'

-interface Breadcrumb {
-	name: string
-	link?: string
-	query?: Record<string, string>
-}
-
-const route = useRoute()
-const breadcrumbData = useBreadcrumbs()
-
-const breadcrumbs = computed<Breadcrumb[]>(() => {
-	const additionalContext =
-		route.meta.useContext === true
-			? breadcrumbData.context
-			: route.meta.useRootContext === true
-				? breadcrumbData.rootContext
-				: null
-	const crumbs = (route.meta.breadcrumb ?? []) as Breadcrumb[]
-	return additionalContext ? [additionalContext as Breadcrumb, ...crumbs] : crumbs
-})
-
-function resolveLabel(name: string): string {
-	return name.charAt(0) === '?' ? breadcrumbData.getName(name.slice(1)) : name
-}
+const { entries: breadcrumbs } = injectBreadcrumbManager()

 // Overflow detection
 const outerRef = ref<HTMLDivElement | null>(null)
@@ -83,9 +80,13 @@ let stopping = false

 function checkOverflow() {
 	if (!outerRef.value || !innerRef.value) return
-	const overflow = innerRef.value.scrollWidth - outerRef.value.clientWidth
+	const outerStyles = window.getComputedStyle(outerRef.value)
+	const horizontalPadding =
+		Number.parseFloat(outerStyles.paddingLeft) + Number.parseFloat(outerStyles.paddingRight)
+	const availableWidth = outerRef.value.clientWidth - horizontalPadding
+	const overflow = innerRef.value.scrollWidth - availableWidth
 	isOverflowing.value = overflow > 0
-	overflowAmount.value = overflow + 12
+	overflowAmount.value = overflow
 }

 function onMouseEnter() {
@@ -12,7 +12,7 @@
 			<div v-for="(option, index) in options" :key="index" @click.stop="optionClicked(option.name)">
 				<hr v-if="option.type === 'divider'" class="divider" />
 				<div
-					v-else-if="!(isLinkedData(item) && option.name === `add_content`)"
+					v-else-if="!(isInstanceLink(item) && option.name === `add_content`)"
 					class="item clickable"
 					:class="[option.color ?? 'base']"
 				>
@@ -64,10 +64,10 @@ defineExpose({
 	},
 })

-const isLinkedData = (item) => {
-	if (item.instance != undefined && item.instance.linked_data) {
+const isInstanceLink = (item) => {
+	if (item.instance != undefined && item.instance.link) {
 		return true
-	} else if (item != undefined && item.linked_data) {
+	} else if (item != undefined && item.link) {
 		return true
 	}
 	return false
@@ -1,4 +1,5 @@
 <script setup>
+import { Button, ButtonLink, IconButton } from '@modrinth/ui'
 import {
 	CheckIcon,
 	CopyIcon,
@@ -9,14 +10,14 @@ import {
 	WrenchIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, Collapsible, injectNotificationManager } from '@modrinth/ui'
+import { Collapsible, injectNotificationManager } from '@modrinth/ui'
 import { computed, ref } from 'vue'

 import { ChatIcon } from '@/assets/icons'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { login as login_flow, set_default_user } from '@/helpers/auth.js'
-import { install } from '@/helpers/profile.js'
+import { install_existing_instance } from '@/helpers/install'
 import { cancel_directory_change } from '@/helpers/settings.ts'
 import { handleSevereError } from '@/store/error.js'

@@ -52,10 +53,6 @@ defineExpose({
 			if (errorVal.message.includes('because the target machine actively refused it')) {
 				metadata.value.hostsFile = true
 			}
-		} else if (errorVal.message && errorVal.message.includes('User is not logged in')) {
-			title.value = 'Sign in to Minecraft'
-			errorType.value = 'minecraft_sign_in'
-			supportLink.value = 'https://support.modrinth.com'
 		} else if (errorVal.message && errorVal.message.includes('Move directory error:')) {
 			title.value = 'Could not change app directory'
 			errorType.value = 'directory_move'
@@ -72,7 +69,7 @@ defineExpose({
 			title.value = 'No loader selected'
 			errorType.value = 'no_loader_version'
 			supportLink.value = 'https://support.modrinth.com'
-			metadata.value.profilePath = context.profilePath
+			metadata.value.instanceId = context.instanceId
 		} else if (source === 'state_init') {
 			title.value = 'Error initializing Modrinth App'
 			errorType.value = 'state_init'
@@ -125,7 +122,7 @@ const loadingRepair = ref(false)
 async function repairInstance() {
 	loadingRepair.value = true
 	try {
-		await install(metadata.value.profilePath, false)
+		await install_existing_instance(metadata.value.instanceId, false)
 		errorModal.value.hide()
 	} catch (err) {
 		handleSevereError(err)
@@ -243,20 +240,6 @@ async function copyToClipboard(text) {
 						</button>
 					</div>
 				</template>
-				<div v-else-if="errorType === 'minecraft_sign_in'">
-					<p>
-						To play this instance, you must sign in through Microsoft below. If you don't have a
-						Minecraft account, you can purchase the game on the
-						<a href="https://www.minecraft.net/en-us/store/minecraft-java-bedrock-edition-pc"
-							>Minecraft website</a
-						>.
-					</p>
-					<div class="cta-button">
-						<button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
-							<LogInIcon /> Sign in to Minecraft
-						</button>
-					</div>
-				</div>
 				<template v-else-if="errorType === 'state_init'">
 					<p>
 						Modrinth App failed to load correctly. This may be because of a corrupted file, or
@@ -291,12 +274,8 @@ async function copyToClipboard(text) {
 				</template>
 			</div>
 			<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>
+				<ButtonLink :href="supportLink" @click="errorModal.hide()"><ChatIcon /> Get support</ButtonLink>
+				<Button v-if="closable" @click="errorModal.hide()"><XIcon /> Close</Button>
 			</div>
 			<template v-if="hasDebugInfo">
 				<div class="flex flex-col gap-2">
@@ -325,16 +304,14 @@ async function copyToClipboard(text) {
 								>
 									{{ debugInfo }}
 								</div>
-								<ButtonStyled circular>
-									<button
+								<IconButton :label="'Copy debug info'"
 										v-tooltip="'Copy debug info'"
 										:disabled="copied"
 										@click="copyToClipboard(debugInfo)"
 									>
-										<template v-if="copied"> <CheckIcon class="text-green" /> </template>
-										<template v-else> <CopyIcon /> </template>
-									</button>
-								</ButtonStyled>
+									<template v-if="copied"> <CheckIcon class="text-green" /> </template>
+									<template v-else> <CopyIcon /> </template>
+								</IconButton>
 							</div>
 						</Collapsible>
 					</div>
@@ -1,28 +1,32 @@
 <script setup>
-import { WrenchIcon, XIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
+import { XIcon } from '@modrinth/assets'
 import {
-	Accordion,
-	ButtonStyled,
-	Checkbox,
 	commonMessages,
 	defineMessages,
+	FileTreeSelect,
 	injectNotificationManager,
+	NewModal,
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { save } from '@tauri-apps/plugin-dialog'
+import { readDir, stat } from '@tauri-apps/plugin-fs'
 import { ref } from 'vue'

-import { PackageIcon, VersionIcon } from '@/assets/icons'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { export_profile_mrpack, get_pack_export_candidates } from '@/helpers/profile.js'
+import { PackageIcon } from '@/assets/icons'
+import {
+	export_instance_mrpack,
+	get_full_path,
+	get_pack_export_candidates,
+} from '@/helpers/instance'

 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()

 const messages = defineMessages({
 	header: { id: 'app.export-modal.header', defaultMessage: 'Export modpack' },
-	modpackNameLabel: { id: 'app.export-modal.modpack-name-label', defaultMessage: 'Modpack Name' },
+	modpackNameLabel: { id: 'app.export-modal.modpack-name-label', defaultMessage: 'Modpack name' },
 	modpackNamePlaceholder: {
 		id: 'app.export-modal.modpack-name-placeholder',
 		defaultMessage: 'Modpack name',
@@ -39,15 +43,7 @@ const messages = defineMessages({
 		id: 'app.export-modal.description-placeholder',
 		defaultMessage: 'Enter modpack description...',
 	},
-	selectFilesLabel: {
-		id: 'app.export-modal.select-files-label',
-		defaultMessage: 'Configure which files are included in this export',
-	},
 	exportButton: { id: 'app.export-modal.export-button', defaultMessage: 'Export' },
-	includeFile: {
-		id: 'app.export-modal.include-file-accessibility-label',
-		defaultMessage: 'Include "{file}"?',
-	},
 })

 const props = defineProps({
@@ -59,8 +55,9 @@ const props = defineProps({

 defineExpose({
 	show: () => {
+		resetExportState()
 		exportModal.value.show()
-		initFiles()
+		void initFiles().catch(handleError)
 	},
 })

@@ -69,67 +66,33 @@ const nameInput = ref(props.instance.name)
 const exportDescription = ref('')
 const versionInput = ref('1.0.0')
 const files = ref([])
-const folders = ref([])
+const selectedFilePaths = ref([])
+const fileTreeKey = ref(0)
+const filesLoadId = ref(0)
+const instanceRoot = ref('')
+const loadedDirectories = ref(new Set())

-const initFiles = async () => {
-	const newFolders = new Map()
-	const sep = '/'
-	files.value = []
-	await get_pack_export_candidates(props.instance.path).then((filePaths) =>
-		filePaths
-			.map((folder) => ({
-				path: folder,
-				name: folder.split(sep).pop(),
-				selected:
-					folder.startsWith('mods') ||
-					folder.startsWith('datapacks') ||
-					folder.startsWith('resourcepacks') ||
-					folder.startsWith('shaderpacks') ||
-					folder.startsWith('config'),
-				disabled:
-					folder === 'profile.json' ||
-					folder.startsWith('modrinth_logs') ||
-					folder.startsWith('.fabric'),
-			}))
-			.filter(
-				(pathData) =>
-					!pathData.path.includes('.DS_Store') &&
-					pathData.path !== 'mods/.connector' &&
-					!pathData.path.startsWith('mods/.connector/'),
-			)
-			.forEach((pathData) => {
-				const parent = pathData.path.split(sep).slice(0, -1).join(sep)
-				if (parent !== '') {
-					if (newFolders.has(parent)) {
-						newFolders.get(parent).push(pathData)
-					} else {
-						newFolders.set(parent, [pathData])
-					}
-				} else {
-					files.value.push(pathData)
-				}
-			}),
-	)
-	folders.value = [...newFolders.entries()].map(([name, value]) => [
-		{
-			name,
-			showingMore: false,
-		},
-		value,
+async function initFiles() {
+	const loadId = ++filesLoadId.value
+	const [filePaths, root] = await Promise.all([
+		get_pack_export_candidates(props.instance.id),
+		get_full_path(props.instance.id),
 	])
+	if (loadId !== filesLoadId.value) return
+
+	instanceRoot.value = root
+	const exportCandidates = await Promise.all(
+		filePaths.map((path) => buildExportCandidateItem(root, path)),
+	)
+	if (loadId !== filesLoadId.value) return
+
+	files.value = exportCandidates
+	selectedFilePaths.value = files.value
+		.filter((file) => !file.disabled && isDefaultSelectedExportCandidate(file.path))
+		.map((file) => file.path)
 }

-await initFiles()
-
 const exportPack = async () => {
-	const filesToExport = files.value.filter((file) => file.selected).map((file) => file.path)
-	folders.value.forEach((args) => {
-		args[1].forEach((child) => {
-			if (child.selected) {
-				filesToExport.push(child.path)
-			}
-		})
-	})
 	const outputPath = await save({
 		defaultPath: `${nameInput.value} ${versionInput.value}.mrpack`,
 		filters: [
@@ -141,10 +104,10 @@ const exportPack = async () => {
 	})

 	if (outputPath) {
-		export_profile_mrpack(
-			props.instance.path,
+		export_instance_mrpack(
+			props.instance.id,
 			outputPath,
-			filesToExport,
+			selectedFilePaths.value,
 			versionInput.value,
 			exportDescription.value,
 			nameInput.value,
@@ -152,108 +115,186 @@ const exportPack = async () => {
 		exportModal.value.hide()
 	}
 }
+
+function resetExportState() {
+	nameInput.value = props.instance.name
+	exportDescription.value = ''
+	versionInput.value = '1.0.0'
+	files.value = []
+	selectedFilePaths.value = []
+	fileTreeKey.value += 1
+	instanceRoot.value = ''
+	loadedDirectories.value = new Set()
+}
+
+async function loadExportDirectory(path) {
+	if (!path || !instanceRoot.value || loadedDirectories.value.has(path)) return
+
+	const loadId = filesLoadId.value
+	loadedDirectories.value.add(path)
+
+	try {
+		const entries = await readDir(`${instanceRoot.value}/${path}`)
+		const childItems = await Promise.all(
+			entries.map((entry) => buildExportDirectoryChildItem(instanceRoot.value, path, entry)),
+		)
+		if (loadId !== filesLoadId.value) return
+
+		appendExportItems(childItems)
+	} catch {
+		loadedDirectories.value.delete(path)
+	}
+}
+
+async function buildExportCandidateItem(instanceRoot, path) {
+	try {
+		const entries = await readDir(`${instanceRoot}/${path}`)
+		const metadata = await getExportCandidateMetadata(instanceRoot, path)
+		return {
+			path,
+			type: 'directory',
+			disabled: isExportCandidateDisabled(path),
+			modified: metadata.modified,
+			count: entries.length,
+		}
+	} catch {
+		return buildExportFileItem(instanceRoot, path)
+	}
+}
+
+async function buildExportDirectoryChildItem(instanceRoot, parentPath, entry) {
+	const path = `${parentPath}/${entry.name}`
+	if (entry.isDirectory) {
+		const metadata = await getExportCandidateMetadata(instanceRoot, path)
+		return {
+			path,
+			type: 'directory',
+			disabled: isExportCandidateDisabled(path),
+			modified: metadata.modified,
+		}
+	}
+
+	return buildExportFileItem(instanceRoot, path)
+}
+
+async function buildExportFileItem(instanceRoot, path) {
+	const metadata = await getExportCandidateMetadata(instanceRoot, path)
+	return {
+		path,
+		type: 'file',
+		disabled: isExportCandidateDisabled(path),
+		size: metadata.size,
+		modified: metadata.modified,
+	}
+}
+
+function appendExportItems(items) {
+	const nextFiles = new Map(files.value.map((file) => [normalizeExportPath(file.path), file]))
+	for (const item of items) {
+		nextFiles.set(normalizeExportPath(item.path), item)
+	}
+	files.value = [...nextFiles.values()]
+}
+
+async function getExportCandidateMetadata(instanceRoot, path) {
+	try {
+		const metadata = await stat(`${instanceRoot}/${path}`)
+		return {
+			size: metadata.size,
+			modified: metadata.mtime ? Math.floor(metadata.mtime.getTime() / 1000) : undefined,
+		}
+	} catch {
+		return {}
+	}
+}
+
+function normalizeExportPath(path) {
+	return path.replaceAll('\\', '/').split('/').filter(Boolean).join('/')
+}
+
+function isDefaultSelectedExportCandidate(path) {
+	return (
+		path.startsWith('mods') ||
+		path.startsWith('datapacks') ||
+		path.startsWith('resourcepacks') ||
+		path.startsWith('shaderpacks') ||
+		path.startsWith('config')
+	)
+}
+
+function isExportCandidateDisabled(path) {
+	return (
+		path === 'profile.json' ||
+		path.startsWith('modrinth_logs') ||
+		path.startsWith('.fabric') ||
+		path.startsWith('__MACOSX')
+	)
+}
 </script>

 <template>
-	<ModalWrapper ref="exportModal" :header="formatMessage(messages.header)">
-		<div class="flex flex-col gap-4 w-[40rem]">
+	<NewModal
+		ref="exportModal"
+		:header="formatMessage(messages.header)"
+		scrollable
+		width="46rem"
+		max-width="calc(100vw - 2rem)"
+	>
+		<div class="flex flex-col gap-4">
 			<div class="grid grid-cols-2 gap-4">
-				<div class="labeled_input">
-					<p>{{ formatMessage(messages.modpackNameLabel) }}</p>
+				<div class="labeled_input w-full">
+					<p class="text-contrast font-semibold">{{ formatMessage(messages.modpackNameLabel) }}</p>
 					<StyledInput
 						v-model="nameInput"
-						:icon="PackageIcon"
 						type="text"
 						:placeholder="formatMessage(messages.modpackNamePlaceholder)"
 						clearable
+						wrapper-class="w-full"
 					/>
 				</div>
-				<div class="labeled_input">
-					<p>{{ formatMessage(messages.versionNumberLabel) }}</p>
+				<div class="labeled_input w-full">
+					<p class="text-contrast font-semibold">
+						{{ formatMessage(messages.versionNumberLabel) }}
+					</p>
 					<StyledInput
 						v-model="versionInput"
-						:icon="VersionIcon"
 						type="text"
 						:placeholder="formatMessage(messages.versionNumberPlaceholder)"
 						clearable
+						wrapper-class="w-full"
 					/>
 				</div>
 			</div>
-			<div class="flex flex-col gap-2">
-				<p class="m-0">{{ formatMessage(commonMessages.descriptionLabel) }}</p>
+			<div class="flex flex-col gap-2 min-w-0">
+				<p class="m-0 text-contrast font-semibold">
+					{{ formatMessage(commonMessages.descriptionLabel) }}
+				</p>
 				<StyledInput
 					v-model="exportDescription"
 					multiline
 					:placeholder="formatMessage(messages.descriptionPlaceholder)"
+					wrapper-class="w-full"
 				/>
 			</div>
-			<Accordion
-				class="w-full bg-surface-4 border border-solid border-surface-5 rounded-2xl overflow-clip"
-				button-class="p-4 w-full border-b border-solid border-b-surface-5 bg-surface-2 -mb-px hover:brightness-[--hover-brightness] group"
-			>
-				<template #title>
-					<span class="flex items-center gap-3 text-contrast group-active:scale-[0.98]">
-						<WrenchIcon aria-hidden="true" class="size-5 text-secondary" />
-						Configure which files are included in this export
-					</span>
-				</template>
-				<div class="flex flex-col [&>*:nth-child(even)]:bg-surface-3">
-					<div v-for="[path, children] in folders" :key="path.name" class="flex flex-col">
-						<Accordion
-							class="flex flex-col"
-							button-class="flex gap-3 pr-4 hover:bg-surface-5 group"
-						>
-							<template #title>
-								<Checkbox
-									:model-value="children.every((child) => child.selected)"
-									:indeterminate="
-										!children.every((child) => child.selected) &&
-										children.some((child) => child.selected)
-									"
-									:description="formatMessage(messages.includeFile, { file: path.name })"
-									class="pl-4 py-2"
-									:disabled="children.every((x) => x.disabled)"
-									@update:model-value="
-										(newValue) => children.forEach((child) => (child.selected = newValue))
-									"
-									@click.stop
-								/>
-								<span class="ml-2 group-active:scale-95">{{ path.name }}/</span>
-							</template>
-							<div v-for="child in children" :key="child.path">
-								<Checkbox
-									v-model="child.selected"
-									:label="child.name"
-									class="w-full px-8 py-2 hover:bg-surface-4 text-primary"
-									:disabled="child.disabled"
-								/>
-							</div>
-						</Accordion>
-					</div>
-					<Checkbox
-						v-for="file in files"
-						:key="file.path"
-						v-model="file.selected"
-						:label="file.name"
-						:disabled="file.disabled"
-						class="w-full px-4 py-2 hover:bg-surface-4 text-primary"
-					/>
-				</div>
-			</Accordion>
-			<div class="flex items-center justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="exportModal.hide">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button @click="exportPack">
-						<PackageIcon />
-						{{ formatMessage(messages.exportButton) }}
-					</button>
-				</ButtonStyled>
-			</div>
+			<FileTreeSelect
+				:key="fileTreeKey"
+				v-model="selectedFilePaths"
+				class="min-w-0"
+				:items="files"
+				@navigate="loadExportDirectory"
+			/>
 		</div>
-	</ModalWrapper>
+		<template #actions>
+			<div class="flex items-center justify-end gap-2">
+				<Button type="outlined" @click="exportModal.hide">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="brand" @click="exportPack">
+					<PackageIcon />
+					{{ formatMessage(messages.exportButton) }}
+				</Button>
+			</div>
+		</template>
+	</NewModal>
 </template>
@@ -1,4 +1,5 @@
 <script setup>
+import { IconButton } from '@modrinth/ui'
 import {
 	DownloadIcon,
 	GameIcon,
@@ -7,7 +8,7 @@ import {
 	StopCircleIcon,
 	TimerIcon,
 } from '@modrinth/assets'
-import { Avatar, ButtonStyled, injectNotificationManager, useRelativeTime } from '@modrinth/ui'
+import { Avatar, injectNotificationManager, useRelativeTime } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
@@ -15,9 +16,10 @@ import { useRouter } from 'vue-router'

 import { trackEvent } from '@/helpers/analytics'
 import { process_listener } from '@/helpers/events'
-import { get_by_profile_path } from '@/helpers/process'
-import { finish_install, kill, run } from '@/helpers/profile'
-import { showProfileInFolder } from '@/helpers/utils.js'
+import { install_existing_instance, install_pack_to_existing_instance } from '@/helpers/install'
+import { kill, run } from '@/helpers/instance'
+import { get_by_instance_id } from '@/helpers/process'
+import { showInstanceInFolder } from '@/helpers/utils.js'
 import { handleSevereError } from '@/store/error.js'

 const { handleError } = injectNotificationManager()
@@ -54,20 +56,21 @@ const installed = computed(() => props.instance.install_stage === 'installed')
 const router = useRouter()

 const seeInstance = async () => {
-	await router.push(`/instance/${encodeURIComponent(props.instance.path)}`)
+	await router.push(`/instance/${encodeURIComponent(props.instance.id)}`)
 }

 const checkProcess = async () => {
-	const runningProcesses = await get_by_profile_path(props.instance.path).catch(handleError)
+	const runningProcesses = await get_by_instance_id(props.instance.id).catch(handleError)

 	playing.value = runningProcesses.length > 0
 }

 const play = async (e, context) => {
 	e?.stopPropagation()
+	if (props.instance.quarantined) return
 	loading.value = true
-	await run(props.instance.path)
-		.catch((err) => handleSevereError(err, { profilePath: props.instance.path }))
+	await run(props.instance.id)
+		.catch((err) => handleSevereError(err, { instanceId: props.instance.id }))
 		.finally(() => {
 			trackEvent('InstanceStart', {
 				loader: props.instance.loader,
@@ -82,7 +85,7 @@ const stop = async (e, context) => {
 	e?.stopPropagation()
 	playing.value = false

-	await kill(props.instance.path).catch(handleError)
+	await kill(props.instance.id).catch(handleError)

 	trackEvent('InstanceStop', {
 		loader: props.instance.loader,
@@ -93,18 +96,33 @@ const stop = async (e, context) => {

 const repair = async (e) => {
 	e?.stopPropagation()
+	if (props.instance.quarantined) return

-	await finish_install(props.instance).catch(handleError)
+	if (
+		props.instance.install_stage !== 'pack_installed' &&
+		(props.instance.link?.type === 'modrinth_modpack' ||
+			props.instance.link?.type === 'server_project_modpack')
+	) {
+		await install_pack_to_existing_instance(props.instance.id, {
+			type: 'fromVersionId',
+			project_id: props.instance.link.project_id ?? props.instance.link.server_project_id ?? '',
+			version_id: props.instance.link.version_id ?? props.instance.link.content_version_id ?? '',
+			title: props.instance.name,
+		}).catch(handleError)
+	} else {
+		await install_existing_instance(props.instance.id, false).catch(handleError)
+	}
 }

 const openFolder = async () => {
-	await showProfileInFolder(props.instance.path)
+	await showInstanceInFolder(props.instance.id)
 }

 const addContent = async () => {
+	if (props.instance.quarantined) return
 	await router.push({
 		path: `/browse/${props.instance.loader === 'vanilla' ? 'datapack' : 'mod'}`,
-		query: { i: props.instance.path },
+		query: { i: props.instance.id },
 	})
 }

@@ -120,7 +138,7 @@ defineExpose({
 const currentEvent = ref(null)

 const unlisten = await process_listener((e) => {
-	if (e.profile_path_id === props.instance.path) {
+	if (e.instance_id === props.instance.id) {
 		currentEvent.value = e.event
 		if (e.event === 'finished') {
 			playing.value = false
@@ -128,7 +146,9 @@ const unlisten = await process_listener((e) => {
 	}
 })

-onMounted(() => checkProcess())
+onMounted(() => {
+	checkProcess()
+})
 onUnmounted(() => unlisten())
 </script>

@@ -142,33 +162,31 @@ onUnmounted(() => unlisten())
 			<Avatar
 				size="48px"
 				:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
-				:tint-by="instance.path"
+				:tint-by="instance.id"
 				alt="Mod card"
 			/>
 			<div class="h-full flex items-center font-bold text-contrast leading-normal">
 				<span class="line-clamp-2">{{ instance.name }}</span>
 			</div>
 			<div class="flex items-center">
-				<ButtonStyled v-if="playing" color="red" circular @mousehover="checkProcess">
-					<button v-tooltip="'Stop'" @click="(e) => stop(e, 'InstanceCard')">
-						<StopCircleIcon />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else-if="modLoading" color="standard" circular>
-					<button v-tooltip="'Instance is loading...'" disabled>
-						<SpinnerIcon class="animate-spin" />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else :color="first ? 'brand' : 'standard'" circular>
-					<button
+				<IconButton type="colored" color="red" :label="'Stop'" v-if="playing" @mouseenter="checkProcess" v-tooltip="'Stop'" @click="(e) => stop(e, 'InstanceCard')">
+					<StopCircleIcon />
+				</IconButton>
+				<IconButton :label="'Instance is loading...'" v-else-if="modLoading" v-tooltip="'Instance is loading...'" disabled>
+					<SpinnerIcon class="animate-spin" />
+				</IconButton>
+				<IconButton
+					v-else-if="!instance.quarantined"
+					:type="first ? 'colored' : 'base'"
+					:color="first ? 'brand' : undefined"
+					label="Play"
 						v-tooltip="'Play'"
 						@click="(e) => play(e, 'InstanceCard')"
-						@mousehover="checkProcess"
+						@mouseenter="checkProcess"
 					>
-						<!-- Translate for optical centering -->
-						<PlayIcon class="translate-x-[1px]" />
-					</button>
-				</ButtonStyled>
+					<!-- Translate for optical centering -->
+					<PlayIcon class="translate-x-[1px]" />
+				</IconButton>
 			</div>
 			<div class="flex items-center col-span-3 gap-1 text-secondary font-semibold">
 				<TimerIcon />
@@ -191,47 +209,41 @@ onUnmounted(() => unlisten())
 				<Avatar
 					size="48px"
 					:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
-					:tint-by="instance.path"
+					:tint-by="instance.id"
 					alt="Mod card"
 					:class="`transition-all ${modLoading || installing ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
 				/>
 				<div class="absolute inset-0 flex items-center justify-center">
-					<ButtonStyled v-if="playing" size="large" color="red" circular>
-						<button
+					<IconButton type="colored" color="red" size="xl" :label="'Stop'" v-if="playing"
 							v-tooltip="'Stop'"
 							:class="{ 'scale-100 opacity-100': playing }"
 							class="transition-all scale-75 origin-bottom opacity-0 card-shadow"
 							@click="(e) => stop(e, 'InstanceCard')"
-							@mousehover="checkProcess"
+							@mouseenter="checkProcess"
 						>
-							<StopCircleIcon />
-						</button>
-					</ButtonStyled>
+						<StopCircleIcon />
+					</IconButton>
 					<SpinnerIcon
 						v-else-if="modLoading || installing"
 						v-tooltip="modLoading ? 'Instance is loading...' : 'Installing...'"
 						class="animate-spin w-8 h-8"
 						tabindex="-1"
 					/>
-					<ButtonStyled v-else-if="!installed" size="large" color="brand" circular>
-						<button
+					<IconButton type="colored" color="brand" size="xl" :label="'Repair'" v-else-if="!installed && !instance.quarantined"
 							v-tooltip="'Repair'"
 							class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
 							@click="(e) => repair(e)"
 						>
-							<DownloadIcon />
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-else size="large" color="brand" circular>
-						<button
+						<DownloadIcon />
+					</IconButton>
+					<IconButton type="colored" color="brand" size="xl" :label="'Play'" v-else-if="!instance.quarantined"
 							v-tooltip="'Play'"
 							class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
 							@click="(e) => play(e, 'InstanceCard')"
-							@mousehover="checkProcess"
+							@mouseenter="checkProcess"
 						>
-							<PlayIcon class="translate-x-[2px]" />
-						</button>
-					</ButtonStyled>
+						<PlayIcon class="translate-x-[2px]" />
+					</IconButton>
 				</div>
 			</div>
 			<div class="flex flex-col gap-1">
@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { ButtonLink } from '@modrinth/ui'
 import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, FormattedTag } from '@modrinth/ui'
+import { Avatar, FormattedTag } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { computed } from 'vue'

@@ -22,7 +23,7 @@ const props = withDefaults(
 )

 const instanceLink = computed(() => {
-	const base = `/instance/${encodeURIComponent(props.instance.path)}`
+	const base = `/instance/${encodeURIComponent(props.instance.id)}`
 	return props.backTab ? `${base}/${props.backTab}` : base
 })
 </script>
@@ -48,9 +49,7 @@ const instanceLink = computed(() => {
 				</span>
 			</span>
 		</router-link>
-		<ButtonStyled>
-			<router-link :to="instanceLink"> <LeftArrowIcon /> Back to instance </router-link>
-		</ButtonStyled>
+		<ButtonLink :to="instanceLink"> <LeftArrowIcon /> Back to instance </ButtonLink>
 	</div>
 </template>

@@ -1,5 +1,9 @@
 <template>
-	<ModalWrapper ref="detectJavaModal" header="Select java version" :show-ad-on-close="false">
+	<ModalWrapper
+		ref="detectJavaModal"
+		:header="formatMessage(messages.title)"
+		:show-ad-on-close="false"
+	>
 		<div class="flex flex-col gap-4">
 			<Table :columns="javaInstallColumns" :data="chosenInstallOptions" row-key="path">
 				<template #cell-version="{ value }">
@@ -10,51 +14,100 @@
 				</template>
 				<template #cell-actions="{ row }">
 					<div class="flex items-center justify-end">
-						<ButtonStyled v-if="currentSelected.path === row.path">
-							<button class="!shadow-none" disabled><CheckIcon /> Selected</button>
-						</ButtonStyled>
-						<ButtonStyled v-else>
-							<button class="!shadow-none" @click="setJavaInstall(row)"><PlusIcon /> Select</button>
-						</ButtonStyled>
+						<Button v-if="currentSelected.path === row.path" disabled>
+							<CheckIcon aria-hidden="true" />
+							{{ formatMessage(messages.selected) }}
+						</Button>
+						<Button v-else @click="setJavaInstall(row)">
+							<PlusIcon aria-hidden="true" />
+							{{ formatMessage(messages.select) }}
+						</Button>
 					</div>
 				</template>
 				<template #empty-state>
-					<div class="p-4 text-secondary">No java installations found!</div>
+					<div class="p-4 text-secondary">
+						{{ formatMessage(messages.noInstallationsFound) }}
+					</div>
 				</template>
 			</Table>
 			<div class="flex justify-end">
-				<ButtonStyled type="outlined">
-					<button
-						class="!shadow-none !border-surface-4 !border"
+				<Button type="outlined"
+						class="!border-surface-4 !border"
 						@click="$refs.detectJavaModal.hide()"
 					>
-						<XIcon />
-						Cancel
-					</button>
-				</ButtonStyled>
+					<XIcon aria-hidden="true" />
+					{{ formatMessage(messages.cancel) }}
+				</Button>
 			</div>
 		</div>
 	</ModalWrapper>
 </template>
 <script setup>
+import { Button } from '@modrinth/ui'
 import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, Table } from '@modrinth/ui'
-import { ref } from 'vue'
+import {
+	defineMessages,
+	injectNotificationManager,
+	Table,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, ref } from 'vue'

 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { find_filtered_jres } from '@/helpers/jre.js'

 const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	title: {
+		id: 'app.java-detection.title',
+		defaultMessage: 'Select Java installation',
+	},
+	versionColumn: {
+		id: 'app.java-detection.columns.version',
+		defaultMessage: 'Version',
+	},
+	pathColumn: {
+		id: 'app.java-detection.columns.path',
+		defaultMessage: 'Path',
+	},
+	actionsColumn: {
+		id: 'app.java-detection.columns.actions',
+		defaultMessage: 'Actions',
+	},
+	selected: {
+		id: 'app.java-detection.selected',
+		defaultMessage: 'Selected',
+	},
+	select: {
+		id: 'app.java-detection.select',
+		defaultMessage: 'Select',
+	},
+	noInstallationsFound: {
+		id: 'app.java-detection.no-installations-found',
+		defaultMessage: 'No Java installations found.',
+	},
+	cancel: {
+		id: 'app.java-detection.cancel',
+		defaultMessage: 'Cancel',
+	},
+})

 const chosenInstallOptions = ref([])
 const detectJavaModal = ref(null)
 const currentSelected = ref({})
-const javaInstallColumns = [
-	{ key: 'version', label: 'Version', width: '9rem' },
-	{ key: 'path', label: 'Path' },
-	{ key: 'actions', label: 'Actions', align: 'right', width: '10rem' },
-]
+const javaInstallColumns = computed(() => [
+	{ key: 'version', label: formatMessage(messages.versionColumn), width: '9rem' },
+	{ key: 'path', label: formatMessage(messages.pathColumn) },
+	{
+		key: 'actions',
+		label: formatMessage(messages.actionsColumn),
+		align: 'right',
+		width: '10rem',
+	},
+])

 defineExpose({
 	show: async (version, currentSelectedJava) => {
@@ -6,7 +6,7 @@
 				autocomplete="off"
 				:disabled="props.disabled"
 				:model-value="props.modelValue ? props.modelValue.path : ''"
-				:placeholder="placeholder ?? '/path/to/java'"
+				:placeholder="placeholder ?? formatMessage(messages.pathPlaceholder)"
 				wrapper-class="installation-input"
 				@update:model-value="
 					(val) => {
@@ -17,62 +17,78 @@
 					}
 				"
 			/>
-			<ButtonStyled
+			<Button
+				type="quiet"
 				:color="
 					!hoveringTest && !testingJava
 						? testingJavaSuccess === true
 							? 'green'
 							: 'red'
-						: 'standard'
+						: undefined
 				"
-				color-fill="text"
-			>
-				<button
-					class="!shadow-none"
+					:aria-label="formatMessage(messages.testJavaInstallation)"
+					class="!text-[var(--legacy-button-color,var(--color-base))] [&>svg]:!text-[var(--legacy-button-color,var(--color-primary))]"
 					:disabled="testingJava || props.disabled"
 					@click="runTest(props.modelValue?.path)"
 					@mouseenter="!props.disabled && (hoveringTest = true)"
 					@mouseleave="hoveringTest = false"
-				>
-					<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
-					<CheckCircleIcon
-						v-else-if="testingJavaSuccess === true && !hoveringTest"
-						class="h-4 w-4"
-					/>
-					<XCircleIcon v-else-if="testingJavaSuccess !== true && !hoveringTest" class="h-4 w-4" />
-					<RefreshCwIcon v-else-if="!props.disabled" class="h-4 w-4" />
-				</button>
-			</ButtonStyled>
+				 :style="{ '--legacy-button-color': (
+					!hoveringTest && !testingJava
+						? testingJavaSuccess === true
+							? 'green'
+							: 'red'
+						: 'standard'
+				) && (
+					!hoveringTest && !testingJava
+						? testingJavaSuccess === true
+							? 'green'
+							: 'red'
+						: 'standard'
+				) !== 'standard' ? `var(--color-${
+					!hoveringTest && !testingJava
+						? testingJavaSuccess === true
+							? 'green'
+							: 'red'
+						: 'standard'
+				})` : undefined }">
+				<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
+				<CheckCircleIcon
+					v-else-if="testingJavaSuccess === true && !hoveringTest"
+					class="h-4 w-4"
+				/>
+				<XCircleIcon v-else-if="testingJavaSuccess !== true && !hoveringTest" class="h-4 w-4" />
+				<RefreshCwIcon v-else-if="!props.disabled" class="h-4 w-4" />
+			</Button>
 		</div>
 		<span class="installation-buttons">
-			<ButtonStyled v-if="props.version">
-				<button
-					v-tooltip="testingJavaSuccess === true ? 'Already installed' : undefined"
-					class="!shadow-none"
+			<Button v-if="props.version"
+					v-tooltip="
+						testingJavaSuccess === true ? formatMessage(messages.alreadyInstalled) : undefined
+					"
 					:disabled="props.disabled || installingJava || testingJavaSuccess === true"
 					@click="reinstallJava"
 				>
-					<DownloadIcon />
-					{{ installingJava ? 'Installing...' : 'Install recommended' }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button class="!shadow-none" :disabled="props.disabled" @click="autoDetect">
-					<SearchIcon />
-					Detect
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button class="!shadow-none" :disabled="props.disabled" @click="handleJavaFileInput()">
-					<FolderSearchIcon />
-					Browse
-				</button>
-			</ButtonStyled>
+				<DownloadIcon />
+				{{
+					installingJava
+						? formatMessage(messages.installing)
+						: formatMessage(messages.installRecommended)
+				}}
+			</Button>
+			<Button :disabled="props.disabled" @click="autoDetect">
+				<SearchIcon />
+				{{ formatMessage(messages.detect) }}
+			</Button>
+			<Button :disabled="props.disabled" @click="handleJavaFileInput()">
+				<FolderSearchIcon />
+				{{ formatMessage(messages.browse) }}
+			</Button>
 		</span>
 	</div>
 </template>

 <script setup>
+import { Button } from '@modrinth/ui'
 import {
 	CheckCircleIcon,
 	DownloadIcon,
@@ -82,7 +98,12 @@ import {
 	SpinnerIcon,
 	XCircleIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, StyledInput } from '@modrinth/ui'
+import {
+	defineMessages,
+	injectNotificationManager,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { ref, watch } from 'vue'

@@ -92,6 +113,38 @@ import { trackEvent } from '@/helpers/analytics'
 import { auto_install_java, find_filtered_jres, get_jre } from '@/helpers/jre.js'

 const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	pathPlaceholder: {
+		id: 'app.java-selector.path.placeholder',
+		defaultMessage: '/path/to/java',
+	},
+	testJavaInstallation: {
+		id: 'app.java-selector.test-installation',
+		defaultMessage: 'Test Java installation',
+	},
+	alreadyInstalled: {
+		id: 'app.java-selector.already-installed',
+		defaultMessage: 'Already installed',
+	},
+	installing: {
+		id: 'app.java-selector.installing',
+		defaultMessage: 'Installing...',
+	},
+	installRecommended: {
+		id: 'app.java-selector.install-recommended',
+		defaultMessage: 'Install recommended',
+	},
+	detect: {
+		id: 'app.java-selector.detect',
+		defaultMessage: 'Detect',
+	},
+	browse: {
+		id: 'app.java-selector.browse',
+		defaultMessage: 'Browse',
+	},
+})

 const props = defineProps({
 	id: {
@@ -1,11 +1,12 @@
 <script setup>
+import { IconButton } from '@modrinth/ui'
 import { CheckIcon } from '@modrinth/assets'
-import { Badge, ButtonStyled } from '@modrinth/ui'
+import { Badge } from '@modrinth/ui'
 import { computed, ref } from 'vue'

 import { SwapIcon } from '@/assets/icons/index.js'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { update_managed_modrinth_version } from '@/helpers/profile'
+import { update_managed_modrinth_version } from '@/helpers/instance'
 import { releaseColor } from '@/helpers/utils'

 const props = defineProps({
@@ -32,14 +33,14 @@ const filteredVersions = computed(() => {
 })

 const modpackVersionModal = ref(null)
-const installedVersion = computed(() => props.instance?.linked_data?.version_id)
+const installedVersion = computed(() => props.instance?.link?.version_id)
 const installing = computed(() => props.instance.install_stage !== 'installed')
 const inProgress = ref(false)

 const switchVersion = async (versionId) => {
 	modpackVersionModal.value.hide()
 	inProgress.value = true
-	await update_managed_modrinth_version(props.instance.path, versionId)
+	await update_managed_modrinth_version(props.instance.id, versionId)
 	inProgress.value = false
 	emit('finish-install')
 }
@@ -59,7 +60,7 @@ const onHide = () => {
 		:on-hide="onHide"
 	>
 		<div class="modal-body">
-			<div v-if="instance.linked_data" class="mod-card">
+			<div v-if="instance.link" class="mod-card">
 				<div class="table">
 					<div class="table-row with-columns table-head">
 						<div class="table-cell table-text download-cell" />
@@ -74,18 +75,16 @@ const onHide = () => {
 							@click="$router.push(`/project/${version.project_id}/version/${version.id}`)"
 						>
 							<div class="table-cell table-text">
-								<ButtonStyled
-									circular
-									:color="version.id === installedVersion ? 'standard' : 'brand'"
-								>
-									<button
+								<IconButton
+									:type="version.id === installedVersion ? 'base' : 'colored'"
+									:color="version.id === installedVersion ? undefined : 'brand'"
+									label="Switch version"
 										:disabled="inProgress || installing || version.id === installedVersion"
 										@click.stop="() => switchVersion(version.id)"
 									>
-										<SwapIcon v-if="version.id !== installedVersion" />
-										<CheckIcon v-else />
-									</button>
-								</ButtonStyled>
+									<SwapIcon v-if="version.id !== installedVersion" />
+									<CheckIcon v-else />
+								</IconButton>
 							</div>
 							<div class="name-cell table-cell table-text">
 								<div class="version-link">
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { CalendarIcon, UsersIcon, XIcon } from '@modrinth/assets'
+import { injectModrinthClient, ProgressBar } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { computed, ref } from 'vue'
+
+const DISMISSED_STORAGE_KEY = 'pride-fundraiser-2026-dismissed'
+
+const client = injectModrinthClient()
+const dismissed = ref(localStorage.getItem(DISMISSED_STORAGE_KEY) === 'true')
+
+const { data: campaignInfo } = useQuery({
+	queryKey: ['campaign', 'pride-26'],
+	queryFn: () => client.labrinth.campaign_internal.getPride26(),
+	enabled: () => !dismissed.value,
+	staleTime: 15 * 60 * 1000,
+	refetchInterval: 15 * 60 * 1000,
+	retry: false,
+})
+const shouldShowBanner = computed(
+	() => !dismissed.value && Number(campaignInfo.value?.target_usd) > 0,
+)
+
+async function openPrideFundraiser() {
+	await openUrl('https://modrinth.com/pride?from=app')
+}
+
+function dismissBanner() {
+	dismissed.value = true
+	localStorage.setItem(DISMISSED_STORAGE_KEY, 'true')
+}
+
+function formatUsd(amount: string | number) {
+	return Number(amount).toLocaleString('en-US', {
+		style: 'currency',
+		currency: 'USD',
+		maximumFractionDigits: 0,
+	})
+}
+
+function daysLeft() {
+	return Math.max(
+		0,
+		Math.ceil((new Date('2026-07-01T00:00:00Z').getTime() - Date.now()) / (24 * 60 * 60 * 1000)),
+	)
+}
+</script>
+
+<template>
+	<div v-if="shouldShowBanner && campaignInfo">
+		<section
+			role="link"
+			tabindex="0"
+			class="flex w-full cursor-pointer flex-col gap-3 rounded-xl border border-solid border-surface-5 bg-button-bg p-3 text-primary transition-[border-color,filter] hover:border-surface-6 hover:brightness-125 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+			aria-label="Open Pride fundraiser"
+			@click="openPrideFundraiser"
+			@keydown.enter="openPrideFundraiser"
+			@keydown.space.prevent="openPrideFundraiser"
+		>
+			<div class="flex w-full items-center justify-between gap-2">
+				<h2 class="m-0 min-w-0 truncate text-base font-semibold text-contrast">
+					Pride Fundraiser 2026
+				</h2>
+				<button
+					type="button"
+					class="m-0 flex size-5 shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-primary transition-colors hover:text-contrast focus-visible:text-contrast"
+					aria-label="Dismiss Pride fundraiser"
+					@click.stop="dismissBanner"
+					@keydown.stop
+				>
+					<XIcon aria-hidden="true" class="size-5" />
+				</button>
+			</div>
+			<div class="h-px w-full bg-surface-5" />
+			<div class="flex w-full flex-col gap-2.5">
+				<div class="flex items-end gap-1 whitespace-nowrap">
+					<span class="text-base font-semibold leading-5 text-contrast">
+						{{ formatUsd(campaignInfo.total_donations_usd) }}
+					</span>
+					<span class="text-xs font-medium leading-4">
+						of {{ formatUsd(campaignInfo.target_usd) }}
+					</span>
+				</div>
+				<ProgressBar
+					class="pride-fundraiser-banner__progress"
+					:progress="Number(campaignInfo.total_donations_usd)"
+					:max="Number(campaignInfo.target_usd)"
+					color="purple"
+					full-width
+					:gradient-border="false"
+					:aria-label="`${formatUsd(campaignInfo.total_donations_usd)} of ${formatUsd(
+						campaignInfo.target_usd,
+					)} raised`"
+				/>
+				<div class="flex flex-wrap items-center gap-2 text-xs font-medium leading-4">
+					<span class="flex items-center gap-1">
+						<UsersIcon aria-hidden="true" class="size-4 shrink-0" />
+						{{ campaignInfo.num_donators.toLocaleString('en-US') }}
+						{{ campaignInfo.num_donators === 1 ? 'supporter' : 'supporters' }}
+					</span>
+					<span class="flex items-center gap-1">
+						<CalendarIcon aria-hidden="true" class="size-4 shrink-0" />
+						{{ daysLeft() }} {{ daysLeft() === 1 ? 'day left' : 'days left' }}
+					</span>
+				</div>
+			</div>
+		</section>
+	</div>
+</template>
+
+<style scoped>
+.pride-fundraiser-banner__progress :deep(.progress-bar) {
+	background: linear-gradient(
+		90deg,
+		var(--color-red) 0%,
+		var(--color-orange) 20%,
+		var(--color-green) 50%,
+		var(--color-blue) 75%,
+		var(--color-purple) 100%
+	);
+}
+</style>
@@ -1,74 +1,309 @@
 <script setup>
 import { SpinnerIcon } from '@modrinth/assets'
-import { Avatar, injectNotificationManager } from '@modrinth/ui'
+import { Avatar, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
-import { onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'

 import NavButton from '@/components/ui/NavButton.vue'
-import { profile_listener } from '@/helpers/events.js'
-import { list } from '@/helpers/profile'
+import { instance_listener } from '@/helpers/events.js'
+import { list } from '@/helpers/instance'
+
+const ITEM_SIZE = 52
+const APPROX_USED_VERTICAL_SPACE = 513 // doesn't need to be exact lol just close enough so there's a little gap and no overflow
+const STORAGE_KEY = 'modrinth-quick-instance-count'

 const { handleError } = injectNotificationManager()
+const queryClient = useQueryClient()
+
+const { formatMessage } = useVIntl()
+
+const maxAuto = ref(0)
+const allInstances = ref([])
+const dragging = ref(false)
+
+const stored = localStorage.getItem(STORAGE_KEY)
+const userLimit = ref(stored === null ? null : Number(stored))
+
+const maxVisible = computed(() => Math.min(maxAuto.value, allInstances.value.length))
+const visibleCount = computed(() => Math.min(userLimit.value ?? maxVisible.value, maxVisible.value))
+const recentInstances = computed(() => allInstances.value.slice(0, visibleCount.value))
+const canDrag = computed(() => maxVisible.value > 0)
+const showOverdrag = ref(false)
+
+const updateMaxAuto = () => {
+	maxAuto.value = Math.max(
+		0,
+		Math.floor((window.innerHeight - APPROX_USED_VERTICAL_SPACE) / ITEM_SIZE),
+	)
+}
+
+const setLimit = (count) => {
+	const clamped = Math.max(0, Math.min(count, maxVisible.value))
+	if (clamped >= maxVisible.value) {
+		userLimit.value = null
+		localStorage.removeItem(STORAGE_KEY)
+	} else {
+		userLimit.value = clamped
+		localStorage.setItem(STORAGE_KEY, String(clamped))
+	}
+}
+
+let dragStartY = 0
+let dragStartCount = 0
+let wasOverdragging = false
+let overdragTimeout = null
+
+const clearOverdragFlash = () => {
+	showOverdrag.value = false
+	if (overdragTimeout !== null) {
+		clearTimeout(overdragTimeout)
+		overdragTimeout = null
+	}
+}
+
+const flashOverdrag = () => {
+	showOverdrag.value = true
+	if (overdragTimeout !== null) {
+		clearTimeout(overdragTimeout)
+	}
+	overdragTimeout = setTimeout(() => {
+		showOverdrag.value = false
+		overdragTimeout = null
+	}, 500)
+}
+
+const onDividerPointerDown = (event) => {
+	if (!canDrag.value) {
+		return
+	}
+	event.preventDefault()
+	dragging.value = true
+	wasOverdragging = false
+	clearOverdragFlash()
+	dragStartY = event.clientY
+	dragStartCount = visibleCount.value
+	document.body.classList.add('quick-instance-dragging')
+	event.currentTarget.setPointerCapture(event.pointerId)
+}
+
+const onDividerPointerMove = (event) => {
+	if (!dragging.value) {
+		return
+	}
+	const delta = event.clientY - dragStartY
+	const target = dragStartCount + Math.round(delta / ITEM_SIZE)
+	const isOverdragging = target < 0 || target > maxAuto.value
+	if (isOverdragging && !wasOverdragging) {
+		flashOverdrag()
+	}
+	wasOverdragging = isOverdragging
+	setLimit(target)
+}
+
+const endDrag = (event) => {
+	if (!dragging.value) {
+		return
+	}
+	dragging.value = false
+	wasOverdragging = false
+	clearOverdragFlash()
+	document.body.classList.remove('quick-instance-dragging')
+	if (event?.currentTarget?.hasPointerCapture?.(event.pointerId)) {
+		event.currentTarget.releasePointerCapture(event.pointerId)
+	}
+}
+
+const onDividerPointerUp = (event) => {
+	endDrag(event)
+}

-const recentInstances = ref([])
 const getInstances = async () => {
-	const profiles = await list().catch(handleError)
+	const instances = await list().catch(handleError)

-	recentInstances.value = profiles
-		.sort((a, b) => {
-			const dateACreated = dayjs(a.created)
-			const dateAPlayed = a.last_played ? dayjs(a.last_played) : dayjs(0)
+	for (const instance of instances) {
+		queryClient.setQueryData(['instances', 'summary', instance.id], instance)
+	}

-			const dateBCreated = dayjs(b.created)
-			const dateBPlayed = b.last_played ? dayjs(b.last_played) : dayjs(0)
+	allInstances.value = instances.sort((a, b) => {
+		const dateACreated = dayjs(a.created)
+		const dateAPlayed = a.last_played ? dayjs(a.last_played) : dayjs(0)

-			const dateA = dateACreated.isAfter(dateAPlayed) ? dateACreated : dateAPlayed
-			const dateB = dateBCreated.isAfter(dateBPlayed) ? dateBCreated : dateBPlayed
+		const dateBCreated = dayjs(b.created)
+		const dateBPlayed = b.last_played ? dayjs(b.last_played) : dayjs(0)

-			if (dateA.isSame(dateB)) {
-				return a.name.localeCompare(b.name)
-			}
+		const dateA = dateACreated.isAfter(dateAPlayed) ? dateACreated : dateAPlayed
+		const dateB = dateBCreated.isAfter(dateBPlayed) ? dateBCreated : dateBPlayed

-			return dateB - dateA
-		})
-		.slice(0, 3)
+		if (dateA.isSame(dateB)) {
+			return a.name.localeCompare(b.name)
+		}
+
+		return dateB - dateA
+	})
 }

 await getInstances()
+updateMaxAuto()

-const unlistenProfile = await profile_listener(async (event) => {
+const unlistenInstance = await instance_listener(async (event) => {
 	if (event.event !== 'synced') {
 		await getInstances()
 	}
 })

+onMounted(() => {
+	window.addEventListener('resize', updateMaxAuto)
+})
+
 onUnmounted(() => {
-	unlistenProfile()
+	window.removeEventListener('resize', updateMaxAuto)
+	document.body.classList.remove('quick-instance-dragging')
+	clearOverdragFlash()
+	unlistenInstance()
+})
+
+const messages = defineMessages({
+	dragTooltip: {
+		id: 'app.quick-instance-switcher.drag-tooltip',
+		defaultMessage: 'Drag to resize',
+	},
+	dragShowTooltip: {
+		id: 'app.quick-instance-switcher.drag-show-tooltip',
+		defaultMessage: 'Drag to show recent instances',
+	},
+})
+
+const dividerTooltip = computed(() => {
+	if (!canDrag.value || dragging.value) {
+		return null
+	}
+	return formatMessage(visibleCount.value === 0 ? messages.dragShowTooltip : messages.dragTooltip)
 })
 </script>

 <template>
-	<div v-for="instance in recentInstances" :key="instance.id" v-tooltip.right="instance.name">
-		<NavButton :to="`/instance/${encodeURIComponent(instance.path)}`" class="relative">
-			<Avatar
-				:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
-				size="28px"
-				:tint-by="instance.path"
-				:class="`transition-all ${instance.install_stage !== 'installed' ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
-			/>
-			<div
-				v-if="instance.install_stage !== 'installed'"
-				class="absolute inset-0 flex items-center justify-center z-10 pointer-events-none"
-			>
-				<SpinnerIcon class="animate-spin w-4 h-4" />
-			</div>
-		</NavButton>
-	</div>
+	<Transition name="top-divider">
+		<div
+			v-if="recentInstances.length > 0"
+			class="top-divider flex items-center justify-center overflow-hidden"
+		>
+			<div class="h-px w-8 bg-surface-5 shrink-0"></div>
+		</div>
+	</Transition>
+	<TransitionGroup name="quick-instance" tag="div" class="flex flex-col items-center">
+		<div
+			v-for="instance in recentInstances"
+			:key="instance.id"
+			v-tooltip.right="instance.name"
+			class="quick-instance-item"
+		>
+			<NavButton :to="`/instance/${encodeURIComponent(instance.id)}`" class="relative">
+				<Avatar
+					:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
+					size="28px"
+					:tint-by="instance.id"
+					:class="`transition-all ${instance.install_stage !== 'installed' ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
+				/>
+				<div
+					v-if="instance.install_stage !== 'installed'"
+					class="absolute inset-0 flex items-center justify-center z-10 pointer-events-none"
+				>
+					<SpinnerIcon class="animate-spin w-4 h-4" />
+				</div>
+			</NavButton>
+		</div>
+	</TransitionGroup>
 	<div
-		v-if="instances && recentInstances.length > 0"
-		class="h-px w-6 mx-auto my-2 bg-divider"
-	></div>
+		v-tooltip.right="dividerTooltip"
+		class="flex items-center justify-center py-2 select-none"
+		:class="canDrag ? 'cursor-ns-resize touch-none group' : ''"
+		@pointerdown="onDividerPointerDown"
+		@pointermove="onDividerPointerMove"
+		@pointerup="onDividerPointerUp"
+		@pointercancel="onDividerPointerUp"
+	>
+		<div
+			class="h-px w-8 transition-colors duration-200"
+			:class="
+				showOverdrag ? 'bg-red' : canDrag ? 'bg-surface-5 group-hover:bg-secondary' : 'bg-surface-5'
+			"
+		></div>
+	</div>
 </template>

-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.top-divider {
+	height: calc(1rem + 1px);
+}
+
+.top-divider-enter-active,
+.top-divider-leave-active {
+	transition:
+		opacity 0.25s ease,
+		height 0.25s ease;
+}
+
+.top-divider-enter-from,
+.top-divider-leave-to {
+	opacity: 0;
+	height: 0;
+}
+
+.quick-instance-item {
+	height: 3rem;
+	overflow: hidden;
+
+	& + & {
+		margin-top: 0.25rem;
+	}
+}
+
+.quick-instance-enter-active,
+.quick-instance-leave-active {
+	transition:
+		opacity 0.25s ease,
+		transform 0.25s ease,
+		height 0.25s ease,
+		margin-top 0.25s ease;
+}
+
+.quick-instance-enter-from,
+.quick-instance-leave-to {
+	opacity: 0;
+	transform: scale(0.5);
+	height: 0;
+	margin-top: 0 !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.top-divider-enter-active,
+	.top-divider-leave-active,
+	.quick-instance-enter-active,
+	.quick-instance-leave-active {
+		transition: none;
+	}
+
+	.top-divider-enter-from,
+	.top-divider-leave-to {
+		opacity: 1;
+		height: calc(1rem + 1px);
+	}
+
+	.quick-instance-enter-from,
+	.quick-instance-leave-to {
+		opacity: 1;
+		transform: none;
+		height: 3rem;
+		margin-top: unset !important;
+	}
+}
+</style>
+
+<style lang="scss">
+body.quick-instance-dragging,
+body.quick-instance-dragging * {
+	cursor: ns-resize !important;
+}
+</style>
@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import { Button } from '@modrinth/ui'
+import { NotepadTextIcon, XIcon } from '@modrinth/assets'
+import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { type } from '@tauri-apps/plugin-os'
+import { $fetch } from 'ofetch'
+import { onMounted, ref } from 'vue'
+
+import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
+import { list } from '@/helpers/instance'
+import { get as getCreds } from '@/helpers/mr_auth.ts'
+
+type Survey = {
+	id: string
+	tally_id: string
+	type: string
+	condition?: string
+	assigned_users?: string[]
+	dismissed_users?: string[]
+}
+
+type TallyApi = {
+	openPopup: (formId: string, options: object) => void
+}
+
+const tallyWindow = window as Window & { Tally?: TallyApi }
+
+const { formatMessage } = useVIntl()
+const { handleError } = injectNotificationManager()
+
+const availableSurvey = ref<Survey | null>(null)
+
+const messages = defineMessages({
+	surveyTitle: {
+		id: 'app.survey.title',
+		defaultMessage: 'Hey there Modrinth user!',
+	},
+	surveyBody: {
+		id: 'app.survey.body',
+		defaultMessage:
+			'Would you mind answering a few questions about your experience with Modrinth App?',
+	},
+	surveyFooter: {
+		id: 'app.survey.footer',
+		defaultMessage:
+			'This feedback will go directly to the Modrinth team and help guide future updates!',
+	},
+	takeSurvey: {
+		id: 'app.survey.take-survey',
+		defaultMessage: 'Take survey',
+	},
+	surveyNoThanks: {
+		id: 'app.survey.no-thanks',
+		defaultMessage: 'No thanks',
+	},
+})
+
+function cleanupOldSurveyDisplayData() {
+	const threeWeeksAgo = new Date()
+	threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21)
+
+	for (let i = 0; i < localStorage.length; i++) {
+		const key = localStorage.key(i)
+
+		if (key?.startsWith('survey-') && key.endsWith('-display')) {
+			const dateValue = new Date(localStorage.getItem(key) ?? '')
+			if (dateValue < threeWeeksAgo) {
+				localStorage.removeItem(key)
+			}
+		}
+	}
+}
+
+async function openSurvey() {
+	if (!availableSurvey.value) {
+		console.error('No survey to open')
+		return
+	}
+
+	const creds = await getCreds().catch(handleError)
+	const userId = creds?.user_id
+
+	const formId = availableSurvey.value.tally_id
+
+	const popupOptions = {
+		layout: 'modal',
+		width: 700,
+		autoClose: 2000,
+		hideTitle: true,
+		hiddenFields: {
+			user_id: userId,
+		},
+		onOpen: () => console.info('Opened user survey'),
+		onClose: () => {
+			console.info('Closed user survey')
+			show_ads_window()
+		},
+		onSubmit: () => console.info('Active user survey submitted'),
+	}
+
+	try {
+		hide_ads_window()
+		if (tallyWindow.Tally?.openPopup) {
+			console.info(`Opening Tally popup for user survey (form ID: ${formId})`)
+			dismissSurvey()
+			tallyWindow.Tally.openPopup(formId, popupOptions)
+		} else {
+			console.warn('Tally script not yet loaded')
+			show_ads_window()
+		}
+	} catch (e) {
+		console.error('Error opening Tally popup:', e)
+		show_ads_window()
+	}
+
+	console.info(`Found user survey to show with tally_id: ${formId}`)
+	tallyWindow.Tally?.openPopup(formId, popupOptions)
+}
+
+function dismissSurvey() {
+	if (!availableSurvey.value) return
+	localStorage.setItem(`survey-${availableSurvey.value.id}-display`, String(new Date()))
+	availableSurvey.value = null
+}
+
+async function processPendingSurveys() {
+	function isWithinLastTwoWeeks(date: string | Date | null | undefined) {
+		if (!date) return false
+		const twoWeeksAgo = new Date()
+		twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14)
+		return new Date(date) >= twoWeeksAgo
+	}
+
+	cleanupOldSurveyDisplayData()
+
+	const creds = await getCreds().catch(handleError)
+	const userId = creds?.user_id
+
+	const instances = (await list().catch(handleError)) ?? []
+	const isActivePlayer = instances.some(
+		(instance) =>
+			isWithinLastTwoWeeks(instance.last_played) && !isWithinLastTwoWeeks(instance.created),
+	)
+
+	let surveys: Survey[] = []
+	try {
+		surveys = await $fetch('https://api.modrinth.com/v2/surveys')
+	} catch (e) {
+		console.error('Error fetching surveys:', e)
+	}
+
+	const surveyToShow = surveys.find(
+		(survey) =>
+			!!(
+				localStorage.getItem(`survey-${survey.id}-display`) === null &&
+				survey.type === 'tally_app' &&
+				((survey.condition === 'active_player' && isActivePlayer) ||
+					(!!userId &&
+						survey.assigned_users?.includes(userId) &&
+						!survey.dismissed_users?.includes(userId)))
+			),
+	)
+
+	if (surveyToShow) {
+		availableSurvey.value = surveyToShow
+	} else {
+		console.info('No user survey to show')
+	}
+}
+
+onMounted(async () => {
+	const osType = await type()
+	if (osType === 'windows') {
+		await processPendingSurveys()
+	} else {
+		console.info('Skipping user surveys on non-Windows platforms')
+	}
+})
+</script>
+
+<template>
+	<transition name="popup-survey">
+		<div
+			v-if="availableSurvey"
+			class="w-[400px] z-20 fixed -bottom-12 pb-16 right-[--right-bar-width] mr-4 rounded-t-2xl card-shadow bg-bg-raised border-surface-5 border-[1px] border-solid border-b-0 p-4"
+		>
+			<h2 class="text-lg font-extrabold mt-0 mb-2">
+				{{ formatMessage(messages.surveyTitle) }}
+			</h2>
+			<p class="m-0 leading-tight">
+				{{ formatMessage(messages.surveyBody) }}
+			</p>
+			<p class="mt-3 mb-4 leading-tight">
+				{{ formatMessage(messages.surveyFooter) }}
+			</p>
+			<div class="flex gap-2">
+				<Button type="colored" color="brand" @click="openSurvey">
+					<NotepadTextIcon />
+					{{ formatMessage(messages.takeSurvey) }}
+				</Button>
+				<Button @click="dismissSurvey">
+					<XIcon />
+					{{ formatMessage(messages.surveyNoThanks) }}
+				</Button>
+			</div>
+		</div>
+	</transition>
+</template>
+
+<style scoped>
+.popup-survey-enter-active {
+	transition:
+		opacity 0.25s ease,
+		transform 0.25s cubic-bezier(0.51, 1.08, 0.35, 1.15);
+	transform-origin: top center;
+}
+
+.popup-survey-leave-active {
+	transition:
+		opacity 0.25s ease,
+		transform 0.25s cubic-bezier(0.68, -0.17, 0.23, 0.11);
+	transform-origin: top center;
+}
+
+.popup-survey-enter-from,
+.popup-survey-leave-to {
+	opacity: 0;
+	transform: translateY(10rem) scale(0.8) scaleY(1.6);
+}
+</style>
@@ -1,5 +1,5 @@
 <script setup>
-import { ButtonStyled, injectNotificationManager, ProjectCard } from '@modrinth/ui'
+import { injectNotificationManager, ProjectCard, Button } from '@modrinth/ui'
 import { ref } from 'vue'

 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
@@ -69,9 +69,7 @@ async function install() {
 					</p>
 				</div>
 				<div class="button-group">
-					<ButtonStyled color="brand">
-						<button @click="install">Install</button>
-					</ButtonStyled>
+					<Button type="colored" color="brand" @click="install">Install</Button>
 				</div>
 			</div>
 		</div>
@@ -4,34 +4,23 @@
 		class="flex items-center gap-2 mr-1.5"
 		data-tauri-drag-region-exclude
 	>
-		<ButtonStyled type="transparent" circular>
-			<button class="relative expanded-button" @click="() => getCurrentWindow().minimize()">
-				<MinimizeIcon />
-			</button>
-		</ButtonStyled>
-		<ButtonStyled type="transparent" circular>
-			<button class="relative expanded-button" @click="() => getCurrentWindow().toggleMaximize()">
-				<RestoreIcon v-if="isMaximized" />
-				<MaximizeIcon v-else />
-			</button>
-		</ButtonStyled>
-		<ButtonStyled
-			type="transparent"
-			color="red"
-			color-fill="none"
-			hover-color-fill="background"
-			circular
-		>
-			<button class="relative expanded-button close-button" @click="handleClose">
-				<XIcon />
-			</button>
-		</ButtonStyled>
+		<IconButton type="quiet" label="Minimize window" class="relative expanded-button" @click="() => getCurrentWindow().minimize()">
+			<MinimizeIcon />
+		</IconButton>
+		<IconButton type="quiet" label="Toggle maximize window" class="relative expanded-button" @click="() => getCurrentWindow().toggleMaximize()">
+			<RestoreIcon v-if="isMaximized" />
+			<MaximizeIcon v-else />
+		</IconButton>
+		<IconButton type="quiet" color="red" label="Close window" class="relative expanded-button close-button hover:!bg-red focus-visible:!bg-red" @click="handleClose">
+			<XIcon />
+		</IconButton>
 	</section>
 </template>

 <script setup>
+import { IconButton } from '@modrinth/ui'
 import { MaximizeIcon, MinimizeIcon, RestoreIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled } from '@modrinth/ui'
+
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
@@ -0,0 +1,123 @@
+<template>
+	<Button type="outlined"
+			v-if="showUpdatePill"
+			native-type="button"
+			class="!h-[34px] text-sm !transition-[opacity,transform,background-color,color,filter] !duration-200 ease-out !text-brand [&>svg]:!text-brand !shadow-[inset_0_0_0_1px_var(--color-brand)] hover:!bg-brand focus-visible:!bg-brand hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
+			:class="{
+				'opacity-0 scale-[0.96]': finishedDownloading && !animateReadyPill,
+				'opacity-100 scale-100': finishedDownloading && animateReadyPill,
+			}"
+			:disabled="isUpdateDownloading"
+			:aria-busy="isUpdateDownloading"
+			@click="handleUpdateClick"
+		>
+		<RefreshCwIcon v-if="finishedDownloading" :class="{ 'animate-spin': restarting }" />
+		<DownloadIcon v-else />
+		<span v-if="isUpdateDownloading">
+			{{ formatMessage(messages.downloadingUpdate) }}
+			<span class="inline-block w-[3ch] text-right tabular-nums">{{ downloadPercent }}%</span>
+		</span>
+		<span v-else>{{ updateLabel }}</span>
+	</Button>
+</template>
+
+<script setup lang="ts">
+import { Button } from '@modrinth/ui'
+import { DownloadIcon, RefreshCwIcon } from '@modrinth/assets'
+import { defineMessages, useVIntl } from '@modrinth/ui'
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+
+import {
+	appUpdateState,
+	downloadAvailableAppUpdate,
+	installAvailableAppUpdate,
+} from '@/providers/app-update'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	update: {
+		id: 'app.action-bar.update',
+		defaultMessage: 'Update',
+	},
+	downloadingUpdate: {
+		id: 'app.action-bar.downloading-update',
+		defaultMessage: 'Downloading update',
+	},
+	reloadToUpdate: {
+		id: 'app.action-bar.reload-to-update',
+		defaultMessage: 'Reload to update',
+	},
+})
+
+const {
+	downloading,
+	downloadPercent,
+	downloadProgress,
+	finishedDownloading,
+	isVisible: isUpdateVisible,
+	metered,
+	restarting,
+} = appUpdateState
+
+const isUpdateDownloading = computed(
+	() =>
+		downloading.value ||
+		(downloadProgress.value > 0 && downloadProgress.value < 1 && !finishedDownloading.value),
+)
+const showUpdatePill = computed(
+	() => isUpdateVisible.value && (finishedDownloading.value || metered.value),
+)
+const animateReadyPill = ref(false)
+const updateLabel = computed(() => {
+	if (isUpdateDownloading.value) {
+		return formatMessage(messages.downloadingUpdate)
+	}
+
+	if (finishedDownloading.value) {
+		return formatMessage(messages.reloadToUpdate)
+	}
+
+	return formatMessage(messages.update)
+})
+let readyPillAnimationFrame: number | null = null
+watch([showUpdatePill, finishedDownloading], async ([show, ready], [wasShown, wasReady]) => {
+	if (readyPillAnimationFrame !== null) {
+		cancelAnimationFrame(readyPillAnimationFrame)
+		readyPillAnimationFrame = null
+	}
+
+	if (!show || !ready) {
+		animateReadyPill.value = false
+		return
+	}
+
+	if (wasShown && wasReady) {
+		return
+	}
+
+	animateReadyPill.value = false
+	await nextTick()
+	readyPillAnimationFrame = requestAnimationFrame(() => {
+		animateReadyPill.value = true
+		readyPillAnimationFrame = null
+	})
+})
+async function handleUpdateClick() {
+	if (isUpdateDownloading.value) {
+		return
+	}
+
+	if (finishedDownloading.value) {
+		await installAvailableAppUpdate()
+	} else {
+		await downloadAvailableAppUpdate()
+	}
+}
+
+onBeforeUnmount(() => {
+	if (readyPillAnimationFrame !== null) {
+		cancelAnimationFrame(readyPillAnimationFrame)
+	}
+})
+</script>
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { MailIcon, SendIcon, UserIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
+import { Button, IconButton } from '@modrinth/ui'
+import { MailIcon, SearchIcon, SendIcon, UserIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
@@ -10,18 +10,12 @@ import {
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
-import { computed, onUnmounted, ref, watch } from 'vue'
+import { computed, ref } from 'vue'

 import FriendsSection from '@/components/ui/friends/FriendsSection.vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { friend_listener } from '@/helpers/events'
-import {
-	add_friend,
-	friends,
-	type FriendWithUserData,
-	remove_friend,
-	transformFriends,
-} from '@/helpers/friends.ts'
+import { useFriends } from '@/composables/use-friends'
+import type { FriendWithUserData } from '@/helpers/friends.ts'
 import type { ModrinthCredentials } from '@/helpers/mr_auth'

 const { formatMessage } = useVIntl()
@@ -35,36 +29,23 @@ const props = defineProps<{
 }>()

 const userCredentials = computed(() => props.credentials)
+const {
+	friends: userFriends,
+	loading,
+	requestFriend,
+	acceptFriend,
+	removeFriend: removeFriendRecord,
+} = useFriends({
+	currentUserId: () => userCredentials.value?.user_id,
+	getCredentials: () => userCredentials.value,
+	onError: handleError,
+})

 const search = ref('')
 const friendInvitesModal = ref()
-
 const username = ref('')
 const addFriendModal = ref()
-async function addFriendFromModal() {
-	addFriendModal.value.hide()
-	await add_friend(username.value).catch(handleError)
-	username.value = ''
-	await loadFriends()
-}

-async function addFriend(friend: FriendWithUserData) {
-	const id = friend.id === userCredentials.value?.user_id ? friend.friend_id : friend.id
-	if (id) {
-		await add_friend(id).catch(handleError)
-		await loadFriends()
-	}
-}
-
-async function removeFriend(friend: FriendWithUserData) {
-	const id = friend.id === userCredentials.value?.user_id ? friend.friend_id : friend.id
-	if (id) {
-		await remove_friend(id).catch(handleError)
-		await loadFriends()
-	}
-}
-
-const userFriends = ref<FriendWithUserData[]>([])
 const sortedFriends = computed<FriendWithUserData[]>(() =>
 	userFriends.value.slice().sort((a, b) => {
 		if (a.last_updated === null && b.last_updated === null) {
@@ -108,42 +89,22 @@ const incomingRequests = computed(() =>
 		.sort((a, b) => b.created.diff(a.created)),
 )

-const loading = ref(true)
-async function loadFriends(timeout = false) {
-	loading.value = timeout
+function addFriendFromModal() {
+	const target = username.value.trim()
+	if (!target) return

-	try {
-		const friendsList = await friends()
-		userFriends.value = await transformFriends(friendsList, userCredentials.value)
-		loading.value = false
-	} catch (e) {
-		console.error('Error loading friends', e)
-		if (timeout) {
-			setTimeout(() => loadFriends(), 15 * 1000)
-		}
-	}
+	addFriendModal.value.hide()
+	requestFriend({ id: target, username: target })
+	username.value = ''
 }

-watch(
-	userCredentials,
-	() => {
-		if (userCredentials.value === undefined) {
-			userFriends.value = []
-			loading.value = false
-		} else if (userCredentials.value === null) {
-			userFriends.value = []
-			loading.value = false
-		} else {
-			loadFriends(true)
-		}
-	},
-	{ immediate: true },
-)
+function addFriend(friend: FriendWithUserData) {
+	acceptFriend(friend)
+}

-const unlisten = await friend_listener(() => loadFriends())
-onUnmounted(() => {
-	unlisten()
-})
+function removeFriend(friend: FriendWithUserData) {
+	removeFriendRecord(friend)
+}

 const messages = defineMessages({
 	addFriend: {
@@ -236,26 +197,20 @@ const messages = defineMessages({
 					</div>
 					<div class="flex gap-2">
 						<template v-if="friend.id === userCredentials?.user_id">
-							<ButtonStyled color="brand">
-								<button @click="addFriend(friend)">
-									<UserPlusIcon />
-									Accept
-								</button>
-							</ButtonStyled>
-							<ButtonStyled>
-								<button @click="removeFriend(friend)">
-									<XIcon />
-									Ignore
-								</button>
-							</ButtonStyled>
+							<Button type="colored" color="brand" @click="addFriend(friend)">
+								<UserPlusIcon />
+								Accept
+							</Button>
+							<Button @click="removeFriend(friend)">
+								<XIcon />
+								Ignore
+							</Button>
 						</template>
 						<template v-else>
-							<ButtonStyled>
-								<button @click="removeFriend(friend)">
-									<XIcon />
-									Cancel
-								</button>
-							</ButtonStyled>
+							<Button @click="removeFriend(friend)">
+								<XIcon />
+								Cancel
+							</Button>
 						</template>
 					</div>
 				</div>
@@ -279,56 +234,49 @@ const messages = defineMessages({
 					wrapper-class="flex-1"
 					@keyup.enter="addFriendFromModal"
 				/>
-				<ButtonStyled color="brand">
-					<button :disabled="username.length === 0" @click="addFriendFromModal">
-						<SendIcon />
-						{{ formatMessage(messages.sendFriendRequest) }}
-					</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" :disabled="username.length === 0" @click="addFriendFromModal">
+					<SendIcon />
+					{{ formatMessage(messages.sendFriendRequest) }}
+				</Button>
 			</div>
 		</div>
 	</ModalWrapper>
 	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 -ml-1">
 		<template v-if="sortedFriends.length > 0">
-			<ButtonStyled circular type="transparent">
-				<button
+			<IconButton type="quiet" :label="formatMessage(messages.addFriend)"
 					v-tooltip="formatMessage(messages.addFriend)"
-					:aria-label="formatMessage(messages.addFriend)"
 					@click="addFriendModal.show"
 				>
-					<UserPlusIcon />
-				</button>
-			</ButtonStyled>
+				<UserPlusIcon />
+			</IconButton>
 			<StyledInput
 				v-model="search"
+				:icon="SearchIcon"
 				type="text"
 				:placeholder="formatMessage(messages.searchFriends)"
 				clearable
-				variant="outlined"
-				wrapper-class="flex-1"
+				input-class="!bg-transparent !border !border-solid !border-button-bg !text-primary !placeholder:text-primary"
+				wrapper-class="flex-1 [&>svg]:!text-primary [&>svg]:!opacity-100"
 				@keyup.esc="search = ''"
 			/>
 		</template>
 		<h3 v-else class="w-full text-base text-primary font-medium m-0">
 			{{ formatMessage(messages.friends) }}
 		</h3>
-		<ButtonStyled v-if="incomingRequests.length > 0" circular type="transparent">
-			<button
+		<IconButton type="quiet" :label="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })" v-if="incomingRequests.length > 0"
 				v-tooltip="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
 				class="relative"
-				:aria-label="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
 				@click="friendInvitesModal.show"
 			>
-				<MailIcon />
-				<span
-					v-if="incomingRequests.length > 0"
-					aria-hidden="true"
-					class="absolute bg-brand text-brand-inverted text-[8px] top-0.5 px-1 right-0.5 min-w-3 h-3 rounded-full flex items-center justify-center font-bold"
-				>
-					{{ incomingRequests.length }}
-				</span>
-			</button>
-		</ButtonStyled>
+			<MailIcon />
+			<span
+				v-if="incomingRequests.length > 0"
+				aria-hidden="true"
+				class="absolute bg-brand text-brand-inverted text-[8px] top-0.5 px-1 right-0.5 min-w-3 h-3 rounded-full flex items-center justify-center font-bold"
+			>
+				{{ incomingRequests.length }}
+			</span>
+		</IconButton>
 	</div>
 	<div class="flex flex-col gap-3">
 		<h3 v-if="loading" class="text-base text-primary font-medium m-0">
@@ -393,7 +341,6 @@ const messages = defineMessages({
 			<FriendsSection
 				v-if="pendingFriends.length > 0"
 				:is-searching="!!search"
-				open-by-default
 				:friends="pendingFriends"
 				:heading="formatMessage(messages.pending)"
 				:remove-friend="removeFriend"
@@ -1,20 +1,20 @@
 <script setup lang="ts">
+import { IconButton, TeleportOverflowMenu } from '@modrinth/ui'
 import { MoreVerticalIcon, TrashIcon, UserIcon, XIcon } from '@modrinth/assets'
 import {
 	Accordion,
 	Avatar,
-	ButtonStyled,
 	defineMessages,
-	OverflowMenu,
 	useVIntl,
 } from '@modrinth/ui'
-import { openUrl } from '@tauri-apps/plugin-opener'
 import { useTemplateRef } from 'vue'
+import { useRouter } from 'vue-router'

 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import type { FriendWithUserData } from '@/helpers/friends.ts'

 const { formatMessage } = useVIntl()
+const router = useRouter()

 const props = withDefaults(
 	defineProps<{
@@ -54,7 +54,7 @@ function createContextMenuOptions(friend: FriendWithUserData) {
 }

 function openProfile(username: string) {
-	openUrl('https://modrinth.com/user/' + username)
+	void router.push(`/user/${encodeURIComponent(username)}`)
 }

 const friendOptions = useTemplateRef('friendOptions')
@@ -122,68 +122,62 @@ const messages = defineMessages({
 				<div
 					v-for="friend in friends"
 					:key="friend.username"
-					class="group grid items-center grid-cols-[auto_1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full mr-1"
+					class="group grid items-center grid-cols-[1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full mr-1"
 					@contextmenu.prevent.stop="
 						(event) => friendOptions?.showMenu(event, friend, createContextMenuOptions(friend))
 					"
 				>
-					<div class="relative">
-						<Avatar
-							:src="friend.avatar"
-							:class="{ grayscale: !friend.online && friend.accepted }"
-							class="w-12 h-12 rounded-full"
-							size="32px"
-							circle
-						/>
-						<span
-							v-if="friend.online"
-							aria-hidden="true"
-							class="bottom-[2px] right-[-2px] absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
-						/>
-					</div>
-					<div class="flex flex-col">
-						<span
-							class="text-sm m-0"
-							:class="friend.online || !friend.accepted ? 'text-contrast' : 'text-primary'"
-						>
-							{{ friend.username }}
-						</span>
-						<span v-if="!friend.accepted" class="m-0 text-xs">
-							{{ formatMessage(messages.friendRequestSent) }}
-						</span>
-						<span v-else-if="friend.status" class="m-0 text-xs">{{ friend.status }}</span>
-					</div>
-					<ButtonStyled v-if="friend.accepted" circular type="transparent">
-						<OverflowMenu
+					<RouterLink
+						:to="`/user/${encodeURIComponent(friend.username)}`"
+						class="grid min-w-0 grid-cols-[auto_1fr] items-center gap-2 text-inherit no-underline"
+					>
+						<div class="relative">
+							<Avatar
+								:src="friend.avatar"
+								:class="{ grayscale: !friend.online && friend.accepted }"
+								class="w-12 h-12 rounded-full"
+								size="32px"
+								circle
+							/>
+							<span
+								v-if="friend.online"
+								aria-hidden="true"
+								class="bottom-[2px] right-[-2px] absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
+							/>
+						</div>
+						<div class="flex flex-col">
+							<span
+								class="text-sm m-0"
+								:class="friend.online || !friend.accepted ? 'text-contrast' : 'text-primary'"
+							>
+								{{ friend.username }}
+							</span>
+							<span v-if="!friend.accepted" class="m-0 text-xs">
+								{{ formatMessage(messages.friendRequestSent) }}
+							</span>
+							<span v-else-if="friend.status" class="m-0 text-xs">{{ friend.status }}</span>
+						</div>
+					</RouterLink>
+					<TeleportOverflowMenu type="quiet" label="More options" v-if="friend.accepted"
 							class="opacity-0 group-hover:opacity-100 transition-opacity"
 							:options="[
-								{
-									id: 'view-profile',
-									action: () => openProfile(friend.username),
-								},
 								{
 									id: 'remove-friend',
+									label: formatMessage(messages.removeFriend),
 									action: () => removeFriend(friend),
-									color: 'red',
+									tone: 'red',
 								},
 							]"
 						>
-							<MoreVerticalIcon />
-							<template #view-profile>
-								<UserIcon />
-								{{ formatMessage(messages.viewProfile) }}
-							</template>
-							<template #remove-friend>
-								<TrashIcon />
-								{{ formatMessage(messages.removeFriend) }}
-							</template>
-						</OverflowMenu>
-					</ButtonStyled>
-					<ButtonStyled v-else type="transparent" circular>
-						<button v-tooltip="formatMessage(messages.cancelRequest)" @click="removeFriend(friend)">
-							<XIcon />
-						</button>
-					</ButtonStyled>
+						<MoreVerticalIcon />
+						<template #remove-friend>
+							<TrashIcon />
+							{{ formatMessage(messages.removeFriend) }}
+						</template>
+					</TeleportOverflowMenu>
+					<IconButton type="quiet" :label="formatMessage(messages.cancelRequest)" v-else v-tooltip="formatMessage(messages.cancelRequest)" @click="removeFriend(friend)">
+						<XIcon />
+					</IconButton>
 				</div>
 			</div>
 		</template>
@@ -1,32 +1,34 @@
 <script setup>
+import { Button } from '@modrinth/ui'
 import { CheckIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
 import {
 	Admonition,
 	Avatar,
-	ButtonStyled,
 	injectNotificationManager,
 	StyledInput,
 } from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { computed, ref } from 'vue'

 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
-import { list } from '@/helpers/profile'
-import { add_server_to_profile, get_profile_worlds } from '@/helpers/worlds.ts'
+import { list } from '@/helpers/instance'
+import { add_server_to_instance, get_instance_worlds } from '@/helpers/worlds.ts'

 const { handleError } = injectNotificationManager()
+const queryClient = useQueryClient()

 const modal = ref()
 const searchFilter = ref('')
-const profiles = ref([])
+const instances = ref([])

 const serverName = ref('')
 const serverAddress = ref('')

-const shownProfiles = computed(() =>
-	profiles.value.filter((profile) => {
-		return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+const shownInstances = computed(() =>
+	instances.value.filter((instance) => {
+		return instance.name.toLowerCase().includes(searchFilter.value.toLowerCase())
 	}),
 )

@@ -36,15 +38,15 @@ defineExpose({
 		serverAddress.value = address
 		searchFilter.value = ''

-		const profilesVal = await list().catch(handleError)
+		const instanceValues = await list().catch(handleError)
 		await Promise.allSettled(
-			profilesVal.map(async (profile) => {
-				profile.adding = false
-				profile.added = false
+			instanceValues.map(async (instance) => {
+				instance.adding = false
+				instance.added = false

 				try {
-					const worlds = await get_profile_worlds(profile.path)
-					profile.added = worlds.some(
+					const worlds = await get_instance_worlds(instance.id)
+					instance.added = worlds.some(
 						(w) => w.type === 'server' && w.address === serverAddress.value,
 					)
 				} catch {
@@ -53,28 +55,29 @@ defineExpose({
 			}),
 		)

-		profiles.value = profilesVal
+		instances.value = instanceValues
 		modal.value.show()

 		trackEvent('AddServerToInstanceStart', { source: 'AddServerToInstanceModal' })
 	},
 })

-async function addServer(profile) {
-	profile.adding = true
+async function addServer(instance) {
+	instance.adding = true
 	try {
-		await add_server_to_profile(profile.path, serverName.value, serverAddress.value, 'prompt')
-		profile.added = true
+		await add_server_to_instance(instance.id, serverName.value, serverAddress.value, 'prompt')
+		instance.added = true
+		await queryClient.invalidateQueries({ queryKey: ['worlds', instance.id] })

 		trackEvent('AddServerToInstance', {
 			server_name: serverName.value,
-			instance_name: profile.name,
+			instance_name: instance.name,
 			source: 'AddServerToInstanceModal',
 		})
 	} catch (err) {
 		handleError(err)
 	}
-	profile.adding = false
+	instance.adding = false
 }
 </script>

@@ -91,34 +94,30 @@ async function addServer(profile) {
 			/>
 			<div class="max-h-[21rem] overflow-y-auto">
 				<div
-					v-for="profile in shownProfiles"
-					:key="profile.path"
+					v-for="instance in shownInstances"
+					:key="instance.id"
 					class="flex w-full items-center justify-between gap-2 bg-bg-raised text-icon shadow-none"
 				>
 					<router-link
 						class="btn btn-transparent p-2 text-left"
-						:to="`/instance/${encodeURIComponent(profile.path)}`"
+						:to="`/instance/${encodeURIComponent(instance.id)}`"
 						@click="modal.hide()"
 					>
 						<Avatar
-							:src="profile.icon_path ? convertFileSrc(profile.icon_path) : null"
+							:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
 							class="mr-2 [--size:2rem]"
 						/>
-						{{ profile.name }}
+						{{ instance.name }}
 					</router-link>
-					<ButtonStyled>
-						<button :disabled="profile.added || profile.adding" @click="addServer(profile)">
-							<PlusIcon v-if="!profile.added && !profile.adding" />
-							<CheckIcon v-else-if="profile.added" />
-							{{ profile.adding ? 'Adding...' : profile.added ? 'Added' : 'Add' }}
-						</button>
-					</ButtonStyled>
+					<Button :disabled="instance.added || instance.adding" @click="addServer(instance)">
+						<PlusIcon v-if="!instance.added && !instance.adding" />
+						<CheckIcon v-else-if="instance.added" />
+						{{ instance.adding ? 'Adding...' : instance.added ? 'Added' : 'Add' }}
+					</Button>
 				</div>
 			</div>
 			<div class="input-group push-right">
-				<ButtonStyled>
-					<button @click="modal.hide()">Cancel</button>
-				</ButtonStyled>
+				<Button @click="modal.hide()">Cancel</Button>
 			</div>
 		</div>
 	</ModalWrapper>
@@ -1,185 +0,0 @@
-<template>
-	<ModalWrapper ref="incompatibleModal" header="Incompatibility warning" :on-hide="onInstall">
-		<div class="modal-body">
-			<p>
-				This {{ versions?.length > 0 ? 'project' : 'version' }} is not compatible with the instance
-				you're trying to install it on. Are you sure you want to continue? Dependencies will not be
-				installed.
-			</p>
-			<table>
-				<thead>
-					<tr class="header">
-						<th>{{ instance?.name }}</th>
-						<th>{{ project.title }}</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr class="content">
-						<td class="data">{{ instance?.loader }} {{ instance?.game_version }}</td>
-						<td>
-							<Combobox
-								v-if="versions?.length > 1"
-								v-model="selectedVersionId"
-								:options="versionOptions"
-								:searchable="true"
-								placeholder="Select version"
-								force-direction="up"
-								:max-height="150"
-							/>
-							<span v-else>
-								<span>{{ selectedVersionLabel }}</span>
-							</span>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-			<div class="button-group">
-				<ButtonStyled type="outlined">
-					<button @click="() => incompatibleModal.hide()"><XIcon />Cancel</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="installing" @click="install()">
-						<DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}
-					</button>
-				</ButtonStyled>
-			</div>
-		</div>
-	</ModalWrapper>
-</template>
-
-<script setup>
-import { DownloadIcon, XIcon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	Combobox,
-	formatLoader,
-	injectNotificationManager,
-	useVIntl,
-} from '@modrinth/ui'
-import { computed, ref } from 'vue'
-
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { trackEvent } from '@/helpers/analytics'
-import { add_project_from_version as installMod } from '@/helpers/profile'
-
-const { handleError } = injectNotificationManager()
-const { formatMessage } = useVIntl()
-
-const instance = ref(null)
-const project = ref(null)
-const versions = ref(null)
-const selectedVersion = ref(null)
-const incompatibleModal = ref(null)
-const installing = ref(false)
-
-const onInstall = ref(() => {})
-
-const selectedVersionLabel = computed(() => {
-	if (!selectedVersion.value) return ''
-	return `${selectedVersion.value.name} (${selectedVersion.value.loaders
-		.map((name) => formatLoader(formatMessage, name))
-		.join(', ')} - ${selectedVersion.value.game_versions.join(', ')})`
-})
-
-const versionOptions = computed(() =>
-	(versions.value ?? []).map((version) => ({
-		value: version.id,
-		label: `${version.name} (${version.loaders
-			.map((name) => formatLoader(formatMessage, name))
-			.join(', ')} - ${version.game_versions.join(', ')})`,
-	})),
-)
-
-const selectedVersionId = computed({
-	get: () => selectedVersion.value?.id ?? null,
-	set: (value) => {
-		if (!value) return
-		selectedVersion.value = (versions.value ?? []).find((version) => version.id === value) ?? null
-	},
-})
-
-defineExpose({
-	show: (instanceVal, projectVal, projectVersions, selected, callback) => {
-		instance.value = instanceVal
-		versions.value = projectVersions ?? []
-		selectedVersion.value = selected ?? projectVersions?.[0] ?? null
-
-		project.value = projectVal
-
-		onInstall.value = callback
-		installing.value = false
-
-		incompatibleModal.value.show()
-
-		trackEvent('ProjectInstallStart', { source: 'ProjectIncompatibilityWarningModal' })
-	},
-})
-
-const install = async () => {
-	installing.value = true
-	await installMod(instance.value.path, selectedVersion.value.id, 'standalone').catch(handleError)
-	installing.value = false
-	onInstall.value(selectedVersion.value.id)
-	incompatibleModal.value.hide()
-
-	trackEvent('ProjectInstall', {
-		loader: instance.value.loader,
-		game_version: instance.value.game_version,
-		id: project.value,
-		version_id: selectedVersion.value.id,
-		project_type: project.value.project_type,
-		title: project.value.title,
-		source: 'ProjectIncompatibilityWarningModal',
-	})
-}
-</script>
-
-<style lang="scss" scoped>
-.data {
-	text-transform: capitalize;
-}
-
-table {
-	width: 100%;
-	border-radius: var(--radius-lg);
-	border-collapse: collapse;
-	box-shadow: 0 0 0 1px var(--color-button-bg);
-}
-
-th {
-	text-align: left;
-	padding: 1rem;
-	background-color: var(--color-bg);
-	overflow: hidden;
-	border-bottom: 1px solid var(--color-button-bg);
-}
-
-th:first-child {
-	border-top-left-radius: var(--radius-lg);
-	border-right: 1px solid var(--color-button-bg);
-}
-
-th:last-child {
-	border-top-right-radius: var(--radius-lg);
-}
-
-td {
-	padding: 1rem;
-}
-
-td:first-child {
-	border-right: 1px solid var(--color-button-bg);
-}
-
-.button-group {
-	display: flex;
-	justify-content: flex-end;
-	gap: 1rem;
-}
-
-.modal-body {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-}
-</style>
@@ -1,108 +1,41 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.header)" :on-hide="reset">
-		<div class="max-w-[31rem] flex flex-col gap-6">
-			<Admonition
-				type="warning"
-				:header="formatMessage(messages.warningTitle)"
-				:body="formatMessage(messages.warningBody)"
-			/>
-			<div v-if="fileName" class="overflow-x-auto whitespace-nowrap text-sm text-secondary">
-				{{ fileName }}
-			</div>
-			<div>
-				<p class="mt-0 leading-tight">
-					{{ formatMessage(messages.body) }}
-				</p>
-				<p class="text-orange font-semibold mb-0 leading-tight">
-					{{ formatMessage(messages.malwareStatement) }}
-				</p>
-			</div>
-			<Checkbox v-model="dontShowAgain" :label="formatMessage(messages.dontShowAgain)" />
-			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="cancel">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="orange">
-					<button :disabled="isProceeding" @click="proceed">
-						<SpinnerIcon v-if="isProceeding" class="animate-spin" />
-						<CircleArrowRightIcon v-else />
-						{{ formatMessage(messages.installAnyway) }}
-					</button>
-				</ButtonStyled>
-			</div>
-		</div>
-	</NewModal>
+	<UnknownFileWarningModal
+		ref="modal"
+		:mode="externalFilesInModpack.length > 0 ? 'modpack' : 'mod'"
+		:file-name="fileName"
+		:external-files-in-modpack="externalFilesInModpack"
+		@cancel="reset"
+		@continue="proceed"
+	/>
 </template>

 <script setup lang="ts">
-import { CircleArrowRightIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
-import {
-	Admonition,
-	ButtonStyled,
-	Checkbox,
-	commonMessages,
-	defineMessages,
-	NewModal,
-	useVIntl,
-} from '@modrinth/ui'
+import { UnknownFileWarningModal } from '@modrinth/ui'
 import { ref, useTemplateRef } from 'vue'

 import { get as getSettings, set as setSettings } from '@/helpers/settings'
 import { useTheming } from '@/store/state'
 import type { FeatureFlag } from '@/store/theme.ts'

-const { formatMessage } = useVIntl()
 const themeStore = useTheming()
 const skipUnknownPackWarningFeatureFlag = 'skip_unknown_pack_warning' as FeatureFlag

-const dontShowAgain = ref(false)
 const modal = useTemplateRef('modal')
 const onProceed = ref<() => Promise<void>>()
-const isProceeding = ref(false)
 const fileName = ref('')
+const externalFilesInModpack = ref<string[]>([])

-const messages = defineMessages({
-	header: {
-		id: 'unknown-pack-warning-modal.header',
-		defaultMessage: 'Confirm installation',
-	},
-	warningTitle: {
-		id: 'unknown-pack-warning-modal.warning.title',
-		defaultMessage: 'Unknown file warning',
-	},
-	warningBody: {
-		id: 'unknown-pack-warning-modal.warning.body',
-		defaultMessage: `We couldn't find this file on Modrinth. We strongly recommend only installing files from sources you trust.`,
-	},
-	body: {
-		id: 'unknown-pack-warning-modal.body',
-		defaultMessage: `A file is only reviewed if it’s uploaded to Modrinth, regardless of its file format (including .mrpack).`,
-	},
-	malwareStatement: {
-		id: 'unknown-pack-warning-modal.malware-statement',
-		defaultMessage: `Malware is often distributed through modpack files by sharing them on platforms like Discord.`,
-	},
-	dontShowAgain: {
-		id: 'unknown-pack-warning-modal.dont-show-again',
-		defaultMessage: `Don't show this warning again`,
-	},
-	installAnyway: {
-		id: 'unknown-pack-warning-modal.install-anyway',
-		defaultMessage: `Install anyway`,
-	},
-})
-
-function show(createInstance: () => Promise<void>, selectedFileName = '') {
+function show(
+	createInstance: () => Promise<void>,
+	selectedFileName = '',
+	selectedExternalFiles: string[] = [],
+) {
 	onProceed.value = createInstance
 	fileName.value = selectedFileName
-	dontShowAgain.value = false
+	externalFilesInModpack.value = selectedExternalFiles

 	if (themeStore.getFeatureFlag(skipUnknownPackWarningFeatureFlag)) {
-		// noinspection ES6MissingAwait
-		createInstance()
+		void createInstance()
 		return
 	}

@@ -112,18 +45,11 @@ function show(createInstance: () => Promise<void>, selectedFileName = '') {
 function reset() {
 	onProceed.value = undefined
 	fileName.value = ''
+	externalFilesInModpack.value = []
 }

-function cancel() {
-	modal.value?.hide()
-}
-
-async function proceed() {
-	if (!onProceed.value) {
-		return
-	}
-
-	if (dontShowAgain.value) {
+async function proceed(dontShowAgain: boolean) {
+	if (dontShowAgain) {
 		themeStore.featureFlags[skipUnknownPackWarningFeatureFlag] = true
 		const settings = await getSettings()
 		settings.feature_flags[skipUnknownPackWarningFeatureFlag] = true
@@ -131,9 +57,8 @@ async function proceed() {
 	}

 	const createInstance = onProceed.value
-	modal.value?.hide()
-	// noinspection ES6MissingAwait
-	createInstance()
+	reset()
+	if (createInstance) void createInstance()
 }

 defineExpose({ show })
@@ -0,0 +1,387 @@
+<template>
+	<PageHeader :title="instance.name">
+		<template #leading>
+			<Avatar :src="iconSrc" :alt="instance.name" size="64px" :tint-by="instance.id" />
+		</template>
+
+		<template v-if="instance.shared_instance || instance.quarantined" #badges>
+			<PageHeaderBadgeItem
+				v-if="instance.quarantined"
+				:icon="LockIcon"
+				aria-label="Locked instance information"
+				class="!border-orange !bg-highlight-orange !text-orange"
+			>
+				Locked
+			</PageHeaderBadgeItem>
+			<PageHeaderBadgeItem
+				v-else
+				:tooltip="sharedInstanceTooltip"
+				aria-label="Shared instance information"
+				class="!border-blue !bg-highlight-blue !text-blue"
+			>
+				Shared
+				<UnknownIcon class="block size-4 shrink-0 text-current" aria-hidden="true" />
+			</PageHeaderBadgeItem>
+		</template>
+
+		<template #metadata>
+			<div v-if="isServerInstance" class="flex flex-wrap items-center gap-2">
+				<InstanceHeaderServerMetadata
+					:loading-server-ping="loadingServerPing"
+					:players-online="playersOnline"
+					:status-online="statusOnline"
+					:recent-plays="recentPlays"
+					:ping="ping"
+					:minecraft-server="minecraftServer"
+					:linked-project-v3="linkedProjectV3"
+					:instance-id="instance.id"
+				/>
+				<PageHeaderMetadataItem v-if="sharedInstanceManager" :action="sharedInstanceManagerAction">
+					{{ sharedInstanceManagerLabel }}
+					<Avatar
+						:src="sharedInstanceManager.avatarUrl"
+						:alt="sharedInstanceManager.name"
+						:tint-by="sharedInstanceManager.tintBy"
+						size="24px"
+						:circle="sharedInstanceManager.type === 'user'"
+						no-shadow
+					/>
+					<span class="min-w-0 truncate">{{ sharedInstanceManager.name }}</span>
+				</PageHeaderMetadataItem>
+			</div>
+			<PageHeaderMetadata v-else>
+				<PageHeaderMetadataItem :icon="Gamepad2Icon" tooltip="Minecraft version">
+					Minecraft {{ instance.game_version }}
+				</PageHeaderMetadataItem>
+				<PageHeaderMetadataItem
+					v-if="sharedInstanceManager?.type !== 'user'"
+					:icon="ServerLoaderIcon"
+					:icon-props="{ loader: loaderDisplayName }"
+					tooltip="Mod loader"
+				>
+					{{ loaderLabel }}
+				</PageHeaderMetadataItem>
+				<PageHeaderMetadataItem
+					v-if="showInstancePlayTime"
+					:icon="TimerIcon"
+					tooltip="Total playtime"
+				>
+					{{ playtimeLabel }}
+				</PageHeaderMetadataItem>
+				<PageHeaderMetadataItem v-if="sharedInstanceManager" :action="sharedInstanceManagerAction">
+					{{ sharedInstanceManagerLabel }}
+					<Avatar
+						:src="sharedInstanceManager.avatarUrl"
+						:alt="sharedInstanceManager.name"
+						:tint-by="sharedInstanceManager.tintBy"
+						size="24px"
+						:circle="sharedInstanceManager.type === 'user'"
+						no-shadow
+					/>
+					<span class="min-w-0 truncate">{{ sharedInstanceManager.name }}</span>
+				</PageHeaderMetadataItem>
+			</PageHeaderMetadata>
+		</template>
+
+		<template #actions>
+			<PageHeaderActions>
+				<Button type="colored" color="brand" size="xl" v-if="isInstalling" native-type="button" disabled>
+					{{ formatMessage(commonMessages.installingLabel) }}
+				</Button>
+				<Button type="colored" color="red" size="xl" v-else-if="playing" native-type="button" :disabled="stopping" @click="emit('stop')">
+					<StopCircleIcon />
+					{{
+						stopping ? formatMessage(messages.stopping) : formatMessage(commonMessages.stopButton)
+					}}
+				</Button>
+				<Button type="colored" color="brand" size="xl" v-else-if="instance.quarantined" v-tooltip="formatMessage(messages.lockedPlayTooltip)" native-type="button" disabled>
+					<PlayIcon />
+					{{ formatMessage(commonMessages.playButton) }}
+				</Button>
+				<Button type="colored" color="brand" size="xl" v-else-if="instance.install_stage !== 'installed'" native-type="button" @click="emit('repair')">
+					<DownloadIcon />
+					{{ formatMessage(messages.repair) }}
+				</Button>
+				<SplitButton
+					v-else-if="!loading && isServerInstance"
+					type="colored"
+					color="brand"
+					size="xl"
+					:options="serverPlayOptions"
+					:menu-label="formatMessage(messages.launchInstance)"
+					@click="emit('playServer')"
+				>
+					<PlayIcon />
+					{{ formatMessage(commonMessages.playButton) }}
+				</SplitButton>
+				<Button type="colored" color="brand" size="xl" v-else-if="!loading" native-type="button" @click="emit('play')">
+					<PlayIcon />
+					{{ formatMessage(commonMessages.playButton) }}
+				</Button>
+				<Button type="colored" color="brand" size="xl" v-else native-type="button" disabled>{{ formatMessage(messages.starting) }}</Button>
+
+				<IconButton size="xl" :label="formatMessage(messages.instanceSettings)"
+						v-tooltip="formatMessage(messages.instanceSettings)"
+						native-type="button"
+						@click="emit('settings')"
+					>
+					<SettingsIcon />
+				</IconButton>
+				<TeleportOverflowMenu type="quiet" size="xl" :label="formatMessage(messages.moreActions)"
+						:options="moreActions"
+					>
+					<MoreVerticalIcon />
+				</TeleportOverflowMenu>
+			</PageHeaderActions>
+		</template>
+	</PageHeader>
+</template>
+
+<script setup lang="ts">
+import { Button, IconButton, SplitButton, TeleportOverflowMenu } from '@modrinth/ui'
+import type { Labrinth } from '@modrinth/api-client'
+import {
+	DownloadIcon,
+	ExternalIcon,
+	FolderOpenIcon,
+	LockIcon,
+	MoreVerticalIcon,
+	PackageIcon,
+	PlayIcon,
+	ReportIcon,
+	SettingsIcon,
+	StopCircleIcon,
+	TagCategoryGamepad2Icon as Gamepad2Icon,
+	TimerIcon,
+	UnknownIcon,
+} from '@modrinth/assets'
+import {
+	Avatar,
+	commonMessages,
+	defineMessages,
+	formatLoaderLabel,
+	LoaderIcon as ServerLoaderIcon,
+	PageHeader,
+	PageHeaderActions,
+	PageHeaderBadgeItem,
+	PageHeaderMetadata,
+	PageHeaderMetadataItem,
+	type ServerLoader,
+	type OverflowMenuOption,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+import type { GameInstance } from '@/helpers/types'
+
+import InstanceHeaderServerMetadata from './instance-page-header-server-metadata.vue'
+
+const messages = defineMessages({
+	createShortcut: {
+		id: 'instance.action.create-shortcut',
+		defaultMessage: 'Create shortcut',
+	},
+	exportModpack: {
+		id: 'instance.action.export-modpack',
+		defaultMessage: 'Export modpack',
+	},
+	instanceSettings: {
+		id: 'instance.action.settings',
+		defaultMessage: 'Instance settings',
+	},
+	launchInstance: {
+		id: 'instance.action.launch-instance',
+		defaultMessage: 'Launch instance',
+	},
+	moreActions: {
+		id: 'instance.action.more-actions',
+		defaultMessage: 'More actions',
+	},
+	neverPlayed: {
+		id: 'instance.playtime.never-played',
+		defaultMessage: 'Never played',
+	},
+	openFolder: {
+		id: 'instance.action.open-folder',
+		defaultMessage: 'Open folder',
+	},
+	repair: {
+		id: 'instance.action.repair',
+		defaultMessage: 'Repair',
+	},
+	lockedPlayTooltip: {
+		id: 'instance.locked.play-tooltip',
+		defaultMessage: 'This instance has been locked',
+	},
+	starting: {
+		id: 'instance.action.starting',
+		defaultMessage: 'Starting...',
+	},
+	stopping: {
+		id: 'instance.action.stopping',
+		defaultMessage: 'Stopping...',
+	},
+	sharedInstanceTooltip: {
+		id: 'instance.shared-instance.tooltip',
+		defaultMessage: "This instance's content is being managed by someone else.",
+	},
+	sharedInstanceOwnerTooltip: {
+		id: 'instance.shared-instance.owner-tooltip',
+		defaultMessage: "This instance's content is being shared to other users.",
+	},
+})
+const router = useRouter()
+
+const props = withDefaults(
+	defineProps<{
+		instance: GameInstance
+		iconSrc?: string | null
+		isServerInstance?: boolean
+		showInstancePlayTime?: boolean
+		timePlayed?: number
+		playing?: boolean
+		loading?: boolean
+		stopping?: boolean
+		loadingServerPing?: boolean
+		playersOnline?: number
+		statusOnline?: boolean
+		recentPlays?: number
+		ping?: number
+		minecraftServer?: Labrinth.Projects.v3.Project['minecraft_server']
+		linkedProjectV3?: Labrinth.Projects.v3.Project
+		sharedInstanceManager?: {
+			type: 'user' | 'server'
+			name: string
+			avatarUrl?: string
+			tintBy: string
+		} | null
+	}>(),
+	{
+		iconSrc: null,
+		isServerInstance: false,
+		showInstancePlayTime: false,
+		timePlayed: 0,
+		playing: false,
+		loading: false,
+		stopping: false,
+		loadingServerPing: false,
+		playersOnline: undefined,
+		statusOnline: false,
+		recentPlays: undefined,
+		ping: undefined,
+		minecraftServer: undefined,
+		linkedProjectV3: undefined,
+		sharedInstanceManager: null,
+	},
+)
+
+const emit = defineEmits<{
+	repair: []
+	stop: []
+	play: []
+	playServer: []
+	settings: []
+	openFolder: []
+	export: []
+	createShortcut: []
+	report: [event?: MouseEvent]
+}>()
+
+const installingStages = [
+	'installing',
+	'pack_installing',
+	'pack_installed',
+	'not_installed',
+	'minecraft_installing',
+]
+
+const { formatMessage } = useVIntl()
+
+const isInstalling = computed(() => installingStages.includes(props.instance.install_stage))
+const loaderDisplayName = computed(() => formatLoaderLabel(props.instance.loader) as ServerLoader)
+const loaderLabel = computed(() =>
+	[loaderDisplayName.value, props.instance.loader_version].filter(Boolean).join(' '),
+)
+const sharedInstanceTooltip = computed(() =>
+	formatMessage(
+		props.instance.shared_instance?.role === 'owner'
+			? messages.sharedInstanceOwnerTooltip
+			: messages.sharedInstanceTooltip,
+	),
+)
+const sharedInstanceManagerLabel = computed(() =>
+	props.sharedInstanceManager?.type === 'server' ? 'Linked to' : 'Managed by',
+)
+const sharedInstanceManagerAction = computed(() => {
+	const manager = props.sharedInstanceManager
+	if (manager?.type !== 'user') return undefined
+	return () => router.push(`/user/${encodeURIComponent(manager.name)}`)
+})
+const playtimeLabel = computed(() => {
+	if (props.timePlayed <= 0) return formatMessage(messages.neverPlayed)
+
+	const hours = Math.floor(props.timePlayed / 3600)
+	if (hours >= 1) {
+		return `${hours} hour${hours > 1 ? 's' : ''}`
+	}
+
+	const minutes = Math.floor(props.timePlayed / 60)
+	if (minutes >= 1) {
+		return `${minutes} minute${minutes > 1 ? 's' : ''}`
+	}
+
+	const seconds = Math.floor(props.timePlayed)
+	return `${seconds} second${seconds > 1 ? 's' : ''}`
+})
+const serverPlayOptions = computed<OverflowMenuOption[]>(() => [
+	{
+		id: 'launch_instance',
+		label: formatMessage(messages.launchInstance),
+		icon: PlayIcon,
+		action: () => emit('play'),
+	},
+])
+const moreActions = computed<OverflowMenuOption[]>(() => {
+	const actions: OverflowMenuOption[] = [
+		{
+			id: 'open-folder',
+			label: formatMessage(messages.openFolder),
+			icon: FolderOpenIcon,
+			action: () => emit('openFolder'),
+		},
+	]
+
+	if (!props.instance.quarantined) {
+		actions.push(
+			{
+				id: 'export-mrpack',
+				label: formatMessage(messages.exportModpack),
+				icon: PackageIcon,
+				action: () => emit('export'),
+			},
+			{
+				id: 'create-shortcut',
+				label: formatMessage(messages.createShortcut),
+				icon: ExternalIcon,
+				action: () => emit('createShortcut'),
+			},
+		)
+	}
+
+	if (props.instance.shared_instance?.role === 'member') {
+		actions.push(
+			{ type: 'divider' },
+			{
+				id: 'report-shared-instance',
+				label: formatMessage(commonMessages.reportButton),
+				icon: ReportIcon,
+				tone: 'red',
+				action: (event) => emit('report', event),
+			},
+		)
+	}
+
+	return actions
+})
+</script>
@@ -0,0 +1,63 @@
+<template>
+	<div class="flex items-center flex-wrap gap-2">
+		<template v-if="loadingServerPing">
+			<ServerOnlinePlayers
+				v-if="playersOnline !== undefined"
+				:online="playersOnline"
+				:status-online="statusOnline"
+				hide-label
+			/>
+			<ServerRecentPlays :recent-plays="recentPlays ?? 0" hide-label />
+			<div
+				v-if="
+					(playersOnline !== undefined || recentPlays !== undefined) &&
+					(minecraftServer?.region || ping)
+				"
+				class="w-1.5 h-1.5 rounded-full bg-surface-5"
+			></div>
+			<ServerPing v-if="ping" :ping="ping" />
+		</template>
+
+		<ServerRegion v-if="minecraftServer?.region" :region="minecraftServer?.region" />
+
+		<div v-if="minecraftServer?.region || ping" class="w-1.5 h-1.5 rounded-full bg-surface-5"></div>
+
+		<div v-if="linkedProjectV3" class="flex gap-1.5 items-center font-medium text-primary">
+			Linked to
+			<Avatar
+				:src="linkedProjectV3.icon_url"
+				:alt="linkedProjectV3.name"
+				:tint-by="instanceId"
+				size="24px"
+			/>
+			<router-link
+				:to="`/project/${linkedProjectV3.slug ?? linkedProjectV3.id}`"
+				class="hover:underline text-primary truncate"
+			>
+				{{ linkedProjectV3.name }}
+			</router-link>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import {
+	Avatar,
+	ServerOnlinePlayers,
+	ServerPing,
+	ServerRecentPlays,
+	ServerRegion,
+} from '@modrinth/ui'
+
+defineProps<{
+	loadingServerPing?: boolean
+	playersOnline?: number
+	statusOnline?: boolean
+	recentPlays?: number
+	ping?: number
+	minecraftServer?: Labrinth.Projects.v3.Project['minecraft_server']
+	linkedProjectV3?: Labrinth.Projects.v3.Project
+	instanceId?: string
+}>()
+</script>
@@ -0,0 +1,141 @@
+<template>
+	<StackedAdmonitions v-bind="$attrs" :items="stackItems" class="w-full">
+		<template #item="{ item, dismissible }">
+			<InstanceAdmonitionsSharedInstanceStale
+				v-if="item.kind === 'shared-instance-stale'"
+				:instance="instance"
+				@published="emit('published')"
+			/>
+			<InstanceAdmonitionsSharedInstanceUpdateAvailable
+				v-else-if="item.kind === 'shared-instance-update-available'"
+				:instance-name="instance.name"
+				@review="emit('review-update', $event)"
+			/>
+			<InstanceAdmonitionsSharedInstanceWrongAccount
+				v-else-if="item.kind === 'shared-instance-wrong-account'"
+				:expected-user-id="sharedInstanceExpectedUserId"
+				:role="sharedInstanceRole"
+				:signed-out="sharedInstanceSignedOut"
+			/>
+			<InstanceAdmonitionsSharedInstanceUnavailable
+				v-else-if="item.kind === 'shared-instance-unavailable'"
+				:reason="displayedSharedInstanceUnavailableReason"
+				:manager="sharedInstanceUnavailableManager"
+				:dismissible="dismissible"
+				@dismiss="sharedInstanceUnavailableDismissed = true"
+				@delete="emit('delete')"
+			/>
+		</template>
+	</StackedAdmonitions>
+</template>
+
+<script setup lang="ts">
+import { StackedAdmonitions } from '@modrinth/ui'
+import { computed, ref, watch } from 'vue'
+
+import type { SharedInstanceUnavailableReason } from '@/helpers/install'
+import type { GameInstance } from '@/helpers/types'
+
+import InstanceAdmonitionsSharedInstanceStale from './instance-admonitions-shared-instance-stale.vue'
+import InstanceAdmonitionsSharedInstanceUnavailable from './instance-admonitions-shared-instance-unavailable.vue'
+import InstanceAdmonitionsSharedInstanceUpdateAvailable from './instance-admonitions-shared-instance-update-available.vue'
+import InstanceAdmonitionsSharedInstanceWrongAccount from './instance-admonitions-shared-instance-wrong-account.vue'
+import type { InstanceAdmonitionItem, SharedInstanceRole } from './types'
+
+defineOptions({
+	inheritAttrs: false,
+})
+
+const props = defineProps<{
+	instance: GameInstance
+	sharedInstanceUnavailableReason?: SharedInstanceUnavailableReason | null
+	sharedInstanceUnavailableManager?: string | null
+	sharedInstanceWrongAccount?: boolean
+	sharedInstanceExpectedUserId?: string | null
+	sharedInstanceRole?: SharedInstanceRole | null
+	sharedInstanceSignedOut?: boolean
+	sharedInstanceUpdateAvailable?: boolean
+}>()
+
+const emit = defineEmits<{
+	published: []
+	delete: []
+	'review-update': [event: MouseEvent]
+}>()
+
+const sharedInstanceWrongAccount = computed(() => props.sharedInstanceWrongAccount ?? false)
+const displayedSharedInstanceUnavailableReason = computed<SharedInstanceUnavailableReason | null>(
+	() =>
+		props.instance.quarantined ? 'quarantined' : (props.sharedInstanceUnavailableReason ?? null),
+)
+const sharedInstanceUnavailableDismissed = ref(false)
+const showSharedInstancePublishAdmonition = computed(
+	() =>
+		!sharedInstanceWrongAccount.value &&
+		props.instance.install_stage === 'installed' &&
+		props.instance.shared_instance?.role === 'owner' &&
+		props.instance.shared_instance.status === 'stale',
+)
+const showSharedInstanceUpdateAdmonition = computed(
+	() =>
+		!sharedInstanceWrongAccount.value &&
+		!displayedSharedInstanceUnavailableReason.value &&
+		props.instance.install_stage === 'installed' &&
+		props.sharedInstanceRole === 'member' &&
+		props.sharedInstanceUpdateAvailable === true,
+)
+
+const stackItems = computed<InstanceAdmonitionItem[]>(() => {
+	const items: InstanceAdmonitionItem[] = []
+
+	if (sharedInstanceWrongAccount.value) {
+		items.push({
+			id: 'shared-instance-wrong-account',
+			type: 'warning',
+			dismissible: false,
+			kind: 'shared-instance-wrong-account',
+		})
+	}
+
+	const unavailableReason = displayedSharedInstanceUnavailableReason.value
+	const sharedInstanceQuarantined = unavailableReason === 'quarantined'
+	if (
+		unavailableReason &&
+		(sharedInstanceQuarantined || !sharedInstanceUnavailableDismissed.value)
+	) {
+		items.push({
+			id: 'shared-instance-unavailable',
+			type: 'warning',
+			dismissible: !sharedInstanceQuarantined,
+			kind: 'shared-instance-unavailable',
+		})
+	}
+
+	if (showSharedInstancePublishAdmonition.value) {
+		items.push({
+			id: 'shared-instance-stale',
+			type: 'warning',
+			dismissible: false,
+			kind: 'shared-instance-stale',
+		})
+	}
+
+	if (showSharedInstanceUpdateAdmonition.value) {
+		items.push({
+			id: 'shared-instance-update-available',
+			type: 'info',
+			dismissible: false,
+			kind: 'shared-instance-update-available',
+		})
+	}
+
+	return items
+})
+
+watch(
+	() => [props.instance.id, displayedSharedInstanceUnavailableReason.value],
+	() => {
+		sharedInstanceUnavailableDismissed.value = false
+	},
+)
+</script>
@@ -0,0 +1,82 @@
+import { defineMessages } from '@modrinth/ui'
+
+export const instanceAdmonitionsMessages = defineMessages({
+	sharedInstanceChangesHeader: {
+		id: 'app.instance.admonitions.shared-instance.changes-header',
+		defaultMessage: "Your changes haven't been shared yet",
+	},
+	sharedInstanceChangesBody: {
+		id: 'app.instance.admonitions.shared-instance.changes-body',
+		defaultMessage: "Your local instance is ahead of the users you've shared it with.",
+	},
+	sharedInstancePublishButton: {
+		id: 'app.instance.admonitions.shared-instance.publish-button',
+		defaultMessage: 'Push update',
+	},
+	sharedInstancePublishingButton: {
+		id: 'app.instance.admonitions.shared-instance.publishing-button',
+		defaultMessage: 'Pushing...',
+	},
+	sharedInstanceReviewingButton: {
+		id: 'app.instance.admonitions.shared-instance.reviewing-button',
+		defaultMessage: 'Reviewing...',
+	},
+	sharedInstanceUpdateAvailableHeader: {
+		id: 'app.instance.admonitions.shared-instance.update-available-header',
+		defaultMessage: 'An update is available',
+	},
+	sharedInstanceUpdateAvailableBody: {
+		id: 'app.instance.admonitions.shared-instance.update-available-body',
+		defaultMessage:
+			'An update is required to play {name}. Please update to latest version to launch the game.',
+	},
+	sharedInstanceReviewUpdateButton: {
+		id: 'app.instance.admonitions.shared-instance.review-update-button',
+		defaultMessage: 'Review update',
+	},
+	sharedInstanceReviewHeader: {
+		id: 'app.instance.admonitions.shared-instance.review-header',
+		defaultMessage: 'Review changes',
+	},
+	sharedInstanceReviewAdmonitionHeader: {
+		id: 'app.instance.admonitions.shared-instance.review-admonition-header',
+		defaultMessage: 'Push update',
+	},
+	sharedInstanceReviewDescription: {
+		id: 'app.instance.admonitions.shared-instance.review-description',
+		defaultMessage:
+			'Review the content changes that will be shared with everyone using this instance.',
+	},
+	sharedInstanceAddedLabel: {
+		id: 'app.instance.admonitions.shared-instance.added-label',
+		defaultMessage: 'Added',
+	},
+	sharedInstanceRemovedLabel: {
+		id: 'app.instance.admonitions.shared-instance.removed-label',
+		defaultMessage: 'Removed',
+	},
+	sharedInstanceWrongAccountHeader: {
+		id: 'app.instance.shared-instance-wrong-account.warning-header',
+		defaultMessage: 'You are using the wrong Modrinth account',
+	},
+	sharedInstanceSignedOutHeader: {
+		id: 'app.instance.shared-instance-wrong-account.signed-out-header',
+		defaultMessage: 'You need to sign in to Modrinth',
+	},
+	sharedInstanceWrongAccountSignInAs: {
+		id: 'app.instance.shared-instance-wrong-account.sign-in-as-label',
+		defaultMessage: 'Sign in as',
+	},
+	sharedInstanceWrongAccountUserBody: {
+		id: 'app.instance.shared-instance-wrong-account.user-admonition-body-v2',
+		defaultMessage: 'to receive updates for this shared instance.',
+	},
+	sharedInstanceWrongAccountOwnerBody: {
+		id: 'app.instance.shared-instance-wrong-account.owner-admonition-body-v2',
+		defaultMessage: "to manage this shared instance. You won't be able to push updates to users.",
+	},
+	sharedInstanceWrongAccountFallbackUsername: {
+		id: 'app.instance.shared-instance-wrong-account.fallback-username',
+		defaultMessage: 'the linked account',
+	},
+})
@@ -0,0 +1,65 @@
+<template>
+	<Admonition
+		type="info"
+		inline-actions
+		:header="formatMessage(messages.sharedInstanceChangesHeader)"
+	>
+		{{ formatMessage(messages.sharedInstanceChangesBody) }}
+		<template #actions>
+			<Button type="colored" color="blue" class="!h-10" :disabled="isPublishButtonDisabled" @click="reviewChanges">
+				<SpinnerIcon
+					v-if="isReviewingPublish || isPublishing"
+					class="animate-spin"
+					aria-hidden="true"
+				/>
+				<UploadIcon v-else aria-hidden="true" />
+				{{
+					isPublishing
+						? formatMessage(messages.sharedInstancePublishingButton)
+						: isReviewingPublish
+							? formatMessage(messages.sharedInstanceReviewingButton)
+							: formatMessage(messages.sharedInstancePublishButton)
+				}}
+			</Button>
+		</template>
+	</Admonition>
+
+	<SharedInstancePublishModal
+		ref="publishModal"
+		:instance="instance"
+		@published="emit('published')"
+		@state-change="publishState = $event"
+	/>
+</template>
+
+<script setup lang="ts">
+import { Button } from '@modrinth/ui'
+import { SpinnerIcon, UploadIcon } from '@modrinth/assets'
+import { Admonition, useVIntl } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+import SharedInstancePublishModal from '@/components/ui/shared-instances/SharedInstancePublishModal.vue'
+import type { GameInstance } from '@/helpers/types'
+
+import { instanceAdmonitionsMessages as messages } from './instance-admonitions-messages'
+
+defineProps<{
+	instance: GameInstance
+}>()
+
+const emit = defineEmits<{
+	published: []
+}>()
+
+const { formatMessage } = useVIntl()
+const publishModal = ref<InstanceType<typeof SharedInstancePublishModal>>()
+const publishState = ref<'idle' | 'reviewing' | 'publishing'>('idle')
+const isPublishing = computed(() => publishState.value === 'publishing')
+const isReviewingPublish = computed(() => publishState.value === 'reviewing')
+
+const isPublishButtonDisabled = computed(() => isPublishing.value || isReviewingPublish.value)
+
+function reviewChanges(e?: MouseEvent) {
+	publishModal.value?.show(e)
+}
+</script>
@@ -0,0 +1,50 @@
+<template>
+	<Admonition
+		type="warning"
+		:inline-actions="reason === 'quarantined'"
+		:header="formatMessage(sharedInstanceUnavailableTitleMessage(reason ?? null))"
+		:dismissible="dismissible"
+		@dismiss="emit('dismiss')"
+	>
+		{{ formatSharedInstanceUnavailable(reason ?? null, manager) }}
+		<template v-if="reason === 'quarantined'" #actions>
+			<Button type="colored" color="orange" class="!h-10" @click="emit('delete')">
+				<TrashIcon aria-hidden="true" />
+				{{ formatMessage(messages.deleteInstance) }}
+			</Button>
+		</template>
+	</Admonition>
+</template>
+
+<script setup lang="ts">
+import { Button } from '@modrinth/ui'
+import { TrashIcon } from '@modrinth/assets'
+import { Admonition, defineMessages, useVIntl } from '@modrinth/ui'
+
+import type { SharedInstanceUnavailableReason } from '@/helpers/install'
+import {
+	sharedInstanceUnavailableTitleMessage,
+	useSharedInstanceErrors,
+} from '@/helpers/shared-instance-errors'
+
+defineProps<{
+	reason?: SharedInstanceUnavailableReason | null
+	manager?: string | null
+	dismissible?: boolean
+}>()
+
+const emit = defineEmits<{
+	dismiss: []
+	delete: []
+}>()
+
+const { formatMessage } = useVIntl()
+const { formatSharedInstanceUnavailable } = useSharedInstanceErrors()
+
+const messages = defineMessages({
+	deleteInstance: {
+		id: 'instance.locked.delete-button',
+		defaultMessage: 'Delete instance',
+	},
+})
+</script>
@@ -0,0 +1,33 @@
+<template>
+	<Admonition
+		type="info"
+		inline-actions
+		:header="formatMessage(messages.sharedInstanceUpdateAvailableHeader)"
+	>
+		{{ formatMessage(messages.sharedInstanceUpdateAvailableBody, { name: instanceName }) }}
+		<template #actions>
+			<Button type="colored" color="blue" class="!h-10" @click="emit('review', $event)">
+				<DownloadIcon aria-hidden="true" />
+				{{ formatMessage(messages.sharedInstanceReviewUpdateButton) }}
+			</Button>
+		</template>
+	</Admonition>
+</template>
+
+<script setup lang="ts">
+import { Button } from '@modrinth/ui'
+import { DownloadIcon } from '@modrinth/assets'
+import { Admonition, useVIntl } from '@modrinth/ui'
+
+import { instanceAdmonitionsMessages as messages } from './instance-admonitions-messages'
+
+defineProps<{
+	instanceName: string
+}>()
+
+const emit = defineEmits<{
+	review: [event: MouseEvent]
+}>()
+
+const { formatMessage } = useVIntl()
+</script>
@@ -0,0 +1,78 @@
+<template>
+	<Admonition type="warning" :header="formatMessage(headerMessage)">
+		<span class="flex flex-wrap items-center gap-x-1.5 gap-y-1">
+			<span>{{ formatMessage(messages.sharedInstanceWrongAccountSignInAs) }}</span>
+			<span
+				v-if="sharedInstanceExpectedUser"
+				class="inline-flex max-w-full min-w-0 items-center gap-1.5 align-middle font-semibold text-contrast"
+			>
+				<Avatar
+					:src="sharedInstanceExpectedUser.avatarUrl"
+					:alt="sharedInstanceExpectedUsername"
+					:tint-by="sharedInstanceExpectedUser.tintBy"
+					size="20px"
+					circle
+					no-shadow
+				/>
+				<span class="min-w-0 truncate">{{ sharedInstanceExpectedUsername }}</span>
+			</span>
+			<span v-else class="font-semibold">{{ sharedInstanceExpectedUsername }}</span>
+			<span>{{ formatMessage(bodyMessage) }}</span>
+		</span>
+	</Admonition>
+</template>
+
+<script setup lang="ts">
+import { Admonition, Avatar, useVIntl } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
+import { computed } from 'vue'
+
+import { get_user } from '@/helpers/cache'
+
+import { instanceAdmonitionsMessages as messages } from './instance-admonitions-messages'
+import type { SharedInstanceRole } from './types'
+
+const props = defineProps<{
+	expectedUserId?: string | null
+	role?: SharedInstanceRole | null
+	signedOut?: boolean
+}>()
+
+const { formatMessage } = useVIntl()
+const expectedUserId = computed(() => props.expectedUserId ?? null)
+const expectedUserQuery = useQuery({
+	queryKey: computed(() => ['user', expectedUserId.value]),
+	queryFn: async () => {
+		if (!expectedUserId.value) return null
+
+		return await get_user(expectedUserId.value, 'bypass').catch(() => null)
+	},
+	enabled: () => !!expectedUserId.value,
+	staleTime: 30_000,
+})
+const sharedInstanceExpectedUser = computed(() => {
+	const user = expectedUserQuery.data.value
+	if (!user) return null
+
+	return {
+		username: user.username,
+		avatarUrl: user.avatar_url ?? undefined,
+		tintBy: user.id,
+	}
+})
+const sharedInstanceExpectedUsername = computed(
+	() =>
+		sharedInstanceExpectedUser.value?.username ||
+		formatMessage(messages.sharedInstanceWrongAccountFallbackUsername),
+)
+const headerMessage = computed(() =>
+	props.signedOut
+		? messages.sharedInstanceSignedOutHeader
+		: messages.sharedInstanceWrongAccountHeader,
+)
+const bodyMessage = computed(() =>
+	props.role === 'owner'
+		? messages.sharedInstanceWrongAccountOwnerBody
+		: messages.sharedInstanceWrongAccountUserBody,
+)
+</script>
@@ -0,0 +1,13 @@
+import type { StackedAdmonitionItem } from '@modrinth/ui'
+
+export type InstanceAdmonitionKind =
+	| 'shared-instance-stale'
+	| 'shared-instance-update-available'
+	| 'shared-instance-unavailable'
+	| 'shared-instance-wrong-account'
+
+export type InstanceAdmonitionItem = StackedAdmonitionItem & {
+	kind: InstanceAdmonitionKind
+}
+
+export type SharedInstanceRole = 'owner' | 'member'
@@ -1,15 +1,8 @@
 <script setup lang="ts">
+import { Button, TeleportOverflowMenu } from '@modrinth/ui'
 import { CopyIcon, EditIcon, PlusIcon, SpinnerIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
-import {
-	Avatar,
-	ButtonStyled,
-	Checkbox,
-	defineMessages,
-	injectNotificationManager,
-	OverflowMenu,
-	StyledInput,
-	useVIntl,
-} from '@modrinth/ui'
+import { Avatar, Checkbox, Chips, defineMessages, injectNotificationManager, StyledInput, useVIntl } from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { open } from '@tauri-apps/plugin-dialog'
 import { computed, type Ref, ref, watch } from 'vue'
@@ -17,7 +10,8 @@ import { useRouter } from 'vue-router'

 import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
 import { trackEvent } from '@/helpers/analytics'
-import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
+import { install_duplicate_instance } from '@/helpers/install'
+import { edit, edit_icon, list, remove } from '@/helpers/instance'
 import { injectInstanceSettings } from '@/providers/instance-settings'

 import type { GameInstance } from '../../../helpers/types'
@@ -25,21 +19,29 @@ import type { GameInstance } from '../../../helpers/types'
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const router = useRouter()
+const queryClient = useQueryClient()

 const deleteConfirmModal = ref()

 const { instance } = injectInstanceSettings()
+type ReleaseChannel = GameInstance['update_channel']
+const releaseChannelOptions: ReleaseChannel[] = ['release', 'beta', 'alpha']

 const title = ref(instance.value.name)
 const icon: Ref<string | undefined> = ref(instance.value.icon_path)
 const groups = ref([...instance.value.groups])
+const savingReleaseChannel = ref(false)
+const selectedReleaseChannel = ref<ReleaseChannel>(instance.value.update_channel)
+const releaseChannelDisabledItems = computed<ReleaseChannel[]>(() =>
+	savingReleaseChannel.value ? [...releaseChannelOptions] : [],
+)

 const newCategoryInput = ref('')

 const installing = computed(() => instance.value.install_stage !== 'installed')

-async function duplicateProfile() {
-	await duplicate(instance.value.path).catch(handleError)
+async function duplicateInstance() {
+	await install_duplicate_instance(instance.value.id).catch(handleError)
 	trackEvent('InstanceDuplicate', {
 		loader: instance.value.loader,
 		game_version: instance.value.game_version,
@@ -51,10 +53,60 @@ const availableGroups = computed(() => [
 	...new Set([...allInstances.value.flatMap((instance) => instance.groups), ...groups.value]),
 ])

+function formatReleaseChannelLabel(channel: ReleaseChannel) {
+	switch (channel) {
+		case 'release':
+			return formatMessage(messages.updateChannelRelease)
+		case 'beta':
+			return formatMessage(messages.updateChannelBeta)
+		case 'alpha':
+			return formatMessage(messages.updateChannelAlpha)
+	}
+}
+
+function formatReleaseChannelDescription(channel: ReleaseChannel) {
+	switch (channel) {
+		case 'release':
+			return formatMessage(messages.updateChannelReleaseDescription)
+		case 'beta':
+			return formatMessage(messages.updateChannelBetaDescription)
+		case 'alpha':
+			return formatMessage(messages.updateChannelAlphaDescription)
+	}
+}
+
+watch(
+	() => [instance.value.id, instance.value.update_channel] as const,
+	() => {
+		if (!savingReleaseChannel.value) {
+			selectedReleaseChannel.value = instance.value.update_channel
+		}
+	},
+)
+
+watch(selectedReleaseChannel, async (channel, previousChannel) => {
+	const previousReleaseChannel = previousChannel ?? instance.value.update_channel
+	if (channel === instance.value.update_channel) return
+
+	savingReleaseChannel.value = true
+	const instanceId = instance.value.id
+	await edit(instanceId, { update_channel: channel })
+		.then(() => queryClient.invalidateQueries({ queryKey: ['linkedModpackInfo', instanceId] }))
+		.catch((error) => {
+			selectedReleaseChannel.value = previousReleaseChannel
+			handleError(error)
+		})
+	savingReleaseChannel.value = false
+})
+
 async function resetIcon() {
-	icon.value = undefined
-	await edit_icon(instance.value.path, null).catch(handleError)
-	trackEvent('InstanceRemoveIcon')
+	try {
+		await edit_icon(instance.value.id, null)
+		icon.value = undefined
+		trackEvent('InstanceRemoveIcon')
+	} catch (error) {
+		handleError(error)
+	}
 }

 async function setIcon() {
@@ -70,13 +122,16 @@ async function setIcon() {

 	if (!value) return

-	icon.value = value
-	await edit_icon(instance.value.path, icon.value).catch(handleError)
-
-	trackEvent('InstanceSetIcon')
+	try {
+		await edit_icon(instance.value.id, value)
+		icon.value = value
+		trackEvent('InstanceSetIcon')
+	} catch (error) {
+		handleError(error)
+	}
 }

-const editProfileObject = computed(() => ({
+const editInstanceObject = computed(() => ({
 	name: title.value.trim().substring(0, 32) ?? 'Instance',
 	groups: groups.value.map((x) => x.trim().substring(0, 32)).filter((x) => x.length > 0),
 }))
@@ -102,15 +157,15 @@ watch(
 	[title, groups, groups],
 	async () => {
 		if (removing.value) return
-		await edit(instance.value.path, editProfileObject.value).catch(handleError)
+		await edit(instance.value.id, editInstanceObject.value).catch(handleError)
 	},
 	{ deep: true },
 )

 const removing = ref(false)
-async function removeProfile() {
+async function removeInstance() {
 	removing.value = true
-	const path = instance.value.path
+	const path = instance.value.id

 	trackEvent('InstanceRemove', {
 		loader: instance.value.loader,
@@ -175,6 +230,38 @@ const messages = defineMessages({
 		id: 'instance.settings.tabs.general.duplicate-button',
 		defaultMessage: 'Duplicate',
 	},
+	updateChannel: {
+		id: 'instance.settings.tabs.general.update-channel',
+		defaultMessage: 'Update channel',
+	},
+	updateChannelReleaseDescription: {
+		id: 'instance.settings.tabs.general.update-channel.release.description',
+		defaultMessage: 'Only release versions will be shown as available updates.',
+	},
+	updateChannelBetaDescription: {
+		id: 'instance.settings.tabs.general.update-channel.beta.description',
+		defaultMessage: 'Release and beta versions will be shown as available updates.',
+	},
+	updateChannelAlphaDescription: {
+		id: 'instance.settings.tabs.general.update-channel.alpha.description',
+		defaultMessage: 'Release, beta, and alpha versions will be shown as available updates.',
+	},
+	updateChannelRelease: {
+		id: 'instance.settings.tabs.general.update-channel.release',
+		defaultMessage: 'Release',
+	},
+	updateChannelBeta: {
+		id: 'instance.settings.tabs.general.update-channel.beta',
+		defaultMessage: 'Beta',
+	},
+	updateChannelAlpha: {
+		id: 'instance.settings.tabs.general.update-channel.alpha',
+		defaultMessage: 'Alpha',
+	},
+	selectUpdateChannelAriaLabel: {
+		id: 'instance.settings.tabs.general.update-channel.select',
+		defaultMessage: 'Select update channel',
+	},
 	deleteInstance: {
 		id: 'instance.settings.tabs.general.delete',
 		defaultMessage: 'Delete instance',
@@ -196,23 +283,26 @@ const messages = defineMessages({
 </script>

 <template>
-	<ConfirmDeleteInstanceModal ref="deleteConfirmModal" @delete="removeProfile" />
+	<ConfirmDeleteInstanceModal ref="deleteConfirmModal" @delete="removeInstance" />
 	<div class="block">
 		<div class="float-end ml-10 relative group w-fit">
 			<div class="flex flex-col gap-1">
 				<span class="text-lg font-semibold text-contrast">Icon</span>
 				<div class="group relative w-fit">
-					<OverflowMenu
+					<TeleportOverflowMenu :label="formatMessage(messages.editIcon)"
 						v-tooltip="formatMessage(messages.editIcon)"
 						class="bg-transparent border-none appearance-none p-0 m-0 cursor-pointer group-active:scale-95 transition-transform"
 						:options="[
 							{
 								id: 'select',
+								label: icon
+									? formatMessage(messages.replaceIcon)
+									: formatMessage(messages.selectIcon),
 								action: () => setIcon(),
 							},
 							{
 								id: 'remove',
-								color: 'danger',
+								label: formatMessage(messages.removeIcon),
 								action: () => resetIcon(),
 								shown: !!icon,
 							},
@@ -222,7 +312,7 @@ const messages = defineMessages({
 							:src="icon ? convertFileSrc(icon) : icon"
 							size="108px"
 							class="transition-[filter] group-hover:brightness-75"
-							:tint-by="instance.path"
+							:tint-by="instance.id"
 							no-shadow
 						/>
 						<div
@@ -235,7 +325,7 @@ const messages = defineMessages({
 							{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
 						</template>
 						<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
-					</OverflowMenu>
+					</TeleportOverflowMenu>
 				</div>
 			</div>
 		</div>
@@ -256,17 +346,15 @@ const messages = defineMessages({
 				<h2 id="duplicate-instance-label" class="m-0 text-lg font-semibold text-contrast block">
 					{{ formatMessage(messages.duplicateInstance) }}
 				</h2>
-				<ButtonStyled>
-					<button
+				<Button
 						v-tooltip="installing ? formatMessage(messages.duplicateButtonTooltipInstalling) : null"
 						aria-labelledby="duplicate-instance-label"
 						:disabled="installing"
-						class="w-max !shadow-none"
-						@click="duplicateProfile"
+						class="w-max"
+						@click="duplicateInstance"
 					>
-						<CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
-					</button>
-				</ButtonStyled>
+					<CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
+				</Button>
 				<p class="m-0">
 					{{ formatMessage(messages.duplicateInstanceDescription) }}
 				</p>
@@ -292,11 +380,9 @@ const messages = defineMessages({
 						class="w-full max-w-[300px]"
 						@submit="() => addCategory"
 					/>
-					<ButtonStyled>
-						<button class="w-fit !shadow-none" @click="() => addCategory()">
-							<PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
-						</button>
-					</ButtonStyled>
+					<Button class="w-fit" @click="() => addCategory()">
+						<PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
+					</Button>
 				</div>
 			</div>
 			<p class="m-0">
@@ -304,26 +390,41 @@ const messages = defineMessages({
 			</p>
 		</div>

+		<div class="flex flex-col gap-2.5 mt-6">
+			<h2 class="m-0 text-lg font-semibold text-contrast block">
+				{{ formatMessage(messages.updateChannel) }}
+			</h2>
+			<Chips
+				v-model="selectedReleaseChannel"
+				:items="releaseChannelOptions"
+				:format-label="formatReleaseChannelLabel"
+				:capitalize="false"
+				:disabled-items="releaseChannelDisabledItems"
+				:aria-label="formatMessage(messages.selectUpdateChannelAriaLabel)"
+			/>
+			<p class="m-0">
+				{{ formatReleaseChannelDescription(selectedReleaseChannel) }}
+			</p>
+		</div>
+
 		<div class="flex flex-col gap-2.5 mt-6">
 			<h2 id="delete-instance-label" class="m-0 text-lg font-semibold text-contrast block">
 				{{ formatMessage(messages.deleteInstance) }}
 			</h2>
-			<ButtonStyled color="red">
-				<button
+			<Button type="colored" color="red"
 					aria-labelledby="delete-instance-label"
 					:disabled="removing"
-					class="w-fit !shadow-none"
+					class="w-fit"
 					@click="deleteConfirmModal.show()"
 				>
-					<SpinnerIcon v-if="removing" class="animate-spin" />
-					<TrashIcon v-else />
-					{{
-						removing
-							? formatMessage(messages.deletingInstanceButton)
-							: formatMessage(messages.deleteInstanceButton)
-					}}
-				</button>
-			</ButtonStyled>
+				<SpinnerIcon v-if="removing" class="animate-spin" />
+				<TrashIcon v-else />
+				{{
+					removing
+						? formatMessage(messages.deletingInstanceButton)
+						: formatMessage(messages.deleteInstanceButton)
+				}}
+			</Button>
 			<p class="m-0">
 				{{ formatMessage(messages.deleteInstanceDescription) }}
 			</p>
@@ -8,7 +8,7 @@ import {
 } from '@modrinth/ui'
 import { computed, ref, watch } from 'vue'

-import { edit } from '@/helpers/profile'
+import { edit } from '@/helpers/instance'
 import { get } from '@/helpers/settings.ts'
 import { injectInstanceSettings } from '@/providers/instance-settings'

@@ -28,21 +28,21 @@ const overrideHooks = ref(
 )
 const hooks = ref(instance.value.hooks ?? globalSettings.hooks)

-const editProfileObject = computed(() => {
-	const editProfile: {
+const editInstanceObject = computed(() => {
+	const editInstancePatch: {
 		hooks?: Hooks
 	} = {}

 	// When hooks are not overridden per-instance, we want to clear them
-	editProfile.hooks = overrideHooks.value ? hooks.value : {}
+	editInstancePatch.hooks = overrideHooks.value ? hooks.value : {}

-	return editProfile
+	return editInstancePatch
 })

 watch(
 	[overrideHooks, hooks],
 	async () => {
-		await edit(instance.value.path, editProfileObject.value)
+		await edit(instance.value.id, editInstanceObject.value)
 	},
 	{ deep: true },
 )
@@ -4,117 +4,206 @@ import {
 	commonMessages,
 	defineMessages,
 	formatLoaderLabel,
+	injectFilePicker,
 	injectNotificationManager,
 	InstallationSettingsLayout,
-	provideAppBackup,
 	provideInstallationSettings,
+	useDebugLogger,
 	useVIntl,
 } from '@modrinth/ui'
 import type { GameVersionTag, PlatformTag } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, ref, shallowRef } from 'vue'
+import { computed, ref } from 'vue'

+import SharedInstanceInstallationSettingsControls from '@/components/ui/shared-instances/SharedInstanceInstallationSettingsControls.vue'
+import { useManagedContentPolicy } from '@/composables/instances/use-managed-content-policy'
 import { trackEvent } from '@/helpers/analytics'
 import { get_project_versions, get_version } from '@/helpers/cache'
-import { get_loader_versions } from '@/helpers/metadata'
 import {
-	duplicate,
+	install_existing_instance,
+	install_pack_to_existing_instance,
+	wait_for_install_job,
+} from '@/helpers/install'
+import {
 	edit,
 	get_linked_modpack_info,
-	install,
-	list,
+	unlink_shared_instance,
 	update_managed_modrinth_version,
 	update_repair_modrinth,
-} from '@/helpers/profile'
+} from '@/helpers/instance'
+import { get_loader_versions } from '@/helpers/metadata'
 import { get_game_versions, get_loaders } from '@/helpers/tags'
+import { provideInstanceBackup } from '@/providers/instance-backup'
 import { injectInstanceSettings } from '@/providers/instance-settings'
+import { useTheming } from '@/store/state'

 import type { Manifest } from '../../../helpers/types'

 const { handleError } = injectNotificationManager()
+const filePicker = injectFilePicker()
 const { formatMessage } = useVIntl()
 const queryClient = useQueryClient()
+const debug = useDebugLogger('AppInstallationSettings')
+const themeStore = useTheming()

 const { instance, offline, isMinecraftServer, onUnlinked, closeModal } = injectInstanceSettings()
+const managedContentPolicy = useManagedContentPolicy(instance)
+const skipNonEssentialWarnings = computed(() =>
+	themeStore.getFeatureFlag('skip_non_essential_warnings'),
+)

-const [
-	fabric_versions,
-	forge_versions,
-	quilt_versions,
-	neoforge_versions,
-	all_game_versions,
-	loaders,
-] = await Promise.all([
-	get_loader_versions('fabric')
-		.then((manifest: Manifest) => shallowRef(manifest))
-		.catch(handleError),
-	get_loader_versions('forge')
-		.then((manifest: Manifest) => shallowRef(manifest))
-		.catch(handleError),
-	get_loader_versions('quilt')
-		.then((manifest: Manifest) => shallowRef(manifest))
-		.catch(handleError),
-	get_loader_versions('neo')
-		.then((manifest: Manifest) => shallowRef(manifest))
-		.catch(handleError),
-	get_game_versions()
-		.then((gameVersions: GameVersionTag[]) => shallowRef(gameVersions))
-		.catch(handleError),
-	get_loaders()
-		.then((value: PlatformTag[]) =>
-			value
-				.filter(
-					(item) => item.supported_project_types.includes('modpack') || item.name === 'vanilla',
-				)
-				.sort((a, b) => (a.name === 'vanilla' ? -1 : b.name === 'vanilla' ? 1 : 0)),
-		)
-		.then((loader: PlatformTag[]) => ref(loader))
-		.catch(handleError),
-])
-
-const { data: modpackInfo } = useQuery({
-	queryKey: computed(() => ['linkedModpackInfo', instance.value.path]),
-	queryFn: () => get_linked_modpack_info(instance.value.path, 'must_revalidate'),
-	enabled: computed(() => !!instance.value.linked_data?.project_id && !offline),
+debug('metadata load: start', {
+	instanceId: instance.value.id,
+	loader: instance.value.loader,
+	gameVersion: instance.value.game_version,
+	installStage: instance.value.install_stage,
 })

+function getSupportedModpackLoaders() {
+	return get_loaders().then((value: PlatformTag[]) =>
+		value
+			.filter((item) => item.supported_project_types.includes('modpack') || item.name === 'vanilla')
+			.sort((a, b) => (a.name === 'vanilla' ? -1 : b.name === 'vanilla' ? 1 : 0)),
+	)
+}
+
+const fabricVersionsQuery = useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'fabric'],
+	queryFn: () => get_loader_versions('fabric') as Promise<Manifest>,
+})
+const forgeVersionsQuery = useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'forge'],
+	queryFn: () => get_loader_versions('forge') as Promise<Manifest>,
+})
+const quiltVersionsQuery = useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'quilt'],
+	queryFn: () => get_loader_versions('quilt') as Promise<Manifest>,
+})
+const neoforgeVersionsQuery = useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'neo'],
+	queryFn: () => get_loader_versions('neo') as Promise<Manifest>,
+})
+const gameVersionsQuery = useQuery({
+	queryKey: ['instance-settings', 'game-versions'],
+	queryFn: () => get_game_versions() as Promise<GameVersionTag[]>,
+})
+const loadersQuery = useQuery({
+	queryKey: ['instance-settings', 'loaders', 'modpack'],
+	queryFn: getSupportedModpackLoaders,
+})
+
+const metadataLoading = computed(() =>
+	[
+		fabricVersionsQuery,
+		forgeVersionsQuery,
+		quiltVersionsQuery,
+		neoforgeVersionsQuery,
+		gameVersionsQuery,
+		loadersQuery,
+	].some((query) => query.isLoading.value),
+)
+
+debug('metadata queries configured', {
+	instanceId: instance.value.id,
+	loader: instance.value.loader,
+	gameVersion: instance.value.game_version,
+})
+
+const isModrinthLinkedModpack = computed(
+	() =>
+		instance.value.link?.type === 'modrinth_modpack' ||
+		instance.value.link?.type === 'server_project_modpack' ||
+		(instance.value.link?.type === 'shared_instance' &&
+			!!instance.value.link.modpack_project_id &&
+			!!instance.value.link.modpack_version_id),
+)
+const isImportedModpack = computed(() => instance.value.link?.type === 'imported_modpack')
+const isSharedInstanceManagedModpack = managedContentPolicy.isManagedModpack
+const canUnlinkSharedInstance = managedContentPolicy.canUnlink
+
+const modpackInfoQuery = useQuery({
+	queryKey: computed(() => ['linkedModpackInfo', instance.value.id]),
+	queryFn: () => get_linked_modpack_info(instance.value.id, 'must_revalidate'),
+	enabled: computed(() => isModrinthLinkedModpack.value && !offline),
+})
+const modpackInfo = modpackInfoQuery.data
+
 const repairing = ref(false)
 const reinstalling = ref(false)
+const unlinkingSharedInstance = ref(false)
+const installationSettingsBusy = computed(
+	() =>
+		instance.value.quarantined ||
+		instance.value.install_stage !== 'installed' ||
+		repairing.value ||
+		reinstalling.value ||
+		unlinkingSharedInstance.value ||
+		!!offline,
+)
+const installationSettingsBusyMessage = computed(() =>
+	instance.value.quarantined ? formatMessage(messages.locked) : null,
+)
+
+async function unlinkSharedInstance() {
+	unlinkingSharedInstance.value = true
+	try {
+		await unlink_shared_instance(instance.value.id)
+		await queryClient.invalidateQueries({ queryKey: ['sharedInstanceUsers', instance.value.id] })
+		await queryClient.invalidateQueries({ queryKey: ['linkedModpackInfo', instance.value.id] })
+		onUnlinked()
+	} catch (error) {
+		handleError(error)
+	} finally {
+		unlinkingSharedInstance.value = false
+	}
+}

 const messages = defineMessages({
 	loaderVersion: {
 		id: 'instance.settings.tabs.installation.loader-version',
 		defaultMessage: '{loader} version',
 	},
-})
-
-function getManifest(loader: string) {
-	const map: Record<string, typeof fabric_versions> = {
-		fabric: fabric_versions,
-		forge: forge_versions,
-		quilt: quilt_versions,
-		neoforge: neoforge_versions,
-	}
-	return map[loader]
-}
-
-provideAppBackup({
-	async createBackup() {
-		const allProfiles = await list()
-		const prefix = `${instance.value.name} - Backup #`
-		const existingNums = allProfiles
-			.filter((p) => p.name.startsWith(prefix))
-			.map((p) => parseInt(p.name.slice(prefix.length), 10))
-			.filter((n) => !isNaN(n))
-		const nextNum = existingNums.length > 0 ? Math.max(...existingNums) + 1 : 1
-		const newPath = await duplicate(instance.value.path)
-		await edit(newPath, { name: `${prefix}${nextNum}` })
+	locked: {
+		id: 'instance.settings.tabs.installation.locked',
+		defaultMessage: 'Installation settings are unavailable while this instance is locked.',
 	},
 })

+function getManifest(loader: string) {
+	const map: Record<string, Manifest | undefined> = {
+		fabric: fabricVersionsQuery.data.value,
+		forge: forgeVersionsQuery.data.value,
+		quilt: quiltVersionsQuery.data.value,
+		neoforge: neoforgeVersionsQuery.data.value,
+	}
+	const manifest = map[loader]
+	debug('getManifest:', {
+		loader,
+		hasManifest: !!manifest,
+		gameVersions: manifest?.gameVersions?.length ?? 0,
+	})
+	return manifest
+}
+
+async function installLocalModpackFromPicker() {
+	const picked = await filePicker.pickModpackFile({ readFile: false })
+	if (!picked?.path) return false
+
+	const job = await install_pack_to_existing_instance(instance.value.id, {
+		type: 'fromFile',
+		path: picked.path,
+	}).catch(handleError)
+	if (!job) return false
+
+	const completed = await wait_for_install_job(job.job_id).catch(handleError)
+	return !!completed
+}
+
+provideInstanceBackup(instance)
+
 provideInstallationSettings({
 	closeSettings: closeModal,
-	loading: ref(false),
+	loading: computed(() => metadataLoading.value || modpackInfoQuery.isLoading.value),
 	installationInfo: computed(() => {
 		const rows = [
 			{
@@ -136,15 +225,24 @@ provideInstallationSettings({
 		}
 		return rows
 	}),
-	isLinked: computed(() => !!instance.value.linked_data?.locked),
-	isBusy: computed(
+	isLinked: computed(
 		() =>
-			instance.value.install_stage !== 'installed' ||
-			repairing.value ||
-			reinstalling.value ||
-			!!offline,
+			isModrinthLinkedModpack.value ||
+			isImportedModpack.value ||
+			isSharedInstanceManagedModpack.value,
 	),
+	isBusy: installationSettingsBusy,
+	busyMessage: installationSettingsBusyMessage,
+	skipNonEssentialWarnings,
 	modpack: computed(() => {
+		if (isImportedModpack.value && instance.value.link?.type === 'imported_modpack') {
+			return {
+				iconUrl: instance.value.icon_path,
+				title: instance.value.link.name ?? instance.value.name,
+				versionNumber: instance.value.link.version_number ?? undefined,
+				filename: instance.value.link.filename ?? undefined,
+			}
+		}
 		if (!modpackInfo.value) return null
 		return {
 			iconUrl: modpackInfo.value.project.icon_url,
@@ -156,114 +254,212 @@ provideInstallationSettings({
 	currentPlatform: computed(() => instance.value.loader),
 	currentGameVersion: computed(() => instance.value.game_version),
 	currentLoaderVersion: computed(() => instance.value.loader_version ?? ''),
-	availablePlatforms: loaders?.value?.map((x) => x.name) ?? [],
+	availablePlatforms: computed(() => loadersQuery.data.value?.map((x) => x.name) ?? []),

 	resolveGameVersions(loader, showSnapshots) {
-		const versions = all_game_versions?.value ?? []
+		const versions = gameVersionsQuery.data.value ?? []
 		const filtered = versions.filter((item) => {
 			if (loader === 'vanilla') return true
 			const manifest = getManifest(loader)
-			return !!manifest?.value?.gameVersions?.some((x) => item.version === x.id)
+			return !!manifest?.gameVersions?.some((x) => item.version === x.id)
 		})
-		return (showSnapshots ? filtered : filtered.filter((x) => x.version_type === 'release')).map(
-			(x) => ({ value: x.version, label: x.version }),
-		)
+		const result = (
+			showSnapshots ? filtered : filtered.filter((x) => x.version_type === 'release')
+		).map((x) => ({ value: x.version, label: x.version }))
+		debug('resolveGameVersions:', {
+			loader,
+			showSnapshots,
+			totalVersions: versions.length,
+			filteredVersions: filtered.length,
+			resultVersions: result.length,
+		})
+		return result
 	},

 	resolveLoaderVersions(loader, gameVersion) {
-		if (loader === 'vanilla' || !gameVersion) return []
-		const manifest = getManifest(loader)
-		if (!manifest?.value) return []
-		if (loader === 'fabric' || loader === 'quilt') {
-			return manifest.value.gameVersions[0]?.loaders ?? []
+		if (loader === 'vanilla' || !gameVersion) {
+			debug('resolveLoaderVersions: skipped', { loader, gameVersion })
+			return []
 		}
-		return manifest.value.gameVersions?.find((item) => item.id === gameVersion)?.loaders ?? []
+		const manifest = getManifest(loader)
+		if (!manifest) {
+			debug('resolveLoaderVersions: no manifest', { loader, gameVersion })
+			return []
+		}
+		const entry = manifest.gameVersions?.find((item) => item.id === gameVersion)
+		if (entry?.versionGroup) {
+			const result =
+				manifest.versionGroups?.find((group) => group.id === entry.versionGroup)?.loaders ?? []
+			debug('resolveLoaderVersions: version group result', {
+				loader,
+				gameVersion,
+				versionGroup: entry.versionGroup,
+				count: result.length,
+			})
+			return result
+		}
+		const placeholder = manifest.gameVersions?.find((item) => item.id === '${modrinth.gameVersion}')
+		if (placeholder) {
+			const result = manifest.gameVersions?.some((item) => item.id === gameVersion)
+				? placeholder.loaders
+				: []
+			debug('resolveLoaderVersions: placeholder result', {
+				loader,
+				gameVersion,
+				count: result.length,
+			})
+			return result
+		}
+		const result = entry?.loaders ?? []
+		debug('resolveLoaderVersions: result', { loader, gameVersion, count: result.length })
+		return result
 	},

 	resolveHasSnapshots(loader) {
-		const versions = all_game_versions?.value ?? []
-		if (loader === 'vanilla') return versions.some((x) => x.version_type !== 'release')
+		const versions = gameVersionsQuery.data.value ?? []
+		if (loader === 'vanilla') {
+			const result = versions.some((x) => x.version_type !== 'release')
+			debug('resolveHasSnapshots: vanilla', { loader, result })
+			return result
+		}
 		const manifest = getManifest(loader)
 		const supported = versions.filter(
-			(item) => !!manifest?.value?.gameVersions?.some((x) => item.version === x.id),
+			(item) => !!manifest?.gameVersions?.some((x) => item.version === x.id),
 		)
-		return supported.some((x) => x.version_type !== 'release')
+		const result = supported.some((x) => x.version_type !== 'release')
+		debug('resolveHasSnapshots:', {
+			loader,
+			totalVersions: versions.length,
+			supportedVersions: supported.length,
+			result,
+		})
+		return result
 	},

 	async save(platform, gameVersion, loaderVersionId) {
-		const editProfile: Record<string, string | undefined> = {
+		debug('save: called', {
+			instanceId: instance.value.id,
+			platform,
+			gameVersion,
+			loaderVersionId,
+		})
+		const editInstancePatch: Record<string, string | undefined> = {
 			loader: platform,
 			game_version: gameVersion,
 		}
 		if (platform !== 'vanilla' && loaderVersionId) {
-			editProfile.loader_version = loaderVersionId
+			editInstancePatch.loader_version = loaderVersionId
 		}
-		await edit(instance.value.path, editProfile).catch(handleError)
+		await edit(instance.value.id, editInstancePatch).catch(handleError)
+		debug('save: edit complete', { editInstancePatch })
 	},

 	afterSave: async () => {
-		await install(instance.value.path, false).catch(handleError)
+		debug('afterSave: installing', { instanceId: instance.value.id })
+		await install_existing_instance(instance.value.id, false).catch(handleError)
 		trackEvent('InstanceRepair', {
 			loader: instance.value.loader,
 			game_version: instance.value.game_version,
 		})
+		debug('afterSave: done')
 	},

 	async repair() {
+		debug('repair: called', { instanceId: instance.value.id })
 		repairing.value = true
-		await install(instance.value.path, true).catch(handleError)
+		await install_existing_instance(instance.value.id, true).catch(handleError)
 		repairing.value = false
 		trackEvent('InstanceRepair', {
 			loader: instance.value.loader,
 			game_version: instance.value.game_version,
 		})
+		debug('repair: done')
 	},

 	async reinstallModpack() {
+		debug('reinstallModpack: called', { instanceId: instance.value.id })
 		reinstalling.value = true
-		await update_repair_modrinth(instance.value.path).catch(handleError)
-		reinstalling.value = false
-		trackEvent('InstanceRepair', {
-			loader: instance.value.loader,
-			game_version: instance.value.game_version,
-		})
+		let shouldTrack = false
+		try {
+			if (isImportedModpack.value) {
+				shouldTrack = await installLocalModpackFromPicker()
+			} else {
+				await update_repair_modrinth(instance.value.id).catch(handleError)
+				shouldTrack = true
+			}
+		} finally {
+			reinstalling.value = false
+		}
+		if (shouldTrack) {
+			trackEvent('InstanceRepair', {
+				loader: instance.value.loader,
+				game_version: instance.value.game_version,
+			})
+		}
+		debug('reinstallModpack: done')
+	},
+
+	async swapModpack() {
+		debug('swapModpack: called', { instanceId: instance.value.id })
+		reinstalling.value = true
+		try {
+			const installed = await installLocalModpackFromPicker()
+			if (installed) {
+				trackEvent('InstanceRepair', {
+					loader: instance.value.loader,
+					game_version: instance.value.game_version,
+				})
+			}
+		} finally {
+			reinstalling.value = false
+		}
+		debug('swapModpack: done')
 	},

 	async unlinkModpack() {
-		await edit(instance.value.path, {
-			linked_data: null as unknown as undefined,
+		debug('unlinkModpack: called', { instanceId: instance.value.id })
+		await edit(instance.value.id, {
+			link: null as unknown as undefined,
 		})
 		await queryClient.invalidateQueries({
-			queryKey: ['linkedModpackInfo', instance.value.path],
+			queryKey: ['linkedModpackInfo', instance.value.id],
 		})
 		onUnlinked()
+		debug('unlinkModpack: done')
 	},

 	getCachedModpackVersions: () => null,
 	async fetchModpackVersions() {
-		const versions = await get_project_versions(instance.value.linked_data!.project_id!).catch(
-			handleError,
-		)
+		debug('fetchModpackVersions: called', {
+			projectId: instance.value.link?.project_id,
+		})
+		const versions = await get_project_versions(instance.value.link!.project_id!).catch(handleError)
+		debug('fetchModpackVersions: done', { count: versions?.length ?? 0 })
 		return (versions ?? []) as Labrinth.Versions.v2.Version[]
 	},

 	async getVersionChangelog(versionId: string) {
+		debug('getVersionChangelog: called', { versionId })
 		return (await get_version(versionId, 'must_revalidate').catch(
 			() => null,
 		)) as Labrinth.Versions.v2.Version | null
 	},

 	async onModpackVersionConfirm(version) {
-		await update_managed_modrinth_version(instance.value.path, version.id)
-		await queryClient.invalidateQueries({
-			queryKey: ['linkedModpackInfo', instance.value.path],
+		debug('onModpackVersionConfirm: called', {
+			versionId: version.id,
+			instanceId: instance.value.id,
 		})
+		await update_managed_modrinth_version(instance.value.id, version.id)
+		await queryClient.invalidateQueries({
+			queryKey: ['linkedModpackInfo', instance.value.id],
+		})
+		debug('onModpackVersionConfirm: done')
 	},

 	updaterModalProps: computed(() => ({
 		isApp: true,
-		currentVersionId:
-			modpackInfo.value?.update_version_id ?? instance.value.linked_data?.version_id ?? '',
+		currentVersionId: modpackInfo.value?.update_version_id ?? instance.value.link?.version_id ?? '',
 		projectIconUrl: modpackInfo.value?.project?.icon_url,
 		projectName: modpackInfo.value?.project?.title ?? 'Modpack',
 		currentGameVersion: instance.value.game_version,
@@ -272,12 +468,29 @@ provideInstallationSettings({

 	isServer: false,
 	isApp: true,
-	showModpackVersionActions: !isMinecraftServer.value,
+	showModpackVersionActions: computed(
+		() =>
+			isModrinthLinkedModpack.value &&
+			!isMinecraftServer.value &&
+			!isSharedInstanceManagedModpack.value,
+	),
+	isLocalFile: isImportedModpack,
+	isManagedModpack: isSharedInstanceManagedModpack,
+	managedModpackWarning: managedContentPolicy.managedModpackWarning,
 	repairing,
 	reinstalling,
 })
 </script>

 <template>
-	<InstallationSettingsLayout />
+	<InstallationSettingsLayout>
+		<template #extra>
+			<SharedInstanceInstallationSettingsControls
+				:can-unlink="canUnlinkSharedInstance"
+				:busy="installationSettingsBusy"
+				:unlinking="unlinkingSharedInstance"
+				:unlink="unlinkSharedInstance"
+			/>
+		</template>
+	</InstallationSettingsLayout>
 </template>
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import {
 	CheckCircleIcon,
 	CoffeeIcon,
@@ -9,7 +10,6 @@ import {
 	XCircleIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	Checkbox,
 	defineMessages,
 	injectNotificationManager,
@@ -23,7 +23,7 @@ import { computed, readonly, ref, watch } from 'vue'
 import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
 import useJavaTest from '@/composables/useJavaTest'
 import useMemorySlider from '@/composables/useMemorySlider'
-import { edit, get_optimal_jre_key } from '@/helpers/profile'
+import { edit, get_optimal_jre_key } from '@/helpers/instance'
 import { get } from '@/helpers/settings.ts'
 import { injectInstanceSettings } from '@/providers/instance-settings'

@@ -36,7 +36,7 @@ const { instance } = injectInstanceSettings()

 const globalSettings = (await get().catch(handleError)) as unknown as AppSettings

-const optimalJava = readonly(await get_optimal_jre_key(instance.value.path).catch(handleError))
+const optimalJava = readonly(await get_optimal_jre_key(instance.value.id).catch(handleError))

 const overrideJavaInstall = ref(!!instance.value.java_path)
 const javaPath = ref(instance.value.java_path ?? optimalJava?.path ?? '')
@@ -104,7 +104,7 @@ const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) a
 	snapPoints: number[]
 }

-const editProfileObject = computed(() => {
+const editInstanceObject = computed(() => {
 	return {
 		java_path:
 			overrideJavaInstall.value && javaPath.value
@@ -136,7 +136,7 @@ watch(
 		memory,
 	],
 	async () => {
-		await edit(instance.value.path, editProfileObject.value)
+		await edit(instance.value.id, editInstanceObject.value)
 	},
 	{ deep: true },
 )
@@ -224,45 +224,56 @@ const messages = defineMessages({
 							wrapper-class="flex-1 min-w-0"
 							@update:model-value="(val) => (javaPath = String(val))"
 						/>
-						<ButtonStyled
+						<Button
+							type="quiet"
 							:color="
 								!hoveringTest && !testingJava
 									? javaTestResult === true
 										? 'green'
 										: 'red'
-									: 'standard'
+									: undefined
 							"
-							color-fill="text"
-						>
-							<button
 								:disabled="!overrideJavaInstall || testingJava"
 								@click="testJavaInstallation(activePath, optimalJava?.parsed_version, true)"
 								@mouseenter="overrideJavaInstall && (hoveringTest = true)"
 								@mouseleave="hoveringTest = false"
-							>
-								<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
-								<CheckCircleIcon
-									v-else-if="javaTestResult === true && !hoveringTest"
-									class="h-4 w-4"
-								/>
-								<XCircleIcon v-else-if="javaTestResult !== true && !hoveringTest" class="h-4 w-4" />
-								<RefreshCwIcon v-else-if="overrideJavaInstall" class="h-4 w-4" />
-							</button>
-						</ButtonStyled>
+							 :style="{ '--legacy-button-color': (
+								!hoveringTest && !testingJava
+									? javaTestResult === true
+										? 'green'
+										: 'red'
+									: 'standard'
+							) && (
+								!hoveringTest && !testingJava
+									? javaTestResult === true
+										? 'green'
+										: 'red'
+									: 'standard'
+							) !== 'standard' ? `var(--color-${
+								!hoveringTest && !testingJava
+									? javaTestResult === true
+										? 'green'
+										: 'red'
+									: 'standard'
+							})` : undefined }" class="!text-[var(--legacy-button-color,var(--color-base))] [&>svg]:!text-[var(--legacy-button-color,var(--color-primary))]">
+							<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
+							<CheckCircleIcon
+								v-else-if="javaTestResult === true && !hoveringTest"
+								class="h-4 w-4"
+							/>
+							<XCircleIcon v-else-if="javaTestResult !== true && !hoveringTest" class="h-4 w-4" />
+							<RefreshCwIcon v-else-if="overrideJavaInstall" class="h-4 w-4" />
+						</Button>
 					</div>
 					<div v-if="overrideJavaInstall" class="flex gap-2">
-						<ButtonStyled>
-							<button @click="handleDetectJava">
-								<SearchIcon />
-								Detect
-							</button>
-						</ButtonStyled>
-						<ButtonStyled>
-							<button @click="handleBrowseJava">
-								<FolderSearchIcon />
-								Browse
-							</button>
-						</ButtonStyled>
+						<Button @click="handleDetectJava">
+							<SearchIcon />
+							Detect
+						</Button>
+						<Button @click="handleBrowseJava">
+							<FolderSearchIcon />
+							Browse
+						</Button>
 					</div>
 				</div>
 			</div>
@@ -0,0 +1,241 @@
+<template>
+	<div class="flex flex-col gap-8">
+		<section class="flex flex-col gap-4">
+			<div class="flex flex-col gap-1">
+				<h3 class="m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.activeInvitesTitle) }}
+				</h3>
+				<p class="m-0 text-secondary">
+					{{ formatMessage(messages.activeInvitesDescription) }}
+				</p>
+			</div>
+
+			<Table :columns="inviteColumns" :data="activeInvites" row-key="id" table-min-width="36rem">
+				<template #empty-state>
+					<div class="flex h-40 items-center justify-center text-secondary">
+						<SpinnerIcon
+							v-if="activeInvitesQuery.isLoading.value"
+							class="animate-spin"
+							aria-hidden="true"
+						/>
+						<template v-else>
+							{{ formatMessage(messages.noActiveInvites) }}
+						</template>
+					</div>
+				</template>
+				<template #cell-id="{ row }">
+					<CopyCode
+						:text="`${config.siteUrl}/share/${encodeURIComponent(row.id)}`"
+						:display-text="`/${row.id}`"
+					/>
+				</template>
+				<template #cell-uses="{ row }">
+					<span class="font-medium text-primary">{{ row.uses }}</span>
+					<span> / {{ row.maxUses }}</span>
+				</template>
+				<template #cell-expiration="{ row }">
+					<span v-tooltip="formatDateTime(row.expiration)" class="whitespace-nowrap">
+						{{ formatRelativeTime(row.expiration) }}
+					</span>
+				</template>
+				<template #cell-actions="{ row }">
+					<div class="flex justify-end">
+						<IconButton type="quiet" :label="
+									formatMessage(messages.revokeInviteWithCode, {
+										code: row.id,
+									})
+								"
+								v-tooltip="formatMessage(messages.revokeInvite)"
+								:disabled="revokeInviteMutation.isPending.value || isBusy"
+								class="text-secondary hover:!filter-none hover:text-red focus-visible:!filter-none"
+								@click="revokeInviteModal?.show(row.id)"
+							>
+							<SpinnerIcon
+								v-if="
+									revokeInviteMutation.isPending.value &&
+									revokeInviteMutation.variables.value?.inviteId === row.id
+								"
+								class="animate-spin"
+								aria-hidden="true"
+							/>
+							<XIcon v-else aria-hidden="true" />
+						</IconButton>
+					</div>
+				</template>
+			</Table>
+		</section>
+
+		<SharedInstanceInstallationSettingsControls
+			can-unpublish
+			:busy="isBusy"
+			:unpublishing="unpublishing"
+			:unpublish="unpublishSharedInstance"
+		/>
+
+		<ConfirmRevokeSharedInstanceInviteModal ref="revokeInviteModal" @revoke="revokeInvite" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { IconButton } from '@modrinth/ui'
+import { SpinnerIcon, XIcon } from '@modrinth/assets'
+import {
+	CopyCode,
+	defineMessages,
+	Table,
+	type TableColumn,
+	useFormatDateTime,
+	useRelativeTime,
+	useVIntl,
+} from '@modrinth/ui'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed, ref } from 'vue'
+
+import ConfirmRevokeSharedInstanceInviteModal from '@/components/ui/shared-instances/ConfirmRevokeSharedInstanceInviteModal.vue'
+import SharedInstanceInstallationSettingsControls from '@/components/ui/shared-instances/SharedInstanceInstallationSettingsControls.vue'
+import { config } from '@/config'
+import {
+	get_shared_instance_invites,
+	revoke_shared_instance_invite,
+	type SharedInstanceInvite,
+	unpublish_shared_instance,
+} from '@/helpers/instance'
+import { useSharedInstanceErrors } from '@/helpers/shared-instance-errors'
+import { injectInstanceSettings } from '@/providers/instance-settings'
+
+const { instance, offline, onUnlinked } = injectInstanceSettings()
+const { notifySharedInstanceError } = useSharedInstanceErrors()
+const { formatMessage } = useVIntl()
+const queryClient = useQueryClient()
+const unpublishing = ref(false)
+const revokeInviteModal = ref<InstanceType<typeof ConfirmRevokeSharedInstanceInviteModal>>()
+const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({ dateStyle: 'medium', timeStyle: 'short' })
+
+type InviteTableColumn = 'id' | 'uses' | 'expiration' | 'actions'
+type ActiveInvitesQueryKey = readonly ['sharedInstanceInvites', string]
+
+const activeInvitesQueryKey = computed(
+	() => ['sharedInstanceInvites', instance.value.id] as const satisfies ActiveInvitesQueryKey,
+)
+const activeInvitesQuery = useQuery({
+	queryKey: activeInvitesQueryKey,
+	queryFn: async ({ queryKey }) => {
+		try {
+			return await get_shared_instance_invites(queryKey[1])
+		} catch (error) {
+			notifySharedInstanceError(error)
+			throw error
+		}
+	},
+	enabled: () => !!instance.value.id && !offline,
+	retry: false,
+	staleTime: Infinity,
+	refetchOnMount: 'always',
+	refetchOnReconnect: false,
+	refetchOnWindowFocus: false,
+})
+const activeInvites = computed(() => activeInvitesQuery.data.value ?? [])
+
+const revokeInviteMutation = useMutation({
+	mutationFn: ({ instanceId, inviteId }: { instanceId: string; inviteId: string }) =>
+		revoke_shared_instance_invite(instanceId, inviteId),
+	onSuccess: (_data, { instanceId, inviteId }) => {
+		queryClient.setQueryData<SharedInstanceInvite[]>(
+			['sharedInstanceInvites', instanceId],
+			(invites = []) => invites.filter((invite) => invite.id !== inviteId),
+		)
+	},
+	onError: notifySharedInstanceError,
+})
+
+const isBusy = computed(
+	() =>
+		instance.value.install_stage !== 'installed' ||
+		unpublishing.value ||
+		revokeInviteMutation.isPending.value ||
+		!!offline,
+)
+
+const inviteColumns = computed<TableColumn<InviteTableColumn>[]>(() => [
+	{
+		key: 'id',
+		label: formatMessage(messages.inviteCodeLabel),
+		width: 'clamp(11rem, 34%, 19rem)',
+	},
+	{
+		key: 'uses',
+		label: formatMessage(messages.usesLabel),
+		width: 'clamp(7rem, 18%, 10rem)',
+	},
+	{
+		key: 'expiration',
+		label: formatMessage(messages.expiresLabel),
+		width: 'clamp(9rem, 28%, 14rem)',
+	},
+	{
+		key: 'actions',
+		label: formatMessage(messages.actionsLabel),
+		align: 'right',
+		width: '5.5rem',
+	},
+])
+
+function revokeInvite(inviteId: string) {
+	if (revokeInviteMutation.isPending.value) return
+	revokeInviteMutation.mutate({ instanceId: instance.value.id, inviteId })
+}
+
+async function unpublishSharedInstance() {
+	unpublishing.value = true
+	try {
+		await unpublish_shared_instance(instance.value.id)
+		queryClient.setQueryData(['sharedInstanceUsers', instance.value.id], [])
+		await queryClient.invalidateQueries({ queryKey: ['linkedModpackInfo', instance.value.id] })
+		onUnlinked()
+	} catch (error) {
+		notifySharedInstanceError(error)
+	} finally {
+		unpublishing.value = false
+	}
+}
+
+const messages = defineMessages({
+	activeInvitesTitle: {
+		id: 'instance.settings.sharing.active-invites.title',
+		defaultMessage: 'Active invites',
+	},
+	activeInvitesDescription: {
+		id: 'instance.settings.sharing.active-invites.description',
+		defaultMessage: 'Anyone with one of these invite links can join while it remains active.',
+	},
+	inviteCodeLabel: {
+		id: 'instance.settings.sharing.active-invites.code',
+		defaultMessage: 'Invite link',
+	},
+	usesLabel: {
+		id: 'instance.settings.sharing.active-invites.uses',
+		defaultMessage: 'Uses',
+	},
+	expiresLabel: {
+		id: 'instance.settings.sharing.active-invites.expires',
+		defaultMessage: 'Expires',
+	},
+	actionsLabel: {
+		id: 'instance.settings.sharing.active-invites.actions',
+		defaultMessage: 'Actions',
+	},
+	noActiveInvites: {
+		id: 'instance.settings.sharing.active-invites.empty',
+		defaultMessage: 'There are no active invites.',
+	},
+	revokeInvite: {
+		id: 'instance.settings.sharing.active-invites.revoke',
+		defaultMessage: 'Revoke invite',
+	},
+	revokeInviteWithCode: {
+		id: 'instance.settings.sharing.active-invites.revoke-with-code',
+		defaultMessage: 'Revoke invite {code}',
+	},
+})
+</script>
@@ -9,7 +9,7 @@ import {
 } from '@modrinth/ui'
 import { computed, type Ref, ref, watch } from 'vue'

-import { edit } from '@/helpers/profile'
+import { edit } from '@/helpers/instance'
 import { get } from '@/helpers/settings.ts'
 import { injectInstanceSettings } from '@/providers/instance-settings'

@@ -32,7 +32,7 @@ const fullscreenSetting: Ref<boolean> = ref(
 	instance.value.force_fullscreen ?? globalSettings.force_fullscreen,
 )

-const editProfileObject = computed(() => {
+const editInstanceObject = computed(() => {
 	if (!overrideWindowSettings.value) {
 		return {
 			force_fullscreen: null,
@@ -48,7 +48,7 @@ const editProfileObject = computed(() => {
 watch(
 	[overrideWindowSettings, resolution, fullscreenSetting],
 	async () => {
-		await edit(instance.value.path, editProfileObject.value)
+		await edit(instance.value.id, editInstanceObject.value)
 	},
 	{ deep: true },
 )
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Button, ButtonLink, IconButton } from '@modrinth/ui'
 import {
 	CheckIcon,
 	CopyIcon,
@@ -7,14 +8,14 @@ import {
 	MessagesSquareIcon,
 	WrenchIcon,
 } from '@modrinth/assets'
-import { Admonition, ButtonStyled, Collapsible, NewModal } from '@modrinth/ui'
+import { Admonition, Collapsible, NewModal } from '@modrinth/ui'
 import { computed, ref } from 'vue'

 import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
 import { login as login_flow, set_default_user } from '@/helpers/auth.js'
 import { handleSevereError } from '@/store/error.js'

-import { type MinecraftAuthError, minecraftAuthErrors } from './minecraft-auth-errors'
+import { findMinecraftAuthError, type MinecraftAuthError } from './minecraft-auth-errors'

 const modal = ref<InstanceType<typeof NewModal>>()
 const rawError = ref<string>('')
@@ -26,7 +27,7 @@ const loadingSignIn = ref(false)
 function show(errorVal: { message?: string }) {
 	rawError.value = errorVal?.message ?? String(errorVal)

-	matchedError.value = minecraftAuthErrors.find((e) => rawError.value.includes(e.errorCode)) ?? null
+	matchedError.value = findMinecraftAuthError(rawError.value)

 	debugCollapsed.value = true
 	hide_ads_window()
@@ -137,16 +138,12 @@ async function copyToClipboard(text: string) {

 			<!-- Action buttons -->
 			<div class="flex items-center gap-2">
-				<ButtonStyled>
-					<a href="https://support.modrinth.com" class="!w-full" @click="modal?.hide()">
-						<MessagesSquareIcon /> Contact support
-					</a>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="loadingSignIn" class="!w-full" @click="signInAgain">
-						<LogInIcon /> Sign in again
-					</button>
-				</ButtonStyled>
+				<ButtonLink href="https://support.modrinth.com" class="!w-full" @click="modal?.hide()">
+					<MessagesSquareIcon /> Contact support
+				</ButtonLink>
+				<Button type="colored" color="brand" :disabled="loadingSignIn" class="!w-full" @click="signInAgain">
+					<LogInIcon /> Sign in again
+				</Button>
 			</div>

 			<div class="flex flex-col gap-2">
@@ -176,16 +173,14 @@ async function copyToClipboard(text: string) {
 							>
 								{{ debugInfo }}
 							</div>
-							<ButtonStyled circular>
-								<button
+							<IconButton :label="'Copy debug info'"
 									v-tooltip="'Copy debug info'"
 									:disabled="copied"
 									@click="copyToClipboard(debugInfo)"
 								>
-									<template v-if="copied"> <CheckIcon class="text-green" /> </template>
-									<template v-else> <CopyIcon /> </template>
-								</button>
-							</ButtonStyled>
+								<template v-if="copied"> <CheckIcon class="text-green" /> </template>
+								<template v-else> <CopyIcon /> </template>
+							</IconButton>
 						</div>
 					</Collapsible>
 				</div>
@@ -1,10 +1,93 @@
 export interface MinecraftAuthError {
-	errorCode: string
+	errorCode?: string
+	errorMatchers?: string[]
+	matches?: (message: string) => boolean
 	whatHappened: string
 	stepsToFix: string[]
 }

 export const minecraftAuthErrors: MinecraftAuthError[] = [
+	{
+		errorMatchers: ['Failed to deserialize response to JSON during step RefreshOAuthToken:'],
+		whatHappened:
+			'Your saved Microsoft sign-in token has expired or was revoked, so Modrinth App cannot refresh your Minecraft session.',
+		stepsToFix: [
+			'Sign out of the affected Minecraft account in Modrinth App',
+			'Sign in to the account again',
+			'Once the new sign-in finishes, try launching Minecraft again',
+		],
+	},
+	{
+		errorMatchers: ['Failed to deserialize response to JSON during step SisuAuthenticate:'],
+		whatHappened:
+			'Xbox services rejected the first sign-in response. This is most often caused by your system clock or time zone being out of sync.',
+		stepsToFix: [
+			'Open your system date and time settings',
+			'Turn on automatic time zone and automatic time, if available',
+			'Use the sync option in your system settings to synchronize the clock',
+			'Restart Modrinth App',
+			'Try signing in again',
+		],
+	},
+	{
+		matches: (message) =>
+			message.includes('Failed to deserialize response to JSON during step MinecraftToken:') &&
+			message.includes('429 Too Many Requests'),
+		whatHappened:
+			'Microsoft or Minecraft temporarily blocked the sign-in request because there were too many recent attempts.',
+		stepsToFix: [
+			'Wait about an hour before trying again',
+			'Restart Modrinth App after waiting',
+			'Try signing in once more',
+			'If the same message appears, wait longer before retrying so the temporary limit can clear',
+		],
+	},
+	{
+		matches: (message) =>
+			message.includes('Failed to deserialize response to JSON during step MinecraftToken:') &&
+			/Status Code: 5\d\d/.test(message),
+		whatHappened:
+			"Minecraft's authentication service is returning a server error, so Modrinth App cannot finish signing you in right now.",
+		stepsToFix: [
+			'Wait a few minutes and try signing in again',
+			'Check <a href="https://support.xbox.com/xbox-live-status">Xbox Status</a> for current service issues',
+			'Try signing in with the <a href="https://www.minecraft.net/en-us/download">official Minecraft Launcher</a> to confirm whether Minecraft sign-in is also affected there',
+			'If the service is healthy and this keeps happening, contact support with the debug information below',
+		],
+	},
+	{
+		errorMatchers: ['Failed to fetch player profile'],
+		whatHappened:
+			'Minecraft services could not return a Java Edition profile for this account. This most often happens when the game was purchased recently, the Java profile has not finished being created, or the wrong Microsoft account is being used.',
+		stepsToFix: [
+			'Sign in with the <a href="https://www.minecraft.net/en-us/download">official Minecraft Launcher</a>',
+			'Launch Minecraft: Java Edition once from the official launcher',
+			'Wait up to an hour if the purchase or profile setup was recent',
+			'Make sure you are using the Microsoft account that owns Minecraft. See <a href="https://support.modrinth.com/en/articles/9409136-finding-the-right-xbox-account">Finding the right Xbox account</a> for help',
+			'Try signing in to Modrinth App again',
+		],
+	},
+	{
+		matches: (message) =>
+			message.includes('error sending request for url (') &&
+			[
+				'minecraft.net',
+				'minecraftservices.com',
+				'mojang.com',
+				'xbox.com',
+				'xboxlive.com',
+				'live.com',
+			].some((domain) => message.includes(domain)),
+		whatHappened:
+			'Modrinth App could not connect to a Microsoft, Xbox, or Minecraft service needed for sign-in. This is usually caused by a local network, DNS, proxy, firewall, hosts file, VPN, or antivirus issue.',
+		stepsToFix: [
+			'Restart Modrinth App and try signing in again',
+			'Check that your internet connection is working',
+			'Allow Modrinth App through your firewall, antivirus, proxy, VPN, and hosts file rules',
+			'Try a different network or temporarily disable VPN/proxy software if you use one',
+			'If routing or DNS is the issue, a service like Cloudflare WARP can sometimes help',
+		],
+	},
 	{
 		errorCode: '2148916222',
 		whatHappened:
@@ -87,4 +170,31 @@ export const minecraftAuthErrors: MinecraftAuthError[] = [
 			'Once finished, try signing in again',
 		],
 	},
+	{
+		errorMatchers: ['Failed to deserialize response to JSON during step XstsAuthorize:'],
+		whatHappened:
+			'Xbox services rejected the request to authorize this account for Minecraft services, but did not return a specific account restriction that Modrinth App recognizes.',
+		stepsToFix: [
+			'Sign in with the <a href="https://www.minecraft.net/en-us/download">official Minecraft Launcher</a>',
+			'Complete any prompts shown by Microsoft, Xbox, or Minecraft',
+			'Try signing in to Modrinth App again',
+			'If the official launcher also fails, follow the error shown there or contact Xbox Support',
+		],
+	},
 ]
+
+export function findMinecraftAuthError(message: string): MinecraftAuthError | null {
+	return (
+		minecraftAuthErrors.find((error) => {
+			if (error.errorCode && message.includes(error.errorCode)) {
+				return true
+			}
+
+			if (error.errorMatchers?.some((matcher) => message.includes(matcher))) {
+				return true
+			}
+
+			return error.matches?.(message) ?? false
+		}) ?? null
+	)
+}
@@ -0,0 +1,141 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.header)" max-width="544px" no-padding>
+		<div class="grid grid-cols-[1fr_auto] gap-2.5 h-[154px] px-7 pt-4 pb-1 pr-9">
+			<div class="flex flex-col gap-2.5 items-start justify-center h-min mt-5">
+				<div class="font-semibold text-xl text-contrast">
+					{{ formatMessage(messages.descriptionHeader) }}
+				</div>
+				<div class="text-secondary leading-6">
+					{{ formatMessage(messages.description) }}
+				</div>
+			</div>
+			<div class="relative h-full w-[96px] overflow-hidden mx-3">
+				<div class="absolute top-0 left-0 z-0 w-full flex grow-0 flex-col items-end p-0">
+					<img :src="steveImage" alt="" class="self-stretch" />
+				</div>
+				<div
+					class="absolute left-0 bottom-0 z-10 order-1 h-6 w-[120px] shrink-0 grow-0 bg-[linear-gradient(180deg,rgba(39,41,46,0)_0%,#27292E_80%,#27292E_100%)]"
+				></div>
+			</div>
+		</div>
+
+		<div class="flex flex-col gap-6 px-6 pb-6">
+			<div class="flex justify-end gap-2">
+				<ButtonLink class="w-full" href="https://support.modrinth.com" @click="modal?.hide()">
+					<MessagesSquareIcon />
+					{{ formatMessage(messages.getSupport) }}
+				</ButtonLink>
+				<Button type="colored" color="brand" class="w-full" :disabled="loadingSignIn" @click="signIn">
+					<SpinnerIcon v-if="loadingSignIn" class="animate-spin" />
+					<svg
+						v-else
+						width="20"
+						height="20"
+						viewBox="0 0 20 20"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<rect width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
+						<rect x="10.75" width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
+						<rect y="10.75" width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
+						<rect
+							x="10.75"
+							y="10.75"
+							width="9.25"
+							height="9.25"
+							fill="black"
+							fill-opacity="0.9"
+						/>
+					</svg>
+					{{ formatMessage(messages.signIn) }}
+				</Button>
+			</div>
+			<p class="m-0 text-center text-sm text-secondary">
+				{{ formatMessage(messages.dontHaveAccount) }}
+				<a
+					class="text-blue font-medium hover:underline"
+					href="https://www.minecraft.net/en-us/store/minecraft-java-bedrock-edition-pc"
+				>
+					{{ formatMessage(messages.getMinecraft) }}
+				</a>
+			</p>
+		</div>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { Button, ButtonLink } from '@modrinth/ui'
+import { MessagesSquareIcon, SpinnerIcon } from '@modrinth/assets'
+import { defineMessages, NewModal, useVIntl } from '@modrinth/ui'
+import { inject, type Ref, ref } from 'vue'
+
+import steveImage from '@/assets/steve-look-up-left.webp'
+import type AccountsCard from '@/components/ui/AccountsCard.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { login as loginFlow, set_default_user } from '@/helpers/auth.js'
+import { handleSevereError } from '@/store/error.js'
+
+const { formatMessage } = useVIntl()
+const accountsCard = inject('accountsCard') as Ref<InstanceType<typeof AccountsCard> | null>
+
+const messages = defineMessages({
+	header: {
+		id: 'minecraft-required.header',
+		defaultMessage: 'Minecraft required',
+	},
+	descriptionHeader: {
+		id: 'minecraft-required.description-header',
+		defaultMessage: 'Sign in to a Microsoft account',
+	},
+	description: {
+		id: 'minecraft-required.description',
+		defaultMessage:
+			'You need a Microsoft account that owns Minecraft before you can launch and play.',
+	},
+	getSupport: {
+		id: 'minecraft-required.get-support',
+		defaultMessage: 'Get support',
+	},
+	signIn: {
+		id: 'minecraft-required.sign-in',
+		defaultMessage: 'Sign in to Microsoft',
+	},
+	dontHaveAccount: {
+		id: 'minecraft-required.dont-have-account',
+		defaultMessage: 'Don’t have an account?',
+	},
+	getMinecraft: {
+		id: 'minecraft-required.get-minecraft',
+		defaultMessage: 'Get Minecraft',
+	},
+})
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const loadingSignIn = ref(false)
+
+function show() {
+	modal.value?.show()
+}
+
+async function signIn() {
+	loadingSignIn.value = true
+
+	try {
+		const loggedIn = await loginFlow()
+		if (!loggedIn) return
+
+		await set_default_user(loggedIn.profile.id)
+		await accountsCard.value?.refreshValues()
+		await trackEvent('AccountLogIn', { source: 'MinecraftRequiredModal' })
+		modal.value?.hide()
+	} catch (error) {
+		handleSevereError(error)
+	} finally {
+		loadingSignIn.value = false
+	}
+}
+
+defineExpose({
+	show,
+})
+</script>
@@ -3,12 +3,14 @@ import {
 	CoffeeIcon,
 	GameIcon,
 	GaugeIcon,
+	HeartHandshakeIcon,
 	LanguagesIcon,
 	ModrinthIcon,
 	PaintbrushIcon,
-	SettingsIcon,
+	Settings2Icon,
 	ShieldIcon,
 	ToggleRightIcon,
+	UserIcon,
 } from '@modrinth/assets'
 import {
 	commonMessages,
@@ -17,23 +19,32 @@ import {
 	defineMessages,
 	ProgressBar,
 	TabbedModal,
+	UnsavedChangesPopup,
 	useVIntl,
 } from '@modrinth/ui'
 import { getVersion } from '@tauri-apps/api/app'
 import { platform as getOsPlatform, version as getOsVersion } from '@tauri-apps/plugin-os'
-import { ref, watch } from 'vue'
+import { computed, provide, ref, watch } from 'vue'

-import AppearanceSettings from '@/components/ui/settings/AppearanceSettings.vue'
-import DefaultInstanceSettings from '@/components/ui/settings/DefaultInstanceSettings.vue'
-import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
-import JavaSettings from '@/components/ui/settings/JavaSettings.vue'
-import LanguageSettings from '@/components/ui/settings/LanguageSettings.vue'
-import PrivacySettings from '@/components/ui/settings/PrivacySettings.vue'
-import ResourceManagementSettings from '@/components/ui/settings/ResourceManagementSettings.vue'
+import PrivacySettings from '@/components/ui/settings/account/PrivacySettings.vue'
+import ProfileSettings from '@/components/ui/settings/account/ProfileSettings.vue'
+import SocialSettings from '@/components/ui/settings/account/SocialSettings.vue'
+import AppearanceSettings from '@/components/ui/settings/display/AppearanceSettings.vue'
+import BehaviorSettings from '@/components/ui/settings/display/BehaviorSettings.vue'
+import FeatureFlagSettings from '@/components/ui/settings/display/FeatureFlagSettings.vue'
+import LanguageSettings from '@/components/ui/settings/display/LanguageSettings.vue'
+import DefaultInstanceSettings from '@/components/ui/settings/instances/DefaultInstanceSettings.vue'
+import JavaSettings from '@/components/ui/settings/instances/JavaSettings.vue'
+import ResourceManagementSettings from '@/components/ui/settings/instances/ResourceManagementSettings.vue'
 import { get, set } from '@/helpers/settings.ts'
+import {
+	appSettingsModalContextKey,
+	type UnsavedChangesController,
+} from '@/providers/app-settings-modal'
 import { injectAppUpdateDownloadProgress } from '@/providers/download-progress.ts'
 import { useTheming } from '@/store/state'

+// TODO: Apply COMPONENT_STRUCTURE.md here and extract out common setting option components
 const themeStore = useTheming()

 const { formatMessage } = useVIntl()
@@ -45,71 +56,162 @@ const developerModeEnabled = defineMessage({
 	defaultMessage: 'Developer mode enabled.',
 })

+const tabCategories = defineMessages({
+	display: {
+		id: 'settings.sidebar.label.display',
+		defaultMessage: 'Display',
+	},
+	account: {
+		id: 'settings.sidebar.label.account',
+		defaultMessage: 'Account',
+	},
+	instances: {
+		id: 'app.settings.sidebar.label.instances',
+		defaultMessage: 'Instances',
+	},
+})
+
 const tabs = [
 	{
 		name: defineMessage({
 			id: 'app.settings.tabs.appearance',
 			defaultMessage: 'Appearance',
 		}),
+		category: tabCategories.display,
 		icon: PaintbrushIcon,
 		content: AppearanceSettings,
 	},
+	{
+		name: defineMessage({
+			id: 'app.settings.tabs.behavior',
+			defaultMessage: 'Behavior',
+		}),
+		category: tabCategories.display,
+		icon: Settings2Icon,
+		content: BehaviorSettings,
+	},
 	{
 		name: defineMessage({
 			id: 'app.settings.tabs.language',
 			defaultMessage: 'Language',
 		}),
+		category: tabCategories.display,
 		icon: LanguagesIcon,
 		content: LanguageSettings,
 		badge: commonMessages.beta,
 	},
+	{
+		name: commonSettingsMessages.featureFlags,
+		category: tabCategories.display,
+		icon: ToggleRightIcon,
+		content: FeatureFlagSettings,
+		developerOnly: true,
+	},
+	{
+		name: commonSettingsMessages.profile,
+		category: tabCategories.account,
+		icon: UserIcon,
+		content: ProfileSettings,
+	},
+	{
+		name: commonSettingsMessages.social,
+		category: tabCategories.account,
+		icon: HeartHandshakeIcon,
+		content: SocialSettings,
+	},
 	{
 		name: defineMessage({
 			id: 'app.settings.tabs.privacy',
 			defaultMessage: 'Privacy',
 		}),
+		category: tabCategories.account,
 		icon: ShieldIcon,
 		content: PrivacySettings,
 	},
+	{
+		name: defineMessage({
+			id: 'app.settings.tabs.default-instance-options',
+			defaultMessage: 'Default game options',
+		}),
+		category: tabCategories.instances,
+		icon: GameIcon,
+		content: DefaultInstanceSettings,
+	},
 	{
 		name: defineMessage({
 			id: 'app.settings.tabs.java-installations',
 			defaultMessage: 'Java installations',
 		}),
+		category: tabCategories.instances,
 		icon: CoffeeIcon,
 		content: JavaSettings,
 	},
-	{
-		name: defineMessage({
-			id: 'app.settings.tabs.default-instance-options',
-			defaultMessage: 'Default instance options',
-		}),
-		icon: GameIcon,
-		content: DefaultInstanceSettings,
-	},
 	{
 		name: defineMessage({
 			id: 'app.settings.tabs.resource-management',
 			defaultMessage: 'Resource management',
 		}),
+		category: tabCategories.instances,
 		icon: GaugeIcon,
 		content: ResourceManagementSettings,
 	},
-	{
-		name: commonSettingsMessages.featureFlags,
-		icon: ToggleRightIcon,
-		content: FeatureFlagSettings,
-		developerOnly: true,
-	},
 ]

+const availableTabs = computed(() => tabs.filter((tab) => !tab.developerOnly || themeStore.devMode))
+
 const modal = ref<InstanceType<typeof TabbedModal> | null>(null)
+const unsavedChangesPopup = ref<{ nudge: () => void } | null>(null)
+const unsavedChangesController = ref<UnsavedChangesController | null>(null)
+const emptyUnsavedChangesState: Record<string, unknown> = {}
+const originalUnsavedChangesState = computed(
+	() => unsavedChangesController.value?.getOriginal() ?? emptyUnsavedChangesState,
+)
+const modifiedUnsavedChangesState = computed(
+	() => unsavedChangesController.value?.getModified() ?? emptyUnsavedChangesState,
+)
+const savingUnsavedChanges = computed(() => unsavedChangesController.value?.isSaving() ?? false)
+const hasUnsavedChanges = computed(() => unsavedChangesController.value?.hasChanges() ?? false)
+
+function canLeaveCurrentTab(): boolean {
+	if (!unsavedChangesController.value?.hasChanges()) return true
+	unsavedChangesPopup.value?.nudge()
+	return false
+}
+
+function close(): boolean {
+	return modal.value?.hide() ?? false
+}
+
+function registerUnsavedChangesController(controller: UnsavedChangesController | null): void {
+	unsavedChangesController.value = controller
+}
+
+provide(appSettingsModalContextKey, {
+	close,
+	registerUnsavedChangesController,
+})
+
+function resetUnsavedChanges(): void {
+	unsavedChangesController.value?.reset()
+}
+
+function saveUnsavedChanges(): void {
+	void unsavedChangesController.value?.save()
+}

 function show() {
 	modal.value?.show()
 }

-defineExpose({ show })
+function showProfile(): void {
+	const profileTabIndex = availableTabs.value.findIndex((tab) => tab.content === ProfileSettings)
+	if (profileTabIndex >= 0) {
+		modal.value?.setTab(profileTabIndex)
+	}
+	modal.value?.show()
+}
+
+defineExpose({ show, showProfile })

 const { progress, version: downloadingVersion } = injectAppUpdateDownloadProgress()

@@ -129,12 +231,15 @@ watch(
 function devModeCount() {
 	devModeCounter.value++
 	if (devModeCounter.value > 5) {
+		const selectedTab = modal.value ? availableTabs.value[modal.value.selectedTab] : undefined
+
 		themeStore.devMode = !themeStore.devMode
 		settings.value.developer_mode = !!themeStore.devMode
 		devModeCounter.value = 0

-		if (!themeStore.devMode && tabs[modal.value!.selectedTab].developerOnly) {
-			modal.value!.setTab(0)
+		if (modal.value) {
+			const selectedTabIndex = selectedTab ? availableTabs.value.indexOf(selectedTab) : -1
+			modal.value.setTab(selectedTabIndex >= 0 ? selectedTabIndex : 0)
 		}
 	}
 }
@@ -144,15 +249,45 @@ const messages = defineMessages({
 		id: 'app.settings.downloading',
 		defaultMessage: 'Downloading v{version}',
 	},
+	appVersion: {
+		id: 'app.settings.app-version',
+		defaultMessage: 'Modrinth App {version}',
+	},
+	macos: {
+		id: 'app.settings.operating-system.macos',
+		defaultMessage: 'macOS',
+	},
+	developerModeButtonLabel: {
+		id: 'app.settings.developer-mode-button.label',
+		defaultMessage: 'Toggle developer mode',
+	},
 })
 </script>
 <template>
-	<TabbedModal ref="modal" :tabs="tabs.filter((t) => !t.developerOnly || themeStore.devMode)">
+	<TabbedModal
+		ref="modal"
+		:tabs="availableTabs"
+		:width="'min(928px, calc(95vw - 10rem))'"
+		:before-hide="canLeaveCurrentTab"
+		:before-tab-change="canLeaveCurrentTab"
+		:floating-action-bar-shown="hasUnsavedChanges"
+	>
 		<template #title>
-			<span class="flex items-center gap-2 text-lg font-extrabold text-contrast">
-				<SettingsIcon /> Settings
+			<span class="text-2xl font-semibold text-contrast">
+				{{ formatMessage(commonMessages.settingsLabel) }}
 			</span>
 		</template>
+		<template #floating-action-bar>
+			<UnsavedChangesPopup
+				ref="unsavedChangesPopup"
+				:original="originalUnsavedChangesState"
+				:modified="modifiedUnsavedChangesState"
+				:saving="savingUnsavedChanges"
+				inline
+				@reset="resetUnsavedChanges"
+				@save="saveUnsavedChanges"
+			/>
+		</template>
 		<template #footer>
 			<div class="mt-auto text-secondary text-sm">
 				<div class="mb-3">
@@ -168,6 +303,7 @@ const messages = defineMessages({
 				</p>
 				<div class="flex items-center gap-3">
 					<button
+						:aria-label="formatMessage(messages.developerModeButtonLabel)"
 						class="p-0 m-0 bg-transparent border-none cursor-pointer button-animation"
 						:class="{
 							'text-brand': themeStore.devMode,
@@ -175,12 +311,14 @@ const messages = defineMessages({
 						}"
 						@click="devModeCount"
 					>
-						<ModrinthIcon class="w-6 h-6" />
+						<ModrinthIcon aria-hidden="true" class="w-6 h-6" />
 					</button>
 					<div class="max-w-[200px]">
-						<p class="m-0">Modrinth App {{ version }}</p>
 						<p class="m-0">
-							<span v-if="osPlatform === 'macos'">macOS</span>
+							{{ formatMessage(messages.appVersion, { version }) }}
+						</p>
+						<p class="m-0">
+							<span v-if="osPlatform === 'macos'">{{ formatMessage(messages.macos) }}</span>
 							<span v-else class="capitalize">{{ osPlatform }}</span>
 							{{ osVersion }}
 						</p>
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { LogInIcon, SpinnerIcon } from '@modrinth/assets'
-import { ref } from 'vue'
-
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-
-defineProps({
-	onFlowCancel: {
-		type: Function,
-		default() {
-			return async () => {}
-		},
-	},
-})
-
-const modal = ref()
-
-function show() {
-	modal.value.show()
-}
-
-function hide() {
-	modal.value.hide()
-}
-
-defineExpose({ show, hide })
-</script>
-<template>
-	<ModalWrapper ref="modal" @hide="onFlowCancel">
-		<template #title>
-			<span class="items-center gap-2 text-lg font-extrabold text-contrast">
-				<LogInIcon /> Sign in
-			</span>
-		</template>
-
-		<div class="flex justify-center gap-2">
-			<SpinnerIcon class="w-12 h-12 animate-spin" />
-		</div>
-		<p class="text-sm text-secondary">
-			Please sign in at the browser window that just opened to continue.
-		</p>
-	</ModalWrapper>
-</template>
@@ -6,28 +6,24 @@

 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="modal?.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button @click="confirm">
-						<TrashIcon />
-						{{ formatMessage(messages.deleteButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="red" @click="confirm">
+					<TrashIcon />
+					{{ formatMessage(messages.deleteButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
 </template>

 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { TrashIcon, XIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	NewModal,
@@ -1,32 +1,39 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.installToPlay)" :closable="true">
-		<div v-if="requiredContentProject" class="flex flex-col gap-6 max-w-[500px]">
-			<Admonition type="info" :header="formatMessage(messages.contentRequired)">
-				{{ formatMessage(messages.serverRequiresMods) }}
-			</Admonition>
+	<NewModal
+		ref="modal"
+		:header="formatMessage(messages.installToPlay)"
+		:closable="true"
+		:on-hide="show_ads_window"
+		max-width="544px"
+		width="544px"
+	>
+		<div v-if="requiredContentProject" class="flex w-full flex-col gap-6">
+			<p class="m-0 text-primary">
+				{{ formatMessage(messages.inviteWarning) }}
+			</p>

-			<div class="flex flex-col gap-1">
-				<div class="flex justify-between items-center">
-					<span class="font-semibold text-contrast">{{
-						formatMessage(messages.requiredModpack)
-					}}</span>
+			<div class="flex flex-col gap-2.5">
+				<div class="flex items-center justify-between">
+					<span class="font-semibold text-contrast">
+						{{ formatMessage(messages.sharedInstance) }}
+					</span>

-					<ButtonStyled type="transparent">
-						<button @click="openViewContents">
-							<EyeIcon />
-							{{ formatMessage(messages.viewContents) }}
-						</button>
-					</ButtonStyled>
+					<Button type="quiet" @click="openViewContents">
+						<EyeIcon />
+						{{ formatMessage(messages.viewContents) }}
+					</Button>
 				</div>

-				<div class="flex items-center gap-3 rounded-xl bg-surface-2 p-3">
+				<div class="flex items-center gap-3 rounded-2xl bg-surface-2 p-3">
 					<Avatar
 						:src="requiredContentProject.icon_url"
 						:alt="requiredContentProject.title"
-						size="48px"
+						size="56px"
+						no-shadow
+						class="!rounded-2xl"
 					/>
-					<div class="flex flex-col gap-0.5">
-						<span class="font-semibold text-contrast">
+					<div class="flex min-w-0 flex-col gap-0.5">
+						<span class="truncate font-semibold text-contrast">
 							<template v-if="usingCustomModpack && modpackVersion">
 								{{ modpackVersion.name }}
 							</template>
@@ -34,7 +41,7 @@
 								{{ requiredContentProject.title }}
 							</template>
 						</span>
-						<span class="text-sm text-secondary">
+						<span class="truncate text-sm font-medium text-secondary">
 							{{ loaderDisplay }} {{ requiredContentProject.game_versions?.[0] }}
 							<template v-if="modCount">
 								· {{ formatMessage(messages.modCount, { count: modCount }) }}
@@ -43,24 +50,95 @@
 					</div>
 				</div>
 			</div>
-		</div>

-		<template #actions>
-			<div class="flex justify-end gap-2">
-				<ButtonStyled>
-					<button @click="handleDecline">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button @click="handleAccept">
-						<DownloadIcon />
-						{{ formatMessage(messages.installButton) }}
-					</button>
-				</ButtonStyled>
+			<Admonition
+				v-if="hasExternalFiles"
+				type="warning"
+				:header="formatMessage(messages.unknownFilesWarning)"
+			>
+				{{ formatMessage(messages.unknownFilesDescription) }}
+			</Admonition>
+
+			<div v-if="hasExternalFiles" class="relative w-full">
+				<div
+					ref="externalFileTable"
+					class="max-h-[242px] overflow-y-auto rounded-2xl"
+					@scroll="checkTableScrollState"
+				>
+					<Table
+						:columns="externalFileColumns"
+						:data="externalFileRows"
+						row-key="id"
+						virtualized
+						:virtual-row-height="48"
+						class="shadow-sm"
+					>
+						<template #cell-name="{ value }">
+							<span class="block truncate" :title="String(value)">{{ value }}</span>
+						</template>
+					</Table>
+				</div>
+				<Transition
+					enter-active-class="transition-all duration-200 ease-out"
+					enter-from-class="opacity-0 max-h-0"
+					enter-to-class="opacity-100 max-h-2"
+					leave-active-class="transition-all duration-200 ease-in"
+					leave-from-class="opacity-100 max-h-2"
+					leave-to-class="opacity-0 max-h-0"
+				>
+					<div
+						v-if="showTableTopFade"
+						class="pointer-events-none absolute left-0 right-0 top-0 z-10 h-2 bg-gradient-to-b from-bg-raised to-transparent"
+					/>
+				</Transition>
+				<Transition
+					enter-active-class="transition-all duration-200 ease-out"
+					enter-from-class="opacity-0 max-h-0"
+					enter-to-class="opacity-100 max-h-2"
+					leave-active-class="transition-all duration-200 ease-in"
+					leave-from-class="opacity-100 max-h-2"
+					leave-to-class="opacity-0 max-h-0"
+				>
+					<div
+						v-if="showTableBottomFade"
+						class="pointer-events-none absolute bottom-0 left-0 right-0 z-10 h-2 bg-gradient-to-t from-bg-raised to-transparent"
+					/>
+				</Transition>
 			</div>
-		</template>
+
+			<p v-if="hasExternalFiles" class="m-0 text-primary">
+				{{ formatMessage(messages.reviewedFiles) }}
+			</p>
+
+			<div class="flex w-full items-center justify-between gap-2">
+				<Button type="quiet" color="red" @click="handleReport">
+					<ReportIcon />
+					{{ formatMessage(commonMessages.reportButton) }}
+				</Button>
+
+				<div class="flex items-center gap-2">
+					<template v-if="hasExternalFiles">
+						<Button type="quiet" color="orange" @click="handleAccept">
+							{{ formatMessage(messages.installAnyway) }}
+						</Button>
+						<Button type="colored" color="brand" @click="handleDecline">
+							<BanIcon />
+							{{ formatMessage(messages.dontInstall) }}
+						</Button>
+					</template>
+					<template v-else>
+						<Button @click="handleDecline">
+							<XIcon />
+							{{ formatMessage(commonMessages.cancelButton) }}
+						</Button>
+						<Button type="colored" color="brand" @click="handleAccept">
+							<DownloadIcon />
+							{{ formatMessage(messages.installButton) }}
+						</Button>
+					</template>
+				</div>
+			</div>
+		</div>
 	</NewModal>

 	<ModpackContentModal
@@ -71,34 +149,57 @@
 </template>

 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import type { Labrinth } from '@modrinth/api-client'
-import { DownloadIcon, EyeIcon, XIcon } from '@modrinth/assets'
-import type { ContentItem } from '@modrinth/ui'
+import { BanIcon, DownloadIcon, EyeIcon, ReportIcon, XIcon } from '@modrinth/assets'
 import {
 	Admonition,
 	Avatar,
-	ButtonStyled,
 	commonMessages,
+	type ContentItem,
 	defineMessages,
 	formatLoader,
 	ModpackContentModal,
 	NewModal,
+	Table,
+	type TableColumn,
+	useScrollIndicator,
 	useVIntl,
 } from '@modrinth/ui'
-import { computed, ref } from 'vue'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { computed, nextTick, ref } from 'vue'

 import { hide_ads_window, show_ads_window } from '@/helpers/ads'
 import { get_project, get_project_many, get_version, get_version_many } from '@/helpers/cache.js'
 import { injectServerInstall } from '@/providers/server-install'

+type ExternalFileColumn = 'name'
+type ExternalFileRow = {
+	id: string
+	name: string
+}
+
 const modal = ref<InstanceType<typeof NewModal>>()
 const modpackVersionId = ref<string | null>(null)
 const modpackVersion = ref<Labrinth.Versions.v2.Version | null>(null)
 const project = ref<Labrinth.Projects.v3.Project | null>(null)
 const requiredContentProject = ref<Labrinth.Projects.v2.Project | null>(null)
+const externalFiles = ref<string[]>([])
+const externalFileTable = ref<HTMLElement | null>(null)
 const onInstallComplete = ref<() => void>(() => {})
 const { formatMessage } = useVIntl()
+
+const props = defineProps<{
+	showExternalWarnings?: boolean
+}>()
+
 const { installServerProject, startInstallingServer, stopInstallingServer } = injectServerInstall()
+const {
+	showTopFade: showTableTopFade,
+	showBottomFade: showTableBottomFade,
+	checkScrollState: checkTableScrollState,
+	forceCheck: forceCheckTableScroll,
+} = useScrollIndicator(externalFileTable)

 const usingCustomModpack = computed(() => {
 	return requiredContentProject.value?.id === project.value?.id
@@ -111,13 +212,36 @@ const loaderDisplay = computed(() => {
 })

 const modCount = computed(() => modpackVersion.value?.dependencies?.length)
+const hasExternalFiles = computed(
+	() => Boolean(props.showExternalWarnings) && externalFiles.value.length > 0,
+)
+const externalFileRows = computed<ExternalFileRow[]>(() =>
+	externalFiles.value.map((name, index) => ({
+		id: `${index}-${name}`,
+		name,
+	})),
+)

 async function fetchData(versionId: string) {
 	// cache is making version null for some reason so bypassing for now
-	modpackVersion.value = await get_version(versionId, 'bypass')
+	const version = await get_version(versionId, 'bypass')
+	modpackVersion.value = version

-	if (modpackVersion.value?.project_id) {
-		requiredContentProject.value = await get_project(modpackVersion.value.project_id, 'bypass')
+	if (version?.project_id) {
+		requiredContentProject.value = await get_project(version.project_id, 'bypass')
+		externalFiles.value = [
+			...new Set(
+				(version.dependencies ?? [])
+					.filter(
+						(dependency) =>
+							dependency.dependency_type === 'embedded' &&
+							!dependency.project_id &&
+							!dependency.version_id &&
+							dependency.file_name,
+					)
+					.flatMap((dependency) => (dependency.file_name ? [dependency.file_name] : [])),
+			),
+		].sort((left, right) => left.localeCompare(right))
 	}
 }

@@ -139,6 +263,12 @@ function handleDecline() {
 	hide()
 }

+function handleReport() {
+	if (project.value?.id) {
+		openUrl(`https://modrinth.com/report?item=project&itemID=${project.value.id}`)
+	}
+}
+
 const modpackContentModal = ref<InstanceType<typeof ModpackContentModal>>()

 async function openViewContents() {
@@ -217,17 +347,19 @@ async function show(
 	modpackVersionId.value = modpackVersionIdVal
 	modpackVersion.value = null
 	requiredContentProject.value = null
+	externalFiles.value = []
 	onInstallComplete.value = callback

 	if (modpackVersionIdVal) await fetchData(modpackVersionIdVal)

 	hide_ads_window()
 	modal.value?.show(e)
+	await nextTick()
+	forceCheckTableScroll()
 }

 function hide() {
 	modal.value?.hide()
-	show_ads_window()
 }

 const messages = defineMessages({
@@ -235,22 +367,10 @@ const messages = defineMessages({
 		id: 'app.modal.install-to-play.header',
 		defaultMessage: 'Install to play',
 	},
-	sharedServerInstance: {
-		id: 'app.modal.install-to-play.shared-server-instance',
-		defaultMessage: 'Shared server instance',
-	},
-	contentRequired: {
-		id: 'app.modal.install-to-play.content-required',
-		defaultMessage: 'Content required',
-	},
-	serverRequiresMods: {
-		id: 'app.modal.install-to-play.server-requires-mods',
+	inviteWarning: {
+		id: 'app.modal.install-to-play.invite-warning',
 		defaultMessage:
-			'This server requires mods to play. Click Install to set up the required files from Modrinth, then launch directly into the server.',
-	},
-	requiredModpack: {
-		id: 'app.modal.install-to-play.required-modpack',
-		defaultMessage: 'Required modpack',
+			'This invite was created by another Modrinth user, not Modrinth. Only accept invites from people you trust.',
 	},
 	sharedInstance: {
 		id: 'app.modal.install-to-play.shared-instance',
@@ -268,7 +388,41 @@ const messages = defineMessages({
 		id: 'app.modal.install-to-play.view-contents',
 		defaultMessage: 'View contents',
 	},
+	unknownFilesWarning: {
+		id: 'app.modal.install-to-play.unknown-files-warning',
+		defaultMessage: 'Unknown files warning',
+	},
+	unknownFilesDescription: {
+		id: 'app.modal.install-to-play.unknown-files-description',
+		defaultMessage:
+			'This server modpack contains files that aren’t published on Modrinth. We strongly recommend only installing files from sources you trust.',
+	},
+	unrecognizedFiles: {
+		id: 'app.modal.install-to-play.unrecognized-files',
+		defaultMessage: 'Unrecognized files',
+	},
+	reviewedFiles: {
+		id: 'app.modal.install-to-play.reviewed-files',
+		defaultMessage:
+			'A file is only reviewed if it’s published to Modrinth, regardless of its file format (including .mrpack).',
+	},
+	installAnyway: {
+		id: 'app.modal.install-to-play.install-anyway',
+		defaultMessage: 'Install anyway',
+	},
+	dontInstall: {
+		id: 'app.modal.install-to-play.external-files-dont-install',
+		defaultMessage: "Don't install",
+	},
 })

+const externalFileColumns = computed<TableColumn<ExternalFileColumn>[]>(() => [
+	{
+		key: 'name',
+		label: formatMessage(messages.unrecognizedFiles),
+		cellClass: '!h-12',
+	},
+])
+
 defineExpose({ show, hide })
 </script>
@@ -14,7 +14,7 @@ defineProps<{
 		<Avatar
 			:src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
 			size="24px"
-			:tint-by="instance.path"
+			:tint-by="instance.id"
 		/>
 		{{ instance.name }} <ChevronRightIcon />
 	</span>
@@ -6,6 +6,7 @@ import {
 	CoffeeIcon,
 	InfoIcon,
 	MonitorIcon,
+	UsersIcon,
 	WrenchIcon,
 } from '@modrinth/assets'
 import {
@@ -16,7 +17,8 @@ import {
 	type TabbedModalTab,
 	useVIntl,
 } from '@modrinth/ui'
-import { useQueryClient } from '@tanstack/vue-query'
+import type { PlatformTag } from '@modrinth/utils'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { computed, nextTick, ref, watch } from 'vue'

@@ -24,14 +26,18 @@ import GeneralSettings from '@/components/ui/instance_settings/GeneralSettings.v
 import HooksSettings from '@/components/ui/instance_settings/HooksSettings.vue'
 import InstallationSettings from '@/components/ui/instance_settings/InstallationSettings.vue'
 import JavaSettings from '@/components/ui/instance_settings/JavaSettings.vue'
+import SharingSettings from '@/components/ui/instance_settings/SharingSettings.vue'
 import WindowSettings from '@/components/ui/instance_settings/WindowSettings.vue'
 import { get_project_v3 } from '@/helpers/cache'
-import { get_linked_modpack_info } from '@/helpers/profile'
+import { get_linked_modpack_info } from '@/helpers/instance'
+import { get_loader_versions } from '@/helpers/metadata'
+import { get_game_versions, get_loaders } from '@/helpers/tags'
 import { provideInstanceSettings } from '@/providers/instance-settings'

 import type { GameInstance } from '../../../helpers/types'

 const { formatMessage } = useVIntl()
+const queryClient = useQueryClient()

 const props = defineProps<{
 	instance: GameInstance
@@ -45,7 +51,6 @@ const isMinecraftServer = ref(false)
 const handleUnlinked = () => emit('unlinked')

 const instanceRef = computed(() => props.instance)
-const queryClient = useQueryClient()
 const tabbedModal = ref<InstanceType<typeof TabbedModal> | null>(null)

 function hide() {
@@ -64,8 +69,8 @@ watch(
 	() => props.instance,
 	(instance) => {
 		isMinecraftServer.value = false
-		if (instance.linked_data?.project_id) {
-			get_project_v3(instance.linked_data.project_id, 'must_revalidate')
+		if (instance.link?.project_id) {
+			get_project_v3(instance.link.project_id, 'must_revalidate')
 				.then((project: Labrinth.Projects.v3.Project | undefined) => {
 					if (project?.minecraft_server != null) {
 						isMinecraftServer.value = true
@@ -94,6 +99,15 @@ const tabs = computed<TabbedModalTab[]>(() => [
 		icon: WrenchIcon,
 		content: InstallationSettings,
 	},
+	{
+		name: defineMessage({
+			id: 'instance.settings.tabs.sharing',
+			defaultMessage: 'Sharing',
+		}),
+		icon: UsersIcon,
+		content: SharingSettings,
+		shown: props.instance.shared_instance?.role === 'owner' && !props.instance.quarantined,
+	},
 	{
 		name: defineMessage({
 			id: 'instance.settings.tabs.window',
@@ -120,11 +134,50 @@ const tabs = computed<TabbedModalTab[]>(() => [
 	},
 ])

+function getSupportedModpackLoaders() {
+	return get_loaders().then((value: PlatformTag[]) =>
+		value
+			.filter((item) => item.supported_project_types.includes('modpack') || item.name === 'vanilla')
+			.sort((a, b) => (a.name === 'vanilla' ? -1 : b.name === 'vanilla' ? 1 : 0)),
+	)
+}
+
+// Preload
+useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'fabric'],
+	queryFn: () => get_loader_versions('fabric'),
+})
+useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'forge'],
+	queryFn: () => get_loader_versions('forge'),
+})
+useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'quilt'],
+	queryFn: () => get_loader_versions('quilt'),
+})
+useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'neo'],
+	queryFn: () => get_loader_versions('neo'),
+})
+useQuery({
+	queryKey: ['instance-settings', 'game-versions'],
+	queryFn: get_game_versions,
+})
+useQuery({
+	queryKey: ['instance-settings', 'loaders', 'modpack'],
+	queryFn: getSupportedModpackLoaders,
+})
+useQuery({
+	queryKey: computed(() => ['linkedModpackInfo', props.instance.id]),
+	queryFn: () => get_linked_modpack_info(props.instance.id, 'stale_while_revalidate'),
+	enabled: computed(() => !!props.instance.link?.project_id && !props.offline),
+})
+
 function show(tabIndex?: number) {
-	if (props.instance.linked_data?.project_id) {
+	if (props.instance.link?.project_id) {
 		queryClient.prefetchQuery({
-			queryKey: ['linkedModpackInfo', props.instance.path],
-			queryFn: () => get_linked_modpack_info(props.instance.path, 'stale_while_revalidate'),
+			queryKey: ['linkedModpackInfo', props.instance.id],
+			queryFn: () => get_linked_modpack_info(props.instance.id, 'stale_while_revalidate'),
 		})
 	}
 	tabbedModal.value?.show()
@@ -147,7 +200,7 @@ defineExpose({ show, hide })
 				<Avatar
 					:src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
 					size="24px"
-					:tint-by="props.instance.path"
+					:tint-by="props.instance.id"
 				/>
 				{{ instance.name }} <ChevronRightIcon />
 				<span class="font-extrabold text-contrast">{{
@@ -10,33 +10,27 @@

 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="handleCancel">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button @click="handleGoToInstance">
-						{{ formatMessage(messages.instance) }}
-						<RightArrowIcon />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="orange">
-					<button @click="handleCreateAnyway">
-						<PlusIcon />
-						{{ formatMessage(messages.create) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="handleCancel">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button @click="handleGoToInstance">
+					{{ formatMessage(messages.instance) }}
+					<RightArrowIcon />
+				</Button>
+				<Button type="colored" color="orange" @click="handleCreateAnyway">
+					<PlusIcon />
+					{{ formatMessage(messages.create) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
 </template>

 <script setup lang="ts">
+import { Button } from '@modrinth/ui'
 import { PlusIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	IntlFormatted,
@@ -68,17 +62,17 @@ const messages = defineMessages({
 })

 const emit = defineEmits<{
-	(e: 'go-to-instance', instancePath: string): void
+	(e: 'go-to-instance', instanceId: string): void
 	(e: 'create-anyway'): void
 }>()

 const modal = ref<InstanceType<typeof NewModal>>()
 const instanceName = ref('')
-const instancePath = ref('')
+const instanceId = ref('')

-function show(name: string, path: string) {
+function show(name: string, id: string) {
 	instanceName.value = name
-	instancePath.value = path
+	instanceId.value = id
 	modal.value?.show()
 }

@@ -88,7 +82,7 @@ function handleCancel() {

 function handleGoToInstance() {
 	modal.value?.hide()
-	emit('go-to-instance', instancePath.value)
+	emit('go-to-instance', instanceId.value)
 }

 function handleCreateAnyway() {
@@ -0,0 +1,258 @@
+<template>
+	<NewModal
+		ref="modal"
+		:header="formatMessage(authenticating ? messages.signingInHeader : messages.header)"
+		:on-hide="handleHide"
+		no-padding
+		max-width="548px"
+		width="100%"
+	>
+		<div v-if="authenticating === null" class="flex w-full flex-col gap-6 p-6">
+			<div class="flex flex-col gap-2 px-3">
+				<h2 class="m-0 text-xl font-semibold leading-7 text-contrast">
+					{{ formatMessage(messages.signInHeading) }}
+				</h2>
+				<p class="m-0 text-base leading-6 text-primary">
+					{{ formatMessage(messages.description) }}
+				</p>
+			</div>
+
+			<div class="flex flex-col gap-6">
+				<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+					<Button class="w-full" native-type="button" @click="authenticate('sign-up')">
+						<UserPlusIcon aria-hidden="true" />
+						{{ formatMessage(messages.createAccountButton) }}
+					</Button>
+					<Button type="colored" color="brand" class="w-full" native-type="button" @click="authenticate('sign-in')">
+						<LogInIcon aria-hidden="true" />
+						{{ formatMessage(messages.signInButton) }}
+					</Button>
+				</div>
+
+				<p class="m-0 text-center text-base font-medium leading-6 text-primary">
+					<IntlFormatted :message-id="messages.supportPrompt">
+						<template #support="{ children }">
+							<button
+								type="button"
+								class="inline cursor-pointer border-0 bg-transparent p-0 text-base font-medium leading-6 text-blue hover:underline"
+								@click="openSupport"
+							>
+								<component :is="() => children" />
+							</button>
+						</template>
+					</IntlFormatted>
+				</p>
+			</div>
+		</div>
+
+		<div v-else class="flex w-full flex-col gap-6 p-6">
+			<div class="flex flex-col gap-2.5 px-3">
+				<div class="flex flex-col gap-2">
+					<h2 class="m-0 text-xl font-semibold leading-7 text-contrast">
+						{{ formatMessage(messages.continueInBrowserHeading) }}
+					</h2>
+					<p class="m-0 text-base leading-6 text-primary">
+						{{ formatMessage(messages.browserDescription) }}
+					</p>
+				</div>
+				<div class="flex items-center gap-1.5 text-primary">
+					<SpinnerIcon aria-hidden="true" class="h-5 w-5 shrink-0 animate-spin" />
+					<span class="text-base leading-6">
+						{{ formatMessage(messages.waitingForBrowser) }}
+					</span>
+				</div>
+			</div>
+
+			<div class="flex flex-col gap-6">
+				<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+					<Button type="outlined" class="w-full" native-type="button" @click="modal?.hide()">
+						<XIcon aria-hidden="true" />
+						{{ formatMessage(messages.cancelButton) }}
+					</Button>
+					<Button
+							class="w-full"
+							native-type="button"
+							:disabled="reopeningBrowser"
+							@click="reopenBrowser"
+						>
+						<RefreshCwIcon aria-hidden="true" />
+						{{ formatMessage(messages.openBrowserAgainButton) }}
+					</Button>
+				</div>
+
+				<p class="m-0 text-center text-base font-medium leading-6 text-primary">
+					<IntlFormatted :message-id="messages.supportPrompt">
+						<template #support="{ children }">
+							<button
+								type="button"
+								class="inline cursor-pointer border-0 bg-transparent p-0 text-base font-medium leading-6 text-blue hover:underline"
+								@click="openSupport"
+							>
+								<component :is="() => children" />
+							</button>
+						</template>
+					</IntlFormatted>
+				</p>
+			</div>
+		</div>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { Button } from '@modrinth/ui'
+import { LogInIcon, RefreshCwIcon, SpinnerIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
+import { defineMessages, IntlFormatted, NewModal, useVIntl } from '@modrinth/ui'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { ref } from 'vue'
+
+import { cancelLogin, type ModrinthAuthFlow } from '@/helpers/mr_auth'
+
+const props = defineProps<{
+	requestAuth: (flow: ModrinthAuthFlow) => Promise<boolean>
+}>()
+
+const { formatMessage } = useVIntl()
+const modal = ref<InstanceType<typeof NewModal>>()
+const authenticating = ref<ModrinthAuthFlow | null>(null)
+const reopeningBrowser = ref(false)
+let resolveShow: ((signedIn: boolean) => void) | undefined
+let authenticationId = 0
+let activeAuthentication: Promise<void> | undefined
+
+function show(event?: MouseEvent) {
+	resetAuthentication(true)
+	resolveShow?.(false)
+	const modalInstance = modal.value
+	if (!modalInstance) return Promise.resolve(false)
+
+	return new Promise<boolean>((resolve) => {
+		resolveShow = resolve
+		modalInstance.show(event)
+	})
+}
+
+function showSigningIn(flow: ModrinthAuthFlow = 'sign-in', event?: MouseEvent) {
+	const result = show(event)
+	authenticate(flow)
+	return result
+}
+
+function finish(signedIn: boolean) {
+	resolveShow?.(signedIn)
+	resolveShow = undefined
+}
+
+function authenticate(flow: ModrinthAuthFlow) {
+	const id = ++authenticationId
+	authenticating.value = flow
+
+	const authentication = (async () => {
+		try {
+			if ((await props.requestAuth(flow)) && authenticationId === id) {
+				authenticating.value = null
+				activeAuthentication = undefined
+				finish(true)
+				modal.value?.hide()
+			}
+		} finally {
+			if (authenticationId === id) {
+				authenticating.value = null
+				activeAuthentication = undefined
+			}
+		}
+	})()
+
+	activeAuthentication = authentication
+}
+
+async function reopenBrowser() {
+	const flow = authenticating.value
+	if (!flow || reopeningBrowser.value) return
+
+	reopeningBrowser.value = true
+	const previousAuthentication = activeAuthentication
+	++authenticationId
+
+	try {
+		await cancelLogin()
+		await previousAuthentication?.catch(() => undefined)
+		if (authenticating.value === flow) authenticate(flow)
+	} finally {
+		reopeningBrowser.value = false
+	}
+}
+
+function resetAuthentication(cancelActive: boolean) {
+	const wasAuthenticating = authenticating.value !== null
+	++authenticationId
+	activeAuthentication = undefined
+	authenticating.value = null
+	reopeningBrowser.value = false
+
+	if (cancelActive && wasAuthenticating) void cancelLogin()
+}
+
+function handleHide() {
+	resetAuthentication(true)
+	finish(false)
+}
+
+function openSupport() {
+	openUrl('https://support.modrinth.com')
+}
+
+const messages = defineMessages({
+	header: {
+		id: 'modal.modrinth-account-required.header',
+		defaultMessage: 'Account required',
+	},
+	signingInHeader: {
+		id: 'modal.modrinth-account-required.signing-in-header',
+		defaultMessage: 'Signing in',
+	},
+	signInHeading: {
+		id: 'modal.modrinth-account-required.sign-in-heading',
+		defaultMessage: 'Sign in to a Modrinth account',
+	},
+	description: {
+		id: 'modal.modrinth-account-required.description',
+		defaultMessage:
+			"You'll need to sign into your Modrinth account before you can use this feature.",
+	},
+	createAccountButton: {
+		id: 'modal.modrinth-account-required.create-account-button',
+		defaultMessage: 'Create an account',
+	},
+	signInButton: {
+		id: 'modal.modrinth-account-required.sign-in-button',
+		defaultMessage: 'Sign in to Modrinth',
+	},
+	continueInBrowserHeading: {
+		id: 'modal.modrinth-account-required.continue-in-browser-heading',
+		defaultMessage: 'Continue in your browser',
+	},
+	browserDescription: {
+		id: 'modal.modrinth-account-required.browser-description',
+		defaultMessage:
+			'A new tab opened to sign in. Complete the sign in there, then return to the app.',
+	},
+	waitingForBrowser: {
+		id: 'modal.modrinth-account-required.waiting-for-browser',
+		defaultMessage: 'Waiting for browser confirmation...',
+	},
+	cancelButton: {
+		id: 'modal.modrinth-account-required.cancel-button',
+		defaultMessage: 'Cancel',
+	},
+	openBrowserAgainButton: {
+		id: 'modal.modrinth-account-required.open-browser-again-button',
+		defaultMessage: 'Open browser again',
+	},
+	supportPrompt: {
+		id: 'modal.modrinth-account-required.support-prompt',
+		defaultMessage: 'Having trouble signing in? <support>Get support</support>',
+	},
+})
+
+defineExpose({ show, showSigningIn })
+</script>
@@ -2,17 +2,18 @@
 	<ContentDiffModal
 		ref="diffModal"
 		:header="formatMessage(messages.updateToPlay)"
-		:admonition-header="formatMessage(messages.updateRequired)"
 		:description="
 			instance ? formatMessage(messages.updateRequiredDescription, { name: instance.name }) : ''
 		"
 		:diffs="normalizedDiffs"
+		:version-date="versionDate"
+		:show-external-warnings="showExternalWarnings"
+		:external-warning-description="formatMessage(messages.externalWarningDescription)"
 		:confirm-label="formatMessage(commonMessages.updateButton)"
 		:confirm-icon="DownloadIcon"
-		:show-report-button="true"
+		:removed-label="formatMessage(messages.removed)"
 		@confirm="handleUpdate"
 		@cancel="handleDecline"
-		@report="handleReport"
 	/>
 </template>

@@ -26,12 +27,12 @@ import {
 	defineMessages,
 	useVIntl,
 } from '@modrinth/ui'
-import { openUrl } from '@tauri-apps/plugin-opener'
 import dayjs from 'dayjs'
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'

 import { get_project_many, get_version, get_version_many } from '@/helpers/cache.js'
-import { update_managed_modrinth_version } from '@/helpers/profile'
+import { wait_for_install_job } from '@/helpers/install'
+import { update_managed_modrinth_version } from '@/helpers/instance'
 import type { GameInstance } from '@/helpers/types'
 import { injectServerInstall } from '@/providers/server-install'

@@ -76,6 +77,15 @@ const { formatMessage } = useVIntl()
 const { startInstallingServer, stopInstallingServer } = injectServerInstall()
 type UpdateCompleteCallback = () => void | Promise<void>

+const { showExternalWarnings } = defineProps<{
+	showExternalWarnings?: boolean
+}>()
+
+const emit = defineEmits<{
+	cancel: []
+	complete: []
+}>()
+
 const diffModal = ref<InstanceType<typeof ContentDiffModal>>()
 const instance = ref<GameInstance | null>(null)
 const onUpdateComplete = ref<UpdateCompleteCallback>(() => {})
@@ -83,14 +93,21 @@ const diffs = ref<DependencyDiff[]>([])
 const modpackVersionId = ref<string | null>(null)
 const modpackVersion = ref<Version | null>(null)

-const normalizedDiffs = computed<ContentDiffItem[]>(() =>
-	diffs.value.map((diff) => ({
+const normalizedDiffs = computed<ContentDiffItem[]>(() => {
+	return diffs.value.map((diff) => ({
 		type: diff.type,
+		external: Boolean(diff.fileName && !diff.project),
 		projectName: diff.project?.title,
 		fileName: diff.fileName,
 		currentVersionName: diff.currentVersion?.version_number,
 		newVersionName: diff.newVersion?.version_number,
-	})),
+	}))
+})
+
+const versionDate = computed(() =>
+	modpackVersion.value?.date_published
+		? dayjs(modpackVersion.value.date_published).format('MMMM D, YYYY')
+		: undefined,
 )

 async function computeDependencyDiffs(
@@ -189,6 +206,10 @@ async function computeDependencyDiffs(
 			}
 		})
 		.sort((a, b) => {
+			const aExternal = Boolean(a.fileName && !a.project)
+			const bExternal = Boolean(b.fileName && !b.project)
+			if (aExternal !== bExternal) return aExternal ? -1 : 1
+
 			const typeOrder = { added: 0, updated: 1, removed: 2 }
 			const typeCompare = typeOrder[a.type] - typeOrder[b.type]
 			if (typeCompare !== 0) return typeCompare
@@ -202,15 +223,15 @@ async function computeDependencyDiffs(
 }

 async function checkUpdateAvailable(inst: GameInstance): Promise<DependencyDiff[] | null> {
-	if (!inst.linked_data) return null
-	if (!modpackVersionId.value || !inst.linked_data.version_id) return null
+	if (!inst.link) return null
+	if (!modpackVersionId.value || !inst.link.version_id) return null

 	try {
-		// For server projects, linked_data.project_id is the server project but
-		// linked_data.version_id references a content modpack version from a different project.
-		// Detect this by comparing the version's project_id with linked_data.project_id.
+		// For server projects, link.project_id is the server project but
+		// link.version_id references a content modpack version from a different project.
+		// Detect this by comparing the version's project_id with link.project_id.
 		modpackVersion.value = await get_version(modpackVersionId.value, 'bypass')
-		const instanceModpackVersion = await get_version(inst.linked_data.version_id, 'bypass')
+		const instanceModpackVersion = await get_version(inst.link.version_id, 'bypass')

 		// Compute dependency diffs between current and latest version
 		if (instanceModpackVersion && modpackVersion.value) {
@@ -226,42 +247,25 @@ async function checkUpdateAvailable(inst: GameInstance): Promise<DependencyDiff[
 	return null
 }

-watch(
-	() => instance.value,
-	async (newInstance) => {
-		if (!newInstance) return
-		const result = await checkUpdateAvailable(newInstance)
-		diffs.value = result || []
-	},
-	{ immediate: true, deep: true },
-)
-
 async function handleUpdate() {
-	hide()
-	const serverProjectId = instance.value?.linked_data?.project_id
+	const serverProjectId = instance.value?.link?.project_id
 	if (serverProjectId) startInstallingServer(serverProjectId)
 	try {
 		if (modpackVersionId.value && instance.value) {
-			await update_managed_modrinth_version(instance.value.path, modpackVersionId.value)
+			const job = await update_managed_modrinth_version(instance.value.id, modpackVersionId.value)
+			await wait_for_install_job(job.job_id)
 			await onUpdateComplete.value()
 		}
 	} catch (error) {
 		console.error('Error updating instance:', error)
 	} finally {
 		if (serverProjectId) stopInstallingServer(serverProjectId)
-	}
-}
-
-function handleReport() {
-	if (instance.value?.linked_data?.project_id) {
-		openUrl(
-			`https://modrinth.com/report?item=project&itemID=${instance.value.linked_data.project_id}`,
-		)
+		emit('complete')
 	}
 }

 function handleDecline() {
-	hide()
+	emit('cancel')
 }

 function show(
@@ -272,8 +276,15 @@ function show(
 ) {
 	instance.value = instanceVal
 	modpackVersionId.value = modpackVersionIdVal
+	modpackVersion.value = null
+	diffs.value = []
 	onUpdateComplete.value = callback
 	diffModal.value?.show(e)
+	void checkUpdateAvailable(instanceVal).then((result) => {
+		if (instance.value?.id === instanceVal.id && modpackVersionId.value === modpackVersionIdVal) {
+			diffs.value = result || []
+		}
+	})
 }

 function hide() {
@@ -285,23 +296,25 @@ const messages = defineMessages({
 		id: 'app.modal.update-to-play.header',
 		defaultMessage: 'Update to play',
 	},
-	updateRequired: {
-		id: 'app.modal.update-to-play.update-required',
-		defaultMessage: 'Update required',
-	},
 	updateRequiredDescription: {
 		id: 'app.modal.update-to-play.update-required-description',
 		defaultMessage:
-			'An update is required to play {name}. Please update to the latest version to launch the game.',
+			'An update is required to play {name}. Please update to latest version to launch the game.',
+	},
+	removed: {
+		id: 'app.modal.update-to-play.removed',
+		defaultMessage: 'Removed',
+	},
+	externalWarningDescription: {
+		id: 'app.modal.update-to-play.server-modpack-unknown-files-description',
+		defaultMessage:
+			'This server modpack update contains files that aren’t published on Modrinth. We strongly recommend only installing files from sources you trust.',
 	},
 })

 const hasUpdate = computed(() => {
-	if (!instance.value?.linked_data) return false
-	return (
-		modpackVersionId.value != null &&
-		modpackVersionId.value !== instance.value.linked_data.version_id
-	)
+	if (!instance.value?.link) return false
+	return modpackVersionId.value != null && modpackVersionId.value !== instance.value.link.version_id
 })

 defineExpose({ show, hide, hasUpdate })
@@ -1,278 +0,0 @@
-<script setup lang="ts">
-import { Combobox, defineMessages, ThemeSelector, Toggle, useVIntl } from '@modrinth/ui'
-import { ref, watch } from 'vue'
-
-import { get, set } from '@/helpers/settings.ts'
-import { getOS } from '@/helpers/utils'
-import { useTheming } from '@/store/state'
-import type { ColorTheme, FeatureFlag } from '@/store/theme.ts'
-
-const themeStore = useTheming()
-const { formatMessage } = useVIntl()
-
-const worldsInHomeFeatureFlag = 'worlds_in_home' as FeatureFlag
-const skipUnknownPackWarningFeatureFlag = 'skip_unknown_pack_warning' as FeatureFlag
-
-const messages = defineMessages({
-	colorThemeTitle: {
-		id: 'app.appearance-settings.color-theme.title',
-		defaultMessage: 'Color theme',
-	},
-	colorThemeDescription: {
-		id: 'app.appearance-settings.color-theme.description',
-		defaultMessage: 'Select your preferred color theme for Modrinth App.',
-	},
-	advancedRenderingTitle: {
-		id: 'app.appearance-settings.advanced-rendering.title',
-		defaultMessage: 'Advanced rendering',
-	},
-	advancedRenderingDescription: {
-		id: 'app.appearance-settings.advanced-rendering.description',
-		defaultMessage:
-			'Enables advanced rendering such as blur effects that may cause performance issues without hardware-accelerated rendering.',
-	},
-	hideNametagTitle: {
-		id: 'app.appearance-settings.hide-nametag.title',
-		defaultMessage: 'Hide nametag',
-	},
-	hideNametagDescription: {
-		id: 'app.appearance-settings.hide-nametag.description',
-		defaultMessage: 'Disables the nametag above your player on the skins page.',
-	},
-	nativeDecorationsTitle: {
-		id: 'app.appearance-settings.native-decorations.title',
-		defaultMessage: 'Native decorations',
-	},
-	nativeDecorationsDescription: {
-		id: 'app.appearance-settings.native-decorations.description',
-		defaultMessage: 'Use system window frame (app restart required).',
-	},
-	minimizeLauncherTitle: {
-		id: 'app.appearance-settings.minimize-launcher.title',
-		defaultMessage: 'Minimize launcher',
-	},
-	minimizeLauncherDescription: {
-		id: 'app.appearance-settings.minimize-launcher.description',
-		defaultMessage: 'Minimize the launcher when a Minecraft process starts.',
-	},
-	defaultLandingPageTitle: {
-		id: 'app.appearance-settings.default-landing-page.title',
-		defaultMessage: 'Default landing page',
-	},
-	defaultLandingPageDescription: {
-		id: 'app.appearance-settings.default-landing-page.description',
-		defaultMessage: 'Change the page to which the launcher opens on.',
-	},
-	defaultLandingPageHome: {
-		id: 'app.appearance-settings.default-landing-page.home',
-		defaultMessage: 'Home',
-	},
-	defaultLandingPageLibrary: {
-		id: 'app.appearance-settings.default-landing-page.library',
-		defaultMessage: 'Library',
-	},
-	selectOption: {
-		id: 'app.appearance-settings.select-option',
-		defaultMessage: 'Select an option',
-	},
-	jumpBackIntoWorldsTitle: {
-		id: 'app.appearance-settings.jump-back-into-worlds.title',
-		defaultMessage: 'Jump back into worlds',
-	},
-	jumpBackIntoWorldsDescription: {
-		id: 'app.appearance-settings.jump-back-into-worlds.description',
-		defaultMessage: 'Includes recent worlds in the "Jump back in" section on the Home page.',
-	},
-	toggleSidebarTitle: {
-		id: 'app.appearance-settings.toggle-sidebar.title',
-		defaultMessage: 'Toggle sidebar',
-	},
-	toggleSidebarDescription: {
-		id: 'app.appearance-settings.toggle-sidebar.description',
-		defaultMessage: 'Enables the ability to toggle the sidebar.',
-	},
-	unknownPackWarningTitle: {
-		id: 'app.appearance-settings.unknown-pack-warning.title',
-		defaultMessage: 'Warn me before installing unknown modpacks',
-	},
-	unknownPackWarningDescription: {
-		id: 'app.appearance-settings.unknown-pack-warning.description',
-		defaultMessage:
-			"If you attempt to install a Modrinth Pack file (.mrpack) that isn't hosted on Modrinth, we'll make sure you understand the risks before installing it.",
-	},
-})
-
-const os = ref(await getOS())
-const settings = ref(await get())
-
-watch(
-	settings,
-	async () => {
-		await set(settings.value)
-	},
-	{ deep: true },
-)
-</script>
-<template>
-	<h2 class="m-0 text-lg font-semibold text-contrast">
-		{{ formatMessage(messages.colorThemeTitle) }}
-	</h2>
-	<p class="m-0 mt-1">{{ formatMessage(messages.colorThemeDescription) }}</p>
-
-	<ThemeSelector
-		:update-color-theme="
-			(theme: ColorTheme) => {
-				themeStore.setThemeState(theme)
-				settings.theme = theme
-			}
-		"
-		:current-theme="settings.theme"
-		:theme-options="themeStore.getThemeOptions()"
-		system-theme-color="system"
-	/>
-
-	<div class="mt-6 flex items-center justify-between">
-		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">
-				{{ formatMessage(messages.advancedRenderingTitle) }}
-			</h2>
-			<p class="m-0 mt-1">
-				{{ formatMessage(messages.advancedRenderingDescription) }}
-			</p>
-		</div>
-
-		<Toggle
-			id="advanced-rendering"
-			:model-value="themeStore.advancedRendering"
-			@update:model-value="
-				(e) => {
-					themeStore.advancedRendering = !!e
-					settings.advanced_rendering = themeStore.advancedRendering
-				}
-			"
-		/>
-	</div>
-
-	<div class="mt-6 flex items-center justify-between">
-		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">
-				{{ formatMessage(messages.hideNametagTitle) }}
-			</h2>
-			<p class="m-0 mt-1">{{ formatMessage(messages.hideNametagDescription) }}</p>
-		</div>
-		<Toggle
-			id="hide-nametag-skins-page"
-			:model-value="themeStore.hideNametagSkinsPage"
-			@update:model-value="
-				(e) => {
-					themeStore.hideNametagSkinsPage = !!e
-					settings.hide_nametag_skins_page = themeStore.hideNametagSkinsPage
-				}
-			"
-		/>
-	</div>
-
-	<div v-if="os !== 'MacOS'" class="mt-6 flex items-center justify-between gap-4">
-		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">
-				{{ formatMessage(messages.nativeDecorationsTitle) }}
-			</h2>
-			<p class="m-0 mt-1">{{ formatMessage(messages.nativeDecorationsDescription) }}</p>
-		</div>
-		<Toggle id="native-decorations" v-model="settings.native_decorations" />
-	</div>
-
-	<div class="mt-6 flex items-center justify-between">
-		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">
-				{{ formatMessage(messages.minimizeLauncherTitle) }}
-			</h2>
-			<p class="m-0 mt-1">{{ formatMessage(messages.minimizeLauncherDescription) }}</p>
-		</div>
-		<Toggle id="minimize-launcher" v-model="settings.hide_on_process_start" />
-	</div>
-
-	<div class="mt-6 flex items-center justify-between">
-		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">
-				{{ formatMessage(messages.defaultLandingPageTitle) }}
-			</h2>
-			<p class="m-0 mt-1">{{ formatMessage(messages.defaultLandingPageDescription) }}</p>
-		</div>
-		<Combobox
-			id="opening-page"
-			v-model="settings.default_page"
-			name="Opening page dropdown"
-			class="max-w-40"
-			:options="[
-				{
-					value: 'Home',
-					label: formatMessage(messages.defaultLandingPageHome),
-				},
-				{
-					value: 'Library',
-					label: formatMessage(messages.defaultLandingPageLibrary),
-				},
-			]"
-			:display-value="settings.default_page ?? 'Select an option'"
-		/>
-	</div>
-
-	<div class="mt-6 flex items-center justify-between">
-		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">
-				{{ formatMessage(messages.jumpBackIntoWorldsTitle) }}
-			</h2>
-			<p class="m-0 mt-1">{{ formatMessage(messages.jumpBackIntoWorldsDescription) }}</p>
-		</div>
-		<Toggle
-			:model-value="themeStore.getFeatureFlag(worldsInHomeFeatureFlag)"
-			@update:model-value="
-				() => {
-					const newValue = !themeStore.getFeatureFlag(worldsInHomeFeatureFlag)
-					themeStore.featureFlags[worldsInHomeFeatureFlag] = newValue
-					settings.feature_flags[worldsInHomeFeatureFlag] = newValue
-				}
-			"
-		/>
-	</div>
-
-	<div class="mt-6 flex items-center justify-between gap-4">
-		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">
-				{{ formatMessage(messages.unknownPackWarningTitle) }}
-			</h2>
-			<p class="m-0 mt-1">{{ formatMessage(messages.unknownPackWarningDescription) }}</p>
-		</div>
-		<Toggle
-			:model-value="!themeStore.getFeatureFlag(skipUnknownPackWarningFeatureFlag)"
-			@update:model-value="
-				(e) => {
-					const warnBeforeUnknownPackInstall = !!e
-					const skipUnknownPackWarning = !warnBeforeUnknownPackInstall
-					themeStore.featureFlags[skipUnknownPackWarningFeatureFlag] = skipUnknownPackWarning
-					settings.feature_flags[skipUnknownPackWarningFeatureFlag] = skipUnknownPackWarning
-				}
-			"
-		/>
-	</div>
-
-	<div class="mt-6 flex items-center justify-between">
-		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">
-				{{ formatMessage(messages.toggleSidebarTitle) }}
-			</h2>
-			<p class="m-0 mt-1">{{ formatMessage(messages.toggleSidebarDescription) }}</p>
-		</div>
-		<Toggle
-			id="toggle-sidebar"
-			:model-value="settings.toggle_sidebar"
-			@update:model-value="
-				(e) => {
-					settings.toggle_sidebar = !!e
-					themeStore.toggleSidebar = settings.toggle_sidebar
-				}
-			"
-		/>
-	</div>
-</template>
@@ -1,186 +0,0 @@
-<script setup lang="ts">
-import { injectNotificationManager, Slider, StyledInput, Toggle } from '@modrinth/ui'
-import { ref, watch } from 'vue'
-
-import useMemorySlider from '@/composables/useMemorySlider'
-import { get, set } from '@/helpers/settings.ts'
-
-const { handleError } = injectNotificationManager()
-
-const fetchSettings = await get()
-fetchSettings.launchArgs = fetchSettings.extra_launch_args.join(' ')
-fetchSettings.envVars = fetchSettings.custom_env_vars.map((x) => x.join('=')).join(' ')
-
-const settings = ref(fetchSettings)
-
-const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) as unknown as {
-	maxMemory: number
-	snapPoints: number[]
-}
-
-watch(
-	settings,
-	async () => {
-		const setSettings = JSON.parse(JSON.stringify(settings.value))
-
-		setSettings.extra_launch_args = setSettings.launchArgs.trim().split(/\s+/).filter(Boolean)
-		setSettings.custom_env_vars = setSettings.envVars
-			.trim()
-			.split(/\s+/)
-			.filter(Boolean)
-			.map((x) => x.split('=').filter(Boolean))
-
-		if (!setSettings.hooks.pre_launch) {
-			setSettings.hooks.pre_launch = null
-		}
-		if (!setSettings.hooks.wrapper) {
-			setSettings.hooks.wrapper = null
-		}
-		if (!setSettings.hooks.post_exit) {
-			setSettings.hooks.post_exit = null
-		}
-
-		if (!setSettings.custom_dir) {
-			setSettings.custom_dir = null
-		}
-
-		await set(setSettings)
-	},
-	{ deep: true },
-)
-</script>
-
-<template>
-	<div>
-		<div class="flex flex-col gap-6">
-			<div class="flex items-center justify-between gap-4">
-				<div class="flex flex-col gap-1">
-					<h3 class="m-0 text-lg font-semibold text-contrast">Fullscreen</h3>
-					<p class="m-0 leading-tight">
-						Overwrites the options.txt file to start in full screen when launched.
-					</p>
-				</div>
-
-				<Toggle id="fullscreen" v-model="settings.force_fullscreen" />
-			</div>
-
-			<div class="flex items-center justify-between gap-4">
-				<div class="flex flex-col gap-1">
-					<h3 class="m-0 text-lg font-semibold text-contrast">Width</h3>
-					<p class="m-0 leading-tight">The width of the game window when launched.</p>
-				</div>
-
-				<StyledInput
-					id="width"
-					v-model="settings.game_resolution[0]"
-					:disabled="settings.force_fullscreen"
-					autocomplete="off"
-					type="number"
-					placeholder="Enter width..."
-				/>
-			</div>
-
-			<div class="flex items-center justify-between gap-4">
-				<div class="flex flex-col gap-1">
-					<h3 class="m-0 text-lg font-semibold text-contrast">Height</h3>
-					<p class="m-0 leading-tight">The height of the game window when launched.</p>
-				</div>
-
-				<StyledInput
-					id="height"
-					v-model="settings.game_resolution[1]"
-					:disabled="settings.force_fullscreen"
-					autocomplete="off"
-					type="number"
-					placeholder="Enter height..."
-				/>
-			</div>
-		</div>
-
-		<hr class="my-6 bg-button-border border-none h-[1px]" />
-
-		<div class="flex flex-col gap-6">
-			<div class="flex flex-col gap-2.5">
-				<h2 class="m-0 text-lg font-semibold text-contrast">Memory allocated</h2>
-				<Slider
-					id="max-memory"
-					v-model="settings.memory.maximum"
-					:min="512"
-					:max="maxMemory"
-					:step="64"
-					:snap-points="snapPoints"
-					:snap-range="512"
-					unit="MB"
-				/>
-				<p class="m-0 mt-1 leading-tight">The memory allocated to each instance when it is ran.</p>
-			</div>
-
-			<div class="flex flex-col gap-2.5">
-				<h2 class="m-0 text-lg font-semibold text-contrast">Java arguments</h2>
-				<StyledInput
-					id="java-args"
-					v-model="settings.launchArgs"
-					autocomplete="off"
-					type="text"
-					placeholder="Enter java arguments..."
-					wrapper-class="w-full"
-				/>
-			</div>
-
-			<div class="flex flex-col gap-2.5">
-				<h2 class="m-0 text-lg font-semibold text-contrast">Environmental variables</h2>
-				<StyledInput
-					id="env-vars"
-					v-model="settings.envVars"
-					autocomplete="off"
-					type="text"
-					placeholder="Enter environmental variables..."
-					wrapper-class="w-full"
-				/>
-			</div>
-		</div>
-
-		<hr class="my-6 bg-button-border border-none h-[1px]" />
-
-		<div class="flex flex-col gap-6">
-			<div class="flex flex-col gap-2.5">
-				<h3 class="m-0 text-lg font-semibold text-contrast">Pre launch hook</h3>
-				<StyledInput
-					id="pre-launch"
-					v-model="settings.hooks.pre_launch"
-					autocomplete="off"
-					type="text"
-					placeholder="Enter pre-launch command..."
-					wrapper-class="w-full"
-				/>
-				<p class="m-0 leading-tight">Ran before the instance is launched.</p>
-			</div>
-
-			<div class="flex flex-col gap-2.5">
-				<h3 class="m-0 text-lg font-semibold text-contrast">Wrapper hook</h3>
-				<StyledInput
-					id="wrapper"
-					v-model="settings.hooks.wrapper"
-					autocomplete="off"
-					type="text"
-					placeholder="Enter wrapper command..."
-					wrapper-class="w-full"
-				/>
-				<p class="m-0 leading-tight">Wrapper command for launching Minecraft.</p>
-			</div>
-
-			<div class="flex flex-col gap-2.5">
-				<h3 class="m-0 text-lg font-semibold text-contrast">Post exit hook</h3>
-				<StyledInput
-					id="post-exit"
-					v-model="settings.hooks.post_exit"
-					autocomplete="off"
-					type="text"
-					placeholder="Enter post-exit command..."
-					wrapper-class="w-full"
-				/>
-				<p class="m-0 leading-tight">Ran after the game closes.</p>
-			</div>
-		</div>
-	</div>
-</template>
@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { Toggle } from '@modrinth/ui'
-import { ref, watch } from 'vue'
-
-import { optInAnalytics, optOutAnalytics } from '@/helpers/analytics'
-import { get, set } from '@/helpers/settings.ts'
-
-const settings = ref(await get())
-
-watch(
-	settings,
-	async () => {
-		if (settings.value.telemetry) {
-			optInAnalytics()
-		} else {
-			optOutAnalytics()
-		}
-
-		await set(settings.value)
-	},
-	{ deep: true },
-)
-</script>
-
-<template>
-	<div class="flex items-center justify-between gap-4">
-		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">Personalized ads</h2>
-			<p class="m-0 mt-1 text-sm">
-				Modrinth's ad provider, Aditude, shows ads based on your preferences. By disabling this
-				option, you opt out and ads will no longer be shown based on your interests.
-			</p>
-		</div>
-		<Toggle id="personalized-ads" v-model="settings.personalized_ads" />
-	</div>
-
-	<div class="mt-4 flex items-center justify-between gap-4">
-		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">Telemetry</h2>
-			<p class="m-0 mt-1 text-sm">
-				Modrinth collects anonymized analytics and usage data to improve our user experience and
-				customize your experience. By disabling this option, you opt out and your data will no
-				longer be collected.
-			</p>
-		</div>
-		<Toggle id="opt-out-analytics" v-model="settings.telemetry" />
-	</div>
-
-	<div class="mt-4 flex items-center justify-between gap-4">
-		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">Discord RPC</h2>
-			<p class="m-0 mt-1 text-sm">
-				Manages the Discord Rich Presence integration. Disabling this will cause 'Modrinth' to no
-				longer show up as a game or app you are using on your Discord profile.
-			</p>
-			<p class="m-0 mt-2 text-sm">
-				Note: This will not prevent any instance-specific Discord Rich Presence integrations, such
-				as those added by mods. (app restart required to take effect)
-			</p>
-		</div>
-		<Toggle id="disable-discord-rpc" v-model="settings.discord_rpc" />
-	</div>
-</template>
@@ -1,140 +0,0 @@
-<script setup>
-import { BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, Slider, StyledInput } from '@modrinth/ui'
-import { open } from '@tauri-apps/plugin-dialog'
-import { ref, watch } from 'vue'
-
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import { purge_cache_types } from '@/helpers/cache.js'
-import { get, set } from '@/helpers/settings.ts'
-
-const { handleError } = injectNotificationManager()
-const settings = ref(await get())
-
-watch(
-	settings,
-	async () => {
-		const setSettings = JSON.parse(JSON.stringify(settings.value))
-
-		if (!setSettings.custom_dir) {
-			setSettings.custom_dir = null
-		}
-
-		await set(setSettings)
-	},
-	{ deep: true },
-)
-
-async function purgeCache() {
-	await purge_cache_types([
-		'project',
-		'project_v3',
-		'version',
-		'user',
-		'team',
-		'organization',
-		'file',
-		'loader_manifest',
-		'minecraft_manifest',
-		'categories',
-		'report_types',
-		'loaders',
-		'game_versions',
-		'donation_platforms',
-		'file_hash',
-		'file_update',
-		'search_results',
-		'search_results_v3',
-	]).catch(handleError)
-}
-
-async function findLauncherDir() {
-	const newDir = await open({
-		multiple: false,
-		directory: true,
-		title: 'Select a new app directory',
-	})
-
-	if (newDir) {
-		settings.value.custom_dir = newDir
-	}
-}
-</script>
-
-<template>
-	<div class="flex flex-col gap-6">
-		<div class="flex flex-col gap-2.5">
-			<h2 class="m-0 text-lg font-semibold text-contrast">App directory</h2>
-			<StyledInput
-				id="appDir"
-				v-model="settings.custom_dir"
-				:icon="BoxIcon"
-				type="text"
-				wrapper-class="w-full"
-			>
-				<template #right>
-					<ButtonStyled circular>
-						<button class="ml-1.5" @click="findLauncherDir">
-							<FolderSearchIcon />
-						</button>
-					</ButtonStyled>
-				</template>
-			</StyledInput>
-			<p class="m-0 leading-tight text-secondary">
-				The directory where the launcher stores all of its files. Changes will be applied after
-				restarting the launcher.
-			</p>
-		</div>
-
-		<div class="flex flex-col gap-2.5">
-			<ConfirmModalWrapper
-				ref="purgeCacheConfirmModal"
-				title="Are you sure you want to purge the cache?"
-				description="If you proceed, your entire cache will be purged. This may slow down the app temporarily."
-				:has-to-type="false"
-				proceed-label="Purge cache"
-				:show-ad-on-close="false"
-				@proceed="purgeCache"
-			/>
-			<h2 class="m-0 text-lg font-semibold text-contrast">App cache</h2>
-			<button id="purge-cache" class="btn min-w-max" @click="$refs.purgeCacheConfirmModal.show()">
-				<TrashIcon />
-				Purge cache
-			</button>
-			<p class="m-0 leading-tight text-secondary">
-				The Modrinth app stores a cache of data to speed up loading. This can be purged to force the
-				app to reload data. This may slow down the app temporarily.
-			</p>
-		</div>
-
-		<div class="flex flex-col gap-2.5">
-			<h2 class="m-0 text-lg font-semibold text-contrast mt-4">Maximum concurrent downloads</h2>
-			<Slider
-				id="max-downloads"
-				v-model="settings.max_concurrent_downloads"
-				:min="1"
-				:max="10"
-				:step="1"
-			/>
-			<p class="m-0 leading-tight text-secondary">
-				The maximum amount of files the launcher can download at the same time. Set this to a lower
-				value if you have a poor internet connection. (app restart required to take effect)
-			</p>
-		</div>
-
-		<div class="flex flex-col gap-2.5">
-			<h2 class="mt-0 m-0 text-lg font-semibold text-contrast">Maximum concurrent writes</h2>
-			<Slider
-				id="max-writes"
-				v-model="settings.max_concurrent_writes"
-				:min="1"
-				:max="50"
-				:step="1"
-			/>
-			<p class="m-0 leading-tight text-secondary">
-				The maximum amount of files the launcher can write to the disk at once. Set this to a lower
-				value if you are frequently getting I/O errors. (app restart required to take effect)
-			</p>
-		</div>
-	</div>
-</template>
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { Button } from '@modrinth/ui'
+import { Settings2Icon } from '@modrinth/assets'
+import {
+	defineMessages,
+	injectNotificationManager,
+	injectPageContext,
+	Toggle,
+	useVIntl,
+} from '@modrinth/ui'
+import { ref, watch } from 'vue'
+
+import { open_ads_consent_preferences } from '@/helpers/ads.js'
+import { optInAnalytics, optOutAnalytics } from '@/helpers/analytics'
+import { get, set } from '@/helpers/settings.ts'
+
+const { formatMessage } = useVIntl()
+const { handleError } = injectNotificationManager()
+const { adConsentAvailable } = injectPageContext()
+const settings = ref(await get())
+
+const messages = defineMessages({
+	adsConsentTitle: {
+		id: 'app.ads-consent.title',
+		defaultMessage: 'Your privacy and how ads support Modrinth',
+	},
+	adsConsentIntro: {
+		id: 'app.settings.privacy.ads-consent.intro',
+		defaultMessage:
+			'Ads make Modrinth possible and fund creator payouts. Our partners may store or access cookies in the app to personalize ads and measure performance. You can opt out or manage your preferences below.',
+	},
+	adsConsentManage: {
+		id: 'app.ads-consent.manage',
+		defaultMessage: 'Manage preferences',
+	},
+	telemetryTitle: {
+		id: 'app.settings.privacy.telemetry.title',
+		defaultMessage: 'Telemetry',
+	},
+	telemetryDescription: {
+		id: 'app.settings.privacy.telemetry.description',
+		defaultMessage:
+			'Modrinth collects anonymized analytics and usage data to improve our user experience and customize your experience. By disabling this option, you opt out and your data will no longer be collected.',
+	},
+	discordRichPresenceTitle: {
+		id: 'app.settings.privacy.discord-rich-presence.title',
+		defaultMessage: 'Discord Rich Presence',
+	},
+	discordRichPresenceDescription: {
+		id: 'app.settings.privacy.discord-rich-presence.description',
+		defaultMessage:
+			'Show Modrinth App as your current activity on Discord. This does not affect Rich Presence added to instances by mods. Requires an app restart.',
+	},
+})
+
+async function manageAdsPreferences() {
+	await open_ads_consent_preferences().catch(handleError)
+}
+
+watch(
+	settings,
+	async () => {
+		if (settings.value.telemetry) {
+			optInAnalytics()
+		} else {
+			optOutAnalytics()
+		}
+
+		await set(settings.value)
+	},
+	{ deep: true },
+)
+</script>
+
+<template>
+	<div v-if="adConsentAvailable">
+		<h2 class="m-0 text-lg font-semibold text-contrast">
+			{{ formatMessage(messages.adsConsentTitle) }}
+		</h2>
+		<div class="mt-2 flex flex-col gap-2.5 items-start">
+			<Button @click="manageAdsPreferences">
+				<Settings2Icon aria-hidden="true" />
+				{{ formatMessage(messages.adsConsentManage) }}
+			</Button>
+			<div>
+				{{ formatMessage(messages.adsConsentIntro) }}
+			</div>
+		</div>
+	</div>
+
+	<div class="mt-8 flex items-center justify-between gap-4">
+		<div>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.telemetryTitle) }}
+			</h2>
+			<p class="m-0 mt-1">
+				{{ formatMessage(messages.telemetryDescription) }}
+			</p>
+		</div>
+		<Toggle id="opt-out-analytics" v-model="settings.telemetry" />
+	</div>
+
+	<div class="mt-4 flex items-center justify-between gap-4">
+		<div>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.discordRichPresenceTitle) }}
+			</h2>
+			<p class="m-0 mt-1">
+				{{ formatMessage(messages.discordRichPresenceDescription) }}
+			</p>
+		</div>
+		<Toggle id="disable-discord-rpc" v-model="settings.discord_rpc" />
+	</div>
+</template>
@@ -0,0 +1,70 @@
+<template>
+	<AccountProfileSettings
+		ref="profileSettings"
+		:patch-user="patchUser"
+		:change-avatar="changeAvatar"
+		:delete-avatar="deleteAvatar"
+		:get-authenticated-user="getAuthenticatedUser"
+		@profile-link-click="handleProfileLinkClick"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { AccountProfileSettings, injectAuth } from '@modrinth/ui'
+import { inject, onBeforeUnmount, onMounted, ref } from 'vue'
+
+import {
+	change_user_avatar,
+	delete_user_avatar,
+	get_user_profile,
+	patch_user,
+} from '@/helpers/users'
+import { appSettingsModalContextKey } from '@/providers/app-settings-modal'
+
+const settingsModal = inject(appSettingsModalContextKey, null)
+const auth = injectAuth()
+const profileSettings = ref<InstanceType<typeof AccountProfileSettings> | null>(null)
+
+onMounted(() => {
+	settingsModal?.registerUnsavedChangesController({
+		hasChanges: () => profileSettings.value?.hasChanges ?? false,
+		getOriginal: () => profileSettings.value?.originalState ?? {},
+		getModified: () => profileSettings.value?.modifiedState ?? {},
+		isSaving: () => profileSettings.value?.saving ?? false,
+		reset: () => profileSettings.value?.reset(),
+		save: () => profileSettings.value?.save(),
+	})
+})
+
+onBeforeUnmount(() => {
+	settingsModal?.registerUnsavedChangesController(null)
+})
+
+function handleProfileLinkClick(event: MouseEvent): void {
+	if (settingsModal && !settingsModal.close()) {
+		event.preventDefault()
+	}
+}
+
+function patchUser(
+	userId: string,
+	patch: Partial<Pick<Labrinth.Users.v2.User, 'bio' | 'username'>>,
+): Promise<void> {
+	return patch_user(userId, patch)
+}
+
+async function changeAvatar(userId: string, file: Blob, extension: string): Promise<void> {
+	await change_user_avatar(userId, new Uint8Array(await file.arrayBuffer()), extension)
+}
+
+function deleteAvatar(userId: string): Promise<void> {
+	return delete_user_avatar(userId)
+}
+
+function getAuthenticatedUser(): Promise<Labrinth.Users.v3.User> {
+	const userId = auth.user.value?.id
+	if (!userId) throw new Error('Cannot refresh a signed-out user.')
+	return get_user_profile(userId)
+}
+</script>
@@ -0,0 +1,20 @@
+<template>
+	<AccountSocialSettings
+		:get-blocked-users="get_blocked_users"
+		:get-users="getUsers"
+		:unblock-user="unblock_user"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { AccountSocialSettings, injectModrinthClient } from '@modrinth/ui'
+
+import { get_blocked_users, unblock_user } from '@/helpers/users'
+
+const client = injectModrinthClient()
+
+function getUsers(userIds: string[]): Promise<Labrinth.Users.v2.User[]> {
+	return client.labrinth.users_v2.getMultiple(userIds)
+}
+</script>
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { defineMessages, ThemeSelector, Toggle, useVIntl } from '@modrinth/ui'
+import { computed, ref, watch } from 'vue'
+
+import { get, set } from '@/helpers/settings.ts'
+import { getOS } from '@/helpers/utils'
+import { useTheming } from '@/store/state'
+import type { ColorTheme } from '@/store/theme.ts'
+
+const themeStore = useTheming()
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	colorThemeTitle: {
+		id: 'app.appearance-settings.color-theme.title',
+		defaultMessage: 'Color theme',
+	},
+	colorThemeDescription: {
+		id: 'app.appearance-settings.color-theme.description',
+		defaultMessage: 'Choose the color theme used by Modrinth App.',
+	},
+	advancedRenderingTitle: {
+		id: 'app.appearance-settings.advanced-rendering.title',
+		defaultMessage: 'Advanced rendering',
+	},
+	advancedRenderingDescription: {
+		id: 'app.appearance-settings.advanced-rendering.description',
+		defaultMessage:
+			'Enable visual effects such as background blur. This may reduce performance without hardware acceleration.',
+	},
+	nativeDecorationsTitle: {
+		id: 'app.appearance-settings.native-decorations.title',
+		defaultMessage: 'System window frame',
+	},
+	nativeDecorationsDescription: {
+		id: 'app.appearance-settings.native-decorations.description',
+		defaultMessage:
+			"Use your operating system's title bar and window controls. Requires an app restart.",
+	},
+})
+
+const os = ref(await getOS())
+const settings = ref(await get())
+const themeOptions = computed(() =>
+	themeStore
+		.getThemeOptions()
+		.filter((theme) => theme !== 'retro' || themeStore.devMode || settings.value.theme === 'retro'),
+)
+
+watch(
+	settings,
+	async () => {
+		await set(settings.value)
+	},
+	{ deep: true },
+)
+</script>
+<template>
+	<h2 class="m-0 text-lg font-semibold text-contrast">
+		{{ formatMessage(messages.colorThemeTitle) }}
+	</h2>
+
+	<p class="m-0 mt-1">{{ formatMessage(messages.colorThemeDescription) }}</p>
+
+	<ThemeSelector
+		:update-color-theme="
+			(theme: ColorTheme) => {
+				themeStore.setThemeState(theme)
+				settings.theme = theme
+			}
+		"
+		:current-theme="settings.theme"
+		:theme-options="themeOptions"
+		system-theme-color="system"
+	/>
+
+	<div class="mt-6 flex items-center justify-between">
+		<div>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.advancedRenderingTitle) }}
+			</h2>
+			<p class="m-0 mt-1">
+				{{ formatMessage(messages.advancedRenderingDescription) }}
+			</p>
+		</div>
+
+		<Toggle
+			id="advanced-rendering"
+			:model-value="themeStore.advancedRendering"
+			@update:model-value="
+				(e) => {
+					themeStore.advancedRendering = !!e
+					settings.advanced_rendering = themeStore.advancedRendering
+				}
+			"
+		/>
+	</div>
+
+	<div v-if="os !== 'MacOS'" class="mt-6 flex items-center justify-between gap-4">
+		<div>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.nativeDecorationsTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.nativeDecorationsDescription) }}</p>
+		</div>
+		<Toggle id="native-decorations" v-model="settings.native_decorations" />
+	</div>
+</template>
@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import { Chips, defineMessages, Toggle, useVIntl } from '@modrinth/ui'
+import { ref, watch } from 'vue'
+
+import { get, set } from '@/helpers/settings.ts'
+import { useTheming } from '@/store/state'
+import type { FeatureFlag } from '@/store/theme.ts'
+
+const themeStore = useTheming()
+const { formatMessage } = useVIntl()
+
+const worldsInHomeFlag: FeatureFlag = 'worlds_in_home'
+const skipNonEssentialWarningsFlag: FeatureFlag = 'skip_non_essential_warnings'
+const skipUnknownPackWarningFlag: FeatureFlag = 'skip_unknown_pack_warning'
+const showPlayTimeFlag: FeatureFlag = 'show_instance_play_time'
+
+type LandingPage = 'Home' | 'Library'
+const landingPageOptions: LandingPage[] = ['Home', 'Library']
+
+const messages = defineMessages({
+	startupAndNavigationTitle: {
+		id: 'app.behavior-settings.startup-and-navigation.title',
+		defaultMessage: 'Startup and navigation',
+	},
+	contentTitle: {
+		id: 'app.behavior-settings.content.title',
+		defaultMessage: 'Home and content',
+	},
+	confirmationsTitle: {
+		id: 'app.behavior-settings.confirmations.title',
+		defaultMessage: 'Confirmations',
+	},
+	minimizeLauncherTitle: {
+		id: 'app.appearance-settings.minimize-launcher.title',
+		defaultMessage: 'Minimize app',
+	},
+	minimizeLauncherDescription: {
+		id: 'app.appearance-settings.minimize-launcher.description',
+		defaultMessage: 'Minimize Modrinth App when Minecraft starts.',
+	},
+	defaultLandingPageTitle: {
+		id: 'app.appearance-settings.default-landing-page.title',
+		defaultMessage: 'Default landing page',
+	},
+	defaultLandingPageDescription: {
+		id: 'app.appearance-settings.default-landing-page.description',
+		defaultMessage: 'Choose the page shown when Modrinth App opens.',
+	},
+	defaultLandingPageHome: {
+		id: 'app.appearance-settings.default-landing-page.home',
+		defaultMessage: 'Home',
+	},
+	defaultLandingPageLibrary: {
+		id: 'app.appearance-settings.default-landing-page.library',
+		defaultMessage: 'Library',
+	},
+	toggleSidebarTitle: {
+		id: 'app.appearance-settings.toggle-sidebar.title',
+		defaultMessage: 'Hide right sidebar',
+	},
+	toggleSidebarDescription: {
+		id: 'app.appearance-settings.toggle-sidebar.description',
+		defaultMessage: 'Hide the right sidebar by default and add a button to show or hide it.',
+	},
+	jumpBackIntoWorldsTitle: {
+		id: 'app.appearance-settings.jump-back-into-worlds.title',
+		defaultMessage: 'Jump back into worlds',
+	},
+	jumpBackIntoWorldsDescription: {
+		id: 'app.appearance-settings.jump-back-into-worlds.description',
+		defaultMessage: 'Show recently played worlds in the "Jump back in" section on the Home page.',
+	},
+	showPlayTimeTitle: {
+		id: 'app.appearance-settings.show-play-time.title',
+		defaultMessage: 'Show play time',
+	},
+	showPlayTimeDescription: {
+		id: 'app.appearance-settings.show-play-time.description',
+		defaultMessage: `Show how long you've played each instance.`,
+	},
+	hideNametagTitle: {
+		id: 'app.appearance-settings.hide-nametag.title',
+		defaultMessage: 'Hide nametag',
+	},
+	hideNametagDescription: {
+		id: 'app.appearance-settings.hide-nametag.description',
+		defaultMessage: 'Hide your username above the player preview on the Skin selector page.',
+	},
+	unknownPackWarningTitle: {
+		id: 'app.appearance-settings.unknown-pack-warning.title',
+		defaultMessage: 'Warn me before installing unknown modpacks',
+	},
+	unknownPackWarningDescription: {
+		id: 'app.appearance-settings.unknown-pack-warning.description',
+		defaultMessage:
+			"Show a safety warning before installing a Modrinth Pack (.mrpack) that isn't hosted on Modrinth.",
+	},
+	skipNonEssentialWarningsTitle: {
+		id: 'app.appearance-settings.skip-non-essential-warnings.title',
+		defaultMessage: 'Skip non-essential warnings',
+	},
+	skipNonEssentialWarningsDescription: {
+		id: 'app.appearance-settings.skip-non-essential-warnings.description',
+		defaultMessage:
+			'Skip confirmations for low-risk actions such as duplicate installs, normal content deletion, bulk updates, unlinking, and repairs. Warnings for dangerous actions are always shown.',
+	},
+})
+
+function formatLandingPageLabel(page: LandingPage) {
+	switch (page) {
+		case 'Home':
+			return formatMessage(messages.defaultLandingPageHome)
+		case 'Library':
+			return formatMessage(messages.defaultLandingPageLibrary)
+	}
+}
+
+const settings = ref(await get())
+
+watch(
+	settings,
+	async () => {
+		await set(settings.value)
+	},
+	{ deep: true },
+)
+</script>
+<template>
+	<section>
+		<h2 class="m-0 text-xl font-semibold text-contrast">
+			{{ formatMessage(messages.startupAndNavigationTitle) }}
+		</h2>
+		<div class="mt-4 flex flex-col gap-6">
+			<div class="flex flex-col gap-2.5">
+				<h3 class="m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.defaultLandingPageTitle) }}
+				</h3>
+				<Chips
+					v-model="settings.default_page"
+					:items="landingPageOptions"
+					:format-label="formatLandingPageLabel"
+					:capitalize="false"
+					:aria-label="formatMessage(messages.defaultLandingPageTitle)"
+				/>
+				<p class="m-0">
+					{{ formatMessage(messages.defaultLandingPageDescription) }}
+				</p>
+			</div>
+
+			<div class="flex items-center justify-between gap-4">
+				<div>
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.minimizeLauncherTitle) }}
+					</h3>
+					<p class="m-0 mt-1">
+						{{ formatMessage(messages.minimizeLauncherDescription) }}
+					</p>
+				</div>
+				<Toggle id="minimize-launcher" v-model="settings.hide_on_process_start" />
+			</div>
+
+			<div class="flex items-center justify-between gap-4">
+				<div>
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.toggleSidebarTitle) }}
+					</h3>
+					<p class="m-0 mt-1">{{ formatMessage(messages.toggleSidebarDescription) }}</p>
+				</div>
+				<Toggle
+					id="toggle-sidebar"
+					:model-value="settings.toggle_sidebar"
+					@update:model-value="
+						(e) => {
+							settings.toggle_sidebar = !!e
+							themeStore.toggleSidebar = settings.toggle_sidebar
+						}
+					"
+				/>
+			</div>
+		</div>
+	</section>
+
+	<section class="mt-8 border-0 border-t border-solid border-divider pt-6">
+		<h2 class="m-0 text-xl font-semibold text-contrast">
+			{{ formatMessage(messages.contentTitle) }}
+		</h2>
+		<div class="mt-4 flex flex-col gap-6">
+			<div class="flex items-center justify-between gap-4">
+				<div>
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.jumpBackIntoWorldsTitle) }}
+					</h3>
+					<p class="m-0 mt-1">
+						{{ formatMessage(messages.jumpBackIntoWorldsDescription) }}
+					</p>
+				</div>
+				<Toggle
+					id="jump-back-into-worlds"
+					:model-value="themeStore.getFeatureFlag(worldsInHomeFlag)"
+					@update:model-value="
+						() => {
+							const newValue = !themeStore.getFeatureFlag(worldsInHomeFlag)
+							themeStore.featureFlags[worldsInHomeFlag] = newValue
+							settings.feature_flags[worldsInHomeFlag] = newValue
+						}
+					"
+				/>
+			</div>
+
+			<div class="flex items-center justify-between gap-4">
+				<div>
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.showPlayTimeTitle) }}
+					</h3>
+					<p class="m-0 mt-1">{{ formatMessage(messages.showPlayTimeDescription) }}</p>
+				</div>
+				<Toggle
+					id="show-play-time"
+					:model-value="themeStore.getFeatureFlag(showPlayTimeFlag)"
+					@update:model-value="
+						() => {
+							const newValue = !themeStore.getFeatureFlag(showPlayTimeFlag)
+							themeStore.featureFlags[showPlayTimeFlag] = newValue
+							settings.feature_flags[showPlayTimeFlag] = newValue
+						}
+					"
+				/>
+			</div>
+
+			<div class="flex items-center justify-between gap-4">
+				<div>
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.hideNametagTitle) }}
+					</h3>
+					<p class="m-0 mt-1">{{ formatMessage(messages.hideNametagDescription) }}</p>
+				</div>
+				<Toggle
+					id="hide-nametag-skins-page"
+					:model-value="themeStore.hideNametagSkinsPage"
+					@update:model-value="
+						(e) => {
+							themeStore.hideNametagSkinsPage = !!e
+							settings.hide_nametag_skins_page = themeStore.hideNametagSkinsPage
+						}
+					"
+				/>
+			</div>
+		</div>
+	</section>
+
+	<section class="mt-8 border-0 border-t border-solid border-divider pt-6">
+		<h2 class="m-0 text-xl font-semibold text-contrast">
+			{{ formatMessage(messages.confirmationsTitle) }}
+		</h2>
+		<div class="mt-4 flex flex-col gap-6">
+			<div class="flex items-center justify-between gap-4">
+				<div>
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.unknownPackWarningTitle) }}
+					</h3>
+					<p class="m-0 mt-1">
+						{{ formatMessage(messages.unknownPackWarningDescription) }}
+					</p>
+				</div>
+				<Toggle
+					id="warn-before-installing-unknown-modpacks"
+					:model-value="!themeStore.getFeatureFlag(skipUnknownPackWarningFlag)"
+					@update:model-value="
+						(e) => {
+							const warnBeforeUnknownPackInstall = !!e
+							const skipUnknownPackWarning = !warnBeforeUnknownPackInstall
+							themeStore.featureFlags[skipUnknownPackWarningFlag] = skipUnknownPackWarning
+							settings.feature_flags[skipUnknownPackWarningFlag] = skipUnknownPackWarning
+						}
+					"
+				/>
+			</div>
+
+			<div class="flex items-center justify-between gap-4">
+				<div>
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.skipNonEssentialWarningsTitle) }}
+					</h3>
+					<p class="m-0 mt-1">
+						{{ formatMessage(messages.skipNonEssentialWarningsDescription) }}
+					</p>
+				</div>
+				<Toggle
+					id="skip-non-essential-warnings"
+					:model-value="themeStore.getFeatureFlag(skipNonEssentialWarningsFlag)"
+					@update:model-value="
+						() => {
+							const newValue = !themeStore.getFeatureFlag(skipNonEssentialWarningsFlag)
+							themeStore.featureFlags[skipNonEssentialWarningsFlag] = newValue
+							settings.feature_flags[skipNonEssentialWarningsFlag] = newValue
+						}
+					"
+				/>
+			</div>
+		</div>
+	</section>
+</template>
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ButtonStyled, Toggle } from '@modrinth/ui'
+import { Toggle, Button } from '@modrinth/ui'
 import { ref, watch } from 'vue'

 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
@@ -25,7 +25,7 @@ watch(
 )
 </script>
 <template>
-	<div class="flex flex-col gap-2.5 min-w-[600px]">
+	<div class="flex flex-col gap-2.5">
 		<div v-for="option in options" :key="option" class="flex items-center justify-between">
 			<div>
 				<h2 class="m-0 text-lg font-semibold text-contrast capitalize">
@@ -33,14 +33,12 @@ watch(
 				</h2>
 			</div>
 			<div class="flex items-center gap-2">
-				<ButtonStyled type="transparent">
-					<button
+				<Button type="quiet"
 						:disabled="themeStore.getFeatureFlag(option) === DEFAULT_FEATURE_FLAGS[option]"
 						@click="setFeatureFlag(option, DEFAULT_FEATURE_FLAGS[option])"
 					>
-						Reset to default
-					</button>
-				</ButtonStyled>
+					Reset to default
+				</Button>
 				<Toggle
 					id="advanced-rendering"
 					:model-value="themeStore.getFeatureFlag(option)"
@@ -2,6 +2,7 @@
 import {
 	Admonition,
 	AutoLink,
+	commonSettingsMessages,
 	IntlFormatted,
 	LanguageSelector,
 	languageSelectorMessages,
@@ -43,7 +44,9 @@ async function onLocaleChange(newLocale: string) {
 </script>

 <template>
-	<h2 class="m-0 text-lg font-semibold text-contrast">Language</h2>
+	<h2 class="m-0 text-lg font-semibold text-contrast">
+		{{ formatMessage(commonSettingsMessages.language) }}
+	</h2>

 	<Admonition type="warning" class="mt-2 mb-4">
 		{{ formatMessage(languageSelectorMessages.languageWarning, { platform }) }}
@@ -0,0 +1,333 @@
+<script setup lang="ts">
+import {
+	defineMessages,
+	injectNotificationManager,
+	Slider,
+	StyledInput,
+	Toggle,
+	useVIntl,
+} from '@modrinth/ui'
+import { ref, watch } from 'vue'
+
+import useMemorySlider from '@/composables/useMemorySlider'
+import { get, set } from '@/helpers/settings.ts'
+
+const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	fullscreenTitle: {
+		id: 'app.settings.default-instance-options.fullscreen.title',
+		defaultMessage: 'Fullscreen',
+	},
+	fullscreenDescription: {
+		id: 'app.settings.default-instance-options.fullscreen.description',
+		defaultMessage: 'Start instances in fullscreen by updating their options.txt file.',
+	},
+	widthTitle: {
+		id: 'app.settings.default-instance-options.width.title',
+		defaultMessage: 'Width',
+	},
+	widthDescription: {
+		id: 'app.settings.default-instance-options.width.description',
+		defaultMessage: 'The width of the game window when launched.',
+	},
+	widthPlaceholder: {
+		id: 'app.settings.default-instance-options.width.placeholder',
+		defaultMessage: 'Enter width...',
+	},
+	heightTitle: {
+		id: 'app.settings.default-instance-options.height.title',
+		defaultMessage: 'Height',
+	},
+	heightDescription: {
+		id: 'app.settings.default-instance-options.height.description',
+		defaultMessage: 'The height of the game window when launched.',
+	},
+	heightPlaceholder: {
+		id: 'app.settings.default-instance-options.height.placeholder',
+		defaultMessage: 'Enter height...',
+	},
+	memoryAllocationTitle: {
+		id: 'app.settings.default-instance-options.memory-allocation.title',
+		defaultMessage: 'Memory allocation',
+	},
+	memoryAllocationDescription: {
+		id: 'app.settings.default-instance-options.memory-allocation.description',
+		defaultMessage: 'Maximum memory available to each instance.',
+	},
+	javaArgumentsTitle: {
+		id: 'app.settings.default-instance-options.java-arguments.title',
+		defaultMessage: 'Java arguments',
+	},
+	javaArgumentsPlaceholder: {
+		id: 'app.settings.default-instance-options.java-arguments.placeholder',
+		defaultMessage: 'Enter Java arguments...',
+	},
+	javaArgumentsDescription: {
+		id: 'app.settings.default-instance-options.java-arguments.description',
+		defaultMessage: 'Arguments passed to Java when launching an instance.',
+	},
+	environmentVariablesTitle: {
+		id: 'app.settings.default-instance-options.environment-variables.title',
+		defaultMessage: 'Environment variables',
+	},
+	environmentVariablesPlaceholder: {
+		id: 'app.settings.default-instance-options.environment-variables.placeholder',
+		defaultMessage: 'Enter environment variables...',
+	},
+	environmentVariablesDescription: {
+		id: 'app.settings.default-instance-options.environment-variables.description',
+		defaultMessage: 'Environment variables set when launching an instance.',
+	},
+	preLaunchHookTitle: {
+		id: 'app.settings.default-instance-options.pre-launch-hook.title',
+		defaultMessage: 'Pre-launch hook',
+	},
+	preLaunchHookPlaceholder: {
+		id: 'app.settings.default-instance-options.pre-launch-hook.placeholder',
+		defaultMessage: 'Enter pre-launch command...',
+	},
+	preLaunchHookDescription: {
+		id: 'app.settings.default-instance-options.pre-launch-hook.description',
+		defaultMessage: 'Runs before the instance starts.',
+	},
+	wrapperHookTitle: {
+		id: 'app.settings.default-instance-options.wrapper-hook.title',
+		defaultMessage: 'Wrapper hook',
+	},
+	wrapperHookPlaceholder: {
+		id: 'app.settings.default-instance-options.wrapper-hook.placeholder',
+		defaultMessage: 'Enter wrapper command...',
+	},
+	wrapperHookDescription: {
+		id: 'app.settings.default-instance-options.wrapper-hook.description',
+		defaultMessage: 'Command used to wrap the Minecraft launch process.',
+	},
+	postExitHookTitle: {
+		id: 'app.settings.default-instance-options.post-exit-hook.title',
+		defaultMessage: 'Post-exit hook',
+	},
+	postExitHookPlaceholder: {
+		id: 'app.settings.default-instance-options.post-exit-hook.placeholder',
+		defaultMessage: 'Enter post-exit command...',
+	},
+	postExitHookDescription: {
+		id: 'app.settings.default-instance-options.post-exit-hook.description',
+		defaultMessage: 'Runs after the game closes.',
+	},
+})
+
+const fetchSettings = await get()
+fetchSettings.launchArgs = fetchSettings.extra_launch_args.join(' ')
+fetchSettings.envVars = fetchSettings.custom_env_vars.map((x) => x.join('=')).join(' ')
+
+const settings = ref(fetchSettings)
+
+const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) as unknown as {
+	maxMemory: number
+	snapPoints: number[]
+}
+
+watch(
+	settings,
+	async () => {
+		const setSettings = JSON.parse(JSON.stringify(settings.value))
+
+		setSettings.extra_launch_args = setSettings.launchArgs.trim().split(/\s+/).filter(Boolean)
+		setSettings.custom_env_vars = setSettings.envVars
+			.trim()
+			.split(/\s+/)
+			.filter(Boolean)
+			.map((x) => x.split('=').filter(Boolean))
+
+		if (!setSettings.hooks.pre_launch) {
+			setSettings.hooks.pre_launch = null
+		}
+		if (!setSettings.hooks.wrapper) {
+			setSettings.hooks.wrapper = null
+		}
+		if (!setSettings.hooks.post_exit) {
+			setSettings.hooks.post_exit = null
+		}
+
+		if (!setSettings.custom_dir) {
+			setSettings.custom_dir = null
+		}
+
+		await set(setSettings)
+	},
+	{ deep: true },
+)
+</script>
+
+<template>
+	<div>
+		<div class="flex flex-col gap-6">
+			<div class="flex items-center justify-between gap-4">
+				<div class="flex flex-col gap-1">
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.fullscreenTitle) }}
+					</h3>
+					<p class="m-0 leading-tight">
+						{{ formatMessage(messages.fullscreenDescription) }}
+					</p>
+				</div>
+
+				<Toggle id="fullscreen" v-model="settings.force_fullscreen" />
+			</div>
+
+			<div class="flex items-center justify-between gap-4">
+				<div class="flex flex-col gap-1">
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.widthTitle) }}
+					</h3>
+					<p class="m-0 leading-tight">
+						{{ formatMessage(messages.widthDescription) }}
+					</p>
+				</div>
+
+				<StyledInput
+					id="width"
+					v-model="settings.game_resolution[0]"
+					:disabled="settings.force_fullscreen"
+					autocomplete="off"
+					type="number"
+					:placeholder="formatMessage(messages.widthPlaceholder)"
+				/>
+			</div>
+
+			<div class="flex items-center justify-between gap-4">
+				<div class="flex flex-col gap-1">
+					<h3 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.heightTitle) }}
+					</h3>
+					<p class="m-0 leading-tight">
+						{{ formatMessage(messages.heightDescription) }}
+					</p>
+				</div>
+
+				<StyledInput
+					id="height"
+					v-model="settings.game_resolution[1]"
+					:disabled="settings.force_fullscreen"
+					autocomplete="off"
+					type="number"
+					:placeholder="formatMessage(messages.heightPlaceholder)"
+				/>
+			</div>
+		</div>
+
+		<hr class="my-6 bg-button-border border-none h-[1px]" />
+
+		<div class="flex flex-col gap-6">
+			<div class="flex flex-col gap-2.5">
+				<h2 class="m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.memoryAllocationTitle) }}
+				</h2>
+				<Slider
+					id="max-memory"
+					v-model="settings.memory.maximum"
+					:min="512"
+					:max="maxMemory"
+					:step="64"
+					:snap-points="snapPoints"
+					:snap-range="512"
+					unit="MB"
+				/>
+				<p class="m-0 mt-1 leading-tight">
+					{{ formatMessage(messages.memoryAllocationDescription) }}
+				</p>
+			</div>
+
+			<div class="flex flex-col gap-2.5">
+				<h2 class="m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.javaArgumentsTitle) }}
+				</h2>
+				<StyledInput
+					id="java-args"
+					v-model="settings.launchArgs"
+					autocomplete="off"
+					type="text"
+					:placeholder="formatMessage(messages.javaArgumentsPlaceholder)"
+					wrapper-class="w-full"
+				/>
+				<p class="m-0 leading-tight">
+					{{ formatMessage(messages.javaArgumentsDescription) }}
+				</p>
+			</div>
+
+			<div class="flex flex-col gap-2.5">
+				<h2 class="m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.environmentVariablesTitle) }}
+				</h2>
+				<StyledInput
+					id="env-vars"
+					v-model="settings.envVars"
+					autocomplete="off"
+					type="text"
+					:placeholder="formatMessage(messages.environmentVariablesPlaceholder)"
+					wrapper-class="w-full"
+				/>
+				<p class="m-0 leading-tight">
+					{{ formatMessage(messages.environmentVariablesDescription) }}
+				</p>
+			</div>
+		</div>
+
+		<hr class="my-6 bg-button-border border-none h-[1px]" />
+
+		<div class="flex flex-col gap-6">
+			<div class="flex flex-col gap-2.5">
+				<h3 class="m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.preLaunchHookTitle) }}
+				</h3>
+				<StyledInput
+					id="pre-launch"
+					v-model="settings.hooks.pre_launch"
+					autocomplete="off"
+					type="text"
+					:placeholder="formatMessage(messages.preLaunchHookPlaceholder)"
+					wrapper-class="w-full"
+				/>
+				<p class="m-0 leading-tight">
+					{{ formatMessage(messages.preLaunchHookDescription) }}
+				</p>
+			</div>
+
+			<div class="flex flex-col gap-2.5">
+				<h3 class="m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.wrapperHookTitle) }}
+				</h3>
+				<StyledInput
+					id="wrapper"
+					v-model="settings.hooks.wrapper"
+					autocomplete="off"
+					type="text"
+					:placeholder="formatMessage(messages.wrapperHookPlaceholder)"
+					wrapper-class="w-full"
+				/>
+				<p class="m-0 leading-tight">
+					{{ formatMessage(messages.wrapperHookDescription) }}
+				</p>
+			</div>
+
+			<div class="flex flex-col gap-2.5">
+				<h3 class="m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.postExitHookTitle) }}
+				</h3>
+				<StyledInput
+					id="post-exit"
+					v-model="settings.hooks.post_exit"
+					autocomplete="off"
+					type="text"
+					:placeholder="formatMessage(messages.postExitHookPlaceholder)"
+					wrapper-class="w-full"
+				/>
+				<p class="m-0 leading-tight">
+					{{ formatMessage(messages.postExitHookDescription) }}
+				</p>
+			</div>
+		</div>
+	</div>
+</template>
@@ -1,11 +1,19 @@
 <script setup>
-import { injectNotificationManager } from '@modrinth/ui'
+import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
 import { ref } from 'vue'

 import JavaSelector from '@/components/ui/JavaSelector.vue'
 import { get_java_versions, set_java_version } from '@/helpers/jre'

 const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	javaLocation: {
+		id: 'app.settings.java-installations.location.title',
+		defaultMessage: 'Java {version, number} location',
+	},
+})

 const javaVersions = ref(await get_java_versions().catch(handleError))
 async function updateJavaVersion(version) {
@@ -28,7 +36,7 @@ async function updateJavaVersion(version) {
 			class="flex flex-col gap-2.5"
 		>
 			<h2 class="m-0 text-lg font-semibold text-contrast" :class="{ 'mt-4': index !== 0 }">
-				Java {{ javaVersion }} location
+				{{ formatMessage(messages.javaLocation, { version: javaVersion }) }}
 			</h2>
 			<JavaSelector
 				:id="'java-selector-' + javaVersion"
@@ -0,0 +1,289 @@
+<script setup>
+import { IconButton } from '@modrinth/ui'
+import { BoxIcon, FolderOpenIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
+import {
+	defineMessages,
+	injectNotificationManager,
+	Slider,
+	StyledInput,
+	Toggle,
+	useVIntl,
+} from '@modrinth/ui'
+import { open } from '@tauri-apps/plugin-dialog'
+import { ref, watch } from 'vue'
+
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { purge_cache_types } from '@/helpers/cache.js'
+import { get, set } from '@/helpers/settings.ts'
+import { showAppDbBackupsFolder } from '@/helpers/utils.js'
+import { useTheming } from '@/store/state'
+
+const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+const themeStore = useTheming()
+const settings = ref(await get())
+const purgeCacheConfirmModal = ref(null)
+const alwaysShowCopyDetailsFlag = 'always_show_copy_details'
+
+const messages = defineMessages({
+	appDirectoryTitle: {
+		id: 'app.settings.resource-management.app-directory.title',
+		defaultMessage: 'App directory',
+	},
+	appDirectoryDescription: {
+		id: 'app.settings.resource-management.app-directory.description',
+		defaultMessage:
+			'Where Modrinth App stores instances and other files. Changes take effect after restarting the app.',
+	},
+	selectAppDirectory: {
+		id: 'app.settings.resource-management.app-directory.select',
+		defaultMessage: 'Select a new app directory',
+	},
+	browseAppDirectory: {
+		id: 'app.settings.resource-management.app-directory.browse',
+		defaultMessage: 'Browse for an app directory',
+	},
+	appCacheTitle: {
+		id: 'app.settings.resource-management.app-cache.title',
+		defaultMessage: 'App cache',
+	},
+	purgeCache: {
+		id: 'app.settings.resource-management.app-cache.purge',
+		defaultMessage: 'Purge cache',
+	},
+	purgeCacheConfirmTitle: {
+		id: 'app.settings.resource-management.app-cache.confirm.title',
+		defaultMessage: 'Purge the app cache?',
+	},
+	purgeCacheConfirmDescription: {
+		id: 'app.settings.resource-management.app-cache.confirm.description',
+		defaultMessage: 'The app may load more slowly until the cache is rebuilt.',
+	},
+	appCacheDescription: {
+		id: 'app.settings.resource-management.app-cache.description',
+		defaultMessage:
+			'Clear cached data and download it again from Modrinth. The app may load more slowly until the cache is rebuilt.',
+	},
+	maximumConcurrentDownloadsTitle: {
+		id: 'app.settings.resource-management.maximum-concurrent-downloads.title',
+		defaultMessage: 'Maximum concurrent downloads',
+	},
+	maximumConcurrentDownloadsDescription: {
+		id: 'app.settings.resource-management.maximum-concurrent-downloads.description',
+		defaultMessage:
+			'Number of files the app can download at once. Lower this if downloads are unreliable on your connection. Requires an app restart.',
+	},
+	maximumConcurrentWritesTitle: {
+		id: 'app.settings.resource-management.maximum-concurrent-writes.title',
+		defaultMessage: 'Maximum concurrent writes',
+	},
+	maximumConcurrentWritesDescription: {
+		id: 'app.settings.resource-management.maximum-concurrent-writes.description',
+		defaultMessage:
+			'Number of files the app can write to disk at once. Lower this if you frequently encounter I/O errors. Requires an app restart.',
+	},
+	alwaysShowCopyDetailsTitle: {
+		id: 'app.settings.resource-management.always-show-copy-details.title',
+		defaultMessage: 'Always show copy details',
+	},
+	alwaysShowCopyDetailsDescription: {
+		id: 'app.settings.resource-management.always-show-copy-details.description',
+		defaultMessage:
+			'Show the Copy details action while an install is queued or running. It is always available for failed or interrupted installs.',
+	},
+	appDatabaseBackupsTitle: {
+		id: 'app.settings.resource-management.app-database-backups.title',
+		defaultMessage: 'App database backups',
+	},
+	openBackupsFolder: {
+		id: 'app.settings.resource-management.app-database-backups.open-folder',
+		defaultMessage: 'Open backups folder',
+	},
+	appDatabaseBackupsDescription: {
+		id: 'app.settings.resource-management.app-database-backups.description',
+		defaultMessage:
+			'Backups of important app data are stored here in case you need to recover them later.',
+	},
+})
+
+watch(
+	settings,
+	async () => {
+		const setSettings = JSON.parse(JSON.stringify(settings.value))
+
+		if (!setSettings.custom_dir) {
+			setSettings.custom_dir = null
+		}
+
+		await set(setSettings)
+	},
+	{ deep: true },
+)
+
+async function purgeCache() {
+	await purge_cache_types([
+		'project',
+		'project_v3',
+		'version',
+		'user',
+		'team',
+		'organization',
+		'file',
+		'loader_manifest',
+		'minecraft_manifest',
+		'categories',
+		'report_types',
+		'loaders',
+		'game_versions',
+		'donation_platforms',
+		'file_hash',
+		'file_update',
+		'search_results',
+		'search_results_v3',
+	]).catch(handleError)
+}
+
+function handlePurgeCacheClick() {
+	if (themeStore.getFeatureFlag('skip_non_essential_warnings')) {
+		void purgeCache()
+		return
+	}
+
+	purgeCacheConfirmModal.value?.show()
+}
+
+async function openDbBackupsFolder() {
+	await showAppDbBackupsFolder().catch(handleError)
+}
+
+async function findLauncherDir() {
+	const newDir = await open({
+		multiple: false,
+		directory: true,
+		title: formatMessage(messages.selectAppDirectory),
+	})
+
+	if (newDir) {
+		settings.value.custom_dir = newDir
+	}
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-6">
+		<div class="flex flex-col gap-2.5">
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.appDirectoryTitle) }}
+			</h2>
+			<StyledInput
+				id="appDir"
+				v-model="settings.custom_dir"
+				:icon="BoxIcon"
+				type="text"
+				wrapper-class="w-full"
+			>
+				<template #right>
+					<IconButton :label="formatMessage(messages.browseAppDirectory)"
+							v-tooltip="formatMessage(messages.browseAppDirectory)"
+							class="ml-1.5"
+							@click="findLauncherDir"
+						>
+						<FolderSearchIcon aria-hidden="true" />
+					</IconButton>
+				</template>
+			</StyledInput>
+			<p class="m-0 leading-tight text-secondary">
+				{{ formatMessage(messages.appDirectoryDescription) }}
+			</p>
+		</div>
+
+		<div class="flex items-center justify-between gap-4">
+			<div>
+				<h2 class="m-0 text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.alwaysShowCopyDetailsTitle) }}
+				</h2>
+				<p class="m-0 mt-1">
+					{{ formatMessage(messages.alwaysShowCopyDetailsDescription) }}
+				</p>
+			</div>
+			<Toggle
+				id="always-show-copy-details"
+				:model-value="themeStore.getFeatureFlag(alwaysShowCopyDetailsFlag)"
+				@update:model-value="
+					() => {
+						const newValue = !themeStore.getFeatureFlag(alwaysShowCopyDetailsFlag)
+						themeStore.featureFlags[alwaysShowCopyDetailsFlag] = newValue
+						settings.feature_flags[alwaysShowCopyDetailsFlag] = newValue
+					}
+				"
+			/>
+		</div>
+
+		<div class="flex flex-col gap-2.5">
+			<ConfirmModalWrapper
+				ref="purgeCacheConfirmModal"
+				:title="formatMessage(messages.purgeCacheConfirmTitle)"
+				:description="formatMessage(messages.purgeCacheConfirmDescription)"
+				:has-to-type="false"
+				:proceed-label="formatMessage(messages.purgeCache)"
+				:show-ad-on-close="false"
+				@proceed="purgeCache"
+			/>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.appCacheTitle) }}
+			</h2>
+			<button id="purge-cache" class="btn min-w-max" @click="handlePurgeCacheClick">
+				<TrashIcon aria-hidden="true" />
+				{{ formatMessage(messages.purgeCache) }}
+			</button>
+			<p class="m-0 leading-tight text-secondary">
+				{{ formatMessage(messages.appCacheDescription) }}
+			</p>
+		</div>
+
+		<div class="flex flex-col gap-2.5">
+			<h2 class="m-0 text-lg font-semibold text-contrast mt-4">
+				{{ formatMessage(messages.maximumConcurrentDownloadsTitle) }}
+			</h2>
+			<Slider
+				id="max-downloads"
+				v-model="settings.max_concurrent_downloads"
+				:min="1"
+				:max="10"
+				:step="1"
+			/>
+			<p class="m-0 leading-tight text-secondary">
+				{{ formatMessage(messages.maximumConcurrentDownloadsDescription) }}
+			</p>
+		</div>
+
+		<div class="flex flex-col gap-2.5">
+			<h2 class="mt-0 m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.maximumConcurrentWritesTitle) }}
+			</h2>
+			<Slider
+				id="max-writes"
+				v-model="settings.max_concurrent_writes"
+				:min="1"
+				:max="50"
+				:step="1"
+			/>
+			<p class="m-0 leading-tight text-secondary">
+				{{ formatMessage(messages.maximumConcurrentWritesDescription) }}
+			</p>
+		</div>
+
+		<div class="flex flex-col gap-2.5">
+			<h2 class="mt-0 m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.appDatabaseBackupsTitle) }}
+			</h2>
+			<button id="open-db-backups-folder" class="btn min-w-max" @click="openDbBackupsFolder">
+				<FolderOpenIcon aria-hidden="true" />
+				{{ formatMessage(messages.openBackupsFolder) }}
+			</button>
+			<p class="m-0 leading-tight text-secondary">
+				{{ formatMessage(messages.appDatabaseBackupsDescription) }}
+			</p>
+		</div>
+	</div>
+</template>
@@ -0,0 +1,78 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.header)" fade="danger" max-width="500px">
+		<Admonition type="critical" :header="formatMessage(messages.admonitionHeader)">
+			<IntlFormatted :message-id="messages.admonitionBody" :values="{ code: inviteCode }">
+				<template #monospace="{ children }">
+					<code class="font-mono"><component :is="() => children" /></code>
+				</template>
+			</IntlFormatted>
+		</Admonition>
+
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="red" @click="confirm">
+					<XIcon />
+					{{ formatMessage(messages.revokeButton) }}
+				</Button>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { Button } from '@modrinth/ui'
+import { XIcon } from '@modrinth/assets'
+import {
+	Admonition,
+	commonMessages,
+	defineMessages,
+	IntlFormatted,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
+import { ref } from 'vue'
+
+const { formatMessage } = useVIntl()
+const modal = ref<InstanceType<typeof NewModal>>()
+const inviteCode = ref('')
+
+const emit = defineEmits<{
+	revoke: [inviteCode: string]
+}>()
+
+function show(code: string) {
+	inviteCode.value = code
+	modal.value?.show()
+}
+
+function confirm() {
+	modal.value?.hide()
+	emit('revoke', inviteCode.value)
+}
+
+const messages = defineMessages({
+	header: {
+		id: 'instance.settings.sharing.revoke-invite.header',
+		defaultMessage: 'Revoke invite',
+	},
+	admonitionHeader: {
+		id: 'instance.settings.sharing.revoke-invite.admonition-header',
+		defaultMessage: 'This action cannot be undone',
+	},
+	admonitionBody: {
+		id: 'instance.settings.sharing.revoke-invite.admonition-body',
+		defaultMessage:
+			'The invite link <monospace>{code}</monospace> will stop working immediately. People who already joined will keep access.',
+	},
+	revokeButton: {
+		id: 'instance.settings.sharing.revoke-invite.confirm',
+		defaultMessage: 'Revoke invite',
+	},
+})
+
+defineExpose({ show })
+</script>
@@ -0,0 +1,94 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.header)" fade="warning" max-width="500px">
+		<p class="m-0 text-secondary">
+			<IntlFormatted :message-id="messages.body" :values="{ instanceName }">
+				<template #bold="{ children }">
+					<span class="font-medium text-contrast"><component :is="() => children" /></span>
+				</template>
+			</IntlFormatted>
+		</p>
+
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<Button type="outlined" @click="handleCancel">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button @click="handleGoToInstance">
+					{{ formatMessage(messages.instance) }}
+					<RightArrowIcon />
+				</Button>
+				<Button type="colored" color="orange" @click="handleInstallAnyway">
+					<DownloadIcon />
+					{{ formatMessage(messages.installAnyway) }}
+				</Button>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { Button } from '@modrinth/ui'
+import { DownloadIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
+import {
+	commonMessages,
+	defineMessages,
+	IntlFormatted,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
+import { ref } from 'vue'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	header: {
+		id: 'app.instance.shared-instance-already-installed.header',
+		defaultMessage: 'Shared instance already installed',
+	},
+	body: {
+		id: 'app.instance.shared-instance-already-installed.body',
+		defaultMessage:
+			'This shared instance is already installed as <bold>{instanceName}</bold>. Are you sure you want to install another copy?',
+	},
+	instance: {
+		id: 'app.instance.shared-instance-already-installed.instance',
+		defaultMessage: 'Instance',
+	},
+	installAnyway: {
+		id: 'app.instance.shared-instance-already-installed.install-anyway',
+		defaultMessage: 'Install anyway',
+	},
+})
+
+const emit = defineEmits<{
+	(e: 'cancel' | 'go-to-instance' | 'install-anyway'): void
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const instanceName = ref('')
+
+function show(name: string) {
+	instanceName.value = name
+	modal.value?.show()
+}
+
+function handleCancel() {
+	modal.value?.hide()
+	emit('cancel')
+}
+
+function handleGoToInstance() {
+	modal.value?.hide()
+	emit('go-to-instance')
+}
+
+function handleInstallAnyway() {
+	modal.value?.hide()
+	emit('install-anyway')
+}
+
+defineExpose({
+	show,
+})
+</script>
@@ -0,0 +1,176 @@
+<template>
+	<div v-if="canUnpublish" class="flex flex-col gap-2.5">
+		<span class="text-lg font-semibold text-contrast">{{ formatMessage(messages.title) }}</span>
+		<div>
+			<Button type="colored" color="orange" :disabled="busy" @click="unpublishModal?.show()">
+				<SpinnerIcon v-if="unpublishing" class="animate-spin" />
+				<UnlinkIcon v-else class="size-5" />
+				{{ formatMessage(unpublishing ? messages.unpublishingButton : messages.unpublishButton) }}
+			</Button>
+		</div>
+		<span class="text-primary">{{ formatMessage(messages.unpublishDescription) }}</span>
+	</div>
+	<div v-if="canUnlink" class="flex flex-col gap-2.5">
+		<span class="text-lg font-semibold text-contrast">{{
+			formatMessage(messages.linkedTitle)
+		}}</span>
+		<div>
+			<Button type="colored" color="orange" :disabled="busy" @click="unlinkModal?.show()">
+				<SpinnerIcon v-if="unlinking" class="animate-spin" />
+				<UnlinkIcon v-else class="size-5" />
+				{{ formatMessage(unlinking ? messages.unlinkingButton : messages.unlinkButton) }}
+			</Button>
+		</div>
+		<span class="text-primary">{{ formatMessage(messages.unlinkDescription) }}</span>
+	</div>
+
+	<NewModal
+		ref="unpublishModal"
+		:header="formatMessage(messages.unpublishModalHeader)"
+		fade="warning"
+		max-width="500px"
+	>
+		<Admonition type="warning" :header="formatMessage(messages.unpublishModalAdmonitionHeader)">{{
+			formatMessage(messages.unpublishModalBody)
+		}}</Admonition>
+		<template #actions
+			><div class="flex justify-end gap-2">
+				<Button type="outlined" class="!border" @click="unpublishModal?.hide()">
+					<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
+				</Button><Button type="colored" color="orange" :disabled="busy" @click="confirmUnpublish">
+					<UnlinkIcon />{{ formatMessage(messages.unpublishButton) }}
+				</Button>
+			</div></template
+		>
+	</NewModal>
+	<NewModal
+		ref="unlinkModal"
+		:header="formatMessage(messages.unlinkModalHeader)"
+		fade="warning"
+		max-width="500px"
+		:on-hide="() => backupCreator?.cancelBackup()"
+	>
+		<div class="flex flex-col gap-6">
+			<Admonition type="warning" :header="formatMessage(messages.unlinkModalAdmonitionHeader)">{{
+				formatMessage(messages.unlinkModalBody)
+			}}</Admonition>
+			<InlineBackupCreator
+				ref="backupCreator"
+				backup-name="Before unlinking shared instance"
+				@update:buttons-disabled="backupBusy = $event"
+			/>
+		</div>
+		<template #actions
+			><div class="flex justify-end gap-2">
+				<Button type="outlined" class="!border" @click="unlinkModal?.hide()">
+					<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
+				</Button><Button type="colored" color="orange" :disabled="busy || backupBusy" @click="confirmUnlink">
+					<UnlinkIcon />{{ formatMessage(messages.unlinkButton) }}
+				</Button>
+			</div></template
+		>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { Button } from '@modrinth/ui'
+import { SpinnerIcon, UnlinkIcon, XIcon } from '@modrinth/assets'
+import { Admonition, commonMessages, defineMessages, InlineBackupCreator, NewModal, useVIntl } from '@modrinth/ui'
+import { ref } from 'vue'
+
+const props = withDefaults(
+	defineProps<{
+		canUnpublish?: boolean
+		canUnlink?: boolean
+		busy: boolean
+		unpublishing?: boolean
+		unlinking?: boolean
+		unpublish?: () => Promise<void>
+		unlink?: () => Promise<void>
+	}>(),
+	{
+		canUnpublish: false,
+		canUnlink: false,
+		unpublishing: false,
+		unlinking: false,
+		unpublish: undefined,
+		unlink: undefined,
+	},
+)
+const { formatMessage } = useVIntl()
+const unpublishModal = ref<InstanceType<typeof NewModal>>()
+const unlinkModal = ref<InstanceType<typeof NewModal>>()
+const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
+const backupBusy = ref(false)
+
+async function confirmUnpublish() {
+	unpublishModal.value?.hide()
+	await props.unpublish?.()
+}
+async function confirmUnlink() {
+	unlinkModal.value?.hide()
+	await props.unlink?.()
+}
+
+const messages = defineMessages({
+	title: {
+		id: 'installation-settings.shared-instance.title',
+		defaultMessage: 'Unpublish instance',
+	},
+	linkedTitle: {
+		id: 'installation-settings.shared-instance.linked-title',
+		defaultMessage: 'Linked shared instance',
+	},
+	unpublishButton: {
+		id: 'installation-settings.shared-instance.unpublish-button',
+		defaultMessage: 'Unpublish shared instance',
+	},
+	unpublishingButton: {
+		id: 'installation-settings.shared-instance.unpublishing-button',
+		defaultMessage: 'Unpublishing...',
+	},
+	unpublishDescription: {
+		id: 'installation-settings.shared-instance.unpublish-description',
+		defaultMessage:
+			'Remove this shared instance from Modrinth and stop sending updates to anyone using it. Your local instance will not be affected.',
+	},
+	unlinkButton: {
+		id: 'installation-settings.shared-instance.unlink-button',
+		defaultMessage: 'Unlink shared instance',
+	},
+	unlinkingButton: {
+		id: 'installation-settings.shared-instance.unlinking-button',
+		defaultMessage: 'Unlinking...',
+	},
+	unlinkDescription: {
+		id: 'installation-settings.shared-instance.unlink-description',
+		defaultMessage: 'Disconnect this local instance from future shared updates.',
+	},
+	unpublishModalHeader: {
+		id: 'installation-settings.unpublish-shared-instance.modal.header',
+		defaultMessage: 'Unpublish shared instance',
+	},
+	unpublishModalAdmonitionHeader: {
+		id: 'installation-settings.unpublish-shared-instance.modal.admonition-header',
+		defaultMessage: 'Unpublishing shared instance',
+	},
+	unpublishModalBody: {
+		id: 'installation-settings.unpublish-shared-instance.modal.admonition-body',
+		defaultMessage:
+			"This deletes the shared instance from Modrinth's servers. People using it in the Modrinth App will stop receiving updates, but your local instance and its content will stay on this device.",
+	},
+	unlinkModalHeader: {
+		id: 'installation-settings.unlink-shared-instance.modal.header',
+		defaultMessage: 'Unlink shared instance',
+	},
+	unlinkModalAdmonitionHeader: {
+		id: 'installation-settings.unlink-shared-instance.modal.admonition-header',
+		defaultMessage: 'Unlinking shared instance',
+	},
+	unlinkModalBody: {
+		id: 'installation-settings.unlink-shared-instance.modal.admonition-body',
+		defaultMessage:
+			'This only affects your local instance. Your installed content will stay on this device, and the shared instance and other people using it will not be affected.',
+	},
+})
+</script>
--- a/Show More
+++ b/Show More