chore: linting

docs: update contribution guidelines
refactor: warm up nodecar
2026-06-29 18:09:55 +02:00 · 2025-07-27 03:09:22 +04:00 · 2025-07-27 03:06:35 +04:00 · 2025-07-27 02:54:11 +04:00 · 2025-07-27 02:53:51 +04:00 · 2025-07-27 02:32:47 +04:00
70 changed files with 9900 additions and 2612 deletions
@@ -59,6 +59,9 @@ jobs:
        with:
          workdir: ./src-tauri

+      - name: Install banderole
+        run: cargo install banderole
+
      - name: Install dependencies from lockfile
        run: pnpm install --frozen-lockfile
        
@@ -80,7 +83,7 @@ jobs:
        shell: bash
        run: |
          mkdir -p src-tauri/binaries
-          cp nodecar/dist/nodecar src-tauri/binaries/nodecar-x86_64-unknown-linux-gnu
+          cp nodecar/nodecar-bin src-tauri/binaries/nodecar-x86_64-unknown-linux-gnu

      - name: Initialize CodeQL
        uses: github/codeql-action/init@b1e4dc3db58c9601794e22a9f6d28d45461b9dbf #v3.29.0
@@ -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@40a8940a65eab1544a6af759e43d936201a131a2" # v2.0.3
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@b00f71e051ddddc6e46a193c31c8c0bf283bf9e6" # v2.1.0
    with:
      scan-args: |-
        -r
@@ -9,7 +9,7 @@ jobs:
      issues: write
      pull-requests: write
    steps:
-      - uses: actions/first-interaction@34f15e814fe48ac9312ccf29db4e74fa767cbab7 #v1.3.0
+      - uses: actions/first-interaction@2d4393e6bc0e2efb2e48fba7e06819c3bf61ffc9 #v2.0.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."
@@ -48,11 +48,11 @@ jobs:

      - name: Validate issue with AI
        id: validate
-        uses: actions/ai-inference@d645f067d89ee1d5d736a5990e327e504d1c5a4a # v1.1.0
+        uses: actions/ai-inference@9693b137b6566bb66055a713613bf4f0493701eb # v1.2.3
        with:
          prompt-file: issue_analysis.txt
          system-prompt: |
-            You are an issue validation assistant for Donut Browser, a browser orchestrator application. 
+            You are an issue validation assistant for Donut Browser, an browser orchestrator. 

            Analyze the provided issue content and determine if it contains sufficient information based on these requirements:

@@ -62,6 +62,9 @@ jobs:
      - name: Install cargo-audit
        run: cargo install cargo-audit

+      - name: Install banderole
+        run: cargo install banderole
+
      - name: Install dependencies (Ubuntu only)
        if: matrix.os == 'ubuntu-latest'
        run: |
@@ -88,11 +91,11 @@ jobs:
        run: |
          mkdir -p src-tauri/binaries
          if [[ "${{ matrix.os }}" == "ubuntu-latest" ]]; then
-            cp nodecar/dist/nodecar src-tauri/binaries/nodecar-x86_64-unknown-linux-gnu
+            cp nodecar/nodecar-bin src-tauri/binaries/nodecar-x86_64-unknown-linux-gnu
          elif [[ "${{ matrix.os }}" == "macos-latest" ]]; then
-            cp nodecar/dist/nodecar src-tauri/binaries/nodecar-aarch64-apple-darwin
+            cp nodecar/nodecar-bin src-tauri/binaries/nodecar-aarch64-apple-darwin
          elif [[ "${{ matrix.os }}" == "windows-latest" ]]; then
-            cp nodecar/dist/nodecar.exe src-tauri/binaries/nodecar-x86_64-pc-windows-msvc.exe
+            cp nodecar/nodecar-bin.exe src-tauri/binaries/nodecar-x86_64-pc-windows-msvc.exe
          fi

      - name: Create empty 'dist' directory
@@ -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@40a8940a65eab1544a6af759e43d936201a131a2" # v2.0.3
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@b00f71e051ddddc6e46a193c31c8c0bf283bf9e6" # v2.1.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@40a8940a65eab1544a6af759e43d936201a131a2" # v2.0.3
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@b00f71e051ddddc6e46a193c31c8c0bf283bf9e6" # v2.1.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@40a8940a65eab1544a6af759e43d936201a131a2" # v2.0.3
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable-pr.yml@b00f71e051ddddc6e46a193c31c8c0bf283bf9e6" # v2.1.0
    with:
      scan-args: |-
        -r
@@ -58,11 +58,11 @@ jobs:

      - name: Generate release notes with AI
        id: generate-notes
-        uses: actions/ai-inference@d645f067d89ee1d5d736a5990e327e504d1c5a4a # v1.1.0
+        uses: actions/ai-inference@9693b137b6566bb66055a713613bf4f0493701eb # v1.2.3
        with:
          prompt-file: commits.txt
          system-prompt: |
-            You are an expert technical writer tasked with generating comprehensive release notes for Donut Browser, a powerful browser orchestrator application.
+            You are an expert technical writer tasked with generating comprehensive release notes for Donut Browser, a powerful browser orchestrator.

            Analyze the provided commit messages and generate well-structured release notes following this format:

@@ -13,7 +13,7 @@ env:
 jobs:
  security-scan:
    name: Security Vulnerability Scan
-    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@40a8940a65eab1544a6af759e43d936201a131a2" # v2.0.3
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@b00f71e051ddddc6e46a193c31c8c0bf283bf9e6" # v2.1.0
    with:
      scan-args: |-
        -r
@@ -115,6 +115,14 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda #v4.1.0

+      - name: Setup Python
+        uses: actions/setup-python@a26af69be951a213d495a4c3e4e4022e16d87065 #v5.9.0
+        with:
+          python-version: '3.11'
+
+      - name: Install PyOxidizer
+        run: pip install pyoxidizer
+
      - name: Setup Rust
        uses: dtolnay/rust-toolchain@b3b07ba8b418998c39fb20f53e8b695cdcc8de1b #master
        with:
@@ -132,9 +140,12 @@ jobs:
        with:
          workdir: ./src-tauri

+      - name: Install banderole
+        run: cargo install banderole
+
      - name: Install frontend dependencies
        run: pnpm install --frozen-lockfile
-
+        
      - name: Build nodecar sidecar
        shell: bash
        working-directory: ./nodecar
@@ -146,9 +157,9 @@ jobs:
        run: |
          mkdir -p src-tauri/binaries
          if [[ "${{ matrix.platform }}" == "windows-latest" ]]; then
-            cp nodecar/dist/nodecar.exe src-tauri/binaries/nodecar-${{ matrix.target }}.exe
+            cp nodecar/nodecar-bin.exe src-tauri/binaries/nodecar-${{ matrix.target }}.exe
          else
-            cp nodecar/dist/nodecar src-tauri/binaries/nodecar-${{ matrix.target }}
+            cp nodecar/nodecar-bin src-tauri/binaries/nodecar-${{ matrix.target }}
          fi

      - name: Build frontend
@@ -12,7 +12,7 @@ env:
 jobs:
  security-scan:
    name: Security Vulnerability Scan
-    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@40a8940a65eab1544a6af759e43d936201a131a2" # v2.0.3
+    uses: "google/osv-scanner-action/.github/workflows/osv-scanner-reusable.yml@b00f71e051ddddc6e46a193c31c8c0bf283bf9e6" # v2.1.0
    with:
      scan-args: |-
        -r
@@ -114,6 +114,14 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda #v4.1.0

+      - name: Setup Python
+        uses: actions/setup-python@a26af69be951a213d495a4c3e4e4022e16d87065 #v5.9.0
+        with:
+          python-version: '3.11'
+
+      - name: Install PyOxidizer
+        run: pip install pyoxidizer
+
      - name: Setup Rust
        uses: dtolnay/rust-toolchain@b3b07ba8b418998c39fb20f53e8b695cdcc8de1b #master
        with:
@@ -130,6 +138,9 @@ jobs:
        uses: swatinem/rust-cache@98c8021b550208e191a6a3145459bfc9fb29c4c0 #v2.8.0
        with:
          workdir: ./src-tauri
+        
+      - name: Install banderole
+        run: cargo install banderole

      - name: Install frontend dependencies
        run: pnpm install --frozen-lockfile
@@ -145,9 +156,9 @@ jobs:
        run: |
          mkdir -p src-tauri/binaries
          if [[ "${{ matrix.platform }}" == "windows-latest" ]]; then
-            cp nodecar/dist/nodecar.exe src-tauri/binaries/nodecar-${{ matrix.target }}.exe
+            cp nodecar/nodecar-bin.exe src-tauri/binaries/nodecar-${{ matrix.target }}.exe
          else
-            cp nodecar/dist/nodecar src-tauri/binaries/nodecar-${{ matrix.target }}
+            cp nodecar/nodecar-bin src-tauri/binaries/nodecar-${{ matrix.target }}
          fi

      - name: Build frontend
@@ -23,4 +23,4 @@ jobs:
      - name: Checkout Actions Repository
        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 #v4.2.2
      - name: Spell Check Repo
-        uses: crate-ci/typos@b1ae8d918b6e85bd611117d3d9a3be4f903ee5e4 #v1.33.1
+        uses: crate-ci/typos@392b78fe18a52790c53f42456e46124f77346842 #v1.34.0
@@ -46,4 +46,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo

-!**/.gitkeep
+!**/.gitkeep
+
+# nodecar
+nodecar/nodecar-bin
@@ -1,21 +1,37 @@
 {
  "cSpell.words": [
+    "adwaita",
    "ahooks",
    "akhilmhdh",
    "appimage",
    "appindicator",
    "applescript",
+    "asyncio",
    "autoconfig",
    "autologin",
    "biomejs",
+    "breezedark",
+    "browserforge",
+    "busctl",
+    "CAMOU",
+    "camoufox",
    "cdylib",
+    "certifi",
    "CFURL",
    "checkin",
+    "chrono",
    "CLICOLOR",
    "clippy",
    "cmdk",
    "codegen",
+    "codesign",
+    "CTYPE",
+    "dataclasses",
+    "datareporting",
+    "datas",
+    "dconf",
    "devedition",
+    "doctest",
    "doesn",
    "donutbrowser",
    "dpkg",
@@ -25,14 +41,29 @@
    "errorlevel",
    "esac",
    "esbuild",
+    "etree",
    "frontmost",
+    "geoip",
+    "getcwd",
+    "gettimezone",
    "gifs",
    "gsettings",
+    "healthreport",
+    "hiddenimports",
+    "hkcu",
+    "hooksconfig",
+    "hookspath",
    "icns",
+    "idlelib",
    "idletime",
+    "idna",
    "Inno",
+    "kdeglobals",
+    "keras",
    "KHTML",
+    "kreadconfig",
    "launchservices",
+    "letterboxing",
    "libatk",
    "libayatana",
    "libcairo",
@@ -42,56 +73,99 @@
    "librsvg",
    "libwebkit",
    "libxdo",
+    "localtime",
+    "lxml",
+    "mmdb",
    "mountpoint",
    "msiexec",
    "msvc",
    "msys",
    "Mullvad",
    "mullvadbrowser",
+    "mypy",
+    "noarchive",
+    "noconfirm",
    "nodecar",
    "nodemon",
    "norestart",
    "NSIS",
    "ntlm",
+    "numpy",
    "objc",
    "orhun",
+    "orjson",
    "osascript",
+    "pathex",
+    "pathlib",
+    "peerconnection",
    "pixbuf",
    "plasmohq",
+    "platformdirs",
+    "prefs",
    "propertylist",
+    "psutil",
+    "pycache",
+    "pydantic",
+    "pyee",
+    "pyinstaller",
+    "pyoxidizer",
+    "pytest",
+    "pyyaml",
    "reqwest",
    "ridedott",
    "rlib",
    "rustc",
    "SARIF",
+    "scipy",
+    "screeninfo",
    "serde",
+    "setuptools",
    "shadcn",
+    "shutil",
    "signon",
+    "signum",
+    "sklearn",
    "sonner",
+    "splitn",
    "sspi",
    "staticlib",
    "stefanzweifel",
    "subdirs",
+    "subkey",
    "SUPPRESSMSGBOXES",
    "swatinem",
    "sysinfo",
    "systempreferences",
+    "systemsetup",
    "taskkill",
    "tasklist",
    "tauri",
+    "TERX",
+    "timedatectl",
    "titlebar",
+    "tkinter",
    "Torbrowser",
+    "tqdm",
+    "trackingprotection",
    "turbopack",
+    "turtledemo",
    "udeps",
    "unlisten",
    "unminimize",
    "unrs",
    "urlencoding",
+    "urllib",
+    "venv",
    "vercel",
    "VERYSILENT",
+    "webgl",
+    "webrtc",
    "winreg",
    "wiremock",
    "xattr",
-    "zhom"
+    "xfconf",
+    "xsettings",
+    "zhom",
+    "zoneinfo"
  ]
 }
@@ -26,6 +26,7 @@ Ensure you have the following dependencies installed:
 - Node.js (see `.node-version` for exact version)
 - pnpm package manager
 - Latest Rust and Cargo toolchain
+- [Banderole](https://github.com/zhom/banderole)
 - [Tauri prerequisites guide](https://v2.tauri.app/start/prerequisites/).

 ## Run Locally
@@ -46,12 +47,13 @@ After having the above dependencies installed, proceed through the following ste
   pnpm install
   ```

-4. **Install nodecar dependencies**
+4. **Build nodecar**
+
+   Building nodecar requires you to have `banderole` installed.

   ```bash
   cd nodecar
-   pnpm install --frozen-lockfile
-   cd ..
+   pnpm build
   ```

 5. **Start the development server**
@@ -105,7 +107,6 @@ Make sure the build completes successfully without errors.
 ## Testing

 - Always test your changes on the target platform
- Test both development and production builds
 - Verify that existing functionality still works
 - Add tests for new features when possible

@@ -155,7 +156,7 @@ Donut Browser is built with:

 - **Frontend**: Next.js React application
 - **Backend**: Tauri (Rust) for native functionality
- **Node.js Sidecar**: `nodecar` binary for proxy support
+- **Node.js Sidecar**: `nodecar` binary for access to JavaScript ecosystem
 - **Build System**: GitHub Actions for CI/CD

 Understanding this architecture will help you contribute more effectively.
@@ -22,7 +22,7 @@ if [ -z "$TARGET_TRIPLE" ]; then
 fi

 # Copy the file with target triple suffix
-cp "dist/nodecar${EXT}" "../src-tauri/binaries/nodecar-${TARGET_TRIPLE}${EXT}"
+cp "nodecar-bin${EXT}" "../src-tauri/binaries/nodecar-${TARGET_TRIPLE}${EXT}"

 # Also copy a generic version for Tauri to find
-cp "dist/nodecar${EXT}" "../src-tauri/binaries/nodecar${EXT}"
+cp "nodecar-bin${EXT}" "../src-tauri/binaries/nodecar${EXT}"
@@ -3,30 +3,32 @@
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
+  "bin": "dist/index.js",
  "scripts": {
    "watch": "nodemon --exec ts-node --esm ./src/index.ts --watch src",
    "dev": "node --loader ts-node/esm ./src/index.ts",
    "start": "tsc && node ./dist/index.js",
    "test": "tsc && node ./dist/test-proxy.js",
    "rename-binary": "sh ./copy-binary.sh",
-    "build": "tsc && pkg ./dist/index.js --targets latest-macos-arm64 --output dist/nodecar && pnpm rename-binary",
-    "build:mac-aarch64": "tsc && pkg ./dist/index.js --targets latest-macos-arm64 --output dist/nodecar && pnpm rename-binary",
-    "build:mac-x86_64": "tsc && pkg ./dist/index.js --targets latest-macos-x64 --output dist/nodecar && pnpm rename-binary",
-    "build:linux-x64": "tsc && pkg ./dist/index.js --targets latest-linux-x64 --output dist/nodecar && pnpm rename-binary",
-    "build:linux-arm64": "tsc && pkg ./dist/index.js --targets latest-linux-arm64 --output dist/nodecar && pnpm rename-binary",
-    "build:win-x64": "tsc && pkg ./dist/index.js --targets latest-win-x64 --output dist/nodecar && pnpm rename-binary",
-    "build:win-arm64": "tsc && pkg ./dist/index.js --targets latest-win-arm64 --output dist/nodecar && pnpm rename-binary"
+    "build": "tsc && banderole bundle . --output nodecar-bin && pnpm rename-binary",
+    "build:mac-aarch64": "tsc && banderole bundle . --output nodecar-bin && pnpm rename-binary",
+    "build:mac-x86_64": "tsc && banderole bundle . --output nodecar-bin && pnpm rename-binary",
+    "build:linux-x64": "tsc && banderole bundle . --output nodecar-bin && pnpm rename-binary",
+    "build:linux-arm64": "tsc && banderole bundle . --output nodecar-bin && pnpm rename-binary",
+    "build:win-x64": "tsc && banderole bundle . --output nodecar-bin && pnpm rename-binary",
+    "build:win-arm64": "tsc && banderole bundle . --output nodecar-bin && pnpm rename-binary"
  },
  "keywords": [],
  "author": "",
  "license": "AGPL-3.0",
  "dependencies": {
-    "@types/node": "^24.0.7",
-    "@yao-pkg/pkg": "^6.5.1",
+    "@types/node": "^24.1.0",
+    "camoufox-js": "^0.6.1",
    "commander": "^14.0.0",
-    "dotenv": "^17.0.0",
+    "dotenv": "^17.2.0",
    "get-port": "^7.1.0",
    "nodemon": "^3.1.10",
+    "playwright-core": "^1.54.1",
    "proxy-chain": "^2.5.9",
    "tmp": "^0.2.3",
    "ts-node": "^10.9.2",
@@ -0,0 +1,163 @@
+import { launchOptions } from "camoufox-js";
+
+export interface CamoufoxLaunchOptions {
+  // Operating system to use for fingerprint generation
+  os?: "windows" | "macos" | "linux" | string[];
+
+  // Blocking options
+  block_images?: boolean;
+  block_webrtc?: boolean;
+  block_webgl?: boolean;
+
+  // Security options
+  disable_coop?: boolean;
+
+  // Geolocation options
+  geoip?: string | boolean;
+
+  // UI behavior
+  humanize?: boolean | number;
+
+  // Localization
+  locale?: string | string[];
+
+  // Extensions and fonts
+  addons?: string[];
+  fonts?: string[];
+  custom_fonts_only?: boolean;
+  exclude_addons?: string[];
+
+  // Screen and window
+  screen?: {
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+  };
+  window?: [number, number];
+
+  // Fingerprint
+  fingerprint?: any;
+
+  // Version and mode
+  ff_version?: number;
+  headless?: boolean;
+  main_world_eval?: boolean;
+
+  // Custom executable path
+  executable_path?: string;
+
+  // Firefox preferences
+  firefox_user_prefs?: Record<string, any>;
+
+  // Proxy settings
+  proxy?:
+    | string
+    | {
+        server: string;
+        username?: string;
+        password?: string;
+        bypass?: string;
+      };
+
+  // Cache and performance
+  enable_cache?: boolean;
+
+  // Additional options
+  args?: string[];
+  env?: Record<string, string | number | boolean>;
+  debug?: boolean;
+  virtual_display?: string;
+  webgl_config?: [string, string];
+
+  // Custom options
+  timezone?: string;
+  country?: string;
+  geolocation?: {
+    latitude: number;
+    longitude: number;
+    accuracy?: number;
+  };
+}
+
+/**
+ * Generate Camoufox configuration using camoufox-js-lsd
+ */
+export async function generateCamoufoxConfig(
+  options: CamoufoxLaunchOptions = {},
+): Promise<any> {
+  try {
+    // Convert our options to camoufox-js-lsd format
+    const camoufoxOptions: any = {};
+
+    // Map our options to camoufox-js-lsd format
+    if (options.os) camoufoxOptions.os = options.os;
+    if (options.block_images !== undefined)
+      camoufoxOptions.block_images = options.block_images;
+    if (options.block_webrtc !== undefined)
+      camoufoxOptions.block_webrtc = options.block_webrtc;
+    if (options.block_webgl !== undefined)
+      camoufoxOptions.block_webgl = options.block_webgl;
+    if (options.disable_coop !== undefined)
+      camoufoxOptions.disable_coop = options.disable_coop;
+    if (options.geoip !== undefined) camoufoxOptions.geoip = options.geoip;
+    if (options.humanize !== undefined)
+      camoufoxOptions.humanize = options.humanize;
+    if (options.locale) camoufoxOptions.locale = options.locale;
+    if (options.addons) camoufoxOptions.addons = options.addons;
+    if (options.fonts) camoufoxOptions.fonts = options.fonts;
+    if (options.custom_fonts_only !== undefined)
+      camoufoxOptions.custom_fonts_only = options.custom_fonts_only;
+    if (options.exclude_addons)
+      camoufoxOptions.exclude_addons = options.exclude_addons;
+    if (options.screen) camoufoxOptions.screen = options.screen;
+    if (options.window) camoufoxOptions.window = options.window;
+    if (options.fingerprint) camoufoxOptions.fingerprint = options.fingerprint;
+    if (options.ff_version !== undefined)
+      camoufoxOptions.ff_version = options.ff_version;
+    if (options.headless !== undefined)
+      camoufoxOptions.headless = options.headless;
+    if (options.main_world_eval !== undefined)
+      camoufoxOptions.main_world_eval = options.main_world_eval;
+    if (options.executable_path)
+      camoufoxOptions.executable_path = options.executable_path;
+    if (options.firefox_user_prefs)
+      camoufoxOptions.firefox_user_prefs = options.firefox_user_prefs;
+    if (options.proxy) camoufoxOptions.proxy = options.proxy;
+    if (options.enable_cache !== undefined)
+      camoufoxOptions.enable_cache = options.enable_cache;
+    if (options.args) camoufoxOptions.args = options.args;
+    if (options.env) camoufoxOptions.env = options.env;
+    if (options.debug !== undefined) camoufoxOptions.debug = options.debug;
+    if (options.virtual_display)
+      camoufoxOptions.virtual_display = options.virtual_display;
+    if (options.webgl_config)
+      camoufoxOptions.webgl_config = options.webgl_config;
+
+    // Handle custom options that might need mapping
+    if (options.timezone) {
+      // If timezone is provided directly, we can set it in the generated config
+      // This will be handled after generation
+    }
+    if (options.country) {
+      // Similar for country
+    }
+    if (options.geolocation) {
+      // Handle geolocation coordinates
+    }
+
+    // Generate the configuration using camoufox-js-lsd
+    const generatedConfig = await launchOptions(camoufoxOptions);
+
+    // Apply any custom overrides
+    if (options.timezone) {
+      generatedConfig.env = generatedConfig.env || {};
+      // The timezone will be handled in the CAMOU_CONFIG environment variable
+    }
+
+    return generatedConfig;
+  } catch (error) {
+    console.error(`Failed to generate Camoufox config: ${error}`);
+    throw error;
+  }
+}
@@ -1,4 +1,5 @@
 import { program } from "commander";
+import { generateCamoufoxConfig } from "./camoufox-launcher.js";
 import {
  startProxyProcess,
  stopAllProxyProcesses,
@@ -66,7 +67,7 @@ program
            "Error: Either --upstream URL or --host, --proxy-port, and --type are required",
          );
          console.log(
-            "Example: proxy start --host datacenter.proxyempire.io --proxy-port 9000 --type http --username user --password pass",
+            "Example: proxy start --host proxy.example.com --proxy-port 9000 --type http --username user --password pass",
          );
          process.exit(1);
          return;
@@ -149,4 +150,213 @@ program
    }
  });

+// Command for generating Camoufox configuration
+program
+  .command("camoufox-config")
+  .argument("<action>", "generate Camoufox configuration")
+
+  // Operating system fingerprinting
+  .option(
+    "--os <os>",
+    "OS to emulate (windows, macos, linux, or comma-separated list)",
+  )
+
+  // Blocking options
+  .option("--block-images", "block all images")
+  .option("--block-webrtc", "block WebRTC entirely")
+  .option("--block-webgl", "block WebGL")
+
+  // Security options
+  .option("--disable-coop", "disable Cross-Origin-Opener-Policy")
+
+  // Geolocation and IP
+  .option(
+    "--geoip <ip>",
+    "IP address for geolocation spoofing (or 'auto' for automatic)",
+  )
+  .option("--country <country>", "country code for geolocation")
+  .option("--timezone <timezone>", "timezone to spoof")
+  .option("--latitude <lat>", "latitude for geolocation", parseFloat)
+  .option("--longitude <lng>", "longitude for geolocation", parseFloat)
+
+  // UI and behavior
+  .option(
+    "--humanize [duration]",
+    "humanize cursor movement (optional max duration in seconds)",
+    (val) => (val ? parseFloat(val) : true),
+  )
+  .option("--headless", "run in headless mode")
+
+  // Localization
+  .option("--locale <locale>", "locale(s) to use (comma-separated)")
+
+  // Extensions and fonts
+  .option("--addons <addons>", "Firefox addons to load (comma-separated paths)")
+  .option("--fonts <fonts>", "additional fonts to load (comma-separated)")
+  .option("--custom-fonts-only", "use only custom fonts, exclude OS fonts")
+  .option(
+    "--exclude-addons <addons>",
+    "default addons to exclude (comma-separated)",
+  )
+
+  // Screen and window
+  .option("--screen-min-width <width>", "minimum screen width", parseInt)
+  .option("--screen-max-width <width>", "maximum screen width", parseInt)
+  .option("--screen-min-height <height>", "minimum screen height", parseInt)
+  .option("--screen-max-height <height>", "maximum screen height", parseInt)
+  .option("--window-width <width>", "fixed window width", parseInt)
+  .option("--window-height <height>", "fixed window height", parseInt)
+
+  // Advanced options
+  .option("--ff-version <version>", "Firefox version to emulate", parseInt)
+  .option("--main-world-eval", "enable main world script evaluation")
+  .option("--webgl-vendor <vendor>", "WebGL vendor string")
+  .option("--webgl-renderer <renderer>", "WebGL renderer string")
+
+  // Proxy
+  .option(
+    "--proxy <proxy>",
+    "proxy URL (protocol://[username:password@]host:port)",
+  )
+
+  // Cache and performance
+  .option("--disable-cache", "disable browser cache (cache enabled by default)")
+
+  // Environment and debugging
+  .option("--virtual-display <display>", "virtual display number (e.g., :99)")
+  .option("--debug", "enable debug output")
+  .option("--args <args>", "additional browser arguments (comma-separated)")
+  .option("--env <env>", "environment variables (JSON string)")
+
+  // Firefox preferences
+  .option("--firefox-prefs <prefs>", "Firefox user preferences (JSON string)")
+
+  .description("generate Camoufox configuration using camoufox-js")
+  .action(async (action: string, options: any) => {
+    try {
+      if (action === "generate") {
+        // Build Camoufox options
+        const camoufoxOptions: any = {
+          enable_cache: !options.disableCache, // Cache enabled by default
+        };
+
+        // OS fingerprinting
+        if (options.os) {
+          camoufoxOptions.os = options.os.includes(",")
+            ? options.os.split(",")
+            : options.os;
+        }
+
+        // Blocking options
+        if (options.blockImages) camoufoxOptions.block_images = true;
+        if (options.blockWebrtc) camoufoxOptions.block_webrtc = true;
+        if (options.blockWebgl) camoufoxOptions.block_webgl = true;
+
+        // Security options
+        if (options.disableCoop) camoufoxOptions.disable_coop = true;
+
+        // Geolocation
+        if (options.geoip) {
+          camoufoxOptions.geoip =
+            options.geoip === "auto" ? true : options.geoip;
+        }
+        if (options.latitude && options.longitude) {
+          camoufoxOptions.geolocation = {
+            latitude: options.latitude,
+            longitude: options.longitude,
+            accuracy: 100,
+          };
+        }
+        if (options.country) camoufoxOptions.country = options.country;
+        if (options.timezone) camoufoxOptions.timezone = options.timezone;
+
+        // UI and behavior
+        if (options.humanize) camoufoxOptions.humanize = options.humanize;
+        if (options.headless) camoufoxOptions.headless = true;
+
+        // Localization
+        if (options.locale) {
+          camoufoxOptions.locale = options.locale.includes(",")
+            ? options.locale.split(",")
+            : options.locale;
+        }
+
+        // Extensions and fonts
+        if (options.addons) camoufoxOptions.addons = options.addons.split(",");
+        if (options.fonts) camoufoxOptions.fonts = options.fonts.split(",");
+        if (options.customFontsOnly) camoufoxOptions.custom_fonts_only = true;
+        if (options.excludeAddons)
+          camoufoxOptions.exclude_addons = options.excludeAddons.split(",");
+
+        // Screen and window
+        const screen: any = {};
+        if (options.screenMinWidth) screen.minWidth = options.screenMinWidth;
+        if (options.screenMaxWidth) screen.maxWidth = options.screenMaxWidth;
+        if (options.screenMinHeight) screen.minHeight = options.screenMinHeight;
+        if (options.screenMaxHeight) screen.maxHeight = options.screenMaxHeight;
+        if (Object.keys(screen).length > 0) camoufoxOptions.screen = screen;
+
+        if (options.windowWidth && options.windowHeight) {
+          camoufoxOptions.window = [options.windowWidth, options.windowHeight];
+        }
+
+        // Advanced options
+        if (options.ffVersion) camoufoxOptions.ff_version = options.ffVersion;
+        if (options.mainWorldEval) camoufoxOptions.main_world_eval = true;
+        if (options.webglVendor && options.webglRenderer) {
+          camoufoxOptions.webgl_config = [
+            options.webglVendor,
+            options.webglRenderer,
+          ];
+        }
+
+        // Proxy
+        if (options.proxy) camoufoxOptions.proxy = options.proxy;
+
+        // Environment and debugging
+        if (options.virtualDisplay)
+          camoufoxOptions.virtual_display = options.virtualDisplay;
+        if (options.debug) camoufoxOptions.debug = true;
+        if (options.args) camoufoxOptions.args = options.args.split(",");
+        if (options.env) {
+          try {
+            camoufoxOptions.env = JSON.parse(options.env);
+          } catch (e) {
+            console.error("Invalid JSON for --env option");
+            process.exit(1);
+            return;
+          }
+        }
+
+        // Firefox preferences
+        if (options.firefoxPrefs) {
+          try {
+            camoufoxOptions.firefox_user_prefs = JSON.parse(
+              options.firefoxPrefs,
+            );
+          } catch (e) {
+            console.error("Invalid JSON for --firefox-prefs option");
+            process.exit(1);
+            return;
+          }
+        }
+
+        // Generate configuration
+        const config = await generateCamoufoxConfig(camoufoxOptions);
+
+        // Output the configuration as JSON
+        console.log(JSON.stringify(config, null, 2));
+        process.exit(0);
+      } else {
+        console.error("Invalid action. Use 'generate'");
+        process.exit(1);
+      }
+    } catch (error: unknown) {
+      console.error(
+        `Camoufox config generation failed: ${error instanceof Error ? error.message : JSON.stringify(error)}`,
+      );
+      process.exit(1);
+    }
+  });
+
 program.parse();
@@ -2,7 +2,7 @@
  "name": "donutbrowser",
  "private": true,
  "license": "AGPL-3.0",
-  "version": "0.6.0",
+  "version": "0.7.2",
  "type": "module",
  "scripts": {
    "dev": "next dev --turbopack",
@@ -30,45 +30,47 @@
    "@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",
    "@tanstack/react-table": "^8.21.3",
-    "@tauri-apps/api": "^2.6.0",
-    "@tauri-apps/plugin-deep-link": "^2.4.0",
-    "@tauri-apps/plugin-dialog": "^2.3.0",
-    "@tauri-apps/plugin-fs": "~2.4.0",
+    "@tauri-apps/api": "^2.7.0",
+    "@tauri-apps/plugin-deep-link": "^2.4.1",
+    "@tauri-apps/plugin-dialog": "^2.3.1",
+    "@tauri-apps/plugin-fs": "~2.4.1",
    "@tauri-apps/plugin-opener": "^2.4.0",
    "ahooks": "^3.9.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.1.1",
-    "next": "^15.3.4",
+    "next": "^15.4.4",
    "next-themes": "^0.4.6",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-icons": "^5.5.0",
-    "sonner": "^2.0.5",
+    "sonner": "^2.0.6",
    "tailwind-merge": "^3.3.1",
    "tauri-plugin-macos-permissions-api": "^2.3.0"
  },
  "devDependencies": {
-    "@biomejs/biome": "2.0.6",
+    "@biomejs/biome": "2.1.1",
    "@tailwindcss/postcss": "^4.1.11",
-    "@tauri-apps/cli": "^2.6.2",
-    "@types/node": "^24.0.10",
+    "@tauri-apps/cli": "^2.7.1",
+    "@types/node": "^24.1.0",
    "@types/react": "^19.1.8",
    "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react": "^4.6.0",
+    "@vitejs/plugin-react": "^4.7.0",
    "husky": "^9.1.7",
    "lint-staged": "^16.1.2",
    "tailwindcss": "^4.1.11",
    "ts-unused-exports": "^11.0.1",
-    "tw-animate-css": "^1.3.4",
+    "tw-animate-css": "^1.3.6",
    "typescript": "~5.8.3"
  },
-  "packageManager": "pnpm@10.11.1",
+  "packageManager": "pnpm@10.13.1",
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx,json,css,md}": [
      "biome check --fix"
@@ -1,9 +1,9 @@
 packages:
-  - "nodecar"
-
+  - nodecar
 onlyBuiltDependencies:
-  - "@biomejs/biome"
-  - "@tailwindcss/oxide"
+  - '@biomejs/biome'
+  - '@tailwindcss/oxide'
  - esbuild
  - sharp
+  - sqlite3
  - unrs-resolver
@@ -124,9 +124,9 @@ dependencies = [

 [[package]]
 name = "async-channel"
-version = "2.3.1"
+version = "2.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "89b47800b0be77592da0afd425cc03468052844aff33b84e33cc696f64e77b6a"
+checksum = "924ed96dd52d1b75e9c1a3e6275715fd320f5f9439fb5a4a11fa51f4221158d2"
 dependencies = [
 "concurrent-queue",
 "event-listener-strategy",
@@ -349,9 +349,9 @@ dependencies = [

 [[package]]
 name = "blocking"
-version = "1.6.1"
+version = "1.6.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "703f41c54fc768e63e091340b424302bb1c29ef4aa0c7f10fe849dfb114d29ea"
+checksum = "e83f8d02be6967315521be875afa792a316e28d57b5a2d401897e2a7921b7f21"
 dependencies = [
 "async-channel",
 "async-task",
@@ -410,21 +410,11 @@ dependencies = [

 [[package]]
 name = "bzip2"
-version = "0.5.2"
+version = "0.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "49ecfb22d906f800d4fe833b6282cf4dc1c298f5057ca0b5445e5c209735ca47"
+checksum = "bea8dcd42434048e4f7a304411d9273a411f647446c1234a65ce0554923f4cff"
 dependencies = [
- "bzip2-sys",
-]
-
-[[package]]
-name = "bzip2-sys"
-version = "0.1.13+1.0.8"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "225bff33b2141874fe80d71e07d6eec4f85c5c216453dd96388240f96e1acc14"
-dependencies = [
- "cc",
- "pkg-config",
+ "libbz2-rs-sys",
 ]

 [[package]]
@@ -491,14 +481,14 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "02260d489095346e5cafd04dea8e8cb54d1d74fcd759022a9b72986ebe9a1257"
 dependencies = [
 "serde",
- "toml",
+ "toml 0.8.22",
 ]

 [[package]]
 name = "cc"
-version = "1.2.27"
+version = "1.2.29"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d487aa071b5f64da6f19a3e848e3578944b726ee5a4854b82172f02aa876bfdc"
+checksum = "5c1599538de2394445747c8cf7935946e3cc27e9625f889d979bfb2aaf569362"
 dependencies = [
 "jobserver",
 "libc",
@@ -552,8 +542,10 @@ checksum = "c469d952047f47f91b68d1cba3f10d63c11d73e4636f24f08daf0278abf01c4d"
 dependencies = [
 "android-tzdata",
 "iana-time-zone",
+ "js-sys",
 "num-traits",
 "serde",
+ "wasm-bindgen",
 "windows-link",
 ]

@@ -971,10 +963,11 @@ dependencies = [

 [[package]]
 name = "donutbrowser"
-version = "0.6.0"
+version = "0.7.2"
 dependencies = [
 "async-trait",
 "base64 0.22.1",
+ "chrono",
 "core-foundation 0.10.1",
 "directories",
 "futures-util",
@@ -1001,6 +994,7 @@ dependencies = [
 "tokio",
 "tower",
 "tower-http",
+ "url",
 "uuid",
 "windows",
 "winreg",
@@ -1046,14 +1040,14 @@ checksum = "1c7a8fb8a9fbf66c1f703fe16184d10ca0ee9d23be5b4436400408ba54a95005"

 [[package]]
 name = "embed-resource"
-version = "3.0.4"
+version = "3.0.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0963f530273dc3022ab2bdc3fcd6d488e850256f2284a82b7413cb9481ee85dd"
+checksum = "4c6d81016d6c977deefb2ef8d8290da019e27cc26167e102185da528e6c0ab38"
 dependencies = [
 "cc",
 "memchr",
 "rustc_version",
- "toml",
+ "toml 0.9.2",
 "vswhom",
 "winreg",
 ]
@@ -1499,11 +1493,9 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "26145e563e54f2cadc477553f1ec5ee650b00862f0a58bcd12cbdc5f0ea2d2f4"
 dependencies = [
 "cfg-if",
- "js-sys",
 "libc",
 "r-efi",
 "wasi 0.14.2+wasi-0.2.4",
- "wasm-bindgen",
 ]

 [[package]]
@@ -1662,9 +1654,9 @@ dependencies = [

 [[package]]
 name = "h2"
-version = "0.4.10"
+version = "0.4.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a9421a676d1b147b16b82c9225157dc629087ef8ec4d5e2960f9437a90dac0a5"
+checksum = "17da50a276f1e01e0ba6c029e47b7100754904ee8a278f886546e98575380785"
 dependencies = [
 "atomic-waker",
 "bytes",
@@ -1849,9 +1841,9 @@ dependencies = [

 [[package]]
 name = "hyper-util"
-version = "0.1.14"
+version = "0.1.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dc2fdfdbff08affe55bb779f33b053aa1fe5dd5b54c257343c17edfa55711bdb"
+checksum = "7f66d5bd4c6f02bf0542fad85d626775bab9258cf795a4256dcaf3161114d1df"
 dependencies = [
 "base64 0.22.1",
 "bytes",
@@ -2060,6 +2052,17 @@ dependencies = [
 "generic-array",
 ]

+[[package]]
+name = "io-uring"
+version = "0.7.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b86e202f00093dcba4275d4636b93ef9dd75d025ae560d2521b45ea28ab49013"
+dependencies = [
+ "bitflags 2.9.1",
+ "cfg-if",
+ "libc",
+]
+
 [[package]]
 name = "ipnet"
 version = "2.11.0"
@@ -2241,6 +2244,12 @@ dependencies = [
 "once_cell",
 ]

+[[package]]
+name = "libbz2-rs-sys"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "775bf80d5878ab7c2b1080b5351a48b2f737d9f6f8b383574eebcc22be0dfccb"
+
 [[package]]
 name = "libc"
 version = "0.2.174"
@@ -3144,9 +3153,9 @@ checksum = "7edddbd0b52d732b21ad9a5fab5c704c14cd949e5e9a1ec5929a24fded1b904c"

 [[package]]
 name = "plist"
-version = "1.7.2"
+version = "1.7.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3d77244ce2d584cd84f6a15f86195b8c9b2a0dfbfd817c09e0464244091a58ed"
+checksum = "3af6b589e163c5a788fab00ce0c0366f6efbb9959c2f9874b224936af7fce7e1"
 dependencies = [
 "base64 0.22.1",
 "indexmap 2.9.0",
@@ -3198,6 +3207,12 @@ version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "439ee305def115ba05938db6eb1644ff94165c5ab5e9420d1c1bcedbba909391"

+[[package]]
+name = "ppmd-rust"
+version = "1.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c834641d8ad1b348c9ee86dec3b9840d805acd5f24daa5f90c788951a52ff59b"
+
 [[package]]
 name = "ppv-lite86"
 version = "0.2.21"
@@ -3282,9 +3297,9 @@ dependencies = [

 [[package]]
 name = "quick-xml"
-version = "0.37.5"
+version = "0.38.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "331e97a1af0bf59823e6eadffe373d7b27f485be8748f71471c662c1f269b7fb"
+checksum = "8927b0664f5c5a98265138b7e3f90aa19a6b21353182469ace36d4ac527b7b1b"
 dependencies = [
 "memchr",
 ]
@@ -3491,9 +3506,9 @@ checksum = "2b15c43186be67a4fd63bee50d0303afffcef381492ebe2c5d87f324e1b8815c"

 [[package]]
 name = "reqwest"
-version = "0.12.20"
+version = "0.12.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "eabf4c97d9130e2bf606614eb937e86edac8292eaa6f422f995d7e8de1eb1813"
+checksum = "cbc931937e6ca3a06e3b6c0aa7841849b160a90351d6ab467a8b9b9959767531"
 dependencies = [
 "base64 0.22.1",
 "bytes",
@@ -3573,13 +3588,12 @@ dependencies = [

 [[package]]
 name = "rust-ini"
-version = "0.21.1"
+version = "0.21.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4e310ef0e1b6eeb79169a1171daf9abcb87a2e17c03bee2c4bb100b55c75409f"
+checksum = "e7295b7ce3bf4806b419dc3420745998b447178b7005e2011947b38fc5aa6791"
 dependencies = [
 "cfg-if",
 "ordered-multimap",
- "trim-in-place",
 ]

 [[package]]
@@ -3612,9 +3626,9 @@ dependencies = [

 [[package]]
 name = "rustls"
-version = "0.23.28"
+version = "0.23.29"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7160e3e10bf4535308537f3c4e1641468cd0e485175d6163087c0393c7d46643"
+checksum = "2491382039b29b9b11ff08b76ff6c97cf287671dbb74f0be44bda389fffe9bd1"
 dependencies = [
 "once_cell",
 "rustls-pki-types",
@@ -3634,9 +3648,9 @@ dependencies = [

 [[package]]
 name = "rustls-webpki"
-version = "0.103.3"
+version = "0.103.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e4a72fe2bcf7a6ac6fd7d0b9e5cb68aeb7d4c0a0271730218b3e92d43b4eb435"
+checksum = "0a17884ae0c1b773f1ccd2bd4a8c72f16da897310a98b0e84bf349ad5ead92fc"
 dependencies = [
 "ring",
 "rustls-pki-types",
@@ -3700,6 +3714,18 @@ dependencies = [
 "serde_json",
 ]

+[[package]]
+name = "schemars"
+version = "1.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1375ba8ef45a6f15d83fa8748f1079428295d403d6ea991d09ab100155fbc06d"
+dependencies = [
+ "dyn-clone",
+ "ref-cast",
+ "serde",
+ "serde_json",
+]
+
 [[package]]
 name = "schemars_derive"
 version = "0.8.22"
@@ -3842,6 +3868,15 @@ dependencies = [
 "serde",
 ]

+[[package]]
+name = "serde_spanned"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "40734c41988f7306bb04f0ecf60ec0f3f1caa34290e4e8ea471dcd3346483b83"
+dependencies = [
+ "serde",
+]
+
 [[package]]
 name = "serde_urlencoded"
 version = "0.7.1"
@@ -3856,9 +3891,9 @@ dependencies = [

 [[package]]
 name = "serde_with"
-version = "3.13.0"
+version = "3.14.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bf65a400f8f66fb7b0552869ad70157166676db75ed8181f8104ea91cf9d0b42"
+checksum = "f2c45cd61fefa9db6f254525d46e392b852e0e61d9a1fd36e5bd183450a556d5"
 dependencies = [
 "base64 0.22.1",
 "chrono",
@@ -3866,6 +3901,7 @@ dependencies = [
 "indexmap 1.9.3",
 "indexmap 2.9.0",
 "schemars 0.9.0",
+ "schemars 1.0.3",
 "serde",
 "serde_derive",
 "serde_json",
@@ -3875,9 +3911,9 @@ dependencies = [

 [[package]]
 name = "serde_with_macros"
-version = "3.13.0"
+version = "3.14.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "81679d9ed988d5e9a5e6531dc3f2c28efbd639cbd1dfb628df08edea6004da77"
+checksum = "de90945e6565ce0d9a25098082ed4ee4002e047cb59892c318d66821e14bb30f"
 dependencies = [
 "darling",
 "proc-macro2",
@@ -3941,9 +3977,9 @@ dependencies = [

 [[package]]
 name = "shared_child"
-version = "1.1.0"
+version = "1.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c2778001df1384cf20b6dc5a5a90f48da35539885edaaefd887f8d744e939c0b"
+checksum = "1e362d9935bc50f019969e2f9ecd66786612daae13e8f277be7bfb66e8bed3f7"
 dependencies = [
 "libc",
 "sigchld",
@@ -3958,9 +3994,9 @@ checksum = "0fda2ff0d084019ba4d7c6f371c95d8fd75ce3524c3cb8fb653a3023f6323e64"

 [[package]]
 name = "sigchld"
-version = "0.2.3"
+version = "0.2.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1219ef50fc0fdb04fcc243e6aa27f855553434ffafe4fa26554efb78b5b4bf89"
+checksum = "47106eded3c154e70176fc83df9737335c94ce22f821c32d17ed1db1f83badb1"
 dependencies = [
 "libc",
 "os_pipe",
@@ -4178,9 +4214,9 @@ dependencies = [

 [[package]]
 name = "sysinfo"
-version = "0.35.2"
+version = "0.36.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3c3ffa3e4ff2b324a57f7aeb3c349656c7b127c3c189520251a648102a92496e"
+checksum = "aab138f5c1bb35231de19049060a87977ad23e04f2303e953bc5c2947ac7dec4"
 dependencies = [
 "libc",
 "memchr",
@@ -4220,7 +4256,7 @@ dependencies = [
 "cfg-expr",
 "heck 0.5.0",
 "pkg-config",
- "toml",
+ "toml 0.8.22",
 "version-compare",
 ]

@@ -4348,7 +4384,7 @@ dependencies = [
 "serde_json",
 "tauri-utils",
 "tauri-winres",
- "toml",
+ "toml 0.8.22",
 "walkdir",
 ]

@@ -4406,7 +4442,7 @@ dependencies = [
 "serde",
 "serde_json",
 "tauri-utils",
- "toml",
+ "toml 0.8.22",
 "walkdir",
 ]

@@ -4466,7 +4502,7 @@ dependencies = [
 "tauri-plugin",
 "tauri-utils",
 "thiserror 2.0.12",
- "toml",
+ "toml 0.8.22",
 "url",
 ]

@@ -4624,7 +4660,7 @@ dependencies = [
 "serde_with",
 "swift-rs",
 "thiserror 2.0.12",
- "toml",
+ "toml 0.8.22",
 "url",
 "urlpattern",
 "uuid",
@@ -4639,7 +4675,7 @@ checksum = "e8d321dbc6f998d825ab3f0d62673e810c861aac2d0de2cc2c395328f1d113b4"
 dependencies = [
 "embed-resource",
 "indexmap 2.9.0",
- "toml",
+ "toml 0.8.22",
 ]

 [[package]]
@@ -4758,17 +4794,19 @@ dependencies = [

 [[package]]
 name = "tokio"
-version = "1.45.1"
+version = "1.46.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "75ef51a33ef1da925cea3e4eb122833cb377c61439ca401b770f54902b806779"
+checksum = "0cc3a2344dafbe23a245241fe8b09735b521110d30fcefbbd5feb1797ca35d17"
 dependencies = [
 "backtrace",
 "bytes",
+ "io-uring",
 "libc",
 "mio",
 "parking_lot",
 "pin-project-lite",
 "signal-hook-registry",
+ "slab",
 "socket2",
 "tokio-macros",
 "tracing",
@@ -4826,11 +4864,26 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "05ae329d1f08c4d17a59bed7ff5b5a769d062e64a62d34a3261b219e62cd5aae"
 dependencies = [
 "serde",
- "serde_spanned",
- "toml_datetime",
+ "serde_spanned 0.6.9",
+ "toml_datetime 0.6.11",
 "toml_edit 0.22.26",
 ]

+[[package]]
+name = "toml"
+version = "0.9.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ed0aee96c12fa71097902e0bb061a5e1ebd766a6636bb605ba401c45c1650eac"
+dependencies = [
+ "indexmap 2.9.0",
+ "serde",
+ "serde_spanned 1.0.0",
+ "toml_datetime 0.7.0",
+ "toml_parser",
+ "toml_writer",
+ "winnow 0.7.10",
+]
+
 [[package]]
 name = "toml_datetime"
 version = "0.6.11"
@@ -4840,6 +4893,15 @@ dependencies = [
 "serde",
 ]

+[[package]]
+name = "toml_datetime"
+version = "0.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bade1c3e902f58d73d3f294cd7f20391c1cb2fbcb643b73566bc773971df91e3"
+dependencies = [
+ "serde",
+]
+
 [[package]]
 name = "toml_edit"
 version = "0.19.15"
@@ -4847,7 +4909,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1b5bb770da30e5cbfde35a2d7b9b8a2c4b8ef89548a7a6aeab5c9a576e3e7421"
 dependencies = [
 "indexmap 2.9.0",
- "toml_datetime",
+ "toml_datetime 0.6.11",
 "winnow 0.5.40",
 ]

@@ -4858,7 +4920,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "70f427fce4d84c72b5b732388bf4a9f4531b53f74e2887e3ecb2481f68f66d81"
 dependencies = [
 "indexmap 2.9.0",
- "toml_datetime",
+ "toml_datetime 0.6.11",
 "winnow 0.5.40",
 ]

@@ -4870,18 +4932,33 @@ checksum = "310068873db2c5b3e7659d2cc35d21855dbafa50d1ce336397c666e3cb08137e"
 dependencies = [
 "indexmap 2.9.0",
 "serde",
- "serde_spanned",
- "toml_datetime",
+ "serde_spanned 0.6.9",
+ "toml_datetime 0.6.11",
 "toml_write",
 "winnow 0.7.10",
 ]

+[[package]]
+name = "toml_parser"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "97200572db069e74c512a14117b296ba0a80a30123fbbb5aa1f4a348f639ca30"
+dependencies = [
+ "winnow 0.7.10",
+]
+
 [[package]]
 name = "toml_write"
 version = "0.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5d99f8c9a7727884afe522e9bd5edbfc91a3312b36a77b5fb8926e4c31a41801"

+[[package]]
+name = "toml_writer"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fcc842091f2def52017664b53082ecbbeb5c7731092bad69d2c63050401dfd64"
+
 [[package]]
 name = "tower"
 version = "0.5.2"
@@ -4990,12 +5067,6 @@ dependencies = [
 "windows-sys 0.59.0",
 ]

-[[package]]
-name = "trim-in-place"
-version = "0.1.7"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "343e926fc669bc8cde4fa3129ab681c63671bae288b1f1081ceee6d9d37904fc"
-
 [[package]]
 name = "try-lock"
 version = "0.2.5"
@@ -5946,9 +6017,9 @@ dependencies = [

 [[package]]
 name = "zbus"
-version = "5.7.1"
+version = "5.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d3a7c7cee313d044fca3f48fa782cb750c79e4ca76ba7bc7718cd4024cdf6f68"
+checksum = "597f45e98bc7e6f0988276012797855613cd8269e23b5be62cc4e5d28b7e515d"
 dependencies = [
 "async-broadcast",
 "async-executor",
@@ -5980,9 +6051,9 @@ dependencies = [

 [[package]]
 name = "zbus_macros"
-version = "5.7.1"
+version = "5.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a17e7e5eec1550f747e71a058df81a9a83813ba0f6a95f39c4e218bdc7ba366a"
+checksum = "e5c8e4e14dcdd9d97a98b189cd1220f30e8394ad271e8c987da84f73693862c2"
 dependencies = [
 "proc-macro-crate 3.3.0",
 "proc-macro2",
@@ -6101,9 +6172,9 @@ dependencies = [

 [[package]]
 name = "zip"
-version = "4.2.0"
+version = "4.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "95ab361742de920c5535880f89bbd611ee62002bf11341d16a5f057bb8ba6899"
+checksum = "9aed4ac33e8eb078c89e6cbb1d5c4c7703ec6d299fc3e7c3695af8f8b423468b"
 dependencies = [
 "aes",
 "arbitrary",
@@ -6118,6 +6189,7 @@ dependencies = [
 "liblzma",
 "memchr",
 "pbkdf2",
+ "ppmd-rust",
 "sha1",
 "time",
 "zeroize",
@@ -6173,9 +6245,9 @@ dependencies = [

 [[package]]
 name = "zvariant"
-version = "5.5.3"
+version = "5.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9d30786f75e393ee63a21de4f9074d4c038d52c5b1bb4471f955db249f9dffb1"
+checksum = "d91b3680bb339216abd84714172b5138a4edac677e641ef17e1d8cb1b3ca6e6f"
 dependencies = [
 "endi",
 "enumflags2",
@@ -6188,9 +6260,9 @@ dependencies = [

 [[package]]
 name = "zvariant_derive"
-version = "5.5.3"
+version = "5.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "75fda702cd42d735ccd48117b1630432219c0e9616bf6cb0f8350844ee4d9580"
+checksum = "3a8c68501be459a8dbfffbe5d792acdd23b4959940fc87785fb013b32edbc208"
 dependencies = [
 "proc-macro-crate 3.3.0",
 "proc-macro2",
@@ -1,6 +1,6 @@
 [package]
 name = "donutbrowser"
-version = "0.6.0"
+version = "0.7.2"
 description = "Simple Yet Powerful Browser Orchestrator"
 authors = ["zhom@github"]
 edition = "2021"
@@ -30,13 +30,16 @@ tauri-plugin-dialog = "2"
 tauri-plugin-macos-permissions = "2"
 directories = "6"
 reqwest = { version = "0.12", features = ["json", "stream"] }
-tokio = { version = "1", features = ["full"] }
-sysinfo = "0.35"
+tokio = { version = "1", features = ["full", "sync"] }
+sysinfo = "0.36"
 lazy_static = "1.4"
 base64 = "0.22"
 async-trait = "0.1"
 futures-util = "0.3"
+
 uuid = { version = "1.0", features = ["v4", "serde"] }
+url = "2.5"
+chrono = { version = "0.4", features = ["serde"] }

 [target."cfg(any(target_os = \"macos\", windows, target_os = \"linux\"))".dependencies]
 tauri-plugin-single-instance = { version = "2", features = ["deep-link"] }
@@ -9,21 +9,21 @@ use std::time::{SystemTime, UNIX_EPOCH};
 use crate::browser::GithubRelease;

 #[derive(Debug, Clone, PartialEq, Eq)]
-struct VersionComponent {
-  major: u32,
-  minor: u32,
-  patch: u32,
-  pre_release: Option<PreRelease>,
+pub struct VersionComponent {
+  pub major: u32,
+  pub minor: u32,
+  pub patch: u32,
+  pub pre_release: Option<PreRelease>,
 }

 #[derive(Debug, Clone, PartialEq, Eq)]
-struct PreRelease {
-  kind: PreReleaseKind,
-  number: Option<u32>,
+pub struct PreRelease {
+  pub kind: PreReleaseKind,
+  pub number: Option<u32>,
 }

 #[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord)]
-enum PreReleaseKind {
+pub enum PreReleaseKind {
  Alpha,
  Beta,
  RC,
@@ -32,7 +32,7 @@ enum PreReleaseKind {
 }

 impl VersionComponent {
-  fn parse(version: &str) -> Self {
+  pub fn parse(version: &str) -> Self {
    let version = version.trim();

    // Handle special case for Zen Browser twilight releases
@@ -259,6 +259,10 @@ pub fn is_browser_version_nightly(
      // Chromium builds are generally stable snapshots
      false
    }
+    "camoufox" => {
+      // For Camoufox, beta versions are actually the stable releases
+      false
+    }
    _ => {
      // Default fallback
      is_nightly_version(version)
@@ -856,6 +860,31 @@ impl ApiClient {
  }

  /// Check if a Brave release has compatible assets for the given platform and architecture
+  fn has_compatible_camoufox_asset(
+    &self,
+    assets: &[crate::browser::GithubAsset],
+    os: &str,
+    arch: &str,
+  ) -> bool {
+    let (os_name, arch_name) = match (os, arch) {
+      ("windows", "x64") => ("win", "x86_64"),
+      ("windows", "arm64") => ("win", "arm64"),
+      ("linux", "x64") => ("lin", "x86_64"),
+      ("linux", "arm64") => ("lin", "arm64"),
+      ("macos", "x64") => ("mac", "x86_64"),
+      ("macos", "arm64") => ("mac", "arm64"),
+      _ => return false,
+    };
+
+    // Look for assets matching the pattern: camoufox-{version}-{release}-{os}.{arch}.zip
+    assets.iter().any(|asset| {
+      let name = asset.name.to_lowercase();
+      name.starts_with("camoufox-")
+        && name.contains(&format!("-{os_name}.{arch_name}.zip"))
+        && name.ends_with(".zip")
+    })
+  }
+
  fn has_compatible_brave_asset(
    assets: &[crate::browser::GithubAsset],
    os: &str,
@@ -996,6 +1025,128 @@ impl ApiClient {
    )
  }

+  pub async fn fetch_camoufox_releases_with_caching(
+    &self,
+    no_caching: bool,
+  ) -> Result<Vec<GithubRelease>, Box<dyn std::error::Error + Send + Sync>> {
+    // Check cache first (unless bypassing)
+    if !no_caching {
+      if let Some(cached_releases) = self.load_cached_github_releases("camoufox") {
+        println!(
+          "Using cached Camoufox releases, count: {}",
+          cached_releases.len()
+        );
+        return Ok(cached_releases);
+      }
+    }
+
+    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!(
+      "Fetched {} total Camoufox releases from GitHub",
+      releases.len()
+    );
+
+    // Get platform info to filter appropriate releases
+    let (os, arch) = Self::get_platform_info();
+    println!("Filtering for platform: {os}/{arch}");
+
+    // Filter releases that have assets compatible with the current platform
+    let mut compatible_releases: Vec<GithubRelease> = releases
+      .into_iter()
+      .enumerate()
+      .filter_map(|(i, release)| {
+        let has_compatible = self.has_compatible_camoufox_asset(&release.assets, &os, &arch);
+        if !has_compatible {
+          println!(
+            "Release {} ({}) has no compatible assets for {}/{}",
+            i, release.tag_name, os, arch
+          );
+          println!(
+            "  Available assets: {:?}",
+            release.assets.iter().map(|a| &a.name).collect::<Vec<_>>()
+          );
+        }
+        if has_compatible {
+          Some(release)
+        } else {
+          None
+        }
+      })
+      .collect();
+
+    println!(
+      "After platform filtering: {} compatible releases",
+      compatible_releases.len()
+    );
+
+    // Sort by version (latest first) with debugging
+    println!(
+      "Before sorting: {:?}",
+      compatible_releases
+        .iter()
+        .map(|r| &r.tag_name)
+        .take(10)
+        .collect::<Vec<_>>()
+    );
+    sort_github_releases(&mut compatible_releases);
+    println!(
+      "After sorting: {:?}",
+      compatible_releases
+        .iter()
+        .map(|r| &r.tag_name)
+        .take(10)
+        .collect::<Vec<_>>()
+    );
+
+    // Cache the results (unless bypassing cache)
+    if !no_caching {
+      if let Err(e) = self.save_cached_github_releases("camoufox", &compatible_releases) {
+        eprintln!("Failed to cache Camoufox releases: {e}");
+      } else {
+        println!("Cached {} Camoufox releases", compatible_releases.len());
+      }
+    }
+
+    Ok(compatible_releases)
+  }
+
  pub async fn fetch_tor_releases_with_caching(
    &self,
    no_caching: bool,
@@ -1798,4 +1949,115 @@ mod tests {
    let result = client.fetch_zen_releases_with_caching(true).await;
    assert!(result.is_err());
  }
+
+  #[test]
+  fn test_camoufox_beta_version_parsing() {
+    // Test specific Camoufox beta versions that are causing issues
+    let v22 = VersionComponent::parse("135.0.5beta22");
+    let v24 = VersionComponent::parse("135.0.5beta24");
+
+    println!("v22: {v22:?}");
+    println!("v24: {v24:?}");
+
+    // v24 should be greater than v22
+    assert!(
+      v24 > v22,
+      "135.0.5beta24 should be greater than 135.0.5beta22"
+    );
+
+    // Test other beta version combinations
+    let v1 = VersionComponent::parse("135.0.5beta1");
+    let v2 = VersionComponent::parse("135.0.5beta2");
+    assert!(v2 > v1, "135.0.5beta2 should be greater than 135.0.5beta1");
+
+    // Test sorting of multiple versions
+    let mut versions = vec![
+      "135.0.5beta22".to_string(),
+      "135.0.5beta24".to_string(),
+      "135.0.5beta23".to_string(),
+      "135.0.5beta21".to_string(),
+    ];
+
+    sort_versions(&mut versions);
+
+    println!("Sorted versions: {versions:?}");
+
+    // Should be sorted from newest to oldest
+    assert_eq!(versions[0], "135.0.5beta24");
+    assert_eq!(versions[1], "135.0.5beta23");
+    assert_eq!(versions[2], "135.0.5beta22");
+    assert_eq!(versions[3], "135.0.5beta21");
+  }
+
+  #[test]
+  fn test_camoufox_user_reported_versions() {
+    // Test the exact versions reported by the user: 135.0.1beta24 vs 135.0beta22
+    let v22 = VersionComponent::parse("135.0beta22");
+    let v24 = VersionComponent::parse("135.0.1beta24");
+
+    println!("User reported v22: {v22:?}");
+    println!("User reported v24: {v24:?}");
+
+    // 135.0.1beta24 should be greater than 135.0beta22 (newer patch version)
+    assert!(
+      v24 > v22,
+      "135.0.1beta24 should be greater than 135.0beta22, but got: v24={v24:?} vs v22={v22:?}"
+    );
+
+    // Test sorting of the exact user-reported versions
+    let mut versions = vec!["135.0beta22".to_string(), "135.0.1beta24".to_string()];
+
+    sort_versions(&mut versions);
+
+    println!("User reported sorted versions: {versions:?}");
+
+    // Should be sorted from newest to oldest
+    assert_eq!(
+      versions[0], "135.0.1beta24",
+      "135.0.1beta24 should be first (newest)"
+    );
+    assert_eq!(
+      versions[1], "135.0beta22",
+      "135.0beta22 should be second (older)"
+    );
+  }
+
+  #[test]
+  fn test_camoufox_version_classification() {
+    // Test that Camoufox beta versions are now correctly classified as stable (not nightly)
+    assert!(
+      !is_browser_version_nightly("camoufox", "135.0beta22", None),
+      "135.0beta22 should be classified as stable for Camoufox"
+    );
+    assert!(
+      !is_browser_version_nightly("camoufox", "135.0.1beta24", None),
+      "135.0.1beta24 should be classified as stable for Camoufox"
+    );
+
+    // Test with release names too - beta releases should be stable
+    assert!(
+      !is_browser_version_nightly("camoufox", "135.0beta22", Some("Release Beta 22")),
+      "Release with 'Beta' in name should be classified as stable for Camoufox"
+    );
+
+    // Test that stable versions are not classified as nightly
+    assert!(
+      !is_browser_version_nightly("camoufox", "135.0", None),
+      "135.0 should be classified as stable"
+    );
+    assert!(
+      !is_browser_version_nightly("camoufox", "135.0.1", None),
+      "135.0.1 should be classified as stable"
+    );
+
+    // Test alpha and RC versions are still considered nightly
+    assert!(
+      !is_browser_version_nightly("camoufox", "136.0alpha1", None),
+      "136.0alpha1 should not be classified as nightly/prerelease"
+    );
+    assert!(
+      !is_browser_version_nightly("camoufox", "136.0rc1", None),
+      "136.0rc1 should not be classified as nightly/prerelease"
+    );
+  }
 }
@@ -455,7 +455,7 @@ impl AppAutoUpdater {
            percentage: Some(percentage),
            speed: Some(format!("{speed:.1}")),
            eta: Some(eta),
-            message: format!("Downloading update... {percentage:.1}%"),
+            message: "Downloading update...".to_string(),
          },
        );

@@ -370,12 +370,15 @@ impl AutoUpdater {
    let mut registry = crate::downloaded_browsers::DownloadedBrowsersRegistry::load()
      .map_err(|e| format!("Failed to load browser registry: {e}"))?;

-    // Get active browser versions
+    // Get active browser versions (all profiles)
    let active_versions = registry.get_active_browser_versions(&profiles);

-    // Cleanup unused binaries
+    // 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)
+      .cleanup_unused_binaries(&active_versions, &running_versions)
      .map_err(|e| format!("Failed to cleanup unused binaries: {e}"))?;

    // Save updated registry
@@ -407,22 +410,17 @@ impl AutoUpdater {
  }

  fn is_version_newer(&self, version1: &str, version2: &str) -> bool {
-    self.compare_versions(version1, version2) == std::cmp::Ordering::Greater
+    // 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
  }

  fn compare_versions(&self, version1: &str, version2: &str) -> std::cmp::Ordering {
-    // Basic semantic version comparison
-    let v1_parts = self.parse_version(version1);
-    let v2_parts = self.parse_version(version2);
-
-    v1_parts.cmp(&v2_parts)
-  }
-
-  fn parse_version(&self, version: &str) -> Vec<u32> {
-    version
-      .split(&['.', 'a', 'b', '-', '_'][..])
-      .filter_map(|part| part.parse::<u32>().ok())
-      .collect()
+    // 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)
  }

  fn get_auto_update_state_file(&self) -> PathBuf {
@@ -522,6 +520,8 @@ mod tests {
      proxy_id: None,
      last_launch: None,
      release_type: "stable".to_string(),
+      camoufox_config: None,
+      group_id: None,
    }
  }

@@ -569,6 +569,68 @@ mod tests {
    assert!(!updater.is_version_newer("1.0.0", "1.0.0"));
  }

+  #[test]
+  fn test_camoufox_beta_version_comparison() {
+    let updater = AutoUpdater::new();
+
+    // Test the exact user-reported scenario: 135.0.1beta24 vs 135.0beta22
+    assert!(
+      updater.is_version_newer("135.0.1beta24", "135.0beta22"),
+      "135.0.1beta24 should be newer than 135.0beta22"
+    );
+
+    assert_eq!(
+      updater.compare_versions("135.0.1beta24", "135.0beta22"),
+      std::cmp::Ordering::Greater,
+      "135.0.1beta24 should compare as greater than 135.0beta22"
+    );
+
+    // Test other camoufox beta version combinations
+    assert!(
+      updater.is_version_newer("135.0.5beta24", "135.0.5beta22"),
+      "135.0.5beta24 should be newer than 135.0.5beta22"
+    );
+
+    assert!(
+      updater.is_version_newer("135.0.1beta1", "135.0beta1"),
+      "135.0.1beta1 should be newer than 135.0beta1 due to patch version"
+    );
+
+    // Test that older versions are not considered newer
+    assert!(
+      !updater.is_version_newer("135.0beta22", "135.0.1beta24"),
+      "135.0beta22 should NOT be newer than 135.0.1beta24"
+    );
+  }
+
+  #[test]
+  fn test_beta_version_ordering_comprehensive() {
+    let updater = AutoUpdater::new();
+
+    // Test various beta version patterns that could appear in camoufox
+    let test_cases = vec![
+      ("135.0.1beta24", "135.0beta22", true),   // User reported case
+      ("135.0.5beta24", "135.0.5beta22", true), // Same patch, different beta
+      ("135.1beta1", "135.0beta99", true),      // Higher minor beats beta number
+      ("136.0beta1", "135.9.9beta99", true),    // Higher major beats everything
+      ("135.0.1beta1", "135.0beta1", true),     // Patch version matters
+      ("135.0beta22", "135.0.1beta24", false),  // Reverse of user case
+    ];
+
+    for (newer, older, should_be_newer) in test_cases {
+      let result = updater.is_version_newer(newer, older);
+      assert_eq!(
+        result,
+        should_be_newer,
+        "Expected {} {} {} but got {}",
+        newer,
+        if should_be_newer { ">" } else { "<=" },
+        older,
+        if result { "true" } else { "false" }
+      );
+    }
+  }
+
  #[test]
  fn test_check_profile_update_stable_to_stable() {
    let updater = AutoUpdater::new();
@@ -853,15 +915,4 @@ mod tests {
    let loaded_state: AutoUpdateState = serde_json::from_str(&content).unwrap();
    assert_eq!(loaded_state.pending_updates.len(), 0);
  }
-
-  #[test]
-  fn test_parse_version() {
-    let updater = AutoUpdater::new();
-
-    assert_eq!(updater.parse_version("1.2.3"), vec![1, 2, 3]);
-    assert_eq!(updater.parse_version("1.2.3-alpha"), vec![1, 2, 3]);
-    assert_eq!(updater.parse_version("1.2.3a1"), vec![1, 2, 3, 1]);
-    assert_eq!(updater.parse_version("1.2.3b2"), vec![1, 2, 3, 2]);
-    assert_eq!(updater.parse_version("10.0.0"), vec![10, 0, 0]);
-  }
 }
@@ -19,6 +19,7 @@ pub enum BrowserType {
  Brave,
  Zen,
  TorBrowser,
+  Camoufox,
 }

 impl BrowserType {
@@ -31,6 +32,7 @@ impl BrowserType {
      BrowserType::Brave => "brave",
      BrowserType::Zen => "zen",
      BrowserType::TorBrowser => "tor-browser",
+      BrowserType::Camoufox => "camoufox",
    }
  }

@@ -43,6 +45,7 @@ impl BrowserType {
      "brave" => Ok(BrowserType::Brave),
      "zen" => Ok(BrowserType::Zen),
      "tor-browser" => Ok(BrowserType::TorBrowser),
+      "camoufox" => Ok(BrowserType::Camoufox),
      _ => Err(format!("Unknown browser type: {s}")),
    }
  }
@@ -89,6 +92,7 @@ mod macos {
          || name.starts_with("mullvad")
          || name.starts_with("zen")
          || name.starts_with("tor")
+          || name.starts_with("camoufox")
          || name.contains("Browser")
      })
      .map(|entry| entry.path())
@@ -192,6 +196,12 @@ mod linux {
          browser_subdir.join("firefox-bin"),
        ]
      }
+      BrowserType::Camoufox => {
+        vec![
+          browser_subdir.join("camoufox-bin"),
+          browser_subdir.join("camoufox"),
+        ]
+      }
      _ => vec![],
    };

@@ -274,6 +284,12 @@ mod linux {
          browser_subdir.join("firefox"),
        ]
      }
+      BrowserType::Camoufox => {
+        vec![
+          browser_subdir.join("camoufox-bin"),
+          browser_subdir.join("camoufox"),
+        ]
+      }
      _ => vec![],
    };

@@ -358,6 +374,7 @@ mod windows {
            || name.starts_with("mullvad")
            || name.starts_with("zen")
            || name.starts_with("tor")
+            || name.starts_with("camoufox")
            || name.contains("browser")
          {
            return Ok(path);
@@ -436,6 +453,7 @@ mod windows {
            || name.starts_with("mullvad")
            || name.starts_with("zen")
            || name.starts_with("tor")
+            || name.starts_with("camoufox")
            || name.contains("browser")
          {
            return true;
@@ -532,7 +550,10 @@ impl Browser for FirefoxBrowser {
      BrowserType::MullvadBrowser | BrowserType::TorBrowser => {
        args.push("-no-remote".to_string());
      }
-      BrowserType::Firefox | BrowserType::FirefoxDeveloper | BrowserType::Zen => {
+      BrowserType::Firefox
+      | BrowserType::FirefoxDeveloper
+      | BrowserType::Zen
+      | BrowserType::Camoufox => {
        // Don't use -no-remote so we can communicate with existing instances
      }
      _ => {}
@@ -693,6 +714,81 @@ impl Browser for ChromiumBrowser {
  }
 }

+pub struct CamoufoxBrowser;
+
+impl CamoufoxBrowser {
+  pub fn new() -> Self {
+    Self
+  }
+}
+
+impl Browser for CamoufoxBrowser {
+  fn get_executable_path(&self, install_dir: &Path) -> Result<PathBuf, Box<dyn std::error::Error>> {
+    #[cfg(target_os = "macos")]
+    return macos::get_firefox_executable_path(install_dir);
+
+    #[cfg(target_os = "linux")]
+    return linux::get_firefox_executable_path(install_dir, &BrowserType::Camoufox);
+
+    #[cfg(target_os = "windows")]
+    return windows::get_firefox_executable_path(install_dir);
+
+    #[cfg(not(any(target_os = "macos", target_os = "linux", target_os = "windows")))]
+    Err("Unsupported platform".into())
+  }
+
+  fn create_launch_args(
+    &self,
+    profile_path: &str,
+    _proxy_settings: Option<&ProxySettings>,
+    url: Option<String>,
+  ) -> 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
+    let mut args = vec![
+      "-profile".to_string(),
+      profile_path.to_string(),
+      "-no-remote".to_string(),
+    ];
+
+    if let Some(url) = url {
+      args.push(url);
+    }
+
+    Ok(args)
+  }
+
+  fn is_version_downloaded(&self, version: &str, binaries_dir: &Path) -> bool {
+    let install_dir = binaries_dir.join("camoufox").join(version);
+
+    #[cfg(target_os = "macos")]
+    return macos::is_firefox_version_downloaded(&install_dir);
+
+    #[cfg(target_os = "linux")]
+    return linux::is_firefox_version_downloaded(&install_dir, &BrowserType::Camoufox);
+
+    #[cfg(target_os = "windows")]
+    return windows::is_firefox_version_downloaded(&install_dir);
+
+    #[cfg(not(any(target_os = "macos", target_os = "linux", target_os = "windows")))]
+    false
+  }
+
+  fn prepare_executable(&self, executable_path: &Path) -> Result<(), Box<dyn std::error::Error>> {
+    #[cfg(target_os = "macos")]
+    return macos::prepare_executable(executable_path);
+
+    #[cfg(target_os = "linux")]
+    return linux::prepare_executable(executable_path);
+
+    #[cfg(target_os = "windows")]
+    return windows::prepare_executable(executable_path);
+
+    #[cfg(not(any(target_os = "macos", target_os = "linux", target_os = "windows")))]
+    Err("Unsupported platform".into())
+  }
+}
+
 // Factory function to create browser instances
 pub fn create_browser(browser_type: BrowserType) -> Box<dyn Browser> {
  match browser_type {
@@ -702,6 +798,7 @@ pub fn create_browser(browser_type: BrowserType) -> Box<dyn Browser> {
    | BrowserType::Zen
    | BrowserType::TorBrowser => Box::new(FirefoxBrowser::new(browser_type)),
    BrowserType::Chromium | BrowserType::Brave => Box::new(ChromiumBrowser::new(browser_type)),
+    BrowserType::Camoufox => Box::new(CamoufoxBrowser::new()),
  }
 }

@@ -778,6 +875,7 @@ mod tests {
    assert_eq!(BrowserType::Brave.as_str(), "brave");
    assert_eq!(BrowserType::Zen.as_str(), "zen");
    assert_eq!(BrowserType::TorBrowser.as_str(), "tor-browser");
+    assert_eq!(BrowserType::Camoufox.as_str(), "camoufox");

    // Test from_str
    assert_eq!(
@@ -802,6 +900,10 @@ mod tests {
      BrowserType::from_str("tor-browser").unwrap(),
      BrowserType::TorBrowser
    );
+    assert_eq!(
+      BrowserType::from_str("camoufox").unwrap(),
+      BrowserType::Camoufox
+    );

    // Test invalid browser type
    assert!(BrowserType::from_str("invalid").is_err());
@@ -87,6 +87,10 @@ impl BrowserVersionService {
          Ok(true)
        }
      }
+      "camoufox" => {
+        // Camoufox supports all platforms and architectures according to the JS code
+        Ok(true)
+      }
      _ => Err(format!("Unknown browser: {browser}").into()),
    }
  }
@@ -101,6 +105,7 @@ impl BrowserVersionService {
      "brave",
      "chromium",
      "tor-browser",
+      "camoufox",
    ];

    all_browsers
@@ -237,6 +242,7 @@ impl BrowserVersionService {
      "brave" => self.fetch_brave_versions(true).await?,
      "chromium" => self.fetch_chromium_versions(true).await?,
      "tor-browser" => self.fetch_tor_versions(true).await?,
+      "camoufox" => self.fetch_camoufox_versions(true).await?,
      _ => return Err(format!("Unsupported browser: {browser}").into()),
    };

@@ -454,6 +460,27 @@ impl BrowserVersionService {
          })
          .collect()
      }
+      "camoufox" => {
+        let releases = self.fetch_camoufox_releases_detailed(true).await?;
+        merged_versions
+          .into_iter()
+          .map(|version| {
+            if let Some(release) = releases.iter().find(|r| r.tag_name == version) {
+              BrowserVersionInfo {
+                version: release.tag_name.clone(),
+                is_prerelease: release.is_nightly,
+                date: release.published_at.clone(),
+              }
+            } else {
+              BrowserVersionInfo {
+                version: version.clone(),
+                is_prerelease: false, // Camoufox usually stable releases
+                date: "".to_string(),
+              }
+            }
+          })
+          .collect()
+      }
      _ => {
        return Err(format!("Unsupported browser: {browser}").into());
      }
@@ -727,6 +754,32 @@ impl BrowserVersionService {
          is_archive,
        })
      }
+      "camoufox" => {
+        // Camoufox downloads from GitHub releases with pattern: camoufox-{version}-{release}-{os}.{arch}.zip
+        let (os_name, arch_name) = match (&os[..], &arch[..]) {
+          ("windows", "x64") => ("win", "x86_64"),
+          ("windows", "arm64") => ("win", "arm64"),
+          ("linux", "x64") => ("lin", "x86_64"),
+          ("linux", "arm64") => ("lin", "arm64"),
+          ("macos", "x64") => ("mac", "x86_64"),
+          ("macos", "arm64") => ("mac", "arm64"),
+          _ => {
+            return Err(
+              format!("Unsupported platform/architecture for Camoufox: {os}/{arch}").into(),
+            )
+          }
+        };
+
+        // Note: We provide a placeholder URL here since Camoufox requires dynamic resolution
+        // The actual URL will be resolved in download.rs resolve_download_url
+        Ok(DownloadInfo {
+          url: format!(
+            "https://github.com/daijro/camoufox/releases/download/{version}/camoufox-{{version}}-{{release}}-{os_name}.{arch_name}.zip"
+          ),
+          filename: format!("camoufox-{version}-{os_name}.{arch_name}.zip"),
+          is_archive: true,
+        })
+      }
      _ => Err(format!("Unsupported browser: {browser}").into()),
    }
  }
@@ -889,6 +942,24 @@ impl BrowserVersionService {
      .fetch_tor_releases_with_caching(no_caching)
      .await
  }
+
+  async fn fetch_camoufox_versions(
+    &self,
+    no_caching: bool,
+  ) -> Result<Vec<String>, Box<dyn std::error::Error + Send + Sync>> {
+    let releases = self.fetch_camoufox_releases_detailed(no_caching).await?;
+    Ok(releases.into_iter().map(|r| r.tag_name).collect())
+  }
+
+  async fn fetch_camoufox_releases_detailed(
+    &self,
+    no_caching: bool,
+  ) -> Result<Vec<GithubRelease>, Box<dyn std::error::Error + Send + Sync>> {
+    self
+      .api_client
+      .fetch_camoufox_releases_with_caching(no_caching)
+      .await
+  }
 }

 #[cfg(test)]
@@ -605,9 +605,25 @@ pub async fn smart_open_url(
        }
      }

-      // For Mullvad browser: skip if running (can't open URLs in running Mullvad)
+      // For Mullvad browser: Check if any other Mullvad browser is running
      if profile.browser == "mullvad-browser" {
-        continue;
+        let mut other_mullvad_running = false;
+        for p in &profiles {
+          if p.browser == "mullvad-browser"
+            && p.name != profile.name
+            && runner
+              .check_browser_status(app_handle.clone(), p)
+              .await
+              .unwrap_or(false)
+          {
+            other_mullvad_running = true;
+            break;
+          }
+        }
+
+        if other_mullvad_running {
+          continue; // Skip this one, can't have multiple Mullvad instances
+        }
      }

      // Try to open the URL with this running profile
@@ -147,6 +147,30 @@ impl Downloader {

        Ok(asset_url)
      }
+      BrowserType::Camoufox => {
+        // For Camoufox, verify the asset exists and find the correct download URL
+        let releases = self
+          .api_client
+          .fetch_camoufox_releases_with_caching(true)
+          .await?;
+
+        let release = releases
+          .iter()
+          .find(|r| r.tag_name == version)
+          .ok_or(format!("Camoufox version {version} not found"))?;
+
+        // Get platform and architecture info
+        let (os, arch) = Self::get_platform_info();
+
+        // Find the appropriate asset
+        let asset_url = self
+          .find_camoufox_asset(&release.assets, &os, &arch)
+          .ok_or(format!(
+            "No compatible asset found for Camoufox version {version} on {os}/{arch}"
+          ))?;
+
+        Ok(asset_url)
+      }
      _ => {
        // For other browsers, use the provided URL
        Ok(download_info.url.clone())
@@ -321,6 +345,35 @@ impl Downloader {
    asset.map(|a| a.browser_download_url.clone())
  }

+  /// Find the appropriate Camoufox asset for the current platform and architecture
+  fn find_camoufox_asset(
+    &self,
+    assets: &[crate::browser::GithubAsset],
+    os: &str,
+    arch: &str,
+  ) -> Option<String> {
+    // Camoufox asset naming pattern: camoufox-{version}-{release}-{os}.{arch}.zip
+    let (os_name, arch_name) = match (os, arch) {
+      ("windows", "x64") => ("win", "x86_64"),
+      ("windows", "arm64") => ("win", "arm64"),
+      ("linux", "x64") => ("lin", "x86_64"),
+      ("linux", "arm64") => ("lin", "arm64"),
+      ("macos", "x64") => ("mac", "x86_64"),
+      ("macos", "arm64") => ("mac", "arm64"),
+      _ => return None,
+    };
+
+    // Look for assets matching the pattern
+    let asset = assets.iter().find(|asset| {
+      let name = asset.name.to_lowercase();
+      name.starts_with("camoufox-")
+        && name.contains(&format!("-{os_name}.{arch_name}.zip"))
+        && name.ends_with(".zip")
+    });
+
+    asset.map(|a| a.browser_download_url.clone())
+  }
+
  pub async fn download_browser<R: tauri::Runtime>(
    &self,
    app_handle: &tauri::AppHandle<R>,
@@ -8,13 +8,7 @@ use std::path::PathBuf;
 pub struct DownloadedBrowserInfo {
  pub browser: String,
  pub version: String,
-  pub download_date: u64,
  pub file_path: PathBuf,
-  pub verified: bool,
-  pub actual_version: Option<String>, // For browsers like Chromium where we track the actual version
-  pub file_size: Option<u64>, // For tracking file size changes (useful for rolling releases)
-  #[serde(default)] // Add default value (false) for backwards compatibility
-  pub is_rolling_release: bool, // True for Zen's twilight releases and other rolling releases
 }

 #[derive(Debug, Serialize, Deserialize, Default)]
@@ -82,66 +76,39 @@ impl DownloadedBrowsersRegistry {
      .browsers
      .get(browser)
      .and_then(|versions| versions.get(version))
-      .map(|info| info.verified)
-      .unwrap_or(false)
+      .is_some()
  }

  pub fn get_downloaded_versions(&self, browser: &str) -> Vec<String> {
    self
      .browsers
      .get(browser)
-      .map(|versions| {
-        versions
-          .iter()
-          .filter(|(_, info)| info.verified)
-          .map(|(version, _)| version.clone())
-          .collect()
-      })
+      .map(|versions| versions.keys().cloned().collect())
      .unwrap_or_default()
  }

  pub fn mark_download_started(&mut self, browser: &str, version: &str, file_path: PathBuf) {
-    let is_rolling = Self::is_rolling_release(browser, version);
    let info = DownloadedBrowserInfo {
      browser: browser.to_string(),
      version: version.to_string(),
-      download_date: std::time::SystemTime::now()
-        .duration_since(std::time::UNIX_EPOCH)
-        .unwrap_or_default()
-        .as_secs(),
      file_path,
-      verified: false,
-      actual_version: None,
-      file_size: None,
-      is_rolling_release: is_rolling,
    };
    self.add_browser(info);
  }

-  pub fn mark_download_completed_with_actual_version(
-    &mut self,
-    browser: &str,
-    version: &str,
-    actual_version: Option<String>,
-  ) -> Result<(), String> {
-    if let Some(info) = self
+  pub fn mark_download_completed(&mut self, browser: &str, version: &str) -> Result<(), String> {
+    if self
      .browsers
-      .get_mut(browser)
-      .and_then(|versions| versions.get_mut(version))
+      .get(browser)
+      .and_then(|versions| versions.get(version))
+      .is_some()
    {
-      info.verified = true;
-      info.actual_version = actual_version;
      Ok(())
    } else {
      Err(format!("Browser {browser}:{version} not found in registry"))
    }
  }

-  fn is_rolling_release(browser: &str, version: &str) -> bool {
-    // Check if this is a rolling release like twilight
-    browser == "zen" && version.to_lowercase() == "twilight"
-  }
-
  pub fn cleanup_failed_download(
    &mut self,
    browser: &str,
@@ -180,32 +147,35 @@ impl DownloadedBrowsersRegistry {
  pub fn cleanup_unused_binaries(
    &mut 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();
    for (browser, versions) in &self.browsers {
-      for (version, info) in versions {
-        // Only remove verified downloads that are not used by any active profile
-        if info.verified && !active_set.contains(&(browser.clone(), version.clone())) {
-          // Double-check that this browser+version is truly not in use
-          // by looking for exact matches in the active profiles
-          let is_in_use = active_profiles
-            .iter()
-            .any(|(active_browser, active_version)| {
-              active_browser == browser && active_version == version
-            });
+      for version in versions.keys() {
+        let browser_version = (browser.clone(), version.clone());

-          if !is_in_use {
-            to_remove.push((browser.clone(), version.clone()));
-            println!("Marking for removal: {browser} {version} (not used by any profile)");
-          } else {
-            println!("Keeping: {browser} {version} (in use by profile)");
-          }
+        // 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)");
      }
    }

@@ -277,6 +247,145 @@ impl DownloadedBrowsersRegistry {

    Ok(cleaned_up)
  }
+
+  /// Get all browsers and versions that are currently running
+  pub fn get_running_browser_versions(
+    &self,
+    profiles: &[crate::browser_runner::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(
+    &mut 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(
+    &mut 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(
+    &mut 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();
+
+    for (browser_str, versions) in &self.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)
+  }
 }

 #[cfg(test)]
@@ -295,12 +404,7 @@ mod tests {
    let info = DownloadedBrowserInfo {
      browser: "firefox".to_string(),
      version: "139.0".to_string(),
-      download_date: 1234567890,
      file_path: PathBuf::from("/test/path"),
-      verified: true,
-      actual_version: None,
-      file_size: None,
-      is_rolling_release: false,
    };

    registry.add_browser(info.clone());
@@ -317,34 +421,19 @@ mod tests {
    let info1 = DownloadedBrowserInfo {
      browser: "firefox".to_string(),
      version: "139.0".to_string(),
-      download_date: 1234567890,
      file_path: PathBuf::from("/test/path1"),
-      verified: true,
-      actual_version: None,
-      file_size: None,
-      is_rolling_release: false,
    };

    let info2 = DownloadedBrowserInfo {
      browser: "firefox".to_string(),
      version: "140.0".to_string(),
-      download_date: 1234567891,
      file_path: PathBuf::from("/test/path2"),
-      verified: false, // Not verified, should not be included
-      actual_version: None,
-      file_size: None,
-      is_rolling_release: false,
    };

    let info3 = DownloadedBrowserInfo {
      browser: "firefox".to_string(),
      version: "141.0".to_string(),
-      download_date: 1234567892,
      file_path: PathBuf::from("/test/path3"),
-      verified: true,
-      actual_version: None,
-      file_size: None,
-      is_rolling_release: false,
    };

    registry.add_browser(info1);
@@ -352,10 +441,10 @@ mod tests {
    registry.add_browser(info3);

    let versions = registry.get_downloaded_versions("firefox");
-    assert_eq!(versions.len(), 2);
+    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()));
-    assert!(!versions.contains(&"140.0".to_string()));
  }

  #[test]
@@ -365,15 +454,15 @@ mod tests {
    // Mark download started
    registry.mark_download_started("firefox", "139.0", PathBuf::from("/test/path"));

-    // Should not be considered downloaded yet
-    assert!(!registry.is_browser_downloaded("firefox", "139.0"));
+    // Should be considered downloaded immediately
+    assert!(registry.is_browser_downloaded("firefox", "139.0"));

    // Mark as completed
    registry
-      .mark_download_completed_with_actual_version("firefox", "139.0", Some("139.0".to_string()))
+      .mark_download_completed("firefox", "139.0")
      .unwrap();

-    // Now should be considered downloaded
+    // Should still be considered downloaded
    assert!(registry.is_browser_downloaded("firefox", "139.0"));
  }

@@ -383,12 +472,7 @@ mod tests {
    let info = DownloadedBrowserInfo {
      browser: "firefox".to_string(),
      version: "139.0".to_string(),
-      download_date: 1234567890,
      file_path: PathBuf::from("/test/path"),
-      verified: true,
-      actual_version: None,
-      file_size: None,
-      is_rolling_release: false,
    };

    registry.add_browser(info);
@@ -400,15 +484,13 @@ mod tests {
  }

  #[test]
-  fn test_twilight_rolling_release() {
+  fn test_twilight_download() {
    let mut registry = DownloadedBrowsersRegistry::new();

    // Mark twilight download started
    registry.mark_download_started("zen", "twilight", PathBuf::from("/test/zen-twilight"));

-    // Check that it's marked as rolling release
-    let zen_versions = &registry.browsers["zen"];
-    let twilight_info = &zen_versions["twilight"];
-    assert!(twilight_info.is_rolling_release);
+    // Check that it's registered
+    assert!(registry.is_browser_downloaded("zen", "twilight"));
  }
 }
@@ -0,0 +1,171 @@
+use crate::browser::GithubRelease;
+use directories::BaseDirs;
+use reqwest::Client;
+use serde::{Deserialize, Serialize};
+use std::path::PathBuf;
+use tauri::Emitter;
+use tokio::fs;
+use tokio::io::AsyncWriteExt;
+
+const MMDB_REPO: &str = "P3TERX/GeoLite.mmdb";
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct GeoIPDownloadProgress {
+  pub stage: String, // "downloading", "extracting", "completed"
+  pub percentage: f64,
+  pub message: String,
+}
+
+pub struct GeoIPDownloader {
+  client: Client,
+}
+
+impl GeoIPDownloader {
+  pub fn new() -> Self {
+    Self {
+      client: Client::new(),
+    }
+  }
+
+  fn get_cache_dir() -> Result<PathBuf, Box<dyn std::error::Error + Send + Sync>> {
+    let base_dirs = BaseDirs::new().ok_or("Failed to determine base directories")?;
+
+    #[cfg(target_os = "windows")]
+    let cache_dir = base_dirs
+      .data_local_dir()
+      .join("camoufox")
+      .join("camoufox")
+      .join("Cache");
+
+    #[cfg(target_os = "macos")]
+    let cache_dir = base_dirs.cache_dir().join("camoufox");
+
+    #[cfg(target_os = "linux")]
+    let cache_dir = base_dirs.cache_dir().join("camoufox");
+
+    #[cfg(not(any(target_os = "windows", target_os = "macos", target_os = "linux")))]
+    let cache_dir = base_dirs.cache_dir().join("camoufox");
+
+    Ok(cache_dir)
+  }
+
+  fn get_mmdb_file_path() -> Result<PathBuf, Box<dyn std::error::Error + Send + Sync>> {
+    Ok(Self::get_cache_dir()?.join("GeoLite2-City.mmdb"))
+  }
+
+  pub fn is_geoip_database_available() -> bool {
+    if let Ok(mmdb_path) = Self::get_mmdb_file_path() {
+      mmdb_path.exists()
+    } else {
+      false
+    }
+  }
+
+  fn find_city_mmdb_asset(&self, release: &GithubRelease) -> Option<String> {
+    for asset in &release.assets {
+      if asset.name.ends_with("-City.mmdb") {
+        return Some(asset.browser_download_url.clone());
+      }
+    }
+    None
+  }
+
+  pub async fn download_geoip_database(
+    &self,
+    app_handle: &tauri::AppHandle,
+  ) -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
+    // Emit initial progress
+    let _ = app_handle.emit(
+      "geoip-download-progress",
+      GeoIPDownloadProgress {
+        stage: "downloading".to_string(),
+        percentage: 0.0,
+        message: "Starting GeoIP database download".to_string(),
+      },
+    );
+
+    // Fetch latest release from GitHub
+    let releases = self.fetch_geoip_releases().await?;
+    let latest_release = releases.first().ok_or("No GeoIP database releases found")?;
+
+    let download_url = self
+      .find_city_mmdb_asset(latest_release)
+      .ok_or("No compatible GeoIP database asset found")?;
+
+    // Create cache directory
+    let cache_dir = Self::get_cache_dir()?;
+    fs::create_dir_all(&cache_dir).await?;
+
+    let mmdb_path = Self::get_mmdb_file_path()?;
+
+    // Download the file
+    let response = self.client.get(&download_url).send().await?;
+
+    if !response.status().is_success() {
+      return Err(
+        format!(
+          "Failed to download GeoIP database: HTTP {}",
+          response.status()
+        )
+        .into(),
+      );
+    }
+
+    let total_size = response.content_length().unwrap_or(0);
+    let mut downloaded = 0;
+    let mut file = fs::File::create(&mmdb_path).await?;
+    let mut stream = response.bytes_stream();
+
+    use futures_util::StreamExt;
+    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 _ = app_handle.emit(
+          "geoip-download-progress",
+          GeoIPDownloadProgress {
+            stage: "downloading".to_string(),
+            percentage,
+            message: format!("Downloaded {downloaded} / {total_size} bytes"),
+          },
+        );
+      }
+    }
+
+    file.flush().await?;
+
+    // Emit completion
+    let _ = app_handle.emit(
+      "geoip-download-progress",
+      GeoIPDownloadProgress {
+        stage: "completed".to_string(),
+        percentage: 100.0,
+        message: "GeoIP database download completed".to_string(),
+      },
+    );
+
+    Ok(())
+  }
+
+  async fn fetch_geoip_releases(
+    &self,
+  ) -> Result<Vec<GithubRelease>, Box<dyn std::error::Error + Send + Sync>> {
+    let url = format!("https://api.github.com/repos/{MMDB_REPO}/releases");
+    let response = self
+      .client
+      .get(&url)
+      .header("User-Agent", "Mozilla/5.0 (compatible; donutbrowser)")
+      .send()
+      .await?;
+
+    if !response.status().is_success() {
+      return Err(format!("Failed to fetch releases: HTTP {}", response.status()).into());
+    }
+
+    let releases: Vec<GithubRelease> = response.json().await?;
+    Ok(releases)
+  }
+}
@@ -0,0 +1,257 @@
+use directories::BaseDirs;
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use std::fs;
+use std::path::PathBuf;
+use std::sync::Mutex;
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct ProfileGroup {
+  pub id: String,
+  pub name: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct GroupWithCount {
+  pub id: String,
+  pub name: String,
+  pub count: usize,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+struct GroupsData {
+  groups: Vec<ProfileGroup>,
+}
+
+pub struct GroupManager {
+  base_dirs: BaseDirs,
+}
+
+impl GroupManager {
+  pub fn new() -> Self {
+    Self {
+      base_dirs: BaseDirs::new().expect("Failed to get base directories"),
+    }
+  }
+
+  fn get_groups_file_path(&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("data");
+    path.push("groups.json");
+    path
+  }
+
+  fn load_groups_data(&self) -> Result<GroupsData, Box<dyn std::error::Error>> {
+    let groups_file = self.get_groups_file_path();
+
+    if !groups_file.exists() {
+      return Ok(GroupsData { groups: Vec::new() });
+    }
+
+    let content = fs::read_to_string(groups_file)?;
+    let groups_data: GroupsData = serde_json::from_str(&content)?;
+    Ok(groups_data)
+  }
+
+  fn save_groups_data(&self, groups_data: &GroupsData) -> Result<(), Box<dyn std::error::Error>> {
+    let groups_file = self.get_groups_file_path();
+
+    // Ensure the parent directory exists
+    if let Some(parent) = groups_file.parent() {
+      fs::create_dir_all(parent)?;
+    }
+
+    let json = serde_json::to_string_pretty(groups_data)?;
+    fs::write(groups_file, json)?;
+    Ok(())
+  }
+
+  pub fn get_all_groups(&self) -> Result<Vec<ProfileGroup>, Box<dyn std::error::Error>> {
+    let groups_data = self.load_groups_data()?;
+    Ok(groups_data.groups)
+  }
+
+  pub fn create_group(&self, 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
+    if groups_data.groups.iter().any(|g| g.name == name) {
+      return Err(format!("Group with name '{name}' already exists").into());
+    }
+
+    let group = ProfileGroup {
+      id: uuid::Uuid::new_v4().to_string(),
+      name,
+    };
+
+    groups_data.groups.push(group.clone());
+    self.save_groups_data(&groups_data)?;
+
+    Ok(group)
+  }
+
+  pub fn update_group(
+    &self,
+    id: String,
+    name: String,
+  ) -> Result<ProfileGroup, Box<dyn std::error::Error>> {
+    let mut groups_data = self.load_groups_data()?;
+
+    // Check if another group with this name already exists
+    if groups_data
+      .groups
+      .iter()
+      .any(|g| g.name == name && g.id != id)
+    {
+      return Err(format!("Group with name '{name}' already exists").into());
+    }
+
+    let group = groups_data
+      .groups
+      .iter_mut()
+      .find(|g| g.id == id)
+      .ok_or_else(|| format!("Group with id '{id}' not found"))?;
+
+    group.name = name;
+    let updated_group = group.clone();
+
+    self.save_groups_data(&groups_data)?;
+    Ok(updated_group)
+  }
+
+  pub fn delete_group(&self, id: String) -> Result<(), Box<dyn std::error::Error>> {
+    let mut groups_data = self.load_groups_data()?;
+
+    let initial_len = groups_data.groups.len();
+    groups_data.groups.retain(|g| g.id != id);
+
+    if groups_data.groups.len() == initial_len {
+      return Err(format!("Group with id '{id}' not found").into());
+    }
+
+    self.save_groups_data(&groups_data)?;
+    Ok(())
+  }
+
+  pub fn get_groups_with_profile_counts(
+    &self,
+    profiles: &[crate::browser_runner::BrowserProfile],
+  ) -> Result<Vec<GroupWithCount>, Box<dyn std::error::Error>> {
+    let groups = self.get_all_groups()?;
+    let mut group_counts = HashMap::new();
+
+    // Count profiles in each group
+    for profile in profiles {
+      if let Some(group_id) = &profile.group_id {
+        *group_counts.entry(group_id.clone()).or_insert(0) += 1;
+      }
+    }
+
+    // Create result with counts
+    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,
+        });
+      }
+    }
+
+    // Add default group count (profiles without group_id)
+    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);
+    }
+
+    Ok(result)
+  }
+}
+
+// Global instance
+lazy_static::lazy_static! {
+  pub static ref GROUP_MANAGER: Mutex<GroupManager> = Mutex::new(GroupManager::new());
+}
+
+// Helper function to get groups with counts
+pub fn get_groups_with_counts(
+  profiles: &[crate::browser_runner::BrowserProfile],
+) -> Vec<GroupWithCount> {
+  let group_manager = GROUP_MANAGER.lock().unwrap();
+  group_manager
+    .get_groups_with_profile_counts(profiles)
+    .unwrap_or_default()
+}
+
+// Tauri commands
+#[tauri::command]
+pub async fn get_profile_groups() -> Result<Vec<ProfileGroup>, String> {
+  let group_manager = GROUP_MANAGER.lock().unwrap();
+  group_manager
+    .get_all_groups()
+    .map_err(|e| format!("Failed to get profile groups: {e}"))
+}
+
+#[tauri::command]
+pub async fn get_groups_with_profile_counts() -> Result<Vec<GroupWithCount>, String> {
+  let browser_runner = crate::browser_runner::BrowserRunner::new();
+  let profiles = browser_runner
+    .list_profiles()
+    .map_err(|e| format!("Failed to list profiles: {e}"))?;
+  Ok(get_groups_with_counts(&profiles))
+}
+
+#[tauri::command]
+pub async fn create_profile_group(name: String) -> Result<ProfileGroup, String> {
+  let group_manager = GROUP_MANAGER.lock().unwrap();
+  group_manager
+    .create_group(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> {
+  let group_manager = GROUP_MANAGER.lock().unwrap();
+  group_manager
+    .update_group(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> {
+  let group_manager = GROUP_MANAGER.lock().unwrap();
+  group_manager
+    .delete_group(group_id)
+    .map_err(|e| format!("Failed to delete group: {e}"))
+}
+
+#[tauri::command]
+pub async fn assign_profiles_to_group(
+  profile_names: Vec<String>,
+  group_id: Option<String>,
+) -> Result<(), String> {
+  let browser_runner = crate::browser_runner::BrowserRunner::new();
+  browser_runner
+    .assign_profiles_to_group(profile_names, 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> {
+  let browser_runner = crate::browser_runner::BrowserRunner::new();
+  browser_runner
+    .delete_multiple_profiles(profile_names)
+    .map_err(|e| format!("Failed to delete profiles: {e}"))
+}
@@ -13,13 +13,18 @@ mod auto_updater;
 mod browser;
 mod browser_runner;
 mod browser_version_service;
+mod camoufox_direct;
 mod default_browser;
 mod download;
 mod downloaded_browsers;
 mod extraction;
+mod geoip_downloader;
+mod group_manager;
+
 mod profile_importer;
 mod proxy_manager;
 mod settings_manager;
+mod system_utils;
 mod theme_detector;
 mod version_updater;

@@ -60,6 +65,13 @@ use profile_importer::{detect_existing_profiles, import_browser_profile};

 use theme_detector::get_system_theme;

+use system_utils::{get_system_locale, get_system_timezone};
+
+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,
+};
+
 // Trait to extend WebviewWindow with transparent titlebar functionality
 pub trait WindowExt {
  #[cfg(target_os = "macos")]
@@ -131,49 +143,6 @@ async fn handle_url_open(app: tauri::AppHandle, url: String) -> Result<(), Strin
  Ok(())
 }

-#[tauri::command]
-async fn check_and_handle_startup_url(app_handle: tauri::AppHandle) -> Result<bool, String> {
-  println!("check_and_handle_startup_url called");
-
-  let pending_urls = {
-    let mut pending = PENDING_URLS.lock().unwrap();
-    let urls = pending.clone();
-    pending.clear(); // Clear after getting them
-    urls
-  };
-
-  println!("Found {} pending URLs", pending_urls.len());
-
-  if !pending_urls.is_empty() {
-    println!(
-      "Handling {} pending URLs from frontend request",
-      pending_urls.len()
-    );
-
-    // Ensure the main window is visible and focused
-    if let Some(window) = app_handle.get_webview_window("main") {
-      let _ = window.show();
-      let _ = window.set_focus();
-      let _ = window.unminimize();
-
-      // Give the window a moment to become visible
-      tokio::time::sleep(tokio::time::Duration::from_millis(200)).await;
-    }
-
-    for url in pending_urls {
-      println!("Emitting show-profile-selector event for URL: {url}");
-      if let Err(e) = app_handle.emit("show-profile-selector", url.clone()) {
-        eprintln!("Failed to emit URL event: {e}");
-        return Err(format!("Failed to emit URL event: {e}"));
-      }
-    }
-
-    return Ok(true);
-  }
-
-  Ok(false)
-}
-
 #[tauri::command]
 async fn create_stored_proxy(
  name: String,
@@ -207,6 +176,17 @@ async fn delete_stored_proxy(proxy_id: String) -> Result<(), String> {
    .map_err(|e| format!("Failed to delete stored proxy: {e}"))
 }

+#[tauri::command]
+async fn update_camoufox_config(
+  profile_name: String,
+  config: crate::camoufox_direct::CamoufoxConfig,
+) -> Result<(), String> {
+  let browser_runner = browser_runner::BrowserRunner::new();
+  browser_runner
+    .update_camoufox_config(&profile_name, config)
+    .map_err(|e| format!("Failed to update Camoufox config: {e}"))
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
  let args: Vec<String> = env::args().collect();
@@ -357,6 +337,22 @@ pub fn run() {
        auto_updater::check_for_updates_with_progress(app_handle_auto_updater).await;
      });

+      // Start periodic cleanup task for unused binaries
+      tauri::async_runtime::spawn(async move {
+        let mut interval = tokio::time::interval(tokio::time::Duration::from_secs(300)); // Every 5 minutes
+
+        loop {
+          interval.tick().await;
+
+          let browser_runner = crate::browser_runner::BrowserRunner::new();
+          if let Err(e) = browser_runner.cleanup_unused_binaries_internal() {
+            eprintln!("Periodic cleanup failed: {e}");
+          } else {
+            println!("Periodic cleanup completed successfully");
+          }
+        }
+      });
+
      let app_handle_update = app.handle().clone();
      tauri::async_runtime::spawn(async move {
        println!("Starting app update check at startup...");
@@ -383,6 +379,66 @@ pub fn run() {
        }
      });

+      // Start Camoufox cleanup task
+      let app_handle_cleanup = app.handle().clone();
+      tauri::async_runtime::spawn(async move {
+        let launcher = crate::camoufox_direct::CamoufoxDirectLauncher::new(app_handle_cleanup);
+        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) => {
+              if !dead_instances.is_empty() {
+                println!(
+                  "Cleaned up {} dead Camoufox instances",
+                  dead_instances.len()
+                );
+              }
+            }
+            Err(e) => {
+              eprintln!("Error during Camoufox cleanup: {e}");
+            }
+          }
+        }
+      });
+
+      // Warm up nodecar binary in the background
+      tauri::async_runtime::spawn(async move {
+        println!("Starting nodecar warm-up...");
+        let start_time = std::time::Instant::now();
+
+        // 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()
+              );
+            }
+          }
+          Err(e) => {
+            let duration = start_time.elapsed();
+            println!(
+              "Nodecar warm-up failed after {:.2}s: {e}",
+              duration.as_secs_f64()
+            );
+          }
+        }
+      });
+
      Ok(())
    })
    .invoke_handler(tauri::generate_handler![
@@ -414,7 +470,6 @@ pub fn run() {
      open_url_with_profile,
      set_as_default_browser,
      smart_open_url,
-      check_and_handle_startup_url,
      trigger_manual_version_update,
      get_version_update_status,
      check_for_browser_updates,
@@ -433,6 +488,16 @@ pub fn run() {
      get_stored_proxies,
      update_stored_proxy,
      delete_stored_proxy,
+      update_camoufox_config,
+      get_system_locale,
+      get_system_timezone,
+      get_profile_groups,
+      get_groups_with_profile_counts,
+      create_profile_group,
+      update_profile_group,
+      delete_profile_group,
+      assign_profiles_to_group,
+      delete_selected_profiles,
    ])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
@@ -689,6 +689,8 @@ impl ProfileImporter {
      process_id: None,
      last_launch: None,
      release_type: "stable".to_string(),
+      camoufox_config: None,
+      group_id: None,
    };

    // Save the profile metadata
@@ -708,7 +710,7 @@ impl ProfileImporter {
    &self,
    browser_type: &str,
  ) -> Result<String, Box<dyn std::error::Error>> {
-    // Try to get a downloaded version first, fallback to a reasonable default
+    // Check if any version of the browser is downloaded
    let registry =
      crate::downloaded_browsers::DownloadedBrowsersRegistry::load().unwrap_or_default();
    let downloaded_versions = registry.get_downloaded_versions(browser_type);
@@ -717,17 +719,12 @@ impl ProfileImporter {
      return Ok(version.clone());
    }

-    // If no downloaded versions, return a sensible default
-    match browser_type {
-      "firefox" => Ok("latest".to_string()),
-      "firefox-developer" => Ok("latest".to_string()),
-      "chromium" => Ok("latest".to_string()),
-      "brave" => Ok("latest".to_string()),
-      "zen" => Ok("latest".to_string()),
-      "mullvad-browser" => Ok("13.5.16".to_string()), // Mullvad Browser common version
-      "tor-browser" => Ok("latest".to_string()),
-      _ => Ok("latest".to_string()),
-    }
+    // If no downloaded versions found, return an error
+    Err(format!(
+      "No downloaded versions found for browser '{}'. Please download a version of {} first before importing profiles.",
+      browser_type,
+      self.get_browser_display_name(browser_type)
+    ).into())
  }

  /// Recursively copy directory contents
@@ -173,11 +173,6 @@ impl ProxyManager {
  }

  // Get a stored proxy by ID
-  #[allow(dead_code)]
-  pub fn get_stored_proxy(&self, proxy_id: &str) -> Option<StoredProxy> {
-    let stored_proxies = self.stored_proxies.lock().unwrap();
-    stored_proxies.get(proxy_id).cloned()
-  }

  // Update a stored proxy
  pub fn update_stored_proxy(
@@ -417,25 +412,6 @@ impl ProxyManager {
    Ok(())
  }

-  // Get proxy settings for a browser process ID
-  pub fn get_proxy_settings(&self, browser_pid: u32) -> Option<ProxySettings> {
-    let proxies = self.active_proxies.lock().unwrap();
-    proxies.get(&browser_pid).map(|proxy| 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,
-    })
-  }
-
-  // Get stored proxy info for a profile
-  #[allow(dead_code)]
-  pub fn get_profile_proxy_info(&self, profile_name: &str) -> Option<ProxySettings> {
-    let profile_proxies = self.profile_proxies.lock().unwrap();
-    profile_proxies.get(profile_name).cloned()
-  }
-
  // Update the PID mapping for an existing proxy
  pub fn update_proxy_pid(&self, old_pid: u32, new_pid: u32) -> Result<(), String> {
    let mut proxies = self.active_proxies.lock().unwrap();
@@ -480,8 +456,7 @@ mod tests {
      .unwrap()
      .to_path_buf();
    let nodecar_dir = project_root.join("nodecar");
-    let nodecar_dist = nodecar_dir.join("dist");
-    let nodecar_binary = nodecar_dist.join("nodecar");
+    let nodecar_binary = nodecar_dir.join("nodecar-bin");

    // Check if binary already exists
    if nodecar_binary.exists() {
@@ -535,70 +510,6 @@ mod tests {
    Ok(nodecar_binary)
  }

-  #[tokio::test]
-  async fn test_proxy_manager_profile_persistence() {
-    let proxy_manager = ProxyManager::new();
-
-    let proxy_settings = ProxySettings {
-      proxy_type: "socks5".to_string(),
-      host: "127.0.0.1".to_string(),
-      port: 1080,
-      username: None,
-      password: None,
-    };
-
-    // Test profile proxy info storage
-    {
-      let mut profile_proxies = proxy_manager.profile_proxies.lock().unwrap();
-      profile_proxies.insert("test_profile".to_string(), proxy_settings.clone());
-    }
-
-    // Test retrieval
-    let retrieved = proxy_manager.get_profile_proxy_info("test_profile");
-    assert!(retrieved.is_some());
-    let retrieved = retrieved.unwrap();
-    assert_eq!(retrieved.proxy_type, "socks5");
-    assert_eq!(retrieved.host, "127.0.0.1");
-    assert_eq!(retrieved.port, 1080);
-
-    // Test non-existent profile
-    let non_existent = proxy_manager.get_profile_proxy_info("non_existent");
-    assert!(non_existent.is_none());
-  }
-
-  #[tokio::test]
-  async fn test_proxy_manager_active_proxy_tracking() {
-    let proxy_manager = ProxyManager::new();
-
-    let proxy_info = ProxyInfo {
-      id: "test_proxy_123".to_string(),
-      local_url: "http://localhost:8080".to_string(),
-      upstream_host: "proxy.example.com".to_string(),
-      upstream_port: 3128,
-      upstream_type: "http".to_string(),
-      local_port: 8080,
-    };
-
-    let browser_pid = 54321u32;
-
-    // Add active proxy
-    {
-      let mut active_proxies = proxy_manager.active_proxies.lock().unwrap();
-      active_proxies.insert(browser_pid, proxy_info.clone());
-    }
-
-    // Test retrieval of proxy settings
-    let proxy_settings = proxy_manager.get_proxy_settings(browser_pid);
-    assert!(proxy_settings.is_some());
-    let settings = proxy_settings.unwrap();
-    assert!(settings.host == "127.0.0.1");
-    assert!(settings.port == 8080);
-
-    // Test non-existent browser PID
-    let non_existent = proxy_manager.get_proxy_settings(99999);
-    assert!(non_existent.is_none());
-  }
-
  #[test]
  fn test_proxy_settings_validation() {
    // Test valid proxy settings
@@ -652,10 +563,6 @@ mod tests {
          active_proxies.insert(browser_pid, proxy_info);
        }

-        // Read proxy
-        let settings = pm.get_proxy_settings(browser_pid);
-        assert!(settings.is_some());
-
        browser_pid
      });
      handles.push(handle);
@@ -718,7 +625,7 @@ mod tests {
      .arg("http");

    // Set a timeout for the command
-    let output = tokio::time::timeout(Duration::from_secs(10), async { cmd.output() }).await??;
+    let output = tokio::time::timeout(Duration::from_secs(60), async { cmd.output() }).await??;

    if output.status.success() {
      let stdout = String::from_utf8(output.stdout)?;
@@ -734,7 +641,7 @@ mod tests {

      // Wait for proxy worker to start
      println!("Waiting for proxy worker to start...");
-      tokio::time::sleep(Duration::from_secs(3)).await;
+      tokio::time::sleep(Duration::from_secs(1)).await;

      // Test that the local port is listening
      let mut port_test = Command::new("nc");
@@ -755,7 +662,7 @@ mod tests {
      stop_cmd.arg("proxy").arg("stop").arg("--id").arg(proxy_id);

      let stop_output =
-        tokio::time::timeout(Duration::from_secs(5), async { stop_cmd.output() }).await??;
+        tokio::time::timeout(Duration::from_secs(60), async { stop_cmd.output() }).await??;

      assert!(stop_output.status.success());

@@ -830,13 +737,6 @@ mod tests {
    match output {
      Ok(Ok(cmd_output)) => {
        let execution_time = start_time.elapsed();
-        println!("CLI completed in {execution_time:?}");
-
-        // Should complete very quickly if properly detached
-        assert!(
-          execution_time < Duration::from_secs(3),
-          "CLI took too long ({execution_time:?}), should exit immediately after starting worker"
-        );

        if cmd_output.status.success() {
          let stdout = String::from_utf8(cmd_output.stdout)?;
@@ -880,17 +780,7 @@ mod tests {
      .arg("--type")
      .arg("http");

-    let start_time = std::time::Instant::now();
-    let output = tokio::time::timeout(Duration::from_secs(5), async { cmd.output() }).await??;
-    let execution_time = start_time.elapsed();
-
-    // Command should complete very quickly if properly detached
-    assert!(
-      execution_time < Duration::from_secs(5),
-      "CLI command took {execution_time:?}, should complete in under 5 seconds for proper detachment"
-    );
-
-    println!("CLI detachment test: command completed in {execution_time:?}");
+    let output = tokio::time::timeout(Duration::from_secs(60), async { cmd.output() }).await??;

    if output.status.success() {
      let stdout = String::from_utf8(output.stdout)?;
@@ -932,7 +822,7 @@ mod tests {
      .arg("--password")
      .arg("pass word!"); // Contains space and special character

-    let output = tokio::time::timeout(Duration::from_secs(5), async { cmd.output() }).await??;
+    let output = tokio::time::timeout(Duration::from_secs(60), async { cmd.output() }).await??;

    if output.status.success() {
      let stdout = String::from_utf8(output.stdout)?;
@@ -0,0 +1,331 @@
+use serde::{Deserialize, Serialize};
+use std::process::Command;
+
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct SystemLocale {
+  pub locale: String,
+  pub language: String,
+  pub country: String,
+}
+
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct SystemTimezone {
+  pub timezone: String,
+  pub offset: String,
+}
+
+pub struct SystemUtils;
+
+impl SystemUtils {
+  pub fn new() -> Self {
+    Self
+  }
+
+  /// Detect the system's locale settings
+  pub fn detect_system_locale(&self) -> SystemLocale {
+    #[cfg(target_os = "macos")]
+    return macos::detect_system_locale();
+
+    #[cfg(target_os = "linux")]
+    return linux::detect_system_locale();
+
+    #[cfg(target_os = "windows")]
+    return windows::detect_system_locale();
+
+    #[cfg(not(any(target_os = "macos", target_os = "linux", target_os = "windows")))]
+    return SystemLocale {
+      locale: "en-US".to_string(),
+      language: "en".to_string(),
+      country: "US".to_string(),
+    };
+  }
+
+  /// Detect the system's timezone settings
+  pub fn detect_system_timezone(&self) -> SystemTimezone {
+    #[cfg(target_os = "macos")]
+    return macos::detect_system_timezone();
+
+    #[cfg(target_os = "linux")]
+    return linux::detect_system_timezone();
+
+    #[cfg(target_os = "windows")]
+    return windows::detect_system_timezone();
+
+    #[cfg(not(any(target_os = "macos", target_os = "linux", target_os = "windows")))]
+    return SystemTimezone {
+      timezone: "UTC".to_string(),
+      offset: "+00:00".to_string(),
+    };
+  }
+}
+
+#[cfg(target_os = "macos")]
+mod macos {
+  use super::*;
+
+  pub fn detect_system_locale() -> SystemLocale {
+    // Try to get the system locale from macOS
+    if let Ok(output) = Command::new("defaults")
+      .args(["read", "-g", "AppleLocale"])
+      .output()
+    {
+      if output.status.success() {
+        let locale_str = String::from_utf8_lossy(&output.stdout).trim().to_string();
+        return parse_locale(&locale_str);
+      }
+    }
+
+    // Fallback to environment variables
+    detect_locale_from_env()
+  }
+
+  pub fn detect_system_timezone() -> SystemTimezone {
+    // Try to get timezone from macOS system
+    if let Ok(output) = Command::new("date").arg("+%Z").output() {
+      if output.status.success() {
+        let tz_abbr = String::from_utf8_lossy(&output.stdout).trim().to_string();
+
+        // Get the full timezone name
+        if let Ok(tz_output) = Command::new("systemsetup").args(["-gettimezone"]).output() {
+          if tz_output.status.success() {
+            let tz_full = String::from_utf8_lossy(&tz_output.stdout);
+            if let Some(tz_name) = tz_full.strip_prefix("Time Zone: ") {
+              let tz_clean = tz_name.trim().to_string();
+              if !tz_clean.is_empty() {
+                return SystemTimezone {
+                  timezone: tz_clean,
+                  offset: tz_abbr,
+                };
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // Fallback to reading /etc/localtime link
+    detect_timezone_from_files()
+  }
+}
+
+#[cfg(target_os = "linux")]
+mod linux {
+  use super::*;
+
+  pub fn detect_system_locale() -> SystemLocale {
+    // Try to get locale from locale command
+    if let Ok(output) = Command::new("locale").output() {
+      if output.status.success() {
+        let output_str = String::from_utf8_lossy(&output.stdout);
+        for line in output_str.lines() {
+          if line.starts_with("LANG=") {
+            let locale_value = line.strip_prefix("LANG=").unwrap_or("");
+            let locale_clean = locale_value.trim_matches('"');
+            return parse_locale(locale_clean);
+          }
+        }
+      }
+    }
+
+    // Fallback to environment variables
+    detect_locale_from_env()
+  }
+
+  pub fn detect_system_timezone() -> SystemTimezone {
+    // Try to read /etc/timezone first (Debian/Ubuntu)
+    if let Ok(tz_content) = std::fs::read_to_string("/etc/timezone") {
+      let tz_name = tz_content.trim().to_string();
+      if !tz_name.is_empty() {
+        return SystemTimezone {
+          timezone: tz_name,
+          offset: get_timezone_offset(),
+        };
+      }
+    }
+
+    // Try timedatectl (systemd systems)
+    if let Ok(output) = Command::new("timedatectl")
+      .args(["show", "--property=Timezone", "--value"])
+      .output()
+    {
+      if output.status.success() {
+        let tz_name = String::from_utf8_lossy(&output.stdout).trim().to_string();
+        if !tz_name.is_empty() {
+          return SystemTimezone {
+            timezone: tz_name,
+            offset: get_timezone_offset(),
+          };
+        }
+      }
+    }
+
+    // Fallback to reading /etc/localtime symlink
+    detect_timezone_from_files()
+  }
+
+  fn get_timezone_offset() -> String {
+    if let Ok(output) = Command::new("date").arg("+%z").output() {
+      if output.status.success() {
+        return String::from_utf8_lossy(&output.stdout).trim().to_string();
+      }
+    }
+    "+00:00".to_string()
+  }
+}
+
+#[cfg(target_os = "windows")]
+mod windows {
+  use super::*;
+
+  pub fn detect_system_locale() -> SystemLocale {
+    // Try to get locale from Windows registry/powershell
+    if let Ok(output) = Command::new("powershell")
+      .args([
+        "-Command",
+        "Get-Culture | Select-Object -ExpandProperty Name",
+      ])
+      .output()
+    {
+      if output.status.success() {
+        let locale_str = String::from_utf8_lossy(&output.stdout).trim().to_string();
+        return parse_locale(&locale_str);
+      }
+    }
+
+    // Fallback to environment variables
+    detect_locale_from_env()
+  }
+
+  pub fn detect_system_timezone() -> SystemTimezone {
+    // Try to get timezone from Windows
+    if let Ok(output) = Command::new("powershell")
+      .args([
+        "-Command",
+        "Get-TimeZone | Select-Object -ExpandProperty Id",
+      ])
+      .output()
+    {
+      if output.status.success() {
+        let tz_id = String::from_utf8_lossy(&output.stdout).trim().to_string();
+        if !tz_id.is_empty() {
+          return SystemTimezone {
+            timezone: tz_id,
+            offset: get_windows_timezone_offset(),
+          };
+        }
+      }
+    }
+
+    // Fallback
+    SystemTimezone {
+      timezone: "UTC".to_string(),
+      offset: "+00:00".to_string(),
+    }
+  }
+
+  fn get_windows_timezone_offset() -> String {
+    if let Ok(output) = Command::new("powershell")
+      .args([
+        "-Command",
+        "Get-TimeZone | Select-Object -ExpandProperty BaseUtcOffset",
+      ])
+      .output()
+    {
+      if output.status.success() {
+        let offset_str = String::from_utf8_lossy(&output.stdout).trim().to_string();
+        // Convert Windows offset format to standard format
+        if let Some(colon_pos) = offset_str.find(':') {
+          let hours = &offset_str[..colon_pos];
+          let minutes = &offset_str[colon_pos + 1..];
+          if let (Ok(h), Ok(m)) = (hours.parse::<i32>(), minutes.parse::<i32>()) {
+            return format!("{:+03}:{:02}", h, m);
+          }
+        }
+      }
+    }
+    "+00:00".to_string()
+  }
+}
+
+// Helper functions used across platforms
+fn parse_locale(locale_str: &str) -> SystemLocale {
+  // Remove encoding suffix if present (e.g., "en_US.UTF-8" -> "en_US")
+  let locale_base = locale_str.split('.').next().unwrap_or(locale_str);
+
+  // Split language and country (e.g., "en_US" -> ["en", "US"])
+  let parts: Vec<&str> = locale_base.split(&['_', '-']).collect();
+
+  let language = parts.first().unwrap_or(&"en").to_string();
+  let country = parts.get(1).unwrap_or(&"US").to_string();
+
+  // Convert to standard format (e.g., "en-US")
+  let standard_locale = if parts.len() >= 2 {
+    format!("{}-{}", language, country.to_uppercase())
+  } else {
+    format!("{language}-US")
+  };
+
+  SystemLocale {
+    locale: standard_locale,
+    language,
+    country: country.to_uppercase(),
+  }
+}
+
+fn detect_locale_from_env() -> SystemLocale {
+  // Check environment variables in order of preference
+  let env_vars = ["LANG", "LC_ALL", "LC_CTYPE", "LANGUAGE"];
+
+  for var in &env_vars {
+    if let Ok(value) = std::env::var(var) {
+      if !value.is_empty() {
+        return parse_locale(&value);
+      }
+    }
+  }
+
+  // Default fallback
+  SystemLocale {
+    locale: "en-US".to_string(),
+    language: "en".to_string(),
+    country: "US".to_string(),
+  }
+}
+
+fn detect_timezone_from_files() -> SystemTimezone {
+  // Try to read timezone from /etc/localtime symlink
+  if let Ok(link_target) = std::fs::read_link("/etc/localtime") {
+    if let Some(tz_path) = link_target.to_str() {
+      // Extract timezone name from path like /usr/share/zoneinfo/America/New_York
+      if let Some(zoneinfo_pos) = tz_path.find("zoneinfo/") {
+        let tz_name = &tz_path[zoneinfo_pos + 9..];
+        if !tz_name.is_empty() {
+          return SystemTimezone {
+            timezone: tz_name.to_string(),
+            offset: "+00:00".to_string(), // Could be improved with actual offset calculation
+          };
+        }
+      }
+    }
+  }
+
+  // Default fallback
+  SystemTimezone {
+    timezone: "UTC".to_string(),
+    offset: "+00:00".to_string(),
+  }
+}
+
+/// Tauri command to get system locale
+#[tauri::command]
+pub async fn get_system_locale() -> Result<SystemLocale, String> {
+  let utils = SystemUtils::new();
+  Ok(utils.detect_system_locale())
+}
+
+/// Tauri command to get system timezone
+#[tauri::command]
+pub async fn get_system_timezone() -> Result<SystemTimezone, String> {
+  let utils = SystemUtils::new();
+  Ok(utils.detect_system_timezone())
+}
@@ -1,7 +1,7 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "Donut Browser",
-  "version": "0.6.0",
+  "version": "0.7.2",
  "identifier": "com.donutbrowser",
  "build": {
    "beforeDevCommand": "pnpm dev",
@@ -4,11 +4,14 @@ 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 { FaDownload } from "react-icons/fa";
-import { FiWifi } from "react-icons/fi";
-import { GoGear, GoKebabHorizontal, GoPlus } from "react-icons/go";
+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";
+import { GroupBadges } from "@/components/group-badges";
+import { GroupManagementDialog } from "@/components/group-management-dialog";
+import HomeHeader from "@/components/home-header";
 import { ImportProfileDialog } from "@/components/import-profile-dialog";
 import { PermissionDialog } from "@/components/permission-dialog";
 import { ProfilesDataTable } from "@/components/profile-data-table";
@@ -16,19 +19,7 @@ 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 { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { useAppUpdateNotifications } from "@/hooks/use-app-update-notifications";
 import type { PermissionType } from "@/hooks/use-permissions";
 import { usePermissions } from "@/hooks/use-permissions";
@@ -36,7 +27,7 @@ import { useUpdateNotifications } from "@/hooks/use-update-notifications";
 import { useVersionUpdater } from "@/hooks/use-version-updater";
 import { showErrorToast } from "@/lib/toast-utils";
 import { sleep } from "@/lib/utils";
-import type { BrowserProfile } from "@/types";
+import type { BrowserProfile, CamoufoxConfig, GroupWithCount } from "@/types";

 type BrowserTypeString =
  | "mullvad-browser"
@@ -45,7 +36,8 @@ type BrowserTypeString =
  | "chromium"
  | "brave"
  | "zen"
-  | "tor-browser";
+  | "tor-browser"
+  | "camoufox";

 interface PendingUrl {
  id: string;
@@ -62,19 +54,41 @@ export default function Home() {
  const [importProfileDialogOpen, setImportProfileDialogOpen] = useState(false);
  const [proxyManagementDialogOpen, setProxyManagementDialogOpen] =
    useState(false);
+  const [camoufoxConfigDialogOpen, setCamoufoxConfigDialogOpen] =
+    useState(false);
+  const [groupManagementDialogOpen, setGroupManagementDialogOpen] =
+    useState(false);
+  const [groupAssignmentDialogOpen, setGroupAssignmentDialogOpen] =
+    useState(false);
+  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
+  const [selectedProfilesForGroup, setSelectedProfilesForGroup] = useState<
+    string[]
+  >([]);
+  const [selectedProfiles, setSelectedProfiles] = 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 [proxyDataReloadTrigger, setProxyDataReloadTrigger] = useState(0);
+  const [showBulkDeleteConfirmation, setShowBulkDeleteConfirmation] =
+    useState(false);
+  const [isBulkDeleting, setIsBulkDeleting] = useState(false);
  const { isMicrophoneAccessGranted, isCameraAccessGranted, isInitialized } =
    usePermissions();

+  const handleSelectGroup = useCallback((groupId: string | null) => {
+    setSelectedGroupId(groupId);
+    setSelectedProfiles([]);
+  }, []);
+
  // Check for missing binaries and offer to download them
  const checkMissingBinaries = useCallback(async () => {
    try {
@@ -145,30 +159,47 @@ export default function Home() {
    }
  }, [checkMissingBinaries]);

-  // Trigger proxy data reload in ProfilesDataTable
-  const triggerProxyDataReload = useCallback(() => {
-    setProxyDataReloadTrigger((prev) => prev + 1);
-  }, []);
+  const [processingUrls, setProcessingUrls] = useState<Set<string>>(new Set());

-  const handleUrlOpen = useCallback(async (url: string) => {
-    try {
-      // Use smart profile selection
-      const result = await invoke<string>("smart_open_url", {
-        url,
-      });
-      console.log("Smart URL opening succeeded:", result);
-      // URL was handled successfully, no need to show selector
-    } catch (error: unknown) {
-      console.log(
-        "Smart URL opening failed or requires profile selection:",
-        error,
-      );
+  const handleUrlOpen = useCallback(
+    async (url: string) => {
+      // Prevent duplicate processing of the same URL
+      if (processingUrls.has(url)) {
+        console.log("URL already being processed:", url);
+        return;
+      }

-      // Show profile selector for manual selection
-      // Replace any existing pending URL with the new one
-      setPendingUrls([{ id: Date.now().toString(), url }]);
-    }
-  }, []);
+      setProcessingUrls((prev) => new Set(prev).add(url));
+
+      try {
+        // Use smart profile selection
+        const result = await invoke<string>("smart_open_url", {
+          url,
+        });
+        console.log("Smart URL opening succeeded:", result);
+        // URL was handled successfully, no need to show selector
+      } catch (error: unknown) {
+        console.log(
+          "Smart URL opening failed or requires profile selection:",
+          error,
+        );
+
+        // Show profile selector for manual selection
+        // Replace any existing pending URL with the new one
+        setPendingUrls([{ id: Date.now().toString(), url }]);
+      } finally {
+        // Remove URL from processing set after a short delay to prevent rapid duplicates
+        setTimeout(() => {
+          setProcessingUrls((prev) => {
+            const next = new Set(prev);
+            next.delete(url);
+            return next;
+          });
+        }, 1000);
+      }
+    },
+    [processingUrls],
+  );

  // Version updater for handling version fetching progress events and auto-updates
  useVersionUpdater();
@@ -273,19 +304,6 @@ export default function Home() {
    }
  }, [isMicrophoneAccessGranted, isCameraAccessGranted]);

-  const checkStartupUrls = useCallback(async () => {
-    try {
-      const hasStartupUrl = await invoke<boolean>(
-        "check_and_handle_startup_url",
-      );
-      if (hasStartupUrl) {
-        console.log("Handled startup URL successfully");
-      }
-    } catch (error) {
-      console.error("Failed to check startup URLs:", error);
-    }
-  }, []);
-
  const listenForUrlEvents = useCallback(async () => {
    try {
      // Listen for URL open events from the deep link handler (when app is already running)
@@ -326,6 +344,30 @@ export default function Home() {
    setChangeVersionDialogOpen(true);
  }, []);

+  const handleConfigureCamoufox = useCallback((profile: BrowserProfile) => {
+    setCurrentProfileForCamoufoxConfig(profile);
+    setCamoufoxConfigDialogOpen(true);
+  }, []);
+
+  const handleSaveCamoufoxConfig = useCallback(
+    async (profile: BrowserProfile, config: CamoufoxConfig) => {
+      setError(null);
+      try {
+        await invoke("update_camoufox_config", {
+          profileName: profile.name,
+          config,
+        });
+        await loadProfiles();
+        setCamoufoxConfigDialogOpen(false);
+      } catch (err: unknown) {
+        console.error("Failed to update camoufox config:", err);
+        setError(`Failed to update camoufox config: ${JSON.stringify(err)}`);
+        throw err;
+      }
+    },
+    [loadProfiles],
+  );
+
  const handleSaveProxy = useCallback(
    async (proxyId: string | null) => {
      setProxyDialogOpen(false);
@@ -340,13 +382,12 @@ export default function Home() {
        }
        await loadProfiles();
        // Trigger proxy data reload in the table
-        triggerProxyDataReload();
      } catch (err: unknown) {
        console.error("Failed to update proxy settings:", err);
        setError(`Failed to update proxy settings: ${JSON.stringify(err)}`);
      }
    },
-    [currentProfileForProxy, loadProfiles, triggerProxyDataReload],
+    [currentProfileForProxy, loadProfiles],
  );

  const handleCreateProfile = useCallback(
@@ -356,6 +397,7 @@ export default function Home() {
      version: string;
      releaseType: string;
      proxyId?: string;
+      camoufoxConfig?: CamoufoxConfig;
    }) => {
      setError(null);

@@ -368,12 +410,12 @@ export default function Home() {
            version: profileData.version,
            releaseType: profileData.releaseType,
            proxyId: profileData.proxyId,
+            camoufoxConfig: profileData.camoufoxConfig,
          },
        );

        await loadProfiles();
        // Trigger proxy data reload in the table
-        triggerProxyDataReload();
      } catch (error) {
        setError(
          `Failed to create profile: ${
@@ -383,7 +425,7 @@ export default function Home() {
        throw error;
      }
    },
-    [loadProfiles, triggerProxyDataReload],
+    [loadProfiles],
  );

  const [runningProfiles, setRunningProfiles] = useState<Set<string>>(
@@ -478,7 +520,7 @@ export default function Home() {
        console.log("Profile deletion command completed successfully");

        // Give a small delay to ensure file system operations complete
-        await new Promise((resolve) => setTimeout(resolve, 100));
+        await new Promise((resolve) => setTimeout(resolve, 500));

        // Reload profiles to ensure UI is updated
        await loadProfiles();
@@ -522,8 +564,81 @@ export default function Home() {
    [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 handleDeleteSelectedProfiles = useCallback(
+    async (profileNames: string[]) => {
+      setError(null);
+      try {
+        await invoke("delete_selected_profiles", { profileNames });
+        await loadProfiles();
+        await loadGroups();
+      } catch (err: unknown) {
+        console.error("Failed to delete selected profiles:", err);
+        setError(`Failed to delete selected profiles: ${JSON.stringify(err)}`);
+      }
+    },
+    [loadProfiles, loadGroups],
+  );
+
+  const handleAssignProfilesToGroup = useCallback((profileNames: string[]) => {
+    setSelectedProfilesForGroup(profileNames);
+    setGroupAssignmentDialogOpen(true);
+  }, []);
+
+  const handleBulkDelete = useCallback(() => {
+    if (selectedProfiles.length === 0) return;
+    setShowBulkDeleteConfirmation(true);
+  }, [selectedProfiles]);
+
+  const confirmBulkDelete = useCallback(async () => {
+    if (selectedProfiles.length === 0) return;
+
+    setIsBulkDeleting(true);
+    try {
+      await invoke("delete_selected_profiles", {
+        profileNames: selectedProfiles,
+      });
+      await loadProfiles();
+      setSelectedProfiles([]);
+      setShowBulkDeleteConfirmation(false);
+    } catch (error) {
+      console.error("Failed to delete selected profiles:", error);
+      setError(`Failed to delete selected profiles: ${JSON.stringify(error)}`);
+    } finally {
+      setIsBulkDeleting(false);
+    }
+  }, [selectedProfiles, loadProfiles]);
+
+  const handleBulkGroupAssignment = useCallback(() => {
+    if (selectedProfiles.length === 0) return;
+    handleAssignProfilesToGroup(selectedProfiles);
+    setSelectedProfiles([]);
+  }, [selectedProfiles, handleAssignProfilesToGroup]);
+
+  const handleGroupAssignmentComplete = useCallback(async () => {
+    await loadProfiles();
+    await loadGroups();
+    setGroupAssignmentDialogOpen(false);
+    setSelectedProfilesForGroup([]);
+  }, [loadProfiles, loadGroups]);
+
  useEffect(() => {
    void loadProfilesWithUpdateCheck();
+    void loadGroups();

    // Check for startup default browser prompt
    void checkStartupPrompt();
@@ -532,7 +647,6 @@ export default function Home() {
    void listenForUrlEvents();

    // Check for startup URLs (when app was launched as default browser)
-    void checkStartupUrls();
    void checkCurrentUrl();

    // Set up periodic update checks (every 30 minutes)
@@ -549,10 +663,10 @@ export default function Home() {
  }, [
    loadProfilesWithUpdateCheck,
    checkForUpdates,
-    checkCurrentUrl,
    checkStartupPrompt,
    listenForUrlEvents,
-    checkStartupUrls,
+    checkCurrentUrl,
+    loadGroups,
  ]);

  useEffect(() => {
@@ -590,66 +704,26 @@ export default function Home() {
  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="w-full">
+        <Card className="w-full gap-2">
          <CardHeader>
-            <div className="flex justify-between items-center">
-              <CardTitle>Profiles</CardTitle>
-              <div className="flex gap-2 items-center">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      className="flex gap-2 items-center"
-                    >
-                      <GoKebabHorizontal className="w-4 h-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem
-                      onClick={() => {
-                        setSettingsDialogOpen(true);
-                      }}
-                    >
-                      <GoGear className="mr-2 w-4 h-4" />
-                      Settings
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={() => {
-                        setProxyManagementDialogOpen(true);
-                      }}
-                    >
-                      <FiWifi className="mr-2 w-4 h-4" />
-                      Proxies
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={() => {
-                        setImportProfileDialogOpen(true);
-                      }}
-                    >
-                      <FaDownload className="mr-2 w-4 h-4" />
-                      Import Profile
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      size="sm"
-                      onClick={() => {
-                        setCreateProfileDialogOpen(true);
-                      }}
-                      className="flex gap-2 items-center"
-                    >
-                      <GoPlus className="w-4 h-4" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>Create a new profile</TooltipContent>
-                </Tooltip>
-              </div>
-            </div>
+            <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}
@@ -658,11 +732,14 @@ export default function Home() {
              onDeleteProfile={handleDeleteProfile}
              onRenameProfile={handleRenameProfile}
              onChangeVersion={openChangeVersionDialog}
+              onConfigureCamoufox={handleConfigureCamoufox}
              runningProfiles={runningProfiles}
              isUpdating={isUpdating}
-              onReloadProxyData={
-                proxyDataReloadTrigger > 0 ? triggerProxyDataReload : undefined
-              }
+              onDeleteSelectedProfiles={handleDeleteSelectedProfiles}
+              onAssignProfilesToGroup={handleAssignProfilesToGroup}
+              selectedGroupId={selectedGroupId}
+              selectedProfiles={selectedProfiles}
+              onSelectedProfilesChange={setSelectedProfiles}
            />
          </CardContent>
        </Card>
@@ -739,6 +816,41 @@ export default function Home() {
        permissionType={currentPermissionType}
        onPermissionGranted={checkNextPermission}
      />
+
+      <CamoufoxConfigDialog
+        isOpen={camoufoxConfigDialogOpen}
+        onClose={() => {
+          setCamoufoxConfigDialogOpen(false);
+        }}
+        profile={currentProfileForCamoufoxConfig}
+        onSave={handleSaveCamoufoxConfig}
+      />
+
+      <GroupManagementDialog
+        isOpen={groupManagementDialogOpen}
+        onClose={() => {
+          setGroupManagementDialogOpen(false);
+        }}
+      />
+
+      <GroupAssignmentDialog
+        isOpen={groupAssignmentDialogOpen}
+        onClose={() => {
+          setGroupAssignmentDialogOpen(false);
+        }}
+        selectedProfiles={selectedProfilesForGroup}
+        onAssignmentComplete={handleGroupAssignmentComplete}
+      />
+
+      <DeleteConfirmationDialog
+        isOpen={showBulkDeleteConfirmation}
+        onClose={() => setShowBulkDeleteConfirmation(false)}
+        onConfirm={confirmBulkDelete}
+        title="Delete Selected Profiles"
+        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}
+      />
    </div>
  );
 }
@@ -65,11 +65,18 @@ export function AppUpdateToast({
    await onUpdate(updateInfo);
  };

-  const showProgress =
+  const showDownloadProgress =
    isUpdating &&
    updateProgress?.stage === "downloading" &&
    updateProgress.percentage !== undefined;

+  const showOtherStageProgress =
+    isUpdating &&
+    updateProgress &&
+    (updateProgress.stage === "extracting" ||
+      updateProgress.stage === "installing" ||
+      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="mr-3 mt-0.5">
@@ -117,7 +124,7 @@ export function AppUpdateToast({
        </div>

        {/* Download progress */}
-        {showProgress && updateProgress && (
+        {showDownloadProgress && updateProgress && (
          <div className="mt-2 space-y-1">
            <div className="flex justify-between items-center">
              <p className="flex-1 min-w-0 text-xs text-muted-foreground">
@@ -135,31 +142,41 @@ export function AppUpdateToast({
          </div>
        )}

-        {/* Other stage progress (without percentage) */}
-        {isUpdating &&
-          updateProgress &&
-          updateProgress.stage !== "downloading" && (
-            <div className="mt-2">
-              <p className="text-xs text-muted-foreground">
-                {updateProgress.message}
-              </p>
-              {updateProgress.stage === "extracting" && (
-                <p className="mt-1 text-xs text-muted-foreground">
-                  Preparing update files...
-                </p>
-              )}
-              {updateProgress.stage === "installing" && (
-                <p className="mt-1 text-xs text-muted-foreground">
-                  Installing new version...
-                </p>
-              )}
-              {updateProgress.stage === "completed" && (
-                <p className="mt-1 text-xs text-green-600 dark:text-green-400">
-                  Update completed! Restarting application...
-                </p>
-              )}
+        {/* Other stage progress (with visual indicators) */}
+        {showOtherStageProgress && (
+          <div className="mt-2 space-y-2">
+            <p className="text-xs text-muted-foreground">
+              {updateProgress.message}
+            </p>
+
+            {/* Progress indicator for non-downloading stages */}
+            <div className="w-full bg-gray-200 dark:bg-gray-700 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"
+                }`}
+              />
            </div>
-          )}
+
+            {updateProgress.stage === "extracting" && (
+              <p className="text-xs text-muted-foreground">
+                Preparing update files...
+              </p>
+            )}
+            {updateProgress.stage === "installing" && (
+              <p className="text-xs text-muted-foreground">
+                Installing new version...
+              </p>
+            )}
+            {updateProgress.stage === "completed" && (
+              <p className="text-xs text-green-600 dark:text-green-400">
+                Update completed! Restarting application...
+              </p>
+            )}
+          </div>
+        )}

        {!isUpdating && (
          <div className="flex gap-2 items-center mt-3">
@@ -0,0 +1,502 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { BrowserProfile, CamoufoxConfig } from "@/types";
+
+interface CamoufoxConfigDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  profile: BrowserProfile | null;
+  onSave: (profile: BrowserProfile, config: CamoufoxConfig) => Promise<void>;
+}
+
+const osOptions = [
+  { value: "windows", label: "Windows" },
+  { value: "macos", label: "macOS" },
+  { value: "linux", label: "Linux" },
+];
+
+const timezoneOptions = [
+  { value: "America/New_York", label: "America/New_York" },
+  { value: "America/Los_Angeles", label: "America/Los_Angeles" },
+  { value: "Europe/London", label: "Europe/London" },
+  { value: "Europe/Paris", label: "Europe/Paris" },
+  { value: "Asia/Tokyo", label: "Asia/Tokyo" },
+  { value: "Asia/Shanghai", label: "Asia/Shanghai" },
+  { value: "Australia/Sydney", label: "Australia/Sydney" },
+];
+
+const localeOptions = [
+  { value: "en-US", label: "English (US)" },
+  { value: "en-GB", label: "English (UK)" },
+  { value: "fr-FR", label: "French" },
+  { value: "de-DE", label: "German" },
+  { value: "es-ES", label: "Spanish" },
+  { value: "it-IT", label: "Italian" },
+  { value: "ja-JP", label: "Japanese" },
+  { value: "zh-CN", label: "Chinese (Simplified)" },
+];
+
+const getCurrentOS = () => {
+  if (typeof window !== "undefined") {
+    const userAgent = window.navigator.userAgent;
+    if (userAgent.includes("Win")) return "windows";
+    if (userAgent.includes("Mac")) return "macos";
+    if (userAgent.includes("Linux")) return "linux";
+  }
+  return "unknown";
+};
+
+export function CamoufoxConfigDialog({
+  isOpen,
+  onClose,
+  profile,
+  onSave,
+}: CamoufoxConfigDialogProps) {
+  const [config, setConfig] = useState<CamoufoxConfig>({
+    enable_cache: true,
+    os: [getCurrentOS()],
+  });
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Initialize config when profile changes
+  useEffect(() => {
+    if (profile && profile.browser === "camoufox") {
+      setConfig(
+        profile.camoufox_config || {
+          enable_cache: true,
+          os: [getCurrentOS()],
+        },
+      );
+    }
+  }, [profile]);
+
+  const updateConfig = (key: keyof CamoufoxConfig, value: unknown) => {
+    setConfig((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const handleSave = async () => {
+    if (!profile) return;
+
+    setIsSaving(true);
+    try {
+      await onSave(profile, config);
+      onClose();
+    } catch (error) {
+      console.error("Failed to save camoufox config:", error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleClose = () => {
+    // Reset config to original when closing without saving
+    if (profile && profile.browser === "camoufox") {
+      setConfig(
+        profile.camoufox_config || {
+          enable_cache: true,
+          os: [getCurrentOS()],
+        },
+      );
+    }
+    onClose();
+  };
+
+  if (!profile || profile.browser !== "camoufox") {
+    return null;
+  }
+
+  // Get the selected OS for warning
+  const selectedOS = config.os?.[0];
+  const currentOS = getCurrentOS();
+  const showOSWarning =
+    selectedOS && selectedOS !== currentOS && currentOS !== "unknown";
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="max-w-3xl max-h-[90vh] flex flex-col">
+        <DialogHeader className="flex-shrink-0">
+          <DialogTitle>
+            Configure Camoufox Settings - {profile.name}
+          </DialogTitle>
+        </DialogHeader>
+
+        <ScrollArea className="flex-1 pr-6 h-[320px]">
+          <div className="py-4 space-y-6">
+            {/* Operating System */}
+            <div className="space-y-3">
+              <Label>Operating System Fingerprint</Label>
+              <Select
+                value={selectedOS || ""}
+                onValueChange={(value: string) => updateConfig("os", [value])}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select OS" />
+                </SelectTrigger>
+                <SelectContent>
+                  {osOptions.map((os) => (
+                    <SelectItem key={os.value} value={os.value}>
+                      {os.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {showOSWarning && (
+                <div className="p-3 bg-amber-50 rounded-md border border-amber-200">
+                  <p className="text-sm text-amber-800">
+                    ⚠️ Warning: Spoofing OS features is detectable by advanced
+                    anti-bot systems. Some platform-specific APIs and behaviors
+                    cannot be fully replicated.
+                  </p>
+                </div>
+              )}
+            </div>
+
+            {/* Blocking Options */}
+            <div className="space-y-3">
+              <Label>Privacy & Blocking</Label>
+              <div className="space-y-2">
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="block-images"
+                    checked={config.block_images || false}
+                    onCheckedChange={(checked) =>
+                      updateConfig("block_images", checked)
+                    }
+                  />
+                  <Label htmlFor="block-images">Block Images</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="block-webrtc"
+                    checked={config.block_webrtc || false}
+                    onCheckedChange={(checked) =>
+                      updateConfig("block_webrtc", checked)
+                    }
+                  />
+                  <Label htmlFor="block-webrtc">Block WebRTC</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="block-webgl"
+                    checked={config.block_webgl || false}
+                    onCheckedChange={(checked) =>
+                      updateConfig("block_webgl", checked)
+                    }
+                  />
+                  <Label htmlFor="block-webgl">Block WebGL</Label>
+                </div>
+              </div>
+            </div>
+
+            {/* Geolocation */}
+            <div className="space-y-3">
+              <Label>Geolocation</Label>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="country">Country</Label>
+                  <Input
+                    id="country"
+                    value={config.country || ""}
+                    onChange={(e) =>
+                      updateConfig("country", e.target.value || undefined)
+                    }
+                    placeholder="e.g., US, GB, DE"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label>Timezone</Label>
+                  <Select
+                    value={config.timezone || "auto"}
+                    onValueChange={(value) =>
+                      updateConfig(
+                        "timezone",
+                        value === "auto" ? undefined : value,
+                      )
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select timezone" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="auto">Auto</SelectItem>
+                      {timezoneOptions.map((tz) => (
+                        <SelectItem key={tz.value} value={tz.value}>
+                          {tz.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="latitude">Latitude</Label>
+                  <Input
+                    id="latitude"
+                    type="number"
+                    step="any"
+                    value={config.latitude || ""}
+                    onChange={(e) =>
+                      updateConfig(
+                        "latitude",
+                        e.target.value ? parseFloat(e.target.value) : undefined,
+                      )
+                    }
+                    placeholder="e.g., 40.7128"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="longitude">Longitude</Label>
+                  <Input
+                    id="longitude"
+                    type="number"
+                    step="any"
+                    value={config.longitude || ""}
+                    onChange={(e) =>
+                      updateConfig(
+                        "longitude",
+                        e.target.value ? parseFloat(e.target.value) : undefined,
+                      )
+                    }
+                    placeholder="e.g., -74.0060"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Localization */}
+            <div className="space-y-3">
+              <Label>Locale</Label>
+              <Select
+                value={config.locale?.[0] || ""}
+                onValueChange={(value) =>
+                  updateConfig("locale", value ? [value] : undefined)
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select locale" />
+                </SelectTrigger>
+                <SelectContent>
+                  {localeOptions.map((locale) => (
+                    <SelectItem key={locale.value} value={locale.value}>
+                      {locale.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Screen Resolution */}
+            <div className="space-y-3">
+              <Label>Screen Resolution</Label>
+              <div className="grid grid-cols-2 gap-4">
+                <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) =>
+                      updateConfig(
+                        "screen_min_width",
+                        e.target.value ? parseInt(e.target.value) : undefined,
+                      )
+                    }
+                    placeholder="e.g., 1024"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="screen-max-width">Max Width</Label>
+                  <Input
+                    id="screen-max-width"
+                    type="number"
+                    value={config.screen_max_width || ""}
+                    onChange={(e) =>
+                      updateConfig(
+                        "screen_max_width",
+                        e.target.value ? parseInt(e.target.value) : undefined,
+                      )
+                    }
+                    placeholder="e.g., 1920"
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <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) =>
+                      updateConfig(
+                        "screen_min_height",
+                        e.target.value ? parseInt(e.target.value) : undefined,
+                      )
+                    }
+                    placeholder="e.g., 768"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="screen-max-height">Max Height</Label>
+                  <Input
+                    id="screen-max-height"
+                    type="number"
+                    value={config.screen_max_height || ""}
+                    onChange={(e) =>
+                      updateConfig(
+                        "screen_max_height",
+                        e.target.value ? parseInt(e.target.value) : undefined,
+                      )
+                    }
+                    placeholder="e.g., 1080"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Window Size */}
+            <div className="space-y-3">
+              <Label>Window Size</Label>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="window-width">Width</Label>
+                  <Input
+                    id="window-width"
+                    type="number"
+                    value={config.window_width || ""}
+                    onChange={(e) =>
+                      updateConfig(
+                        "window_width",
+                        e.target.value ? parseInt(e.target.value) : undefined,
+                      )
+                    }
+                    placeholder="e.g., 1366"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="window-height">Height</Label>
+                  <Input
+                    id="window-height"
+                    type="number"
+                    value={config.window_height || ""}
+                    onChange={(e) =>
+                      updateConfig(
+                        "window_height",
+                        e.target.value ? parseInt(e.target.value) : undefined,
+                      )
+                    }
+                    placeholder="e.g., 768"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Advanced Options */}
+            <div className="space-y-3">
+              <Label>Advanced Options</Label>
+              <div className="space-y-2">
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="enable-cache"
+                    checked={config.enable_cache || false}
+                    onCheckedChange={(checked) =>
+                      updateConfig("enable_cache", checked)
+                    }
+                  />
+                  <Label htmlFor="enable-cache">Enable Browser Cache</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="main-world-eval"
+                    checked={config.main_world_eval || false}
+                    onCheckedChange={(checked) =>
+                      updateConfig("main_world_eval", checked)
+                    }
+                  />
+                  <Label htmlFor="main-world-eval">
+                    Enable Main World Evaluation
+                  </Label>
+                </div>
+              </div>
+            </div>
+
+            {/* WebGL Settings */}
+            <div className="space-y-3">
+              <Label>WebGL Settings</Label>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="webgl-vendor">WebGL Vendor</Label>
+                  <Input
+                    id="webgl-vendor"
+                    value={config.webgl_vendor || ""}
+                    onChange={(e) =>
+                      updateConfig("webgl_vendor", e.target.value || undefined)
+                    }
+                    placeholder="e.g., Intel Inc."
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="webgl-renderer">WebGL Renderer</Label>
+                  <Input
+                    id="webgl-renderer"
+                    value={config.webgl_renderer || ""}
+                    onChange={(e) =>
+                      updateConfig(
+                        "webgl_renderer",
+                        e.target.value || undefined,
+                      )
+                    }
+                    placeholder="e.g., Intel Iris OpenGL Engine"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Debug Options */}
+            <div className="space-y-3">
+              <Label>Debug Options</Label>
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="debug"
+                  checked={config.debug || false}
+                  onCheckedChange={(checked) => updateConfig("debug", checked)}
+                />
+                <Label htmlFor="debug">Enable Debug Mode</Label>
+              </div>
+            </div>
+          </div>
+        </ScrollArea>
+
+        <DialogFooter className="flex-shrink-0 pt-4 border-t">
+          <Button variant="outline" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave} disabled={isSaving}>
+            {isSaving ? "Saving..." : "Save Configuration"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,115 @@
+"use client";
+
+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,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ProfileGroup } from "@/types";
+
+interface CreateGroupDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onGroupCreated: (group: ProfileGroup) => void;
+}
+
+export function CreateGroupDialog({
+  isOpen,
+  onClose,
+  onGroupCreated,
+}: CreateGroupDialogProps) {
+  const [groupName, setGroupName] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleCreate = useCallback(async () => {
+    if (!groupName.trim()) return;
+
+    setIsCreating(true);
+    setError(null);
+    try {
+      const newGroup = await invoke<ProfileGroup>("create_profile_group", {
+        name: groupName.trim(),
+      });
+
+      toast.success("Group created successfully");
+      onGroupCreated(newGroup);
+      setGroupName("");
+      onClose();
+    } catch (err) {
+      console.error("Failed to create group:", err);
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to create group";
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setIsCreating(false);
+    }
+  }, [groupName, onGroupCreated, onClose]);
+
+  const handleClose = useCallback(() => {
+    setGroupName("");
+    setError(null);
+    onClose();
+  }, [onClose]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Create New Group</DialogTitle>
+          <DialogDescription>
+            Create a new group to organize your browser profiles.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="group-name">Group Name</Label>
+            <Input
+              id="group-name"
+              placeholder="Enter group name..."
+              value={groupName}
+              onChange={(e) => setGroupName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && groupName.trim()) {
+                  void handleCreate();
+                }
+              }}
+              disabled={isCreating}
+            />
+          </div>
+
+          {error && (
+            <div className="p-3 text-sm text-red-600 bg-red-50 rounded-md dark:bg-red-900/20 dark:text-red-400">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose} disabled={isCreating}>
+            Cancel
+          </Button>
+          <LoadingButton
+            isLoading={isCreating}
+            onClick={() => void handleCreate()}
+            disabled={!groupName.trim()}
+          >
+            Create Group
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -2,12 +2,10 @@

 import { invoke } from "@tauri-apps/api/core";
 import { useCallback, useEffect, useState } from "react";
-import { FiPlus } from "react-icons/fi";
-import { toast } from "sonner";
 import { LoadingButton } from "@/components/loading-button";
-import { ProxyFormDialog } from "@/components/proxy-form-dialog";
-import { ReleaseTypeSelector } from "@/components/release-type-selector";
+import { SharedCamoufoxConfigForm } from "@/components/shared-camoufox-config-form";
 import { Button } from "@/components/ui/button";
+import { Combobox } from "@/components/ui/combobox";
 import {
  Dialog,
  DialogContent,
@@ -17,6 +15,7 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
  Select,
  SelectContent,
@@ -24,16 +23,10 @@ import {
  SelectTrigger,
  SelectValue,
 } from "@/components/ui/select";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useBrowserDownload } from "@/hooks/use-browser-download";
-import { useBrowserSupport } from "@/hooks/use-browser-support";
-import { getBrowserDisplayName } from "@/lib/browser-utils";
-import type { BrowserProfile, BrowserReleaseTypes, StoredProxy } from "@/types";
-import { Alert, AlertDescription } from "./ui/alert";
+import { getBrowserIcon, getCurrentOS } from "@/lib/browser-utils";
+import type { BrowserReleaseTypes, CamoufoxConfig, StoredProxy } from "@/types";

 type BrowserTypeString =
  | "mullvad-browser"
@@ -42,7 +35,8 @@ type BrowserTypeString =
  | "chromium"
  | "brave"
  | "zen"
-  | "tor-browser";
+  | "tor-browser"
+  | "camoufox";

 interface CreateProfileDialogProps {
  isOpen: boolean;
@@ -53,503 +47,461 @@ interface CreateProfileDialogProps {
    version: string;
    releaseType: string;
    proxyId?: string;
+    camoufoxConfig?: CamoufoxConfig;
  }) => Promise<void>;
 }

+interface BrowserOption {
+  value: BrowserTypeString;
+  label: string;
+  description: string;
+}
+
+const browserOptions: BrowserOption[] = [
+  {
+    value: "firefox",
+    label: "Firefox",
+    description: "Mozilla's main web browser",
+  },
+  {
+    value: "firefox-developer",
+    label: "Firefox Developer Edition",
+    description: "Browser for developers with cutting-edge features",
+  },
+  {
+    value: "chromium",
+    label: "Chromium",
+    description: "Open-source version of Chrome",
+  },
+  {
+    value: "brave",
+    label: "Brave",
+    description: "Privacy-focused browser with ad blocking",
+  },
+  {
+    value: "zen",
+    label: "Zen Browser",
+    description: "Beautiful, customizable Firefox-based browser",
+  },
+  {
+    value: "mullvad-browser",
+    label: "Mullvad Browser",
+    description: "TOR Browser fork by Mullvad VPN",
+  },
+  {
+    value: "tor-browser",
+    label: "Tor Browser",
+    description: "Browse anonymously through the Tor network",
+  },
+];
+
 export function CreateProfileDialog({
  isOpen,
  onClose,
  onCreateProfile,
 }: CreateProfileDialogProps) {
  const [profileName, setProfileName] = useState("");
-  const [selectedBrowser, setSelectedBrowser] =
-    useState<BrowserTypeString | null>("mullvad-browser");
-  const [selectedReleaseType, setSelectedReleaseType] = useState<
-    "stable" | "nightly" | null
-  >(null);
-  const [releaseTypes, setReleaseTypes] = useState<BrowserReleaseTypes>({
-    stable: undefined,
-    nightly: undefined,
+  const [activeTab, setActiveTab] = useState("regular");
+
+  // Regular browser states
+  const [selectedBrowser, setSelectedBrowser] = useState<BrowserTypeString>();
+  const [selectedProxyId, setSelectedProxyId] = useState<string>();
+
+  // Camoufox anti-detect states
+  const [camoufoxConfig, setCamoufoxConfig] = useState<CamoufoxConfig>({
+    enable_cache: true, // Cache enabled by default
+    os: [getCurrentOS()], // Default to current OS
  });
-  const [isCreating, setIsCreating] = useState(false);
-  const [existingProfiles, setExistingProfiles] = useState<BrowserProfile[]>(
-    [],
-  );
-  const [isLoadingReleaseTypes, setIsLoadingReleaseTypes] = useState(false);

-  // Proxy settings - now using stored proxy selection
-  const [selectedProxyId, setSelectedProxyId] = useState<string | null>(null);
+  // Common states
+  const [availableReleaseTypes, setAvailableReleaseTypes] =
+    useState<BrowserReleaseTypes>({});
+  const [camoufoxReleaseTypes, setCamoufoxReleaseTypes] =
+    useState<BrowserReleaseTypes>({});
+  const [supportedBrowsers, setSupportedBrowsers] = useState<string[]>([]);
  const [storedProxies, setStoredProxies] = useState<StoredProxy[]>([]);
-  const [isLoadingProxies, setIsLoadingProxies] = useState(false);
-  const [showProxyForm, setShowProxyForm] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);

+  // Use the browser download hook
  const {
+    isBrowserDownloading,
    downloadBrowser,
-    isDownloading,
-    downloadedVersions,
    loadDownloadedVersions,
    isVersionDownloaded,
  } = useBrowserDownload();

-  const {
-    supportedBrowsers,
-    isLoading: isLoadingSupport,
-    isBrowserSupported,
-  } = useBrowserSupport();
-
-  useEffect(() => {
-    if (supportedBrowsers.length > 0) {
-      // Set default browser to first supported browser
-      if (supportedBrowsers.includes("mullvad-browser")) {
-        setSelectedBrowser("mullvad-browser");
-      } else if (supportedBrowsers.length > 0) {
-        setSelectedBrowser(supportedBrowsers[0] as BrowserTypeString);
-      }
-    }
-  }, [supportedBrowsers]);
-
-  // Set default release type when release types are loaded
-  useEffect(() => {
-    if (!selectedReleaseType && Object.keys(releaseTypes).length > 0) {
-      // First try to set stable if it exists
-      if (releaseTypes.stable) {
-        setSelectedReleaseType("stable");
-      }
-      // If stable doesn't exist but nightly does, set nightly as default
-      else if (releaseTypes.nightly && selectedBrowser !== "chromium") {
-        setSelectedReleaseType("nightly");
-      }
-    }
-  }, [releaseTypes, selectedReleaseType, selectedBrowser]);
-
-  const loadExistingProfiles = useCallback(async () => {
+  const loadSupportedBrowsers = useCallback(async () => {
    try {
-      const profiles = await invoke<BrowserProfile[]>("list_browser_profiles");
-      setExistingProfiles(profiles);
+      const browsers = await invoke<string[]>("get_supported_browsers");
+      setSupportedBrowsers(browsers);
    } catch (error) {
-      console.error("Failed to load existing profiles:", error);
+      console.error("Failed to load supported browsers:", error);
    }
  }, []);

  const loadStoredProxies = useCallback(async () => {
    try {
-      setIsLoadingProxies(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 available proxies");
-    } finally {
-      setIsLoadingProxies(false);
    }
  }, []);

-  const loadReleaseTypes = useCallback(async (browser: string) => {
-    try {
-      setIsLoadingReleaseTypes(true);
-      const types = await invoke<BrowserReleaseTypes>(
-        "get_browser_release_types",
-        {
-          browserStr: browser,
-        },
-      );
-      setReleaseTypes(types);
-    } catch (error) {
-      console.error("Failed to load release types:", error);
-      toast.error("Failed to load available versions");
-    } finally {
-      setIsLoadingReleaseTypes(false);
-    }
-  }, []);
+  const loadReleaseTypes = useCallback(
+    async (browser: string) => {
+      try {
+        const releaseTypes = await invoke<BrowserReleaseTypes>(
+          "get_browser_release_types",
+          { browserStr: browser },
+        );

-  const handleDownload = useCallback(async () => {
-    if (!selectedBrowser || !selectedReleaseType) return;
+        if (browser === "camoufox") {
+          setCamoufoxReleaseTypes(releaseTypes);
+        } else {
+          setAvailableReleaseTypes(releaseTypes);
+        }

-    const version =
-      selectedReleaseType === "stable"
-        ? releaseTypes.stable
-        : releaseTypes.nightly;
-    if (!version) return;
-
-    await downloadBrowser(selectedBrowser, version);
-  }, [selectedBrowser, selectedReleaseType, downloadBrowser, releaseTypes]);
-
-  const validateProfileName = useCallback(
-    (name: string): string | null => {
-      const trimmedName = name.trim();
-
-      if (!trimmedName) {
-        return "Profile name cannot be empty";
+        // Load downloaded versions for this browser
+        await loadDownloadedVersions(browser);
+      } catch (error) {
+        console.error(`Failed to load release types for ${browser}:`, error);
      }
-
-      // Check for duplicate names (case insensitive)
-      const isDuplicate = existingProfiles.some(
-        (profile) => profile.name.toLowerCase() === trimmedName.toLowerCase(),
-      );
-
-      if (isDuplicate) {
-        return "A profile with this name already exists";
-      }
-
-      return null;
    },
-    [existingProfiles],
+    [loadDownloadedVersions],
  );

-  // Helper to determine if proxy should be disabled for the selected browser
-  const isProxyDisabled = selectedBrowser === "tor-browser";
-
-  // Update proxy selection when browser changes to tor-browser
+  // Load data when dialog opens
  useEffect(() => {
-    if (selectedBrowser === "tor-browser" && selectedProxyId) {
-      setSelectedProxyId(null);
+    if (isOpen) {
+      void loadSupportedBrowsers();
+      void loadStoredProxies();
+      // Load camoufox release types when dialog opens
+      void loadReleaseTypes("camoufox");
    }
-  }, [selectedBrowser, selectedProxyId]);
+  }, [isOpen, loadSupportedBrowsers, loadStoredProxies, loadReleaseTypes]);

-  const handleCreateProxy = useCallback(() => {
-    setShowProxyForm(true);
-  }, []);
+  // Load release types when browser selection changes
+  useEffect(() => {
+    if (selectedBrowser) {
+      void loadReleaseTypes(selectedBrowser);
+    }
+  }, [selectedBrowser, loadReleaseTypes]);

-  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];
+  // Helper function to get the best available version and release type
+  const getBestAvailableVersion = useCallback(
+    (releaseTypes: BrowserReleaseTypes) => {
+      if (releaseTypes.stable) {
+        return { version: releaseTypes.stable, releaseType: "stable" as const };
      }
-    });
-    setSelectedProxyId(savedProxy.id);
-    setShowProxyForm(false);
-  }, []);
+      if (releaseTypes.nightly) {
+        return {
+          version: releaseTypes.nightly,
+          releaseType: "nightly" as const,
+        };
+      }
+      return null;
+    },
+    [],
+  );

-  const handleProxyFormClose = useCallback(() => {
-    setShowProxyForm(false);
-  }, []);
+  const handleDownload = async (browserStr: string) => {
+    const releaseTypes =
+      browserStr === "camoufox" ? camoufoxReleaseTypes : availableReleaseTypes;
+    const bestVersion = getBestAvailableVersion(releaseTypes);

-  const handleCreate = useCallback(async () => {
-    if (!profileName.trim() || !selectedBrowser || !selectedReleaseType) return;
-
-    // Validate profile name
-    const nameError = validateProfileName(profileName);
-    if (nameError) {
-      toast.error(nameError);
+    if (!bestVersion) {
+      console.error("No version available for download");
      return;
    }

-    const version =
-      selectedReleaseType === "stable"
-        ? releaseTypes.stable
-        : releaseTypes.nightly;
-    if (!version) {
-      toast.error("Selected release type is not available");
-      return;
+    try {
+      await downloadBrowser(browserStr, bestVersion.version);
+    } catch (error) {
+      console.error("Failed to download browser:", error);
    }
+  };
+
+  const handleCreate = async () => {
+    if (!profileName.trim()) return;

    setIsCreating(true);
    try {
-      await onCreateProfile({
-        name: profileName.trim(),
-        browserStr: selectedBrowser,
-        version,
-        releaseType: selectedReleaseType,
-        proxyId: isProxyDisabled ? undefined : (selectedProxyId ?? undefined),
-      });
+      if (activeTab === "regular") {
+        if (!selectedBrowser) {
+          console.error("Missing required browser selection");
+          return;
+        }

-      // Reset form
-      setProfileName("");
-      setSelectedReleaseType(null);
-      setSelectedProxyId(null);
-      onClose();
+        // Use the best available version (stable preferred, nightly as fallback)
+        const bestVersion = getBestAvailableVersion(availableReleaseTypes);
+        if (!bestVersion) {
+          console.error("No version available");
+          return;
+        }
+
+        await onCreateProfile({
+          name: profileName.trim(),
+          browserStr: selectedBrowser,
+          version: bestVersion.version,
+          releaseType: bestVersion.releaseType,
+          proxyId: selectedProxyId,
+        });
+      } else {
+        // Anti-detect tab - always use Camoufox with best available version
+        const bestCamoufoxVersion =
+          getBestAvailableVersion(camoufoxReleaseTypes);
+        if (!bestCamoufoxVersion) {
+          console.error("No Camoufox version available");
+          return;
+        }
+
+        await onCreateProfile({
+          name: profileName.trim(),
+          browserStr: "camoufox" as BrowserTypeString,
+          version: bestCamoufoxVersion.version,
+          releaseType: bestCamoufoxVersion.releaseType,
+          proxyId: selectedProxyId,
+          camoufoxConfig,
+        });
+      }
+
+      handleClose();
    } catch (error) {
      console.error("Failed to create profile:", error);
    } finally {
      setIsCreating(false);
    }
-  }, [
-    profileName,
-    selectedBrowser,
-    selectedReleaseType,
-    onCreateProfile,
-    isProxyDisabled,
-    selectedProxyId,
-    onClose,
-    releaseTypes.nightly,
-    releaseTypes.stable,
-    validateProfileName,
-  ]);
+  };

-  const nameError = profileName.trim()
-    ? validateProfileName(profileName)
-    : null;
+  const handleClose = () => {
+    // Reset all states
+    setProfileName("");
+    setSelectedBrowser(undefined);
+    setSelectedProxyId(undefined);
+    setCamoufoxConfig({
+      enable_cache: true,
+      os: [getCurrentOS()], // Reset to current OS
+    });
+    setActiveTab("regular");
+    onClose();
+  };

-  const selectedVersion =
-    selectedReleaseType === "stable"
-      ? releaseTypes.stable
-      : releaseTypes.nightly;
+  const isCreateDisabled = () => {
+    if (!profileName.trim()) return true;

-  const canCreate =
-    profileName.trim() &&
-    selectedBrowser &&
-    selectedReleaseType &&
-    selectedVersion &&
-    isVersionDownloaded(selectedVersion) &&
-    !nameError;
-
-  useEffect(() => {
-    if (isOpen) {
-      void loadExistingProfiles();
-      void loadStoredProxies();
+    if (activeTab === "regular") {
+      return (
+        !selectedBrowser || !getBestAvailableVersion(availableReleaseTypes)
+      );
+    } else {
+      // For anti-detect, we need camoufox to be available
+      return !getBestAvailableVersion(camoufoxReleaseTypes);
    }
-  }, [isOpen, loadExistingProfiles, loadStoredProxies]);
+  };

-  useEffect(() => {
-    if (isOpen && selectedBrowser) {
-      // Reset selected release type when browser changes
-      setSelectedReleaseType(null);
-      void loadReleaseTypes(selectedBrowser);
-      void loadDownloadedVersions(selectedBrowser);
-    }
-  }, [isOpen, selectedBrowser, loadDownloadedVersions, loadReleaseTypes]);
+  const updateCamoufoxConfig = (key: keyof CamoufoxConfig, value: unknown) => {
+    setCamoufoxConfig((prev) => ({ ...prev, [key]: value }));
+  };
+
+  // Check if browser version is downloaded and available
+  const isBrowserVersionAvailable = (browserStr: string) => {
+    const releaseTypes =
+      browserStr === "camoufox" ? camoufoxReleaseTypes : availableReleaseTypes;
+    const bestVersion = getBestAvailableVersion(releaseTypes);
+    return bestVersion && isVersionDownloaded(bestVersion.version);
+  };
+
+  // Get the selected OS for warning
+  const selectedOS = camoufoxConfig.os?.[0];
+  const currentOS = getCurrentOS();
+  const _showOSWarning =
+    selectedOS && selectedOS !== currentOS && currentOS !== "unknown";

  return (
-    <>
-      <Dialog open={isOpen} onOpenChange={onClose}>
-        <DialogContent className="max-w-md max-h-[80vh] my-8 flex flex-col">
-          <DialogHeader className="flex-shrink-0">
-            <DialogTitle>Create New Profile</DialogTitle>
-          </DialogHeader>
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="max-w-4xl max-h-[90vh] flex flex-col">
+        <DialogHeader className="flex-shrink-0">
+          <DialogTitle>Create New Profile</DialogTitle>
+        </DialogHeader>

-          <div className="grid overflow-y-scroll flex-1 gap-6 py-4 min-h-0">
-            {/* Profile Name */}
-            <div className="grid gap-2">
-              <Label htmlFor="profile-name">Profile Name</Label>
-              <Input
-                id="profile-name"
-                value={profileName}
-                onChange={(e) => {
-                  setProfileName(e.target.value);
-                }}
-                placeholder="Enter profile name"
-                className={nameError ? "border-red-500" : ""}
-              />
-              {nameError && <p className="text-sm text-red-600">{nameError}</p>}
-            </div>
+        <Tabs
+          value={activeTab}
+          onValueChange={setActiveTab}
+          className="flex flex-col flex-1 w-full min-h-0"
+        >
+          <TabsList className="grid flex-shrink-0 grid-cols-2 w-full">
+            <TabsTrigger value="regular">Regular Browsers</TabsTrigger>
+            <TabsTrigger value="anti-detect">Anti-Detect</TabsTrigger>
+          </TabsList>

-            {/* Browser Selection */}
-            <div className="grid gap-2">
-              <Label>Browser</Label>
-              <Select
-                value={selectedBrowser ?? undefined}
-                onValueChange={(value) => {
-                  setSelectedBrowser(value as BrowserTypeString);
-                }}
-                disabled={isLoadingSupport}
-              >
-                <SelectTrigger>
-                  <SelectValue
-                    placeholder={
-                      isLoadingSupport
-                        ? "Loading browsers..."
-                        : "Select browser"
-                    }
-                  />
-                </SelectTrigger>
-                <SelectContent>
-                  {(
-                    [
-                      "mullvad-browser",
-                      "firefox",
-                      "firefox-developer",
-                      "chromium",
-                      "brave",
-                      "zen",
-                      "tor-browser",
-                    ] as BrowserTypeString[]
-                  ).map((browser) => {
-                    const isSupported = isBrowserSupported(browser);
-                    const displayName = getBrowserDisplayName(browser);
+          <ScrollArea className="flex-1 pr-6 h-[320px]">
+            <div className="py-4 space-y-6">
+              {/* Profile Name - Common to both tabs */}
+              <div className="space-y-2">
+                <Label htmlFor="profile-name">Profile Name</Label>
+                <Input
+                  id="profile-name"
+                  value={profileName}
+                  onChange={(e) => setProfileName(e.target.value)}
+                  placeholder="Enter profile name"
+                />
+              </div>

-                    if (!isSupported) {
-                      return (
-                        <Tooltip key={browser}>
-                          <TooltipTrigger asChild>
-                            <SelectItem
-                              value={browser}
-                              disabled={true}
-                              className="opacity-50"
-                            >
-                              {displayName} (Not supported)
-                            </SelectItem>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>
-                              {displayName} is not supported on your current
-                              platform or architecture.
-                            </p>
-                          </TooltipContent>
-                        </Tooltip>
-                      );
-                    }
-
-                    return (
-                      <SelectItem key={browser} value={browser}>
-                        {displayName}
-                      </SelectItem>
-                    );
-                  })}
-                </SelectContent>
-              </Select>
-            </div>
-
-            {selectedBrowser ? (
-              <div className="grid gap-2">
-                <Label>Release Type</Label>
-                {isLoadingReleaseTypes ? (
-                  <div className="text-sm text-muted-foreground">
-                    Loading release types...
-                  </div>
-                ) : Object.keys(releaseTypes).length === 0 ? (
-                  <Alert>
-                    <AlertDescription>
-                      No releases are available for{" "}
-                      {getBrowserDisplayName(selectedBrowser)}.
-                    </AlertDescription>
-                  </Alert>
-                ) : (
-                  <div className="space-y-4">
-                    {(!releaseTypes.stable || !releaseTypes.nightly) && (
-                      <Alert>
-                        <AlertDescription>
-                          Only {(releaseTypes.stable && "Stable") ?? "Nightly"}{" "}
-                          releases are available for{" "}
-                          {getBrowserDisplayName(selectedBrowser)}.
-                        </AlertDescription>
-                      </Alert>
-                    )}
-
-                    <ReleaseTypeSelector
-                      selectedReleaseType={selectedReleaseType}
-                      onReleaseTypeSelect={setSelectedReleaseType}
-                      availableReleaseTypes={releaseTypes}
-                      browser={selectedBrowser}
-                      isDownloading={isDownloading}
-                      onDownload={() => {
-                        void handleDownload();
-                      }}
-                      placeholder="Select release type..."
-                      downloadedVersions={downloadedVersions}
+              <TabsContent value="regular" className="mt-0 space-y-6">
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <Label>Browser</Label>
+                    <Combobox
+                      options={browserOptions
+                        .filter((browser) =>
+                          supportedBrowsers.includes(browser.value),
+                        )
+                        .map((browser) => {
+                          const IconComponent = getBrowserIcon(browser.value);
+                          return {
+                            value: browser.value,
+                            label: browser.label,
+                            icon: IconComponent,
+                          };
+                        })}
+                      value={selectedBrowser || ""}
+                      onValueChange={(value) =>
+                        setSelectedBrowser(value as BrowserTypeString)
+                      }
+                      placeholder="Select a browser..."
+                      searchPlaceholder="Search browsers..."
                    />
                  </div>
-                )}
-              </div>
-            ) : null}

-            {/* Proxy Settings */}
-            <div className="grid gap-4 pt-4 border-t">
-              <div className="grid gap-2">
-                <div className="flex justify-between items-center">
-                  <Label>Proxy Settings</Label>
-                  {!isProxyDisabled && (
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={handleCreateProxy}
-                          className="flex gap-2 items-center"
-                        >
-                          <FiPlus className="w-4 h-4" />
-                          Create Proxy
-                        </Button>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>Create a new proxy configuration</p>
-                      </TooltipContent>
-                    </Tooltip>
+                  {selectedBrowser && (
+                    <div className="space-y-3">
+                      {!isBrowserVersionAvailable(selectedBrowser) &&
+                        getBestAvailableVersion(availableReleaseTypes) && (
+                          <div className="flex gap-3 items-center">
+                            <p className="text-sm text-muted-foreground">
+                              {(() => {
+                                const bestVersion = getBestAvailableVersion(
+                                  availableReleaseTypes,
+                                );
+                                return `${bestVersion?.releaseType === "stable" ? "Latest stable" : "Latest nightly"} version (${bestVersion?.version}) needs to be downloaded`;
+                              })()}
+                            </p>
+                            <LoadingButton
+                              onClick={() => handleDownload(selectedBrowser)}
+                              isLoading={isBrowserDownloading(selectedBrowser)}
+                              size="sm"
+                              disabled={isBrowserDownloading(selectedBrowser)}
+                            >
+                              Download
+                            </LoadingButton>
+                          </div>
+                        )}
+                      {isBrowserVersionAvailable(selectedBrowser) && (
+                        <div className="text-sm text-green-600">
+                          {(() => {
+                            const bestVersion = getBestAvailableVersion(
+                              availableReleaseTypes,
+                            );
+                            return `✓ ${bestVersion?.releaseType === "stable" ? "Latest stable" : "Latest nightly"} version (${bestVersion?.version}) is available`;
+                          })()}
+                        </div>
+                      )}
+                    </div>
                  )}
                </div>
+              </TabsContent>

-                {isProxyDisabled ? (
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <div className="p-3 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&apos;t support additional proxy configuration.
+              <TabsContent value="anti-detect" className="mt-0 space-y-6">
+                {/* Anti-Detect Description */}
+                <div className="p-3 text-center bg-blue-50 rounded-md border border-blue-200 dark:bg-blue-950 dark:border-blue-800">
+                  <p className="text-sm text-blue-800 dark:text-blue-200">
+                    Powered by Camoufox
+                  </p>
+                </div>
+
+                <div className="space-y-6">
+                  {/* Camoufox Download Status */}
+                  {!isBrowserVersionAvailable("camoufox") &&
+                    getBestAvailableVersion(camoufoxReleaseTypes) && (
+                      <div className="flex gap-3 items-center p-3 bg-amber-50 rounded-md border border-amber-200">
+                        <p className="text-sm text-amber-800">
+                          {(() => {
+                            const bestVersion =
+                              getBestAvailableVersion(camoufoxReleaseTypes);
+                            return `Camoufox ${bestVersion?.releaseType} version (${bestVersion?.version}) needs to be downloaded`;
+                          })()}
                        </p>
+                        <LoadingButton
+                          onClick={() => handleDownload("camoufox")}
+                          isLoading={isBrowserDownloading("camoufox")}
+                          size="sm"
+                          disabled={isBrowserDownloading("camoufox")}
+                        >
+                          Download
+                        </LoadingButton>
                      </div>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>
-                        Tor Browser manages its own proxy routing automatically
-                      </p>
-                    </TooltipContent>
-                  </Tooltip>
-                ) : (
+                    )}
+                  {isBrowserVersionAvailable("camoufox") && (
+                    <div className="p-3 text-sm text-green-600 bg-green-50 rounded-md border border-green-200">
+                      {(() => {
+                        const bestVersion =
+                          getBestAvailableVersion(camoufoxReleaseTypes);
+                        return `✓ Camoufox ${bestVersion?.releaseType} version (${bestVersion?.version}) is available`;
+                      })()}
+                    </div>
+                  )}
+
+                  <SharedCamoufoxConfigForm
+                    config={camoufoxConfig}
+                    onConfigChange={updateCamoufoxConfig}
+                  />
+                </div>
+              </TabsContent>
+
+              {/* Proxy Selection - Common to both tabs - Compact without card */}
+              {storedProxies.length > 0 && (
+                <div className="space-y-3">
+                  <Label>Proxy</Label>
                  <Select
-                    value={selectedProxyId ?? "none"}
-                    onValueChange={(value) => {
-                      setSelectedProxyId(value === "none" ? null : value);
-                    }}
-                    disabled={isLoadingProxies}
+                    value={selectedProxyId || "none"}
+                    onValueChange={(value) =>
+                      setSelectedProxyId(value === "none" ? undefined : value)
+                    }
                  >
                    <SelectTrigger>
-                      <SelectValue
-                        placeholder={
-                          isLoadingProxies
-                            ? "Loading proxies..."
-                            : "Select proxy (optional)"
-                        }
-                      />
+                      <SelectValue placeholder="No proxy" />
                    </SelectTrigger>
                    <SelectContent>
-                      <SelectItem value="none">No Proxy</SelectItem>
+                      <SelectItem value="none">No proxy</SelectItem>
                      {storedProxies.map((proxy) => (
                        <SelectItem key={proxy.id} value={proxy.id}>
-                          {proxy.name}
+                          {proxy.name} ({proxy.proxy_settings.proxy_type}://
+                          {proxy.proxy_settings.host}:
+                          {proxy.proxy_settings.port})
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
-                )}
-
-                {!isProxyDisabled &&
-                  storedProxies.length === 0 &&
-                  !isLoadingProxies && (
-                    <p className="text-sm text-muted-foreground">
-                      No saved proxies available. Use the "Create Proxy" button
-                      above to create proxy configurations.
-                    </p>
-                  )}
-              </div>
+                </div>
+              )}
            </div>
-          </div>
+          </ScrollArea>

-          <DialogFooter>
-            <Button variant="outline" onClick={onClose}>
+          <DialogFooter className="flex-shrink-0 pt-4 border-t">
+            <Button variant="outline" onClick={handleClose}>
              Cancel
            </Button>
            <LoadingButton
+              onClick={handleCreate}
              isLoading={isCreating}
-              onClick={() => void handleCreate()}
-              disabled={!canCreate}
+              disabled={isCreateDisabled()}
            >
              Create Profile
            </LoadingButton>
          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      <ProxyFormDialog
-        isOpen={showProxyForm}
-        onClose={handleProxyFormClose}
-        onSave={handleProxySaved}
-      />
-    </>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
  );
 }
@@ -240,26 +240,45 @@ export function UnifiedToast(props: ToastProps) {
          )}

        {/* App update progress */}
-        {type === "app-update" &&
-          progress &&
-          "percentage" in progress &&
-          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">
-                  {progress.percentage.toFixed(1)}%
-                  {progress.speed && ` • ${progress.speed} MB/s`}
-                  {progress.eta && ` • ${progress.eta} remaining`}
-                </p>
-              </div>
+        {type === "app-update" && (
+          <div className="mt-2 space-y-1">
+            {/* Download progress with percentage */}
+            {progress &&
+              "percentage" in progress &&
+              stage === "downloading" && (
+                <>
+                  <div className="flex justify-between items-center">
+                    <p className="flex-1 min-w-0 text-xs text-gray-600 dark:text-gray-300">
+                      {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="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
+                      style={{ width: `${progress.percentage}%` }}
+                    />
+                  </div>
+                </>
+              )}
+
+            {/* Progress indicator for other stages */}
+            {(stage === "extracting" ||
+              stage === "installing" ||
+              stage === "completed") && (
              <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
                <div
-                  className="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
-                  style={{ width: `${progress.percentage}%` }}
+                  className={`h-1.5 rounded-full transition-all duration-500 ${
+                    stage === "completed"
+                      ? "bg-green-500 w-full"
+                      : "bg-blue-500 w-full animate-pulse"
+                  }`}
                />
              </div>
-            </div>
-          )}
+            )}
+          </div>
+        )}

        {/* Version update progress */}
        {type === "version-update" &&
@@ -0,0 +1,58 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+interface DeleteConfirmationDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void | Promise<void>;
+  title: string;
+  description: string;
+  confirmButtonText?: string;
+  isLoading?: boolean;
+}
+
+export function DeleteConfirmationDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmButtonText = "Delete",
+  isLoading = false,
+}: DeleteConfirmationDialogProps) {
+  const handleConfirm = async () => {
+    await onConfirm();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={() => void handleConfirm()}
+            disabled={isLoading}
+          >
+            {isLoading ? "Deleting..." : confirmButtonText}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,209 @@
+"use client";
+
+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,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+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";
+
+interface DeleteGroupDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  group: ProfileGroup | null;
+  onGroupDeleted: () => void;
+}
+
+export function DeleteGroupDialog({
+  isOpen,
+  onClose,
+  group,
+  onGroupDeleted,
+}: DeleteGroupDialogProps) {
+  const [associatedProfiles, setAssociatedProfiles] = useState<
+    BrowserProfile[]
+  >([]);
+  const [deleteAction, setDeleteAction] = useState<"move" | "delete">("move");
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadAssociatedProfiles = useCallback(async () => {
+    if (!group) return;
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const allProfiles = await invoke<BrowserProfile[]>(
+        "list_browser_profiles",
+      );
+      const groupProfiles = allProfiles.filter(
+        (profile) => profile.group_id === group.id,
+      );
+      setAssociatedProfiles(groupProfiles);
+    } catch (err) {
+      console.error("Failed to load associated profiles:", err);
+      setError(err instanceof Error ? err.message : "Failed to load profiles");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [group]);
+
+  useEffect(() => {
+    if (isOpen && group) {
+      void loadAssociatedProfiles();
+    }
+  }, [isOpen, group, loadAssociatedProfiles]);
+
+  const handleDelete = useCallback(async () => {
+    if (!group) return;
+
+    setIsDeleting(true);
+    setError(null);
+    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 });
+      } else if (deleteAction === "move" && associatedProfiles.length > 0) {
+        // Move profiles to default group (null group_id)
+        const profileNames = associatedProfiles.map((p) => p.name);
+        await invoke("assign_profiles_to_group", {
+          profileNames,
+          groupId: null,
+        });
+      }
+
+      // Delete the group
+      await invoke("delete_profile_group", { groupId: group.id });
+
+      toast.success("Group deleted successfully");
+      onGroupDeleted();
+      onClose();
+    } catch (err) {
+      console.error("Failed to delete group:", err);
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to delete group";
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setIsDeleting(false);
+    }
+  }, [group, deleteAction, associatedProfiles, onGroupDeleted, onClose]);
+
+  const handleClose = useCallback(() => {
+    setError(null);
+    setDeleteAction("move");
+    setAssociatedProfiles([]);
+    onClose();
+  }, [onClose]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Delete Group</DialogTitle>
+          <DialogDescription>
+            This action cannot be undone. This will permanently delete the group
+            "{group?.name}".
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {isLoading ? (
+            <div className="text-sm text-muted-foreground">
+              Loading associated profiles...
+            </div>
+          ) : (
+            <>
+              {associatedProfiles.length > 0 && (
+                <div className="space-y-3">
+                  <div className="space-y-2">
+                    <Label>
+                      Associated Profiles ({associatedProfiles.length})
+                    </Label>
+                    <ScrollArea className="h-32 w-full border rounded-md p-3">
+                      <div className="space-y-1">
+                        {associatedProfiles.map((profile) => (
+                          <div key={profile.id} className="text-sm">
+                            • {profile.name}
+                          </div>
+                        ))}
+                      </div>
+                    </ScrollArea>
+                  </div>
+
+                  <div className="space-y-3">
+                    <Label>What should happen to these profiles?</Label>
+                    <RadioGroup
+                      value={deleteAction}
+                      onValueChange={(value) =>
+                        setDeleteAction(value as "move" | "delete")
+                      }
+                    >
+                      <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="move" id="move" />
+                        <Label htmlFor="move" className="text-sm">
+                          Move profiles to Default group
+                        </Label>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="delete" id="delete" />
+                        <Label
+                          htmlFor="delete"
+                          className="text-sm text-red-600"
+                        >
+                          Delete profiles along with the group
+                        </Label>
+                      </div>
+                    </RadioGroup>
+                  </div>
+                </div>
+              )}
+
+              {associatedProfiles.length === 0 && !isLoading && (
+                <div className="text-sm text-muted-foreground">
+                  This group has no associated profiles.
+                </div>
+              )}
+            </>
+          )}
+
+          {error && (
+            <div className="p-3 text-sm text-red-600 bg-red-50 rounded-md dark:bg-red-900/20 dark:text-red-400">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose} disabled={isDeleting}>
+            Cancel
+          </Button>
+          <LoadingButton
+            variant="destructive"
+            isLoading={isDeleting}
+            onClick={() => void handleDelete()}
+            disabled={isLoading}
+          >
+            Delete Group
+            {deleteAction === "delete" &&
+              associatedProfiles.length > 0 &&
+              " & Profiles"}
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,125 @@
+"use client";
+
+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,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ProfileGroup } from "@/types";
+
+interface EditGroupDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  group: ProfileGroup | null;
+  onGroupUpdated: (group: ProfileGroup) => void;
+}
+
+export function EditGroupDialog({
+  isOpen,
+  onClose,
+  group,
+  onGroupUpdated,
+}: EditGroupDialogProps) {
+  const [groupName, setGroupName] = useState("");
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (group) {
+      setGroupName(group.name);
+    } else {
+      setGroupName("");
+    }
+    setError(null);
+  }, [group]);
+
+  const handleUpdate = useCallback(async () => {
+    if (!group || !groupName.trim()) return;
+
+    setIsUpdating(true);
+    setError(null);
+    try {
+      const updatedGroup = await invoke<ProfileGroup>("update_profile_group", {
+        groupId: group.id,
+        name: groupName.trim(),
+      });
+
+      toast.success("Group updated successfully");
+      onGroupUpdated(updatedGroup);
+      onClose();
+    } catch (err) {
+      console.error("Failed to update group:", err);
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to update group";
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setIsUpdating(false);
+    }
+  }, [group, groupName, onGroupUpdated, onClose]);
+
+  const handleClose = useCallback(() => {
+    setError(null);
+    onClose();
+  }, [onClose]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Edit Group</DialogTitle>
+          <DialogDescription>
+            Update the name of the group "{group?.name}".
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="group-name">Group Name</Label>
+            <Input
+              id="group-name"
+              placeholder="Enter group name..."
+              value={groupName}
+              onChange={(e) => setGroupName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && groupName.trim()) {
+                  void handleUpdate();
+                }
+              }}
+              disabled={isUpdating}
+            />
+          </div>
+
+          {error && (
+            <div className="p-3 text-sm text-red-600 bg-red-50 rounded-md dark:bg-red-900/20 dark:text-red-400">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose} disabled={isUpdating}>
+            Cancel
+          </Button>
+          <LoadingButton
+            isLoading={isUpdating}
+            onClick={() => void handleUpdate()}
+            disabled={!groupName.trim() || groupName === group?.name}
+          >
+            Update Group
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,178 @@
+"use client";
+
+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,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { ProfileGroup } from "@/types";
+
+interface GroupAssignmentDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedProfiles: string[];
+  onAssignmentComplete: () => void;
+}
+
+export function GroupAssignmentDialog({
+  isOpen,
+  onClose,
+  selectedProfiles,
+  onAssignmentComplete,
+}: 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 loadGroups = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const groupList = await invoke<ProfileGroup[]>("get_profile_groups");
+      setGroups(groupList);
+    } catch (err) {
+      console.error("Failed to load groups:", err);
+      setError(err instanceof Error ? err.message : "Failed to load groups");
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const handleAssign = useCallback(async () => {
+    setIsAssigning(true);
+    setError(null);
+    try {
+      await invoke("assign_profiles_to_group", {
+        profileNames: selectedProfiles,
+        groupId: selectedGroupId,
+      });
+
+      const groupName = selectedGroupId
+        ? groups.find((g) => g.id === selectedGroupId)?.name || "Unknown Group"
+        : "Default";
+
+      toast.success(
+        `Successfully assigned ${selectedProfiles.length} profile(s) to ${groupName}`,
+      );
+      onAssignmentComplete();
+      onClose();
+    } catch (err) {
+      console.error("Failed to assign profiles to group:", err);
+      const errorMessage =
+        err instanceof Error
+          ? err.message
+          : "Failed to assign profiles to group";
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setIsAssigning(false);
+    }
+  }, [
+    selectedProfiles,
+    selectedGroupId,
+    groups,
+    onAssignmentComplete,
+    onClose,
+  ]);
+
+  useEffect(() => {
+    if (isOpen) {
+      void loadGroups();
+      setSelectedGroupId(null);
+      setError(null);
+    }
+  }, [isOpen, loadGroups]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Assign to Group</DialogTitle>
+          <DialogDescription>
+            Assign {selectedProfiles.length} selected profile(s) to a group.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <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>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="group-select">Assign to Group:</Label>
+            {isLoading ? (
+              <div className="text-sm text-muted-foreground">
+                Loading groups...
+              </div>
+            ) : (
+              <Select
+                value={selectedGroupId || "default"}
+                onValueChange={(value) => {
+                  setSelectedGroupId(value === "default" ? null : value);
+                }}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a group" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="default">Default (No Group)</SelectItem>
+                  {groups.map((group) => (
+                    <SelectItem key={group.id} value={group.id}>
+                      {group.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+
+          {error && (
+            <div className="p-3 text-sm text-red-600 bg-red-50 rounded-md dark:bg-red-900/20 dark:text-red-400">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={isAssigning}>
+            Cancel
+          </Button>
+          <LoadingButton
+            isLoading={isAssigning}
+            onClick={() => void handleAssign()}
+            disabled={isLoading}
+          >
+            Assign
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,51 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import type { GroupWithCount } from "@/types";
+
+interface GroupBadgesProps {
+  selectedGroupId: string | null;
+  onGroupSelect: (groupId: string | null) => void;
+  refreshTrigger?: number;
+  groups: GroupWithCount[];
+  isLoading: boolean;
+}
+
+export function GroupBadges({
+  selectedGroupId,
+  onGroupSelect,
+  groups,
+  isLoading,
+}: GroupBadgesProps) {
+  if (isLoading) {
+    return (
+      <div className="flex flex-wrap gap-2 mb-4">
+        <div className="text-sm text-muted-foreground">Loading groups...</div>
+      </div>
+    );
+  }
+
+  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"
+          onClick={() => {
+            onGroupSelect(selectedGroupId === group.id ? null : group.id);
+          }}
+        >
+          <span>{group.name}</span>
+          <span className="bg-background/20 text-xs px-1.5 py-0.5 rounded-sm">
+            {group.count}
+          </span>
+        </Badge>
+      ))}
+    </div>
+  );
+}
@@ -0,0 +1,207 @@
+"use client";
+
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useEffect, useState } from "react";
+import { GoPlus } from "react-icons/go";
+import { LuPencil, LuTrash2 } from "react-icons/lu";
+import { CreateGroupDialog } from "@/components/create-group-dialog";
+import { DeleteGroupDialog } from "@/components/delete-group-dialog";
+import { EditGroupDialog } from "@/components/edit-group-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type { ProfileGroup } from "@/types";
+
+interface GroupManagementDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function GroupManagementDialog({
+  isOpen,
+  onClose,
+}: GroupManagementDialogProps) {
+  const [groups, setGroups] = useState<ProfileGroup[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Dialog states
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [selectedGroup, setSelectedGroup] = useState<ProfileGroup | null>(null);
+
+  const loadGroups = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const groupList = await invoke<ProfileGroup[]>("get_profile_groups");
+      setGroups(groupList);
+    } catch (err) {
+      console.error("Failed to load groups:", err);
+      setError(err instanceof Error ? err.message : "Failed to load groups");
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const handleGroupCreated = useCallback((newGroup: ProfileGroup) => {
+    setGroups((prev) => [...prev, newGroup]);
+  }, []);
+
+  const handleGroupUpdated = useCallback((updatedGroup: ProfileGroup) => {
+    setGroups((prev) =>
+      prev.map((group) =>
+        group.id === updatedGroup.id ? updatedGroup : group,
+      ),
+    );
+  }, []);
+
+  const handleGroupDeleted = useCallback(() => {
+    void loadGroups();
+  }, [loadGroups]);
+
+  const handleEditGroup = useCallback((group: ProfileGroup) => {
+    setSelectedGroup(group);
+    setEditDialogOpen(true);
+  }, []);
+
+  const handleDeleteGroup = useCallback((group: ProfileGroup) => {
+    setSelectedGroup(group);
+    setDeleteDialogOpen(true);
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      void loadGroups();
+    }
+  }, [isOpen, loadGroups]);
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={onClose}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>Manage Profile Groups</DialogTitle>
+            <DialogDescription>
+              Create, edit, and delete profile groups. Profiles without a group
+              will appear in the "Default" group.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            {/* Create new group button */}
+            <div className="flex justify-between items-center">
+              <Label>Groups</Label>
+              <Button
+                size="sm"
+                onClick={() => setCreateDialogOpen(true)}
+                className="flex gap-2 items-center"
+              >
+                <GoPlus className="w-4 h-4" />
+                Create Group
+              </Button>
+            </div>
+
+            {error && (
+              <div className="p-3 text-sm text-red-600 bg-red-50 rounded-md dark:bg-red-900/20 dark:text-red-400">
+                {error}
+              </div>
+            )}
+
+            {/* Groups list */}
+            {isLoading ? (
+              <div className="text-sm text-muted-foreground">
+                Loading groups...
+              </div>
+            ) : groups.length === 0 ? (
+              <div className="text-sm text-muted-foreground">
+                No groups created yet. Create your first group using the button
+                above.
+              </div>
+            ) : (
+              <div className="border rounded-md">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Name</TableHead>
+                      <TableHead className="w-24">Actions</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {groups.map((group) => (
+                      <TableRow key={group.id}>
+                        <TableCell className="font-medium">
+                          {group.name}
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex gap-1">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleEditGroup(group)}
+                            >
+                              <LuPencil className="w-4 h-4" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleDeleteGroup(group)}
+                            >
+                              <LuTrash2 className="w-4 h-4" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={onClose}>
+              Close
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <CreateGroupDialog
+        isOpen={createDialogOpen}
+        onClose={() => setCreateDialogOpen(false)}
+        onGroupCreated={handleGroupCreated}
+      />
+
+      <EditGroupDialog
+        isOpen={editDialogOpen}
+        onClose={() => setEditDialogOpen(false)}
+        group={selectedGroup}
+        onGroupUpdated={handleGroupUpdated}
+      />
+
+      <DeleteGroupDialog
+        isOpen={deleteDialogOpen}
+        onClose={() => setDeleteDialogOpen(false)}
+        group={selectedGroup}
+        onGroupDeleted={handleGroupDeleted}
+      />
+    </>
+  );
+}
@@ -0,0 +1,139 @@
+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 { Logo } from "./icons/logo";
+import { Button } from "./ui/button";
+import { CardTitle } from "./ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+type Props = {
+  selectedProfiles: string[];
+  onBulkGroupAssignment: () => void;
+  onBulkDelete: () => void;
+  onSettingsDialogOpen: (open: boolean) => void;
+  onProxyManagementDialogOpen: (open: boolean) => void;
+  onGroupManagementDialogOpen: (open: boolean) => void;
+  onImportProfileDialogOpen: (open: boolean) => void;
+  onCreateProfileDialogOpen: (open: boolean) => void;
+};
+
+const HomeHeader = ({
+  selectedProfiles,
+  onBulkGroupAssignment,
+  onBulkDelete,
+  onSettingsDialogOpen,
+  onProxyManagementDialogOpen,
+  onGroupManagementDialogOpen,
+  onImportProfileDialogOpen,
+  onCreateProfileDialogOpen,
+}: Props) => {
+  return (
+    <div className="flex justify-between items-center">
+      <div className="flex items-center gap-3">
+        <Logo className="w-10 h-10" />
+        {selectedProfiles.length > 0 ? (
+          <div className="flex items-center gap-3">
+            <span className="text-sm font-medium">
+              {selectedProfiles.length} profile
+              {selectedProfiles.length !== 1 ? "s" : ""} selected
+            </span>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={onBulkGroupAssignment}
+                className="flex gap-2 items-center"
+              >
+                <LuUsers className="w-4 h-4" />
+                Assign to Group
+              </Button>
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={onBulkDelete}
+                className="flex gap-2 items-center"
+              >
+                <LuTrash2 className="w-4 h-4" />
+                Delete Selected
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <CardTitle>Donut</CardTitle>
+        )}
+      </div>
+      <div className="flex gap-2 items-center">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="sm"
+              variant="outline"
+              className="flex gap-2 items-center"
+            >
+              <GoKebabHorizontal className="w-4 h-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              onClick={() => {
+                onSettingsDialogOpen(true);
+              }}
+            >
+              <GoGear className="mr-2 w-4 h-4" />
+              Settings
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                onProxyManagementDialogOpen(true);
+              }}
+            >
+              <FiWifi className="mr-2 w-4 h-4" />
+              Proxies
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                onGroupManagementDialogOpen(true);
+              }}
+            >
+              <LuUsers className="mr-2 w-4 h-4" />
+              Groups
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                onImportProfileDialogOpen(true);
+              }}
+            >
+              <FaDownload className="mr-2 w-4 h-4" />
+              Import Profile
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span>
+              <Button
+                size="sm"
+                onClick={() => {
+                  onCreateProfileDialogOpen(true);
+                }}
+                className="flex gap-2 items-center"
+              >
+                <GoPlus className="w-4 h-4" />
+              </Button>
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>Create a new profile</TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+export default HomeHeader;
@@ -142,7 +142,19 @@ export function ImportProfileDialog({
      console.error("Failed to import profile:", error);
      const errorMessage =
        error instanceof Error ? error.message : String(error);
-      toast.error(`Failed to import profile: ${errorMessage}`);
+
+      // Check if error is about browser not being downloaded
+      if (errorMessage.includes("No downloaded versions found")) {
+        const browserDisplayName = getBrowserDisplayName(profile.browser);
+        toast.error(
+          `${browserDisplayName} is not installed. Please download ${browserDisplayName} first from the main window, then try importing again.`,
+          {
+            duration: 8000,
+          },
+        );
+      } else {
+        toast.error(`Failed to import profile: ${errorMessage}`);
+      }
    } finally {
      setIsImporting(false);
    }
@@ -183,7 +195,19 @@ export function ImportProfileDialog({
      console.error("Failed to import profile:", error);
      const errorMessage =
        error instanceof Error ? error.message : String(error);
-      toast.error(`Failed to import profile: ${errorMessage}`);
+
+      // Check if error is about browser not being downloaded
+      if (errorMessage.includes("No downloaded versions found")) {
+        const browserDisplayName = getBrowserDisplayName(manualBrowserType);
+        toast.error(
+          `${browserDisplayName} is not installed. Please download ${browserDisplayName} first from the main window, then try importing again.`,
+          {
+            duration: 8000,
+          },
+        );
+      } else {
+        toast.error(`Failed to import profile: ${errorMessage}`);
+      }
    } finally {
      setIsImporting(false);
    }
@@ -13,11 +13,12 @@ import * as React from "react";
 import { CiCircleCheck } from "react-icons/ci";
 import { IoEllipsisHorizontal } from "react-icons/io5";
 import { LuChevronDown, LuChevronUp } from "react-icons/lu";
+import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
  Dialog,
  DialogContent,
-  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
@@ -44,8 +45,14 @@ import {
  TooltipContent,
  TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useBrowserState } from "@/hooks/use-browser-support";
 import { useTableSorting } from "@/hooks/use-table-sorting";
-import { getBrowserDisplayName, getBrowserIcon } from "@/lib/browser-utils";
+import {
+  getBrowserDisplayName,
+  getBrowserIcon,
+  getCurrentOS,
+} from "@/lib/browser-utils";
+import { cn } from "@/lib/utils";
 import type { BrowserProfile, StoredProxy } from "@/types";
 import { Input } from "./ui/input";
 import { Label } from "./ui/label";
@@ -58,9 +65,15 @@ interface ProfilesDataTableProps {
  onDeleteProfile: (profile: BrowserProfile) => void | Promise<void>;
  onRenameProfile: (oldName: string, newName: string) => Promise<void>;
  onChangeVersion: (profile: BrowserProfile) => void;
+  onConfigureCamoufox?: (profile: BrowserProfile) => void;
  runningProfiles: Set<string>;
  isUpdating?: (browser: string) => boolean;
  onReloadProxyData?: () => void | Promise<void>;
+  onDeleteSelectedProfiles?: (profileNames: string[]) => Promise<void>;
+  onAssignProfilesToGroup?: (profileNames: string[]) => void;
+  selectedGroupId?: string | null;
+  selectedProfiles?: string[];
+  onSelectedProfilesChange?: (profiles: string[]) => void;
 }

 export function ProfilesDataTable({
@@ -71,9 +84,14 @@ export function ProfilesDataTable({
  onDeleteProfile,
  onRenameProfile,
  onChangeVersion,
+  onConfigureCamoufox,
  runningProfiles,
  isUpdating = () => false,
-  onReloadProxyData,
+  onDeleteSelectedProfiles: _onDeleteSelectedProfiles,
+  onAssignProfilesToGroup,
+  selectedGroupId,
+  selectedProfiles: externalSelectedProfiles = [],
+  onSelectedProfilesChange,
 }: ProfilesDataTableProps) {
  const { getTableSorting, updateSorting, isLoaded } = useTableSorting();
  const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -83,11 +101,13 @@ export function ProfilesDataTable({
  const [renameError, setRenameError] = React.useState<string | null>(null);
  const [profileToDelete, setProfileToDelete] =
    React.useState<BrowserProfile | null>(null);
-  const [deleteConfirmationName, setDeleteConfirmationName] =
-    React.useState("");
-  const [deleteError, setDeleteError] = React.useState<string | null>(null);
-  const [isClient, setIsClient] = React.useState(false);
+  const [isDeleting, setIsDeleting] = React.useState(false);
+
  const [storedProxies, setStoredProxies] = React.useState<StoredProxy[]>([]);
+  const [selectedProfiles, setSelectedProfiles] = React.useState<Set<string>>(
+    new Set(externalSelectedProfiles),
+  );
+  const [showCheckboxes, setShowCheckboxes] = React.useState(false);

  // Helper function to check if a profile has a proxy
  const hasProxy = React.useCallback(
@@ -118,10 +138,21 @@ export function ProfilesDataTable({
    [storedProxies],
  );

-  // Ensure we're on the client side to prevent hydration mismatches
-  React.useEffect(() => {
-    setIsClient(true);
-  }, []);
+  // Filter data by selected group
+  const filteredData = React.useMemo(() => {
+    if (!selectedGroupId) return data;
+    if (selectedGroupId === "default") {
+      return data.filter((profile) => !profile.group_id);
+    }
+    return data.filter((profile) => profile.group_id === selectedGroupId);
+  }, [data, selectedGroupId]);
+
+  // Use shared browser state hook
+  const browserState = useBrowserState(
+    filteredData,
+    runningProfiles,
+    isUpdating,
+  );

  // Load stored proxies
  const loadStoredProxies = React.useCallback(async () => {
@@ -134,35 +165,35 @@ export function ProfilesDataTable({
  }, []);

  React.useEffect(() => {
-    if (isClient) {
+    if (browserState.isClient) {
      void loadStoredProxies();
    }
-  }, [isClient, loadStoredProxies]);
+  }, [browserState.isClient, loadStoredProxies]);

-  // Reload proxy data when requested from parent
+  // Sync external selected profiles with internal state
  React.useEffect(() => {
-    if (onReloadProxyData) {
-      void loadStoredProxies();
-    }
-  }, [onReloadProxyData, loadStoredProxies]);
+    const newSet = new Set(externalSelectedProfiles);
+    setSelectedProfiles(newSet);
+    setShowCheckboxes(newSet.size > 0);
+  }, [externalSelectedProfiles]);

  // Update local sorting state when settings are loaded
  React.useEffect(() => {
-    if (isLoaded && isClient) {
+    if (isLoaded && browserState.isClient) {
      setSorting(getTableSorting());
    }
-  }, [isLoaded, getTableSorting, isClient]);
+  }, [isLoaded, getTableSorting, browserState.isClient]);

  // Handle sorting changes
  const handleSortingChange = React.useCallback(
    (updater: React.SetStateAction<SortingState>) => {
-      if (!isClient) return;
+      if (!browserState.isClient) return;
      const newSorting =
        typeof updater === "function" ? updater(sorting) : updater;
      setSorting(newSorting);
      updateSorting(newSorting);
    },
-    [sorting, updateSorting, isClient],
+    [browserState.isClient, sorting, updateSorting],
  );

  const handleRename = async () => {
@@ -173,80 +204,190 @@ export function ProfilesDataTable({
      setProfileToRename(null);
      setNewProfileName("");
      setRenameError(null);
-    } catch (err) {
-      setRenameError(err as string);
+    } catch (error) {
+      setRenameError(
+        error instanceof Error ? error.message : "Failed to rename profile",
+      );
    }
  };

  const handleDelete = async () => {
-    if (!profileToDelete || !deleteConfirmationName.trim()) return;
-
-    if (deleteConfirmationName.trim() !== profileToDelete.name) {
-      setDeleteError(
-        "Profile name doesn't match. Please type the exact name to confirm deletion.",
-      );
-      return;
-    }
+    if (!profileToDelete) return;

+    setIsDeleting(true);
    try {
      await onDeleteProfile(profileToDelete);
      setProfileToDelete(null);
-      setDeleteConfirmationName("");
-      setDeleteError(null);
-    } catch (err) {
-      setDeleteError(err as string);
+    } catch (error) {
+      console.error("Failed to delete profile:", error);
+    } finally {
+      setIsDeleting(false);
    }
  };

+  // Handle icon/checkbox click
+  const handleIconClick = React.useCallback(
+    (profileName: string) => {
+      setShowCheckboxes(true);
+      setSelectedProfiles((prev) => {
+        const newSet = new Set(prev);
+        if (newSet.has(profileName)) {
+          newSet.delete(profileName);
+        } else {
+          newSet.add(profileName);
+        }
+
+        // Hide checkboxes if no profiles are selected
+        if (newSet.size === 0) {
+          setShowCheckboxes(false);
+        }
+
+        // Notify parent component
+        if (onSelectedProfilesChange) {
+          onSelectedProfilesChange(Array.from(newSet));
+        }
+
+        return newSet;
+      });
+    },
+    [onSelectedProfilesChange],
+  );
+
+  // Handle checkbox change
+  const handleCheckboxChange = React.useCallback(
+    (profileName: string, checked: boolean) => {
+      setSelectedProfiles((prev) => {
+        const newSet = new Set(prev);
+        if (checked) {
+          newSet.add(profileName);
+        } else {
+          newSet.delete(profileName);
+        }
+
+        // Hide checkboxes if no profiles are selected
+        if (newSet.size === 0) {
+          setShowCheckboxes(false);
+        }
+
+        // Notify parent component
+        if (onSelectedProfilesChange) {
+          onSelectedProfilesChange(Array.from(newSet));
+        }
+
+        return newSet;
+      });
+    },
+    [onSelectedProfilesChange],
+  );
+
+  // Handle select all checkbox
+  const handleToggleAll = React.useCallback(
+    (checked: boolean) => {
+      const newSet = checked
+        ? new Set(filteredData.map((profile) => profile.name))
+        : new Set<string>();
+
+      setSelectedProfiles(newSet);
+      setShowCheckboxes(checked);
+
+      // Notify parent component
+      if (onSelectedProfilesChange) {
+        onSelectedProfilesChange(Array.from(newSet));
+      }
+    },
+    [filteredData, onSelectedProfilesChange],
+  );
+
  const columns: ColumnDef<BrowserProfile>[] = React.useMemo(
    () => [
+      {
+        id: "select",
+        header: () => (
+          <span>
+            <Checkbox
+              checked={
+                selectedProfiles.size === filteredData.length &&
+                filteredData.length !== 0
+              }
+              onCheckedChange={(value) => handleToggleAll(!!value)}
+              aria-label="Select all"
+              className="cursor-pointer"
+            />
+          </span>
+        ),
+        cell: ({ row }) => {
+          const profile = row.original;
+          const browser = profile.browser;
+          const IconComponent = getBrowserIcon(browser);
+          const isSelected = selectedProfiles.has(profile.name);
+
+          if (showCheckboxes || isSelected) {
+            return (
+              <span className="w-4 h-4 flex items-center justify-center">
+                <Checkbox
+                  checked={isSelected}
+                  onCheckedChange={(value) =>
+                    handleCheckboxChange(profile.name, !!value)
+                  }
+                  aria-label="Select row"
+                  className="w-4 h-4"
+                />
+              </span>
+            );
+          }
+
+          return (
+            <span className="relative flex items-center justify-center w-4 h-4">
+              <button
+                type="button"
+                className="flex items-center justify-center cursor-pointer border-none p-0"
+                onClick={() => handleIconClick(profile.name)}
+                aria-label="Select profile"
+              >
+                <span className="w-4 h-4 group">
+                  {IconComponent && (
+                    <IconComponent className="w-4 h-4 group-hover:hidden" />
+                  )}
+                  <span className="peer border-input dark:bg-input/30 dark:data-[state=checked]:bg-primary size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none w-4 h-4 hidden group-hover:block pointer-events-none items-center justify-center duration-200" />
+                </span>
+              </button>
+            </span>
+          );
+        },
+        enableSorting: false,
+        enableHiding: false,
+        size: 40,
+      },
      {
        id: "actions",
        cell: ({ row }) => {
          const profile = row.original;
-          const isRunning = isClient && runningProfiles.has(profile.name);
-          const isBrowserUpdating = isClient && isUpdating(profile.browser);
-
-          // Check if any TOR browser profile is running
-          const isTorBrowser = profile.browser === "tor-browser";
-          const anyTorRunning =
-            isClient &&
-            data.some(
-              (p) => p.browser === "tor-browser" && runningProfiles.has(p.name),
-            );
-          const shouldDisableTorStart =
-            isTorBrowser && !isRunning && anyTorRunning;
-
-          const isDisabled = shouldDisableTorStart || isBrowserUpdating;
+          const isRunning =
+            browserState.isClient && runningProfiles.has(profile.name);
+          const canLaunch = browserState.canLaunchProfile(profile);
+          const tooltipContent = browserState.getLaunchTooltipContent(profile);

          return (
            <div className="flex gap-2 items-center">
              <Tooltip>
                <TooltipTrigger asChild>
-                  <Button
-                    variant={isRunning ? "destructive" : "default"}
-                    size="sm"
-                    disabled={!isClient || isDisabled}
-                    onClick={() =>
-                      void (isRunning
-                        ? onKillProfile(profile)
-                        : onLaunchProfile(profile))
-                    }
-                  >
-                    {isRunning ? "Stop" : "Launch"}
-                  </Button>
+                  <span className="inline-flex">
+                    <Button
+                      variant={isRunning ? "destructive" : "default"}
+                      size="sm"
+                      disabled={!canLaunch}
+                      className={!canLaunch ? "opacity-50" : ""}
+                      onClick={() =>
+                        void (isRunning
+                          ? onKillProfile(profile)
+                          : onLaunchProfile(profile))
+                      }
+                    >
+                      {isRunning ? "Stop" : "Launch"}
+                    </Button>
+                  </span>
                </TooltipTrigger>
-                <TooltipContent>
-                  {!isClient
-                    ? "Loading..."
-                    : isRunning
-                      ? "Click to forcefully stop the browser"
-                      : isBrowserUpdating
-                        ? `${profile.browser} is being updated. Please wait for the update to complete.`
-                        : shouldDisableTorStart
-                          ? "Only one TOR browser instance can run at a time. Stop the running TOR browser first."
-                          : "Click to launch the browser"}
-                </TooltipContent>
+                <TooltipContent>{tooltipContent}</TooltipContent>
              </Tooltip>
            </div>
          );
@@ -255,91 +396,65 @@ export function ProfilesDataTable({
      {
        accessorKey: "name",
        header: ({ column }) => {
-          const isSorted = column.getIsSorted();
          return (
            <Button
              variant="ghost"
-              onClick={() => {
-                column.toggleSorting(column.getIsSorted() === "asc");
-              }}
-              className="p-0 h-auto font-semibold hover:bg-transparent"
+              onClick={() =>
+                column.toggleSorting(column.getIsSorted() === "asc")
+              }
+              className="h-auto p-0 font-semibold text-left justify-start"
            >
-              Profile
-              {isSorted === "asc" && <LuChevronUp className="ml-2 w-4 h-4" />}
-              {isSorted === "desc" && (
-                <LuChevronDown className="ml-2 w-4 h-4" />
-              )}
-              {!isSorted && (
-                <LuChevronDown className="ml-2 w-4 h-4 opacity-50" />
-              )}
+              Name
+              {column.getIsSorted() === "asc" ? (
+                <LuChevronUp className="ml-2 h-4 w-4" />
+              ) : column.getIsSorted() === "desc" ? (
+                <LuChevronDown className="ml-2 h-4 w-4" />
+              ) : null}
            </Button>
          );
        },
        enableSorting: true,
        sortingFn: "alphanumeric",
        cell: ({ row }) => {
-          const profile = row.original;
-          return profile.name.length > 15 ? (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span className="truncate">{profile.name.slice(0, 15)}...</span>
-              </TooltipTrigger>
-              <TooltipContent>{profile.name}</TooltipContent>
-            </Tooltip>
-          ) : (
-            profile.name
-          );
+          const name: string = row.getValue("name");
+          return <div className="font-medium text-left">{name}</div>;
        },
      },
      {
        accessorKey: "browser",
        header: ({ column }) => {
-          const isSorted = column.getIsSorted();
          return (
            <Button
              variant="ghost"
-              onClick={() => {
-                column.toggleSorting(column.getIsSorted() === "asc");
-              }}
-              className="p-0 h-auto font-semibold hover:bg-transparent"
+              onClick={() =>
+                column.toggleSorting(column.getIsSorted() === "asc")
+              }
+              className="h-auto p-0 font-semibold text-left justify-start"
            >
              Browser
-              {isSorted === "asc" && <LuChevronUp className="ml-2 w-4 h-4" />}
-              {isSorted === "desc" && (
-                <LuChevronDown className="ml-2 w-4 h-4" />
-              )}
-              {!isSorted && (
-                <LuChevronDown className="ml-2 w-4 h-4 opacity-50" />
-              )}
+              {column.getIsSorted() === "asc" ? (
+                <LuChevronUp className="ml-2 h-4 w-4" />
+              ) : column.getIsSorted() === "desc" ? (
+                <LuChevronDown className="ml-2 h-4 w-4" />
+              ) : null}
            </Button>
          );
        },
        cell: ({ row }) => {
          const browser: string = row.getValue("browser");
-          const IconComponent = getBrowserIcon(browser);
-          const browserDisplayName = getBrowserDisplayName(browser);
-          return browserDisplayName.length > 15 ? (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <div className="flex gap-2 items-center">
-                  {IconComponent && <IconComponent className="w-4 h-4" />}
-                  <span>{browserDisplayName.slice(0, 15)}...</span>
-                </div>
-              </TooltipTrigger>
-              <TooltipContent>{browserDisplayName}</TooltipContent>
-            </Tooltip>
-          ) : (
-            <div className="flex gap-2 items-center">
-              {IconComponent && <IconComponent className="w-4 h-4" />}
-              <span>{browserDisplayName}</span>
+          return (
+            <div className="flex items-center">
+              <span>{getBrowserDisplayName(browser)}</span>
            </div>
          );
        },
        enableSorting: true,
        sortingFn: (rowA, rowB, columnId) => {
-          const browserA = getBrowserDisplayName(rowA.getValue(columnId));
-          const browserB = getBrowserDisplayName(rowB.getValue(columnId));
-          return browserA.localeCompare(browserB);
+          const browserA: string = rowA.getValue(columnId);
+          const browserB: string = rowB.getValue(columnId);
+          return getBrowserDisplayName(browserA).localeCompare(
+            getBrowserDisplayName(browserB),
+          );
        },
      },
      {
@@ -391,38 +506,41 @@ export function ProfilesDataTable({
                : "No proxy configured";

          return (
-            <Tooltip>
-              <TooltipTrigger>
-                <div className="flex gap-2 items-center">
-                  {profileHasProxy && (
-                    <CiCircleCheck className="w-4 h-4 text-green-500" />
-                  )}
-
-                  {proxyDisplayName.length > 10 ? (
-                    <span className="text-sm truncate text-muted-foreground">
-                      {proxyDisplayName.slice(0, 10)}...
-                    </span>
-                  ) : (
-                    <span className="text-sm text-muted-foreground">
-                      {profile.browser === "tor-browser"
-                        ? "Not supported"
-                        : proxyDisplayName}
-                    </span>
-                  )}
-                </div>
-              </TooltipTrigger>
-              <TooltipContent>{tooltipText}</TooltipContent>
-            </Tooltip>
+            <div className="flex items-center gap-2">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="flex gap-2 items-center">
+                    {profileHasProxy && (
+                      <CiCircleCheck className="w-4 h-4 text-green-500" />
+                    )}
+                    {proxyDisplayName.length > 10 ? (
+                      <span className="text-sm truncate text-muted-foreground">
+                        {proxyDisplayName.slice(0, 10)}...
+                      </span>
+                    ) : (
+                      <span className="text-sm text-muted-foreground">
+                        {profile.browser === "tor-browser"
+                          ? "Not supported"
+                          : proxyDisplayName}
+                      </span>
+                    )}
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>{tooltipText}</TooltipContent>
+              </Tooltip>
+            </div>
          );
        },
      },
-      // Update the settings column to use the confirmation dialog
      {
        id: "settings",
        cell: ({ row }) => {
          const profile = row.original;
-          const isRunning = isClient && runningProfiles.has(profile.name);
-          const isBrowserUpdating = isClient && isUpdating(profile.browser);
+          const isRunning =
+            browserState.isClient && runningProfiles.has(profile.name);
+          const isBrowserUpdating =
+            browserState.isClient && isUpdating(profile.browser);
+
          return (
            <div className="flex justify-end items-center">
              <DropdownMenu>
@@ -430,7 +548,7 @@ export function ProfilesDataTable({
                  <Button
                    variant="ghost"
                    className="p-0 w-8 h-8"
-                    disabled={!isClient}
+                    disabled={!browserState.isClient}
                  >
                    <span className="sr-only">Open menu</span>
                    <IoEllipsisHorizontal className="w-4 h-4" />
@@ -443,16 +561,42 @@ export function ProfilesDataTable({
                    onClick={() => {
                      onProxySettings(profile);
                    }}
-                    disabled={!isClient || isBrowserUpdating}
+                    disabled={!browserState.isClient || isBrowserUpdating}
                  >
                    Configure Proxy
                  </DropdownMenuItem>
-                  {!["chromium", "zen"].includes(profile.browser) && (
+                  <DropdownMenuItem
+                    onClick={() => {
+                      if (onAssignProfilesToGroup) {
+                        onAssignProfilesToGroup([profile.name]);
+                      }
+                    }}
+                    disabled={!browserState.isClient || isBrowserUpdating}
+                  >
+                    Assign to Group
+                  </DropdownMenuItem>
+                  {profile.browser === "camoufox" && onConfigureCamoufox && (
+                    <DropdownMenuItem
+                      onClick={() => {
+                        onConfigureCamoufox(profile);
+                      }}
+                      disabled={
+                        !browserState.isClient || isRunning || isBrowserUpdating
+                      }
+                    >
+                      Configure Camoufox
+                    </DropdownMenuItem>
+                  )}
+                  {!["chromium", "zen", "camoufox"].includes(
+                    profile.browser,
+                  ) && (
                    <DropdownMenuItem
                      onClick={() => {
                        onChangeVersion(profile);
                      }}
-                      disabled={!isClient || isRunning || isBrowserUpdating}
+                      disabled={
+                        !browserState.isClient || isRunning || isBrowserUpdating
+                      }
                    >
                      Switch Release
                    </DropdownMenuItem>
@@ -462,17 +606,19 @@ export function ProfilesDataTable({
                      setProfileToRename(profile);
                      setNewProfileName(profile.name);
                    }}
-                    disabled={!isClient || isRunning || isBrowserUpdating}
+                    disabled={
+                      !browserState.isClient || isRunning || isBrowserUpdating
+                    }
                  >
                    Rename
                  </DropdownMenuItem>
                  <DropdownMenuItem
                    onClick={() => {
                      setProfileToDelete(profile);
-                      setDeleteConfirmationName("");
                    }}
-                    className="text-red-600"
-                    disabled={!isClient || isRunning || isBrowserUpdating}
+                    disabled={
+                      !browserState.isClient || isRunning || isBrowserUpdating
+                    }
                  >
                    Delete
                  </DropdownMenuItem>
@@ -484,22 +630,29 @@ export function ProfilesDataTable({
      },
    ],
    [
-      isClient,
+      showCheckboxes,
+      selectedProfiles,
+      handleToggleAll,
+      handleCheckboxChange,
+      handleIconClick,
      runningProfiles,
-      isUpdating,
-      data,
-      onLaunchProfile,
-      onKillProfile,
-      onProxySettings,
-      onChangeVersion,
-      getProxyInfo,
+      browserState,
      hasProxy,
      getProxyDisplayName,
+      getProxyInfo,
+      onProxySettings,
+      onLaunchProfile,
+      onKillProfile,
+      onConfigureCamoufox,
+      onChangeVersion,
+      onAssignProfilesToGroup,
+      isUpdating,
+      filteredData.length,
    ],
  );

  const table = useReactTable({
-    data,
+    data: filteredData,
    columns,
    state: {
      sorting,
@@ -509,9 +662,16 @@ export function ProfilesDataTable({
    getCoreRowModel: getCoreRowModel(),
  });

+  const platform = getCurrentOS();
+
  return (
    <>
-      <ScrollArea className="h-[400px] rounded-md border">
+      <ScrollArea
+        className={cn(
+          "rounded-md border",
+          platform === "macos" ? "h-[340px]" : "h-[280px]",
+        )}
+      >
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
@@ -532,11 +692,12 @@ export function ProfilesDataTable({
            ))}
          </TableHeader>
          <TableBody>
-            {table.getRowModel().rows.length ? (
+            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
+                  className="hover:bg-accent/50"
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
@@ -608,73 +769,15 @@ export function ProfilesDataTable({
        </DialogContent>
      </Dialog>

-      <Dialog
-        open={profileToDelete !== null}
-        onOpenChange={(open) => {
-          if (!open) {
-            setProfileToDelete(null);
-            setDeleteConfirmationName("");
-            setDeleteError(null);
-          }
-        }}
-      >
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Delete Profile</DialogTitle>
-            <DialogDescription>
-              This action cannot be undone. This will permanently delete the
-              profile &quot;{profileToDelete?.name}&quot; and all its associated
-              data.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="grid gap-4 py-4">
-            <div className="grid gap-2">
-              <Label htmlFor="delete-confirmation">
-                Please type <strong>{profileToDelete?.name}</strong> to confirm:
-              </Label>
-              <Input
-                id="delete-confirmation"
-                value={deleteConfirmationName}
-                onChange={(e) => {
-                  setDeleteConfirmationName(e.target.value);
-                  setDeleteError(null);
-                }}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") {
-                    void handleDelete();
-                  }
-                }}
-                placeholder="Type the profile name here"
-              />
-            </div>
-            {deleteError && (
-              <p className="text-sm text-red-600">{deleteError}</p>
-            )}
-          </div>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => {
-                setProfileToDelete(null);
-                setDeleteConfirmationName("");
-                setDeleteError(null);
-              }}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={() => void handleDelete()}
-              disabled={
-                !deleteConfirmationName.trim() ||
-                deleteConfirmationName !== profileToDelete?.name
-              }
-            >
-              Delete Profile
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      <DeleteConfirmationDialog
+        isOpen={profileToDelete !== null}
+        onClose={() => setProfileToDelete(null)}
+        onConfirm={handleDelete}
+        title="Delete Profile"
+        description={`This action cannot be undone. This will permanently delete the profile "${profileToDelete?.name}" and all its associated data.`}
+        confirmButtonText="Delete Profile"
+        isLoading={isDeleting}
+      />
    </>
  );
 }
@@ -27,6 +27,7 @@ import {
  TooltipContent,
  TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useBrowserState } from "@/hooks/use-browser-support";
 import { getBrowserDisplayName, getBrowserIcon } from "@/lib/browser-utils";
 import type { BrowserProfile, StoredProxy } from "@/types";

@@ -49,6 +50,9 @@ export function ProfileSelectorDialog({
  const [isLaunching, setIsLaunching] = useState(false);
  const [storedProxies, setStoredProxies] = useState<StoredProxy[]>([]);

+  // Use shared browser state hook
+  const browserState = useBrowserState(profiles, runningProfiles);
+
  // Helper function to check if a profile has a proxy
  const hasProxy = useCallback(
    (profile: BrowserProfile): boolean => {
@@ -59,41 +63,6 @@ export function ProfileSelectorDialog({
    [storedProxies],
  );

-  // Helper function to determine if a profile can be used for opening links
-  const canUseProfileForLinks = useCallback(
-    (
-      profile: BrowserProfile,
-      allProfiles: BrowserProfile[],
-      runningProfiles: Set<string>,
-    ): boolean => {
-      const isRunning = runningProfiles.has(profile.name);
-
-      // For TOR browser: Check if any TOR browser is running
-      if (profile.browser === "tor-browser") {
-        const runningTorProfiles = allProfiles.filter(
-          (p) => p.browser === "tor-browser" && runningProfiles.has(p.name),
-        );
-
-        // If no TOR browser is running, allow any TOR profile
-        if (runningTorProfiles.length === 0) {
-          return true;
-        }
-
-        // If TOR browser(s) are running, only allow the running one(s)
-        return isRunning;
-      }
-
-      // For Mullvad browser: never allow if running
-      if (profile.browser === "mullvad-browser" && isRunning) {
-        return false;
-      }
-
-      // For other browsers: always allow
-      return true;
-    },
-    [],
-  );
-
  const loadProfiles = useCallback(async () => {
    setIsLoading(true);
    try {
@@ -115,56 +84,31 @@ export function ProfileSelectorDialog({
        // 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);
-          return (
-            isRunning &&
-            canUseProfileForLinks(profile, profileList, runningProfiles)
-          );
+          return isRunning && browserState.canUseProfileForLinks(profile);
        });

        if (runningAvailableProfile) {
          setSelectedProfile(runningAvailableProfile.name);
        } else {
-          // If no running profile is suitable, find the first profile that can be used for opening links
-          const availableProfile = profileList.find((profile) => {
-            return canUseProfileForLinks(profile, profileList, runningProfiles);
-          });
-
+          // If no running profile is available, find the first available profile
+          const availableProfile = profileList.find((profile) =>
+            browserState.canUseProfileForLinks(profile),
+          );
          if (availableProfile) {
            setSelectedProfile(availableProfile.name);
-          } else {
-            // If no suitable profile found, still select the first one to show UI
-            setSelectedProfile(profileList[0].name);
          }
        }
      }
-    } catch (error) {
-      console.error("Failed to load profiles:", error);
+    } catch (err) {
+      console.error("Failed to load profiles:", err);
    } finally {
      setIsLoading(false);
    }
-  }, [runningProfiles, canUseProfileForLinks]);
+  }, [runningProfiles, browserState]);

-  // Helper function to get tooltip content for profiles
-  const getProfileTooltipContent = (profile: BrowserProfile): string => {
-    const isRunning = runningProfiles.has(profile.name);
-
-    if (profile.browser === "tor-browser") {
-      // If another TOR profile is running, this one is not available
-      return "Only 1 instance can run at a time";
-    }
-
-    if (profile.browser === "mullvad-browser") {
-      if (isRunning) {
-        return "Only launching the browser is supported, opening them in a running browser is not yet available";
-      }
-      return "Only launching the browser is supported, opening them in a running browser is not yet available";
-    }
-
-    if (isRunning) {
-      return "URL will open in a new tab in the existing browser window";
-    }
-
-    return "";
+  // Helper function to get tooltip content for profiles - now uses shared hook
+  const getProfileTooltipContent = (profile: BrowserProfile): string | null => {
+    return browserState.getProfileTooltipContent(profile);
  };

  const handleOpenUrl = useCallback(async () => {
@@ -206,16 +150,12 @@ export function ProfileSelectorDialog({
  // Check if the selected profile can be used for opening links
  const canOpenWithSelectedProfile = () => {
    if (!selectedProfileData) return false;
-    return canUseProfileForLinks(
-      selectedProfileData,
-      profiles,
-      runningProfiles,
-    );
+    return browserState.canUseProfileForLinks(selectedProfileData);
  };

  // Get tooltip content for disabled profiles
  const getTooltipContent = () => {
-    if (!selectedProfileData) return "";
+    if (!selectedProfileData) return null;
    return getProfileTooltipContent(selectedProfileData);
  };

@@ -280,65 +220,64 @@ export function ProfileSelectorDialog({
                <SelectContent>
                  {profiles.map((profile) => {
                    const isRunning = runningProfiles.has(profile.name);
-                    const canUseForLinks = canUseProfileForLinks(
-                      profile,
-                      profiles,
-                      runningProfiles,
-                    );
+                    const canUseForLinks =
+                      browserState.canUseProfileForLinks(profile);
                    const tooltipContent = getProfileTooltipContent(profile);

                    return (
                      <Tooltip key={profile.name}>
                        <TooltipTrigger asChild>
-                          <SelectItem
-                            value={profile.name}
-                            disabled={!canUseForLinks}
-                          >
-                            <div
-                              className={`flex items-center gap-2 ${
-                                !canUseForLinks ? "opacity-50" : ""
-                              }`}
+                          <span className="inline-flex">
+                            <SelectItem
+                              value={profile.name}
+                              disabled={!canUseForLinks}
                            >
-                              <div className="flex gap-3 items-center px-2 py-1 rounded-lg cursor-pointer hover:bg-accent">
-                                <div className="flex gap-2 items-center">
-                                  {(() => {
-                                    const IconComponent = getBrowserIcon(
-                                      profile.browser,
-                                    );
-                                    return IconComponent ? (
-                                      <IconComponent className="w-4 h-4" />
-                                    ) : null;
-                                  })()}
-                                </div>
-                                <div className="flex-1 text-right">
-                                  <div className="font-medium">
-                                    {profile.name}
+                              <div
+                                className={`flex items-center gap-2 ${
+                                  !canUseForLinks ? "opacity-50" : ""
+                                }`}
+                              >
+                                <div className="flex gap-3 items-center px-2 py-1 rounded-lg cursor-pointer hover:bg-accent">
+                                  <div className="flex gap-2 items-center">
+                                    {(() => {
+                                      const IconComponent = getBrowserIcon(
+                                        profile.browser,
+                                      );
+                                      return IconComponent ? (
+                                        <IconComponent className="w-4 h-4" />
+                                      ) : null;
+                                    })()}
+                                  </div>
+                                  <div className="flex-1 text-right">
+                                    <div className="font-medium">
+                                      {profile.name}
+                                    </div>
                                  </div>
                                </div>
+                                <Badge variant="secondary" className="text-xs">
+                                  {getBrowserDisplayName(profile.browser)}
+                                </Badge>
+                                {hasProxy(profile) && (
+                                  <Badge variant="outline" className="text-xs">
+                                    Proxy
+                                  </Badge>
+                                )}
+                                {isRunning && (
+                                  <Badge variant="default" className="text-xs">
+                                    Running
+                                  </Badge>
+                                )}
+                                {!canUseForLinks && (
+                                  <Badge
+                                    variant="destructive"
+                                    className="text-xs"
+                                  >
+                                    Unavailable
+                                  </Badge>
+                                )}
                              </div>
-                              <Badge variant="secondary" className="text-xs">
-                                {getBrowserDisplayName(profile.browser)}
-                              </Badge>
-                              {hasProxy(profile) && (
-                                <Badge variant="outline" className="text-xs">
-                                  Proxy
-                                </Badge>
-                              )}
-                              {isRunning && (
-                                <Badge variant="default" className="text-xs">
-                                  Running
-                                </Badge>
-                              )}
-                              {!canUseForLinks && (
-                                <Badge
-                                  variant="destructive"
-                                  className="text-xs"
-                                >
-                                  Unavailable
-                                </Badge>
-                              )}
-                            </div>
-                          </SelectItem>
+                            </SelectItem>
+                          </span>
                        </TooltipTrigger>
                        {tooltipContent && (
                          <TooltipContent>{tooltipContent}</TooltipContent>
@@ -358,7 +297,7 @@ export function ProfileSelectorDialog({
          </Button>
          <Tooltip>
            <TooltipTrigger asChild>
-              <div>
+              <span className="inline-flex">
                <LoadingButton
                  isLoading={isLaunching}
                  onClick={() => void handleOpenUrl()}
@@ -370,7 +309,7 @@ export function ProfileSelectorDialog({
                >
                  Open
                </LoadingButton>
-              </div>
+              </span>
            </TooltipTrigger>
            {getTooltipContent() && (
              <TooltipContent>{getTooltipContent()}</TooltipContent>
@@ -0,0 +1,568 @@
+"use client";
+
+import { invoke } from "@tauri-apps/api/core";
+import { useEffect, useState } from "react";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { CamoufoxConfig } from "@/types";
+
+const osOptions = [
+  { value: "windows", label: "Windows" },
+  { value: "macos", label: "macOS" },
+  { value: "linux", label: "Linux" },
+];
+
+const timezoneOptions = [
+  { value: "America/New_York", label: "America/New_York" },
+  { value: "America/Los_Angeles", label: "America/Los_Angeles" },
+  { value: "America/Chicago", label: "America/Chicago" },
+  { value: "America/Denver", label: "America/Denver" },
+  { value: "America/Phoenix", label: "America/Phoenix" },
+  { value: "America/Toronto", label: "America/Toronto" },
+  { value: "America/Vancouver", label: "America/Vancouver" },
+  { value: "Europe/London", label: "Europe/London" },
+  { value: "Europe/Paris", label: "Europe/Paris" },
+  { value: "Europe/Berlin", label: "Europe/Berlin" },
+  { value: "Europe/Rome", label: "Europe/Rome" },
+  { value: "Europe/Madrid", label: "Europe/Madrid" },
+  { value: "Europe/Amsterdam", label: "Europe/Amsterdam" },
+  { value: "Europe/Zurich", label: "Europe/Zurich" },
+  { value: "Europe/Vienna", label: "Europe/Vienna" },
+  { value: "Europe/Warsaw", label: "Europe/Warsaw" },
+  { value: "Europe/Prague", label: "Europe/Prague" },
+  { value: "Europe/Stockholm", label: "Europe/Stockholm" },
+  { value: "Europe/Copenhagen", label: "Europe/Copenhagen" },
+  { value: "Europe/Helsinki", label: "Europe/Helsinki" },
+  { value: "Europe/Oslo", label: "Europe/Oslo" },
+  { value: "Europe/Brussels", label: "Europe/Brussels" },
+  { value: "Europe/Dublin", label: "Europe/Dublin" },
+  { value: "Europe/Lisbon", label: "Europe/Lisbon" },
+  { value: "Europe/Athens", label: "Europe/Athens" },
+  { value: "Europe/Budapest", label: "Europe/Budapest" },
+  { value: "Europe/Bucharest", label: "Europe/Bucharest" },
+  { value: "Europe/Sofia", label: "Europe/Sofia" },
+  { value: "Europe/Kiev", label: "Europe/Kiev" },
+  { value: "Europe/Moscow", label: "Europe/Moscow" },
+  { value: "Asia/Tokyo", label: "Asia/Tokyo" },
+  { value: "Asia/Seoul", label: "Asia/Seoul" },
+  { value: "Asia/Shanghai", label: "Asia/Shanghai" },
+  { value: "Asia/Hong_Kong", label: "Asia/Hong_Kong" },
+  { value: "Asia/Singapore", label: "Asia/Singapore" },
+  { value: "Asia/Bangkok", label: "Asia/Bangkok" },
+  { value: "Asia/Jakarta", label: "Asia/Jakarta" },
+  { value: "Asia/Manila", label: "Asia/Manila" },
+  { value: "Asia/Kolkata", label: "Asia/Kolkata" },
+  { value: "Asia/Dubai", label: "Asia/Dubai" },
+  { value: "Asia/Riyadh", label: "Asia/Riyadh" },
+  { value: "Asia/Tehran", label: "Asia/Tehran" },
+  { value: "Asia/Jerusalem", label: "Asia/Jerusalem" },
+  { value: "Asia/Istanbul", label: "Asia/Istanbul" },
+  { value: "Australia/Sydney", label: "Australia/Sydney" },
+  { value: "Australia/Melbourne", label: "Australia/Melbourne" },
+  { value: "Australia/Brisbane", label: "Australia/Brisbane" },
+  { value: "Australia/Perth", label: "Australia/Perth" },
+  { value: "Australia/Adelaide", label: "Australia/Adelaide" },
+  { value: "Pacific/Auckland", label: "Pacific/Auckland" },
+  { value: "Pacific/Honolulu", label: "Pacific/Honolulu" },
+  { value: "Africa/Cairo", label: "Africa/Cairo" },
+  { value: "Africa/Johannesburg", label: "Africa/Johannesburg" },
+  { value: "Africa/Lagos", label: "Africa/Lagos" },
+  { value: "Africa/Nairobi", label: "Africa/Nairobi" },
+  { value: "America/Sao_Paulo", label: "America/Sao_Paulo" },
+  { value: "America/Buenos_Aires", label: "America/Buenos_Aires" },
+  { value: "America/Lima", label: "America/Lima" },
+  { value: "America/Bogota", label: "America/Bogota" },
+  { value: "America/Santiago", label: "America/Santiago" },
+  { value: "America/Caracas", label: "America/Caracas" },
+  { value: "America/Mexico_City", label: "America/Mexico_City" },
+];
+
+const localeOptions = [
+  { value: "en-US", label: "English (US)" },
+  { value: "en-GB", label: "English (UK)" },
+  { value: "en-CA", label: "English (Canada)" },
+  { value: "en-AU", label: "English (Australia)" },
+  { value: "fr-FR", label: "French (France)" },
+  { value: "fr-CA", label: "French (Canada)" },
+  { value: "de-DE", label: "German (Germany)" },
+  { value: "de-AT", label: "German (Austria)" },
+  { value: "de-CH", label: "German (Switzerland)" },
+  { value: "es-ES", label: "Spanish (Spain)" },
+  { value: "es-MX", label: "Spanish (Mexico)" },
+  { value: "es-AR", label: "Spanish (Argentina)" },
+  { value: "it-IT", label: "Italian (Italy)" },
+  { value: "it-CH", label: "Italian (Switzerland)" },
+  { value: "pt-BR", label: "Portuguese (Brazil)" },
+  { value: "pt-PT", label: "Portuguese (Portugal)" },
+  { value: "ru-RU", label: "Russian (Russia)" },
+  { value: "zh-CN", label: "Chinese (Simplified)" },
+  { value: "zh-TW", label: "Chinese (Traditional)" },
+  { value: "ja-JP", label: "Japanese (Japan)" },
+  { value: "ko-KR", label: "Korean (Korea)" },
+  { value: "ar-SA", label: "Arabic (Saudi Arabia)" },
+  { value: "ar-EG", label: "Arabic (Egypt)" },
+  { value: "hi-IN", label: "Hindi (India)" },
+  { value: "tr-TR", label: "Turkish (Turkey)" },
+  { value: "pl-PL", label: "Polish (Poland)" },
+  { value: "nl-NL", label: "Dutch (Netherlands)" },
+  { value: "nl-BE", label: "Dutch (Belgium)" },
+  { value: "sv-SE", label: "Swedish (Sweden)" },
+  { value: "da-DK", label: "Danish (Denmark)" },
+  { value: "no-NO", label: "Norwegian (Norway)" },
+  { value: "fi-FI", label: "Finnish (Finland)" },
+  { value: "he-IL", label: "Hebrew (Israel)" },
+  { value: "th-TH", label: "Thai (Thailand)" },
+  { value: "vi-VN", label: "Vietnamese (Vietnam)" },
+  { value: "id-ID", label: "Indonesian (Indonesia)" },
+  { value: "ms-MY", label: "Malay (Malaysia)" },
+  { value: "uk-UA", label: "Ukrainian (Ukraine)" },
+  { value: "cs-CZ", label: "Czech (Czech Republic)" },
+  { value: "sk-SK", label: "Slovak (Slovakia)" },
+  { value: "hu-HU", label: "Hungarian (Hungary)" },
+  { value: "ro-RO", label: "Romanian (Romania)" },
+  { value: "bg-BG", label: "Bulgarian (Bulgaria)" },
+  { value: "hr-HR", label: "Croatian (Croatia)" },
+  { value: "sr-RS", label: "Serbian (Serbia)" },
+  { value: "sl-SI", label: "Slovenian (Slovenia)" },
+  { value: "lt-LT", label: "Lithuanian (Lithuania)" },
+  { value: "lv-LV", label: "Latvian (Latvia)" },
+  { value: "et-EE", label: "Estonian (Estonia)" },
+  { value: "el-GR", label: "Greek (Greece)" },
+  { value: "ca-ES", label: "Catalan (Spain)" },
+  { value: "eu-ES", label: "Basque (Spain)" },
+  { value: "gl-ES", label: "Galician (Spain)" },
+  { value: "is-IS", label: "Icelandic (Iceland)" },
+  { value: "mt-MT", label: "Maltese (Malta)" },
+];
+
+const getCurrentOS = () => {
+  if (typeof window !== "undefined") {
+    const userAgent = window.navigator.userAgent;
+    if (userAgent.includes("Win")) return "windows";
+    if (userAgent.includes("Mac")) return "macos";
+    if (userAgent.includes("Linux")) return "linux";
+  }
+  return "unknown";
+};
+
+interface SystemLocale {
+  locale: string;
+  language: string;
+  country: string;
+}
+
+interface SystemTimezone {
+  timezone: string;
+  offset: string;
+}
+
+interface SharedCamoufoxConfigFormProps {
+  config: CamoufoxConfig;
+  onConfigChange: (key: keyof CamoufoxConfig, value: unknown) => void;
+  className?: string;
+}
+
+export function SharedCamoufoxConfigForm({
+  config,
+  onConfigChange,
+  className = "",
+}: SharedCamoufoxConfigFormProps) {
+  const [systemLocale, setSystemLocale] = useState<SystemLocale | null>(null);
+  const [systemTimezone, setSystemTimezone] = useState<SystemTimezone | null>(
+    null,
+  );
+  const [isLoadingSystemDefaults, setIsLoadingSystemDefaults] = useState(true);
+
+  // Load system defaults on component mount
+  useEffect(() => {
+    const loadSystemDefaults = async () => {
+      try {
+        const [locale, timezone] = await Promise.all([
+          invoke<SystemLocale>("get_system_locale"),
+          invoke<SystemTimezone>("get_system_timezone"),
+        ]);
+        setSystemLocale(locale);
+        setSystemTimezone(timezone);
+      } catch (error) {
+        console.error("Failed to load system defaults:", error);
+        // Set fallback defaults
+        setSystemLocale({
+          locale: "en-US",
+          language: "en",
+          country: "US",
+        });
+        setSystemTimezone({
+          timezone: "America/New_York",
+          offset: "-05:00",
+        });
+      } finally {
+        setIsLoadingSystemDefaults(false);
+      }
+    };
+
+    loadSystemDefaults();
+  }, []);
+
+  // Get the selected OS for warning
+  const selectedOS = config.os?.[0];
+  const currentOS = getCurrentOS();
+  const showOSWarning =
+    selectedOS && selectedOS !== currentOS && currentOS !== "unknown";
+
+  return (
+    <div className={`space-y-6 ${className}`}>
+      {/* OS Selection */}
+      <div className="space-y-3">
+        <Label>Operating System</Label>
+        <Select
+          value={config.os?.[0] || getCurrentOS()}
+          onValueChange={(value) => onConfigChange("os", [value])}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select OS" />
+          </SelectTrigger>
+          <SelectContent>
+            {osOptions.map((os) => (
+              <SelectItem key={os.value} value={os.value}>
+                {os.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {showOSWarning && (
+          <p className="text-sm text-yellow-600 dark:text-yellow-400">
+            ⚠️ Selected OS ({selectedOS}) differs from your current OS (
+            {currentOS}). This may affect fingerprinting effectiveness.
+          </p>
+        )}
+      </div>
+
+      {/* Privacy & Blocking */}
+      <div className="space-y-3">
+        <Label>Privacy & Blocking</Label>
+        <div className="space-y-2">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="block-images"
+              checked={config.block_images || false}
+              onCheckedChange={(checked) =>
+                onConfigChange("block_images", checked)
+              }
+            />
+            <Label htmlFor="block-images">Block Images</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="block-webrtc"
+              checked={config.block_webrtc || false}
+              onCheckedChange={(checked) =>
+                onConfigChange("block_webrtc", checked)
+              }
+            />
+            <Label htmlFor="block-webrtc">Block WebRTC</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="block-webgl"
+              checked={config.block_webgl || false}
+              onCheckedChange={(checked) =>
+                onConfigChange("block_webgl", checked)
+              }
+            />
+            <Label htmlFor="block-webgl">Block WebGL</Label>
+          </div>
+        </div>
+      </div>
+
+      {/* Geolocation */}
+      <div className="space-y-3">
+        <Label>Geolocation</Label>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="country">Country</Label>
+            <Input
+              id="country"
+              value={config.country || ""}
+              onChange={(e) =>
+                onConfigChange("country", e.target.value || undefined)
+              }
+              placeholder={
+                systemLocale
+                  ? `e.g., ${systemLocale.country}`
+                  : "e.g., US, GB, DE"
+              }
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Timezone</Label>
+            <Select
+              value={config.timezone || "auto"}
+              onValueChange={(value) =>
+                onConfigChange("timezone", value === "auto" ? undefined : value)
+              }
+            >
+              <SelectTrigger>
+                <SelectValue
+                  placeholder={
+                    isLoadingSystemDefaults ? "Loading..." : "Select timezone"
+                  }
+                />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="auto">
+                  {isLoadingSystemDefaults
+                    ? "Auto (loading...)"
+                    : `Auto (${systemTimezone?.timezone || "UTC"})`}
+                </SelectItem>
+                {timezoneOptions.map((tz) => (
+                  <SelectItem key={tz.value} value={tz.value}>
+                    {tz.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="latitude">Latitude</Label>
+            <Input
+              id="latitude"
+              type="number"
+              step="any"
+              value={config.latitude || ""}
+              onChange={(e) =>
+                onConfigChange(
+                  "latitude",
+                  e.target.value ? parseFloat(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 40.7128"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="longitude">Longitude</Label>
+            <Input
+              id="longitude"
+              type="number"
+              step="any"
+              value={config.longitude || ""}
+              onChange={(e) =>
+                onConfigChange(
+                  "longitude",
+                  e.target.value ? parseFloat(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., -74.0060"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Localization */}
+      <div className="space-y-3">
+        <Label>Locale</Label>
+        <Select
+          value={config.locale?.[0] || ""}
+          onValueChange={(value) =>
+            onConfigChange("locale", value ? [value] : undefined)
+          }
+        >
+          <SelectTrigger>
+            <SelectValue
+              placeholder={
+                isLoadingSystemDefaults
+                  ? "Loading..."
+                  : `Select locale (system: ${systemLocale?.locale || "unknown"})`
+              }
+            />
+          </SelectTrigger>
+          <SelectContent>
+            {!isLoadingSystemDefaults && systemLocale && (
+              <SelectItem value={systemLocale.locale}>
+                {systemLocale.locale} (System Default)
+              </SelectItem>
+            )}
+            {localeOptions.map((locale) => (
+              <SelectItem key={locale.value} value={locale.value}>
+                {locale.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Screen Resolution */}
+      <div className="space-y-3">
+        <Label>Screen Resolution</Label>
+        <div className="grid grid-cols-2 gap-4">
+          <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) : undefined,
+                )
+              }
+              placeholder="e.g., 1024"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="screen-max-width">Max Width</Label>
+            <Input
+              id="screen-max-width"
+              type="number"
+              value={config.screen_max_width || ""}
+              onChange={(e) =>
+                onConfigChange(
+                  "screen_max_width",
+                  e.target.value ? parseInt(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 1920"
+            />
+          </div>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <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) : undefined,
+                )
+              }
+              placeholder="e.g., 768"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="screen-max-height">Max Height</Label>
+            <Input
+              id="screen-max-height"
+              type="number"
+              value={config.screen_max_height || ""}
+              onChange={(e) =>
+                onConfigChange(
+                  "screen_max_height",
+                  e.target.value ? parseInt(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 1080"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Window Size */}
+      <div className="space-y-3">
+        <Label>Window Size</Label>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="window-width">Width</Label>
+            <Input
+              id="window-width"
+              type="number"
+              value={config.window_width || ""}
+              onChange={(e) =>
+                onConfigChange(
+                  "window_width",
+                  e.target.value ? parseInt(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 1366"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="window-height">Height</Label>
+            <Input
+              id="window-height"
+              type="number"
+              value={config.window_height || ""}
+              onChange={(e) =>
+                onConfigChange(
+                  "window_height",
+                  e.target.value ? parseInt(e.target.value) : undefined,
+                )
+              }
+              placeholder="e.g., 768"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Advanced Options */}
+      <div className="space-y-3">
+        <Label>Advanced Options</Label>
+        <div className="space-y-2">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="enable-cache"
+              checked={config.enable_cache || false}
+              onCheckedChange={(checked) =>
+                onConfigChange("enable_cache", checked)
+              }
+            />
+            <Label htmlFor="enable-cache">Enable Browser Cache</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="main-world-eval"
+              checked={config.main_world_eval || false}
+              onCheckedChange={(checked) =>
+                onConfigChange("main_world_eval", checked)
+              }
+            />
+            <Label htmlFor="main-world-eval">
+              Enable Main World Evaluation
+            </Label>
+          </div>
+        </div>
+      </div>
+
+      {/* WebGL Settings */}
+      <div className="space-y-3">
+        <Label>WebGL Settings</Label>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="webgl-vendor">WebGL Vendor</Label>
+            <Input
+              id="webgl-vendor"
+              value={config.webgl_vendor || ""}
+              onChange={(e) =>
+                onConfigChange("webgl_vendor", e.target.value || undefined)
+              }
+              placeholder="e.g., Intel Inc."
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="webgl-renderer">WebGL Renderer</Label>
+            <Input
+              id="webgl-renderer"
+              value={config.webgl_renderer || ""}
+              onChange={(e) =>
+                onConfigChange("webgl_renderer", e.target.value || undefined)
+              }
+              placeholder="e.g., Intel HD Graphics"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -19,6 +19,85 @@ import {
 } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";

+interface ComboboxOption {
+  value: string;
+  label: string;
+  description?: string;
+}
+
+interface ComboboxProps {
+  options: ComboboxOption[];
+  value: string;
+  onValueChange: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  className?: string;
+}
+
+export function Combobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select option...",
+  searchPlaceholder = "Search...",
+  className,
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn("w-full justify-between", className)}
+        >
+          {value
+            ? options.find((option) => option.value === value)?.label
+            : placeholder}
+          <LuChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-0">
+        <Command>
+          <CommandInput placeholder={searchPlaceholder} />
+          <CommandList>
+            <CommandEmpty>No option found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  onSelect={(currentValue) => {
+                    onValueChange(currentValue === value ? "" : currentValue);
+                    setOpen(false);
+                  }}
+                >
+                  <LuCheck
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value === option.value ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                  <div className="flex flex-col">
+                    <span>{option.label}</span>
+                    {option.description && (
+                      <span className="text-sm text-muted-foreground">
+                        {option.description}
+                      </span>
+                    )}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 const frameworks = [
  {
    value: "next.js",
@@ -0,0 +1,44 @@
+"use client";
+
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as React from "react";
+import { LuCircle } from "react-icons/lu";
+
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <LuCircle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };
@@ -70,7 +70,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 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap",
        className,
      )}
      {...props}
@@ -82,10 +82,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
  return (
    <td
      data-slot="table-cell"
-      className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className,
-      )}
+      className={cn("p-2 align-middle whitespace-nowrap", className)}
      {...props}
    />
  );
@@ -0,0 +1,55 @@
+"use client";
+
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
@@ -120,7 +120,7 @@ export function useAppUpdateNotifications() {
          setTimeout(() => {
            setIsUpdating(false);
            setUpdateProgress(null);
-          }, 2000);
+          }, 5000); // Show completion message for 5 seconds instead of 2
        }
      },
    );
@@ -247,41 +247,58 @@ export function useBrowserDownload() {

  // Listen for download progress events
  useEffect(() => {
-    const unlisten = listen<DownloadProgress>("download-progress", (event) => {
-      const progress = event.payload;
-      setDownloadProgress(progress);
+    let unlistenFn: (() => void) | null = null;

-      const browserName = getBrowserDisplayName(progress.browser);
+    const setupListener = async () => {
+      try {
+        unlistenFn = await listen<DownloadProgress>(
+          "download-progress",
+          (event) => {
+            const progress = event.payload;
+            setDownloadProgress(progress);

-      // Show toast with progress
-      if (progress.stage === "downloading") {
-        const speedMBps = (
-          progress.speed_bytes_per_sec /
-          (1024 * 1024)
-        ).toFixed(1);
-        const etaText = progress.eta_seconds
-          ? formatTime(progress.eta_seconds)
-          : "calculating...";
+            const browserName = getBrowserDisplayName(progress.browser);

-        showDownloadToast(browserName, progress.version, "downloading", {
-          percentage: progress.percentage,
-          speed: speedMBps,
-          eta: etaText,
-        });
-      } else if (progress.stage === "extracting") {
-        showDownloadToast(browserName, progress.version, "extracting");
-      } else if (progress.stage === "verifying") {
-        showDownloadToast(browserName, progress.version, "verifying");
-      } else if (progress.stage === "completed") {
-        showDownloadToast(browserName, progress.version, "completed");
-        setDownloadProgress(null);
+            // Show toast with progress
+            if (progress.stage === "downloading") {
+              const speedMBps = (
+                progress.speed_bytes_per_sec /
+                (1024 * 1024)
+              ).toFixed(1);
+              const etaText = progress.eta_seconds
+                ? formatTime(progress.eta_seconds)
+                : "calculating...";
+
+              showDownloadToast(browserName, progress.version, "downloading", {
+                percentage: progress.percentage,
+                speed: speedMBps,
+                eta: etaText,
+              });
+            } else if (progress.stage === "extracting") {
+              showDownloadToast(browserName, progress.version, "extracting");
+            } else if (progress.stage === "verifying") {
+              showDownloadToast(browserName, progress.version, "verifying");
+            } else if (progress.stage === "completed") {
+              showDownloadToast(browserName, progress.version, "completed");
+              setDownloadProgress(null);
+            }
+          },
+        );
+      } catch (error) {
+        console.error("Failed to setup download progress listener:", error);
      }
-    });
+    };
+
+    setupListener();

    return () => {
-      void unlisten.then((fn) => {
-        fn();
-      });
+      if (unlistenFn) {
+        try {
+          unlistenFn();
+        } catch (error) {
+          console.error("Failed to cleanup download progress listener:", error);
+        }
+      }
    };
  }, [formatTime]);

@@ -1,5 +1,6 @@
 import { invoke } from "@tauri-apps/api/core";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+import type { BrowserProfile } from "@/types";

 export function useBrowserSupport() {
  const [supportedBrowsers, setSupportedBrowsers] = useState<string[]>([]);
@@ -51,3 +52,189 @@ export function useBrowserSupport() {
    checkBrowserSupport,
  };
 }
+
+/**
+ * Hook for managing browser state and enforcing single-instance rules for Tor and Mullvad browsers
+ */
+export function useBrowserState(
+  profiles: BrowserProfile[],
+  runningProfiles: Set<string>,
+  isUpdating?: (browser: string) => boolean,
+) {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  /**
+   * Check if a browser type allows only one instance to run at a time
+   */
+  const isSingleInstanceBrowser = useCallback(
+    (browserType: string): boolean => {
+      return browserType === "tor-browser" || browserType === "mullvad-browser";
+    },
+    [],
+  );
+
+  /**
+   * Check if any instance of a specific browser type is currently running
+   */
+  const isAnyInstanceRunning = useCallback(
+    (browserType: string): boolean => {
+      if (!isClient) return false;
+      return profiles.some(
+        (p) => p.browser === browserType && runningProfiles.has(p.name),
+      );
+    },
+    [profiles, runningProfiles, isClient],
+  );
+
+  /**
+   * Check if a profile can be launched (not disabled by single-instance rules)
+   */
+  const canLaunchProfile = useCallback(
+    (profile: BrowserProfile): boolean => {
+      if (!isClient) return false;
+
+      const isRunning = runningProfiles.has(profile.name);
+      const isBrowserUpdating = isUpdating?.(profile.browser) ?? false;
+
+      // If the profile is already running, it can always be stopped
+      if (isRunning) return true;
+
+      // If browser is updating, it cannot be launched
+      if (isBrowserUpdating) return false;
+
+      // For single-instance browsers, check if any instance is running
+      if (isSingleInstanceBrowser(profile.browser)) {
+        return !isAnyInstanceRunning(profile.browser);
+      }
+
+      return true;
+    },
+    [
+      runningProfiles,
+      isClient,
+      isUpdating,
+      isSingleInstanceBrowser,
+      isAnyInstanceRunning,
+    ],
+  );
+
+  /**
+   * Check if a profile can be used for opening links
+   * This is more restrictive than canLaunchProfile as it considers running state
+   */
+  const canUseProfileForLinks = useCallback(
+    (profile: BrowserProfile): boolean => {
+      if (!isClient) return false;
+
+      const isRunning = runningProfiles.has(profile.name);
+
+      // For single-instance browsers (Tor and Mullvad)
+      if (isSingleInstanceBrowser(profile.browser)) {
+        const runningInstancesOfType = profiles.filter(
+          (p) => p.browser === profile.browser && runningProfiles.has(p.name),
+        );
+
+        // If no instances are running, any profile of this type can be used
+        if (runningInstancesOfType.length === 0) {
+          return true;
+        }
+
+        // If instances are running, only the running ones can be used
+        return isRunning;
+      }
+
+      // For other browsers, any profile can be used
+      return true;
+    },
+    [profiles, runningProfiles, isClient, isSingleInstanceBrowser],
+  );
+
+  /**
+   * Get tooltip content for a profile's launch button
+   */
+  const getLaunchTooltipContent = useCallback(
+    (profile: BrowserProfile): string => {
+      if (!isClient) return "Loading...";
+
+      const isRunning = runningProfiles.has(profile.name);
+      const isBrowserUpdating = isUpdating?.(profile.browser) ?? false;
+
+      if (isRunning) {
+        return "Click to forcefully stop the browser";
+      }
+
+      if (isBrowserUpdating) {
+        return `${profile.browser} is being updated. Please wait for the update to complete.`;
+      }
+
+      if (
+        isSingleInstanceBrowser(profile.browser) &&
+        !canLaunchProfile(profile)
+      ) {
+        const browserDisplayName =
+          profile.browser === "tor-browser" ? "TOR" : "Mullvad";
+        return `Only one ${browserDisplayName} browser instance can run at a time. Stop the running ${browserDisplayName} browser first.`;
+      }
+
+      return "Click to launch the browser";
+    },
+    [
+      runningProfiles,
+      isClient,
+      isUpdating,
+      isSingleInstanceBrowser,
+      canLaunchProfile,
+    ],
+  );
+
+  /**
+   * Get tooltip content for profile selection (for opening links)
+   */
+  const getProfileTooltipContent = useCallback(
+    (profile: BrowserProfile): string | null => {
+      if (!isClient) return null;
+
+      const canUseForLinks = canUseProfileForLinks(profile);
+
+      if (canUseForLinks) return null;
+
+      if (isSingleInstanceBrowser(profile.browser)) {
+        const browserDisplayName =
+          profile.browser === "tor-browser" ? "TOR" : "Mullvad";
+        const runningInstancesOfType = profiles.filter(
+          (p) => p.browser === profile.browser && runningProfiles.has(p.name),
+        );
+
+        if (runningInstancesOfType.length > 0) {
+          const runningProfileNames = runningInstancesOfType
+            .map((p) => p.name)
+            .join(", ");
+          return `${browserDisplayName} browser is already running (${runningProfileNames}). Only one instance can run at a time.`;
+        }
+      }
+
+      return "This profile cannot be used for opening links right now.";
+    },
+    [
+      profiles,
+      runningProfiles,
+      isClient,
+      canUseProfileForLinks,
+      isSingleInstanceBrowser,
+    ],
+  );
+
+  return {
+    isClient,
+    isSingleInstanceBrowser,
+    isAnyInstanceRunning,
+    canLaunchProfile,
+    canUseProfileForLinks,
+    getLaunchTooltipContent,
+    getProfileTooltipContent,
+  };
+}
@@ -61,167 +61,207 @@ export function useVersionUpdater() {

  // Listen for version update progress events
  useEffect(() => {
-    const unlisten = listen<VersionUpdateProgress>(
-      "version-update-progress",
-      (event) => {
-        const progress = event.payload;
-        setUpdateProgress(progress);
+    let unlistenFn: (() => void) | null = null;

-        if (progress.status === "updating") {
-          setIsUpdating(true);
+    const setupListener = async () => {
+      try {
+        unlistenFn = await listen<VersionUpdateProgress>(
+          "version-update-progress",
+          (event) => {
+            const progress = event.payload;
+            setUpdateProgress(progress);

-          // Show unified progress toast
-          const currentBrowserName = progress.current_browser
-            ? getBrowserDisplayName(progress.current_browser)
-            : undefined;
+            if (progress.status === "updating") {
+              setIsUpdating(true);

-          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") {
-          setIsUpdating(false);
-          setUpdateProgress(null);
-          dismissToast("unified-version-update");
+              // Show unified progress toast
+              const currentBrowserName = progress.current_browser
+                ? getBrowserDisplayName(progress.current_browser)
+                : undefined;

-          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",
-            });
-          }
+              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") {
+              setIsUpdating(false);
+              setUpdateProgress(null);
+              dismissToast("unified-version-update");

-          // Refresh status
-          void loadUpdateStatus();
-        } else if (progress.status === "error") {
-          setIsUpdating(false);
-          setUpdateProgress(null);
-          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",
+                });
+              }

-          showErrorToast("Failed to update browser versions", {
-            duration: 6000,
-            description: "Check your internet connection and try again",
-          });
-        }
-      },
-    );
+              // Refresh status
+              void loadUpdateStatus();
+            } else if (progress.status === "error") {
+              setIsUpdating(false);
+              setUpdateProgress(null);
+              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,
+        );
+      }
+    };
+
+    setupListener();

    return () => {
-      void unlisten.then((fn) => {
-        fn();
-      });
+      if (unlistenFn) {
+        try {
+          unlistenFn();
+        } catch (error) {
+          console.error(
+            "Failed to cleanup version update progress listener:",
+            error,
+          );
+        }
+      }
    };
  }, [loadUpdateStatus]);

  // Listen for browser auto-update events
  useEffect(() => {
-    const unlisten = listen<AutoUpdateEvent>(
-      "browser-auto-update-available",
-      (event) => {
-        const handleAutoUpdate = async () => {
-          const { browser, new_version, notification_id } = event.payload;
-          console.log("Browser auto-update event received:", event.payload);
+    let unlistenFn: (() => void) | null = null;

-          const browserDisplayName = getBrowserDisplayName(browser);
+    const setupListener = async () => {
+      try {
+        unlistenFn = await listen<AutoUpdateEvent>(
+          "browser-auto-update-available",
+          (event) => {
+            const handleAutoUpdate = async () => {
+              const { browser, new_version, notification_id } = event.payload;
+              console.log("Browser auto-update event received:", event.payload);

-          try {
-            // Show auto-update start notification
-            showAutoUpdateToast(browserDisplayName, new_version, {
-              description: `Downloading ${browserDisplayName} ${new_version} automatically. Progress will be shown below.`,
-            });
+              const browserDisplayName = getBrowserDisplayName(browser);

-            // Dismiss the update notification in the backend
-            await invoke("dismiss_update_notification", {
-              notificationId: notification_id,
-            });
+              try {
+                // Show auto-update start notification
+                showAutoUpdateToast(browserDisplayName, new_version, {
+                  description: `Downloading ${browserDisplayName} ${new_version} automatically. Progress will be shown below.`,
+                });

-            // Check if browser already exists before downloading
-            const isDownloaded = await invoke<boolean>("check_browser_exists", {
-              browserStr: browser,
-              version: new_version,
-            });
+                // Dismiss the update notification in the backend
+                await invoke("dismiss_update_notification", {
+                  notificationId: notification_id,
+                });

-            if (isDownloaded) {
-              // Browser already exists, skip download and go straight to profile update
-              console.log(
-                `${browserDisplayName} ${new_version} already exists, skipping download`,
-              );
+                // Check if browser already exists before downloading
+                const isDownloaded = await invoke<boolean>(
+                  "check_browser_exists",
+                  {
+                    browserStr: browser,
+                    version: new_version,
+                  },
+                );

-              showSuccessToast(
-                `${browserDisplayName} ${new_version} already available`,
-                {
-                  description: "Updating profile configurations...",
-                  duration: 3000,
-                },
-              );
-            } else {
-              // Download the browser - this will trigger download progress events automatically
-              await invoke("download_browser", {
-                browserStr: browser,
-                version: new_version,
-              });
-            }
+                if (isDownloaded) {
+                  // Browser already exists, skip download and go straight to profile update
+                  console.log(
+                    `${browserDisplayName} ${new_version} already exists, skipping download`,
+                  );

-            // Complete the update with auto-update of profile versions
-            const updatedProfiles = await invoke<string[]>(
-              "complete_browser_update_with_auto_update",
-              {
-                browser,
-                newVersion: new_version,
-              },
-            );
+                  showSuccessToast(
+                    `${browserDisplayName} ${new_version} already available`,
+                    {
+                      description: "Updating profile configurations...",
+                      duration: 3000,
+                    },
+                  );
+                } else {
+                  // Download the browser - this will trigger download progress events automatically
+                  await invoke("download_browser", {
+                    browserStr: browser,
+                    version: new_version,
+                  });
+                }

-            // Show success message based on whether profiles were updated
-            if (updatedProfiles.length > 0) {
-              const profileText =
-                updatedProfiles.length === 1
-                  ? `Profile "${updatedProfiles[0]}" has been updated`
-                  : `${updatedProfiles.length} profiles have been updated`;
+                // Complete the update with auto-update of profile versions
+                const updatedProfiles = await invoke<string[]>(
+                  "complete_browser_update_with_auto_update",
+                  {
+                    browser,
+                    newVersion: new_version,
+                  },
+                );

-              showSuccessToast(`${browserDisplayName} update completed`, {
-                description: `${profileText} to version ${new_version}. You can now launch your browsers with the latest version.`,
-                duration: 6000,
-              });
-            } else {
-              showSuccessToast(`${browserDisplayName} update completed`, {
-                description: `Version ${new_version} is now available. Running profiles will use the new version when restarted.`,
-                duration: 6000,
-              });
-            }
-          } catch (error) {
-            console.error("Failed to handle browser auto-update:", error);
-            showErrorToast(`Failed to auto-update ${browserDisplayName}`, {
-              description:
-                error instanceof Error
-                  ? error.message
-                  : "Unknown error occurred",
-              duration: 8000,
-            });
-          }
-        };
+                // Show success message based on whether profiles were updated
+                if (updatedProfiles.length > 0) {
+                  const profileText =
+                    updatedProfiles.length === 1
+                      ? `Profile "${updatedProfiles[0]}" has been updated`
+                      : `${updatedProfiles.length} profiles have been updated`;

-        // Call the async handler
-        void handleAutoUpdate();
-      },
-    );
+                  showSuccessToast(`${browserDisplayName} update completed`, {
+                    description: `${profileText} to version ${new_version}. You can now launch your browsers with the latest version.`,
+                    duration: 6000,
+                  });
+                } else {
+                  showSuccessToast(`${browserDisplayName} update completed`, {
+                    description: `Version ${new_version} is now available. Running profiles will use the new version when restarted.`,
+                    duration: 6000,
+                  });
+                }
+              } catch (error) {
+                console.error("Failed to handle browser auto-update:", error);
+                showErrorToast(`Failed to auto-update ${browserDisplayName}`, {
+                  description:
+                    error instanceof Error
+                      ? error.message
+                      : "Unknown error occurred",
+                  duration: 8000,
+                });
+              }
+            };
+
+            // Call the async handler
+            void handleAutoUpdate();
+          },
+        );
+      } catch (error) {
+        console.error("Failed to setup browser auto-update listener:", error);
+      }
+    };
+
+    setupListener();

    return () => {
-      void unlisten.then((fn) => {
-        fn();
-      });
+      if (unlistenFn) {
+        try {
+          unlistenFn();
+        } catch (error) {
+          console.error(
+            "Failed to cleanup browser auto-update listener:",
+            error,
+          );
+        }
+      }
    };
  }, []);

@@ -3,7 +3,7 @@
 * Centralized helpers for browser name mapping, icons, etc.
 */

-import { FaChrome, FaFirefox } from "react-icons/fa";
+import { FaChrome, FaFirefox, FaShieldAlt } from "react-icons/fa";
 import { SiBrave, SiMullvad, SiTorbrowser } from "react-icons/si";
 import { ZenBrowser } from "@/components/icons/zen-browser";

@@ -19,6 +19,7 @@ export function getBrowserDisplayName(browserType: string): string {
    brave: "Brave",
    chromium: "Chromium",
    "tor-browser": "Tor Browser",
+    camoufox: "Anti-Detect",
  };

  return browserNames[browserType] || browserType;
@@ -42,7 +43,19 @@ export function getBrowserIcon(browserType: string) {
      return ZenBrowser;
    case "tor-browser":
      return SiTorbrowser;
+    case "camoufox":
+      return FaShieldAlt;
    default:
      return null;
  }
 }
+
+export const getCurrentOS = () => {
+  if (typeof window !== "undefined") {
+    const userAgent = window.navigator.userAgent;
+    if (userAgent.includes("Win")) return "windows";
+    if (userAgent.includes("Mac")) return "macos";
+    if (userAgent.includes("Linux")) return "linux";
+  }
+  return "unknown";
+};
@@ -100,7 +100,7 @@ export function showToast(props: ToastProps & { id?: string }) {
  }

  if (props.type === "success") {
-    sonnerToast.success(React.createElement(UnifiedToast, props), {
+    sonnerToast.custom(() => React.createElement(UnifiedToast, props), {
      id: toastId,
      duration,
      style: {
@@ -113,7 +113,7 @@ export function showToast(props: ToastProps & { id?: string }) {
      },
    });
  } else if (props.type === "error") {
-    sonnerToast.error(React.createElement(UnifiedToast, props), {
+    sonnerToast.custom(() => React.createElement(UnifiedToast, props), {
      id: toastId,
      duration,
      style: {
@@ -20,6 +20,8 @@ export interface BrowserProfile {
  process_id?: number;
  last_launch?: number;
  release_type: string; // "stable" or "nightly"
+  camoufox_config?: CamoufoxConfig; // Camoufox configuration
+  group_id?: string; // Reference to profile group
 }

 export interface StoredProxy {
@@ -28,6 +30,17 @@ export interface StoredProxy {
  proxy_settings: ProxySettings;
 }

+export interface ProfileGroup {
+  id: string;
+  name: string;
+}
+
+export interface GroupWithCount {
+  id: string;
+  name: string;
+  count: number;
+}
+
 export interface DetectedProfile {
  browser: string;
  name: string;
@@ -56,3 +69,49 @@ export interface AppUpdateProgress {
  eta?: string; // estimated time remaining
  message: string;
 }
+
+export interface CamoufoxConfig {
+  os?: string[];
+  block_images?: boolean;
+  block_webrtc?: boolean;
+  block_webgl?: boolean;
+  disable_coop?: boolean;
+  geoip?: string | boolean;
+  country?: string;
+  timezone?: string;
+  latitude?: number;
+  longitude?: number;
+  humanize?: boolean;
+  humanize_duration?: number;
+  headless?: boolean;
+  locale?: string[];
+  addons?: string[];
+  fonts?: string[];
+  custom_fonts_only?: boolean;
+  exclude_addons?: string[];
+  screen_min_width?: number;
+  screen_max_width?: number;
+  screen_min_height?: number;
+  screen_max_height?: number;
+  window_width?: number;
+  window_height?: number;
+  ff_version?: number;
+  main_world_eval?: boolean;
+  webgl_vendor?: string;
+  webgl_renderer?: string;
+  proxy?: string;
+  enable_cache?: boolean;
+  virtual_display?: string;
+  debug?: boolean;
+  additional_args?: string[];
+  env_vars?: Record<string, string>;
+  firefox_prefs?: Record<string, unknown>;
+}
+
+export interface CamoufoxLaunchResult {
+  id: string;
+  pid?: number;
+  executable_path: string;
+  profile_path: string;
+  url?: string;
+}