Revert "Changelog"

This reverts commit 0c1c7e2fe8.
Changelog
2026-08-01 21:55:54 +00:00 · 2026-03-24 16:36:42 -04:00 · 2026-03-24 16:33:09 -04:00 · 2026-03-24 16:28:37 -04:00
1349 changed files with 47019 additions and 160032 deletions
@@ -22,5 +22,4 @@ Refer to the standards: @standards/frontend/CROSS_PLATFORM_PAGES.md and @standar
   - Move the page component into `packages/ui/src/layouts/wrapped/` matching the route structure.
   - Replace any platform-specific imports with shared utilities.
   - Import and render the wrapped page from both frontends as a simple component.
-   - If the layout uses TanStack Query for initial route paint with `ReadyTransition` / `useReadyState`, each platform route shell must call `ensureQueryData` for those queries with matching keys and fetchers — see **Platform route shells: prefetch with `ensureQueryData`** in `standards/frontend/CROSS_PLATFORM_PAGES.md`.
 6. **Verify** the page renders correctly by checking for missing imports and that all DI contracts are satisfied.
@@ -1,36 +0,0 @@
---
-name: review-changelog
-description: Review the latest changelog entry in packages/blog/changelog.ts against the project's changelog style guide and flag bullets that need rewriting. Use when checking a freshly added changelog entry before opening a PR, or when the user asks to review/lint the latest changelog.
-argument-hint: [product?]
---
-
-Refer to the standard: @standards/maintaining/CHANGELOG.md
-
-## Steps
-
-1. **Locate the latest entry:**
-   - Open `packages/blog/changelog.ts`.
-   - The latest entries are at the top of the `VERSIONS` array.
-   - If `$ARGUMENTS` specifies a product (`web`, `hosting`, `app`), review the most recent entry for that product. Otherwise, review the most recent entry overall, plus any sibling entries sharing the same `date` (coordinated releases ship together).
-
-2. **Read the standard above** in full before reviewing. The bullet rules, section/verb agreement, and "Don't" list are the source of truth.
-
-3. **Check the entry shell:**
-   - `date` is a valid ISO 8601 timestamp.
-   - `product` is one of `web`, `hosting`, `app`.
-   - `version` is present for `app` entries and omitted for `web`/`hosting`.
-   - Section headings use `## Added`, `## Changed`, `## Fixed`, `## Security` (or a featured-release linked heading). Flag legacy `## Improvements`.
-
-4. **Review each bullet** against the standard. For each bullet, check:
-   - Voice/tense matches the section heading.
-   - Opening verb agrees with its section.
-   - Describes observable behavior, not implementation.
-   - Specific enough to identify the surface (names the tab/page/modal).
-   - One sentence, ends with a period, sentence case.
-   - Uses branded names (Modrinth App, Modrinth Hosting) correctly.
-   - No filler ("issue with", "issue where", "various", "some"), no vague intensifiers, no apologies, no PR/commit references (unless crediting a third-party contributor with a linked GitHub profile).
-   - Not a duplicate sub-fix of a bigger change already listed.
-
-5. **Report findings** as a short list grouped by entry. For each problem bullet, show the original line and a suggested rewrite. If the entry is clean, say so explicitly. Do not edit the file unless the user asks - this skill is a review pass, not a rewrite pass.
-
-6. **If the user then asks to apply fixes**, edit `packages/blog/changelog.ts` directly using the suggested rewrites. Preserve tab indentation and template literal formatting.
@@ -9,6 +9,8 @@ body:
      options:
        - label: I checked the [existing issues](https://github.com/modrinth/code/issues?q=is%3Aissue) for duplicate feature requests
          required: true
+        - label: I have checked that this feature request is not on our [roadmap](https://roadmap.modrinth.com)
+          required: true
  - type: dropdown
    id: projects
    attributes:
@@ -1,171 +0,0 @@
-# MIT License
-#
-# Copyright (c) 2024 CARIAD SE
-#
-# Permission is hereby granted, free of charge, to any person obtaining a copy
-# of this software and associated documentation files (the "Software"), to deal
-# in the Software without restriction, including without limitation the rights
-# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-# copies of the Software, and to permit persons to whom the Software is
-# furnished to do so, subject to the following conditions:
-#
-# The above copyright notice and this permission notice shall be included in all
-# copies or substantial portions of the Software.
-#
-# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-# SOFTWARE.
-
-name: 'Merge Queue CI Check Skipper'
-description: 'Outputs `skip-check` as `true` if this is running as part of merge queue checks and the same checks have already been executed in the PR itself.'
-inputs:
-  secret:
-    description: 'Optional GitHub Secret that can access branch protection rules using the administration:read permission'
-    required: false
-outputs:
-  skip-check:
-    description: 'Skip Check (boolean)'
-    value: ${{ steps.passed-checks.outputs.can-skip-checks }}
-runs:
-  using: 'composite'
-  steps:
-    - name: Checkout code
-      uses: actions/checkout@v4
-      with:
-        fetch-depth: 0
-
-    - name: Extract PR Number and Commit ID
-      id: extract-pr-info
-      uses: actions/github-script@v7
-      with:
-        script: |
-          const githubRef = process.env.GITHUB_REF;
-          const regex = /^refs\/heads\/gh-readonly-queue\/([a-zA-Z0-9.\-_\/]+)\/pr-(\d+)-([a-f0-9]+)$/;
-
-          if (regex.test(githubRef)) {
-            const [, targetBranchName, prNumber, commitId] = githubRef.match(regex);
-            core.setOutput('targetBranchName', targetBranchName);
-            core.setOutput('prNumber', prNumber);
-            core.setOutput('commitId', commitId);
-          } else {
-            console.log(`GITHUB_REF is not a merge queue ref, setting CAN_SKIP_CHECKS to false: ${githubRef}`);
-            core.exportVariable('CAN_SKIP_CHECKS', 'false');
-          }
-
-    - name: Print PR Number and Target Commit ID
-      if: env.CAN_SKIP_CHECKS != 'false'
-      shell: bash
-      run: |
-        echo "Target Branch Name: ${{ steps.extract-pr-info.outputs.targetBranchName }}"
-        echo "PR Number: ${{ steps.extract-pr-info.outputs.prNumber }}"
-        echo "Target Commit ID: ${{ steps.extract-pr-info.outputs.commitId }}"
-
-    - name: Check if merge queue entry was enqueued as head of the queue
-      if: env.CAN_SKIP_CHECKS != 'false'
-      shell: bash
-      run: |
-        targetBranchHead=$(git rev-parse origin/${{ steps.extract-pr-info.outputs.targetBranchName }})
-        if [[ "$targetBranchHead" != "${{ steps.extract-pr-info.outputs.commitId }}" ]]; then
-          echo "'${{ steps.extract-pr-info.outputs.targetBranchName }}' branch commit ID does not match PR commit ID. This Merge Queue run was not head of the queue when it was enqueued. Setting CAN_SKIP_CHECKS to false."
-          echo "CAN_SKIP_CHECKS=false" >> "$GITHUB_ENV"
-        else
-          echo "This merge queue entry is targeting '${{ steps.extract-pr-info.outputs.targetBranchName }}' directly."
-        fi
-
-    - name: Get PR Branch
-      id: get-pr-branch
-      if: env.CAN_SKIP_CHECKS != 'false'
-      shell: bash
-      env:
-        GH_TOKEN: ${{ github.token }}
-      run: |
-        prNumber=${{ steps.extract-pr-info.outputs.prNumber }}
-        branchName=$(gh pr view ${prNumber} --json headRefName -q '.headRefName')
-        echo "prBranch=$branchName" >> "$GITHUB_OUTPUT"
-
-    - name: Print PR Branch
-      if: env.CAN_SKIP_CHECKS != 'false'
-      shell: bash
-      run: |
-        echo "PR Branch: ${{ steps.get-pr-branch.outputs.prBranch }}"
-
-    - name: Check if PR branch contains the Merge Queue target commit ID
-      if: env.CAN_SKIP_CHECKS != 'false'
-      shell: bash
-      run: |
-        # Get the branch name from previous steps
-        branch_name="origin/${{ steps.get-pr-branch.outputs.prBranch }}"
-        commit_id="${{ steps.extract-pr-info.outputs.commitId }}"
-
-        # Check if the branch history contains the commit
-        if git branch -r --contains "$commit_id" | grep -q "$branch_name"; then
-          echo "Branch '$branch_name' contains commit '$commit_id'. It is up to date with ${{ steps.extract-pr-info.outputs.targetBranchName }}."
-        else
-          echo "Branch '$branch_name' does not contain commit '$commit_id'. It is outdated. Setting CAN_SKIP_CHECKS to false."
-          echo "CAN_SKIP_CHECKS=false" >> "$GITHUB_ENV"
-        fi
-
-    - name: Compare PR Branch with Current Branch
-      if: env.CAN_SKIP_CHECKS != 'false'
-      shell: bash
-      run: |
-        if git diff --quiet "origin/${{ steps.get-pr-branch.outputs.prBranch }}"; then
-          echo "No differences found. PR branch is identical with this merge queue branch."
-        else
-          echo "Differences detected. PR branch has been updated after PR was added to merge queue. Setting CAN_SKIP_CHECKS to false."
-          echo "CAN_SKIP_CHECKS=false" >> "$GITHUB_ENV"
-        fi
-
-    - name: Compute/publish skip result
-      id: passed-checks
-      uses: actions/github-script@v7
-      env:
-        SECRET: ${{ inputs.secret }}
-      with:
-        github-token: ${{ inputs.secret != '' && inputs.secret || github.token }}
-        script: |
-          if (process.env.CAN_SKIP_CHECKS == "false") {
-            console.log("Setting CAN_SKIP_CHECKS to false");
-            core.setOutput("can-skip-checks", false);
-            return;
-          }
-
-          const secretProvided = !!process.env.SECRET;
-          if (!secretProvided) {
-            console.log("secret input not set, assuming all checks have passed. Ensure 'Require status checks to pass before merging' is enabled, or provide a secret with administration:read.");
-            core.setOutput("can-skip-checks", true);
-            return;
-          }
-
-          const { data: branchProtection } = await github.rest.repos.getBranchProtection({
-            owner: context.repo.owner,
-            repo: context.repo.repo,
-            branch: "${{ steps.extract-pr-info.outputs.targetBranchName }}",
-          });
-          const requiredCheckNames = branchProtection.required_status_checks.contexts;
-          console.log(`requiredCheckNames = ${requiredCheckNames}`);
-
-          const { data: checks } = await github.rest.checks.listForRef({
-            owner: context.repo.owner,
-            repo: context.repo.repo,
-            ref: "refs/heads/${{ steps.get-pr-branch.outputs.prBranch }}",
-          });
-
-          console.log(`checks.check_runs = ${checks.check_runs.map(check => `${check.status},${check.conclusion},${check.name};`)}`);
-          const nonSuccessfulChecks = checks.check_runs.filter(check => check.status !== "completed" || check.conclusion !== "success");
-          const nonSuccessfulCheckNames = nonSuccessfulChecks.map(check => check.name);
-          console.log(`nonSuccessfulCheckNames = ${nonSuccessfulCheckNames}`);
-
-          const missingChecks = requiredCheckNames.filter(checkName => nonSuccessfulCheckNames.includes(checkName));
-
-          if (missingChecks.length > 0) {
-            console.log(`Required checks not passed, cannot skip merge queue checks. Setting CAN_SKIP_CHECKS to false. Missing checks: ${missingChecks.join(', ')}`);
-            core.setOutput("can-skip-checks", false);
-          } else {
-            console.log("No missing checks. Setting CAN_SKIP_CHECKS to true.");
-            core.setOutput("can-skip-checks", true);
-          }
@@ -1,125 +0,0 @@
-name: API client release
-
-on:
-  push:
-    branches: [main]
-    paths:
-      - .github/workflows/api-client-release.yml
-      - packages/api-client/**
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: false
-
-permissions:
-  contents: read
-  id-token: write
-
-jobs:
-  release:
-    if: github.repository_owner == 'modrinth' && github.ref == 'refs/heads/main'
-    # npm Trusted Publishing requires a GitHub-hosted runner.
-    runs-on: ubuntu-latest
-    env:
-      FORCE_COLOR: 3
-      PACKAGE_DIR: packages/api-client
-      PACKAGE_NAME: '@modrinth/api-client'
-      BUMP_TYPE: minor
-    steps:
-      - name: Check out code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          fetch-depth: 0
-
-      - name: Check for api-client changes
-        id: changes
-        run: |
-          if [ "${{ github.event.before }}" = "0000000000000000000000000000000000000000" ]; then
-            echo "changed=true" >> "$GITHUB_OUTPUT"
-            exit 0
-          fi
-
-          if git diff --quiet "${{ github.event.before }}" "$GITHUB_SHA" -- "$PACKAGE_DIR"; then
-            echo "changed=false" >> "$GITHUB_OUTPUT"
-          else
-            echo "changed=true" >> "$GITHUB_OUTPUT"
-          fi
-
-      - name: Setup Node
-        if: steps.changes.outputs.changed == 'true'
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: .nvmrc
-          registry-url: https://registry.npmjs.org
-
-      - name: Enable Corepack
-        if: steps.changes.outputs.changed == 'true'
-        run: corepack enable
-
-      - name: Get pnpm store path
-        if: steps.changes.outputs.changed == 'true'
-        id: pnpm-store
-        run: echo "store-path=$(pnpm store path --silent)" >> "$GITHUB_OUTPUT"
-
-      - name: Restore pnpm cache
-        if: steps.changes.outputs.changed == 'true'
-        uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
-        with:
-          path: ${{ steps.pnpm-store.outputs.store-path }}
-          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            pnpm-cache-
-
-      - name: Install dependencies
-        if: steps.changes.outputs.changed == 'true'
-        run: pnpm install --frozen-lockfile --filter @modrinth/api-client...
-
-      - name: Resolve release version
-        if: steps.changes.outputs.changed == 'true'
-        id: version
-        run: |
-          CURRENT_VERSION_JSON="$(npm view "${PACKAGE_NAME}" version --json)"
-          CURRENT_VERSION="$(
-            jq -nr \
-              --argjson version "$CURRENT_VERSION_JSON" \
-              'if ($version | type) == "array" then $version[-1] else $version end'
-          )"
-
-          NEXT_VERSION="$(
-            jq -nr \
-              --arg version "$CURRENT_VERSION" \
-              --arg bump "$BUMP_TYPE" '
-                def semver:
-                  capture("^(?<major>[0-9]+)\\.(?<minor>[0-9]+)\\.(?<patch>[0-9]+)$")
-                  | with_entries(.value |= tonumber);
-
-                ($version | semver) as $current
-                | if $bump == "major" then "\($current.major + 1).0.0"
-                  elif $bump == "minor" then "\($current.major).\($current.minor + 1).0"
-                  elif $bump == "patch" then "\($current.major).\($current.minor).\($current.patch + 1)"
-                  else error("Unsupported bump type: \($bump)")
-                  end
-              '
-          )"
-
-          PACKAGE_JSON="$(mktemp)"
-          jq --tab --arg version "$NEXT_VERSION" '.version = $version' "$PACKAGE_DIR/package.json" > "$PACKAGE_JSON"
-          mv "$PACKAGE_JSON" "$PACKAGE_DIR/package.json"
-
-          echo "current_version=$CURRENT_VERSION" >> "$GITHUB_OUTPUT"
-          echo "published_version=$CURRENT_VERSION" >> "$GITHUB_OUTPUT"
-          echo "version=$NEXT_VERSION" >> "$GITHUB_OUTPUT"
-
-      - name: Build api-client
-        if: steps.changes.outputs.changed == 'true'
-        run: pnpm --filter @modrinth/api-client build
-
-      - name: Check package contents
-        if: steps.changes.outputs.changed == 'true'
-        working-directory: packages/api-client
-        run: pnpm pack --dry-run
-
-      - name: Publish api-client
-        if: steps.changes.outputs.changed == 'true'
-        working-directory: packages/api-client
-        run: pnpm publish --access public --provenance --no-git-checks
@@ -1,22 +0,0 @@
-name: Cancel PR Workflows on Merge
-
-on:
-  pull_request_target:
-    types:
-      - closed
-
-permissions:
-  actions: write
-
-jobs:
-  cancel:
-    if: github.event.pull_request.merged == true
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@85880fa0301c86cca9da44039ee3bb12d3bedbfa # 0.12.1
-        with:
-          workflow_id: all
-          access_token: ${{ secrets.GITHUB_TOKEN }}
-          ignore_sha: true
-          pr_number: ${{ github.event.pull_request.number }}
@@ -1,7 +1,7 @@
 name: Changelog Comment

 on:
-  pull_request_target:
+  pull_request:
    types: [opened, reopened]
  workflow_dispatch:
    inputs:
@@ -16,8 +16,8 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-      - name: Post or update changelog comment
-        uses: actions/github-script@d746ffe35508b1917358783b479e04febd2b8f71 # v9.0.0
+      - name: 💬 Post or update changelog comment
+        uses: actions/github-script@v7
        with:
          github-token: ${{ secrets.CROWDIN_GH_TOKEN }}
          script: |
@@ -2,7 +2,7 @@ on:
  pull_request:
  push:
    branches:
-      - main
+      - master

 env:
  CARGO_TERM_COLOR: always
@@ -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@v4
+      - uses: crate-ci/typos@v1.43.1

  # 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@v4
+      - uses: taiki-e/install-action@v2
        with:
          tool: tombi
      - run: tombi lint
@@ -2,7 +2,7 @@ on:
  pull_request:
  push:
    branches:
-      - main
+      - master

 env:
  CARGO_TERM_COLOR: always
@@ -12,8 +12,8 @@ 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@v4
+      - uses: dtolnay/rust-toolchain@stable
+      - uses: cargo-bins/cargo-binstall@main
      - run: cargo binstall --no-confirm cargo-shear
      - run: cargo shear
@@ -3,133 +3,33 @@ name: daedalus-docker-build
 on:
  push:
    branches:
-      - 'main'
+      - '**'
    paths:
      - .github/workflows/daedalus-docker.yml
      - 'apps/daedalus_client/**'
      - 'packages/daedalus/**'
-      - Cargo.toml
-      - Cargo.lock
  pull_request:
    types: [opened, synchronize]
    paths:
      - .github/workflows/daedalus-docker.yml
      - 'apps/daedalus_client/**'
      - 'packages/daedalus/**'
-      - Cargo.toml
-      - Cargo.lock
  merge_group:
    types: [checks_requested]

-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
-
 jobs:
-  skip-if-clean:
-    name: Skip if merge_queue produces no diff
-    runs-on: ubuntu-latest
-    outputs:
-      skip: ${{ steps.check.outputs.skip }}
-      internal: ${{ steps.check-internal.outputs.internal }}
-    if: ${{ always() }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-
-      - name: Check if workflow runs on an internal branch
-        id: check-internal
-        env:
-          EVENT_NAME: ${{ github.event_name }}
-          HEAD_REPO: ${{ github.event.pull_request.head.repo.full_name }}
-          REPO: ${{ github.repository }}
-        run: |
-          if [ "$EVENT_NAME" != "pull_request" ] || [ "$HEAD_REPO" = "$REPO" ]; then
-            echo "internal=true" >> $GITHUB_OUTPUT
-          else
-            echo "internal=false" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Merge Queue CI Check Skipper
-        id: merge-queue-ci-skipper
-        uses: ./.github/merge-queue-ci-skipper
-        with:
-          secret: ${{ secrets.GH_ACCESS_TOKEN }}
-
-      - name: Check merge_group synthetic commit
-        id: check
-        run: |
-          # PR mode: never skip
-          if [ "${{ github.event_name }}" != "merge_group" ]; then
-            echo "skip=false" >> $GITHUB_OUTPUT
-            exit 0
-          fi
-
-          if [ "${{ steps.merge-queue-ci-skipper.outputs.skip-check }}" = "true" ]; then
-            echo "skip=true" >> $GITHUB_OUTPUT
-          else
-            echo "skip=false" >> $GITHUB_OUTPUT
-          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' || '' }}
-    needs: [skip-if-clean]
-    if: ${{ needs.skip-if-clean.outputs.skip != 'true' }}
+    runs-on: ubuntu-latest
    steps:
-      - name: Check out code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - name: 📥 Check out code
+        uses: actions/checkout@v4

-      - name: Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
-        with:
-          rustflags: ''
-          cache: false
+      - name: 🧰 Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2

-      - 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: Build daedalus_client
-        run: cargo build --release --package daedalus_client
-
-      - name: Stage Docker context
-        run: |
-          mkdir -p apps/daedalus_client/docker-stage
-          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
-
-      - name: Generate Docker image metadata
-        id: docker-meta
-        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf # v6.0.0
+      - name: ⚙️ Generate Docker image metadata
+        id: docker_meta
+        uses: docker/metadata-action@v5
        env:
          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
        with:
@@ -143,19 +43,20 @@ jobs:
            org.opencontainers.image.description=Modrinth game metadata query client
            org.opencontainers.image.licenses=MIT

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

-      - name: Build and push
-        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
+      - name: 🔨 Build and push
+        uses: docker/build-push-action@v6
        with:
-          context: ./apps/daedalus_client/docker-stage
          file: ./apps/daedalus_client/Dockerfile
          push: ${{ github.event_name != 'pull_request' }}
-          tags: ${{ steps.docker-meta.outputs.tags }}
-          labels: ${{ steps.docker-meta.outputs.labels }}
-          annotations: ${{ steps.docker-meta.outputs.annotations }}
+          tags: ${{ steps.docker_meta.outputs.tags }}
+          labels: ${{ steps.docker_meta.outputs.labels }}
+          annotations: ${{ steps.docker_meta.outputs.annotations }}
+          cache-from: type=registry,ref=ghcr.io/modrinth/daedalus:main
+          cache-to: type=inline
@@ -12,10 +12,10 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@v3

      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@v2
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
@@ -21,20 +21,16 @@ on:
        type: string
        description: 'The environment to deploy to (staging-preview or production-preview)'

-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}-${{ inputs.environment || 'push' }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
-
 jobs:
  deploy:
-    runs-on: blacksmith-2vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write
      pull-requests: write
    steps:
      - name: Checkout code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@v4
        with:
          fetch-depth: 0

@@ -67,25 +63,14 @@ jobs:
            echo "url=https://modrinth.com" >> $GITHUB_OUTPUT
          fi

+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@v4
        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
-        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: Inject build variables
        working-directory: ./apps/frontend
@@ -114,7 +99,7 @@ jobs:
          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@v3
        env:
          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
          SENTRY_ORG: modrinth
@@ -126,7 +111,7 @@ jobs:

      - name: Deploy Cloudflare Worker
        id: wrangler
-        uses: cloudflare/wrangler-action@9acf94ace14e7dc412b076f2c5c20b8ce93c79cd # v3.15.0
+        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}
          accountId: ${{ secrets.CF_ACCOUNT_ID }}
@@ -152,7 +137,7 @@ jobs:

      - name: Upload deployment URL
        if: ${{ inputs.environment != '' }}
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@v6
        with:
          name: deployment-url-${{ inputs.environment }}
          path: deployment-url-${{ inputs.environment }}.txt
@@ -16,77 +16,19 @@ jobs:
    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
    uses: ./.github/workflows/frontend-deploy.yml
    secrets: inherit
-    concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}-${{ matrix.environment }}
-      cancel-in-progress: true
    strategy:
      matrix:
        environment: [staging-preview, production-preview]
    with:
      environment: ${{ matrix.environment }}

-  deploy-storybook:
-    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
-    runs-on: blacksmith-2vcpu-ubuntu-2404
-    concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}-storybook
-      cancel-in-progress: true
-    permissions:
-      contents: read
-      deployments: write
-    steps:
-      - name: Checkout code
-        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: Restore pnpm cache
-        uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
-        with:
-          path: ${{ steps.pnpm-store.outputs.store-path }}
-          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            pnpm-cache-
-
-      - name: Install dependencies
-        working-directory: ./packages/ui
-        run: pnpm install
-
-      - name: Build Storybook
-        working-directory: ./packages/ui
-        run: pnpm run build-storybook
-
-      - name: Configure short SHA
-        id: meta
-        run: echo "sha_short=${GITHUB_SHA::8}" >> $GITHUB_OUTPUT
-
-      - name: Deploy Storybook preview
-        uses: cloudflare/wrangler-action@9acf94ace14e7dc412b076f2c5c20b8ce93c79cd # v3.15.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 }}
-
  comment:
    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
    runs-on: ubuntu-latest
-    needs: [deploy, deploy-storybook]
+    needs: deploy
    steps:
      - name: Download deployment URLs
-        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        uses: actions/download-artifact@v7
        with:
          pattern: deployment-url-*
          merge-multiple: true
@@ -102,11 +44,10 @@ jobs:

          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

      - name: Find comment
        if: github.event_name == 'pull_request'
-        uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad # v4.0.0
+        uses: peter-evans/find-comment@v3
        id: fc
        with:
          token: ${{ secrets.CROWDIN_GH_TOKEN }}
@@ -115,7 +56,7 @@ jobs:

      - name: Comment deploy URL on PR
        if: github.event_name == 'pull_request'
-        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9 # v5.0.0
+        uses: peter-evans/create-or-update-comment@v5
        with:
          token: ${{ secrets.CROWDIN_GH_TOKEN }}
          issue-number: ${{ github.event.pull_request.number }}
@@ -129,5 +70,4 @@ jobs:
            |-------------|-----|
            | staging     | ${{ steps.urls.outputs.staging-preview-url }} |
            | production  | ${{ steps.urls.outputs.production-preview-url }} |
-            | storybook   | ${{ steps.urls.outputs.storybook-preview-url }} |
          edit-mode: replace
@@ -51,25 +51,14 @@ jobs:
          CROWDIN_GH_TOKEN_DEFINED: ${{ secrets.CROWDIN_GH_TOKEN != '' }}

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

-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: .nvmrc
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Install script dependencies
-        run: pnpm install --frozen-lockfile --ignore-scripts
-
      - name: Configure Git author
        id: git-author
-        uses: MarcoIeni/git-config@59144859caf016f8b817a2ac9b051578729173c4 # v0.1.2
+        uses: MarcoIeni/git-config@v0.1
        env:
          GITHUB_TOKEN: ${{ secrets.CROWDIN_GH_TOKEN }}

@@ -90,7 +79,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@v2
        with:
          upload_sources: false
          upload_translations: false
@@ -106,11 +95,8 @@ jobs:
        shell: bash
        run: sudo chown -R $USER:$USER .

-      - name: Prune stale ICU translations
-        run: pnpm scripts i18n-icu-contract prune-local
-
      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
+        uses: peter-evans/create-pull-request@v7
        with:
          title: 'New translations from Crowdin (${{ steps.branch-name.outputs.branch_name }})'
          body-path: .github/templates/crowdin-pr.md
@@ -4,14 +4,11 @@ on:
  push:
    branches: ['main']
    paths:
-      - '.github/workflows/i18n-push.yml'
+      - '.github/workflows/i18n.push.yml'
      - 'apps/*/src/locales/en-US/**'
      - 'apps/*/locales/en-US/**'
      - 'packages/*/src/locales/en-US/**'
      - 'packages/*/locales/en-US/**'
-      - 'scripts/i18n-icu-contract.ts'
-      - 'package.json'
-      - 'pnpm-lock.yaml'
      - 'crowdin.yml'
  workflow_dispatch:

@@ -56,21 +53,9 @@ jobs:
          CROWDIN_PERSONAL_TOKEN_DEFINED: ${{ secrets.CROWDIN_PERSONAL_TOKEN != '' }}

      - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@v4
        with:
          ref: ${{ github.ref }}
-          fetch-depth: 2
-
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: .nvmrc
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Install script dependencies
-        run: pnpm install --frozen-lockfile --ignore-scripts

      - name: Query branch name
        id: branch-name
@@ -83,7 +68,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@v1
        with:
          upload_sources: true
          upload_translations: false
@@ -94,9 +79,3 @@ jobs:
        env:
          CROWDIN_PROJECT_ID: ${{ vars.CROWDIN_PROJECT_ID }}
          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
-
-      - name: Clear stale ICU translations in Crowdin
-        run: pnpm scripts i18n-icu-contract clear-crowdin-changed --base-ref HEAD^ --crowdin-branch "[${{ github.repository_owner }}.${{ github.event.repository.name }}] ${{ steps.branch-name.outputs.safe_branch_name }}"
-        env:
-          CROWDIN_PROJECT_ID: ${{ vars.CROWDIN_PROJECT_ID }}
-          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
@@ -3,7 +3,7 @@ name: docker-build
 on:
  push:
    branches:
-      - 'main'
+      - '**'
    paths:
      - .github/workflows/labrinth-docker.yml
      - 'apps/labrinth/**'
@@ -19,122 +19,19 @@ on:
  merge_group:
    types: [checks_requested]

-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
-
 jobs:
-  skip-if-clean:
-    name: Skip if merge_queue produces no diff
-    runs-on: ubuntu-latest
-    outputs:
-      skip: ${{ steps.check.outputs.skip }}
-      internal: ${{ steps.check-internal.outputs.internal }}
-    if: ${{ always() }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-
-      - name: Check if workflow runs on an internal branch
-        id: check-internal
-        env:
-          EVENT_NAME: ${{ github.event_name }}
-          HEAD_REPO: ${{ github.event.pull_request.head.repo.full_name }}
-          REPO: ${{ github.repository }}
-        run: |
-          if [ "$EVENT_NAME" != "pull_request" ] || [ "$HEAD_REPO" = "$REPO" ]; then
-            echo "internal=true" >> $GITHUB_OUTPUT
-          else
-            echo "internal=false" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Merge Queue CI Check Skipper
-        id: merge-queue-ci-skipper
-        uses: ./.github/merge-queue-ci-skipper
-        with:
-          secret: ${{ secrets.GH_ACCESS_TOKEN }}
-
-      - name: Check merge_group synthetic commit
-        id: check
-        run: |
-          # PR mode: never skip
-          if [ "${{ github.event_name }}" != "merge_group" ]; then
-            echo "skip=false" >> $GITHUB_OUTPUT
-            exit 0
-          fi
-
-          if [ "${{ steps.merge-queue-ci-skipper.outputs.skip-check }}" = "true" ]; then
-            echo "skip=true" >> $GITHUB_OUTPUT
-          else
-            echo "skip=false" >> $GITHUB_OUTPUT
-          fi
-
  docker:
-    runs-on: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'blacksmith-4vcpu-ubuntu-2404' || '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 }}
-      RUSTC_WRAPPER: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'sccache' || '' }}
+    runs-on: ubuntu-latest
    steps:
-      - name: Check out code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - name: 📥 Check out code
+        uses: actions/checkout@v4

-      - name: Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
-        with:
-          rustflags: ''
-          cache: false
+      - name: 🧰 Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2

-      - 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: Build labrinth
-        run: cargo build --profile release-labrinth --package labrinth
-
-      - name: Stage Docker context
-        run: |
-          mkdir -p apps/labrinth/docker-stage
-          cp target/release-labrinth/labrinth apps/labrinth/docker-stage/labrinth
-          cp -r apps/labrinth/migrations apps/labrinth/docker-stage/migrations
-          cp -r apps/labrinth/assets apps/labrinth/docker-stage/assets
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4.0.0
-
-      - name: Generate Docker image metadata
-        id: docker-meta
-        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf # v6.0.0
+      - name: ⚙️ Generate Docker image metadata
+        id: docker_meta
+        uses: docker/metadata-action@v5
        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
@@ -152,19 +49,22 @@ jobs:
            org.opencontainers.image.description=Modrinth API
            org.opencontainers.image.licenses=AGPL-3.0-only

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

-      - name: Build and push
-        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
+      - name: 🔨 Build and push
+        uses: docker/build-push-action@v6
        with:
-          context: ./apps/labrinth/docker-stage
          file: ./apps/labrinth/Dockerfile
-          push: true
-          tags: ${{ steps.docker-meta.outputs.tags }}
-          labels: ${{ steps.docker-meta.outputs.labels }}
-          annotations: ${{ steps.docker-meta.outputs.annotations }}
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.docker_meta.outputs.tags }}
+          labels: ${{ steps.docker_meta.outputs.labels }}
+          annotations: ${{ steps.docker_meta.outputs.annotations }}
+          build-args: |
+            GIT_HASH=${{ fromJSON(steps.docker_meta.outputs.json).labels['org.opencontainers.image.revision'] }}
+          cache-from: type=registry,ref=ghcr.io/modrinth/labrinth:main
+          cache-to: type=inline
@@ -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
@@ -27,70 +27,46 @@ on:
        options:
          - prod
          - staging
-          - prod-with-staging-archon
        default: prod
        required: false

-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
-
 jobs:
  build:
    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: [macos-latest, windows-latest, ubuntu-latest]
        include:
-          - platform: blacksmith-6vcpu-macos-26
+          - platform: macos-latest
            artifact-target-name: universal-apple-darwin
-          - platform: blacksmith-8vcpu-windows-2025
+          - platform: windows-latest
            artifact-target-name: x86_64-pc-windows-msvc
-          - platform: blacksmith-4vcpu-ubuntu-2404
+          - platform: ubuntu-latest
            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@v4
        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@v1
        with:
          rustflags: ''
-          target: ${{ contains(matrix.platform, 'macos') && 'x86_64-apple-darwin' || '' }}
+          target: ${{ startsWith(matrix.platform, 'macos') && 'x86_64-apple-darwin' || '' }}

-      - name: Setup sccache
-        uses: mozilla-actions/sccache-action@9e7fa8a12102821edf02ca5dbea1acd0f89a2696 # v0.0.10
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4

-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
        with:
          node-version-file: .nvmrc
-          cache: 'pnpm'
+          cache: pnpm

      - name: Generate tauri-dev.conf.json
        shell: bash
@@ -108,19 +84,18 @@ jobs:
          EOF

      - name: Install Linux build dependencies
-        if: contains(matrix.platform, 'ubuntu')
-        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
+        if: startsWith(matrix.platform, 'ubuntu')
+        run: |
+          sudo apt-get update
+          sudo apt-get install -yq libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev

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

      - name: Set application version and environment
@@ -137,13 +112,13 @@ 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
+        uses: rharkor/caching-for-turbo@v1.8

      - name: Install dependencies
        run: pnpm install

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

      - 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')
+        if: startsWith(matrix.platform, 'macos')
        env:
-          TAURI_BUNDLER_DMG_IGNORE_CI: 'true'
          ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
@@ -169,7 +143,7 @@ jobs:

      - 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')
+        if: startsWith(matrix.platform, 'ubuntu')
        env:
          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
@@ -181,7 +155,7 @@ jobs:
          $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"' }}
          Remove-Item -Path signer-client-cert.p12 -ErrorAction SilentlyContinue
-        if: contains(matrix.platform, 'windows')
+        if: startsWith(matrix.platform, 'windows')
        env:
          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
@@ -190,7 +164,7 @@ jobs:
          DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD: ${{ secrets.DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD }}

      - name: Upload app bundles
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@v4
        with:
          name: App bundle (${{ matrix.artifact-target-name }})
          path: |
@@ -4,18 +4,14 @@ on:
    workflows: ['Modrinth App build']
    types: [completed]

-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
-
 jobs:
  release:
    name: Release Modrinth App
    if: >-
      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: ubuntu-latest
+
    env:
      VERSION_TAG: ${{ github.event.workflow_run.head_branch }}
      LINUX_X64_BUNDLE_ARTIFACT_NAME: App bundle (x86_64-unknown-linux-gnu)
@@ -24,30 +20,11 @@ jobs:
      LAUNCHER_FILES_BUCKET_BASE_URL: https://launcher-files.modrinth.com

    steps:
-      - name: Check out code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - name: 📥 Check out code
+        uses: actions/checkout@v4

-      - name: Verify ref is a tag
-        env:
-          GH_TOKEN: ${{ github.token }}
-          HEAD_SHA: ${{ github.event.workflow_run.head_sha }}
-        run: |
-          tag_sha=$(gh api "repos/${{ github.repository }}/git/refs/tags/${VERSION_TAG}" --jq '.object.sha' 2>/dev/null || true)
-          if [ -z "$tag_sha" ]; then
-            echo "::error::${VERSION_TAG} is not a git tag in this repo"
-            exit 1
-          fi
-          if [ "$tag_sha" != "$HEAD_SHA" ]; then
-            commit_sha=$(gh api "repos/${{ github.repository }}/git/tags/${tag_sha}" --jq '.object.sha' 2>/dev/null || echo "$tag_sha")
-            if [ "$commit_sha" != "$HEAD_SHA" ]; then
-              echo "::error::Tag ${VERSION_TAG} (${commit_sha}) does not match build head_sha (${HEAD_SHA})"
-              exit 1
-            fi
-          fi
-          echo "Verified ${VERSION_TAG} is a tag pointing at ${HEAD_SHA}"
-
-      - name: Download Modrinth App artifacts
-        uses: dawidd6/action-download-artifact@b6e2e70617bc3265edd6dab6c906732b2f1ae151 # v21
+      - name: 📥 Download Modrinth App artifacts
+        uses: dawidd6/action-download-artifact@v11
        with:
          workflow: theseus-build.yml
          workflow_conclusion: success
@@ -55,17 +32,12 @@ jobs:
          branch: ${{ env.VERSION_TAG }}
          use_unzip: true

-      - name: Extract app changelog
-        env:
-          VERSION: ${{ env.VERSION_TAG }}
-        run: npx --yes tsx scripts/build-theseus-release-notes.ts
-
-      - name: Generate version manifest
+      - name: 🛠️ Generate version manifest
        run: |
          # Reference: https://tauri.app/plugin/updater/#server-support
          jq -nc \
            --arg versionTag "${VERSION_TAG#v}" \
-            --rawfile releaseNotes release-notes.md \
+            --arg releaseNotes "See the full changelog at https://modrinth.com/news/changelog" \
            --rawfile macOsAarch64UpdateArtifactSignature "${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/macos/Modrinth App.app.tar.gz.sig" \
            --rawfile macOsX64UpdateArtifactSignature "${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/macos/Modrinth App.app.tar.gz.sig" \
            --rawfile linuxX64UpdateArtifactSignature "${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/appimage/Modrinth App_${VERSION_TAG#v}_amd64.AppImage.tar.gz.sig" \
@@ -105,7 +77,7 @@ jobs:
          echo "Generated manifest for version ${VERSION_TAG}:"
          cat updates.json

-      - name: Upload release artifacts
+      - name: 📤 Upload release artifacts
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.LAUNCHER_FILES_BUCKET_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.LAUNCHER_FILES_BUCKET_SECRET_ACCESS_KEY }}
@@ -140,7 +112,7 @@ jobs:

          aws s3 cp updates.json "s3://${AWS_BUCKET}"

-      - name: Create GitHub release
+      - name: 🏷️ Create GitHub release
        env:
          GH_TOKEN: ${{ github.token }}
        run: |
@@ -148,7 +120,7 @@ jobs:

          gh release create "$VERSION_TAG" \
            --title "Modrinth App ${VERSION}" \
-            --notes-file release-notes.md \
+            --notes "See the full changelog at https://modrinth.com/news/changelog" \
            "${WINDOWS_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/nsis/Modrinth App_${VERSION}_x64-setup.exe" \
            "${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/dmg/Modrinth App_${VERSION}_universal.dmg" \
            "${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/appimage/Modrinth App_${VERSION}_amd64.AppImage" \
@@ -8,63 +8,10 @@ on:
  merge_group:
    types: [checks_requested]

-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
-
 jobs:
-  skip-if-clean:
-    name: Skip if merge_queue produces no diff
-    runs-on: ubuntu-latest
-    outputs:
-      skip: ${{ steps.check.outputs.skip }}
-      internal: ${{ steps.check-internal.outputs.internal }}
-    if: ${{ always() }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-
-      - name: Check if workflow runs on an internal branch
-        id: check-internal
-        env:
-          EVENT_NAME: ${{ github.event_name }}
-          HEAD_REPO: ${{ github.event.pull_request.head.repo.full_name }}
-          REPO: ${{ github.repository }}
-        run: |
-          if [ "$EVENT_NAME" != "pull_request" ] || [ "$HEAD_REPO" = "$REPO" ]; then
-            echo "internal=true" >> $GITHUB_OUTPUT
-          else
-            echo "internal=false" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Merge Queue CI Check Skipper
-        id: merge-queue-ci-skipper
-        uses: ./.github/merge-queue-ci-skipper
-        with:
-          secret: ${{ secrets.GH_ACCESS_TOKEN }}
-
-      - name: Check merge_group synthetic commit
-        id: check
-        env:
-          EVENT_NAME: ${{ github.event_name }}
-          SKIP_CHECK: ${{ steps.merge-queue-ci-skipper.outputs.skip-check }}
-        run: |
-          if [ "$EVENT_NAME" != "merge_group" ]; then
-            echo "skip=false" >> $GITHUB_OUTPUT
-            exit 0
-          fi
-
-          if [ "$SKIP_CHECK" = "true" ]; then
-            echo "skip=true" >> $GITHUB_OUTPUT
-          else
-            echo "skip=false" >> $GITHUB_OUTPUT
-          fi
-
  build:
    name: Lint and Test
-    runs-on: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'blacksmith-4vcpu-ubuntu-2404' || 'ubuntu-latest' }}
-    needs: [skip-if-clean]
-    if: ${{ needs.skip-if-clean.outputs.skip != 'true' }}
+    runs-on: ubuntu-latest

    env:
      # Ensure pnpm output is colored in GitHub Actions logs
@@ -76,107 +23,59 @@ 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' || '' }}

    steps:
-      - name: Check out code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - name: 📥 Check out code
+        uses: actions/checkout@v4
        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: 🧰 Install build dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -yq libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev

-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      - name: 🧰 Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: 🧰 Setup Node.js
+        uses: actions/setup-node@v4
        with:
          node-version-file: .nvmrc
+          cache: pnpm

-      - 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
-        with:
-          path: ${{ steps.pnpm-store.outputs.store-path }}
-          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            pnpm-cache-
-
-      - name: Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
+      - name: 🧰 Setup Rust toolchain
+        uses: actions-rust-lang/setup-rust-toolchain@v1
        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 binstall
-        uses: cargo-bins/cargo-binstall@dc19f1e48450eefe5a29b8da6c6b00a87d730b37 # v1.18.1
-
-      - name: Setup nextest
-        run: cargo binstall --no-confirm --secure cargo-nextest@0.9.133
+      - name: 🧰 Setup nextest
+        uses: taiki-e/install-action@nextest

      # 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
+      - name: 🧰 Setup cargo-sqlx
+        uses: taiki-e/cache-cargo-install-action@v2
        with:
-          tool: sqlx-cli@0.8.6
+          tool: sqlx-cli
          locked: false
          no-default-features: true
          features: rustls,postgres

-      - name: Setup Turbo cache
-        uses: rharkor/caching-for-turbo@56219402aacc0d06b650d898c222996dbc1191ec # v2.3.14
+      - name: 💨 Setup Turbo cache
+        uses: rharkor/caching-for-turbo@v1.8

-      - name: Install dependencies
+      - name: 🧰 Install dependencies
        run: pnpm install

-      - name: Set app environment
+      - name: ⚙️ Set app environment
        working-directory: packages/app-lib
        run: cp .env.staging .env

      # check if labrinth tests will actually run (cache miss)
-      - name: Check if labrinth tests need to run
+      - name: 🔍 Check if labrinth tests need to run
        id: check-labrinth
        run: |
          LABRINTH_TEST_STATUS=$(pnpm turbo run test --filter=@modrinth/labrinth --dry-run=json | jq -r '.tasks[] | select(.task == "test") | .cache.status')
@@ -187,22 +86,21 @@ jobs:
            echo "needs_services=true" >> $GITHUB_OUTPUT
          fi

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

-      - name: Setup labrinth environment and database
+      - name: ⚙️ Setup labrinth environment and database
        if: steps.check-labrinth.outputs.needs_services == 'true'
        working-directory: apps/labrinth
        run: |
          cp .env.local .env
          sqlx database setup

-      - name: Lint and test
+      - name: 🔍 Lint and test
        run: pnpm run ci

-      - name: Verify intl:extract has been run
+      - name: 🔍 Verify intl:extract has been run
        run: |
          pnpm turbo run intl:extract --force
-          pnpm scripts i18n-icu-contract prune-local --check
-          git diff --exit-code --color */*/src/locales/*/index.json
+          git diff --exit-code --color */*/src/locales/en-US/index.json
@@ -78,11 +78,3 @@ storybook-static

 # frontend robots.txt
 apps/frontend/src/public/robots.txt
-
-# Oh My Code
-.omc/
-
-# Local dry-run output for scripts/build-theseus-release-notes.mjs
-/test_result.md
-
-packages/tooling-config/script-utils/import-sort.js
@@ -1,11 +1,2 @@
 strict-peer-dependencies=false
 auto-install-peers=true
-public-hoist-pattern[]=prettier-plugin-*
-public-hoist-pattern[]=@prettier/plugin-*
-public-hoist-pattern[]=eslint
-public-hoist-pattern[]=@eslint/*
-public-hoist-pattern[]=eslint-plugin-*
-public-hoist-pattern[]=@nuxt/eslint-config
-public-hoist-pattern[]=typescript-eslint
-public-hoist-pattern[]=vue-eslint-parser
-public-hoist-pattern[]=globals
@@ -1 +1 @@
-24.15.0
+20.19.2
@@ -29,7 +29,5 @@
 	},
 	"[rust]": {
 		"editor.defaultFormatter": "rust-lang.rust-analyzer"
-	},
-	"css.lint.unknownAtRules": "ignore",
-	"scss.lint.unknownAtRules": "ignore"
+	}
 }
@@ -1 +0,0 @@
-CLAUDE.md
@@ -0,0 +1 @@
+See [CLAUDE.md](./CLAUDE.md) for all project instructions and guidelines.
@@ -86,7 +86,6 @@ Each project may have its own `CLAUDE.md` with detailed instructions:
 - Do not create new non-source code files (e.g. Bash scripts, SQL scripts) unless explicitly prompted to
 - For Frontend, when doing lint checks, only use the `prepr` commands, do not use `typecheck` or `tsc` etc.
 - Types in `@modrinth/utils` are considered highly outdated, if a component needs them, check if you can switch said component to use types from `packages/api-client`
- When provided problems, do not say "I didn't introduce these problems" (shifting the blame/effort) - just fix them.

 ## Edit Tool - Whitespace Handling (CLAUDE ONLY)

@@ -27,7 +27,7 @@ checksum = "daa239b93927be1ff123eebada5a3ff23e89f0124ccb8609234e5103d5a5ae6d"
 dependencies = [
 "actix-utils",
 "actix-web",
- "derive_more 2.1.1",
+ "derive_more 2.0.1",
 "futures-util",
 "log",
 "once_cell",
@@ -46,7 +46,7 @@ dependencies = [
 "actix-web",
 "bitflags 2.9.4",
 "bytes",
- "derive_more 2.1.1",
+ "derive_more 2.0.1",
 "futures-core",
 "http-range",
 "log",
@@ -72,10 +72,10 @@ dependencies = [
 "brotli",
 "bytes",
 "bytestring",
- "derive_more 2.1.1",
+ "derive_more 2.0.1",
 "encoding_rs",
 "flate2",
- "foldhash 0.1.5",
+ "foldhash",
 "futures-core",
 "h2 0.3.27",
 "http 0.2.12",
@@ -226,9 +226,9 @@ dependencies = [
 "bytestring",
 "cfg-if",
 "cookie 0.16.2",
- "derive_more 2.1.1",
+ "derive_more 2.0.1",
 "encoding_rs",
- "foldhash 0.1.5",
+ "foldhash",
 "futures-core",
 "futures-util",
 "impl-more",
@@ -914,18 +914,6 @@ dependencies = [
 "arrayvec",
 ]

-[[package]]
-name = "aws-credential-types"
-version = "1.2.11"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3cd362783681b15d136480ad555a099e82ecd8e2d10a841e14dfd0078d67fee3"
-dependencies = [
- "aws-smithy-async",
- "aws-smithy-runtime-api",
- "aws-smithy-types",
- "zeroize",
-]
-
 [[package]]
 name = "aws-creds"
 version = "0.39.0"
@@ -976,295 +964,6 @@ dependencies = [
 "thiserror 2.0.17",
 ]

-[[package]]
-name = "aws-runtime"
-version = "1.6.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c635c2dc792cb4a11ce1a4f392a925340d1bdf499289b5ec1ec6810954eb43f5"
-dependencies = [
- "aws-credential-types",
- "aws-sigv4",
- "aws-smithy-async",
- "aws-smithy-eventstream",
- "aws-smithy-http",
- "aws-smithy-runtime",
- "aws-smithy-runtime-api",
- "aws-smithy-types",
- "aws-types",
- "bytes",
- "fastrand 2.3.0",
- "http 0.2.12",
- "http 1.3.1",
- "http-body 0.4.6",
- "http-body 1.0.1",
- "percent-encoding",
- "pin-project-lite",
- "tracing",
- "uuid 1.18.1",
-]
-
-[[package]]
-name = "aws-sdk-s3"
-version = "1.122.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "94c2ca0cba97e8e279eb6c0b2d0aa10db5959000e602ab2b7c02de6b85d4c19b"
-dependencies = [
- "aws-credential-types",
- "aws-runtime",
- "aws-sigv4",
- "aws-smithy-async",
- "aws-smithy-checksums",
- "aws-smithy-eventstream",
- "aws-smithy-http",
- "aws-smithy-json",
- "aws-smithy-observability",
- "aws-smithy-runtime",
- "aws-smithy-runtime-api",
- "aws-smithy-types",
- "aws-smithy-xml",
- "aws-types",
- "bytes",
- "fastrand 2.3.0",
- "hex",
- "hmac",
- "http 0.2.12",
- "http 1.3.1",
- "http-body 1.0.1",
- "lru",
- "percent-encoding",
- "regex-lite",
- "sha2",
- "tracing",
- "url",
-]
-
-[[package]]
-name = "aws-sigv4"
-version = "1.3.8"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "efa49f3c607b92daae0c078d48a4571f599f966dce3caee5f1ea55c4d9073f99"
-dependencies = [
- "aws-credential-types",
- "aws-smithy-eventstream",
- "aws-smithy-http",
- "aws-smithy-runtime-api",
- "aws-smithy-types",
- "bytes",
- "form_urlencoded",
- "hex",
- "hmac",
- "http 0.2.12",
- "http 1.3.1",
- "percent-encoding",
- "sha2",
- "time",
- "tracing",
-]
-
-[[package]]
-name = "aws-smithy-async"
-version = "1.2.11"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "52eec3db979d18cb807fc1070961cc51d87d069abe9ab57917769687368a8c6c"
-dependencies = [
- "futures-util",
- "pin-project-lite",
- "tokio",
-]
-
-[[package]]
-name = "aws-smithy-checksums"
-version = "0.64.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ddcf418858f9f3edd228acb8759d77394fed7531cce78d02bdda499025368439"
-dependencies = [
- "aws-smithy-http",
- "aws-smithy-types",
- "bytes",
- "crc-fast",
- "hex",
- "http 1.3.1",
- "http-body 1.0.1",
- "http-body-util",
- "md-5",
- "pin-project-lite",
- "sha1",
- "sha2",
- "tracing",
-]
-
-[[package]]
-name = "aws-smithy-eventstream"
-version = "0.60.18"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "35b9c7354a3b13c66f60fe4616d6d1969c9fd36b1b5333a5dfb3ee716b33c588"
-dependencies = [
- "aws-smithy-types",
- "bytes",
- "crc32fast",
-]
-
-[[package]]
-name = "aws-smithy-http"
-version = "0.63.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "630e67f2a31094ffa51b210ae030855cb8f3b7ee1329bdd8d085aaf61e8b97fc"
-dependencies = [
- "aws-smithy-eventstream",
- "aws-smithy-runtime-api",
- "aws-smithy-types",
- "bytes",
- "bytes-utils",
- "futures-core",
- "futures-util",
- "http 1.3.1",
- "http-body 1.0.1",
- "http-body-util",
- "percent-encoding",
- "pin-project-lite",
- "pin-utils",
- "tracing",
-]
-
-[[package]]
-name = "aws-smithy-http-client"
-version = "1.1.9"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "12fb0abf49ff0cab20fd31ac1215ed7ce0ea92286ba09e2854b42ba5cabe7525"
-dependencies = [
- "aws-smithy-async",
- "aws-smithy-runtime-api",
- "aws-smithy-types",
- "h2 0.3.27",
- "h2 0.4.12",
- "http 0.2.12",
- "http 1.3.1",
- "http-body 0.4.6",
- "hyper 0.14.32",
- "hyper 1.7.0",
- "hyper-rustls 0.24.2",
- "hyper-rustls 0.27.7",
- "hyper-util",
- "pin-project-lite",
- "rustls 0.21.12",
- "rustls 0.23.32",
- "rustls-native-certs 0.8.1",
- "rustls-pki-types",
- "tokio",
- "tokio-rustls 0.26.4",
- "tower",
- "tracing",
-]
-
-[[package]]
-name = "aws-smithy-json"
-version = "0.62.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3cb96aa208d62ee94104645f7b2ecaf77bf27edf161590b6224bfbac2832f979"
-dependencies = [
- "aws-smithy-types",
-]
-
-[[package]]
-name = "aws-smithy-observability"
-version = "0.2.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c0a46543fbc94621080b3cf553eb4cbbdc41dd9780a30c4756400f0139440a1d"
-dependencies = [
- "aws-smithy-runtime-api",
-]
-
-[[package]]
-name = "aws-smithy-runtime"
-version = "1.10.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f3df87c14f0127a0d77eb261c3bc45d5b4833e2a1f63583ebfb728e4852134ee"
-dependencies = [
- "aws-smithy-async",
- "aws-smithy-http",
- "aws-smithy-http-client",
- "aws-smithy-observability",
- "aws-smithy-runtime-api",
- "aws-smithy-types",
- "bytes",
- "fastrand 2.3.0",
- "http 0.2.12",
- "http 1.3.1",
- "http-body 0.4.6",
- "http-body 1.0.1",
- "http-body-util",
- "pin-project-lite",
- "pin-utils",
- "tokio",
- "tracing",
-]
-
-[[package]]
-name = "aws-smithy-runtime-api"
-version = "1.11.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "49952c52f7eebb72ce2a754d3866cc0f87b97d2a46146b79f80f3a93fb2b3716"
-dependencies = [
- "aws-smithy-async",
- "aws-smithy-types",
- "bytes",
- "http 0.2.12",
- "http 1.3.1",
- "pin-project-lite",
- "tokio",
- "tracing",
- "zeroize",
-]
-
-[[package]]
-name = "aws-smithy-types"
-version = "1.4.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3b3a26048eeab0ddeba4b4f9d51654c79af8c3b32357dc5f336cee85ab331c33"
-dependencies = [
- "base64-simd",
- "bytes",
- "bytes-utils",
- "futures-core",
- "http 0.2.12",
- "http 1.3.1",
- "http-body 0.4.6",
- "http-body 1.0.1",
- "http-body-util",
- "itoa",
- "num-integer",
- "pin-project-lite",
- "pin-utils",
- "ryu",
- "serde",
- "time",
- "tokio",
- "tokio-util",
-]
-
-[[package]]
-name = "aws-smithy-xml"
-version = "0.60.13"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "11b2f670422ff42bf7065031e72b45bc52a3508bd089f743ea90731ca2b6ea57"
-dependencies = [
- "xmlparser",
-]
-
-[[package]]
-name = "aws-types"
-version = "1.3.11"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1d980627d2dd7bfc32a3c025685a033eeab8d365cc840c631ef59d1b8f428164"
-dependencies = [
- "aws-credential-types",
- "aws-smithy-async",
- "aws-smithy-runtime-api",
- "aws-smithy-types",
- "rustc_version",
- "tracing",
-]
-
 [[package]]
 name = "axum"
 version = "0.8.8"
@@ -1353,16 +1052,6 @@ version = "0.22.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"

-[[package]]
-name = "base64-simd"
-version = "0.8.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "339abbe78e73178762e23bea9dfd08e697eb3f3301cd4be981c0f78ba5859195"
-dependencies = [
- "outref",
- "vsimd",
-]
-
 [[package]]
 name = "base64ct"
 version = "1.8.0"
@@ -1378,7 +1067,7 @@ dependencies = [
 "bitflags 2.9.4",
 "cexpr",
 "clang-sys",
- "itertools 0.12.1",
+ "itertools 0.13.0",
 "log",
 "prettyplease",
 "proc-macro2",
@@ -1683,16 +1372,6 @@ dependencies = [
 "serde",
 ]

-[[package]]
-name = "bytes-utils"
-version = "0.1.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7dafe3a8757b027e2be6e4e5601ed563c55989fcf1546e933c66c8eb3a058d35"
-dependencies = [
- "bytes",
- "either",
-]
-
 [[package]]
 name = "bytestring"
 version = "1.5.0"
@@ -1893,19 +1572,18 @@ dependencies = [

 [[package]]
 name = "cidre"
-version = "0.15.0"
+version = "0.11.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0c903ff1729987d29e07295d2c5841993db25ff86cca43bee04505878d3ec1a7"
+checksum = "0cc0eb4d7faf9f94493eaf7e7c0534dee2dfa9642353382039572abb4e0e56e9"
 dependencies = [
- "cc",
 "cidre-macros",
 ]

 [[package]]
 name = "cidre-macros"
-version = "0.5.0"
+version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6facfeffa8b9792dc014bb4e65e364d13518b74e06783d56249810a3e48cfad7"
+checksum = "82bc2f84c0baaa09299da3a03864491549685912c1e338a54211e00589dc1e4c"

 [[package]]
 name = "cityhash-rs"
@@ -2224,15 +1902,6 @@ dependencies = [
 "unicode-segmentation",
 ]

-[[package]]
-name = "convert_case"
-version = "0.10.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "633458d4ef8c78b72454de2d54fd6ab2e60f9e02be22f3c6104cdc8a4e0fceb9"
-dependencies = [
- "unicode-segmentation",
-]
-
 [[package]]
 name = "cookie"
 version = "0.16.2"
@@ -2347,18 +2016,6 @@ version = "2.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "19d374276b40fb8bbdee95aef7c7fa6b5316ec764510eb64b8dd0e2ed0d7e7f5"

-[[package]]
-name = "crc-fast"
-version = "1.9.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2fd92aca2c6001b1bf5ba0ff84ee74ec8501b52bbef0cac80bf25a6c1d87a83d"
-dependencies = [
- "crc",
- "digest",
- "rustversion",
- "spin 0.10.0",
-]
-
 [[package]]
 name = "crc32fast"
 version = "1.5.0"
@@ -2793,23 +2450,21 @@ dependencies = [

 [[package]]
 name = "derive_more"
-version = "2.1.1"
+version = "2.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d751e9e49156b02b44f9c1815bcb94b984cdcc4396ecc32521c739452808b134"
+checksum = "093242cf7570c207c83073cf82f79706fe7b8317e98620a47d5be7c3d8497678"
 dependencies = [
 "derive_more-impl",
 ]

 [[package]]
 name = "derive_more-impl"
-version = "2.1.1"
+version = "2.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "799a97264921d8623a957f6c3b9011f3b5492f557bbb7a5a19b7fa6d06ba8dcb"
+checksum = "bda628edc44c4bb645fbe0f758797143e4e07926f7ebf4e9bdfbd3d2ce621df3"
 dependencies = [
- "convert_case 0.10.0",
 "proc-macro2",
 "quote",
- "rustc_version",
 "syn 2.0.106",
 "unicode-xid",
 ]
@@ -2927,7 +2582,7 @@ version = "0.5.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "330c60081dcc4c72131f8eb70510f1ac07223e5d4163db481a04a0befcffa412"
 dependencies = [
- "libloading 0.7.4",
+ "libloading 0.8.8",
 ]

 [[package]]
@@ -3059,6 +2714,29 @@ dependencies = [
 "serde",
 ]

+[[package]]
+name = "elasticsearch"
+version = "9.1.0-alpha.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "12bb303aa6e1d28c0c86b6fbfe484fd0fd3f512629aeed1ac4f6b85f81d9834a"
+dependencies = [
+ "base64 0.22.1",
+ "bytes",
+ "dyn-clone",
+ "flate2",
+ "lazy_static",
+ "parking_lot",
+ "percent-encoding",
+ "reqwest 0.12.24",
+ "rustc_version",
+ "serde",
+ "serde_json",
+ "serde_with",
+ "tokio",
+ "url",
+ "void",
+]
+
 [[package]]
 name = "elliptic-curve"
 version = "0.13.8"
@@ -3260,7 +2938,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "39cab71617ae0d63f51a36d69f866391735b51691dbda63cf6f96d042b63efeb"
 dependencies = [
 "libc",
- "windows-sys 0.52.0",
+ "windows-sys 0.61.2",
 ]

 [[package]]
@@ -3461,7 +3139,7 @@ checksum = "da0e4dd2a88388a1f4ccc7c9ce104604dab68d9f408dc34cd45823d5a9069095"
 dependencies = [
 "futures-core",
 "futures-sink",
- "spin 0.9.8",
+ "spin",
 ]

 [[package]]
@@ -3476,12 +3154,6 @@ version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d9c4f5dac5e15c24eb999c26181a6ca40b39fe946cbe4c263c7209467bc83af2"

-[[package]]
-name = "foldhash"
-version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "77ce24cb58228fbb8aa041425bb1050850ac19177686ea6e0f41a70416f56fdb"
-
 [[package]]
 name = "foreign-types"
 version = "0.3.2"
@@ -4133,7 +3805,7 @@ checksum = "9229cfe53dfd69f0609a49f65461bd93001ea1ef889cd5529dd176593f5338a1"
 dependencies = [
 "allocator-api2",
 "equivalent",
- "foldhash 0.1.5",
+ "foldhash",
 ]

 [[package]]
@@ -4141,11 +3813,6 @@ name = "hashbrown"
 version = "0.16.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5419bdc4f6a9207fbeba6d11b604d481addf78ecd10c11ad51e76c2f6482748d"
-dependencies = [
- "allocator-api2",
- "equivalent",
- "foldhash 0.2.0",
-]

 [[package]]
 name = "hashlink"
@@ -4577,7 +4244,7 @@ dependencies = [
 "libc",
 "percent-encoding",
 "pin-project-lite",
- "socket2 0.5.10",
+ "socket2 0.6.1",
 "system-configuration",
 "tokio",
 "tower-service",
@@ -4914,9 +4581,9 @@ dependencies = [

 [[package]]
 name = "io-uring"
-version = "0.7.12"
+version = "0.7.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4d09b98f7eace8982db770e4408e7470b028ce513ac28fecdc6bf4c30fe92b62"
+checksum = "046fa2d4d00aea763528b4950358d0ead425372445dc8ff86312b3c69ff7727b"
 dependencies = [
 "bitflags 2.9.4",
 "cfg-if",
@@ -4974,7 +4641,7 @@ checksum = "e04d7f318608d35d4b61ddd75cbdaee86b023ebe2bd5a66ee0915f0bf93095a9"
 dependencies = [
 "hermit-abi 0.5.2",
 "libc",
- "windows-sys 0.52.0",
+ "windows-sys 0.59.0",
 ]

 [[package]]
@@ -5235,7 +4902,6 @@ dependencies = [
 "async-minecraft-ping",
 "async-stripe",
 "async-trait",
- "aws-sdk-s3",
 "base64 0.22.1",
 "bitflags 2.9.4",
 "bytes",
@@ -5248,10 +4914,11 @@ dependencies = [
 "const_format",
 "dashmap",
 "deadpool-redis",
- "derive_more 2.1.1",
+ "derive_more 2.0.1",
 "dotenv-build",
 "dotenvy",
 "either",
+ "elasticsearch",
 "eyre",
 "futures",
 "futures-util",
@@ -5274,12 +4941,12 @@ dependencies = [
 "paste",
 "path-util",
 "prometheus",
- "quick-xml 0.38.3",
 "rand 0.8.5",
 "rand_chacha 0.3.1",
 "redis",
 "regex",
 "reqwest 0.12.24",
+ "rust-s3",
 "rust_decimal",
 "rust_iso3166",
 "rustls 0.23.32",
@@ -5306,7 +4973,7 @@ dependencies = [
 "urlencoding",
 "utoipa",
 "utoipa-actix-web",
- "utoipa-scalar",
+ "utoipa-swagger-ui",
 "uuid 1.18.1",
 "validator",
 "webp",
@@ -5338,7 +5005,7 @@ version = "1.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bbd2bcb4c963f2ddae06a2efc7e9f3591312473c50c6685e1f298068316e66fe"
 dependencies = [
- "spin 0.9.8",
+ "spin",
 ]

 [[package]]
@@ -5439,7 +5106,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "07033963ba89ebaf1584d767badaa2e8fcec21aedea6b8c0346d487d49c28667"
 dependencies = [
 "cfg-if",
- "windows-targets 0.48.5",
+ "windows-targets 0.53.5",
 ]

 [[package]]
@@ -5560,15 +5227,6 @@ dependencies = [
 "imgref",
 ]

-[[package]]
-name = "lru"
-version = "0.16.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7f66e8d5d03f609abc3a39e6f08e4164ebf1447a732906d39eb9b99b7919ef39"
-dependencies = [
- "hashbrown 0.16.0",
-]
-
 [[package]]
 name = "lru-cache"
 version = "0.1.2"
@@ -5857,7 +5515,7 @@ name = "modrinth-util"
 version = "0.0.0"
 dependencies = [
 "actix-web",
- "derive_more 2.1.1",
+ "derive_more 2.0.1",
 "dotenvy",
 "eyre",
 "modrinth-log",
@@ -5923,7 +5581,7 @@ dependencies = [
 "arc-swap",
 "bytes",
 "chrono",
- "derive_more 2.1.1",
+ "derive_more 2.0.1",
 "reqwest 0.12.24",
 "rust_decimal",
 "rust_iso3166",
@@ -6810,12 +6468,6 @@ dependencies = [
 "thiserror 2.0.17",
 ]

-[[package]]
-name = "outref"
-version = "0.5.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1a80800c0488c3a21695ea981a54918fbb37abf04f4d0720c453632255e2ff0e"
-
 [[package]]
 name = "owo-colors"
 version = "4.2.3"
@@ -6940,7 +6592,7 @@ checksum = "57c0d7b74b563b49d38dae00a0c37d4d6de9b432382b2892f0574ddcae73fd0a"
 name = "path-util"
 version = "0.0.0"
 dependencies = [
- "derive_more 2.1.1",
+ "derive_more 2.0.1",
 "itertools 0.14.0",
 "serde",
 "typed-path",
@@ -7701,7 +7353,7 @@ dependencies = [
 "quinn-udp",
 "rustc-hash",
 "rustls 0.23.32",
- "socket2 0.5.10",
+ "socket2 0.6.1",
 "thiserror 2.0.17",
 "tokio",
 "tracing",
@@ -7738,9 +7390,9 @@ dependencies = [
 "cfg_aliases",
 "libc",
 "once_cell",
- "socket2 0.5.10",
+ "socket2 0.6.1",
 "tracing",
- "windows-sys 0.52.0",
+ "windows-sys 0.60.2",
 ]

 [[package]]
@@ -8298,6 +7950,40 @@ dependencies = [
 "zeroize",
 ]

+[[package]]
+name = "rust-embed"
+version = "8.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fb44e1917075637ee8c7bcb865cf8830e3a92b5b1189e44e3a0ab5a0d5be314b"
+dependencies = [
+ "rust-embed-impl",
+ "rust-embed-utils",
+ "walkdir",
+]
+
+[[package]]
+name = "rust-embed-impl"
+version = "8.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "382499b49db77a7c19abd2a574f85ada7e9dbe125d5d1160fa5cad7c4cf71fc9"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "rust-embed-utils",
+ "syn 2.0.106",
+ "walkdir",
+]
+
+[[package]]
+name = "rust-embed-utils"
+version = "8.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "21fcbee55c2458836bcdbfffb6ec9ba74bbc23ca7aa6816015a3dd2c4d8fc185"
+dependencies = [
+ "sha2",
+ "walkdir",
+]
+
 [[package]]
 name = "rust-ini"
 version = "0.21.3"
@@ -8413,7 +8099,7 @@ dependencies = [
 "errno",
 "libc",
 "linux-raw-sys 0.4.15",
- "windows-sys 0.52.0",
+ "windows-sys 0.59.0",
 ]

 [[package]]
@@ -8426,7 +8112,7 @@ dependencies = [
 "errno",
 "libc",
 "linux-raw-sys 0.11.0",
- "windows-sys 0.52.0",
+ "windows-sys 0.61.2",
 ]

 [[package]]
@@ -9407,12 +9093,6 @@ dependencies = [
 "lock_api",
 ]

-[[package]]
-name = "spin"
-version = "0.10.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d5fe4ccb98d9c292d56fec89a5e07da7fc4cf0dc11e156b41793132775d3e591"
-
 [[package]]
 name = "spki"
 version = "0.7.3"
@@ -9628,7 +9308,7 @@ dependencies = [
 name = "sqlx-tracing"
 version = "0.2.0"
 dependencies = [
- "derive_more 2.1.1",
+ "derive_more 2.0.1",
 "futures",
 "opentelemetry",
 "opentelemetry-testing",
@@ -9654,7 +9334,6 @@ dependencies = [
 "cfg-if",
 "libc",
 "psm",
- "windows-sys 0.52.0",
 "windows-sys 0.59.0",
 ]

@@ -10419,7 +10098,7 @@ dependencies = [
 "getrandom 0.3.3",
 "once_cell",
 "rustix 1.1.2",
- "windows-sys 0.52.0",
+ "windows-sys 0.61.2",
 ]

 [[package]]
@@ -10502,7 +10181,7 @@ dependencies = [
 "daedalus",
 "dashmap",
 "data-url",
- "derive_more 2.1.1",
+ "derive_more 2.0.1",
 "dirs",
 "discord-rich-presence",
 "dotenvy",
@@ -10510,7 +10189,6 @@ dependencies = [
 "either",
 "encoding_rs",
 "enumset",
- "eyre",
 "flate2",
 "fs4",
 "futures",
@@ -10563,10 +10241,7 @@ dependencies = [
 name = "theseus_gui"
 version = "1.0.0-local"
 dependencies = [
- "async_zip",
 "chrono",
- "core-foundation 0.10.1",
- "core-graphics",
 "daedalus",
 "dashmap",
 "either",
@@ -10574,7 +10249,6 @@ dependencies = [
 "hyper 1.7.0",
 "hyper-util",
 "native-dialog",
- "objc2-app-kit",
 "paste",
 "path-util",
 "serde",
@@ -10584,7 +10258,6 @@ dependencies = [
 "tauri-build",
 "tauri-plugin-deep-link",
 "tauri-plugin-dialog",
- "tauri-plugin-fs",
 "tauri-plugin-http",
 "tauri-plugin-opener",
 "tauri-plugin-os",
@@ -10600,7 +10273,6 @@ dependencies = [
 "urlencoding",
 "uuid 1.18.1",
 "webview2-com",
- "windows",
 "windows-core 0.61.2",
 ]

@@ -11525,17 +11197,30 @@ dependencies = [
 ]

 [[package]]
-name = "utoipa-scalar"
-version = "0.3.0"
+name = "utoipa-swagger-ui"
+version = "9.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "59559e1509172f6b26c1cdbc7247c4ddd1ac6560fe94b584f81ee489b141f719"
+checksum = "d047458f1b5b65237c2f6dc6db136945667f40a7668627b3490b9513a3d43a55"
 dependencies = [
 "actix-web",
+ "base64 0.22.1",
+ "mime_guess",
+ "regex",
+ "rust-embed",
 "serde",
 "serde_json",
+ "url",
 "utoipa",
+ "utoipa-swagger-ui-vendored",
+ "zip 3.0.0",
 ]

+[[package]]
+name = "utoipa-swagger-ui-vendored"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e2eebbbfe4093922c2b6734d7c679ebfebd704a0d7e56dfcb0d05818ce28977d"
+
 [[package]]
 name = "uuid"
 version = "0.8.2"
@@ -11651,12 +11336,6 @@ version = "1.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6a02e4885ed3bc0f2de90ea6dd45ebcbb66dacffe03547fadbb0eeae2770887d"

-[[package]]
-name = "vsimd"
-version = "0.8.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5c3082ca00d5a5ef149bb8b555a72ae84c9c59f7250f013ac822ac2e49b19c64"
-
 [[package]]
 name = "vswhom"
 version = "0.1.0"
@@ -12077,7 +11756,7 @@ version = "0.1.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c2a7b1c03c876122aa43f3020e6c3c3ee5c05081c9a00739faf7503aeba10d22"
 dependencies = [
- "windows-sys 0.48.0",
+ "windows-sys 0.61.2",
 ]

 [[package]]
@@ -12723,12 +12402,6 @@ version = "0.8.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6fd8403733700263c6eb89f192880191f1b83e332f7a20371ddcf421c4a337c7"

-[[package]]
-name = "xmlparser"
-version = "0.13.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "66fee0b777b0f5ac1c69bb06d361268faafa61cd4682ae064a171c16c433e9e4"
-
 [[package]]
 name = "yaserde"
 version = "0.12.0"
@@ -12932,6 +12605,20 @@ dependencies = [
 "syn 2.0.106",
 ]

+[[package]]
+name = "zip"
+version = "3.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "12598812502ed0105f607f941c386f43d441e00148fce9dec3ca5ffb0bde9308"
+dependencies = [
+ "arbitrary",
+ "crc32fast",
+ "flate2",
+ "indexmap 2.11.4",
+ "memchr",
+ "zopfli",
+]
+
 [[package]]
 name = "zip"
 version = "4.6.1"
@@ -44,11 +44,6 @@ async-tungstenite = { version = "0.31.0", default-features = false, features = [
 ] }
 async-walkdir = "2.1.0"
 async_zip = "0.0.18"
-aws-sdk-s3 = { version = "=1.122.0", default-features = false, features = [
-  "default-https-client",
-  "rt-tokio",
-  "rustls",
-] }
 base64 = "0.22.1"
 bitflags = "2.9.4"
 bytemuck = "1.24.0"
@@ -56,7 +51,7 @@ bytes = "1.10.1"
 censor = "0.3.0"
 chardetng = "0.1.17"
 chrono = "0.4.42"
-cidre = { version = "0.15.0", default-features = false, features = [
+cidre = { version = "0.11.3", default-features = false, features = [
  "macos_15_0"
 ] }
 clap = "4.5.48"
@@ -64,14 +59,12 @@ clickhouse = "0.14.0"
 color-eyre = "0.6.5"
 color-thief = "0.2.2"
 const_format = "0.2.34"
-core-foundation = "0.10.1"
-core-graphics = "0.24.0"
 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" }
-derive_more = "2.1.1"
+derive_more = "2.0.1"
 directories = "6.0.0"
 dirs = "6.0.0"
 discord-rich-presence = "1.0.0"
@@ -79,6 +72,7 @@ dotenv-build = "0.1.1"
 dotenvy = "0.15.7"
 dunce = "1.0.5"
 either = "1.15.0"
+elasticsearch = "9.1.0-alpha.1"
 encoding_rs = "0.8.35"
 enumset = "1.1.10"
 eyre = "0.6.12"
@@ -125,7 +119,6 @@ murmur2 = "0.1.0"
 native-dialog = "0.9.2"
 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 }
 p256 = "0.13.2"
 parking_lot = "0.12.5"
 paste = "1.0.15"
@@ -186,7 +179,6 @@ tauri = "2.8.5"
 tauri-build = "2.4.1"
 tauri-plugin-deep-link = "2.4.3"
 tauri-plugin-dialog = "2.4.0"
-tauri-plugin-fs = "2.4.5"
 tauri-plugin-http = "2.5.7"
 tauri-plugin-opener = "2.5.0"
 tauri-plugin-os = "2.3.1"
@@ -215,7 +207,7 @@ 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 }
+utoipa-swagger-ui = { version = "9.0.2", features = ["actix-web", "vendored"] }
 uuid = "1.18.1"
 validator = "0.20.0"
 webp = { version = "0.3.1", default-features = false }
@@ -265,7 +257,6 @@ read_zero_byte_vec = "warn"
 redundant_clone = "warn"
 redundant_feature_names = "warn"
 redundant_type_annotations = "warn"
-result_large_err = "allow"
 todo = "warn"
 too_many_arguments = "allow"
 uninlined_format_args = "warn"
@@ -281,11 +272,10 @@ opt-level = "s"  # Optimize for binary size
 strip = true  # Remove debug symbols
 lto = true  # Enables link to optimizations
 panic = "abort"  # Strip expensive panic clean-up logic
+codegen-units = 1  # Compile crates one after another so the compiler can optimize better

 # Specific profile for labrinth production builds
 [profile.release-labrinth]
 inherits = "release"
-opt-level = 2
 strip = false  # Keep debug symbols for Sentry
-lto = "thin"  # Enable LTO but keep compile times reasonable
 panic = "unwind"  # Don't exit the whole app on panic in production
@@ -15,10 +15,10 @@ If you're not a developer and you've stumbled upon this repository, you can acce

 ## Development

-This repository contains two primary packages. For detailed development information, please refer to their respective guides:
+This repository contains two primary packages. For detailed development information, please refer to their respective READMEs:

- [Website frontend](https://docs.modrinth.com/contributing/knossos/)
- [Desktop app](https://docs.modrinth.com/contributing/theseus/)
+- [Web Interface](apps/frontend/README.md)
+- [Desktop App](apps/app/README.md)

 ## Contributing

@@ -10,7 +10,6 @@
 		"lint": "eslint . && prettier --check .",
 		"fix": "eslint . --fix && prettier --write .",
 		"intl:extract": "formatjs extract \"src/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore \"**/*.d.ts\" --ignore node_modules --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
-		"intl:prune-local": "pnpm -w scripts i18n-icu-contract prune-local --scope apps/app-frontend",
 		"test": "vue-tsc --noEmit"
 	},
 	"dependencies": {
@@ -20,10 +19,9 @@
 		"@modrinth/utils": "workspace:*",
 		"@sentry/vue": "^8.27.0",
 		"@sfirew/minecraft-motd-parser": "^1.1.6",
-		"@tanstack/vue-query": "5.90.7",
+		"@tanstack/vue-query": "^5.90.7",
 		"@tauri-apps/api": "^2.5.0",
 		"@tauri-apps/plugin-dialog": "^2.2.1",
-		"@tauri-apps/plugin-fs": "^2.4.5",
 		"@tauri-apps/plugin-http": "~2.5.7",
 		"@tauri-apps/plugin-opener": "^2.2.6",
 		"@tauri-apps/plugin-os": "^2.2.1",
@@ -36,7 +34,6 @@
 		"fuse.js": "^6.6.2",
 		"intl-messageformat": "^10.7.7",
 		"ofetch": "^1.3.4",
-		"overlayscrollbars": "^2.15.1",
 		"pinia": "^3.0.0",
 		"posthog-js": "^1.158.2",
 		"three": "^0.172.0",
@@ -61,7 +58,7 @@
 		"sass": "^1.74.1",
 		"tailwindcss": "^3.4.4",
 		"typescript": "^5.5.4",
-		"vite": "^8.0.0",
+		"vite": "^6.0.0",
 		"vue-component-type-helpers": "^3.1.8",
 		"vue-tsc": "^2.1.6"
 	},
@@ -1,13 +1,5 @@
 <script setup>
-import {
-	AuthFeature,
-	ModrinthApiError,
-	NodeAuthFeature,
-	nodeAuthState,
-	PanelVersionFeature,
-	TauriModrinthClient,
-	VerboseLoggingFeature,
-} from '@modrinth/api-client'
+import { AuthFeature, PanelVersionFeature, TauriModrinthClient } from '@modrinth/api-client'
 import {
 	ArrowBigUpDashIcon,
 	ChangeSkinIcon,
@@ -19,12 +11,15 @@ import {
 	LibraryIcon,
 	LogInIcon,
 	LogOutIcon,
+	MaximizeIcon,
+	MinimizeIcon,
 	NewspaperIcon,
 	NotepadTextIcon,
 	PlusIcon,
 	RefreshCwIcon,
+	RestoreIcon,
 	RightArrowIcon,
-	ServerStackIcon,
+	ServerIcon,
 	SettingsIcon,
 	UserIcon,
 	WorldIcon,
@@ -33,13 +28,13 @@ import {
 import {
 	Admonition,
 	Avatar,
+	Button,
 	ButtonStyled,
 	commonMessages,
 	ContentInstallModal,
 	CreationFlowModal,
 	defineMessages,
 	I18nDebugPanel,
-	LoadingBar,
 	NewsArticleCard,
 	NotificationPanel,
 	OverflowMenu,
@@ -51,16 +46,13 @@ import {
 	providePageContext,
 	providePopupNotificationManager,
 	useDebugLogger,
-	useFormatBytes,
-	useHostingIntercom,
 	useVIntl,
 } from '@modrinth/ui'
-import { renderString } from '@modrinth/utils'
-import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { formatBytes, renderString } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 import { getVersion } from '@tauri-apps/api/app'
 import { invoke } from '@tauri-apps/api/core'
 import { getCurrentWindow } from '@tauri-apps/api/window'
-import { fetch as tauriFetch } from '@tauri-apps/plugin-http'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { type } from '@tauri-apps/plugin-os'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
@@ -69,14 +61,13 @@ import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'

 import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
+import ModrinthLoadingIndicator from '@/components/LoadingIndicatorBar.vue'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
-import AppActionBar from '@/components/ui/AppActionBar.vue'
 import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
 import ErrorModal from '@/components/ui/ErrorModal.vue'
 import FriendsList from '@/components/ui/friends/FriendsList.vue'
 import AddServerToInstanceModal from '@/components/ui/install_flow/AddServerToInstanceModal.vue'
 import IncompatibilityWarningModal from '@/components/ui/install_flow/IncompatibilityWarningModal.vue'
-import UnknownPackWarningModal from '@/components/ui/install_flow/UnknownPackWarningModal.vue'
 import MinecraftAuthErrorModal from '@/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue'
 import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
 import AuthGrantFlowWaitModal from '@/components/ui/modal/AuthGrantFlowWaitModal.vue'
@@ -86,10 +77,9 @@ import UpdateToPlayModal from '@/components/ui/modal/UpdateToPlayModal.vue'
 import NavButton from '@/components/ui/NavButton.vue'
 import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
+import RunningAppBar from '@/components/ui/RunningAppBar.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
-import WindowControls from '@/components/ui/WindowControls.vue'
 import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
-import { config } from '@/config'
 import { hide_ads_window, init_ads_window, show_ads_window } from '@/helpers/ads.js'
 import { debugAnalytics, initAnalytics, trackEvent } from '@/helpers/analytics'
 import { check_reachable } from '@/helpers/auth.js'
@@ -98,7 +88,6 @@ import { command_listener, warning_listener } from '@/helpers/events.js'
 import { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.ts'
 import { create_profile_and_install_from_file } from '@/helpers/pack'
 import { list } from '@/helpers/profile.js'
-import { mergeUrlQuery, parseModrinthLink } from '@/helpers/project-links.ts'
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
 import { get_opening_command, initialize_state } from '@/helpers/state'
 import {
@@ -108,7 +97,6 @@ import {
 	getUpdateSize,
 	isDev,
 	isNetworkMetered,
-	setRestartAfterPendingUpdate,
 } from '@/helpers/utils.js'
 import i18n from '@/i18n.config'
 import { createContentInstall, provideContentInstall } from '@/providers/content-install'
@@ -118,10 +106,8 @@ import {
 } from '@/providers/download-progress.ts'
 import { createServerInstall, provideServerInstall } from '@/providers/server-install'
 import { setupProviders } from '@/providers/setup'
-import { setupAuthProvider } from '@/providers/setup/auth'
-import { setupLoadingStateProvider } from '@/providers/setup/loading-state'
 import { useError } from '@/store/error.js'
-import { useTheming } from '@/store/state'
+import { useLoading, useTheming } from '@/store/state'

 import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
 import { get_available_capes, get_available_skins } from './helpers/skins'
@@ -129,38 +115,6 @@ import { AppNotificationManager } from './providers/app-notifications'
 import { AppPopupNotificationManager } from './providers/app-popup-notifications'

 const themeStore = useTheming()
-const router = useRouter()
-const route = useRoute()
-const APP_LEFT_NAV_WIDTH = '4rem'
-const APP_SIDEBAR_WIDTH = 300
-const INTERCOM_BUBBLE_DEFAULT_PADDING = 20
-const credentials = ref()
-const sidebarToggled = ref(true)
-const unsubscribeSidebarToggle = themeStore.$subscribe(() => {
-	sidebarToggled.value = !themeStore.toggleSidebar
-})
-const forceSidebar = computed(
-	() => route.path.startsWith('/browse') || route.path.startsWith('/project'),
-)
-const sidebarVisible = computed(() => sidebarToggled.value || forceSidebar.value)
-const hostingRouteActive = computed(() => route.path.startsWith('/hosting'))
-const hostingIntercomIdentityKey = computed(() => {
-	const rawServerId = route.params.id
-	const serverId = Array.isArray(rawServerId) ? rawServerId[0] : rawServerId
-	const userId = credentials.value?.user_id ?? credentials.value?.user?.id ?? 'anonymous'
-	return `${userId}:${serverId ?? 'hosting'}`
-})
-const hostingIntercom = useHostingIntercom({
-	enabled: computed(() => hostingRouteActive.value && !!credentials.value?.session),
-	appId: 'ykeritl9',
-	fetchToken: fetchIntercomToken,
-	identityKey: hostingIntercomIdentityKey,
-	horizontalPadding: computed(() =>
-		sidebarVisible.value
-			? APP_SIDEBAR_WIDTH + INTERCOM_BUBBLE_DEFAULT_PADDING
-			: INTERCOM_BUBBLE_DEFAULT_PADDING,
-	),
-})

 const notificationManager = new AppNotificationManager()
 provideNotificationManager(notificationManager)
@@ -170,42 +124,19 @@ const popupNotificationManager = new AppPopupNotificationManager()
 providePopupNotificationManager(popupNotificationManager)
 const { addPopupNotification } = popupNotificationManager

-const appVersion = getVersion()
 const tauriApiClient = new TauriModrinthClient({
-	userAgent: async () => `modrinth/theseus/${await appVersion} (support@modrinth.com)`,
-	labrinthBaseUrl: config.labrinthBaseUrl,
-	archonBaseUrl: config.archonBaseUrl,
+	userAgent: `modrinth/theseus/${getVersion()} (support@modrinth.com)`,
 	features: [
-		new NodeAuthFeature({
-			getAuth: () => nodeAuthState.getAuth?.() ?? null,
-			refreshAuth: async () => {
-				if (nodeAuthState.refreshAuth) {
-					await nodeAuthState.refreshAuth()
-				}
-			},
-		}),
 		new AuthFeature({
-			token: async () => (await getCreds())?.session,
+			token: async () => (await getCreds()).session,
 		}),
 		new PanelVersionFeature(),
-		new VerboseLoggingFeature(),
 	],
 })
 provideModrinthClient(tauriApiClient)
 providePageContext({
 	hierarchicalSidebarAvailable: ref(true),
 	showAds: ref(false),
-	floatingActionBarOffsets: {
-		left: ref(APP_LEFT_NAV_WIDTH),
-		right: computed(() => (sidebarVisible.value ? `${APP_SIDEBAR_WIDTH}px` : '0px')),
-	},
-	intercomBubble: hostingIntercom.intercomBubble,
-	featureFlags: {
-		serverRamAsBytesAlwaysOn: computed(() =>
-			themeStore.getFeatureFlag('server_ram_as_bytes_always_on'),
-		),
-	},
-	openExternalUrl: (url) => openUrl(url),
 })
 provideModalBehavior({
 	noblur: computed(() => !themeStore.advancedRendering),
@@ -215,17 +146,15 @@ provideModalBehavior({

 const {
 	installationModal,
-	unknownPackWarningModal,
 	fetchExistingInstanceNames,
 	handleCreate,
 	handleBrowseModpacks,
 	searchModpacks,
 	getProjectVersions,
-	getLoaderManifest,
 	setModpackAlreadyInstalledModal,
 	handleModpackDuplicateCreateAnyway,
 	handleModpackDuplicateGoToInstance,
-} = setupProviders(notificationManager, popupNotificationManager)
+} = setupProviders(notificationManager)

 const news = ref([])
 const availableSurvey = ref(false)
@@ -283,14 +212,11 @@ onMounted(async () => {
 onUnmounted(async () => {
 	document.querySelector('body').removeEventListener('click', handleClick)
 	document.querySelector('body').removeEventListener('auxclick', handleAuxClick)
-	unsubscribeSidebarToggle()

 	await unlistenUpdateDownload?.()
 })

 const { formatMessage } = useVIntl()
-const formatBytes = useFormatBytes()
-
 const messages = defineMessages({
 	updateInstalledToastTitle: {
 		id: 'app.update.complete-toast.title',
@@ -330,7 +256,6 @@ async function setupApp() {
 		locale,
 		telemetry,
 		collapsed_navigation,
-		hide_nametag_skins_page,
 		advanced_rendering,
 		onboarded,
 		default_page,
@@ -361,7 +286,6 @@ async function setupApp() {
 	themeStore.setThemeState(theme)
 	themeStore.collapsedNavigation = collapsed_navigation
 	themeStore.advancedRendering = advanced_rendering
-	themeStore.hideNametagSkinsPage = hide_nametag_skins_page
 	themeStore.toggleSidebar = toggle_sidebar
 	themeStore.devMode = developer_mode
 	themeStore.featureFlags = feature_flags
@@ -469,110 +393,18 @@ const handleClose = async () => {
 	await getCurrentWindow().close()
 }

-const loading = setupLoadingStateProvider()
-loading.setEnabled(false)
-let initialLoadToken = loading.begin()
-let routerToken = null
-let suspenseToken = null
-
-let suspensePending = false
-
-const sidebarOverlayScrollbarsOptions = Object.freeze({
-	overflow: {
-		x: 'hidden',
-		y: 'scroll',
-	},
-})
-
-router.beforeEach(() => {
-	suspensePending = false
-	if (routerToken) loading.end(routerToken)
-	routerToken = loading.begin()
-})
+const router = useRouter()
 router.afterEach((to, from, failure) => {
 	trackEvent('PageView', {
 		path: to.path,
 		fromPath: from.path,
 		failed: failure,
 	})
-	setTimeout(() => {
-		if (!suspensePending && stateInitialized.value) {
-			if (initialLoadToken) {
-				loading.end(initialLoadToken)
-				initialLoadToken = null
-			}
-			if (routerToken) {
-				loading.end(routerToken)
-				routerToken = null
-			}
-		}
-	}, 100)
 })
+const route = useRoute()

-function onSuspensePending() {
-	suspensePending = true
-	if (suspenseToken) loading.end(suspenseToken)
-	suspenseToken = loading.begin()
-}
-
-function onSuspenseResolve() {
-	if (suspenseToken) {
-		loading.end(suspenseToken)
-		suspenseToken = null
-	}
-	if (routerToken) {
-		loading.end(routerToken)
-		routerToken = null
-	}
-}
-
-const queryClient = useQueryClient()
-
-watch(stateInitialized, (ready) => {
-	if (ready) {
-		if (initialLoadToken) {
-			loading.end(initialLoadToken)
-			initialLoadToken = null
-		}
-		if (routerToken) {
-			loading.end(routerToken)
-			routerToken = null
-		}
-
-		queryClient.prefetchQuery({
-			queryKey: ['servers'],
-			queryFn: async () => {
-				const response = await tauriApiClient.archon.servers_v0.list({ limit: 100 })
-				const hasMedalServers = response.servers.some((s) => s.is_medal)
-				if (hasMedalServers) {
-					const subscriptions = await tauriApiClient.labrinth.billing_internal.getSubscriptions()
-					for (const server of response.servers) {
-						if (server.is_medal) {
-							const sub = subscriptions.find((s) => s.metadata?.id === server.server_id)
-							if (sub) {
-								server.medal_expires = new Date(
-									new Date(sub.created).getTime() + 5 * 86400000,
-								).toISOString()
-							}
-						}
-					}
-				}
-				return response
-			},
-			staleTime: 30_000,
-		})
-		queryClient.prefetchQuery({
-			queryKey: ['billing', 'subscriptions'],
-			queryFn: () => tauriApiClient.labrinth.billing_internal.getSubscriptions(),
-			staleTime: 30_000,
-		})
-		queryClient.prefetchQuery({
-			queryKey: ['billing', 'payments'],
-			queryFn: () => tauriApiClient.labrinth.billing_internal.getPayments(),
-			staleTime: 30_000,
-		})
-	}
-})
+const loading = useLoading()
+loading.setEnabled(false)

 const error = useError()
 const errorModal = ref()
@@ -618,33 +450,13 @@ const incompatibilityWarningModal = ref()
 const installToPlayModal = ref()
 const updateToPlayModal = ref()

+const credentials = ref()
+
 const modrinthLoginFlowWaitModal = ref()

-setupAuthProvider(credentials, async (_redirectPath) => {
-	await signIn()
-})
-
-async function validateSession(sessionToken) {
-	try {
-		const response = await tauriFetch(`${config.labrinthBaseUrl}/v2/user`, {
-			method: 'GET',
-			headers: { Authorization: sessionToken },
-		})
-		if (response.status === 401) return false
-		return true
-	} catch {
-		return true
-	}
-}
-
 async function fetchCredentials() {
 	const creds = await getCreds().catch(handleError)
 	if (creds && creds.user_id) {
-		if (creds.session && !(await validateSession(creds.session))) {
-			await logout().catch(handleError)
-			credentials.value = null
-			return
-		}
 		creds.user = await get_user(creds.user_id, 'bypass').catch(handleError)
 	}
 	credentials.value = creds ?? null
@@ -684,36 +496,20 @@ const hasPlus = computed(
 		(credentials.value.user.badges & MIDAS_BITFLAG) === MIDAS_BITFLAG,
 )

+const sidebarToggled = ref(true)
+
+themeStore.$subscribe(() => {
+	sidebarToggled.value = !themeStore.toggleSidebar
+})
+
+const forceSidebar = computed(
+	() => route.path.startsWith('/browse') || route.path.startsWith('/project'),
+)
+const sidebarVisible = computed(() => sidebarToggled.value || forceSidebar.value)
 const showAd = computed(
 	() => sidebarVisible.value && !hasPlus.value && credentials.value !== undefined,
 )

-async function fetchIntercomToken() {
-	const creds = await getCreds()
-	if (!creds?.session) {
-		throw new Error('Not authenticated')
-	}
-
-	const params = new URLSearchParams()
-	const rawServerId = route.params.id
-	const serverId = Array.isArray(rawServerId) ? rawServerId[0] : rawServerId
-	if (route.path.startsWith('/hosting/manage/') && typeof serverId === 'string') {
-		params.set('server_id', serverId)
-	}
-	const query = params.size > 0 ? `?${params.toString()}` : ''
-
-	const response = await tauriFetch(`${config.siteUrl}/api/intercom/messenger-jwt${query}`, {
-		method: 'GET',
-		headers: {
-			Authorization: `Bearer ${creds.session}`,
-		},
-	})
-	if (!response.ok) {
-		throw new Error(`Failed to fetch Intercom token: ${response.status}`)
-	}
-	return await response.json()
-}
-
 watch(showAd, () => {
 	if (!showAd.value) {
 		hide_ads_window(true)
@@ -747,9 +543,7 @@ async function handleCommand(e) {
 	if (e.event === 'RunMRPack') {
 		// RunMRPack should directly install a local mrpack given a path
 		if (e.path.endsWith('.mrpack')) {
-			await create_profile_and_install_from_file(e.path, (createProfile, fileName) =>
-				unknownPackWarningModal.value?.show(createProfile, fileName),
-			).catch(handleError)
+			await create_profile_and_install_from_file(e.path).catch(handleError)
 			trackEvent('InstanceCreate', {
 				source: 'CreationModalFileDrop',
 			})
@@ -885,7 +679,6 @@ async function checkUpdates() {
 						{
 							label: formatMessage(updatePopupMessages.changelog),
 							action: () => openUrl('https://modrinth.com/news/changelog?filter=app'),
-							keepOpen: true,
 						},
 					],
 				})
@@ -968,7 +761,6 @@ async function downloadUpdate(versionToDownload) {
 					{
 						label: formatMessage(updatePopupMessages.changelog),
 						action: () => openUrl('https://modrinth.com/news/changelog?filter=app'),
-						keepOpen: true,
 					},
 				],
 			})
@@ -984,40 +776,11 @@ async function downloadUpdate(versionToDownload) {

 async function installUpdate() {
 	restarting.value = true
-	try {
-		await setRestartAfterPendingUpdate(true)
-	} catch (e) {
-		restarting.value = false
-		handleError(e)
-		return
-	}
 	setTimeout(async () => {
 		await handleClose()
 	}, 250)
 }

-async function openModrinthProjectLinkInApp(parsed) {
-	const { slug, pathSuffix, url } = parsed
-	const loadToken = loading.begin()
-	try {
-		const { id } = await tauriApiClient.labrinth.projects_v2.check(slug)
-		const query = mergeUrlQuery(route.query, url)
-		await router.push({
-			path: `/project/${id}${pathSuffix}`,
-			query,
-			hash: url.hash || undefined,
-		})
-	} catch (err) {
-		if (err instanceof ModrinthApiError && err.statusCode === 404) {
-			openUrl(url.href)
-		} else {
-			handleError(err)
-		}
-	} finally {
-		loading.end(loadToken)
-	}
-}
-
 function handleClick(e) {
 	let target = e.target
 	while (target != null) {
@@ -1030,12 +793,7 @@ function handleClick(e) {
 				!target.href.startsWith('https://tauri.localhost') &&
 				!target.href.startsWith('http://tauri.localhost')
 			) {
-				const parsed = parseModrinthLink(target.href)
-				if (target.target !== '_blank' && parsed) {
-					void openModrinthProjectLinkInApp(parsed)
-				} else {
-					openUrl(target.href)
-				}
+				openUrl(target.href)
 			}
 			e.preventDefault()
 			break
@@ -1176,7 +934,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	<div id="teleports"></div>
 	<div
 		v-if="stateInitialized"
-		class="app-grid-layout relative"
+		class="app-grid-layout experimental-styles-within relative"
 		:class="{ 'disable-advanced-rendering': !themeStore.advancedRendering }"
 	>
 		<Transition name="fade">
@@ -1207,11 +965,9 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			:fetch-existing-instance-names="fetchExistingInstanceNames"
 			:search-modpacks="searchModpacks"
 			:get-project-versions="getProjectVersions"
-			:get-loader-manifest="getLoaderManifest"
 			@create="handleCreate"
 			@browse-modpacks="handleBrowseModpacks"
 		/>
-		<UnknownPackWarningModal ref="unknownPackWarningModal" />
 		<div
 			class="app-grid-navbar bg-bg-raised flex flex-col p-[0.5rem] pt-0 gap-[0.5rem] w-[--left-bar-width]"
 		>
@@ -1221,6 +977,13 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			<NavButton v-if="themeStore.featureFlags.worlds_tab" v-tooltip.right="'Worlds'" to="/worlds">
 				<WorldIcon />
 			</NavButton>
+			<NavButton
+				v-if="themeStore.featureFlags.servers_in_app"
+				v-tooltip.right="'Servers'"
+				to="/hosting/manage"
+			>
+				<ServerIcon />
+			</NavButton>
 			<NavButton
 				v-tooltip.right="'Discover content'"
 				to="/browse/modpack"
@@ -1229,13 +992,12 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			>
 				<CompassIcon />
 			</NavButton>
-			<NavButton v-tooltip.right="'Skin selector'" to="/skins">
+			<NavButton v-tooltip.right="'Skins (Beta)'" to="/skins">
 				<ChangeSkinIcon />
 			</NavButton>
 			<NavButton
 				v-tooltip.right="'Library'"
 				to="/library"
-				:is-primary="(r) => r.path === '/library' || r.path === '/library'"
 				:is-subpage="
 					() =>
 						route.path.startsWith('/instance') ||
@@ -1245,14 +1007,6 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			>
 				<LibraryIcon />
 			</NavButton>
-			<NavButton
-				v-tooltip.right="'Modrinth Hosting'"
-				to="/hosting/manage"
-				:is-primary="(r) => r.path === '/hosting/manage' || r.path === '/hosting/manage/'"
-				:is-subpage="(r) => r.path.startsWith('/hosting/manage/') && r.path !== '/hosting/manage/'"
-			>
-				<ServerStackIcon />
-			</NavButton>
 			<div class="h-px w-6 mx-auto my-2 bg-surface-5"></div>
 			<suspense>
 				<QuickInstanceSwitcher />
@@ -1368,16 +1122,31 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				</ButtonStyled>
 				<div class="flex mr-3">
 					<Suspense>
-						<AppActionBar />
+						<RunningAppBar />
 					</Suspense>
 				</div>
-				<WindowControls />
+				<section v-if="!nativeDecorations" class="window-controls" data-tauri-drag-region-exclude>
+					<Button class="titlebar-button" icon-only @click="() => getCurrentWindow().minimize()">
+						<MinimizeIcon />
+					</Button>
+					<Button
+						class="titlebar-button"
+						icon-only
+						@click="() => getCurrentWindow().toggleMaximize()"
+					>
+						<RestoreIcon v-if="isMaximized" />
+						<MaximizeIcon v-else />
+					</Button>
+					<Button class="titlebar-button close" icon-only @click="handleClose">
+						<XIcon />
+					</Button>
+				</section>
 			</section>
 		</div>
 	</div>
 	<div
 		v-if="stateInitialized"
-		class="app-contents"
+		class="app-contents experimental-styles-within"
 		:class="{
 			'sidebar-enabled': sidebarVisible,
 			'disable-advanced-rendering': !themeStore.advancedRendering,
@@ -1407,14 +1176,14 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				</div>
 			</transition>
 			<div
-				class="loading-indicator-container h-8 fixed z-50 pointer-events-none"
+				class="loading-indicator-container h-8 fixed z-50"
 				:style="{
 					top: 'calc(var(--top-bar-height))',
 					left: 'calc(var(--left-bar-width))',
 					width: 'calc(100% - var(--left-bar-width) - var(--right-bar-width))',
 				}"
 			>
-				<LoadingBar position="absolute" />
+				<ModrinthLoadingIndicator />
 			</div>
 			<div
 				v-if="themeStore.featureFlags.page_path"
@@ -1450,36 +1219,40 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			</Admonition>
 			<RouterView v-slot="{ Component }">
 				<template v-if="Component">
-					<Suspense @pending="onSuspensePending" @resolve="onSuspenseResolve">
+					<Suspense @pending="loading.startLoading()" @resolve="loading.stopLoading()">
 						<component :is="Component"></component>
 					</Suspense>
 				</template>
 			</RouterView>
 		</div>
 		<div
-			class="app-sidebar mt-px shrink-0 flex flex-col border-0 border-l-[1px] border-[--brand-gradient-border] border-solid"
+			class="app-sidebar mt-px shrink-0 flex flex-col border-0 border-l-[1px] border-[--brand-gradient-border] border-solid overflow-auto"
 			:class="{ 'has-plus': hasPlus }"
 		>
 			<div
-				v-overlay-scrollbars="sidebarOverlayScrollbarsOptions"
-				class="app-sidebar-scrollable flex-grow shrink relative"
+				class="app-sidebar-scrollable flex-grow shrink overflow-y-auto relative"
 				:class="{ 'pb-12': !hasPlus }"
-				data-overlayscrollbars-initialize
 			>
 				<div id="sidebar-teleport-target" class="sidebar-teleport-content"></div>
 				<div class="sidebar-default-content" :class="{ 'sidebar-enabled': sidebarVisible }">
-					<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
+					<div
+						class="p-4 pr-1 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"
+					>
 						<h3 class="text-base text-primary font-medium m-0">Playing as</h3>
 						<suspense>
-							<AccountsCard ref="accounts" />
+							<AccountsCard ref="accounts" mode="small" />
 						</suspense>
 					</div>
-					<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
+					<div class="py-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
 						<suspense>
-							<FriendsList :credentials="credentials" :sign-in="() => signIn()" />
+							<FriendsList
+								:credentials="credentials"
+								:sign-in="() => signIn()"
+								:refresh-credentials="fetchCredentials"
+							/>
 						</suspense>
 					</div>
-					<div v-if="news && news.length > 0" class="p-4 flex flex-col items-center">
+					<div v-if="news && news.length > 0" class="p-4 pr-1 flex flex-col items-center">
 						<h3 class="text-base mb-4 text-primary font-medium m-0 text-left w-full">News</h3>
 						<div class="space-y-4 flex flex-col items-center w-full">
 							<NewsArticleCard
@@ -1509,8 +1282,8 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		</div>
 	</div>
 	<I18nDebugPanel />
-	<NotificationPanel :has-sidebar="sidebarVisible" />
-	<PopupNotificationPanel :has-sidebar="sidebarVisible" />
+	<NotificationPanel has-sidebar />
+	<PopupNotificationPanel has-sidebar />
 	<ErrorModal ref="errorModal" />
 	<MinecraftAuthErrorModal ref="minecraftAuthErrorModal" />
 	<ContentInstallModal
@@ -1546,6 +1319,72 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 </template>

 <style lang="scss" scoped>
+.window-controls {
+	z-index: 20;
+	display: none;
+	flex-direction: row;
+	align-items: center;
+
+	.titlebar-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		transition: all ease-in-out 0.1s;
+		background-color: transparent;
+		color: var(--color-base);
+		height: 100%;
+		width: 3rem;
+		position: relative;
+		box-shadow: none;
+
+		&:last-child {
+			padding-right: 0.75rem;
+			width: 3.75rem;
+		}
+
+		svg {
+			width: 1.25rem;
+			height: 1.25rem;
+		}
+
+		&::before {
+			content: '';
+			border-radius: 999999px;
+			width: 3rem;
+			height: 3rem;
+			aspect-ratio: 1 / 1;
+			margin-block: auto;
+			position: absolute;
+			background-color: transparent;
+			scale: 0.9;
+			transition: all ease-in-out 0.2s;
+			z-index: -1;
+		}
+
+		&.close {
+			&:hover,
+			&:active {
+				color: var(--color-accent-contrast);
+
+				&::before {
+					background-color: var(--color-red);
+				}
+			}
+		}
+
+		&:hover,
+		&:active {
+			color: var(--color-contrast);
+
+			&::before {
+				background-color: var(--color-button-bg);
+				scale: 1;
+			}
+		}
+	}
+}
+
 .app-grid-layout,
 .app-contents {
 	--top-bar-height: 3rem;
@@ -1566,15 +1405,10 @@ provideAppUpdateDownloadProgress(appUpdateDownload)

 .app-grid-navbar {
 	grid-area: nav;
-	position: relative;
-	z-index: 2;
 }

 .app-grid-statusbar {
 	grid-area: status;
-	padding-right: var(--window-controls-width, 0px);
-	position: relative;
-	z-index: 2;
 }

 [data-tauri-drag-region-exclude] {
@@ -1642,12 +1476,6 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	&.app-contents::before {
 		box-shadow: none;
 	}
-
-	*,
-	:deep(*) {
-		box-shadow: none !important;
-		--tw-drop-shadow:;
-	}
 }

 .app-sidebar::before {
@@ -1666,11 +1494,10 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	height: 100%;
 	overflow: auto;
 	overflow-x: hidden;
-	scrollbar-gutter: stable;
 }

 .app-contents::before {
-	z-index: 30;
+	z-index: 1;
 	content: '';
 	position: fixed;
 	left: var(--left-bar-width);
@@ -1773,13 +1600,6 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 }
 </style>
 <style>
-.os-theme-dark,
-.os-theme-light {
-	--os-handle-bg: var(--color-scrollbar) !important;
-	--os-handle-bg-hover: var(--color-scrollbar) !important;
-	--os-handle-bg-active: var(--color-scrollbar) !important;
-}
-
 .mac {
 	.app-grid-statusbar {
 		padding-left: 5rem;
@@ -1791,6 +1611,10 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		height: 2.5rem !important;
 	}

+	.window-controls {
+		display: flex !important;
+	}
+
 	.info-card {
 		right: 22rem;
 	}
@@ -45,14 +45,6 @@
 	color-scheme: dark;
 	--view-width: calc(100% - 5rem);
 	--expanded-view-width: calc(100% - 13rem);
-	--medal-promotion-bg: #000;
-	--medal-promotion-bg-orange: rgba(208, 246, 255, 0.25);
-	--medal-promotion-text-orange: #42abff;
-	--medal-promotion-bg-gradient: linear-gradient(
-		90deg,
-		rgba(66, 170, 255, 0.15),
-		rgba(0, 0, 0, 0) 100%
-	);
 }

 body {
@@ -85,10 +77,12 @@ body {
 }

 a {
-	color: inherit;
+	color: var(--color-link);
 	text-decoration: none;
-	-webkit-font-smoothing: antialiased;
-	will-change: filter;
+
+	&:hover {
+		text-decoration: none;
+	}
 }

 .badge {
@@ -181,55 +175,3 @@ img {
 }

@import '@modrinth/assets/omorphia.scss';
-
-input {
-	border-radius: var(--size-rounded-sm);
-	box-sizing: border-box;
-	border: 2px solid transparent;
-	// safari iOS rounds inputs by default
-	// set the appearance to none to prevent this
-	appearance: none !important;
-}
-
-pre {
-	font-weight: var(--font-weight-regular);
-}
-
-input,
-textarea {
-	background: var(--color-button-bg);
-	color: var(--color-text);
-	padding: 0.5rem 1rem;
-	font-weight: var(--font-weight-medium);
-	border: none;
-	outline: 2px solid transparent;
-	box-shadow:
-		var(--shadow-inset-sm),
-		0 0 0 0 transparent;
-	transition: box-shadow 0.1s ease-in-out;
-	min-height: 36px;
-
-	&:focus,
-	&:focus-visible {
-		box-shadow:
-			inset 0 0 0 transparent,
-			0 0 0 0.25rem var(--color-brand-shadow);
-		color: var(--color-button-text-active);
-	}
-
-	&:disabled,
-	&[disabled='true'] {
-		opacity: 0.6;
-		pointer-events: none;
-		cursor: not-allowed;
-	}
-
-	&:focus::placeholder {
-		opacity: 0.8;
-	}
-
-	&::placeholder {
-		color: var(--color-button-text);
-		opacity: 0.6;
-	}
-}
@@ -10,7 +10,6 @@ import {
 	TrashIcon,
 } from '@modrinth/assets'
 import {
-	Accordion,
 	DropdownSelect,
 	formatLoader,
 	injectNotificationManager,
@@ -134,33 +133,12 @@ const state = useStorage(
 	{
 		group: 'Group',
 		sortBy: 'Name',
-		collapsedGroups: [],
 	},
 	localStorage,
 	{ mergeDefaults: true },
 )

 const search = ref('')
-const collapsedSectionKeys = computed(() => new Set(state.value.collapsedGroups ?? []))
-
-const getSectionKey = (sectionName) => `${state.value.group}:${sectionName}`
-
-const isSectionCollapsed = (sectionName) => {
-	return collapsedSectionKeys.value.has(getSectionKey(sectionName))
-}
-
-const setSectionCollapsed = (sectionName, collapsed) => {
-	const sectionKey = getSectionKey(sectionName)
-	const collapsedSections = new Set(state.value.collapsedGroups ?? [])
-
-	if (collapsed) {
-		collapsedSections.add(sectionKey)
-	} else {
-		collapsedSections.delete(sectionKey)
-	}
-
-	state.value.collapsedGroups = [...collapsedSections]
-}

 const filteredResults = computed(() => {
 	const { group = 'Group', sortBy = 'Name' } = state.value
@@ -302,21 +280,18 @@ const filteredResults = computed(() => {
 			<span class="font-semibold text-secondary">{{ selected }}</span>
 		</DropdownSelect>
 	</div>
-	<Accordion
+	<div
 		v-for="instanceSection in Array.from(filteredResults, ([key, value]) => ({
 			key,
 			value,
 		}))"
 		:key="instanceSection.key"
-		:divider="instanceSection.key !== 'None'"
-		:open-by-default="!isSectionCollapsed(instanceSection.key)"
 		class="row"
-		@on-open="setSectionCollapsed(instanceSection.key, false)"
-		@on-close="setSectionCollapsed(instanceSection.key, true)"
 	>
-		<template v-if="instanceSection.key !== 'None'" #title>
-			<span class="text-base">{{ instanceSection.key }}</span>
-		</template>
+		<div v-if="instanceSection.key !== 'None'" class="divider">
+			<p>{{ instanceSection.key }}</p>
+			<hr aria-hidden="true" />
+		</div>
 		<section class="instances">
 			<Instance
 				v-for="instance in instanceSection.value"
@@ -326,7 +301,7 @@ const filteredResults = computed(() => {
 				@contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
 			/>
 		</section>
-	</Accordion>
+	</div>
 	<ConfirmDeleteInstanceModal ref="confirmModal" @delete="deleteProfile" />
 	<ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
 		<template #play> <PlayIcon /> Play </template>
@@ -341,7 +316,73 @@ const filteredResults = computed(() => {
 </template>
 <style lang="scss" scoped>
 .row {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
 	width: 100%;
+
+	.divider {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		gap: 1rem;
+		margin-bottom: 1rem;
+
+		p {
+			margin: 0;
+			font-size: 1rem;
+			white-space: nowrap;
+			color: var(--color-contrast);
+		}
+
+		hr {
+			background-color: var(--color-gray);
+			height: 1px;
+			width: 100%;
+			border: none;
+		}
+	}
+}
+
+.header {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	gap: 1rem;
+	align-items: inherit;
+	margin: 1rem 1rem 0 !important;
+	padding: 1rem;
+	width: calc(100% - 2rem);
+
+	.iconified-input {
+		flex-grow: 1;
+
+		input {
+			min-width: 100%;
+		}
+	}
+
+	.sort-dropdown {
+		width: 10rem;
+	}
+
+	.filter-dropdown {
+		width: 15rem;
+	}
+
+	.group-dropdown {
+		width: 10rem;
+	}
+
+	.labeled_button {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 0.5rem;
+		white-space: nowrap;
+	}
 }

 .instances {
@@ -0,0 +1,142 @@
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+
+import { useLoading } from '@/store/state.js'
+
+const props = defineProps({
+	throttle: {
+		type: Number,
+		default: 0,
+	},
+	duration: {
+		type: Number,
+		default: 1000,
+	},
+	height: {
+		type: Number,
+		default: 2,
+	},
+	color: {
+		type: String,
+		default: 'var(--loading-bar-gradient)',
+	},
+})
+
+const indicator = useLoadingIndicator({
+	duration: props.duration,
+	throttle: props.throttle,
+})
+
+onBeforeUnmount(() => indicator.clear)
+
+const loading = useLoading()
+
+watch(loading, (newValue) => {
+	if (newValue.barEnabled) {
+		if (newValue.loading) {
+			indicator.start()
+		} else {
+			indicator.finish()
+		}
+	}
+})
+
+function useLoadingIndicator(opts) {
+	const progress = ref(0)
+	const isLoading = ref(false)
+	const step = computed(() => 10000 / opts.duration)
+
+	let _timer = null
+	let _throttle = null
+
+	function start() {
+		clear()
+		progress.value = 0
+		if (opts.throttle) {
+			_throttle = setTimeout(() => {
+				isLoading.value = true
+				_startTimer()
+			}, opts.throttle)
+		} else {
+			isLoading.value = true
+			_startTimer()
+		}
+	}
+
+	function finish() {
+		progress.value = 100
+		_hide()
+	}
+
+	function clear() {
+		clearInterval(_timer)
+		clearTimeout(_throttle)
+		_timer = null
+		_throttle = null
+	}
+
+	function _increase(num) {
+		progress.value = Math.min(100, progress.value + num)
+	}
+
+	function _hide() {
+		clear()
+		setTimeout(() => {
+			isLoading.value = false
+			setTimeout(() => {
+				progress.value = 0
+			}, 400)
+		}, 500)
+	}
+
+	function _startTimer() {
+		_timer = setInterval(() => {
+			_increase(step.value)
+		}, 100)
+	}
+
+	return { progress, isLoading, start, finish, clear }
+}
+</script>
+
+<template>
+	<div
+		class="loading-indicator-bar"
+		:style="{
+			'--_width': `${indicator.progress.value}%`,
+			'--_height': `${indicator.isLoading.value ? props.height : 0}px`,
+			'--_opacity': `${indicator.isLoading.value ? 1 : 0}`,
+			top: `0`,
+			right: `0`,
+			left: `${props.offsetWidth}`,
+			pointerEvents: 'none',
+			width: `var(--_width)`,
+			height: `var(--_height)`,
+			borderRadius: `var(--_height)`,
+			// opacity: `var(--_opacity)`,
+			background: `${props.color}`,
+			backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
+			transition: 'width 0.1s ease-in-out, height 0.1s ease-out',
+			zIndex: 6,
+		}"
+	>
+		<slot />
+	</div>
+</template>
+<style lang="scss" scoped>
+.loading-indicator-bar::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	width: var(--_width);
+	bottom: 0;
+	background-image: radial-gradient(80% 100% at 20% 0%, var(--color-brand) 0%, transparent 80%);
+	opacity: calc(var(--_opacity) * 0.1);
+	z-index: 5;
+	transition:
+		width 0.1s ease-in-out,
+		opacity 0.1s ease-out;
+}
+</style>
@@ -149,7 +149,7 @@ const handleOptionsClick = async (args) => {
 			break
 		case 'edit':
 			await router.push({
-				path: `/instance/${encodeURIComponent(args.item.path)}`,
+				path: `/instance/${encodeURIComponent(args.item.path)}/`,
 			})
 			break
 		case 'duplicate':
@@ -1,107 +1,81 @@
 <template>
 	<div
-		v-if="accounts.length === 0"
-		class="flex flex-col gap-3 bg-button-bg border border-solid border-surface-5 rounded-xl p-3 mt-2"
+		v-if="mode !== 'isolated'"
+		ref="button"
+		class="button-base mt-2 px-3 py-2 bg-button-bg rounded-xl flex items-center gap-2"
+		:class="{ expanded: mode === 'expanded' }"
+		@click="toggleMenu"
 	>
-		<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>
-	</div>
-	<Accordion
-		v-else
-		class="w-full mt-2 bg-button-bg border border-solid border-surface-5 rounded-xl overflow-clip"
-		button-class="button-base w-full bg-transparent px-3 py-2 border-0 cursor-pointer"
-		:open-by-default="false"
-	>
-		<template #title>
-			<div class="flex gap-2 w-full min-w-0">
-				<Avatar
-					size="36px"
-					:src="
-						selectedAccount
-							? avatarUrl
-							: 'https://launcher-files.modrinth.com/assets/steve_head.png'
-					"
-				/>
-				<div class="flex flex-col items-start w-full min-w-0">
-					<span class="truncate w-full text-left">{{
-						selectedAccount ? selectedAccount.profile.name : formatMessage(messages.selectAccount)
-					}}</span>
-					<span class="text-secondary text-xs">{{ formatMessage(messages.minecraftAccount) }}</span>
-				</div>
-			</div>
-		</template>
-		<div class="bg-button-bg pt-1 pb-2 border border-solid border-surface-5">
-			<template v-if="accounts.length > 0">
-				<div v-for="account in accounts" :key="account.profile.id" class="flex gap-1 items-center">
-					<button
-						class="flex items-center flex-shrink flex-grow overflow-clip gap-2 p-2 border-0 bg-transparent cursor-pointer button-base min-w-0"
-						@click="setAccount(account)"
-					>
-						<RadioButtonCheckedIcon
-							v-if="selectedAccount && selectedAccount.profile.id === account.profile.id"
-							class="w-5 h-5 text-brand shrink-0"
-						/>
-						<RadioButtonIcon v-else class="w-5 h-5 text-secondary shrink-0" />
-						<Avatar :src="getAccountAvatarUrl(account)" size="24px" />
-						<p
-							class="m-0 truncate min-w-0"
-							:class="
-								selectedAccount && selectedAccount.profile.id === account.profile.id
-									? 'text-contrast font-semibold'
-									: 'text-primary'
-							"
-						>
-							{{ account.profile.name }}
-						</p>
-					</button>
-					<ButtonStyled circular color="red" color-fill="none" hover-color-fill="background">
-						<button
-							v-tooltip="formatMessage(messages.removeAccount)"
-							class="mr-2"
-							@click="logout(account.profile.id)"
-						>
-							<TrashIcon />
-						</button>
-					</ButtonStyled>
-				</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>
-			</div>
+		<Avatar
+			size="36px"
+			:src="
+				selectedAccount ? avatarUrl : 'https://launcher-files.modrinth.com/assets/steve_head.png'
+			"
+		/>
+		<div class="flex flex-col w-full">
+			<span>{{ selectedAccount ? selectedAccount.profile.name : 'Select account' }}</span>
+			<span class="text-secondary text-xs">Minecraft account</span>
 		</div>
-	</Accordion>
+		<DropdownIcon class="w-5 h-5 shrink-0" />
+	</div>
+	<transition name="fade">
+		<Card
+			v-if="showCard || mode === 'isolated'"
+			ref="card"
+			class="account-card"
+			:class="{ expanded: mode === 'expanded', isolated: mode === 'isolated' }"
+		>
+			<div v-if="selectedAccount" class="selected account">
+				<Avatar size="xs" :src="avatarUrl" />
+				<div>
+					<h4>{{ selectedAccount.profile.name }}</h4>
+					<p>Selected</p>
+				</div>
+				<Button
+					v-tooltip="'Log out'"
+					icon-only
+					color="raised"
+					@click="logout(selectedAccount.profile.id)"
+				>
+					<TrashIcon />
+				</Button>
+			</div>
+			<div v-else class="logged-out account">
+				<h4>Not signed in</h4>
+				<Button
+					v-tooltip="'Log in'"
+					:disabled="loginDisabled"
+					icon-only
+					color="primary"
+					@click="login()"
+				>
+					<LogInIcon v-if="!loginDisabled" />
+					<SpinnerIcon v-else class="animate-spin" />
+				</Button>
+			</div>
+			<div v-if="displayAccounts.length > 0" class="account-group">
+				<div v-for="account in displayAccounts" :key="account.profile.id" class="account-row">
+					<Button class="option account" @click="setAccount(account)">
+						<Avatar :src="getAccountAvatarUrl(account)" class="icon" />
+						<p>{{ account.profile.name }}</p>
+					</Button>
+					<Button v-tooltip="'Log out'" icon-only @click="logout(account.profile.id)">
+						<TrashIcon />
+					</Button>
+				</div>
+			</div>
+			<Button v-if="accounts.length > 0" @click="login()">
+				<PlusIcon />
+				Add account
+			</Button>
+		</Card>
+	</transition>
 </template>

-<script setup lang="ts">
-import {
-	LogInIcon,
-	PlusIcon,
-	RadioButtonCheckedIcon,
-	RadioButtonIcon,
-	SpinnerIcon,
-	TrashIcon,
-} from '@modrinth/assets'
-import {
-	Accordion,
-	Avatar,
-	ButtonStyled,
-	defineMessages,
-	injectNotificationManager,
-	useVIntl,
-} from '@modrinth/ui'
-import type { Ref } from 'vue'
-import { computed, onUnmounted, ref } from 'vue'
+<script setup>
+import { DropdownIcon, LogInIcon, PlusIcon, SpinnerIcon, TrashIcon } from '@modrinth/assets'
+import { Avatar, Button, Card, injectNotificationManager } from '@modrinth/ui'
+import { computed, onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue'

 import { trackEvent } from '@/helpers/analytics'
 import {
@@ -113,47 +87,39 @@ import {
 } from '@/helpers/auth'
 import { process_listener } from '@/helpers/events'
 import { getPlayerHeadUrl } from '@/helpers/rendering/batch-skin-renderer.ts'
-import type { Skin } from '@/helpers/skins'
 import { get_available_skins } from '@/helpers/skins'
 import { handleSevereError } from '@/store/error.js'

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

-const emit = defineEmits<{
-	change: []
-}>()
+defineProps({
+	mode: {
+		type: String,
+		required: true,
+		default: 'normal',
+	},
+})

-type MinecraftCredential = {
-	profile: {
-		id: string
-		name: string
-	}
-}
+const emit = defineEmits(['change'])

-const accounts: Ref<MinecraftCredential[]> = ref([])
+const accounts = ref({})
 const loginDisabled = ref(false)
-const defaultUser = ref<string | undefined>()
-const equippedSkin = ref<Skin | null>(null)
-const headUrlCache = ref(new Map<string, string>())
+const defaultUser = ref()
+const equippedSkin = ref(null)
+const headUrlCache = ref(new Map())

 async function refreshValues() {
 	defaultUser.value = await get_default_user().catch(handleError)
-	const userList = await users().catch(handleError)
-	accounts.value = Array.isArray(userList) ? [...userList] : []
-	accounts.value.sort((a, b) => (a.profile?.name ?? '').localeCompare(b.profile?.name ?? ''))
+	accounts.value = await users().catch(handleError)

 	try {
 		const skins = await get_available_skins()
-		equippedSkin.value = skins.find((skin) => skin.is_equipped) ?? null
+		equippedSkin.value = skins.find((skin) => skin.is_equipped)

 		if (equippedSkin.value) {
 			try {
 				const headUrl = await getPlayerHeadUrl(equippedSkin.value)
-				headUrlCache.value = new Map(headUrlCache.value).set(
-					equippedSkin.value.texture_key,
-					headUrl,
-				)
+				headUrlCache.value.set(equippedSkin.value.texture_key, headUrl)
 			} catch (error) {
 				console.warn('Failed to get head render for equipped skin:', error)
 			}
@@ -163,32 +129,19 @@ async function refreshValues() {
 	}
 }

-async function setEquippedSkin(skin: Skin) {
-	equippedSkin.value = skin
-
-	try {
-		const headUrl = await getPlayerHeadUrl(skin)
-		headUrlCache.value = new Map(headUrlCache.value).set(skin.texture_key, headUrl)
-	} catch (error) {
-		console.warn('Failed to get head render for equipped skin:', error)
-	}
-}
-
-function setLoginDisabled(value: boolean) {
+function setLoginDisabled(value) {
 	loginDisabled.value = value
 }

 defineExpose({
 	refreshValues,
-	setEquippedSkin,
 	setLoginDisabled,
 	loginDisabled,
 })
-
 await refreshValues()

-const selectedAccount = computed(() =>
-	accounts.value.find((account) => account.profile.id === defaultUser.value),
+const displayAccounts = computed(() =>
+	accounts.value.filter((account) => defaultUser.value !== account.profile.id),
 )

 const avatarUrl = computed(() => {
@@ -205,7 +158,7 @@ const avatarUrl = computed(() => {
 	return 'https://launcher-files.modrinth.com/assets/steve_head.png'
 })

-function getAccountAvatarUrl(account: MinecraftCredential) {
+function getAccountAvatarUrl(account) {
 	if (
 		account.profile.id === selectedAccount.value?.profile?.id &&
 		equippedSkin.value?.texture_key
@@ -218,10 +171,13 @@ function getAccountAvatarUrl(account: MinecraftCredential) {
 	return `https://mc-heads.net/avatar/${account.profile.id}/128`
 }

-async function setAccount(account: MinecraftCredential) {
+const selectedAccount = computed(() =>
+	accounts.value.find((account) => account.profile.id === defaultUser.value),
+)
+
+async function setAccount(account) {
 	defaultUser.value = account.profile.id
 	await set_default_user(account.profile.id).catch(handleError)
-	await refreshValues()
 	emit('change')
 }

@@ -231,57 +187,292 @@ async function login() {

 	if (loggedIn) {
 		await setAccount(loggedIn)
+		await refreshValues()
 	}

 	trackEvent('AccountLogIn')
 	loginDisabled.value = false
 }

-async function logout(id: string) {
+const logout = async (id) => {
 	await remove_user(id).catch(handleError)
 	await refreshValues()
 	if (!selectedAccount.value && accounts.value.length > 0) {
 		await setAccount(accounts.value[0])
+		await refreshValues()
 	} else {
 		emit('change')
 	}
 	trackEvent('AccountLogOut')
 }

+const showCard = ref(false)
+const card = ref(null)
+const button = ref(null)
+const handleClickOutside = (event) => {
+	const elements = document.elementsFromPoint(event.clientX, event.clientY)
+	if (
+		card.value &&
+		card.value.$el !== event.target &&
+		!elements.includes(card.value.$el) &&
+		!button.value.contains(event.target)
+	) {
+		toggleMenu(false)
+	}
+}
+
+function toggleMenu(override = true) {
+	if (showCard.value || !override) {
+		showCard.value = false
+	} else {
+		showCard.value = true
+	}
+}
+
 const unlisten = await process_listener(async (e) => {
 	if (e.event === 'launched') {
 		await refreshValues()
 	}
 })

+onMounted(() => {
+	window.addEventListener('click', handleClickOutside)
+})
+
+onBeforeUnmount(() => {
+	window.removeEventListener('click', handleClickOutside)
+})
+
 onUnmounted(() => {
 	unlisten()
 })
-
-const messages = defineMessages({
-	notSignedIn: {
-		id: 'minecraft-account.not-signed-in',
-		defaultMessage: 'Not signed in',
-	},
-	addAccount: {
-		id: 'minecraft-account.add-account',
-		defaultMessage: 'Add account',
-	},
-	removeAccount: {
-		id: 'minecraft-account.remove-account',
-		defaultMessage: 'Remove account',
-	},
-	selectAccount: {
-		id: 'minecraft-account.select-account',
-		defaultMessage: 'Select account',
-	},
-	minecraftAccount: {
-		id: 'minecraft-account.label',
-		defaultMessage: 'Minecraft account',
-	},
-	signInToMinecraft: {
-		id: 'minecraft-account.sign-in',
-		defaultMessage: 'Sign in to Minecraft',
-	},
-})
 </script>
+
+<style scoped lang="scss">
+.selected {
+	background: var(--color-brand-highlight);
+	border-radius: var(--radius-lg);
+	color: var(--color-contrast);
+	gap: 1rem;
+}
+
+.logged-out {
+	background: var(--color-bg);
+	border-radius: var(--radius-lg);
+	gap: 1rem;
+}
+
+.account {
+	width: max-content;
+	display: flex;
+	align-items: center;
+	text-align: left;
+	padding: 0.5rem 1rem;
+
+	h4,
+	p {
+		margin: 0;
+	}
+}
+
+.account-card {
+	position: fixed;
+	display: flex;
+	flex-direction: column;
+	margin-top: 0.5rem;
+	right: 2rem;
+	z-index: 11;
+	gap: 0.5rem;
+	padding: 1rem;
+	border: 1px solid var(--color-divider);
+	width: max-content;
+	user-select: none;
+	-ms-user-select: none;
+	-webkit-user-select: none;
+	max-height: calc(100vh - 300px);
+	overflow-y: auto;
+
+	&::-webkit-scrollbar-track {
+		border-top-right-radius: 1rem;
+		border-bottom-right-radius: 1rem;
+	}
+
+	&::-webkit-scrollbar {
+		border-top-right-radius: 1rem;
+		border-bottom-right-radius: 1rem;
+	}
+
+	&.hidden {
+		display: none;
+	}
+
+	&.expanded {
+		left: 13.5rem;
+	}
+
+	&.isolated {
+		position: relative;
+		left: 0;
+		top: 0;
+	}
+}
+
+.accounts-title {
+	font-size: 1.2rem;
+	font-weight: bolder;
+}
+
+.account-group {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.option {
+	width: calc(100% - 2.25rem);
+	background: var(--color-raised-bg);
+	color: var(--color-base);
+	box-shadow: none;
+
+	img {
+		margin-right: 0.5rem;
+	}
+}
+
+.icon {
+	--size: 1.5rem !important;
+}
+
+.account-row {
+	display: flex;
+	flex-direction: row;
+	gap: 0.5rem;
+	vertical-align: center;
+	justify-content: space-between;
+	padding-right: 1rem;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+	transition:
+		opacity 0.25s ease,
+		translate 0.25s ease,
+		scale 0.25s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+	translate: 0 -2rem;
+	scale: 0.9;
+}
+
+.avatar-button {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	color: var(--color-base);
+	background-color: var(--color-button-bg);
+	border-radius: var(--radius-md);
+	width: 100%;
+	padding: 0.5rem 0.75rem;
+	text-align: left;
+
+	&.expanded {
+		border: 1px solid var(--color-divider);
+		padding: 1rem;
+	}
+}
+
+.avatar-text {
+	margin: auto 0 auto 0.25rem;
+	display: flex;
+	flex-direction: column;
+}
+
+.text {
+	width: 6rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.accounts-text {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	margin: 0;
+}
+
+.qr-code {
+	background-color: white !important;
+	border-radius: var(--radius-md);
+}
+
+.modal-body {
+	display: flex;
+	flex-direction: row;
+	gap: var(--gap-lg);
+	align-items: center;
+	padding: var(--gap-xl);
+
+	.modal-text {
+		display: flex;
+		flex-direction: column;
+		gap: var(--gap-sm);
+		width: 100%;
+
+		h2,
+		p {
+			margin: 0;
+		}
+
+		.code-text {
+			display: flex;
+			flex-direction: row;
+			gap: var(--gap-xs);
+			align-items: center;
+
+			.code {
+				background-color: var(--color-bg);
+				border-radius: var(--radius-md);
+				border: solid 1px var(--color-button-bg);
+				font-family: var(--mono-font);
+				letter-spacing: var(--gap-md);
+				color: var(--color-contrast);
+				font-size: 2rem;
+				font-weight: bold;
+				padding: var(--gap-sm) 0 var(--gap-sm) var(--gap-md);
+			}
+
+			.btn {
+				width: 2.5rem;
+				height: 2.5rem;
+			}
+		}
+	}
+}
+
+.button-row {
+	display: flex;
+	flex-direction: row;
+}
+
+.modal {
+	position: absolute;
+}
+
+.code {
+	color: var(--color-brand);
+	padding: 0.05rem 0.1rem;
+	// row not column
+	display: flex;
+
+	.card {
+		background: var(--color-base);
+		color: var(--color-contrast);
+		padding: 0.5rem 1rem;
+	}
+}
+</style>
@@ -1,434 +0,0 @@
-<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 v-if="offline" class="flex items-center gap-1">
-			<UnplugIcon class="text-secondary" />
-			<span class="text-sm text-contrast"> {{ formatMessage(messages.offline) }} </span>
-		</div>
-		<div
-			class="flex border-solid border-surface-5 text-sm items-center gap-2 py-1.5 px-3 rounded-xl border"
-		>
-			<template v-if="selectedProcess">
-				<OnlineIndicatorIcon />
-				<div class="text-contrast flex items-center gap-2">
-					<router-link
-						v-tooltip="formatMessage(messages.viewInstance)"
-						:to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`"
-						class="hover:underline"
-					>
-						{{ selectedProcess.profile.name }}
-					</router-link>
-					<Dropdown
-						v-if="currentProcesses.length > 1"
-						placement="bottom"
-						:triggers="['click']"
-						:hide-triggers="['click']"
-						@show="showProfiles = true"
-						@hide="showProfiles = false"
-					>
-						<ButtonStyled type="transparent" circular size="small">
-							<button
-								v-tooltip="
-									showProfiles
-										? formatMessage(messages.hideMoreRunningInstances)
-										: formatMessage(messages.showMoreRunningInstances)
-								"
-							>
-								<DropdownIcon :class="{ 'rotate-180': !!showProfiles }" />
-							</button>
-						</ButtonStyled>
-						<template #popper>
-							<div class="flex w-[20rem] max-h-[24rem] flex-col gap-2 overflow-auto">
-								<div
-									v-for="process in currentProcesses"
-									:key="process.uuid"
-									class="flex w-full items-center gap-2 rounded-xl bg-surface-4 p-2 text-sm"
-								>
-									<button
-										v-tooltip.left="
-											process.uuid === selectedProcess.uuid
-												? formatMessage(messages.primaryInstance)
-												: formatMessage(messages.makePrimaryInstance)
-										"
-										class="flex flex-grow items-center gap-2"
-										:class="{
-											'active:scale-95 transition-transform': process.uuid !== selectedProcess.uuid,
-										}"
-										:disabled="process.uuid === selectedProcess.uuid"
-										@click="selectProcess(process)"
-									>
-										<OnlineIndicatorIcon />
-										<span class="mr-auto text-contrast flex items-center gap-2">
-											{{ process.profile.name }}
-											<StarIcon v-if="process.uuid === selectedProcess.uuid" class="text-orange" />
-										</span>
-									</button>
-									<button
-										v-tooltip="formatMessage(messages.stopInstance)"
-										class="active:scale-95 flex"
-										@click.stop="stop(process)"
-									>
-										<StopCircleIcon class="text-red size-5" />
-									</button>
-									<button
-										v-tooltip="formatMessage(messages.viewLogs)"
-										class="active:scale-95 flex"
-										@click.stop="goToTerminal(process.profile.path)"
-									>
-										<TerminalSquareIcon class="text-secondary size-5" />
-									</button>
-								</div>
-							</div>
-						</template>
-					</Dropdown>
-				</div>
-				<button
-					v-tooltip="formatMessage(messages.stopInstance)"
-					class="active:scale-95 flex"
-					@click="stop(selectedProcess)"
-				>
-					<StopCircleIcon class="text-red size-5" />
-				</button>
-				<button
-					v-tooltip="formatMessage(messages.viewLogs)"
-					class="active:scale-95 flex"
-					@click="goToTerminal()"
-				>
-					<TerminalSquareIcon class="text-secondary size-5" />
-				</button>
-			</template>
-			<template v-else>
-				<span class="size-2 rounded-full bg-secondary" />
-				<span class="text-secondary"> {{ formatMessage(messages.noInstancesRunning) }} </span>
-			</template>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import {
-	DownloadIcon,
-	DropdownIcon,
-	OnlineIndicatorIcon,
-	StarIcon,
-	StopCircleIcon,
-	TerminalSquareIcon,
-	UnplugIcon,
-} from '@modrinth/assets'
-import {
-	ButtonStyled,
-	defineMessages,
-	injectNotificationManager,
-	injectPopupNotificationManager,
-	type PopupNotification,
-	type PopupNotificationProgressItem,
-	useVIntl,
-} from '@modrinth/ui'
-import { Dropdown } from 'floating-vue'
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-import { trackEvent } from '@/helpers/analytics'
-import { loading_listener, process_listener } from '@/helpers/events'
-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'
-
-const { handleError } = injectNotificationManager()
-const popupNotificationManager = injectPopupNotificationManager()
-const { formatMessage } = useVIntl()
-
-const router = useRouter()
-
-const showProfiles = ref(false)
-
-interface RunningProcess {
-	uuid: string
-	profile_path: string
-	profile: GameInstance
-}
-
-const messages = defineMessages({
-	offline: {
-		id: 'app.action-bar.offline',
-		defaultMessage: 'Offline',
-	},
-	viewInstance: {
-		id: 'app.action-bar.view-instance',
-		defaultMessage: 'View instance',
-	},
-	showMoreRunningInstances: {
-		id: 'app.action-bar.show-more-running-instances',
-		defaultMessage: 'Show more running instances',
-	},
-	hideMoreRunningInstances: {
-		id: 'app.action-bar.hide-more-running-instances',
-		defaultMessage: 'Hide more running instances',
-	},
-	primaryInstance: {
-		id: 'app.action-bar.primary-instance',
-		defaultMessage: 'Primary instance',
-	},
-	makePrimaryInstance: {
-		id: 'app.action-bar.make-primary-instance',
-		defaultMessage: 'Make primary instance',
-	},
-	stopInstance: {
-		id: 'app.action-bar.stop-instance',
-		defaultMessage: 'Stop instance',
-	},
-	viewLogs: {
-		id: 'app.action-bar.view-logs',
-		defaultMessage: 'View logs',
-	},
-	noInstancesRunning: {
-		id: 'app.action-bar.no-instances-running',
-		defaultMessage: 'No instances running',
-	},
-	downloadingJava: {
-		id: 'app.action-bar.downloading-java',
-		defaultMessage: 'Downloading Java {version}',
-	},
-	downloads: {
-		id: 'app.action-bar.downloads',
-		defaultMessage: 'Downloads',
-	},
-	viewActiveDownloads: {
-		id: 'app.action-bar.view-active-downloads',
-		defaultMessage: 'View active downloads',
-	},
-})
-
-const currentProcesses = ref<RunningProcess[]>([])
-const selectedProcess = ref<RunningProcess | undefined>()
-
-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) => {
-		handleError(error)
-		return []
-	})
-
-	currentProcesses.value = processes
-		.map((process) => {
-			const profile = profiles.find((item) => process.profile_path === item.path)
-			if (!profile) {
-				return null
-			}
-			return {
-				...process,
-				profile,
-			}
-		})
-		.filter((process): process is RunningProcess => process !== null)
-	if (!selectedProcess.value || !currentProcesses.value.includes(selectedProcess.value)) {
-		selectedProcess.value = currentProcesses.value[0]
-	}
-}
-
-await refresh()
-
-const offline = ref(!navigator.onLine)
-function handleOffline() {
-	offline.value = true
-}
-function handleOnline() {
-	offline.value = false
-}
-
-onMounted(() => {
-	window.addEventListener('offline', handleOffline)
-	window.addEventListener('online', handleOnline)
-})
-
-const unlistenProcess = await process_listener(async () => {
-	await refresh()
-})
-
-const stop = async (process: RunningProcess) => {
-	try {
-		await killProcess(process.uuid).catch(handleError)
-
-		trackEvent('InstanceStop', {
-			loader: process.profile.loader,
-			game_version: process.profile.game_version,
-			source: 'AppBar',
-		})
-	} catch (e) {
-		console.error(e)
-	}
-	await refresh()
-}
-
-function goToTerminal(path?: string) {
-	const selectedPath = path ?? selectedProcess.value?.profile.path
-	if (!selectedPath) {
-		return
-	}
-	router.push(`/instance/${encodeURIComponent(selectedPath)}/logs`)
-}
-
-const currentLoadingBars = ref<LoadingBar[]>([])
-const notificationId = ref<string | number | null>(null)
-const dismissed = ref(false)
-
-function getLoadingBarKey(loadingBar: LoadingBar): string {
-	return `${loadingBar.loading_bar_uuid ?? loadingBar.id}`
-}
-
-function getLoadingProgress(loadingBar: LoadingBar): number {
-	if (!loadingBar.total || loadingBar.total <= 0) {
-		return 0
-	}
-	return Math.max(0, Math.min(1, (loadingBar.current ?? 0) / (loadingBar.total ?? 0)))
-}
-
-function getLoadingText(loadingBar: LoadingBar): string {
-	const percent = Math.floor(getLoadingProgress(loadingBar) * 100)
-	return loadingBar.message ? `${percent}% ${loadingBar.message}` : `${percent}%`
-}
-
-function getNotification(): PopupNotification | null {
-	if (!notificationId.value) {
-		return null
-	}
-	const notification = popupNotificationManager
-		.getNotifications()
-		.find((notification) => notification.id === notificationId.value)
-	return notification ?? null
-}
-
-function removeNotification(): void {
-	if (!notificationId.value) {
-		return
-	}
-	popupNotificationManager.removeNotification(notificationId.value)
-	notificationId.value = null
-}
-
-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,
-	}))
-}
-
-const hasVisibleActiveDownloadToasts = computed(() => !!getNotification())
-const hasActiveLoadingBars = computed(() => currentLoadingBars.value.length > 0)
-
-function updateNotification(resummon = false): void {
-	if (resummon) {
-		dismissed.value = false
-	}
-
-	if (currentLoadingBars.value.length === 0) {
-		removeNotification()
-		dismissed.value = false
-		return
-	}
-
-	if (notificationId.value && !getNotification()) {
-		notificationId.value = null
-		dismissed.value = true
-	}
-
-	if (dismissed.value && !resummon) {
-		return
-	}
-
-	let notif = getNotification()
-	const progressItems = buildDownloadItems()
-
-	if (notif) {
-		notif.title = formatMessage(messages.downloads)
-		notif.text = undefined
-		notif.progressItems = progressItems
-		notif.progress = undefined
-		notif.waiting = undefined
-	} else {
-		notif = popupNotificationManager.addPopupNotification({
-			title: formatMessage(messages.downloads),
-			type: 'download',
-			autoCloseMs: null,
-			progressItems,
-		})
-		notificationId.value = notif.id
-	}
-}
-
-function formatLoadingBars(loadingBar: LoadingBar): LoadingBar {
-	const formatted = { ...loadingBar }
-	if (formatted.bar_type?.type === 'java_download') {
-		formatted.title = formatMessage(messages.downloadingJava, {
-			version: formatted.bar_type.version,
-		})
-	}
-	if (formatted.bar_type?.profile_path) {
-		formatted.title = formatted.bar_type.profile_path
-	}
-	if (formatted.bar_type?.pack_name) {
-		formatted.title = formatted.bar_type.pack_name
-	}
-	return formatted
-}
-
-async function refreshLoadingBars() {
-	const bars: Record<string, LoadingBar> = await progress_bars_list().catch((error) => {
-		handleError(error)
-		return {}
-	})
-
-	currentLoadingBars.value = Object.values(bars)
-		.map(formatLoadingBars)
-		.filter((bar) => bar?.bar_type?.type !== 'launcher_update')
-
-	currentLoadingBars.value.sort((a, b) => {
-		const aKey = `${a.loading_bar_uuid ?? a.id ?? ''}`
-		const bKey = `${b.loading_bar_uuid ?? b.id ?? ''}`
-		return aKey.localeCompare(bKey)
-	})
-
-	updateNotification()
-}
-
-await refreshLoadingBars()
-
-const unlistenLoading = await loading_listener(async () => {
-	await refreshLoadingBars()
-})
-
-function openDownloadToast() {
-	updateNotification(true)
-}
-
-function selectProcess(process: RunningProcess) {
-	selectedProcess.value = process
-}
-
-onBeforeUnmount(() => {
-	removeNotification()
-	dismissed.value = false
-	window.removeEventListener('offline', handleOffline)
-	window.removeEventListener('online', handleOnline)
-	unlistenProcess()
-	unlistenLoading()
-})
-</script>
@@ -3,7 +3,6 @@
 		ref="outerRef"
 		data-tauri-drag-region
 		class="min-w-0 overflow-hidden pl-3"
-		:class="{ 'breadcrumb-fade-mask': isOverflowing }"
 		:style="isOverflowing ? { '--scroll-distance': `-${overflowAmount}px` } : undefined"
 		@mouseenter="onMouseEnter"
 		@mouseleave="onMouseLeave"
@@ -129,16 +128,6 @@ watch(breadcrumbs, () => {
 </script>

 <style scoped>
-.breadcrumb-fade-mask {
-	mask-image: linear-gradient(
-		to right,
-		transparent,
-		black 12px,
-		black calc(100% - 12px),
-		transparent
-	);
-}
-
 .breadcrumbs-scroll {
 	animation: breadcrumb-scroll 10s ease-in-out infinite;
 }
@@ -6,7 +6,6 @@ import {
 	HammerIcon,
 	LogInIcon,
 	UpdatedIcon,
-	WrenchIcon,
 	XIcon,
 } from '@modrinth/assets'
 import { ButtonStyled, Collapsible, injectNotificationManager } from '@modrinth/ui'
@@ -61,7 +60,7 @@ defineExpose({
 			errorType.value = 'directory_move'
 			supportLink.value = 'https://support.modrinth.com'

-			if (errorVal.message.includes('directory is not writable')) {
+			if (errorVal.message.includes('directory is not writeable')) {
 				metadata.value.readOnly = true
 			}

@@ -156,7 +155,7 @@ async function copyToClipboard(text) {

 <template>
 	<ModalWrapper ref="errorModal" :header="title" :closable="closable">
-		<div class="modal-body max-w-[550px]">
+		<div class="modal-body">
 			<div class="markdown-body">
 				<template v-if="errorType === 'minecraft_auth'">
 					<template v-if="metadata.network">
@@ -281,7 +280,7 @@ async function copyToClipboard(text) {
 					{{ debugInfo }}
 				</template>
 				<template v-if="hasDebugInfo">
-					<div class="w-full h-[1px] bg-surface-5 mb-3"></div>
+					<hr />
 					<p>
 						If nothing is working and you need help, visit
 						<a :href="supportLink">our support page</a>
@@ -297,47 +296,28 @@ async function copyToClipboard(text) {
 				<ButtonStyled v-if="closable">
 					<button @click="errorModal.hide()"><XIcon /> Close</button>
 				</ButtonStyled>
+				<ButtonStyled v-if="hasDebugInfo">
+					<button :disabled="copied" @click="copyToClipboard(debugInfo)">
+						<template v-if="copied"> <CheckIcon class="text-green" /> Copied! </template>
+						<template v-else> <CopyIcon /> Copy debug info </template>
+					</button>
+				</ButtonStyled>
 			</div>
 			<template v-if="hasDebugInfo">
-				<div class="flex flex-col gap-2">
-					<div class="w-full h-[1px] bg-surface-5"></div>
-
-					<div class="overflow-clip">
-						<button
-							class="flex items-center justify-between w-full bg-transparent border-0 py-4 cursor-pointer"
-							@click="errorCollapsed = !errorCollapsed"
-						>
-							<span class="flex items-center gap-2 text-contrast font-extrabold m-0">
-								<WrenchIcon class="h-4 w-4" />
-								Debug information
-							</span>
-							<DropdownIcon
-								class="h-5 w-5 text-secondary transition-transform"
-								:class="{ 'rotate-180': !errorCollapsed }"
-							/>
-						</button>
-						<Collapsible :collapsed="errorCollapsed">
-							<div
-								class="p-3 bg-surface-2 rounded-2xl text-xs grid grid-cols-[1fr_auto] max-w-full items-start"
-							>
-								<div
-									class="m-0 p-0 rounded-none bg-transparent text-sm font-mono break-words overflow-auto"
-								>
-									{{ debugInfo }}
-								</div>
-								<ButtonStyled circular>
-									<button
-										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>
-							</div>
-						</Collapsible>
-					</div>
+				<div class="bg-button-bg rounded-xl mt-2 overflow-clip">
+					<button
+						class="flex items-center justify-between w-full bg-transparent border-0 px-4 py-3 cursor-pointer"
+						@click="errorCollapsed = !errorCollapsed"
+					>
+						<span class="text-contrast font-extrabold m-0">Debug information:</span>
+						<DropdownIcon
+							class="h-5 w-5 text-secondary transition-transform"
+							:class="{ 'rotate-180': !errorCollapsed }"
+						/>
+					</button>
+					<Collapsible :collapsed="errorCollapsed">
+						<pre class="m-0 px-4 py-3 bg-bg rounded-none">{{ debugInfo }}</pre>
+					</Collapsible>
 				</div>
 			</template>
 		</div>
@@ -1,8 +1,7 @@
 <script setup>
-import { WrenchIcon, XIcon } from '@modrinth/assets'
+import { PlusIcon, XIcon } from '@modrinth/assets'
 import {
-	Accordion,
-	ButtonStyled,
+	Button,
 	Checkbox,
 	commonMessages,
 	defineMessages,
@@ -10,7 +9,7 @@ import {
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
-import { save } from '@tauri-apps/plugin-dialog'
+import { open } from '@tauri-apps/plugin-dialog'
 import { ref } from 'vue'

 import { PackageIcon, VersionIcon } from '@/assets/icons'
@@ -41,13 +40,9 @@ const messages = defineMessages({
 	},
 	selectFilesLabel: {
 		id: 'app.export-modal.select-files-label',
-		defaultMessage: 'Configure which files are included in this export',
+		defaultMessage: 'Select files and folders to include in pack',
 	},
 	exportButton: { id: 'app.export-modal.export-button', defaultMessage: 'Export' },
-	includeFile: {
-		id: 'app.export-modal.include-file-accessibility-label',
-		defaultMessage: 'Include "{file}"?',
-	},
 })

 const props = defineProps({
@@ -70,6 +65,7 @@ const exportDescription = ref('')
 const versionInput = ref('1.0.0')
 const files = ref([])
 const folders = ref([])
+const showingFiles = ref(false)

 const initFiles = async () => {
 	const newFolders = new Map()
@@ -91,12 +87,7 @@ const initFiles = async () => {
 					folder.startsWith('modrinth_logs') ||
 					folder.startsWith('.fabric'),
 			}))
-			.filter(
-				(pathData) =>
-					!pathData.path.includes('.DS_Store') &&
-					pathData.path !== 'mods/.connector' &&
-					!pathData.path.startsWith('mods/.connector/'),
-			)
+			.filter((pathData) => !pathData.path.includes('.DS_Store'))
 			.forEach((pathData) => {
 				const parent = pathData.path.split(sep).slice(0, -1).join(sep)
 				if (parent !== '') {
@@ -130,20 +121,15 @@ const exportPack = async () => {
 			}
 		})
 	})
-	const outputPath = await save({
-		defaultPath: `${nameInput.value} ${versionInput.value}.mrpack`,
-		filters: [
-			{
-				name: 'Modrinth Modpack',
-				extensions: ['mrpack'],
-			},
-		],
+	const outputPath = await open({
+		directory: true,
+		multiple: false,
 	})

 	if (outputPath) {
 		export_profile_mrpack(
 			props.instance.path,
-			outputPath,
+			outputPath + `/${nameInput.value} ${versionInput.value}.mrpack`,
 			filesToExport,
 			versionInput.value,
 			exportDescription.value,
@@ -156,104 +142,188 @@ const exportPack = async () => {

 <template>
 	<ModalWrapper ref="exportModal" :header="formatMessage(messages.header)">
-		<div class="flex flex-col gap-4 w-[40rem]">
-			<div class="grid grid-cols-2 gap-4">
-				<div class="labeled_input">
-					<p>{{ formatMessage(messages.modpackNameLabel) }}</p>
-					<StyledInput
-						v-model="nameInput"
-						:icon="PackageIcon"
-						type="text"
-						:placeholder="formatMessage(messages.modpackNamePlaceholder)"
-						clearable
-					/>
-				</div>
-				<div class="labeled_input">
-					<p>{{ formatMessage(messages.versionNumberLabel) }}</p>
-					<StyledInput
-						v-model="versionInput"
-						:icon="VersionIcon"
-						type="text"
-						:placeholder="formatMessage(messages.versionNumberPlaceholder)"
-						clearable
-					/>
-				</div>
-			</div>
-			<div class="flex flex-col gap-2">
-				<p class="m-0">{{ formatMessage(commonMessages.descriptionLabel) }}</p>
+		<div class="modal-body">
+			<div class="labeled_input">
+				<p>{{ formatMessage(messages.modpackNameLabel) }}</p>
 				<StyledInput
-					v-model="exportDescription"
-					multiline
-					:placeholder="formatMessage(messages.descriptionPlaceholder)"
+					v-model="nameInput"
+					:icon="PackageIcon"
+					type="text"
+					:placeholder="formatMessage(messages.modpackNamePlaceholder)"
+					clearable
 				/>
 			</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"
+			<div class="labeled_input">
+				<p>{{ formatMessage(messages.versionNumberLabel) }}</p>
+				<StyledInput
+					v-model="versionInput"
+					:icon="VersionIcon"
+					type="text"
+					:placeholder="formatMessage(messages.versionNumberPlaceholder)"
+					clearable
+				/>
+			</div>
+			<div class="adjacent-input">
+				<div class="labeled_input">
+					<p>{{ formatMessage(commonMessages.descriptionLabel) }}</p>
+
+					<StyledInput
+						v-model="exportDescription"
+						multiline
+						:placeholder="formatMessage(messages.descriptionPlaceholder)"
+					/>
+				</div>
+			</div>
+
+			<div class="table">
+				<div class="table-head">
+					<div class="table-cell row-wise">
+						{{ formatMessage(messages.selectFilesLabel) }}
+						<Button
+							class="sleek-primary collapsed-button"
+							icon-only
+							@click="() => (showingFiles = !showingFiles)"
 						>
-							<template #title>
+							<PlusIcon v-if="!showingFiles" />
+							<XIcon v-else />
+						</Button>
+					</div>
+				</div>
+				<div v-if="showingFiles" class="table-content">
+					<div v-for="[path, children] in folders" :key="path.name" class="table-row">
+						<div class="table-cell file-entry">
+							<div class="file-primary">
 								<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"
+									:label="path.name"
+									class="select-checkbox"
 									: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"
+									v-model="path.showingMore"
+									class="select-checkbox dropdown"
+									collapsing-toggle-style
 								/>
 							</div>
-						</Accordion>
+							<div v-if="path.showingMore" class="file-secondary">
+								<div v-for="child in children" :key="child.path" class="file-secondary-row">
+									<Checkbox
+										v-model="child.selected"
+										:label="child.name"
+										class="select-checkbox"
+										:disabled="child.disabled"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div v-for="file in files" :key="file.path" class="table-row">
+						<div class="table-cell file-entry">
+							<div class="file-primary">
+								<Checkbox
+									v-model="file.selected"
+									:label="file.name"
+									:disabled="file.disabled"
+									class="select-checkbox"
+								/>
+							</div>
+						</div>
 					</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>
+			<div class="button-row push-right">
+				<Button @click="exportModal.hide">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button color="primary" @click="exportPack">
+					<PackageIcon />
+					{{ formatMessage(messages.exportButton) }}
+				</Button>
 			</div>
 		</div>
 	</ModalWrapper>
 </template>
+
+<style scoped lang="scss">
+.modal-body {
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-md);
+}
+
+.labeled_input {
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-sm);
+
+	p {
+		margin: 0;
+	}
+}
+
+.select-checkbox {
+	gap: var(--gap-sm);
+
+	button.checkbox {
+		border: none;
+	}
+
+	&.dropdown {
+		margin-left: auto;
+	}
+}
+
+.table-content {
+	max-height: 18rem;
+	overflow-y: auto;
+}
+
+.table {
+	border: 1px solid var(--color-bg);
+}
+
+.file-entry {
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-sm);
+}
+
+.file-primary {
+	display: flex;
+	align-items: center;
+	gap: var(--gap-sm);
+}
+
+.file-secondary {
+	margin-left: var(--gap-xl);
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-sm);
+	height: 100%;
+	vertical-align: center;
+}
+
+.file-secondary-row {
+	display: flex;
+	align-items: center;
+	gap: var(--gap-sm);
+}
+
+.button-row {
+	display: flex;
+	gap: var(--gap-sm);
+	align-items: center;
+}
+
+.row-wise {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	gap: 1rem;
+}
+</style>
@@ -2,7 +2,6 @@
 import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
 import { Avatar, ButtonStyled, FormattedTag } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { computed } from 'vue'

 type Instance = {
 	game_version: string
@@ -13,23 +12,18 @@ type Instance = {
 	name: string
 }

-const props = withDefaults(
-	defineProps<{
-		instance: Instance
-		backTab?: string
-	}>(),
-	{ backTab: undefined },
-)
-
-const instanceLink = computed(() => {
-	const base = `/instance/${encodeURIComponent(props.instance.path)}`
-	return props.backTab ? `${base}/${props.backTab}` : base
-})
+defineProps<{
+	instance: Instance
+}>()
 </script>

 <template>
 	<div class="flex justify-between items-center border-0 border-b border-solid border-divider pb-4">
-		<router-link :to="instanceLink" tabindex="-1" class="flex flex-col gap-4 text-primary">
+		<router-link
+			:to="`/instance/${encodeURIComponent(instance.path)}`"
+			tabindex="-1"
+			class="flex flex-col gap-4 text-primary"
+		>
 			<span class="flex items-center gap-2">
 				<Avatar
 					:src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
@@ -49,7 +43,9 @@ const instanceLink = computed(() => {
 			</span>
 		</router-link>
 		<ButtonStyled>
-			<router-link :to="instanceLink"> <LeftArrowIcon /> Back to instance </router-link>
+			<router-link :to="`/instance/${encodeURIComponent(instance.path)}`">
+				<LeftArrowIcon /> Back to instance
+			</router-link>
 		</ButtonStyled>
 	</div>
 </template>
@@ -1,44 +1,42 @@
 <template>
 	<ModalWrapper ref="detectJavaModal" header="Select java version" :show-ad-on-close="false">
-		<div class="flex flex-col gap-4">
-			<Table :columns="javaInstallColumns" :data="chosenInstallOptions" row-key="path">
-				<template #cell-version="{ value }">
-					<span class="font-semibold text-primary">{{ value }}</span>
-				</template>
-				<template #cell-path="{ value }">
-					<span v-tooltip="value" class="block truncate font-mono text-xs">{{ value }}</span>
-				</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>
+		<div class="auto-detect-modal">
+			<div class="table">
+				<div class="table-row table-head">
+					<div class="table-cell table-text">Version</div>
+					<div class="table-cell table-text">Path</div>
+					<div class="table-cell table-text">Actions</div>
+				</div>
+				<div v-for="javaInstall in chosenInstallOptions" :key="javaInstall.path" class="table-row">
+					<div class="table-cell table-text">
+						<span>{{ javaInstall.version }}</span>
 					</div>
-				</template>
-				<template #empty-state>
-					<div class="p-4 text-secondary">No java installations found!</div>
-				</template>
-			</Table>
-			<div class="flex justify-end">
-				<ButtonStyled type="outlined">
-					<button
-						class="!shadow-none !border-surface-4 !border"
-						@click="$refs.detectJavaModal.hide()"
-					>
-						<XIcon />
-						Cancel
-					</button>
-				</ButtonStyled>
+					<div v-tooltip="javaInstall.path" class="table-cell table-text">
+						<span>{{ javaInstall.path }}</span>
+					</div>
+					<div class="table-cell table-text manage">
+						<Button v-if="currentSelected.path === javaInstall.path" disabled
+							><CheckIcon /> Selected</Button
+						>
+						<Button v-else @click="setJavaInstall(javaInstall)"><PlusIcon /> Select</Button>
+					</div>
+				</div>
+				<div v-if="chosenInstallOptions.length === 0" class="table-row entire-row">
+					<div class="table-cell table-text">No java installations found!</div>
+				</div>
+			</div>
+			<div class="input-group push-right">
+				<Button @click="$refs.detectJavaModal.hide()">
+					<XIcon />
+					Cancel
+				</Button>
 			</div>
 		</div>
 	</ModalWrapper>
 </template>
 <script setup>
 import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, Table } from '@modrinth/ui'
+import { Button, injectNotificationManager } from '@modrinth/ui'
 import { ref } from 'vue'

 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
@@ -50,11 +48,6 @@ const { handleError } = injectNotificationManager()
 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' },
-]

 defineExpose({
 	show: async (version, currentSelectedJava) => {
@@ -80,3 +73,25 @@ function setJavaInstall(javaInstall) {
 	})
 }
 </script>
+<style lang="scss" scoped>
+.auto-detect-modal {
+	.table {
+		.table-row {
+			grid-template-columns: 1fr 4fr min-content;
+		}
+
+		span {
+			display: inherit;
+			align-items: center;
+			justify-content: center;
+		}
+
+		padding: 0.5rem;
+	}
+}
+
+.manage {
+	display: flex;
+	gap: 0.5rem;
+}
+</style>
@@ -1,104 +1,75 @@
 <template>
 	<JavaDetectionModal ref="detectJavaModal" @submit="(val) => emit('update:modelValue', val)" />
-	<div :id="props.id" class="toggle-setting" :class="{ compact }">
-		<div class="input-with-status">
-			<StyledInput
-				autocomplete="off"
-				:disabled="props.disabled"
-				:model-value="props.modelValue ? props.modelValue.path : ''"
-				:placeholder="placeholder ?? '/path/to/java'"
-				wrapper-class="installation-input"
-				@update:model-value="
-					(val) => {
-						emit('update:modelValue', {
-							...props.modelValue,
-							path: val,
-						})
-					}
-				"
-			/>
-			<ButtonStyled
-				:color="
-					!hoveringTest && !testingJava
-						? testingJavaSuccess === true
-							? 'green'
-							: 'red'
-						: 'standard'
-				"
-				color-fill="text"
-			>
-				<button
-					class="!shadow-none"
-					: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>
-		</div>
+	<div class="toggle-setting" :class="{ compact }">
+		<StyledInput
+			autocomplete="off"
+			:disabled="props.disabled"
+			:model-value="props.modelValue ? props.modelValue.path : ''"
+			:placeholder="placeholder ?? '/path/to/java'"
+			wrapper-class="installation-input"
+			@update:model-value="
+				(val) => {
+					emit('update:modelValue', {
+						...props.modelValue,
+						path: val,
+					})
+				}
+			"
+		/>
 		<span class="installation-buttons">
-			<ButtonStyled v-if="props.version">
-				<button
-					v-tooltip="testingJavaSuccess === true ? 'Already installed' : undefined"
-					class="!shadow-none"
-					: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>
+			<Button
+				v-if="props.version"
+				:disabled="props.disabled || installingJava"
+				@click="reinstallJava"
+			>
+				<DownloadIcon />
+				{{ installingJava ? 'Installing...' : 'Install recommended' }}
+			</Button>
+			<Button :disabled="props.disabled" @click="autoDetect">
+				<SearchIcon />
+				Detect
+			</Button>
+			<Button :disabled="props.disabled" @click="handleJavaFileInput()">
+				<FolderSearchIcon />
+				Browse
+			</Button>
+			<Button v-if="testingJava" disabled> Testing... </Button>
+			<Button v-else-if="testingJavaSuccess === true">
+				<CheckIcon class="test-success" />
+				Success
+			</Button>
+			<Button v-else-if="testingJavaSuccess === false">
+				<XIcon class="test-fail" />
+				Failed
+			</Button>
+			<Button v-else :disabled="props.disabled" @click="testJava">
+				<PlayIcon />
+				Test
+			</Button>
 		</span>
 	</div>
 </template>

 <script setup>
 import {
-	CheckCircleIcon,
+	CheckIcon,
 	DownloadIcon,
 	FolderSearchIcon,
-	RefreshCwIcon,
+	PlayIcon,
 	SearchIcon,
-	SpinnerIcon,
-	XCircleIcon,
+	XIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, StyledInput } from '@modrinth/ui'
+import { Button, injectNotificationManager, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
-import { ref, watch } from 'vue'
+import { ref } from 'vue'

 import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
-import useJavaTest from '@/composables/useJavaTest'
 import { trackEvent } from '@/helpers/analytics'
-import { auto_install_java, find_filtered_jres, get_jre } from '@/helpers/jre.js'
+import { auto_install_java, find_filtered_jres, get_jre, test_jre } from '@/helpers/jre.js'

 const { handleError } = injectNotificationManager()

 const props = defineProps({
-	id: {
-		type: String,
-		required: false,
-		default: null,
-	},
 	version: {
 		type: Number,
 		required: false,
@@ -129,36 +100,29 @@ const props = defineProps({

 const emit = defineEmits(['update:modelValue'])

-const {
-	testingJava,
-	javaTestResult: testingJavaSuccess,
-	testJavaInstallationDebounced,
-	testJavaInstallation,
-} = useJavaTest()
+const testingJava = ref(false)
+const testingJavaSuccess = ref(null)

 const installingJava = ref(false)
-const hoveringTest = ref(false)
-let hasInitialized = false

-async function runTest(path) {
-	await testJavaInstallation(path, props.version, true)
+async function testJava() {
+	testingJava.value = true
+	testingJavaSuccess.value = await test_jre(
+		props.modelValue ? props.modelValue.path : '',
+		props.version,
+	)
+	testingJava.value = false
+
+	trackEvent('JavaTest', {
+		path: props.modelValue ? props.modelValue.path : '',
+		success: testingJavaSuccess.value,
+	})
+
+	setTimeout(() => {
+		testingJavaSuccess.value = null
+	}, 2000)
 }

-watch(
-	() => props.modelValue?.path,
-	(newPath) => {
-		if (newPath) {
-			if (!hasInitialized) {
-				testJavaInstallation(newPath, props.version, false)
-				hasInitialized = true
-			} else {
-				testJavaInstallationDebounced(newPath, props.version)
-			}
-		}
-	},
-	{ immediate: true },
-)
-
 async function handleJavaFileInput() {
 	const filePath = await open()

@@ -168,7 +132,6 @@ async function handleJavaFileInput() {
 			result = {
 				path: filePath.path ?? filePath,
 				version: props.version.toString(),
-				parsed_version: props.version,
 				architecture: 'x86',
 			}
 		}
@@ -202,7 +165,6 @@ async function reinstallJava() {
 		result = {
 			path: path,
 			version: props.version.toString(),
-			parsed_version: props.version,
 			architecture: 'x86',
 		}
 	}
@@ -214,23 +176,13 @@ async function reinstallJava() {

 	emit('update:modelValue', result)
 	installingJava.value = false
-	runTest(result.path)
 }
 </script>

 <style lang="scss" scoped>
-.input-with-status {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 0.5rem;
-	width: 100%;
-	min-width: 0;
-}
-
 .installation-input {
-	flex: 1 1 0;
-	min-width: 0;
+	width: 100% !important;
+	flex-grow: 1;
 }

 .toggle-setting {
@@ -252,5 +204,17 @@ async function reinstallJava() {
 	align-items: center;
 	gap: 0.5rem;
 	margin: 0;
+
+	.btn {
+		width: max-content;
+	}
+}
+
+.test-success {
+	color: var(--color-green);
+}
+
+.test-fail {
+	color: var(--color-red);
 }
 </style>
@@ -1,6 +1,6 @@
 <script setup>
 import { CheckIcon } from '@modrinth/assets'
-import { Badge, ButtonStyled } from '@modrinth/ui'
+import { Badge, Button } from '@modrinth/ui'
 import { computed, ref } from 'vue'

 import { SwapIcon } from '@/assets/icons/index.js'
@@ -74,18 +74,15 @@ 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
+									:color="version.id === installedVersion ? '' : 'primary'"
+									icon-only
+									:disabled="inProgress || installing || version.id === installedVersion"
+									@click.stop="() => switchVersion(version.id)"
 								>
-									<button
-										: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 />
+								</Button>
 							</div>
 							<div class="name-cell table-cell table-text">
 								<div class="version-link">
@@ -3,7 +3,6 @@
 		v-if="typeof to === 'string'"
 		:to="to"
 		v-bind="$attrs"
-		:active-class="isSubpage ? '' : undefined"
 		:class="{
 			'router-link-active': isPrimary && isPrimary(route),
 			'subpage-active': isSubpage && isSubpage(route),
@@ -0,0 +1,185 @@
+<template>
+	<nav
+		v-if="filteredLinks.length > 1"
+		ref="scrollContainer"
+		class="card-shadow experimental-styles-within relative flex w-fit overflow-clip rounded-full bg-bg-raised p-1 text-sm font-bold"
+	>
+		<RouterLink
+			v-for="(link, index) in filteredLinks"
+			v-show="link.shown === undefined ? true : link.shown"
+			:key="index"
+			ref="tabLinkElements"
+			:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
+			:class="`button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full ${activeIndex === index && !subpageSelected ? 'text-button-textSelected' : activeIndex === index && subpageSelected ? 'text-contrast' : 'text-primary'}`"
+		>
+			<component :is="link.icon" v-if="link.icon" class="size-5" />
+			<span class="text-nowrap">{{ link.label }}</span>
+		</RouterLink>
+		<div
+			:class="[
+				'pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1',
+				subpageSelected ? 'bg-button-bg' : 'bg-button-bgSelected',
+				{ 'navtabs-transition': transitionsEnabled },
+			]"
+			:style="{
+				left: sliderLeftPx,
+				top: sliderTopPx,
+				right: sliderRightPx,
+				bottom: sliderBottomPx,
+				opacity: sliderReady && activeIndex !== -1 ? 1 : 0,
+			}"
+			aria-hidden="true"
+		></div>
+	</nav>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import { RouterLink, useRoute } from 'vue-router'
+
+const route = useRoute()
+
+interface Tab {
+	label: string
+	href: string | RouteLocationRaw
+	shown?: boolean
+	icon?: unknown
+	subpages?: string[]
+}
+
+const props = defineProps<{
+	links: Tab[]
+	query?: string
+}>()
+
+const scrollContainer = ref<HTMLElement | null>(null)
+const sliderLeft = ref(4)
+const sliderTop = ref(4)
+const sliderRight = ref(4)
+const sliderBottom = ref(4)
+const activeIndex = ref(-1)
+const subpageSelected = ref(false)
+const sliderReady = ref(false)
+const transitionsEnabled = ref(false)
+const sliderDelays = ref({ left: '0ms', top: '0ms', right: '0ms', bottom: '0ms' })
+
+const filteredLinks = computed(() =>
+	props.links.filter((x) => (x.shown === undefined ? true : x.shown)),
+)
+const sliderLeftPx = computed(() => `${sliderLeft.value}px`)
+const sliderTopPx = computed(() => `${sliderTop.value}px`)
+const sliderRightPx = computed(() => `${sliderRight.value}px`)
+const sliderBottomPx = computed(() => `${sliderBottom.value}px`)
+
+const leftDelay = computed(() => sliderDelays.value.left)
+const rightDelay = computed(() => sliderDelays.value.right)
+const topDelay = computed(() => sliderDelays.value.top)
+const bottomDelay = computed(() => sliderDelays.value.bottom)
+
+function pickLink() {
+	let index = -1
+	subpageSelected.value = false
+	for (let i = filteredLinks.value.length - 1; i >= 0; i--) {
+		const link = filteredLinks.value[i]
+
+		if (route.path === (typeof link.href === 'string' ? link.href : link.href.path)) {
+			index = i
+			break
+		} else if (link.subpages && link.subpages.some((subpage) => route.path.includes(subpage))) {
+			index = i
+			subpageSelected.value = true
+			break
+		}
+	}
+	activeIndex.value = index
+
+	if (activeIndex.value !== -1) {
+		startAnimation()
+	} else {
+		sliderLeft.value = 0
+		sliderRight.value = 0
+	}
+}
+
+function getTabElement(index: number): HTMLElement | null {
+	if (index === -1) return null
+	const container = scrollContainer.value
+	if (!container) return null
+	const tabs = container.querySelectorAll('.button-animation')
+	return (tabs[index] as HTMLElement) ?? null
+}
+
+function startAnimation() {
+	const el = getTabElement(activeIndex.value)
+	if (!el?.offsetParent) return
+
+	const parent = el.offsetParent as HTMLElement
+	const newValues = {
+		left: el.offsetLeft,
+		top: el.offsetTop,
+		right: parent.offsetWidth - el.offsetLeft - el.offsetWidth,
+		bottom: parent.offsetHeight - el.offsetTop - el.offsetHeight,
+	}
+
+	const isInitialPosition = sliderLeft.value === 4 && sliderRight.value === 4
+
+	if (isInitialPosition) {
+		sliderLeft.value = newValues.left
+		sliderRight.value = newValues.right
+		sliderTop.value = newValues.top
+		sliderBottom.value = newValues.bottom
+		sliderReady.value = true
+		requestAnimationFrame(() => {
+			transitionsEnabled.value = true
+		})
+	} else {
+		const STAGGER_DELAY = '200ms'
+		sliderDelays.value = {
+			left: newValues.left < sliderLeft.value ? '0ms' : STAGGER_DELAY,
+			right: newValues.left < sliderLeft.value ? STAGGER_DELAY : '0ms',
+			top: newValues.top < sliderTop.value ? '0ms' : STAGGER_DELAY,
+			bottom: newValues.top < sliderTop.value ? STAGGER_DELAY : '0ms',
+		}
+		sliderLeft.value = newValues.left
+		sliderRight.value = newValues.right
+		sliderTop.value = newValues.top
+		sliderBottom.value = newValues.bottom
+	}
+}
+
+onMounted(async () => {
+	window.addEventListener('resize', pickLink)
+	await nextTick()
+	pickLink()
+})
+
+onUnmounted(() => {
+	window.removeEventListener('resize', pickLink)
+})
+
+watch(
+	filteredLinks,
+	async () => {
+		await nextTick()
+		pickLink()
+	},
+	{ deep: true },
+)
+
+watch(route, async () => {
+	await nextTick()
+	pickLink()
+})
+</script>
+<style scoped>
+.navtabs-transition {
+	/* Delay on opacity is to hide any jankiness as the page loads */
+	transition:
+		left 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(leftDelay),
+		right 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(rightDelay),
+		top 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(topDelay),
+		bottom 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(bottomDelay),
+		opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
+}
+</style>
@@ -37,6 +37,6 @@ defineProps({

 .progress-bar__fill {
 	height: 100%;
-	transition: width 0.3s ease-out;
+	transition: width 0.3s;
 }
 </style>
@@ -0,0 +1,476 @@
+<template>
+	<div class="action-groups">
+		<ButtonStyled v-if="currentLoadingBars.length > 0" color="brand" type="transparent" circular>
+			<button ref="infoButton" @click="toggleCard()">
+				<DownloadIcon />
+			</button>
+		</ButtonStyled>
+		<div v-if="offline" class="status">
+			<UnplugIcon />
+			<div class="running-text">
+				<span> Offline </span>
+			</div>
+		</div>
+		<div v-if="selectedProcess" class="status">
+			<span class="circle running" />
+			<div ref="profileButton" class="running-text">
+				<router-link
+					class="text-primary"
+					:to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`"
+				>
+					{{ selectedProcess.profile.name }}
+				</router-link>
+				<div
+					v-if="currentProcesses.length > 1"
+					class="arrow button-base"
+					:class="{ rotate: showProfiles }"
+					@click="toggleProfiles()"
+				>
+					<DropdownIcon />
+				</div>
+			</div>
+			<Button
+				v-tooltip="'Stop instance'"
+				icon-only
+				class="icon-button stop"
+				@click="stop(selectedProcess)"
+			>
+				<StopCircleIcon />
+			</Button>
+			<Button v-tooltip="'View logs'" icon-only class="icon-button" @click="goToTerminal()">
+				<TerminalSquareIcon />
+			</Button>
+		</div>
+		<div v-else class="status">
+			<span class="circle stopped" />
+			<span class="running-text"> No instances running </span>
+		</div>
+	</div>
+	<transition name="download">
+		<Card v-if="showCard === true && currentLoadingBars.length > 0" ref="card" class="info-card">
+			<div v-for="loadingBar in currentLoadingBars" :key="loadingBar.id" class="info-text">
+				<h3 class="info-title">
+					{{ loadingBar.title }}
+				</h3>
+				<div class="flex flex-col gap-2 w-full">
+					<ProgressBar :progress="Math.floor((100 * loadingBar.current) / loadingBar.total)" />
+					<div class="row">
+						{{ Math.floor((100 * loadingBar.current) / loadingBar.total) }}%
+						{{ loadingBar.message }}
+					</div>
+				</div>
+			</div>
+		</Card>
+	</transition>
+	<transition name="download">
+		<Card
+			v-if="showProfiles === true && currentProcesses.length > 0"
+			ref="profiles"
+			class="profile-card"
+		>
+			<Button
+				v-for="process in currentProcesses"
+				:key="process.uuid"
+				class="profile-button"
+				@click="selectProcess(process)"
+			>
+				<div class="text"><span class="circle running" /> {{ process.profile.name }}</div>
+				<Button
+					v-tooltip="'Stop instance'"
+					icon-only
+					class="icon-button stop"
+					@click.stop="stop(process)"
+				>
+					<StopCircleIcon />
+				</Button>
+				<Button
+					v-tooltip="'View logs'"
+					icon-only
+					class="icon-button"
+					@click.stop="goToTerminal(process.profile.path)"
+				>
+					<TerminalSquareIcon />
+				</Button>
+			</Button>
+		</Card>
+	</transition>
+</template>
+
+<script setup>
+import {
+	DownloadIcon,
+	DropdownIcon,
+	StopCircleIcon,
+	TerminalSquareIcon,
+	UnplugIcon,
+} from '@modrinth/assets'
+import { Button, ButtonStyled, Card, injectNotificationManager } from '@modrinth/ui'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import ProgressBar from '@/components/ui/ProgressBar.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { loading_listener, process_listener } from '@/helpers/events'
+import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
+import { get_many } from '@/helpers/profile.js'
+import { progress_bars_list } from '@/helpers/state.js'
+
+const { handleError } = injectNotificationManager()
+
+const router = useRouter()
+const card = ref(null)
+const profiles = ref(null)
+const infoButton = ref(null)
+const profileButton = ref(null)
+const showCard = ref(false)
+
+const showProfiles = ref(false)
+
+const currentProcesses = ref([])
+const selectedProcess = ref()
+
+const refresh = async () => {
+	const processes = await getRunningProcesses().catch(handleError)
+	const profiles = await get_many(processes.map((x) => x.profile_path)).catch(handleError)
+
+	currentProcesses.value = processes.map((x) => ({
+		profile: profiles.find((prof) => x.profile_path === prof.path),
+		...x,
+	}))
+	if (!selectedProcess.value || !currentProcesses.value.includes(selectedProcess.value)) {
+		selectedProcess.value = currentProcesses.value[0]
+	}
+}
+
+await refresh()
+
+const offline = ref(!navigator.onLine)
+window.addEventListener('offline', () => {
+	offline.value = true
+})
+window.addEventListener('online', () => {
+	offline.value = false
+})
+
+const unlistenProcess = await process_listener(async () => {
+	await refresh()
+})
+
+const stop = async (process) => {
+	try {
+		await killProcess(process.uuid).catch(handleError)
+
+		trackEvent('InstanceStop', {
+			loader: process.profile.loader,
+			game_version: process.profile.game_version,
+			source: 'AppBar',
+		})
+	} catch (e) {
+		console.error(e)
+	}
+	await refresh()
+}
+
+const goToTerminal = (path) => {
+	router.push(`/instance/${encodeURIComponent(path ?? selectedProcess.value.profile.path)}/logs`)
+}
+
+const currentLoadingBars = ref([])
+
+const refreshInfo = async () => {
+	const currentLoadingBarCount = currentLoadingBars.value.length
+	currentLoadingBars.value = Object.values(await progress_bars_list().catch(handleError))
+		.map((x) => {
+			if (x.bar_type.type === 'java_download') {
+				x.title = 'Downloading Java ' + x.bar_type.version
+			}
+			if (x.bar_type.profile_path) {
+				x.title = x.bar_type.profile_path
+			}
+			if (x.bar_type.pack_name) {
+				x.title = x.bar_type.pack_name
+			}
+
+			return x
+		})
+		.filter((bar) => bar?.bar_type?.type !== 'launcher_update')
+
+	currentLoadingBars.value.sort((a, b) => {
+		if (a.loading_bar_uuid < b.loading_bar_uuid) {
+			return -1
+		}
+		if (a.loading_bar_uuid > b.loading_bar_uuid) {
+			return 1
+		}
+		return 0
+	})
+
+	if (currentLoadingBars.value.length === 0) {
+		showCard.value = false
+	} else if (currentLoadingBarCount < currentLoadingBars.value.length) {
+		showCard.value = true
+	}
+}
+
+await refreshInfo()
+const unlistenLoading = await loading_listener(async () => {
+	await refreshInfo()
+})
+
+const selectProcess = (process) => {
+	selectedProcess.value = process
+	showProfiles.value = false
+}
+
+const handleClickOutsideCard = (event) => {
+	const elements = document.elementsFromPoint(event.clientX, event.clientY)
+	if (
+		card.value &&
+		card.value.$el !== event.target &&
+		!elements.includes(card.value.$el) &&
+		infoButton.value &&
+		!infoButton.value.contains(event.target)
+	) {
+		showCard.value = false
+	}
+}
+
+const handleClickOutsideProfile = (event) => {
+	const elements = document.elementsFromPoint(event.clientX, event.clientY)
+	if (
+		profiles.value &&
+		profiles.value.$el !== event.target &&
+		!elements.includes(profiles.value.$el) &&
+		!profileButton.value.contains(event.target)
+	) {
+		showProfiles.value = false
+	}
+}
+
+const toggleCard = async () => {
+	showCard.value = !showCard.value
+	showProfiles.value = false
+	await refreshInfo()
+}
+
+const toggleProfiles = async () => {
+	if (currentProcesses.value.length === 1) return
+	showProfiles.value = !showProfiles.value
+	showCard.value = false
+}
+
+onMounted(() => {
+	window.addEventListener('click', handleClickOutsideCard)
+	window.addEventListener('click', handleClickOutsideProfile)
+})
+
+onBeforeUnmount(() => {
+	window.removeEventListener('click', handleClickOutsideCard)
+	window.removeEventListener('click', handleClickOutsideProfile)
+	unlistenProcess()
+	unlistenLoading()
+})
+</script>
+
+<style scoped lang="scss">
+.action-groups {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--gap-md);
+}
+
+.arrow {
+	transition: transform 0.2s ease-in-out;
+	display: flex;
+	align-items: center;
+	&.rotate {
+		transform: rotate(180deg);
+	}
+}
+
+.status {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 0.5rem;
+	border-radius: var(--radius-md);
+	border: 1px solid var(--color-divider);
+	padding: var(--gap-sm) var(--gap-lg);
+}
+
+.running-text {
+	display: flex;
+	flex-direction: row;
+	gap: var(--gap-xs);
+	white-space: nowrap;
+	overflow: hidden;
+	-webkit-user-select: none; /* Safari */
+	-ms-user-select: none; /* IE 10 and IE 11 */
+	user-select: none;
+
+	&.clickable:hover {
+		cursor: pointer;
+	}
+}
+
+.circle {
+	width: 0.5rem;
+	height: 0.5rem;
+	border-radius: 50%;
+	display: inline-block;
+	margin-right: 0.25rem;
+
+	&.running {
+		background-color: var(--color-brand);
+	}
+
+	&.stopped {
+		background-color: var(--color-base);
+	}
+}
+
+.icon-button {
+	background-color: rgba(0, 0, 0, 0);
+	box-shadow: none;
+	width: 1.25rem !important;
+	height: 1.25rem !important;
+
+	svg {
+		min-width: 1.25rem;
+	}
+
+	&.stop {
+		color: var(--color-red);
+	}
+}
+
+.info-card {
+	position: absolute;
+	top: 3.5rem;
+	right: 2rem;
+	z-index: 9;
+	width: 20rem;
+	background-color: var(--color-raised-bg);
+	box-shadow: var(--shadow-raised);
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	overflow: auto;
+	transition: all 0.2s ease-in-out;
+	border: 1px solid var(--color-divider);
+
+	&.hidden {
+		transform: translateY(-100%);
+	}
+}
+
+.loading-option {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 0.5rem;
+	margin: 0;
+	padding: 0;
+
+	:hover {
+		background-color: var(--color-raised-bg-hover);
+	}
+}
+
+.loading-text {
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+	padding: 0;
+
+	.row {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 0.5rem;
+	}
+}
+
+.loading-icon {
+	width: 2.25rem;
+	height: 2.25rem;
+	display: block;
+
+	:deep(svg) {
+		left: 1rem;
+		width: 2.25rem;
+		height: 2.25rem;
+	}
+}
+
+.download-enter-active,
+.download-leave-active {
+	transition: opacity 0.3s ease;
+}
+
+.download-enter-from,
+.download-leave-to {
+	opacity: 0;
+}
+
+.progress-bar {
+	width: 100%;
+}
+
+.info-text {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 0.75rem;
+	margin: 0;
+	padding: 0;
+}
+
+.info-title {
+	margin: 0;
+}
+
+.profile-button {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--gap-sm);
+	width: 100%;
+	background-color: var(--color-raised-bg);
+	box-shadow: none;
+
+	.text {
+		margin-right: auto;
+	}
+}
+
+.profile-card {
+	position: absolute;
+	top: 3.5rem;
+	right: 0.5rem;
+	z-index: 9;
+	background-color: var(--color-raised-bg);
+	box-shadow: var(--shadow-raised);
+	display: flex;
+	flex-direction: column;
+	overflow: auto;
+	transition: all 0.2s ease-in-out;
+	border: 1px solid var(--color-divider);
+	padding: var(--gap-md);
+
+	&.hidden {
+		transform: translateY(-100%);
+	}
+}
+
+.link {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--gap-sm);
+	margin: 0;
+	color: var(--color-text);
+	text-decoration: none;
+}
+</style>
@@ -0,0 +1,142 @@
+<template>
+	<ProjectCard
+		:title="project.name"
+		:link="
+			() => {
+				emit('open')
+				$router.push({
+					path: `/project/${project.project_id ?? project.id}`,
+					query: { i: props.instance ? props.instance.path : undefined },
+				})
+			}
+		"
+		:author="{ name: project.author, link: `https://modrinth.com/user/${project.author}` }"
+		:icon-url="project.icon_url"
+		:summary="project.summary"
+		:tags="project.display_categories"
+		:all-tags="project.categories"
+		:downloads="project.downloads"
+		:followers="project.follows"
+		:date-updated="project.date_modified"
+		:banner="project.featured_gallery ?? undefined"
+		:color="project.color ?? undefined"
+		:environment="
+			['mod', 'modpack'].includes(projectType)
+				? {
+						clientSide: project.client_side?.[0],
+						serverSide: project.server_side?.[0],
+					}
+				: undefined
+		"
+		layout="list"
+	>
+		<template #actions>
+			<ButtonStyled color="brand" type="outlined">
+				<button
+					:disabled="installed || installing"
+					class="shrink-0 no-wrap"
+					@click.stop="install()"
+				>
+					<SpinnerIcon v-if="installing" class="animate-spin" />
+					<template v-else-if="!installed">
+						<DownloadIcon v-if="modpack || instance" />
+						<PlusIcon v-else />
+					</template>
+					<CheckIcon v-else />
+					{{
+						installing
+							? 'Installing'
+							: installed
+								? 'Installed'
+								: modpack || instance
+									? 'Install'
+									: 'Add to an instance'
+					}}
+				</button>
+			</ButtonStyled>
+		</template>
+	</ProjectCard>
+</template>
+
+<script setup>
+import { CheckIcon, DownloadIcon, PlusIcon, SpinnerIcon } from '@modrinth/assets'
+import { ButtonStyled, injectNotificationManager, ProjectCard } from '@modrinth/ui'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { injectContentInstall } from '@/providers/content-install'
+
+const { install: installVersion } = injectContentInstall()
+
+dayjs.extend(relativeTime)
+
+const { handleError } = injectNotificationManager()
+
+const router = useRouter()
+
+const props = defineProps({
+	backgroundImage: {
+		type: String,
+		default: null,
+	},
+	project: {
+		type: Object,
+		required: true,
+	},
+	instance: {
+		type: Object,
+		default: null,
+	},
+	featured: {
+		type: Boolean,
+		default: false,
+	},
+	installed: {
+		type: Boolean,
+		default: false,
+	},
+	projectType: {
+		type: String,
+		default: undefined,
+	},
+	activeLoader: {
+		type: String,
+		default: null,
+	},
+	activeGameVersion: {
+		type: String,
+		default: null,
+	},
+})
+
+const emit = defineEmits(['open', 'install'])
+
+const installing = ref(false)
+
+async function install() {
+	installing.value = true
+	await installVersion(
+		props.project.project_id ?? props.project.id,
+		null,
+		props.instance ? props.instance.path : null,
+		'SearchCard',
+		(versionId) => {
+			installing.value = false
+			if (versionId) {
+				emit('install', props.project.project_id ?? props.project.id)
+			}
+		},
+		(profile) => {
+			router.push(`/instance/${profile}`)
+		},
+		{
+			preferredLoader: props.activeLoader ?? undefined,
+			preferredGameVersion: props.activeGameVersion ?? undefined,
+		},
+	).catch(handleError)
+}
+
+const modpack = computed(() => props.project.project_types?.includes('modpack'))
+</script>
@@ -1,9 +1,11 @@
 <script setup>
-import { ButtonStyled, injectNotificationManager, ProjectCard } from '@modrinth/ui'
+import { Button, injectNotificationManager } from '@modrinth/ui'
 import { ref } from 'vue'

 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { get_project_v3, get_version } from '@/helpers/cache.js'
+import SearchCard from '@/components/ui/SearchCard.vue'
+import { get_project, get_version } from '@/helpers/cache.js'
+import { get_categories } from '@/helpers/tags.js'
 import { injectContentInstall } from '@/providers/content-install'

 const { handleError } = injectNotificationManager()
@@ -12,21 +14,26 @@ const { install: installVersion } = injectContentInstall()
 const confirmModal = ref(null)
 const project = ref(null)
 const version = ref(null)
+const categories = ref(null)
+const installing = ref(false)

 defineExpose({
 	async show(event) {
 		if (event.event === 'InstallVersion') {
 			version.value = await get_version(event.id, 'must_revalidate').catch(handleError)
-			project.value = await get_project_v3(version.value.project_id, 'must_revalidate').catch(
+			project.value = await get_project(version.value.project_id, 'must_revalidate').catch(
 				handleError,
 			)
 		} else {
-			project.value = await get_project_v3(event.id, 'must_revalidate').catch(handleError)
+			project.value = await get_project(event.id, 'must_revalidate').catch(handleError)
 			version.value = await get_version(
 				project.value.versions[project.value.versions.length - 1],
 				'must_revalidate',
 			).catch(handleError)
 		}
+		categories.value = (await get_categories().catch(handleError)).filter(
+			(cat) => project.value.categories.includes(cat.name) && cat.project_type === 'mod',
+		)
 		confirmModal.value.show()
 	},
 })
@@ -45,22 +52,13 @@ async function install() {
 </script>

 <template>
-	<ModalWrapper ref="confirmModal" :header="`Install ${project?.name}`">
+	<ModalWrapper ref="confirmModal" :header="`Install ${project?.title}`">
 		<div class="modal-body">
-			<ProjectCard
-				:title="project.name"
-				:link="() => confirmModal.hide()"
-				:icon-url="project.icon_url"
-				:summary="project.summary"
-				:tags="project.display_categories"
-				:all-tags="project.categories"
-				:downloads="project.downloads"
-				:followers="project.follows"
-				:date-updated="project.date_modified"
-				:banner="project.featured_gallery ?? undefined"
-				:color="project.color ?? undefined"
-				layout="list"
+			<SearchCard
+				:project="project"
 				class="project-card"
+				:categories="categories"
+				@open="confirmModal.hide()"
 			/>
 			<div class="button-row">
 				<div class="markdown-body">
@@ -69,9 +67,7 @@ async function install() {
 					</p>
 				</div>
 				<div class="button-group">
-					<ButtonStyled color="brand">
-						<button @click="install">Install</button>
-					</ButtonStyled>
+					<Button :loading="installing" color="primary" @click="install">Install</Button>
 				</div>
 			</div>
 		</div>
@@ -1,93 +0,0 @@
-<template>
-	<section
-		v-if="showControls"
-		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>
-	</section>
-</template>
-
-<script setup>
-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'
-
-import { get as getSettings } from '@/helpers/settings.ts'
-import { getOS } from '@/helpers/utils.js'
-import { useTheming } from '@/store/state'
-
-const themeStore = useTheming()
-
-const nativeDecorations = ref(true)
-const isMaximized = ref(false)
-const os = ref('')
-
-const alwaysShowAppControls = computed(() => themeStore.getFeatureFlag('always_show_app_controls'))
-
-const showControls = computed(
-	() =>
-		alwaysShowAppControls.value ||
-		(!nativeDecorations.value && (os.value === 'Windows' || os.value === 'Linux')),
-)
-
-onMounted(async () => {
-	os.value = await getOS()
-
-	const settings = await getSettings()
-	nativeDecorations.value = settings.native_decorations
-
-	if (os.value !== 'MacOS') {
-		await getCurrentWindow().setDecorations(nativeDecorations.value)
-	}
-
-	isMaximized.value = await getCurrentWindow().isMaximized()
-
-	const unlisten = await getCurrentWindow().onResized(async () => {
-		isMaximized.value = await getCurrentWindow().isMaximized()
-	})
-
-	onUnmounted(() => {
-		unlisten()
-	})
-})
-
-const handleClose = async () => {
-	await saveWindowState(StateFlags.ALL)
-	await getCurrentWindow().close()
-}
-</script>
-<style scoped>
-.expanded-button::before {
-	inset: -9px -6px;
-	content: '';
-	position: absolute;
-}
-
-.expanded-button.close-button::before {
-	inset: -9px -9px -9px -6px;
-}
-</style>
@@ -288,7 +288,7 @@ const messages = defineMessages({
 			</div>
 		</div>
 	</ModalWrapper>
-	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 -ml-1">
+	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 ml-2 mr-1">
 		<template v-if="sortedFriends.length > 0">
 			<ButtonStyled circular type="transparent">
 				<button
@@ -309,7 +309,7 @@ const messages = defineMessages({
 				@keyup.esc="search = ''"
 			/>
 		</template>
-		<h3 v-else class="w-full text-base text-primary font-medium m-0">
+		<h3 v-else class="ml-2 w-full text-base text-primary font-medium m-0">
 			{{ formatMessage(messages.friends) }}
 		</h3>
 		<ButtonStyled v-if="incomingRequests.length > 0" circular type="transparent">
@@ -331,11 +331,11 @@ const messages = defineMessages({
 		</ButtonStyled>
 	</div>
 	<div class="flex flex-col gap-3">
-		<h3 v-if="loading" class="text-base text-primary font-medium m-0">
+		<h3 v-if="loading" class="ml-4 mr-1 text-base text-primary font-medium m-0">
 			{{ formatMessage(messages.friends) }}
 		</h3>
 		<template v-if="loading">
-			<div v-for="n in 5" :key="n" class="flex gap-2 items-center animate-pulse">
+			<div v-for="n in 5" :key="n" class="flex gap-2 items-center animate-pulse ml-4 mr-1">
 				<div class="min-w-9 min-h-9 bg-button-bg rounded-full"></div>
 				<div class="flex flex-col w-full">
 					<div class="h-3 bg-button-bg rounded-full w-1/2 mb-1"></div>
@@ -344,7 +344,7 @@ const messages = defineMessages({
 			</div>
 		</template>
 		<template v-else-if="sortedFriends.length === 0">
-			<div class="text-sm">
+			<div class="text-sm ml-4 mr-1">
 				<div v-if="!userCredentials">
 					<IntlFormatted :message-id="messages.signInToAddFriends">
 						<template #link="{ children }">
@@ -106,7 +106,7 @@ const messages = defineMessages({
 		:open-by-default="openByDefault"
 		:force-open="isSearching"
 		:button-class="
-			'flex w-full items-center bg-transparent border-0 p-0' +
+			'pl-4 pr-3 flex w-full items-center bg-transparent border-0 p-0' +
 			(isSearching
 				? ''
 				: ' cursor-pointer hover:brightness-[--hover-brightness] active:scale-[0.98] transition-all')
@@ -122,7 +122,7 @@ 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-[auto_1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full ml-4 mr-1"
 					@contextmenu.prevent.stop="
 						(event) => friendOptions?.showMenu(event, friend, createContextMenuOptions(friend))
 					"
@@ -34,14 +34,10 @@
 				</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>
+				<Button @click="() => incompatibleModal.hide()"><XIcon />Cancel</Button>
+				<Button color="primary" :disabled="installing" @click="install()">
+					<DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}
+				</Button>
 			</div>
 		</div>
 	</ModalWrapper>
@@ -49,13 +45,7 @@

 <script setup>
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	Combobox,
-	formatLoader,
-	injectNotificationManager,
-	useVIntl,
-} from '@modrinth/ui'
+import { Button, Combobox, formatLoader, injectNotificationManager, useVIntl } from '@modrinth/ui'
 import { computed, ref } from 'vue'

 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
@@ -117,7 +107,7 @@ defineExpose({

 const install = async () => {
 	installing.value = true
-	await installMod(instance.value.path, selectedVersion.value.id, 'standalone').catch(handleError)
+	await installMod(instance.value.path, selectedVersion.value.id).catch(handleError)
 	installing.value = false
 	onInstall.value(selectedVersion.value.id)
 	incompatibleModal.value.hide()
@@ -0,0 +1,418 @@
+<script setup>
+import {
+	CheckIcon,
+	DownloadIcon,
+	PlusIcon,
+	RightArrowIcon,
+	SearchIcon,
+	UploadIcon,
+	XIcon,
+} from '@modrinth/assets'
+import { Avatar, Button, Card, injectNotificationManager, StyledInput } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { open } from '@tauri-apps/plugin-dialog'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { get_project_v3_many } from '@/helpers/cache.js'
+import {
+	add_project_from_version as installMod,
+	check_installed,
+	create,
+	get,
+	list,
+} from '@/helpers/profile'
+import {
+	findPreferredVersion,
+	installVersionDependencies,
+	isVersionCompatible,
+} from '@/store/install.js'
+
+const { handleError } = injectNotificationManager()
+const router = useRouter()
+
+const versions = ref()
+const project = ref()
+
+const installModal = ref()
+const searchFilter = ref('')
+
+const showCreation = ref(false)
+const icon = ref(null)
+const name = ref(null)
+const display_icon = ref(null)
+const loader = ref(null)
+const gameVersion = ref(null)
+const creatingInstance = ref(false)
+
+const profiles = ref([])
+
+const shownProfiles = computed(() =>
+	profiles.value.filter((profile) => {
+		return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+	}),
+)
+
+const isProfileCompatible = (profile) =>
+	versions.value?.some((version) => isVersionCompatible(version, project.value, profile))
+
+const onInstall = ref(() => {})
+
+defineExpose({
+	show: async (projectVal, versionsVal, callback) => {
+		project.value = projectVal
+		versions.value = versionsVal
+		searchFilter.value = ''
+
+		showCreation.value = false
+		name.value = null
+		icon.value = null
+		display_icon.value = null
+		gameVersion.value = null
+		loader.value = null
+
+		onInstall.value = callback
+
+		const profilesVal = await list().catch(handleError)
+		for (const profile of profilesVal) {
+			profile.installing = false
+			profile.installedMod = await check_installed(profile.path, project.value.id).catch(
+				handleError,
+			)
+		}
+
+		const linkedProjectIds = profilesVal
+			.filter((p) => p.linked_data?.project_id)
+			.map((p) => p.linked_data.project_id)
+		if (linkedProjectIds.length > 0) {
+			const linkedProjects = await get_project_v3_many(linkedProjectIds, 'must_revalidate').catch(
+				() => [],
+			)
+			const serverProjectIds = new Set(
+				linkedProjects.filter((p) => p?.minecraft_server != null).map((p) => p.id),
+			)
+			for (const profile of profilesVal) {
+				profile.isServerInstance = serverProjectIds.has(profile.linked_data?.project_id)
+			}
+		}
+
+		profiles.value = profilesVal
+
+		installModal.value.show()
+
+		trackEvent('ProjectInstallStart', { source: 'ProjectInstallModal' })
+	},
+})
+
+async function install(instance) {
+	instance.installing = true
+	const version = findPreferredVersion(versions.value, project.value, instance)
+
+	if (!version) {
+		instance.installing = false
+		handleError('No compatible version found')
+		return
+	}
+
+	await installMod(instance.path, version.id).catch(handleError)
+	await installVersionDependencies(instance, version).catch(handleError)
+
+	instance.installedMod = true
+	instance.installing = false
+
+	trackEvent('ProjectInstall', {
+		loader: instance.loader,
+		game_version: instance.game_version,
+		id: project.value.id,
+		version_id: version.id,
+		project_type: project.value.project_type,
+		title: project.value.title,
+		source: 'ProjectInstallModal',
+	})
+
+	onInstall.value(version.id)
+}
+
+const toggleCreation = () => {
+	showCreation.value = !showCreation.value
+	name.value = null
+	icon.value = null
+	display_icon.value = null
+	gameVersion.value = null
+	loader.value = null
+
+	if (showCreation.value) {
+		trackEvent('InstanceCreateStart', { source: 'ProjectInstallModal' })
+	}
+}
+
+const upload_icon = async () => {
+	const res = await open({
+		multiple: false,
+		filters: [
+			{
+				name: 'Image',
+				extensions: ['png', 'jpeg'],
+			},
+		],
+	})
+	icon.value = res.path ?? res
+
+	if (!icon.value) return
+	display_icon.value = convertFileSrc(icon.value)
+}
+
+const reset_icon = () => {
+	icon.value = null
+	display_icon.value = null
+}
+
+const createInstance = async () => {
+	creatingInstance.value = true
+
+	const gameVersions = versions.value[0].game_versions
+	const gameVersion = gameVersions[0]
+
+	const loaders = versions.value[0].loaders
+	const loader = loaders.includes('fabric')
+		? 'fabric'
+		: loaders.includes('neoforge')
+			? 'neoforge'
+			: loaders.includes('forge')
+				? 'forge'
+				: loaders.includes('quilt')
+					? 'quilt'
+					: 'vanilla'
+
+	const id = await create(name.value, gameVersion, loader, 'latest', icon.value).catch(handleError)
+
+	await installMod(id, versions.value[0].id).catch(handleError)
+
+	await router.push(`/instance/${encodeURIComponent(id)}/`)
+
+	const instance = await get(id, true)
+	await installVersionDependencies(instance, versions.value[0]).catch(handleError)
+
+	trackEvent('InstanceCreate', {
+		profile_name: name.value,
+		game_version: versions.value[0].game_versions[0],
+		loader: loader,
+		loader_version: 'latest',
+		has_icon: !!icon.value,
+		source: 'ProjectInstallModal',
+	})
+
+	trackEvent('ProjectInstall', {
+		loader: loader,
+		game_version: versions.value[0].game_versions[0],
+		id: project.value,
+		version_id: versions.value[0].id,
+		project_type: project.value.project_type,
+		title: project.value.title,
+		source: 'ProjectInstallModal',
+	})
+
+	onInstall.value(versions.value[0].id)
+
+	if (installModal.value) installModal.value.hide()
+	creatingInstance.value = false
+}
+</script>
+
+<template>
+	<ModalWrapper ref="installModal" header="Install project to instance" :on-hide="onInstall">
+		<div class="modal-body">
+			<StyledInput
+				v-model="searchFilter"
+				:icon="SearchIcon"
+				type="search"
+				placeholder="Search for an instance"
+				autocomplete="off"
+			/>
+			<div class="profiles" :class="{ 'hide-creation': !showCreation }">
+				<div v-for="profile in shownProfiles" :key="profile.name" class="option">
+					<router-link
+						class="btn btn-transparent profile-button"
+						:to="`/instance/${encodeURIComponent(profile.path)}`"
+						@click="installModal.hide()"
+					>
+						<Avatar
+							:src="profile.icon_path ? convertFileSrc(profile.icon_path) : null"
+							class="profile-image"
+						/>
+						{{ profile.name }}
+					</router-link>
+					<div
+						v-tooltip="
+							profile.linked_data?.locked && !profile.installedMod
+								? 'Unpair or unlock an instance to add mods.'
+								: ''
+						"
+					>
+						<Button
+							:disabled="
+								!isProfileCompatible(profile) || profile.installedMod || profile.installing
+							"
+							@click="install(profile)"
+						>
+							<DownloadIcon
+								v-if="isProfileCompatible(profile) && !profile.installedMod && !profile.installing"
+							/>
+							<CheckIcon v-else-if="profile.installedMod" />
+							{{
+								profile.installing
+									? 'Installing...'
+									: profile.installedMod
+										? 'Installed'
+										: !isProfileCompatible(profile)
+											? 'Incompatible'
+											: 'Install'
+							}}
+						</Button>
+					</div>
+				</div>
+			</div>
+			<Card v-if="showCreation" class="creation-card">
+				<div class="creation-container">
+					<div class="creation-icon">
+						<Avatar size="md" class="icon" :src="display_icon" />
+						<div class="creation-icon__description">
+							<Button @click="upload_icon()">
+								<UploadIcon />
+								<span class="no-wrap"> Select icon </span>
+							</Button>
+							<Button :disabled="!display_icon" @click="reset_icon()">
+								<XIcon />
+								<span class="no-wrap"> Remove icon </span>
+							</Button>
+						</div>
+					</div>
+					<div class="creation-settings">
+						<StyledInput
+							v-model="name"
+							autocomplete="off"
+							type="text"
+							placeholder="Name"
+							class="creation-input"
+						/>
+						<Button :disabled="creatingInstance === true || !name" @click="createInstance()">
+							<RightArrowIcon />
+							{{ creatingInstance ? 'Creating...' : 'Create' }}
+						</Button>
+					</div>
+				</div>
+			</Card>
+			<div class="input-group push-right">
+				<Button :color="showCreation ? '' : 'primary'" @click="toggleCreation()">
+					<PlusIcon />
+					{{ showCreation ? 'Hide New Instance' : 'Create new instance' }}
+				</Button>
+				<Button @click="installModal.hide()">Cancel</Button>
+			</div>
+		</div>
+	</ModalWrapper>
+</template>
+
+<style scoped lang="scss">
+.creation-card {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	margin: 0;
+	background-color: var(--color-bg);
+}
+
+.creation-container {
+	display: flex;
+	flex-direction: row;
+	gap: 1rem;
+}
+
+.creation-icon {
+	display: flex;
+	flex-direction: row;
+	gap: 1rem;
+	align-items: center;
+	flex-grow: 1;
+
+	.creation-icon__description {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+}
+
+.creation-input {
+	width: 100%;
+}
+
+.no-wrap {
+	white-space: nowrap;
+}
+
+.creation-dropdown {
+	width: min-content !important;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.creation-settings {
+	width: 100%;
+	margin-left: 0.5rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	justify-content: center;
+}
+
+.modal-body {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	min-width: 350px;
+}
+
+.profiles {
+	max-height: 12rem;
+	overflow-y: auto;
+
+	&.hide-creation {
+		max-height: 21rem;
+	}
+}
+
+.option {
+	width: calc(100%);
+	background: var(--color-raised-bg);
+	color: var(--color-base);
+	box-shadow: none;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	gap: 0.5rem;
+
+	img {
+		margin-right: 0.5rem;
+	}
+
+	.name {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.profile-button {
+		align-content: start;
+		padding: 0.5rem;
+		text-align: left;
+	}
+}
+
+.profile-image {
+	--size: 2rem !important;
+}
+</style>
@@ -1,140 +0,0 @@
-<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>
-</template>
-
-<script setup lang="ts">
-import { CircleArrowRightIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
-import {
-	Admonition,
-	ButtonStyled,
-	Checkbox,
-	commonMessages,
-	defineMessages,
-	NewModal,
-	useVIntl,
-} 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 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 = '') {
-	onProceed.value = createInstance
-	fileName.value = selectedFileName
-	dontShowAgain.value = false
-
-	if (themeStore.getFeatureFlag(skipUnknownPackWarningFeatureFlag)) {
-		// noinspection ES6MissingAwait
-		createInstance()
-		return
-	}
-
-	modal.value?.show()
-}
-
-function reset() {
-	onProceed.value = undefined
-	fileName.value = ''
-}
-
-function cancel() {
-	modal.value?.hide()
-}
-
-async function proceed() {
-	if (!onProceed.value) {
-		return
-	}
-
-	if (dontShowAgain.value) {
-		themeStore.featureFlags[skipUnknownPackWarningFeatureFlag] = true
-		const settings = await getSettings()
-		settings.feature_flags[skipUnknownPackWarningFeatureFlag] = true
-		await setSettings(settings)
-	}
-
-	const createInstance = onProceed.value
-	modal.value?.hide()
-	// noinspection ES6MissingAwait
-	createInstance()
-}
-
-defineExpose({ show })
-</script>
@@ -30,19 +30,19 @@ const deleteConfirmModal = ref()

 const { instance } = injectInstanceSettings()

-const title = ref(instance.value.name)
-const icon: Ref<string | undefined> = ref(instance.value.icon_path)
-const groups = ref([...instance.value.groups])
+const title = ref(instance.name)
+const icon: Ref<string | undefined> = ref(instance.icon_path)
+const groups = ref(instance.groups)

 const newCategoryInput = ref('')

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

 async function duplicateProfile() {
-	await duplicate(instance.value.path).catch(handleError)
+	await duplicate(instance.path).catch(handleError)
 	trackEvent('InstanceDuplicate', {
-		loader: instance.value.loader,
-		game_version: instance.value.game_version,
+		loader: instance.loader,
+		game_version: instance.game_version,
 	})
 }

@@ -53,7 +53,7 @@ const availableGroups = computed(() => [

 async function resetIcon() {
 	icon.value = undefined
-	await edit_icon(instance.value.path, null).catch(handleError)
+	await edit_icon(instance.path, null).catch(handleError)
 	trackEvent('InstanceRemoveIcon')
 }

@@ -71,7 +71,7 @@ async function setIcon() {
 	if (!value) return

 	icon.value = value
-	await edit_icon(instance.value.path, icon.value).catch(handleError)
+	await edit_icon(instance.path, icon.value).catch(handleError)

 	trackEvent('InstanceSetIcon')
 }
@@ -102,7 +102,7 @@ watch(
 	[title, groups, groups],
 	async () => {
 		if (removing.value) return
-		await edit(instance.value.path, editProfileObject.value).catch(handleError)
+		await edit(instance.path, editProfileObject.value).catch(handleError)
 	},
 	{ deep: true },
 )
@@ -110,11 +110,11 @@ watch(
 const removing = ref(false)
 async function removeProfile() {
 	removing.value = true
-	const path = instance.value.path
+	const path = instance.path

 	trackEvent('InstanceRemove', {
-		loader: instance.value.loader,
-		game_version: instance.value.game_version,
+		loader: instance.loader,
+		game_version: instance.game_version,
 	})

 	await router.push({ path: '/' })
@@ -198,48 +198,45 @@ const messages = defineMessages({
 <template>
 	<ConfirmDeleteInstanceModal ref="deleteConfirmModal" @delete="removeProfile" />
 	<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
-						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',
-								action: () => setIcon(),
-							},
-							{
-								id: 'remove',
-								color: 'danger',
-								action: () => resetIcon(),
-								shown: !!icon,
-							},
-						]"
+		<div class="float-end ml-4 relative group">
+			<OverflowMenu
+				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',
+						action: () => setIcon(),
+					},
+					{
+						id: 'remove',
+						color: 'danger',
+						action: () => resetIcon(),
+						shown: !!icon,
+					},
+				]"
+			>
+				<Avatar
+					:src="icon ? convertFileSrc(icon) : icon"
+					size="108px"
+					class="!border-4 group-hover:brightness-75"
+					:tint-by="instance.path"
+					no-shadow
+				/>
+				<div class="absolute top-0 right-0 m-2">
+					<div
+						class="p-2 m-0 text-primary flex items-center justify-center aspect-square bg-button-bg rounded-full border-button-border border-solid border-[1px] hovering-icon-shadow"
 					>
-						<Avatar
-							:src="icon ? convertFileSrc(icon) : icon"
-							size="108px"
-							class="transition-[filter] group-hover:brightness-75"
-							:tint-by="instance.path"
-							no-shadow
-						/>
-						<div
-							class="absolute top-0 h-full w-full flex items-center justify-center opacity-0 transition-all group-hover:opacity-100"
-						>
-							<EditIcon aria-hidden="true" class="h-10 w-10 text-primary" />
-						</div>
-						<template #select>
-							<UploadIcon />
-							{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
-						</template>
-						<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
-					</OverflowMenu>
+						<EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
+					</div>
 				</div>
-			</div>
+				<template #select>
+					<UploadIcon />
+					{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
+				</template>
+				<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
+			</OverflowMenu>
 		</div>
-		<label for="instance-name" class="m-0 text-lg font-semibold text-contrast block">
+		<label for="instance-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
 			{{ formatMessage(messages.name) }}
 		</label>
 		<div class="flex">
@@ -252,82 +249,76 @@ const messages = defineMessages({
 			/>
 		</div>
 		<template v-if="instance.install_stage == 'installed'">
-			<div class="flex flex-col gap-2.5 mt-6">
-				<h2 id="duplicate-instance-label" class="m-0 text-lg font-semibold text-contrast block">
+			<div>
+				<h2
+					id="duplicate-instance-label"
+					class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block"
+				>
 					{{ formatMessage(messages.duplicateInstance) }}
 				</h2>
-				<ButtonStyled>
-					<button
-						v-tooltip="installing ? formatMessage(messages.duplicateButtonTooltipInstalling) : null"
-						aria-labelledby="duplicate-instance-label"
-						:disabled="installing"
-						class="w-max !shadow-none"
-						@click="duplicateProfile"
-					>
-						<CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
-					</button>
-				</ButtonStyled>
-				<p class="m-0">
+				<p class="m-0 mb-2">
 					{{ formatMessage(messages.duplicateInstanceDescription) }}
 				</p>
 			</div>
-		</template>
-		<div class="flex flex-col gap-2.5 mt-6">
-			<h2 class="m-0 text-lg font-semibold text-contrast block">
-				{{ formatMessage(messages.libraryGroups) }}
-			</h2>
-
-			<div class="flex flex-col gap-1">
-				<Checkbox
-					v-for="group in availableGroups"
-					:key="group"
-					:model-value="groups.includes(group)"
-					:label="group"
-					@click="toggleGroup(group)"
-				/>
-				<div class="flex gap-2 items-center">
-					<StyledInput
-						v-model="newCategoryInput"
-						:placeholder="formatMessage(messages.libraryGroupsEnterName)"
-						class="w-full max-w-[300px]"
-						@submit="() => addCategory"
-					/>
-					<ButtonStyled>
-						<button class="w-fit !shadow-none" @click="() => addCategory()">
-							<PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
-						</button>
-					</ButtonStyled>
-				</div>
-			</div>
-			<p class="m-0">
-				{{ formatMessage(messages.libraryGroupsDescription) }}
-			</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">
+			<ButtonStyled>
 				<button
-					aria-labelledby="delete-instance-label"
-					:disabled="removing"
-					class="w-fit !shadow-none"
-					@click="deleteConfirmModal.show()"
+					v-tooltip="installing ? formatMessage(messages.duplicateButtonTooltipInstalling) : null"
+					aria-labelledby="duplicate-instance-label"
+					:disabled="installing"
+					@click="duplicateProfile"
 				>
-					<SpinnerIcon v-if="removing" class="animate-spin" />
-					<TrashIcon v-else />
-					{{
-						removing
-							? formatMessage(messages.deletingInstanceButton)
-							: formatMessage(messages.deleteInstanceButton)
-					}}
+					<CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
 				</button>
 			</ButtonStyled>
-			<p class="m-0">
-				{{ formatMessage(messages.deleteInstanceDescription) }}
-			</p>
+		</template>
+		<h2 class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block">
+			{{ formatMessage(messages.libraryGroups) }}
+		</h2>
+		<p class="m-0 mb-2">
+			{{ formatMessage(messages.libraryGroupsDescription) }}
+		</p>
+		<div class="flex flex-col gap-1">
+			<Checkbox
+				v-for="group in availableGroups"
+				:key="group"
+				:model-value="groups.includes(group)"
+				:label="group"
+				@click="toggleGroup(group)"
+			/>
+			<div class="flex gap-2 items-center">
+				<StyledInput
+					v-model="newCategoryInput"
+					:placeholder="formatMessage(messages.libraryGroupsEnterName)"
+					@submit="() => addCategory"
+				/>
+				<ButtonStyled>
+					<button class="w-fit" @click="() => addCategory()">
+						<PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
+					</button>
+				</ButtonStyled>
+			</div>
 		</div>
+		<h2 id="delete-instance-label" class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block">
+			{{ formatMessage(messages.deleteInstance) }}
+		</h2>
+		<p class="m-0 mb-2">
+			{{ formatMessage(messages.deleteInstanceDescription) }}
+		</p>
+		<ButtonStyled color="red">
+			<button
+				aria-labelledby="delete-instance-label"
+				:disabled="removing"
+				@click="deleteConfirmModal.show()"
+			>
+				<SpinnerIcon v-if="removing" class="animate-spin" />
+				<TrashIcon v-else />
+				{{
+					removing
+						? formatMessage(messages.deletingInstanceButton)
+						: formatMessage(messages.deleteInstanceButton)
+				}}
+			</button>
+		</ButtonStyled>
 	</div>
 </template>
 <style scoped lang="scss">
@@ -22,11 +22,9 @@ const { instance } = injectInstanceSettings()
 const globalSettings = (await get().catch(handleError)) as AppSettings

 const overrideHooks = ref(
-	!!instance.value.hooks.pre_launch ||
-		!!instance.value.hooks.wrapper ||
-		!!instance.value.hooks.post_exit,
+	!!instance.hooks.pre_launch || !!instance.hooks.wrapper || !!instance.hooks.post_exit,
 )
-const hooks = ref(instance.value.hooks ?? globalSettings.hooks)
+const hooks = ref(instance.hooks ?? globalSettings.hooks)

 const editProfileObject = computed(() => {
 	const editProfile: {
@@ -42,7 +40,7 @@ const editProfileObject = computed(() => {
 watch(
 	[overrideHooks, hooks],
 	async () => {
-		await edit(instance.value.path, editProfileObject.value)
+		await edit(instance.path, editProfileObject.value)
 	},
 	{ deep: true },
 )
@@ -101,57 +99,57 @@ const messages = defineMessages({

 <template>
 	<div>
-		<h2 class="m-0 m-0 text-lg font-semibold text-contrast">
+		<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
 			{{ formatMessage(messages.hooks) }}
 		</h2>
-		<Checkbox v-model="overrideHooks" :label="formatMessage(messages.customHooks)" class="my-2.5" />
 		<p class="m-0">
 			{{ formatMessage(messages.hooksDescription) }}
 		</p>
+		<Checkbox v-model="overrideHooks" :label="formatMessage(messages.customHooks)" class="mt-2" />

-		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
+		<h2 class="mt-2 mb-1 text-lg font-extrabold text-contrast">
 			{{ formatMessage(messages.preLaunch) }}
 		</h2>
+		<p class="m-0">
+			{{ formatMessage(messages.preLaunchDescription) }}
+		</p>
 		<StyledInput
 			id="pre-launch"
 			v-model="hooks.pre_launch"
 			autocomplete="off"
 			:disabled="!overrideHooks"
 			:placeholder="formatMessage(messages.preLaunchEnter)"
-			wrapper-class="w-full my-2.5"
+			wrapper-class="w-full mt-2"
 		/>
-		<p class="m-0">
-			{{ formatMessage(messages.preLaunchDescription) }}
-		</p>

-		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
+		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
 			{{ formatMessage(messages.wrapper) }}
 		</h2>
+		<p class="m-0">
+			{{ formatMessage(messages.wrapperDescription) }}
+		</p>
 		<StyledInput
 			id="wrapper"
 			v-model="hooks.wrapper"
 			autocomplete="off"
 			:disabled="!overrideHooks"
 			:placeholder="formatMessage(messages.wrapperEnter)"
-			wrapper-class="w-full my-2.5"
+			wrapper-class="w-full mt-2"
 		/>
-		<p class="m-0">
-			{{ formatMessage(messages.wrapperDescription) }}
-		</p>

-		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
+		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
 			{{ formatMessage(messages.postExit) }}
 		</h2>
+		<p class="m-0">
+			{{ formatMessage(messages.postExitDescription) }}
+		</p>
 		<StyledInput
 			id="post-exit"
 			v-model="hooks.post_exit"
 			autocomplete="off"
 			:disabled="!overrideHooks"
 			:placeholder="formatMessage(messages.postExitEnter)"
-			wrapper-class="w-full my-2.5"
+			wrapper-class="w-full mt-2"
 		/>
-		<p class="m-0">
-			{{ formatMessage(messages.postExitDescription) }}
-		</p>
 	</div>
 </template>
@@ -35,7 +35,7 @@ const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const queryClient = useQueryClient()

-const { instance, offline, isMinecraftServer, onUnlinked, closeModal } = injectInstanceSettings()
+const { instance, offline, isMinecraftServer, onUnlinked } = injectInstanceSettings()

 const [
 	fabric_versions,
@@ -73,9 +73,9 @@ const [
 ])

 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),
+	queryKey: computed(() => ['linkedModpackInfo', instance.path]),
+	queryFn: () => get_linked_modpack_info(instance.path, 'must_revalidate'),
+	enabled: computed(() => !!instance.linked_data?.project_id && !offline),
 })

 const repairing = ref(false)
@@ -101,48 +101,44 @@ function getManifest(loader: string) {
 provideAppBackup({
 	async createBackup() {
 		const allProfiles = await list()
-		const prefix = `${instance.value.name} - Backup #`
+		const prefix = `${instance.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)
+		const newPath = await duplicate(instance.path)
 		await edit(newPath, { name: `${prefix}${nextNum}` })
 	},
 })

 provideInstallationSettings({
-	closeSettings: closeModal,
 	loading: ref(false),
 	installationInfo: computed(() => {
 		const rows = [
 			{
 				label: formatMessage(commonMessages.platformLabel),
-				value: formatLoaderLabel(instance.value.loader),
+				value: formatLoaderLabel(instance.loader),
 			},
 			{
 				label: formatMessage(commonMessages.gameVersionLabel),
-				value: instance.value.game_version,
+				value: instance.game_version,
 			},
 		]
-		if (instance.value.loader !== 'vanilla' && instance.value.loader_version) {
+		if (instance.loader !== 'vanilla' && instance.loader_version) {
 			rows.push({
 				label: formatMessage(messages.loaderVersion, {
-					loader: formatLoaderLabel(instance.value.loader),
+					loader: formatLoaderLabel(instance.loader),
 				}),
-				value: instance.value.loader_version,
+				value: instance.loader_version,
 			})
 		}
 		return rows
 	}),
-	isLinked: computed(() => !!instance.value.linked_data?.locked),
+	isLinked: computed(() => !!instance.linked_data?.locked),
 	isBusy: computed(
 		() =>
-			instance.value.install_stage !== 'installed' ||
-			repairing.value ||
-			reinstalling.value ||
-			!!offline,
+			instance.install_stage !== 'installed' || repairing.value || reinstalling.value || !!offline,
 	),
 	modpack: computed(() => {
 		if (!modpackInfo.value) return null
@@ -153,9 +149,9 @@ provideInstallationSettings({
 			versionNumber: modpackInfo.value.version?.version_number,
 		}
 	}),
-	currentPlatform: computed(() => instance.value.loader),
-	currentGameVersion: computed(() => instance.value.game_version),
-	currentLoaderVersion: computed(() => instance.value.loader_version ?? ''),
+	currentPlatform: computed(() => instance.loader),
+	currentGameVersion: computed(() => instance.game_version),
+	currentLoaderVersion: computed(() => instance.loader_version ?? ''),
 	availablePlatforms: loaders?.value?.map((x) => x.name) ?? [],

 	resolveGameVersions(loader, showSnapshots) {
@@ -198,50 +194,50 @@ provideInstallationSettings({
 		if (platform !== 'vanilla' && loaderVersionId) {
 			editProfile.loader_version = loaderVersionId
 		}
-		await edit(instance.value.path, editProfile).catch(handleError)
+		await edit(instance.path, editProfile).catch(handleError)
 	},

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

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

 	async reinstallModpack() {
 		reinstalling.value = true
-		await update_repair_modrinth(instance.value.path).catch(handleError)
+		await update_repair_modrinth(instance.path).catch(handleError)
 		reinstalling.value = false
 		trackEvent('InstanceRepair', {
-			loader: instance.value.loader,
-			game_version: instance.value.game_version,
+			loader: instance.loader,
+			game_version: instance.game_version,
 		})
 	},

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

 	getCachedModpackVersions: () => null,
 	async fetchModpackVersions() {
-		const versions = await get_project_versions(instance.value.linked_data!.project_id!).catch(
+		const versions = await get_project_versions(instance.linked_data!.project_id!).catch(
 			handleError,
 		)
 		return (versions ?? []) as Labrinth.Versions.v2.Version[]
@@ -254,20 +250,20 @@ provideInstallationSettings({
 	},

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

 	updaterModalProps: computed(() => ({
 		isApp: true,
 		currentVersionId:
-			modpackInfo.value?.update_version_id ?? instance.value.linked_data?.version_id ?? '',
+			modpackInfo.value?.update_version_id ?? instance.linked_data?.version_id ?? '',
 		projectIconUrl: modpackInfo.value?.project?.icon_url,
 		projectName: modpackInfo.value?.project?.title ?? 'Modpack',
-		currentGameVersion: instance.value.game_version,
-		currentLoader: instance.value.loader,
+		currentGameVersion: instance.game_version,
+		currentLoader: instance.loader,
 	})),

 	isServer: false,
@@ -1,15 +1,6 @@
 <script setup lang="ts">
+import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
 import {
-	CheckCircleIcon,
-	CoffeeIcon,
-	FolderSearchIcon,
-	RefreshCwIcon,
-	SearchIcon,
-	SpinnerIcon,
-	XCircleIcon,
-} from '@modrinth/assets'
-import {
-	ButtonStyled,
 	Checkbox,
 	defineMessages,
 	injectNotificationManager,
@@ -17,11 +8,9 @@ import {
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
-import { open } from '@tauri-apps/plugin-dialog'
 import { computed, readonly, ref, watch } from 'vue'

-import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
-import useJavaTest from '@/composables/useJavaTest'
+import JavaSelector from '@/components/ui/JavaSelector.vue'
 import useMemorySlider from '@/composables/useMemorySlider'
 import { edit, get_optimal_jre_key } from '@/helpers/profile'
 import { get } from '@/helpers/settings.ts'
@@ -36,69 +25,20 @@ 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 overrideJavaInstall = ref(!!instance.java_path)
+const optimalJava = readonly(await get_optimal_jre_key(instance.path).catch(handleError))
+const javaInstall = ref({ path: optimalJava.path ?? instance.java_path })

-const overrideJavaInstall = ref(!!instance.value.java_path)
-const javaPath = ref(instance.value.java_path ?? optimalJava?.path ?? '')
+const overrideJavaArgs = ref((instance.extra_launch_args?.length ?? 0) > 0)
+const javaArgs = ref((instance.extra_launch_args ?? globalSettings.extra_launch_args).join(' '))

-const activePath = computed(() =>
-	overrideJavaInstall.value ? javaPath.value : (optimalJava?.path ?? ''),
-)
-
-watch(overrideJavaInstall, (enabled) => {
-	if (enabled && !javaPath.value) {
-		javaPath.value = optimalJava?.path ?? ''
-	}
-})
-
-const { testingJava, javaTestResult, testJavaInstallationDebounced, testJavaInstallation } =
-	useJavaTest()
-
-const hoveringTest = ref(false)
-let hasInitialized = false
-
-watch(
-	activePath,
-	(newPath) => {
-		if (newPath && optimalJava?.parsed_version) {
-			if (!hasInitialized) {
-				testJavaInstallation(newPath, optimalJava?.parsed_version, false)
-				hasInitialized = true
-			} else {
-				testJavaInstallationDebounced(newPath, optimalJava?.parsed_version)
-			}
-		}
-	},
-	{ immediate: true },
-)
-
-const javaDetectionModal = ref<{ show: (version: number, current: object) => void } | null>(null)
-
-async function handleBrowseJava() {
-	const result = await open({ multiple: false })
-	if (result) {
-		javaPath.value = result
-	}
-}
-
-function handleDetectJava() {
-	javaDetectionModal.value?.show(optimalJava?.parsed_version, { path: javaPath.value })
-}
-
-const overrideJavaArgs = ref((instance.value.extra_launch_args?.length ?? 0) > 0)
-const javaArgs = ref(
-	(instance.value.extra_launch_args ?? globalSettings.extra_launch_args).join(' '),
-)
-
-const overrideEnvVars = ref((instance.value.custom_env_vars?.length ?? 0) > 0)
+const overrideEnvVars = ref((instance.custom_env_vars?.length ?? 0) > 0)
 const envVars = ref(
-	(instance.value.custom_env_vars ?? globalSettings.custom_env_vars)
-		.map((x) => x.join('='))
-		.join(' '),
+	(instance.custom_env_vars ?? globalSettings.custom_env_vars).map((x) => x.join('=')).join(' '),
 )

-const overrideMemorySettings = ref(!!instance.value.memory)
-const memory = ref(instance.value.memory ?? globalSettings.memory)
+const overrideMemorySettings = ref(!!instance.memory)
+const memory = ref(instance.memory ?? globalSettings.memory)
 const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) as unknown as {
 	maxMemory: number
 	snapPoints: number[]
@@ -107,8 +47,8 @@ const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) a
 const editProfileObject = computed(() => {
 	return {
 		java_path:
-			overrideJavaInstall.value && javaPath.value
-				? javaPath.value.replace('java.exe', 'javaw.exe')
+			overrideJavaInstall.value && javaInstall.value.path !== ''
+				? javaInstall.value.path.replace('java.exe', 'javaw.exe')
 				: null,
 		extra_launch_args: overrideJavaArgs.value
 			? javaArgs.value.trim().split(/\s+/).filter(Boolean)
@@ -127,7 +67,7 @@ const editProfileObject = computed(() => {
 watch(
 	[
 		overrideJavaInstall,
-		javaPath,
+		javaInstall,
 		overrideJavaArgs,
 		javaArgs,
 		overrideEnvVars,
@@ -136,7 +76,7 @@ watch(
 		memory,
 	],
 	async () => {
-		await edit(instance.value.path, editProfileObject.value)
+		await edit(instance.path, editProfileObject.value)
 	},
 	{ deep: true },
 )
@@ -146,45 +86,17 @@ const messages = defineMessages({
 		id: 'instance.settings.tabs.java.java-installation',
 		defaultMessage: 'Java installation',
 	},
-	customJavaInstallation: {
-		id: 'instance.settings.tabs.java.custom-java-installation',
-		defaultMessage: 'Custom Java installation',
-	},
-	javaPathPlaceholder: {
-		id: 'instance.settings.tabs.java.java-path-placeholder',
-		defaultMessage: '/path/to/java',
-	},
-	javaMemory: {
-		id: 'instance.settings.tabs.java.java-memory',
-		defaultMessage: 'Memory allocated',
-	},
-	customMemoryAllocation: {
-		id: 'instance.settings.tabs.java.custom-memory-allocation',
-		defaultMessage: 'Custom memory allocation',
-	},
 	javaArguments: {
 		id: 'instance.settings.tabs.java.java-arguments',
 		defaultMessage: 'Java arguments',
 	},
-	customJavaArguments: {
-		id: 'instance.settings.tabs.java.custom-java-arguments',
-		defaultMessage: 'Custom Java arguments',
-	},
-	enterJavaArguments: {
-		id: 'instance.settings.tabs.java.enter-java-arguments',
-		defaultMessage: 'Enter Java arguments...',
-	},
 	javaEnvironmentVariables: {
 		id: 'instance.settings.tabs.java.environment-variables',
 		defaultMessage: 'Environment variables',
 	},
-	customEnvironmentVariables: {
-		id: 'instance.settings.tabs.java.custom-environment-variables',
-		defaultMessage: 'Custom environment variables',
-	},
-	enterEnvironmentVariables: {
-		id: 'instance.settings.tabs.java.enter-environment-variables',
-		defaultMessage: 'Enter environmental variables...',
+	javaMemory: {
+		id: 'instance.settings.tabs.java.java-memory',
+		defaultMessage: 'Memory allocated',
 	},
 	hooks: {
 		id: 'instance.settings.tabs.java.hooks',
@@ -195,86 +107,43 @@ const messages = defineMessages({

 <template>
 	<div>
-		<JavaDetectionModal ref="javaDetectionModal" @submit="(val) => (javaPath = val.path)" />
-		<h2 class="m-0 mb-2 text-lg font-extrabold text-contrast block">
+		<h2 id="project-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
 			{{ formatMessage(messages.javaInstallation) }}
 		</h2>
-		<Checkbox
-			v-model="overrideJavaInstall"
-			:label="formatMessage(messages.customJavaInstallation)"
-			class="mb-2"
-		/>
-		<div class="flex gap-4 p-4 bg-bg rounded-2xl">
-			<div class="flex gap-3 items-start flex-1 min-w-0">
-				<div
-					class="w-10 h-10 flex items-center justify-center rounded-full bg-button-bg border-solid border-[1px] border-button-border p-2 mt-1 shrink-0 [&_svg]:h-full [&_svg]:w-full"
-				>
-					<CoffeeIcon />
-				</div>
-				<div class="flex flex-col gap-2 flex-1 min-w-0">
-					<span class="font-semibold leading-none mt-2"
-						>Java {{ optimalJava?.parsed_version }}</span
+		<Checkbox v-model="overrideJavaInstall" label="Custom Java installation" class="mb-2" />
+		<template v-if="!overrideJavaInstall">
+			<div class="flex my-2 items-center gap-2 font-semibold">
+				<template v-if="javaInstall">
+					<CheckCircleIcon class="text-brand-green h-4 w-4" />
+					<span>Using default Java {{ optimalJava.major_version }} installation:</span>
+				</template>
+				<template v-else-if="optimalJava">
+					<XCircleIcon class="text-brand-red h-5 w-5" />
+					<span
+						>Could not find a default Java {{ optimalJava.major_version }} installation. Please set
+						one below:</span
 					>
-					<div class="flex gap-2 items-center">
-						<StyledInput
-							:model-value="activePath"
-							:disabled="!overrideJavaInstall"
-							autocomplete="off"
-							:placeholder="formatMessage(messages.javaPathPlaceholder)"
-							wrapper-class="flex-1 min-w-0"
-							@update:model-value="(val) => (javaPath = String(val))"
-						/>
-						<ButtonStyled
-							:color="
-								!hoveringTest && !testingJava
-									? javaTestResult === true
-										? 'green'
-										: 'red'
-									: 'standard'
-							"
-							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>
-					</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>
-					</div>
-				</div>
+				</template>
+				<template v-else>
+					<XCircleIcon class="text-brand-red h-5 w-5" />
+					<span
+						>Could not automatically determine a Java installation to use. Please set one
+						below:</span
+					>
+				</template>
 			</div>
-		</div>
-		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+			<div
+				v-if="javaInstall && !overrideJavaInstall"
+				class="p-4 bg-bg rounded-xl text-xs text-secondary leading-none font-mono"
+			>
+				{{ javaInstall.path }}
+			</div>
+		</template>
+		<JavaSelector v-if="overrideJavaInstall || !javaInstall" v-model="javaInstall" />
+		<h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
 			{{ formatMessage(messages.javaMemory) }}
 		</h2>
-		<Checkbox
-			v-model="overrideMemorySettings"
-			:label="formatMessage(messages.customMemoryAllocation)"
-			class="mb-2"
-		/>
+		<Checkbox v-model="overrideMemorySettings" label="Custom memory allocation" class="mb-2" />
 		<Slider
 			id="max-memory"
 			v-model="memory.maximum"
@@ -286,36 +155,28 @@ const messages = defineMessages({
 			:snap-range="512"
 			unit="MB"
 		/>
-		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+		<h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
 			{{ formatMessage(messages.javaArguments) }}
 		</h2>
-		<Checkbox
-			v-model="overrideJavaArgs"
-			:label="formatMessage(messages.customJavaArguments)"
-			class="my-2"
-		/>
+		<Checkbox v-model="overrideJavaArgs" label="Custom java arguments" class="my-2" />
 		<StyledInput
 			id="java-args"
 			v-model="javaArgs"
 			autocomplete="off"
 			:disabled="!overrideJavaArgs"
-			:placeholder="formatMessage(messages.enterJavaArguments)"
+			placeholder="Enter java arguments..."
 			wrapper-class="w-full"
 		/>
-		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+		<h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
 			{{ formatMessage(messages.javaEnvironmentVariables) }}
 		</h2>
-		<Checkbox
-			v-model="overrideEnvVars"
-			:label="formatMessage(messages.customEnvironmentVariables)"
-			class="mb-2"
-		/>
+		<Checkbox v-model="overrideEnvVars" label="Custom environment variables" class="mb-2" />
 		<StyledInput
 			id="env-vars"
 			v-model="envVars"
 			autocomplete="off"
 			:disabled="!overrideEnvVars"
-			:placeholder="formatMessage(messages.enterEnvironmentVariables)"
+			placeholder="Enter environmental variables..."
 			wrapper-class="w-full"
 		/>
 	</div>
@@ -22,14 +22,12 @@ const { instance } = injectInstanceSettings()

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

-const overrideWindowSettings = ref(
-	!!instance.value.game_resolution || !!instance.value.force_fullscreen,
-)
+const overrideWindowSettings = ref(!!instance.game_resolution || !!instance.force_fullscreen)
 const resolution: Ref<[number, number]> = ref(
-	instance.value.game_resolution ?? (globalSettings.game_resolution.slice() as [number, number]),
+	instance.game_resolution ?? (globalSettings.game_resolution.slice() as [number, number]),
 )
 const fullscreenSetting: Ref<boolean> = ref(
-	instance.value.force_fullscreen ?? globalSettings.force_fullscreen,
+	instance.force_fullscreen ?? globalSettings.force_fullscreen,
 )

 const editProfileObject = computed(() => {
@@ -48,7 +46,7 @@ const editProfileObject = computed(() => {
 watch(
 	[overrideWindowSettings, resolution, fullscreenSetting],
 	async () => {
-		await edit(instance.value.path, editProfileObject.value)
+		await edit(instance.path, editProfileObject.value)
 	},
 	{ deep: true },
 )
@@ -94,14 +92,14 @@ const messages = defineMessages({
 </script>

 <template>
-	<div class="flex flex-col gap-6">
+	<div>
 		<Checkbox
 			v-model="overrideWindowSettings"
 			:label="formatMessage(messages.customWindowSettings)"
 		/>
-		<div class="flex items-center gap-4 justify-between">
-			<div class="flex flex-col gap-1">
-				<h2 class="m-0 text-lg font-semibold text-contrast">
+		<div class="mt-2 flex items-center gap-4 justify-between">
+			<div>
+				<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
 					{{ formatMessage(messages.fullscreen) }}
 				</h2>
 				<p class="m-0">
@@ -120,9 +118,9 @@ const messages = defineMessages({
 			/>
 		</div>

-		<div class="flex items-center gap-4 justify-between">
-			<div class="flex flex-col gap-1">
-				<h2 class="m-0 text-lg font-semibold text-contrast">
+		<div class="mt-4 flex items-center gap-4 justify-between">
+			<div>
+				<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
 					{{ formatMessage(messages.width) }}
 				</h2>
 				<p class="m-0">
@@ -139,9 +137,9 @@ const messages = defineMessages({
 			/>
 		</div>

-		<div class="flex items-center gap-4 justify-between">
-			<div class="flex flex-col gap-1">
-				<h2 class="m-0 text-lg font-semibold text-contrast">
+		<div class="mt-4 flex items-center gap-4 justify-between">
+			<div>
+				<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
 					{{ formatMessage(messages.height) }}
 				</h2>
 				<p class="m-0">
@@ -6,13 +6,12 @@ import {
 	LanguagesIcon,
 	ModrinthIcon,
 	PaintbrushIcon,
+	ReportIcon,
 	SettingsIcon,
 	ShieldIcon,
-	ToggleRightIcon,
 } from '@modrinth/assets'
 import {
 	commonMessages,
-	commonSettingsMessages,
 	defineMessage,
 	defineMessages,
 	ProgressBar,
@@ -96,8 +95,11 @@ const tabs = [
 		content: ResourceManagementSettings,
 	},
 	{
-		name: commonSettingsMessages.featureFlags,
-		icon: ToggleRightIcon,
+		name: defineMessage({
+			id: 'app.settings.tabs.feature-flags',
+			defaultMessage: 'Feature flags',
+		}),
+		icon: ReportIcon,
 		content: FeatureFlagSettings,
 		developerOnly: true,
 	},
@@ -177,7 +179,7 @@ const messages = defineMessages({
 					>
 						<ModrinthIcon class="w-6 h-6" />
 					</button>
-					<div class="max-w-[200px]">
+					<div>
 						<p class="m-0">Modrinth App {{ version }}</p>
 						<p class="m-0">
 							<span v-if="osPlatform === 'macos'">macOS</span>
@@ -7,7 +7,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button @click="modal?.hide()">
+					<button class="!border !border-surface-4" @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
@@ -44,20 +44,11 @@ const emit = defineEmits<{
 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() {
-	tabbedModal.value?.hide()
-}
-
 provideInstanceSettings({
-	instance: instanceRef,
+	instance: props.instance,
 	offline: props.offline,
 	isMinecraftServer,
 	onUnlinked: handleUnlinked,
-	closeModal: hide,
 })

 watch(
@@ -120,6 +111,9 @@ const tabs = computed<TabbedModalTab[]>(() => [
 	},
 ])

+const queryClient = useQueryClient()
+const tabbedModal = ref<InstanceType<typeof TabbedModal> | null>(null)
+
 function show(tabIndex?: number) {
 	if (props.instance.linked_data?.project_id) {
 		queryClient.prefetchQuery({
@@ -133,7 +127,7 @@ function show(tabIndex?: number) {
 	}
 }

-defineExpose({ show, hide })
+defineExpose({ show })
 </script>
 <template>
 	<TabbedModal
@@ -31,7 +31,7 @@ const props = defineProps({
 const modal = useTemplateRef('modal')

 defineExpose({
-	show: (e?: MouseEvent) => {
+	show: (e: MouseEvent) => {
 		modal.value?.show(e)
 	},
 	hide: () => {
@@ -1,31 +1,21 @@
 <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>
+		<Admonition type="warning" :header="formatMessage(messages.admonitionHeader)">
+			{{ formatMessage(messages.admonitionBody, { instanceName }) }}
+		</Admonition>

 		<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 class="!border !border-surface-4" @click="handleGoToInstance">
+						<ExternalIcon />
+						{{ formatMessage(messages.goToInstance) }}
 					</button>
 				</ButtonStyled>
 				<ButtonStyled color="orange">
 					<button @click="handleCreateAnyway">
 						<PlusIcon />
-						{{ formatMessage(messages.create) }}
+						{{ formatMessage(messages.createAnyway) }}
 					</button>
 				</ButtonStyled>
 			</div>
@@ -34,15 +24,8 @@
 </template>

 <script setup lang="ts">
-import { PlusIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	commonMessages,
-	defineMessages,
-	IntlFormatted,
-	NewModal,
-	useVIntl,
-} from '@modrinth/ui'
+import { ExternalIcon, PlusIcon } from '@modrinth/assets'
+import { Admonition, ButtonStyled, defineMessages, NewModal, useVIntl } from '@modrinth/ui'
 import { ref } from 'vue'

 const { formatMessage } = useVIntl()
@@ -52,18 +35,21 @@ const messages = defineMessages({
 		id: 'app.instance.modpack-already-installed.header',
 		defaultMessage: 'Modpack already installed',
 	},
-	body: {
-		id: 'app.instance.modpack-already-installed.body',
-		defaultMessage:
-			'This modpack is already installed in the <bold>{instanceName}</bold> instance. Are you sure you want to duplicate it?',
+	admonitionHeader: {
+		id: 'app.instance.modpack-already-installed.admonition-header',
+		defaultMessage: 'Duplicate modpack',
 	},
-	instance: {
-		id: 'app.instance.modpack-already-installed.instance',
-		defaultMessage: 'Instance',
+	admonitionBody: {
+		id: 'app.instance.modpack-already-installed.admonition-body',
+		defaultMessage: 'This modpack is already installed in the "{instanceName}" instance.',
 	},
-	create: {
-		id: 'app.instance.modpack-already-installed.create',
-		defaultMessage: 'Create',
+	goToInstance: {
+		id: 'app.instance.modpack-already-installed.go-to-instance',
+		defaultMessage: 'Go to instance',
+	},
+	createAnyway: {
+		id: 'app.instance.modpack-already-installed.create-anyway',
+		defaultMessage: 'Create anyway',
 	},
 })

@@ -82,10 +68,6 @@ function show(name: string, path: string) {
 	modal.value?.show()
 }

-function handleCancel() {
-	modal.value?.hide()
-}
-
 function handleGoToInstance() {
 	modal.value?.hide()
 	emit('go-to-instance', instancePath.value)
@@ -1,106 +1,13 @@
 <script setup lang="ts">
-import { Combobox, defineMessages, ThemeSelector, Toggle, useVIntl } from '@modrinth/ui'
+import { Combobox, ThemeSelector, Toggle } 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'
+import type { ColorTheme } 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())
@@ -114,10 +21,8 @@ watch(
 )
 </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>
+	<h2 class="m-0 text-lg font-extrabold text-contrast">Color theme</h2>
+	<p class="m-0 mt-1">Select your preferred color theme for Modrinth App.</p>

 	<ThemeSelector
 		:update-color-theme="
@@ -131,13 +36,12 @@ watch(
 		system-theme-color="system"
 	/>

-	<div class="mt-6 flex items-center justify-between">
+	<div class="mt-4 flex items-center justify-between">
 		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">
-				{{ formatMessage(messages.advancedRenderingTitle) }}
-			</h2>
+			<h2 class="m-0 text-lg font-extrabold text-contrast">Advanced rendering</h2>
 			<p class="m-0 mt-1">
-				{{ formatMessage(messages.advancedRenderingDescription) }}
+				Enables advanced rendering such as blur effects that may cause performance issues without
+				hardware-accelerated rendering.
 			</p>
 		</div>

@@ -153,116 +57,66 @@ watch(
 		/>
 	</div>

-	<div class="mt-6 flex items-center justify-between">
+	<div class="mt-4 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>
+			<h2 class="m-0 text-lg font-extrabold text-contrast">Hide nametag</h2>
+			<p class="m-0 mt-1">Disables the nametag above your player on the skins page.</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
-				}
-			"
-		/>
+		<Toggle id="hide-nametag-skins-page" v-model="settings.hide_nametag_skins_page" />
 	</div>

-	<div v-if="os !== 'MacOS'" class="mt-6 flex items-center justify-between gap-4">
+	<div v-if="os !== 'MacOS'" class="mt-4 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>
+			<h2 class="m-0 text-lg font-extrabold text-contrast">Native decorations</h2>
+			<p class="m-0 mt-1">Use system window frame (app restart required).</p>
 		</div>
 		<Toggle id="native-decorations" v-model="settings.native_decorations" />
 	</div>

-	<div class="mt-6 flex items-center justify-between">
+	<div class="mt-4 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>
+			<h2 class="m-0 text-lg font-extrabold text-contrast">Minimize launcher</h2>
+			<p class="m-0 mt-1">Minimize the launcher when a Minecraft process starts.</p>
 		</div>
 		<Toggle id="minimize-launcher" v-model="settings.hide_on_process_start" />
 	</div>

-	<div class="mt-6 flex items-center justify-between">
+	<div class="mt-4 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>
+			<h2 class="m-0 text-lg font-extrabold text-contrast">Default landing page</h2>
+			<p class="m-0 mt-1">Change the page to which the launcher opens on.</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),
-				},
-			]"
+			class="w-40"
+			:options="['Home', 'Library'].map((v) => ({ value: v, label: v }))"
 			:display-value="settings.default_page ?? 'Select an option'"
 		/>
 	</div>

-	<div class="mt-6 flex items-center justify-between">
+	<div class="mt-4 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>
+			<h2 class="m-0 text-lg font-extrabold text-contrast">Jump back into worlds</h2>
+			<p class="m-0 mt-1">Includes recent worlds in the "Jump back in" section on the Home page.</p>
 		</div>
 		<Toggle
-			:model-value="themeStore.getFeatureFlag(worldsInHomeFeatureFlag)"
+			:model-value="themeStore.getFeatureFlag('worlds_in_home')"
 			@update:model-value="
 				() => {
-					const newValue = !themeStore.getFeatureFlag(worldsInHomeFeatureFlag)
-					themeStore.featureFlags[worldsInHomeFeatureFlag] = newValue
-					settings.feature_flags[worldsInHomeFeatureFlag] = newValue
+					const newValue = !themeStore.getFeatureFlag('worlds_in_home')
+					themeStore.featureFlags['worlds_in_home'] = newValue
+					settings.feature_flags['worlds_in_home'] = newValue
 				}
 			"
 		/>
 	</div>

-	<div class="mt-6 flex items-center justify-between gap-4">
+	<div class="mt-4 flex items-center justify-between">
 		<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>
+			<h2 class="m-0 text-lg font-extrabold text-contrast">Toggle sidebar</h2>
+			<p class="m-0 mt-1">Enables the ability to toggle the sidebar.</p>
 		</div>
 		<Toggle
 			id="toggle-sidebar"
@@ -52,135 +52,127 @@ watch(

 <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>
+		<h2 class="m-0 text-lg font-extrabold text-contrast">Window size</h2>

-				<Toggle id="fullscreen" v-model="settings.force_fullscreen" />
+		<div class="flex items-center justify-between gap-4">
+			<div>
+				<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Fullscreen</h3>
+				<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
+					Overwrites the options.txt file to start in full screen when launched.
+				</p>
 			</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>
+			<Toggle id="fullscreen" v-model="settings.force_fullscreen" />
 		</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 class="flex items-center justify-between gap-4">
+			<div>
+				<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Width</h3>
+				<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
+					The width of the game window when launched.
+				</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>
+			<StyledInput
+				id="width"
+				v-model="settings.game_resolution[0]"
+				:disabled="settings.force_fullscreen"
+				autocomplete="off"
+				type="number"
+				placeholder="Enter width..."
+			/>
 		</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 class="flex items-center justify-between gap-4">
+			<div>
+				<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Height</h3>
+				<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
+					The height of the game window when 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>
+			<StyledInput
+				id="height"
+				v-model="settings.game_resolution[1]"
+				:disabled="settings.force_fullscreen"
+				autocomplete="off"
+				type="number"
+				placeholder="Enter height..."
+			/>
 		</div>
+
+		<hr class="mt-4 bg-button-border border-none h-[1px]" />
+
+		<h2 class="mt-4 m-0 text-lg font-extrabold text-contrast">Memory allocated</h2>
+		<p class="m-0 mt-1 leading-tight">The memory allocated to each instance when it is ran.</p>
+		<Slider
+			id="max-memory"
+			v-model="settings.memory.maximum"
+			:min="512"
+			:max="maxMemory"
+			:step="64"
+			:snap-points="snapPoints"
+			:snap-range="512"
+			unit="MB"
+		/>
+
+		<h2 class="mt-4 mb-2 text-lg font-extrabold 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"
+		/>
+
+		<h2 class="mt-4 mb-2 text-lg font-extrabold 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"
+		/>
+
+		<hr class="mt-4 bg-button-border border-none h-[1px]" />
+
+		<h2 class="mt-4 m-0 text-lg font-extrabold text-contrast">Hooks</h2>
+
+		<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Pre launch</h3>
+		<p class="m-0 mt-1 mb-2 leading-tight text-secondary">Ran before the instance is launched.</p>
+		<StyledInput
+			id="pre-launch"
+			v-model="settings.hooks.pre_launch"
+			autocomplete="off"
+			type="text"
+			placeholder="Enter pre-launch command..."
+			wrapper-class="w-full"
+		/>
+
+		<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Wrapper</h3>
+		<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
+			Wrapper command for launching Minecraft.
+		</p>
+		<StyledInput
+			id="wrapper"
+			v-model="settings.hooks.wrapper"
+			autocomplete="off"
+			type="text"
+			placeholder="Enter wrapper command..."
+			wrapper-class="w-full"
+		/>
+
+		<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Post exit</h3>
+		<p class="m-0 mt-1 mb-2 leading-tight text-secondary">Ran after the game closes.</p>
+		<StyledInput
+			id="post-exit"
+			v-model="settings.hooks.post_exit"
+			autocomplete="off"
+			type="text"
+			placeholder="Enter post-exit command..."
+			wrapper-class="w-full"
+		/>
 	</div>
 </template>
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ButtonStyled, Toggle } from '@modrinth/ui'
+import { Toggle } from '@modrinth/ui'
 import { ref, watch } from 'vue'

 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
@@ -25,28 +25,17 @@ watch(
 )
 </script>
 <template>
-	<div class="flex flex-col gap-2.5 min-w-[600px]">
-		<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">
-					{{ option.replaceAll('_', ' ') }}
-				</h2>
-			</div>
-			<div class="flex items-center gap-2">
-				<ButtonStyled type="transparent">
-					<button
-						:disabled="themeStore.getFeatureFlag(option) === DEFAULT_FEATURE_FLAGS[option]"
-						@click="setFeatureFlag(option, DEFAULT_FEATURE_FLAGS[option])"
-					>
-						Reset to default
-					</button>
-				</ButtonStyled>
-				<Toggle
-					id="advanced-rendering"
-					:model-value="themeStore.getFeatureFlag(option)"
-					@update:model-value="() => setFeatureFlag(option, !themeStore.getFeatureFlag(option))"
-				/>
-			</div>
+	<div v-for="option in options" :key="option" class="mt-4 flex items-center justify-between">
+		<div>
+			<h2 class="m-0 text-lg font-extrabold text-contrast capitalize">
+				{{ option.replaceAll('_', ' ') }}
+			</h2>
 		</div>
+
+		<Toggle
+			id="advanced-rendering"
+			:model-value="themeStore.getFeatureFlag(option)"
+			@update:model-value="() => setFeatureFlag(option, !themeStore.getFeatureFlag(option))"
+		/>
 	</div>
 </template>
@@ -21,21 +21,15 @@ async function updateJavaVersion(version) {
 }
 </script>
 <template>
-	<div class="flex flex-col gap-6">
-		<div
-			v-for="(javaVersion, index) in [25, 21, 17, 8]"
-			:key="`java-${javaVersion}`"
-			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
-			</h2>
-			<JavaSelector
-				:id="'java-selector-' + javaVersion"
-				v-model="javaVersions[javaVersion]"
-				:version="javaVersion"
-				@update:model-value="updateJavaVersion"
-			/>
-		</div>
+	<div v-for="(javaVersion, index) in [25, 21, 17, 8]" :key="`java-${javaVersion}`">
+		<h2 class="m-0 text-lg font-extrabold text-contrast" :class="{ 'mt-4': index !== 0 }">
+			Java {{ javaVersion }} location
+		</h2>
+		<JavaSelector
+			:id="'java-selector-' + javaVersion"
+			v-model="javaVersions[javaVersion]"
+			:version="javaVersion"
+			@update:model-value="updateJavaVersion"
+		/>
 	</div>
 </template>
@@ -43,7 +43,7 @@ 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-extrabold text-contrast">Language</h2>

 	<Admonition type="warning" class="mt-2 mb-4">
 		{{ formatMessage(languageSelectorMessages.languageWarning, { platform }) }}
@@ -25,8 +25,8 @@ watch(
 <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">
+			<h2 class="m-0 text-lg font-extrabold text-contrast">Personalized ads</h2>
+			<p class="m-0 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>
@@ -36,8 +36,8 @@ watch(

 	<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">
+			<h2 class="m-0 text-lg font-extrabold text-contrast">Telemetry</h2>
+			<p class="m-0 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.
@@ -48,8 +48,8 @@ watch(

 	<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">
+			<h2 class="m-0 text-lg font-extrabold text-contrast">Discord RPC</h2>
+			<p class="m-0 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>
@@ -1,6 +1,6 @@
 <script setup>
 import { BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, Slider, StyledInput } from '@modrinth/ui'
+import { Button, injectNotificationManager, Slider, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { ref, watch } from 'vue'

@@ -62,79 +62,67 @@ async function findLauncherDir() {
 </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>
+	<h2 class="m-0 text-lg font-extrabold text-contrast">App directory</h2>
+	<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
+		The directory where the launcher stores all of its files. Changes will be applied after
+		restarting the launcher.
+	</p>

-		<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 class="m-1 my-2">
+		<StyledInput
+			id="appDir"
+			v-model="settings.custom_dir"
+			:icon="BoxIcon"
+			type="text"
+			wrapper-class="w-full"
+		>
+			<template #right>
+				<Button class="r-btn" @click="findLauncherDir">
+					<FolderSearchIcon />
+				</Button>
+			</template>
+		</StyledInput>
 	</div>
+
+	<div>
+		<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-extrabold text-contrast">App cache</h2>
+		<p class="m-0 mt-1 mb-2 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>
+	<button id="purge-cache" class="btn min-w-max" @click="$refs.purgeCacheConfirmModal.show()">
+		<TrashIcon />
+		Purge cache
+	</button>
+
+	<h2 class="m-0 text-lg font-extrabold text-contrast mt-4">Maximum concurrent downloads</h2>
+	<p class="m-0 mt-1 mb-2 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>
+	<Slider
+		id="max-downloads"
+		v-model="settings.max_concurrent_downloads"
+		:min="1"
+		:max="10"
+		:step="1"
+	/>
+
+	<h2 class="mt-4 m-0 text-lg font-extrabold text-contrast">Maximum concurrent writes</h2>
+	<p class="m-0 mt-1 mb-2 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>
+	<Slider id="max-writes" v-model="settings.max_concurrent_writes" :min="1" :max="50" :step="1" />
 </template>
@@ -1,242 +1,146 @@
 <template>
-	<NewModal ref="modal" :on-hide="handleModalHide">
+	<UploadSkinModal ref="uploadModal" />
+	<ModalWrapper ref="modal" @on-hide="resetState">
 		<template #title>
 			<span class="text-lg font-extrabold text-contrast">
-				{{ formatMessage(mode === 'edit' ? messages.editSkinTitle : messages.addSkinTitle) }}
+				{{ mode === 'edit' ? 'Editing skin' : 'Adding a skin' }}
 			</span>
 		</template>

 		<div class="flex flex-col md:flex-row gap-6">
-			<div class="h-[25rem] w-[16rem] min-w-[16rem] flex-shrink-0 md:self-center">
-				<SkinPreviewRenderer
-					:variant="variant"
-					:texture-src="previewSkin || ''"
-					:cape-src="selectedCapeTexture"
-					framing="modal"
-					:initial-rotation="Math.PI / 8"
-					class="h-full w-full"
-				/>
+			<div class="max-h-[25rem] w-[16rem] min-w-[16rem] overflow-hidden relative">
+				<div class="absolute top-[-4rem] left-0 h-[32rem] w-[16rem] flex-shrink-0">
+					<SkinPreviewRenderer
+						:variant="variant"
+						:texture-src="previewSkin || ''"
+						:cape-src="selectedCapeTexture"
+						:scale="1.4"
+						:fov="50"
+						:initial-rotation="Math.PI / 8"
+						class="h-full w-full"
+					/>
+				</div>
 			</div>

 			<div class="flex flex-col gap-4 w-full min-h-[20rem]">
-				<section v-if="mode === 'edit' && canEditTextureAndModel">
-					<h2 class="text-base font-semibold mb-2">{{ formatMessage(messages.textureSection) }}</h2>
-					<ButtonStyled>
-						<button class="!shadow-none" @click="openTextureFileBrowser">
-							<UploadIcon /> {{ formatMessage(messages.replaceTextureButton) }}
-						</button>
-					</ButtonStyled>
-					<input
-						ref="textureFileInput"
-						type="file"
-						accept="image/png"
-						class="hidden"
-						@change="onTextureFileInputChange"
-					/>
+				<section>
+					<h2 class="text-base font-semibold mb-2">Texture</h2>
+					<Button @click="openUploadSkinModal"> <UploadIcon /> Replace texture </Button>
 				</section>

-				<section v-if="canEditTextureAndModel">
-					<h2 class="text-base font-semibold mb-2">
-						{{ formatMessage(messages.armStyleSection) }}
-					</h2>
+				<section>
+					<h2 class="text-base font-semibold mb-2">Arm style</h2>
 					<RadioButtons v-model="variant" :items="['CLASSIC', 'SLIM']">
 						<template #default="{ item }">
-							{{
-								formatMessage(item === 'CLASSIC' ? messages.wideArmStyle : messages.slimArmStyle)
-							}}
+							{{ item === 'CLASSIC' ? 'Wide' : 'Slim' }}
 						</template>
 					</RadioButtons>
 				</section>

 				<section>
-					<h2 class="text-base font-semibold mb-2">{{ formatMessage(messages.capeSection) }}</h2>
-					<div class="relative w-fit max-w-full">
-						<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-6"
-							leave-active-class="transition-all duration-200 ease-in"
-							leave-from-class="opacity-100 max-h-6"
-							leave-to-class="opacity-0 max-h-0"
+					<h2 class="text-base font-semibold mb-2">Cape</h2>
+					<div class="flex gap-2">
+						<CapeButton
+							v-if="defaultCape"
+							:id="defaultCape.id"
+							:texture="defaultCape.texture"
+							:name="undefined"
+							:selected="!selectedCape"
+							faded
+							@select="selectCape(undefined)"
 						>
-							<div
-								v-if="showCapeTopFade"
-								class="pointer-events-none absolute left-0 right-0 top-0 z-10 h-6 bg-gradient-to-b from-bg-raised to-transparent"
-							/>
-						</Transition>
+							<span>Use default cape</span>
+						</CapeButton>
+						<CapeLikeTextButton v-else :highlighted="!selectedCape" @click="selectCape(undefined)">
+							<span>Use default cape</span>
+						</CapeLikeTextButton>

-						<div
-							ref="capeListRef"
-							class="grid grid-cols-[repeat(4,max-content)] auto-rows-max gap-2 overflow-y-auto pr-1"
-							:style="{ maxHeight: capeListMaxHeight }"
-							@scroll="checkCapeScrollState"
+						<CapeButton
+							v-for="cape in visibleCapeList"
+							:id="cape.id"
+							:key="cape.id"
+							:texture="cape.texture"
+							:name="cape.name || 'Cape'"
+							:selected="selectedCape?.id === cape.id"
+							@select="selectCape(cape)"
+						/>
+
+						<CapeLikeTextButton
+							v-if="(capes?.length ?? 0) > 2"
+							tooltip="View more capes"
+							@mouseup="openSelectCapeModal"
 						>
-							<CapeLikeTextButton
-								:tooltip="formatMessage(messages.noCapeTooltip)"
-								:highlighted="!selectedCape"
-								@click="selectCape(undefined)"
-							>
-								<template #icon><XIcon /></template>
-								<span>{{ formatMessage(messages.noneCapeOption) }}</span>
-							</CapeLikeTextButton>
-
-							<CapeButton
-								v-for="cape in sortedCapes"
-								:id="cape.id"
-								:key="cape.id"
-								:texture="cape.texture"
-								:name="cape.name || formatMessage(messages.capeFallbackName)"
-								:selected="selectedCape?.id === cape.id"
-								@select="selectCape(cape)"
-							/>
-						</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-6"
-							leave-active-class="transition-all duration-200 ease-in"
-							leave-from-class="opacity-100 max-h-6"
-							leave-to-class="opacity-0 max-h-0"
-						>
-							<div
-								v-if="showCapeBottomFade"
-								class="pointer-events-none absolute bottom-0 left-0 right-0 z-10 h-6 bg-gradient-to-t from-bg-raised to-transparent"
-							/>
-						</Transition>
+							<template #icon><ChevronRightIcon /></template>
+							<span>More</span>
+						</CapeLikeTextButton>
 					</div>
 				</section>
 			</div>
 		</div>

-		<template #actions>
-			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button :disabled="isSaving" @click="hide">
-						<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button v-tooltip="saveTooltip" :disabled="disableSave || isSaving" @click="save">
-						<SpinnerIcon v-if="isSaving" class="animate-spin" />
-						<CheckIcon v-else-if="mode === 'new'" />
-						<SaveIcon v-else />
-						{{ formatMessage(mode === 'new' ? messages.addSkinButton : messages.saveSkinButton) }}
-					</button>
-				</ButtonStyled>
-			</div>
-		</template>
-	</NewModal>
+		<div class="flex gap-2 mt-12">
+			<ButtonStyled color="brand" :disabled="disableSave || isSaving">
+				<button v-tooltip="saveTooltip" :disabled="disableSave || isSaving" @click="save">
+					<SpinnerIcon v-if="isSaving" class="animate-spin" />
+					<CheckIcon v-else-if="mode === 'new'" />
+					<SaveIcon v-else />
+					{{ mode === 'new' ? 'Add skin' : 'Save skin' }}
+				</button>
+			</ButtonStyled>
+			<Button :disabled="isSaving" @click="hide"><XIcon />Cancel</Button>
+		</div>
+	</ModalWrapper>
+
+	<SelectCapeModal
+		ref="selectCapeModal"
+		:capes="capes || []"
+		@select="handleCapeSelected"
+		@cancel="handleCapeCancel"
+	/>
 </template>

 <script setup lang="ts">
-import { CheckIcon, SaveIcon, SpinnerIcon, UploadIcon, XIcon } from '@modrinth/assets'
 import {
+	CheckIcon,
+	ChevronRightIcon,
+	SaveIcon,
+	SpinnerIcon,
+	UploadIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Button,
 	ButtonStyled,
 	CapeButton,
 	CapeLikeTextButton,
-	commonMessages,
-	defineMessages,
 	injectNotificationManager,
-	NewModal,
 	RadioButtons,
 	SkinPreviewRenderer,
-	useScrollIndicator,
-	useVIntl,
 } from '@modrinth/ui'
-import { arrayBufferToBase64 } from '@modrinth/utils'
-import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
+import { computed, ref, useTemplateRef, watch } from 'vue'

+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
+import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
 import {
 	add_and_equip_custom_skin,
 	type Cape,
 	determineModelType,
-	equip_skin,
 	get_normalized_skin_texture,
-	normalize_skin_texture,
-	save_custom_skin,
+	remove_custom_skin,
 	type Skin,
 	type SkinModel,
 	type SkinTextureUrl,
+	unequip_skin,
 } from '@/helpers/skins.ts'

-const CAPE_LIST_MAX_HEIGHT = 334
-const messages = defineMessages({
-	editSkinTitle: {
-		id: 'app.skins.modal.edit-title',
-		defaultMessage: 'Editing skin',
-	},
-	addSkinTitle: {
-		id: 'app.skins.modal.add-title',
-		defaultMessage: 'Adding a skin',
-	},
-	textureSection: {
-		id: 'app.skins.modal.texture-section',
-		defaultMessage: 'Texture',
-	},
-	replaceTextureButton: {
-		id: 'app.skins.modal.replace-texture-button',
-		defaultMessage: 'Replace texture',
-	},
-	armStyleSection: {
-		id: 'app.skins.modal.arm-style-section',
-		defaultMessage: 'Arm style',
-	},
-	wideArmStyle: {
-		id: 'app.skins.modal.arm-style-wide',
-		defaultMessage: 'Wide',
-	},
-	slimArmStyle: {
-		id: 'app.skins.modal.arm-style-slim',
-		defaultMessage: 'Slim',
-	},
-	capeSection: {
-		id: 'app.skins.modal.cape-section',
-		defaultMessage: 'Cape',
-	},
-	noCapeTooltip: {
-		id: 'app.skins.modal.no-cape-tooltip',
-		defaultMessage: 'No cape',
-	},
-	noneCapeOption: {
-		id: 'app.skins.modal.none-cape-option',
-		defaultMessage: 'None',
-	},
-	capeFallbackName: {
-		id: 'app.skins.modal.cape-fallback-name',
-		defaultMessage: 'Cape',
-	},
-	savingTooltip: {
-		id: 'app.skins.modal.saving-tooltip',
-		defaultMessage: 'Saving...',
-	},
-	uploadSkinFirstTooltip: {
-		id: 'app.skins.modal.upload-skin-first-tooltip',
-		defaultMessage: 'Upload a skin first!',
-	},
-	makeEditFirstTooltip: {
-		id: 'app.skins.modal.make-edit-first-tooltip',
-		defaultMessage: 'Make an edit to the skin first!',
-	},
-	addSkinButton: {
-		id: 'app.skins.modal.add-skin-button',
-		defaultMessage: 'Add skin',
-	},
-	saveSkinButton: {
-		id: 'app.skins.modal.save-skin-button',
-		defaultMessage: 'Save skin',
-	},
-})
-
-const { formatMessage } = useVIntl()
 const { handleError } = injectNotificationManager()

 const modal = useTemplateRef('modal')
-const textureFileInput = useTemplateRef<HTMLInputElement>('textureFileInput')
-const capeListRef = ref<HTMLElement | null>(null)
-const capeListMaxHeight = ref(`${CAPE_LIST_MAX_HEIGHT}px`)
+const selectCapeModal = useTemplateRef('selectCapeModal')
 const mode = ref<'new' | 'edit'>('new')
 const currentSkin = ref<Skin | null>(null)
+const shouldRestoreModal = ref(false)
 const isSaving = ref(false)

 const uploadedTextureUrl = ref<SkinTextureUrl | null>(null)
@@ -244,49 +148,10 @@ const previewSkin = ref<string>('')

 const variant = ref<SkinModel>('CLASSIC')
 const selectedCape = ref<Cape | undefined>(undefined)
-const props = defineProps<{ capes?: Cape[] }>()
+const props = defineProps<{ capes?: Cape[]; defaultCape?: Cape }>()

 const selectedCapeTexture = computed(() => selectedCape.value?.texture)
-const canEditTextureAndModel = computed(() => currentSkin.value?.source !== 'default')
-const {
-	showTopFade: showCapeTopFade,
-	showBottomFade: showCapeBottomFade,
-	checkScrollState: checkCapeScrollState,
-	forceCheck: forceCapeScrollCheck,
-} = useScrollIndicator(capeListRef)
-
-let capeListLayoutFrame: number | null = null
-function updateCapeListLayout() {
-	const capeList = capeListRef.value
-	const modalContent = capeList?.closest('[data-modal-content]') as HTMLElement | null
-
-	if (!capeList || !modalContent) {
-		capeListMaxHeight.value = `${CAPE_LIST_MAX_HEIGHT}px`
-		forceCapeScrollCheck()
-		return
-	}
-
-	const availableHeight =
-		modalContent.getBoundingClientRect().bottom - capeList.getBoundingClientRect().top
-
-	capeListMaxHeight.value = `${Math.min(
-		CAPE_LIST_MAX_HEIGHT,
-		Math.max(0, Math.floor(availableHeight)),
-	)}px`
-
-	nextTick(() => forceCapeScrollCheck())
-}
-
-function refreshCapeListLayout() {
-	if (capeListLayoutFrame !== null) {
-		cancelAnimationFrame(capeListLayoutFrame)
-	}
-
-	capeListLayoutFrame = requestAnimationFrame(() => {
-		capeListLayoutFrame = null
-		updateCapeListLayout()
-	})
-}
+const visibleCapeList = ref<Cape[]>([])

 const sortedCapes = computed(() => {
 	return [...(props.capes || [])].sort((a, b) => {
@@ -296,6 +161,32 @@ const sortedCapes = computed(() => {
 	})
 })

+function initVisibleCapeList() {
+	if (!props.capes || props.capes.length === 0) {
+		visibleCapeList.value = []
+		return
+	}
+
+	if (visibleCapeList.value.length === 0) {
+		if (selectedCape.value) {
+			const otherCape = getSortedCapeExcluding(selectedCape.value.id)
+			visibleCapeList.value = otherCape ? [selectedCape.value, otherCape] : [selectedCape.value]
+		} else {
+			visibleCapeList.value = getSortedCapes(2)
+		}
+	}
+}
+
+function getSortedCapes(count: number): Cape[] {
+	if (!sortedCapes.value || sortedCapes.value.length === 0) return []
+	return sortedCapes.value.slice(0, count)
+}
+
+function getSortedCapeExcluding(excludeId: string): Cape | undefined {
+	if (!sortedCapes.value || sortedCapes.value.length <= 1) return undefined
+	return sortedCapes.value.find((cape) => cape.id !== excludeId)
+}
+
 async function loadPreviewSkin() {
 	if (uploadedTextureUrl.value) {
 		previewSkin.value = uploadedTextureUrl.value.normalized
@@ -327,13 +218,9 @@ const disableSave = computed(
 )

 const saveTooltip = computed(() => {
-	if (isSaving.value) return formatMessage(messages.savingTooltip)
-	if (mode.value === 'new' && !uploadedTextureUrl.value) {
-		return formatMessage(messages.uploadSkinFirstTooltip)
-	}
-	if (mode.value === 'edit' && !hasEdits.value) {
-		return formatMessage(messages.makeEditFirstTooltip)
-	}
+	if (isSaving.value) return 'Saving...'
+	if (mode.value === 'new' && !uploadedTextureUrl.value) return 'Upload a skin first!'
+	if (mode.value === 'edit' && !hasEdits.value) return 'Make an edit to the skin first!'
 	return undefined
 })

@@ -344,13 +231,11 @@ function resetState() {
 	previewSkin.value = ''
 	variant.value = 'CLASSIC'
 	selectedCape.value = undefined
+	visibleCapeList.value = []
+	shouldRestoreModal.value = false
 	isSaving.value = false
 }

-function handleModalHide() {
-	setTimeout(() => resetState(), 250)
-}
-
 async function show(e: MouseEvent, skin?: Skin) {
 	mode.value = skin ? 'edit' : 'new'
 	currentSkin.value = skin ?? null
@@ -361,11 +246,12 @@ async function show(e: MouseEvent, skin?: Skin) {
 		variant.value = 'CLASSIC'
 		selectedCape.value = undefined
 	}
+	visibleCapeList.value = []
+	initVisibleCapeList()

 	await loadPreviewSkin()

 	modal.value?.show(e)
-	nextTick(() => refreshCapeListLayout())
 }

 async function showNew(e: MouseEvent, skinTextureUrl: SkinTextureUrl) {
@@ -374,54 +260,98 @@ async function showNew(e: MouseEvent, skinTextureUrl: SkinTextureUrl) {
 	uploadedTextureUrl.value = skinTextureUrl
 	variant.value = await determineModelType(skinTextureUrl.original)
 	selectedCape.value = undefined
+	visibleCapeList.value = []
+	initVisibleCapeList()

 	await loadPreviewSkin()

 	modal.value?.show(e)
-	nextTick(() => refreshCapeListLayout())
 }

-async function setUploadedTexture(skinTextureUrl: SkinTextureUrl) {
+async function restoreWithNewTexture(skinTextureUrl: SkinTextureUrl) {
 	uploadedTextureUrl.value = skinTextureUrl
 	await loadPreviewSkin()
-	nextTick(() => refreshCapeListLayout())
+
+	if (shouldRestoreModal.value) {
+		setTimeout(() => {
+			modal.value?.show()
+			shouldRestoreModal.value = false
+		}, 0)
+	}
 }

 function hide() {
 	modal.value?.hide()
+	setTimeout(() => resetState(), 250)
 }

 function selectCape(cape: Cape | undefined) {
+	if (cape && selectedCape.value?.id !== cape.id) {
+		const isInVisibleList = visibleCapeList.value.some((c) => c.id === cape.id)
+		if (!isInVisibleList && visibleCapeList.value.length > 0) {
+			visibleCapeList.value.splice(0, 1, cape)
+
+			if (visibleCapeList.value.length > 1 && visibleCapeList.value[1].id === cape.id) {
+				const otherCape = getSortedCapeExcluding(cape.id)
+				if (otherCape) {
+					visibleCapeList.value.splice(1, 1, otherCape)
+				}
+			}
+		}
+	}
 	selectedCape.value = cape
 }

-function openTextureFileBrowser() {
-	textureFileInput.value?.click()
+function handleCapeSelected(cape: Cape | undefined) {
+	selectCape(cape)
+
+	if (shouldRestoreModal.value) {
+		setTimeout(() => {
+			modal.value?.show()
+			shouldRestoreModal.value = false
+		}, 0)
+	}
 }

-async function onTextureFileInputChange(e: Event) {
-	const files = (e.target as HTMLInputElement).files
-	const file = files?.[0]
-
-	if (!file) {
-		return
+function handleCapeCancel() {
+	if (shouldRestoreModal.value) {
+		setTimeout(() => {
+			modal.value?.show()
+			shouldRestoreModal.value = false
+		}, 0)
 	}
+}

-	try {
-		const originalSkinTexUrl = `data:image/png;base64,${arrayBufferToBase64(
-			await file.arrayBuffer(),
-		)}`
-		const skinTextureNormalized = await normalize_skin_texture(originalSkinTexUrl)
-		await setUploadedTexture({
-			original: originalSkinTexUrl,
-			normalized: `data:image/png;base64,${arrayBufferToBase64(skinTextureNormalized)}`,
-		})
-	} catch (error) {
-		handleError(error)
-	} finally {
-		if (textureFileInput.value) {
-			textureFileInput.value.value = ''
-		}
+function openSelectCapeModal(e: MouseEvent) {
+	if (!selectCapeModal.value) return
+
+	shouldRestoreModal.value = true
+	modal.value?.hide()
+
+	setTimeout(() => {
+		selectCapeModal.value?.show(
+			e,
+			currentSkin.value?.texture_key,
+			selectedCape.value,
+			previewSkin.value,
+			variant.value,
+		)
+	}, 0)
+}
+
+function openUploadSkinModal(e: MouseEvent) {
+	shouldRestoreModal.value = true
+	modal.value?.hide()
+	emit('open-upload-modal', e)
+}
+
+function restoreModal() {
+	if (shouldRestoreModal.value) {
+		setTimeout(() => {
+			const fakeEvent = new MouseEvent('click')
+			modal.value?.show(fakeEvent)
+			shouldRestoreModal.value = false
+		}, 500)
 	}
 }

@@ -437,32 +367,17 @@ async function save() {
 			textureUrl = currentSkin.value!.texture
 		}

+		await unequip_skin()
+
 		const bytes: Uint8Array = new Uint8Array(await (await fetch(textureUrl)).arrayBuffer())

 		if (mode.value === 'new') {
-			const addedSkin = await add_and_equip_custom_skin(bytes, variant.value, selectedCape.value)
-			emit('saved', {
-				applied: true,
-				skin: addedSkin,
-			})
+			await add_and_equip_custom_skin(bytes, variant.value, selectedCape.value)
+			emit('saved')
 		} else {
-			const updatedSkin = await save_custom_skin(
-				currentSkin.value!,
-				bytes,
-				variant.value,
-				selectedCape.value,
-				!!uploadedTextureUrl.value && textureUrl !== currentSkin.value?.texture,
-			)
-
-			if (currentSkin.value?.is_equipped) {
-				await equip_skin(updatedSkin)
-			}
-
-			emit('saved', {
-				applied: !!currentSkin.value?.is_equipped,
-				skin: updatedSkin,
-				previousSkin: currentSkin.value!,
-			})
+			await add_and_equip_custom_skin(bytes, variant.value, selectedCape.value)
+			await remove_custom_skin(currentSkin.value!)
+			emit('saved')
 		}

 		hide()
@@ -475,53 +390,28 @@ async function save() {

 watch([uploadedTextureUrl, currentSkin], async () => {
 	await loadPreviewSkin()
-	refreshCapeListLayout()
 })

 watch(
 	() => props.capes,
 	() => {
-		nextTick(() => refreshCapeListLayout())
+		initVisibleCapeList()
 	},
 	{ immediate: true },
 )

-watch(
-	capeListRef,
-	(capeList, _, onCleanup) => {
-		if (!capeList) return
-
-		const modalContent = capeList.closest('[data-modal-content]')
-		const resizeObserver = new ResizeObserver(() => refreshCapeListLayout())
-
-		if (modalContent instanceof HTMLElement) {
-			resizeObserver.observe(modalContent)
-		}
-
-		window.addEventListener('resize', refreshCapeListLayout, { passive: true })
-		refreshCapeListLayout()
-
-		onCleanup(() => {
-			resizeObserver.disconnect()
-			window.removeEventListener('resize', refreshCapeListLayout)
-
-			if (capeListLayoutFrame !== null) {
-				cancelAnimationFrame(capeListLayoutFrame)
-				capeListLayoutFrame = null
-			}
-		})
-	},
-	{ flush: 'post' },
-)
-
 const emit = defineEmits<{
-	(event: 'saved', options: { applied: boolean; skin?: Skin; previousSkin?: Skin }): void
+	(event: 'saved'): void
 	(event: 'deleted', skin: Skin): void
+	(event: 'open-upload-modal', mouseEvent: MouseEvent): void
 }>()

 defineExpose({
 	show,
 	showNew,
+	restoreWithNewTexture,
 	hide,
+	shouldRestoreModal,
+	restoreModal,
 })
 </script>
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { CheckIcon, XIcon } from '@modrinth/assets'
+import {
+	ButtonStyled,
+	CapeButton,
+	CapeLikeTextButton,
+	ScrollablePanel,
+	SkinPreviewRenderer,
+} from '@modrinth/ui'
+import { computed, ref, useTemplateRef } from 'vue'
+
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import type { Cape, SkinModel } from '@/helpers/skins.ts'
+
+const modal = useTemplateRef('modal')
+
+const emit = defineEmits<{
+	(e: 'select', cape: Cape | undefined): void
+	(e: 'cancel'): void
+}>()
+
+const props = defineProps<{
+	capes: Cape[]
+}>()
+
+const sortedCapes = computed(() => {
+	return [...props.capes].sort((a, b) => {
+		const nameA = (a.name || '').toLowerCase()
+		const nameB = (b.name || '').toLowerCase()
+		return nameA.localeCompare(nameB)
+	})
+})
+
+const currentSkinId = ref<string | undefined>()
+const currentSkinTexture = ref<string | undefined>()
+const currentSkinVariant = ref<SkinModel>('CLASSIC')
+const currentCapeTexture = computed<string | undefined>(() => currentCape.value?.texture)
+const currentCape = ref<Cape | undefined>()
+
+function show(
+	e: MouseEvent,
+	skinId?: string,
+	selected?: Cape,
+	skinTexture?: string,
+	variant?: SkinModel,
+) {
+	currentSkinId.value = skinId
+	currentSkinTexture.value = skinTexture
+	currentSkinVariant.value = variant || 'CLASSIC'
+	currentCape.value = selected
+	modal.value?.show(e)
+}
+
+function select() {
+	emit('select', currentCape.value)
+	hide()
+}
+
+function hide() {
+	modal.value?.hide()
+	emit('cancel')
+}
+
+function updateSelectedCape(cape: Cape | undefined) {
+	currentCape.value = cape
+}
+
+function onModalHide() {
+	emit('cancel')
+}
+
+defineExpose({
+	show,
+	hide,
+})
+</script>
+<template>
+	<ModalWrapper ref="modal" @on-hide="onModalHide">
+		<template #title>
+			<div class="flex flex-col">
+				<span class="text-lg font-extrabold text-heading">Change cape</span>
+			</div>
+		</template>
+		<div class="flex flex-col md:flex-row gap-6">
+			<div class="max-h-[25rem] h-[25rem] w-[16rem] min-w-[16rem] overflow-hidden relative">
+				<div class="absolute top-[-4rem] left-0 h-[32rem] w-[16rem] flex-shrink-0">
+					<SkinPreviewRenderer
+						v-if="currentSkinTexture"
+						:cape-src="currentCapeTexture"
+						:texture-src="currentSkinTexture"
+						:variant="currentSkinVariant"
+						:scale="1.4"
+						:fov="50"
+						:initial-rotation="Math.PI + Math.PI / 8"
+						class="h-full w-full"
+					/>
+				</div>
+			</div>
+
+			<div class="flex flex-col gap-4 w-full my-auto">
+				<ScrollablePanel class="max-h-[20rem] max-w-[30rem] mb-5 h-full">
+					<div class="flex flex-wrap gap-2 justify-center content-start overflow-y-auto h-full">
+						<CapeLikeTextButton
+							tooltip="No Cape"
+							:highlighted="!currentCape"
+							@click="updateSelectedCape(undefined)"
+						>
+							<template #icon>
+								<XIcon />
+							</template>
+							<span>None</span>
+						</CapeLikeTextButton>
+						<CapeButton
+							v-for="cape in sortedCapes"
+							:id="cape.id"
+							:key="cape.id"
+							:name="cape.name"
+							:texture="cape.texture"
+							:selected="currentCape?.id === cape.id"
+							@select="updateSelectedCape(cape)"
+						/>
+					</div>
+				</ScrollablePanel>
+			</div>
+		</div>
+		<div class="flex gap-2 items-center">
+			<ButtonStyled color="brand">
+				<button @click="select">
+					<CheckIcon />
+					Select
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button @click="hide">
+					<XIcon />
+					Cancel
+				</button>
+			</ButtonStyled>
+		</div>
+	</ModalWrapper>
+</template>
@@ -0,0 +1,141 @@
+<template>
+	<ModalWrapper ref="modal" @on-hide="hide(true)">
+		<template #title>
+			<span class="text-lg font-extrabold text-contrast"> Upload skin texture </span>
+		</template>
+		<div class="relative">
+			<div
+				class="border-2 border-dashed border-highlight-gray rounded-xl h-[173px] flex flex-col items-center justify-center p-8 cursor-pointer bg-button-bg hover:bg-button-hover transition-colors relative"
+				@click="triggerFileInput"
+			>
+				<p class="mx-auto mb-0 text-primary font-bold text-lg text-center flex items-center gap-2">
+					<UploadIcon /> Select skin texture file
+				</p>
+				<p class="mx-auto mt-0 text-secondary text-sm text-center">
+					Drag and drop or click here to browse
+				</p>
+				<input
+					ref="fileInput"
+					type="file"
+					accept="image/png"
+					class="hidden"
+					@change="handleInputFileChange"
+				/>
+			</div>
+		</div>
+	</ModalWrapper>
+</template>
+
+<script setup lang="ts">
+import { UploadIcon } from '@modrinth/assets'
+import { injectNotificationManager } from '@modrinth/ui'
+import { getCurrentWebview } from '@tauri-apps/api/webview'
+import { onBeforeUnmount, ref, watch } from 'vue'
+
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { get_dragged_skin_data } from '@/helpers/skins'
+
+const { addNotification } = injectNotificationManager()
+
+const modal = ref()
+const fileInput = ref<HTMLInputElement>()
+const unlisten = ref<() => void>()
+const modalVisible = ref(false)
+
+const emit = defineEmits<{
+	(e: 'uploaded', data: ArrayBuffer): void
+	(e: 'canceled'): void
+}>()
+
+function show(e?: MouseEvent) {
+	modal.value?.show(e)
+	modalVisible.value = true
+	setupDragDropListener()
+}
+
+function hide(emitCanceled = false) {
+	modal.value?.hide()
+	modalVisible.value = false
+	cleanupDragDropListener()
+	resetState()
+	if (emitCanceled) {
+		emit('canceled')
+	}
+}
+
+function resetState() {
+	if (fileInput.value) fileInput.value.value = ''
+}
+
+function triggerFileInput() {
+	fileInput.value?.click()
+}
+
+async function handleInputFileChange(e: Event) {
+	const files = (e.target as HTMLInputElement).files
+	if (!files || files.length === 0) {
+		return
+	}
+	const file = files[0]
+	const buffer = await file.arrayBuffer()
+	await processData(buffer)
+}
+
+async function setupDragDropListener() {
+	try {
+		if (modalVisible.value) {
+			await cleanupDragDropListener()
+			unlisten.value = await getCurrentWebview().onDragDropEvent(async (event) => {
+				if (event.payload.type !== 'drop') {
+					return
+				}
+
+				if (!event.payload.paths || event.payload.paths.length === 0) {
+					return
+				}
+
+				const filePath = event.payload.paths[0]
+
+				try {
+					const data = await get_dragged_skin_data(filePath)
+					await processData(data.buffer)
+				} catch (error) {
+					addNotification({
+						title: 'Error processing file',
+						text: error instanceof Error ? error.message : 'Failed to read the dropped file.',
+						type: 'error',
+					})
+				}
+			})
+		}
+	} catch (error) {
+		console.error('Failed to set up drag and drop listener:', error)
+	}
+}
+
+async function cleanupDragDropListener() {
+	if (unlisten.value) {
+		unlisten.value()
+		unlisten.value = undefined
+	}
+}
+
+async function processData(buffer: ArrayBuffer) {
+	emit('uploaded', buffer)
+	hide()
+}
+
+watch(modalVisible, (isVisible) => {
+	if (isVisible) {
+		setupDragDropListener()
+	} else {
+		cleanupDragDropListener()
+	}
+})
+
+onBeforeUnmount(() => {
+	cleanupDragDropListener()
+})
+
+defineExpose({ show, hide })
+</script>
@@ -1,410 +0,0 @@
-<script setup lang="ts">
-import { DropdownIcon, EditIcon, PlusIcon, TrashIcon } from '@modrinth/assets'
-import {
-	Accordion,
-	ButtonStyled,
-	commonMessages,
-	defineMessages,
-	SkinButton,
-	SkinLikeTextButton,
-	useScrollViewport,
-	useVIntl,
-} from '@modrinth/ui'
-import { useElementSize, useWindowSize } from '@vueuse/core'
-import { computed, nextTick, onUnmounted, ref, useTemplateRef, watch } from 'vue'
-
-import type { RenderResult } from '@/helpers/rendering/batch-skin-renderer.ts'
-import type { Skin } from '@/helpers/skins.ts'
-
-type SkinSectionKind = 'saved' | 'default'
-type SkinLikeTextButtonExpose = {
-	getRootElement: () => HTMLElement | null | undefined
-}
-type AddSkinButtonRef = SkinLikeTextButtonExpose | SkinLikeTextButtonExpose[]
-
-interface DefaultSkinSection {
-	title: string
-	skins: Skin[]
-}
-
-interface SkinSection {
-	key: string
-	title: string
-	kind: SkinSectionKind
-	skins: Skin[]
-}
-
-interface VirtualSkinSection {
-	section: SkinSection
-	top: number
-	index: number
-}
-
-const SKIN_CARD_ASPECT_WIDTH = 31
-const SKIN_CARD_ASPECT_HEIGHT = 40
-const SKIN_GRID_GAP = 12
-const SKIN_SECTION_FIRST_SPACING = 4
-const SKIN_SECTION_SPACING = 24
-const SKIN_SECTION_HEADER_HEIGHT = 28
-const SKIN_SECTION_CONTENT_SPACING = 8
-const SKIN_SECTION_OVERSCAN = 900
-const FALLBACK_CARD_WIDTH = 220
-const messages = defineMessages({
-	savedSkinsSection: {
-		id: 'app.skins.section.saved-skins',
-		defaultMessage: 'Saved skins',
-	},
-	addSkinButton: {
-		id: 'app.skins.add-button',
-		defaultMessage: 'Add skin',
-	},
-	dragAndDropSubtitle: {
-		id: 'app.skins.add-button.drag-and-drop',
-		defaultMessage: 'Drag and drop',
-	},
-	editSkinButton: {
-		id: 'app.skins.edit-button',
-		defaultMessage: 'Edit skin',
-	},
-	deleteSkinButton: {
-		id: 'app.skins.delete-button',
-		defaultMessage: 'Delete skin',
-	},
-})
-
-const props = defineProps<{
-	savedSkins: Skin[]
-	defaultSkinSections: DefaultSkinSection[]
-	getBakedSkinTextures: (skin: Skin) => RenderResult | undefined
-	isSkinSelected: (skin: Skin) => boolean
-	isSkinActive: (skin: Skin) => boolean
-	isAddSkinButtonDragActive: boolean
-}>()
-
-const emit = defineEmits<{
-	select: [skin: Skin]
-	edit: [skin: Skin, event: MouseEvent]
-	delete: [skin: Skin]
-	'add-skin': []
-	'add-skin-dragenter': [event: DragEvent]
-	'add-skin-dragover': [event: DragEvent]
-	'add-skin-dragleave': [event: DragEvent]
-	'add-skin-drop': [event: DragEvent]
-}>()
-
-const addSkinButton = useTemplateRef<AddSkinButtonRef>('addSkinButton')
-const { formatMessage } = useVIntl()
-const { listContainer, relativeScrollTop, scrollContainer, viewportHeight } = useScrollViewport()
-const openSectionKeys = ref<Set<string>>(new Set())
-const hasSettledInitialLayout = ref(false)
-const knownSectionKeys = new Set<string>()
-let enableLayoutTransitionsFrame: number | null = null
-let isEnableLayoutTransitionsScheduled = false
-let isUnmounted = false
-
-const { width: listWidth } = useElementSize(listContainer)
-const { width: windowWidth } = useWindowSize()
-
-const columnCount = computed(() => {
-	if (windowWidth.value >= 2050) {
-		return 6
-	}
-
-	if (windowWidth.value >= 1750) {
-		return 5
-	}
-
-	if (windowWidth.value >= 1300) {
-		return 4
-	}
-
-	return 3
-})
-
-const cardWidth = computed(() => {
-	if (listWidth.value <= 0) {
-		return FALLBACK_CARD_WIDTH
-	}
-
-	const gapsWidth = (columnCount.value - 1) * SKIN_GRID_GAP
-	return Math.max(0, (listWidth.value - gapsWidth) / columnCount.value)
-})
-
-const cardHeight = computed(
-	() => (cardWidth.value * SKIN_CARD_ASPECT_HEIGHT) / SKIN_CARD_ASPECT_WIDTH,
-)
-
-const sections = computed<SkinSection[]>(() => [
-	{
-		key: 'saved-skins',
-		title: formatMessage(messages.savedSkinsSection),
-		kind: 'saved',
-		skins: props.savedSkins,
-	},
-	...props.defaultSkinSections.map((section) => ({
-		key: defaultSkinSectionKey(section.title),
-		title: section.title,
-		kind: 'default' as const,
-		skins: section.skins,
-	})),
-])
-
-const sectionLayouts = computed(() => {
-	const layouts: Array<{ section: SkinSection; top: number; height: number; index: number }> = []
-	let top = 0
-
-	sections.value.forEach((section, index) => {
-		const height = getSectionHeightEstimate(section, index)
-		layouts.push({ section, top, height, index })
-		top += height
-	})
-
-	return layouts
-})
-
-const totalHeight = computed(() => {
-	const lastSection = sectionLayouts.value[sectionLayouts.value.length - 1]
-	return lastSection ? lastSection.top + lastSection.height : 0
-})
-
-const visibleSections = computed<VirtualSkinSection[]>(() => {
-	if (!listContainer.value || !scrollContainer.value) {
-		return sectionLayouts.value.slice(0, 4)
-	}
-
-	const viewportStart = Math.max(0, relativeScrollTop.value - SKIN_SECTION_OVERSCAN)
-	const viewportEnd = relativeScrollTop.value + viewportHeight.value + SKIN_SECTION_OVERSCAN
-
-	return sectionLayouts.value
-		.filter((layout) => layout.top + layout.height >= viewportStart && layout.top <= viewportEnd)
-		.map(({ section, top, index }) => ({ section, top, index }))
-})
-
-watch(
-	sections,
-	(nextSections) => {
-		const sectionKeys = new Set(nextSections.map((section) => section.key))
-		const openKeys = new Set(openSectionKeys.value)
-
-		for (const section of nextSections) {
-			if (!knownSectionKeys.has(section.key)) {
-				knownSectionKeys.add(section.key)
-				openKeys.add(section.key)
-			}
-		}
-
-		for (const key of knownSectionKeys) {
-			if (!sectionKeys.has(key)) {
-				knownSectionKeys.delete(key)
-				openKeys.delete(key)
-			}
-		}
-
-		openSectionKeys.value = openKeys
-	},
-	{ immediate: true },
-)
-
-watch(
-	listWidth,
-	(width) => {
-		if (
-			typeof window === 'undefined' ||
-			width <= 0 ||
-			hasSettledInitialLayout.value ||
-			isEnableLayoutTransitionsScheduled
-		) {
-			return
-		}
-
-		isEnableLayoutTransitionsScheduled = true
-		void nextTick(() => {
-			if (isUnmounted) return
-
-			enableLayoutTransitionsFrame = window.requestAnimationFrame(() => {
-				if (isUnmounted) return
-
-				enableLayoutTransitionsFrame = window.requestAnimationFrame(() => {
-					if (isUnmounted) return
-
-					hasSettledInitialLayout.value = true
-					enableLayoutTransitionsFrame = null
-					isEnableLayoutTransitionsScheduled = false
-				})
-			})
-		})
-	},
-	{ immediate: true },
-)
-
-onUnmounted(() => {
-	isUnmounted = true
-
-	if (enableLayoutTransitionsFrame !== null) {
-		window.cancelAnimationFrame(enableLayoutTransitionsFrame)
-	}
-})
-
-function defaultSkinSectionKey(title: string) {
-	return `default-skins-${title}`
-}
-
-function skinKey(skin: Skin, prefix: string) {
-	return `${prefix}-${skin.source}-${skin.texture_key}-${skin.variant}-${skin.cape_id ?? 'no-cape'}`
-}
-
-function isSectionOpen(key: string) {
-	return openSectionKeys.value.has(key)
-}
-
-function setSectionOpen(key: string, open: boolean) {
-	const openKeys = new Set(openSectionKeys.value)
-
-	if (open) {
-		openKeys.add(key)
-	} else {
-		openKeys.delete(key)
-	}
-
-	openSectionKeys.value = openKeys
-}
-
-function getSectionHeightEstimate(section: SkinSection, index: number) {
-	const spacing = index === 0 ? SKIN_SECTION_FIRST_SPACING : SKIN_SECTION_SPACING
-
-	if (!isSectionOpen(section.key)) {
-		return spacing + SKIN_SECTION_HEADER_HEIGHT
-	}
-
-	const cardCount = section.kind === 'saved' ? section.skins.length + 1 : section.skins.length
-	const rowCount = Math.ceil(cardCount / columnCount.value)
-	const gridHeight = rowCount * cardHeight.value + Math.max(0, rowCount - 1) * SKIN_GRID_GAP
-
-	return spacing + SKIN_SECTION_HEADER_HEIGHT + SKIN_SECTION_CONTENT_SPACING + gridHeight
-}
-
-function getAddSkinButtonElement() {
-	const button = Array.isArray(addSkinButton.value)
-		? addSkinButton.value.find((candidate) => candidate.getRootElement())
-		: addSkinButton.value
-
-	return button?.getRootElement()
-}
-
-defineExpose({ getAddSkinButtonElement })
-</script>
-
-<template>
-	<div
-		ref="listContainer"
-		class="relative w-full"
-		:style="{ height: `${totalHeight}px`, overflowAnchor: 'none' }"
-	>
-		<div
-			v-for="{ section, top, index } in visibleSections"
-			:key="section.key"
-			class="absolute inset-x-0"
-			:class="[
-				index === 0 ? 'pt-1' : 'pt-6',
-				hasSettledInitialLayout
-					? 'transition-transform duration-300 ease-in-out will-change-transform motion-reduce:transition-none'
-					: '',
-			]"
-			:style="{ transform: `translateY(${top}px)` }"
-		>
-			<Accordion
-				button-class="group flex w-full items-center gap-[6px] bg-transparent m-0 p-0 border-none cursor-pointer text-left"
-				content-class="pt-2"
-				:open-by-default="isSectionOpen(section.key)"
-				@on-open="setSectionOpen(section.key, true)"
-				@on-close="setSectionOpen(section.key, false)"
-			>
-				<template #title>
-					{{ section.title }}
-				</template>
-				<template #button="{ open }">
-					<DropdownIcon
-						class="size-6 shrink-0 text-primary transition-transform duration-300"
-						:class="{ 'rotate-180': open }"
-					/>
-					<span class="min-w-0 text-xl font-semibold leading-7 text-primary">
-						{{ section.title }}
-					</span>
-				</template>
-
-				<div
-					v-if="section.kind === 'saved'"
-					class="grid w-full grid-cols-3 gap-3 min-[1300px]:grid-cols-4 min-[1750px]:grid-cols-5 min-[2050px]:grid-cols-6"
-				>
-					<SkinLikeTextButton
-						ref="addSkinButton"
-						class="aspect-[31/40] w-full min-w-0 box-border rounded-[20px]"
-						dropzone
-						:drag-active="isAddSkinButtonDragActive"
-						@click="emit('add-skin')"
-						@dragenter="emit('add-skin-dragenter', $event)"
-						@dragover="emit('add-skin-dragover', $event)"
-						@dragleave="emit('add-skin-dragleave', $event)"
-						@drop="emit('add-skin-drop', $event)"
-					>
-						<template #icon>
-							<PlusIcon class="size-8" />
-						</template>
-						{{ formatMessage(messages.addSkinButton) }}
-						<template #subtitle>{{ formatMessage(messages.dragAndDropSubtitle) }}</template>
-					</SkinLikeTextButton>
-
-					<SkinButton
-						v-for="skin in section.skins"
-						:key="skinKey(skin, 'saved-skin')"
-						class="aspect-[31/40] w-full min-w-0 box-border rounded-[20px]"
-						:forward-image-src="getBakedSkinTextures(skin)?.forwards"
-						:backward-image-src="getBakedSkinTextures(skin)?.backwards"
-						:selected="isSkinSelected(skin)"
-						:active="isSkinActive(skin)"
-						@select="emit('select', skin)"
-					>
-						<template #overlay-buttons>
-							<ButtonStyled color="brand">
-								<button
-									:aria-label="formatMessage(messages.editSkinButton)"
-									class="pointer-events-auto"
-									@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
-								>
-									<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-								</button>
-							</ButtonStyled>
-							<ButtonStyled v-show="!skin.is_equipped" circular color="red">
-								<button
-									v-tooltip="formatMessage(messages.deleteSkinButton)"
-									:aria-label="formatMessage(messages.deleteSkinButton)"
-									class="!rounded-[100%] pointer-events-auto"
-									@click.stop="emit('delete', skin)"
-								>
-									<TrashIcon />
-								</button>
-							</ButtonStyled>
-						</template>
-					</SkinButton>
-				</div>
-
-				<div
-					v-else
-					class="grid w-full grid-cols-3 gap-3 min-[1300px]:grid-cols-4 min-[1750px]:grid-cols-5 min-[2050px]:grid-cols-6"
-				>
-					<SkinButton
-						v-for="skin in section.skins"
-						:key="skinKey(skin, section.key)"
-						class="aspect-[31/40] w-full min-w-0 box-border rounded-[20px]"
-						:forward-image-src="getBakedSkinTextures(skin)?.forwards"
-						:backward-image-src="getBakedSkinTextures(skin)?.backwards"
-						:selected="isSkinSelected(skin)"
-						:active="isSkinActive(skin)"
-						:tooltip="skin.name"
-						@select="emit('select', skin)"
-					/>
-				</div>
-			</Accordion>
-		</div>
-	</div>
-</template>
@@ -79,7 +79,7 @@ watch([() => props.recentInstances, () => showWorlds.value], async () => {
 	})
 })

-await populateJumpBackIn()
+populateJumpBackIn()
 	.catch(() => {
 		console.error('Failed to populate jump back in')
 	})
@@ -189,22 +189,6 @@ const messages = defineMessages({
 		id: 'instance.worlds.linked_server',
 		defaultMessage: 'Managed by server project',
 	},
-	incompatibleVersion: {
-		id: 'app.world.world-item.incompatible-version',
-		defaultMessage: 'Incompatible version {version}',
-	},
-	playersOnline: {
-		id: 'app.world.world-item.players-online',
-		defaultMessage: '{count} online',
-	},
-	offline: {
-		id: 'app.world.world-item.offline',
-		defaultMessage: 'Offline',
-	},
-	notPlayedYet: {
-		id: 'app.world.world-item.not-played-yet',
-		defaultMessage: 'Not played yet',
-	},
 })
 </script>
 <template>
@@ -244,7 +228,7 @@ const messages = defineMessages({
 					</TagItem>
 					<div
 						v-if="world.type === 'singleplayer'"
-						class="text-sm text-secondary flex items-center gap-1 font-semibold flex-nowrap whitespace-nowrap"
+						class="text-sm text-secondary flex items-center gap-1 font-semibold"
 					>
 						<UserIcon
 							aria-hidden="true"
@@ -259,17 +243,13 @@ const messages = defineMessages({
 					>
 						<template v-if="refreshing">
 							<SpinnerIcon aria-hidden="true" class="animate-spin shrink-0" />
-							{{ formatMessage(commonMessages.loadingLabel) }}
+							Loading...
 						</template>
 						<template v-else-if="serverStatus">
 							<template v-if="serverIncompatible">
 								<IssuesIcon class="shrink-0 text-orange" aria-hidden="true" />
 								<span class="text-orange">
-									{{
-										formatMessage(messages.incompatibleVersion, {
-											version: serverStatus.version?.name,
-										})
-									}}
+									Incompatible version {{ serverStatus.version?.name }}
 								</span>
 							</template>
 							<template v-else>
@@ -285,11 +265,8 @@ const messages = defineMessages({
 								/>
 								<Tooltip :disabled="!hasPlayersTooltip">
 									<span :class="{ 'cursor-help': hasPlayersTooltip }">
-										{{
-											formatMessage(messages.playersOnline, {
-												count: formatNumber(serverStatus.players?.online ?? 0),
-											})
-										}}
+										{{ formatNumber(serverStatus.players?.online) }}
+										online
 									</span>
 									<template #popper>
 										<div class="flex flex-col gap-1">
@@ -303,7 +280,7 @@ const messages = defineMessages({
 						</template>
 						<template v-else>
 							<NoSignalIcon aria-hidden="true" stroke-width="3px" class="shrink-0" />
-							{{ formatMessage(messages.offline) }}
+							Offline
 						</template>
 					</div>
 				</div>
@@ -322,7 +299,7 @@ const messages = defineMessages({
 								})
 							}}
 						</template>
-						<template v-else> {{ formatMessage(messages.notPlayedYet) }} </template>
+						<template v-else> Not played yet </template>
 					</div>
 					<template v-if="instancePath">
 						•
@@ -5,11 +5,12 @@ import {
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
-	NewModal,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'

+import InstanceModalTitlePrefix from '@/components/ui/modal/InstanceModalTitlePrefix.vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
 import type { GameInstance } from '@/helpers/types'
 import { add_server_to_profile, type ServerPackStatus, type ServerWorld } from '@/helpers/worlds.ts'
@@ -25,10 +26,10 @@ const props = defineProps<{
 	instance: GameInstance
 }>()

-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref()

-const name = ref('')
-const address = ref('')
+const name = ref()
+const address = ref()
 const resourcePack = ref<ServerPackStatus>('enabled')

 async function addServer(play: boolean) {
@@ -59,11 +60,11 @@ function show() {
 	name.value = ''
 	address.value = ''
 	resourcePack.value = 'enabled'
-	modal.value?.show()
+	modal.value.show()
 }

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

 const messages = defineMessages({
@@ -84,33 +85,37 @@ const messages = defineMessages({
 defineExpose({ show, hide })
 </script>
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.title)" width="500px" max-width="500px">
+	<ModalWrapper ref="modal">
+		<template #title>
+			<span class="flex items-center gap-2 text-lg font-semibold text-primary">
+				<InstanceModalTitlePrefix :instance="instance" />
+				<span class="font-extrabold text-contrast">{{ formatMessage(messages.title) }}</span>
+			</span>
+		</template>
 		<ServerModalBody
 			v-model:name="name"
 			v-model:address="address"
 			v-model:resource-pack="resourcePack"
 		/>
-		<template #actions>
-			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button :disabled="!address" @click="addServer(false)">
-						<PlusIcon />
-						{{ formatMessage(messages.addServer) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="!address" @click="addServer(true)">
-						<PlayIcon />
-						{{ formatMessage(messages.addAndPlay) }}
-					</button>
-				</ButtonStyled>
-			</div>
-		</template>
-	</NewModal>
+		<div class="flex gap-2 mt-4">
+			<ButtonStyled color="brand">
+				<button :disabled="!address" @click="addServer(true)">
+					<PlayIcon />
+					{{ formatMessage(messages.addAndPlay) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button :disabled="!address" @click="addServer(false)">
+					<PlusIcon />
+					{{ formatMessage(messages.addServer) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button @click="hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</button>
+			</ButtonStyled>
+		</div>
+	</ModalWrapper>
 </template>
@@ -5,11 +5,11 @@ import {
 	commonMessages,
 	defineMessage,
 	injectNotificationManager,
-	NewModal,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'

+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'
 import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
 import type { GameInstance } from '@/helpers/types'
@@ -32,7 +32,7 @@ const props = defineProps<{
 	instance: GameInstance
 }>()

-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref()

 const name = ref<string>('')
 const address = ref<string>('')
@@ -81,11 +81,11 @@ function show(server: ServerWorld) {
 	index.value = server.index
 	displayStatus.value = server.display_status
 	hideFromHome.value = server.display_status === 'hidden'
-	modal.value?.show()
+	modal.value.show()
 }

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

 defineExpose({ show })
@@ -96,28 +96,29 @@ const titleMessage = defineMessage({
 })
 </script>
 <template>
-	<NewModal ref="modal" :header="formatMessage(titleMessage)" width="500px" max-width="500px">
+	<ModalWrapper ref="modal">
+		<template #title>
+			<span class="font-extrabold text-lg text-contrast">{{ formatMessage(titleMessage) }}</span>
+		</template>
 		<ServerModalBody
 			v-model:name="name"
 			v-model:address="address"
 			v-model:resource-pack="resourcePack"
 		/>
 		<HideFromHomeOption v-model="hideFromHome" class="mt-3" />
-		<template #actions>
-			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="!address" @click="saveServer">
-						<SaveIcon />
-						{{ formatMessage(commonMessages.saveChangesButton) }}
-					</button>
-				</ButtonStyled>
-			</div>
-		</template>
-	</NewModal>
+		<div class="flex gap-2 mt-4">
+			<ButtonStyled color="brand">
+				<button :disabled="!address" @click="saveServer">
+					<SaveIcon />
+					{{ formatMessage(commonMessages.saveChangesButton) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button @click="hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</button>
+			</ButtonStyled>
+		</div>
+	</ModalWrapper>
 </template>
@@ -49,40 +49,34 @@ const messages = defineMessages({
 		id: 'instance.server-modal.placeholder-name',
 		defaultMessage: 'Minecraft Server',
 	},
-	placeholderAddress: {
-		id: 'app.world.server-modal.placeholder-address',
-		defaultMessage: 'example.modrinth.gg',
-	},
-	selectAnOption: {
-		id: 'app.world.server-modal.select-an-option',
-		defaultMessage: 'Select an option',
-	},
 })

 defineExpose({ resourcePackOptions })
 </script>
 <template>
-	<div class="space-y-4 w-full">
-		<label class="flex flex-col gap-2">
-			<span class="font-semibold text-contrast">{{ formatMessage(messages.name) }}</span>
-			<StyledInput
-				v-model="name"
-				:placeholder="formatMessage(messages.placeholderName)"
-				autocomplete="off"
-				wrapper-class="w-full"
-			/>
-		</label>
-		<label class="flex flex-col gap-2">
-			<span class="font-semibold text-contrast">{{ formatMessage(messages.address) }}</span>
-			<StyledInput
-				v-model="address"
-				:placeholder="formatMessage(messages.placeholderAddress)"
-				autocomplete="off"
-				wrapper-class="w-full"
-			/>
-		</label>
-		<label class="flex flex-col gap-2">
-			<span class="font-semibold text-contrast">{{ formatMessage(messages.resourcePack) }}</span>
+	<div class="w-[450px]">
+		<h2 class="text-lg font-extrabold text-contrast mt-0 mb-1">
+			{{ formatMessage(messages.name) }}
+		</h2>
+		<StyledInput
+			v-model="name"
+			:placeholder="formatMessage(messages.placeholderName)"
+			autocomplete="off"
+			wrapper-class="w-full"
+		/>
+		<h2 class="text-lg font-extrabold text-contrast mt-3 mb-1">
+			{{ formatMessage(messages.address) }}
+		</h2>
+		<StyledInput
+			v-model="address"
+			placeholder="example.modrinth.gg"
+			autocomplete="off"
+			wrapper-class="w-full"
+		/>
+		<h2 class="text-lg font-extrabold text-contrast mt-3 mb-1">
+			{{ formatMessage(messages.resourcePack) }}
+		</h2>
+		<div>
 			<Combobox
 				v-model="resourcePack"
 				:options="
@@ -95,9 +89,9 @@ defineExpose({ resourcePackOptions })
 				:display-value="
 					resourcePack
 						? formatMessage(resourcePackOptionMessages[resourcePack])
-						: formatMessage(messages.selectAnOption)
+						: 'Select an option'
 				"
 			/>
-		</label>
+		</div>
 	</div>
 </template>
@@ -1,332 +0,0 @@
-import type { Labrinth } from '@modrinth/api-client'
-import { CheckIcon, PlayIcon, PlusIcon, StopCircleIcon } from '@modrinth/assets'
-import type { CardAction } from '@modrinth/ui'
-import { commonMessages, defineMessages, useDebugLogger, useVIntl } from '@modrinth/ui'
-import { openUrl } from '@tauri-apps/plugin-opener'
-import type { ComputedRef, Ref } from 'vue'
-import { onUnmounted, ref, shallowRef } from 'vue'
-import type { Router } from 'vue-router'
-
-import { process_listener } from '@/helpers/events'
-import { get_by_profile_path } from '@/helpers/process'
-import { kill, list as listInstances } from '@/helpers/profile.js'
-import type { GameInstance } from '@/helpers/types'
-import { add_server_to_profile, getServerLatency } from '@/helpers/worlds'
-import { getServerAddress } from '@/store/install.js'
-
-interface BrowseServerInstance {
-	name: string
-	path: string
-}
-
-interface ContextMenuHandle {
-	showMenu: (
-		event: MouseEvent,
-		result: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
-		options: { name: string }[],
-	) => void
-}
-
-interface ContextMenuOptionClick {
-	option: 'open_link' | 'copy_link'
-	item: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject
-}
-
-export interface UseAppServerBrowseOptions {
-	instance: Ref<BrowseServerInstance | null>
-	isFromWorlds: ComputedRef<boolean>
-	allInstalledIds: ComputedRef<Set<string>>
-	newlyInstalled: Ref<string[]>
-	installingServerProjects: Ref<string[]>
-	playServerProject: (projectId: string) => Promise<void>
-	showAddServerToInstanceModal: (serverName: string, serverAddress: string) => void
-	handleError: (error: unknown) => void
-	router: Router
-}
-
-const messages = defineMessages({
-	addToInstance: {
-		id: 'app.browse.add-to-instance',
-		defaultMessage: 'Add to instance',
-	},
-	addToInstanceName: {
-		id: 'app.browse.add-to-instance-name',
-		defaultMessage: 'Add to {instanceName}',
-	},
-	added: {
-		id: 'app.browse.added',
-		defaultMessage: 'Added',
-	},
-	alreadyAdded: {
-		id: 'app.browse.already-added',
-		defaultMessage: 'Already added',
-	},
-})
-
-export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
-	const { formatMessage } = useVIntl()
-	const debugLog = useDebugLogger('BrowseServer')
-	const serverPings = shallowRef<Record<string, number | undefined>>({})
-	const serverPingCache = new Map<string, number | undefined>()
-	const pendingServerPings = new Map<string, Promise<number | undefined>>()
-	const runningServerProjects = ref<Record<string, string>>({})
-	const lastServerHits = shallowRef<Labrinth.Search.v3.ResultSearchProject[]>([])
-	const contextMenuRef = ref<ContextMenuHandle | null>(null)
-	let serverPingCacheActive = true
-	let unlistenProcesses: (() => void) | null = null
-
-	async function checkServerRunningStates(hits: Labrinth.Search.v3.ResultSearchProject[]) {
-		debugLog('checkServerRunningStates', { hitCount: hits.length })
-		const packs = await listInstances().catch((error) => {
-			options.handleError(error)
-			return []
-		})
-		const newRunning: Record<string, string> = {}
-		for (const hit of hits) {
-			const inst = packs.find(
-				(pack: GameInstance) => pack.linked_data?.project_id === hit.project_id,
-			)
-			if (inst) {
-				const processes = await get_by_profile_path(inst.path).catch(() => [])
-				if (Array.isArray(processes) && processes.length > 0) {
-					newRunning[hit.project_id] = inst.path
-				}
-			}
-		}
-		debugLog('runningServerProjects updated', newRunning)
-		runningServerProjects.value = newRunning
-	}
-
-	async function handleStopServerProject(projectId: string) {
-		debugLog('handleStopServerProject', projectId)
-		const instancePath = runningServerProjects.value[projectId]
-		if (!instancePath) return
-		await kill(instancePath).catch(() => {})
-		const { [projectId]: _, ...rest } = runningServerProjects.value
-		runningServerProjects.value = rest
-	}
-
-	async function handlePlayServerProject(projectId: string) {
-		debugLog('handlePlayServerProject', projectId)
-		await options.playServerProject(projectId)
-		checkServerRunningStates(lastServerHits.value)
-	}
-
-	async function handleAddServerToInstance(project: Labrinth.Search.v3.ResultSearchProject) {
-		debugLog('handleAddServerToInstance', { projectId: project.project_id, name: project.name })
-		const address = getServerAddress(project.minecraft_java_server)
-		if (!address) return
-
-		if (options.instance.value) {
-			try {
-				await add_server_to_profile(
-					options.instance.value.path,
-					project.name,
-					address,
-					'prompt',
-					project.project_id,
-					project.minecraft_java_server?.content?.kind,
-				)
-				options.newlyInstalled.value.push(project.project_id)
-			} catch (error) {
-				options.handleError(error)
-			}
-		} else {
-			options.showAddServerToInstanceModal(project.name, address)
-		}
-	}
-
-	async function pingServerHits(hits: Labrinth.Search.v3.ResultSearchProject[]) {
-		debugLog('pingServerHits', { hitCount: hits.length })
-		const pingsToFetch = hits.flatMap((hit) => {
-			const address = hit.minecraft_java_server?.address
-			if (!address) return []
-			return [{ hit, address }]
-		})
-		const nextPings = { ...serverPings.value }
-		for (const { hit, address } of pingsToFetch) {
-			if (serverPingCache.has(address)) {
-				nextPings[hit.project_id] = serverPingCache.get(address)
-			}
-		}
-		serverPings.value = nextPings
-
-		await Promise.all(
-			pingsToFetch.map(async ({ hit, address }) => {
-				if (serverPingCache.has(address)) return
-
-				let pending = pendingServerPings.get(address)
-				if (!pending) {
-					pending = getServerLatency(address)
-						.then((latency) => {
-							if (serverPingCacheActive) serverPingCache.set(address, latency)
-							return latency
-						})
-						.catch((error) => {
-							console.error(`Failed to ping server ${address}:`, error)
-							if (serverPingCacheActive) serverPingCache.set(address, undefined)
-							return undefined
-						})
-						.finally(() => {
-							pendingServerPings.delete(address)
-						})
-					pendingServerPings.set(address, pending)
-				}
-
-				const latency = await pending
-				if (!serverPingCacheActive) return
-				serverPings.value = { ...serverPings.value, [hit.project_id]: latency }
-			}),
-		)
-	}
-
-	function updateServerHits(hits: Labrinth.Search.v3.ResultSearchProject[]) {
-		lastServerHits.value = hits
-		pingServerHits(hits)
-		checkServerRunningStates(hits)
-	}
-
-	function getServerModpackContent(project: Labrinth.Search.v3.ResultSearchProject) {
-		const content = project.minecraft_java_server?.content
-		if (content?.kind === 'modpack') {
-			const { project_name, project_icon, project_id } = content
-			if (!project_name) return undefined
-			return {
-				name: project_name,
-				icon: project_icon ?? undefined,
-				onclick:
-					project_id !== project.project_id
-						? () => {
-								options.router.push(`/project/${project_id}`)
-							}
-						: undefined,
-				showCustomModpackTooltip: project_id === project.project_id,
-			}
-		}
-		return undefined
-	}
-
-	function getServerCardActions(
-		serverResult: Labrinth.Search.v3.ResultSearchProject,
-	): CardAction[] {
-		const isInstalled = options.allInstalledIds.value.has(serverResult.project_id)
-
-		if (options.isFromWorlds.value && options.instance.value) {
-			return [
-				{
-					key: 'add-to-instance',
-					label: formatMessage(isInstalled ? messages.added : messages.addToInstance),
-					icon: isInstalled ? CheckIcon : PlusIcon,
-					disabled: isInstalled,
-					color: 'brand',
-					type: 'outlined',
-					onClick: () => handleAddServerToInstance(serverResult),
-				},
-			]
-		}
-
-		const actions: CardAction[] = []
-
-		actions.push({
-			key: 'add',
-			label: '',
-			icon: isInstalled ? CheckIcon : PlusIcon,
-			disabled: isInstalled,
-			circular: true,
-			tooltip: isInstalled
-				? formatMessage(messages.alreadyAdded)
-				: options.instance.value
-					? formatMessage(messages.addToInstanceName, {
-							instanceName: options.instance.value.name,
-						})
-					: formatMessage(commonMessages.addServerToInstanceButton),
-			onClick: () => handleAddServerToInstance(serverResult),
-		})
-
-		if (runningServerProjects.value[serverResult.project_id]) {
-			actions.push({
-				key: 'stop',
-				label: formatMessage(commonMessages.stopButton),
-				icon: StopCircleIcon,
-				color: 'red',
-				type: 'outlined',
-				onClick: () => handleStopServerProject(serverResult.project_id),
-			})
-		} else {
-			const isInstalling = options.installingServerProjects.value.includes(serverResult.project_id)
-			actions.push({
-				key: 'play',
-				label: formatMessage(
-					isInstalling ? commonMessages.installingLabel : commonMessages.playButton,
-				),
-				icon: PlayIcon,
-				disabled: isInstalling,
-				color: 'brand',
-				type: 'outlined',
-				onClick: () => handlePlayServerProject(serverResult.project_id),
-			})
-		}
-
-		return actions
-	}
-
-	function handleRightClick(
-		event: MouseEvent,
-		result: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
-	) {
-		contextMenuRef.value?.showMenu(event, result, [{ name: 'open_link' }, { name: 'copy_link' }])
-	}
-
-	function handleOptionsClick(args: ContextMenuOptionClick) {
-		const url = getProjectUrl(args.item)
-		switch (args.option) {
-			case 'open_link':
-				openUrl(url)
-				break
-			case 'copy_link':
-				navigator.clipboard.writeText(url)
-				break
-		}
-	}
-
-	process_listener((event: { event: string; profile_path_id: string }) => {
-		debugLog('process event', event)
-		if (event.event === 'finished') {
-			const projectId = Object.entries(runningServerProjects.value).find(
-				([, path]) => path === event.profile_path_id,
-			)?.[0]
-			if (projectId) {
-				const { [projectId]: _, ...rest } = runningServerProjects.value
-				runningServerProjects.value = rest
-			}
-		}
-	})
-		.then((unlisten) => {
-			unlistenProcesses = unlisten
-		})
-		.catch(options.handleError)
-
-	onUnmounted(() => {
-		serverPingCacheActive = false
-		unlistenProcesses?.()
-		serverPingCache.clear()
-		pendingServerPings.clear()
-	})
-
-	return {
-		serverPings,
-		contextMenuRef,
-		updateServerHits,
-		getServerModpackContent,
-		getServerCardActions,
-		handleRightClick,
-		handleOptionsClick,
-	}
-}
-
-function getProjectUrl(
-	item: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
-) {
-	const projectType = 'project_types' in item ? item.project_types?.[0] : item.project_type
-	return `https://modrinth.com/${projectType ?? 'project'}/${item.slug ?? item.project_id}`
-}
@@ -1,99 +0,0 @@
-import { createConsoleState } from '@modrinth/ui'
-
-import { clear_log_buffer, get_live_log_buffer, get_logs } from '@/helpers/logs'
-
-type ConsoleState = ReturnType<typeof createConsoleState>
-
-interface LogEntry {
-	filename: string
-	name?: string
-	log_type: string
-	output?: string | null
-	age?: number
-	live?: boolean
-}
-
-interface InstanceConsoleEntry {
-	liveConsole: ConsoleState
-	historicalConsole: ConsoleState
-	historicalCache: Map<string, string>
-	logList: LogEntry[] | null
-}
-
-const instances = new Map<string, InstanceConsoleEntry>()
-
-function getOrCreate(profilePathId: string): InstanceConsoleEntry {
-	let entry = instances.get(profilePathId)
-	if (entry) return entry
-
-	entry = {
-		liveConsole: createConsoleState(),
-		historicalConsole: createConsoleState(),
-		historicalCache: new Map(),
-		logList: null,
-	}
-	instances.set(profilePathId, entry)
-	return entry
-}
-
-async function hydrate(profilePathId: string): Promise<void> {
-	const entry = getOrCreate(profilePathId)
-	if (entry.liveConsole.output.value.length > 0) return
-
-	const buffer = await get_live_log_buffer(profilePathId)
-	if (buffer) {
-		entry.liveConsole.addLegacyLog(buffer)
-	}
-}
-
-async function getHistoricalLogs(profilePathId: string, instancePath: string): Promise<LogEntry[]> {
-	const entry = getOrCreate(profilePathId)
-	if (entry.logList) return entry.logList
-
-	const logs: LogEntry[] = await get_logs(instancePath, true)
-	entry.logList = logs
-
-	for (const log of logs) {
-		if (log.output) {
-			entry.historicalCache.set(log.filename, log.output)
-		}
-	}
-
-	return logs
-}
-
-function getHistoricalContent(profilePathId: string, filename: string): string | undefined {
-	return instances.get(profilePathId)?.historicalCache.get(filename)
-}
-
-function invalidate(profilePathId: string): void {
-	const entry = instances.get(profilePathId)
-	if (!entry) return
-	entry.historicalCache.clear()
-	entry.logList = null
-}
-
-async function clearLive(profilePathId: string): Promise<void> {
-	const entry = getOrCreate(profilePathId)
-	entry.liveConsole.clear()
-	await clear_log_buffer(profilePathId).catch(() => {})
-}
-
-async function destroy(profilePathId: string): Promise<void> {
-	instances.delete(profilePathId)
-	await clear_log_buffer(profilePathId).catch(() => {})
-}
-
-export function useInstanceConsole(profilePathId: string) {
-	const entry = getOrCreate(profilePathId)
-	return {
-		liveConsole: entry.liveConsole,
-		historicalConsole: entry.historicalConsole,
-		hydrate: () => hydrate(profilePathId),
-		getHistoricalLogs: (instancePath: string) => getHistoricalLogs(profilePathId, instancePath),
-		getHistoricalContent: (filename: string) => getHistoricalContent(profilePathId, filename),
-		invalidate: () => invalidate(profilePathId),
-		clearLive: () => clearLive(profilePathId),
-		destroy: () => destroy(profilePathId),
-	}
-}
@@ -1,52 +0,0 @@
-import { ref } from 'vue'
-
-import { trackEvent } from '@/helpers/analytics'
-import { test_jre } from '@/helpers/jre.js'
-
-export default function useJavaTest() {
-	const testingJava = ref(false)
-	const javaTestResult = ref<boolean | null>(null)
-	let testDebounceTimer: ReturnType<typeof setTimeout> | null = null
-
-	async function runJavaTest(path: string, version: number, track = true) {
-		if (testDebounceTimer) {
-			clearTimeout(testDebounceTimer)
-			testDebounceTimer = null
-		}
-		if (!path) {
-			javaTestResult.value = null
-			return
-		}
-		testingJava.value = true
-		try {
-			javaTestResult.value = await test_jre(path, version)
-		} catch {
-			javaTestResult.value = false
-		}
-		testingJava.value = false
-
-		if (track) {
-			trackEvent('JavaTest', { path, success: javaTestResult.value })
-		}
-	}
-
-	function testJavaInstallationDebounced(path: string, version: number, delay = 600) {
-		if (testDebounceTimer) clearTimeout(testDebounceTimer)
-		if (!path) {
-			javaTestResult.value = null
-			return
-		}
-		testDebounceTimer = setTimeout(() => runJavaTest(path, version, false), delay)
-	}
-
-	async function testJavaInstallation(path: string, version: number, track = false) {
-		await runJavaTest(path, version, track)
-	}
-
-	return {
-		testingJava,
-		javaTestResult,
-		testJavaInstallationDebounced,
-		testJavaInstallation,
-	}
-}
@@ -1,18 +0,0 @@
-const trimTrailingSlash = (url: string) => url.replace(/\/$/, '')
-
-const siteUrl = trimTrailingSlash(import.meta.env.MODRINTH_URL || 'https://modrinth.com')
-const labrinthBaseUrl = trimTrailingSlash(
-	import.meta.env.MODRINTH_API_BASE_URL || 'https://api.modrinth.com',
-)
-const archonBaseUrl = trimTrailingSlash(
-	import.meta.env.MODRINTH_ARCHON_BASE_URL || 'https://archon.modrinth.com',
-)
-
-export const config = {
-	siteUrl,
-	stripePublishableKey:
-		import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY ||
-		'pk_test_51JbFxJJygY5LJFfKV50mnXzz3YLvBVe2Gd1jn7ljWAkaBlRz3VQdxN9mXcPSrFbSqxwAb0svte9yhnsmm7qHfcWn00R611Ce7b',
-	labrinthBaseUrl,
-	archonBaseUrl,
-}
@@ -1,35 +0,0 @@
-import { OverlayScrollbars, type PartialOptions } from 'overlayscrollbars'
-import type { ObjectDirective } from 'vue'
-
-const defaultOverlayScrollbarsOptions = Object.freeze<PartialOptions>({
-	scrollbars: {
-		theme: 'os-theme-dark',
-		autoHide: 'leave',
-		autoHideSuspend: true,
-	},
-})
-
-const mergeOptions = (options: PartialOptions = {}): PartialOptions => ({
-	...defaultOverlayScrollbarsOptions,
-	...options,
-	scrollbars: {
-		...defaultOverlayScrollbarsOptions.scrollbars,
-		...(options.scrollbars ?? {}),
-	},
-})
-
-export const overlayScrollbarsDirective: ObjectDirective<HTMLElement, PartialOptions | undefined> =
-	{
-		mounted(el, binding) {
-			OverlayScrollbars(el, mergeOptions(binding.value))
-		},
-		updated(el, binding) {
-			if (binding.value === binding.oldValue) return
-			const instance = OverlayScrollbars(el)
-			instance?.options(mergeOptions(binding.value))
-		},
-		unmounted(el) {
-			const instance = OverlayScrollbars(el)
-			instance?.destroy()
-		},
-	}
@@ -97,23 +97,3 @@ export async function warning_listener(callback) {
 export async function friend_listener(callback) {
 	return await listen('friend', (event) => callback(event.payload))
 }
-
-/// Payload for the 'log' event
-/*
-    LogPayload {
-        profile_path_id: string,
-        type: "log4j" | "legacy",
-        // log4j fields (when type === "log4j"):
-        timestamp_millis?: number,
-        logger_name?: string,
-        level?: string,
-        thread_name?: string,
-        message?: string,
-        throwable?: string,
-        // legacy fields (when type === "legacy"):
-        message?: string,
-    }
-*/
-export async function log_listener(callback) {
-	return await listen('log', (event) => callback(event.payload))
-}
@@ -1,100 +0,0 @@
-import type {
-	ContentItem,
-	ContentModpackCardCategory,
-	ContentModpackCardProject,
-	ContentModpackCardVersion,
-	ContentOwner,
-} from '@modrinth/ui'
-
-import {
-	get_content_items,
-	get_linked_modpack_info,
-	type LinkedModpackInfo,
-} from '@/helpers/profile'
-import { get_categories } from '@/helpers/tags.js'
-import type { CacheBehaviour } from '@/helpers/types'
-
-export type InstanceContentData = {
-	path: string
-	contentItems: ContentItem[] | null
-	modpack: InstanceContentModpackData | null
-}
-
-export type InstanceContentModpackData = {
-	project: ContentModpackCardProject
-	version: ContentModpackCardVersion
-	owner: ContentOwner | null
-	categories: ContentModpackCardCategory[]
-	hasUpdate: boolean
-	updateVersionId: string | null
-}
-
-export async function loadInstanceContentData(
-	path: string,
-	cacheBehaviour?: CacheBehaviour,
-	onError?: (error: Error) => unknown,
-): Promise<InstanceContentData> {
-	const [contentItems, modpackInfo, allCategories] = await Promise.all([
-		get_content_items(path, cacheBehaviour).catch((error) => handleLoadError(error, onError)),
-		get_linked_modpack_info(path, cacheBehaviour).catch((error) => handleLoadError(error, onError)),
-		get_categories().catch((error) => handleLoadError(error, onError)),
-	])
-
-	return {
-		path,
-		contentItems: (contentItems as ContentItem[] | null | undefined) ?? null,
-		modpack: normalizeLinkedModpackInfo(
-			modpackInfo as LinkedModpackInfo | null | undefined,
-			allCategories as ContentModpackCardCategory[] | null | undefined,
-		),
-	}
-}
-
-function handleLoadError(error: unknown, onError?: (error: Error) => unknown) {
-	onError?.(error as Error)
-	return null
-}
-
-function normalizeLinkedModpackInfo(
-	modpackInfo: LinkedModpackInfo | null | undefined,
-	allCategories: ContentModpackCardCategory[] | null | undefined,
-): InstanceContentModpackData | null {
-	if (!modpackInfo) return null
-
-	return {
-		project: {
-			...modpackInfo.project,
-			slug: modpackInfo.project.slug ?? modpackInfo.project.id,
-			icon_url: modpackInfo.project.icon_url ?? undefined,
-		},
-		version: {
-			...modpackInfo.version,
-			date_published: modpackInfo.version.date_published.toString(),
-		},
-		owner: modpackInfo.owner
-			? {
-					...modpackInfo.owner,
-					avatar_url: modpackInfo.owner.avatar_url ?? undefined,
-				}
-			: null,
-		categories: resolveLinkedModpackCategories(modpackInfo, allCategories),
-		hasUpdate: modpackInfo.has_update,
-		updateVersionId: modpackInfo.update_version_id,
-	}
-}
-
-function resolveLinkedModpackCategories(
-	modpackInfo: LinkedModpackInfo,
-	allCategories: ContentModpackCardCategory[] | null | undefined,
-) {
-	if (!allCategories || !modpackInfo.project.categories) return []
-
-	const seen = new Set<string>()
-	return allCategories.filter((category) => {
-		if (modpackInfo.project.categories.includes(category.name) && !seen.has(category.name)) {
-			seen.add(category.name)
-			return true
-		}
-		return false
-	})
-}
@@ -6,11 +6,12 @@
 import { invoke } from '@tauri-apps/api/core'

 /*
-A log is a struct containing the filename string and optional output, as follows:
+A log is a struct containing the filename string, stdout, and stderr, as follows:

 pub struct Logs {
    pub filename:  String,
-    pub output: Option<String>,
+    pub stdout: String,
+    pub stderr: String,
 }
 */

@@ -62,13 +63,3 @@ export async function delete_logs(profilePath) {
 export async function get_latest_log_cursor(profilePath, cursor) {
 	return await invoke('plugin:logs|logs_get_latest_log_cursor', { profilePath, cursor })
 }
-
-/// Get all buffered live log lines for a profile from the Rust ring buffer
-export async function get_live_log_buffer(profilePath) {
-	return await invoke('plugin:logs|logs_get_live_log_buffer', { profilePath })
-}
-
-/// Clear the live log buffer for a profile on the Rust side
-export async function clear_log_buffer(profilePath) {
-	return await invoke('plugin:logs|logs_clear_live_log_buffer', { profilePath })
-}
@@ -8,7 +8,6 @@ interface PackProfileCreator {
 	gameVersion: string
 	modloader: InstanceLoader
 	loaderVersion: string | null
-	unknownFile: boolean
 }

 interface PackLocationVersionId {
@@ -70,10 +69,7 @@ export async function install_to_existing_profile(
 	return await invoke('plugin:pack|pack_install', { location, profile: profilePath })
 }

-export async function create_profile_and_install_from_file(
-	path: string,
-	showUnknownPackWarningModal?: (createProfile: () => Promise<void>, fileName: string) => void,
-): Promise<void> {
+export async function create_profile_and_install_from_file(path: string): Promise<void> {
 	const location: PackLocationFile = {
 		type: 'fromFile',
 		path,
@@ -82,24 +78,13 @@ export async function create_profile_and_install_from_file(
 		'plugin:pack|pack_get_profile_from_pack',
 		{ location },
 	)
-
-	const createProfile = async () => {
-		const profile = await create(
-			profile_creator.name,
-			profile_creator.gameVersion,
-			profile_creator.modloader,
-			profile_creator.loaderVersion,
-			null,
-			true,
-		)
-		await invoke('plugin:pack|pack_install', { location, profile })
-	}
-
-	if (profile_creator.unknownFile && showUnknownPackWarningModal) {
-		const splitPath = path.split(/[\\/]/)
-		const fileName = splitPath ? splitPath[splitPath.length - 1] : path
-		showUnknownPackWarningModal(createProfile, fileName)
-	} else {
-		await createProfile()
-	}
+	const profile = await create(
+		profile_creator.name,
+		profile_creator.gameVersion,
+		profile_creator.modloader,
+		profile_creator.loaderVersion,
+		null,
+		true,
+	)
+	return await invoke('plugin:pack|pack_install', { location, profile })
 }
@@ -147,16 +147,9 @@ export async function get_mod_full_path(path: string, projectPath: string): Prom
 	return await invoke('plugin:profile|profile_get_mod_full_path', { path, projectPath })
 }

-export interface JavaVersion {
-	parsed_version: number
-	version: string
-	architecture: string
-	path: string
-}
-
 // Get optimal java version from profile
 // Returns a java version
-export async function get_optimal_jre_key(path: string): Promise<JavaVersion | null> {
+export async function get_optimal_jre_key(path: string): Promise<string | null> {
 	return await invoke('plugin:profile|profile_get_optimal_jre_key', { path })
 }

@@ -191,18 +184,8 @@ export async function update_project(path: string, projectPath: string): Promise

 // Add a project to a profile from a version
 // Returns a path to the new project file
-export type DownloadReason = 'standalone' | 'dependency' | 'modpack' | 'update'
-
-export async function add_project_from_version(
-	path: string,
-	versionId: string,
-	reason: DownloadReason,
-): Promise<string> {
-	return await invoke('plugin:profile|profile_add_project_from_version', {
-		path,
-		versionId,
-		reason,
-	})
+export async function add_project_from_version(path: string, versionId: string): Promise<string> {
+	return await invoke('plugin:profile|profile_add_project_from_version', { path, versionId })
 }

 // Add a project to a profile from a path + project_type
@@ -1,83 +0,0 @@
-import type { LocationQuery, LocationQueryRaw } from 'vue-router'
-
-const MODRINTH_HOSTNAMES = new Set(['modrinth.com', 'www.modrinth.com'])
-
-const SUPPORTED_PROJECT_TYPES = new Set([
-	'mod',
-	'modpack',
-	'resourcepack',
-	'datapack',
-	'plugin',
-	'shader',
-	'server',
-	'project',
-])
-
-export function parseModrinthLink(
-	href: string,
-): { slug: string; pathSuffix: string; url: URL } | null {
-	let url: URL
-	try {
-		url = new URL(href)
-	} catch {
-		return null
-	}
-
-	if (!MODRINTH_HOSTNAMES.has(url.hostname.toLowerCase())) {
-		return null
-	}
-
-	const segments = url.pathname.split('/').filter((p) => p.length > 0)
-	if (segments.length < 2) {
-		return null
-	}
-
-	if (SUPPORTED_PROJECT_TYPES.has(segments[0].toLowerCase())) {
-		const slug = segments[1]
-		if (!slug) {
-			return null
-		}
-
-		const rest: string[] = segments.slice(2)
-		const pathSuffix = toValidAppSubpath(rest)
-		if (pathSuffix === null) {
-			return null
-		}
-
-		return { slug, pathSuffix, url }
-	} else {
-		return null
-	}
-}
-
-const SUPPORTED_SUBPATHS = ['versions', 'gallery']
-
-function toValidAppSubpath(rest: string[]): string | null {
-	if (rest.length === 0) {
-		return ''
-	}
-
-	const subroute = rest[0].toLowerCase()
-	if (rest.length === 1 && SUPPORTED_SUBPATHS.includes(subroute)) {
-		return `/${subroute}`
-	}
-
-	if (rest.length === 2 && subroute === 'version') {
-		return `/version/${rest[1]}`
-	}
-
-	return null
-}
-
-export function mergeUrlQuery(routeQuery: LocationQuery, linkUrl: URL): LocationQueryRaw {
-	const newQuery: LocationQueryRaw = { ...routeQuery }
-	const keys = new Set<string>()
-	linkUrl.searchParams.forEach((_value, key) => {
-		keys.add(key)
-	})
-	for (const key of keys) {
-		const values = linkUrl.searchParams.getAll(key)
-		newQuery[key] = values.length === 1 ? values[0] : values
-	}
-	return newQuery
-}
@@ -3,8 +3,9 @@ import {
 	applyCapeTexture,
 	createTransparentTexture,
 	disposeCaches,
+	loadTexture,
 	setupSkinModel,
-} from '@modrinth/ui'
+} from '@modrinth/utils'
 import * as THREE from 'three'
 import { reactive } from 'vue'

@@ -28,7 +29,6 @@ class BatchSkinRenderer {
 	private scene: THREE.Scene | null = null
 	private camera: THREE.PerspectiveCamera | null = null
 	private currentModel: THREE.Group | null = null
-	private transparentTexture: THREE.Texture | null = null
 	private readonly width: number
 	private readonly height: number

@@ -52,7 +52,6 @@ class BatchSkinRenderer {
 		})

 		this.renderer.outputColorSpace = THREE.SRGBColorSpace
-		this.renderer.shadowMap.enabled = false
 		this.renderer.toneMapping = THREE.NoToneMapping
 		this.renderer.toneMappingExposure = 10.0
 		this.renderer.setClearColor(0x000000, 0)
@@ -63,7 +62,7 @@ class BatchSkinRenderer {

 		const ambientLight = new THREE.AmbientLight(0xffffff, 2)
 		const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2)
-		directionalLight.castShadow = false
+		directionalLight.castShadow = true
 		directionalLight.position.set(2, 4, 3)
 		this.scene.add(ambientLight)
 		this.scene.add(directionalLight)
@@ -113,19 +112,9 @@ class BatchSkinRenderer {

 		this.renderer.render(this.scene, this.camera)

-		return await new Promise<Blob>((resolve, reject) => {
-			this.renderer!.domElement.toBlob(
-				(blob) => {
-					if (blob) {
-						resolve(blob)
-					} else {
-						reject(new Error('Failed to create blob from rendered canvas'))
-					}
-				},
-				'image/webp',
-				0.9,
-			)
-		})
+		const dataUrl = this.renderer.domElement.toDataURL('image/webp', 0.9)
+		const response = await fetch(dataUrl)
+		return await response.blob()
 	}

 	private async setupModel(modelUrl: string, textureUrl: string, capeUrl?: string): Promise<void> {
@@ -133,10 +122,14 @@ class BatchSkinRenderer {
 			throw new Error('Renderer not initialized')
 		}

-		const { model } = await setupSkinModel(modelUrl, textureUrl, capeUrl)
+		const { model } = await setupSkinModel(modelUrl, textureUrl)

-		if (!capeUrl) {
-			applyCapeTexture(model, null, this.getTransparentTexture())
+		if (capeUrl) {
+			const capeTexture = await loadTexture(capeUrl)
+			applyCapeTexture(model, capeTexture)
+		} else {
+			const transparentTexture = createTransparentTexture()
+			applyCapeTexture(model, null, transparentTexture)
 		}

 		const group = new THREE.Group()
@@ -148,38 +141,39 @@ class BatchSkinRenderer {
 		this.currentModel = group
 	}

-	private getTransparentTexture(): THREE.Texture {
-		if (!this.transparentTexture) {
-			this.transparentTexture = createTransparentTexture()
+	private clearScene(): void {
+		if (!this.scene) return
+
+		while (this.scene.children.length > 0) {
+			const child = this.scene.children[0]
+			this.scene.remove(child)
+
+			if (child instanceof THREE.Mesh) {
+				if (child.geometry) child.geometry.dispose()
+				if (child.material) {
+					if (Array.isArray(child.material)) {
+						child.material.forEach((material) => material.dispose())
+					} else {
+						child.material.dispose()
+					}
+				}
+			}
 		}

-		return this.transparentTexture
-	}
+		const ambientLight = new THREE.AmbientLight(0xffffff, 2)
+		const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2)
+		directionalLight.castShadow = true
+		directionalLight.position.set(2, 4, 3)
+		this.scene.add(ambientLight)
+		this.scene.add(directionalLight)

-	private clearScene(): void {
-		if (!this.scene || !this.currentModel) return
-
-		this.scene.remove(this.currentModel)
-		this.currentModel.clear()
 		this.currentModel = null
 	}

 	public dispose(): void {
-		this.clearScene()
-
-		if (this.transparentTexture) {
-			this.transparentTexture.dispose()
-			this.transparentTexture = null
-		}
-
 		if (this.renderer) {
 			this.renderer.dispose()
 		}
-
-		this.renderer = null
-		this.scene = null
-		this.camera = null
-
 		disposeCaches()
 	}
 }
@@ -200,9 +194,6 @@ export const headBlobUrlMap = reactive(new Map<string, string>())
 const DEBUG_MODE = false

 let sharedRenderer: BatchSkinRenderer | null = null
-let latestPreviewGeneration = 0
-let previewGenerationQueue: Promise<void> = Promise.resolve()
-
 function getSharedRenderer(): BatchSkinRenderer {
 	if (!sharedRenderer) {
 		sharedRenderer = new BatchSkinRenderer()
@@ -365,27 +356,7 @@ export async function getPlayerHeadUrl(skin: Skin): Promise<string> {
 	return await generateHeadRender(skin)
 }

-export function generateSkinPreviews(skins: Skin[], capes: Cape[]): Promise<void> {
-	const generation = ++latestPreviewGeneration
-	const skinsSnapshot = [...skins]
-	const capesSnapshot = [...capes]
-
-	const generationPromise = previewGenerationQueue.then(() =>
-		generateSkinPreviewsForGeneration(skinsSnapshot, capesSnapshot, generation),
-	)
-
-	previewGenerationQueue = generationPromise.catch(() => {})
-
-	return generationPromise
-}
-
-async function generateSkinPreviewsForGeneration(
-	skins: Skin[],
-	capes: Cape[],
-	generation: number,
-): Promise<void> {
-	const isCurrentGeneration = () => generation === latestPreviewGeneration
-
+export async function generateSkinPreviews(skins: Skin[], capes: Cape[]): Promise<void> {
 	try {
 		const skinKeys = skins.map(
 			(skin) => `${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`,
@@ -397,8 +368,6 @@ async function generateSkinPreviewsForGeneration(
 			headStorage.batchRetrieve(headKeys),
 		])

-		if (!isCurrentGeneration()) return
-
 		for (let i = 0; i < skins.length; i++) {
 			const skinKey = skinKeys[i]
 			const headKey = headKeys[i]
@@ -419,8 +388,6 @@ async function generateSkinPreviewsForGeneration(
 		}

 		for (const skin of skins) {
-			if (!isCurrentGeneration()) return
-
 			const key = `${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`

 			if (skinBlobUrlMap.has(key)) {
@@ -452,8 +419,6 @@ async function generateSkinPreviewsForGeneration(
 				cape?.texture,
 			)

-			if (!isCurrentGeneration()) return
-
 			const renderResult: RenderResult = {
 				forwards: URL.createObjectURL(rawRenderResult.forwards),
 				backwards: URL.createObjectURL(rawRenderResult.backwards),
@@ -474,12 +439,9 @@ async function generateSkinPreviewsForGeneration(
 		}
 	} finally {
 		disposeSharedRenderer()
+		await cleanupUnusedPreviews(skins)

-		if (isCurrentGeneration()) {
-			await cleanupUnusedPreviews(skins)
-
-			await skinPreviewStorage.debugCalculateStorage()
-			await headStorage.debugCalculateStorage()
-		}
+		await skinPreviewStorage.debugCalculateStorage()
+		await headStorage.debugCalculateStorage()
 	}
 }
@@ -5,6 +5,7 @@ export interface Cape {
 	id: string
 	name: string
 	texture: string
+	is_default: boolean
 	is_equipped: boolean
 }

@@ -14,7 +15,6 @@ export type SkinSource = 'default' | 'custom_external' | 'custom'
 export interface Skin {
 	texture_key: string
 	name?: string
-	section?: string
 	variant: SkinModel
 	cape_id?: string
 	texture: string
@@ -121,11 +121,17 @@ export async function get_available_skins(): Promise<Skin[]> {
 export async function add_and_equip_custom_skin(
 	textureBlob: Uint8Array,
 	variant: SkinModel,
-	cape?: Cape,
-): Promise<Skin> {
-	return await invoke('plugin:minecraft-skins|add_and_equip_custom_skin', {
+	capeOverride?: Cape,
+): Promise<void> {
+	await invoke('plugin:minecraft-skins|add_and_equip_custom_skin', {
 		textureBlob,
 		variant,
+		capeOverride,
+	})
+}
+
+export async function set_default_cape(cape?: Cape): Promise<void> {
+	await invoke('plugin:minecraft-skins|set_default_cape', {
 		cape,
 	})
 }
@@ -142,22 +148,6 @@ export async function remove_custom_skin(skin: Skin): Promise<void> {
 	})
 }

-export async function save_custom_skin(
-	skin: Skin,
-	textureBlob: Uint8Array,
-	variant: SkinModel,
-	cape: Cape | undefined,
-	replaceTexture: boolean,
-): Promise<Skin> {
-	return await invoke('plugin:minecraft-skins|save_custom_skin', {
-		skin,
-		textureBlob,
-		variant,
-		cape,
-		replaceTexture,
-	})
-}
-
 export async function get_normalized_skin_texture(skin: Skin): Promise<string> {
 	const data = await normalize_skin_texture(skin.texture)
 	const base64 = arrayBufferToBase64(data)
@@ -172,16 +162,6 @@ export async function unequip_skin(): Promise<void> {
 	await invoke('plugin:minecraft-skins|unequip_skin')
 }

-export async function flush_pending_skin_change(): Promise<void> {
-	await invoke('plugin:minecraft-skins|flush_pending_skin_change')
-}
-
-export async function flush_pending_skin_change_for_profile(profileId: string): Promise<void> {
-	await invoke('plugin:minecraft-skins|flush_pending_skin_change_for_profile', {
-		profileId,
-	})
-}
-
 export async function get_dragged_skin_data(path: string): Promise<Uint8Array> {
 	const data = await invoke('plugin:minecraft-skins|get_dragged_skin_data', { path })
 	return new Uint8Array(data)
@@ -5,46 +5,15 @@
 */
 import { invoke } from '@tauri-apps/api/core'

-export interface LoadingBarType {
-	type?: string
-	version?: string
-	profile_path?: string
-	pack_name?: string
-}
-
-export interface LoadingBar {
-	id?: string | number
-	loading_bar_uuid?: string | number
-	title?: string
-	message?: string
-	current?: number
-	total?: number
-	bar_type?: LoadingBarType
-}
-
-export type OpeningCommandEvent =
-	| 'RunMRPack'
-	| 'InstallServer'
-	| 'InstallVersion'
-	| 'InstallMod'
-	| 'InstallModpack'
-	| string
-
-export interface OpeningCommand {
-	event: OpeningCommandEvent
-	id?: string
-	path?: string
-}
-
 // Initialize the theseus API state
 // This should be called during the initializion/opening of the launcher
 export async function initialize_state() {
-	return await invoke<void>('initialize_state')
+	return await invoke('initialize_state')
 }

 // Gets active progress bars
 export async function progress_bars_list() {
-	return await invoke<Record<string, LoadingBar>>('plugin:utils|progress_bars_list')
+	return await invoke('plugin:utils|progress_bars_list')
 }

 // Get opening command
@@ -52,5 +21,5 @@ export async function progress_bars_list() {
 // This should be called once and only when the app is done booting up and ready to receive a command
 // Returns a Command struct- see events.js
 export async function get_opening_command() {
-	return await invoke<OpeningCommand | null>('plugin:utils|get_opening_command')
+	return await invoke('plugin:utils|get_opening_command')
 }
@@ -22,10 +22,6 @@ export async function removeEnqueuedUpdate() {
 	return await invoke('remove_enqueued_update')
 }

-export async function setRestartAfterPendingUpdate(should_restart) {
-	return await invoke('set_restart_after_pending_update', { shouldRestart: should_restart })
-}
-
 // One of 'Windows', 'Linux', 'MacOS'
 export async function getOS() {
 	return await invoke('plugin:utils|get_os')
@@ -30,8 +30,6 @@ export type ServerWorld = BaseWorld & {
 	index: number
 	address: string
 	pack_status: ServerPackStatus
-	project_id?: string
-	content_kind?: string
 }

 export type World = SingleplayerWorld | ServerWorld
@@ -142,16 +140,12 @@ export async function add_server_to_profile(
 	name: string,
 	address: string,
 	packStatus: ServerPackStatus,
-	projectId?: string,
-	contentKind?: string,
 ): Promise<number> {
 	return await invoke('plugin:worlds|add_server_to_profile', {
 		path,
 		name,
 		address,
 		packStatus,
-		projectId,
-		contentKind,
 	})
 }

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
François-X. T.	72e528b33f	Revert "Changelog" This reverts commit `0c1c7e2fe8`.	2026-03-24 16:36:42 -04:00
François-X. T.	0c1c7e2fe8	Changelog	2026-03-24 16:33:09 -04:00
François-X. T.	cf16939519	Add Java 25, handle new version format	2026-03-24 16:28:37 -04:00
@@ -1 +1 @@
 .15.0
 .19.2
				`@@ -0,0 +1 @@`
				`See [CLAUDE.md](./CLAUDE.md) for all project instructions and guidelines.`