chore: improve greetings workflow for the first-time contributors

chore: use personal token for automerge
chore: linting
2026-06-28 09:29:58 +02:00 · 2025-11-22 15:53:53 +04:00 · 2025-11-22 15:53:53 +04:00 · 2025-11-22 15:53:53 +04:00 · 2025-11-22 15:53:53 +04:00 · 2025-11-22 15:53:53 +04:00
112 changed files with 17606 additions and 10338 deletions
@@ -0,0 +1,6 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+If you are modifying the UI, do not add random colors that are not controlled by src/lib/themes.ts file.
@@ -31,19 +31,21 @@ jobs:
          #   build-mode: none
    steps:
      - name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2
+        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 #v6.0.0

      - name: Set up pnpm package manager
-        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda #v4.1.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 #v4.2.0
+        with:
+          run_install: false

      - name: Set up Node.js
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 #v4.4.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 #v6.0.0
        with:
          node-version-file: .node-version
          cache: "pnpm"

      - name: Setup Rust
-        uses: dtolnay/rust-toolchain@b3b07ba8b418998c39fb20f53e8b695cdcc8de1b #master
+        uses: dtolnay/rust-toolchain@e97e2d8cc328f1b50210efc529dca0028893a2d9 #master
        with:
          toolchain: stable
          targets: x86_64-unknown-linux-gnu
@@ -55,7 +57,7 @@ jobs:
          sudo apt-get install -y libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev pkg-config xdg-utils

      - name: Rust cache
-        uses: swatinem/rust-cache@98c8021b550208e191a6a3145459bfc9fb29c4c0 #v2.8.0
+        uses: swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 #v2.8.1
        with:
          workdir: ./src-tauri

@@ -13,7 +13,7 @@ jobs:
  security-scan:
    name: Security Vulnerability Scan
    if: ${{ github.actor == 'dependabot[bot]' }}
-    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@b00f71e051ddddc6e46a193c31c8c0bf283bf9e6" # v2.1.0
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@b77c075a1235514558f0eb88dbd31e22c45e0cd2" # v2.3.0
    with:
      scan-args: |-
        -r
@@ -73,9 +73,9 @@ jobs:
          compat-lookup: true
          github-token: "${{ secrets.GITHUB_TOKEN }}"
      - name: Auto-merge minor and patch updates
-        uses: ridedott/merge-me-action@d288b479e76cb993344ca8b5e0fcaa7d6e667eed #v2.10.123
+        uses: ridedott/merge-me-action@18dd4f01d259faf0a2d900a56cd6b7e765009209 #v2.10.138
        with:
-          GITHUB_TOKEN: ${{ secrets.SECRET_DEPENDABOT_GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          MERGE_METHOD: SQUASH
          PRESET: DEPENDABOT_MINOR
          MAXIMUM_RETRIES: 5
@@ -1,6 +1,8 @@
 name: Greetings

-on: [pull_request_target, issues]
+on:
+  pull_request:
+    types: [opened]

 jobs:
  greeting:
@@ -9,8 +11,7 @@ jobs:
      issues: write
      pull-requests: write
    steps:
-      - uses: actions/first-interaction@2d4393e6bc0e2efb2e48fba7e06819c3bf61ffc9 #v2.0.0
+      - uses: actions/first-interaction@1c4688942c71f71d4f5502a26ea67c331730fa4d # v3.1.0
        with:
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-          issue-message: "Thank you for your first issue ❤️ If it's a feature request, please make sure it's clear what you want, why you want it, and how important it is to you. If you posted a bug report, please make sure it includes as much detail as possible."
-          pr-message: "Welcome to the community and thank you for your first contribution ❤️ A human will review your PR shortly. Make sure that the pipelines are green, so that the PR is considered ready for a review and could be merged."
+          issue_message: "Thank you for your first issue ❤️ If it's a feature request, please make sure it's clear what you want, why you want it, and how important it is to you. If you posted a bug report, please make sure it includes as much detail as possible."
+          pr_message: "Welcome to the community and thank you for your first contribution ❤️ A human will review your PR shortly. Make sure that the pipelines are green, so that the PR is considered ready for a review and could be merged."
@@ -5,6 +5,7 @@ on:
    types: [opened]

 permissions:
+  contents: read
  issues: write
  models: read

@@ -14,7 +15,7 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2
+        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 #v6.0.0

      - name: Get issue templates
        id: get-templates
@@ -48,7 +49,7 @@ jobs:

      - name: Validate issue with AI
        id: validate
-        uses: actions/ai-inference@9693b137b6566bb66055a713613bf4f0493701eb # v1.2.3
+        uses: actions/ai-inference@a1c11829223a786afe3b5663db904a3aa1eac3a2 # v2.0.1
        with:
          prompt-file: issue_analysis.txt
          system-prompt: |
@@ -90,17 +91,44 @@ jobs:
            ```

            Be constructive and helpful in your feedback. If the issue is incomplete, provide specific guidance on what's needed.
-          model: gpt-4o
+            model: openai/gpt-4o
+
+      - name: Check if first-time contributor
+        id: check-first-time
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ISSUE_AUTHOR: ${{ github.event.issue.user.login }}
+        run: |
+          # Check if user has created issues before (excluding the current one)
+          ISSUE_COUNT=$(gh api "/repos/${{ github.repository }}/issues" \
+            --jq "map(select(.user.login == \"$ISSUE_AUTHOR\" and .number != ${{ github.event.issue.number }})) | length" \
+            --paginate || echo "0")
+          
+          if [ "$ISSUE_COUNT" = "0" ]; then
+            echo "is_first_time=true" >> $GITHUB_OUTPUT
+            echo "✅ First-time contributor detected"
+          else
+            echo "is_first_time=false" >> $GITHUB_OUTPUT
+            echo "ℹ️ Returning contributor"
+          fi

      - name: Parse validation result and take action
        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
-          # Get the AI response
-          VALIDATION_RESULT='${{ steps.validate.outputs.response }}'
+          # Prefer reading from the response file to avoid output truncation
+          RESPONSE_FILE='${{ steps.validate.outputs.response-file }}'
+          if [ -n "$RESPONSE_FILE" ] && [ -f "$RESPONSE_FILE" ]; then
+            RAW_OUTPUT=$(cat "$RESPONSE_FILE")
+          else
+            RAW_OUTPUT='${{ steps.validate.outputs.response }}'
+          fi

-          # Extract JSON from the response (handle potential markdown formatting)
-          JSON_RESULT=$(echo "$VALIDATION_RESULT" | sed -n '/```json/,/```/p' | sed '1d;$d' || echo "$VALIDATION_RESULT")
+          # Extract JSON if wrapped in markdown code fences; otherwise use raw
+          JSON_RESULT=$(printf "%s" "$RAW_OUTPUT" | sed -n '/```json/,/```/p' | sed '1d;$d')
+          if [ -z "$JSON_RESULT" ]; then
+            JSON_RESULT="$RAW_OUTPUT"
+          fi

          # Parse JSON fields
          IS_VALID=$(echo "$JSON_RESULT" | jq -r '.is_valid // false')
@@ -111,41 +139,53 @@ jobs:

          echo "Issue validation result: $IS_VALID"
          echo "Issue type: $ISSUE_TYPE"
+          
+          # Prepare greeting message for first-time contributors
+          IS_FIRST_TIME="${{ steps.check-first-time.outputs.is_first_time }}"
+          GREETING_SECTION=""
+          if [ "$IS_FIRST_TIME" = "true" ]; then
+            GREETING_SECTION="## 👋 Welcome!
+
+Thank you for your first issue ❤️ If it's a feature request, please make sure it's clear what you want, why you want it, and how important it is to you. If you posted a bug report, please make sure it includes as much detail as possible.
+
+---"
+          fi

          if [ "$IS_VALID" = "false" ]; then
            # Create a comment asking for more information
            cat > comment.md << EOF
-          ## 🤖 Issue Validation
+$GREETING_SECTION
+## 🤖 Issue Validation

-          Thank you for submitting this issue! However, it appears that some required information might be missing to help us better understand and address your concern.
+Thank you for submitting this issue! However, it appears that some required information might be missing to help us better understand and address your concern.

-          **Issue Type Detected:** \`$ISSUE_TYPE\`
+**Issue Type Detected:** \`$ISSUE_TYPE\`

-          **Assessment:** $ASSESSMENT
+**Assessment:** $ASSESSMENT

-          ### 📋 Missing Information:
-          $MISSING_INFO
+### 📋 Missing Information:
+$MISSING_INFO

-          ### 💡 Suggestions for Improvement:
-          $SUGGESTIONS
+### 💡 Suggestions for Improvement:
+$SUGGESTIONS

-          ### 📝 How to Provide Additional Information:
+### 📝 How to Provide Additional Information:

-          Please edit your original issue description to include the missing information. Here are our issue templates for reference:
+Please edit your original issue description to include the missing information. Here are our issue templates for reference:

-          - **Bug Report Template:** [View Template](.github/ISSUE_TEMPLATE/01-bug-report.md)
-          - **Feature Request Template:** [View Template](.github/ISSUE_TEMPLATE/02-feature-request.md)
+- **Bug Report Template:** [View Template](.github/ISSUE_TEMPLATE/01-bug-report.md)
+- **Feature Request Template:** [View Template](.github/ISSUE_TEMPLATE/02-feature-request.md)

-          ### 🔧 Quick Tips:
-          - For **bug reports**: Include step-by-step reproduction instructions, your environment details, and any error messages
-          - For **feature requests**: Describe the use case, expected behavior, and why this feature would be valuable
-          - Add **screenshots** or **logs** when applicable
+### 🔧 Quick Tips:
+- For **bug reports**: Include step-by-step reproduction instructions, your environment details, and any error messages
+- For **feature requests**: Describe the use case, expected behavior, and why this feature would be valuable
+- Add **screenshots** or **logs** when applicable

-          Once you've updated the issue with the missing information, feel free to remove this comment or reply to let us know you've made the updates.
+Once you've updated the issue with the missing information, feel free to remove this comment or reply to let us know you've made the updates.

-          ---
-          *This validation was performed automatically to ensure we have all the information needed to help you effectively.*
-          EOF
+---
+*This validation was performed automatically to ensure we have all the information needed to help you effectively.*
+EOF

            # Post the comment
            gh issue comment ${{ github.event.issue.number }} --body-file comment.md
@@ -156,7 +196,32 @@ jobs:
            echo "✅ Validation comment posted and 'needs-info' label added"
          else
            echo "✅ Issue contains sufficient information"
-            
+
+            # Prepare a summary comment even when valid
+            # Build suggestions section conditionally
+            SUGGESTIONS_SECTION=""
+            if [ -n "$SUGGESTIONS" ]; then
+              SUGGESTIONS_SECTION="### 💡 Suggestions:
+$SUGGESTIONS
+
+"
+            fi
+
+            cat > comment.md << EOF
+$GREETING_SECTION
+## 🤖 Issue Validation
+
+**Issue Type Detected:** \`$ISSUE_TYPE\`
+
+**Assessment:** $ASSESSMENT
+
+$SUGGESTIONS_SECTION---
+*This validation was performed automatically to help triage issues.*
+EOF
+
+            # Post the summary comment
+            gh issue comment ${{ github.event.issue.number }} --body-file comment.md
+
            # Add appropriate labels based on issue type
            case "$ISSUE_TYPE" in
              "bug_report")
@@ -34,13 +34,15 @@ jobs:
        run: git config --global core.autocrlf false

      - name: Checkout repository code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2
+        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 #v6.0.0

      - name: Set up pnpm package manager
-        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda #v4.1.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 #v4.2.0
+        with:
+          run_install: false

      - name: Set up Node.js
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 #v4.4.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 #v6.0.0
        with:
          node-version-file: .node-version
          cache: "pnpm"
@@ -30,9 +30,8 @@ permissions:
 jobs:
  build:
    strategy:
-      fail-fast: true
      matrix:
-        os: [macos-latest]
+        os: [macos-latest, ubuntu-22.04]

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

@@ -42,19 +41,21 @@ jobs:
        run: git config --global core.autocrlf false

      - name: Checkout repository code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2
+        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 #v6.0.0

      - name: Set up pnpm package manager
-        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda #v4.1.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 #v4.2.0
+        with:
+          run_install: false

      - name: Set up Node.js
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 #v4.4.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 #v6.0.0
        with:
          node-version-file: .node-version
          cache: "pnpm"

      - name: Install Rust toolchain
-        uses: dtolnay/rust-toolchain@b3b07ba8b418998c39fb20f53e8b695cdcc8de1b #master
+        uses: dtolnay/rust-toolchain@e97e2d8cc328f1b50210efc529dca0028893a2d9 #master
        with:
          toolchain: stable
          components: rustfmt, clippy
@@ -66,7 +67,7 @@ jobs:
        run: cargo install banderole

      - name: Install dependencies (Ubuntu only)
-        if: matrix.os == 'ubuntu-latest'
+        if: matrix.os == 'ubuntu-22.04'
        run: |
          sudo apt-get update
          sudo apt install libwebkit2gtk-4.1-dev build-essential curl wget file libxdo-dev libssl-dev libayatana-appindicator3-dev librsvg2-dev
@@ -78,7 +79,7 @@ jobs:
        shell: bash
        working-directory: ./nodecar
        run: |
-          if [[ "${{ matrix.os }}" == "ubuntu-latest" ]]; then
+          if [[ "${{ matrix.os }}" == "ubuntu-22.04" ]]; then
            pnpm run build:linux-x64
          elif [[ "${{ matrix.os }}" == "macos-latest" ]]; then
            pnpm run build:mac-aarch64
@@ -87,15 +88,15 @@ jobs:
          fi

      # TODO: replace with an integration test that fetches everything from rust
-      - name: Download Camoufox for testing
-        run: npx camoufox-js fetch
-        continue-on-error: true
+      # - name: Download Camoufox for testing
+      #   run: npx camoufox-js fetch
+      #   continue-on-error: true

      - name: Copy nodecar binary to Tauri binaries
        shell: bash
        run: |
          mkdir -p src-tauri/binaries
-          if [[ "${{ matrix.os }}" == "ubuntu-latest" ]]; then
+          if [[ "${{ matrix.os }}" == "ubuntu-22.04" ]]; then
            cp nodecar/nodecar-bin src-tauri/binaries/nodecar-x86_64-unknown-linux-gnu
          elif [[ "${{ matrix.os }}" == "macos-latest" ]]; then
            cp nodecar/nodecar-bin src-tauri/binaries/nodecar-aarch64-apple-darwin
@@ -50,7 +50,7 @@ jobs:
  scan-scheduled:
    name: Scheduled Security Scan
    if: ${{ github.event_name == 'push' || github.event_name == 'schedule' }}
-    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@b00f71e051ddddc6e46a193c31c8c0bf283bf9e6" # v2.1.0
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@b77c075a1235514558f0eb88dbd31e22c45e0cd2" # v2.3.0
    with:
      scan-args: |-
        -r
@@ -63,7 +63,7 @@ jobs:
  scan-pr:
    name: PR Security Scan
    if: ${{ github.event_name == 'pull_request' || github.event_name == 'merge_group' }}
-    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@b00f71e051ddddc6e46a193c31c8c0bf283bf9e6" # v2.1.0
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@b77c075a1235514558f0eb88dbd31e22c45e0cd2" # v2.3.0
    with:
      scan-args: |-
        -r
@@ -29,7 +29,7 @@ jobs:
  security-scan:
    name: Security Vulnerability Scan
    if: ${{ github.event_name == 'pull_request' || github.event_name == 'merge_group' }}
-    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@b00f71e051ddddc6e46a193c31c8c0bf283bf9e6" # v2.1.0
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@b77c075a1235514558f0eb88dbd31e22c45e0cd2" # v2.3.0
    with:
      scan-args: |-
        -r
@@ -15,7 +15,7 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2
+        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 #v6.0.0
        with:
          fetch-depth: 0 # Fetch full history to compare with previous release

@@ -58,7 +58,7 @@ jobs:

      - name: Generate release notes with AI
        id: generate-notes
-        uses: actions/ai-inference@9693b137b6566bb66055a713613bf4f0493701eb # v1.2.3
+        uses: actions/ai-inference@a1c11829223a786afe3b5663db904a3aa1eac3a2 # v2.0.1
        with:
          prompt-file: commits.txt
          system-prompt: |
@@ -13,7 +13,7 @@ env:
 jobs:
  security-scan:
    name: Security Vulnerability Scan
-    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@b00f71e051ddddc6e46a193c31c8c0bf283bf9e6" # v2.1.0
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@b77c075a1235514558f0eb88dbd31e22c45e0cd2" # v2.3.0
    with:
      scan-args: |-
        -r
@@ -67,37 +67,37 @@ jobs:
      matrix:
        include:
          - platform: "macos-latest"
-            args: "--target aarch64-apple-darwin"
+            args: "--target aarch64-apple-darwin --verbose"
            arch: "aarch64"
            target: "aarch64-apple-darwin"
            pkg_target: "latest-macos-arm64"
            nodecar_script: "build:mac-aarch64"
          - platform: "macos-latest"
-            args: "--target x86_64-apple-darwin"
+            args: "--target x86_64-apple-darwin --verbose"
            arch: "x86_64"
            target: "x86_64-apple-darwin"
            pkg_target: "latest-macos-x64"
            nodecar_script: "build:mac-x86_64"
          - platform: "ubuntu-22.04"
-            args: "--target x86_64-unknown-linux-gnu"
+            args: "--target x86_64-unknown-linux-gnu --verbose"
            arch: "x86_64"
            target: "x86_64-unknown-linux-gnu"
            pkg_target: "latest-linux-x64"
            nodecar_script: "build:linux-x64"
          - platform: "ubuntu-22.04-arm"
-            args: "--target aarch64-unknown-linux-gnu"
+            args: "--target aarch64-unknown-linux-gnu --verbose"
            arch: "aarch64"
            target: "aarch64-unknown-linux-gnu"
            pkg_target: "latest-linux-arm64"
            nodecar_script: "build:linux-arm64"
          # - platform: "windows-latest"
-          #   args: "--target x86_64-pc-windows-msvc"
+          #   args: "--target x86_64-pc-windows-msvc --verbose"
          #   arch: "x86_64"
          #   target: "x86_64-pc-windows-msvc"
          #   pkg_target: "latest-win-x64"
          #   nodecar_script: "build:win-x64"
          # - platform: "windows-11-arm"
-          #   args: "--target aarch64-pc-windows-msvc"
+          #   args: "--target aarch64-pc-windows-msvc --verbose"
          #   arch: "aarch64"
          #   target: "aarch64-pc-windows-msvc"
          #   pkg_target: "latest-win-arm64"
@@ -105,18 +105,21 @@ jobs:

    runs-on: ${{ matrix.platform }}
    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2
-
-      - name: Setup Node.js
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 #v4.4.0
-        with:
-          node-version-file: .node-version
+      - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 #v6.0.0

      - name: Setup pnpm
-        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda #v4.1.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 #v4.2.0
+        with:
+          run_install: false
+
+      - name: Setup Node.js
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 #v6.0.0
+        with:
+          node-version-file: .node-version
+          cache: "pnpm"

      - name: Setup Rust
-        uses: dtolnay/rust-toolchain@b3b07ba8b418998c39fb20f53e8b695cdcc8de1b #master
+        uses: dtolnay/rust-toolchain@e97e2d8cc328f1b50210efc529dca0028893a2d9 #master
        with:
          toolchain: stable
          targets: ${{ matrix.target }}
@@ -128,7 +131,7 @@ jobs:
          sudo apt-get install -y libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev pkg-config xdg-utils

      - name: Rust cache
-        uses: swatinem/rust-cache@98c8021b550208e191a6a3145459bfc9fb29c4c0 #v2.8.0
+        uses: swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 #v2.8.1
        with:
          workdir: ./src-tauri

@@ -154,15 +157,15 @@ jobs:
            cp nodecar/nodecar-bin src-tauri/binaries/nodecar-${{ matrix.target }}
          fi

-      - name: Download Camoufox for testing
-        run: npx camoufox-js fetch
-        continue-on-error: true
+      # - name: Download Camoufox for testing
+      #   run: npx camoufox-js fetch
+      #   continue-on-error: true

      - name: Build frontend
        run: pnpm build

      - name: Build Tauri app
-        uses: tauri-apps/tauri-action@564aea5a8075c7a54c167bb0cf5b3255314a7f9d #v0.5.22
+        uses: tauri-apps/tauri-action@19b93bb55601e3e373a93cfb6eb4242e45f5af20 #v0.6.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          GITHUB_REF_NAME: ${{ github.ref_name }}
@@ -174,9 +177,8 @@ jobs:
          prerelease: false
          args: ${{ matrix.args }}

-      - name: Commit CHANGELOG.md
-        uses: stefanzweifel/git-auto-commit-action@778341af668090896ca464160c2def5d1d1a3eb0 #v6.0.1
-        with:
-          branch: main
-          commit_message: "docs: update CHANGELOG.md for ${{ github.ref_name }} [skip ci]"
-          file_pattern: CHANGELOG.md
+#      - name: Commit CHANGELOG.md
+#        uses: stefanzweifel/git-auto-commit-action@778341af668090896ca464160c2def5d1d1a3eb0 #v6.0.1
+#        with:
+#          branch: main
+#          commit_message: "docs: update CHANGELOG.md for ${{ github.ref_name }} [skip ci]"
@@ -12,7 +12,7 @@ env:
 jobs:
  security-scan:
    name: Security Vulnerability Scan
-    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@b00f71e051ddddc6e46a193c31c8c0bf283bf9e6" # v2.1.0
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@b77c075a1235514558f0eb88dbd31e22c45e0cd2" # v2.3.0
    with:
      scan-args: |-
        -r
@@ -66,37 +66,37 @@ jobs:
      matrix:
        include:
          - platform: "macos-latest"
-            args: "--target aarch64-apple-darwin"
+            args: "--target aarch64-apple-darwin --verbose"
            arch: "aarch64"
            target: "aarch64-apple-darwin"
            pkg_target: "latest-macos-arm64"
            nodecar_script: "build:mac-aarch64"
          - platform: "macos-latest"
-            args: "--target x86_64-apple-darwin"
+            args: "--target x86_64-apple-darwin --verbose"
            arch: "x86_64"
            target: "x86_64-apple-darwin"
            pkg_target: "latest-macos-x64"
            nodecar_script: "build:mac-x86_64"
          - platform: "ubuntu-22.04"
-            args: "--target x86_64-unknown-linux-gnu"
+            args: "--target x86_64-unknown-linux-gnu --verbose"
            arch: "x86_64"
            target: "x86_64-unknown-linux-gnu"
            pkg_target: "latest-linux-x64"
            nodecar_script: "build:linux-x64"
          - platform: "ubuntu-22.04-arm"
-            args: "--target aarch64-unknown-linux-gnu"
+            args: "--target aarch64-unknown-linux-gnu --verbose"
            arch: "aarch64"
            target: "aarch64-unknown-linux-gnu"
            pkg_target: "latest-linux-arm64"
            nodecar_script: "build:linux-arm64"
          - platform: "windows-latest"
-            args: "--target x86_64-pc-windows-msvc"
+            args: "--target x86_64-pc-windows-msvc --verbose"
            arch: "x86_64"
            target: "x86_64-pc-windows-msvc"
            pkg_target: "latest-win-x64"
            nodecar_script: "build:win-x64"
          # - platform: "windows-11-arm"
-          #   args: "--target aarch64-pc-windows-msvc"
+          #   args: "--target aarch64-pc-windows-msvc --verbose"
          #   arch: "aarch64"
          #   target: "aarch64-pc-windows-msvc"
          #   pkg_target: "latest-win-arm64"
@@ -104,18 +104,21 @@ jobs:

    runs-on: ${{ matrix.platform }}
    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2
-
-      - name: Setup Node.js
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 #v4.4.0
-        with:
-          node-version-file: .node-version
+      - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 #v6.0.0

      - name: Setup pnpm
-        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda #v4.1.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 #v4.2.0
+        with:
+          run_install: false
+
+      - name: Setup Node.js
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 #v6.0.0
+        with:
+          node-version-file: .node-version
+          cache: "pnpm"

      - name: Setup Rust
-        uses: dtolnay/rust-toolchain@b3b07ba8b418998c39fb20f53e8b695cdcc8de1b #master
+        uses: dtolnay/rust-toolchain@e97e2d8cc328f1b50210efc529dca0028893a2d9 #master
        with:
          toolchain: stable
          targets: ${{ matrix.target }}
@@ -127,7 +130,7 @@ jobs:
          sudo apt-get install -y libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev pkg-config xdg-utils

      - name: Rust cache
-        uses: swatinem/rust-cache@98c8021b550208e191a6a3145459bfc9fb29c4c0 #v2.8.0
+        uses: swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 #v2.8.1
        with:
          workdir: ./src-tauri

@@ -153,9 +156,9 @@ jobs:
            cp nodecar/nodecar-bin src-tauri/binaries/nodecar-${{ matrix.target }}
          fi

-      - name: Download Camoufox for testing
-        run: npx camoufox-js fetch
-        continue-on-error: true
+      # - name: Download Camoufox for testing
+      #   run: npx camoufox-js fetch
+      #   continue-on-error: true

      - name: Build frontend
        run: pnpm build
@@ -170,7 +173,7 @@ jobs:
          echo "Generated timestamp: ${TIMESTAMP}-${COMMIT_HASH}"

      - name: Build Tauri app
-        uses: tauri-apps/tauri-action@564aea5a8075c7a54c167bb0cf5b3255314a7f9d #v0.5.22
+        uses: tauri-apps/tauri-action@19b93bb55601e3e373a93cfb6eb4242e45f5af20 #v0.6.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BUILD_TAG: "nightly-${{ steps.timestamp.outputs.timestamp }}"
@@ -21,6 +21,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Actions Repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2
+        uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 #v6.0.0
      - name: Spell Check Repo
-        uses: crate-ci/typos@392b78fe18a52790c53f42456e46124f77346842 #v1.34.0
+        uses: crate-ci/typos@626c4bedb751ce0b7f03262ca97ddda9a076ae1c #v1.39.2
@@ -12,7 +12,7 @@ jobs:
      pull-requests: write

    steps:
-      - uses: actions/stale@5bef64f19d7facfb25b37b414482c7164d639639 # v9.1.0
+      - uses: actions/stale@5f858e3efba33a5ca4407a664cc011ad407f2008 # v10.1.0
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          stale-issue-message: "This issue has been inactive for 60 days. Please respond to keep it open."
@@ -1,5 +1,7 @@
 {
  "cSpell.words": [
+    "ABORTIFHUNG",
+    "aboutwelcome",
    "adwaita",
    "ahooks",
    "akhilmhdh",
@@ -20,15 +22,20 @@
    "CFURL",
    "checkin",
    "chrono",
+    "ciphertext",
+    "cksum",
    "CLICOLOR",
    "clippy",
    "cmdk",
    "codegen",
    "codesign",
+    "commitish",
    "CTYPE",
+    "daijro",
    "dataclasses",
    "datareporting",
    "datas",
+    "DBAPI",
    "dconf",
    "devedition",
    "distro",
@@ -36,6 +43,7 @@
    "doesn",
    "domcontentloaded",
    "donutbrowser",
+    "doorhanger",
    "dpkg",
    "dtolnay",
    "dyld",
@@ -44,6 +52,7 @@
    "esac",
    "esbuild",
    "etree",
+    "flate",
    "frontmost",
    "geoip",
    "getcwd",
@@ -63,6 +72,7 @@
    "kdeglobals",
    "keras",
    "KHTML",
+    "killall",
    "Kolkata",
    "kreadconfig",
    "launchservices",
@@ -77,10 +87,14 @@
    "libwebkit",
    "libxdo",
    "localtime",
+    "lpdw",
    "lxml",
+    "lzma",
+    "Matchalk",
    "mmdb",
    "mountpoint",
    "msiexec",
+    "mstone",
    "msvc",
    "msys",
    "Mullvad",
@@ -104,7 +118,10 @@
    "pathex",
    "pathlib",
    "peerconnection",
+    "pids",
    "pixbuf",
+    "pkexec",
+    "pkill",
    "plasmohq",
    "platformdirs",
    "prefs",
@@ -121,10 +138,13 @@
    "ridedott",
    "rlib",
    "rustc",
+    "rwxr",
    "SARIF",
    "scipy",
    "screeninfo",
+    "selectables",
    "serde",
+    "SETTINGCHANGE",
    "setuptools",
    "shadcn",
    "showcursor",
@@ -132,6 +152,7 @@
    "signon",
    "signum",
    "sklearn",
+    "SMTO",
    "sonner",
    "splitn",
    "sspi",
@@ -175,6 +196,7 @@
    "xfconf",
    "xsettings",
    "zhom",
+    "zipball",
    "zoneinfo"
  ]
 }
@@ -6,3 +6,4 @@
 - Before finishing the task and showing summary, always run "pnpm format && pnpm lint && pnpm test" at the root of the project to ensure that you don't finish with broken application.
 - Anytime you change nodecar's code and try to test, recompile it with "cd nodecar && pnpm build".
 - If there is a global singleton of a struct, only use it inside a method while properly initializing it, unless I have explicitly specified in the request otherwise.
+- If you are modifying the UI, do not add random colors that are not controlled by src/lib/themes.ts file.
@@ -35,9 +35,9 @@

 - Create unlimited number of local browser profiles completely isolated from each other
 - Safely use multiple accounts on one device by using anti-detect browser profiles, powered by [Camoufox](https://camoufox.com)
- Proxy support with basic auth for all browsers except for TOR Browser
+- Proxy support with basic auth for all browsers
 - Import profiles from your existing browsers
- Automatic updates both for browsers and for the app itself
+- Automatic updates for browsers
 - Set Donut Browser as your default browser to control in which profile to open links

 ## Download
@@ -84,8 +84,8 @@ Have questions or want to contribute? We'd love to hear from you!

 <!-- readme: collaborators,contributors -start -->
 <table>
- <tbody>
-  <tr>
+	<tbody>
+		<tr>
            <td align="center">
                <a href="https://github.com/zhom">
                    <img src="https://avatars.githubusercontent.com/u/2717306?v=4" width="100;" alt="zhom"/>
@@ -93,8 +93,8 @@ Have questions or want to contribute? We'd love to hear from you!
                    <sub><b>zhom</b></sub>
                </a>
            </td>
-  </tr>
- <tbody>
+		</tr>
+	<tbody>
 </table>
 <!-- readme: collaborators,contributors -end -->

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.0.6/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.2.0/schema.json",
  "vcs": {
    "enabled": false,
    "clientKind": "git",
@@ -18,11 +18,11 @@
    "rules": {
      "recommended": true,
      "correctness": {
+        "useUniqueElementIds": "off",
        "useHookAtTopLevel": "error"
      },
-      "nursery": {
-        "useUniqueElementIds": "off"
-      },
+      "nursery": "off",
+      "suspicious": "off",
      "a11y": {
        "useSemanticElements": "off"
      }
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./dist/types/routes.d.ts" />

 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
@@ -7,6 +7,9 @@ const nextConfig: NextConfig = {
    unoptimized: true,
  },
  distDir: "dist",
+  compiler: {
+    removeConsole: process.env.NODE_ENV === "production",
+  },
 };

 export default nextConfig;
@@ -21,18 +21,18 @@
  "author": "",
  "license": "AGPL-3.0",
  "dependencies": {
-    "@types/node": "^24.2.0",
-    "commander": "^14.0.0",
-    "donutbrowser-camoufox-js": "^0.6.4",
-    "dotenv": "^17.2.1",
-    "fingerprint-generator": "^2.1.69",
+    "@types/node": "^24.10.0",
+    "commander": "^14.0.2",
+    "donutbrowser-camoufox-js": "^0.7.0",
+    "dotenv": "^17.2.3",
+    "fingerprint-generator": "^2.1.76",
    "get-port": "^7.1.0",
-    "nodemon": "^3.1.10",
-    "playwright-core": "^1.54.2",
+    "nodemon": "^3.1.11",
+    "playwright-core": "^1.56.1",
    "proxy-chain": "^2.5.9",
-    "tmp": "^0.2.4",
+    "tmp": "^0.2.5",
    "ts-node": "^10.9.2",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.3"
  },
  "devDependencies": {
    "@types/tmp": "^0.2.6"
@@ -344,6 +344,8 @@ interface GenerateConfigOptions {
  proxy?: string;
  maxWidth?: number;
  maxHeight?: number;
+  minWidth?: number;
+  minHeight?: number;
  geoip?: string | boolean;
  blockImages?: boolean;
  blockWebrtc?: boolean;
@@ -411,14 +413,26 @@ export async function generateCamoufoxConfig(
    } else {
      // Use individual options to build configuration

-      if (options.maxWidth && options.maxHeight) {
-        launchOpts.screen = {
-          maxWidth: options.maxWidth,
-          maxHeight: options.maxHeight,
-        };
+      // Build screen configuration with min/max dimensions
+      const screen: {
+        minWidth?: number;
+        maxWidth?: number;
+        minHeight?: number;
+        maxHeight?: number;
+      } = {};
+
+      if (options.minWidth) screen.minWidth = options.minWidth;
+      if (options.maxWidth) screen.maxWidth = options.maxWidth;
+      if (options.minHeight) screen.minHeight = options.minHeight;
+      if (options.maxHeight) screen.maxHeight = options.maxHeight;
+
+      if (Object.keys(screen).length > 0) {
+        launchOpts.screen = screen;
      }
    }

+    launchOpts.allowAddonNewTab = true;
+
    // Generate the configuration using launchOptions
    const generatedOptions = await launchOptions(launchOpts);

@@ -1,18 +1,40 @@
+import fs from "node:fs";
+import path from "node:path";
 import { launchOptions } from "donutbrowser-camoufox-js";
 import type { LaunchOptions } from "donutbrowser-camoufox-js/dist/utils.js";
 import { type Browser, type BrowserContext, firefox } from "playwright-core";
+import tmp from "tmp";
 import { getCamoufoxConfig, saveCamoufoxConfig } from "./camoufox-storage.js";
 import { getEnvVars, parseProxyString } from "./utils.js";

+// Set up debug logging to a file
+const LOG_DIR = path.join(tmp.tmpdir, "donutbrowser", "camoufox-logs");
+if (!fs.existsSync(LOG_DIR)) {
+  fs.mkdirSync(LOG_DIR, { recursive: true });
+}
+
+function debugLog(id: string, message: string, data?: any): void {
+  const logFile = path.join(LOG_DIR, `${id}.log`);
+  const timestamp = new Date().toISOString();
+  const logMessage = data
+    ? `[${timestamp}] ${message}: ${JSON.stringify(data, null, 2)}\n`
+    : `[${timestamp}] ${message}\n`;
+  fs.appendFileSync(logFile, logMessage);
+}
+
 /**
 * Run a Camoufox browser server as a worker process
 * @param id The Camoufox configuration ID
 */
 export async function runCamoufoxWorker(id: string): Promise<void> {
+  debugLog(id, "Worker starting", { pid: process.pid });
+
  // Get the Camoufox configuration
+  debugLog(id, "Loading Camoufox configuration");
  const config = getCamoufoxConfig(id);

  if (!config) {
+    debugLog(id, "Configuration not found");
    console.error(
      JSON.stringify({
        error: "Configuration not found",
@@ -22,6 +44,13 @@ export async function runCamoufoxWorker(id: string): Promise<void> {
    process.exit(1);
  }

+  debugLog(id, "Configuration loaded successfully", {
+    profilePath: config.profilePath,
+    hasOptions: !!config.options,
+    hasCustomConfig: !!config.customConfig,
+    hasUrl: !!config.url,
+  });
+
  config.processId = process.pid;
  saveCamoufoxConfig(config);

@@ -37,12 +66,14 @@ export async function runCamoufoxWorker(id: string): Promise<void> {

  // Launch browser in background - this can take time and may fail
  setImmediate(async () => {
+    debugLog(id, "Starting browser launch in background");
    let browser: Browser | null = null;
    let context: BrowserContext | null = null;
    let windowCheckInterval: NodeJS.Timeout | null = null;

    // Graceful shutdown handler with access to browser and server
    const gracefulShutdown = async () => {
+      debugLog(id, "Graceful shutdown initiated");
      try {
        // Clear any intervals first
        if (windowCheckInterval) {
@@ -76,14 +107,19 @@ export async function runCamoufoxWorker(id: string): Promise<void> {
    process.on("unhandledRejection", () => void gracefulShutdown());

    try {
+      debugLog(id, "Preparing launch options");
      // Deep clone to avoid reference sharing and ensure fresh configuration for each instance
      const camoufoxOptions: LaunchOptions = JSON.parse(
        JSON.stringify(config.options || {}),
      );
+      debugLog(id, "Base options cloned", {
+        hasOptions: Object.keys(camoufoxOptions).length,
+      });

      // Add profile path if provided
      if (config.profilePath) {
        camoufoxOptions.user_data_dir = config.profilePath;
+        debugLog(id, "Set user_data_dir", { profilePath: config.profilePath });
      }

      // Ensure block options are properly set
@@ -111,91 +147,162 @@ export async function runCamoufoxWorker(id: string): Promise<void> {
        showcursor: false,
        ...(camoufoxOptions.config || {}),
      };
+      debugLog(id, "Set default options", {
+        i_know_what_im_doing: true,
+        disableTheming: true,
+        showcursor: false,
+      });

      // Generate fresh options for this specific instance
+      debugLog(id, "Generating launch options via launchOptions function");
      const generatedOptions = await launchOptions(camoufoxOptions);
+      debugLog(id, "Launch options generated successfully", {
+        hasEnv: !!generatedOptions.env,
+        argsLength: generatedOptions.args?.length || 0,
+      });

      // Start with process environment to ensure proper inheritance
      let finalEnv = { ...process.env };
+      debugLog(id, "Base environment variables set", {
+        envVarCount: Object.keys(finalEnv).length,
+      });

      // Add generated options environment variables
      if (generatedOptions.env) {
        finalEnv = { ...finalEnv, ...generatedOptions.env };
+        debugLog(id, "Added generated environment variables", {
+          generatedEnvCount: Object.keys(generatedOptions.env).length,
+          totalEnvCount: Object.keys(finalEnv).length,
+        });
      }

      // If we have a custom config from Rust, use it directly as environment variables
      if (config.customConfig) {
+        debugLog(id, "Processing custom config", {
+          customConfigLength: config.customConfig.length,
+        });
        try {
          // Parse the custom config JSON string
          const customConfigObj = JSON.parse(config.customConfig);
+          debugLog(id, "Custom config parsed successfully", {
+            customConfigKeys: Object.keys(customConfigObj),
+          });

          // Ensure default config values are preserved even with custom config
          const mergedConfig = {
            ...customConfigObj,
            disableTheming: true,
            showcursor: false,
+            // allowAddonNewTab will be handled from the fingerprint config if present
          };

          // Convert merged config to environment variables using getEnvVars
          const customEnvVars = getEnvVars(mergedConfig);
+          debugLog(id, "Custom config converted to environment variables", {
+            customEnvVarCount: Object.keys(customEnvVars).length,
+          });

          // Merge custom config with generated config (custom takes precedence)
          finalEnv = { ...finalEnv, ...customEnvVars };
+          debugLog(id, "Custom config merged with final environment", {
+            finalEnvCount: Object.keys(finalEnv).length,
+          });
        } catch (error) {
+          debugLog(id, "Failed to parse custom config", {
+            error: error instanceof Error ? error.message : String(error),
+          });
          console.error(
            `Camoufox worker ${id}: Failed to parse custom config, using generated config:`,
            error,
          );
+          await gracefulShutdown();
          return;
        }
+      } else {
+        debugLog(id, "No custom config provided");
      }
      // Prepare profile path for persistent context
      const profilePath = config.profilePath || "";
+      debugLog(id, "Profile path prepared", { profilePath });

      // Launch persistent context with the final configuration
      const finalOptions: any = {
        ...generatedOptions,
        env: finalEnv,
      };
+      debugLog(id, "Final launch options prepared", {
+        hasExecutablePath: !!finalOptions.executablePath,
+        hasProxy: !!camoufoxOptions.proxy,
+        profilePath,
+      });
+
+      // If a custom executable path was provided, ensure Playwright uses it
+      if (
+        (camoufoxOptions as any).executable_path &&
+        typeof (camoufoxOptions as any).executable_path === "string"
+      ) {
+        finalOptions.executablePath = (camoufoxOptions as any)
+          .executable_path as string;
+        debugLog(id, "Custom executable path set", {
+          executablePath: finalOptions.executablePath,
+        });
+      }

      // Only add proxy if it exists and is valid
      if (camoufoxOptions.proxy) {
+        debugLog(id, "Processing proxy configuration", {
+          proxyString: camoufoxOptions.proxy,
+        });
        try {
          finalOptions.proxy = parseProxyString(camoufoxOptions.proxy);
+          debugLog(id, "Proxy parsed successfully");
        } catch (error) {
+          debugLog(id, "Failed to parse proxy", {
+            error: error instanceof Error ? error.message : String(error),
+          });
          console.error({
            message: "Failed to parse proxy, launching without proxy",
            error,
          });
+          await gracefulShutdown();
          return;
        }
      }

      // Use launchPersistentContext instead of launchServer
+      debugLog(id, "Launching persistent context", { profilePath });
      context = await firefox.launchPersistentContext(
        profilePath,
        finalOptions,
      );
+      debugLog(id, "Persistent context launched successfully");

      // Get the browser instance from context
      browser = context.browser();
+      debugLog(id, "Browser instance obtained from context", {
+        browserConnected: browser?.isConnected(),
+      });

      // Handle browser disconnection for proper cleanup
      if (browser) {
        browser.on("disconnected", () => void gracefulShutdown());
+        debugLog(id, "Browser disconnect handler registered");
      }

      // Handle context close for proper cleanup
      context.on("close", () => void gracefulShutdown());
+      debugLog(id, "Context close handler registered");

      saveCamoufoxConfig(config);

      // Monitor for window closure
      const startWindowMonitoring = () => {
+        debugLog(id, "Starting window monitoring");
        windowCheckInterval = setInterval(async () => {
          try {
            // Check if context is still active
            if (!context?.pages || context.pages().length === 0) {
+              debugLog(id, "No pages found in context, shutting down");
              if (windowCheckInterval) {
                clearInterval(windowCheckInterval);
              }
@@ -205,6 +312,7 @@ export async function runCamoufoxWorker(id: string): Promise<void> {

            // Check if browser is still connected (if available)
            if (browser && !browser.isConnected()) {
+              debugLog(id, "Browser disconnected, shutting down");
              if (windowCheckInterval) {
                clearInterval(windowCheckInterval);
              }
@@ -215,12 +323,16 @@ export async function runCamoufoxWorker(id: string): Promise<void> {
            // Check pages in the persistent context
            const pages = context.pages();
            if (pages.length === 0) {
+              debugLog(id, "No pages in context, shutting down");
              if (windowCheckInterval) {
                clearInterval(windowCheckInterval);
              }
              await gracefulShutdown();
            }
-          } catch {
+          } catch (error) {
+            debugLog(id, "Error in window monitoring", {
+              error: error instanceof Error ? error.message : String(error),
+            });
            // If we can't check windows, assume browser is closing
            if (windowCheckInterval) {
              clearInterval(windowCheckInterval);
@@ -232,19 +344,29 @@ export async function runCamoufoxWorker(id: string): Promise<void> {

      // Handle URL opening if provided
      if (config.url) {
+        debugLog(id, "Opening URL in browser", { url: config.url });
        try {
          const pages = await context.pages();
          if (pages.length) {
            const page = pages[0];
+            debugLog(id, "Navigating to URL");
            await page.goto(config.url, {
              waitUntil: "domcontentloaded",
              timeout: 30000,
            });
+            debugLog(id, "URL opened successfully");

            // Start monitoring after page is created
            startWindowMonitoring();
+          } else {
+            debugLog(id, "No pages available to open URL");
+            startWindowMonitoring();
          }
        } catch (urlError) {
+          debugLog(id, "Failed to open URL", {
+            error:
+              urlError instanceof Error ? urlError.message : String(urlError),
+          });
          console.error({
            message: "Failed to open URL",
            error: urlError,
@@ -254,15 +376,18 @@ export async function runCamoufoxWorker(id: string): Promise<void> {
          startWindowMonitoring();
        }
      } else {
+        debugLog(id, "No URL provided, starting monitoring");
        // Start monitoring after page is created
        startWindowMonitoring();
      }

      // Monitor browser/context connection
+      debugLog(id, "Starting keep-alive monitoring");
      const keepAlive = setInterval(async () => {
        try {
          // Check if context is still active
          if (!context?.pages) {
+            debugLog(id, "Context not active in keep-alive, shutting down");
            clearInterval(keepAlive);
            await gracefulShutdown();
            return;
@@ -270,11 +395,15 @@ export async function runCamoufoxWorker(id: string): Promise<void> {

          // Check browser connection if available
          if (browser && !browser.isConnected()) {
+            debugLog(id, "Browser not connected in keep-alive, shutting down");
            clearInterval(keepAlive);
            await gracefulShutdown();
            return;
          }
        } catch (error) {
+          debugLog(id, "Error in keep-alive check", {
+            error: error instanceof Error ? error.message : String(error),
+          });
          console.error({
            message: "Error in keepAlive check",
            error,
@@ -284,6 +413,9 @@ export async function runCamoufoxWorker(id: string): Promise<void> {
        }
      }, 2000);
    } catch (error) {
+      debugLog(id, "Failed to launch Camoufox", {
+        error: error instanceof Error ? error.message : String(error),
+      });
      console.error({
        message: "Failed to launch Camoufox",
        error,
@@ -57,10 +57,8 @@ program

        // Build upstream URL from individual components if provided
        if (options.host && options.proxyPort && options.type) {
-          const protocol =
-            options.type === "socks4" || options.type === "socks5"
-              ? options.type
-              : "http";
+          // Preserve provided scheme (http, https, socks4, socks5)
+          const protocol = String(options.type).toLowerCase();
          const auth =
            options.username && options.password
              ? `${encodeURIComponent(options.username)}:${encodeURIComponent(
@@ -165,6 +163,8 @@ program
  .option("--proxy <proxy>", "proxy URL for config generation")
  .option("--max-width <width>", "maximum screen width", parseInt)
  .option("--max-height <height>", "maximum screen height", parseInt)
+  .option("--min-width <width>", "minimum screen width", parseInt)
+  .option("--min-height <height>", "minimum screen height", parseInt)
  .option("--geoip", "enable geoip")
  .option("--block-images", "block images")
  .option("--block-webrtc", "block WebRTC")
@@ -241,6 +241,16 @@ program
              ",",
            ) as "UBO"[];

+          // Executable path: forward through to camoufox-js and ultimately Playwright
+          if (
+            options.executablePath &&
+            typeof options.executablePath === "string"
+          ) {
+            // camoufox-js uses snake_case for this option
+            (camoufoxOptions as any).executable_path =
+              options.executablePath as string;
+          }
+
          // Screen and window
          const screen: {
            minWidth?: number;
@@ -384,6 +394,14 @@ program
              typeof options.maxHeight === "number"
                ? options.maxHeight
                : undefined,
+            minWidth:
+              typeof options.minWidth === "number"
+                ? options.minWidth
+                : undefined,
+            minHeight:
+              typeof options.minHeight === "number"
+                ? options.minHeight
+                : undefined,
            geoip: Boolean(options.geoip),
            blockImages:
              typeof options.blockImages === "boolean"
@@ -2,7 +2,7 @@
  "name": "donutbrowser",
  "private": true,
  "license": "AGPL-3.0",
-  "version": "0.8.2",
+  "version": "0.12.3",
  "type": "module",
  "scripts": {
    "dev": "next dev --turbopack",
@@ -21,58 +21,62 @@
    "format": "pnpm format:js && pnpm format:rust",
    "cargo": "cd src-tauri && cargo",
    "unused-exports:js": "ts-unused-exports tsconfig.json",
-    "check-unused-commands": "cd src-tauri && cargo run --bin check_unused_commands"
+    "check-unused-commands": "cd src-tauri && cargo test test_no_unused_tauri_commands"
  },
  "dependencies": {
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-radio-group": "^1.3.7",
-    "@radix-ui/react-scroll-area": "^1.2.9",
-    "@radix-ui/react-select": "^2.2.5",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-tooltip": "^1.2.7",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
    "@tanstack/react-table": "^8.21.3",
-    "@tauri-apps/api": "^2.7.0",
-    "@tauri-apps/plugin-deep-link": "^2.4.1",
-    "@tauri-apps/plugin-dialog": "^2.3.2",
-    "@tauri-apps/plugin-fs": "~2.4.1",
-    "@tauri-apps/plugin-opener": "^2.4.0",
-    "ahooks": "^3.9.0",
+    "@tauri-apps/api": "^2.9.0",
+    "@tauri-apps/plugin-deep-link": "^2.4.5",
+    "@tauri-apps/plugin-dialog": "^2.4.2",
+    "@tauri-apps/plugin-fs": "~2.4.4",
+    "@tauri-apps/plugin-opener": "^2.5.2",
+    "ahooks": "^3.9.6",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.1.1",
-    "next": "^15.4.6",
+    "color": "^5.0.2",
+    "motion": "^12.23.24",
+    "next": "^15.5.6",
    "next-themes": "^0.4.6",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
    "react-icons": "^5.5.0",
    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.3.1",
+    "tailwind-merge": "^3.4.0",
    "tauri-plugin-macos-permissions-api": "^2.3.0"
  },
  "devDependencies": {
-    "@biomejs/biome": "2.1.3",
-    "@tailwindcss/postcss": "^4.1.11",
-    "@tauri-apps/cli": "^2.7.1",
-    "@types/node": "^24.2.0",
-    "@types/react": "^19.1.9",
-    "@types/react-dom": "^19.1.7",
-    "@vitejs/plugin-react": "^4.7.0",
+    "@biomejs/biome": "2.2.3",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@tauri-apps/cli": "^2.9.4",
+    "@types/color": "^4.2.0",
+    "@types/node": "^24.10.0",
+    "@types/react": "^19.2.3",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
    "husky": "^9.1.7",
-    "lint-staged": "^16.1.4",
-    "tailwindcss": "^4.1.11",
+    "lint-staged": "^16.2.6",
+    "tailwindcss": "^4.1.17",
    "ts-unused-exports": "^11.0.1",
-    "tw-animate-css": "^1.3.6",
-    "typescript": "~5.9.2"
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.9.3"
  },
-  "packageManager": "pnpm@10.13.1",
+  "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748",
  "lint-staged": {
-    "**/*.{js,jsx,ts,tsx,json,css,md}": [
+    "**/*.{js,jsx,ts,tsx,json,css}": [
      "biome check --fix"
    ],
    "src-tauri/**/*.rs": [
@@ -1,8 +1,10 @@
 packages:
  - nodecar
+
 onlyBuiltDependencies:
  - '@biomejs/biome'
  - '@tailwindcss/oxide'
+  - better-sqlite3
  - esbuild
  - sharp
  - sqlite3
@@ -1,6 +1,6 @@
 [package]
 name = "donutbrowser"
-version = "0.8.2"
+version = "0.12.3"
 description = "Simple Yet Powerful Anti-Detect Browser"
 authors = ["zhom@github"]
 edition = "2021"
@@ -14,6 +14,7 @@ default-run = "donutbrowser"
 # This seems to be only an issue on Windows, see https://github.com/rust-lang/cargo/issues/8519
 name = "donutbrowser"
 crate-type = ["staticlib", "cdylib", "rlib"]
+doctest = false

 [build-dependencies]
 tauri-build = { version = "2", features = [] }
@@ -28,25 +29,36 @@ tauri-plugin-shell = "2"
 tauri-plugin-deep-link = "2"
 tauri-plugin-dialog = "2"
 tauri-plugin-macos-permissions = "2"
+
+
 directories = "6"
 reqwest = { version = "0.12", features = ["json", "stream"] }
 tokio = { version = "1", features = ["full", "sync"] }
-sysinfo = "0.36"
+sysinfo = "0.37"
 lazy_static = "1.4"
 base64 = "0.22"
 async-trait = "0.1"
 futures-util = "0.3"
+zip = "5"
+tar = "0"
+bzip2 = "0"
+flate2 = "1"
+lzma-rs = "0"
+msi-extract = "0"

-uuid = { version = "1.0", features = ["v4", "serde"] }
+uuid = { version = "1.18", features = ["v4", "serde"] }
 url = "2.5"
 chrono = { version = "0.4", features = ["serde"] }
+axum = "0.8.4"
+tower = "0.5"
+tower-http = { version = "0.6", features = ["cors"] }
+rand = "0.9.2"
+argon2 = "0.5"
+aes-gcm = "0.10"

 [target."cfg(any(target_os = \"macos\", windows, target_os = \"linux\"))".dependencies]
 tauri-plugin-single-instance = { version = "2", features = ["deep-link"] }

-[target.'cfg(windows)'.dependencies]
-zip = "4"
-
 [target.'cfg(target_os = "macos")'.dependencies]
 core-foundation = "0.10"
 objc2 = "0.6.1"
@@ -54,7 +66,7 @@ objc2-app-kit = { version = "0.3.1", features = ["NSWindow"] }

 [target.'cfg(target_os = "windows")'.dependencies]
 winreg = "0.55"
-windows = { version = "0.61", features = [
+windows = { version = "0.62", features = [
  "Win32_Foundation",
  "Win32_System_ProcessStatus",
  "Win32_System_Threading",
@@ -67,9 +79,9 @@ windows = { version = "0.61", features = [
 ] }

 [dev-dependencies]
-tempfile = "3.13.0"
+tempfile = "3.21.0"
 wiremock = "0.6"
-hyper = { version = "1.0", features = ["full"] }
+hyper = { version = "1.7", features = ["full"] }
 hyper-util = { version = "0.1", features = ["full"] }
 http-body-util = "0.1"
 tower = "0.5"
@@ -3,15 +3,15 @@
 <plist version="1.0">
 <dict>
 	<key>NSCameraUsageDescription</key>
-	<string>Donut Browser needs camera access to enable camera functionality in web browsers. Each website will still ask for your permission individually.</string>
+	<string>Donut needs camera access to enable camera functionality in web browsers. Each website will still ask for your permission individually.</string>
 	<key>NSMicrophoneUsageDescription</key>
-	<string>Donut Browser needs microphone access to enable microphone functionality in web browsers. Each website will still ask for your permission individually.</string>
+	<string>Donut needs microphone access to enable microphone functionality in web browsers. Each website will still ask for your permission individually.</string>
 	<key>NSLocalNetworkUsageDescription</key>
-	<string>Donut Browser has proxy functionality that requires local network access. You can deny this functionality if you don't plan on setting proxies for browser profiles.</string>
+	<string>Donut has proxy functionality that requires local network access. You can deny this functionality if you don't plan on setting proxies for browser profiles.</string>
 	<key>CFBundleDisplayName</key>
-	<string>Donut Browser</string>
+	<string>Donut</string>
 	<key>CFBundleName</key>
-	<string>Donut Browser</string>
+	<string>Donut</string>
 	<key>CFBundleIdentifier</key>
 	<string>com.donutbrowser</string>
    <key>CFBundleURLName</key>
@@ -25,7 +25,7 @@
 	<key>LSApplicationCategoryType</key>
 	<string>public.app-category.productivity</string>
 	<key>NSHumanReadableCopyright</key>
-	<string>Copyright © 2025 Donut Browser</string>
+	<string>Copyright © 2025 Donut</string>
 	<key>CFBundleDocumentTypes</key>
 	<array>
 		<dict>
@@ -26,5 +26,13 @@ fn main() {
    println!("cargo:rustc-env=BUILD_VERSION=dev-{version}");
  }

+  // Inject vault password at build time
+  if let Ok(vault_password) = std::env::var("DONUT_BROWSER_VAULT_PASSWORD") {
+    println!("cargo:rustc-env=DONUT_BROWSER_VAULT_PASSWORD={vault_password}");
+  } else {
+    // Use default password if environment variable is not set
+    println!("cargo:rustc-env=DONUT_BROWSER_VAULT_PASSWORD=donutbrowser-api-vault-password");
+  }
+
  tauri_build::build()
 }
@@ -1,13 +1,16 @@
 [Desktop Entry]
 Version=1.0
 Type=Application
-Name=Donut Browser
+Name=Donut
+Name[en]=Donut
+GenericName=Web Browser
+X-GNOME-FullName=Donut
 Comment=Simple Yet Powerful Anti-Detect Browser
 Exec=donutbrowser %u
 Icon=donutbrowser
 StartupNotify=true
 NoDisplay=false
-Categories=Network;WebBrowser;Productivity;
+Categories=Network;WebBrowser;
 MimeType=x-scheme-handler/http;x-scheme-handler/https;text/html;application/xhtml+xml;
 StartupWMClass=donutbrowser
 Keywords=browser;web;internet;productivity;
@@ -28,5 +28,11 @@
    <true/>
    <key>com.apple.security.cs.disable-library-validation</key>
    <true/>
+    <key>com.apple.security.automation.apple-events</key>
+    <true/>
+    <key>com.apple.security.device.usb</key>
+    <true/>
+    <key>com.apple.security.inherit</key>
+    <true/>
 </dict>
 </plist> 
@@ -34,6 +34,12 @@ pub enum PreReleaseKind {
 impl VersionComponent {
  pub fn parse(version: &str) -> Self {
    let version = version.trim();
+    // Normalize common tag prefixes like 'v1.2.3' -> '1.2.3'
+    let version = if version.starts_with('v') || version.starts_with('V') {
+      &version[1..]
+    } else {
+      version
+    };

    // Handle special case for Zen Browser twilight releases
    if version.to_lowercase() == "twilight" {
@@ -215,11 +221,28 @@ pub fn sort_versions(versions: &mut [String]) {
  });
 }

+// Helper function to compare two versions
+pub fn compare_versions(version1: &str, version2: &str) -> std::cmp::Ordering {
+  let version_a = VersionComponent::parse(version1);
+  let version_b = VersionComponent::parse(version2);
+  version_a.cmp(&version_b)
+}
+
+pub fn is_version_newer(version1: &str, version2: &str) -> bool {
+  // Use the proper VersionComponent comparison from api_client.rs
+  let version_a = VersionComponent::parse(version1);
+  let version_b = VersionComponent::parse(version2);
+  version_a > version_b
+}
+
 // Helper function to sort GitHub releases
 pub fn sort_github_releases(releases: &mut [GithubRelease]) {
  releases.sort_by(|a, b| {
-    let version_a = VersionComponent::parse(&a.tag_name);
-    let version_b = VersionComponent::parse(&b.tag_name);
+    // Normalize tags like "v1.81.9" -> "1.81.9" for correct ordering
+    let tag_a = a.tag_name.trim_start_matches('v');
+    let tag_b = b.tag_name.trim_start_matches('v');
+    let version_a = VersionComponent::parse(tag_a);
+    let version_b = VersionComponent::parse(tag_b);
    version_b.cmp(&version_a) // Descending order (newest first)
  });
 }
@@ -242,14 +265,29 @@ pub fn is_browser_version_nightly(
      version.to_lowercase() == "twilight"
    }
    "brave" => {
-      // For Brave Browser, only releases titled "Release" are stable, everything else is nightly
+      // For Brave Browser, only releases whose name starts with "Release" (case-insensitive) are stable.
      if let Some(name) = release_name {
-        !name.starts_with("Release")
-      } else {
-        true
+        let normalized = name.trim_start().to_ascii_lowercase();
+        return !normalized.starts_with("release");
      }
+
+      // Fallback: try cached GitHub releases
+      if let Some(releases) = ApiClient::instance().get_cached_github_releases("brave") {
+        if let Some(found) = releases.iter().find(|r| r.tag_name == version) {
+          let normalized = found.name.trim_start().to_ascii_lowercase();
+          return !normalized.starts_with("release");
+        }
+      }
+
+      // Last resort: when no name available, treat as nightly (non-Release)
+      true
    }
-    "firefox" | "firefox-developer" => {
+    "firefox-developer" => {
+      // For Firefox Developer Edition, always treat as nightly/prerelease
+      // This ensures consistent behavior regardless of cache state or API response parsing
+      true
+    }
+    "firefox" => {
      // For Firefox, use the category from the API response to determine stability
      // This will be handled in the API parsing, so this fallback is for cached versions
      is_nightly_version(version)
@@ -295,7 +333,7 @@ pub struct BrowserRelease {

 #[derive(Debug, Serialize, Deserialize)]
 struct CachedVersionData {
-  versions: Vec<String>,
+  releases: Vec<BrowserRelease>,
  timestamp: u64,
 }

@@ -315,9 +353,14 @@ pub struct ApiClient {
 }

 impl ApiClient {
-  fn new() -> Self {
+  pub fn new() -> Self {
+    let client = Client::builder()
+      .timeout(std::time::Duration::from_secs(30))
+      .build()
+      .unwrap_or_else(|_| Client::new());
+
    Self {
-      client: Client::new(),
+      client,
      firefox_api_base: "https://product-details.mozilla.org/1.0".to_string(),
      firefox_dev_api_base: "https://product-details.mozilla.org/1.0".to_string(),
      github_api_base: "https://api.github.com".to_string(),
@@ -327,6 +370,65 @@ impl ApiClient {
    }
  }

+  async fn fetch_github_releases_multiple_pages(
+    &self,
+    base_releases_url: &str,
+  ) -> Result<Vec<GithubRelease>, Box<dyn std::error::Error + Send + Sync>> {
+    let mut all_releases: Vec<GithubRelease> = Vec::new();
+
+    // For now, only fetch 1 page
+    for page in 1..=1 {
+      let url = format!("{base_releases_url}?per_page=100&page={page}");
+      let response = self
+        .client
+        .get(&url)
+        .header(
+          "User-Agent",
+          "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36",
+        )
+        .send()
+        .await?;
+
+      if !response.status().is_success() {
+        // If the first page fails, propagate error; otherwise stop pagination
+        if page == 1 {
+          return Err(
+            format!(
+              "GitHub API returned status for page {}: {}",
+              page,
+              response.status()
+            )
+            .into(),
+          );
+        } else {
+          break;
+        }
+      }
+
+      let text = response.text().await?;
+      let mut page_releases: Vec<GithubRelease> = serde_json::from_str(&text).map_err(|e| {
+        eprintln!("Failed to parse GitHub API response (page {page}): {e}");
+        eprintln!(
+          "Response text (first 500 chars): {}",
+          if text.len() > 500 {
+            &text[..500]
+          } else {
+            &text
+          }
+        );
+        format!("Failed to parse GitHub API response: {e}")
+      })?;
+
+      if page_releases.is_empty() {
+        break;
+      }
+
+      all_releases.append(&mut page_releases);
+    }
+
+    Ok(all_releases)
+  }
+
  pub fn instance() -> &'static ApiClient {
    &API_CLIENT
  }
@@ -374,7 +476,7 @@ impl ApiClient {
    current_time - timestamp < cache_duration
  }

-  pub fn load_cached_versions(&self, browser: &str) -> Option<Vec<String>> {
+  pub fn load_cached_versions(&self, browser: &str) -> Option<Vec<BrowserRelease>> {
    let cache_dir = Self::get_cache_dir().ok()?;
    let cache_file = cache_dir.join(format!("{browser}_versions.json"));

@@ -383,11 +485,27 @@ impl ApiClient {
    }

    let content = fs::read_to_string(&cache_file).ok()?;
-    let cached_data: CachedVersionData = serde_json::from_str(&content).ok()?;
+    if let Ok(cached) = serde_json::from_str::<CachedVersionData>(&content) {
+      // Always return cached releases regardless of age - they're always valid
+      println!("Using cached versions for {browser}");
+      return Some(cached.releases);
+    }

-    // Always return cached versions regardless of age - they're always valid
-    println!("Using cached versions for {browser}");
-    Some(cached_data.versions)
+    // Backward compatibility: legacy caches stored just an array of version strings
+    if let Ok(legacy_versions) = serde_json::from_str::<Vec<String>>(&content) {
+      println!("Using legacy cached versions for {browser}; upgrading in-memory");
+      let releases: Vec<BrowserRelease> = legacy_versions
+        .into_iter()
+        .map(|version| BrowserRelease {
+          is_prerelease: is_browser_version_nightly(browser, &version, None),
+          version,
+          date: "".to_string(),
+        })
+        .collect();
+      return Some(releases);
+    }
+
+    None
  }

  pub fn is_cache_expired(&self, browser: &str) -> bool {
@@ -418,19 +536,19 @@ impl ApiClient {
  pub fn save_cached_versions(
    &self,
    browser: &str,
-    versions: &[String],
+    releases: &[BrowserRelease],
  ) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
    let cache_dir = Self::get_cache_dir()?;
    let cache_file = cache_dir.join(format!("{browser}_versions.json"));

    let cached_data = CachedVersionData {
-      versions: versions.to_vec(),
+      releases: releases.to_vec(),
      timestamp: Self::get_current_timestamp(),
    };

    let content = serde_json::to_string_pretty(&cached_data)?;
    fs::write(&cache_file, content)?;
-    println!("Cached {} versions for {}", versions.len(), browser);
+    println!("Cached {} versions for {}", releases.len(), browser);
    Ok(())
  }

@@ -450,6 +568,11 @@ impl ApiClient {
    Some(cached_data.releases)
  }

+  /// Public accessor for cached GitHub releases (used by other modules for classification)
+  pub fn get_cached_github_releases(&self, browser: &str) -> Option<Vec<GithubRelease>> {
+    self.load_cached_github_releases(browser)
+  }
+
  fn save_cached_github_releases(
    &self,
    browser: &str,
@@ -475,19 +598,8 @@ impl ApiClient {
  ) -> Result<Vec<BrowserRelease>, Box<dyn std::error::Error + Send + Sync>> {
    // Check cache first (unless bypassing)
    if !no_caching {
-      if let Some(cached_versions) = self.load_cached_versions("firefox") {
-        return Ok(
-          cached_versions
-            .into_iter()
-            .map(|version| {
-              BrowserRelease {
-                version: version.clone(),
-                date: "".to_string(), // Cache doesn't store dates
-                is_prerelease: is_browser_version_nightly("firefox", &version, None),
-              }
-            })
-            .collect(),
-        );
+      if let Some(cached_releases) = self.load_cached_versions("firefox") {
+        return Ok(cached_releases);
      }
    }

@@ -533,12 +645,9 @@ impl ApiClient {
      version_b.cmp(&version_a)
    });

-    // Extract versions for caching
-    let versions: Vec<String> = releases.iter().map(|r| r.version.clone()).collect();
-
    // Cache the results (unless bypassing cache)
    if !no_caching {
-      if let Err(e) = self.save_cached_versions("firefox", &versions) {
+      if let Err(e) = self.save_cached_versions("firefox", &releases) {
        eprintln!("Failed to cache Firefox versions: {e}");
      }
    }
@@ -552,19 +661,8 @@ impl ApiClient {
  ) -> Result<Vec<BrowserRelease>, Box<dyn std::error::Error + Send + Sync>> {
    // Check cache first (unless bypassing)
    if !no_caching {
-      if let Some(cached_versions) = self.load_cached_versions("firefox-developer") {
-        return Ok(
-          cached_versions
-            .into_iter()
-            .map(|version| {
-              BrowserRelease {
-                version: version.clone(),
-                date: "".to_string(), // Cache doesn't store dates
-                is_prerelease: is_browser_version_nightly("firefox-developer", &version, None),
-              }
-            })
-            .collect(),
-        );
+      if let Some(cached_releases) = self.load_cached_versions("firefox-developer") {
+        return Ok(cached_releases);
      }
    }

@@ -573,19 +671,19 @@ impl ApiClient {

    let response = self
      .client
-      .get(url)
+      .get(&url)
      .header("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36")
      .send()
      .await?;

    if !response.status().is_success() {
-      return Err(
-        format!(
-          "Failed to fetch Firefox Developer Edition versions: {}",
-          response.status()
-        )
-        .into(),
+      let error_msg = format!(
+        "Failed to fetch Firefox Developer Edition versions: {} - URL: {}",
+        response.status(),
+        url
      );
+      eprintln!("{error_msg}");
+      return Err(error_msg.into());
    }

    let firefox_response: FirefoxApiResponse = response.json().await?;
@@ -616,12 +714,9 @@ impl ApiClient {
      version_b.cmp(&version_a)
    });

-    // Extract versions for caching
-    let versions: Vec<String> = releases.iter().map(|r| r.version.clone()).collect();
-
    // Cache the results (unless bypassing cache)
    if !no_caching {
-      if let Err(e) = self.save_cached_versions("firefox-developer", &versions) {
+      if let Err(e) = self.save_cached_versions("firefox-developer", &releases) {
        eprintln!("Failed to cache Firefox Developer versions: {e}");
      }
    }
@@ -640,43 +735,12 @@ impl ApiClient {
      }
    }

-    println!("Fetching Mullvad releases from GitHub API...");
-    let url = format!(
-      "{}/repos/mullvad/mullvad-browser/releases?per_page=100",
+    println!("Fetching Mullvad releases from GitHub API");
+    let base_url = format!(
+      "{}/repos/mullvad/mullvad-browser/releases",
      self.github_api_base
    );
-
-    let response = self
-      .client
-      .get(url)
-      .header("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36")
-      .send()
-      .await?;
-
-    if !response.status().is_success() {
-      return Err(format!("GitHub API returned status: {}", response.status()).into());
-    }
-
-    // Get the response text first for better error reporting
-    let response_text = response.text().await?;
-
-    // Try to parse the JSON with better error handling
-    let releases: Vec<GithubRelease> = match serde_json::from_str(&response_text) {
-      Ok(releases) => releases,
-      Err(e) => {
-        eprintln!("Failed to parse GitHub API response for Mullvad releases:");
-        eprintln!("Error: {e}");
-        eprintln!(
-          "Response text (first 500 chars): {}",
-          if response_text.len() > 500 {
-            &response_text[..500]
-          } else {
-            &response_text
-          }
-        );
-        return Err(format!("Failed to parse GitHub API response: {e}").into());
-      }
-    };
+    let releases = self.fetch_github_releases_multiple_pages(&base_url).await?;

    let mut releases: Vec<GithubRelease> = releases
      .into_iter()
@@ -710,43 +774,13 @@ impl ApiClient {
      }
    }

-    println!("Fetching Zen releases from GitHub API...");
-    let url = format!(
-      "{}/repos/zen-browser/desktop/releases?per_page=100",
+    println!("Fetching Zen releases from GitHub API");
+    let base_url = format!(
+      "{}/repos/zen-browser/desktop/releases",
      self.github_api_base
    );
-
-    let response = self
-      .client
-      .get(url)
-      .header("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36")
-      .send()
-      .await?;
-
-    if !response.status().is_success() {
-      return Err(format!("GitHub API returned status: {}", response.status()).into());
-    }
-
-    // Get the response text first for better error reporting
-    let response_text = response.text().await?;
-
-    // Try to parse the JSON with better error handling
-    let mut releases: Vec<GithubRelease> = match serde_json::from_str(&response_text) {
-      Ok(releases) => releases,
-      Err(e) => {
-        eprintln!("Failed to parse GitHub API response for Zen releases:");
-        eprintln!("Error: {e}");
-        eprintln!(
-          "Response text (first 500 chars): {}",
-          if response_text.len() > 500 {
-            &response_text[..500]
-          } else {
-            &response_text
-          }
-        );
-        return Err(format!("Failed to parse GitHub API response: {e}").into());
-      }
-    };
+    let mut releases: Vec<GithubRelease> =
+      self.fetch_github_releases_multiple_pages(&base_url).await?;

    // Check for twilight updates and mark alpha releases
    for release in &mut releases {
@@ -791,55 +825,25 @@ impl ApiClient {
      }
    }

-    println!("Fetching Brave releases from GitHub API...");
-    let url = format!(
-      "{}/repos/brave/brave-browser/releases?per_page=100",
+    println!("Fetching Brave releases from GitHub API");
+    let base_url = format!(
+      "{}/repos/brave/brave-browser/releases",
      self.github_api_base
    );
-
-    let response = self
-      .client
-      .get(url)
-      .header("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36")
-      .send()
-      .await?;
-
-    if !response.status().is_success() {
-      return Err(format!("GitHub API returned status: {}", response.status()).into());
-    }
-
-    // Get the response text first for better error reporting
-    let response_text = response.text().await?;
-
-    // Try to parse the JSON with better error handling
-    let releases: Vec<GithubRelease> = match serde_json::from_str(&response_text) {
-      Ok(releases) => releases,
-      Err(e) => {
-        eprintln!("Failed to parse GitHub API response for Brave releases:");
-        eprintln!("Error: {e}");
-        eprintln!(
-          "Response text (first 500 chars): {}",
-          if response_text.len() > 500 {
-            &response_text[..500]
-          } else {
-            &response_text
-          }
-        );
-        return Err(format!("Failed to parse GitHub API response: {e}").into());
-      }
-    };
+    let releases: Vec<GithubRelease> = self.fetch_github_releases_multiple_pages(&base_url).await?;

    // Get platform info to filter appropriate releases
-    let (os, arch) = Self::get_platform_info();
+    let (os, _) = Self::get_platform_info();

    // Filter releases that have assets compatible with the current platform
    let mut filtered_releases: Vec<GithubRelease> = releases
      .into_iter()
      .filter_map(|mut release| {
        // Check if this release has compatible assets for the current platform
-        let has_compatible_asset = Self::has_compatible_brave_asset(&release.assets, &os, &arch);
+        let has_compatible_asset = Self::has_compatible_brave_asset(&release.assets, &os);

        if has_compatible_asset {
+          println!("release.name: {:?}", release.name);
          // Use the centralized nightly detection function
          release.is_nightly =
            is_browser_version_nightly("brave", &release.tag_name, Some(&release.name));
@@ -853,11 +857,8 @@ impl ApiClient {
    // Sort releases using the new version sorting system
    sort_github_releases(&mut filtered_releases);

-    // Cache the results (unless bypassing cache)
-    if !no_caching {
-      if let Err(e) = self.save_cached_github_releases("brave", &filtered_releases) {
-        eprintln!("Failed to cache Brave releases: {e}");
-      }
+    if let Err(e) = self.save_cached_github_releases("brave", &filtered_releases) {
+      eprintln!("Failed to cache Brave releases: {e}");
    }

    Ok(filtered_releases)
@@ -889,11 +890,7 @@ impl ApiClient {
    })
  }

-  fn has_compatible_brave_asset(
-    assets: &[crate::browser::GithubAsset],
-    os: &str,
-    arch: &str,
-  ) -> bool {
+  fn has_compatible_brave_asset(assets: &[crate::browser::GithubAsset], os: &str) -> bool {
    match os {
      "windows" => {
        // For Windows, look for standalone setup EXE (not the auto-updater one)
@@ -910,12 +907,9 @@ impl ApiClient {
        }) || assets.iter().any(|asset| asset.name.ends_with(".dmg"))
      }
      "linux" => {
-        // For Linux, be strict about architecture matching - only allow assets that explicitly match the current architecture
-        let arch_pattern = if arch == "arm64" { "arm64" } else { "amd64" };
-
        if assets.iter().any(|asset| {
          let name = asset.name.to_lowercase();
-          name.contains("linux") && name.contains(arch_pattern) && name.ends_with(".zip")
+          name.contains("lin")
        }) {
          return true;
        }
@@ -979,19 +973,8 @@ impl ApiClient {
  ) -> Result<Vec<BrowserRelease>, Box<dyn std::error::Error + Send + Sync>> {
    // Check cache first (unless bypassing)
    if !no_caching {
-      if let Some(cached_versions) = self.load_cached_versions("chromium") {
-        return Ok(
-          cached_versions
-            .into_iter()
-            .map(|version| {
-              BrowserRelease {
-                version: version.clone(),
-                date: "".to_string(), // Cache doesn't store dates
-                is_prerelease: false, // Chromium versions are generally stable builds
-              }
-            })
-            .collect(),
-        );
+      if let Some(cached_releases) = self.load_cached_versions("chromium") {
+        return Ok(cached_releases);
      }
    }

@@ -1010,23 +993,24 @@ impl ApiClient {
      }
    }

+    // Convert to BrowserRelease objects
+    let releases: Vec<BrowserRelease> = versions
+      .into_iter()
+      .map(|version| BrowserRelease {
+        version: version.clone(),
+        date: "".to_string(),
+        is_prerelease: false,
+      })
+      .collect();
+
    // Cache the results (unless bypassing cache)
    if !no_caching {
-      if let Err(e) = self.save_cached_versions("chromium", &versions) {
+      if let Err(e) = self.save_cached_versions("chromium", &releases) {
        eprintln!("Failed to cache Chromium versions: {e}");
      }
    }

-    Ok(
-      versions
-        .into_iter()
-        .map(|version| BrowserRelease {
-          version: version.clone(),
-          date: "".to_string(),
-          is_prerelease: false,
-        })
-        .collect(),
-    )
+    Ok(releases)
  }

  pub async fn fetch_camoufox_releases_with_caching(
@@ -1044,43 +1028,9 @@ impl ApiClient {
      }
    }

-    println!("Fetching Camoufox releases from GitHub API...");
-    let url = format!(
-      "{}/repos/daijro/camoufox/releases?per_page=100",
-      self.github_api_base
-    );
-
-    let response = self
-      .client
-      .get(url)
-      .header("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36")
-      .send()
-      .await?;
-
-    if !response.status().is_success() {
-      return Err(format!("GitHub API returned status: {}", response.status()).into());
-    }
-
-    // Get the response text first for better error reporting
-    let response_text = response.text().await?;
-
-    // Try to parse the JSON with better error handling
-    let releases: Vec<GithubRelease> = match serde_json::from_str(&response_text) {
-      Ok(releases) => releases,
-      Err(e) => {
-        eprintln!("Failed to parse GitHub API response for Camoufox releases:");
-        eprintln!("Error: {e}");
-        eprintln!(
-          "Response text (first 500 chars): {}",
-          if response_text.len() > 500 {
-            &response_text[..500]
-          } else {
-            &response_text
-          }
-        );
-        return Err(format!("Failed to parse GitHub API response: {e}").into());
-      }
-    };
+    println!("Fetching Camoufox releases from GitHub API");
+    let base_url = format!("{}/repos/daijro/camoufox/releases", self.github_api_base);
+    let releases: Vec<GithubRelease> = self.fetch_github_releases_multiple_pages(&base_url).await?;

    println!(
      "Fetched {} total Camoufox releases from GitHub",
@@ -1157,19 +1107,8 @@ impl ApiClient {
  ) -> Result<Vec<BrowserRelease>, Box<dyn std::error::Error + Send + Sync>> {
    // Check cache first (unless bypassing)
    if !no_caching {
-      if let Some(cached_versions) = self.load_cached_versions("tor-browser") {
-        return Ok(
-          cached_versions
-            .into_iter()
-            .map(|version| {
-              BrowserRelease {
-                version: version.clone(),
-                date: "".to_string(), // Cache doesn't store dates
-                is_prerelease: is_browser_version_nightly("tor-browser", &version, None),
-              }
-            })
-            .collect(),
-        );
+      if let Some(cached_releases) = self.load_cached_versions("tor-browser") {
+        return Ok(cached_releases);
      }
    }

@@ -1225,25 +1164,24 @@ impl ApiClient {
      tokio::time::sleep(tokio::time::Duration::from_millis(100)).await;
    }

+    // Convert to BrowserRelease objects
+    let releases: Vec<BrowserRelease> = version_strings
+      .into_iter()
+      .map(|version| BrowserRelease {
+        version: version.clone(),
+        date: "".to_string(), // TOR archive doesn't provide structured dates
+        is_prerelease: false, // Assume all archived versions are stable
+      })
+      .collect();
+
    // Cache the results (unless bypassing cache)
    if !no_caching {
-      if let Err(e) = self.save_cached_versions("tor-browser", &version_strings) {
+      if let Err(e) = self.save_cached_versions("tor-browser", &releases) {
        eprintln!("Failed to cache TOR versions: {e}");
      }
    }

-    Ok(
-      version_strings
-        .into_iter()
-        .map(|version| {
-          BrowserRelease {
-            version: version.clone(),
-            date: "".to_string(), // TOR archive doesn't provide structured dates
-            is_prerelease: false, // Assume all archived versions are stable
-          }
-        })
-        .collect(),
-    )
+    Ok(releases)
  }

  async fn check_tor_version_has_macos(
@@ -1678,11 +1616,22 @@ mod tests {
        "name": "Release v1.81.9 (Chromium 137.0.7151.104)",
        "prerelease": false,
        "published_at": "2024-01-15T10:00:00Z",
+        "draft": false,
        "assets": [
          {
            "name": "brave-v1.81.9-universal.dmg",
            "browser_download_url": "https://example.com/brave-1.81.9-universal.dmg",
            "size": 200000000
+          },
+          {
+            "name": "brave-browser-1.81.9-linux-amd64.zip",
+            "browser_download_url": "https://example.com/brave-1.81.9-linux-amd64.zip",
+            "size": 180000000
+          },
+          {
+            "name": "BraveBrowserStandaloneSetup.exe",
+            "browser_download_url": "https://example.com/brave-1.81.9-setup.exe",
+            "size": 150000000
          }
        ]
      }
@@ -1959,6 +1908,84 @@ mod tests {
    assert!(result.is_err());
  }

+  #[tokio::test]
+  async fn test_mullvad_pagination_two_pages() {
+    let server = setup_mock_server().await;
+    let client = create_test_client(&server);
+
+    // Page 1 response with Link: rel="next" header
+    let mock_page1 = r#"[
+      {
+        "tag_name": "100.0",
+        "name": "Mullvad Browser 100.0",
+        "prerelease": false,
+        "published_at": "2024-07-01T00:00:00Z",
+        "assets": [
+          { "name": "mullvad-browser-macos-100.0.dmg", "browser_download_url": "https://example.com/100.0.dmg", "size": 1 }
+        ]
+      }
+    ]"#;
+
+    // Page 2 response
+    let mock_page2 = r#"[
+      {
+        "tag_name": "99.0",
+        "name": "Mullvad Browser 99.0",
+        "prerelease": false,
+        "published_at": "2024-06-01T00:00:00Z",
+        "assets": [
+          { "name": "mullvad-browser-macos-99.0.dmg", "browser_download_url": "https://example.com/99.0.dmg", "size": 1 }
+        ]
+      }
+    ]"#;
+
+    // Mock page 1
+    Mock::given(method("GET"))
+      .and(path("/repos/mullvad/mullvad-browser/releases"))
+      .and(query_param("per_page", "100"))
+      .and(query_param("page", "1"))
+      .respond_with(
+        ResponseTemplate::new(200)
+          .set_body_string(mock_page1)
+          .insert_header("content-type", "application/json")
+          .insert_header(
+            "link",
+            format!(
+              "<{}?per_page=100&page=2>; rel=\"next\", <{}?per_page=100&page=2>; rel=\"last\"",
+              server.uri().to_string() + "/repos/mullvad/mullvad-browser/releases",
+              server.uri().to_string() + "/repos/mullvad/mullvad-browser/releases"
+            ),
+          ),
+      )
+      .mount(&server)
+      .await;
+
+    // Mock page 2
+    Mock::given(method("GET"))
+      .and(path("/repos/mullvad/mullvad-browser/releases"))
+      .and(query_param("per_page", "100"))
+      .and(query_param("page", "2"))
+      .respond_with(
+        ResponseTemplate::new(200)
+          .set_body_string(mock_page2)
+          .insert_header("content-type", "application/json"),
+      )
+      .mount(&server)
+      .await;
+
+    let result = client.fetch_mullvad_releases_with_caching(true).await;
+
+    assert!(result.is_ok());
+    let releases = result.unwrap();
+    // We currently only fetch 1 page intentionally; ensure we at least got page 1
+    assert_eq!(
+      releases.len(),
+      1,
+      "Should fetch only the first page of results"
+    );
+    assert_eq!(releases[0].tag_name, "100.0");
+  }
+
  #[test]
  fn test_camoufox_beta_version_parsing() {
    // Test specific Camoufox beta versions that are causing issues
@@ -0,0 +1,872 @@
+use crate::camoufox_manager::CamoufoxConfig;
+use crate::group_manager::GROUP_MANAGER;
+use crate::profile::manager::ProfileManager;
+use crate::proxy_manager::PROXY_MANAGER;
+use crate::tag_manager::TAG_MANAGER;
+use axum::{
+  extract::{Path, Query, State},
+  http::{HeaderMap, StatusCode},
+  middleware::{self, Next},
+  response::{Json, Response},
+  routing::{delete, get, post, put},
+  Router,
+};
+use lazy_static::lazy_static;
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use std::sync::Arc;
+use tauri::Emitter;
+use tokio::net::TcpListener;
+use tokio::sync::{mpsc, Mutex};
+use tower_http::cors::CorsLayer;
+
+// API Types
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct ApiProfile {
+  pub id: String,
+  pub name: String,
+  pub browser: String,
+  pub version: String,
+  pub proxy_id: Option<String>,
+  pub process_id: Option<u32>,
+  pub last_launch: Option<u64>,
+  pub release_type: String,
+  pub camoufox_config: Option<serde_json::Value>,
+  pub group_id: Option<String>,
+  pub tags: Vec<String>,
+  pub is_running: bool,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct ApiProfilesResponse {
+  pub profiles: Vec<ApiProfile>,
+  pub total: usize,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct ApiProfileResponse {
+  pub profile: ApiProfile,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct CreateProfileRequest {
+  pub name: String,
+  pub browser: String,
+  pub version: String,
+  pub proxy_id: Option<String>,
+  pub release_type: Option<String>,
+  pub camoufox_config: Option<serde_json::Value>,
+  pub group_id: Option<String>,
+  pub tags: Option<Vec<String>>,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct UpdateProfileRequest {
+  pub name: Option<String>,
+  pub browser: Option<String>,
+  pub version: Option<String>,
+  pub proxy_id: Option<String>,
+  pub release_type: Option<String>,
+  pub camoufox_config: Option<serde_json::Value>,
+  pub group_id: Option<String>,
+  pub tags: Option<Vec<String>>,
+}
+
+#[derive(Clone)]
+struct ApiServerState {
+  app_handle: tauri::AppHandle,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+struct ApiGroupResponse {
+  id: String,
+  name: String,
+  profile_count: usize,
+}
+
+#[derive(Debug, Deserialize)]
+struct CreateGroupRequest {
+  name: String,
+}
+
+#[derive(Debug, Deserialize)]
+struct UpdateGroupRequest {
+  name: String,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+struct ApiProxyResponse {
+  id: String,
+  name: String,
+  proxy_settings: serde_json::Value,
+}
+
+#[derive(Debug, Deserialize)]
+struct CreateProxyRequest {
+  name: String,
+  proxy_settings: serde_json::Value,
+}
+
+#[derive(Debug, Deserialize)]
+struct UpdateProxyRequest {
+  name: Option<String>,
+  proxy_settings: Option<serde_json::Value>,
+}
+
+#[derive(Debug, Deserialize)]
+struct DownloadBrowserRequest {
+  browser: String,
+  version: String,
+}
+
+#[derive(Debug, Serialize)]
+struct DownloadBrowserResponse {
+  browser: String,
+  version: String,
+  status: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct ToastPayload {
+  pub message: String,
+  pub variant: String,
+  pub title: String,
+  pub description: Option<String>,
+}
+
+#[derive(Debug, Serialize)]
+struct RunProfileResponse {
+  profile_id: String,
+  remote_debugging_port: u16,
+  headless: bool,
+}
+
+pub struct ApiServer {
+  port: Option<u16>,
+  shutdown_tx: Option<mpsc::Sender<()>>,
+  task_handle: Option<tokio::task::JoinHandle<()>>,
+}
+
+impl ApiServer {
+  fn new() -> Self {
+    Self {
+      port: None,
+      shutdown_tx: None,
+      task_handle: None,
+    }
+  }
+
+  fn get_port(&self) -> Option<u16> {
+    self.port
+  }
+
+  async fn start(
+    &mut self,
+    app_handle: tauri::AppHandle,
+    preferred_port: u16,
+  ) -> Result<u16, String> {
+    // Stop existing server if running
+    self.stop().await.ok();
+
+    let (shutdown_tx, mut shutdown_rx) = mpsc::channel(1);
+    let state = ApiServerState {
+      app_handle: app_handle.clone(),
+    };
+
+    // Try preferred port first, then random port
+    let listener = match TcpListener::bind(format!("127.0.0.1:{preferred_port}")).await {
+      Ok(listener) => listener,
+      Err(_) => {
+        // Port conflict, try random port
+        let random_port = rand::random::<u16>().saturating_add(10000);
+        match TcpListener::bind(format!("127.0.0.1:{random_port}")).await {
+          Ok(listener) => {
+            let _ = app_handle.emit(
+              "api-port-conflict",
+              format!("API server using fallback port {random_port}"),
+            );
+            listener
+          }
+          Err(e) => return Err(format!("Failed to bind to any port: {e}")),
+        }
+      }
+    };
+
+    let actual_port = listener
+      .local_addr()
+      .map_err(|e| format!("Failed to get local address: {e}"))?
+      .port();
+
+    // Create router with CORS, authentication, and versioning
+    let v1_routes = Router::new()
+      .route("/profiles", get(get_profiles))
+      .route("/profiles", post(create_profile))
+      .route("/profiles/{id}", get(get_profile))
+      .route("/profiles/{id}", put(update_profile))
+      .route("/profiles/{id}", delete(delete_profile))
+      .route("/profiles/{id}/run", post(run_profile))
+      .route("/groups", get(get_groups).post(create_group))
+      .route(
+        "/groups/{id}",
+        get(get_group).put(update_group).delete(delete_group),
+      )
+      .route("/tags", get(get_tags))
+      .route("/proxies", get(get_proxies).post(create_proxy))
+      .route(
+        "/proxies/{id}",
+        get(get_proxy).put(update_proxy).delete(delete_proxy),
+      )
+      .route("/browsers/download", post(download_browser_api))
+      .route("/browsers/{browser}/versions", get(get_browser_versions))
+      .route(
+        "/browsers/{browser}/versions/{version}/downloaded",
+        get(check_browser_downloaded),
+      )
+      .layer(middleware::from_fn_with_state(
+        state.clone(),
+        auth_middleware,
+      ));
+
+    let app = Router::new()
+      .nest("/v1", v1_routes)
+      .layer(CorsLayer::permissive())
+      .with_state(state);
+
+    // Start server task
+    let task_handle = tokio::spawn(async move {
+      let server = axum::serve(listener, app);
+      tokio::select! {
+        _ = server => {},
+        _ = shutdown_rx.recv() => {},
+      }
+    });
+
+    self.port = Some(actual_port);
+    self.shutdown_tx = Some(shutdown_tx);
+    self.task_handle = Some(task_handle);
+
+    Ok(actual_port)
+  }
+
+  async fn stop(&mut self) -> Result<(), String> {
+    if let Some(shutdown_tx) = self.shutdown_tx.take() {
+      let _ = shutdown_tx.send(()).await;
+    }
+
+    if let Some(handle) = self.task_handle.take() {
+      handle.abort();
+    }
+
+    self.port = None;
+    Ok(())
+  }
+}
+
+// Authentication middleware
+async fn auth_middleware(
+  State(state): State<ApiServerState>,
+  headers: HeaderMap,
+  request: axum::extract::Request,
+  next: Next,
+) -> Result<Response, StatusCode> {
+  // Get the Authorization header
+  let auth_header = headers
+    .get("Authorization")
+    .and_then(|h| h.to_str().ok())
+    .and_then(|h| h.strip_prefix("Bearer "));
+
+  let token = match auth_header {
+    Some(token) => token,
+    None => return Err(StatusCode::UNAUTHORIZED),
+  };
+
+  // Get the stored token
+  let settings_manager = crate::settings_manager::SettingsManager::instance();
+  let stored_token = match settings_manager.get_api_token(&state.app_handle).await {
+    Ok(Some(stored_token)) => stored_token,
+    Ok(None) => return Err(StatusCode::UNAUTHORIZED),
+    Err(_) => return Err(StatusCode::INTERNAL_SERVER_ERROR),
+  };
+
+  // Compare tokens
+  if token != stored_token {
+    return Err(StatusCode::UNAUTHORIZED);
+  }
+
+  // Token is valid, continue with the request
+  Ok(next.run(request).await)
+}
+
+// Global API server instance
+lazy_static! {
+  pub static ref API_SERVER: Arc<Mutex<ApiServer>> = Arc::new(Mutex::new(ApiServer::new()));
+}
+
+// Tauri commands
+#[tauri::command]
+pub async fn start_api_server_internal(
+  port: u16,
+  app_handle: &tauri::AppHandle,
+) -> Result<u16, String> {
+  let mut server_guard = API_SERVER.lock().await;
+  server_guard.start(app_handle.clone(), port).await
+}
+
+#[tauri::command]
+pub async fn stop_api_server() -> Result<(), String> {
+  let mut server_guard = API_SERVER.lock().await;
+  server_guard.stop().await
+}
+
+#[tauri::command]
+pub async fn start_api_server(
+  port: Option<u16>,
+  app_handle: tauri::AppHandle,
+) -> Result<u16, String> {
+  let actual_port = port.unwrap_or(10108);
+  start_api_server_internal(actual_port, &app_handle).await
+}
+
+#[tauri::command]
+pub async fn get_api_server_status() -> Result<Option<u16>, String> {
+  let server_guard = API_SERVER.lock().await;
+  Ok(server_guard.get_port())
+}
+
+// API Handlers - Profiles
+async fn get_profiles() -> Result<Json<ApiProfilesResponse>, StatusCode> {
+  let profile_manager = ProfileManager::instance();
+  match profile_manager.list_profiles() {
+    Ok(profiles) => {
+      let api_profiles: Vec<ApiProfile> = profiles
+        .iter()
+        .map(|profile| ApiProfile {
+          id: profile.id.to_string(),
+          name: profile.name.clone(),
+          browser: profile.browser.clone(),
+          version: profile.version.clone(),
+          proxy_id: profile.proxy_id.clone(),
+          process_id: profile.process_id,
+          last_launch: profile.last_launch,
+          release_type: profile.release_type.clone(),
+          camoufox_config: profile
+            .camoufox_config
+            .as_ref()
+            .and_then(|c| serde_json::to_value(c).ok()),
+          group_id: profile.group_id.clone(),
+          tags: profile.tags.clone(),
+          is_running: profile.process_id.is_some(), // Simple check based on process_id
+        })
+        .collect();
+
+      Ok(Json(ApiProfilesResponse {
+        profiles: api_profiles,
+        total: profiles.len(),
+      }))
+    }
+    Err(_) => Err(StatusCode::INTERNAL_SERVER_ERROR),
+  }
+}
+
+async fn get_profile(
+  Path(id): Path<String>,
+  State(_state): State<ApiServerState>,
+) -> Result<Json<ApiProfileResponse>, StatusCode> {
+  let profile_manager = ProfileManager::instance();
+  match profile_manager.list_profiles() {
+    Ok(profiles) => {
+      if let Some(profile) = profiles.iter().find(|p| p.id.to_string() == id) {
+        Ok(Json(ApiProfileResponse {
+          profile: ApiProfile {
+            id: profile.id.to_string(),
+            name: profile.name.clone(),
+            browser: profile.browser.clone(),
+            version: profile.version.clone(),
+            proxy_id: profile.proxy_id.clone(),
+            process_id: profile.process_id,
+            last_launch: profile.last_launch,
+            release_type: profile.release_type.clone(),
+            camoufox_config: profile
+              .camoufox_config
+              .as_ref()
+              .and_then(|c| serde_json::to_value(c).ok()),
+            group_id: profile.group_id.clone(),
+            tags: profile.tags.clone(),
+            is_running: profile.process_id.is_some(), // Simple check based on process_id
+          },
+        }))
+      } else {
+        Err(StatusCode::NOT_FOUND)
+      }
+    }
+    Err(_) => Err(StatusCode::INTERNAL_SERVER_ERROR),
+  }
+}
+
+async fn create_profile(
+  State(state): State<ApiServerState>,
+  Json(request): Json<CreateProfileRequest>,
+) -> Result<Json<ApiProfileResponse>, StatusCode> {
+  let profile_manager = ProfileManager::instance();
+
+  // Parse camoufox config if provided
+  let camoufox_config = if let Some(config) = &request.camoufox_config {
+    serde_json::from_value(config.clone()).ok()
+  } else {
+    None
+  };
+
+  // Create profile using the async create_profile_with_group method
+  match profile_manager
+    .create_profile_with_group(
+      &state.app_handle,
+      &request.name,
+      &request.browser,
+      &request.version,
+      request.release_type.as_deref().unwrap_or("stable"),
+      request.proxy_id.clone(),
+      camoufox_config,
+      request.group_id.clone(),
+    )
+    .await
+  {
+    Ok(mut profile) => {
+      // Apply tags if provided
+      if let Some(tags) = &request.tags {
+        if profile_manager
+          .update_profile_tags(&state.app_handle, &profile.name, tags.clone())
+          .is_err()
+        {
+          return Err(StatusCode::INTERNAL_SERVER_ERROR);
+        }
+        profile.tags = tags.clone();
+      }
+
+      // Update tag manager with new tags
+      if let Ok(profiles) = profile_manager.list_profiles() {
+        let _ = crate::tag_manager::TAG_MANAGER
+          .lock()
+          .map(|manager| manager.rebuild_from_profiles(&profiles));
+      }
+
+      Ok(Json(ApiProfileResponse {
+        profile: ApiProfile {
+          id: profile.id.to_string(),
+          name: profile.name,
+          browser: profile.browser,
+          version: profile.version,
+          proxy_id: profile.proxy_id,
+          process_id: profile.process_id,
+          last_launch: profile.last_launch,
+          release_type: profile.release_type,
+          camoufox_config: profile
+            .camoufox_config
+            .as_ref()
+            .and_then(|c| serde_json::to_value(c).ok()),
+          group_id: profile.group_id,
+          tags: profile.tags,
+          is_running: false,
+        },
+      }))
+    }
+    Err(_) => Err(StatusCode::BAD_REQUEST),
+  }
+}
+
+async fn update_profile(
+  Path(id): Path<String>,
+  State(state): State<ApiServerState>,
+  Json(request): Json<UpdateProfileRequest>,
+) -> Result<Json<ApiProfileResponse>, StatusCode> {
+  let profile_manager = ProfileManager::instance();
+
+  // Update profile fields
+  if let Some(new_name) = request.name {
+    if profile_manager
+      .rename_profile(&state.app_handle, &id, &new_name)
+      .is_err()
+    {
+      return Err(StatusCode::BAD_REQUEST);
+    }
+  }
+
+  if let Some(version) = request.version {
+    if profile_manager
+      .update_profile_version(&state.app_handle, &id, &version)
+      .is_err()
+    {
+      return Err(StatusCode::BAD_REQUEST);
+    }
+  }
+
+  if let Some(proxy_id) = request.proxy_id {
+    if profile_manager
+      .update_profile_proxy(state.app_handle.clone(), &id, Some(proxy_id))
+      .await
+      .is_err()
+    {
+      return Err(StatusCode::BAD_REQUEST);
+    }
+  }
+
+  if let Some(camoufox_config) = request.camoufox_config {
+    let config: Result<CamoufoxConfig, _> = serde_json::from_value(camoufox_config);
+    match config {
+      Ok(config) => {
+        if profile_manager
+          .update_camoufox_config(state.app_handle.clone(), &id, config)
+          .await
+          .is_err()
+        {
+          return Err(StatusCode::BAD_REQUEST);
+        }
+      }
+      Err(_) => return Err(StatusCode::BAD_REQUEST),
+    }
+  }
+
+  if let Some(group_id) = request.group_id {
+    if profile_manager
+      .assign_profiles_to_group(&state.app_handle, vec![id.clone()], Some(group_id))
+      .is_err()
+    {
+      return Err(StatusCode::BAD_REQUEST);
+    }
+  }
+
+  if let Some(tags) = request.tags {
+    if profile_manager
+      .update_profile_tags(&state.app_handle, &id, tags)
+      .is_err()
+    {
+      return Err(StatusCode::BAD_REQUEST);
+    }
+
+    // Update tag manager with new tags from all profiles
+    if let Ok(profiles) = profile_manager.list_profiles() {
+      let _ = crate::tag_manager::TAG_MANAGER
+        .lock()
+        .map(|manager| manager.rebuild_from_profiles(&profiles));
+    }
+  }
+
+  // Return updated profile
+  get_profile(Path(id), State(state)).await
+}
+
+async fn delete_profile(
+  Path(id): Path<String>,
+  State(state): State<ApiServerState>,
+) -> Result<StatusCode, StatusCode> {
+  let profile_manager = ProfileManager::instance();
+  match profile_manager.delete_profile(&state.app_handle, &id) {
+    Ok(_) => Ok(StatusCode::NO_CONTENT),
+    Err(_) => Err(StatusCode::BAD_REQUEST),
+  }
+}
+
+// API Handlers - Groups
+async fn get_groups(
+  State(_state): State<ApiServerState>,
+) -> Result<Json<Vec<ApiGroupResponse>>, StatusCode> {
+  match GROUP_MANAGER.lock() {
+    Ok(manager) => {
+      match manager.get_all_groups() {
+        Ok(groups) => {
+          let api_groups = groups
+            .into_iter()
+            .map(|group| ApiGroupResponse {
+              id: group.id,
+              name: group.name,
+              profile_count: 0, // Would need profile list to calculate this
+            })
+            .collect();
+          Ok(Json(api_groups))
+        }
+        Err(_) => Err(StatusCode::INTERNAL_SERVER_ERROR),
+      }
+    }
+    Err(_) => Err(StatusCode::INTERNAL_SERVER_ERROR),
+  }
+}
+
+async fn get_group(
+  Path(id): Path<String>,
+  State(_state): State<ApiServerState>,
+) -> Result<Json<ApiGroupResponse>, StatusCode> {
+  match GROUP_MANAGER.lock() {
+    Ok(manager) => match manager.get_all_groups() {
+      Ok(groups) => {
+        if let Some(group) = groups.into_iter().find(|g| g.id == id) {
+          Ok(Json(ApiGroupResponse {
+            id: group.id,
+            name: group.name,
+            profile_count: 0,
+          }))
+        } else {
+          Err(StatusCode::NOT_FOUND)
+        }
+      }
+      Err(_) => Err(StatusCode::INTERNAL_SERVER_ERROR),
+    },
+    Err(_) => Err(StatusCode::INTERNAL_SERVER_ERROR),
+  }
+}
+
+async fn create_group(
+  State(state): State<ApiServerState>,
+  Json(request): Json<CreateGroupRequest>,
+) -> Result<Json<ApiGroupResponse>, StatusCode> {
+  match GROUP_MANAGER.lock() {
+    Ok(manager) => match manager.create_group(&state.app_handle, request.name) {
+      Ok(group) => Ok(Json(ApiGroupResponse {
+        id: group.id,
+        name: group.name,
+        profile_count: 0,
+      })),
+      Err(_) => Err(StatusCode::BAD_REQUEST),
+    },
+    Err(_) => Err(StatusCode::INTERNAL_SERVER_ERROR),
+  }
+}
+
+async fn update_group(
+  Path(id): Path<String>,
+  State(state): State<ApiServerState>,
+  Json(request): Json<UpdateGroupRequest>,
+) -> Result<Json<ApiGroupResponse>, StatusCode> {
+  match GROUP_MANAGER.lock() {
+    Ok(manager) => match manager.update_group(&state.app_handle, id.clone(), request.name) {
+      Ok(group) => Ok(Json(ApiGroupResponse {
+        id: group.id,
+        name: group.name,
+        profile_count: 0,
+      })),
+      Err(_) => Err(StatusCode::BAD_REQUEST),
+    },
+    Err(_) => Err(StatusCode::INTERNAL_SERVER_ERROR),
+  }
+}
+
+async fn delete_group(
+  Path(id): Path<String>,
+  State(state): State<ApiServerState>,
+) -> Result<StatusCode, StatusCode> {
+  match GROUP_MANAGER.lock() {
+    Ok(manager) => match manager.delete_group(&state.app_handle, id.clone()) {
+      Ok(_) => Ok(StatusCode::NO_CONTENT),
+      Err(_) => Err(StatusCode::BAD_REQUEST),
+    },
+    Err(_) => Err(StatusCode::INTERNAL_SERVER_ERROR),
+  }
+}
+
+// API Handlers - Tags
+async fn get_tags(State(_state): State<ApiServerState>) -> Result<Json<Vec<String>>, StatusCode> {
+  match TAG_MANAGER.lock() {
+    Ok(manager) => match manager.get_all_tags() {
+      Ok(tags) => Ok(Json(tags)),
+      Err(_) => Err(StatusCode::INTERNAL_SERVER_ERROR),
+    },
+    Err(_) => Err(StatusCode::INTERNAL_SERVER_ERROR),
+  }
+}
+
+// API Handlers - Proxies
+async fn get_proxies(
+  State(_state): State<ApiServerState>,
+) -> Result<Json<Vec<ApiProxyResponse>>, StatusCode> {
+  let proxies = PROXY_MANAGER.get_stored_proxies();
+  Ok(Json(
+    proxies
+      .into_iter()
+      .map(|p| ApiProxyResponse {
+        id: p.id,
+        name: p.name,
+        proxy_settings: serde_json::to_value(p.proxy_settings).unwrap_or_default(),
+      })
+      .collect(),
+  ))
+}
+
+async fn get_proxy(
+  Path(id): Path<String>,
+  State(_state): State<ApiServerState>,
+) -> Result<Json<ApiProxyResponse>, StatusCode> {
+  let proxies = PROXY_MANAGER.get_stored_proxies();
+  if let Some(proxy) = proxies.into_iter().find(|p| p.id == id) {
+    Ok(Json(ApiProxyResponse {
+      id: proxy.id,
+      name: proxy.name,
+      proxy_settings: serde_json::to_value(proxy.proxy_settings).unwrap_or_default(),
+    }))
+  } else {
+    Err(StatusCode::NOT_FOUND)
+  }
+}
+
+async fn create_proxy(
+  State(state): State<ApiServerState>,
+  Json(request): Json<CreateProxyRequest>,
+) -> Result<Json<ApiProxyResponse>, StatusCode> {
+  // Convert JSON value to ProxySettings
+  match serde_json::from_value(request.proxy_settings.clone()) {
+    Ok(proxy_settings) => {
+      match PROXY_MANAGER.create_stored_proxy(
+        &state.app_handle,
+        request.name.clone(),
+        proxy_settings,
+      ) {
+        Ok(_) => {
+          // Find the created proxy to return it
+          let proxies = PROXY_MANAGER.get_stored_proxies();
+          if let Some(proxy) = proxies.into_iter().find(|p| p.name == request.name) {
+            Ok(Json(ApiProxyResponse {
+              id: proxy.id,
+              name: proxy.name,
+              proxy_settings: request.proxy_settings,
+            }))
+          } else {
+            Err(StatusCode::INTERNAL_SERVER_ERROR)
+          }
+        }
+        Err(_) => Err(StatusCode::BAD_REQUEST),
+      }
+    }
+    Err(_) => Err(StatusCode::BAD_REQUEST),
+  }
+}
+
+async fn update_proxy(
+  Path(id): Path<String>,
+  State(state): State<ApiServerState>,
+  Json(request): Json<UpdateProxyRequest>,
+) -> Result<Json<ApiProxyResponse>, StatusCode> {
+  let proxies = PROXY_MANAGER.get_stored_proxies();
+  if let Some(proxy) = proxies.into_iter().find(|p| p.id == id) {
+    let new_name = request.name.unwrap_or(proxy.name.clone());
+    let new_proxy_settings = if let Some(settings_json) = request.proxy_settings {
+      match serde_json::from_value(settings_json) {
+        Ok(settings) => settings,
+        Err(_) => return Err(StatusCode::BAD_REQUEST),
+      }
+    } else {
+      proxy.proxy_settings.clone()
+    };
+
+    match PROXY_MANAGER.update_stored_proxy(
+      &state.app_handle,
+      &id,
+      Some(new_name.clone()),
+      Some(new_proxy_settings.clone()),
+    ) {
+      Ok(_) => Ok(Json(ApiProxyResponse {
+        id,
+        name: new_name,
+        proxy_settings: serde_json::to_value(new_proxy_settings).unwrap_or_default(),
+      })),
+      Err(_) => Err(StatusCode::BAD_REQUEST),
+    }
+  } else {
+    Err(StatusCode::NOT_FOUND)
+  }
+}
+
+async fn delete_proxy(
+  Path(id): Path<String>,
+  State(state): State<ApiServerState>,
+) -> Result<StatusCode, StatusCode> {
+  match PROXY_MANAGER.delete_stored_proxy(&state.app_handle, &id) {
+    Ok(_) => Ok(StatusCode::NO_CONTENT),
+    Err(_) => Err(StatusCode::BAD_REQUEST),
+  }
+}
+
+// API Handler - Run Profile with Remote Debugging
+async fn run_profile(
+  Path(id): Path<String>,
+  Query(params): Query<HashMap<String, String>>,
+  State(state): State<ApiServerState>,
+) -> Result<Json<RunProfileResponse>, StatusCode> {
+  let headless = params
+    .get("headless")
+    .and_then(|v| v.parse::<bool>().ok())
+    .unwrap_or(false);
+
+  let profile_manager = ProfileManager::instance();
+  let profiles = profile_manager
+    .list_profiles()
+    .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+  let profile = profiles
+    .iter()
+    .find(|p| p.id.to_string() == id)
+    .ok_or(StatusCode::NOT_FOUND)?;
+
+  // Generate a random port for remote debugging
+  let remote_debugging_port = rand::random::<u16>().saturating_add(9000).max(9000);
+
+  // Use the same launch method as the main app, but with remote debugging enabled
+  match crate::browser_runner::launch_browser_profile_with_debugging(
+    state.app_handle.clone(),
+    profile.clone(),
+    None,
+    Some(remote_debugging_port),
+    headless,
+  )
+  .await
+  {
+    Ok(updated_profile) => Ok(Json(RunProfileResponse {
+      profile_id: updated_profile.id.to_string(),
+      remote_debugging_port,
+      headless,
+    })),
+    Err(_) => Err(StatusCode::INTERNAL_SERVER_ERROR),
+  }
+}
+
+// API Handler - Download Browser
+async fn download_browser_api(
+  State(state): State<ApiServerState>,
+  Json(request): Json<DownloadBrowserRequest>,
+) -> Result<Json<DownloadBrowserResponse>, StatusCode> {
+  match crate::downloader::download_browser(
+    state.app_handle.clone(),
+    request.browser.clone(),
+    request.version.clone(),
+  )
+  .await
+  {
+    Ok(_) => Ok(Json(DownloadBrowserResponse {
+      browser: request.browser,
+      version: request.version,
+      status: "downloaded".to_string(),
+    })),
+    Err(_) => Err(StatusCode::INTERNAL_SERVER_ERROR),
+  }
+}
+
+// API Handler - Get Browser Versions
+async fn get_browser_versions(
+  Path(browser): Path<String>,
+  State(_state): State<ApiServerState>,
+) -> Result<Json<Vec<String>>, StatusCode> {
+  let version_manager = crate::browser_version_manager::BrowserVersionManager::instance();
+
+  match version_manager
+    .fetch_browser_versions_with_count(&browser, false)
+    .await
+  {
+    Ok(result) => Ok(Json(result.versions)),
+    Err(_) => Err(StatusCode::INTERNAL_SERVER_ERROR),
+  }
+}
+
+// API Handler - Check if Browser is Downloaded
+async fn check_browser_downloaded(
+  Path((browser, version)): Path<(String, String)>,
+  State(_state): State<ApiServerState>,
+) -> Result<Json<bool>, StatusCode> {
+  let is_downloaded = crate::downloaded_browsers_registry::is_browser_downloaded(browser, version);
+  Ok(Json(is_downloaded))
+}
@@ -1,6 +1,5 @@
-use crate::api_client::is_browser_version_nightly;
-use crate::browser_version_service::{BrowserVersionInfo, BrowserVersionService};
-use crate::profile::BrowserProfile;
+use crate::browser_version_manager::{BrowserVersionInfo, BrowserVersionManager};
+use crate::profile::{BrowserProfile, ProfileManager};
 use crate::settings_manager::SettingsManager;
 use serde::{Deserialize, Serialize};
 use std::collections::{HashMap, HashSet};
@@ -29,15 +28,17 @@ pub struct AutoUpdateState {
 }

 pub struct AutoUpdater {
-  version_service: &'static BrowserVersionService,
+  browser_version_manager: &'static BrowserVersionManager,
  settings_manager: &'static SettingsManager,
+  profile_manager: &'static ProfileManager,
 }

 impl AutoUpdater {
  fn new() -> Self {
    Self {
-      version_service: BrowserVersionService::instance(),
+      browser_version_manager: BrowserVersionManager::instance(),
      settings_manager: SettingsManager::instance(),
+      profile_manager: ProfileManager::instance(),
    }
  }

@@ -53,8 +54,8 @@ impl AutoUpdater {
    let mut browser_versions: HashMap<String, Vec<BrowserVersionInfo>> = HashMap::new();

    // Group profiles by browser
-    let profile_manager = crate::profile::ProfileManager::instance();
-    let profiles = profile_manager
+    let profiles = self
+      .profile_manager
      .list_profiles()
      .map_err(|e| format!("Failed to list profiles: {e}"))?;
    let mut browser_profiles: HashMap<String, Vec<BrowserProfile>> = HashMap::new();
@@ -62,7 +63,7 @@ impl AutoUpdater {
    for profile in profiles {
      // Only check supported browsers
      if !self
-        .version_service
+        .browser_version_manager
        .is_browser_supported(&profile.browser)
        .unwrap_or(false)
      {
@@ -78,14 +79,14 @@ impl AutoUpdater {
    for (browser, profiles) in browser_profiles {
      // Get cached versions first, then try to fetch if needed
      let versions = if let Some(cached) = self
-        .version_service
+        .browser_version_manager
        .get_cached_browser_versions_detailed(&browser)
      {
        cached
-      } else if self.version_service.should_update_cache(&browser) {
+      } else if self.browser_version_manager.should_update_cache(&browser) {
        // Try to fetch fresh versions
        match self
-          .version_service
+          .browser_version_manager
          .fetch_browser_versions_detailed(&browser, false)
          .await
        {
@@ -148,16 +149,17 @@ impl AutoUpdater {
            );

            // Clone app_handle for the async task
-            let app_handle_clone = app_handle.clone();
            let browser = notification.browser.clone();
            let new_version = notification.new_version.clone();
            let notification_id = notification.id.clone();
            let affected_profiles = notification.affected_profiles.clone();
+            let app_handle_clone = app_handle.clone();

            // Spawn async task to handle the download and auto-update
            tokio::spawn(async move {
+              // TODO: update the logic to use the downloaded browsers registry instance instead of the static method
              // First, check if browser already exists
-              match crate::browser_runner::is_browser_downloaded(
+              match crate::downloaded_browsers_registry::is_browser_downloaded(
                browser.clone(),
                new_version.clone(),
              ) {
@@ -165,11 +167,13 @@ impl AutoUpdater {
                  println!("Browser {browser} {new_version} already downloaded, proceeding to auto-update profiles");

                  // Browser already exists, go straight to profile update
-                  match crate::auto_updater::complete_browser_update_with_auto_update(
-                    browser.clone(),
-                    new_version.clone(),
-                  )
-                  .await
+                  match AutoUpdater::instance()
+                    .complete_browser_update_with_auto_update(
+                      &app_handle_clone,
+                      &browser.clone(),
+                      &new_version.clone(),
+                    )
+                    .await
                  {
                    Ok(updated_profiles) => {
                      println!(
@@ -222,7 +226,8 @@ impl AutoUpdater {
    available_versions: &[BrowserVersionInfo],
  ) -> Result<Option<UpdateNotification>, Box<dyn std::error::Error + Send + Sync>> {
    let current_version = &profile.version;
-    let is_current_nightly = is_browser_version_nightly(&profile.browser, current_version, None);
+    let is_current_nightly =
+      crate::api_client::is_browser_version_nightly(&profile.browser, current_version, None);

    // Find the best available update
    let best_update = available_versions
@@ -230,7 +235,8 @@ impl AutoUpdater {
      .filter(|v| {
        // Only consider versions newer than current
        self.is_version_newer(&v.version, current_version)
-          && is_browser_version_nightly(&profile.browser, &v.version, None) == is_current_nightly
+          && crate::api_client::is_browser_version_nightly(&profile.browser, &v.version, None)
+            == is_current_nightly
      })
      .max_by(|a, b| self.compare_versions(&a.version, &b.version));

@@ -293,11 +299,12 @@ impl AutoUpdater {
  /// Automatically update all affected profile versions after browser download
  pub async fn auto_update_profile_versions(
    &self,
+    app_handle: &tauri::AppHandle,
    browser: &str,
    new_version: &str,
  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
-    let profile_manager = crate::profile::ProfileManager::instance();
-    let profiles = profile_manager
+    let profiles = self
+      .profile_manager
      .list_profiles()
      .map_err(|e| format!("Failed to list profiles: {e}"))?;

@@ -314,7 +321,11 @@ impl AutoUpdater {
        // Check if this is an update (newer version)
        if self.is_version_newer(new_version, &profile.version) {
          // Update the profile version
-          match profile_manager.update_profile_version(&profile.name, new_version) {
+          match self.profile_manager.update_profile_version(
+            app_handle,
+            &profile.id.to_string(),
+            new_version,
+          ) {
            Ok(_) => {
              updated_profiles.push(profile.name);
            }
@@ -332,12 +343,13 @@ impl AutoUpdater {
  /// Complete browser update process with auto-update of profile versions
  pub async fn complete_browser_update_with_auto_update(
    &self,
+    app_handle: &tauri::AppHandle,
    browser: &str,
    new_version: &str,
  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
    // Auto-update profile versions first
    let updated_profiles = self
-      .auto_update_profile_versions(browser, new_version)
+      .auto_update_profile_versions(app_handle, browser, new_version)
      .await?;

    // Remove browser from disabled list and clean up auto-update tracking
@@ -347,46 +359,9 @@ impl AutoUpdater {
    state.auto_update_downloads.remove(&download_key);
    self.save_auto_update_state(&state)?;

-    // Always perform cleanup after auto-update - don't fail the update if cleanup fails
-    if let Err(e) = self.cleanup_unused_binaries_internal() {
-      eprintln!("Warning: Failed to cleanup unused binaries after auto-update: {e}");
-    }
-
    Ok(updated_profiles)
  }

-  /// Internal method to cleanup unused binaries (used by auto-cleanup)
-  fn cleanup_unused_binaries_internal(
-    &self,
-  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
-    // Load current profiles
-    let profile_manager = crate::profile::ProfileManager::instance();
-    let profiles = profile_manager
-      .list_profiles()
-      .map_err(|e| format!("Failed to load profiles: {e}"))?;
-
-    // Get registry instance
-    let registry = crate::downloaded_browsers::DownloadedBrowsersRegistry::instance();
-
-    // Get active browser versions (all profiles)
-    let active_versions = registry.get_active_browser_versions(&profiles);
-
-    // Get running browser versions (only running profiles)
-    let running_versions = registry.get_running_browser_versions(&profiles);
-
-    // Cleanup unused binaries (but keep running ones)
-    let cleaned_up = registry
-      .cleanup_unused_binaries(&active_versions, &running_versions)
-      .map_err(|e| format!("Failed to cleanup unused binaries: {e}"))?;
-
-    // Save updated registry
-    registry
-      .save()
-      .map_err(|e| format!("Failed to save registry: {e}"))?;
-
-    Ok(cleaned_up)
-  }
-
  /// Check if browser is disabled due to ongoing update
  pub fn is_browser_disabled(
    &self,
@@ -408,17 +383,11 @@ impl AutoUpdater {
  }

  fn is_version_newer(&self, version1: &str, version2: &str) -> bool {
-    // Use the proper VersionComponent comparison from api_client.rs
-    let version_a = crate::api_client::VersionComponent::parse(version1);
-    let version_b = crate::api_client::VersionComponent::parse(version2);
-    version_a > version_b
+    crate::api_client::is_version_newer(version1, version2)
  }

  fn compare_versions(&self, version1: &str, version2: &str) -> std::cmp::Ordering {
-    // Use the proper VersionComponent comparison from api_client.rs
-    let version_a = crate::api_client::VersionComponent::parse(version1);
-    let version_b = crate::api_client::VersionComponent::parse(version2);
-    version_a.cmp(&version_b)
+    crate::api_client::compare_versions(version1, version2)
  }

  fn get_auto_update_state_file(&self) -> PathBuf {
@@ -455,6 +424,39 @@ impl AutoUpdater {

    Ok(())
  }
+
+  /// Get pending update versions for a specific browser
+  /// Returns a set of (browser, version) pairs that have pending updates
+  pub fn get_pending_update_versions(
+    &self,
+  ) -> Result<std::collections::HashSet<(String, String)>, Box<dyn std::error::Error + Send + Sync>>
+  {
+    let state = self.load_auto_update_state()?;
+    let mut pending_versions = std::collections::HashSet::new();
+
+    for update in &state.pending_updates {
+      pending_versions.insert((update.browser.clone(), update.new_version.clone()));
+    }
+
+    Ok(pending_versions)
+  }
+
+  /// Get pending update for a specific browser version if it exists
+  pub fn get_pending_update(
+    &self,
+    browser: &str,
+    current_version: &str,
+  ) -> Result<Option<UpdateNotification>, Box<dyn std::error::Error + Send + Sync>> {
+    let state = self.load_auto_update_state()?;
+
+    for update in &state.pending_updates {
+      if update.browser == browser && update.current_version == current_version {
+        return Ok(Some(update.clone()));
+      }
+    }
+
+    Ok(None)
+  }
 }

 // Tauri commands
@@ -470,14 +472,6 @@ pub async fn check_for_browser_updates() -> Result<Vec<UpdateNotification>, Stri
  Ok(grouped)
 }

-#[tauri::command]
-pub async fn is_browser_disabled_for_update(browser: String) -> Result<bool, String> {
-  let updater = AutoUpdater::instance();
-  updater
-    .is_browser_disabled(&browser)
-    .map_err(|e| format!("Failed to check browser status: {e}"))
-}
-
 #[tauri::command]
 pub async fn dismiss_update_notification(notification_id: String) -> Result<(), String> {
  let updater = AutoUpdater::instance();
@@ -488,12 +482,13 @@ pub async fn dismiss_update_notification(notification_id: String) -> Result<(),

 #[tauri::command]
 pub async fn complete_browser_update_with_auto_update(
+  app_handle: tauri::AppHandle,
  browser: String,
  new_version: String,
 ) -> Result<Vec<String>, String> {
  let updater = AutoUpdater::instance();
  updater
-    .complete_browser_update_with_auto_update(&browser, &new_version)
+    .complete_browser_update_with_auto_update(&app_handle, &browser, &new_version)
    .await
    .map_err(|e| format!("Failed to complete browser update: {e}"))
 }
@@ -520,6 +515,7 @@ mod tests {
      release_type: "stable".to_string(),
      camoufox_config: None,
      group_id: None,
+      tags: Vec::new(),
    }
  }

@@ -779,13 +775,15 @@ mod tests {
    let state_file = test_settings_manager
      .get_settings_dir()
      .join("auto_update_state.json");
-    std::fs::create_dir_all(test_settings_manager.get_settings_dir()).unwrap();
-    let json = serde_json::to_string_pretty(&state).unwrap();
-    std::fs::write(&state_file, json).unwrap();
+    std::fs::create_dir_all(test_settings_manager.get_settings_dir())
+      .expect("Failed to create settings directory");
+    let json = serde_json::to_string_pretty(&state).expect("Failed to serialize state");
+    std::fs::write(&state_file, json).expect("Failed to write state file");

    // Load state
-    let content = std::fs::read_to_string(&state_file).unwrap();
-    let loaded_state: AutoUpdateState = serde_json::from_str(&content).unwrap();
+    let content = std::fs::read_to_string(&state_file).expect("Failed to read state file");
+    let loaded_state: AutoUpdateState =
+      serde_json::from_str(&content).expect("Failed to deserialize state");

    assert_eq!(loaded_state.disabled_browsers.len(), 1);
    assert!(loaded_state.disabled_browsers.contains("firefox"));
@@ -823,11 +821,15 @@ mod tests {
    let state_file = test_settings_manager
      .get_settings_dir()
      .join("auto_update_state.json");
-    std::fs::create_dir_all(test_settings_manager.get_settings_dir()).unwrap();
+    std::fs::create_dir_all(test_settings_manager.get_settings_dir())
+      .expect("Failed to create settings directory");

    // Initially not disabled (empty state file means default state)
    let state = AutoUpdateState::default();
-    assert!(!state.disabled_browsers.contains("firefox"));
+    assert!(
+      !state.disabled_browsers.contains("firefox"),
+      "Firefox should not be disabled initially"
+    );

    // Start update (should disable)
    let mut state = AutoUpdateState::default();
@@ -835,27 +837,41 @@ mod tests {
    state
      .auto_update_downloads
      .insert("firefox-1.1.0".to_string());
-    let json = serde_json::to_string_pretty(&state).unwrap();
-    std::fs::write(&state_file, json).unwrap();
+    let json = serde_json::to_string_pretty(&state).expect("Failed to serialize state");
+    std::fs::write(&state_file, json).expect("Failed to write state file");

    // Check that it's disabled
-    let content = std::fs::read_to_string(&state_file).unwrap();
-    let loaded_state: AutoUpdateState = serde_json::from_str(&content).unwrap();
-    assert!(loaded_state.disabled_browsers.contains("firefox"));
-    assert!(loaded_state.auto_update_downloads.contains("firefox-1.1.0"));
+    let content = std::fs::read_to_string(&state_file).expect("Failed to read state file");
+    let loaded_state: AutoUpdateState =
+      serde_json::from_str(&content).expect("Failed to deserialize state");
+    assert!(
+      loaded_state.disabled_browsers.contains("firefox"),
+      "Firefox should be disabled"
+    );
+    assert!(
+      loaded_state.auto_update_downloads.contains("firefox-1.1.0"),
+      "Firefox download should be tracked"
+    );

    // Complete update (should enable)
    let mut state = loaded_state;
    state.disabled_browsers.remove("firefox");
    state.auto_update_downloads.remove("firefox-1.1.0");
-    let json = serde_json::to_string_pretty(&state).unwrap();
-    std::fs::write(&state_file, json).unwrap();
+    let json = serde_json::to_string_pretty(&state).expect("Failed to serialize final state");
+    std::fs::write(&state_file, json).expect("Failed to write final state file");

    // Check that it's enabled again
-    let content = std::fs::read_to_string(&state_file).unwrap();
-    let final_state: AutoUpdateState = serde_json::from_str(&content).unwrap();
-    assert!(!final_state.disabled_browsers.contains("firefox"));
-    assert!(!final_state.auto_update_downloads.contains("firefox-1.1.0"));
+    let content = std::fs::read_to_string(&state_file).expect("Failed to read final state file");
+    let final_state: AutoUpdateState =
+      serde_json::from_str(&content).expect("Failed to deserialize final state");
+    assert!(
+      !final_state.disabled_browsers.contains("firefox"),
+      "Firefox should be enabled again"
+    );
+    assert!(
+      !final_state.auto_update_downloads.contains("firefox-1.1.0"),
+      "Firefox download should not be tracked anymore"
+    );
  }

  #[test]
@@ -897,21 +913,27 @@ mod tests {
    let state_file = test_settings_manager
      .get_settings_dir()
      .join("auto_update_state.json");
-    std::fs::create_dir_all(test_settings_manager.get_settings_dir()).unwrap();
-    let json = serde_json::to_string_pretty(&state).unwrap();
-    std::fs::write(&state_file, json).unwrap();
+    std::fs::create_dir_all(test_settings_manager.get_settings_dir())
+      .expect("Failed to create settings directory");
+    let json = serde_json::to_string_pretty(&state).expect("Failed to serialize initial state");
+    std::fs::write(&state_file, json).expect("Failed to write initial state file");

    // Dismiss notification (remove from pending updates)
    state
      .pending_updates
      .retain(|n| n.id != "test_notification");
-    let json = serde_json::to_string_pretty(&state).unwrap();
-    std::fs::write(&state_file, json).unwrap();
+    let json = serde_json::to_string_pretty(&state).expect("Failed to serialize updated state");
+    std::fs::write(&state_file, json).expect("Failed to write updated state file");

    // Check that it's removed
-    let content = std::fs::read_to_string(&state_file).unwrap();
-    let loaded_state: AutoUpdateState = serde_json::from_str(&content).unwrap();
-    assert_eq!(loaded_state.pending_updates.len(), 0);
+    let content = std::fs::read_to_string(&state_file).expect("Failed to read updated state file");
+    let loaded_state: AutoUpdateState =
+      serde_json::from_str(&content).expect("Failed to deserialize updated state");
+    assert_eq!(
+      loaded_state.pending_updates.len(),
+      0,
+      "Pending updates should be empty after dismissal"
+    );
  }
 }

@@ -58,6 +58,8 @@ pub trait Browser: Send + Sync {
    profile_path: &str,
    proxy_settings: Option<&ProxySettings>,
    url: Option<String>,
+    remote_debugging_port: Option<u16>,
+    headless: bool,
  ) -> Result<Vec<String>, Box<dyn std::error::Error>>;
  fn is_version_downloaded(&self, version: &str, binaries_dir: &Path) -> bool;
  fn prepare_executable(&self, executable_path: &Path) -> Result<(), Box<dyn std::error::Error>>;
@@ -168,17 +170,25 @@ mod linux {
    install_dir: &Path,
    browser_type: &BrowserType,
  ) -> Result<PathBuf, Box<dyn std::error::Error>> {
-    // Expected structure: install_dir/<browser>/<binary>
+    // Expected structure examples:
+    // - Firefox/Firefox Developer on Linux often extract to: install_dir/firefox/firefox
+    // - Some archives may extract directly under: install_dir/firefox or install_dir/firefox-bin
+    // - For some flavors we may have: install_dir/<browser_type>/<binary>
    let browser_subdir = install_dir.join(browser_type.as_str());

-    // Try firefox first (preferred), then firefox-bin
+    // Try common firefox executable locations (nested and flat)
    let possible_executables = match browser_type {
-      BrowserType::Firefox | BrowserType::FirefoxDeveloper => {
-        vec![
-          browser_subdir.join("firefox"),
-          browser_subdir.join("firefox-bin"),
-        ]
-      }
+      BrowserType::Firefox | BrowserType::FirefoxDeveloper => vec![
+        // Nested "firefox/firefox" or "firefox/firefox-bin"
+        install_dir.join("firefox").join("firefox"),
+        install_dir.join("firefox").join("firefox-bin"),
+        // Flat under version directory
+        install_dir.join("firefox"),
+        install_dir.join("firefox-bin"),
+        // Under a subdirectory matching the browser type
+        browser_subdir.join("firefox"),
+        browser_subdir.join("firefox-bin"),
+      ],
      BrowserType::MullvadBrowser => {
        vec![
          browser_subdir.join("firefox"),
@@ -191,15 +201,20 @@ mod linux {
      }
      BrowserType::TorBrowser => {
        vec![
-          browser_subdir.join("firefox"),
+          // Common Tor Browser launchers
          browser_subdir.join("tor-browser"),
+          // Firefox-based binaries
+          browser_subdir.join("firefox"),
          browser_subdir.join("firefox-bin"),
+          // Sometimes packaged similarly to Firefox
+          install_dir.join("firefox").join("firefox"),
+          install_dir.join("firefox").join("firefox-bin"),
        ]
      }
      BrowserType::Camoufox => {
        vec![
-          browser_subdir.join("camoufox-bin"),
-          browser_subdir.join("camoufox"),
+          install_dir.join("camoufox-bin"),
+          install_dir.join("camoufox"),
        ]
      }
      _ => vec![],
@@ -213,9 +228,9 @@ mod linux {

    Err(
      format!(
-        "Firefox executable not found in {}/{}",
+        "Executable not found for {} in {}",
+        browser_type.as_str(),
        install_dir.display(),
-        browser_type.as_str()
      )
      .into(),
    )
@@ -226,12 +241,29 @@ mod linux {
    browser_type: &BrowserType,
  ) -> Result<PathBuf, Box<dyn std::error::Error>> {
    let possible_executables = match browser_type {
-      BrowserType::Chromium => vec![install_dir.join("chromium"), install_dir.join("chrome")],
+      BrowserType::Chromium => vec![
+        // Direct paths (for manual installations)
+        install_dir.join("chromium"),
+        install_dir.join("chrome"),
+        install_dir.join("chromium-browser"),
+        // Subdirectory paths (for downloaded archives)
+        install_dir.join("chrome-linux").join("chrome"),
+        install_dir.join("chrome-linux").join("chromium"),
+        install_dir.join("chromium").join("chromium"),
+        install_dir.join("chromium").join("chrome"),
+        // Binary subdirectory
+        install_dir.join("bin").join("chromium"),
+        install_dir.join("bin").join("chrome"),
+      ],
      BrowserType::Brave => vec![
        install_dir.join("brave"),
        install_dir.join("brave-browser"),
        install_dir.join("brave-browser-nightly"),
        install_dir.join("brave-browser-beta"),
+        // Subdirectory paths
+        install_dir.join("brave").join("brave"),
+        install_dir.join("brave-browser").join("brave"),
+        install_dir.join("bin").join("brave"),
      ],
      _ => vec![],
    };
@@ -253,18 +285,21 @@ mod linux {
  }

  pub fn is_firefox_version_downloaded(install_dir: &Path, browser_type: &BrowserType) -> bool {
-    // Expected structure: install_dir/<browser>/<binary>
+    // Expected structure (most common):
+    //   install_dir/<browser>/<binary>
+    // However, Firefox Developer tarballs often extract to a "firefox" subfolder
+    // rather than "firefox-developer". Support both layouts.
    let browser_subdir = install_dir.join(browser_type.as_str());

-    if !browser_subdir.exists() || !browser_subdir.is_dir() {
-      return false;
-    }
-
    let possible_executables = match browser_type {
      BrowserType::Firefox | BrowserType::FirefoxDeveloper => {
        vec![
+          // Preferred: executable inside a subdirectory named after the browser type
          browser_subdir.join("firefox-bin"),
          browser_subdir.join("firefox"),
+          // Fallback: executable inside a generic "firefox" subdirectory
+          install_dir.join("firefox").join("firefox-bin"),
+          install_dir.join("firefox").join("firefox"),
        ]
      }
      BrowserType::MullvadBrowser => {
@@ -286,8 +321,8 @@ mod linux {
      }
      BrowserType::Camoufox => {
        vec![
-          browser_subdir.join("camoufox-bin"),
-          browser_subdir.join("camoufox"),
+          install_dir.join("camoufox-bin"),
+          install_dir.join("camoufox"),
        ]
      }
      _ => vec![],
@@ -304,12 +339,29 @@ mod linux {

  pub fn is_chromium_version_downloaded(install_dir: &Path, browser_type: &BrowserType) -> bool {
    let possible_executables = match browser_type {
-      BrowserType::Chromium => vec![install_dir.join("chromium"), install_dir.join("chrome")],
+      BrowserType::Chromium => vec![
+        // Direct paths (for manual installations)
+        install_dir.join("chromium"),
+        install_dir.join("chrome"),
+        install_dir.join("chromium-browser"),
+        // Subdirectory paths (for downloaded archives)
+        install_dir.join("chrome-linux").join("chrome"),
+        install_dir.join("chrome-linux").join("chromium"),
+        install_dir.join("chromium").join("chromium"),
+        install_dir.join("chromium").join("chrome"),
+        // Binary subdirectory
+        install_dir.join("bin").join("chromium"),
+        install_dir.join("bin").join("chrome"),
+      ],
      BrowserType::Brave => vec![
        install_dir.join("brave"),
        install_dir.join("brave-browser"),
        install_dir.join("brave-browser-nightly"),
        install_dir.join("brave-browser-beta"),
+        // Subdirectory paths
+        install_dir.join("brave").join("brave"),
+        install_dir.join("brave-browser").join("brave"),
+        install_dir.join("bin").join("brave"),
      ],
      _ => vec![],
    };
@@ -397,11 +449,18 @@ mod windows {
        install_dir.join("chrome.exe"),
        install_dir.join("chromium-browser.exe"),
        install_dir.join("bin").join("chromium.exe"),
+        // Common archive extraction patterns
+        install_dir.join("chrome-win").join("chrome.exe"),
+        install_dir.join("chromium").join("chromium.exe"),
+        install_dir.join("chromium").join("chrome.exe"),
      ],
      BrowserType::Brave => vec![
        install_dir.join("brave.exe"),
        install_dir.join("brave-browser.exe"),
        install_dir.join("bin").join("brave.exe"),
+        // Subdirectory patterns
+        install_dir.join("brave").join("brave.exe"),
+        install_dir.join("brave-browser").join("brave.exe"),
      ],
      _ => vec![],
    };
@@ -473,11 +532,18 @@ mod windows {
        install_dir.join("chrome.exe"),
        install_dir.join("chromium-browser.exe"),
        install_dir.join("bin").join("chromium.exe"),
+        // Common archive extraction patterns
+        install_dir.join("chrome-win").join("chrome.exe"),
+        install_dir.join("chromium").join("chromium.exe"),
+        install_dir.join("chromium").join("chrome.exe"),
      ],
      BrowserType::Brave => vec![
        install_dir.join("brave.exe"),
        install_dir.join("brave-browser.exe"),
        install_dir.join("bin").join("brave.exe"),
+        // Subdirectory patterns
+        install_dir.join("brave").join("brave.exe"),
+        install_dir.join("brave-browser").join("brave.exe"),
      ],
      _ => vec![],
    };
@@ -541,11 +607,23 @@ impl Browser for FirefoxBrowser {
    profile_path: &str,
    _proxy_settings: Option<&ProxySettings>,
    url: Option<String>,
+    remote_debugging_port: Option<u16>,
+    headless: bool,
  ) -> Result<Vec<String>, Box<dyn std::error::Error>> {
    let mut args = vec!["-profile".to_string(), profile_path.to_string()];

-    // Only use -no-remote for browsers that require it for security (Mullvad, Tor)
-    // Regular Firefox browsers can use remote commands for better URL handling
+    // Add remote debugging if requested
+    if let Some(port) = remote_debugging_port {
+      args.push("--start-debugger-server".to_string());
+      args.push(port.to_string());
+    }
+
+    // Add headless mode if requested
+    if headless {
+      args.push("--headless".to_string());
+    }
+
+    // Use -no-remote for browsers that require it for security (Mullvad, Tor) or when remote debugging
    match self.browser_type {
      BrowserType::MullvadBrowser | BrowserType::TorBrowser => {
        args.push("-no-remote".to_string());
@@ -554,7 +632,11 @@ impl Browser for FirefoxBrowser {
      | BrowserType::FirefoxDeveloper
      | BrowserType::Zen
      | BrowserType::Camoufox => {
-        // Don't use -no-remote so we can communicate with existing instances
+        // Use -no-remote when remote debugging to avoid conflicts
+        if remote_debugging_port.is_some() {
+          args.push("-no-remote".to_string());
+        }
+        // Don't use -no-remote for normal launches so we can communicate with existing instances
      }
      _ => {}
    }
@@ -643,6 +725,8 @@ impl Browser for ChromiumBrowser {
    profile_path: &str,
    proxy_settings: Option<&ProxySettings>,
    url: Option<String>,
+    remote_debugging_port: Option<u16>,
+    headless: bool,
  ) -> Result<Vec<String>, Box<dyn std::error::Error>> {
    let mut args = vec![
      format!("--user-data-dir={}", profile_path),
@@ -654,9 +738,19 @@ impl Browser for ChromiumBrowser {
      "--disable-updater".to_string(),
    ];

+    // Add remote debugging if requested
+    if let Some(port) = remote_debugging_port {
+      args.push("--remote-debugging-address=0.0.0.0".to_string());
+      args.push(format!("--remote-debugging-port={port}"));
+    }
+
+    // Add headless mode if requested
+    if headless {
+      args.push("--headless".to_string());
+    }
+
    // Add proxy configuration if provided
    if let Some(proxy) = proxy_settings {
-      // Apply proxy settings
      args.push(format!(
        "--proxy-server=http://{}:{}",
        proxy.host, proxy.port
@@ -742,6 +836,8 @@ impl Browser for CamoufoxBrowser {
    profile_path: &str,
    _proxy_settings: Option<&ProxySettings>,
    url: Option<String>,
+    remote_debugging_port: Option<u16>,
+    headless: bool,
  ) -> Result<Vec<String>, Box<dyn std::error::Error>> {
    // For Camoufox, we handle launching through the camoufox launcher
    // This method won't be used directly, but we provide basic Firefox args as fallback
@@ -751,6 +847,17 @@ impl Browser for CamoufoxBrowser {
      "-no-remote".to_string(),
    ];

+    // Add remote debugging if requested
+    if let Some(port) = remote_debugging_port {
+      args.push("--start-debugger-server".to_string());
+      args.push(port.to_string());
+    }
+
+    // Add headless mode if requested
+    if headless {
+      args.push("--headless".to_string());
+    }
+
    if let Some(url) = url {
      args.push(url);
    }
@@ -893,111 +1000,204 @@ mod tests {
    assert_eq!(BrowserType::TorBrowser.as_str(), "tor-browser");
    assert_eq!(BrowserType::Camoufox.as_str(), "camoufox");

-    // Test from_str
+    // Test from_str - use expect with descriptive messages instead of unwrap
    assert_eq!(
-      BrowserType::from_str("mullvad-browser").unwrap(),
+      BrowserType::from_str("mullvad-browser").expect("mullvad-browser should be valid"),
      BrowserType::MullvadBrowser
    );
    assert_eq!(
-      BrowserType::from_str("firefox").unwrap(),
+      BrowserType::from_str("firefox").expect("firefox should be valid"),
      BrowserType::Firefox
    );
    assert_eq!(
-      BrowserType::from_str("firefox-developer").unwrap(),
+      BrowserType::from_str("firefox-developer").expect("firefox-developer should be valid"),
      BrowserType::FirefoxDeveloper
    );
    assert_eq!(
-      BrowserType::from_str("chromium").unwrap(),
+      BrowserType::from_str("chromium").expect("chromium should be valid"),
      BrowserType::Chromium
    );
-    assert_eq!(BrowserType::from_str("brave").unwrap(), BrowserType::Brave);
-    assert_eq!(BrowserType::from_str("zen").unwrap(), BrowserType::Zen);
    assert_eq!(
-      BrowserType::from_str("tor-browser").unwrap(),
+      BrowserType::from_str("brave").expect("brave should be valid"),
+      BrowserType::Brave
+    );
+    assert_eq!(
+      BrowserType::from_str("zen").expect("zen should be valid"),
+      BrowserType::Zen
+    );
+    assert_eq!(
+      BrowserType::from_str("tor-browser").expect("tor-browser should be valid"),
      BrowserType::TorBrowser
    );
    assert_eq!(
-      BrowserType::from_str("camoufox").unwrap(),
+      BrowserType::from_str("camoufox").expect("camoufox should be valid"),
      BrowserType::Camoufox
    );

-    // Test invalid browser type
-    assert!(BrowserType::from_str("invalid").is_err());
-    assert!(BrowserType::from_str("").is_err());
-    assert!(BrowserType::from_str("Firefox").is_err()); // Case sensitive
+    // Test invalid browser type - these should properly fail
+    let invalid_result = BrowserType::from_str("invalid");
+    assert!(
+      invalid_result.is_err(),
+      "Invalid browser type should return error"
+    );
+
+    let empty_result = BrowserType::from_str("");
+    assert!(empty_result.is_err(), "Empty string should return error");
+
+    let case_sensitive_result = BrowserType::from_str("Firefox");
+    assert!(
+      case_sensitive_result.is_err(),
+      "Case sensitive check should fail"
+    );
  }

  #[test]
  fn test_firefox_launch_args() {
-    // Test regular Firefox (should not use -no-remote)
+    // Test regular Firefox (should not use -no-remote for normal launch)
    let browser = FirefoxBrowser::new(BrowserType::Firefox);
    let args = browser
-      .create_launch_args("/path/to/profile", None, None)
-      .unwrap();
+      .create_launch_args("/path/to/profile", None, None, None, false)
+      .expect("Failed to create launch args for Firefox");
    assert_eq!(args, vec!["-profile", "/path/to/profile"]);
-    assert!(!args.contains(&"-no-remote".to_string()));
+    assert!(
+      !args.contains(&"-no-remote".to_string()),
+      "Firefox should not use -no-remote for normal launch"
+    );

    let args = browser
      .create_launch_args(
        "/path/to/profile",
        None,
        Some("https://example.com".to_string()),
+        None,
+        false,
      )
-      .unwrap();
+      .expect("Failed to create launch args for Firefox with URL");
    assert_eq!(
      args,
      vec!["-profile", "/path/to/profile", "https://example.com"]
    );

-    // Test Mullvad Browser (should use -no-remote)
+    // Test Firefox with remote debugging (should use -no-remote)
+    let args = browser
+      .create_launch_args("/path/to/profile", None, None, Some(9222), false)
+      .expect("Failed to create launch args for Firefox with remote debugging");
+    assert!(
+      args.contains(&"-no-remote".to_string()),
+      "Firefox should use -no-remote for remote debugging"
+    );
+    assert!(
+      args.contains(&"--start-debugger-server".to_string()),
+      "Firefox should include debugger server arg"
+    );
+    assert!(
+      args.contains(&"9222".to_string()),
+      "Firefox should include debugging port"
+    );
+
+    // Test Mullvad Browser (should always use -no-remote)
    let browser = FirefoxBrowser::new(BrowserType::MullvadBrowser);
    let args = browser
-      .create_launch_args("/path/to/profile", None, None)
-      .unwrap();
+      .create_launch_args("/path/to/profile", None, None, None, false)
+      .expect("Failed to create launch args for Mullvad Browser");
    assert_eq!(args, vec!["-profile", "/path/to/profile", "-no-remote"]);

-    // Test Tor Browser (should use -no-remote)
+    // Test Tor Browser (should always use -no-remote)
    let browser = FirefoxBrowser::new(BrowserType::TorBrowser);
    let args = browser
-      .create_launch_args("/path/to/profile", None, None)
-      .unwrap();
+      .create_launch_args("/path/to/profile", None, None, None, false)
+      .expect("Failed to create launch args for Tor Browser");
    assert_eq!(args, vec!["-profile", "/path/to/profile", "-no-remote"]);

-    // Test Zen Browser (should not use -no-remote)
+    // Test Zen Browser (should not use -no-remote for normal launch)
    let browser = FirefoxBrowser::new(BrowserType::Zen);
    let args = browser
-      .create_launch_args("/path/to/profile", None, None)
-      .unwrap();
+      .create_launch_args("/path/to/profile", None, None, None, false)
+      .expect("Failed to create launch args for Zen Browser");
    assert_eq!(args, vec!["-profile", "/path/to/profile"]);
-    assert!(!args.contains(&"-no-remote".to_string()));
+    assert!(
+      !args.contains(&"-no-remote".to_string()),
+      "Zen Browser should not use -no-remote for normal launch"
+    );
+
+    // Test headless mode
+    let args = browser
+      .create_launch_args("/path/to/profile", None, None, None, true)
+      .expect("Failed to create launch args for Zen Browser headless");
+    assert!(
+      args.contains(&"--headless".to_string()),
+      "Browser should include headless flag when requested"
+    );
  }

  #[test]
  fn test_chromium_launch_args() {
    let browser = ChromiumBrowser::new(BrowserType::Chromium);
    let args = browser
-      .create_launch_args("/path/to/profile", None, None)
-      .unwrap();
+      .create_launch_args("/path/to/profile", None, None, None, false)
+      .expect("Failed to create launch args for Chromium");

    // Test that basic required arguments are present
-    assert!(args.contains(&"--user-data-dir=/path/to/profile".to_string()));
-    assert!(args.contains(&"--no-default-browser-check".to_string()));
+    assert!(
+      args.contains(&"--user-data-dir=/path/to/profile".to_string()),
+      "Chromium args should contain user-data-dir"
+    );
+    assert!(
+      args.contains(&"--no-default-browser-check".to_string()),
+      "Chromium args should contain no-default-browser-check"
+    );

    // Test that automatic update disabling arguments are present
-    assert!(args.contains(&"--disable-background-mode".to_string()));
-    assert!(args.contains(&"--disable-component-update".to_string()));
+    assert!(
+      args.contains(&"--disable-background-mode".to_string()),
+      "Chromium args should contain disable-background-mode"
+    );
+    assert!(
+      args.contains(&"--disable-component-update".to_string()),
+      "Chromium args should contain disable-component-update"
+    );

    let args_with_url = browser
      .create_launch_args(
        "/path/to/profile",
        None,
        Some("https://example.com".to_string()),
+        None,
+        false,
      )
-      .unwrap();
-    assert!(args_with_url.contains(&"https://example.com".to_string()));
+      .expect("Failed to create launch args for Chromium with URL");
+    assert!(
+      args_with_url.contains(&"https://example.com".to_string()),
+      "Chromium args should contain the URL"
+    );

    // Verify URL is at the end
-    assert_eq!(args_with_url.last().unwrap(), "https://example.com");
+    assert_eq!(
+      args_with_url.last().expect("Args should not be empty"),
+      "https://example.com"
+    );
+
+    // Test remote debugging
+    let args_with_debug = browser
+      .create_launch_args("/path/to/profile", None, None, Some(9222), false)
+      .expect("Failed to create launch args for Chromium with remote debugging");
+    assert!(
+      args_with_debug.contains(&"--remote-debugging-port=9222".to_string()),
+      "Chromium args should contain remote debugging port"
+    );
+    assert!(
+      args_with_debug.contains(&"--remote-debugging-address=0.0.0.0".to_string()),
+      "Chromium args should contain remote debugging address"
+    );
+
+    // Test headless mode
+    let args_headless = browser
+      .create_launch_args("/path/to/profile", None, None, None, true)
+      .expect("Failed to create launch args for Chromium headless");
+    assert!(
+      args_headless.contains(&"--headless".to_string()),
+      "Chromium args should contain headless flag when requested"
+    );
  }

  #[test]
@@ -1030,16 +1230,45 @@ mod tests {

  #[test]
  fn test_version_downloaded_check() {
-    let temp_dir = TempDir::new().unwrap();
+    let temp_dir = TempDir::new().expect("Failed to create temp directory");
    let binaries_dir = temp_dir.path();

    // Create a mock Firefox browser installation with new path structure: binaries/<browser>/<version>/
    let browser_dir = binaries_dir.join("firefox").join("139.0");
-    fs::create_dir_all(&browser_dir).unwrap();
+    fs::create_dir_all(&browser_dir).expect("Failed to create browser directory");

-    // Create a mock .app directory
-    let app_dir = browser_dir.join("Firefox.app");
-    fs::create_dir_all(&app_dir).unwrap();
+    #[cfg(target_os = "macos")]
+    {
+      // Create a mock .app directory for macOS
+      let app_dir = browser_dir.join("Firefox.app");
+      fs::create_dir_all(&app_dir).expect("Failed to create Firefox.app directory");
+    }
+
+    #[cfg(target_os = "linux")]
+    {
+      // Create a mock firefox subdirectory and executable for Linux
+      let firefox_subdir = browser_dir.join("firefox");
+      fs::create_dir_all(&firefox_subdir).expect("Failed to create firefox subdirectory");
+      let executable_path = firefox_subdir.join("firefox");
+      fs::write(&executable_path, "mock executable").expect("Failed to write mock executable");
+
+      // Set executable permissions on Linux
+      use std::os::unix::fs::PermissionsExt;
+      let mut permissions = executable_path
+        .metadata()
+        .expect("Failed to get file metadata")
+        .permissions();
+      permissions.set_mode(0o755);
+      fs::set_permissions(&executable_path, permissions)
+        .expect("Failed to set executable permissions");
+    }
+
+    #[cfg(target_os = "windows")]
+    {
+      // Create a mock firefox.exe for Windows
+      let executable_path = browser_dir.join("firefox.exe");
+      fs::write(&executable_path, "mock executable").expect("Failed to write mock executable");
+    }

    let browser = FirefoxBrowser::new(BrowserType::Firefox);
    assert!(browser.is_version_downloaded("139.0", binaries_dir));
@@ -1047,36 +1276,76 @@ mod tests {

    // Test with Chromium browser with new path structure
    let chromium_dir = binaries_dir.join("chromium").join("1465660");
-    fs::create_dir_all(&chromium_dir).unwrap();
-    let chromium_app_dir = chromium_dir.join("Chromium.app");
-    fs::create_dir_all(chromium_app_dir.join("Contents").join("MacOS")).unwrap();
+    fs::create_dir_all(&chromium_dir).expect("Failed to create chromium directory");

-    // Create a mock executable
-    let executable_path = chromium_app_dir
-      .join("Contents")
-      .join("MacOS")
-      .join("Chromium");
-    fs::write(&executable_path, "mock executable").unwrap();
+    #[cfg(target_os = "macos")]
+    {
+      let chromium_app_dir = chromium_dir.join("Chromium.app");
+      fs::create_dir_all(chromium_app_dir.join("Contents").join("MacOS"))
+        .expect("Failed to create Chromium.app structure");
+
+      // Create a mock executable
+      let executable_path = chromium_app_dir
+        .join("Contents")
+        .join("MacOS")
+        .join("Chromium");
+      fs::write(&executable_path, "mock executable")
+        .expect("Failed to write mock Chromium executable");
+    }
+
+    #[cfg(target_os = "linux")]
+    {
+      // Create a mock chromium executable for Linux
+      let executable_path = chromium_dir.join("chromium");
+      fs::write(&executable_path, "mock executable")
+        .expect("Failed to write mock chromium executable");
+
+      // Set executable permissions on Linux
+      use std::os::unix::fs::PermissionsExt;
+      let mut permissions = executable_path
+        .metadata()
+        .expect("Failed to get chromium metadata")
+        .permissions();
+      permissions.set_mode(0o755);
+      fs::set_permissions(&executable_path, permissions)
+        .expect("Failed to set chromium permissions");
+    }
+
+    #[cfg(target_os = "windows")]
+    {
+      // Create a mock chromium.exe for Windows
+      let executable_path = chromium_dir.join("chromium.exe");
+      fs::write(&executable_path, "mock executable").expect("Failed to write mock chromium.exe");
+    }

    let chromium_browser = ChromiumBrowser::new(BrowserType::Chromium);
-    assert!(chromium_browser.is_version_downloaded("1465660", binaries_dir));
-    assert!(!chromium_browser.is_version_downloaded("1465661", binaries_dir));
+    assert!(
+      chromium_browser.is_version_downloaded("1465660", binaries_dir),
+      "Chromium version should be detected as downloaded"
+    );
+    assert!(
+      !chromium_browser.is_version_downloaded("1465661", binaries_dir),
+      "Non-existent Chromium version should not be detected as downloaded"
+    );
  }

  #[test]
  fn test_version_downloaded_no_app_directory() {
-    let temp_dir = TempDir::new().unwrap();
+    let temp_dir = TempDir::new().expect("Failed to create temp directory");
    let binaries_dir = temp_dir.path();

-    // Create browser directory but no .app directory with new path structure
+    // Create browser directory but no proper executable structure
    let browser_dir = binaries_dir.join("firefox").join("139.0");
-    fs::create_dir_all(&browser_dir).unwrap();
+    fs::create_dir_all(&browser_dir).expect("Failed to create browser directory");

-    // Create some other files but no .app
-    fs::write(browser_dir.join("readme.txt"), "Some content").unwrap();
+    // Create some other files but no proper executable structure
+    fs::write(browser_dir.join("readme.txt"), "Some content").expect("Failed to write readme file");

    let browser = FirefoxBrowser::new(BrowserType::Firefox);
-    assert!(!browser.is_version_downloaded("139.0", binaries_dir));
+    assert!(
+      !browser.is_version_downloaded("139.0", binaries_dir),
+      "Firefox version should not be detected without proper executable structure"
+    );
  }

  #[test]
@@ -1101,16 +1370,20 @@ mod tests {
    };

    // Test that it can be serialized (implements Serialize)
-    let json = serde_json::to_string(&proxy).unwrap();
-    assert!(json.contains("127.0.0.1"));
-    assert!(json.contains("8080"));
-    assert!(json.contains("http"));
+    let json = serde_json::to_string(&proxy).expect("Failed to serialize proxy settings");
+    assert!(json.contains("127.0.0.1"), "JSON should contain host IP");
+    assert!(json.contains("8080"), "JSON should contain port number");
+    assert!(json.contains("http"), "JSON should contain proxy type");

    // Test that it can be deserialized (implements Deserialize)
-    let deserialized: ProxySettings = serde_json::from_str(&json).unwrap();
-    assert_eq!(deserialized.proxy_type, proxy.proxy_type);
-    assert_eq!(deserialized.host, proxy.host);
-    assert_eq!(deserialized.port, proxy.port);
+    let deserialized: ProxySettings =
+      serde_json::from_str(&json).expect("Failed to deserialize proxy settings");
+    assert_eq!(
+      deserialized.proxy_type, proxy.proxy_type,
+      "Proxy type should match"
+    );
+    assert_eq!(deserialized.host, proxy.host, "Host should match");
+    assert_eq!(deserialized.port, proxy.port, "Port should match");
  }
 }

@@ -30,18 +30,18 @@ pub struct DownloadInfo {
  pub is_archive: bool, // true for .dmg, .zip, etc.
 }

-pub struct BrowserVersionService {
+pub struct BrowserVersionManager {
  api_client: &'static ApiClient,
 }

-impl BrowserVersionService {
+impl BrowserVersionManager {
  fn new() -> Self {
    Self {
      api_client: ApiClient::instance(),
    }
  }

-  pub fn instance() -> &'static BrowserVersionService {
+  pub fn instance() -> &'static BrowserVersionManager {
    &BROWSER_VERSION_SERVICE
  }

@@ -116,7 +116,17 @@ impl BrowserVersionService {

  /// Get cached browser versions immediately (returns None if no cache exists)
  pub fn get_cached_browser_versions(&self, browser: &str) -> Option<Vec<String>> {
-    self.api_client.load_cached_versions(browser)
+    if browser == "brave" {
+      return self
+        .api_client
+        .get_cached_github_releases("brave")
+        .map(|releases| releases.into_iter().map(|r| r.tag_name).collect());
+    }
+
+    self
+      .api_client
+      .load_cached_versions(browser)
+      .map(|releases| releases.into_iter().map(|r| r.version).collect())
  }

  /// Get cached detailed browser version information immediately
@@ -124,17 +134,29 @@ impl BrowserVersionService {
    &self,
    browser: &str,
  ) -> Option<Vec<BrowserVersionInfo>> {
-    let cached_versions = self.api_client.load_cached_versions(browser)?;
+    if browser == "brave" {
+      if let Some(releases) = self.api_client.get_cached_github_releases("brave") {
+        let detailed_info: Vec<BrowserVersionInfo> = releases
+          .into_iter()
+          .map(|r| BrowserVersionInfo {
+            version: r.tag_name,
+            is_prerelease: r.is_nightly,
+            date: r.published_at,
+          })
+          .collect();
+        return Some(detailed_info);
+      }
+    }
+
+    let cached_releases = self.api_client.load_cached_versions(browser)?;

    // Convert cached versions to detailed info (without dates since cache doesn't store them)
-    let detailed_info: Vec<BrowserVersionInfo> = cached_versions
+    let detailed_info: Vec<BrowserVersionInfo> = cached_releases
      .into_iter()
-      .map(|version| {
-        BrowserVersionInfo {
-          version: version.clone(),
-          is_prerelease: crate::api_client::is_browser_version_nightly(browser, &version, None),
-          date: "".to_string(), // Cache doesn't store dates
-        }
+      .map(|r| BrowserVersionInfo {
+        version: r.version,
+        is_prerelease: r.is_prerelease,
+        date: r.date,
      })
      .collect();

@@ -153,15 +175,6 @@ impl BrowserVersionService {
  ) -> Result<BrowserReleaseTypes, Box<dyn std::error::Error + Send + Sync>> {
    // Try to get from cache first
    if let Some(cached_versions) = self.get_cached_browser_versions_detailed(browser) {
-      // For Chromium, only return stable since all releases are stable
-      if browser == "chromium" {
-        let latest_stable = cached_versions.first().map(|v| v.version.clone());
-        return Ok(BrowserReleaseTypes {
-          stable: latest_stable,
-          nightly: None,
-        });
-      }
-
      let latest_stable = cached_versions
        .iter()
        .find(|v| !v.is_prerelease)
@@ -178,17 +191,6 @@ impl BrowserVersionService {
      });
    }

-    // Fallback to fetching if not cached
-    // For Chromium, only return stable since all releases are stable
-    if browser == "chromium" {
-      let detailed_versions = self.fetch_browser_versions_detailed(browser, false).await?;
-      let latest_stable = detailed_versions.first().map(|v| v.version.clone());
-      return Ok(BrowserReleaseTypes {
-        stable: latest_stable,
-        nightly: None,
-      });
-    }
-
    let detailed_versions = self.fetch_browser_versions_detailed(browser, false).await?;

    let latest_stable = detailed_versions
@@ -230,7 +232,7 @@ impl BrowserVersionService {
      .api_client
      .load_cached_versions(browser)
      .unwrap_or_default();
-    let existing_set: HashSet<String> = existing_versions.into_iter().collect();
+    let existing_set: HashSet<String> = existing_versions.into_iter().map(|r| r.version).collect();

    // Fetch fresh versions from API
    let fresh_versions = match browser {
@@ -262,10 +264,18 @@ impl BrowserVersionService {
    crate::api_client::sort_versions(&mut merged_versions);

    // Save the merged cache (unless explicitly bypassing cache)
-    if !no_caching {
+    if !no_caching && browser != "brave" {
+      let merged_releases: Vec<BrowserRelease> = merged_versions
+        .iter()
+        .map(|v| BrowserRelease {
+          version: v.clone(),
+          date: "".to_string(),
+          is_prerelease: crate::api_client::is_browser_version_nightly(browser, v, None),
+        })
+        .collect();
      if let Err(e) = self
        .api_client
-        .save_cached_versions(browser, &merged_versions)
+        .save_cached_versions(browser, &merged_releases)
      {
        eprintln!("Failed to save merged cache for {browser}: {e}");
      }
@@ -498,7 +508,7 @@ impl BrowserVersionService {
      .api_client
      .load_cached_versions(browser)
      .unwrap_or_default();
-    let existing_set: HashSet<String> = existing_versions.into_iter().collect();
+    let existing_set: HashSet<String> = existing_versions.into_iter().map(|r| r.version).collect();

    // Fetch new versions (always bypass cache for background updates)
    let new_versions = self.fetch_browser_versions(browser, true).await?;
@@ -515,7 +525,15 @@ impl BrowserVersionService {
    sort_versions(&mut all_versions);

    // Save the updated cache
-    if let Err(e) = self.api_client.save_cached_versions(browser, &all_versions) {
+    let releases: Vec<BrowserRelease> = all_versions
+      .iter()
+      .map(|v| BrowserRelease {
+        version: v.clone(),
+        date: "".to_string(),
+        is_prerelease: crate::api_client::is_browser_version_nightly(browser, v, None),
+      })
+      .collect();
+    if let Err(e) = self.api_client.save_cached_versions(browser, &releases) {
      eprintln!("Failed to save updated cache for {browser}: {e}");
    }

@@ -893,6 +911,20 @@ impl BrowserVersionService {
    no_caching: bool,
  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
    let releases = self.fetch_brave_releases_detailed(no_caching).await?;
+    // Persist a lightweight versions cache with accurate prerelease info for Brave
+    let converted: Vec<BrowserRelease> = releases
+      .iter()
+      .map(|r| BrowserRelease {
+        version: r.tag_name.clone(),
+        date: r.published_at.clone(),
+        is_prerelease: r.is_nightly,
+      })
+      .collect();
+    // Always save so that other callers without release_name can classify correctly
+    if let Err(e) = self.api_client.save_cached_versions("brave", &converted) {
+      eprintln!("Failed to persist Brave versions cache: {e}");
+    }
+
    Ok(releases.into_iter().map(|r| r.tag_name).collect())
  }

@@ -900,10 +932,25 @@ impl BrowserVersionService {
    &self,
    no_caching: bool,
  ) -> Result<Vec<GithubRelease>, Box<dyn std::error::Error + Send + Sync>> {
-    self
+    let releases = self
      .api_client
      .fetch_brave_releases_with_caching(no_caching)
-      .await
+      .await?;
+
+    // Save a parallel versions cache for Brave with accurate prerelease flags
+    let converted: Vec<BrowserRelease> = releases
+      .iter()
+      .map(|r| BrowserRelease {
+        version: r.tag_name.clone(),
+        date: r.published_at.clone(),
+        is_prerelease: r.is_nightly,
+      })
+      .collect();
+    if let Err(e) = self.api_client.save_cached_versions("brave", &converted) {
+      eprintln!("Failed to persist Brave versions cache: {e}");
+    }
+
+    Ok(releases)
  }

  async fn fetch_chromium_versions(
@@ -961,6 +1008,17 @@ impl BrowserVersionService {
  }
 }

+#[tauri::command]
+pub async fn get_browser_release_types(
+  browser_str: String,
+) -> Result<crate::browser_version_manager::BrowserReleaseTypes, String> {
+  let service = BrowserVersionManager::instance();
+  service
+    .get_browser_release_types(&browser_str)
+    .await
+    .map_err(|e| format!("Failed to get release types: {e}"))
+}
+
 #[cfg(test)]
 mod tests {
  use super::*;
@@ -982,13 +1040,13 @@ mod tests {
    )
  }

-  fn create_test_service(_api_client: ApiClient) -> &'static BrowserVersionService {
-    BrowserVersionService::instance()
+  fn create_test_service(_api_client: ApiClient) -> &'static BrowserVersionManager {
+    BrowserVersionManager::instance()
  }

  #[tokio::test]
-  async fn test_browser_version_service_creation() {
-    let _ = BrowserVersionService::instance();
+  async fn test_browser_version_manager_creation() {
+    let _ = BrowserVersionManager::instance();
    // Test passes if we can create the service without panicking
  }

@@ -1014,61 +1072,200 @@ mod tests {

  #[test]
  fn test_get_download_info() {
-    let service = BrowserVersionService::instance();
+    let service = BrowserVersionManager::instance();

-    // Test Firefox
+    // Test Firefox - platform-specific expectations
    let firefox_info = service.get_download_info("firefox", "139.0").unwrap();
-    assert_eq!(firefox_info.filename, "Firefox 139.0.dmg");
+
+    #[cfg(target_os = "macos")]
+    {
+      assert_eq!(firefox_info.filename, "Firefox 139.0.dmg");
+      assert!(firefox_info.is_archive);
+    }
+
+    #[cfg(target_os = "linux")]
+    {
+      assert_eq!(firefox_info.filename, "firefox-139.0.tar.xz");
+      assert!(firefox_info.is_archive);
+    }
+
+    #[cfg(target_os = "windows")]
+    {
+      assert_eq!(firefox_info.filename, "Firefox Setup 139.0.exe");
+      assert!(!firefox_info.is_archive);
+    }
+
    assert!(firefox_info
      .url
      .contains("download-installer.cdn.mozilla.net"));
    assert!(firefox_info.url.contains("/pub/firefox/releases/139.0/"));
-    assert!(firefox_info.is_archive);

    // Test Firefox Developer
    let firefox_dev_info = service
      .get_download_info("firefox-developer", "139.0b1")
      .unwrap();
-    assert_eq!(firefox_dev_info.filename, "Firefox 139.0b1.dmg");
+
+    #[cfg(target_os = "macos")]
+    {
+      assert_eq!(firefox_dev_info.filename, "Firefox 139.0b1.dmg");
+      assert!(firefox_dev_info.is_archive);
+    }
+
+    #[cfg(target_os = "linux")]
+    {
+      assert_eq!(firefox_dev_info.filename, "firefox-139.0b1.tar.xz");
+      assert!(firefox_dev_info.is_archive);
+    }
+
+    #[cfg(target_os = "windows")]
+    {
+      assert_eq!(firefox_dev_info.filename, "Firefox Setup 139.0b1.exe");
+      assert!(!firefox_dev_info.is_archive);
+    }
+
    assert!(firefox_dev_info
      .url
      .contains("download-installer.cdn.mozilla.net"));
    assert!(firefox_dev_info
      .url
      .contains("/pub/devedition/releases/139.0b1/"));
-    assert!(firefox_dev_info.is_archive);

    // Test Mullvad Browser
    let mullvad_info = service
      .get_download_info("mullvad-browser", "14.5a6")
      .unwrap();
-    assert_eq!(mullvad_info.filename, "mullvad-browser-macos-14.5a6.dmg");
-    assert!(mullvad_info.url.contains("mullvad-browser-macos-14.5a6"));
-    assert!(mullvad_info.is_archive);
+
+    #[cfg(target_os = "macos")]
+    {
+      assert_eq!(mullvad_info.filename, "mullvad-browser-macos-14.5a6.dmg");
+      assert!(mullvad_info.url.contains("mullvad-browser-macos-14.5a6"));
+      assert!(mullvad_info.is_archive);
+    }
+
+    #[cfg(target_os = "linux")]
+    {
+      assert_eq!(
+        mullvad_info.filename,
+        "mullvad-browser-x86_64-14.5a6.tar.xz"
+      );
+      assert!(mullvad_info.url.contains("mullvad-browser-x86_64-14.5a6"));
+      assert!(mullvad_info.is_archive);
+    }
+
+    #[cfg(target_os = "windows")]
+    {
+      assert_eq!(
+        mullvad_info.filename,
+        "mullvad-browser-windows-x86_64-14.5a6.exe"
+      );
+      assert!(mullvad_info
+        .url
+        .contains("mullvad-browser-windows-x86_64-14.5a6"));
+      assert!(!mullvad_info.is_archive);
+    }

    // Test Zen Browser
    let zen_info = service.get_download_info("zen", "1.11b").unwrap();
-    assert_eq!(zen_info.filename, "zen-1.11b.dmg");
-    assert!(zen_info.url.contains("zen.macos-universal.dmg"));
-    assert!(zen_info.is_archive);
+
+    #[cfg(target_os = "macos")]
+    {
+      assert_eq!(zen_info.filename, "zen-1.11b.dmg");
+      assert!(zen_info.url.contains("zen.macos-universal.dmg"));
+      assert!(zen_info.is_archive);
+    }
+
+    #[cfg(target_os = "linux")]
+    {
+      assert_eq!(zen_info.filename, "zen-1.11b-x86_64.tar.xz");
+      assert!(zen_info.url.contains("zen.linux-x86_64.tar.xz"));
+      assert!(zen_info.is_archive);
+    }
+
+    #[cfg(target_os = "windows")]
+    {
+      assert_eq!(zen_info.filename, "zen-1.11b.exe");
+      assert!(zen_info.url.contains("zen.installer.exe"));
+      assert!(!zen_info.is_archive);
+    }

    // Test Tor Browser
    let tor_info = service.get_download_info("tor-browser", "14.0.4").unwrap();
-    assert_eq!(tor_info.filename, "tor-browser-macos-14.0.4.dmg");
-    assert!(tor_info.url.contains("tor-browser-macos-14.0.4"));
-    assert!(tor_info.is_archive);
+
+    #[cfg(target_os = "macos")]
+    {
+      assert_eq!(tor_info.filename, "tor-browser-macos-14.0.4.dmg");
+      assert!(tor_info.url.contains("tor-browser-macos-14.0.4"));
+      assert!(tor_info.is_archive);
+    }
+
+    #[cfg(target_os = "linux")]
+    {
+      assert_eq!(tor_info.filename, "tor-browser-linux-x86_64-14.0.4.tar.xz");
+      assert!(tor_info.url.contains("tor-browser-linux-x86_64-14.0.4"));
+      assert!(tor_info.is_archive);
+    }
+
+    #[cfg(target_os = "windows")]
+    {
+      assert_eq!(
+        tor_info.filename,
+        "tor-browser-windows-x86_64-portable-14.0.4.exe"
+      );
+      assert!(tor_info
+        .url
+        .contains("tor-browser-windows-x86_64-portable-14.0.4"));
+      assert!(!tor_info.is_archive);
+    }

    // Test Chromium
    let chromium_info = service.get_download_info("chromium", "1465660").unwrap();
-    assert_eq!(chromium_info.filename, "chromium-1465660-mac.zip");
-    assert!(chromium_info.url.contains("chrome-mac.zip"));
+
+    #[cfg(target_os = "macos")]
+    {
+      assert_eq!(chromium_info.filename, "chromium-1465660-mac.zip");
+      assert!(chromium_info.url.contains("chrome-mac.zip"));
+    }
+
+    #[cfg(target_os = "linux")]
+    {
+      assert_eq!(chromium_info.filename, "chromium-1465660-linux.zip");
+      assert!(chromium_info.url.contains("chrome-linux.zip"));
+    }
+
+    #[cfg(target_os = "windows")]
+    {
+      assert_eq!(chromium_info.filename, "chromium-1465660-win.zip");
+      assert!(chromium_info.url.contains("chrome-win.zip"));
+    }
+
    assert!(chromium_info.is_archive);

    // Test Brave - Note: Brave uses dynamic URL resolution, so get_download_info provides a template URL
    let brave_info = service.get_download_info("brave", "v1.81.9").unwrap();
-    assert_eq!(brave_info.filename, "Brave-Browser-universal.dmg");
-    assert_eq!(brave_info.url, "https://github.com/brave/brave-browser/releases/download/v1.81.9/Brave-Browser-universal.dmg");
-    assert!(brave_info.is_archive);
+
+    #[cfg(target_os = "macos")]
+    {
+      assert_eq!(brave_info.filename, "Brave-Browser-universal.dmg");
+      assert_eq!(brave_info.url, "https://github.com/brave/brave-browser/releases/download/v1.81.9/Brave-Browser-universal.dmg");
+      assert!(brave_info.is_archive);
+    }
+
+    #[cfg(target_os = "linux")]
+    {
+      assert_eq!(brave_info.filename, "brave-browser-v1.81.9-linux-amd64.zip");
+      assert_eq!(brave_info.url, "https://github.com/brave/brave-browser/releases/download/v1.81.9/brave-browser-v1.81.9-linux-amd64.zip");
+      assert!(brave_info.is_archive);
+    }
+
+    #[cfg(target_os = "windows")]
+    {
+      assert_eq!(brave_info.filename, "brave-v1.81.9.exe");
+      assert_eq!(
+        brave_info.url,
+        "https://github.com/brave/brave-browser/releases/download/v1.81.9/brave-v1.81.9.exe"
+      );
+      assert!(!brave_info.is_archive);
+    }

    // Test unsupported browser
    let unsupported_result = service.get_download_info("unsupported", "1.0.0");
@@ -1078,7 +1275,102 @@ mod tests {
  }
 }

+#[tauri::command]
+pub fn get_supported_browsers() -> Result<Vec<String>, String> {
+  let service = BrowserVersionManager::instance();
+  Ok(service.get_supported_browsers())
+}
+
+#[tauri::command]
+pub fn is_browser_supported_on_platform(browser_str: String) -> Result<bool, String> {
+  let service = BrowserVersionManager::instance();
+  service
+    .is_browser_supported(&browser_str)
+    .map_err(|e| format!("Failed to check browser support: {e}"))
+}
+
+#[tauri::command]
+pub async fn fetch_browser_versions_cached_first(
+  browser_str: String,
+) -> Result<Vec<BrowserVersionInfo>, String> {
+  let service = BrowserVersionManager::instance();
+
+  // Get cached versions immediately if available
+  if let Some(cached_versions) = service.get_cached_browser_versions_detailed(&browser_str) {
+    // Check if we should update cache in background
+    if service.should_update_cache(&browser_str) {
+      // Start background update but return cached data immediately
+      let service_clone = BrowserVersionManager::instance();
+      let browser_str_clone = browser_str.clone();
+      tokio::spawn(async move {
+        if let Err(e) = service_clone
+          .fetch_browser_versions_detailed(&browser_str_clone, false)
+          .await
+        {
+          eprintln!("Background version update failed for {browser_str_clone}: {e}");
+        }
+      });
+    }
+    Ok(cached_versions)
+  } else {
+    // No cache available, fetch fresh
+    service
+      .fetch_browser_versions_detailed(&browser_str, false)
+      .await
+      .map_err(|e| format!("Failed to fetch detailed browser versions: {e}"))
+  }
+}
+
+#[tauri::command]
+pub async fn fetch_browser_versions_with_count_cached_first(
+  browser_str: String,
+) -> Result<BrowserVersionsResult, String> {
+  let service = BrowserVersionManager::instance();
+
+  // Get cached versions immediately if available
+  if let Some(cached_versions) = service.get_cached_browser_versions(&browser_str) {
+    // Check if we should update cache in background
+    if service.should_update_cache(&browser_str) {
+      // Start background update but return cached data immediately
+      let service_clone = BrowserVersionManager::instance();
+      let browser_str_clone = browser_str.clone();
+      tokio::spawn(async move {
+        if let Err(e) = service_clone
+          .fetch_browser_versions_with_count(&browser_str_clone, false)
+          .await
+        {
+          eprintln!("Background version update failed for {browser_str_clone}: {e}");
+        }
+      });
+    }
+
+    // Return cached data in the expected format
+    Ok(BrowserVersionsResult {
+      versions: cached_versions.clone(),
+      new_versions_count: None, // No new versions when returning cached data
+      total_versions_count: cached_versions.len(),
+    })
+  } else {
+    // No cache available, fetch fresh
+    service
+      .fetch_browser_versions_with_count(&browser_str, false)
+      .await
+      .map_err(|e| format!("Failed to fetch browser versions: {e}"))
+  }
+}
+
+#[tauri::command]
+pub async fn fetch_browser_versions_with_count(
+  browser_str: String,
+) -> Result<BrowserVersionsResult, String> {
+  let service = BrowserVersionManager::instance();
+  service
+    .fetch_browser_versions_with_count(&browser_str, false)
+    .await
+    .map_err(|e| format!("Failed to fetch browser versions: {e}"))
+}
+
 // Global singleton instance
 lazy_static::lazy_static! {
-  static ref BROWSER_VERSION_SERVICE: BrowserVersionService = BrowserVersionService::new();
+  static ref BROWSER_VERSION_SERVICE: BrowserVersionManager = BrowserVersionManager::new();
 }
@@ -1,8 +1,10 @@
+use crate::browser_runner::BrowserRunner;
 use crate::profile::BrowserProfile;
+use directories::BaseDirs;
 use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
+use std::path::PathBuf;
 use std::sync::Arc;
-
 use tauri::AppHandle;
 use tauri_plugin_shell::ShellExt;
 use tokio::sync::Mutex as AsyncMutex;
@@ -12,6 +14,8 @@ pub struct CamoufoxConfig {
  pub proxy: Option<String>,
  pub screen_max_width: Option<u32>,
  pub screen_max_height: Option<u32>,
+  pub screen_min_width: Option<u32>,
+  pub screen_min_height: Option<u32>,
  pub geoip: Option<serde_json::Value>, // Can be String or bool
  pub block_images: Option<bool>,
  pub block_webrtc: Option<bool>,
@@ -26,6 +30,8 @@ impl Default for CamoufoxConfig {
      proxy: None,
      screen_max_width: None,
      screen_max_height: None,
+      screen_min_width: None,
+      screen_min_height: None,
      geoip: Some(serde_json::Value::Bool(true)),
      block_images: None,
      block_webrtc: None,
@@ -56,36 +62,38 @@ struct CamoufoxInstance {
  url: Option<String>,
 }

-struct CamoufoxNodecarLauncherInner {
+struct CamoufoxManagerInner {
  instances: HashMap<String, CamoufoxInstance>,
 }

-pub struct CamoufoxNodecarLauncher {
-  inner: Arc<AsyncMutex<CamoufoxNodecarLauncherInner>>,
+pub struct CamoufoxManager {
+  inner: Arc<AsyncMutex<CamoufoxManagerInner>>,
+  base_dirs: BaseDirs,
 }

-impl CamoufoxNodecarLauncher {
+impl CamoufoxManager {
  fn new() -> Self {
    Self {
-      inner: Arc::new(AsyncMutex::new(CamoufoxNodecarLauncherInner {
+      inner: Arc::new(AsyncMutex::new(CamoufoxManagerInner {
        instances: HashMap::new(),
      })),
+      base_dirs: BaseDirs::new().expect("Failed to get base directories"),
    }
  }

-  pub fn instance() -> &'static CamoufoxNodecarLauncher {
+  pub fn instance() -> &'static CamoufoxManager {
    &CAMOUFOX_NODECAR_LAUNCHER
  }

-  /// Create a test configuration
-  #[allow(dead_code)]
-  pub fn create_test_config() -> CamoufoxConfig {
-    CamoufoxConfig {
-      screen_max_width: Some(1440),
-      screen_max_height: Some(900),
-      geoip: Some(serde_json::Value::Bool(true)),
-      ..Default::default()
-    }
+  pub fn get_profiles_dir(&self) -> PathBuf {
+    let mut path = self.base_dirs.data_local_dir().to_path_buf();
+    path.push(if cfg!(debug_assertions) {
+      "DonutBrowserDev"
+    } else {
+      "DonutBrowser"
+    });
+    path.push("profiles");
+    path
  }

  /// Generate Camoufox fingerprint configuration during profile creation
@@ -102,8 +110,8 @@ impl CamoufoxNodecarLauncher {
      path.clone()
    } else {
      // Use the browser runner helper with the real profile
-      let browser_runner = crate::browser_runner::BrowserRunner::instance();
-      browser_runner
+      // Use self.browser_runner instead of instance()
+      BrowserRunner::instance()
        .get_browser_executable_path(profile)
        .map_err(|e| format!("Failed to get Camoufox executable path: {e}"))?
        .to_string_lossy()
@@ -134,6 +142,14 @@ impl CamoufoxNodecarLauncher {
      config_args.extend(["--max-height".to_string(), max_height.to_string()]);
    }

+    if let Some(min_width) = config.screen_min_width {
+      config_args.extend(["--min-width".to_string(), min_width.to_string()]);
+    }
+
+    if let Some(min_height) = config.screen_min_height {
+      config_args.extend(["--min-height".to_string(), min_height.to_string()]);
+    }
+
    // Add block_* options
    if let Some(block_images) = config.block_images {
      if block_images {
@@ -201,8 +217,8 @@ impl CamoufoxNodecarLauncher {
      path.clone()
    } else {
      // Use the browser runner helper with the real profile
-      let browser_runner = crate::browser_runner::BrowserRunner::instance();
-      browser_runner
+      // Use self.browser_runner instead of instance()
+      BrowserRunner::instance()
        .get_browser_executable_path(profile)
        .map_err(|e| format!("Failed to get Camoufox executable path: {e}"))?
        .to_string_lossy()
@@ -430,7 +446,7 @@ impl CamoufoxNodecarLauncher {
  }
 }

-impl CamoufoxNodecarLauncher {
+impl CamoufoxManager {
  pub async fn launch_camoufox_profile_nodecar(
    &self,
    app_handle: AppHandle,
@@ -439,8 +455,7 @@ impl CamoufoxNodecarLauncher {
    url: Option<String>,
  ) -> Result<CamoufoxLaunchResult, String> {
    // Get profile path
-    let browser_runner = crate::browser_runner::BrowserRunner::instance();
-    let profiles_dir = browser_runner.get_profiles_dir();
+    let profiles_dir = self.get_profiles_dir();
    let profile_path = profile.get_profile_data_path(&profiles_dir);
    let profile_path_str = profile_path.to_string_lossy();

@@ -470,16 +485,6 @@ impl CamoufoxNodecarLauncher {
 mod tests {
  use super::*;

-  #[test]
-  fn test_camoufox_config_creation() {
-    let test_config = CamoufoxNodecarLauncher::create_test_config();
-
-    // Verify test config has expected values
-    assert_eq!(test_config.screen_max_width, Some(1440));
-    assert_eq!(test_config.screen_max_height, Some(900));
-    assert_eq!(test_config.geoip, Some(serde_json::Value::Bool(true)));
-  }
-
  #[test]
  fn test_default_config() {
    let default_config = CamoufoxConfig::default();
@@ -493,5 +498,5 @@ mod tests {

 // Global singleton instance
 lazy_static::lazy_static! {
-  static ref CAMOUFOX_NODECAR_LAUNCHER: CamoufoxNodecarLauncher = CamoufoxNodecarLauncher::new();
+  static ref CAMOUFOX_NODECAR_LAUNCHER: CamoufoxManager = CamoufoxManager::new();
 }
@@ -1,10 +1,10 @@
 use tauri::command;

-pub struct DefaultBrowser;
+pub struct DefaultBrowser {}

 impl DefaultBrowser {
  fn new() -> Self {
-    Self
+    Self {}
  }

  pub fn instance() -> &'static DefaultBrowser {
@@ -38,38 +38,6 @@ impl DefaultBrowser {
    #[cfg(not(any(target_os = "macos", target_os = "windows", target_os = "linux")))]
    Err("Unsupported platform".to_string())
  }
-
-  pub async fn open_url_with_profile(
-    &self,
-    app_handle: tauri::AppHandle,
-    profile_name: String,
-    url: String,
-  ) -> Result<(), String> {
-    let runner = crate::browser_runner::BrowserRunner::instance();
-
-    // Get the profile by name
-    let profiles = runner
-      .list_profiles()
-      .map_err(|e| format!("Failed to list profiles: {e}"))?;
-    let profile = profiles
-      .into_iter()
-      .find(|p| p.name == profile_name)
-      .ok_or_else(|| format!("Profile '{profile_name}' not found"))?;
-
-    println!("Opening URL '{url}' with profile '{profile_name}'");
-
-    // Use launch_or_open_url which handles both launching new instances and opening in existing ones
-    runner
-      .launch_or_open_url(app_handle, &profile, Some(url.clone()), None)
-      .await
-      .map_err(|e| {
-        println!("Failed to open URL with profile '{profile_name}': {e}");
-        format!("Failed to open URL with profile: {e}")
-      })?;
-
-    println!("Successfully opened URL '{url}' with profile '{profile_name}'");
-    Ok(())
-  }
 }

 #[cfg(target_os = "macos")]
@@ -570,15 +538,3 @@ pub async fn set_as_default_browser() -> Result<(), String> {
  let default_browser = DefaultBrowser::instance();
  default_browser.set_as_default_browser().await
 }
-
-#[tauri::command]
-pub async fn open_url_with_profile(
-  app_handle: tauri::AppHandle,
-  profile_name: String,
-  url: String,
-) -> Result<(), String> {
-  let default_browser = DefaultBrowser::instance();
-  default_browser
-    .open_url_with_profile(app_handle, profile_name, url)
-    .await
-}
@@ -1,537 +0,0 @@
-use directories::BaseDirs;
-use serde::{Deserialize, Serialize};
-use std::collections::HashMap;
-use std::fs;
-use std::path::PathBuf;
-use std::sync::Mutex;
-
-#[derive(Debug, Serialize, Deserialize, Clone)]
-pub struct DownloadedBrowserInfo {
-  pub browser: String,
-  pub version: String,
-  pub file_path: PathBuf,
-}
-
-#[derive(Debug, Serialize, Deserialize, Default)]
-struct RegistryData {
-  pub browsers: HashMap<String, HashMap<String, DownloadedBrowserInfo>>, // browser -> version -> info
-}
-
-pub struct DownloadedBrowsersRegistry {
-  data: Mutex<RegistryData>,
-}
-
-impl DownloadedBrowsersRegistry {
-  fn new() -> Self {
-    Self {
-      data: Mutex::new(RegistryData::default()),
-    }
-  }
-
-  pub fn instance() -> &'static DownloadedBrowsersRegistry {
-    &DOWNLOADED_BROWSERS_REGISTRY
-  }
-
-  pub fn load(&self) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
-    let registry_path = Self::get_registry_path()?;
-
-    if !registry_path.exists() {
-      return Ok(());
-    }
-
-    let content = fs::read_to_string(&registry_path)?;
-    let registry_data: RegistryData = serde_json::from_str(&content)?;
-
-    let mut data = self.data.lock().unwrap();
-    *data = registry_data;
-    Ok(())
-  }
-
-  pub fn save(&self) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
-    let registry_path = Self::get_registry_path()?;
-
-    // Ensure parent directory exists
-    if let Some(parent) = registry_path.parent() {
-      fs::create_dir_all(parent)?;
-    }
-
-    let data = self.data.lock().unwrap();
-    let content = serde_json::to_string_pretty(&*data)?;
-    fs::write(&registry_path, content)?;
-    Ok(())
-  }
-
-  fn get_registry_path() -> Result<PathBuf, Box<dyn std::error::Error + Send + Sync>> {
-    let base_dirs = BaseDirs::new().ok_or("Failed to get base directories")?;
-    let mut path = base_dirs.data_local_dir().to_path_buf();
-    path.push(if cfg!(debug_assertions) {
-      "DonutBrowserDev"
-    } else {
-      "DonutBrowser"
-    });
-    path.push("data");
-    path.push("downloaded_browsers.json");
-    Ok(path)
-  }
-
-  pub fn add_browser(&self, info: DownloadedBrowserInfo) {
-    let mut data = self.data.lock().unwrap();
-    data
-      .browsers
-      .entry(info.browser.clone())
-      .or_default()
-      .insert(info.version.clone(), info);
-  }
-
-  pub fn remove_browser(&self, browser: &str, version: &str) -> Option<DownloadedBrowserInfo> {
-    let mut data = self.data.lock().unwrap();
-    data.browsers.get_mut(browser)?.remove(version)
-  }
-
-  pub fn is_browser_downloaded(&self, browser: &str, version: &str) -> bool {
-    let data = self.data.lock().unwrap();
-    data
-      .browsers
-      .get(browser)
-      .and_then(|versions| versions.get(version))
-      .is_some()
-  }
-
-  pub fn get_downloaded_versions(&self, browser: &str) -> Vec<String> {
-    let data = self.data.lock().unwrap();
-    data
-      .browsers
-      .get(browser)
-      .map(|versions| versions.keys().cloned().collect())
-      .unwrap_or_default()
-  }
-
-  pub fn mark_download_started(&self, browser: &str, version: &str, file_path: PathBuf) {
-    let info = DownloadedBrowserInfo {
-      browser: browser.to_string(),
-      version: version.to_string(),
-      file_path,
-    };
-    self.add_browser(info);
-  }
-
-  pub fn mark_download_completed(&self, browser: &str, version: &str) -> Result<(), String> {
-    let data = self.data.lock().unwrap();
-    if data
-      .browsers
-      .get(browser)
-      .and_then(|versions| versions.get(version))
-      .is_some()
-    {
-      Ok(())
-    } else {
-      Err(format!("Browser {browser}:{version} not found in registry"))
-    }
-  }
-
-  pub fn cleanup_failed_download(
-    &self,
-    browser: &str,
-    version: &str,
-  ) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
-    if let Some(info) = self.remove_browser(browser, version) {
-      // Clean up any files that might have been left behind
-      if info.file_path.exists() {
-        if info.file_path.is_dir() {
-          fs::remove_dir_all(&info.file_path)?;
-        } else {
-          fs::remove_file(&info.file_path)?;
-        }
-      }
-
-      // Also clean up the browser directory if it exists
-      let base_dirs = BaseDirs::new().ok_or("Failed to get base directories")?;
-      let mut browser_dir = base_dirs.data_local_dir().to_path_buf();
-      browser_dir.push(if cfg!(debug_assertions) {
-        "DonutBrowserDev"
-      } else {
-        "DonutBrowser"
-      });
-      browser_dir.push("binaries");
-      browser_dir.push(browser);
-      browser_dir.push(version);
-
-      if browser_dir.exists() {
-        fs::remove_dir_all(&browser_dir)?;
-      }
-    }
-    Ok(())
-  }
-
-  /// Find and remove unused browser binaries that are not referenced by any active profiles
-  pub fn cleanup_unused_binaries(
-    &self,
-    active_profiles: &[(String, String)], // (browser, version) pairs
-    running_profiles: &[(String, String)], // (browser, version) pairs for running profiles
-  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
-    let active_set: std::collections::HashSet<(String, String)> =
-      active_profiles.iter().cloned().collect();
-    let running_set: std::collections::HashSet<(String, String)> =
-      running_profiles.iter().cloned().collect();
-    let mut cleaned_up = Vec::new();
-
-    // Collect all downloaded browsers that are not in active profiles
-    let mut to_remove = Vec::new();
-    {
-      let data = self.data.lock().unwrap();
-      for (browser, versions) in &data.browsers {
-        for version in versions.keys() {
-          let browser_version = (browser.clone(), version.clone());
-
-          // Don't remove if it's used by any active profile
-          if active_set.contains(&browser_version) {
-            println!("Keeping: {browser} {version} (in use by profile)");
-            continue;
-          }
-
-          // Don't remove if it's currently running (even if not in active profiles)
-          if running_set.contains(&browser_version) {
-            println!("Keeping: {browser} {version} (currently running)");
-            continue;
-          }
-
-          // Mark for removal
-          to_remove.push(browser_version);
-          println!("Marking for removal: {browser} {version} (not used by any profile)");
-        }
-      }
-    }
-
-    // Remove unused binaries
-    for (browser, version) in to_remove {
-      if let Err(e) = self.cleanup_failed_download(&browser, &version) {
-        eprintln!("Failed to cleanup unused binary {browser}:{version}: {e}");
-      } else {
-        cleaned_up.push(format!("{browser} {version}"));
-        println!("Successfully removed unused binary: {browser} {version}");
-      }
-    }
-
-    if cleaned_up.is_empty() {
-      println!("No unused binaries found to clean up");
-    } else {
-      println!("Cleaned up {} unused binaries", cleaned_up.len());
-    }
-
-    Ok(cleaned_up)
-  }
-
-  /// Get all browsers and versions referenced by active profiles
-  pub fn get_active_browser_versions(
-    &self,
-    profiles: &[crate::profile::BrowserProfile],
-  ) -> Vec<(String, String)> {
-    profiles
-      .iter()
-      .map(|profile| (profile.browser.clone(), profile.version.clone()))
-      .collect()
-  }
-
-  /// Verify that all registered browsers actually exist on disk and clean up stale entries
-  pub fn verify_and_cleanup_stale_entries(
-    &self,
-    browser_runner: &crate::browser_runner::BrowserRunner,
-  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
-    use crate::browser::{create_browser, BrowserType};
-    let mut cleaned_up = Vec::new();
-    let binaries_dir = browser_runner.get_binaries_dir();
-
-    let browsers_to_check: Vec<(String, String)> = {
-      let data = self.data.lock().unwrap();
-      data
-        .browsers
-        .iter()
-        .flat_map(|(browser, versions)| {
-          versions
-            .keys()
-            .map(|version| (browser.clone(), version.clone()))
-        })
-        .collect()
-    };
-
-    for (browser_str, version) in browsers_to_check {
-      if let Ok(browser_type) = BrowserType::from_str(&browser_str) {
-        let browser = create_browser(browser_type);
-        if !browser.is_version_downloaded(&version, &binaries_dir) {
-          // Files don't exist, remove from registry
-          if let Some(_removed) = self.remove_browser(&browser_str, &version) {
-            cleaned_up.push(format!("{browser_str} {version}"));
-            println!("Removed stale registry entry for {browser_str} {version}");
-          }
-        }
-      }
-    }
-
-    if !cleaned_up.is_empty() {
-      self.save()?;
-    }
-
-    Ok(cleaned_up)
-  }
-
-  /// Get all browsers and versions that are currently running
-  pub fn get_running_browser_versions(
-    &self,
-    profiles: &[crate::profile::BrowserProfile],
-  ) -> Vec<(String, String)> {
-    profiles
-      .iter()
-      .filter(|profile| profile.process_id.is_some())
-      .map(|profile| (profile.browser.clone(), profile.version.clone()))
-      .collect()
-  }
-
-  /// Scan the binaries directory and sync with registry
-  /// This ensures the registry reflects what's actually on disk
-  pub fn sync_with_binaries_directory(
-    &self,
-    binaries_dir: &std::path::Path,
-  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
-    let mut changes = Vec::new();
-
-    if !binaries_dir.exists() {
-      return Ok(changes);
-    }
-
-    // Scan for actual browser directories
-    for browser_entry in fs::read_dir(binaries_dir)? {
-      let browser_entry = browser_entry?;
-      let browser_path = browser_entry.path();
-
-      if !browser_path.is_dir() {
-        continue;
-      }
-
-      let browser_name = browser_path
-        .file_name()
-        .and_then(|n| n.to_str())
-        .unwrap_or("");
-
-      if browser_name.is_empty() || browser_name.starts_with('.') {
-        continue;
-      }
-
-      // Scan for version directories within this browser
-      for version_entry in fs::read_dir(&browser_path)? {
-        let version_entry = version_entry?;
-        let version_path = version_entry.path();
-
-        if !version_path.is_dir() {
-          continue;
-        }
-
-        let version_name = version_path
-          .file_name()
-          .and_then(|n| n.to_str())
-          .unwrap_or("");
-
-        if version_name.is_empty() || version_name.starts_with('.') {
-          continue;
-        }
-
-        // Check if this browser/version is already in registry
-        if !self.is_browser_downloaded(browser_name, version_name) {
-          // Add to registry
-          let info = DownloadedBrowserInfo {
-            browser: browser_name.to_string(),
-            version: version_name.to_string(),
-            file_path: version_path.clone(),
-          };
-          self.add_browser(info);
-          changes.push(format!("Added {browser_name} {version_name} to registry"));
-        }
-      }
-    }
-
-    if !changes.is_empty() {
-      self.save()?;
-    }
-
-    Ok(changes)
-  }
-
-  /// Comprehensive cleanup that removes unused binaries and syncs registry
-  pub fn comprehensive_cleanup(
-    &self,
-    binaries_dir: &std::path::Path,
-    active_profiles: &[(String, String)],
-    running_profiles: &[(String, String)],
-  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
-    let mut cleanup_results = Vec::new();
-
-    // First, sync registry with actual binaries on disk
-    let sync_results = self.sync_with_binaries_directory(binaries_dir)?;
-    cleanup_results.extend(sync_results);
-
-    // Then perform the regular cleanup
-    let regular_cleanup = self.cleanup_unused_binaries(active_profiles, running_profiles)?;
-    cleanup_results.extend(regular_cleanup);
-
-    // Finally, verify and cleanup stale entries
-    let stale_cleanup = self.verify_and_cleanup_stale_entries_simple(binaries_dir)?;
-    cleanup_results.extend(stale_cleanup);
-
-    if !cleanup_results.is_empty() {
-      self.save()?;
-    }
-
-    Ok(cleanup_results)
-  }
-
-  /// Simplified version of verify_and_cleanup_stale_entries that doesn't need BrowserRunner
-  pub fn verify_and_cleanup_stale_entries_simple(
-    &self,
-    binaries_dir: &std::path::Path,
-  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
-    let mut cleaned_up = Vec::new();
-    let mut browsers_to_remove = Vec::new();
-
-    {
-      let data = self.data.lock().unwrap();
-      for (browser_str, versions) in &data.browsers {
-        for version in versions.keys() {
-          // Check if the browser directory actually exists
-          let browser_dir = binaries_dir.join(browser_str).join(version);
-          if !browser_dir.exists() {
-            browsers_to_remove.push((browser_str.clone(), version.clone()));
-          }
-        }
-      }
-    }
-
-    // Remove stale entries
-    for (browser_str, version) in browsers_to_remove {
-      if let Some(_removed) = self.remove_browser(&browser_str, &version) {
-        cleaned_up.push(format!(
-          "Removed stale registry entry for {browser_str} {version}"
-        ));
-      }
-    }
-
-    Ok(cleaned_up)
-  }
-}
-
-// Global singleton instance
-lazy_static::lazy_static! {
-  static ref DOWNLOADED_BROWSERS_REGISTRY: DownloadedBrowsersRegistry = {
-    let registry = DownloadedBrowsersRegistry::new();
-    if let Err(e) = registry.load() {
-      eprintln!("Warning: Failed to load downloaded browsers registry: {e}");
-    }
-    registry
-  };
-}
-
-#[cfg(test)]
-mod tests {
-  use super::*;
-
-  #[test]
-  fn test_registry_creation() {
-    let registry = DownloadedBrowsersRegistry::new();
-    let data = registry.data.lock().unwrap();
-    assert!(data.browsers.is_empty());
-  }
-
-  #[test]
-  fn test_add_and_get_browser() {
-    let registry = DownloadedBrowsersRegistry::new();
-    let info = DownloadedBrowserInfo {
-      browser: "firefox".to_string(),
-      version: "139.0".to_string(),
-      file_path: PathBuf::from("/test/path"),
-    };
-
-    registry.add_browser(info.clone());
-
-    assert!(registry.is_browser_downloaded("firefox", "139.0"));
-    assert!(!registry.is_browser_downloaded("firefox", "140.0"));
-    assert!(!registry.is_browser_downloaded("chrome", "139.0"));
-  }
-
-  #[test]
-  fn test_get_downloaded_versions() {
-    let registry = DownloadedBrowsersRegistry::new();
-
-    let info1 = DownloadedBrowserInfo {
-      browser: "firefox".to_string(),
-      version: "139.0".to_string(),
-      file_path: PathBuf::from("/test/path1"),
-    };
-
-    let info2 = DownloadedBrowserInfo {
-      browser: "firefox".to_string(),
-      version: "140.0".to_string(),
-      file_path: PathBuf::from("/test/path2"),
-    };
-
-    let info3 = DownloadedBrowserInfo {
-      browser: "firefox".to_string(),
-      version: "141.0".to_string(),
-      file_path: PathBuf::from("/test/path3"),
-    };
-
-    registry.add_browser(info1);
-    registry.add_browser(info2);
-    registry.add_browser(info3);
-
-    let versions = registry.get_downloaded_versions("firefox");
-    assert_eq!(versions.len(), 3);
-    assert!(versions.contains(&"139.0".to_string()));
-    assert!(versions.contains(&"140.0".to_string()));
-    assert!(versions.contains(&"141.0".to_string()));
-  }
-
-  #[test]
-  fn test_mark_download_lifecycle() {
-    let registry = DownloadedBrowsersRegistry::new();
-
-    // Mark download started
-    registry.mark_download_started("firefox", "139.0", PathBuf::from("/test/path"));
-
-    // Should be considered downloaded immediately
-    assert!(registry.is_browser_downloaded("firefox", "139.0"));
-
-    // Mark as completed
-    registry
-      .mark_download_completed("firefox", "139.0")
-      .unwrap();
-
-    // Should still be considered downloaded
-    assert!(registry.is_browser_downloaded("firefox", "139.0"));
-  }
-
-  #[test]
-  fn test_remove_browser() {
-    let registry = DownloadedBrowsersRegistry::new();
-    let info = DownloadedBrowserInfo {
-      browser: "firefox".to_string(),
-      version: "139.0".to_string(),
-      file_path: PathBuf::from("/test/path"),
-    };
-
-    registry.add_browser(info);
-    assert!(registry.is_browser_downloaded("firefox", "139.0"));
-
-    let removed = registry.remove_browser("firefox", "139.0");
-    assert!(removed.is_some());
-    assert!(!registry.is_browser_downloaded("firefox", "139.0"));
-  }
-
-  #[test]
-  fn test_twilight_download() {
-    let registry = DownloadedBrowsersRegistry::new();
-
-    // Mark twilight download started
-    registry.mark_download_started("zen", "twilight", PathBuf::from("/test/zen-twilight"));
-
-    // Check that it's registered
-    assert!(registry.is_browser_downloaded("zen", "twilight"));
-  }
-}
@@ -1,13 +1,19 @@
 use reqwest::Client;
 use serde::{Deserialize, Serialize};
-use std::fs::File;
 use std::io;
 use std::path::{Path, PathBuf};
+use std::sync::Mutex;
 use tauri::Emitter;

 use crate::api_client::ApiClient;
-use crate::browser::BrowserType;
-use crate::browser_version_service::DownloadInfo;
+use crate::browser::{create_browser, BrowserType};
+use crate::browser_version_manager::DownloadInfo;
+
+// Global state to track currently downloading browser-version pairs
+lazy_static::lazy_static! {
+  static ref DOWNLOADING_BROWSERS: std::sync::Arc<Mutex<std::collections::HashSet<String>>> =
+    std::sync::Arc::new(Mutex::new(std::collections::HashSet::new()));
+}

 #[derive(Debug, Serialize, Deserialize, Clone)]
 pub struct DownloadProgress {
@@ -24,6 +30,10 @@ pub struct DownloadProgress {
 pub struct Downloader {
  client: Client,
  api_client: &'static ApiClient,
+  registry: &'static crate::downloaded_browsers_registry::DownloadedBrowsersRegistry,
+  version_service: &'static crate::browser_version_manager::BrowserVersionManager,
+  extractor: &'static crate::extraction::Extractor,
+  geoip_downloader: &'static crate::geoip_downloader::GeoIPDownloader,
 }

 impl Downloader {
@@ -31,6 +41,10 @@ impl Downloader {
    Self {
      client: Client::new(),
      api_client: ApiClient::instance(),
+      registry: crate::downloaded_browsers_registry::DownloadedBrowsersRegistry::instance(),
+      version_service: crate::browser_version_manager::BrowserVersionManager::instance(),
+      extractor: crate::extraction::Extractor::instance(),
+      geoip_downloader: crate::geoip_downloader::GeoIPDownloader::instance(),
    }
  }

@@ -43,6 +57,10 @@ impl Downloader {
    Self {
      client: Client::new(),
      api_client: ApiClient::instance(),
+      registry: crate::downloaded_browsers_registry::DownloadedBrowsersRegistry::instance(),
+      version_service: crate::browser_version_manager::BrowserVersionManager::instance(),
+      extractor: crate::extraction::Extractor::instance(),
+      geoip_downloader: crate::geoip_downloader::GeoIPDownloader::instance(),
    }
  }

@@ -397,43 +415,125 @@ impl Downloader {
    let is_twilight =
      browser_type == BrowserType::Zen && version.to_lowercase().contains("twilight");

-    // Emit initial progress
+    // Determine if we have a partial file to resume
+    let mut existing_size: u64 = 0;
+    if let Ok(meta) = std::fs::metadata(&file_path) {
+      existing_size = meta.len();
+    }
+
+    // Build request, add Range only if we have bytes. If the server responds with 416 (Range Not
+    // Satisfiable), delete the partial file and retry once without the Range header.
+    let response = {
+      let mut request = self
+        .client
+        .get(&download_url)
+        .header(
+          "User-Agent",
+          "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36",
+        );
+
+      if existing_size > 0 {
+        request = request.header("Range", format!("bytes={existing_size}-"));
+      }
+
+      let first = request.send().await?;
+
+      if first.status().as_u16() == 416 && existing_size > 0 {
+        // Partial file on disk is not acceptable to the server — remove it and retry from scratch
+        let _ = std::fs::remove_file(&file_path);
+        existing_size = 0;
+
+        let retry = self
+          .client
+          .get(&download_url)
+          .header(
+            "User-Agent",
+            "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36",
+          )
+          .send()
+          .await?;
+        retry
+      } else {
+        first
+      }
+    };
+
+    // Check if the response is successful (200 OK or 206 Partial Content)
+    if !(response.status().is_success() || response.status().as_u16() == 206) {
+      return Err(format!("Download failed with status: {}", response.status()).into());
+    }
+
+    // Determine total size
+    let mut total_size = response.content_length();
+
+    // If resuming (206) and Content-Range is present, parse total
+    if response.status().as_u16() == 206 {
+      if let Some(content_range) = response.headers().get(reqwest::header::CONTENT_RANGE) {
+        if let Ok(cr) = content_range.to_str() {
+          // Format: bytes start-end/total
+          if let Some((_, total_str)) = cr.split('/').collect::<Vec<_>>().split_first() {
+            if let Some(total_str) = total_str.first() {
+              if let Ok(total) = total_str.parse::<u64>() {
+                total_size = Some(total);
+              }
+            }
+          }
+        }
+      } else if let Some(len) = response.headers().get(reqwest::header::CONTENT_LENGTH) {
+        // Fallback: total = existing + incoming length
+        if let Ok(len_str) = len.to_str() {
+          if let Ok(incoming) = len_str.parse::<u64>() {
+            total_size = Some(existing_size + incoming);
+          }
+        }
+      }
+    } else if existing_size > 0 && response.status().is_success() {
+      // Server ignored range or we asked from 0; if 200 and existing file has content, start fresh
+      // Truncate existing file so we don't append duplicate bytes
+      let _ = std::fs::remove_file(&file_path);
+      existing_size = 0;
+    }
+
+    let mut downloaded = existing_size;
+    let start_time = std::time::Instant::now();
+    let mut last_update = start_time;
+
+    // Emit initial progress AFTER we've established total size and resume state
+    let initial_percentage = if let Some(total) = total_size {
+      if total > 0 {
+        (existing_size as f64 / total as f64) * 100.0
+      } else {
+        0.0
+      }
+    } else {
+      0.0
+    };
+
+    let initial_stage = if is_twilight {
+      "downloading (twilight rolling release)".to_string()
+    } else {
+      "downloading".to_string()
+    };
+
    let progress = DownloadProgress {
      browser: browser_type.as_str().to_string(),
      version: version.to_string(),
-      downloaded_bytes: 0,
-      total_bytes: None,
-      percentage: 0.0,
+      downloaded_bytes: existing_size,
+      total_bytes: total_size,
+      percentage: initial_percentage,
      speed_bytes_per_sec: 0.0,
      eta_seconds: None,
-      stage: if is_twilight {
-        "downloading (twilight rolling release)".to_string()
-      } else {
-        "downloading".to_string()
-      },
+      stage: initial_stage,
    };

    let _ = app_handle.emit("download-progress", &progress);

-    // Start download
-    let response = self
-      .client
-      .get(&download_url)
-      .header("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36")
-      .send()
-      .await?;
-
-    // Check if the response is successful
-    if !response.status().is_success() {
-      return Err(format!("Download failed with status: {}", response.status()).into());
-    }
-
-    let total_size = response.content_length();
-    let mut downloaded = 0u64;
-    let start_time = std::time::Instant::now();
-    let mut last_update = start_time;
-
-    let mut file = File::create(&file_path)?;
+    // Open file in append mode (resuming) or create new
+    use std::fs::OpenOptions;
+    let mut file = OpenOptions::new()
+      .create(true)
+      .append(true)
+      .open(&file_path)?;
    let mut stream = response.bytes_stream();

    use futures_util::StreamExt;
@@ -446,13 +546,19 @@ impl Downloader {
      // Update progress every 100ms to avoid too many events
      if now.duration_since(last_update).as_millis() >= 100 {
        let elapsed = start_time.elapsed().as_secs_f64();
+        // Compute speed based only on bytes downloaded in this session to avoid inflated values when resuming
+        let downloaded_since_start = downloaded.saturating_sub(existing_size);
        let speed = if elapsed > 0.0 {
-          downloaded as f64 / elapsed
+          downloaded_since_start as f64 / elapsed
        } else {
          0.0
        };
        let percentage = if let Some(total) = total_size {
-          (downloaded as f64 / total as f64) * 100.0
+          if total > 0 {
+            (downloaded as f64 / total as f64) * 100.0
+          } else {
+            0.0
+          }
        } else {
          0.0
        };
@@ -486,6 +592,327 @@ impl Downloader {

    Ok(file_path)
  }
+
+  /// Download a browser binary, verify it, and register it in the downloaded browsers registry
+  pub async fn download_browser_full(
+    &self,
+    app_handle: &tauri::AppHandle,
+    browser_str: String,
+    version: String,
+  ) -> Result<String, Box<dyn std::error::Error + Send + Sync>> {
+    // Check if this browser-version pair is already being downloaded
+    let download_key = format!("{browser_str}-{version}");
+    {
+      let mut downloading = DOWNLOADING_BROWSERS.lock().unwrap();
+      if downloading.contains(&download_key) {
+        return Err(format!("Browser '{browser_str}' version '{version}' is already being downloaded. Please wait for the current download to complete.").into());
+      }
+      // Mark this browser-version pair as being downloaded
+      downloading.insert(download_key.clone());
+    }
+
+    let browser_type =
+      BrowserType::from_str(&browser_str).map_err(|e| format!("Invalid browser type: {e}"))?;
+    let browser = create_browser(browser_type.clone());
+
+    // Use injected registry instance
+
+    // Get binaries directory - we need to get it from somewhere
+    // This is a bit tricky since we don't have access to BrowserRunner's get_binaries_dir
+    // We'll need to replicate this logic
+    let binaries_dir = if let Some(base_dirs) = directories::BaseDirs::new() {
+      let mut path = base_dirs.data_local_dir().to_path_buf();
+      path.push(if cfg!(debug_assertions) {
+        "DonutBrowserDev"
+      } else {
+        "DonutBrowser"
+      });
+      path.push("binaries");
+      path
+    } else {
+      return Err("Failed to get base directories".into());
+    };
+
+    // Check if registry thinks it's downloaded, but also verify files actually exist
+    if self.registry.is_browser_downloaded(&browser_str, &version) {
+      let actually_exists = browser.is_version_downloaded(&version, &binaries_dir);
+
+      if actually_exists {
+        // Remove from downloading set since it's already downloaded
+        let mut downloading = DOWNLOADING_BROWSERS.lock().unwrap();
+        downloading.remove(&download_key);
+        return Ok(version);
+      } else {
+        // Registry says it's downloaded but files don't exist - clean up registry
+        println!("Registry indicates {browser_str} {version} is downloaded, but files are missing. Cleaning up registry entry.");
+        self.registry.remove_browser(&browser_str, &version);
+        self
+          .registry
+          .save()
+          .map_err(|e| format!("Failed to save cleaned registry: {e}"))?;
+      }
+    }
+
+    // Check if browser is supported on current platform before attempting download
+    if !self
+      .version_service
+      .is_browser_supported(&browser_str)
+      .unwrap_or(false)
+    {
+      // Remove from downloading set on error
+      let mut downloading = DOWNLOADING_BROWSERS.lock().unwrap();
+      downloading.remove(&download_key);
+      return Err(
+        format!(
+          "Browser '{}' is not supported on your platform ({} {}). Supported browsers: {}",
+          browser_str,
+          std::env::consts::OS,
+          std::env::consts::ARCH,
+          self.version_service.get_supported_browsers().join(", ")
+        )
+        .into(),
+      );
+    }
+
+    let download_info = self
+      .version_service
+      .get_download_info(&browser_str, &version)
+      .map_err(|e| format!("Failed to get download info: {e}"))?;
+
+    // Create browser directory
+    let mut browser_dir = binaries_dir.clone();
+    browser_dir.push(&browser_str);
+    browser_dir.push(&version);
+
+    std::fs::create_dir_all(&browser_dir)
+      .map_err(|e| format!("Failed to create browser directory: {e}"))?;
+
+    // Mark download as started (but don't add to registry yet)
+    self
+      .registry
+      .mark_download_started(&browser_str, &version, browser_dir.clone());
+
+    // Attempt to download the archive. If the download fails but an archive with the
+    // expected filename already exists (manual download), continue using that file.
+    let download_path: PathBuf = match self
+      .download_browser(
+        app_handle,
+        browser_type.clone(),
+        &version,
+        &download_info,
+        &browser_dir,
+      )
+      .await
+    {
+      Ok(path) => path,
+      Err(e) => {
+        // Do NOT continue with extraction on failed downloads. Partial files may exist but are invalid.
+        // Clean registry entry and stop here so the UI can show a single, clear error.
+        let _ = self.registry.remove_browser(&browser_str, &version);
+        let _ = self.registry.save();
+        let mut downloading = DOWNLOADING_BROWSERS.lock().unwrap();
+        downloading.remove(&download_key);
+        return Err(format!("Failed to download browser: {e}").into());
+      }
+    };
+
+    // Use the extraction module
+    if download_info.is_archive {
+      match self
+        .extractor
+        .extract_browser(
+          app_handle,
+          browser_type.clone(),
+          &version,
+          &download_path,
+          &browser_dir,
+        )
+        .await
+      {
+        Ok(_) => {
+          // Do not remove the archive here. We keep it until verification succeeds.
+        }
+        Err(e) => {
+          // Do not remove the archive or extracted files. Just drop the registry entry
+          // so it won't be reported as downloaded.
+          let _ = self.registry.remove_browser(&browser_str, &version);
+          let _ = self.registry.save();
+          // Remove browser-version pair from downloading set on error
+          {
+            let mut downloading = DOWNLOADING_BROWSERS.lock().unwrap();
+            downloading.remove(&download_key);
+          }
+          return Err(format!("Failed to extract browser: {e}").into());
+        }
+      }
+
+      // Give filesystem a moment to settle after extraction
+      tokio::time::sleep(tokio::time::Duration::from_millis(500)).await;
+    }
+
+    // Emit verification progress
+    let progress = DownloadProgress {
+      browser: browser_str.clone(),
+      version: version.clone(),
+      downloaded_bytes: 0,
+      total_bytes: None,
+      percentage: 100.0,
+      speed_bytes_per_sec: 0.0,
+      eta_seconds: None,
+      stage: "verifying".to_string(),
+    };
+    let _ = app_handle.emit("download-progress", &progress);
+
+    // Verify the browser was downloaded correctly
+    println!("Verifying download for browser: {browser_str}, version: {version}");
+
+    // Use the browser's own verification method
+    if !browser.is_version_downloaded(&version, &binaries_dir) {
+      // Provide detailed error information for debugging
+      let browser_dir = binaries_dir.join(&browser_str).join(&version);
+      let mut error_details = format!(
+        "Browser download completed but verification failed for {} {}. Expected directory: {}",
+        browser_str,
+        version,
+        browser_dir.display()
+      );
+
+      // List what files actually exist
+      if browser_dir.exists() {
+        error_details.push_str("\nFiles found in directory:");
+        if let Ok(entries) = std::fs::read_dir(&browser_dir) {
+          for entry in entries.flatten() {
+            let path = entry.path();
+            let file_type = if path.is_dir() { "DIR" } else { "FILE" };
+            error_details.push_str(&format!("\n  {} {}", file_type, path.display()));
+          }
+        } else {
+          error_details.push_str("\n  (Could not read directory contents)");
+        }
+      } else {
+        error_details.push_str("\nDirectory does not exist!");
+      }
+
+      // For Camoufox on Linux, provide specific expected files
+      if browser_str == "camoufox" && cfg!(target_os = "linux") {
+        let camoufox_subdir = browser_dir.join("camoufox");
+        error_details.push_str("\nExpected Camoufox executable locations:");
+        error_details.push_str(&format!("\n  {}/camoufox-bin", camoufox_subdir.display()));
+        error_details.push_str(&format!("\n  {}/camoufox", camoufox_subdir.display()));
+
+        if camoufox_subdir.exists() {
+          error_details.push_str(&format!(
+            "\nCamoufox subdirectory exists: {}",
+            camoufox_subdir.display()
+          ));
+          if let Ok(entries) = std::fs::read_dir(&camoufox_subdir) {
+            error_details.push_str("\nFiles in camoufox subdirectory:");
+            for entry in entries.flatten() {
+              let path = entry.path();
+              let file_type = if path.is_dir() { "DIR" } else { "FILE" };
+              error_details.push_str(&format!("\n  {} {}", file_type, path.display()));
+            }
+          }
+        } else {
+          error_details.push_str(&format!(
+            "\nCamoufox subdirectory does not exist: {}",
+            camoufox_subdir.display()
+          ));
+        }
+      }
+
+      // Do not delete files on verification failure; keep archive for manual retry.
+      let _ = self.registry.remove_browser(&browser_str, &version);
+      let _ = self.registry.save();
+      // Remove browser-version pair from downloading set on verification failure
+      {
+        let mut downloading = DOWNLOADING_BROWSERS.lock().unwrap();
+        downloading.remove(&download_key);
+      }
+      return Err(error_details.into());
+    }
+
+    // Mark completion in registry - only now add to registry after verification
+    if let Err(e) =
+      self
+        .registry
+        .mark_download_completed(&browser_str, &version, browser_dir.clone())
+    {
+      eprintln!("Warning: Could not mark {browser_str} {version} as completed in registry: {e}");
+    }
+    self
+      .registry
+      .save()
+      .map_err(|e| format!("Failed to save registry: {e}"))?;
+
+    // Now that verification succeeded, remove the archive file if it exists
+    if download_info.is_archive {
+      let archive_path = browser_dir.join(&download_info.filename);
+      if archive_path.exists() {
+        if let Err(e) = std::fs::remove_file(&archive_path) {
+          println!("Warning: Could not delete archive file after verification: {e}");
+        }
+      }
+    }
+
+    // If this is Camoufox, automatically download GeoIP database
+    if browser_str == "camoufox" {
+      // Check if GeoIP database is already available
+      if !crate::geoip_downloader::GeoIPDownloader::is_geoip_database_available() {
+        println!("Downloading GeoIP database for Camoufox...");
+
+        match self
+          .geoip_downloader
+          .download_geoip_database(app_handle)
+          .await
+        {
+          Ok(_) => {
+            println!("GeoIP database downloaded successfully");
+          }
+          Err(e) => {
+            eprintln!("Failed to download GeoIP database: {e}");
+            // Don't fail the browser download if GeoIP download fails
+          }
+        }
+      } else {
+        println!("GeoIP database already available");
+      }
+    }
+
+    // Emit completion
+    let progress = DownloadProgress {
+      browser: browser_str.clone(),
+      version: version.clone(),
+      downloaded_bytes: 0,
+      total_bytes: None,
+      percentage: 100.0,
+      speed_bytes_per_sec: 0.0,
+      eta_seconds: Some(0.0),
+      stage: "completed".to_string(),
+    };
+    let _ = app_handle.emit("download-progress", &progress);
+
+    // Remove browser-version pair from downloading set
+    {
+      let mut downloading = DOWNLOADING_BROWSERS.lock().unwrap();
+      downloading.remove(&download_key);
+    }
+
+    Ok(version)
+  }
+}
+
+#[tauri::command]
+pub async fn download_browser(
+  app_handle: tauri::AppHandle,
+  browser_str: String,
+  version: String,
+) -> Result<String, String> {
+  let downloader = Downloader::instance();
+  downloader
+    .download_browser_full(&app_handle, browser_str, version)
+    .await
+    .map_err(|e| format!("Failed to download browser: {e}"))
 }

 #[cfg(test)]
@@ -493,7 +920,7 @@ mod tests {
  use super::*;
  use crate::api_client::ApiClient;
  use crate::browser::BrowserType;
-  use crate::browser_version_service::DownloadInfo;
+  use crate::browser_version_manager::DownloadInfo;

  use tempfile::TempDir;
  use wiremock::matchers::{method, path};
@@ -1,4 +1,5 @@
 use crate::browser::GithubRelease;
+use crate::profile::manager::ProfileManager;
 use directories::BaseDirs;
 use reqwest::Client;
 use serde::{Deserialize, Serialize};
@@ -14,6 +15,11 @@ pub struct GeoIPDownloadProgress {
  pub stage: String, // "downloading", "extracting", "completed"
  pub percentage: f64,
  pub message: String,
+  // Extra fields to mirror browser download progress payload
+  pub downloaded_bytes: Option<u64>,
+  pub total_bytes: Option<u64>,
+  pub speed_bytes_per_sec: Option<f64>,
+  pub eta_seconds: Option<f64>,
 }

 pub struct GeoIPDownloader {
@@ -70,6 +76,25 @@ impl GeoIPDownloader {
      false
    }
  }
+  /// Check if GeoIP database is missing for Camoufox profiles
+  pub fn check_missing_geoip_database(
+    &self,
+  ) -> Result<bool, Box<dyn std::error::Error + Send + Sync>> {
+    // Get all profiles
+    let profiles = ProfileManager::instance()
+      .list_profiles()
+      .map_err(|e| format!("Failed to list profiles: {e}"))?;
+
+    // Check if there are any Camoufox profiles
+    let has_camoufox_profiles = profiles.iter().any(|profile| profile.browser == "camoufox");
+
+    if has_camoufox_profiles {
+      // Check if GeoIP database is available
+      return Ok(!Self::is_geoip_database_available());
+    }
+
+    Ok(false)
+  }

  fn find_city_mmdb_asset(&self, release: &GithubRelease) -> Option<String> {
    for asset in &release.assets {
@@ -91,6 +116,10 @@ impl GeoIPDownloader {
        stage: "downloading".to_string(),
        percentage: 0.0,
        message: "Starting GeoIP database download".to_string(),
+        downloaded_bytes: Some(0),
+        total_bytes: None,
+        speed_bytes_per_sec: Some(0.0),
+        eta_seconds: None,
      },
    );

@@ -122,26 +151,51 @@ impl GeoIPDownloader {
    }

    let total_size = response.content_length().unwrap_or(0);
-    let mut downloaded = 0;
+    let mut downloaded: u64 = 0;
    let mut file = fs::File::create(&mmdb_path).await?;
    let mut stream = response.bytes_stream();

    use futures_util::StreamExt;
+    use std::time::Instant;
+    let start_time = Instant::now();
+    let mut last_update = Instant::now();
    while let Some(chunk) = stream.next().await {
      let chunk = chunk?;
      downloaded += chunk.len() as u64;
      file.write_all(&chunk).await?;

-      if total_size > 0 {
-        let percentage = (downloaded as f64 / total_size as f64) * 100.0;
+      let now = Instant::now();
+      if now.duration_since(last_update).as_millis() >= 100 {
+        let elapsed = start_time.elapsed().as_secs_f64();
+        let speed = if elapsed > 0.0 {
+          downloaded as f64 / elapsed
+        } else {
+          0.0
+        };
+        let percentage = if total_size > 0 {
+          (downloaded as f64 / total_size as f64) * 100.0
+        } else {
+          0.0
+        };
+        let eta = if speed > 0.0 && total_size > 0 {
+          Some((total_size.saturating_sub(downloaded)) as f64 / speed)
+        } else {
+          None
+        };
+
        let _ = app_handle.emit(
          "geoip-download-progress",
          GeoIPDownloadProgress {
            stage: "downloading".to_string(),
            percentage,
            message: format!("Downloaded {downloaded} / {total_size} bytes"),
+            downloaded_bytes: Some(downloaded),
+            total_bytes: Some(total_size),
+            speed_bytes_per_sec: Some(speed),
+            eta_seconds: eta,
          },
        );
+        last_update = now;
      }
    }

@@ -154,6 +208,10 @@ impl GeoIPDownloader {
        stage: "completed".to_string(),
        percentage: 100.0,
        message: "GeoIP database download completed".to_string(),
+        downloaded_bytes: Some(downloaded),
+        total_bytes: Some(total_size),
+        speed_bytes_per_sec: Some(0.0),
+        eta_seconds: Some(0.0),
      },
    );

@@ -180,6 +238,19 @@ impl GeoIPDownloader {
  }
 }

+#[tauri::command]
+pub fn check_missing_geoip_database() -> Result<bool, String> {
+  let geoip_downloader = GeoIPDownloader::instance();
+  geoip_downloader
+    .check_missing_geoip_database()
+    .map_err(|e| format!("Failed to check missing GeoIP database: {e}"))
+}
+
+// Global singleton instance
+lazy_static::lazy_static! {
+  static ref GEOIP_DOWNLOADER: GeoIPDownloader = GeoIPDownloader::new();
+}
+
 #[cfg(test)]
 mod tests {
  use super::*;
@@ -293,16 +364,25 @@ mod tests {

  #[test]
  fn test_is_geoip_database_available() {
-    // This test will return false unless the database actually exists
-    // In a real environment, this would check the actual file system
+    // Test that the function works correctly regardless of file system state
    let is_available = GeoIPDownloader::is_geoip_database_available();
-    // We can't assert a specific value since it depends on the system state
-    // But we can verify the function doesn't panic
-    println!("GeoIP database available: {is_available}");
+
+    // The function should return a boolean value (either true or false)
+    // The function should return a boolean value - we just verify it doesn't panic
+    // and returns the expected result based on file existence
+
+    // Verify the function logic by checking if the path resolution works
+    let mmdb_path_result = GeoIPDownloader::get_mmdb_file_path();
+    assert!(
+      mmdb_path_result.is_ok(),
+      "Should be able to get MMDB file path"
+    );
+
+    let mmdb_path = mmdb_path_result.unwrap();
+    let expected_available = mmdb_path.exists();
+    assert_eq!(
+      is_available, expected_available,
+      "Function result should match actual file existence"
+    );
  }
 }
-
-// Global singleton instance
-lazy_static::lazy_static! {
-  static ref GEOIP_DOWNLOADER: GeoIPDownloader = GeoIPDownloader::new();
-}
@@ -2,8 +2,9 @@ use directories::BaseDirs;
 use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
 use std::fs;
-use std::path::PathBuf;
+use std::path::{Path, PathBuf};
 use std::sync::Mutex;
+use tauri::Emitter;

 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct ProfileGroup {
@@ -25,16 +26,37 @@ struct GroupsData {

 pub struct GroupManager {
  base_dirs: BaseDirs,
+  data_dir_override: Option<PathBuf>,
 }

 impl GroupManager {
  pub fn new() -> Self {
    Self {
      base_dirs: BaseDirs::new().expect("Failed to get base directories"),
+      data_dir_override: std::env::var("DONUTBROWSER_DATA_DIR")
+        .ok()
+        .map(PathBuf::from),
+    }
+  }
+
+  // Helper for tests to override data directory without global env var
+  #[allow(dead_code)]
+  pub fn with_data_dir_override(dir: &Path) -> Self {
+    Self {
+      base_dirs: BaseDirs::new().expect("Failed to get base directories"),
+      data_dir_override: Some(dir.to_path_buf()),
    }
  }

  fn get_groups_file_path(&self) -> PathBuf {
+    if let Some(dir) = &self.data_dir_override {
+      let mut override_path = dir.clone();
+      // Ensure the directory exists before returning the path
+      let _ = fs::create_dir_all(&override_path);
+      override_path.push("groups.json");
+      return override_path;
+    }
+
    let mut path = self.base_dirs.data_local_dir().to_path_buf();
    path.push(if cfg!(debug_assertions) {
      "DonutBrowserDev"
@@ -76,7 +98,11 @@ impl GroupManager {
    Ok(groups_data.groups)
  }

-  pub fn create_group(&self, name: String) -> Result<ProfileGroup, Box<dyn std::error::Error>> {
+  pub fn create_group(
+    &self,
+    app_handle: &tauri::AppHandle,
+    name: String,
+  ) -> Result<ProfileGroup, Box<dyn std::error::Error>> {
    let mut groups_data = self.load_groups_data()?;

    // Check if group with this name already exists
@@ -92,11 +118,17 @@ impl GroupManager {
    groups_data.groups.push(group.clone());
    self.save_groups_data(&groups_data)?;

+    // Emit event for reactive UI updates
+    if let Err(e) = app_handle.emit("groups-changed", ()) {
+      eprintln!("Failed to emit groups-changed event: {e}");
+    }
+
    Ok(group)
  }

  pub fn update_group(
    &self,
+    app_handle: &tauri::AppHandle,
    id: String,
    name: String,
  ) -> Result<ProfileGroup, Box<dyn std::error::Error>> {
@@ -121,10 +153,20 @@ impl GroupManager {
    let updated_group = group.clone();

    self.save_groups_data(&groups_data)?;
+
+    // Emit event for reactive UI updates
+    if let Err(e) = app_handle.emit("groups-changed", ()) {
+      eprintln!("Failed to emit groups-changed event: {e}");
+    }
+
    Ok(updated_group)
  }

-  pub fn delete_group(&self, id: String) -> Result<(), Box<dyn std::error::Error>> {
+  pub fn delete_group(
+    &self,
+    app_handle: &tauri::AppHandle,
+    id: String,
+  ) -> Result<(), Box<dyn std::error::Error>> {
    let mut groups_data = self.load_groups_data()?;

    let initial_len = groups_data.groups.len();
@@ -135,6 +177,12 @@ impl GroupManager {
    }

    self.save_groups_data(&groups_data)?;
+
+    // Emit event for reactive UI updates
+    if let Err(e) = app_handle.emit("groups-changed", ()) {
+      eprintln!("Failed to emit groups-changed event: {e}");
+    }
+
    Ok(())
  }

@@ -152,29 +200,26 @@ impl GroupManager {
      }
    }

-    // Create result with counts
+    // Create result including all groups (even those with 0 count)
    let mut result = Vec::new();
    for group in groups {
      let count = group_counts.get(&group.id).copied().unwrap_or(0);
-      if count > 0 {
-        result.push(GroupWithCount {
-          id: group.id,
-          name: group.name,
-          count,
-        });
-      }
+      result.push(GroupWithCount {
+        id: group.id,
+        name: group.name,
+        count,
+      });
    }

-    // Add default group count (profiles without group_id)
+    // Add default group count (profiles without group_id), always include even if 0
    let default_count = profiles.iter().filter(|p| p.group_id.is_none()).count();
-    if default_count > 0 {
-      let default_group = GroupWithCount {
-        id: "default".to_string(),
-        name: "Default".to_string(),
-        count: default_count,
-      };
-      result.insert(0, default_group);
-    }
+    let default_group = GroupWithCount {
+      id: "default".to_string(),
+      name: "Default".to_string(),
+      count: default_count,
+    };
+    // Insert at the beginning for consistent ordering with UI expectations
+    result.insert(0, default_group);

    Ok(result)
  }
@@ -212,44 +257,58 @@ pub async fn get_groups_with_profile_counts() -> Result<Vec<GroupWithCount>, Str
 }

 #[tauri::command]
-pub async fn create_profile_group(name: String) -> Result<ProfileGroup, String> {
+pub async fn create_profile_group(
+  app_handle: tauri::AppHandle,
+  name: String,
+) -> Result<ProfileGroup, String> {
  let group_manager = GROUP_MANAGER.lock().unwrap();
  group_manager
-    .create_group(name)
+    .create_group(&app_handle, name)
    .map_err(|e| format!("Failed to create group: {e}"))
 }

 #[tauri::command]
-pub async fn update_profile_group(group_id: String, name: String) -> Result<ProfileGroup, String> {
+pub async fn update_profile_group(
+  app_handle: tauri::AppHandle,
+  group_id: String,
+  name: String,
+) -> Result<ProfileGroup, String> {
  let group_manager = GROUP_MANAGER.lock().unwrap();
  group_manager
-    .update_group(group_id, name)
+    .update_group(&app_handle, group_id, name)
    .map_err(|e| format!("Failed to update group: {e}"))
 }

 #[tauri::command]
-pub async fn delete_profile_group(group_id: String) -> Result<(), String> {
+pub async fn delete_profile_group(
+  app_handle: tauri::AppHandle,
+  group_id: String,
+) -> Result<(), String> {
  let group_manager = GROUP_MANAGER.lock().unwrap();
  group_manager
-    .delete_group(group_id)
+    .delete_group(&app_handle, group_id)
    .map_err(|e| format!("Failed to delete group: {e}"))
 }

 #[tauri::command]
 pub async fn assign_profiles_to_group(
-  profile_names: Vec<String>,
+  app_handle: tauri::AppHandle,
+  profile_ids: Vec<String>,
  group_id: Option<String>,
 ) -> Result<(), String> {
  let profile_manager = crate::profile::ProfileManager::instance();
  profile_manager
-    .assign_profiles_to_group(profile_names, group_id)
+    .assign_profiles_to_group(&app_handle, profile_ids, group_id)
    .map_err(|e| format!("Failed to assign profiles to group: {e}"))
 }

 #[tauri::command]
-pub async fn delete_selected_profiles(profile_names: Vec<String>) -> Result<(), String> {
+pub async fn delete_selected_profiles(
+  app_handle: tauri::AppHandle,
+  profile_ids: Vec<String>,
+) -> Result<(), String> {
  let profile_manager = crate::profile::ProfileManager::instance();
  profile_manager
-    .delete_multiple_profiles(profile_names)
+    .delete_multiple_profiles(&app_handle, profile_ids)
    .map_err(|e| format!("Failed to delete profiles: {e}"))
 }
@@ -8,15 +8,16 @@ use tauri_plugin_deep_link::DeepLinkExt;
 static PENDING_URLS: Mutex<Vec<String>> = Mutex::new(Vec::new());

 mod api_client;
+mod api_server;
 mod app_auto_updater;
 mod auto_updater;
 mod browser;
 mod browser_runner;
-mod browser_version_service;
-mod camoufox;
+mod browser_version_manager;
+mod camoufox_manager;
 mod default_browser;
-mod download;
-mod downloaded_browsers;
+mod downloaded_browsers_registry;
+mod downloader;
 mod extraction;
 mod geoip_downloader;
 mod group_manager;
@@ -25,35 +26,47 @@ mod profile;
 mod profile_importer;
 mod proxy_manager;
 mod settings_manager;
-mod theme_detector;
+// mod theme_detector; // removed: theme detection handled in webview via CSS prefers-color-scheme
+mod tag_manager;
 mod version_updater;

-extern crate lazy_static;
-
 use browser_runner::{
-  check_browser_exists, check_browser_status, check_missing_binaries, create_browser_profile_new,
-  delete_profile, download_browser, ensure_all_binaries_exist, fetch_browser_versions_cached_first,
-  fetch_browser_versions_with_count, fetch_browser_versions_with_count_cached_first,
-  get_browser_release_types, get_downloaded_browser_versions, get_supported_browsers,
-  is_browser_supported_on_platform, kill_browser_profile, launch_browser_profile,
-  list_browser_profiles, rename_profile, update_camoufox_config, update_profile_proxy,
-  update_profile_version,
+  check_browser_exists, kill_browser_profile, launch_browser_profile, open_url_with_profile,
 };

+use profile::manager::{
+  check_browser_status, create_browser_profile_new, delete_profile, list_browser_profiles,
+  rename_profile, update_camoufox_config, update_profile_proxy, update_profile_tags,
+};
+
+use browser_version_manager::{
+  fetch_browser_versions_cached_first, fetch_browser_versions_with_count,
+  fetch_browser_versions_with_count_cached_first, get_supported_browsers,
+  is_browser_supported_on_platform,
+};
+
+use downloaded_browsers_registry::{
+  check_missing_binaries, ensure_all_binaries_exist, get_downloaded_browser_versions,
+};
+
+use downloader::download_browser;
+
 use settings_manager::{
-  clear_all_version_cache_and_refetch, get_app_settings, get_table_sorting_settings,
-  save_app_settings, save_table_sorting_settings, should_show_settings_on_startup,
+  get_app_settings, get_table_sorting_settings, save_app_settings, save_table_sorting_settings,
+  should_show_settings_on_startup,
 };

-use default_browser::{is_default_browser, open_url_with_profile, set_as_default_browser};
+use tag_manager::get_all_tags;
+
+use default_browser::{is_default_browser, set_as_default_browser};

 use version_updater::{
-  get_version_update_status, get_version_updater, trigger_manual_version_update,
+  clear_all_version_cache_and_refetch, get_version_update_status, get_version_updater,
+  trigger_manual_version_update,
 };

 use auto_updater::{
  check_for_browser_updates, complete_browser_update_with_auto_update, dismiss_update_notification,
-  is_browser_disabled_for_update,
 };

 use app_auto_updater::{
@@ -62,13 +75,17 @@ use app_auto_updater::{

 use profile_importer::{detect_existing_profiles, import_browser_profile};

-use theme_detector::get_system_theme;
-
 use group_manager::{
  assign_profiles_to_group, create_profile_group, delete_profile_group, delete_selected_profiles,
  get_groups_with_profile_counts, get_profile_groups, update_profile_group,
 };

+use geoip_downloader::{check_missing_geoip_database, GeoIPDownloader};
+
+use browser_version_manager::get_browser_release_types;
+
+use api_server::{get_api_server_status, start_api_server, stop_api_server};
+
 // Trait to extend WebviewWindow with transparent titlebar functionality
 pub trait WindowExt {
  #[cfg(target_os = "macos")]
@@ -114,6 +131,35 @@ impl<R: Runtime> WindowExt for WebviewWindow<R> {
  }
 }

+#[tauri::command]
+async fn warm_up_nodecar(app: tauri::AppHandle) -> Result<(), String> {
+  use tauri_plugin_shell::ShellExt;
+  use tokio::time::{timeout, Duration};
+
+  let start_time = std::time::Instant::now();
+
+  // Use sidecar to execute a fast, harmless command that ensures the binary is loaded
+  let cmd = app
+    .shell()
+    .sidecar("nodecar")
+    .map_err(|e| format!("Failed to create nodecar sidecar: {e}"))?
+    .arg("help");
+
+  let exec_future = async { cmd.output().await };
+  match timeout(Duration::from_secs(120), exec_future).await {
+    Ok(Ok(_output)) => {
+      let duration = start_time.elapsed();
+      println!(
+        "Nodecar warm-up (frontend-triggered) completed in {:.2}s",
+        duration.as_secs_f64()
+      );
+      Ok(())
+    }
+    Ok(Err(e)) => Err(format!("Failed to execute nodecar for warm-up: {e}")),
+    Err(_) => Err("Nodecar warm-up timed out after 120s".to_string()),
+  }
+}
+
 #[tauri::command]
 async fn handle_url_open(app: tauri::AppHandle, url: String) -> Result<(), String> {
  println!("handle_url_open called with URL: {url}");
@@ -142,11 +188,12 @@ async fn handle_url_open(app: tauri::AppHandle, url: String) -> Result<(), Strin

 #[tauri::command]
 async fn create_stored_proxy(
+  app_handle: tauri::AppHandle,
  name: String,
  proxy_settings: crate::browser::ProxySettings,
 ) -> Result<crate::proxy_manager::StoredProxy, String> {
  crate::proxy_manager::PROXY_MANAGER
-    .create_stored_proxy(name, proxy_settings)
+    .create_stored_proxy(&app_handle, name, proxy_settings)
    .map_err(|e| format!("Failed to create stored proxy: {e}"))
 }

@@ -157,22 +204,37 @@ async fn get_stored_proxies() -> Result<Vec<crate::proxy_manager::StoredProxy>,

 #[tauri::command]
 async fn update_stored_proxy(
+  app_handle: tauri::AppHandle,
  proxy_id: String,
  name: Option<String>,
  proxy_settings: Option<crate::browser::ProxySettings>,
 ) -> Result<crate::proxy_manager::StoredProxy, String> {
  crate::proxy_manager::PROXY_MANAGER
-    .update_stored_proxy(&proxy_id, name, proxy_settings)
+    .update_stored_proxy(&app_handle, &proxy_id, name, proxy_settings)
    .map_err(|e| format!("Failed to update stored proxy: {e}"))
 }

 #[tauri::command]
-async fn delete_stored_proxy(proxy_id: String) -> Result<(), String> {
+async fn delete_stored_proxy(app_handle: tauri::AppHandle, proxy_id: String) -> Result<(), String> {
  crate::proxy_manager::PROXY_MANAGER
-    .delete_stored_proxy(&proxy_id)
+    .delete_stored_proxy(&app_handle, &proxy_id)
    .map_err(|e| format!("Failed to delete stored proxy: {e}"))
 }

+#[tauri::command]
+async fn is_geoip_database_available() -> Result<bool, String> {
+  Ok(GeoIPDownloader::is_geoip_database_available())
+}
+
+#[tauri::command]
+async fn download_geoip_database(app_handle: tauri::AppHandle) -> Result<(), String> {
+  let downloader = GeoIPDownloader::instance();
+  downloader
+    .download_geoip_database(&app_handle)
+    .await
+    .map_err(|e| format!("Failed to download GeoIP database: {e}"))
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
  let args: Vec<String> = env::args().collect();
@@ -331,8 +393,9 @@ pub fn run() {
        loop {
          interval.tick().await;

-          let browser_runner = crate::browser_runner::BrowserRunner::instance();
-          if let Err(e) = browser_runner.cleanup_unused_binaries_internal() {
+          let registry =
+            crate::downloaded_browsers_registry::DownloadedBrowsersRegistry::instance();
+          if let Err(e) = registry.cleanup_unused_binaries() {
            eprintln!("Periodic cleanup failed: {e}");
          } else {
            println!("Periodic cleanup completed successfully");
@@ -369,14 +432,14 @@ pub fn run() {
      // Start Camoufox cleanup task
      let _app_handle_cleanup = app.handle().clone();
      tauri::async_runtime::spawn(async move {
-        let launcher = crate::camoufox::CamoufoxNodecarLauncher::instance();
+        let camoufox_manager = crate::camoufox_manager::CamoufoxManager::instance();
        let mut interval = tokio::time::interval(tokio::time::Duration::from_secs(5));

        loop {
          interval.tick().await;

-          match launcher.cleanup_dead_instances().await {
-            Ok(_dead_instances) => {
+          match camoufox_manager.cleanup_dead_instances().await {
+            Ok(_) => {
              // Cleanup completed silently
            }
            Err(e) => {
@@ -386,6 +449,35 @@ pub fn run() {
        }
      });

+      // Check and download GeoIP database at startup if needed
+      let app_handle_geoip = app.handle().clone();
+      tauri::async_runtime::spawn(async move {
+        // Wait a bit for the app to fully initialize
+        tokio::time::sleep(tokio::time::Duration::from_secs(2)).await;
+
+        let geoip_downloader = crate::geoip_downloader::GeoIPDownloader::instance();
+        match geoip_downloader.check_missing_geoip_database() {
+          Ok(true) => {
+            println!("GeoIP database is missing for Camoufox profiles, downloading at startup...");
+            let geoip_downloader = GeoIPDownloader::instance();
+            if let Err(e) = geoip_downloader
+              .download_geoip_database(&app_handle_geoip)
+              .await
+            {
+              eprintln!("Failed to download GeoIP database at startup: {e}");
+            } else {
+              println!("GeoIP database downloaded successfully at startup");
+            }
+          }
+          Ok(false) => {
+            // No Camoufox profiles or GeoIP database already available
+          }
+          Err(e) => {
+            eprintln!("Failed to check GeoIP database status at startup: {e}");
+          }
+        }
+      });
+
      // Start proxy cleanup task for dead browser processes
      let app_handle_proxy_cleanup = app.handle().clone();
      tauri::async_runtime::spawn(async move {
@@ -413,37 +505,131 @@ pub fn run() {
        }
      });

-      // Warm up nodecar binary in the background
+      // Periodically broadcast browser running status to the frontend
+      let app_handle_status = app.handle().clone();
      tauri::async_runtime::spawn(async move {
-        println!("Starting nodecar warm-up...");
-        let start_time = std::time::Instant::now();
+        let mut interval = tokio::time::interval(tokio::time::Duration::from_millis(500));
+        let mut last_running_states: std::collections::HashMap<String, bool> =
+          std::collections::HashMap::new();

-        // Send a ping request to nodecar to trigger unpacking/warm-up
-        match tokio::process::Command::new("nodecar")
-          .arg("--version")
-          .output()
-          .await
-        {
-          Ok(output) => {
-            let duration = start_time.elapsed();
-            if output.status.success() {
-              println!(
-                "Nodecar warm-up completed successfully in {:.2}s",
-                duration.as_secs_f64()
-              );
-            } else {
-              println!(
-                "Nodecar warm-up completed with non-zero exit code in {:.2}s",
-                duration.as_secs_f64()
-              );
+        loop {
+          interval.tick().await;
+
+          let runner = crate::browser_runner::BrowserRunner::instance();
+          // If listing profiles fails, skip this tick
+          let profiles = match runner.profile_manager.list_profiles() {
+            Ok(p) => p,
+            Err(e) => {
+              println!("Warning: Failed to list profiles in status checker: {e}");
+              continue;
+            }
+          };
+
+          for profile in profiles {
+            // Check browser status and track changes
+            match runner
+              .check_browser_status(app_handle_status.clone(), &profile)
+              .await
+            {
+              Ok(is_running) => {
+                let profile_id = profile.id.to_string();
+                let last_state = last_running_states
+                  .get(&profile_id)
+                  .copied()
+                  .unwrap_or(false);
+
+                // Only emit event if state actually changed
+                if last_state != is_running {
+                  println!(
+                    "Status checker detected change for profile {}: {} -> {}",
+                    profile.name, last_state, is_running
+                  );
+
+                  #[derive(serde::Serialize)]
+                  struct RunningChangedPayload {
+                    id: String,
+                    is_running: bool,
+                  }
+
+                  let payload = RunningChangedPayload {
+                    id: profile_id.clone(),
+                    is_running,
+                  };
+
+                  if let Err(e) = app_handle_status.emit("profile-running-changed", &payload) {
+                    println!("Warning: Failed to emit profile running changed event: {e}");
+                  } else {
+                    println!(
+                      "Status checker emitted profile-running-changed event for {}: running={}",
+                      profile.name, is_running
+                    );
+                  }
+
+                  last_running_states.insert(profile_id, is_running);
+                } else {
+                  // Update the state even if unchanged to ensure we have it tracked
+                  last_running_states.insert(profile_id, is_running);
+                }
+              }
+              Err(e) => {
+                println!(
+                  "Warning: Status check failed for profile {}: {}",
+                  profile.name, e
+                );
+                continue;
+              }
+            }
+          }
+        }
+      });
+
+      // Nodecar warm-up is now triggered from the frontend to allow UI blocking overlay
+
+      // Start API server if enabled in settings
+      let app_handle_api = app.handle().clone();
+      tauri::async_runtime::spawn(async move {
+        match crate::settings_manager::get_app_settings(app_handle_api.clone()).await {
+          Ok(settings) => {
+            if settings.api_enabled {
+              println!("API is enabled in settings, starting API server...");
+              match crate::api_server::start_api_server_internal(settings.api_port, &app_handle_api)
+                .await
+              {
+                Ok(port) => {
+                  println!("API server started successfully on port {port}");
+                  // Emit success toast to frontend
+                  if let Err(e) = app_handle_api.emit(
+                    "show-toast",
+                    crate::api_server::ToastPayload {
+                      message: "API server started successfully".to_string(),
+                      variant: "success".to_string(),
+                      title: "Local API Started".to_string(),
+                      description: Some(format!("API server running on port {port}")),
+                    },
+                  ) {
+                    eprintln!("Failed to emit API start toast: {e}");
+                  }
+                }
+                Err(e) => {
+                  eprintln!("Failed to start API server at startup: {e}");
+                  // Emit error toast to frontend
+                  if let Err(toast_err) = app_handle_api.emit(
+                    "show-toast",
+                    crate::api_server::ToastPayload {
+                      message: "Failed to start API server".to_string(),
+                      variant: "error".to_string(),
+                      title: "Failed to Start Local API".to_string(),
+                      description: Some(format!("Error: {e}")),
+                    },
+                  ) {
+                    eprintln!("Failed to emit API error toast: {toast_err}");
+                  }
+                }
+              }
            }
          }
          Err(e) => {
-            let duration = start_time.elapsed();
-            println!(
-              "Nodecar warm-up failed after {:.2}s: {e}",
-              duration.as_secs_f64()
-            );
+            eprintln!("Failed to load app settings for API startup: {e}");
          }
        }
      });
@@ -463,9 +649,10 @@ pub fn run() {
      fetch_browser_versions_cached_first,
      fetch_browser_versions_with_count_cached_first,
      get_downloaded_browser_versions,
+      get_all_tags,
      get_browser_release_types,
      update_profile_proxy,
-      update_profile_version,
+      update_profile_tags,
      check_browser_status,
      kill_browser_profile,
      rename_profile,
@@ -481,16 +668,15 @@ pub fn run() {
      trigger_manual_version_update,
      get_version_update_status,
      check_for_browser_updates,
-      is_browser_disabled_for_update,
      dismiss_update_notification,
      complete_browser_update_with_auto_update,
      check_for_app_updates,
      check_for_app_updates_manual,
      download_and_install_app_update,
-      get_system_theme,
      detect_existing_profiles,
      import_browser_profile,
      check_missing_binaries,
+      check_missing_geoip_database,
      ensure_all_binaries_exist,
      create_stored_proxy,
      get_stored_proxies,
@@ -504,6 +690,12 @@ pub fn run() {
      delete_profile_group,
      assign_profiles_to_group,
      delete_selected_profiles,
+      is_geoip_database_available,
+      download_geoip_database,
+      warm_up_nodecar,
+      start_api_server,
+      stop_api_server,
+      get_api_server_status
    ])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
@@ -48,7 +48,38 @@ pub mod macos {
    args: &[String],
  ) -> Result<std::process::Child, Box<dyn std::error::Error + Send + Sync>> {
    println!("Launching browser on macOS: {executable_path:?} with args: {args:?}");
-    Ok(Command::new(executable_path).args(args).spawn()?)
+    // If the executable is inside an app bundle, launch via Launch Services so
+    // macOS recognizes the real application for privacy permissions (e.g. Screen Recording).
+    // This ensures TCC prompts are attributed to the browser app, not our launcher.
+    let mut current = Some(executable_path);
+    let mut app_bundle: Option<std::path::PathBuf> = None;
+    while let Some(path) = current {
+      if let Some(file_name) = path.file_name().and_then(|s| s.to_str()) {
+        if file_name.ends_with(".app") {
+          app_bundle = Some(path.to_path_buf());
+          break;
+        }
+      }
+      current = path.parent();
+    }
+
+    if let Some(app_path) = app_bundle {
+      // Use `open -n -a <App>.app --args ...` to launch the app bundle.
+      // Note: The returned child PID will belong to `open`, not the browser.
+      // The caller should resolve the actual browser PID after launch.
+      let mut cmd = Command::new("open");
+      cmd.arg("-n");
+      cmd.arg("-a");
+      cmd.arg(app_path);
+      cmd.arg("--args");
+      for a in args {
+        cmd.arg(a);
+      }
+      Ok(cmd.spawn()?)
+    } else {
+      // Fallback: direct spawn if this is not an app bundle
+      Ok(Command::new(executable_path).args(args).spawn()?)
+    }
  }

  pub async fn open_url_in_existing_browser_firefox_like(
@@ -183,6 +214,227 @@ end try
    Ok(())
  }

+  pub async fn kill_browser_process_impl(
+    pid: u32,
+  ) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+    println!("Attempting to kill browser process with PID: {pid}");
+
+    // For Chromium-based browsers, use immediate aggressive termination
+    // Chromium browsers are notoriously difficult to kill on macOS due to process spawning
+
+    // Step 1: Immediate SIGKILL on main process (no graceful shutdown for Chromium)
+    println!("Starting immediate SIGKILL for PID: {pid}");
+    let _ = Command::new("kill")
+      .args(["-KILL", &pid.to_string()])
+      .output();
+
+    // Step 2: Comprehensive process tree termination using multiple methods simultaneously
+    let _ = kill_chromium_process_tree_aggressive(pid).await;
+
+    // Step 2.5: Nuclear option - kill all Chromium processes by name pattern
+    let _ = kill_all_chromium_processes_by_name().await;
+
+    // Step 3: Use multiple kill strategies in parallel
+    let pid_str = pid.to_string();
+
+    // Kill by parent PID with SIGKILL
+    let _ = Command::new("pkill")
+      .args(["-KILL", "-P", &pid_str])
+      .output();
+
+    // Kill by process group with SIGKILL
+    let _ = Command::new("pkill")
+      .args(["-KILL", "-g", &pid_str])
+      .output();
+
+    // Kill by session ID
+    let _ = Command::new("pkill")
+      .args(["-KILL", "-s", &pid_str])
+      .output();
+
+    // Wait briefly for initial termination
+    tokio::time::sleep(tokio::time::Duration::from_millis(200)).await;
+
+    // Step 4: Verify and retry with pattern-based killing for common Chromium process names
+    use sysinfo::{Pid, System};
+    let system = System::new_all();
+
+    // Check if main process still exists
+    if system.process(Pid::from(pid as usize)).is_some() {
+      println!("Main process {pid} still running, using pattern-based termination");
+
+      // Kill by common Chromium process patterns
+      let chromium_patterns = [
+        "Chrome",
+        "Chromium",
+        "Brave",
+        "chrome",
+        "chromium",
+        "brave",
+        "Google Chrome",
+        "Brave Browser",
+        "Chrome Helper",
+        "Chromium Helper",
+      ];
+
+      for pattern in &chromium_patterns {
+        let _ = Command::new("pkill")
+          .args(["-KILL", "-f", pattern])
+          .output();
+      }
+    }
+
+    // Step 5: Final aggressive cleanup - kill any remaining processes
+    tokio::time::sleep(tokio::time::Duration::from_millis(300)).await;
+
+    // One more round of comprehensive killing
+    let _ = Command::new("pkill")
+      .args(["-KILL", "-P", &pid_str])
+      .output();
+
+    let _ = Command::new("pkill")
+      .args(["-KILL", "-g", &pid_str])
+      .output();
+
+    // Final verification with extended wait
+    tokio::time::sleep(tokio::time::Duration::from_millis(500)).await;
+    let system = System::new_all();
+
+    if system.process(Pid::from(pid as usize)).is_some() {
+      // Last resort: try system kill command with different signals
+      println!("Process {pid} extremely persistent, trying system-level termination");
+
+      let _ = Command::new("/bin/kill").args(["-KILL", &pid_str]).output();
+
+      let _ = Command::new("/usr/bin/killall")
+        .args(["-KILL", "-m", "Chrome"])
+        .output();
+
+      let _ = Command::new("/usr/bin/killall")
+        .args(["-KILL", "-m", "Chromium"])
+        .output();
+
+      let _ = Command::new("/usr/bin/killall")
+        .args(["-KILL", "-m", "Brave"])
+        .output();
+
+      tokio::time::sleep(tokio::time::Duration::from_millis(1000)).await;
+      let system = System::new_all();
+
+      if system.process(Pid::from(pid as usize)).is_some() {
+        println!("WARNING: Process {pid} could not be terminated despite aggressive attempts");
+        // Don't return error - let the UI update anyway since we tried everything
+      }
+    }
+
+    println!("Aggressive browser termination completed for PID: {pid}");
+    Ok(())
+  }
+
+  // Helper function to kill process tree (Chromium browsers often spawn child processes)
+  async fn kill_chromium_process_tree_aggressive(
+    pid: u32,
+  ) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+    println!("Killing comprehensive process tree for PID: {pid}");
+
+    // Get all descendant processes using recursive process tree discovery
+    let descendant_pids = get_all_descendant_pids(pid).await;
+    println!(
+      "Found {} descendant processes to terminate",
+      descendant_pids.len()
+    );
+
+    // Kill all descendants first (reverse order - children before parents)
+    for &desc_pid in descendant_pids.iter().rev() {
+      if desc_pid != pid {
+        println!("Terminating descendant process: {desc_pid}");
+        let _ = Command::new("kill")
+          .args(["-KILL", &desc_pid.to_string()])
+          .output();
+      }
+    }
+
+    // No delay for initial termination
+
+    // Force kill any remaining descendants
+    for &desc_pid in descendant_pids.iter().rev() {
+      if desc_pid != pid {
+        let _ = Command::new("kill")
+          .args(["-KILL", &desc_pid.to_string()])
+          .output();
+      }
+    }
+
+    // Also use pkill as a backup to catch any processes we might have missed
+    let _ = Command::new("pkill")
+      .args(["-KILL", "-P", &pid.to_string()])
+      .output();
+
+    // On macOS, also try killing by process group for Chromium browsers
+    let _ = Command::new("pkill")
+      .args(["-KILL", "-g", &pid.to_string()])
+      .output();
+
+    Ok(())
+  }
+
+  // Helper function to kill all Chromium-related processes by name patterns
+  async fn kill_all_chromium_processes_by_name(
+  ) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+    println!("Killing all Chromium-related processes by name patterns");
+
+    let chromium_patterns = [
+      "Chrome",
+      "Chromium",
+      "Brave",
+      "chrome",
+      "chromium",
+      "brave",
+      "Google Chrome",
+      "Brave Browser",
+      "Chrome Helper",
+      "Chromium Helper",
+    ];
+
+    for pattern in &chromium_patterns {
+      let _ = Command::new("pkill")
+        .args(["-KILL", "-f", pattern])
+        .output();
+    }
+
+    Ok(())
+  }
+
+  // Recursively find all descendant processes
+  async fn get_all_descendant_pids(parent_pid: u32) -> Vec<u32> {
+    use sysinfo::System;
+
+    let system = System::new_all();
+    let mut descendants = Vec::new();
+    let mut to_check = vec![parent_pid];
+    let mut checked = std::collections::HashSet::new();
+
+    while let Some(current_pid) = to_check.pop() {
+      if checked.contains(&current_pid) {
+        continue;
+      }
+      checked.insert(current_pid);
+
+      // Find direct children of current_pid
+      for (pid, process) in system.processes() {
+        let pid_u32 = pid.as_u32();
+        if let Some(parent) = process.parent() {
+          if parent.as_u32() == current_pid && !checked.contains(&pid_u32) {
+            descendants.push(pid_u32);
+            to_check.push(pid_u32);
+          }
+        }
+      }
+    }
+
+    descendants
+  }
+
  pub async fn open_url_in_existing_browser_tor_mullvad(
    profile: &BrowserProfile,
    url: &str,
@@ -424,39 +676,6 @@ end try

    Ok(())
  }
-
-  pub async fn kill_browser_process_impl(
-    pid: u32,
-  ) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
-    println!("Attempting to kill browser process with PID: {pid}");
-
-    // First try SIGTERM (graceful shutdown)
-    let output = Command::new("kill")
-      .args(["-TERM", &pid.to_string()])
-      .output()
-      .map_err(|e| format!("Failed to execute kill command: {e}"))?;
-
-    if !output.status.success() {
-      // If SIGTERM fails, try SIGKILL (force kill)
-      let output = Command::new("kill")
-        .args(["-KILL", &pid.to_string()])
-        .output()?;
-
-      if !output.status.success() {
-        return Err(
-          format!(
-            "Failed to kill process {}: {}",
-            pid,
-            String::from_utf8_lossy(&output.stderr)
-          )
-          .into(),
-        );
-      }
-    }
-
-    println!("Successfully killed browser process with PID: {pid}");
-    Ok(())
-  }
 }

 #[cfg(target_os = "windows")]
@@ -696,41 +915,10 @@ pub mod windows {
      cmd.current_dir(parent_dir);
    }

-    let output = cmd.output()?;
-
-    if !output.status.success() {
-      // Try fallback without --new-window
-      let mut fallback_cmd = Command::new(&executable_path);
-      fallback_cmd.args([
-        &format!(
-          "--user-data-dir={}",
-          profile
-            .get_profile_data_path(profiles_dir)
-            .to_string_lossy()
-        ),
-        url,
-      ]);
-
-      if let Some(parent_dir) = browser_dir
-        .parent()
-        .or_else(|| browser_dir.ancestors().nth(1))
-      {
-        fallback_cmd.current_dir(parent_dir);
-      }
-
-      let fallback_output = fallback_cmd.output()?;
-
-      if !fallback_output.status.success() {
-        return Err(
-          format!(
-            "Failed to open URL in existing Chromium-based browser: {}",
-            String::from_utf8_lossy(&fallback_output.stderr)
-          )
-          .into(),
-        );
-      }
-    }
-
+    // Do not call output() to avoid blocking the UI thread while the browser processes the request.
+    // Spawn the helper process and return immediately. This applies to Chromium-based browsers
+    // including Brave to prevent UI freezes observed in production.
+    let _child = cmd.spawn()?;
    Ok(())
  }

@@ -1,4 +1,4 @@
-use crate::camoufox::CamoufoxConfig;
+use crate::camoufox_manager::CamoufoxConfig;
 use serde::{Deserialize, Serialize};
 use std::path::{Path, PathBuf};

@@ -20,6 +20,8 @@ pub struct BrowserProfile {
  pub camoufox_config: Option<CamoufoxConfig>, // Camoufox configuration
  #[serde(default)]
  pub group_id: Option<String>, // Reference to profile group
+  #[serde(default)]
+  pub tags: Vec<String>, // Free-form tags
 }

 pub fn default_release_type() -> String {
@@ -5,7 +5,8 @@ use std::fs::{self, create_dir_all};
 use std::path::{Path, PathBuf};

 use crate::browser::BrowserType;
-use crate::browser_runner::BrowserRunner;
+use crate::downloaded_browsers_registry::DownloadedBrowsersRegistry;
+use crate::profile::ProfileManager;

 #[derive(Debug, Serialize, Deserialize, Clone)]
 pub struct DetectedProfile {
@@ -17,12 +18,16 @@ pub struct DetectedProfile {

 pub struct ProfileImporter {
  base_dirs: BaseDirs,
+  downloaded_browsers_registry: &'static DownloadedBrowsersRegistry,
+  profile_manager: &'static ProfileManager,
 }

 impl ProfileImporter {
  fn new() -> Self {
    Self {
      base_dirs: BaseDirs::new().expect("Failed to get base directories"),
+      downloaded_browsers_registry: DownloadedBrowsersRegistry::instance(),
+      profile_manager: ProfileManager::instance(),
    }
  }

@@ -51,14 +56,11 @@ impl ProfileImporter {
    // Detect Chromium profiles
    detected_profiles.extend(self.detect_chromium_profiles()?);

-    // Detect Mullvad Browser profiles
-    detected_profiles.extend(self.detect_mullvad_browser_profiles()?);
-
    // Detect Zen Browser profiles
    detected_profiles.extend(self.detect_zen_browser_profiles()?);

-    // Detect TOR Browser profiles
-    detected_profiles.extend(self.detect_tor_browser_profiles()?);
+    // NOTE: Mullvad and Tor Browser profile imports are no longer supported.
+    // We intentionally do not detect these profiles to avoid offering them in the UI.

    // Remove duplicates based on path
    let mut seen_paths = HashSet::new();
@@ -242,45 +244,6 @@ impl ProfileImporter {
    Ok(profiles)
  }

-  /// Detect Mullvad Browser profiles
-  fn detect_mullvad_browser_profiles(
-    &self,
-  ) -> Result<Vec<DetectedProfile>, Box<dyn std::error::Error>> {
-    let mut profiles = Vec::new();
-
-    #[cfg(target_os = "macos")]
-    {
-      let mullvad_dir = self
-        .base_dirs
-        .home_dir()
-        .join("Library/Application Support/MullvadBrowser/Profiles");
-      profiles.extend(self.scan_firefox_profiles_dir(&mullvad_dir, "mullvad-browser")?);
-    }
-
-    #[cfg(target_os = "windows")]
-    {
-      // Primary location in AppData\Roaming
-      let app_data = self.base_dirs.data_dir();
-      let mullvad_dir = app_data.join("MullvadBrowser/Profiles");
-      profiles.extend(self.scan_firefox_profiles_dir(&mullvad_dir, "mullvad-browser")?);
-
-      // Also check common installation locations
-      let local_app_data = self.base_dirs.data_local_dir();
-      let mullvad_local_dir = local_app_data.join("MullvadBrowser/Profiles");
-      if mullvad_local_dir.exists() {
-        profiles.extend(self.scan_firefox_profiles_dir(&mullvad_local_dir, "mullvad-browser")?);
-      }
-    }
-
-    #[cfg(target_os = "linux")]
-    {
-      let mullvad_dir = self.base_dirs.home_dir().join(".mullvad-browser");
-      profiles.extend(self.scan_firefox_profiles_dir(&mullvad_dir, "mullvad-browser")?);
-    }
-
-    Ok(profiles)
-  }
-
  /// Detect Zen Browser profiles
  fn detect_zen_browser_profiles(
    &self,
@@ -312,107 +275,6 @@ impl ProfileImporter {
    Ok(profiles)
  }

-  /// Detect TOR Browser profiles
-  fn detect_tor_browser_profiles(
-    &self,
-  ) -> Result<Vec<DetectedProfile>, Box<dyn std::error::Error>> {
-    let mut profiles = Vec::new();
-
-    #[cfg(target_os = "macos")]
-    {
-      // TOR Browser on macOS is typically in Applications
-      let tor_dir = self
-        .base_dirs
-        .home_dir()
-        .join("Library/Application Support/TorBrowser-Data/Browser/profile.default");
-
-      if tor_dir.exists() {
-        profiles.push(DetectedProfile {
-          browser: "tor-browser".to_string(),
-          name: "TOR Browser - Default Profile".to_string(),
-          path: tor_dir.to_string_lossy().to_string(),
-          description: "Default TOR Browser profile".to_string(),
-        });
-      }
-    }
-
-    #[cfg(target_os = "windows")]
-    {
-      // Check common TOR Browser installation locations on Windows
-      let possible_paths = [
-        // Default installation in user directory
-        (
-          "Desktop",
-          "Desktop/Tor Browser/Browser/TorBrowser/Data/Browser/profile.default",
-        ),
-        // AppData locations
-        (
-          "AppData/Roaming",
-          "TorBrowser/Browser/TorBrowser/Data/Browser/profile.default",
-        ),
-        (
-          "AppData/Local",
-          "TorBrowser/Browser/TorBrowser/Data/Browser/profile.default",
-        ),
-      ];
-
-      let home_dir = self.base_dirs.home_dir();
-
-      for (location_name, relative_path) in &possible_paths {
-        let tor_dir = home_dir.join(relative_path);
-        if tor_dir.exists() {
-          profiles.push(DetectedProfile {
-            browser: "tor-browser".to_string(),
-            name: format!("TOR Browser - {} Profile", location_name),
-            path: tor_dir.to_string_lossy().to_string(),
-            description: format!("TOR Browser profile from {}", location_name),
-          });
-        }
-      }
-
-      // Also check AppData directories if available
-      let app_data = self.base_dirs.data_dir();
-      let tor_app_data =
-        app_data.join("TorBrowser/Browser/TorBrowser/Data/Browser/profile.default");
-      if tor_app_data.exists() {
-        profiles.push(DetectedProfile {
-          browser: "tor-browser".to_string(),
-          name: "TOR Browser - AppData Profile".to_string(),
-          path: tor_app_data.to_string_lossy().to_string(),
-          description: "TOR Browser profile from AppData".to_string(),
-        });
-      }
-    }
-
-    #[cfg(target_os = "linux")]
-    {
-      // Common TOR Browser locations on Linux
-      let possible_paths = [
-        ".local/share/torbrowser/tbb/x86_64/tor-browser_en-US/Browser/TorBrowser/Data/Browser/profile.default",
-        "tor-browser_en-US/Browser/TorBrowser/Data/Browser/profile.default",
-        ".tor-browser/Browser/TorBrowser/Data/Browser/profile.default",
-        "Downloads/tor-browser_en-US/Browser/TorBrowser/Data/Browser/profile.default",
-      ];
-
-      let home_dir = self.base_dirs.home_dir();
-
-      for relative_path in &possible_paths {
-        let tor_dir = home_dir.join(relative_path);
-        if tor_dir.exists() {
-          profiles.push(DetectedProfile {
-            browser: "tor-browser".to_string(),
-            name: "TOR Browser - Default Profile".to_string(),
-            path: tor_dir.to_string_lossy().to_string(),
-            description: "TOR Browser profile".to_string(),
-          });
-          break; // Only add the first one found to avoid duplicates
-        }
-      }
-    }
-
-    Ok(profiles)
-  }
-
  /// Scan Firefox-style profiles directory
  fn scan_firefox_profiles_dir(
    &self,
@@ -647,6 +509,11 @@ impl ProfileImporter {
    browser_type: &str,
    new_profile_name: &str,
  ) -> Result<(), Box<dyn std::error::Error>> {
+    // Disable imports for Mullvad and Tor browsers
+    if browser_type == "mullvad-browser" || browser_type == "tor-browser" {
+      return Err("Importing Mullvad Browser or Tor Browser profiles is not supported".into());
+    }
+
    // Validate that source path exists
    let source_path = Path::new(source_path);
    if !source_path.exists() {
@@ -658,7 +525,7 @@ impl ProfileImporter {
      .map_err(|_| format!("Invalid browser type: {browser_type}"))?;

    // Check if a profile with this name already exists
-    let existing_profiles = BrowserRunner::instance().list_profiles()?;
+    let existing_profiles = self.profile_manager.list_profiles()?;
    if existing_profiles
      .iter()
      .any(|p| p.name.to_lowercase() == new_profile_name.to_lowercase())
@@ -668,7 +535,7 @@ impl ProfileImporter {

    // Generate UUID for new profile and create the directory structure
    let profile_id = uuid::Uuid::new_v4();
-    let profiles_dir = BrowserRunner::instance().get_profiles_dir();
+    let profiles_dir = self.profile_manager.get_profiles_dir();
    let new_profile_uuid_dir = profiles_dir.join(profile_id.to_string());
    let new_profile_data_dir = new_profile_uuid_dir.join("profile");

@@ -693,10 +560,11 @@ impl ProfileImporter {
      release_type: "stable".to_string(),
      camoufox_config: None,
      group_id: None,
+      tags: Vec::new(),
    };

    // Save the profile metadata
-    BrowserRunner::instance().save_profile(&profile)?;
+    self.profile_manager.save_profile(&profile)?;

    println!(
      "Successfully imported profile '{}' from '{}'",
@@ -713,8 +581,9 @@ impl ProfileImporter {
    browser_type: &str,
  ) -> Result<String, Box<dyn std::error::Error>> {
    // Check if any version of the browser is downloaded
-    let registry = crate::downloaded_browsers::DownloadedBrowsersRegistry::instance();
-    let downloaded_versions = registry.get_downloaded_versions(browser_type);
+    let downloaded_versions = self
+      .downloaded_browsers_registry
+      .get_downloaded_versions(browser_type);

    if let Some(version) = downloaded_versions.first() {
      return Ok(version.clone());
@@ -778,3 +647,206 @@ pub async fn import_browser_profile(
 lazy_static::lazy_static! {
  static ref PROFILE_IMPORTER: ProfileImporter = ProfileImporter::new();
 }
+
+#[cfg(test)]
+mod tests {
+  use super::*;
+  use std::env;
+  use tempfile::TempDir;
+
+  fn create_test_profile_importer() -> (ProfileImporter, TempDir) {
+    let temp_dir = TempDir::new().expect("Failed to create temp directory");
+
+    // Set up a temporary home directory for testing
+    env::set_var("HOME", temp_dir.path());
+
+    let importer = ProfileImporter::new();
+    (importer, temp_dir)
+  }
+
+  #[test]
+  fn test_profile_importer_creation() {
+    let (_importer, _temp_dir) = create_test_profile_importer();
+    // Test passes if no panic occurs
+  }
+
+  #[test]
+  fn test_get_browser_display_name() {
+    let (importer, _temp_dir) = create_test_profile_importer();
+
+    assert_eq!(importer.get_browser_display_name("firefox"), "Firefox");
+    assert_eq!(
+      importer.get_browser_display_name("firefox-developer"),
+      "Firefox Developer"
+    );
+    assert_eq!(
+      importer.get_browser_display_name("chromium"),
+      "Chrome/Chromium"
+    );
+    assert_eq!(importer.get_browser_display_name("brave"), "Brave");
+    assert_eq!(
+      importer.get_browser_display_name("mullvad-browser"),
+      "Mullvad Browser"
+    );
+    assert_eq!(importer.get_browser_display_name("zen"), "Zen Browser");
+    assert_eq!(
+      importer.get_browser_display_name("tor-browser"),
+      "Tor Browser"
+    );
+    assert_eq!(
+      importer.get_browser_display_name("unknown"),
+      "Unknown Browser"
+    );
+  }
+
+  #[test]
+  fn test_detect_existing_profiles_no_panic() {
+    let (importer, _temp_dir) = create_test_profile_importer();
+
+    // This should not panic even if no browser profiles exist
+    let result = importer.detect_existing_profiles();
+    assert!(result.is_ok(), "detect_existing_profiles should not fail");
+
+    let _profiles = result.unwrap();
+    // We can't assert specific profiles since they depend on the system
+    // but we can verify the result is a valid Vec
+    // We can't assert specific profiles since they depend on the system
+    // but we can verify the result is a valid Vec (length check is always true for Vec, but shows intent)
+  }
+
+  #[test]
+  fn test_scan_firefox_profiles_dir_nonexistent() {
+    let (importer, temp_dir) = create_test_profile_importer();
+
+    let nonexistent_dir = temp_dir.path().join("nonexistent");
+    let result = importer.scan_firefox_profiles_dir(&nonexistent_dir, "firefox");
+
+    assert!(
+      result.is_ok(),
+      "Should handle nonexistent directory gracefully"
+    );
+    let profiles = result.unwrap();
+    assert!(
+      profiles.is_empty(),
+      "Should return empty vector for nonexistent directory"
+    );
+  }
+
+  #[test]
+  fn test_scan_chrome_profiles_dir_nonexistent() {
+    let (importer, temp_dir) = create_test_profile_importer();
+
+    let nonexistent_dir = temp_dir.path().join("nonexistent");
+    let result = importer.scan_chrome_profiles_dir(&nonexistent_dir, "chromium");
+
+    assert!(
+      result.is_ok(),
+      "Should handle nonexistent directory gracefully"
+    );
+    let profiles = result.unwrap();
+    assert!(
+      profiles.is_empty(),
+      "Should return empty vector for nonexistent directory"
+    );
+  }
+
+  #[test]
+  fn test_parse_firefox_profiles_ini_empty() {
+    let (importer, _temp_dir) = create_test_profile_importer();
+
+    let empty_content = "";
+    let profiles_dir = Path::new("/tmp");
+    let result = importer.parse_firefox_profiles_ini(empty_content, profiles_dir, "firefox");
+
+    assert!(result.is_ok(), "Should handle empty profiles.ini");
+    let profiles = result.unwrap();
+    assert!(
+      profiles.is_empty(),
+      "Should return empty vector for empty content"
+    );
+  }
+
+  #[test]
+  fn test_parse_firefox_profiles_ini_valid() {
+    let (importer, temp_dir) = create_test_profile_importer();
+
+    // Create a mock profile directory
+    let profiles_dir = temp_dir.path().join("profiles");
+    let profile_dir = profiles_dir.join("test.profile");
+    fs::create_dir_all(&profile_dir).expect("Should create profile directory");
+
+    // Create a prefs.js file to make it look like a valid profile
+    let prefs_file = profile_dir.join("prefs.js");
+    fs::write(&prefs_file, "// Firefox preferences").expect("Should create prefs.js");
+
+    let profiles_ini_content = r#"
+[Profile0]
+Name=Test Profile
+IsRelative=1
+Path=test.profile
+"#;
+
+    let result =
+      importer.parse_firefox_profiles_ini(profiles_ini_content, &profiles_dir, "firefox");
+
+    assert!(result.is_ok(), "Should parse valid profiles.ini");
+    let profiles = result.unwrap();
+    assert_eq!(profiles.len(), 1, "Should find one profile");
+    assert_eq!(profiles[0].name, "Firefox - Test Profile");
+    assert_eq!(profiles[0].browser, "firefox");
+  }
+
+  #[test]
+  fn test_copy_directory_recursive() {
+    let temp_dir = TempDir::new().expect("Failed to create temp directory");
+
+    // Create source directory structure
+    let source_dir = temp_dir.path().join("source");
+    let source_subdir = source_dir.join("subdir");
+    fs::create_dir_all(&source_subdir).expect("Should create source directories");
+
+    // Create some test files
+    let source_file1 = source_dir.join("file1.txt");
+    let source_file2 = source_subdir.join("file2.txt");
+    fs::write(&source_file1, "content1").expect("Should create file1");
+    fs::write(&source_file2, "content2").expect("Should create file2");
+
+    // Create destination directory
+    let dest_dir = temp_dir.path().join("dest");
+
+    // Copy recursively
+    let result = ProfileImporter::copy_directory_recursive(&source_dir, &dest_dir);
+    assert!(result.is_ok(), "Should copy directory successfully");
+
+    // Verify files were copied
+    let dest_file1 = dest_dir.join("file1.txt");
+    let dest_file2 = dest_dir.join("subdir").join("file2.txt");
+
+    assert!(dest_file1.exists(), "file1.txt should be copied");
+    assert!(dest_file2.exists(), "file2.txt should be copied");
+
+    let content1 = fs::read_to_string(&dest_file1).expect("Should read file1");
+    let content2 = fs::read_to_string(&dest_file2).expect("Should read file2");
+
+    assert_eq!(content1, "content1", "file1 content should match");
+    assert_eq!(content2, "content2", "file2 content should match");
+  }
+
+  #[test]
+  fn test_get_default_version_for_browser_no_versions() {
+    let (importer, _temp_dir) = create_test_profile_importer();
+
+    // This should fail since no versions are downloaded in test environment
+    let result = importer.get_default_version_for_browser("firefox");
+    assert!(
+      result.is_err(),
+      "Should fail when no versions are available"
+    );
+
+    let error_msg = result.unwrap_err().to_string();
+    assert!(
+      error_msg.contains("No downloaded versions found"),
+      "Error should mention no versions found"
+    );
+  }
+}
@@ -5,6 +5,7 @@ use std::collections::HashMap;
 use std::fs;
 use std::path::PathBuf;
 use std::sync::Mutex;
+use tauri::Emitter;
 use tauri_plugin_shell::ShellExt;

 use crate::browser::ProxySettings;
@@ -18,6 +19,8 @@ pub struct ProxyInfo {
  pub upstream_port: u16,
  pub upstream_type: String,
  pub local_port: u16,
+  // Optional profile name to which this proxy instance is logically tied
+  pub profile_name: Option<String>,
 }

 // Stored proxy configuration with name and ID for reuse
@@ -51,7 +54,9 @@ pub struct ProxyManager {
  active_proxies: Mutex<HashMap<u32, ProxyInfo>>, // Maps browser process ID to proxy info
  // Store proxy info by profile name for persistence across browser restarts
  profile_proxies: Mutex<HashMap<String, ProxySettings>>, // Maps profile name to proxy settings
-  stored_proxies: Mutex<HashMap<String, StoredProxy>>,    // Maps proxy ID to stored proxy
+  // Track active proxy IDs by profile name for targeted cleanup
+  profile_active_proxy_ids: Mutex<HashMap<String, String>>, // Maps profile name to proxy id
+  stored_proxies: Mutex<HashMap<String, StoredProxy>>,      // Maps proxy ID to stored proxy
  base_dirs: BaseDirs,
 }

@@ -61,6 +66,7 @@ impl ProxyManager {
    let manager = Self {
      active_proxies: Mutex::new(HashMap::new()),
      profile_proxies: Mutex::new(HashMap::new()),
+      profile_active_proxy_ids: Mutex::new(HashMap::new()),
      stored_proxies: Mutex::new(HashMap::new()),
      base_dirs,
    };
@@ -141,6 +147,7 @@ impl ProxyManager {
  // Create a new stored proxy
  pub fn create_stored_proxy(
    &self,
+    app_handle: &tauri::AppHandle,
    name: String,
    proxy_settings: ProxySettings,
  ) -> Result<StoredProxy, String> {
@@ -163,13 +170,21 @@ impl ProxyManager {
      eprintln!("Warning: Failed to save proxy: {e}");
    }

+    // Emit event for reactive UI updates
+    if let Err(e) = app_handle.emit("proxies-changed", ()) {
+      eprintln!("Failed to emit proxies-changed event: {e}");
+    }
+
    Ok(stored_proxy)
  }

  // Get all stored proxies
  pub fn get_stored_proxies(&self) -> Vec<StoredProxy> {
    let stored_proxies = self.stored_proxies.lock().unwrap();
-    stored_proxies.values().cloned().collect()
+    let mut list: Vec<StoredProxy> = stored_proxies.values().cloned().collect();
+    // Sort case-insensitively by name for consistent ordering across UI/API consumers
+    list.sort_by_key(|p| p.name.to_lowercase());
+    list
  }

  // Get a stored proxy by ID
@@ -177,6 +192,7 @@ impl ProxyManager {
  // Update a stored proxy
  pub fn update_stored_proxy(
    &self,
+    app_handle: &tauri::AppHandle,
    proxy_id: &str,
    name: Option<String>,
    proxy_settings: Option<ProxySettings>,
@@ -221,11 +237,20 @@ impl ProxyManager {
      eprintln!("Warning: Failed to save proxy: {e}");
    }

+    // Emit event for reactive UI updates
+    if let Err(e) = app_handle.emit("proxies-changed", ()) {
+      eprintln!("Failed to emit proxies-changed event: {e}");
+    }
+
    Ok(updated_proxy)
  }

  // Delete a stored proxy
-  pub fn delete_stored_proxy(&self, proxy_id: &str) -> Result<(), String> {
+  pub fn delete_stored_proxy(
+    &self,
+    app_handle: &tauri::AppHandle,
+    proxy_id: &str,
+  ) -> Result<(), String> {
    {
      let mut stored_proxies = self.stored_proxies.lock().unwrap();
      if stored_proxies.remove(proxy_id).is_none() {
@@ -237,6 +262,11 @@ impl ProxyManager {
      eprintln!("Warning: Failed to delete proxy file: {e}");
    }

+    // Emit event for reactive UI updates
+    if let Err(e) = app_handle.emit("proxies-changed", ()) {
+      eprintln!("Failed to emit proxies-changed event: {e}");
+    }
+
    Ok(())
  }

@@ -257,42 +287,93 @@ impl ProxyManager {
    browser_pid: u32,
    profile_name: Option<&str>,
  ) -> Result<ProxySettings, String> {
-    // Check if we already have a proxy for this browser
+    // First, proactively cleanup any dead proxies so we don't accidentally reuse stale ones
+    let _ = self.cleanup_dead_proxies(app_handle.clone()).await;
+
+    // If we have a previous proxy tied to this profile, and the upstream settings are changing,
+    // stop it before starting a new one so the change takes effect immediately.
+    if let Some(name) = profile_name {
+      // Check if we have an active proxy recorded for this profile
+      let maybe_existing_id = {
+        let map = self.profile_active_proxy_ids.lock().unwrap();
+        map.get(name).cloned()
+      };
+
+      if let Some(existing_id) = maybe_existing_id {
+        // Find the existing proxy info
+        let existing_info = {
+          let proxies = self.active_proxies.lock().unwrap();
+          proxies.values().find(|p| p.id == existing_id).cloned()
+        };
+
+        if let Some(existing) = existing_info {
+          let desired_type = proxy_settings
+            .map(|p| p.proxy_type.as_str())
+            .unwrap_or("DIRECT");
+          let desired_host = proxy_settings.map(|p| p.host.as_str()).unwrap_or("DIRECT");
+          let desired_port = proxy_settings.map(|p| p.port).unwrap_or(0);
+
+          let is_same_upstream = existing.upstream_type == desired_type
+            && existing.upstream_host == desired_host
+            && existing.upstream_port == desired_port;
+
+          if !is_same_upstream {
+            // Stop the previous proxy tied to this profile (best effort)
+            // We don't know the original PID mapping that created it; iterate to find its key
+            let pid_to_stop = {
+              let proxies = self.active_proxies.lock().unwrap();
+              proxies.iter().find_map(|(pid, info)| {
+                if info.id == existing_id {
+                  Some(*pid)
+                } else {
+                  None
+                }
+              })
+            };
+            if let Some(pid) = pid_to_stop {
+              let _ = self.stop_proxy(app_handle.clone(), pid).await;
+            }
+          }
+        }
+      }
+    }
+    // Check if we already have a proxy for this browser PID. If it exists but the upstream
+    // settings don't match the newly requested ones, stop it and create a new proxy so that
+    // changes take effect immediately.
+    let mut needs_restart = false;
    {
      let proxies = self.active_proxies.lock().unwrap();
-      if let Some(proxy) = proxies.get(&browser_pid) {
-        return Ok(ProxySettings {
-          proxy_type: "http".to_string(),
-          host: "127.0.0.1".to_string(), // Use 127.0.0.1 instead of localhost for better compatibility
-          port: proxy.local_port,
-          username: None,
-          password: None,
-        });
+      if let Some(existing) = proxies.get(&browser_pid) {
+        let desired_type = proxy_settings
+          .map(|p| p.proxy_type.as_str())
+          .unwrap_or("DIRECT");
+        let desired_host = proxy_settings.map(|p| p.host.as_str()).unwrap_or("DIRECT");
+        let desired_port = proxy_settings.map(|p| p.port).unwrap_or(0);
+
+        let is_same_upstream = existing.upstream_type == desired_type
+          && existing.upstream_host == desired_host
+          && existing.upstream_port == desired_port;
+
+        if is_same_upstream {
+          // Reuse existing local proxy
+          return Ok(ProxySettings {
+            proxy_type: "http".to_string(),
+            host: "127.0.0.1".to_string(),
+            port: existing.local_port,
+            username: None,
+            password: None,
+          });
+        } else {
+          // Upstream changed; we must restart the local proxy so that traffic is routed correctly
+          needs_restart = true;
+        }
      }
    }

-    // Check if we have a preferred port for this profile
-    let preferred_port = if let Some(name) = profile_name {
-      let profile_proxies = self.profile_proxies.lock().unwrap();
-      profile_proxies.get(name).and_then(|_settings| {
-        // Find existing proxy with same settings to reuse port
-        let active_proxies = self.active_proxies.lock().unwrap();
-        active_proxies
-          .values()
-          .find(|p| {
-            if let Some(proxy_settings) = proxy_settings {
-              p.upstream_host == proxy_settings.host
-                && p.upstream_port == proxy_settings.port
-                && p.upstream_type == proxy_settings.proxy_type
-            } else {
-              p.upstream_type == "DIRECT"
-            }
-          })
-          .map(|p| p.local_port)
-      })
-    } else {
-      None
-    };
+    if needs_restart {
+      // Best-effort stop of the old proxy for this PID before starting a new one
+      let _ = self.stop_proxy(app_handle.clone(), browser_pid).await;
+    }

    // Start a new proxy using the nodecar binary with the correct CLI interface
    let mut nodecar = app_handle
@@ -321,11 +402,6 @@ impl ProxyManager {
      }
    }

-    // If we have a preferred port, use it
-    if let Some(port) = preferred_port {
-      nodecar = nodecar.arg("--port").arg(port.to_string());
-    }
-
    // Execute the command and wait for it to complete
    // The nodecar binary should start the worker and then exit
    let output = nodecar
@@ -367,8 +443,33 @@ impl ProxyManager {
        .map(|p| p.proxy_type.clone())
        .unwrap_or_else(|| "DIRECT".to_string()),
      local_port,
+      profile_name: profile_name.map(|s| s.to_string()),
    };

+    // Wait for the local proxy port to be ready to accept connections
+    {
+      use tokio::net::TcpStream;
+      use tokio::time::{sleep, Duration};
+      let mut ready = false;
+      for _ in 0..50 {
+        match TcpStream::connect((std::net::Ipv4Addr::LOCALHOST, proxy_info.local_port)).await {
+          Ok(_stream) => {
+            ready = true;
+            break;
+          }
+          Err(_) => {
+            sleep(Duration::from_millis(100)).await;
+          }
+        }
+      }
+      if !ready {
+        return Err(format!(
+          "Local proxy on 127.0.0.1:{} did not become ready in time",
+          proxy_info.local_port
+        ));
+      }
+    }
+
    // Store the proxy info
    {
      let mut proxies = self.active_proxies.lock().unwrap();
@@ -381,6 +482,9 @@ impl ProxyManager {
        let mut profile_proxies = self.profile_proxies.lock().unwrap();
        profile_proxies.insert(name.to_string(), proxy_settings.clone());
      }
+      // Also record the active proxy id for this profile for quick cleanup on changes
+      let mut map = self.profile_active_proxy_ids.lock().unwrap();
+      map.insert(name.to_string(), proxy_info.id.clone());
    }

    // Return proxy settings for the browser
@@ -399,10 +503,10 @@ impl ProxyManager {
    app_handle: tauri::AppHandle,
    browser_pid: u32,
  ) -> Result<(), String> {
-    let proxy_id = {
+    let (proxy_id, profile_name): (String, Option<String>) = {
      let mut proxies = self.active_proxies.lock().unwrap();
      match proxies.remove(&browser_pid) {
-        Some(proxy) => proxy.id,
+        Some(proxy) => (proxy.id, proxy.profile_name.clone()),
        None => return Ok(()), // No proxy to stop
      }
    };
@@ -415,7 +519,7 @@ impl ProxyManager {
      .arg("proxy")
      .arg("stop")
      .arg("--id")
-      .arg(proxy_id);
+      .arg(&proxy_id);

    let output = nodecar.output().await.unwrap();

@@ -425,6 +529,21 @@ impl ProxyManager {
      // We still return Ok since we've already removed the proxy from our tracking
    }

+    // Clear profile-to-proxy mapping if it references this proxy
+    if let Some(name) = profile_name {
+      let mut map = self.profile_active_proxy_ids.lock().unwrap();
+      if let Some(current_id) = map.get(&name) {
+        if current_id == &proxy_id {
+          map.remove(&name);
+        }
+      }
+    }
+
+    // Emit event for reactive UI updates
+    if let Err(e) = app_handle.emit("proxies-changed", ()) {
+      eprintln!("Failed to emit proxies-changed event: {e}");
+    }
+
    Ok(())
  }

@@ -465,14 +584,12 @@ impl ProxyManager {
      let _ = self.stop_proxy(app_handle.clone(), *dead_pid).await;
    }

-    Ok(dead_pids)
-  }
+    // Emit event for reactive UI updates
+    if let Err(e) = app_handle.emit("proxies-changed", ()) {
+      eprintln!("Failed to emit proxies-changed event: {e}");
+    }

-  // Get all active proxy PIDs for monitoring
-  #[allow(dead_code)]
-  pub fn get_active_proxy_pids(&self) -> Vec<u32> {
-    let proxies = self.active_proxies.lock().unwrap();
-    proxies.keys().copied().collect()
+    Ok(dead_pids)
  }
 }

@@ -573,8 +690,23 @@ mod tests {
      password: Some("pass".to_string()),
    };

-    assert!(!valid_settings.host.is_empty());
-    assert!(valid_settings.port > 0);
+    assert!(
+      !valid_settings.host.is_empty(),
+      "Valid settings should have non-empty host"
+    );
+    assert!(
+      valid_settings.port > 0,
+      "Valid settings should have positive port"
+    );
+    assert_eq!(valid_settings.proxy_type, "http", "Proxy type should match");
+    assert!(
+      valid_settings.username.is_some(),
+      "Username should be present"
+    );
+    assert!(
+      valid_settings.password.is_some(),
+      "Password should be present"
+    );

    // Test proxy settings with empty values
    let empty_settings = ProxySettings {
@@ -585,7 +717,16 @@ mod tests {
      password: None,
    };

-    assert!(empty_settings.host.is_empty());
+    assert!(
+      empty_settings.host.is_empty(),
+      "Empty settings should have empty host"
+    );
+    assert_eq!(
+      empty_settings.port, 0,
+      "Empty settings should have zero port"
+    );
+    assert!(empty_settings.username.is_none(), "Username should be None");
+    assert!(empty_settings.password.is_none(), "Password should be None");
  }

  #[tokio::test]
@@ -607,6 +748,7 @@ mod tests {
          upstream_port: 3128,
          upstream_type: "http".to_string(),
          local_port: (8000 + i) as u16,
+          profile_name: None,
        };

        // Add proxy
@@ -743,7 +885,7 @@ mod tests {
    };

    // Test command arguments match expected format
-    let _expected_args = [
+    let expected_args = [
      "proxy",
      "start",
      "--host",
@@ -759,11 +901,37 @@ mod tests {
    ];

    // This test verifies the argument structure without actually running the command
-    assert_eq!(proxy_settings.host, "proxy.example.com");
-    assert_eq!(proxy_settings.port, 8080);
-    assert_eq!(proxy_settings.proxy_type, "http");
-    assert_eq!(proxy_settings.username.as_ref().unwrap(), "user");
-    assert_eq!(proxy_settings.password.as_ref().unwrap(), "pass");
+    assert_eq!(
+      proxy_settings.host, "proxy.example.com",
+      "Host should match expected value"
+    );
+    assert_eq!(
+      proxy_settings.port, 8080,
+      "Port should match expected value"
+    );
+    assert_eq!(
+      proxy_settings.proxy_type, "http",
+      "Proxy type should match expected value"
+    );
+    assert_eq!(
+      proxy_settings.username.as_ref().unwrap(),
+      "user",
+      "Username should match expected value"
+    );
+    assert_eq!(
+      proxy_settings.password.as_ref().unwrap(),
+      "pass",
+      "Password should match expected value"
+    );
+
+    // Verify expected args structure
+    assert_eq!(expected_args[0], "proxy", "First arg should be 'proxy'");
+    assert_eq!(expected_args[1], "start", "Second arg should be 'start'");
+    assert_eq!(expected_args[2], "--host", "Third arg should be '--host'");
+    assert_eq!(
+      expected_args[3], "proxy.example.com",
+      "Fourth arg should be host value"
+    );
  }

  // Test the CLI detachment specifically - ensure the CLI exits properly
@@ -3,8 +3,11 @@ use serde::{Deserialize, Serialize};
 use std::fs::{self, create_dir_all};
 use std::path::PathBuf;

-use crate::api_client::ApiClient;
-use crate::version_updater;
+use aes_gcm::{
+  aead::{Aead, AeadCore, KeyInit, OsRng},
+  Aes256Gcm, Key, Nonce,
+};
+use argon2::{password_hash::SaltString, Argon2, PasswordHasher};

 #[derive(Debug, Serialize, Deserialize, Clone)]
 pub struct TableSortingSettings {
@@ -27,17 +30,33 @@ pub struct AppSettings {
  pub set_as_default_browser: bool,
  #[serde(default = "default_theme")]
  pub theme: String, // "light", "dark", or "system"
+  #[serde(default)]
+  pub custom_theme: Option<std::collections::HashMap<String, String>>, // CSS var name -> value (e.g., "--background": "#1a1b26")
+  #[serde(default)]
+  pub api_enabled: bool,
+  #[serde(default = "default_api_port")]
+  pub api_port: u16,
+  #[serde(default)]
+  pub api_token: Option<String>, // Displayed token for user to copy
 }

 fn default_theme() -> String {
  "system".to_string()
 }

+fn default_api_port() -> u16 {
+  10108
+}
+
 impl Default for AppSettings {
  fn default() -> Self {
    Self {
      set_as_default_browser: false,
      theme: "system".to_string(),
+      custom_theme: None,
+      api_enabled: false,
+      api_port: 10108,
+      api_token: None,
    }
  }
 }
@@ -151,22 +170,257 @@ impl SettingsManager {
    // Always return false - we don't show settings on startup anymore
    Ok(false)
  }
+
+  fn get_vault_password() -> String {
+    env!("DONUT_BROWSER_VAULT_PASSWORD").to_string()
+  }
+
+  pub async fn generate_api_token(
+    &self,
+    app_handle: &tauri::AppHandle,
+  ) -> Result<String, Box<dyn std::error::Error>> {
+    // Generate a secure random token (base64 encoded for URL safety)
+    let token_bytes: [u8; 32] = {
+      use rand::RngCore;
+      let mut rng = rand::rng();
+      let mut bytes = [0u8; 32];
+      rng.fill_bytes(&mut bytes);
+      bytes
+    };
+    use base64::{engine::general_purpose, Engine as _};
+    let token = general_purpose::URL_SAFE_NO_PAD.encode(token_bytes);
+
+    // Store token securely
+    self.store_api_token(app_handle, &token).await?;
+
+    Ok(token)
+  }
+
+  pub async fn store_api_token(
+    &self,
+    _app_handle: &tauri::AppHandle,
+    token: &str,
+  ) -> Result<(), Box<dyn std::error::Error>> {
+    // Store token in an encrypted file using Argon2 + AES-GCM
+    let token_file = self.get_settings_dir().join("api_token.dat");
+
+    // Create directory if it doesn't exist
+    if let Some(parent) = token_file.parent() {
+      std::fs::create_dir_all(parent)?;
+    }
+
+    let vault_password = Self::get_vault_password();
+
+    // Generate a random salt for Argon2
+    let salt = SaltString::generate(&mut OsRng);
+
+    // Use Argon2 to derive a 32-byte key from the vault password
+    let argon2 = Argon2::default();
+    let password_hash = argon2
+      .hash_password(vault_password.as_bytes(), &salt)
+      .map_err(|e| format!("Argon2 key derivation failed: {e}"))?;
+    let hash_value = password_hash.hash.unwrap();
+    let hash_bytes = hash_value.as_bytes();
+
+    // Take first 32 bytes for AES-256 key
+    let key_bytes: [u8; 32] = hash_bytes[..32]
+      .try_into()
+      .map_err(|_| "Invalid key length")?;
+    let key = Key::<Aes256Gcm>::from(key_bytes);
+    let cipher = Aes256Gcm::new(&key);
+
+    // Generate a random nonce
+    let nonce = Aes256Gcm::generate_nonce(&mut OsRng);
+
+    // Encrypt the token
+    let ciphertext = cipher
+      .encrypt(&nonce, token.as_bytes())
+      .map_err(|e| format!("Encryption failed: {e}"))?;
+
+    // Create file data with header, salt, nonce, and encrypted data
+    let mut file_data = Vec::new();
+    file_data.extend_from_slice(b"DBAPI"); // 5-byte header
+    file_data.push(2u8); // Version 2 (Argon2 + AES-GCM)
+
+    // Store salt length and salt
+    let salt_str = salt.as_str();
+    file_data.push(salt_str.len() as u8);
+    file_data.extend_from_slice(salt_str.as_bytes());
+
+    // Store nonce (12 bytes for AES-GCM)
+    file_data.extend_from_slice(&nonce);
+
+    // Store ciphertext length and ciphertext
+    file_data.extend_from_slice(&(ciphertext.len() as u32).to_le_bytes());
+    file_data.extend_from_slice(&ciphertext);
+
+    std::fs::write(token_file, file_data)?;
+    Ok(())
+  }
+
+  pub async fn get_api_token(
+    &self,
+    _app_handle: &tauri::AppHandle,
+  ) -> Result<Option<String>, Box<dyn std::error::Error>> {
+    let token_file = self.get_settings_dir().join("api_token.dat");
+
+    if !token_file.exists() {
+      return Ok(None);
+    }
+
+    let file_data = std::fs::read(token_file)?;
+
+    // Validate header
+    if file_data.len() < 6 || &file_data[0..5] != b"DBAPI" {
+      return Ok(None);
+    }
+
+    let version = file_data[5];
+
+    // Only support Argon2 + AES-GCM (version 2)
+    if version != 2 {
+      return Ok(None);
+    }
+
+    // Argon2 + AES-GCM decryption
+    let mut offset = 6;
+
+    // Read salt
+    if offset >= file_data.len() {
+      return Ok(None);
+    }
+    let salt_len = file_data[offset] as usize;
+    offset += 1;
+
+    if offset + salt_len > file_data.len() {
+      return Ok(None);
+    }
+    let salt_bytes = &file_data[offset..offset + salt_len];
+    let salt_str = std::str::from_utf8(salt_bytes).map_err(|_| "Invalid salt encoding")?;
+    let salt = SaltString::from_b64(salt_str).map_err(|_| "Invalid salt format")?;
+    offset += salt_len;
+
+    // Read nonce (12 bytes)
+    if offset + 12 > file_data.len() {
+      return Ok(None);
+    }
+    let nonce_bytes: [u8; 12] = file_data[offset..offset + 12]
+      .try_into()
+      .map_err(|_| "Invalid nonce length")?;
+    let nonce = Nonce::from(nonce_bytes);
+    offset += 12;
+
+    // Read ciphertext
+    if offset + 4 > file_data.len() {
+      return Ok(None);
+    }
+    let ciphertext_len = u32::from_le_bytes([
+      file_data[offset],
+      file_data[offset + 1],
+      file_data[offset + 2],
+      file_data[offset + 3],
+    ]) as usize;
+    offset += 4;
+
+    if offset + ciphertext_len > file_data.len() {
+      return Ok(None);
+    }
+    let ciphertext = &file_data[offset..offset + ciphertext_len];
+
+    // Derive key using Argon2
+    let vault_password = Self::get_vault_password();
+    let argon2 = Argon2::default();
+    let password_hash = argon2
+      .hash_password(vault_password.as_bytes(), &salt)
+      .map_err(|e| format!("Argon2 key derivation failed: {e}"))?;
+    let hash_value = password_hash.hash.unwrap();
+    let hash_bytes = hash_value.as_bytes();
+
+    let key_bytes: [u8; 32] = hash_bytes[..32]
+      .try_into()
+      .map_err(|_| "Invalid key length")?;
+    let key = Key::<Aes256Gcm>::from(key_bytes);
+    let cipher = Aes256Gcm::new(&key);
+
+    // Decrypt the token
+    let plaintext = cipher
+      .decrypt(&nonce, ciphertext)
+      .map_err(|_| "Decryption failed")?;
+
+    match String::from_utf8(plaintext) {
+      Ok(token) => Ok(Some(token)),
+      Err(_) => Ok(None),
+    }
+  }
+
+  pub async fn remove_api_token(
+    &self,
+    _app_handle: &tauri::AppHandle,
+  ) -> Result<(), Box<dyn std::error::Error>> {
+    let token_file = self.get_settings_dir().join("api_token.dat");
+
+    if token_file.exists() {
+      std::fs::remove_file(token_file)?;
+    }
+
+    Ok(())
+  }
 }

 #[tauri::command]
-pub async fn get_app_settings() -> Result<AppSettings, String> {
+pub async fn get_app_settings(app_handle: tauri::AppHandle) -> Result<AppSettings, String> {
  let manager = SettingsManager::instance();
-  manager
+  let mut settings = manager
    .load_settings()
-    .map_err(|e| format!("Failed to load settings: {e}"))
+    .map_err(|e| format!("Failed to load settings: {e}"))?;
+
+  // Always load token for display purposes if it exists
+  settings.api_token = manager
+    .get_api_token(&app_handle)
+    .await
+    .map_err(|e| format!("Failed to load API token: {e}"))?;
+
+  Ok(settings)
 }

 #[tauri::command]
-pub async fn save_app_settings(settings: AppSettings) -> Result<(), String> {
+pub async fn save_app_settings(
+  app_handle: tauri::AppHandle,
+  mut settings: AppSettings,
+) -> Result<AppSettings, String> {
  let manager = SettingsManager::instance();
+
+  if settings.api_enabled {
+    if let Some(ref token) = settings.api_token {
+      manager
+        .store_api_token(&app_handle, token)
+        .await
+        .map_err(|e| format!("Failed to store API token: {e}"))?;
+    } else {
+      let token = manager
+        .generate_api_token(&app_handle)
+        .await
+        .map_err(|e| format!("Failed to generate API token: {e}"))?;
+      settings.api_token = Some(token);
+    }
+  }
+
+  // If API is being disabled, remove the token
+  if !settings.api_enabled {
+    manager
+      .remove_api_token(&app_handle)
+      .await
+      .map_err(|e| format!("Failed to remove API token: {e}"))?;
+    settings.api_token = None;
+  }
+
+  let mut persist_settings = settings.clone();
+  persist_settings.api_token = None;
  manager
-    .save_settings(&settings)
-    .map_err(|e| format!("Failed to save settings: {e}"))
+    .save_settings(&persist_settings)
+    .map_err(|e| format!("Failed to save settings: {e}"))?;
+
+  Ok(settings)
 }

 #[tauri::command]
@@ -193,55 +447,221 @@ pub async fn save_table_sorting_settings(sorting: TableSortingSettings) -> Resul
    .map_err(|e| format!("Failed to save table sorting settings: {e}"))
 }

-#[tauri::command]
-pub async fn clear_all_version_cache_and_refetch(
-  app_handle: tauri::AppHandle,
-) -> Result<(), String> {
-  let api_client = ApiClient::instance();
-
-  // Clear all cache first
-  api_client
-    .clear_all_cache()
-    .map_err(|e| format!("Failed to clear version cache: {e}"))?;
-
-  // Disable all browsers during the update process
-  let auto_updater = crate::auto_updater::AutoUpdater::instance();
-  let supported_browsers =
-    crate::browser_version_service::BrowserVersionService::instance().get_supported_browsers();
-
-  // Load current state and disable all browsers
-  let mut state = auto_updater
-    .load_auto_update_state()
-    .map_err(|e| format!("Failed to load auto update state: {e}"))?;
-  for browser in &supported_browsers {
-    state.disabled_browsers.insert(browser.clone());
-  }
-  auto_updater
-    .save_auto_update_state(&state)
-    .map_err(|e| format!("Failed to save auto update state: {e}"))?;
-
-  let updater = version_updater::get_version_updater();
-  let updater_guard = updater.lock().await;
-
-  let result = updater_guard
-    .trigger_manual_update(&app_handle)
-    .await
-    .map_err(|e| format!("Failed to trigger version update: {e}"));
-
-  // Re-enable all browsers after the update completes (regardless of success/failure)
-  let mut final_state = auto_updater.load_auto_update_state().unwrap_or_default();
-  for browser in &supported_browsers {
-    final_state.disabled_browsers.remove(browser);
-  }
-  if let Err(e) = auto_updater.save_auto_update_state(&final_state) {
-    eprintln!("Warning: Failed to re-enable browsers after cache clear: {e}");
-  }
-
-  result?;
-  Ok(())
-}
-
 // Global singleton instance
 lazy_static::lazy_static! {
  static ref SETTINGS_MANAGER: SettingsManager = SettingsManager::new();
 }
+
+#[cfg(test)]
+mod tests {
+  use super::*;
+  use std::env;
+  use tempfile::TempDir;
+
+  fn create_test_settings_manager() -> (SettingsManager, TempDir) {
+    let temp_dir = TempDir::new().expect("Failed to create temp directory");
+
+    // Set up a temporary home directory for testing
+    env::set_var("HOME", temp_dir.path());
+
+    let manager = SettingsManager::new();
+    (manager, temp_dir)
+  }
+
+  #[test]
+  fn test_settings_manager_creation() {
+    let (_manager, _temp_dir) = create_test_settings_manager();
+    // Test passes if no panic occurs
+  }
+
+  #[test]
+  fn test_default_app_settings() {
+    let default_settings = AppSettings::default();
+
+    assert!(
+      !default_settings.set_as_default_browser,
+      "Default should not set as default browser"
+    );
+    assert_eq!(
+      default_settings.theme, "system",
+      "Default theme should be system"
+    );
+  }
+
+  #[test]
+  fn test_default_table_sorting_settings() {
+    let default_sorting = TableSortingSettings::default();
+
+    assert_eq!(
+      default_sorting.column, "name",
+      "Default sort column should be name"
+    );
+    assert_eq!(
+      default_sorting.direction, "asc",
+      "Default sort direction should be asc"
+    );
+  }
+
+  #[test]
+  fn test_load_settings_nonexistent_file() {
+    let (manager, _temp_dir) = create_test_settings_manager();
+
+    let result = manager.load_settings();
+    assert!(
+      result.is_ok(),
+      "Should handle nonexistent settings file gracefully"
+    );
+
+    let settings = result.unwrap();
+    assert!(
+      !settings.set_as_default_browser,
+      "Should return default settings"
+    );
+    assert_eq!(settings.theme, "system", "Should return default theme");
+  }
+
+  #[test]
+  fn test_save_and_load_settings() {
+    let (manager, _temp_dir) = create_test_settings_manager();
+
+    let test_settings = AppSettings {
+      set_as_default_browser: true,
+      theme: "dark".to_string(),
+      custom_theme: None,
+      api_enabled: false,
+      api_port: 10108,
+      api_token: None,
+    };
+
+    // Save settings
+    let save_result = manager.save_settings(&test_settings);
+    assert!(save_result.is_ok(), "Should save settings successfully");
+
+    // Load settings back
+    let load_result = manager.load_settings();
+    assert!(load_result.is_ok(), "Should load settings successfully");
+
+    let loaded_settings = load_result.unwrap();
+    assert!(
+      loaded_settings.set_as_default_browser,
+      "Loaded settings should match saved"
+    );
+    assert_eq!(
+      loaded_settings.theme, "dark",
+      "Loaded theme should match saved"
+    );
+  }
+
+  #[test]
+  fn test_load_table_sorting_nonexistent_file() {
+    let (manager, _temp_dir) = create_test_settings_manager();
+
+    let result = manager.load_table_sorting();
+    assert!(
+      result.is_ok(),
+      "Should handle nonexistent sorting file gracefully"
+    );
+
+    let sorting = result.unwrap();
+    assert_eq!(sorting.column, "name", "Should return default sorting");
+    assert_eq!(sorting.direction, "asc", "Should return default direction");
+  }
+
+  #[test]
+  fn test_save_and_load_table_sorting() {
+    let (manager, _temp_dir) = create_test_settings_manager();
+
+    let test_sorting = TableSortingSettings {
+      column: "browser".to_string(),
+      direction: "desc".to_string(),
+    };
+
+    // Save sorting
+    let save_result = manager.save_table_sorting(&test_sorting);
+    assert!(save_result.is_ok(), "Should save sorting successfully");
+
+    // Load sorting back
+    let load_result = manager.load_table_sorting();
+    assert!(load_result.is_ok(), "Should load sorting successfully");
+
+    let loaded_sorting = load_result.unwrap();
+    assert_eq!(
+      loaded_sorting.column, "browser",
+      "Loaded column should match saved"
+    );
+    assert_eq!(
+      loaded_sorting.direction, "desc",
+      "Loaded direction should match saved"
+    );
+  }
+
+  #[test]
+  fn test_should_show_settings_on_startup() {
+    let (manager, _temp_dir) = create_test_settings_manager();
+
+    let result = manager.should_show_settings_on_startup();
+    assert!(result.is_ok(), "Should not fail");
+
+    let should_show = result.unwrap();
+    assert!(
+      !should_show,
+      "Should always return false as per implementation"
+    );
+  }
+
+  #[test]
+  fn test_load_corrupted_settings_file() {
+    let (manager, _temp_dir) = create_test_settings_manager();
+
+    // Create settings directory
+    let settings_dir = manager.get_settings_dir();
+    fs::create_dir_all(&settings_dir).expect("Should create settings directory");
+
+    // Write corrupted JSON
+    let settings_file = manager.get_settings_file();
+    fs::write(&settings_file, "{ invalid json }").expect("Should write corrupted file");
+
+    // Should handle corrupted file gracefully
+    let result = manager.load_settings();
+    assert!(
+      result.is_ok(),
+      "Should handle corrupted settings file gracefully"
+    );
+
+    let settings = result.unwrap();
+    assert!(
+      !settings.set_as_default_browser,
+      "Should return default settings for corrupted file"
+    );
+    assert_eq!(
+      settings.theme, "system",
+      "Should return default theme for corrupted file"
+    );
+  }
+
+  #[test]
+  fn test_settings_file_paths() {
+    let (manager, _temp_dir) = create_test_settings_manager();
+
+    let settings_dir = manager.get_settings_dir();
+    let settings_file = manager.get_settings_file();
+    let sorting_file = manager.get_table_sorting_file();
+
+    assert!(
+      settings_dir.to_string_lossy().contains("settings"),
+      "Settings dir should contain 'settings'"
+    );
+    assert!(
+      settings_file
+        .to_string_lossy()
+        .ends_with("app_settings.json"),
+      "Settings file should end with app_settings.json"
+    );
+    assert!(
+      sorting_file
+        .to_string_lossy()
+        .ends_with("table_sorting.json"),
+      "Sorting file should end with table_sorting.json"
+    );
+  }
+}
@@ -0,0 +1,114 @@
+use crate::profile::BrowserProfile;
+use directories::BaseDirs;
+use serde::{Deserialize, Serialize};
+use std::collections::BTreeSet;
+use std::fs;
+use std::path::{Path, PathBuf};
+
+#[derive(Debug, Serialize, Deserialize, Default, Clone)]
+struct TagsData {
+  tags: Vec<String>,
+}
+
+pub struct TagManager {
+  base_dirs: BaseDirs,
+  data_dir_override: Option<PathBuf>,
+}
+
+impl TagManager {
+  pub fn new() -> Self {
+    Self {
+      base_dirs: BaseDirs::new().expect("Failed to get base directories"),
+      data_dir_override: std::env::var("DONUTBROWSER_DATA_DIR")
+        .ok()
+        .map(PathBuf::from),
+    }
+  }
+
+  // Helper for tests to override data directory without global env var
+  #[allow(dead_code)]
+  pub fn with_data_dir_override(dir: &Path) -> Self {
+    Self {
+      base_dirs: BaseDirs::new().expect("Failed to get base directories"),
+      data_dir_override: Some(dir.to_path_buf()),
+    }
+  }
+
+  fn get_tags_file_path(&self) -> PathBuf {
+    if let Some(dir) = &self.data_dir_override {
+      let mut override_path = dir.clone();
+      let _ = fs::create_dir_all(&override_path);
+      override_path.push("tags.json");
+      return override_path;
+    }
+
+    let mut path = self.base_dirs.data_local_dir().to_path_buf();
+    path.push(if cfg!(debug_assertions) {
+      "DonutBrowserDev"
+    } else {
+      "DonutBrowser"
+    });
+    path.push("data");
+    path.push("tags.json");
+    path
+  }
+
+  fn load_tags_data(&self) -> Result<TagsData, Box<dyn std::error::Error>> {
+    let file_path = self.get_tags_file_path();
+    if !file_path.exists() {
+      return Ok(TagsData::default());
+    }
+    let content = fs::read_to_string(file_path)?;
+    let data: TagsData = serde_json::from_str(&content)?;
+    Ok(data)
+  }
+
+  fn save_tags_data(&self, data: &TagsData) -> Result<(), Box<dyn std::error::Error>> {
+    let file_path = self.get_tags_file_path();
+    if let Some(parent) = file_path.parent() {
+      fs::create_dir_all(parent)?;
+    }
+    let json = serde_json::to_string_pretty(data)?;
+    fs::write(file_path, json)?;
+    Ok(())
+  }
+
+  pub fn get_all_tags(&self) -> Result<Vec<String>, Box<dyn std::error::Error>> {
+    let mut all = self.load_tags_data()?.tags;
+    // Ensure deterministic order
+    all.sort();
+    all.dedup();
+    Ok(all)
+  }
+
+  pub fn rebuild_from_profiles(
+    &self,
+    profiles: &[BrowserProfile],
+  ) -> Result<Vec<String>, Box<dyn std::error::Error>> {
+    // Build a set of all tags currently used by any profile
+    let mut set: BTreeSet<String> = BTreeSet::new();
+    for profile in profiles {
+      for tag in &profile.tags {
+        // Store exactly as provided (no normalization) to preserve characters
+        set.insert(tag.clone());
+      }
+    }
+    let combined: Vec<String> = set.into_iter().collect();
+    self.save_tags_data(&TagsData {
+      tags: combined.clone(),
+    })?;
+    Ok(combined)
+  }
+}
+
+#[tauri::command]
+pub fn get_all_tags() -> Result<Vec<String>, String> {
+  let tag_manager = crate::tag_manager::TAG_MANAGER.lock().unwrap();
+  tag_manager
+    .get_all_tags()
+    .map_err(|e| format!("Failed to get tags: {e}"))
+}
+
+lazy_static::lazy_static! {
+  pub static ref TAG_MANAGER: std::sync::Mutex<TagManager> = std::sync::Mutex::new(TagManager::new());
+}
@@ -1,548 +0,0 @@
-use serde::{Deserialize, Serialize};
-use std::process::Command;
-
-#[derive(Debug, Serialize, Deserialize, Clone)]
-pub struct SystemTheme {
-  pub theme: String, // "light", "dark", or "unknown"
-}
-
-pub struct ThemeDetector;
-
-impl ThemeDetector {
-  fn new() -> Self {
-    Self
-  }
-
-  pub fn instance() -> &'static ThemeDetector {
-    &THEME_DETECTOR
-  }
-
-  /// Detect the system theme preference
-  pub fn detect_system_theme(&self) -> SystemTheme {
-    #[cfg(target_os = "linux")]
-    return linux::detect_system_theme();
-
-    #[cfg(target_os = "macos")]
-    return macos::detect_system_theme();
-
-    #[cfg(target_os = "windows")]
-    return windows::detect_system_theme();
-
-    #[cfg(not(any(target_os = "linux", target_os = "macos", target_os = "windows")))]
-    return SystemTheme {
-      theme: "unknown".to_string(),
-    };
-  }
-}
-
-#[cfg(target_os = "linux")]
-mod linux {
-  use super::*;
-
-  pub fn detect_system_theme() -> SystemTheme {
-    // Try multiple methods in order of preference
-
-    // 1. Try GNOME/GTK settings via gsettings
-    if let Ok(theme) = detect_gnome_theme() {
-      return SystemTheme { theme };
-    }
-
-    // 2. Try KDE Plasma settings via kreadconfig5/kreadconfig6
-    if let Ok(theme) = detect_kde_theme() {
-      return SystemTheme { theme };
-    }
-
-    // 3. Try XFCE settings via xfconf-query
-    if let Ok(theme) = detect_xfce_theme() {
-      return SystemTheme { theme };
-    }
-
-    // 4. Try looking at current GTK theme name
-    if let Ok(theme) = detect_gtk_theme() {
-      return SystemTheme { theme };
-    }
-
-    // 5. Try dconf directly (fallback for GNOME-based systems)
-    if let Ok(theme) = detect_dconf_theme() {
-      return SystemTheme { theme };
-    }
-
-    // 6. Try environment variables
-    if let Ok(theme) = detect_env_theme() {
-      return SystemTheme { theme };
-    }
-
-    // 7. Try freedesktop portal
-    if let Ok(theme) = detect_portal_theme() {
-      return SystemTheme { theme };
-    }
-
-    // 8. Try looking at system color scheme files
-    if let Ok(theme) = detect_system_files_theme() {
-      return SystemTheme { theme };
-    }
-
-    // Fallback to unknown
-    SystemTheme {
-      theme: "unknown".to_string(),
-    }
-  }
-
-  fn detect_gnome_theme() -> Result<String, Box<dyn std::error::Error>> {
-    // Check if gsettings is available
-    if !is_command_available("gsettings") {
-      return Err("gsettings not available".into());
-    }
-
-    // Try GNOME color scheme first (modern way)
-    if let Ok(output) = Command::new("gsettings")
-      .args(["get", "org.gnome.desktop.interface", "color-scheme"])
-      .output()
-    {
-      if output.status.success() {
-        let scheme = String::from_utf8_lossy(&output.stdout).trim().to_string();
-        match scheme.as_str() {
-          "'prefer-dark'" => return Ok("dark".to_string()),
-          "'prefer-light'" => return Ok("light".to_string()),
-          _ => {}
-        }
-      }
-    }
-
-    // Fallback to GTK theme name detection
-    if let Ok(output) = Command::new("gsettings")
-      .args(["get", "org.gnome.desktop.interface", "gtk-theme"])
-      .output()
-    {
-      if output.status.success() {
-        let theme_name = String::from_utf8_lossy(&output.stdout)
-          .trim()
-          .trim_matches('\'')
-          .to_lowercase();
-
-        if theme_name.contains("dark") || theme_name.contains("night") {
-          return Ok("dark".to_string());
-        } else if theme_name.contains("light") || theme_name.contains("adwaita") {
-          return Ok("light".to_string());
-        }
-      }
-    }
-
-    Err("Could not detect GNOME theme".into())
-  }
-
-  fn detect_kde_theme() -> Result<String, Box<dyn std::error::Error>> {
-    // Try KDE Plasma 6 first
-    if is_command_available("kreadconfig6") {
-      if let Ok(output) = Command::new("kreadconfig6")
-        .args([
-          "--file",
-          "kdeglobals",
-          "--group",
-          "KDE",
-          "--key",
-          "LookAndFeelPackage",
-        ])
-        .output()
-      {
-        if output.status.success() {
-          let theme = String::from_utf8_lossy(&output.stdout)
-            .trim()
-            .to_lowercase();
-          if theme.contains("dark") || theme.contains("breezedark") {
-            return Ok("dark".to_string());
-          } else if theme.contains("light") || theme.contains("breeze") {
-            return Ok("light".to_string());
-          }
-        }
-      }
-
-      // Try color scheme as well
-      if let Ok(output) = Command::new("kreadconfig6")
-        .args([
-          "--file",
-          "kdeglobals",
-          "--group",
-          "General",
-          "--key",
-          "ColorScheme",
-        ])
-        .output()
-      {
-        if output.status.success() {
-          let scheme = String::from_utf8_lossy(&output.stdout)
-            .trim()
-            .to_lowercase();
-          if scheme.contains("dark") || scheme.contains("breezedark") {
-            return Ok("dark".to_string());
-          } else if scheme.contains("light") || scheme.contains("breeze") {
-            return Ok("light".to_string());
-          }
-        }
-      }
-    }
-
-    // Try KDE Plasma 5 as fallback
-    if is_command_available("kreadconfig5") {
-      if let Ok(output) = Command::new("kreadconfig5")
-        .args([
-          "--file",
-          "kdeglobals",
-          "--group",
-          "KDE",
-          "--key",
-          "LookAndFeelPackage",
-        ])
-        .output()
-      {
-        if output.status.success() {
-          let theme = String::from_utf8_lossy(&output.stdout)
-            .trim()
-            .to_lowercase();
-          if theme.contains("dark") || theme.contains("breezedark") {
-            return Ok("dark".to_string());
-          } else if theme.contains("light") || theme.contains("breeze") {
-            return Ok("light".to_string());
-          }
-        }
-      }
-    }
-
-    Err("Could not detect KDE theme".into())
-  }
-
-  fn detect_xfce_theme() -> Result<String, Box<dyn std::error::Error>> {
-    if !is_command_available("xfconf-query") {
-      return Err("xfconf-query not available".into());
-    }
-
-    // Check XFCE theme
-    if let Ok(output) = Command::new("xfconf-query")
-      .args(["-c", "xsettings", "-p", "/Net/ThemeName"])
-      .output()
-    {
-      if output.status.success() {
-        let theme = String::from_utf8_lossy(&output.stdout)
-          .trim()
-          .to_lowercase();
-        if theme.contains("dark") || theme.contains("night") {
-          return Ok("dark".to_string());
-        } else if theme.contains("light") {
-          return Ok("light".to_string());
-        }
-      }
-    }
-
-    // Check XFCE window manager theme as backup
-    if let Ok(output) = Command::new("xfconf-query")
-      .args(["-c", "xfwm4", "-p", "/general/theme"])
-      .output()
-    {
-      if output.status.success() {
-        let theme = String::from_utf8_lossy(&output.stdout)
-          .trim()
-          .to_lowercase();
-        if theme.contains("dark") || theme.contains("night") {
-          return Ok("dark".to_string());
-        } else if theme.contains("light") {
-          return Ok("light".to_string());
-        }
-      }
-    }
-
-    Err("Could not detect XFCE theme".into())
-  }
-
-  fn detect_gtk_theme() -> Result<String, Box<dyn std::error::Error>> {
-    // Try to read GTK3 settings file
-    if let Ok(home) = std::env::var("HOME") {
-      let gtk3_settings = std::path::Path::new(&home).join(".config/gtk-3.0/settings.ini");
-      if gtk3_settings.exists() {
-        if let Ok(content) = std::fs::read_to_string(gtk3_settings) {
-          for line in content.lines() {
-            if line.starts_with("gtk-theme-name=") {
-              let theme_name = line.split('=').nth(1).unwrap_or("").trim().to_lowercase();
-              if theme_name.contains("dark") || theme_name.contains("night") {
-                return Ok("dark".to_string());
-              } else if theme_name.contains("light") || theme_name.contains("adwaita") {
-                return Ok("light".to_string());
-              }
-            }
-          }
-        }
-      }
-
-      // Try GTK4 settings
-      let gtk4_settings = std::path::Path::new(&home).join(".config/gtk-4.0/settings.ini");
-      if gtk4_settings.exists() {
-        if let Ok(content) = std::fs::read_to_string(gtk4_settings) {
-          for line in content.lines() {
-            if line.starts_with("gtk-theme-name=") {
-              let theme_name = line.split('=').nth(1).unwrap_or("").trim().to_lowercase();
-              if theme_name.contains("dark") || theme_name.contains("night") {
-                return Ok("dark".to_string());
-              } else if theme_name.contains("light") || theme_name.contains("adwaita") {
-                return Ok("light".to_string());
-              }
-            }
-          }
-        }
-      }
-    }
-
-    Err("Could not detect GTK theme".into())
-  }
-
-  fn detect_dconf_theme() -> Result<String, Box<dyn std::error::Error>> {
-    if !is_command_available("dconf") {
-      return Err("dconf not available".into());
-    }
-
-    // Try reading color scheme directly from dconf
-    if let Ok(output) = Command::new("dconf")
-      .args(["read", "/org/gnome/desktop/interface/color-scheme"])
-      .output()
-    {
-      if output.status.success() {
-        let scheme = String::from_utf8_lossy(&output.stdout).trim().to_string();
-        match scheme.as_str() {
-          "'prefer-dark'" => return Ok("dark".to_string()),
-          "'prefer-light'" => return Ok("light".to_string()),
-          _ => {}
-        }
-      }
-    }
-
-    // Try reading GTK theme from dconf
-    if let Ok(output) = Command::new("dconf")
-      .args(["read", "/org/gnome/desktop/interface/gtk-theme"])
-      .output()
-    {
-      if output.status.success() {
-        let theme_name = String::from_utf8_lossy(&output.stdout)
-          .trim()
-          .trim_matches('\'')
-          .to_lowercase();
-
-        if theme_name.contains("dark") || theme_name.contains("night") {
-          return Ok("dark".to_string());
-        } else if theme_name.contains("light") || theme_name.contains("adwaita") {
-          return Ok("light".to_string());
-        }
-      }
-    }
-
-    Err("Could not detect dconf theme".into())
-  }
-
-  fn detect_env_theme() -> Result<String, Box<dyn std::error::Error>> {
-    // Check common environment variables
-    if let Ok(theme) = std::env::var("GTK_THEME") {
-      let theme_lower = theme.to_lowercase();
-      if theme_lower.contains("dark") || theme_lower.contains("night") {
-        return Ok("dark".to_string());
-      } else if theme_lower.contains("light") {
-        return Ok("light".to_string());
-      }
-    }
-
-    if let Ok(theme) = std::env::var("QT_STYLE_OVERRIDE") {
-      let theme_lower = theme.to_lowercase();
-      if theme_lower.contains("dark") || theme_lower.contains("night") {
-        return Ok("dark".to_string());
-      } else if theme_lower.contains("light") {
-        return Ok("light".to_string());
-      }
-    }
-
-    Err("Could not detect theme from environment".into())
-  }
-
-  fn detect_portal_theme() -> Result<String, Box<dyn std::error::Error>> {
-    if !is_command_available("busctl") {
-      return Err("busctl not available".into());
-    }
-
-    // Try to query the color scheme via org.freedesktop.portal.Settings
-    if let Ok(output) = Command::new("busctl")
-      .args([
-        "--user",
-        "call",
-        "org.freedesktop.portal.Desktop",
-        "/org/freedesktop/portal/desktop",
-        "org.freedesktop.portal.Settings",
-        "Read",
-        "ss",
-        "org.freedesktop.appearance",
-        "color-scheme",
-      ])
-      .output()
-    {
-      if output.status.success() {
-        let response = String::from_utf8_lossy(&output.stdout);
-        // Parse DBus response - look for preference values
-        if response.contains(" 1 ") {
-          return Ok("dark".to_string());
-        } else if response.contains(" 2 ") {
-          return Ok("light".to_string());
-        }
-      }
-    }
-
-    Err("Could not detect portal theme".into())
-  }
-
-  fn detect_system_files_theme() -> Result<String, Box<dyn std::error::Error>> {
-    // Check if we're in a dark terminal (heuristic)
-    if let Ok(term) = std::env::var("TERM") {
-      let term_lower = term.to_lowercase();
-      if term_lower.contains("dark") || term_lower.contains("night") {
-        return Ok("dark".to_string());
-      }
-    }
-
-    // Check if we can determine from desktop session
-    if let Ok(desktop) = std::env::var("XDG_CURRENT_DESKTOP") {
-      let desktop_lower = desktop.to_lowercase();
-      // Some desktops default to dark
-      if desktop_lower.contains("i3") || desktop_lower.contains("sway") {
-        // Window managers often use dark themes by default
-        return Ok("dark".to_string());
-      }
-    }
-
-    Err("Could not detect theme from system files".into())
-  }
-
-  fn is_command_available(command: &str) -> bool {
-    Command::new("which")
-      .arg(command)
-      .output()
-      .map(|output| output.status.success())
-      .unwrap_or(false)
-  }
-}
-
-#[cfg(target_os = "macos")]
-mod macos {
-  use super::*;
-
-  pub fn detect_system_theme() -> SystemTheme {
-    // macOS theme detection using osascript
-    if let Ok(output) = Command::new("osascript")
-      .args([
-        "-e",
-        "tell application \"System Events\" to tell appearance preferences to get dark mode",
-      ])
-      .output()
-    {
-      if output.status.success() {
-        let result = String::from_utf8_lossy(&output.stdout).to_string();
-        let result = result.trim();
-        match result {
-          "true" => {
-            return SystemTheme {
-              theme: "dark".to_string(),
-            }
-          }
-          "false" => {
-            return SystemTheme {
-              theme: "light".to_string(),
-            }
-          }
-          _ => {}
-        }
-      }
-    }
-
-    // Fallback method using defaults
-    if let Ok(output) = Command::new("defaults")
-      .args(["read", "-g", "AppleInterfaceStyle"])
-      .output()
-    {
-      if output.status.success() {
-        let style = String::from_utf8_lossy(&output.stdout).to_string();
-        let style = style.trim();
-        if style.to_lowercase() == "dark" {
-          return SystemTheme {
-            theme: "dark".to_string(),
-          };
-        }
-      }
-    }
-
-    // Default to light if we can't determine
-    SystemTheme {
-      theme: "light".to_string(),
-    }
-  }
-}
-
-#[cfg(target_os = "windows")]
-mod windows {
-  use super::*;
-
-  pub fn detect_system_theme() -> SystemTheme {
-    // Windows theme detection via registry
-    // This is a simplified implementation - you might want to use winreg crate for better registry access
-    if let Ok(output) = Command::new("reg")
-      .args([
-        "query",
-        "HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Themes\\Personalize",
-        "/v",
-        "AppsUseLightTheme",
-      ])
-      .output()
-    {
-      if output.status.success() {
-        let result = String::from_utf8_lossy(&output.stdout);
-        if result.contains("0x0") {
-          return SystemTheme {
-            theme: "dark".to_string(),
-          };
-        } else if result.contains("0x1") {
-          return SystemTheme {
-            theme: "light".to_string(),
-          };
-        }
-      }
-    }
-
-    // Default to light if we can't determine
-    SystemTheme {
-      theme: "light".to_string(),
-    }
-  }
-}
-
-// Command to expose this functionality to the frontend
-#[tauri::command]
-pub fn get_system_theme() -> SystemTheme {
-  let detector = ThemeDetector::instance();
-  detector.detect_system_theme()
-}
-
-#[cfg(test)]
-mod tests {
-  use super::*;
-
-  #[test]
-  fn test_theme_detector_creation() {
-    let detector = ThemeDetector::instance();
-    let theme = detector.detect_system_theme();
-
-    // Should return a valid theme string
-    assert!(matches!(theme.theme.as_str(), "light" | "dark" | "unknown"));
-  }
-
-  #[test]
-  fn test_get_system_theme_command() {
-    let theme = get_system_theme();
-    assert!(matches!(theme.theme.as_str(), "light" | "dark" | "unknown"));
-  }
-}
-
-// Global singleton instance
-lazy_static::lazy_static! {
-  static ref THEME_DETECTOR: ThemeDetector = ThemeDetector::new();
-}
@@ -10,7 +10,7 @@ use tokio::sync::Mutex;
 use tokio::time::interval;

 use crate::auto_updater::AutoUpdater;
-use crate::browser_version_service::BrowserVersionService;
+use crate::browser_version_manager::BrowserVersionManager;

 #[derive(Debug, Serialize, Deserialize, Clone)]
 pub struct VersionUpdateProgress {
@@ -41,13 +41,14 @@ impl Default for BackgroundUpdateState {
  fn default() -> Self {
    Self {
      last_update_time: 0,
-      update_interval_hours: 3,
+      update_interval_hours: 12,
    }
  }
 }

+/// Extension of auto_updater.rs for background updates
 pub struct VersionUpdater {
-  version_service: &'static BrowserVersionService,
+  browser_version_manager: &'static BrowserVersionManager,
  auto_updater: &'static AutoUpdater,
  app_handle: Option<tauri::AppHandle>,
 }
@@ -55,7 +56,7 @@ pub struct VersionUpdater {
 impl VersionUpdater {
  pub fn new() -> Self {
    Self {
-      version_service: BrowserVersionService::instance(),
+      browser_version_manager: BrowserVersionManager::instance(),
      auto_updater: AutoUpdater::instance(),
      app_handle: None,
    }
@@ -263,7 +264,7 @@ impl VersionUpdater {
    &self,
    app_handle: &tauri::AppHandle,
  ) -> Result<Vec<BackgroundUpdateResult>, Box<dyn std::error::Error + Send + Sync>> {
-    let supported_browsers = self.version_service.get_supported_browsers();
+    let supported_browsers = self.browser_version_manager.get_supported_browsers();
    let total_browsers = supported_browsers.len();
    let mut results = Vec::new();
    let mut total_new_versions = 0;
@@ -374,7 +375,7 @@ impl VersionUpdater {
    browser: &str,
  ) -> Result<usize, Box<dyn std::error::Error + Send + Sync>> {
    self
-      .version_service
+      .browser_version_manager
      .update_browser_versions_incrementally(browser)
      .await
  }
@@ -455,6 +456,63 @@ pub async fn get_version_update_status() -> Result<(Option<u64>, u64), String> {
  Ok((last_update, time_until_next))
 }

+#[tauri::command]
+pub async fn clear_all_version_cache_and_refetch(
+  app_handle: tauri::AppHandle,
+) -> Result<(), String> {
+  let api_client = crate::api_client::ApiClient::instance();
+  let version_updater = VersionUpdater::new();
+
+  // Clear all cache first
+  api_client
+    .clear_all_cache()
+    .map_err(|e| format!("Failed to clear version cache: {e}"))?;
+
+  // Disable all browsers during the update process
+  let supported_browsers = version_updater
+    .browser_version_manager
+    .get_supported_browsers();
+
+  // Load current state and disable all browsers
+  let mut state = version_updater
+    .auto_updater
+    .load_auto_update_state()
+    .map_err(|e| format!("Failed to load auto update state: {e}"))?;
+  for browser in &supported_browsers {
+    state.disabled_browsers.insert(browser.clone());
+  }
+  version_updater
+    .auto_updater
+    .save_auto_update_state(&state)
+    .map_err(|e| format!("Failed to save auto update state: {e}"))?;
+
+  let updater = get_version_updater();
+  let updater_guard = updater.lock().await;
+
+  let result = updater_guard
+    .trigger_manual_update(&app_handle)
+    .await
+    .map_err(|e| format!("Failed to trigger version update: {e}"));
+
+  // Re-enable all browsers after the update completes (regardless of success/failure)
+  let mut final_state = version_updater
+    .auto_updater
+    .load_auto_update_state()
+    .unwrap_or_default();
+  for browser in &supported_browsers {
+    final_state.disabled_browsers.remove(browser);
+  }
+  if let Err(e) = version_updater
+    .auto_updater
+    .save_auto_update_state(&final_state)
+  {
+    eprintln!("Warning: Failed to re-enable browsers after cache clear: {e}");
+  }
+
+  result?;
+  Ok(())
+}
+
 #[cfg(test)]
 mod tests {
  use super::*;
@@ -519,31 +577,141 @@ mod tests {

  #[test]
  fn test_should_run_background_update_logic() {
-    // Note: This test uses the shared state file, so results may vary
-    // depending on previous test runs. This is expected behavior.
+    // Create isolated test states to avoid interference
+    let current_time = VersionUpdater::get_current_timestamp();

    // Test with recent update (should not update)
    let recent_state = BackgroundUpdateState {
-      last_update_time: VersionUpdater::get_current_timestamp() - 60, // 1 minute ago
+      last_update_time: current_time - 60, // 1 minute ago
      update_interval_hours: 3,
    };
-    VersionUpdater::save_background_update_state(&recent_state).unwrap();
-    assert!(!VersionUpdater::should_run_background_update());
+
+    // Save and test recent state
+    let save_result = VersionUpdater::save_background_update_state(&recent_state);
+    assert!(save_result.is_ok(), "Should save recent state successfully");
+
+    let should_update_recent = VersionUpdater::should_run_background_update();
+    assert!(
+      !should_update_recent,
+      "Should not update when last update was recent"
+    );

    // Test with old update (should update)
    let old_state = BackgroundUpdateState {
-      last_update_time: VersionUpdater::get_current_timestamp() - (4 * 60 * 60), // 4 hours ago
+      last_update_time: current_time - (4 * 60 * 60), // 4 hours ago
      update_interval_hours: 3,
    };
-    VersionUpdater::save_background_update_state(&old_state).unwrap();
-    assert!(VersionUpdater::should_run_background_update());
+
+    // Save and test old state
+    let save_result = VersionUpdater::save_background_update_state(&old_state);
+    assert!(save_result.is_ok(), "Should save old state successfully");
+
+    let should_update_old = VersionUpdater::should_run_background_update();
+    assert!(should_update_old, "Should update when last update was old");
+
+    // Test with never updated (should update)
+    let never_updated_state = BackgroundUpdateState {
+      last_update_time: 0,
+      update_interval_hours: 3,
+    };
+
+    let save_result = VersionUpdater::save_background_update_state(&never_updated_state);
+    assert!(
+      save_result.is_ok(),
+      "Should save never updated state successfully"
+    );
+
+    let should_update_never = VersionUpdater::should_run_background_update();
+    assert!(
+      should_update_never,
+      "Should update when never updated before"
+    );
  }

  #[test]
  fn test_cache_dir_creation() {
    // This should not panic and should create the directory if it doesn't exist
-    let cache_dir = VersionUpdater::get_cache_dir().unwrap();
-    assert!(cache_dir.exists());
-    assert!(cache_dir.is_dir());
+    let cache_dir_result = VersionUpdater::get_cache_dir();
+    assert!(
+      cache_dir_result.is_ok(),
+      "Should successfully get cache directory"
+    );
+
+    let cache_dir = cache_dir_result.unwrap();
+    assert!(
+      cache_dir.exists(),
+      "Cache directory should exist after creation"
+    );
+    assert!(cache_dir.is_dir(), "Cache directory should be a directory");
+
+    // Verify the path contains expected components
+    let path_str = cache_dir.to_string_lossy();
+    assert!(
+      path_str.contains("version_cache"),
+      "Path should contain version_cache"
+    );
+
+    // Test that calling it again returns the same directory
+    let cache_dir2 = VersionUpdater::get_cache_dir().unwrap();
+    assert_eq!(
+      cache_dir, cache_dir2,
+      "Multiple calls should return same directory"
+    );
+  }
+
+  #[test]
+  fn test_version_updater_creation() {
+    let updater = VersionUpdater::new();
+
+    // Should have valid references to services
+    assert!(
+      !std::ptr::eq(
+        updater.browser_version_manager as *const _,
+        std::ptr::null()
+      ),
+      "Version service should not be null"
+    );
+    assert!(
+      !std::ptr::eq(updater.auto_updater as *const _, std::ptr::null()),
+      "Auto updater should not be null"
+    );
+    assert!(
+      updater.app_handle.is_none(),
+      "App handle should initially be None"
+    );
+  }
+
+  #[test]
+  fn test_get_current_timestamp() {
+    let timestamp1 = VersionUpdater::get_current_timestamp();
+
+    // Should be a reasonable timestamp (after year 2020)
+    assert!(
+      timestamp1 > 1577836800,
+      "Timestamp should be after 2020-01-01"
+    ); // 2020-01-01 00:00:00 UTC
+
+    // Should be before year 2100
+    assert!(
+      timestamp1 < 4102444800,
+      "Timestamp should be before 2100-01-01"
+    ); // 2100-01-01 00:00:00 UTC
+
+    // Wait a tiny bit and check it increases
+    std::thread::sleep(std::time::Duration::from_millis(1));
+    let timestamp2 = VersionUpdater::get_current_timestamp();
+    assert!(timestamp2 >= timestamp1, "Timestamp should not decrease");
+  }
+
+  #[test]
+  fn test_get_version_updater_singleton() {
+    let updater1 = get_version_updater();
+    let updater2 = get_version_updater();
+
+    // Should return the same Arc instance
+    assert!(
+      Arc::ptr_eq(&updater1, &updater2),
+      "Should return same singleton instance"
+    );
  }
 }
@@ -1,7 +1,7 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
-  "productName": "Donut Browser",
-  "version": "0.8.2",
+  "productName": "Donut",
+  "version": "0.12.3",
  "identifier": "com.donutbrowser",
  "build": {
    "beforeDevCommand": "pnpm dev",
@@ -41,16 +41,12 @@
    },
    "linux": {
      "deb": {
-        "depends": ["xdg-utils"],
-        "files": {
-          "/usr/share/applications/donutbrowser.desktop": "donutbrowser.desktop"
-        }
+        "desktopTemplate": "donutbrowser.desktop",
+        "depends": ["xdg-utils"]
      },
      "rpm": {
-        "depends": ["xdg-utils"],
-        "files": {
-          "/usr/share/applications/donutbrowser.desktop": "donutbrowser.desktop"
-        }
+        "desktopTemplate": "donutbrowser.desktop",
+        "depends": ["xdg-utils"]
      },
      "appimage": {
        "files": {
@@ -0,0 +1 @@
+Hello, World!
@@ -52,26 +52,6 @@ impl TestUtils {
    Ok(nodecar_binary)
  }

-  /// Get the appropriate build target for the current platform
-  #[allow(dead_code)]
-  fn get_build_target() -> &'static str {
-    if cfg!(target_arch = "aarch64") && cfg!(target_os = "macos") {
-      "build:mac-aarch64"
-    } else if cfg!(target_arch = "x86_64") && cfg!(target_os = "macos") {
-      "build:mac-x86_64"
-    } else if cfg!(target_arch = "x86_64") && cfg!(target_os = "linux") {
-      "build:linux-x64"
-    } else if cfg!(target_arch = "aarch64") && cfg!(target_os = "linux") {
-      "build:linux-arm64"
-    } else if cfg!(target_arch = "x86_64") && cfg!(target_os = "windows") {
-      "build:win-x64"
-    } else if cfg!(target_arch = "aarch64") && cfg!(target_os = "windows") {
-      "build:win-arm64"
-    } else {
-      panic!("Unsupported target architecture for nodecar build")
-    }
-  }
-
  /// Execute a nodecar command with timeout
  pub async fn execute_nodecar_command(
    binary_path: &PathBuf,
@@ -150,58 +130,4 @@ impl TestUtils {
    println!("Test process cleanup completed");
    Ok(())
  }
-
-  /// Clean up all running nodecar processes (proxies and camoufox instances)
-  /// WARNING: This will stop ALL processes, including those from actual app usage
-  #[allow(dead_code)]
-  pub async fn cleanup_all_nodecar_processes(
-    nodecar_path: &PathBuf,
-  ) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
-    println!("WARNING: Cleaning up ALL nodecar processes...");
-
-    // Get list of all proxies and stop them individually
-    let proxy_list_args = ["proxy", "list"];
-    if let Ok(list_output) = Self::execute_nodecar_command(nodecar_path, &proxy_list_args).await {
-      if list_output.status.success() {
-        let list_stdout = String::from_utf8(list_output.stdout)?;
-        if let Ok(proxies) = serde_json::from_str::<serde_json::Value>(&list_stdout) {
-          if let Some(proxy_array) = proxies.as_array() {
-            for proxy in proxy_array {
-              if let Some(proxy_id) = proxy["id"].as_str() {
-                let stop_args = ["proxy", "stop", "--id", proxy_id];
-                let _ = Self::execute_nodecar_command(nodecar_path, &stop_args).await;
-                println!("Stopped proxy: {proxy_id}");
-              }
-            }
-          }
-        }
-      }
-    }
-
-    // Get list of all camoufox instances and stop them individually
-    let camoufox_list_args = ["camoufox", "list"];
-    if let Ok(list_output) = Self::execute_nodecar_command(nodecar_path, &camoufox_list_args).await
-    {
-      if list_output.status.success() {
-        let list_stdout = String::from_utf8(list_output.stdout)?;
-        if let Ok(instances) = serde_json::from_str::<serde_json::Value>(&list_stdout) {
-          if let Some(instance_array) = instances.as_array() {
-            for instance in instance_array {
-              if let Some(instance_id) = instance["id"].as_str() {
-                let stop_args = ["camoufox", "stop", "--id", instance_id];
-                let _ = Self::execute_nodecar_command(nodecar_path, &stop_args).await;
-                println!("Stopped camoufox instance: {instance_id}");
-              }
-            }
-          }
-        }
-      }
-    }
-
-    // Give processes time to clean up
-    tokio::time::sleep(Duration::from_secs(2)).await;
-
-    println!("Nodecar process cleanup completed");
-    Ok(())
-  }
 }
@@ -24,12 +24,12 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased overflow-hidden`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased overflow-hidden bg-background`}
      >
        <CustomThemeProvider>
-          <TooltipProvider>{children}</TooltipProvider>
-          <Toaster className="pointer-events-none" />
          <WindowDragArea />
+          <TooltipProvider>{children}</TooltipProvider>
+          <Toaster />
        </CustomThemeProvider>
      </body>
    </html>
@@ -3,9 +3,8 @@
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import { getCurrent } from "@tauri-apps/plugin-deep-link";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { CamoufoxConfigDialog } from "@/components/camoufox-config-dialog";
-import { ChangeVersionDialog } from "@/components/change-version-dialog";
 import { CreateProfileDialog } from "@/components/create-profile-dialog";
 import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog";
 import { GroupAssignmentDialog } from "@/components/group-assignment-dialog";
@@ -17,15 +16,17 @@ import { PermissionDialog } from "@/components/permission-dialog";
 import { ProfilesDataTable } from "@/components/profile-data-table";
 import { ProfileSelectorDialog } from "@/components/profile-selector-dialog";
 import { ProxyManagementDialog } from "@/components/proxy-management-dialog";
-import { ProxySettingsDialog } from "@/components/proxy-settings-dialog";
 import { SettingsDialog } from "@/components/settings-dialog";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { useAppUpdateNotifications } from "@/hooks/use-app-update-notifications";
+import { useGroupEvents } from "@/hooks/use-group-events";
 import type { PermissionType } from "@/hooks/use-permissions";
 import { usePermissions } from "@/hooks/use-permissions";
+import { useProfileEvents } from "@/hooks/use-profile-events";
+import { useProxyEvents } from "@/hooks/use-proxy-events";
 import { useUpdateNotifications } from "@/hooks/use-update-notifications";
-import { showErrorToast } from "@/lib/toast-utils";
-import type { BrowserProfile, CamoufoxConfig, GroupWithCount } from "@/types";
+import { useVersionUpdater } from "@/hooks/use-version-updater";
+import { showErrorToast, showToast } from "@/lib/toast-utils";
+import type { BrowserProfile, CamoufoxConfig } from "@/types";

 type BrowserTypeString =
  | "mullvad-browser"
@@ -43,11 +44,27 @@ interface PendingUrl {
 }

 export default function Home() {
-  const [profiles, setProfiles] = useState<BrowserProfile[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [proxyDialogOpen, setProxyDialogOpen] = useState(false);
+  // Mount global version update listener/toasts
+  useVersionUpdater();
+  const [isInitializing, setIsInitializing] = useState(true);
+
+  // Use the new profile events hook for centralized profile management
+  const {
+    profiles,
+    runningProfiles,
+    isLoading: profilesLoading,
+    error: profilesError,
+  } = useProfileEvents();
+
+  const {
+    groups: groupsData,
+    isLoading: groupsLoading,
+    error: groupsError,
+  } = useGroupEvents();
+
+  const { isLoading: proxiesLoading, error: proxiesError } = useProxyEvents();
+
  const [createProfileDialogOpen, setCreateProfileDialogOpen] = useState(false);
-  const [changeVersionDialogOpen, setChangeVersionDialogOpen] = useState(false);
  const [settingsDialogOpen, setSettingsDialogOpen] = useState(false);
  const [importProfileDialogOpen, setImportProfileDialogOpen] = useState(false);
  const [proxyManagementDialogOpen, setProxyManagementDialogOpen] =
@@ -63,17 +80,12 @@ export default function Home() {
    string[]
  >([]);
  const [selectedProfiles, setSelectedProfiles] = useState<string[]>([]);
+  const [searchQuery, setSearchQuery] = useState<string>("");
  const [pendingUrls, setPendingUrls] = useState<PendingUrl[]>([]);
-  const [currentProfileForProxy, setCurrentProfileForProxy] =
-    useState<BrowserProfile | null>(null);
-  const [currentProfileForVersionChange, setCurrentProfileForVersionChange] =
-    useState<BrowserProfile | null>(null);
  const [currentProfileForCamoufoxConfig, setCurrentProfileForCamoufoxConfig] =
    useState<BrowserProfile | null>(null);
  const [hasCheckedStartupPrompt, setHasCheckedStartupPrompt] = useState(false);
  const [permissionDialogOpen, setPermissionDialogOpen] = useState(false);
-  const [groups, setGroups] = useState<GroupWithCount[]>([]);
-  const [areGroupsLoading, setGroupsLoading] = useState(true);
  const [currentPermissionType, setCurrentPermissionType] =
    useState<PermissionType>("microphone");
  const [showBulkDeleteConfirmation, setShowBulkDeleteConfirmation] =
@@ -94,8 +106,18 @@ export default function Home() {
        "check_missing_binaries",
      );

-      if (missingBinaries.length > 0) {
-        console.log("Found missing binaries:", missingBinaries);
+      // Also check for missing GeoIP database
+      const missingGeoIP = await invoke<boolean>(
+        "check_missing_geoip_database",
+      );
+
+      if (missingBinaries.length > 0 || missingGeoIP) {
+        if (missingBinaries.length > 0) {
+          console.log("Found missing binaries:", missingBinaries);
+        }
+        if (missingGeoIP) {
+          console.log("Found missing GeoIP database for Camoufox");
+        }

        // Group missing binaries by browser type to avoid concurrent downloads
        const browserMap = new Map<string, string[]>();
@@ -110,53 +132,43 @@ export default function Home() {
        }

        // Show a toast notification about missing binaries and auto-download them
-        const missingList = Array.from(browserMap.entries())
+        let missingList = Array.from(browserMap.entries())
          .map(([browser, versions]) => `${browser}: ${versions.join(", ")}`)
          .join(", ");

-        console.log(`Downloading missing binaries: ${missingList}`);
+        if (missingGeoIP) {
+          if (missingList) {
+            missingList += ", GeoIP database for Camoufox";
+          } else {
+            missingList = "GeoIP database for Camoufox";
+          }
+        }
+
+        console.log(`Downloading missing components: ${missingList}`);

        try {
-          // Download missing binaries sequentially by browser type to prevent conflicts
+          // Download missing binaries and GeoIP database sequentially to prevent conflicts
          const downloaded = await invoke<string[]>(
            "ensure_all_binaries_exist",
          );
          if (downloaded.length > 0) {
            console.log(
-              "Successfully downloaded missing binaries:",
+              "Successfully downloaded missing components:",
              downloaded,
            );
          }
        } catch (downloadError) {
-          console.error("Failed to download missing binaries:", downloadError);
-          setError(
-            `Failed to download missing binaries: ${JSON.stringify(
-              downloadError,
-            )}`,
+          console.error(
+            "Failed to download missing components:",
+            downloadError,
          );
        }
      }
    } catch (err: unknown) {
-      console.error("Failed to check missing binaries:", err);
+      console.error("Failed to check missing components:", err);
    }
  }, []);

-  // Simple profiles loader without updates check (for use as callback)
-  const loadProfiles = useCallback(async () => {
-    try {
-      const profileList = await invoke<BrowserProfile[]>(
-        "list_browser_profiles",
-      );
-      setProfiles(profileList);
-
-      // Check for missing binaries after loading profiles
-      await checkMissingBinaries();
-    } catch (err: unknown) {
-      console.error("Failed to load profiles:", err);
-      setError(`Failed to load profiles: ${JSON.stringify(err)}`);
-    }
-  }, [checkMissingBinaries]);
-
  const [processingUrls, setProcessingUrls] = useState<Set<string>>(new Set());

  const handleUrlOpen = useCallback(
@@ -190,26 +202,9 @@ export default function Home() {
  );

  // Auto-update functionality - use the existing hook for compatibility
-  const updateNotifications = useUpdateNotifications(loadProfiles);
+  const updateNotifications = useUpdateNotifications();
  const { checkForUpdates, isUpdating } = updateNotifications;

-  // Profiles loader with update check (for initial load and manual refresh)
-  const loadProfilesWithUpdateCheck = useCallback(async () => {
-    try {
-      const profileList = await invoke<BrowserProfile[]>(
-        "list_browser_profiles",
-      );
-      setProfiles(profileList);
-
-      // Check for updates after loading profiles
-      await checkForUpdates();
-      await checkMissingBinaries();
-    } catch (err: unknown) {
-      console.error("Failed to load profiles:", err);
-      setError(`Failed to load profiles: ${JSON.stringify(err)}`);
-    }
-  }, [checkForUpdates, checkMissingBinaries]);
-
  useAppUpdateNotifications();

  // Check for startup URLs but only process them once
@@ -248,6 +243,48 @@ export default function Home() {
    }
  }, [hasCheckedStartupPrompt]);

+  // Warm up nodecar at startup and block UI until complete
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        await invoke("warm_up_nodecar");
+      } catch (err) {
+        if (!cancelled) {
+          // Don't set error here since useProfileEvents handles profile errors
+          console.error("Initialization failed:", err);
+        }
+      } finally {
+        if (!cancelled) setIsInitializing(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Handle profile errors from useProfileEvents hook
+  useEffect(() => {
+    if (profilesError) {
+      showErrorToast(profilesError);
+    }
+  }, [profilesError]);
+
+  // Handle group errors from useGroupEvents hook
+  useEffect(() => {
+    if (groupsError) {
+      showErrorToast(groupsError);
+    }
+  }, [groupsError]);
+
+  // Handle proxy errors from useProxyEvents hook
+  useEffect(() => {
+    if (proxiesError) {
+      showErrorToast(proxiesError);
+    }
+  }, [proxiesError]);
+
  const checkAllPermissions = useCallback(async () => {
    try {
      // Wait for permissions to be initialized before checking
@@ -304,7 +341,7 @@ export default function Home() {
          "Received show create profile dialog request:",
          event.payload,
        );
-        setError(
+        showErrorToast(
          "No profiles available. Please create a profile first before opening URLs.",
        );
        setCreateProfileDialogOpen(true);
@@ -333,16 +370,6 @@ export default function Home() {
    }
  }, [handleUrlOpen]);

-  const openProxyDialog = useCallback((profile: BrowserProfile | null) => {
-    setCurrentProfileForProxy(profile);
-    setProxyDialogOpen(true);
-  }, []);
-
-  const openChangeVersionDialog = useCallback((profile: BrowserProfile) => {
-    setCurrentProfileForVersionChange(profile);
-    setChangeVersionDialogOpen(true);
-  }, []);
-
  const handleConfigureCamoufox = useCallback((profile: BrowserProfile) => {
    setCurrentProfileForCamoufoxConfig(profile);
    setCamoufoxConfigDialogOpen(true);
@@ -350,60 +377,24 @@ export default function Home() {

  const handleSaveCamoufoxConfig = useCallback(
    async (profile: BrowserProfile, config: CamoufoxConfig) => {
-      setError(null);
      try {
        await invoke("update_camoufox_config", {
-          profileName: profile.name,
+          profileId: profile.id,
          config,
        });
-        await loadProfiles();
+        // No need to manually reload - useProfileEvents will handle the update
        setCamoufoxConfigDialogOpen(false);
      } catch (err: unknown) {
        console.error("Failed to update camoufox config:", err);
-        setError(`Failed to update camoufox config: ${JSON.stringify(err)}`);
+        showErrorToast(
+          `Failed to update camoufox config: ${JSON.stringify(err)}`,
+        );
        throw err;
      }
    },
-    [loadProfiles],
+    [],
  );

-  const handleSaveProxy = useCallback(
-    async (proxyId: string | null) => {
-      setProxyDialogOpen(false);
-      setError(null);
-
-      try {
-        if (currentProfileForProxy) {
-          await invoke("update_profile_proxy", {
-            profileName: currentProfileForProxy.name,
-            proxyId: proxyId,
-          });
-        }
-        await loadProfiles();
-        // Trigger proxy data reload in the table
-      } catch (err: unknown) {
-        console.error("Failed to update proxy settings:", err);
-        setError(`Failed to update proxy settings: ${JSON.stringify(err)}`);
-      }
-    },
-    [currentProfileForProxy, loadProfiles],
-  );
-
-  const loadGroups = useCallback(async () => {
-    setGroupsLoading(true);
-    try {
-      const groupsWithCounts = await invoke<GroupWithCount[]>(
-        "get_groups_with_profile_counts",
-      );
-      setGroups(groupsWithCounts);
-    } catch (err) {
-      console.error("Failed to load groups with counts:", err);
-      setGroups([]);
-    } finally {
-      setGroupsLoading(false);
-    }
-  }, []);
-
  const handleCreateProfile = useCallback(
    async (profileData: {
      name: string;
@@ -414,29 +405,22 @@ export default function Home() {
      camoufoxConfig?: CamoufoxConfig;
      groupId?: string;
    }) => {
-      setError(null);
-
      try {
-        const _profile = await invoke<BrowserProfile>(
-          "create_browser_profile_new",
-          {
-            name: profileData.name,
-            browserStr: profileData.browserStr,
-            version: profileData.version,
-            releaseType: profileData.releaseType,
-            proxyId: profileData.proxyId,
-            camoufoxConfig: profileData.camoufoxConfig,
-            groupId:
-              profileData.groupId ||
-              (selectedGroupId !== "default" ? selectedGroupId : undefined),
-          },
-        );
+        await invoke<BrowserProfile>("create_browser_profile_new", {
+          name: profileData.name,
+          browserStr: profileData.browserStr,
+          version: profileData.version,
+          releaseType: profileData.releaseType,
+          proxyId: profileData.proxyId,
+          camoufoxConfig: profileData.camoufoxConfig,
+          groupId:
+            profileData.groupId ||
+            (selectedGroupId !== "default" ? selectedGroupId : undefined),
+        });

-        await loadProfiles();
-        await loadGroups();
-        // Trigger proxy data reload in the table
+        // No need to manually reload - useProfileEvents will handle the update
      } catch (error) {
-        setError(
+        showErrorToast(
          `Failed to create profile: ${
            error instanceof Error ? error.message : String(error)
          }`,
@@ -444,166 +428,102 @@ export default function Home() {
        throw error;
      }
    },
-    [loadProfiles, loadGroups, selectedGroupId],
+    [selectedGroupId],
  );

-  const [runningProfiles, setRunningProfiles] = useState<Set<string>>(
-    new Set(),
-  );
+  const launchProfile = useCallback(async (profile: BrowserProfile) => {
+    console.log("Starting launch for profile:", profile.name);

-  const runningProfilesRef = useRef<Set<string>>(new Set());
-
-  const checkBrowserStatus = useCallback(async (profile: BrowserProfile) => {
    try {
+      const result = await invoke<BrowserProfile>("launch_browser_profile", {
+        profile,
+      });
+      console.log("Successfully launched profile:", result.name);
+    } catch (err: unknown) {
+      console.error("Failed to launch browser:", err);
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      showErrorToast(`Failed to launch browser: ${errorMessage}`);
+      // Re-throw the error so the table component can handle loading state cleanup
+      throw err;
+    }
+  }, []);
+
+  const handleDeleteProfile = useCallback(async (profile: BrowserProfile) => {
+    console.log("Attempting to delete profile:", profile.name);
+
+    try {
+      // First check if the browser is running for this profile
      const isRunning = await invoke<boolean>("check_browser_status", {
        profile,
      });

-      const currentRunning = runningProfilesRef.current.has(profile.name);
-
-      if (isRunning !== currentRunning) {
-        console.log(
-          `Profile ${profile.name} (${profile.browser}) status changed: ${currentRunning} -> ${isRunning}`,
+      if (isRunning) {
+        showErrorToast(
+          "Cannot delete profile while browser is running. Please stop the browser first.",
        );
-        setRunningProfiles((prev) => {
-          const next = new Set(prev);
-          if (isRunning) {
-            next.add(profile.name);
-          } else {
-            next.delete(profile.name);
-          }
-          runningProfilesRef.current = next;
-          return next;
-        });
+        return;
      }
-    } catch (err) {
-      console.error("Failed to check browser status:", err);
+
+      // Attempt to delete the profile
+      await invoke("delete_profile", { profileId: profile.id });
+      console.log("Profile deletion command completed successfully");
+
+      // No need to manually reload - useProfileEvents will handle the update
+      console.log("Profile deleted successfully");
+    } catch (err: unknown) {
+      console.error("Failed to delete profile:", err);
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      showErrorToast(`Failed to delete profile: ${errorMessage}`);
    }
  }, []);

-  const launchProfile = useCallback(
-    async (profile: BrowserProfile) => {
-      setError(null);
-
-      // Check if browser is disabled due to ongoing update
-      try {
-        const isDisabled = await invoke<boolean>(
-          "is_browser_disabled_for_update",
-          {
-            browser: profile.browser,
-          },
-        );
-
-        if (isDisabled || isUpdating(profile.browser)) {
-          setError(
-            `${profile.browser} is currently being updated. Please wait for the update to complete.`,
-          );
-          return;
-        }
-      } catch (err) {
-        console.error("Failed to check browser update status:", err);
-      }
-
-      try {
-        const updatedProfile = await invoke<BrowserProfile>(
-          "launch_browser_profile",
-          { profile },
-        );
-        await loadProfiles();
-        await checkBrowserStatus(updatedProfile);
-      } catch (err: unknown) {
-        console.error("Failed to launch browser:", err);
-        setError(`Failed to launch browser: ${JSON.stringify(err)}`);
-      }
-    },
-    [loadProfiles, checkBrowserStatus, isUpdating],
-  );
-
-  const handleDeleteProfile = useCallback(
-    async (profile: BrowserProfile) => {
-      setError(null);
-      console.log("Attempting to delete profile:", profile.name);
-
-      try {
-        // First check if the browser is running for this profile
-        const isRunning = await invoke<boolean>("check_browser_status", {
-          profile,
-        });
-
-        if (isRunning) {
-          setError(
-            "Cannot delete profile while browser is running. Please stop the browser first.",
-          );
-          return;
-        }
-
-        // Attempt to delete the profile
-        await invoke("delete_profile", { profileName: profile.name });
-        console.log("Profile deletion command completed successfully");
-
-        // Give a small delay to ensure file system operations complete
-        await new Promise((resolve) => setTimeout(resolve, 500));
-
-        // Reload profiles and groups to ensure UI is updated
-        await loadProfiles();
-        await loadGroups();
-
-        console.log("Profile deleted and profiles reloaded successfully");
-      } catch (err: unknown) {
-        console.error("Failed to delete profile:", err);
-        const errorMessage = err instanceof Error ? err.message : String(err);
-        setError(`Failed to delete profile: ${errorMessage}`);
-      }
-    },
-    [loadProfiles, loadGroups],
-  );
-
  const handleRenameProfile = useCallback(
-    async (oldName: string, newName: string) => {
-      setError(null);
+    async (profileId: string, newName: string) => {
      try {
-        await invoke("rename_profile", { oldName, newName });
-        await loadProfiles();
+        await invoke("rename_profile", { profileId, newName });
+        // No need to manually reload - useProfileEvents will handle the update
      } catch (err: unknown) {
        console.error("Failed to rename profile:", err);
-        setError(`Failed to rename profile: ${JSON.stringify(err)}`);
+        showErrorToast(`Failed to rename profile: ${JSON.stringify(err)}`);
        throw err;
      }
    },
-    [loadProfiles],
+    [],
  );

-  const handleKillProfile = useCallback(
-    async (profile: BrowserProfile) => {
-      setError(null);
-      try {
-        await invoke("kill_browser_profile", { profile });
-        await loadProfiles();
-      } catch (err: unknown) {
-        console.error("Failed to kill browser:", err);
-        setError(`Failed to kill browser: ${JSON.stringify(err)}`);
-      }
-    },
-    [loadProfiles],
-  );
+  const handleKillProfile = useCallback(async (profile: BrowserProfile) => {
+    console.log("Starting kill for profile:", profile.name);
+
+    try {
+      await invoke("kill_browser_profile", { profile });
+      console.log("Successfully killed profile:", profile.name);
+      // No need to manually reload - useProfileEvents will handle the update
+    } catch (err: unknown) {
+      console.error("Failed to kill browser:", err);
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      showErrorToast(`Failed to kill browser: ${errorMessage}`);
+      // Re-throw the error so the table component can handle loading state cleanup
+      throw err;
+    }
+  }, []);

  const handleDeleteSelectedProfiles = useCallback(
-    async (profileNames: string[]) => {
-      setError(null);
+    async (profileIds: string[]) => {
      try {
-        await invoke("delete_selected_profiles", { profileNames });
-        await loadProfiles();
-        await loadGroups();
+        await invoke("delete_selected_profiles", { profileIds });
+        // No need to manually reload - useProfileEvents will handle the update
      } catch (err: unknown) {
        console.error("Failed to delete selected profiles:", err);
-        setError(`Failed to delete selected profiles: ${JSON.stringify(err)}`);
+        showErrorToast(
+          `Failed to delete selected profiles: ${JSON.stringify(err)}`,
+        );
      }
    },
-    [loadProfiles, loadGroups],
+    [],
  );

-  const handleAssignProfilesToGroup = useCallback((profileNames: string[]) => {
-    setSelectedProfilesForGroup(profileNames);
+  const handleAssignProfilesToGroup = useCallback((profileIds: string[]) => {
+    setSelectedProfilesForGroup(profileIds);
    setGroupAssignmentDialogOpen(true);
  }, []);

@@ -618,19 +538,20 @@ export default function Home() {
    setIsBulkDeleting(true);
    try {
      await invoke("delete_selected_profiles", {
-        profileNames: selectedProfiles,
+        profileIds: selectedProfiles,
      });
-      await loadProfiles();
-      await loadGroups();
+      // No need to manually reload - useProfileEvents will handle the update
      setSelectedProfiles([]);
      setShowBulkDeleteConfirmation(false);
    } catch (error) {
      console.error("Failed to delete selected profiles:", error);
-      setError(`Failed to delete selected profiles: ${JSON.stringify(error)}`);
+      showErrorToast(
+        `Failed to delete selected profiles: ${JSON.stringify(error)}`,
+      );
    } finally {
      setIsBulkDeleting(false);
    }
-  }, [selectedProfiles, loadProfiles, loadGroups]);
+  }, [selectedProfiles]);

  const handleBulkGroupAssignment = useCallback(() => {
    if (selectedProfiles.length === 0) return;
@@ -639,20 +560,16 @@ export default function Home() {
  }, [selectedProfiles, handleAssignProfilesToGroup]);

  const handleGroupAssignmentComplete = useCallback(async () => {
-    await loadProfiles();
-    await loadGroups();
+    // No need to manually reload - useProfileEvents will handle the update
    setGroupAssignmentDialogOpen(false);
    setSelectedProfilesForGroup([]);
-  }, [loadProfiles, loadGroups]);
+  }, []);

  const handleGroupManagementComplete = useCallback(async () => {
-    await loadGroups();
-  }, [loadGroups]);
+    // No need to manually reload - useProfileEvents will handle the update
+  }, []);

  useEffect(() => {
-    void loadProfilesWithUpdateCheck();
-    void loadGroups();
-
    // Check for startup default browser prompt
    void checkStartupPrompt();

@@ -678,6 +595,11 @@ export default function Home() {
      30 * 60 * 1000,
    );

+    // Check for missing binaries after initial profile load
+    if (!profilesLoading && profiles.length > 0) {
+      void checkMissingBinaries();
+    }
+
    return () => {
      clearInterval(updateInterval);
      if (cleanup) {
@@ -685,38 +607,47 @@ export default function Home() {
      }
    };
  }, [
-    loadProfilesWithUpdateCheck,
    checkForUpdates,
    checkStartupPrompt,
    listenForUrlEvents,
    checkCurrentUrl,
-    loadGroups,
+    checkMissingBinaries,
+    profilesLoading,
+    profiles.length,
  ]);

+  // Show deprecation warning for unsupported profiles (with names)
  useEffect(() => {
    if (profiles.length === 0) return;

-    const interval = setInterval(() => {
-      for (const profile of profiles) {
-        void checkBrowserStatus(profile);
-      }
-    }, 500);
+    const deprecatedProfiles = profiles.filter(
+      (p) =>
+        ["tor-browser", "mullvad-browser"].includes(p.browser) ||
+        (p.release_type === "nightly" && p.browser !== "firefox-developer"),
+    );

-    return () => {
-      clearInterval(interval);
-    };
-  }, [profiles, checkBrowserStatus]);
+    if (deprecatedProfiles.length > 0) {
+      const deprecatedNames = deprecatedProfiles.map((p) => p.name).join(", ");

-  useEffect(() => {
-    runningProfilesRef.current = runningProfiles;
-  }, [runningProfiles]);
-
-  useEffect(() => {
-    if (error) {
-      showErrorToast(error);
-      setError(null);
+      // Use a stable id to avoid duplicate toasts on re-renders
+      showToast({
+        id: "deprecated-profiles-warning",
+        type: "error",
+        title: "Some profiles will be deprecated soon",
+        description: `The following profiles will be deprecated soon: ${deprecatedNames}. Tor Browser, Mullvad Browser, and nightly profiles (except Firefox Developers Edition) will be removed in upcoming versions. Please check GitHub for migration instructions.`,
+        duration: 15000,
+        action: {
+          label: "Learn more",
+          onClick: () => {
+            const event = new CustomEvent("url-open-request", {
+              detail: "https://github.com/zhom/donutbrowser/discussions/66",
+            });
+            window.dispatchEvent(event);
+          },
+        },
+      });
    }
-  }, [error]);
+  }, [profiles]);

  // Check permissions when they are initialized
  useEffect(() => {
@@ -725,59 +656,96 @@ export default function Home() {
    }
  }, [isInitialized, checkAllPermissions]);

+  // Filter data by selected group and search query
+  const filteredProfiles = useMemo(() => {
+    let filtered = profiles;
+
+    // Filter by group
+    if (!selectedGroupId || selectedGroupId === "default") {
+      filtered = profiles.filter((profile) => !profile.group_id);
+    } else {
+      filtered = profiles.filter(
+        (profile) => profile.group_id === selectedGroupId,
+      );
+    }
+
+    // Filter by search query
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase().trim();
+      filtered = filtered.filter((profile) => {
+        // Search in profile name
+        if (profile.name.toLowerCase().includes(query)) return true;
+
+        // Search in browser name
+        if (profile.browser.toLowerCase().includes(query)) return true;
+
+        // Search in tags
+        if (profile.tags?.some((tag) => tag.toLowerCase().includes(query)))
+          return true;
+
+        return false;
+      });
+    }
+
+    return filtered;
+  }, [profiles, selectedGroupId, searchQuery]);
+
+  // Update loading states
+  const isLoading = profilesLoading || groupsLoading || proxiesLoading;
+
  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen gap-8 font-[family-name:var(--font-geist-sans)]  bg-white dark:bg-black">
-      <main className="flex flex-col row-start-2 gap-8 items-center w-full max-w-3xl">
-        <Card className="gap-2 w-full">
-          <CardHeader>
-            <HomeHeader
-              selectedProfiles={selectedProfiles}
-              onBulkDelete={handleBulkDelete}
-              onBulkGroupAssignment={handleBulkGroupAssignment}
-              onCreateProfileDialogOpen={setCreateProfileDialogOpen}
-              onGroupManagementDialogOpen={setGroupManagementDialogOpen}
-              onImportProfileDialogOpen={setImportProfileDialogOpen}
-              onProxyManagementDialogOpen={setProxyManagementDialogOpen}
-              onSettingsDialogOpen={setSettingsDialogOpen}
-            />
-          </CardHeader>
-          <CardContent>
-            <GroupBadges
-              selectedGroupId={selectedGroupId}
-              onGroupSelect={handleSelectGroup}
-              groups={groups}
-              isLoading={areGroupsLoading}
-            />
-            <ProfilesDataTable
-              data={profiles}
-              onLaunchProfile={launchProfile}
-              onKillProfile={handleKillProfile}
-              onProxySettings={openProxyDialog}
-              onDeleteProfile={handleDeleteProfile}
-              onRenameProfile={handleRenameProfile}
-              onChangeVersion={openChangeVersionDialog}
-              onConfigureCamoufox={handleConfigureCamoufox}
-              runningProfiles={runningProfiles}
-              isUpdating={isUpdating}
-              onDeleteSelectedProfiles={handleDeleteSelectedProfiles}
-              onAssignProfilesToGroup={handleAssignProfilesToGroup}
-              selectedGroupId={selectedGroupId}
-              selectedProfiles={selectedProfiles}
-              onSelectedProfilesChange={setSelectedProfiles}
-            />
-          </CardContent>
-        </Card>
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen gap-8 font-(family-name:--font-geist-sans) bg-background">
+      <main className="flex flex-col row-start-2 gap-6 items-center w-full max-w-3xl">
+        <div className="w-full">
+          <HomeHeader
+            selectedProfiles={selectedProfiles}
+            onBulkDelete={handleBulkDelete}
+            onBulkGroupAssignment={handleBulkGroupAssignment}
+            onCreateProfileDialogOpen={setCreateProfileDialogOpen}
+            onGroupManagementDialogOpen={setGroupManagementDialogOpen}
+            onImportProfileDialogOpen={setImportProfileDialogOpen}
+            onProxyManagementDialogOpen={setProxyManagementDialogOpen}
+            onSettingsDialogOpen={setSettingsDialogOpen}
+            searchQuery={searchQuery}
+            onSearchQueryChange={setSearchQuery}
+          />
+        </div>
+        <div className="space-y-4 w-full">
+          <GroupBadges
+            selectedGroupId={selectedGroupId}
+            onGroupSelect={handleSelectGroup}
+            groups={groupsData}
+            isLoading={isLoading}
+          />
+          <ProfilesDataTable
+            profiles={filteredProfiles}
+            onLaunchProfile={launchProfile}
+            onKillProfile={handleKillProfile}
+            onDeleteProfile={handleDeleteProfile}
+            onRenameProfile={handleRenameProfile}
+            onConfigureCamoufox={handleConfigureCamoufox}
+            runningProfiles={runningProfiles}
+            isUpdating={isUpdating}
+            onDeleteSelectedProfiles={handleDeleteSelectedProfiles}
+            onAssignProfilesToGroup={handleAssignProfilesToGroup}
+            selectedGroupId={selectedGroupId}
+            selectedProfiles={selectedProfiles}
+            onSelectedProfilesChange={setSelectedProfiles}
+          />
+        </div>
      </main>

-      <ProxySettingsDialog
-        isOpen={proxyDialogOpen}
-        onClose={() => {
-          setProxyDialogOpen(false);
-        }}
-        onSave={handleSaveProxy}
-        initialProxyId={currentProfileForProxy?.proxy_id}
-        browserType={currentProfileForProxy?.browser}
-      />
+      {isInitializing && (
+        <div className="fixed inset-0 z-1000 backdrop-blur-sm bg-background/30 flex items-center justify-center">
+          <div className="bg-background rounded-xl p-6 shadow-xl border border-border/10 w-[320px] text-center">
+            <div className="text-lg font-medium">Initializing</div>
+            <div className="mt-1 mb-2 text-sm text-gray-600 dark:text-gray-300">
+              Please don't close the app
+            </div>
+            <div className="mx-auto mb-4 w-8 h-8 rounded-full border-2 animate-spin border-muted/40 border-t-primary" />
+          </div>
+        </div>
+      )}

      <CreateProfileDialog
        isOpen={createProfileDialogOpen}
@@ -795,21 +763,11 @@ export default function Home() {
        }}
      />

-      <ChangeVersionDialog
-        isOpen={changeVersionDialogOpen}
-        onClose={() => {
-          setChangeVersionDialogOpen(false);
-        }}
-        profile={currentProfileForVersionChange}
-        onVersionChanged={() => void loadProfiles()}
-      />
-
      <ImportProfileDialog
        isOpen={importProfileDialogOpen}
        onClose={() => {
          setImportProfileDialogOpen(false);
        }}
-        onImportComplete={() => void loadProfiles()}
      />

      <ProxyManagementDialog
@@ -867,6 +825,7 @@ export default function Home() {
        }}
        selectedProfiles={selectedProfilesForGroup}
        onAssignmentComplete={handleGroupAssignmentComplete}
+        profiles={profiles}
      />

      <DeleteConfirmationDialog
@@ -877,7 +836,8 @@ export default function Home() {
        description={`This action cannot be undone. This will permanently delete ${selectedProfiles.length} profile${selectedProfiles.length !== 1 ? "s" : ""} and all associated data.`}
        confirmButtonText={`Delete ${selectedProfiles.length} Profile${selectedProfiles.length !== 1 ? "s" : ""}`}
        isLoading={isBulkDeleting}
-        profileNames={selectedProfiles}
+        profileIds={selectedProfiles}
+        profiles={profiles.map((p) => ({ id: p.id, name: p.name }))}
      />
    </div>
  );
@@ -5,6 +5,7 @@ import { LuCheckCheck, LuCog, LuRefreshCw } from "react-icons/lu";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import type { AppUpdateInfo, AppUpdateProgress } from "@/types";
+import { RippleButton } from "./ui/ripple";

 interface AppUpdateToastProps {
  updateInfo: AppUpdateInfo;
@@ -16,26 +17,20 @@ interface AppUpdateToastProps {

 function getStageIcon(stage?: string, isUpdating?: boolean) {
  if (!isUpdating) {
-    return <FaDownload className="flex-shrink-0 w-5 h-5 text-blue-500" />;
+    return <FaDownload className="flex-shrink-0 w-5 h-5" />;
  }

  switch (stage) {
    case "downloading":
-      return <FaDownload className="flex-shrink-0 w-5 h-5 text-blue-500" />;
+      return <FaDownload className="flex-shrink-0 w-5 h-5" />;
    case "extracting":
-      return (
-        <LuRefreshCw className="flex-shrink-0 w-5 h-5 text-blue-500 animate-spin" />
-      );
+      return <LuRefreshCw className="flex-shrink-0 w-5 h-5 animate-spin" />;
    case "installing":
-      return (
-        <LuCog className="flex-shrink-0 w-5 h-5 text-blue-500 animate-spin" />
-      );
+      return <LuCog className="flex-shrink-0 w-5 h-5 animate-spin" />;
    case "completed":
-      return <LuCheckCheck className="flex-shrink-0 w-5 h-5 text-green-500" />;
+      return <LuCheckCheck className="flex-shrink-0 w-5 h-5" />;
    default:
-      return (
-        <LuRefreshCw className="flex-shrink-0 w-5 h-5 text-blue-500 animate-spin" />
-      );
+      return <LuRefreshCw className="flex-shrink-0 w-5 h-5 animate-spin" />;
  }
 }

@@ -78,7 +73,7 @@ export function AppUpdateToast({
      updateProgress.stage === "completed");

  return (
-    <div className="flex items-start p-4 w-full max-w-md bg-white rounded-lg border border-gray-200 shadow-lg dark:bg-gray-800 dark:border-gray-700">
+    <div className="flex items-start p-4 w-full max-w-md rounded-lg border shadow-lg bg-card border-border text-card-foreground">
      <div className="mr-3 mt-0.5">
        {getStageIcon(updateProgress?.stage, isUpdating)}
      </div>
@@ -133,9 +128,9 @@ export function AppUpdateToast({
                {updateProgress.eta && ` • ${updateProgress.eta} remaining`}
              </p>
            </div>
-            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
+            <div className="w-full bg-muted rounded-full h-1.5">
              <div
-                className="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
+                className="bg-primary h-1.5 rounded-full transition-all duration-300"
                style={{ width: `${updateProgress.percentage}%` }}
              />
            </div>
@@ -146,12 +141,12 @@ export function AppUpdateToast({
        {showOtherStageProgress && (
          <div className="mt-2 space-y-1">
            {/* Progress indicator for non-downloading stages */}
-            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
+            <div className="w-full bg-muted rounded-full h-1.5">
              <div
                className={`h-1.5 rounded-full transition-all duration-500 ${
                  updateProgress.stage === "completed"
                    ? "bg-green-500 w-full"
-                    : "bg-blue-500 w-full animate-pulse"
+                    : "bg-primary w-full animate-pulse"
                }`}
              />
            </div>
@@ -160,22 +155,22 @@ export function AppUpdateToast({

        {!isUpdating && (
          <div className="flex gap-2 items-center mt-3">
-            <Button
+            <RippleButton
              onClick={() => void handleUpdateClick()}
              size="sm"
              className="flex gap-2 items-center text-xs"
            >
              <FaDownload className="w-3 h-3" />
              Update Now
-            </Button>
-            <Button
+            </RippleButton>
+            <RippleButton
              variant="outline"
              onClick={onDismiss}
              size="sm"
              className="text-xs"
            >
              Later
-            </Button>
+            </RippleButton>
          </div>
        )}
      </div>
@@ -2,7 +2,6 @@

 import { useEffect, useState } from "react";
 import { SharedCamoufoxConfigForm } from "@/components/shared-camoufox-config-form";
-import { Button } from "@/components/ui/button";
 import {
  Dialog,
  DialogContent,
@@ -12,6 +11,8 @@ import {
 } from "@/components/ui/dialog";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import type { BrowserProfile, CamoufoxConfig } from "@/types";
+import { LoadingButton } from "./loading-button";
+import { RippleButton } from "./ui/ripple";

 interface CamoufoxConfigDialogProps {
  isOpen: boolean;
@@ -102,11 +103,11 @@ export function CamoufoxConfigDialog({
      <DialogContent className="max-w-3xl max-h-[90vh] flex flex-col">
        <DialogHeader className="flex-shrink-0">
          <DialogTitle>
-            Configure Camoufox Settings - {profile.name}
+            Configure Fingerprint Settings - {profile.name}
          </DialogTitle>
        </DialogHeader>

-        <ScrollArea className="flex-1 pr-6 h-[400px]">
+        <ScrollArea className="flex-1 h-[320px]">
          <div className="py-4">
            <SharedCamoufoxConfigForm
              config={config}
@@ -117,12 +118,16 @@ export function CamoufoxConfigDialog({
        </ScrollArea>

        <DialogFooter className="flex-shrink-0 pt-4 border-t">
-          <Button variant="outline" onClick={handleClose}>
+          <RippleButton variant="outline" onClick={handleClose}>
            Cancel
-          </Button>
-          <Button onClick={handleSave} disabled={isSaving}>
-            {isSaving ? "Saving..." : "Save Configuration"}
-          </Button>
+          </RippleButton>
+          <LoadingButton
+            isLoading={isSaving}
+            onClick={handleSave}
+            disabled={isSaving}
+          >
+            Save
+          </LoadingButton>
        </DialogFooter>
      </DialogContent>
    </Dialog>
@@ -1,307 +0,0 @@
-"use client";
-
-import { invoke } from "@tauri-apps/api/core";
-import { useCallback, useEffect, useState } from "react";
-import { LuTriangleAlert } from "react-icons/lu";
-import { LoadingButton } from "@/components/loading-button";
-import { ReleaseTypeSelector } from "@/components/release-type-selector";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
-import { useBrowserDownload } from "@/hooks/use-browser-download";
-import { getBrowserDisplayName } from "@/lib/browser-utils";
-import type { BrowserProfile, BrowserReleaseTypes } from "@/types";
-
-interface ChangeVersionDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  profile: BrowserProfile | null;
-  onVersionChanged: () => void;
-}
-
-export function ChangeVersionDialog({
-  isOpen,
-  onClose,
-  profile,
-  onVersionChanged,
-}: ChangeVersionDialogProps) {
-  const [selectedReleaseType, setSelectedReleaseType] = useState<
-    "stable" | "nightly" | null
-  >(null);
-  const [releaseTypes, setReleaseTypes] = useState<BrowserReleaseTypes>({});
-  const [isLoadingReleaseTypes, setIsLoadingReleaseTypes] = useState(false);
-  const [isUpdating, setIsUpdating] = useState(false);
-  const [showDowngradeWarning, setShowDowngradeWarning] = useState(false);
-  const [acknowledgeDowngrade, setAcknowledgeDowngrade] = useState(false);
-
-  const {
-    downloadedVersions,
-    isBrowserDownloading,
-    loadDownloadedVersions,
-    downloadBrowser,
-    isVersionDownloaded,
-  } = useBrowserDownload();
-
-  const loadReleaseTypes = useCallback(async (browser: string) => {
-    setIsLoadingReleaseTypes(true);
-    try {
-      const releaseTypes = await invoke<BrowserReleaseTypes>(
-        "get_browser_release_types",
-        { browserStr: browser },
-      );
-      setReleaseTypes(releaseTypes);
-    } catch (error) {
-      console.error("Failed to load release types:", error);
-    } finally {
-      setIsLoadingReleaseTypes(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (
-      profile &&
-      selectedReleaseType &&
-      selectedReleaseType !== profile.release_type
-    ) {
-      // For simplicity, we'll show downgrade warning when switching from stable to nightly
-      // since nightly versions might be considered "downgrades" in terms of stability
-      const isDowngrade =
-        profile.release_type === "stable" && selectedReleaseType === "nightly";
-      setShowDowngradeWarning(isDowngrade);
-
-      if (!isDowngrade) {
-        setAcknowledgeDowngrade(false);
-      }
-    }
-  }, [selectedReleaseType, profile]);
-
-  const handleDownload = useCallback(async () => {
-    if (!profile || !selectedReleaseType) return;
-
-    const version =
-      selectedReleaseType === "stable"
-        ? releaseTypes.stable
-        : releaseTypes.nightly;
-    if (!version) return;
-
-    await downloadBrowser(profile.browser, version);
-  }, [profile, selectedReleaseType, downloadBrowser, releaseTypes]);
-
-  const handleVersionChange = useCallback(async () => {
-    if (!profile || !selectedReleaseType) return;
-
-    const version =
-      selectedReleaseType === "stable"
-        ? releaseTypes.stable
-        : releaseTypes.nightly;
-    if (!version) return;
-
-    setIsUpdating(true);
-    try {
-      await invoke("update_profile_version", {
-        profileName: profile.name,
-        version,
-      });
-      onVersionChanged();
-      onClose();
-    } catch (error) {
-      console.error("Failed to update profile version:", error);
-    } finally {
-      setIsUpdating(false);
-    }
-  }, [profile, selectedReleaseType, releaseTypes, onVersionChanged, onClose]);
-
-  const selectedVersion =
-    selectedReleaseType === "stable"
-      ? releaseTypes.stable
-      : releaseTypes.nightly;
-
-  const canUpdate =
-    profile &&
-    selectedReleaseType &&
-    selectedReleaseType !== profile.release_type &&
-    selectedVersion &&
-    isVersionDownloaded(selectedVersion) &&
-    (!showDowngradeWarning || acknowledgeDowngrade);
-
-  useEffect(() => {
-    if (isOpen && profile) {
-      // Set current release type based on profile
-      setSelectedReleaseType(profile.release_type as "stable" | "nightly");
-      setAcknowledgeDowngrade(false);
-      void loadReleaseTypes(profile.browser);
-      void loadDownloadedVersions(profile.browser);
-    }
-  }, [isOpen, profile, loadDownloadedVersions, loadReleaseTypes]);
-
-  if (!profile) return null;
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-md">
-        <DialogHeader>
-          <DialogTitle>Change Release Type</DialogTitle>
-        </DialogHeader>
-
-        <div className="grid gap-4 py-4">
-          <div className="space-y-2">
-            <Label className="text-sm font-medium">Profile:</Label>
-            <div className="p-2 text-sm rounded bg-muted">{profile.name}</div>
-          </div>
-
-          <div className="space-y-2">
-            <Label className="text-sm font-medium">Current Release:</Label>
-            <div className="p-2 text-sm capitalize rounded bg-muted">
-              {profile.release_type} ({profile.version})
-            </div>
-          </div>
-
-          {!releaseTypes.stable && !releaseTypes.nightly ? (
-            <Alert>
-              <AlertDescription>
-                No releases are available for{" "}
-                {getBrowserDisplayName(profile.browser)}.
-              </AlertDescription>
-            </Alert>
-          ) : !releaseTypes.stable || !releaseTypes.nightly ? (
-            <div className="space-y-4">
-              <Alert>
-                <AlertDescription>
-                  Only {profile.release_type} releases are available for{" "}
-                  {getBrowserDisplayName(profile.browser)}.
-                </AlertDescription>
-              </Alert>
-              <div className="grid gap-2">
-                <Label>New Release Type</Label>
-                {isLoadingReleaseTypes ? (
-                  <div className="text-sm text-muted-foreground">
-                    Loading release types...
-                  </div>
-                ) : (
-                  <div className="space-y-4">
-                    {selectedReleaseType &&
-                      selectedReleaseType !== profile.release_type &&
-                      selectedVersion &&
-                      !isVersionDownloaded(selectedVersion) && (
-                        <Alert>
-                          <AlertDescription>
-                            You must download{" "}
-                            {getBrowserDisplayName(profile.browser)}{" "}
-                            {selectedVersion} before switching to this release
-                            type. Use the download button above to get the
-                            latest version.
-                          </AlertDescription>
-                        </Alert>
-                      )}
-
-                    <ReleaseTypeSelector
-                      selectedReleaseType={selectedReleaseType}
-                      onReleaseTypeSelect={setSelectedReleaseType}
-                      availableReleaseTypes={releaseTypes}
-                      browser={profile.browser}
-                      isDownloading={isBrowserDownloading(profile.browser)}
-                      onDownload={() => {
-                        void handleDownload();
-                      }}
-                      placeholder="Select release type..."
-                      downloadedVersions={downloadedVersions}
-                    />
-                  </div>
-                )}
-              </div>
-            </div>
-          ) : (
-            <div className="grid gap-2">
-              <Label>New Release Type</Label>
-              {isLoadingReleaseTypes ? (
-                <div className="text-sm text-muted-foreground">
-                  Loading release types...
-                </div>
-              ) : (
-                <div className="space-y-4">
-                  {selectedReleaseType &&
-                    selectedReleaseType !== profile.release_type &&
-                    selectedVersion &&
-                    !isVersionDownloaded(selectedVersion) && (
-                      <Alert>
-                        <AlertDescription>
-                          You must download{" "}
-                          {getBrowserDisplayName(profile.browser)}{" "}
-                          {selectedVersion} before switching to this release
-                          type. Use the download button above to get the latest
-                          version.
-                        </AlertDescription>
-                      </Alert>
-                    )}
-
-                  <ReleaseTypeSelector
-                    selectedReleaseType={selectedReleaseType}
-                    onReleaseTypeSelect={setSelectedReleaseType}
-                    availableReleaseTypes={releaseTypes}
-                    browser={profile.browser}
-                    isDownloading={isBrowserDownloading(profile.browser)}
-                    onDownload={() => {
-                      void handleDownload();
-                    }}
-                    placeholder="Select release type..."
-                    downloadedVersions={downloadedVersions}
-                  />
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Downgrade Warning */}
-          {showDowngradeWarning && (
-            <Alert className="border-orange-700">
-              <LuTriangleAlert className="w-4 h-4 text-orange-700" />
-              <AlertTitle className="text-orange-700">
-                Stability Warning
-              </AlertTitle>
-              <AlertDescription className="text-orange-700">
-                You are about to switch from stable to nightly releases. Nightly
-                versions may be less stable and could contain bugs or incomplete
-                features.
-                <div className="flex items-center mt-3 space-x-2">
-                  <Checkbox
-                    id="acknowledge-downgrade"
-                    checked={acknowledgeDowngrade}
-                    onCheckedChange={(checked) => {
-                      setAcknowledgeDowngrade(checked as boolean);
-                    }}
-                  />
-                  <Label htmlFor="acknowledge-downgrade" className="text-sm">
-                    I understand the risks and want to proceed
-                  </Label>
-                </div>
-              </AlertDescription>
-            </Alert>
-          )}
-        </div>
-
-        <DialogFooter>
-          <Button variant="outline" onClick={onClose}>
-            Cancel
-          </Button>
-          <LoadingButton
-            isLoading={isUpdating}
-            onClick={() => {
-              void handleVersionChange();
-            }}
-            disabled={!canUpdate}
-          >
-            {isUpdating ? "Updating..." : "Update Release Type"}
-          </LoadingButton>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
@@ -4,7 +4,6 @@ import { invoke } from "@tauri-apps/api/core";
 import { useCallback, useState } from "react";
 import { toast } from "sonner";
 import { LoadingButton } from "@/components/loading-button";
-import { Button } from "@/components/ui/button";
 import {
  Dialog,
  DialogContent,
@@ -16,6 +15,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import type { ProfileGroup } from "@/types";
+import { RippleButton } from "./ui/ripple";

 interface CreateGroupDialogProps {
  isOpen: boolean;
@@ -98,15 +98,19 @@ export function CreateGroupDialog({
        </div>

        <DialogFooter>
-          <Button variant="outline" onClick={handleClose} disabled={isCreating}>
+          <RippleButton
+            variant="outline"
+            onClick={handleClose}
+            disabled={isCreating}
+          >
            Cancel
-          </Button>
+          </RippleButton>
          <LoadingButton
            isLoading={isCreating}
            onClick={() => void handleCreate()}
            disabled={!groupName.trim()}
          >
-            Create Group
+            Create
          </LoadingButton>
        </DialogFooter>
      </DialogContent>
@@ -47,20 +47,23 @@
 * });
 * ```
 */
+/** biome-ignore-all lint/suspicious/noExplicitAny: TODO */

 import {
  LuCheckCheck,
  LuDownload,
  LuRefreshCw,
-  LuRocket,
  LuTriangleAlert,
 } from "react-icons/lu";
+import type { ExternalToast } from "sonner";
+import { RippleButton } from "./ui/ripple";

 interface BaseToastProps {
  id?: string;
  title: string;
  description?: string;
  duration?: number;
+  action?: ExternalToast["action"];
 }

 interface LoadingToastProps extends BaseToastProps {
@@ -123,72 +126,52 @@ type ToastProps =
 function getToastIcon(type: ToastProps["type"], stage?: string) {
  switch (type) {
    case "success":
-      return <LuCheckCheck className="flex-shrink-0 w-4 h-4 text-green-500" />;
+      return <LuCheckCheck className="flex-shrink-0 w-4 h-4 text-foreground" />;
    case "error":
-      return <LuTriangleAlert className="flex-shrink-0 w-4 h-4 text-red-500" />;
+      return (
+        <LuTriangleAlert className="flex-shrink-0 w-4 h-4 text-foreground" />
+      );
    case "download":
      if (stage === "completed") {
        return (
-          <LuCheckCheck className="flex-shrink-0 w-4 h-4 text-green-500" />
+          <LuCheckCheck className="flex-shrink-0 w-4 h-4 text-foreground" />
        );
      }
-      return <LuDownload className="flex-shrink-0 w-4 h-4 text-blue-500" />;
+      return <LuDownload className="flex-shrink-0 w-4 h-4 text-foreground" />;

    case "version-update":
      return (
-        <LuRefreshCw className="flex-shrink-0 w-4 h-4 text-blue-500 animate-spin" />
+        <LuRefreshCw className="flex-shrink-0 w-4 h-4 animate-spin text-foreground" />
      );
    case "fetching":
      return (
-        <LuRefreshCw className="flex-shrink-0 w-4 h-4 text-blue-500 animate-spin" />
+        <LuRefreshCw className="flex-shrink-0 w-4 h-4 animate-spin text-foreground" />
      );
    case "twilight-update":
      return (
-        <LuRefreshCw className="flex-shrink-0 w-4 h-4 text-purple-500 animate-spin" />
+        <LuRefreshCw className="flex-shrink-0 w-4 h-4 animate-spin text-foreground" />
      );
    case "loading":
      return (
-        <div className="flex-shrink-0 w-4 h-4 rounded-full border-2 border-blue-500 animate-spin border-t-transparent" />
+        <div className="flex-shrink-0 w-4 h-4 rounded-full border-2 animate-spin border-foreground border-t-transparent" />
      );
    default:
      return (
-        <div className="flex-shrink-0 w-4 h-4 rounded-full border-2 border-blue-500 animate-spin border-t-transparent" />
+        <div className="flex-shrink-0 w-4 h-4 rounded-full border-2 animate-spin border-foreground border-t-transparent" />
      );
  }
 }

 export function UnifiedToast(props: ToastProps) {
-  const { title, description, type } = props;
+  const { title, description, type, action } = props;
  const stage = "stage" in props ? props.stage : undefined;
  const progress = "progress" in props ? props.progress : undefined;

-  // Check if this is an auto-update toast
-  const isAutoUpdate = title.includes("update started");
-
  return (
-    <div
-      className={`flex items-start p-3 w-96 rounded-lg border shadow-lg ${
-        isAutoUpdate
-          ? "bg-emerald-50 border-emerald-200 dark:bg-emerald-950 dark:border-emerald-800"
-          : "bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700"
-      }`}
-      data-toast-type={isAutoUpdate ? "auto-update" : "default"}
-    >
-      <div className="mr-3 mt-0.5">
-        {isAutoUpdate ? (
-          <LuRocket className="flex-shrink-0 w-4 h-4 text-emerald-500" />
-        ) : (
-          getToastIcon(type, stage)
-        )}
-      </div>
+    <div className="flex items-start p-3 w-96 rounded-lg border shadow-lg bg-card border-border text-card-foreground">
+      <div className="mr-3 mt-0.5">{getToastIcon(type, stage)}</div>
      <div className="flex-1 min-w-0">
-        <p
-          className={`text-sm font-medium leading-tight ${
-            isAutoUpdate
-              ? "text-emerald-900 dark:text-emerald-100"
-              : "text-gray-900 dark:text-white"
-          }`}
-        >
+        <p className="text-sm font-semibold leading-tight text-foreground">
          {title}
        </p>

@@ -199,15 +182,15 @@ export function UnifiedToast(props: ToastProps) {
          stage === "downloading" && (
            <div className="mt-2 space-y-1">
              <div className="flex justify-between items-center">
-                <p className="flex-1 min-w-0 text-xs text-gray-600 dark:text-gray-300">
+                <p className="flex-1 min-w-0 text-xs text-muted-foreground">
                  {progress.percentage.toFixed(1)}%
                  {progress.speed && ` • ${progress.speed} MB/s`}
                  {progress.eta && ` • ${progress.eta} remaining`}
                </p>
              </div>
-              <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
+              <div className="w-full bg-muted rounded-full h-1.5">
                <div
-                  className="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
+                  className="bg-foreground h-1.5 rounded-full transition-all duration-300"
                  style={{ width: `${progress.percentage}%` }}
                />
              </div>
@@ -219,21 +202,21 @@ export function UnifiedToast(props: ToastProps) {
          progress &&
          "current_browser" in progress && (
            <div className="mt-2 space-y-1">
-              <p className="text-xs text-gray-600 dark:text-gray-300">
+              <p className="text-xs text-muted-foreground">
                {progress.current_browser && (
                  <>Looking for updates for {progress.current_browser}</>
                )}
              </p>
              <div className="flex items-center space-x-2">
-                <div className="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 min-w-0">
+                <div className="flex-1 bg-muted rounded-full h-1.5 min-w-0">
                  <div
-                    className="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
+                    className="bg-foreground h-1.5 rounded-full transition-all duration-300"
                    style={{
                      width: `${(progress.current / progress.total) * 100}%`,
                    }}
                  />
                </div>
-                <span className="w-8 text-xs text-right text-gray-500 whitespace-nowrap dark:text-gray-400 shrink-0">
+                <span className="w-8 text-xs text-right whitespace-nowrap text-muted-foreground shrink-0">
                  {progress.current}/{progress.total}
                </span>
              </div>
@@ -243,13 +226,13 @@ export function UnifiedToast(props: ToastProps) {
        {/* Twilight update progress */}
        {type === "twilight-update" && (
          <div className="mt-2">
-            <p className="text-xs text-gray-600 dark:text-gray-300">
+            <p className="text-xs text-muted-foreground">
              {"hasUpdate" in props && props.hasUpdate
                ? "New twilight build available for download"
                : "Checking for twilight updates..."}
            </p>
            {props.browserName && (
-              <p className="mt-1 text-xs text-purple-600 dark:text-purple-400">
+              <p className="mt-1 text-xs text-muted-foreground">
                {props.browserName} • Rolling Release
              </p>
            )}
@@ -258,13 +241,7 @@ export function UnifiedToast(props: ToastProps) {

        {/* Description */}
        {description && (
-          <p
-            className={`mt-1 text-xs leading-tight ${
-              isAutoUpdate
-                ? "text-emerald-700 dark:text-emerald-300"
-                : "text-gray-600 dark:text-gray-300"
-            }`}
-          >
+          <p className="mt-1 text-xs leading-tight text-muted-foreground">
            {description}
          </p>
        )}
@@ -273,22 +250,35 @@ export function UnifiedToast(props: ToastProps) {
        {type === "download" && !description && (
          <>
            {stage === "extracting" && (
-              <p className="mt-1 text-xs text-gray-600 dark:text-gray-300">
+              <p className="mt-1 text-xs text-muted-foreground">
                Extracting browser files...
              </p>
            )}
            {stage === "verifying" && (
-              <p className="mt-1 text-xs text-gray-600 dark:text-gray-300">
+              <p className="mt-1 text-xs text-muted-foreground">
                Verifying browser files...
              </p>
            )}
            {stage === "downloading (twilight rolling release)" && (
-              <p className="mt-1 text-xs text-purple-600 dark:text-purple-400">
+              <p className="mt-1 text-xs text-muted-foreground">
                Downloading rolling release build...
              </p>
            )}
          </>
        )}
+        {action &&
+          "onClick" in (action as any) &&
+          "label" in (action as any) && (
+            <div className="mt-2 w-full">
+              <RippleButton
+                size="sm"
+                className="ml-auto"
+                onClick={(action as any).onClick}
+              >
+                {(action as any).label}
+              </RippleButton>
+            </div>
+          )}
      </div>
    </div>
  );
@@ -1,6 +1,5 @@
 "use client";

-import { Button } from "@/components/ui/button";
 import {
  Dialog,
  DialogContent,
@@ -9,6 +8,8 @@ import {
  DialogHeader,
  DialogTitle,
 } from "@/components/ui/dialog";
+import { LoadingButton } from "./loading-button";
+import { RippleButton } from "./ui/ripple";

 interface DeleteConfirmationDialogProps {
  isOpen: boolean;
@@ -18,7 +19,8 @@ interface DeleteConfirmationDialogProps {
  description: string;
  confirmButtonText?: string;
  isLoading?: boolean;
-  profileNames?: string[];
+  profileIds?: string[];
+  profiles?: { id: string; name: string }[];
 }

 export function DeleteConfirmationDialog({
@@ -29,7 +31,8 @@ export function DeleteConfirmationDialog({
  description,
  confirmButtonText = "Delete",
  isLoading = false,
-  profileNames,
+  profileIds,
+  profiles = [],
 }: DeleteConfirmationDialogProps) {
  const handleConfirm = async () => {
    await onConfirm();
@@ -41,34 +44,42 @@ export function DeleteConfirmationDialog({
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription>{description}</DialogDescription>
-          {profileNames && profileNames.length > 0 && (
+          {profileIds && profileIds.length > 0 && (
            <div className="mt-4">
              <p className="text-sm font-medium mb-2">
                Profiles to be deleted:
              </p>
              <div className="bg-muted rounded-md p-3 max-h-32 overflow-y-auto">
                <ul className="space-y-1">
-                  {profileNames.map((name) => (
-                    <li key={name} className="text-sm text-muted-foreground">
-                      • {name}
-                    </li>
-                  ))}
+                  {profileIds.map((id) => {
+                    const profile = profiles.find((p) => p.id === id);
+                    const displayName = profile ? profile.name : id;
+                    return (
+                      <li key={id} className="text-sm text-muted-foreground">
+                        • {displayName}
+                      </li>
+                    );
+                  })}
                </ul>
              </div>
            </div>
          )}
        </DialogHeader>
        <DialogFooter>
-          <Button variant="outline" onClick={onClose} disabled={isLoading}>
-            Cancel
-          </Button>
-          <Button
-            variant="destructive"
-            onClick={() => void handleConfirm()}
+          <RippleButton
+            variant="outline"
+            onClick={onClose}
            disabled={isLoading}
          >
-            {isLoading ? "Deleting..." : confirmButtonText}
-          </Button>
+            Cancel
+          </RippleButton>
+          <LoadingButton
+            variant="destructive"
+            onClick={() => void handleConfirm()}
+            isLoading={isLoading}
+          >
+            {confirmButtonText}
+          </LoadingButton>
        </DialogFooter>
      </DialogContent>
    </Dialog>
@@ -4,7 +4,6 @@ import { invoke } from "@tauri-apps/api/core";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { LoadingButton } from "@/components/loading-button";
-import { Button } from "@/components/ui/button";
 import {
  Dialog,
  DialogContent,
@@ -17,6 +16,7 @@ import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import type { BrowserProfile, ProfileGroup } from "@/types";
+import { RippleButton } from "./ui/ripple";

 interface DeleteGroupDialogProps {
  isOpen: boolean;
@@ -74,13 +74,13 @@ export function DeleteGroupDialog({
    try {
      if (deleteAction === "delete" && associatedProfiles.length > 0) {
        // Delete all associated profiles first
-        const profileNames = associatedProfiles.map((p) => p.name);
-        await invoke("delete_selected_profiles", { profileNames });
+        const profileIds = associatedProfiles.map((p) => p.id);
+        await invoke("delete_selected_profiles", { profileIds });
      } else if (deleteAction === "move" && associatedProfiles.length > 0) {
        // Move profiles to default group (null group_id)
-        const profileNames = associatedProfiles.map((p) => p.name);
+        const profileIds = associatedProfiles.map((p) => p.id);
        await invoke("assign_profiles_to_group", {
-          profileNames,
+          profileIds,
          groupId: null,
        });
      }
@@ -188,9 +188,13 @@ export function DeleteGroupDialog({
        </div>

        <DialogFooter>
-          <Button variant="outline" onClick={handleClose} disabled={isDeleting}>
+          <RippleButton
+            variant="outline"
+            onClick={handleClose}
+            disabled={isDeleting}
+          >
            Cancel
-          </Button>
+          </RippleButton>
          <LoadingButton
            variant="destructive"
            isLoading={isDeleting}
@@ -4,7 +4,6 @@ import { invoke } from "@tauri-apps/api/core";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { LoadingButton } from "@/components/loading-button";
-import { Button } from "@/components/ui/button";
 import {
  Dialog,
  DialogContent,
@@ -16,6 +15,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import type { ProfileGroup } from "@/types";
+import { RippleButton } from "./ui/ripple";

 interface EditGroupDialogProps {
  isOpen: boolean;
@@ -108,9 +108,13 @@ export function EditGroupDialog({
        </div>

        <DialogFooter>
-          <Button variant="outline" onClick={handleClose} disabled={isUpdating}>
+          <RippleButton
+            variant="outline"
+            onClick={handleClose}
+            disabled={isUpdating}
+          >
            Cancel
-          </Button>
+          </RippleButton>
          <LoadingButton
            isLoading={isUpdating}
            onClick={() => void handleUpdate()}
@@ -2,9 +2,10 @@

 import { invoke } from "@tauri-apps/api/core";
 import { useCallback, useEffect, useState } from "react";
+import { GoPlus } from "react-icons/go";
 import { toast } from "sonner";
+import { CreateGroupDialog } from "@/components/create-group-dialog";
 import { LoadingButton } from "@/components/loading-button";
-import { Button } from "@/components/ui/button";
 import {
  Dialog,
  DialogContent,
@@ -21,13 +22,15 @@ import {
  SelectTrigger,
  SelectValue,
 } from "@/components/ui/select";
-import type { ProfileGroup } from "@/types";
+import type { BrowserProfile, ProfileGroup } from "@/types";
+import { RippleButton } from "./ui/ripple";

 interface GroupAssignmentDialogProps {
  isOpen: boolean;
  onClose: () => void;
  selectedProfiles: string[];
  onAssignmentComplete: () => void;
+  profiles?: BrowserProfile[];
 }

 export function GroupAssignmentDialog({
@@ -35,12 +38,14 @@ export function GroupAssignmentDialog({
  onClose,
  selectedProfiles,
  onAssignmentComplete,
+  profiles = [],
 }: GroupAssignmentDialogProps) {
  const [groups, setGroups] = useState<ProfileGroup[]>([]);
  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [isAssigning, setIsAssigning] = useState(false);
  const [error, setError] = useState<string | null>(null);
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);

  const loadGroups = useCallback(async () => {
    setIsLoading(true);
@@ -61,7 +66,7 @@ export function GroupAssignmentDialog({
    setError(null);
    try {
      await invoke("assign_profiles_to_group", {
-        profileNames: selectedProfiles,
+        profileIds: selectedProfiles,
        groupId: selectedGroupId,
      });

@@ -116,17 +121,34 @@ export function GroupAssignmentDialog({
            <Label>Selected Profiles:</Label>
            <div className="p-3 bg-muted rounded-md max-h-32 overflow-y-auto">
              <ul className="text-sm space-y-1">
-                {selectedProfiles.map((profileName) => (
-                  <li key={profileName} className="truncate">
-                    • {profileName}
-                  </li>
-                ))}
+                {selectedProfiles.map((profileId) => {
+                  // Find the profile name for display
+                  const profile = profiles.find(
+                    (p: BrowserProfile) => p.id === profileId,
+                  );
+                  const displayName = profile ? profile.name : profileId;
+                  return (
+                    <li key={profileId} className="truncate">
+                      • {displayName}
+                    </li>
+                  );
+                })}
              </ul>
            </div>
          </div>

          <div className="space-y-2">
-            <Label htmlFor="group-select">Assign to Group:</Label>
+            <div className="flex justify-between items-center">
+              <Label htmlFor="group-select">Assign to Group:</Label>
+              <RippleButton
+                size="sm"
+                variant="outline"
+                className="h-7 px-2 text-xs"
+                onClick={() => setCreateDialogOpen(true)}
+              >
+                <GoPlus className="mr-1 w-3 h-3" /> Create Group
+              </RippleButton>
+            </div>
            {isLoading ? (
              <div className="text-sm text-muted-foreground">
                Loading groups...
@@ -161,9 +183,13 @@ export function GroupAssignmentDialog({
        </div>

        <DialogFooter>
-          <Button variant="outline" onClick={onClose} disabled={isAssigning}>
+          <RippleButton
+            variant="outline"
+            onClick={onClose}
+            disabled={isAssigning}
+          >
            Cancel
-          </Button>
+          </RippleButton>
          <LoadingButton
            isLoading={isAssigning}
            onClick={() => void handleAssign()}
@@ -173,6 +199,15 @@ export function GroupAssignmentDialog({
          </LoadingButton>
        </DialogFooter>
      </DialogContent>
+      <CreateGroupDialog
+        isOpen={createDialogOpen}
+        onClose={() => setCreateDialogOpen(false)}
+        onGroupCreated={(group) => {
+          setGroups((prev) => [...prev, group]);
+          setSelectedGroupId(group.id);
+          setCreateDialogOpen(false);
+        }}
+      />
    </Dialog>
  );
 }
@@ -27,17 +27,13 @@ export function GroupBadges({
    );
  }

-  if (groups.length === 0) {
-    return null;
-  }
-
  return (
    <div className="flex flex-wrap gap-2 mb-4">
      {groups.map((group) => (
        <Badge
          key={group.id}
          variant={selectedGroupId === group.id ? "default" : "secondary"}
-          className="cursor-pointer hover:bg-primary/80 transition-colors flex items-center gap-2 px-3 py-1"
+          className="flex gap-2 items-center px-3 py-1 transition-colors cursor-pointer dark:hover:bg-primary/60 hover:bg-primary/80"
          onClick={() => {
            onGroupSelect(selectedGroupId === group.id ? "default" : group.id);
          }}
@@ -26,6 +26,7 @@ import {
  TableRow,
 } from "@/components/ui/table";
 import type { ProfileGroup } from "@/types";
+import { RippleButton } from "./ui/ripple";

 interface GroupManagementDialogProps {
  isOpen: boolean;
@@ -119,14 +120,14 @@ export function GroupManagementDialog({
            {/* Create new group button */}
            <div className="flex justify-between items-center">
              <Label>Groups</Label>
-              <Button
+              <RippleButton
                size="sm"
                onClick={() => setCreateDialogOpen(true)}
                className="flex gap-2 items-center"
              >
                <GoPlus className="w-4 h-4" />
-                Create Group
-              </Button>
+                Create
+              </RippleButton>
            </div>

            {error && (
@@ -187,9 +188,9 @@ export function GroupManagementDialog({
          </div>

          <DialogFooter>
-            <Button variant="outline" onClick={onClose}>
+            <RippleButton variant="outline" onClick={onClose}>
              Close
-            </Button>
+            </RippleButton>
          </DialogFooter>
        </DialogContent>
      </Dialog>
@@ -1,7 +1,7 @@
 import { FaDownload } from "react-icons/fa";
 import { FiWifi } from "react-icons/fi";
 import { GoGear, GoKebabHorizontal, GoPlus } from "react-icons/go";
-import { LuTrash2, LuUsers } from "react-icons/lu";
+import { LuSearch, LuTrash2, LuUsers, LuX } from "react-icons/lu";
 import { Logo } from "./icons/logo";
 import { Button } from "./ui/button";
 import { CardTitle } from "./ui/card";
@@ -11,6 +11,8 @@ import {
  DropdownMenuItem,
  DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
+import { Input } from "./ui/input";
+import { RippleButton } from "./ui/ripple";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";

 type Props = {
@@ -22,6 +24,8 @@ type Props = {
  onGroupManagementDialogOpen: (open: boolean) => void;
  onImportProfileDialogOpen: (open: boolean) => void;
  onCreateProfileDialogOpen: (open: boolean) => void;
+  searchQuery: string;
+  onSearchQueryChange: (query: string) => void;
 };

 const HomeHeader = ({
@@ -33,6 +37,8 @@ const HomeHeader = ({
  onGroupManagementDialogOpen,
  onImportProfileDialogOpen,
  onCreateProfileDialogOpen,
+  searchQuery,
+  onSearchQueryChange,
 }: Props) => {
  const handleLogoClick = () => {
    // Trigger the same URL handling logic as if the URL came from the system
@@ -43,23 +49,23 @@ const HomeHeader = ({
  };
  return (
    <div className="flex justify-between items-center">
-      <div className="flex items-center gap-3">
+      <div className="flex gap-3 items-center">
        <button
          type="button"
-          onClick={handleLogoClick}
          className="p-1 cursor-pointer"
          title="Open donutbrowser.com"
+          onClick={handleLogoClick}
        >
-          <Logo className="w-10 h-10" />
+          <Logo className="w-10 h-10 transition-transform duration-300 ease-out will-change-transform hover:scale-110" />
        </button>
        {selectedProfiles.length > 0 ? (
-          <div className="flex items-center gap-3">
+          <div className="flex gap-3 items-center">
            <span className="text-sm font-medium">
              {selectedProfiles.length} profile
              {selectedProfiles.length !== 1 ? "s" : ""} selected
            </span>
            <div className="flex gap-2">
-              <Button
+              <RippleButton
                variant="outline"
                size="sm"
                onClick={onBulkGroupAssignment}
@@ -67,16 +73,16 @@ const HomeHeader = ({
              >
                <LuUsers className="w-4 h-4" />
                Assign to Group
-              </Button>
-              <Button
+              </RippleButton>
+              <RippleButton
                variant="destructive"
                size="sm"
                onClick={onBulkDelete}
                className="flex gap-2 items-center"
              >
                <LuTrash2 className="w-4 h-4" />
-                Delete Selected
-              </Button>
+                Delete
+              </RippleButton>
            </div>
          </div>
        ) : (
@@ -84,12 +90,32 @@ const HomeHeader = ({
        )}
      </div>
      <div className="flex gap-2 items-center">
+        <div className="relative">
+          <Input
+            type="text"
+            placeholder="Search profiles..."
+            value={searchQuery}
+            onChange={(e) => onSearchQueryChange(e.target.value)}
+            className="pr-8 pl-10 w-48"
+          />
+          <LuSearch className="absolute left-3 top-1/2 w-4 h-4 transform -translate-y-1/2 text-muted-foreground" />
+          {searchQuery && (
+            <button
+              type="button"
+              onClick={() => onSearchQueryChange("")}
+              className="absolute right-2 top-1/2 p-1 rounded-sm transition-colors transform -translate-y-1/2 hover:bg-accent"
+              aria-label="Clear search"
+            >
+              <LuX className="w-4 h-4 text-muted-foreground hover:text-foreground" />
+            </button>
+          )}
+        </div>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              size="sm"
              variant="outline"
-              className="flex gap-2 items-center"
+              className="flex gap-2 items-center h-[36px]"
            >
              <GoKebabHorizontal className="w-4 h-4" />
            </Button>
@@ -137,7 +163,7 @@ const HomeHeader = ({
                onClick={() => {
                  onCreateProfileDialogOpen(true);
                }}
-                className="flex gap-2 items-center"
+                className="flex gap-2 items-center h-[36px]"
              >
                <GoPlus className="w-4 h-4" />
              </Button>
@@ -26,17 +26,16 @@ import {
 import { useBrowserSupport } from "@/hooks/use-browser-support";
 import { getBrowserDisplayName, getBrowserIcon } from "@/lib/browser-utils";
 import type { DetectedProfile } from "@/types";
+import { RippleButton } from "./ui/ripple";

 interface ImportProfileDialogProps {
  isOpen: boolean;
  onClose: () => void;
-  onImportComplete?: () => void;
 }

 export function ImportProfileDialog({
  isOpen,
  onClose,
-  onImportComplete,
 }: ImportProfileDialogProps) {
  const [detectedProfiles, setDetectedProfiles] = useState<DetectedProfile[]>(
    [],
@@ -63,6 +62,11 @@ export function ImportProfileDialog({
  const { supportedBrowsers, isLoading: isLoadingSupport } =
    useBrowserSupport();

+  // Exclude browsers that are no longer supported for import
+  const importableBrowsers = supportedBrowsers.filter(
+    (b) => b !== "mullvad-browser" && b !== "tor-browser",
+  );
+
  const loadDetectedProfiles = useCallback(async () => {
    setIsLoading(true);
    try {
@@ -134,9 +138,6 @@ export function ImportProfileDialog({
      toast.success(
        `Successfully imported profile "${autoDetectProfileName.trim()}"`,
      );
-      if (onImportComplete) {
-        onImportComplete();
-      }
      onClose();
    } catch (error) {
      console.error("Failed to import profile:", error);
@@ -162,7 +163,6 @@ export function ImportProfileDialog({
    selectedDetectedProfile,
    autoDetectProfileName,
    detectedProfiles,
-    onImportComplete,
    onClose,
  ]);

@@ -187,9 +187,6 @@ export function ImportProfileDialog({
      toast.success(
        `Successfully imported profile "${manualProfileName.trim()}"`,
      );
-      if (onImportComplete) {
-        onImportComplete();
-      }
      onClose();
    } catch (error) {
      console.error("Failed to import profile:", error);
@@ -211,13 +208,7 @@ export function ImportProfileDialog({
    } finally {
      setIsImporting(false);
    }
-  }, [
-    manualBrowserType,
-    manualProfilePath,
-    manualProfileName,
-    onImportComplete,
-    onClose,
-  ]);
+  }, [manualBrowserType, manualProfilePath, manualProfileName, onClose]);

  const handleClose = () => {
    setSelectedDetectedProfile(null);
@@ -242,7 +233,7 @@ export function ImportProfileDialog({
      );
      if (profile) {
        const browserName = getBrowserDisplayName(profile.browser);
-        const defaultName = `Imported ${browserName} Profile`;
+        const defaultName = `Old ${browserName}`;
        setAutoDetectProfileName(defaultName);
      }
    }
@@ -268,7 +259,7 @@ export function ImportProfileDialog({
        <div className="overflow-y-auto flex-1 space-y-6 min-h-0">
          {/* Mode Selection */}
          <div className="flex gap-2">
-            <Button
+            <RippleButton
              variant={importMode === "auto-detect" ? "default" : "outline"}
              onClick={() => {
                setImportMode("auto-detect");
@@ -277,8 +268,8 @@ export function ImportProfileDialog({
              disabled={isLoading}
            >
              Auto-Detect
-            </Button>
-            <Button
+            </RippleButton>
+            <RippleButton
              variant={importMode === "manual" ? "default" : "outline"}
              onClick={() => {
                setImportMode("manual");
@@ -287,7 +278,7 @@ export function ImportProfileDialog({
              disabled={isLoading}
            >
              Manual Import
-            </Button>
+            </RippleButton>
          </div>

          {/* Auto-Detect Mode */}
@@ -409,7 +400,7 @@ export function ImportProfileDialog({
                      />
                    </SelectTrigger>
                    <SelectContent>
-                      {supportedBrowsers.map((browser) => {
+                      {importableBrowsers.map((browser) => {
                        const IconComponent = getBrowserIcon(browser);
                        return (
                          <SelectItem key={browser} value={browser}>
@@ -479,9 +470,9 @@ export function ImportProfileDialog({
        </div>

        <DialogFooter className="flex-shrink-0">
-          <Button variant="outline" onClick={handleClose}>
+          <RippleButton variant="outline" onClick={handleClose}>
            Cancel
-          </Button>
+          </RippleButton>
          {importMode === "auto-detect" ? (
            <LoadingButton
              isLoading={isImporting}
@@ -494,7 +485,7 @@ export function ImportProfileDialog({
                isLoading
              }
            >
-              Import Profile
+              Import
            </LoadingButton>
          ) : (
            <LoadingButton
@@ -508,7 +499,7 @@ export function ImportProfileDialog({
                !manualProfileName.trim()
              }
            >
-              Import Profile
+              Import
            </LoadingButton>
          )}
        </DialogFooter>
@@ -1,5 +1,8 @@
 import { LuLoaderCircle } from "react-icons/lu";
-import { type ButtonProps, Button as UIButton } from "./ui/button";
+import {
+  type RippleButtonProps as ButtonProps,
+  RippleButton as UIButton,
+} from "./ui/ripple";

 type Props = ButtonProps & {
  isLoading: boolean;
@@ -7,7 +10,11 @@ type Props = ButtonProps & {
 };
 export const LoadingButton = ({ isLoading, ...props }: Props) => {
  return (
-    <UIButton className="grid place-items-center" {...props}>
+    <UIButton
+      className="grid place-items-center"
+      {...props}
+      disabled={props.disabled || isLoading}
+    >
      {isLoading ? (
        <LuLoaderCircle className="h-4 w-4 animate-spin" />
      ) : (
@@ -287,6 +287,7 @@ const MultipleSelector = React.forwardRef<
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus, onSearch]);

+    // biome-ignore lint/correctness/noNestedComponentDefinitions: public code, TODO: fix
    const CreatableItem = () => {
      if (!creatable) return undefined;
      if (
@@ -352,6 +353,10 @@ const MultipleSelector = React.forwardRef<
      [options, selected],
    );

+    const hasAvailableOptions = React.useMemo(() => {
+      return Object.values(selectables).some((group) => group.length > 0);
+    }, [selectables]);
+
    /** Avoid Creatable Selector freezing or lagging when paste a long string. */
    const commandFilter = React.useCallback(() => {
      if (commandProps?.filter) {
@@ -416,7 +421,7 @@ const MultipleSelector = React.forwardRef<
                  <button
                    type="button"
                    className={cn(
-                      "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                      "cursor-pointer ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
                      (disabled || option.fixed) && "hidden",
                    )}
                    onKeyDown={(e) => {
@@ -445,6 +450,40 @@ const MultipleSelector = React.forwardRef<
                setInputValue(value);
                inputProps?.onValueChange?.(value);
              }}
+              onKeyDown={(e) => {
+                // Allow consumer to handle first
+                inputProps?.onKeyDown?.(
+                  e as unknown as React.KeyboardEvent<HTMLInputElement>,
+                );
+                if (e.defaultPrevented) return;
+                if (e.key === "Enter") {
+                  const value = inputValue.trim();
+                  if (value.length === 0) return;
+                  // If option already exists among available options, pick that; otherwise create
+                  const entries = Object.values(options).flat();
+                  const existing = entries.find(
+                    (o) => o.value === value && !o.disable,
+                  );
+                  // Prevent duplicates in the current selection
+                  if (
+                    selected.some((s) => s.value === (existing?.value ?? value))
+                  ) {
+                    e.preventDefault();
+                    setInputValue("");
+                    return;
+                  }
+                  if (selected.length >= maxSelected) {
+                    onMaxSelected?.(selected.length);
+                    return;
+                  }
+                  e.preventDefault();
+                  setInputValue("");
+                  const picked = existing ?? { value, label: value };
+                  const newOptions = [...selected, picked];
+                  setSelected(newOptions);
+                  onChange?.(newOptions);
+                }
+              }}
              onBlur={(event) => {
                setOpen(false);
                inputProps?.onBlur?.(event);
@@ -465,7 +504,7 @@ const MultipleSelector = React.forwardRef<
                "flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
                {
                  "w-full": hidePlaceholderWhenSelected,
-                  "px-3 py-2": selected.length === 0,
+                  "px-3 mt-1": selected.length === 0,
                  "ml-1": selected.length !== 0,
                },
                inputProps?.className,
@@ -474,7 +513,7 @@ const MultipleSelector = React.forwardRef<
          </div>
        </div>
        <div className="relative">
-          {open && (
+          {open && hasAvailableOptions && (
            <CommandList className="absolute top-1 z-10 w-full rounded-md border shadow-md outline-none bg-popover text-popover-foreground animate-in">
              {isLoading ? (
                loadingIndicator
@@ -489,7 +528,7 @@ const MultipleSelector = React.forwardRef<
                    <CommandGroup
                      key={key}
                      heading={key}
-                      className="overflow-auto h-full"
+                      className="overflow-auto h-24"
                    >
                      {dropdowns.map((option) => {
                        return (
@@ -3,7 +3,6 @@
 import { useEffect, useState } from "react";
 import { BsCamera, BsMic } from "react-icons/bs";
 import { LoadingButton } from "@/components/loading-button";
-import { Button } from "@/components/ui/button";
 import {
  Dialog,
  DialogContent,
@@ -15,6 +14,7 @@ import {
 import type { PermissionType } from "@/hooks/use-permissions";
 import { usePermissions } from "@/hooks/use-permissions";
 import { showErrorToast, showSuccessToast } from "@/lib/toast-utils";
+import { RippleButton } from "./ui/ripple";

 interface PermissionDialogProps {
  isOpen: boolean;
@@ -148,9 +148,9 @@ export function PermissionDialog({
        </div>

        <DialogFooter className="gap-2">
-          <Button variant="outline" onClick={onClose}>
+          <RippleButton variant="outline" onClick={onClose}>
            {isCurrentPermissionGranted ? "Done" : "Cancel"}
-          </Button>
+          </RippleButton>

          {!isCurrentPermissionGranted && (
            <LoadingButton
@@ -6,7 +6,6 @@ import { LuCopy } from "react-icons/lu";
 import { toast } from "sonner";
 import { LoadingButton } from "@/components/loading-button";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import {
  Dialog,
  DialogContent,
@@ -28,8 +27,11 @@ import {
  TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useBrowserState } from "@/hooks/use-browser-state";
+import { useProfileEvents } from "@/hooks/use-profile-events";
+import { useProxyEvents } from "@/hooks/use-proxy-events";
 import { getBrowserDisplayName, getBrowserIcon } from "@/lib/browser-utils";
-import type { BrowserProfile, StoredProxy } from "@/types";
+import type { BrowserProfile } from "@/types";
+import { RippleButton } from "./ui/ripple";

 interface ProfileSelectorDialogProps {
  isOpen: boolean;
@@ -43,14 +45,19 @@ export function ProfileSelectorDialog({
  isOpen,
  onClose,
  url,
-  runningProfiles = new Set(),
+  runningProfiles: externalRunningProfiles,
  isUpdating,
 }: ProfileSelectorDialogProps) {
-  const [profiles, setProfiles] = useState<BrowserProfile[]>([]);
+  // Use the centralized profile events hook
+  const { profiles, runningProfiles: hookRunningProfiles } = useProfileEvents();
+
+  // Use external runningProfiles if provided, otherwise use hook's runningProfiles
+  const runningProfiles = externalRunningProfiles || hookRunningProfiles;
+
+  const { storedProxies } = useProxyEvents();
+
  const [selectedProfile, setSelectedProfile] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
  const [isLaunching, setIsLaunching] = useState(false);
-  const [storedProxies, setStoredProxies] = useState<StoredProxy[]>([]);
  const [launchingProfiles, setLaunchingProfiles] = useState<Set<string>>(
    new Set(),
  );
@@ -77,48 +84,6 @@ export function ProfileSelectorDialog({
    [storedProxies],
  );

-  const loadProfiles = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      // Load both profiles and stored proxies
-      const [profileList, proxiesList] = await Promise.all([
-        invoke<BrowserProfile[]>("list_browser_profiles"),
-        invoke<StoredProxy[]>("get_stored_proxies"),
-      ]);
-
-      // Sort profiles by name
-      profileList.sort((a, b) => a.name.localeCompare(b.name));
-
-      // Set both profiles and proxies
-      setProfiles(profileList);
-      setStoredProxies(proxiesList);
-
-      // Auto-select first available profile for link opening
-      if (profileList.length > 0) {
-        // First, try to find a running profile that can be used for opening links
-        const runningAvailableProfile = profileList.find((profile) => {
-          const isRunning = runningProfiles.has(profile.name);
-          // Simple check without browserState dependency
-          return (
-            isRunning &&
-            profile.browser !== "tor-browser" &&
-            profile.browser !== "mullvad-browser"
-          );
-        });
-
-        if (runningAvailableProfile) {
-          setSelectedProfile(runningAvailableProfile.name);
-        } else {
-          setSelectedProfile(profileList[0].name);
-        }
-      }
-    } catch (err) {
-      console.error("Failed to load profiles:", err);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [runningProfiles]);
-
  // Helper function to get tooltip content for profiles - now uses shared hook
  const getProfileTooltipContent = (profile: BrowserProfile): string | null => {
    return browserState.getProfileTooltipContent(profile);
@@ -128,10 +93,13 @@ export function ProfileSelectorDialog({
    if (!selectedProfile || !url) return;

    setIsLaunching(true);
-    setLaunchingProfiles((prev) => new Set(prev).add(selectedProfile));
+    const selected = profiles.find((p) => p.name === selectedProfile);
+    if (!selected) return;
+
+    setLaunchingProfiles((prev) => new Set(prev).add(selected.id));
    try {
      await invoke("open_url_with_profile", {
-        profileName: selectedProfile,
+        profileId: selected.id,
        url,
      });
      onClose();
@@ -139,13 +107,15 @@ export function ProfileSelectorDialog({
      console.error("Failed to open URL with profile:", error);
    } finally {
      setIsLaunching(false);
-      setLaunchingProfiles((prev) => {
-        const next = new Set(prev);
-        next.delete(selectedProfile);
-        return next;
-      });
+      if (selected) {
+        setLaunchingProfiles((prev) => {
+          const next = new Set(prev);
+          next.delete(selected.id);
+          return next;
+        });
+      }
    }
-  }, [selectedProfile, url, onClose]);
+  }, [selectedProfile, url, onClose, profiles]);

  const handleCancel = useCallback(() => {
    setSelectedProfile(null);
@@ -178,11 +148,31 @@ export function ProfileSelectorDialog({
    return getProfileTooltipContent(selectedProfileData);
  };

+  // Auto-select first available profile when dialog opens and profiles are loaded
  useEffect(() => {
-    if (isOpen) {
-      void loadProfiles();
+    if (isOpen && profiles.length > 0 && !selectedProfile) {
+      // First, try to find a running profile that can be used for opening links
+      const runningAvailableProfile = profiles.find((profile) => {
+        const isRunning = runningProfiles.has(profile.id);
+        // Simple check without browserState dependency
+        return (
+          isRunning &&
+          profile.browser !== "tor-browser" &&
+          profile.browser !== "mullvad-browser"
+        );
+      });
+
+      if (runningAvailableProfile) {
+        setSelectedProfile(runningAvailableProfile.name);
+      } else {
+        // Sort profiles by name and select first
+        const sortedProfiles = [...profiles].sort((a, b) =>
+          a.name.localeCompare(b.name),
+        );
+        setSelectedProfile(sortedProfiles[0].name);
+      }
    }
-  }, [isOpen, loadProfiles]);
+  }, [isOpen, profiles, selectedProfile, runningProfiles]);

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
@@ -196,7 +186,7 @@ export function ProfileSelectorDialog({
            <div className="space-y-2">
              <div className="flex justify-between items-center">
                <Label className="text-sm font-medium">Opening URL:</Label>
-                <Button
+                <RippleButton
                  variant="outline"
                  size="sm"
                  onClick={() => void handleCopyUrl()}
@@ -204,7 +194,7 @@ export function ProfileSelectorDialog({
                >
                  <LuCopy className="w-3 h-3" />
                  Copy
-                </Button>
+                </RippleButton>
              </div>
              <div className="p-2 text-sm break-all rounded bg-muted">
                {url}
@@ -214,11 +204,7 @@ export function ProfileSelectorDialog({

          <div className="space-y-2">
            <Label htmlFor="profile-select">Select Profile:</Label>
-            {isLoading ? (
-              <div className="text-sm text-muted-foreground">
-                Loading profiles...
-              </div>
-            ) : profiles.length === 0 ? (
+            {profiles.length === 0 ? (
              <div className="space-y-2">
                <div className="text-sm text-muted-foreground">
                  No profiles available. Please create a profile first.
@@ -238,7 +224,7 @@ export function ProfileSelectorDialog({
                </SelectTrigger>
                <SelectContent>
                  {profiles.map((profile) => {
-                    const isRunning = runningProfiles.has(profile.name);
+                    const isRunning = runningProfiles.has(profile.id);
                    const canUseForLinks =
                      browserState.canUseProfileForLinks(profile);
                    const tooltipContent = getProfileTooltipContent(profile);
@@ -312,9 +298,9 @@ export function ProfileSelectorDialog({
        </div>

        <DialogFooter>
-          <Button variant="outline" onClick={handleCancel}>
+          <RippleButton variant="outline" onClick={handleCancel}>
            Cancel
-          </Button>
+          </RippleButton>
          <Tooltip>
            <TooltipTrigger asChild>
              <span className="inline-flex">
@@ -4,7 +4,6 @@ import { invoke } from "@tauri-apps/api/core";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { LoadingButton } from "@/components/loading-button";
-import { Button } from "@/components/ui/button";
 import {
  Dialog,
  DialogContent,
@@ -22,6 +21,7 @@ import {
  SelectValue,
 } from "@/components/ui/select";
 import type { StoredProxy } from "@/types";
+import { RippleButton } from "./ui/ripple";

 interface ProxyFormData {
  name: string;
@@ -35,14 +35,12 @@ interface ProxyFormData {
 interface ProxyFormDialogProps {
  isOpen: boolean;
  onClose: () => void;
-  onSave: (proxy: StoredProxy) => void;
  editingProxy?: StoredProxy | null;
 }

 export function ProxyFormDialog({
  isOpen,
  onClose,
-  onSave,
  editingProxy,
 }: ProxyFormDialogProps) {
  const [isSubmitting, setIsSubmitting] = useState(false);
@@ -105,11 +103,9 @@ export function ProxyFormDialog({
        password: formData.password.trim() || undefined,
      };

-      let savedProxy: StoredProxy;
-
      if (editingProxy) {
        // Update existing proxy
-        savedProxy = await invoke<StoredProxy>("update_stored_proxy", {
+        await invoke("update_stored_proxy", {
          proxyId: editingProxy.id,
          name: formData.name.trim(),
          proxySettings,
@@ -117,14 +113,13 @@ export function ProxyFormDialog({
        toast.success("Proxy updated successfully");
      } else {
        // Create new proxy
-        savedProxy = await invoke<StoredProxy>("create_stored_proxy", {
+        await invoke("create_stored_proxy", {
          name: formData.name.trim(),
          proxySettings,
        });
        toast.success("Proxy created successfully");
      }

-      onSave(savedProxy);
      onClose();
    } catch (error) {
      console.error("Failed to save proxy:", error);
@@ -134,7 +129,7 @@ export function ProxyFormDialog({
    } finally {
      setIsSubmitting(false);
    }
-  }, [formData, editingProxy, onSave, onClose]);
+  }, [formData, editingProxy, onClose]);

  const handleClose = useCallback(() => {
    if (!isSubmitting) {
@@ -264,13 +259,13 @@ export function ProxyFormDialog({
        </div>

        <DialogFooter>
-          <Button
+          <RippleButton
            variant="outline"
            onClick={handleClose}
            disabled={isSubmitting}
          >
            Cancel
-          </Button>
+          </RippleButton>
          <LoadingButton
            isLoading={isSubmitting}
            onClick={handleSubmit}
@@ -1,10 +1,13 @@
 "use client";

 import { invoke } from "@tauri-apps/api/core";
-import { useCallback, useEffect, useState } from "react";
+import { emit } from "@tauri-apps/api/event";
+import { useCallback, useState } from "react";
 import { FiEdit2, FiPlus, FiTrash2, FiWifi } from "react-icons/fi";
 import { toast } from "sonner";
+import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog";
 import { ProxyFormDialog } from "@/components/proxy-form-dialog";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
  Dialog,
@@ -13,13 +16,16 @@ import {
  DialogHeader,
  DialogTitle,
 } from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useProxyEvents } from "@/hooks/use-proxy-events";
 import { trimName } from "@/lib/name-utils";
 import type { StoredProxy } from "@/types";
+import { RippleButton } from "./ui/ripple";

 interface ProxyManagementDialogProps {
  isOpen: boolean;
@@ -30,46 +36,33 @@ export function ProxyManagementDialog({
  isOpen,
  onClose,
 }: ProxyManagementDialogProps) {
-  const [storedProxies, setStoredProxies] = useState<StoredProxy[]>([]);
-  const [loading, setLoading] = useState(false);
  const [showProxyForm, setShowProxyForm] = useState(false);
  const [editingProxy, setEditingProxy] = useState<StoredProxy | null>(null);
+  const [proxyToDelete, setProxyToDelete] = useState<StoredProxy | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);

-  const loadStoredProxies = useCallback(async () => {
-    try {
-      setLoading(true);
-      const proxies = await invoke<StoredProxy[]>("get_stored_proxies");
-      setStoredProxies(proxies);
-    } catch (error) {
-      console.error("Failed to load stored proxies:", error);
-      toast.error("Failed to load proxies");
-    } finally {
-      setLoading(false);
-    }
+  const { storedProxies, proxyUsage, isLoading } = useProxyEvents();
+
+  const handleDeleteProxy = useCallback((proxy: StoredProxy) => {
+    // Open in-app confirmation dialog
+    setProxyToDelete(proxy);
  }, []);

-  useEffect(() => {
-    if (isOpen) {
-      loadStoredProxies();
-    }
-  }, [isOpen, loadStoredProxies]);
-
-  const handleDeleteProxy = useCallback(async (proxy: StoredProxy) => {
-    if (
-      !confirm(`Are you sure you want to delete the proxy "${proxy.name}"?`)
-    ) {
-      return;
-    }
-
+  const handleConfirmDelete = useCallback(async () => {
+    if (!proxyToDelete) return;
+    setIsDeleting(true);
    try {
-      await invoke("delete_stored_proxy", { proxyId: proxy.id });
-      setStoredProxies((prev) => prev.filter((p) => p.id !== proxy.id));
+      await invoke("delete_stored_proxy", { proxyId: proxyToDelete.id });
      toast.success("Proxy deleted successfully");
+      await emit("stored-proxies-changed");
    } catch (error) {
      console.error("Failed to delete proxy:", error);
      toast.error("Failed to delete proxy");
+    } finally {
+      setIsDeleting(false);
+      setProxyToDelete(null);
    }
-  }, []);
+  }, [proxyToDelete]);

  const handleCreateProxy = useCallback(() => {
    setEditingProxy(null);
@@ -81,23 +74,6 @@ export function ProxyManagementDialog({
    setShowProxyForm(true);
  }, []);

-  const handleProxySaved = useCallback((savedProxy: StoredProxy) => {
-    setStoredProxies((prev) => {
-      const existingIndex = prev.findIndex((p) => p.id === savedProxy.id);
-      if (existingIndex >= 0) {
-        // Update existing proxy
-        const updated = [...prev];
-        updated[existingIndex] = savedProxy;
-        return updated;
-      } else {
-        // Add new proxy
-        return [...prev, savedProxy];
-      }
-    });
-    setShowProxyForm(false);
-    setEditingProxy(null);
-  }, []);
-
  const handleProxyFormClose = useCallback(() => {
    setShowProxyForm(false);
    setEditingProxy(null);
@@ -124,24 +100,23 @@ export function ProxyManagementDialog({
                  profiles
                </p>
              </div>
-              <Button
+              <RippleButton
                onClick={handleCreateProxy}
                className="flex gap-2 items-center"
              >
                <FiPlus className="w-4 h-4" />
                Create Proxy
-              </Button>
+              </RippleButton>
            </div>

            {/* Proxy List - Scrollable */}
            <div className="flex-1 min-h-0">
-              {loading ? (
-                <div className="flex justify-center items-center h-32">
-                  <p className="text-sm text-muted-foreground">
-                    Loading proxies...
-                  </p>
+              {isLoading && (
+                <div className="flex justify-center items-center py-6">
+                  <div className="w-8 h-8 rounded-full border-b-2 animate-spin border-primary"></div>
                </div>
-              ) : storedProxies.length === 0 ? (
+              )}
+              {storedProxies.length === 0 && !isLoading ? (
                <div className="flex flex-col justify-center items-center h-32 text-center">
                  <FiWifi className="mx-auto mb-4 w-12 h-12 text-muted-foreground" />
                  <p className="mb-2 text-muted-foreground">
@@ -150,78 +125,96 @@ export function ProxyManagementDialog({
                  <p className="mb-4 text-sm text-muted-foreground">
                    Create your first proxy configuration to get started
                  </p>
-                  <Button variant="outline" onClick={handleCreateProxy}>
+                  <RippleButton variant="outline" onClick={handleCreateProxy}>
                    <FiPlus className="mr-2 w-4 h-4" />
                    Create First Proxy
-                  </Button>
+                  </RippleButton>
                </div>
              ) : (
-                <div className="overflow-y-auto pr-2 space-y-2 h-full">
-                  {storedProxies.map((proxy) => (
-                    <div
-                      key={proxy.id}
-                      className="flex justify-between items-center p-1 rounded border bg-card"
-                    >
-                      <div className="flex-1 ml-2 min-w-0">
-                        {proxy.name.length > 30 ? (
+                <ScrollArea className="h-[240px] pr-2">
+                  <div className="space-y-2">
+                    {storedProxies.map((proxy) => (
+                      <div
+                        key={proxy.id}
+                        className="flex justify-between items-center p-1 rounded border bg-card"
+                      >
+                        <div className="flex-1 ml-2 min-w-0">
+                          {proxy.name.length > 30 ? (
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <span className="block font-medium truncate text-card-foreground">
+                                  {trimName(proxy.name)}
+                                </span>
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                <span className="text-sm font-medium text-card-foreground">
+                                  {proxy.name}
+                                </span>
+                              </TooltipContent>
+                            </Tooltip>
+                          ) : (
+                            <span className="text-sm font-medium text-card-foreground">
+                              {proxy.name}
+                            </span>
+                          )}
+                        </div>
+                        <div className="mr-2">
+                          <Badge variant="secondary">
+                            {proxyUsage[proxy.id] ?? 0}
+                          </Badge>
+                        </div>
+                        <div className="flex flex-shrink-0 gap-1 items-center">
                          <Tooltip>
                            <TooltipTrigger asChild>
-                              <span className="block font-medium truncate text-card-foreground">
-                                {trimName(proxy.name)}
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => handleEditProxy(proxy)}
+                              >
+                                <FiEdit2 className="w-4 h-4" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <p>Edit proxy</p>
+                            </TooltipContent>
+                          </Tooltip>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <span>
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  onClick={() => handleDeleteProxy(proxy)}
+                                  className="text-destructive hover:text-destructive"
+                                  disabled={(proxyUsage[proxy.id] ?? 0) > 0}
+                                >
+                                  <FiTrash2 className="w-4 h-4" />
+                                </Button>
                              </span>
                            </TooltipTrigger>
                            <TooltipContent>
-                              <span className="text-sm font-medium text-card-foreground">
-                                {proxy.name}
-                              </span>
+                              {(proxyUsage[proxy.id] ?? 0) > 0 ? (
+                                <p>
+                                  Cannot delete: in use by{" "}
+                                  {proxyUsage[proxy.id]} profile
+                                  {proxyUsage[proxy.id] > 1 ? "s" : ""}
+                                </p>
+                              ) : (
+                                <p>Delete proxy</p>
+                              )}
                            </TooltipContent>
                          </Tooltip>
-                        ) : (
-                          <span className="text-sm font-medium text-card-foreground">
-                            {proxy.name}
-                          </span>
-                        )}
+                        </div>
                      </div>
-                      <div className="flex flex-shrink-0 gap-1 items-center">
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => handleEditProxy(proxy)}
-                            >
-                              <FiEdit2 className="w-4 h-4" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>Edit proxy</p>
-                          </TooltipContent>
-                        </Tooltip>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => handleDeleteProxy(proxy)}
-                              className="text-destructive hover:text-destructive"
-                            >
-                              <FiTrash2 className="w-4 h-4" />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>Delete proxy</p>
-                          </TooltipContent>
-                        </Tooltip>
-                      </div>
-                    </div>
-                  ))}
-                </div>
+                    ))}
+                  </div>
+                </ScrollArea>
              )}
            </div>
          </div>

          <DialogFooter className="flex-shrink-0">
-            <Button onClick={onClose}>Close</Button>
+            <RippleButton onClick={onClose}>Close</RippleButton>
          </DialogFooter>
        </DialogContent>
      </Dialog>
@@ -229,9 +222,17 @@ export function ProxyManagementDialog({
      <ProxyFormDialog
        isOpen={showProxyForm}
        onClose={handleProxyFormClose}
-        onSave={handleProxySaved}
        editingProxy={editingProxy}
      />
+      <DeleteConfirmationDialog
+        isOpen={proxyToDelete !== null}
+        onClose={() => setProxyToDelete(null)}
+        onConfirm={handleConfirmDelete}
+        title="Delete Proxy"
+        description={`This action cannot be undone. This will permanently delete the proxy "${proxyToDelete?.name ?? ""}".`}
+        confirmButtonText="Delete"
+        isLoading={isDeleting}
+      />
    </>
  );
 }
@@ -1,283 +0,0 @@
-"use client";
-
-import { invoke } from "@tauri-apps/api/core";
-import { useCallback, useEffect, useState } from "react";
-import { FiPlus } from "react-icons/fi";
-import { toast } from "sonner";
-import { ProxyFormDialog } from "@/components/proxy-form-dialog";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import type { StoredProxy } from "@/types";
-
-interface ProxySettingsDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSave: (proxyId: string | null) => void;
-  initialProxyId?: string | null;
-  browserType?: string;
-}
-
-export function ProxySettingsDialog({
-  isOpen,
-  onClose,
-  onSave,
-  initialProxyId,
-  browserType,
-}: ProxySettingsDialogProps) {
-  const [storedProxies, setStoredProxies] = useState<StoredProxy[]>([]);
-  const [selectedProxyId, setSelectedProxyId] = useState<string | null>(
-    initialProxyId || null,
-  );
-  const [loading, setLoading] = useState(false);
-  const [showProxyForm, setShowProxyForm] = useState(false);
-
-  // Helper to determine if proxy should be disabled for the selected browser
-  const isProxyDisabled = browserType === "tor-browser";
-
-  const loadStoredProxies = useCallback(async () => {
-    try {
-      setLoading(true);
-      const proxies = await invoke<StoredProxy[]>("get_stored_proxies");
-      setStoredProxies(proxies);
-    } catch (error) {
-      console.error("Failed to load stored proxies:", error);
-      toast.error("Failed to load proxies");
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (isOpen) {
-      loadStoredProxies();
-      if (isProxyDisabled) {
-        setSelectedProxyId(null);
-      } else {
-        // Reset to initial proxy ID when dialog opens
-        setSelectedProxyId(initialProxyId || null);
-      }
-    }
-  }, [isOpen, isProxyDisabled, loadStoredProxies, initialProxyId]);
-
-  const handleCreateProxy = useCallback(() => {
-    setShowProxyForm(true);
-  }, []);
-
-  const handleProxySaved = useCallback((savedProxy: StoredProxy) => {
-    setStoredProxies((prev) => {
-      const existingIndex = prev.findIndex((p) => p.id === savedProxy.id);
-      if (existingIndex >= 0) {
-        // Update existing proxy
-        const updated = [...prev];
-        updated[existingIndex] = savedProxy;
-        return updated;
-      } else {
-        // Add new proxy
-        return [...prev, savedProxy];
-      }
-    });
-    setSelectedProxyId(savedProxy.id);
-    setShowProxyForm(false);
-  }, []);
-
-  const handleProxyFormClose = useCallback(() => {
-    setShowProxyForm(false);
-  }, []);
-
-  const handleSave = () => {
-    onSave(selectedProxyId);
-  };
-
-  const hasChanged = () => {
-    return selectedProxyId !== initialProxyId;
-  };
-
-  return (
-    <>
-      <Dialog
-        open={isOpen}
-        onOpenChange={(open) => {
-          if (!open) {
-            onClose();
-          }
-        }}
-      >
-        <DialogContent className="max-w-md max-h-[80vh] my-8 flex flex-col">
-          <DialogHeader className="flex-shrink-0">
-            <DialogTitle>Proxy Settings</DialogTitle>
-          </DialogHeader>
-
-          <div className="grid gap-6 py-4">
-            {isProxyDisabled && (
-              <div className="p-4 bg-yellow-50 rounded-md border border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-800">
-                <p className="text-sm text-yellow-800 dark:text-yellow-200">
-                  Tor Browser has its own built-in proxy system and doesn't
-                  support additional proxy configuration.
-                </p>
-              </div>
-            )}
-
-            {!isProxyDisabled && (
-              <>
-                {/* Proxy Selection */}
-                <div className="space-y-3">
-                  <div className="flex justify-between items-center">
-                    <Label className="text-base font-medium">
-                      Select Proxy
-                    </Label>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={handleCreateProxy}
-                          className="flex gap-2 items-center"
-                        >
-                          <FiPlus className="w-4 h-4" />
-                          Create New
-                        </Button>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>Create a new proxy configuration</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </div>
-
-                  <div className="overflow-y-auto p-2 space-y-2 h-full">
-                    <Button
-                      variant="ghost"
-                      onClick={() => setSelectedProxyId(null)}
-                      asChild
-                    >
-                      <Card
-                        className={cn(
-                          "w-full bg-card cursor-pointer transition-colors",
-                          selectedProxyId === null
-                            ? "ring-2 ring-blue-500"
-                            : "",
-                        )}
-                      >
-                        <CardContent className="p-4 w-full">
-                          <div className="flex items-center space-x-3">
-                            <input
-                              type="radio"
-                              id="no-proxy"
-                              name="proxy-selection"
-                              checked={selectedProxyId === null}
-                              onChange={() => setSelectedProxyId(null)}
-                            />
-                            <div className="flex gap-2 items-center">
-                              <Label
-                                htmlFor="no-proxy"
-                                className="font-medium cursor-pointer"
-                              >
-                                No Proxy
-                              </Label>
-                            </div>
-                          </div>
-                        </CardContent>
-                      </Card>
-                    </Button>
-
-                    {loading ? (
-                      <p className="text-sm text-muted-foreground">
-                        Loading proxies...
-                      </p>
-                    ) : (
-                      storedProxies.map((proxy) => (
-                        <Button
-                          key={proxy.id}
-                          variant="ghost"
-                          onClick={() => setSelectedProxyId(proxy.id)}
-                          asChild
-                        >
-                          <Card
-                            className={cn(
-                              "w-full bg-card cursor-pointer transition-colors",
-                              selectedProxyId === proxy.id
-                                ? "ring-2 ring-blue-500"
-                                : "",
-                            )}
-                          >
-                            <CardContent className="p-4 w-full">
-                              <div className="flex items-center space-x-3">
-                                <input
-                                  type="radio"
-                                  id={`proxy-${proxy.id}`}
-                                  name="proxy-selection"
-                                  checked={selectedProxyId === proxy.id}
-                                  onChange={() => setSelectedProxyId(proxy.id)}
-                                />
-                                <div className="flex gap-2 items-center">
-                                  <Label
-                                    htmlFor={`proxy-${proxy.id}`}
-                                    className="font-medium cursor-pointer"
-                                  >
-                                    {proxy.name}
-                                  </Label>
-                                  <Badge variant="outline">
-                                    {proxy.proxy_settings.proxy_type.toUpperCase()}
-                                  </Badge>
-                                </div>
-                              </div>
-                            </CardContent>
-                          </Card>
-                        </Button>
-                      ))
-                    )}
-
-                    {!loading && storedProxies.length === 0 && (
-                      <div className="py-4 text-center">
-                        <p className="mb-2 text-sm text-muted-foreground">
-                          No saved proxies available.
-                        </p>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={handleCreateProxy}
-                        >
-                          <FiPlus className="mr-2 w-4 h-4" />
-                          Create First Proxy
-                        </Button>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </>
-            )}
-          </div>
-
-          <DialogFooter>
-            <Button variant="outline" onClick={onClose}>
-              Cancel
-            </Button>
-            <Button onClick={handleSave} disabled={!hasChanged()}>
-              Save
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      <ProxyFormDialog
-        isOpen={showProxyForm}
-        onClose={handleProxyFormClose}
-        onSave={handleProxySaved}
-      />
-    </>
-  );
-}
@@ -4,7 +4,6 @@ import { useState } from "react";
 import { LuCheck, LuChevronsUpDown, LuDownload } from "react-icons/lu";
 import { LoadingButton } from "@/components/loading-button";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import {
  Command,
  CommandEmpty,
@@ -19,12 +18,12 @@ import {
 } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 import type { BrowserReleaseTypes } from "@/types";
+import { RippleButton } from "./ui/ripple";

 interface ReleaseTypeSelectorProps {
  selectedReleaseType: "stable" | "nightly" | null;
  onReleaseTypeSelect: (releaseType: "stable" | "nightly" | null) => void;
  availableReleaseTypes: BrowserReleaseTypes;
-  browser: string;
  isDownloading: boolean;
  onDownload: () => void;
  placeholder?: string;
@@ -36,7 +35,6 @@ export function ReleaseTypeSelector({
  selectedReleaseType,
  onReleaseTypeSelect,
  availableReleaseTypes,
-  browser,
  isDownloading,
  onDownload,
  placeholder = "Select release type...",
@@ -49,7 +47,7 @@ export function ReleaseTypeSelector({
    ...(availableReleaseTypes.stable
      ? [{ type: "stable" as const, version: availableReleaseTypes.stable }]
      : []),
-    ...(availableReleaseTypes.nightly && browser !== "chromium"
+    ...(availableReleaseTypes.nightly
      ? [{ type: "nightly" as const, version: availableReleaseTypes.nightly }]
      : []),
  ];
@@ -85,7 +83,7 @@ export function ReleaseTypeSelector({
      {showDropdown ? (
        <Popover open={popoverOpen} onOpenChange={setPopoverOpen} modal={true}>
          <PopoverTrigger asChild>
-            <Button
+            <RippleButton
              variant="outline"
              role="combobox"
              aria-expanded={popoverOpen}
@@ -93,7 +91,7 @@ export function ReleaseTypeSelector({
            >
              {selectedDisplayText}
              <LuChevronsUpDown className="ml-2 w-4 h-4 opacity-50 shrink-0" />
-            </Button>
+            </RippleButton>
          </PopoverTrigger>
          <PopoverContent className="p-0">
            <Command>
@@ -159,11 +157,6 @@ export function ReleaseTypeSelector({
            <span className="text-sm font-medium capitalize">
              {releaseOptions[0].type}
            </span>
-            {releaseOptions[0].type === "nightly" && (
-              <Badge variant="secondary" className="text-xs">
-                Nightly
-              </Badge>
-            )}
            <Badge variant="outline" className="text-xs">
              {releaseOptions[0].version}
            </Badge>
@@ -1,14 +1,22 @@
 "use client";

 import { invoke } from "@tauri-apps/api/core";
-import { listen } from "@tauri-apps/api/event";
+import Color from "color";
 import { useTheme } from "next-themes";
 import { useCallback, useEffect, useState } from "react";
 import { BsCamera, BsMic } from "react-icons/bs";
 import { LoadingButton } from "@/components/loading-button";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  ColorPicker,
+  ColorPickerAlpha,
+  ColorPickerEyeDropper,
+  ColorPickerFormat,
+  ColorPickerHue,
+  ColorPickerOutput,
+  ColorPickerSelection,
+} from "@/components/ui/color-picker";
 import {
  Dialog,
  DialogContent,
@@ -17,6 +25,11 @@ import {
  DialogTitle,
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import {
  Select,
  SelectContent,
@@ -26,17 +39,27 @@ import {
 } from "@/components/ui/select";
 import type { PermissionType } from "@/hooks/use-permissions";
 import { usePermissions } from "@/hooks/use-permissions";
-import { getBrowserDisplayName } from "@/lib/browser-utils";
 import {
-  dismissToast,
-  showErrorToast,
-  showSuccessToast,
-  showUnifiedVersionUpdateToast,
-} from "@/lib/toast-utils";
+  getThemeByColors,
+  getThemeById,
+  THEME_VARIABLES,
+  THEMES,
+} from "@/lib/themes";
+import { showErrorToast, showSuccessToast } from "@/lib/toast-utils";
+import { RippleButton } from "./ui/ripple";

 interface AppSettings {
  set_as_default_browser: boolean;
  theme: string;
+  custom_theme?: Record<string, string>;
+  api_enabled: boolean;
+  api_port: number;
+  api_token?: string;
+}
+
+interface CustomThemeState {
+  selectedThemeId: string | null;
+  colors: Record<string, string>;
 }

 interface PermissionInfo {
@@ -45,14 +68,7 @@ interface PermissionInfo {
  description: string;
 }

-interface VersionUpdateProgress {
-  current_browser: string;
-  total_browsers: number;
-  completed_browsers: number;
-  new_versions_found: number;
-  browser_new_versions: number;
-  status: string; // "updating", "completed", "error"
-}
+// Version update progress toasts are handled globally via useVersionUpdater

 interface SettingsDialogProps {
  isOpen: boolean;
@@ -63,10 +79,22 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
  const [settings, setSettings] = useState<AppSettings>({
    set_as_default_browser: false,
    theme: "system",
+    custom_theme: undefined,
+    api_enabled: false,
+    api_port: 10108,
+    api_token: undefined,
  });
  const [originalSettings, setOriginalSettings] = useState<AppSettings>({
    set_as_default_browser: false,
    theme: "system",
+    custom_theme: undefined,
+    api_enabled: false,
+    api_port: 10108,
+    api_token: undefined,
+  });
+  const [customThemeState, setCustomThemeState] = useState<CustomThemeState>({
+    selectedThemeId: null,
+    colors: {},
  });
  const [isDefaultBrowser, setIsDefaultBrowser] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
@@ -78,6 +106,7 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
  const [requestingPermission, setRequestingPermission] =
    useState<PermissionType | null>(null);
  const [isMacOS, setIsMacOS] = useState(false);
+  const [apiServerPort, setApiServerPort] = useState<number | null>(null);

  const { setTheme } = useTheme();
  const {
@@ -123,12 +152,40 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
        return "Access to camera for browser applications";
    }
  }, []);
+
  const loadSettings = useCallback(async () => {
    setIsLoading(true);
    try {
      const appSettings = await invoke<AppSettings>("get_app_settings");
-      setSettings(appSettings);
-      setOriginalSettings(appSettings);
+      const tokyoNightTheme = getThemeById("tokyo-night");
+      if (!tokyoNightTheme) {
+        throw new Error("Tokyo Night theme not found");
+      }
+      const merged: AppSettings = {
+        ...appSettings,
+        custom_theme:
+          appSettings.custom_theme &&
+          Object.keys(appSettings.custom_theme).length > 0
+            ? appSettings.custom_theme
+            : tokyoNightTheme.colors,
+      };
+      setSettings(merged);
+      setOriginalSettings(merged);
+
+      // Initialize custom theme state
+      if (merged.theme === "custom" && merged.custom_theme) {
+        const matchingTheme = getThemeByColors(merged.custom_theme);
+        setCustomThemeState({
+          selectedThemeId: matchingTheme?.id || null,
+          colors: merged.custom_theme,
+        });
+      } else if (merged.theme === "custom") {
+        // Initialize with Tokyo Night if no custom theme exists
+        setCustomThemeState({
+          selectedThemeId: "tokyo-night",
+          colors: tokyoNightTheme.colors,
+        });
+      }
    } catch (error) {
      console.error("Failed to load settings:", error);
    } finally {
@@ -136,6 +193,20 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
    }
  }, []);

+  const applyCustomTheme = useCallback((vars: Record<string, string>) => {
+    const root = document.documentElement;
+    Object.entries(vars).forEach(([k, v]) =>
+      root.style.setProperty(k, v, "important"),
+    );
+  }, []);
+
+  const clearCustomTheme = useCallback(() => {
+    const root = document.documentElement;
+    THEME_VARIABLES.forEach(({ key }) =>
+      root.style.removeProperty(key as string),
+    );
+  }, []);
+
  const loadPermissions = useCallback(async () => {
    setIsLoadingPermissions(true);
    try {
@@ -225,31 +296,162 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
    },
    [getPermissionDisplayName, requestPermission],
  );
+
  const handleSave = useCallback(async () => {
    setIsSaving(true);
    try {
-      await invoke("save_app_settings", { settings });
-      setTheme(settings.theme);
-      setOriginalSettings(settings);
+      // Update settings with current custom theme state
+      let settingsToSave: AppSettings = {
+        ...settings,
+        custom_theme:
+          settings.theme === "custom"
+            ? customThemeState.colors
+            : settings.custom_theme,
+      };
+
+      const savedSettings = await invoke<AppSettings>("save_app_settings", {
+        settings: settingsToSave,
+      });
+      // Update settings with any generated tokens
+      setSettings(savedSettings);
+      settingsToSave = savedSettings;
+      setTheme(settings.theme === "custom" ? "dark" : settings.theme);
+
+      // Apply or clear custom variables only on Save
+      if (settings.theme === "custom") {
+        if (
+          customThemeState.colors &&
+          Object.keys(customThemeState.colors).length > 0
+        ) {
+          try {
+            const root = document.documentElement;
+            // Clear any previous custom vars first
+            THEME_VARIABLES.forEach(({ key }) =>
+              root.style.removeProperty(key as string),
+            );
+            Object.entries(customThemeState.colors).forEach(([k, v]) =>
+              root.style.setProperty(k, v, "important"),
+            );
+          } catch {}
+        }
+      } else {
+        try {
+          const root = document.documentElement;
+          THEME_VARIABLES.forEach(({ key }) =>
+            root.style.removeProperty(key as string),
+          );
+        } catch {}
+      }
+
+      // Handle API server start/stop based on settings
+      const wasApiEnabled = originalSettings.api_enabled;
+      const isApiEnabled = settingsToSave.api_enabled;
+
+      if (isApiEnabled && !wasApiEnabled) {
+        // Start API server
+        try {
+          const port = await invoke<number>("start_api_server", {
+            port: settingsToSave.api_port,
+          });
+          setApiServerPort(port);
+          showSuccessToast(`Local API started on port ${port}`);
+        } catch (error) {
+          console.error("Failed to start API server:", error);
+          showErrorToast("Failed to start API server", {
+            description:
+              error instanceof Error ? error.message : "Unknown error occurred",
+          });
+          // Revert the API enabled setting if start failed
+          settingsToSave.api_enabled = false;
+          const revertedSettings = await invoke<AppSettings>(
+            "save_app_settings",
+            { settings: settingsToSave },
+          );
+          setSettings(revertedSettings);
+          settingsToSave = revertedSettings;
+        }
+      } else if (!isApiEnabled && wasApiEnabled) {
+        // Stop API server
+        try {
+          await invoke("stop_api_server");
+          setApiServerPort(null);
+          showSuccessToast("Local API stopped");
+        } catch (error) {
+          console.error("Failed to stop API server:", error);
+          showErrorToast("Failed to stop API server", {
+            description:
+              error instanceof Error ? error.message : "Unknown error occurred",
+          });
+        }
+      }
+
+      setOriginalSettings(settingsToSave);
      onClose();
    } catch (error) {
      console.error("Failed to save settings:", error);
    } finally {
      setIsSaving(false);
    }
-  }, [onClose, setTheme, settings]);
+  }, [onClose, setTheme, settings, customThemeState, originalSettings]);

  const updateSetting = useCallback(
-    (key: keyof AppSettings, value: boolean | string) => {
-      setSettings((prev) => ({ ...prev, [key]: value }));
+    (
+      key: keyof AppSettings,
+      value: boolean | string | Record<string, string> | undefined,
+    ) => {
+      setSettings((prev) => ({ ...prev, [key]: value as unknown as never }));
    },
    [],
  );

+  const loadApiServerStatus = useCallback(async () => {
+    try {
+      const port = await invoke<number | null>("get_api_server_status");
+      setApiServerPort(port);
+    } catch (error) {
+      console.error("Failed to load API server status:", error);
+      setApiServerPort(null);
+    }
+  }, []);
+
+  const handleClose = useCallback(() => {
+    // Restore original theme when closing without saving
+    if (originalSettings.theme === "custom" && originalSettings.custom_theme) {
+      applyCustomTheme(originalSettings.custom_theme);
+    } else {
+      clearCustomTheme();
+    }
+
+    // Reset custom theme state to original
+    if (originalSettings.theme === "custom" && originalSettings.custom_theme) {
+      const matchingTheme = getThemeByColors(originalSettings.custom_theme);
+      setCustomThemeState({
+        selectedThemeId: matchingTheme?.id || null,
+        colors: originalSettings.custom_theme,
+      });
+    }
+
+    onClose();
+  }, [
+    originalSettings.theme,
+    originalSettings.custom_theme,
+    applyCustomTheme,
+    clearCustomTheme,
+    onClose,
+  ]);
+
+  // Only clear custom theme when switching away from custom, don't apply live changes
+  useEffect(() => {
+    if (settings.theme !== "custom") {
+      clearCustomTheme();
+    }
+  }, [settings.theme, clearCustomTheme]);
+
  useEffect(() => {
    if (isOpen) {
      loadSettings().catch(console.error);
      checkDefaultBrowserStatus().catch(console.error);
+      loadApiServerStatus().catch(console.error);

      // Check if we're on macOS
      const userAgent = navigator.userAgent;
@@ -265,86 +467,18 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
        checkDefaultBrowserStatus().catch(console.error);
      }, 500); // Check every 500ms

-      // Listen for version update progress events
-      let unlistenFn: (() => void) | null = null;
-      const setupVersionUpdateListener = async () => {
-        try {
-          unlistenFn = await listen<VersionUpdateProgress>(
-            "version-update-progress",
-            (event) => {
-              const progress = event.payload;
-
-              if (progress.status === "updating") {
-                // Show unified progress toast
-                const currentBrowserName = progress.current_browser
-                  ? getBrowserDisplayName(progress.current_browser)
-                  : undefined;
-
-                showUnifiedVersionUpdateToast(
-                  "Checking for browser updates...",
-                  {
-                    description: currentBrowserName
-                      ? `Fetching ${currentBrowserName} release information...`
-                      : "Initializing version check...",
-                    progress: {
-                      current: progress.completed_browsers,
-                      total: progress.total_browsers,
-                      found: progress.new_versions_found,
-                      current_browser: currentBrowserName,
-                    },
-                  },
-                );
-              } else if (progress.status === "completed") {
-                dismissToast("unified-version-update");
-
-                if (progress.new_versions_found > 0) {
-                  showSuccessToast("Browser versions updated successfully", {
-                    duration: 5000,
-                    description:
-                      "Auto-downloads will start shortly for available updates.",
-                  });
-                } else {
-                  showSuccessToast("No new browser versions found", {
-                    duration: 3000,
-                    description: "All browser versions are up to date",
-                  });
-                }
-              } else if (progress.status === "error") {
-                dismissToast("unified-version-update");
-
-                showErrorToast("Failed to update browser versions", {
-                  duration: 6000,
-                  description: "Check your internet connection and try again",
-                });
-              }
-            },
-          );
-        } catch (error) {
-          console.error(
-            "Failed to setup version update progress listener:",
-            error,
-          );
-        }
-      };
-
-      setupVersionUpdateListener();
-
-      // Cleanup interval and listener on component unmount or dialog close
+      // Cleanup interval on component unmount or dialog close
      return () => {
        clearInterval(intervalId);
-        if (unlistenFn) {
-          try {
-            unlistenFn();
-          } catch (error) {
-            console.error(
-              "Failed to cleanup version update progress listener:",
-              error,
-            );
-          }
-        }
      };
    }
-  }, [isOpen, loadPermissions, checkDefaultBrowserStatus, loadSettings]);
+  }, [
+    isOpen,
+    loadPermissions,
+    checkDefaultBrowserStatus,
+    loadSettings,
+    loadApiServerStatus,
+  ]);

  // Update permissions when the permission states change
  useEffect(() => {
@@ -373,10 +507,18 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
  ]);

  // Check if settings have changed (excluding default browser setting)
-  const hasChanges = settings.theme !== originalSettings.theme;
+  const hasChanges =
+    settings.theme !== originalSettings.theme ||
+    settings.api_enabled !== originalSettings.api_enabled ||
+    (settings.theme === "custom" &&
+      JSON.stringify(customThemeState.colors) !==
+        JSON.stringify(originalSettings.custom_theme ?? {})) ||
+    (settings.theme !== "custom" &&
+      JSON.stringify(settings.custom_theme ?? {}) !==
+        JSON.stringify(originalSettings.custom_theme ?? {}));

  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
+    <Dialog open={isOpen} onOpenChange={handleClose}>
      <DialogContent className="max-w-md max-h-[80vh] my-8 flex flex-col">
        <DialogHeader className="flex-shrink-0">
          <DialogTitle>Settings</DialogTitle>
@@ -395,6 +537,15 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
                value={settings.theme}
                onValueChange={(value) => {
                  updateSetting("theme", value);
+                  if (value === "custom") {
+                    const tokyoNightTheme = getThemeById("tokyo-night");
+                    if (tokyoNightTheme) {
+                      setCustomThemeState({
+                        selectedThemeId: "tokyo-night",
+                        colors: tokyoNightTheme.colors,
+                      });
+                    }
+                  }
                }}
              >
                <SelectTrigger id="theme-select">
@@ -404,13 +555,126 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
                  <SelectItem value="light">Light</SelectItem>
                  <SelectItem value="dark">Dark</SelectItem>
                  <SelectItem value="system">System</SelectItem>
+                  <SelectItem value="custom">Custom</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <p className="text-xs text-muted-foreground">
-              Choose your preferred theme or follow your system settings.
+              Choose your preferred theme or follow your system settings. Custom
+              theme changes are applied only when you save.
            </p>
+
+            {settings.theme === "custom" && (
+              <div className="space-y-3">
+                <div className="space-y-2">
+                  <Label
+                    htmlFor="theme-preset-select"
+                    className="text-sm font-medium"
+                  >
+                    Theme Preset
+                  </Label>
+                  <Select
+                    value={customThemeState.selectedThemeId || "custom"}
+                    onValueChange={(value) => {
+                      if (value === "custom") {
+                        setCustomThemeState((prev) => ({
+                          ...prev,
+                          selectedThemeId: null,
+                        }));
+                      } else {
+                        const theme = getThemeById(value);
+                        if (theme) {
+                          setCustomThemeState({
+                            selectedThemeId: value,
+                            colors: theme.colors,
+                          });
+                        }
+                      }
+                    }}
+                  >
+                    <SelectTrigger id="theme-preset-select">
+                      <SelectValue placeholder="Select a theme preset" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {THEMES.map((theme) => (
+                        <SelectItem key={theme.id} value={theme.id}>
+                          {theme.name}
+                        </SelectItem>
+                      ))}
+                      <SelectItem value="custom">Your Own</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="text-sm font-medium">Custom Colors</div>
+                <div className="grid grid-cols-4 gap-3">
+                  {THEME_VARIABLES.map(({ key, label }) => {
+                    const colorValue =
+                      customThemeState.colors[key] || "#000000";
+                    return (
+                      <div
+                        key={key}
+                        className="flex flex-col gap-1 items-center"
+                      >
+                        <Popover>
+                          <PopoverTrigger asChild>
+                            <button
+                              type="button"
+                              aria-label={label}
+                              className="w-8 h-8 rounded-md border shadow-sm cursor-pointer"
+                              style={{ backgroundColor: colorValue }}
+                            />
+                          </PopoverTrigger>
+                          <PopoverContent
+                            className="w-[320px] p-3"
+                            sideOffset={6}
+                          >
+                            <ColorPicker
+                              className="p-3 rounded-md border shadow-sm bg-background"
+                              value={colorValue}
+                              onColorChange={([r, g, b, a]) => {
+                                const next = Color({ r, g, b }).alpha(a);
+                                const nextStr = next.hexa();
+                                const newColors = {
+                                  ...customThemeState.colors,
+                                  [key]: nextStr,
+                                };
+
+                                // Check if colors match any preset theme
+                                const matchingTheme =
+                                  getThemeByColors(newColors);
+
+                                setCustomThemeState({
+                                  selectedThemeId: matchingTheme?.id || null,
+                                  colors: newColors,
+                                });
+                              }}
+                            >
+                              <ColorPickerSelection className="h-36 rounded" />
+                              <div className="flex gap-3 items-center mt-3">
+                                <ColorPickerEyeDropper />
+                                <div className="grid gap-1 w-full">
+                                  <ColorPickerHue />
+                                  <ColorPickerAlpha />
+                                </div>
+                              </div>
+                              <div className="flex gap-2 items-center mt-3">
+                                <ColorPickerOutput />
+                                <ColorPickerFormat />
+                              </div>
+                            </ColorPicker>
+                          </PopoverContent>
+                        </Popover>
+                        <div className="text-[10px] text-muted-foreground text-center leading-tight">
+                          {label}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
          </div>

          {/* Default Browser Section */}
@@ -505,6 +769,269 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
            </div>
          )}

+          {/* Local API Section */}
+          <div className="space-y-4">
+            <Label className="text-base font-medium">Local API</Label>
+
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="api-enabled"
+                checked={settings.api_enabled}
+                onCheckedChange={async (checked: boolean) => {
+                  updateSetting("api_enabled", checked);
+                  try {
+                    if (checked) {
+                      // Ask backend to enable API and return settings with token
+                      const next = await invoke<AppSettings>(
+                        "save_app_settings",
+                        {
+                          settings: { ...settings, api_enabled: true },
+                        },
+                      );
+                      setSettings(next);
+                    } else {
+                      const next = await invoke<AppSettings>(
+                        "save_app_settings",
+                        {
+                          settings: {
+                            ...settings,
+                            api_enabled: false,
+                            api_token: null,
+                          },
+                        },
+                      );
+                      setSettings(next);
+                    }
+                  } catch (e) {
+                    console.error("Failed to toggle API:", e);
+                  }
+                }}
+              />
+              <div className="grid gap-1.5 leading-none">
+                <Label
+                  htmlFor="api-enabled"
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  (ALPHA) Enable Local API Server
+                </Label>
+                <p className="text-xs text-muted-foreground">
+                  Allow managing the application data externally via REST API.
+                  Server will start on port 10108 or a random port if
+                  unavailable.
+                  {apiServerPort && (
+                    <span className="ml-1 font-medium text-green-600">
+                      (Currently running on port {apiServerPort})
+                    </span>
+                  )}
+                </p>
+              </div>
+            </div>
+
+            {settings.api_enabled && settings.api_token && (
+              <div className="space-y-2">
+                <Label className="text-sm font-medium">
+                  API Authentication Token
+                </Label>
+                <div className="flex items-center space-x-2">
+                  <input
+                    type="text"
+                    value={settings.api_token}
+                    readOnly
+                    className="flex-1 px-3 py-2 font-mono text-sm rounded-md border bg-muted"
+                  />
+                  <RippleButton
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      navigator.clipboard.writeText(settings.api_token || "");
+                      showSuccessToast("API token copied to clipboard");
+                    }}
+                  >
+                    Copy
+                  </RippleButton>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Include this token in the Authorization header as "Bearer{" "}
+                  {settings.api_token}" for all API requests.
+                </p>
+                {/* Temporary in-app API docs */}
+                <div className="p-3 mt-3 space-y-2 text-xs leading-relaxed rounded-md border bg-muted/40">
+                  <div className="font-medium">
+                    Temporary in-app API docs (alpha)
+                  </div>
+                  <div>
+                    <div>
+                      Base URL:{" "}
+                      <code className="font-mono">{`http://127.0.0.1:${apiServerPort ?? settings.api_port ?? 10108}/v1`}</code>
+                    </div>
+                    <div>
+                      Auth:{" "}
+                      <code className="font-mono">
+                        Authorization: Bearer {settings.api_token}
+                      </code>
+                    </div>
+                  </div>
+                  <div className="space-y-1">
+                    <div className="font-medium">Profiles</div>
+                    <ul className="list-disc ml-5 space-y-0.5">
+                      <li>
+                        <code className="font-mono">GET /profiles</code> — list
+                        profiles
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          GET /profiles/{"{"}id{"}"}
+                        </code>{" "}
+                        — get one
+                      </li>
+                      <li>
+                        <code className="font-mono">POST /profiles</code> —
+                        create
+                        <span className="ml-1 text-muted-foreground">
+                          (required: name, browser, version; optional:
+                          release_type, proxy_id, camoufox_config, group_id,
+                          tags)
+                        </span>
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          PUT /profiles/{"{"}id{"}"}
+                        </code>{" "}
+                        — update
+                        <span className="ml-1 text-muted-foreground">
+                          (any of: name, version, proxy_id, camoufox_config,
+                          group_id, tags)
+                        </span>
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          DELETE /profiles/{"{"}id{"}"}
+                        </code>{" "}
+                        — delete
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          POST /profiles/{"{"}id{"}"}/run?headless=true|false
+                        </code>{" "}
+                        — launch with remote debugging
+                      </li>
+                    </ul>
+                  </div>
+                  <div className="space-y-1">
+                    <div className="font-medium">Groups</div>
+                    <ul className="list-disc ml-5 space-y-0.5">
+                      <li>
+                        <code className="font-mono">GET /groups</code> — list
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          GET /groups/{"{"}id{"}"}
+                        </code>{" "}
+                        — get one
+                      </li>
+                      <li>
+                        <code className="font-mono">POST /groups</code> — create
+                        <span className="ml-1 text-muted-foreground">
+                          (required: name)
+                        </span>
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          PUT /groups/{"{"}id{"}"}
+                        </code>{" "}
+                        — rename
+                        <span className="ml-1 text-muted-foreground">
+                          (required: name)
+                        </span>
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          DELETE /groups/{"{"}id{"}"}
+                        </code>{" "}
+                        — delete
+                      </li>
+                    </ul>
+                  </div>
+                  <div className="space-y-1">
+                    <div className="font-medium">Tags</div>
+                    <ul className="list-disc ml-5 space-y-0.5">
+                      <li>
+                        <code className="font-mono">GET /tags</code> — list
+                      </li>
+                    </ul>
+                  </div>
+                  <div className="space-y-1">
+                    <div className="font-medium">Proxies</div>
+                    <ul className="list-disc ml-5 space-y-0.5">
+                      <li>
+                        <code className="font-mono">GET /proxies</code> — list
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          GET /proxies/{"{"}id{"}"}
+                        </code>{" "}
+                        — get one
+                      </li>
+                      <li>
+                        <code className="font-mono">POST /proxies</code> —
+                        create
+                        <span className="ml-1 text-muted-foreground">
+                          (required: name, proxy_settings object)
+                        </span>
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          PUT /proxies/{"{"}id{"}"}
+                        </code>{" "}
+                        — update
+                        <span className="ml-1 text-muted-foreground">
+                          (optional: name, proxy_settings)
+                        </span>
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          DELETE /proxies/{"{"}id{"}"}
+                        </code>{" "}
+                        — delete
+                      </li>
+                    </ul>
+                  </div>
+                  <div className="space-y-1">
+                    <div className="font-medium">Browsers</div>
+                    <ul className="list-disc ml-5 space-y-0.5">
+                      <li>
+                        <code className="font-mono">
+                          POST /browsers/download
+                        </code>{" "}
+                        — download
+                        <span className="ml-1 text-muted-foreground">
+                          (required: browser, version)
+                        </span>
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          GET /browsers/{"{"}browser{"}"}/versions
+                        </code>{" "}
+                        — list versions
+                      </li>
+                      <li>
+                        <code className="font-mono">
+                          GET /browsers/{"{"}browser{"}"}/versions/{"{"}version
+                          {"}"}/downloaded
+                        </code>{" "}
+                        — is downloaded
+                      </li>
+                    </ul>
+                  </div>
+                  <div className="text-muted-foreground">
+                    These docs are temporary and will be replaced with full
+                    documentation later.
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
          {/* Advanced Section */}
          <div className="space-y-4">
            <Label className="text-base font-medium">Advanced</Label>
@@ -529,9 +1056,9 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
        </div>

        <DialogFooter className="flex-shrink-0">
-          <Button variant="outline" onClick={onClose}>
+          <RippleButton variant="outline" onClick={handleClose}>
            Cancel
-          </Button>
+          </RippleButton>
          <LoadingButton
            isLoading={isSaving}
            onClick={() => {
@@ -83,7 +83,7 @@ export function SharedCamoufoxConfigForm({
  forceAdvanced = false,
 }: SharedCamoufoxConfigFormProps) {
  const [activeTab, setActiveTab] = useState(
-    forceAdvanced ? "advanced" : "normal",
+    forceAdvanced ? "manual" : "automatic",
  );
  const [fingerprintConfig, setFingerprintConfig] =
    useState<CamoufoxFingerprintConfig>({});
@@ -285,7 +285,7 @@ export function SharedCamoufoxConfigForm({
              onChange={(e) =>
                updateFingerprintConfig(
                  "navigator.hardwareConcurrency",
-                  e.target.value ? parseInt(e.target.value) : undefined,
+                  e.target.value ? parseInt(e.target.value, 10) : undefined,
                )
              }
              placeholder="e.g., 8"
@@ -300,7 +300,7 @@ export function SharedCamoufoxConfigForm({
              onChange={(e) =>
                updateFingerprintConfig(
                  "navigator.maxTouchPoints",
-                  e.target.value ? parseInt(e.target.value) : undefined,
+                  e.target.value ? parseInt(e.target.value, 10) : undefined,
                )
              }
              placeholder="e.g., 0"
@@ -357,7 +357,7 @@ export function SharedCamoufoxConfigForm({
              onChange={(e) =>
                updateFingerprintConfig(
                  "screen.width",
-                  e.target.value ? parseInt(e.target.value) : undefined,
+                  e.target.value ? parseInt(e.target.value, 10) : undefined,
                )
              }
              placeholder="e.g., 1920"
@@ -372,7 +372,7 @@ export function SharedCamoufoxConfigForm({
              onChange={(e) =>
                updateFingerprintConfig(
                  "screen.height",
-                  e.target.value ? parseInt(e.target.value) : undefined,
+                  e.target.value ? parseInt(e.target.value, 10) : undefined,
                )
              }
              placeholder="e.g., 1080"
@@ -387,7 +387,7 @@ export function SharedCamoufoxConfigForm({
              onChange={(e) =>
                updateFingerprintConfig(
                  "screen.availWidth",
-                  e.target.value ? parseInt(e.target.value) : undefined,
+                  e.target.value ? parseInt(e.target.value, 10) : undefined,
                )
              }
              placeholder="e.g., 1920"
@@ -402,7 +402,7 @@ export function SharedCamoufoxConfigForm({
              onChange={(e) =>
                updateFingerprintConfig(
                  "screen.availHeight",
-                  e.target.value ? parseInt(e.target.value) : undefined,
+                  e.target.value ? parseInt(e.target.value, 10) : undefined,
                )
              }
              placeholder="e.g., 1055"
@@ -417,7 +417,7 @@ export function SharedCamoufoxConfigForm({
              onChange={(e) =>
                updateFingerprintConfig(
                  "screen.colorDepth",
-                  e.target.value ? parseInt(e.target.value) : undefined,
+                  e.target.value ? parseInt(e.target.value, 10) : undefined,
                )
              }
              placeholder="e.g., 30"
@@ -432,7 +432,7 @@ export function SharedCamoufoxConfigForm({
              onChange={(e) =>
                updateFingerprintConfig(
                  "screen.pixelDepth",
-                  e.target.value ? parseInt(e.target.value) : undefined,
+                  e.target.value ? parseInt(e.target.value, 10) : undefined,
                )
              }
              placeholder="e.g., 30"
@@ -454,7 +454,7 @@ export function SharedCamoufoxConfigForm({
              onChange={(e) =>
                updateFingerprintConfig(
                  "window.outerWidth",
-                  e.target.value ? parseInt(e.target.value) : undefined,
+                  e.target.value ? parseInt(e.target.value, 10) : undefined,
                )
              }
              placeholder="e.g., 1512"
@@ -469,7 +469,7 @@ export function SharedCamoufoxConfigForm({
              onChange={(e) =>
                updateFingerprintConfig(
                  "window.outerHeight",
-                  e.target.value ? parseInt(e.target.value) : undefined,
+                  e.target.value ? parseInt(e.target.value, 10) : undefined,
                )
              }
              placeholder="e.g., 886"
@@ -484,7 +484,7 @@ export function SharedCamoufoxConfigForm({
              onChange={(e) =>
                updateFingerprintConfig(
                  "window.innerWidth",
-                  e.target.value ? parseInt(e.target.value) : undefined,
+                  e.target.value ? parseInt(e.target.value, 10) : undefined,
                )
              }
              placeholder="e.g., 1512"
@@ -499,7 +499,7 @@ export function SharedCamoufoxConfigForm({
              onChange={(e) =>
                updateFingerprintConfig(
                  "window.innerHeight",
-                  e.target.value ? parseInt(e.target.value) : undefined,
+                  e.target.value ? parseInt(e.target.value, 10) : undefined,
                )
              }
              placeholder="e.g., 886"
@@ -514,7 +514,7 @@ export function SharedCamoufoxConfigForm({
              onChange={(e) =>
                updateFingerprintConfig(
                  "window.screenX",
-                  e.target.value ? parseInt(e.target.value) : undefined,
+                  e.target.value ? parseInt(e.target.value, 10) : undefined,
                )
              }
              placeholder="e.g., 0"
@@ -529,7 +529,7 @@ export function SharedCamoufoxConfigForm({
              onChange={(e) =>
                updateFingerprintConfig(
                  "window.screenY",
-                  e.target.value ? parseInt(e.target.value) : undefined,
+                  e.target.value ? parseInt(e.target.value, 10) : undefined,
                )
              }
              placeholder="e.g., 0"
@@ -538,6 +538,106 @@ export function SharedCamoufoxConfigForm({
        </div>
      </div>

+      {/* Geolocation */}
+      <div className="space-y-3">
+        <Label>Geolocation</Label>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="latitude">Latitude</Label>
+            <Input
+              id="latitude"
+              type="number"
+              step="any"
+              value={fingerprintConfig["geolocation:latitude"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "geolocation:latitude",
+                  e.target.value ? parseFloat(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 41.0019"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="longitude">Longitude</Label>
+            <Input
+              id="longitude"
+              type="number"
+              step="any"
+              value={fingerprintConfig["geolocation:longitude"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "geolocation:longitude",
+                  e.target.value ? parseFloat(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 28.9645"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="timezone">Timezone</Label>
+            <Input
+              id="timezone"
+              type="text"
+              value={fingerprintConfig.timezone || ""}
+              onChange={(e) =>
+                updateFingerprintConfig("timezone", e.target.value || undefined)
+              }
+              placeholder="e.g., America/New_York"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Locale */}
+      <div className="space-y-3">
+        <Label>Locale</Label>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="locale-language">Language</Label>
+            <Input
+              id="locale-language"
+              value={fingerprintConfig["locale:language"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "locale:language",
+                  e.target.value || undefined,
+                )
+              }
+              placeholder="e.g., tr"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="locale-region">Region</Label>
+            <Input
+              id="locale-region"
+              value={fingerprintConfig["locale:region"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "locale:region",
+                  e.target.value || undefined,
+                )
+              }
+              placeholder="e.g., TR"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="locale-script">Script</Label>
+            <Input
+              id="locale-script"
+              value={fingerprintConfig["locale:script"] || ""}
+              onChange={(e) =>
+                updateFingerprintConfig(
+                  "locale:script",
+                  e.target.value || undefined,
+                )
+              }
+              placeholder="e.g., Latn"
+            />
+          </div>
+        </div>
+      </div>
+
      {/* WebGL Properties */}
      <div className="space-y-3">
        <Label>WebGL Properties</Label>
@@ -637,106 +737,6 @@ export function SharedCamoufoxConfigForm({
        />
      </div>

-      {/* Geolocation */}
-      <div className="space-y-3">
-        <Label>Geolocation</Label>
-        <div className="grid grid-cols-3 gap-4">
-          <div className="space-y-2">
-            <Label htmlFor="latitude">Latitude</Label>
-            <Input
-              id="latitude"
-              type="number"
-              step="any"
-              value={fingerprintConfig["geolocation:latitude"] || ""}
-              onChange={(e) =>
-                updateFingerprintConfig(
-                  "geolocation:latitude",
-                  e.target.value ? parseFloat(e.target.value) : undefined,
-                )
-              }
-              placeholder="e.g., 41.0019"
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="longitude">Longitude</Label>
-            <Input
-              id="longitude"
-              type="number"
-              step="any"
-              value={fingerprintConfig["geolocation:longitude"] || ""}
-              onChange={(e) =>
-                updateFingerprintConfig(
-                  "geolocation:longitude",
-                  e.target.value ? parseFloat(e.target.value) : undefined,
-                )
-              }
-              placeholder="e.g., 28.9645"
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="timezone">Timezone</Label>
-            <Input
-              id="timezone"
-              type="text"
-              value={fingerprintConfig.timezone || ""}
-              onChange={(e) =>
-                updateFingerprintConfig("timezone", e.target.value || undefined)
-              }
-              placeholder="e.g., America/New_York"
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Locale */}
-      <div className="space-y-3">
-        <Label>Locale</Label>
-        <div className="grid grid-cols-3 gap-4">
-          <div className="space-y-2">
-            <Label htmlFor="locale-language">Language</Label>
-            <Input
-              id="locale-language"
-              value={fingerprintConfig["locale:language"] || ""}
-              onChange={(e) =>
-                updateFingerprintConfig(
-                  "locale:language",
-                  e.target.value || undefined,
-                )
-              }
-              placeholder="e.g., tr"
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="locale-region">Region</Label>
-            <Input
-              id="locale-region"
-              value={fingerprintConfig["locale:region"] || ""}
-              onChange={(e) =>
-                updateFingerprintConfig(
-                  "locale:region",
-                  e.target.value || undefined,
-                )
-              }
-              placeholder="e.g., TR"
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="locale-script">Script</Label>
-            <Input
-              id="locale-script"
-              value={fingerprintConfig["locale:script"] || ""}
-              onChange={(e) =>
-                updateFingerprintConfig(
-                  "locale:script",
-                  e.target.value || undefined,
-                )
-              }
-              placeholder="e.g., Latn"
-            />
-          </div>
-        </div>
-      </div>
-
      {/* Fonts */}
      <div className="space-y-3">
        <Label>Fonts</Label>
@@ -808,6 +808,23 @@ export function SharedCamoufoxConfigForm({
          </div>
        </div>
      </div>
+
+      {/* Browser Behavior */}
+      {/* <div className="space-y-3">
+        <Label>Browser Behavior</Label>
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="allow-addon-new-tab"
+            checked={fingerprintConfig.allowAddonNewTab}
+            onCheckedChange={(checked) =>
+              updateFingerprintConfig("allowAddonNewTab", checked)
+            }
+          />
+          <Label htmlFor="allow-addon-new-tab">
+            Allow browser addons to open new tabs automatically
+          </Label>
+        </div>
+      </div> */}
    </div>
  );

@@ -817,14 +834,13 @@ export function SharedCamoufoxConfigForm({
        // Advanced mode only (for editing)
        renderAdvancedForm()
      ) : (
-        // Normal/Advanced tabs for creation
        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsList className="grid grid-cols-2 w-full">
-            <TabsTrigger value="normal">Normal</TabsTrigger>
-            <TabsTrigger value="advanced">Advanced</TabsTrigger>
+            <TabsTrigger value="automatic">Automatic</TabsTrigger>
+            <TabsTrigger value="manual">Manual</TabsTrigger>
          </TabsList>

-          <TabsContent value="normal" className="space-y-6">
+          <TabsContent value="automatic" className="space-y-6">
            {/* Automatic Location Configuration */}
            <div className="mt-4 space-y-3">
              <div className="flex items-center space-x-2">
@@ -853,7 +869,9 @@ export function SharedCamoufoxConfigForm({
                    onChange={(e) =>
                      onConfigChange(
                        "screen_max_width",
-                        e.target.value ? parseInt(e.target.value) : undefined,
+                        e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : undefined,
                      )
                    }
                    placeholder="e.g., 1920"
@@ -868,17 +886,53 @@ export function SharedCamoufoxConfigForm({
                    onChange={(e) =>
                      onConfigChange(
                        "screen_max_height",
-                        e.target.value ? parseInt(e.target.value) : undefined,
+                        e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : undefined,
                      )
                    }
                    placeholder="e.g., 1080"
                  />
                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="screen-min-width">Min Width</Label>
+                  <Input
+                    id="screen-min-width"
+                    type="number"
+                    value={config.screen_min_width || ""}
+                    onChange={(e) =>
+                      onConfigChange(
+                        "screen_min_width",
+                        e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : undefined,
+                      )
+                    }
+                    placeholder="e.g., 800"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="screen-min-height">Min Height</Label>
+                  <Input
+                    id="screen-min-height"
+                    type="number"
+                    value={config.screen_min_height || ""}
+                    onChange={(e) =>
+                      onConfigChange(
+                        "screen_min_height",
+                        e.target.value
+                          ? parseInt(e.target.value, 10)
+                          : undefined,
+                      )
+                    }
+                    placeholder="e.g., 600"
+                  />
+                </div>
              </div>
            </div>
          </TabsContent>

-          <TabsContent value="advanced" className="space-y-6">
+          <TabsContent value="manual" className="space-y-6">
            {renderAdvancedForm()}
          </TabsContent>
        </Tabs>
@@ -1,56 +1,23 @@
 "use client";

-import { invoke } from "@tauri-apps/api/core";
 import { ThemeProvider } from "next-themes";
 import { useEffect, useState } from "react";
+import { applyThemeColors, clearThemeColors } from "@/lib/themes";

 interface AppSettings {
-  show_settings_on_startup: boolean;
-  theme: string;
-}
-
-interface SystemTheme {
+  set_as_default_browser: boolean;
  theme: string;
+  custom_theme?: Record<string, string>;
 }

 interface CustomThemeProviderProps {
  children: React.ReactNode;
 }

-// Helper function to detect system dark mode preference
-function getSystemTheme(): string {
-  if (typeof window !== "undefined") {
-    const isDarkMode = window.matchMedia(
-      "(prefers-color-scheme: dark)",
-    ).matches;
-    return isDarkMode ? "dark" : "light";
-  }
-  return "light";
-}
-
-// Function to get native system theme (fallback to CSS media query)
-async function getNativeSystemTheme(): Promise<string> {
-  try {
-    const systemTheme = await invoke<SystemTheme>("get_system_theme");
-    if (systemTheme.theme === "dark" || systemTheme.theme === "light") {
-      return systemTheme.theme;
-    }
-    // Fallback to CSS media query if native detection returns "unknown"
-    return getSystemTheme();
-  } catch (error) {
-    console.warn(
-      "Failed to get native system theme, falling back to CSS media query:",
-      error,
-    );
-    // Fallback to CSS media query
-    return getSystemTheme();
-  }
-}
-
 export function CustomThemeProvider({ children }: CustomThemeProviderProps) {
  const [isLoading, setIsLoading] = useState(true);
  const [defaultTheme, setDefaultTheme] = useState<string>("system");
-  const [mounted, setMounted] = useState(false);
+  const [_mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
@@ -59,30 +26,38 @@ export function CustomThemeProvider({ children }: CustomThemeProviderProps) {
  useEffect(() => {
    const loadTheme = async () => {
      try {
+        // Lazy import to avoid pulling Tauri API on SSR
+        const { invoke } = await import("@tauri-apps/api/core");
        const settings = await invoke<AppSettings>("get_app_settings");
-        setDefaultTheme(settings.theme);
-      } catch (error) {
-        console.error("Failed to load theme settings:", error);
-        // For first-time users, detect system preference and apply it
-        const systemTheme = await getNativeSystemTheme();
-        console.log(
-          "First-time user detected, applying system theme:",
-          systemTheme,
-        );
+        const themeValue = settings?.theme ?? "system";

-        // Save the detected theme as the default
-        try {
-          await invoke("save_app_settings", {
-            settings: {
-              show_settings_on_startup: true,
-              theme: "system",
-              auto_updates_enabled: true,
-            },
-          });
-        } catch (saveError) {
-          console.error("Failed to save initial theme settings:", saveError);
+        if (
+          themeValue === "light" ||
+          themeValue === "dark" ||
+          themeValue === "system"
+        ) {
+          setDefaultTheme(themeValue);
+        } else if (themeValue === "custom") {
+          setDefaultTheme("light");
+          if (
+            settings.custom_theme &&
+            Object.keys(settings.custom_theme).length > 0
+          ) {
+            try {
+              applyThemeColors(settings.custom_theme);
+            } catch (error) {
+              console.warn("Failed to apply custom theme variables:", error);
+            }
+          }
+        } else {
+          setDefaultTheme("system");
        }
-
+      } catch (error) {
+        // Failed to load settings; fall back to system (handled by next-themes)
+        console.warn(
+          "Failed to load theme settings; defaulting to system:",
+          error,
+        );
        setDefaultTheme("system");
      } finally {
        setIsLoading(false);
@@ -92,73 +67,32 @@ export function CustomThemeProvider({ children }: CustomThemeProviderProps) {
    void loadTheme();
  }, []);

-  // Monitor system theme changes when using "system" theme
+  // Additional effect to ensure custom theme is applied after mount
  useEffect(() => {
-    if (!mounted || defaultTheme !== "system") {
-      return;
-    }
+    if (!isLoading && _mounted) {
+      const reapplyCustomTheme = async () => {
+        try {
+          const { invoke } = await import("@tauri-apps/api/core");
+          const settings = await invoke<AppSettings>("get_app_settings");

-    const checkSystemTheme = async () => {
-      try {
-        const currentSystemTheme = await getNativeSystemTheme();
-        // Force re-evaluation by toggling the theme
-        const html = document.documentElement;
-
-        // Apply the system theme class
-        if (currentSystemTheme === "dark") {
-          if (!html.classList.contains("dark")) {
-            html.classList.add("dark");
-            html.classList.remove("light");
-          }
-        } else {
-          if (
-            !html.classList.contains("light") ||
-            html.classList.contains("dark")
-          ) {
-            html.classList.add("light");
-            html.classList.remove("dark");
+          if (settings?.theme === "custom" && settings.custom_theme) {
+            applyThemeColors(settings.custom_theme);
+          } else {
+            clearThemeColors();
          }
+        } catch (error) {
+          console.warn("Failed to reapply custom theme:", error);
        }
-      } catch (error) {
-        console.warn("Failed to check system theme:", error);
-      }
-    };
+      };

-    // Check system theme every 2 seconds when using system theme
-    const intervalId = setInterval(() => void checkSystemTheme(), 2000);
-
-    // Initial check
-    void checkSystemTheme();
-
-    return () => {
-      clearInterval(intervalId);
-    };
-  }, [mounted, defaultTheme]);
+      // Apply after a short delay to ensure CSS has loaded
+      setTimeout(reapplyCustomTheme, 100);
+    }
+  }, [isLoading, _mounted]);

  if (isLoading) {
-    // Use a consistent loading screen that doesn't depend on system theme during SSR
-    // This prevents hydration mismatch by ensuring server and client render the same initially
-    let loadingBgColor = "bg-white";
-    let spinnerColor = "border-gray-900";
-
-    // Only apply system theme detection after component is mounted (client-side only)
-    if (mounted) {
-      // Use CSS media query for loading screen since async call would complicate this
-      const systemTheme = getSystemTheme();
-      loadingBgColor = systemTheme === "dark" ? "bg-gray-900" : "bg-white";
-      spinnerColor =
-        systemTheme === "dark" ? "border-white" : "border-gray-900";
-    }
-
-    return (
-      <div
-        className={`flex fixed inset-0 justify-center items-center ${loadingBgColor}`}
-      >
-        <div
-          className={`w-8 h-8 rounded-full border-2 animate-spin ${spinnerColor} border-t-transparent`}
-        />
-      </div>
-    );
+    // Keep UI simple during initial settings load to avoid flicker
+    return null;
  }

  return (
@@ -12,7 +12,7 @@ const badgeVariants = cva(
        default:
          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+          "border-transparent bg-secondary dark:bg-secondary/60 text-secondary-foreground [a&]:hover:bg-secondary/90",
        destructive:
          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
@@ -0,0 +1,517 @@
+"use client";
+
+import Color from "color";
+import { Slider } from "radix-ui";
+import {
+  type ComponentProps,
+  createContext,
+  type HTMLAttributes,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { LuPipette } from "react-icons/lu";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+interface ColorPickerContextValue {
+  hue: number;
+  saturation: number;
+  lightness: number;
+  alpha: number;
+  mode: string;
+  setHue: (hue: number) => void;
+  setSaturation: (saturation: number) => void;
+  setLightness: (lightness: number) => void;
+  setAlpha: (alpha: number) => void;
+  setMode: (mode: string) => void;
+}
+
+const ColorPickerContext = createContext<ColorPickerContextValue | undefined>(
+  undefined,
+);
+
+export const useColorPicker = () => {
+  const context = useContext(ColorPickerContext);
+
+  if (!context) {
+    throw new Error("useColorPicker must be used within a ColorPickerProvider");
+  }
+
+  return context;
+};
+
+export type ColorPickerProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onChange"
+> & {
+  value?: Parameters<typeof Color>[0];
+  defaultValue?: Parameters<typeof Color>[0];
+  onColorChange?: (value: [number, number, number, number]) => void;
+};
+
+export const ColorPicker = ({
+  value,
+  defaultValue = "#000000",
+  onColorChange,
+  className,
+  children,
+  ...props
+}: ColorPickerProps) => {
+  const selectedColor = Color(value ?? defaultValue);
+  const defaultColor = Color(defaultValue);
+
+  const initialHue = Number.isFinite(selectedColor.hue())
+    ? selectedColor.hue()
+    : Number.isFinite(defaultColor.hue())
+      ? defaultColor.hue()
+      : 0;
+  const initialSaturation = Number.isFinite(selectedColor.saturationl())
+    ? selectedColor.saturationl()
+    : Number.isFinite(defaultColor.saturationl())
+      ? defaultColor.saturationl()
+      : 100;
+  const initialLightness = Number.isFinite(selectedColor.lightness())
+    ? selectedColor.lightness()
+    : Number.isFinite(defaultColor.lightness())
+      ? defaultColor.lightness()
+      : 50;
+  const initialAlpha = Number.isFinite(selectedColor.alpha())
+    ? Math.round(selectedColor.alpha() * 100)
+    : Math.round(defaultColor.alpha() * 100);
+
+  const [hue, setHue] = useState(initialHue);
+  const [saturation, setSaturation] = useState(initialSaturation);
+  const [lightness, setLightness] = useState(initialLightness);
+  const [alpha, setAlpha] = useState(initialAlpha);
+  const [mode, setMode] = useState("hex");
+  const lastEmittedRef = useRef<string>(
+    `${Math.round(initialHue)}|${Math.round(initialSaturation)}|${Math.round(initialLightness)}|${Math.round(initialAlpha)}`,
+  );
+
+  // Update color when controlled value changes
+  useEffect(() => {
+    if (value !== undefined) {
+      const c = Color(value).hsl();
+      const nextHue = Number.isFinite(c.hue()) ? c.hue() : 0;
+      const nextSat = Number.isFinite(c.saturationl()) ? c.saturationl() : 0;
+      const nextLight = Number.isFinite(c.lightness()) ? c.lightness() : 0;
+      const nextAlpha = Math.round(
+        (Number.isFinite(c.alpha()) ? c.alpha() : 1) * 100,
+      );
+
+      // Update internal state unconditionally when value prop changes
+      setHue(nextHue);
+      setSaturation(nextSat);
+      setLightness(nextLight);
+      setAlpha(nextAlpha);
+    }
+  }, [value]); // Remove state values from dependency array to prevent infinite loop
+
+  // Notify parent of changes
+  useEffect(() => {
+    if (onColorChange) {
+      const key = `${Math.round(hue)}|${Math.round(saturation)}|${Math.round(lightness)}|${Math.round(alpha)}`;
+      if (key === lastEmittedRef.current) {
+        return;
+      }
+      lastEmittedRef.current = key;
+
+      const color = Color.hsl(hue, saturation, lightness).alpha(alpha / 100);
+      const rgba = color.rgb().array();
+      onColorChange([rgba[0], rgba[1], rgba[2], alpha / 100]);
+    }
+  }, [hue, saturation, lightness, alpha, onColorChange]);
+
+  return (
+    <ColorPickerContext.Provider
+      value={{
+        hue,
+        saturation,
+        lightness,
+        alpha,
+        mode,
+        setHue,
+        setSaturation,
+        setLightness,
+        setAlpha,
+        setMode,
+      }}
+    >
+      <div
+        className={cn("flex flex-col gap-4 size-full", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </ColorPickerContext.Provider>
+  );
+};
+
+export type ColorPickerSelectionProps = HTMLAttributes<HTMLDivElement>;
+
+export const ColorPickerSelection = memo(
+  ({ className, ...props }: ColorPickerSelectionProps) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [positionX, setPositionX] = useState(0);
+    const [positionY, setPositionY] = useState(0);
+    const { hue, saturation, lightness, setSaturation, setLightness } =
+      useColorPicker();
+
+    const backgroundGradient = useMemo(() => {
+      return `linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)),
+            linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)),
+            hsl(${hue}, 100%, 50%)`;
+    }, [hue]);
+
+    // Update position indicators when saturation/lightness change externally
+    useEffect(() => {
+      if (!isDragging) {
+        const x = saturation / 100;
+        const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);
+        const y = topLightness > 0 ? 1 - lightness / topLightness : 0;
+        setPositionX(x);
+        setPositionY(Math.max(0, Math.min(1, y)));
+      }
+    }, [saturation, lightness, isDragging]);
+
+    const handlePointerMove = useCallback(
+      (event: PointerEvent) => {
+        if (!(isDragging && containerRef.current)) {
+          return;
+        }
+        const rect = containerRef.current.getBoundingClientRect();
+        const x = Math.max(
+          0,
+          Math.min(1, (event.clientX - rect.left) / rect.width),
+        );
+        const y = Math.max(
+          0,
+          Math.min(1, (event.clientY - rect.top) / rect.height),
+        );
+        setPositionX(x);
+        setPositionY(y);
+        setSaturation(x * 100);
+        const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);
+        const lightness = topLightness * (1 - y);
+
+        setLightness(lightness);
+      },
+      [isDragging, setSaturation, setLightness],
+    );
+
+    useEffect(() => {
+      const handlePointerUp = () => setIsDragging(false);
+
+      if (isDragging) {
+        window.addEventListener("pointermove", handlePointerMove);
+        window.addEventListener("pointerup", handlePointerUp);
+      }
+
+      return () => {
+        window.removeEventListener("pointermove", handlePointerMove);
+        window.removeEventListener("pointerup", handlePointerUp);
+      };
+    }, [isDragging, handlePointerMove]);
+
+    return (
+      <div
+        className={cn("relative rounded cursor-pointer size-full", className)}
+        onPointerDown={(e) => {
+          e.preventDefault();
+          setIsDragging(true);
+          handlePointerMove(e.nativeEvent);
+        }}
+        ref={containerRef}
+        style={{
+          background: backgroundGradient,
+        }}
+        {...props}
+      >
+        <div
+          className="absolute w-4 h-4 rounded-full border-2 border-white -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+          style={{
+            left: `${positionX * 100}%`,
+            top: `${positionY * 100}%`,
+            boxShadow: "0 0 0 1px rgba(0,0,0,0.5)",
+          }}
+        />
+      </div>
+    );
+  },
+);
+
+ColorPickerSelection.displayName = "ColorPickerSelection";
+
+export type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;
+
+export const ColorPickerHue = ({
+  className,
+  ...props
+}: ColorPickerHueProps) => {
+  const { hue, setHue } = useColorPicker();
+
+  return (
+    <Slider.Root
+      className={cn("flex relative w-full h-4 touch-none", className)}
+      max={360}
+      onValueChange={([hue]) => setHue(hue)}
+      step={1}
+      value={[hue]}
+      {...props}
+    >
+      <Slider.Track className="relative my-0.5 h-3 w-full grow rounded-full bg-[linear-gradient(90deg,#FF0000,#FFFF00,#00FF00,#00FFFF,#0000FF,#FF00FF,#FF0000)]">
+        <Slider.Range className="absolute h-full" />
+      </Slider.Track>
+      <Slider.Thumb className="block w-4 h-4 rounded-full border shadow transition-colors border-primary/50 bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+    </Slider.Root>
+  );
+};
+
+export type ColorPickerAlphaProps = ComponentProps<typeof Slider.Root>;
+
+export const ColorPickerAlpha = ({
+  className,
+  ...props
+}: ColorPickerAlphaProps) => {
+  const { alpha, setAlpha } = useColorPicker();
+
+  return (
+    <Slider.Root
+      className={cn("flex relative w-full h-4 touch-none", className)}
+      max={100}
+      onValueChange={([alpha]) => setAlpha(alpha)}
+      step={1}
+      value={[alpha]}
+      {...props}
+    >
+      <Slider.Track
+        className="relative my-0.5 h-3 w-full grow rounded-full"
+        style={{
+          background:
+            'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==") left center',
+        }}
+      >
+        <div className="absolute inset-0 bg-gradient-to-r from-transparent rounded-full to-black/50" />
+        <Slider.Range className="absolute h-full bg-transparent rounded-full" />
+      </Slider.Track>
+      <Slider.Thumb className="block w-4 h-4 rounded-full border shadow transition-colors border-primary/50 bg-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+    </Slider.Root>
+  );
+};
+
+export type ColorPickerEyeDropperProps = ComponentProps<typeof Button>;
+
+export const ColorPickerEyeDropper = ({
+  className,
+  ...props
+}: ColorPickerEyeDropperProps) => {
+  const { setHue, setSaturation, setLightness, setAlpha } = useColorPicker();
+
+  const handleEyeDropper = async () => {
+    try {
+      // @ts-expect-error - EyeDropper API is experimental
+      const eyeDropper = new EyeDropper();
+      const result = await eyeDropper.open();
+      const color = Color(result.sRGBHex);
+      const [h, s, l] = color.hsl().array();
+
+      setHue(h);
+      setSaturation(s);
+      setLightness(l);
+      setAlpha(100);
+    } catch (error) {
+      console.error("EyeDropper failed:", error);
+    }
+  };
+
+  return (
+    <Button
+      className={cn("shrink-0 text-muted-foreground", className)}
+      onClick={handleEyeDropper}
+      size="icon"
+      variant="outline"
+      type="button"
+      {...props}
+    >
+      <LuPipette size={16} />
+    </Button>
+  );
+};
+
+export type ColorPickerOutputProps = ComponentProps<typeof SelectTrigger>;
+
+const formats = ["hex", "rgb", "css", "hsl"];
+
+export const ColorPickerOutput = ({
+  className,
+  ...props
+}: ColorPickerOutputProps) => {
+  const { mode, setMode } = useColorPicker();
+
+  return (
+    <Select onValueChange={setMode} value={mode}>
+      <SelectTrigger className="w-20 h-8 text-xs shrink-0" {...props}>
+        <SelectValue placeholder="Mode" />
+      </SelectTrigger>
+      <SelectContent>
+        {formats.map((format) => (
+          <SelectItem className="text-xs" key={format} value={format}>
+            {format.toUpperCase()}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
+
+type PercentageInputProps = ComponentProps<typeof Input>;
+
+const PercentageInput = ({ className, ...props }: PercentageInputProps) => {
+  return (
+    <div className="relative">
+      <Input
+        readOnly
+        type="text"
+        {...props}
+        className={cn(
+          "h-8 w-[3.25rem] rounded-l-none bg-secondary px-2 text-xs shadow-none",
+          className,
+        )}
+      />
+      <span className="absolute right-2 top-1/2 text-xs -translate-y-1/2 text-muted-foreground">
+        %
+      </span>
+    </div>
+  );
+};
+
+export type ColorPickerFormatProps = HTMLAttributes<HTMLDivElement>;
+
+export const ColorPickerFormat = ({
+  className,
+  ...props
+}: ColorPickerFormatProps) => {
+  const { hue, saturation, lightness, alpha, mode } = useColorPicker();
+  const color = Color.hsl(hue, saturation, lightness, alpha / 100);
+
+  if (mode === "hex") {
+    const hex = color.hex();
+
+    return (
+      <div
+        className={cn(
+          "flex relative items-center -space-x-px w-full rounded-md shadow-sm",
+          className,
+        )}
+        {...props}
+      >
+        <Input
+          className="px-2 h-8 text-xs rounded-r-none shadow-none bg-secondary"
+          readOnly
+          type="text"
+          value={hex}
+        />
+        <PercentageInput value={alpha} />
+      </div>
+    );
+  }
+
+  if (mode === "rgb") {
+    const rgb = color
+      .rgb()
+      .array()
+      .map((value) => Math.round(value));
+
+    return (
+      <div
+        className={cn(
+          "flex items-center -space-x-px rounded-md shadow-sm",
+          className,
+        )}
+        {...props}
+      >
+        {rgb.map((value, index) => (
+          <Input
+            className={cn(
+              "h-8 rounded-r-none bg-secondary px-2 text-xs shadow-none",
+              index && "rounded-l-none",
+              className,
+            )}
+            key={`rgb-${value.toString()}`}
+            readOnly
+            type="text"
+            value={value}
+          />
+        ))}
+        <PercentageInput value={alpha} />
+      </div>
+    );
+  }
+
+  if (mode === "css") {
+    const rgb = color
+      .rgb()
+      .array()
+      .map((value) => Math.round(value));
+
+    return (
+      <div className={cn("w-full rounded-md shadow-sm", className)} {...props}>
+        <Input
+          className="px-2 w-full h-8 text-xs shadow-none bg-secondary"
+          readOnly
+          type="text"
+          value={`rgba(${rgb.join(", ")}, ${alpha}%)`}
+          {...props}
+        />
+      </div>
+    );
+  }
+
+  if (mode === "hsl") {
+    const hsl = color
+      .hsl()
+      .array()
+      .map((value) => Math.round(value));
+
+    return (
+      <div
+        className={cn(
+          "flex items-center -space-x-px rounded-md shadow-sm",
+          className,
+        )}
+        {...props}
+      >
+        {hsl.map((value, index) => (
+          <Input
+            className={cn(
+              "h-8 rounded-r-none bg-secondary px-2 text-xs shadow-none",
+              index && "rounded-l-none",
+              className,
+            )}
+            key={`hsl-${value.toString()}`}
+            readOnly
+            type="text"
+            value={value}
+          />
+        ))}
+        <PercentageInput value={alpha} />
+      </div>
+    );
+  }
+
+  return null;
+};
@@ -39,7 +39,7 @@ function DialogOverlay({
    <DialogPrimitive.Overlay
      data-slot="dialog-overlay"
      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[9999] bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[9999] bg-background/50",
        className,
      )}
      {...props}
@@ -63,6 +63,12 @@ function DialogContent({
          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[10000] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
          className,
        )}
+        onInteractOutside={(event) => {
+          const target = event.target as HTMLElement | null;
+          if (target?.closest('[data-window-drag-area="true"]')) {
+            event.preventDefault();
+          }
+        }}
        {...props}
      >
        {children}
@@ -0,0 +1,146 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { type HTMLMotionProps, motion, type Transition } from "motion/react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "relative overflow-hidden cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+      },
+      size: {
+        default: "h-10 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-9 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-11 px-8 has-[>svg]:px-6",
+        icon: "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const rippleVariants = cva("absolute rounded-full size-5 pointer-events-none", {
+  variants: {
+    variant: {
+      default: "bg-primary-foreground",
+      destructive: "bg-destructive",
+      outline: "bg-input",
+      secondary: "bg-secondary",
+      ghost: "bg-accent",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+type Ripple = {
+  id: number;
+  x: number;
+  y: number;
+};
+
+type RippleButtonProps = HTMLMotionProps<"button"> & {
+  children: React.ReactNode;
+  rippleClassName?: string;
+  scale?: number;
+  transition?: Transition;
+} & VariantProps<typeof buttonVariants>;
+
+function RippleButton({
+  ref,
+  children,
+  onClick,
+  className,
+  rippleClassName,
+  variant,
+  size,
+  scale = 10,
+  transition = { duration: 0.6, ease: "easeOut" },
+  ...props
+}: RippleButtonProps) {
+  const [ripples, setRipples] = React.useState<Ripple[]>([]);
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  React.useImperativeHandle(ref, () => buttonRef.current as HTMLButtonElement);
+
+  const createRipple = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      const button = buttonRef.current;
+      if (!button) return;
+
+      const rect = button.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+
+      const newRipple: Ripple = {
+        id: Date.now(),
+        x,
+        y,
+      };
+
+      setRipples((prev) => [...prev, newRipple]);
+
+      setTimeout(() => {
+        setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));
+      }, 600);
+    },
+    [],
+  );
+
+  const handleClick = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      createRipple(event);
+      if (onClick) {
+        onClick(event);
+      }
+    },
+    [createRipple, onClick],
+  );
+
+  return (
+    <motion.button
+      ref={buttonRef}
+      data-slot="ripple-button"
+      onClick={handleClick}
+      whileTap={{ scale: 0.95 }}
+      whileHover={{ scale: 1.05 }}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    >
+      {children}
+      {ripples.map((ripple) => (
+        <motion.span
+          key={ripple.id}
+          initial={{ scale: 0, opacity: 0.5 }}
+          animate={{ scale, opacity: 0 }}
+          transition={transition}
+          className={cn(
+            rippleVariants({ variant, className: rippleClassName }),
+          )}
+          style={{
+            top: ripple.y - 10,
+            left: ripple.x - 10,
+          }}
+        />
+      ))}
+    </motion.button>
+  );
+}
+
+export { RippleButton, type RippleButtonProps };
@@ -12,8 +12,8 @@ const Toaster = ({ ...props }: ToasterProps) => {
      className="toaster group"
      style={
        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
+          "--normal-bg": "var(--card)",
+          "--normal-text": "var(--card-foreground)",
          "--normal-border": "var(--border)",
          zIndex: 99999,
        } as React.CSSProperties
@@ -22,6 +22,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
        style: {
          zIndex: 99999,
          pointerEvents: "auto",
+          backdropFilter: "saturate(1.2)",
        },
      }}
      {...props}
@@ -6,10 +6,7 @@ import { cn } from "@/lib/utils";

 function Table({ className, ...props }: React.ComponentProps<"table">) {
  return (
-    <div
-      data-slot="table-container"
-      className="overflow-x-auto relative w-full"
-    >
+    <div data-slot="table-container" className="overflow-visible w-full">
      <table
        data-slot="table"
        className={cn("w-full text-sm caption-bottom", className)}
@@ -70,7 +67,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
    <th
      data-slot="table-head"
      className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap",
+        "px-2 h-10 font-medium text-left align-middle whitespace-nowrap text-foreground",
        className,
      )}
      {...props}
@@ -16,11 +16,11 @@ export function WindowDragArea() {
    checkPlatform();
  }, []);

-  const handleMouseDown = (e: React.MouseEvent) => {
-    // Only handle left mouse button
+  const handlePointerDown = (e: React.PointerEvent) => {
    if (e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();

-    // Start dragging asynchronously
    const startDrag = async () => {
      try {
        const window = getCurrentWindow();
@@ -41,8 +41,9 @@ export function WindowDragArea() {
  return (
    <button
      type="button"
-      className="fixed top-0 right-0 left-0 h-10 bg-transparent border-0 z-[9999] select-none"
-      onMouseDown={handleMouseDown}
+      className="fixed top-0 right-0 left-0 h-10 bg-transparent border-0 z-[999999] select-none"
+      data-window-drag-area="true"
+      onPointerDown={handlePointerDown}
      onContextMenu={(e) => {
        e.preventDefault();
        e.stopPropagation();
--- a/Show More
+++ b/Show More