diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 74bc06bf..be91d5c6 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -1,326 +1,376 @@
 name: Build and Release
 on:
-    push:
-        branches:
-            - main
-            - dev
-        paths:
-            - 'src/**'
-            - 'src-tauri/**'
-            - '**.json'
-            - '**.toml'
-            - '**.yml'
-            - '**.yaml'
-
-    workflow_dispatch:
+  push:
+    branches:
+      - main
+      - dev
+    paths:
+      - "src/**"
+      - "src-tauri/**"
+      - "**.json"
+      - "**.toml"
+      - "**.yml"
+      - "**.yaml"
+
+  workflow_dispatch:
 
 jobs:
-    check-skip:
-        runs-on: ubuntu-latest
-        outputs:
-            skip: ${{ steps.check.outputs.skip }}
-        steps:
-            - name: Checkout repository
-              uses: actions/checkout@v4
-
-            - name: Check commit messages for skip keywords
-              id: check
-              shell: bash
-              env:
-                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-              run: |
-                  set -euo pipefail
-
-                  keywords='\[skip ci\]|\[ci skip\]|skip-ci|skip_ci|SKIP_CI|NO_CI|skipci'
-
-                  # Determine the single relevant commit SHA:
-                  # - For pull_request events use the PR head SHA
-                  # - Otherwise prefer .after, head_commit.id, or GITHUB_SHA
-                  commit_sha="$(jq -r '.pull_request.head.sha // .after // .head_commit.id // .sha // empty' < "$GITHUB_EVENT_PATH" 2>/dev/null || true)"
-                  commit_sha="${commit_sha:-${GITHUB_SHA:-}}"
-
-                  if [ -z "$commit_sha" ]; then
-                    echo "No commit SHA found; defaulting to full log fallback."
-                    messages="$(git log --pretty=%B -n 10 || true)"
-                  else
-                    echo "Checking commit: $commit_sha"
-                    # try to fetch the specific SHA if it's not present locally
-                    if ! git cat-file -e "$commit_sha^{commit}" 2>/dev/null; then
-                      git fetch --no-tags --depth=1 origin "$commit_sha" || git fetch --no-tags --depth=50 origin +refs/heads/*:refs/remotes/origin/* || true
-                    fi
-                    messages="$(git show -s --format=%B "$commit_sha" 2>/dev/null || true)"
-                  fi
-
-                  # Fallback: if no message found, try event commits array
-                  if [ -z "$(echo "$messages" | tr -d '[:space:]')" ]; then
-                    messages="$(jq -r '.commits[]?.message // empty' < "$GITHUB_EVENT_PATH" 2>/dev/null || true)"
-                  fi
-
-                  echo "---- Collected commit message(s) ----"
-                  if [ -n "$(echo "$messages" | tr -d '[:space:]')" ]; then
-                    printf "%s\n" "$messages"
-                  else
-                    echo "<no commit messages found>"
-                  fi
-                  echo "---- End commit message(s) ----"
-
-                  echo "---- Matching lines (case-insensitive) ----"
-                  echo "$messages" | nl -ba | grep -Ei --color=never "$keywords" || true
-                  echo "---- End matching lines ----"
-
-                  skip_found=false
-                  if echo "$messages" | grep -Ei "$keywords" >/dev/null; then
-                    echo "Found skip keyword in commit message. Cancelling run."
-                    skip_found=true
-                  else
-                    echo "No skip keyword found in commit message. Continuing run."
-                  fi
-
-                  echo "skip=$skip_found" >> $GITHUB_OUTPUT
-
-    build:
-        needs: check-skip
-        if: needs.check-skip.outputs.skip != 'true'
-        strategy:
-            fail-fast: false
-            matrix:
-                platform: [windows-latest, ubuntu-latest]
-
-        runs-on: ${{ matrix.platform }}
-        permissions:
-            contents: write
-            actions: write
-            id-token: write
-
-        steps:
-            - name: Checkout repository
-              uses: actions/checkout@v4
-
-            - name: Setup Node.js
-              uses: actions/setup-node@v4
-              with:
-                  node-version: 20
-
-            - name: Install Rust stable
-              uses: dtolnay/rust-toolchain@stable
-
-            - name: Setup sccache
-              uses: mozilla-actions/sccache-action@v0.0.9
-
-            - name: Cache sccache
-              uses: actions/cache@v4
-              with:
-                  path: |
-                      ~/.cache/sccache
-                      ~/AppData/Local/Mozilla/sccache
-                  key: ${{ runner.os }}-sccache-${{ hashFiles('**/Cargo.lock') }}
-                  restore-keys: |
-                      ${{ runner.os }}-sccache-
-
-            - name: Install dependencies (ubuntu only)
-              if: matrix.platform == 'ubuntu-latest'
-              run: |
-                  sudo apt-get update
-                  sudo apt-get install -y libgtk-3-dev libappindicator3-dev librsvg2-dev patchelf \
-                  build-essential curl wget file libssl-dev \
-                  libjavascriptcoregtk-4.1-dev libwebkit2gtk-4.1-dev \
-                  libsoup-3.0-dev pkg-config
-
-            - name: Configure pkg-config (Ubuntu only)
-              if: matrix.platform == 'ubuntu-latest'
-              run: |
-                  echo "PKG_CONFIG_PATH=/usr/lib/pkgconfig:/usr/share/pkgconfig:/usr/lib/x86_64-linux-gnu/pkgconfig" >> $GITHUB_ENV
-                  ls -la /usr/lib/x86_64-linux-gnu/pkgconfig/ || true
-                  pkg-config --list-all | grep -i javascript || true
-
-            - name: Install frontend dependencies (Windows)
-              if: matrix.platform == 'windows-latest'
-              run: npm ci; npm install
-
-            - name: Install frontend dependencies (Ubuntu)
-              if: matrix.platform == 'ubuntu-latest'
-              run: npm ci || npm install
-
-            - name: Get version from package.json (Ubuntu)
-              if: matrix.platform == 'ubuntu-latest'
-              id: package-version-ubuntu
-              uses: martinbeentjes/npm-get-version-action@main
-
-            - name: Get version from package.json (Windows)
-              if: matrix.platform == 'windows-latest'
-              id: package-version-windows
-              shell: bash
-              run: echo "current-version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
-
-            - name: Get commit hash
-              id: commit-hash
-              run: echo "HASH=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
-              shell: bash
-
-            - name: Build the app
-              uses: tauri-apps/tauri-action@v0
-              env:
-                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-                  RUSTC_WRAPPER: sccache
-                  PKG_CONFIG_PATH: /usr/lib/pkgconfig:/usr/share/pkgconfig
-                  PKG_CONFIG_ALLOW_SYSTEM_CFLAGS: 1
-                  PKG_CONFIG_ALLOW_SYSTEM_LIBS: 1
-              with:
-                  includeUpdaterJson: true
-                  updaterJsonKeepUniversal: true
-
-            - name: Show sccache stats
-              run: sccache --show-stats
-
-            - name: Collect Windows artifacts
-              if: matrix.platform == 'windows-latest'
-              shell: pwsh
-              run: |
-                  mkdir -p artifacts-windows
-                  $version = "${{ steps.package-version-windows.outputs.current-version }}"
-
-                  Get-ChildItem -Path ./src-tauri/target/release/bundle/msi/*.msi -Recurse | ForEach-Object {
-                    Copy-Item $_.FullName -Destination artifacts-windows/
-                    $md5 = Get-FileHash $_.FullName -Algorithm MD5
-                    echo "MSI_MD5=$($md5.Hash)" >> $env:GITHUB_ENV
-                  }
-
-                  Get-ChildItem -Path ./src-tauri/target/release/bundle/nsis/*-setup.exe -Recurse | ForEach-Object {
-                    Copy-Item $_.FullName -Destination artifacts-windows/
-                    $md5 = Get-FileHash $_.FullName -Algorithm MD5
-                    echo "NSIS_MD5=$($md5.Hash)" >> $env:GITHUB_ENV
-                  }
-
-                  Get-ChildItem -Path ./src-tauri/target/release/*.exe | ForEach-Object {
-                    $baseName = [System.IO.Path]::GetFileNameWithoutExtension($_.Name)
-                    $extension = [System.IO.Path]::GetExtension($_.Name)
-                    $newName = "${baseName}_${version}${extension}"
-                    $newPath = Join-Path "artifacts-windows" $newName
-                    Copy-Item $_.FullName -Destination $newPath
-                    $md5 = Get-FileHash $_.FullName -Algorithm MD5
-                    echo "EXE_MD5=$($md5.Hash)" >> $env:GITHUB_ENV
-                  }
-
-                  echo "ARTIFACT_PATH=artifacts-windows" >> $env:GITHUB_ENV
-
-            - name: Collect Ubuntu artifacts
-              if: matrix.platform == 'ubuntu-latest'
-              run: |
-                  mkdir -p artifacts-ubuntu
-                  version="${{ steps.package-version-ubuntu.outputs.current-version }}"
-
-                  find ./src-tauri/target/release/bundle/deb -name "*.deb" | while read file; do
-                    cp "$file" artifacts-ubuntu/
-                    MD5=$(md5sum "$file" | awk '{ print $1 }')
-                    echo "DEB_MD5=$MD5" >> $GITHUB_ENV
-                  done
-
-                  find ./src-tauri/target/release/bundle/appimage -name "*.AppImage" 2>/dev/null | while read file; do
-                    cp "$file" artifacts-ubuntu/
-                    MD5=$(md5sum "$file" | awk '{ print $1 }')
-                    echo "APPIMAGE_MD5=$MD5" >> $GITHUB_ENV
-                  done
-
-                  # Include the standalone Linux binary with version
-                  find ./src-tauri/target/release -maxdepth 1 -type f -executable -not -name "*.so" -not -name "*.d" | while read file; do
-                    if [ -f "$file" ] && file "$file" | grep -q "ELF.*executable"; then
-                      basename=$(basename "$file")
-                      extension=""
-                      if [[ "$basename" == *.* ]]; then
-                        extension=".${basename##*.}"
-                        basename="${basename%.*}"
-                      fi
-                      versioned_name="${basename}_${version}${extension}"
-                      cp "$file" "artifacts-ubuntu/$versioned_name"
-                      MD5=$(md5sum "$file" | awk '{ print $1 }')
-                      echo "BINARY_MD5=$MD5" >> $GITHUB_ENV
-                    fi
-                  done
-
-                  echo "ARTIFACT_PATH=artifacts-ubuntu" >> $GITHUB_ENV
-
-            - name: VirusTotal Scan (Windows only)
-              if: matrix.platform == 'windows-latest' && github.event.repository.fork == false
-              uses: crazy-max/ghaction-virustotal@v4
-              id: virustotal
-              with:
-                  vt_api_key: ${{ secrets.VT_API_KEY }}
-                  files: |
-                      artifacts-windows/*.msi
-                      artifacts-windows/*-setup.exe
-                      artifacts-windows/*.exe
-
-            - name: Extract and Print URL(s) of VirusTotal Scan (Windows only)
-              if: matrix.platform == 'windows-latest' && github.event.repository.fork == false && steps.virustotal.outputs.analysis != ''
-              shell: bash
-              run: |
-                  ANALYSIS="${{ steps.virustotal.outputs.analysis }}"
-                  urls=$(echo "$ANALYSIS" | tr ',' '\n' | grep -oE 'https?://[^[:space:]]*virustotal[^[:space:]]*' | sed 's/[[:space:]]*$//' | uniq)
-                  if [ -n "$urls" ]; then
-                    printf 'VIRUSTOTAL_URL<<EOF\n%s\nEOF\n' "$urls" >> $GITHUB_ENV
-                    printf 'VIRUSTOTAL_LINE<<EOF\nVirusTotal scan:\n%s\nEOF\n' "$(echo "$urls" | sed 's/^/- /')" >> $GITHUB_ENV
-                  else
-                    echo "VIRUSTOTAL_URL=" >> $GITHUB_ENV
-                    echo "VIRUSTOTAL_LINE=" >> $GITHUB_ENV
-                  fi
-
-            - name: Upload artifact
-              uses: actions/upload-artifact@v4
-              with:
-                  name: CollapseLoader-${{ matrix.platform }}-${{ env.HASH }}
-                  path: ${{ matrix.platform == 'windows-latest' && 'artifacts-windows/**' || 'artifacts-ubuntu/**' }}
-
-    create-release:
-        needs: [check-skip, build]
-        if: needs.check-skip.outputs.skip != 'true'
-        runs-on: ubuntu-latest
-        permissions:
-            contents: write
-            actions: read
-
-        steps:
-            - name: Checkout repository
-              uses: actions/checkout@v4
-
-            - name: Setup Node.js
-              uses: actions/setup-node@v4
-              with:
-                  node-version: 20
-
-            - name: Get version from package.json
-              id: package-version
-              run: echo "current-version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
-
-            - name: Get commit hash
-              id: commit-hash
-              run: echo "HASH=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
-              shell: bash
-
-            - name: Download all artifacts
-              uses: actions/download-artifact@v4
-              with:
-                  path: release-artifacts
-
-            - name: List artifacts
-              run: find release-artifacts -type f
-
-            - name: Create Release
-              uses: softprops/action-gh-release@v1
-              env:
-                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-                  VIRUSTOTAL_LINE: ${{ env.VIRUSTOTAL_LINE }}
-              with:
-                  tag_name: prerelease-v${{ steps.package-version.outputs.current-version }}-${{ env.HASH }}
-                  name: 'CollapseLoader ${{ steps.package-version.outputs.current-version }}-${{ env.HASH }}'
-                  body: |
-
-                      Automatic build from GitHub Actions
-
-                      - Windows (.msi, .exe installer, standalone .exe with version)
-                      - Linux (.deb, standalone binary with version)
-
-                      Note: This is an automated build from the main branch.
-                      Commit hash: ${{ env.HASH }}
-                      ${{ env.VIRUSTOTAL_LINE }}
-                  files: release-artifacts/**/*
-                  prerelease: true
+  check-skip:
+    runs-on: ubuntu-latest
+    outputs:
+      skip: ${{ steps.check.outputs.skip }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Check commit messages for skip keywords
+        id: check
+        shell: bash
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          set -euo pipefail
+
+          keywords='\[skip ci\]|\[ci skip\]|skip-ci|skip_ci|SKIP_CI|NO_CI|skipci'
+
+          # Determine the single relevant commit SHA:
+          # - For pull_request events use the PR head SHA
+          # - Otherwise prefer .after, head_commit.id, or GITHUB_SHA
+          commit_sha="$(jq -r '.pull_request.head.sha // .after // .head_commit.id // .sha // empty' < "$GITHUB_EVENT_PATH" 2>/dev/null || true)"
+          commit_sha="${commit_sha:-${GITHUB_SHA:-}}"
+
+          if [ -z "$commit_sha" ]; then
+            echo "No commit SHA found; defaulting to full log fallback."
+            messages="$(git log --pretty=%B -n 10 || true)"
+          else
+            echo "Checking commit: $commit_sha"
+            # try to fetch the specific SHA if it's not present locally
+            if ! git cat-file -e "$commit_sha^{commit}" 2>/dev/null; then
+              git fetch --no-tags --depth=1 origin "$commit_sha" || git fetch --no-tags --depth=50 origin +refs/heads/*:refs/remotes/origin/* || true
+            fi
+            messages="$(git show -s --format=%B "$commit_sha" 2>/dev/null || true)"
+          fi
+
+          # Fallback: if no message found, try event commits array
+          if [ -z "$(echo "$messages" | tr -d '[:space:]')" ]; then
+            messages="$(jq -r '.commits[]?.message // empty' < "$GITHUB_EVENT_PATH" 2>/dev/null || true)"
+          fi
+
+          echo "---- Collected commit message(s) ----"
+          if [ -n "$(echo "$messages" | tr -d '[:space:]')" ]; then
+            printf "%s\n" "$messages"
+          else
+            echo "<no commit messages found>"
+          fi
+          echo "---- End commit message(s) ----"
+
+          echo "---- Matching lines (case-insensitive) ----"
+          echo "$messages" | nl -ba | grep -Ei --color=never "$keywords" || true
+          echo "---- End matching lines ----"
+
+          skip_found=false
+          if echo "$messages" | grep -Ei "$keywords" >/dev/null; then
+            echo "Found skip keyword in commit message. Cancelling run."
+            skip_found=true
+          else
+            echo "No skip keyword found in commit message. Continuing run."
+          fi
+
+          echo "skip=$skip_found" >> $GITHUB_OUTPUT
+
+  build:
+    needs: check-skip
+    if: needs.check-skip.outputs.skip != 'true'
+    strategy:
+      fail-fast: false
+      matrix:
+        platform: [windows-latest, ubuntu-latest]
+
+    runs-on: ${{ matrix.platform }}
+    permissions:
+      contents: write
+      actions: write
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Setup sccache
+        uses: mozilla-actions/sccache-action@v0.0.9
+
+      - name: Cache sccache
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.cache/sccache
+            ~/AppData/Local/Mozilla/sccache
+          key: ${{ runner.os }}-sccache-${{ hashFiles('**/Cargo.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-sccache-
+
+      - name: Install dependencies (ubuntu only)
+        if: matrix.platform == 'ubuntu-latest'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libgtk-3-dev libappindicator3-dev librsvg2-dev patchelf \
+          build-essential curl wget file libssl-dev \
+          libjavascriptcoregtk-4.1-dev libwebkit2gtk-4.1-dev \
+          libsoup-3.0-dev pkg-config
+
+      - name: Configure pkg-config (Ubuntu only)
+        if: matrix.platform == 'ubuntu-latest'
+        run: |
+          echo "PKG_CONFIG_PATH=/usr/lib/pkgconfig:/usr/share/pkgconfig:/usr/lib/x86_64-linux-gnu/pkgconfig" >> $GITHUB_ENV
+          ls -la /usr/lib/x86_64-linux-gnu/pkgconfig/ || true
+          pkg-config --list-all | grep -i javascript || true
+
+      - name: Install frontend dependencies (Windows)
+        if: matrix.platform == 'windows-latest'
+        run: npm ci; npm install
+
+      - name: Install frontend dependencies (Ubuntu)
+        if: matrix.platform == 'ubuntu-latest'
+        run: npm ci || npm install
+
+      - name: Get version from package.json (Ubuntu)
+        if: matrix.platform == 'ubuntu-latest'
+        id: package-version-ubuntu
+        uses: martinbeentjes/npm-get-version-action@main
+
+      - name: Get version from package.json (Windows)
+        if: matrix.platform == 'windows-latest'
+        id: package-version-windows
+        shell: bash
+        run: echo "current-version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
+
+      - name: Get commit hash
+        id: commit-hash
+        run: echo "HASH=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
+        shell: bash
+
+      - name: Build the app
+        uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          RUSTC_WRAPPER: sccache
+          PKG_CONFIG_PATH: /usr/lib/pkgconfig:/usr/share/pkgconfig
+          PKG_CONFIG_ALLOW_SYSTEM_CFLAGS: 1
+          PKG_CONFIG_ALLOW_SYSTEM_LIBS: 1
+        with:
+          includeUpdaterJson: true
+          updaterJsonKeepUniversal: true
+
+      - name: Show sccache stats
+        run: sccache --show-stats
+
+      - name: Collect Windows artifacts
+        if: matrix.platform == 'windows-latest'
+        shell: pwsh
+        run: |
+          mkdir -p artifacts-windows
+          $version = "${{ steps.package-version-windows.outputs.current-version }}"
+
+          Get-ChildItem -Path ./src-tauri/target/release/bundle/msi/*.msi -Recurse | ForEach-Object {
+            Copy-Item $_.FullName -Destination artifacts-windows/
+            $md5 = Get-FileHash $_.FullName -Algorithm MD5
+            echo "MSI_MD5=$($md5.Hash)" >> $env:GITHUB_ENV
+          }
+
+          Get-ChildItem -Path ./src-tauri/target/release/bundle/nsis/*-setup.exe -Recurse | ForEach-Object {
+            Copy-Item $_.FullName -Destination artifacts-windows/
+            $md5 = Get-FileHash $_.FullName -Algorithm MD5
+            echo "NSIS_MD5=$($md5.Hash)" >> $env:GITHUB_ENV
+          }
+
+          Get-ChildItem -Path ./src-tauri/target/release/*.exe | ForEach-Object {
+            $baseName = [System.IO.Path]::GetFileNameWithoutExtension($_.Name)
+            $extension = [System.IO.Path]::GetExtension($_.Name)
+            $newName = "${baseName}_${version}${extension}"
+            $newPath = Join-Path "artifacts-windows" $newName
+            Copy-Item $_.FullName -Destination $newPath
+            $md5 = Get-FileHash $_.FullName -Algorithm MD5
+            echo "EXE_MD5=$($md5.Hash)" >> $env:GITHUB_ENV
+          }
+
+          echo "ARTIFACT_PATH=artifacts-windows" >> $env:GITHUB_ENV
+      - name: Upload Windows artifacts to Telegram
+        if: matrix.platform == 'windows-latest'
+        shell: pwsh
+        env:
+          TELEGRAM_TOKEN: ${{ secrets.TELEGRAM_TOKEN }}
+          TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHANNEL_ID }}
+        run: |
+          $token = $env:TELEGRAM_TOKEN
+          $chatId = $env:TELEGRAM_CHAT_ID
+          if (-not $token -or -not $chatId) { Write-Host "Telegram token or chat id not set; skipping upload."; exit 0 }
+
+          $files = Get-ChildItem -Path artifacts-windows -File -Recurse | Where-Object { $_.Extension -in '.msi','.exe' -or $_.Name -like '*-setup.exe' } | ForEach-Object { $_.FullName }
+          if (-not $files) { Write-Host "No artifacts found to upload."; exit 0 }
+
+          $repo = $env:GITHUB_REPOSITORY
+          $hash = $env:HASH
+          $commitUrl = "https://github.com/$repo/commit/$hash"
+
+          # Try to get the commit subject (short message)
+          $commitSubject = ''
+          try { $commitSubject = (git log -1 --pretty=format:'%s' $hash) } catch { }
+          if (-not $commitSubject) { try { $commitSubject = (git log -1 --pretty=format:'%s') } catch { $commitSubject = '' } }
+          if (-not $commitSubject) { $commitSubject = "(no commit message)" }
+
+          $media = @()
+          for ($i = 0; $i -lt $files.Count; $i++) {
+            $attachName = "file$i"
+            $item = @{ type = 'document'; media = "attach://$attachName" }
+            if ($i -eq 0) {
+              $item.caption = "Build artifacts for commit [$hash]($commitUrl) - $commitSubject"
+              $item.parse_mode = 'Markdown'
+            }
+            $media += $item
+          }
+
+          $mediaJson = ($media | ConvertTo-Json -Compress)
+          $uri = "https://api.telegram.org/bot$token/sendMediaGroup"
+
+          $form = @()
+          $form += '-F'; $form += "chat_id=$chatId"
+          $form += '-F'; $form += "media=$mediaJson"
+
+          for ($i = 0; $i -lt $files.Count; $i++) {
+            $attachName = "file$i"
+            $path = $files[$i]
+            $form += '-F'; $form += "${attachName}=@$path"
+          }
+
+          Write-Host "Uploading artifacts as a single media group to Telegram..."
+          & curl.exe -s -X POST $uri @form
+
+      - name: Collect Ubuntu artifacts
+        if: matrix.platform == 'ubuntu-latest'
+        run: |
+          mkdir -p artifacts-ubuntu
+          version="${{ steps.package-version-ubuntu.outputs.current-version }}"
+
+          find ./src-tauri/target/release/bundle/deb -name "*.deb" | while read file; do
+            cp "$file" artifacts-ubuntu/
+            MD5=$(md5sum "$file" | awk '{ print $1 }')
+            echo "DEB_MD5=$MD5" >> $GITHUB_ENV
+          done
+
+          find ./src-tauri/target/release/bundle/appimage -name "*.AppImage" 2>/dev/null | while read file; do
+            cp "$file" artifacts-ubuntu/
+            MD5=$(md5sum "$file" | awk '{ print $1 }')
+            echo "APPIMAGE_MD5=$MD5" >> $GITHUB_ENV
+          done
+
+          # Include the standalone Linux binary with version
+          find ./src-tauri/target/release -maxdepth 1 -type f -executable -not -name "*.so" -not -name "*.d" | while read file; do
+            if [ -f "$file" ] && file "$file" | grep -q "ELF.*executable"; then
+              basename=$(basename "$file")
+              extension=""
+              if [[ "$basename" == *.* ]]; then
+                extension=".${basename##*.}"
+                basename="${basename%.*}"
+              fi
+              versioned_name="${basename}_${version}${extension}"
+              cp "$file" "artifacts-ubuntu/$versioned_name"
+              MD5=$(md5sum "$file" | awk '{ print $1 }')
+              echo "BINARY_MD5=$MD5" >> $GITHUB_ENV
+            fi
+          done
+
+          echo "ARTIFACT_PATH=artifacts-ubuntu" >> $GITHUB_ENV
+
+      - name: VirusTotal Scan (Windows only)
+        if: matrix.platform == 'windows-latest' && github.event.repository.fork == false
+        uses: crazy-max/ghaction-virustotal@v4
+        id: virustotal
+        with:
+          vt_api_key: ${{ secrets.VT_API_KEY }}
+          files: |
+            artifacts-windows/*.msi
+            artifacts-windows/*-setup.exe
+            artifacts-windows/*.exe
+
+      - name: Extract and Print URL(s) of VirusTotal Scan (Windows only)
+        if: matrix.platform == 'windows-latest' && github.event.repository.fork == false && steps.virustotal.outputs.analysis != ''
+        shell: bash
+        run: |
+          ANALYSIS="${{ steps.virustotal.outputs.analysis }}"
+          urls=$(echo "$ANALYSIS" | tr ',' '\n' | grep -oE 'https?://[^[:space:]]*virustotal[^[:space:]]*' | sed 's/[[:space:]]*$//' | uniq)
+          if [ -n "$urls" ]; then
+            printf 'VIRUSTOTAL_URL<<EOF\n%s\nEOF\n' "$urls" >> $GITHUB_ENV
+            printf 'VIRUSTOTAL_LINE<<EOF\nVirusTotal scan:\n%s\nEOF\n' "$(echo "$urls" | sed 's/^/- /')" >> $GITHUB_ENV
+          else
+            echo "VIRUSTOTAL_URL=" >> $GITHUB_ENV
+            echo "VIRUSTOTAL_LINE=" >> $GITHUB_ENV
+          fi
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: CollapseLoader-${{ matrix.platform }}-${{ env.HASH }}
+          path: ${{ matrix.platform == 'windows-latest' && 'artifacts-windows/**' || 'artifacts-ubuntu/**' }}
+
+  create-release:
+    needs: [check-skip, build]
+    if: needs.check-skip.outputs.skip != 'true'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      actions: read
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Get version from package.json
+        id: package-version
+        run: echo "current-version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
+
+      - name: Get commit hash
+        id: commit-hash
+        run: echo "HASH=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
+        shell: bash
+
+      - name: Download all artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: release-artifacts
+
+      - name: List artifacts
+        run: find release-artifacts -type f
+
+      - name: Create Release
+        uses: softprops/action-gh-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          VIRUSTOTAL_LINE: ${{ env.VIRUSTOTAL_LINE }}
+        with:
+          tag_name: prerelease-v${{ steps.package-version.outputs.current-version }}-${{ env.HASH }}
+          name: "CollapseLoader ${{ steps.package-version.outputs.current-version }}-${{ env.HASH }}"
+          body: |
+
+            Automatic build from GitHub Actions
+
+            - Windows (.msi, .exe installer, standalone .exe with version)
+            - Linux (.deb, standalone binary with version)
+
+            Note: This is an automated build from the main branch.
+            Commit hash: ${{ env.HASH }}
+            ${{ env.VIRUSTOTAL_LINE }}
+          files: release-artifacts/**/*
+          prerelease: true
diff --git a/.prettierrc.yaml b/.prettierrc.yaml
new file mode 100644
index 00000000..763af247
--- /dev/null
+++ b/.prettierrc.yaml
@@ -0,0 +1,2 @@
+trailingComma: 'es5'
+tabWidth: 4
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 965c75ab..85959885 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,42 +1,43 @@
 {
     "name": "collapseloader",
-    "version": "0.2.7",
+    "version": "0.2.8",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "collapseloader",
-            "version": "0.2.7",
+            "version": "0.2.8",
             "dependencies": {
                 "@guolao/vue-monaco-editor": "1.6.0",
-                "@sentry/vue": "^10.36.0",
-                "@tauri-apps/api": "2.9.1",
+                "@stomp/stompjs": "^7.3.0",
+                "@tauri-apps/api": "2.10.1",
                 "@tauri-apps/plugin-dialog": "2.6.0",
                 "@tauri-apps/plugin-fs": "2.4.5",
                 "@tauri-apps/plugin-notification": "2.3.3",
                 "@tauri-apps/plugin-opener": "2.5.3",
-                "axios": "1.13.2",
-                "daisyui": "5.5.14",
+                "axios": "1.13.5",
+                "daisyui": "5.5.19",
                 "gsap": "3.14.2",
-                "lucide-vue-next": "0.562.0",
+                "lucide-vue-next": "0.575.0",
                 "monaco-editor": "^0.55.1",
-                "vue": "3.5.27",
-                "vue-i18n": "11.2.8",
-                "vue3-lottie": "3.3.1"
+                "vue": "3.5.28",
+                "vue-i18n": "11.2.8"
             },
             "devDependencies": {
-                "@tailwindcss/vite": "4.1.18",
-                "@tauri-apps/cli": "2.9.6",
-                "@types/node": "25.0.10",
-                "@typescript-eslint/eslint-plugin": "8.53.1",
-                "@typescript-eslint/parser": "8.53.1",
-                "@vitejs/plugin-vue": "6.0.3",
-                "eslint": "9.39.2",
-                "eslint-plugin-vue": "10.7.0",
-                "tailwindcss": "4.1.18",
+                "@tailwindcss/vite": "4.2.0",
+                "@tauri-apps/cli": "2.10.0",
+                "@types/node": "25.3.0",
+                "@typescript-eslint/eslint-plugin": "8.56.0",
+                "@typescript-eslint/parser": "8.56.0",
+                "@vitejs/plugin-vue": "6.0.4",
+                "eslint": "^10.0.1",
+                "eslint-plugin-vue": "10.8.0",
+                "prettier": "3.8.1",
+                "tailwindcss": "4.2.0",
                 "typescript": "5.9.3",
                 "vite": "7.3.1",
-                "vue-tsc": "3.2.2"
+                "vue-eslint-parser": "^10.4.0",
+                "vue-tsc": "3.2.5"
             }
         },
         "node_modules/@babel/helper-string-parser": {
@@ -58,12 +59,12 @@
             }
         },
         "node_modules/@babel/parser": {
-            "version": "7.28.6",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.6.tgz",
-            "integrity": "sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ==",
+            "version": "7.29.0",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
+            "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
             "license": "MIT",
             "dependencies": {
-                "@babel/types": "^7.28.6"
+                "@babel/types": "^7.29.0"
             },
             "bin": {
                 "parser": "bin/babel-parser.js"
@@ -73,9 +74,9 @@
             }
         },
         "node_modules/@babel/types": {
-            "version": "7.28.6",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.6.tgz",
-            "integrity": "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==",
+            "version": "7.29.0",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+            "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
             "license": "MIT",
             "dependencies": {
                 "@babel/helper-string-parser": "^7.27.1",
@@ -86,9 +87,9 @@
             }
         },
         "node_modules/@esbuild/aix-ppc64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz",
-            "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",
+            "integrity": "sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==",
             "cpu": [
                 "ppc64"
             ],
@@ -103,9 +104,9 @@
             }
         },
         "node_modules/@esbuild/android-arm": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.2.tgz",
-            "integrity": "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.3.tgz",
+            "integrity": "sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==",
             "cpu": [
                 "arm"
             ],
@@ -120,9 +121,9 @@
             }
         },
         "node_modules/@esbuild/android-arm64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz",
-            "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.3.tgz",
+            "integrity": "sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==",
             "cpu": [
                 "arm64"
             ],
@@ -137,9 +138,9 @@
             }
         },
         "node_modules/@esbuild/android-x64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.2.tgz",
-            "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.3.tgz",
+            "integrity": "sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==",
             "cpu": [
                 "x64"
             ],
@@ -154,9 +155,9 @@
             }
         },
         "node_modules/@esbuild/darwin-arm64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz",
-            "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.3.tgz",
+            "integrity": "sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==",
             "cpu": [
                 "arm64"
             ],
@@ -171,9 +172,9 @@
             }
         },
         "node_modules/@esbuild/darwin-x64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz",
-            "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.3.tgz",
+            "integrity": "sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==",
             "cpu": [
                 "x64"
             ],
@@ -188,9 +189,9 @@
             }
         },
         "node_modules/@esbuild/freebsd-arm64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz",
-            "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.3.tgz",
+            "integrity": "sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==",
             "cpu": [
                 "arm64"
             ],
@@ -205,9 +206,9 @@
             }
         },
         "node_modules/@esbuild/freebsd-x64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz",
-            "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.3.tgz",
+            "integrity": "sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==",
             "cpu": [
                 "x64"
             ],
@@ -222,9 +223,9 @@
             }
         },
         "node_modules/@esbuild/linux-arm": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz",
-            "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.3.tgz",
+            "integrity": "sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==",
             "cpu": [
                 "arm"
             ],
@@ -239,9 +240,9 @@
             }
         },
         "node_modules/@esbuild/linux-arm64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz",
-            "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.3.tgz",
+            "integrity": "sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==",
             "cpu": [
                 "arm64"
             ],
@@ -256,9 +257,9 @@
             }
         },
         "node_modules/@esbuild/linux-ia32": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz",
-            "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.3.tgz",
+            "integrity": "sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==",
             "cpu": [
                 "ia32"
             ],
@@ -273,9 +274,9 @@
             }
         },
         "node_modules/@esbuild/linux-loong64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz",
-            "integrity": "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.3.tgz",
+            "integrity": "sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==",
             "cpu": [
                 "loong64"
             ],
@@ -290,9 +291,9 @@
             }
         },
         "node_modules/@esbuild/linux-mips64el": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz",
-            "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.3.tgz",
+            "integrity": "sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==",
             "cpu": [
                 "mips64el"
             ],
@@ -307,9 +308,9 @@
             }
         },
         "node_modules/@esbuild/linux-ppc64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz",
-            "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.3.tgz",
+            "integrity": "sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==",
             "cpu": [
                 "ppc64"
             ],
@@ -324,9 +325,9 @@
             }
         },
         "node_modules/@esbuild/linux-riscv64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz",
-            "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.3.tgz",
+            "integrity": "sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==",
             "cpu": [
                 "riscv64"
             ],
@@ -341,9 +342,9 @@
             }
         },
         "node_modules/@esbuild/linux-s390x": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz",
-            "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.3.tgz",
+            "integrity": "sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==",
             "cpu": [
                 "s390x"
             ],
@@ -358,9 +359,9 @@
             }
         },
         "node_modules/@esbuild/linux-x64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz",
-            "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.3.tgz",
+            "integrity": "sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==",
             "cpu": [
                 "x64"
             ],
@@ -375,9 +376,9 @@
             }
         },
         "node_modules/@esbuild/netbsd-arm64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz",
-            "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.3.tgz",
+            "integrity": "sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==",
             "cpu": [
                 "arm64"
             ],
@@ -392,9 +393,9 @@
             }
         },
         "node_modules/@esbuild/netbsd-x64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz",
-            "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.3.tgz",
+            "integrity": "sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==",
             "cpu": [
                 "x64"
             ],
@@ -409,9 +410,9 @@
             }
         },
         "node_modules/@esbuild/openbsd-arm64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz",
-            "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.3.tgz",
+            "integrity": "sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==",
             "cpu": [
                 "arm64"
             ],
@@ -426,9 +427,9 @@
             }
         },
         "node_modules/@esbuild/openbsd-x64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz",
-            "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.3.tgz",
+            "integrity": "sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==",
             "cpu": [
                 "x64"
             ],
@@ -443,9 +444,9 @@
             }
         },
         "node_modules/@esbuild/openharmony-arm64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz",
-            "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.3.tgz",
+            "integrity": "sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==",
             "cpu": [
                 "arm64"
             ],
@@ -460,9 +461,9 @@
             }
         },
         "node_modules/@esbuild/sunos-x64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz",
-            "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.3.tgz",
+            "integrity": "sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==",
             "cpu": [
                 "x64"
             ],
@@ -477,9 +478,9 @@
             }
         },
         "node_modules/@esbuild/win32-arm64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz",
-            "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.3.tgz",
+            "integrity": "sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==",
             "cpu": [
                 "arm64"
             ],
@@ -494,9 +495,9 @@
             }
         },
         "node_modules/@esbuild/win32-ia32": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz",
-            "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.3.tgz",
+            "integrity": "sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==",
             "cpu": [
                 "ia32"
             ],
@@ -511,9 +512,9 @@
             }
         },
         "node_modules/@esbuild/win32-x64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz",
-            "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.3.tgz",
+            "integrity": "sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==",
             "cpu": [
                 "x64"
             ],
@@ -557,163 +558,107 @@
             }
         },
         "node_modules/@eslint/config-array": {
-            "version": "0.21.1",
-            "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
-            "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
+            "version": "0.23.2",
+            "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.23.2.tgz",
+            "integrity": "sha512-YF+fE6LV4v5MGWRGj7G404/OZzGNepVF8fxk7jqmqo3lrza7a0uUcDnROGRBG1WFC1omYUS/Wp1f42i0M+3Q3A==",
             "dev": true,
             "license": "Apache-2.0",
             "dependencies": {
-                "@eslint/object-schema": "^2.1.7",
+                "@eslint/object-schema": "^3.0.2",
                 "debug": "^4.3.1",
-                "minimatch": "^3.1.2"
+                "minimatch": "^10.2.1"
             },
             "engines": {
-                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+                "node": "^20.19.0 || ^22.13.0 || >=24"
             }
         },
-        "node_modules/@eslint/config-array/node_modules/brace-expansion": {
-            "version": "1.1.12",
-            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-            "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+        "node_modules/@eslint/config-array/node_modules/balanced-match": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.3.tgz",
+            "integrity": "sha512-1pHv8LX9CpKut1Zp4EXey7Z8OfH11ONNH6Dhi2WDUt31VVZFXZzKwXcysBgqSumFCmR+0dqjMK5v5JiFHzi0+g==",
             "dev": true,
             "license": "MIT",
-            "dependencies": {
-                "balanced-match": "^1.0.0",
-                "concat-map": "0.0.1"
-            }
-        },
-        "node_modules/@eslint/config-array/node_modules/minimatch": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-            "dev": true,
-            "license": "ISC",
-            "dependencies": {
-                "brace-expansion": "^1.1.7"
-            },
-            "engines": {
-                "node": "*"
-            }
-        },
-        "node_modules/@eslint/config-helpers": {
-            "version": "0.4.2",
-            "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
-            "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
-            "dev": true,
-            "license": "Apache-2.0",
-            "dependencies": {
-                "@eslint/core": "^0.17.0"
-            },
             "engines": {
-                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+                "node": "20 || >=22"
             }
         },
-        "node_modules/@eslint/core": {
-            "version": "0.17.0",
-            "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
-            "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+        "node_modules/@eslint/config-array/node_modules/brace-expansion": {
+            "version": "5.0.2",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.2.tgz",
+            "integrity": "sha512-Pdk8c9poy+YhOgVWw1JNN22/HcivgKWwpxKq04M/jTmHyCZn12WPJebZxdjSa5TmBqISrUSgNYU3eRORljfCCw==",
             "dev": true,
-            "license": "Apache-2.0",
+            "license": "MIT",
             "dependencies": {
-                "@types/json-schema": "^7.0.15"
+                "balanced-match": "^4.0.2"
             },
             "engines": {
-                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+                "node": "20 || >=22"
             }
         },
-        "node_modules/@eslint/eslintrc": {
-            "version": "3.3.3",
-            "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz",
-            "integrity": "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==",
+        "node_modules/@eslint/config-array/node_modules/minimatch": {
+            "version": "10.2.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.2.tgz",
+            "integrity": "sha512-+G4CpNBxa5MprY+04MbgOw1v7So6n5JY166pFi9KfYwT78fxScCeSNQSNzp6dpPSW2rONOps6Ocam1wFhCgoVw==",
             "dev": true,
-            "license": "MIT",
+            "license": "BlueOak-1.0.0",
             "dependencies": {
-                "ajv": "^6.12.4",
-                "debug": "^4.3.2",
-                "espree": "^10.0.1",
-                "globals": "^14.0.0",
-                "ignore": "^5.2.0",
-                "import-fresh": "^3.2.1",
-                "js-yaml": "^4.1.1",
-                "minimatch": "^3.1.2",
-                "strip-json-comments": "^3.1.1"
+                "brace-expansion": "^5.0.2"
             },
             "engines": {
-                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+                "node": "18 || 20 || >=22"
             },
             "funding": {
-                "url": "https://opencollective.com/eslint"
+                "url": "https://github.com/sponsors/isaacs"
             }
         },
-        "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
-            "version": "1.1.12",
-            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-            "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+        "node_modules/@eslint/config-helpers": {
+            "version": "0.5.2",
+            "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.5.2.tgz",
+            "integrity": "sha512-a5MxrdDXEvqnIq+LisyCX6tQMPF/dSJpCfBgBauY+pNZ28yCtSsTvyTYrMhaI+LK26bVyCJfJkT0u8KIj2i1dQ==",
             "dev": true,
-            "license": "MIT",
+            "license": "Apache-2.0",
             "dependencies": {
-                "balanced-match": "^1.0.0",
-                "concat-map": "0.0.1"
-            }
-        },
-        "node_modules/@eslint/eslintrc/node_modules/ignore": {
-            "version": "5.3.2",
-            "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
-            "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
-            "dev": true,
-            "license": "MIT",
+                "@eslint/core": "^1.1.0"
+            },
             "engines": {
-                "node": ">= 4"
+                "node": "^20.19.0 || ^22.13.0 || >=24"
             }
         },
-        "node_modules/@eslint/eslintrc/node_modules/minimatch": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+        "node_modules/@eslint/core": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@eslint/core/-/core-1.1.0.tgz",
+            "integrity": "sha512-/nr9K9wkr3P1EzFTdFdMoLuo1PmIxjmwvPozwoSodjNBdefGujXQUF93u1DDZpEaTuDvMsIQddsd35BwtrW9Xw==",
             "dev": true,
-            "license": "ISC",
+            "license": "Apache-2.0",
             "dependencies": {
-                "brace-expansion": "^1.1.7"
+                "@types/json-schema": "^7.0.15"
             },
             "engines": {
-                "node": "*"
-            }
-        },
-        "node_modules/@eslint/js": {
-            "version": "9.39.2",
-            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
-            "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-            },
-            "funding": {
-                "url": "https://eslint.org/donate"
+                "node": "^20.19.0 || ^22.13.0 || >=24"
             }
         },
         "node_modules/@eslint/object-schema": {
-            "version": "2.1.7",
-            "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
-            "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-3.0.2.tgz",
+            "integrity": "sha512-HOy56KJt48Bx8KmJ+XGQNSUMT/6dZee/M54XyUyuvTvPXJmsERRvBchsUVx1UMe1WwIH49XLAczNC7V2INsuUw==",
             "dev": true,
             "license": "Apache-2.0",
             "engines": {
-                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+                "node": "^20.19.0 || ^22.13.0 || >=24"
             }
         },
         "node_modules/@eslint/plugin-kit": {
-            "version": "0.4.1",
-            "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
-            "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.6.0.tgz",
+            "integrity": "sha512-bIZEUzOI1jkhviX2cp5vNyXQc6olzb2ohewQubuYlMXZ2Q/XjBO0x0XhGPvc9fjSIiUN0vw+0hq53BJ4eQSJKQ==",
             "dev": true,
             "license": "Apache-2.0",
             "dependencies": {
-                "@eslint/core": "^0.17.0",
+                "@eslint/core": "^1.1.0",
                 "levn": "^0.4.1"
             },
             "engines": {
-                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+                "node": "^20.19.0 || ^22.13.0 || >=24"
             }
         },
         "node_modules/@guolao/vue-monaco-editor": {
@@ -858,6 +803,16 @@
                 "url": "https://github.com/sponsors/kazupon"
             }
         },
+        "node_modules/@isaacs/cliui": {
+            "version": "9.0.0",
+            "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-9.0.0.tgz",
+            "integrity": "sha512-AokJm4tuBHillT+FpMtxQ60n8ObyXBatq7jD2/JA9dxbDDokKQm8KMht5ibGzLVU9IJDIKK4TPKgMHEYMn3lMg==",
+            "dev": true,
+            "license": "BlueOak-1.0.0",
+            "engines": {
+                "node": ">=18"
+            }
+        },
         "node_modules/@jridgewell/gen-mapping": {
             "version": "0.3.13",
             "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -917,16 +872,16 @@
             }
         },
         "node_modules/@rolldown/pluginutils": {
-            "version": "1.0.0-beta.53",
-            "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
-            "integrity": "sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==",
+            "version": "1.0.0-rc.2",
+            "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.2.tgz",
+            "integrity": "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==",
             "dev": true,
             "license": "MIT"
         },
         "node_modules/@rollup/rollup-android-arm-eabi": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.56.0.tgz",
-            "integrity": "sha512-LNKIPA5k8PF1+jAFomGe3qN3bbIgJe/IlpDBwuVjrDKrJhVWywgnJvflMt/zkbVNLFtF1+94SljYQS6e99klnw==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.1.tgz",
+            "integrity": "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==",
             "cpu": [
                 "arm"
             ],
@@ -938,9 +893,9 @@
             ]
         },
         "node_modules/@rollup/rollup-android-arm64": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.56.0.tgz",
-            "integrity": "sha512-lfbVUbelYqXlYiU/HApNMJzT1E87UPGvzveGg2h0ktUNlOCxKlWuJ9jtfvs1sKHdwU4fzY7Pl8sAl49/XaEk6Q==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.57.1.tgz",
+            "integrity": "sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w==",
             "cpu": [
                 "arm64"
             ],
@@ -952,9 +907,9 @@
             ]
         },
         "node_modules/@rollup/rollup-darwin-arm64": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.56.0.tgz",
-            "integrity": "sha512-EgxD1ocWfhoD6xSOeEEwyE7tDvwTgZc8Bss7wCWe+uc7wO8G34HHCUH+Q6cHqJubxIAnQzAsyUsClt0yFLu06w==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.57.1.tgz",
+            "integrity": "sha512-crNPrwJOrRxagUYeMn/DZwqN88SDmwaJ8Cvi/TN1HnWBU7GwknckyosC2gd0IqYRsHDEnXf328o9/HC6OkPgOg==",
             "cpu": [
                 "arm64"
             ],
@@ -966,9 +921,9 @@
             ]
         },
         "node_modules/@rollup/rollup-darwin-x64": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.56.0.tgz",
-            "integrity": "sha512-1vXe1vcMOssb/hOF8iv52A7feWW2xnu+c8BV4t1F//m9QVLTfNVpEdja5ia762j/UEJe2Z1jAmEqZAK42tVW3g==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.57.1.tgz",
+            "integrity": "sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==",
             "cpu": [
                 "x64"
             ],
@@ -980,9 +935,9 @@
             ]
         },
         "node_modules/@rollup/rollup-freebsd-arm64": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.56.0.tgz",
-            "integrity": "sha512-bof7fbIlvqsyv/DtaXSck4VYQ9lPtoWNFCB/JY4snlFuJREXfZnm+Ej6yaCHfQvofJDXLDMTVxWscVSuQvVWUQ==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.57.1.tgz",
+            "integrity": "sha512-R+/WwhsjmwodAcz65guCGFRkMb4gKWTcIeLy60JJQbXrJ97BOXHxnkPFrP+YwFlaS0m+uWJTstrUA9o+UchFug==",
             "cpu": [
                 "arm64"
             ],
@@ -994,9 +949,9 @@
             ]
         },
         "node_modules/@rollup/rollup-freebsd-x64": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.56.0.tgz",
-            "integrity": "sha512-KNa6lYHloW+7lTEkYGa37fpvPq+NKG/EHKM8+G/g9WDU7ls4sMqbVRV78J6LdNuVaeeK5WB9/9VAFbKxcbXKYg==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.57.1.tgz",
+            "integrity": "sha512-IEQTCHeiTOnAUC3IDQdzRAGj3jOAYNr9kBguI7MQAAZK3caezRrg0GxAb6Hchg4lxdZEI5Oq3iov/w/hnFWY9Q==",
             "cpu": [
                 "x64"
             ],
@@ -1008,9 +963,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.56.0.tgz",
-            "integrity": "sha512-E8jKK87uOvLrrLN28jnAAAChNq5LeCd2mGgZF+fGF5D507WlG/Noct3lP/QzQ6MrqJ5BCKNwI9ipADB6jyiq2A==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.57.1.tgz",
+            "integrity": "sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==",
             "cpu": [
                 "arm"
             ],
@@ -1022,9 +977,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.56.0.tgz",
-            "integrity": "sha512-jQosa5FMYF5Z6prEpTCCmzCXz6eKr/tCBssSmQGEeozA9tkRUty/5Vx06ibaOP9RCrW1Pvb8yp3gvZhHwTDsJw==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.57.1.tgz",
+            "integrity": "sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==",
             "cpu": [
                 "arm"
             ],
@@ -1036,9 +991,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm64-gnu": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.56.0.tgz",
-            "integrity": "sha512-uQVoKkrC1KGEV6udrdVahASIsaF8h7iLG0U0W+Xn14ucFwi6uS539PsAr24IEF9/FoDtzMeeJXJIBo5RkbNWvQ==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.57.1.tgz",
+            "integrity": "sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==",
             "cpu": [
                 "arm64"
             ],
@@ -1050,9 +1005,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm64-musl": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.56.0.tgz",
-            "integrity": "sha512-vLZ1yJKLxhQLFKTs42RwTwa6zkGln+bnXc8ueFGMYmBTLfNu58sl5/eXyxRa2RarTkJbXl8TKPgfS6V5ijNqEA==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.57.1.tgz",
+            "integrity": "sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==",
             "cpu": [
                 "arm64"
             ],
@@ -1064,9 +1019,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-loong64-gnu": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.56.0.tgz",
-            "integrity": "sha512-FWfHOCub564kSE3xJQLLIC/hbKqHSVxy8vY75/YHHzWvbJL7aYJkdgwD/xGfUlL5UV2SB7otapLrcCj2xnF1dg==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.57.1.tgz",
+            "integrity": "sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==",
             "cpu": [
                 "loong64"
             ],
@@ -1078,9 +1033,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-loong64-musl": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.56.0.tgz",
-            "integrity": "sha512-z1EkujxIh7nbrKL1lmIpqFTc/sr0u8Uk0zK/qIEFldbt6EDKWFk/pxFq3gYj4Bjn3aa9eEhYRlL3H8ZbPT1xvA==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.57.1.tgz",
+            "integrity": "sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==",
             "cpu": [
                 "loong64"
             ],
@@ -1092,9 +1047,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.56.0.tgz",
-            "integrity": "sha512-iNFTluqgdoQC7AIE8Q34R3AuPrJGJirj5wMUErxj22deOcY7XwZRaqYmB6ZKFHoVGqRcRd0mqO+845jAibKCkw==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.57.1.tgz",
+            "integrity": "sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==",
             "cpu": [
                 "ppc64"
             ],
@@ -1106,9 +1061,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-ppc64-musl": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.56.0.tgz",
-            "integrity": "sha512-MtMeFVlD2LIKjp2sE2xM2slq3Zxf9zwVuw0jemsxvh1QOpHSsSzfNOTH9uYW9i1MXFxUSMmLpeVeUzoNOKBaWg==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.57.1.tgz",
+            "integrity": "sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==",
             "cpu": [
                 "ppc64"
             ],
@@ -1120,9 +1075,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.56.0.tgz",
-            "integrity": "sha512-in+v6wiHdzzVhYKXIk5U74dEZHdKN9KH0Q4ANHOTvyXPG41bajYRsy7a8TPKbYPl34hU7PP7hMVHRvv/5aCSew==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.57.1.tgz",
+            "integrity": "sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==",
             "cpu": [
                 "riscv64"
             ],
@@ -1134,9 +1089,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-riscv64-musl": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.56.0.tgz",
-            "integrity": "sha512-yni2raKHB8m9NQpI9fPVwN754mn6dHQSbDTwxdr9SE0ks38DTjLMMBjrwvB5+mXrX+C0npX0CVeCUcvvvD8CNQ==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.57.1.tgz",
+            "integrity": "sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==",
             "cpu": [
                 "riscv64"
             ],
@@ -1148,9 +1103,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-s390x-gnu": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.56.0.tgz",
-            "integrity": "sha512-zhLLJx9nQPu7wezbxt2ut+CI4YlXi68ndEve16tPc/iwoylWS9B3FxpLS2PkmfYgDQtosah07Mj9E0khc3Y+vQ==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.57.1.tgz",
+            "integrity": "sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==",
             "cpu": [
                 "s390x"
             ],
@@ -1162,9 +1117,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-x64-gnu": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.56.0.tgz",
-            "integrity": "sha512-MVC6UDp16ZSH7x4rtuJPAEoE1RwS8N4oK9DLHy3FTEdFoUTCFVzMfJl/BVJ330C+hx8FfprA5Wqx4FhZXkj2Kw==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.57.1.tgz",
+            "integrity": "sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==",
             "cpu": [
                 "x64"
             ],
@@ -1176,9 +1131,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-x64-musl": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.56.0.tgz",
-            "integrity": "sha512-ZhGH1eA4Qv0lxaV00azCIS1ChedK0V32952Md3FtnxSqZTBTd6tgil4nZT5cU8B+SIw3PFYkvyR4FKo2oyZIHA==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.57.1.tgz",
+            "integrity": "sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==",
             "cpu": [
                 "x64"
             ],
@@ -1190,9 +1145,9 @@
             ]
         },
         "node_modules/@rollup/rollup-openbsd-x64": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.56.0.tgz",
-            "integrity": "sha512-O16XcmyDeFI9879pEcmtWvD/2nyxR9mF7Gs44lf1vGGx8Vg2DRNx11aVXBEqOQhWb92WN4z7fW/q4+2NYzCbBA==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.57.1.tgz",
+            "integrity": "sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==",
             "cpu": [
                 "x64"
             ],
@@ -1204,9 +1159,9 @@
             ]
         },
         "node_modules/@rollup/rollup-openharmony-arm64": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.56.0.tgz",
-            "integrity": "sha512-LhN/Reh+7F3RCgQIRbgw8ZMwUwyqJM+8pXNT6IIJAqm2IdKkzpCh/V9EdgOMBKuebIrzswqy4ATlrDgiOwbRcQ==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.57.1.tgz",
+            "integrity": "sha512-4wYoDpNg6o/oPximyc/NG+mYUejZrCU2q+2w6YZqrAs2UcNUChIZXjtafAiiZSUc7On8v5NyNj34Kzj/Ltk6dQ==",
             "cpu": [
                 "arm64"
             ],
@@ -1218,9 +1173,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-arm64-msvc": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.56.0.tgz",
-            "integrity": "sha512-kbFsOObXp3LBULg1d3JIUQMa9Kv4UitDmpS+k0tinPBz3watcUiV2/LUDMMucA6pZO3WGE27P7DsfaN54l9ing==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.57.1.tgz",
+            "integrity": "sha512-O54mtsV/6LW3P8qdTcamQmuC990HDfR71lo44oZMZlXU4tzLrbvTii87Ni9opq60ds0YzuAlEr/GNwuNluZyMQ==",
             "cpu": [
                 "arm64"
             ],
@@ -1232,9 +1187,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-ia32-msvc": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.56.0.tgz",
-            "integrity": "sha512-vSSgny54D6P4vf2izbtFm/TcWYedw7f8eBrOiGGecyHyQB9q4Kqentjaj8hToe+995nob/Wv48pDqL5a62EWtg==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.57.1.tgz",
+            "integrity": "sha512-P3dLS+IerxCT/7D2q2FYcRdWRl22dNbrbBEtxdWhXrfIMPP9lQhb5h4Du04mdl5Woq05jVCDPCMF7Ub0NAjIew==",
             "cpu": [
                 "ia32"
             ],
@@ -1246,9 +1201,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-x64-gnu": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.56.0.tgz",
-            "integrity": "sha512-FeCnkPCTHQJFbiGG49KjV5YGW/8b9rrXAM2Mz2kiIoktq2qsJxRD5giEMEOD2lPdgs72upzefaUvS+nc8E3UzQ==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.57.1.tgz",
+            "integrity": "sha512-VMBH2eOOaKGtIJYleXsi2B8CPVADrh+TyNxJ4mWPnKfLB/DBUmzW+5m1xUrcwWoMfSLagIRpjUFeW5CO5hyciQ==",
             "cpu": [
                 "x64"
             ],
@@ -1260,9 +1215,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-x64-msvc": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.56.0.tgz",
-            "integrity": "sha512-H8AE9Ur/t0+1VXujj90w0HrSOuv0Nq9r1vSZF2t5km20NTfosQsGGUXDaKdQZzwuLts7IyL1fYT4hM95TI9c4g==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.1.tgz",
+            "integrity": "sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==",
             "cpu": [
                 "x64"
             ],
@@ -1273,151 +1228,56 @@
                 "win32"
             ]
         },
-        "node_modules/@sentry-internal/browser-utils": {
-            "version": "10.36.0",
-            "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-10.36.0.tgz",
-            "integrity": "sha512-WILVR8HQBWOxbqLRuTxjzRCMIACGsDTo6jXvzA8rz6ezElElLmIrn3CFAswrESLqEEUa4CQHl5bLgSVJCRNweA==",
-            "license": "MIT",
-            "dependencies": {
-                "@sentry/core": "10.36.0"
-            },
-            "engines": {
-                "node": ">=18"
-            }
-        },
-        "node_modules/@sentry-internal/feedback": {
-            "version": "10.36.0",
-            "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-10.36.0.tgz",
-            "integrity": "sha512-zPjz7AbcxEyx8AHj8xvp28fYtPTPWU1XcNtymhAHJLS9CXOblqSC7W02Jxz6eo3eR1/pLyOo6kJBUjvLe9EoFA==",
-            "license": "MIT",
-            "dependencies": {
-                "@sentry/core": "10.36.0"
-            },
-            "engines": {
-                "node": ">=18"
-            }
-        },
-        "node_modules/@sentry-internal/replay": {
-            "version": "10.36.0",
-            "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-10.36.0.tgz",
-            "integrity": "sha512-nLMkJgvHq+uCCrQKV2KgSdVHxTsmDk0r2hsAoTcKCbzUpXyW5UhCziMRS6ULjBlzt5sbxoIIplE25ZpmIEeNgg==",
-            "license": "MIT",
-            "dependencies": {
-                "@sentry-internal/browser-utils": "10.36.0",
-                "@sentry/core": "10.36.0"
-            },
-            "engines": {
-                "node": ">=18"
-            }
-        },
-        "node_modules/@sentry-internal/replay-canvas": {
-            "version": "10.36.0",
-            "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-10.36.0.tgz",
-            "integrity": "sha512-DLGIwmT2LX+O6TyYPtOQL5GiTm2rN0taJPDJ/Lzg2KEJZrdd5sKkzTckhh2x+vr4JQyeaLmnb8M40Ch1hvG/vQ==",
-            "license": "MIT",
-            "dependencies": {
-                "@sentry-internal/replay": "10.36.0",
-                "@sentry/core": "10.36.0"
-            },
-            "engines": {
-                "node": ">=18"
-            }
-        },
-        "node_modules/@sentry/browser": {
-            "version": "10.36.0",
-            "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-10.36.0.tgz",
-            "integrity": "sha512-yHhXbgdGY1s+m8CdILC9U/II7gb6+s99S2Eh8VneEn/JG9wHc+UOzrQCeFN0phFP51QbLkjkiQbbanjT1HP8UQ==",
-            "license": "MIT",
-            "dependencies": {
-                "@sentry-internal/browser-utils": "10.36.0",
-                "@sentry-internal/feedback": "10.36.0",
-                "@sentry-internal/replay": "10.36.0",
-                "@sentry-internal/replay-canvas": "10.36.0",
-                "@sentry/core": "10.36.0"
-            },
-            "engines": {
-                "node": ">=18"
-            }
-        },
-        "node_modules/@sentry/core": {
-            "version": "10.36.0",
-            "resolved": "https://registry.npmjs.org/@sentry/core/-/core-10.36.0.tgz",
-            "integrity": "sha512-EYJjZvofI+D93eUsPLDIUV0zQocYqiBRyXS6CCV6dHz64P/Hob5NJQOwPa8/v6nD+UvJXvwsFfvXOHhYZhZJOQ==",
-            "license": "MIT",
-            "engines": {
-                "node": ">=18"
-            }
-        },
-        "node_modules/@sentry/vue": {
-            "version": "10.36.0",
-            "resolved": "https://registry.npmjs.org/@sentry/vue/-/vue-10.36.0.tgz",
-            "integrity": "sha512-pGED21QngK1ulqGsNn1NyBKgay8Cf7qZBnaxQXvnm9RaIlTGYdqg7TeooQru45We/8f0DzM6n59YykAsUu21kw==",
-            "license": "MIT",
-            "dependencies": {
-                "@sentry/browser": "10.36.0",
-                "@sentry/core": "10.36.0"
-            },
-            "engines": {
-                "node": ">=18"
-            },
-            "peerDependencies": {
-                "@tanstack/vue-router": "^1.64.0",
-                "pinia": "2.x || 3.x",
-                "vue": "2.x || 3.x"
-            },
-            "peerDependenciesMeta": {
-                "@tanstack/vue-router": {
-                    "optional": true
-                },
-                "pinia": {
-                    "optional": true
-                }
-            }
+        "node_modules/@stomp/stompjs": {
+            "version": "7.3.0",
+            "resolved": "https://registry.npmjs.org/@stomp/stompjs/-/stompjs-7.3.0.tgz",
+            "integrity": "sha512-nKMLoFfJhrQAqkvvKd1vLq/cVBGCMwPRCD0LqW7UT1fecRx9C3GoKEIR2CYwVuErGeZu8w0kFkl2rlhPlqHVgQ==",
+            "license": "Apache-2.0"
         },
         "node_modules/@tailwindcss/node": {
-            "version": "4.1.18",
-            "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
-            "integrity": "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==",
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.2.0.tgz",
+            "integrity": "sha512-Yv+fn/o2OmL5fh/Ir62VXItdShnUxfpkMA4Y7jdeC8O81WPB8Kf6TT6GSHvnqgSwDzlB5iT7kDpeXxLsUS0T6Q==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@jridgewell/remapping": "^2.3.4",
-                "enhanced-resolve": "^5.18.3",
+                "@jridgewell/remapping": "^2.3.5",
+                "enhanced-resolve": "^5.19.0",
                 "jiti": "^2.6.1",
-                "lightningcss": "1.30.2",
+                "lightningcss": "1.31.1",
                 "magic-string": "^0.30.21",
                 "source-map-js": "^1.2.1",
-                "tailwindcss": "4.1.18"
+                "tailwindcss": "4.2.0"
             }
         },
         "node_modules/@tailwindcss/oxide": {
-            "version": "4.1.18",
-            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.18.tgz",
-            "integrity": "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==",
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.2.0.tgz",
+            "integrity": "sha512-AZqQzADaj742oqn2xjl5JbIOzZB/DGCYF/7bpvhA8KvjUj9HJkag6bBuwZvH1ps6dfgxNHyuJVlzSr2VpMgdTQ==",
             "dev": true,
             "license": "MIT",
             "engines": {
-                "node": ">= 10"
+                "node": ">= 20"
             },
             "optionalDependencies": {
-                "@tailwindcss/oxide-android-arm64": "4.1.18",
-                "@tailwindcss/oxide-darwin-arm64": "4.1.18",
-                "@tailwindcss/oxide-darwin-x64": "4.1.18",
-                "@tailwindcss/oxide-freebsd-x64": "4.1.18",
-                "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18",
-                "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18",
-                "@tailwindcss/oxide-linux-arm64-musl": "4.1.18",
-                "@tailwindcss/oxide-linux-x64-gnu": "4.1.18",
-                "@tailwindcss/oxide-linux-x64-musl": "4.1.18",
-                "@tailwindcss/oxide-wasm32-wasi": "4.1.18",
-                "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18",
-                "@tailwindcss/oxide-win32-x64-msvc": "4.1.18"
+                "@tailwindcss/oxide-android-arm64": "4.2.0",
+                "@tailwindcss/oxide-darwin-arm64": "4.2.0",
+                "@tailwindcss/oxide-darwin-x64": "4.2.0",
+                "@tailwindcss/oxide-freebsd-x64": "4.2.0",
+                "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.0",
+                "@tailwindcss/oxide-linux-arm64-gnu": "4.2.0",
+                "@tailwindcss/oxide-linux-arm64-musl": "4.2.0",
+                "@tailwindcss/oxide-linux-x64-gnu": "4.2.0",
+                "@tailwindcss/oxide-linux-x64-musl": "4.2.0",
+                "@tailwindcss/oxide-wasm32-wasi": "4.2.0",
+                "@tailwindcss/oxide-win32-arm64-msvc": "4.2.0",
+                "@tailwindcss/oxide-win32-x64-msvc": "4.2.0"
             }
         },
         "node_modules/@tailwindcss/oxide-android-arm64": {
-            "version": "4.1.18",
-            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz",
-            "integrity": "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==",
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.2.0.tgz",
+            "integrity": "sha512-F0QkHAVaW/JNBWl4CEKWdZ9PMb0khw5DCELAOnu+RtjAfx5Zgw+gqCHFvqg3AirU1IAd181fwOtJQ5I8Yx5wtw==",
             "cpu": [
                 "arm64"
             ],
@@ -1428,13 +1288,13 @@
                 "android"
             ],
             "engines": {
-                "node": ">= 10"
+                "node": ">= 20"
             }
         },
         "node_modules/@tailwindcss/oxide-darwin-arm64": {
-            "version": "4.1.18",
-            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz",
-            "integrity": "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==",
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.2.0.tgz",
+            "integrity": "sha512-I0QylkXsBsJMZ4nkUNSR04p6+UptjcwhcVo3Zu828ikiEqHjVmQL9RuQ6uT/cVIiKpvtVA25msu/eRV97JeNSA==",
             "cpu": [
                 "arm64"
             ],
@@ -1445,13 +1305,13 @@
                 "darwin"
             ],
             "engines": {
-                "node": ">= 10"
+                "node": ">= 20"
             }
         },
         "node_modules/@tailwindcss/oxide-darwin-x64": {
-            "version": "4.1.18",
-            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz",
-            "integrity": "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==",
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.2.0.tgz",
+            "integrity": "sha512-6TmQIn4p09PBrmnkvbYQ0wbZhLtbaksCDx7Y7R3FYYx0yxNA7xg5KP7dowmQ3d2JVdabIHvs3Hx4K3d5uCf8xg==",
             "cpu": [
                 "x64"
             ],
@@ -1462,13 +1322,13 @@
                 "darwin"
             ],
             "engines": {
-                "node": ">= 10"
+                "node": ">= 20"
             }
         },
         "node_modules/@tailwindcss/oxide-freebsd-x64": {
-            "version": "4.1.18",
-            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz",
-            "integrity": "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==",
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.2.0.tgz",
+            "integrity": "sha512-qBudxDvAa2QwGlq9y7VIzhTvp2mLJ6nD/G8/tI70DCDoneaUeLWBJaPcbfzqRIWraj+o969aDQKvKW9dvkUizw==",
             "cpu": [
                 "x64"
             ],
@@ -1479,13 +1339,13 @@
                 "freebsd"
             ],
             "engines": {
-                "node": ">= 10"
+                "node": ">= 20"
             }
         },
         "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-            "version": "4.1.18",
-            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz",
-            "integrity": "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==",
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.2.0.tgz",
+            "integrity": "sha512-7XKkitpy5NIjFZNUQPeUyNJNJn1CJeV7rmMR+exHfTuOsg8rxIO9eNV5TSEnqRcaOK77zQpsyUkBWmPy8FgdSg==",
             "cpu": [
                 "arm"
             ],
@@ -1496,13 +1356,13 @@
                 "linux"
             ],
             "engines": {
-                "node": ">= 10"
+                "node": ">= 20"
             }
         },
         "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-            "version": "4.1.18",
-            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz",
-            "integrity": "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==",
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.2.0.tgz",
+            "integrity": "sha512-Mff5a5Q3WoQR01pGU1gr29hHM1N93xYrKkGXfPw/aRtK4bOc331Ho4Tgfsm5WDGvpevqMpdlkCojT3qlCQbCpA==",
             "cpu": [
                 "arm64"
             ],
@@ -1513,13 +1373,13 @@
                 "linux"
             ],
             "engines": {
-                "node": ">= 10"
+                "node": ">= 20"
             }
         },
         "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-            "version": "4.1.18",
-            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz",
-            "integrity": "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==",
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.2.0.tgz",
+            "integrity": "sha512-XKcSStleEVnbH6W/9DHzZv1YhjE4eSS6zOu2eRtYAIh7aV4o3vIBs+t/B15xlqoxt6ef/0uiqJVB6hkHjWD/0A==",
             "cpu": [
                 "arm64"
             ],
@@ -1530,13 +1390,13 @@
                 "linux"
             ],
             "engines": {
-                "node": ">= 10"
+                "node": ">= 20"
             }
         },
         "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-            "version": "4.1.18",
-            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz",
-            "integrity": "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==",
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.0.tgz",
+            "integrity": "sha512-/hlXCBqn9K6fi7eAM0RsobHwJYa5V/xzWspVTzxnX+Ft9v6n+30Pz8+RxCn7sQL/vRHHLS30iQPrHQunu6/vJA==",
             "cpu": [
                 "x64"
             ],
@@ -1547,13 +1407,13 @@
                 "linux"
             ],
             "engines": {
-                "node": ">= 10"
+                "node": ">= 20"
             }
         },
         "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-            "version": "4.1.18",
-            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz",
-            "integrity": "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==",
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.0.tgz",
+            "integrity": "sha512-lKUaygq4G7sWkhQbfdRRBkaq4LY39IriqBQ+Gk6l5nKq6Ay2M2ZZb1tlIyRNgZKS8cbErTwuYSor0IIULC0SHw==",
             "cpu": [
                 "x64"
             ],
@@ -1564,13 +1424,13 @@
                 "linux"
             ],
             "engines": {
-                "node": ">= 10"
+                "node": ">= 20"
             }
         },
         "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-            "version": "4.1.18",
-            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz",
-            "integrity": "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==",
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.2.0.tgz",
+            "integrity": "sha512-xuDjhAsFdUuFP5W9Ze4k/o4AskUtI8bcAGU4puTYprr89QaYFmhYOPfP+d1pH+k9ets6RoE23BXZM1X1jJqoyw==",
             "bundleDependencies": [
                 "@napi-rs/wasm-runtime",
                 "@emnapi/core",
@@ -1586,21 +1446,21 @@
             "license": "MIT",
             "optional": true,
             "dependencies": {
-                "@emnapi/core": "^1.7.1",
-                "@emnapi/runtime": "^1.7.1",
+                "@emnapi/core": "^1.8.1",
+                "@emnapi/runtime": "^1.8.1",
                 "@emnapi/wasi-threads": "^1.1.0",
-                "@napi-rs/wasm-runtime": "^1.1.0",
+                "@napi-rs/wasm-runtime": "^1.1.1",
                 "@tybys/wasm-util": "^0.10.1",
-                "tslib": "^2.4.0"
+                "tslib": "^2.8.1"
             },
             "engines": {
                 "node": ">=14.0.0"
             }
         },
         "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-            "version": "4.1.18",
-            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz",
-            "integrity": "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==",
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.0.tgz",
+            "integrity": "sha512-2UU/15y1sWDEDNJXxEIrfWKC2Yb4YgIW5Xz2fKFqGzFWfoMHWFlfa1EJlGO2Xzjkq/tvSarh9ZTjvbxqWvLLXA==",
             "cpu": [
                 "arm64"
             ],
@@ -1611,13 +1471,13 @@
                 "win32"
             ],
             "engines": {
-                "node": ">= 10"
+                "node": ">= 20"
             }
         },
         "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-            "version": "4.1.18",
-            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz",
-            "integrity": "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==",
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.0.tgz",
+            "integrity": "sha512-CrFadmFoc+z76EV6LPG1jx6XceDsaCG3lFhyLNo/bV9ByPrE+FnBPckXQVP4XRkN76h3Fjt/a+5Er/oA/nCBvQ==",
             "cpu": [
                 "x64"
             ],
@@ -1628,28 +1488,28 @@
                 "win32"
             ],
             "engines": {
-                "node": ">= 10"
+                "node": ">= 20"
             }
         },
         "node_modules/@tailwindcss/vite": {
-            "version": "4.1.18",
-            "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.18.tgz",
-            "integrity": "sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA==",
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.2.0.tgz",
+            "integrity": "sha512-da9mFCaHpoOgtQiWtDGIikTrSpUFBtIZCG3jy/u2BGV+l/X1/pbxzmIUxNt6JWm19N3WtGi4KlJdSH/Si83WOA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@tailwindcss/node": "4.1.18",
-                "@tailwindcss/oxide": "4.1.18",
-                "tailwindcss": "4.1.18"
+                "@tailwindcss/node": "4.2.0",
+                "@tailwindcss/oxide": "4.2.0",
+                "tailwindcss": "4.2.0"
             },
             "peerDependencies": {
                 "vite": "^5.2.0 || ^6 || ^7"
             }
         },
         "node_modules/@tauri-apps/api": {
-            "version": "2.9.1",
-            "resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-2.9.1.tgz",
-            "integrity": "sha512-IGlhP6EivjXHepbBic618GOmiWe4URJiIeZFlB7x3czM0yDHHYviH1Xvoiv4FefdkQtn6v7TuwWCRfOGdnVUGw==",
+            "version": "2.10.1",
+            "resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-2.10.1.tgz",
+            "integrity": "sha512-hKL/jWf293UDSUN09rR69hrToyIXBb8CjGaWC7gfinvnQrBVvnLr08FeFi38gxtugAVyVcTa5/FD/Xnkb1siBw==",
             "license": "Apache-2.0 OR MIT",
             "funding": {
                 "type": "opencollective",
@@ -1657,9 +1517,9 @@
             }
         },
         "node_modules/@tauri-apps/cli": {
-            "version": "2.9.6",
-            "resolved": "https://registry.npmjs.org/@tauri-apps/cli/-/cli-2.9.6.tgz",
-            "integrity": "sha512-3xDdXL5omQ3sPfBfdC8fCtDKcnyV7OqyzQgfyT5P3+zY6lcPqIYKQBvUasNvppi21RSdfhy44ttvJmftb0PCDw==",
+            "version": "2.10.0",
+            "resolved": "https://registry.npmjs.org/@tauri-apps/cli/-/cli-2.10.0.tgz",
+            "integrity": "sha512-ZwT0T+7bw4+DPCSWzmviwq5XbXlM0cNoleDKOYPFYqcZqeKY31KlpoMW/MOON/tOFBPgi31a2v3w9gliqwL2+Q==",
             "dev": true,
             "license": "Apache-2.0 OR MIT",
             "bin": {
@@ -1673,23 +1533,23 @@
                 "url": "https://opencollective.com/tauri"
             },
             "optionalDependencies": {
-                "@tauri-apps/cli-darwin-arm64": "2.9.6",
-                "@tauri-apps/cli-darwin-x64": "2.9.6",
-                "@tauri-apps/cli-linux-arm-gnueabihf": "2.9.6",
-                "@tauri-apps/cli-linux-arm64-gnu": "2.9.6",
-                "@tauri-apps/cli-linux-arm64-musl": "2.9.6",
-                "@tauri-apps/cli-linux-riscv64-gnu": "2.9.6",
-                "@tauri-apps/cli-linux-x64-gnu": "2.9.6",
-                "@tauri-apps/cli-linux-x64-musl": "2.9.6",
-                "@tauri-apps/cli-win32-arm64-msvc": "2.9.6",
-                "@tauri-apps/cli-win32-ia32-msvc": "2.9.6",
-                "@tauri-apps/cli-win32-x64-msvc": "2.9.6"
+                "@tauri-apps/cli-darwin-arm64": "2.10.0",
+                "@tauri-apps/cli-darwin-x64": "2.10.0",
+                "@tauri-apps/cli-linux-arm-gnueabihf": "2.10.0",
+                "@tauri-apps/cli-linux-arm64-gnu": "2.10.0",
+                "@tauri-apps/cli-linux-arm64-musl": "2.10.0",
+                "@tauri-apps/cli-linux-riscv64-gnu": "2.10.0",
+                "@tauri-apps/cli-linux-x64-gnu": "2.10.0",
+                "@tauri-apps/cli-linux-x64-musl": "2.10.0",
+                "@tauri-apps/cli-win32-arm64-msvc": "2.10.0",
+                "@tauri-apps/cli-win32-ia32-msvc": "2.10.0",
+                "@tauri-apps/cli-win32-x64-msvc": "2.10.0"
             }
         },
         "node_modules/@tauri-apps/cli-darwin-arm64": {
-            "version": "2.9.6",
-            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-arm64/-/cli-darwin-arm64-2.9.6.tgz",
-            "integrity": "sha512-gf5no6N9FCk1qMrti4lfwP77JHP5haASZgVbBgpZG7BUepB3fhiLCXGUK8LvuOjP36HivXewjg72LTnPDScnQQ==",
+            "version": "2.10.0",
+            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-arm64/-/cli-darwin-arm64-2.10.0.tgz",
+            "integrity": "sha512-avqHD4HRjrMamE/7R/kzJPcAJnZs0IIS+1nkDP5b+TNBn3py7N2aIo9LIpy+VQq0AkN8G5dDpZtOOBkmWt/zjA==",
             "cpu": [
                 "arm64"
             ],
@@ -1704,9 +1564,9 @@
             }
         },
         "node_modules/@tauri-apps/cli-darwin-x64": {
-            "version": "2.9.6",
-            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-x64/-/cli-darwin-x64-2.9.6.tgz",
-            "integrity": "sha512-oWh74WmqbERwwrwcueJyY6HYhgCksUc6NT7WKeXyrlY/FPmNgdyQAgcLuTSkhRFuQ6zh4Np1HZpOqCTpeZBDcw==",
+            "version": "2.10.0",
+            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-x64/-/cli-darwin-x64-2.10.0.tgz",
+            "integrity": "sha512-keDmlvJRStzVFjZTd0xYkBONLtgBC9eMTpmXnBXzsHuawV2q9PvDo2x6D5mhuoMVrJ9QWjgaPKBBCFks4dK71Q==",
             "cpu": [
                 "x64"
             ],
@@ -1721,9 +1581,9 @@
             }
         },
         "node_modules/@tauri-apps/cli-linux-arm-gnueabihf": {
-            "version": "2.9.6",
-            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm-gnueabihf/-/cli-linux-arm-gnueabihf-2.9.6.tgz",
-            "integrity": "sha512-/zde3bFroFsNXOHN204DC2qUxAcAanUjVXXSdEGmhwMUZeAQalNj5cz2Qli2elsRjKN/hVbZOJj0gQ5zaYUjSg==",
+            "version": "2.10.0",
+            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm-gnueabihf/-/cli-linux-arm-gnueabihf-2.10.0.tgz",
+            "integrity": "sha512-e5u0VfLZsMAC9iHaOEANumgl6lfnJx0Dtjkd8IJpysZ8jp0tJ6wrIkto2OzQgzcYyRCKgX72aKE0PFgZputA8g==",
             "cpu": [
                 "arm"
             ],
@@ -1738,9 +1598,9 @@
             }
         },
         "node_modules/@tauri-apps/cli-linux-arm64-gnu": {
-            "version": "2.9.6",
-            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-gnu/-/cli-linux-arm64-gnu-2.9.6.tgz",
-            "integrity": "sha512-pvbljdhp9VOo4RnID5ywSxgBs7qiylTPlK56cTk7InR3kYSTJKYMqv/4Q/4rGo/mG8cVppesKIeBMH42fw6wjg==",
+            "version": "2.10.0",
+            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-gnu/-/cli-linux-arm64-gnu-2.10.0.tgz",
+            "integrity": "sha512-YrYYk2dfmBs5m+OIMCrb+JH/oo+4FtlpcrTCgiFYc7vcs6m3QDd1TTyWu0u01ewsCtK2kOdluhr/zKku+KP7HA==",
             "cpu": [
                 "arm64"
             ],
@@ -1755,9 +1615,9 @@
             }
         },
         "node_modules/@tauri-apps/cli-linux-arm64-musl": {
-            "version": "2.9.6",
-            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.9.6.tgz",
-            "integrity": "sha512-02TKUndpodXBCR0oP//6dZWGYcc22Upf2eP27NvC6z0DIqvkBBFziQUcvi2n6SrwTRL0yGgQjkm9K5NIn8s6jw==",
+            "version": "2.10.0",
+            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.10.0.tgz",
+            "integrity": "sha512-GUoPdVJmrJRIXFfW3Rkt+eGK9ygOdyISACZfC/bCSfOnGt8kNdQIQr5WRH9QUaTVFIwxMlQyV3m+yXYP+xhSVA==",
             "cpu": [
                 "arm64"
             ],
@@ -1772,9 +1632,9 @@
             }
         },
         "node_modules/@tauri-apps/cli-linux-riscv64-gnu": {
-            "version": "2.9.6",
-            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-riscv64-gnu/-/cli-linux-riscv64-gnu-2.9.6.tgz",
-            "integrity": "sha512-fmp1hnulbqzl1GkXl4aTX9fV+ubHw2LqlLH1PE3BxZ11EQk+l/TmiEongjnxF0ie4kV8DQfDNJ1KGiIdWe1GvQ==",
+            "version": "2.10.0",
+            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-riscv64-gnu/-/cli-linux-riscv64-gnu-2.10.0.tgz",
+            "integrity": "sha512-JO7s3TlSxshwsoKNCDkyvsx5gw2QAs/Y2GbR5UE2d5kkU138ATKoPOtxn8G1fFT1aDW4LH0rYAAfBpGkDyJJnw==",
             "cpu": [
                 "riscv64"
             ],
@@ -1789,9 +1649,9 @@
             }
         },
         "node_modules/@tauri-apps/cli-linux-x64-gnu": {
-            "version": "2.9.6",
-            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-gnu/-/cli-linux-x64-gnu-2.9.6.tgz",
-            "integrity": "sha512-vY0le8ad2KaV1PJr+jCd8fUF9VOjwwQP/uBuTJvhvKTloEwxYA/kAjKK9OpIslGA9m/zcnSo74czI6bBrm2sYA==",
+            "version": "2.10.0",
+            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-gnu/-/cli-linux-x64-gnu-2.10.0.tgz",
+            "integrity": "sha512-Uvh4SUUp4A6DVRSMWjelww0GnZI3PlVy7VS+DRF5napKuIehVjGl9XD0uKoCoxwAQBLctvipyEK+pDXpJeoHng==",
             "cpu": [
                 "x64"
             ],
@@ -1806,9 +1666,9 @@
             }
         },
         "node_modules/@tauri-apps/cli-linux-x64-musl": {
-            "version": "2.9.6",
-            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-musl/-/cli-linux-x64-musl-2.9.6.tgz",
-            "integrity": "sha512-TOEuB8YCFZTWVDzsO2yW0+zGcoMiPPwcUgdnW1ODnmgfwccpnihDRoks+ABT1e3fHb1ol8QQWsHSCovb3o2ENQ==",
+            "version": "2.10.0",
+            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-musl/-/cli-linux-x64-musl-2.10.0.tgz",
+            "integrity": "sha512-AP0KRK6bJuTpQ8kMNWvhIpKUkQJfcPFeba7QshOQZjJ8wOS6emwTN4K5g/d3AbCMo0RRdnZWwu67MlmtJyxC1Q==",
             "cpu": [
                 "x64"
             ],
@@ -1823,9 +1683,9 @@
             }
         },
         "node_modules/@tauri-apps/cli-win32-arm64-msvc": {
-            "version": "2.9.6",
-            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-arm64-msvc/-/cli-win32-arm64-msvc-2.9.6.tgz",
-            "integrity": "sha512-ujmDGMRc4qRLAnj8nNG26Rlz9klJ0I0jmZs2BPpmNNf0gM/rcVHhqbEkAaHPTBVIrtUdf7bGvQAD2pyIiUrBHQ==",
+            "version": "2.10.0",
+            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-arm64-msvc/-/cli-win32-arm64-msvc-2.10.0.tgz",
+            "integrity": "sha512-97DXVU3dJystrq7W41IX+82JEorLNY+3+ECYxvXWqkq7DBN6FsA08x/EFGE8N/b0LTOui9X2dvpGGoeZKKV08g==",
             "cpu": [
                 "arm64"
             ],
@@ -1840,9 +1700,9 @@
             }
         },
         "node_modules/@tauri-apps/cli-win32-ia32-msvc": {
-            "version": "2.9.6",
-            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-ia32-msvc/-/cli-win32-ia32-msvc-2.9.6.tgz",
-            "integrity": "sha512-S4pT0yAJgFX8QRCyKA1iKjZ9Q/oPjCZf66A/VlG5Yw54Nnr88J1uBpmenINbXxzyhduWrIXBaUbEY1K80ZbpMg==",
+            "version": "2.10.0",
+            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-ia32-msvc/-/cli-win32-ia32-msvc-2.10.0.tgz",
+            "integrity": "sha512-EHyQ1iwrWy1CwMalEm9z2a6L5isQ121pe7FcA2xe4VWMJp+GHSDDGvbTv/OPdkt2Lyr7DAZBpZHM6nvlHXEc4A==",
             "cpu": [
                 "ia32"
             ],
@@ -1857,9 +1717,9 @@
             }
         },
         "node_modules/@tauri-apps/cli-win32-x64-msvc": {
-            "version": "2.9.6",
-            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-2.9.6.tgz",
-            "integrity": "sha512-ldWuWSSkWbKOPjQMJoYVj9wLHcOniv7diyI5UAJ4XsBdtaFB0pKHQsqw/ItUma0VXGC7vB4E9fZjivmxur60aw==",
+            "version": "2.10.0",
+            "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-2.10.0.tgz",
+            "integrity": "sha512-NTpyQxkpzGmU6ceWBTY2xRIEaS0ZLbVx1HE1zTA3TY/pV3+cPoPPOs+7YScr4IMzXMtOw7tLw5LEXo5oIG3qaQ==",
             "cpu": [
                 "x64"
             ],
@@ -1909,6 +1769,13 @@
                 "@tauri-apps/api": "^2.8.0"
             }
         },
+        "node_modules/@types/esrecurse": {
+            "version": "4.3.1",
+            "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
+            "integrity": "sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/@types/estree": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1924,13 +1791,13 @@
             "license": "MIT"
         },
         "node_modules/@types/node": {
-            "version": "25.0.10",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-25.0.10.tgz",
-            "integrity": "sha512-zWW5KPngR/yvakJgGOmZ5vTBemDoSqF3AcV/LrO5u5wTWyEAVVh+IT39G4gtyAkh3CtTZs8aX/yRM82OfzHJRg==",
+            "version": "25.3.0",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-25.3.0.tgz",
+            "integrity": "sha512-4K3bqJpXpqfg2XKGK9bpDTc6xO/xoUP/RBWS7AtRMug6zZFaRekiLzjVtAoZMquxoAbzBvy5nxQ7veS5eYzf8A==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "undici-types": "~7.16.0"
+                "undici-types": "~7.18.0"
             }
         },
         "node_modules/@types/trusted-types": {
@@ -1941,17 +1808,17 @@
             "optional": true
         },
         "node_modules/@typescript-eslint/eslint-plugin": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.53.1.tgz",
-            "integrity": "sha512-cFYYFZ+oQFi6hUnBTbLRXfTJiaQtYE3t4O692agbBl+2Zy+eqSKWtPjhPXJu1G7j4RLjKgeJPDdq3EqOwmX5Ag==",
+            "version": "8.56.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.56.0.tgz",
+            "integrity": "sha512-lRyPDLzNCuae71A3t9NEINBiTn7swyOhvUj3MyUOxb8x6g6vPEFoOU+ZRmGMusNC3X3YMhqMIX7i8ShqhT74Pw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@eslint-community/regexpp": "^4.12.2",
-                "@typescript-eslint/scope-manager": "8.53.1",
-                "@typescript-eslint/type-utils": "8.53.1",
-                "@typescript-eslint/utils": "8.53.1",
-                "@typescript-eslint/visitor-keys": "8.53.1",
+                "@typescript-eslint/scope-manager": "8.56.0",
+                "@typescript-eslint/type-utils": "8.56.0",
+                "@typescript-eslint/utils": "8.56.0",
+                "@typescript-eslint/visitor-keys": "8.56.0",
                 "ignore": "^7.0.5",
                 "natural-compare": "^1.4.0",
                 "ts-api-utils": "^2.4.0"
@@ -1964,22 +1831,22 @@
                 "url": "https://opencollective.com/typescript-eslint"
             },
             "peerDependencies": {
-                "@typescript-eslint/parser": "^8.53.1",
-                "eslint": "^8.57.0 || ^9.0.0",
+                "@typescript-eslint/parser": "^8.56.0",
+                "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
                 "typescript": ">=4.8.4 <6.0.0"
             }
         },
         "node_modules/@typescript-eslint/parser": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.53.1.tgz",
-            "integrity": "sha512-nm3cvFN9SqZGXjmw5bZ6cGmvJSyJPn0wU9gHAZZHDnZl2wF9PhHv78Xf06E0MaNk4zLVHL8hb2/c32XvyJOLQg==",
+            "version": "8.56.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.56.0.tgz",
+            "integrity": "sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/scope-manager": "8.53.1",
-                "@typescript-eslint/types": "8.53.1",
-                "@typescript-eslint/typescript-estree": "8.53.1",
-                "@typescript-eslint/visitor-keys": "8.53.1",
+                "@typescript-eslint/scope-manager": "8.56.0",
+                "@typescript-eslint/types": "8.56.0",
+                "@typescript-eslint/typescript-estree": "8.56.0",
+                "@typescript-eslint/visitor-keys": "8.56.0",
                 "debug": "^4.4.3"
             },
             "engines": {
@@ -1990,19 +1857,19 @@
                 "url": "https://opencollective.com/typescript-eslint"
             },
             "peerDependencies": {
-                "eslint": "^8.57.0 || ^9.0.0",
+                "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
                 "typescript": ">=4.8.4 <6.0.0"
             }
         },
         "node_modules/@typescript-eslint/project-service": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.53.1.tgz",
-            "integrity": "sha512-WYC4FB5Ra0xidsmlPb+1SsnaSKPmS3gsjIARwbEkHkoWloQmuzcfypljaJcR78uyLA1h8sHdWWPHSLDI+MtNog==",
+            "version": "8.56.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.56.0.tgz",
+            "integrity": "sha512-M3rnyL1vIQOMeWxTWIW096/TtVP+8W3p/XnaFflhmcFp+U4zlxUxWj4XwNs6HbDeTtN4yun0GNTTDBw/SvufKg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/tsconfig-utils": "^8.53.1",
-                "@typescript-eslint/types": "^8.53.1",
+                "@typescript-eslint/tsconfig-utils": "^8.56.0",
+                "@typescript-eslint/types": "^8.56.0",
                 "debug": "^4.4.3"
             },
             "engines": {
@@ -2017,14 +1884,14 @@
             }
         },
         "node_modules/@typescript-eslint/scope-manager": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.53.1.tgz",
-            "integrity": "sha512-Lu23yw1uJMFY8cUeq7JlrizAgeQvWugNQzJp8C3x8Eo5Jw5Q2ykMdiiTB9vBVOOUBysMzmRRmUfwFrZuI2C4SQ==",
+            "version": "8.56.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.56.0.tgz",
+            "integrity": "sha512-7UiO/XwMHquH+ZzfVCfUNkIXlp/yQjjnlYUyYz7pfvlK3/EyyN6BK+emDmGNyQLBtLGaYrTAI6KOw8tFucWL2w==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "8.53.1",
-                "@typescript-eslint/visitor-keys": "8.53.1"
+                "@typescript-eslint/types": "8.56.0",
+                "@typescript-eslint/visitor-keys": "8.56.0"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2035,9 +1902,9 @@
             }
         },
         "node_modules/@typescript-eslint/tsconfig-utils": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.53.1.tgz",
-            "integrity": "sha512-qfvLXS6F6b1y43pnf0pPbXJ+YoXIC7HKg0UGZ27uMIemKMKA6XH2DTxsEDdpdN29D+vHV07x/pnlPNVLhdhWiA==",
+            "version": "8.56.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.56.0.tgz",
+            "integrity": "sha512-bSJoIIt4o3lKXD3xmDh9chZcjCz5Lk8xS7Rxn+6l5/pKrDpkCwtQNQQwZ2qRPk7TkUYhrq3WPIHXOXlbXP0itg==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -2052,15 +1919,15 @@
             }
         },
         "node_modules/@typescript-eslint/type-utils": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.53.1.tgz",
-            "integrity": "sha512-MOrdtNvyhy0rHyv0ENzub1d4wQYKb2NmIqG7qEqPWFW7Mpy2jzFC3pQ2yKDvirZB7jypm5uGjF2Qqs6OIqu47w==",
+            "version": "8.56.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.56.0.tgz",
+            "integrity": "sha512-qX2L3HWOU2nuDs6GzglBeuFXviDODreS58tLY/BALPC7iu3Fa+J7EOTwnX9PdNBxUI7Uh0ntP0YWGnxCkXzmfA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "8.53.1",
-                "@typescript-eslint/typescript-estree": "8.53.1",
-                "@typescript-eslint/utils": "8.53.1",
+                "@typescript-eslint/types": "8.56.0",
+                "@typescript-eslint/typescript-estree": "8.56.0",
+                "@typescript-eslint/utils": "8.56.0",
                 "debug": "^4.4.3",
                 "ts-api-utils": "^2.4.0"
             },
@@ -2072,14 +1939,14 @@
                 "url": "https://opencollective.com/typescript-eslint"
             },
             "peerDependencies": {
-                "eslint": "^8.57.0 || ^9.0.0",
+                "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
                 "typescript": ">=4.8.4 <6.0.0"
             }
         },
         "node_modules/@typescript-eslint/types": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.53.1.tgz",
-            "integrity": "sha512-jr/swrr2aRmUAUjW5/zQHbMaui//vQlsZcJKijZf3M26bnmLj8LyZUpj8/Rd6uzaek06OWsqdofN/Thenm5O8A==",
+            "version": "8.56.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.56.0.tgz",
+            "integrity": "sha512-DBsLPs3GsWhX5HylbP9HNG15U0bnwut55Lx12bHB9MpXxQ+R5GC8MwQe+N1UFXxAeQDvEsEDY6ZYwX03K7Z6HQ==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -2091,16 +1958,16 @@
             }
         },
         "node_modules/@typescript-eslint/typescript-estree": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.53.1.tgz",
-            "integrity": "sha512-RGlVipGhQAG4GxV1s34O91cxQ/vWiHJTDHbXRr0li2q/BGg3RR/7NM8QDWgkEgrwQYCvmJV9ichIwyoKCQ+DTg==",
+            "version": "8.56.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.56.0.tgz",
+            "integrity": "sha512-ex1nTUMWrseMltXUHmR2GAQ4d+WjkZCT4f+4bVsps8QEdh0vlBsaCokKTPlnqBFqqGaxilDNJG7b8dolW2m43Q==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/project-service": "8.53.1",
-                "@typescript-eslint/tsconfig-utils": "8.53.1",
-                "@typescript-eslint/types": "8.53.1",
-                "@typescript-eslint/visitor-keys": "8.53.1",
+                "@typescript-eslint/project-service": "8.56.0",
+                "@typescript-eslint/tsconfig-utils": "8.56.0",
+                "@typescript-eslint/types": "8.56.0",
+                "@typescript-eslint/visitor-keys": "8.56.0",
                 "debug": "^4.4.3",
                 "minimatch": "^9.0.5",
                 "semver": "^7.7.3",
@@ -2119,16 +1986,16 @@
             }
         },
         "node_modules/@typescript-eslint/utils": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.53.1.tgz",
-            "integrity": "sha512-c4bMvGVWW4hv6JmDUEG7fSYlWOl3II2I4ylt0NM+seinYQlZMQIaKaXIIVJWt9Ofh6whrpM+EdDQXKXjNovvrg==",
+            "version": "8.56.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.56.0.tgz",
+            "integrity": "sha512-RZ3Qsmi2nFGsS+n+kjLAYDPVlrzf7UhTffrDIKr+h2yzAlYP/y5ZulU0yeDEPItos2Ph46JAL5P/On3pe7kDIQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.9.1",
-                "@typescript-eslint/scope-manager": "8.53.1",
-                "@typescript-eslint/types": "8.53.1",
-                "@typescript-eslint/typescript-estree": "8.53.1"
+                "@typescript-eslint/scope-manager": "8.56.0",
+                "@typescript-eslint/types": "8.56.0",
+                "@typescript-eslint/typescript-estree": "8.56.0"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2138,19 +2005,19 @@
                 "url": "https://opencollective.com/typescript-eslint"
             },
             "peerDependencies": {
-                "eslint": "^8.57.0 || ^9.0.0",
+                "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
                 "typescript": ">=4.8.4 <6.0.0"
             }
         },
         "node_modules/@typescript-eslint/visitor-keys": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.53.1.tgz",
-            "integrity": "sha512-oy+wV7xDKFPRyNggmXuZQSBzvoLnpmJs+GhzRhPjrxl2b/jIlyjVokzm47CZCDUdXKr2zd7ZLodPfOBpOPyPlg==",
+            "version": "8.56.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.56.0.tgz",
+            "integrity": "sha512-q+SL+b+05Ud6LbEE35qe4A99P+htKTKVbyiNEe45eCbJFyh/HVK9QXwlrbz+Q4L8SOW4roxSVwXYj4DMBT7Ieg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "8.53.1",
-                "eslint-visitor-keys": "^4.2.1"
+                "@typescript-eslint/types": "8.56.0",
+                "eslint-visitor-keys": "^5.0.0"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2161,26 +2028,26 @@
             }
         },
         "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
-            "version": "4.2.1",
-            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
-            "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.0.tgz",
+            "integrity": "sha512-A0XeIi7CXU7nPlfHS9loMYEKxUaONu/hTEzHTGba9Huu94Cq1hPivf+DE5erJozZOky0LfvXAyrV/tcswpLI0Q==",
             "dev": true,
             "license": "Apache-2.0",
             "engines": {
-                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+                "node": "^20.19.0 || ^22.13.0 || >=24"
             },
             "funding": {
                 "url": "https://opencollective.com/eslint"
             }
         },
         "node_modules/@vitejs/plugin-vue": {
-            "version": "6.0.3",
-            "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.3.tgz",
-            "integrity": "sha512-TlGPkLFLVOY3T7fZrwdvKpjprR3s4fxRln0ORDo1VQ7HHyxJwTlrjKU3kpVWTlaAjIEuCTokmjkZnr8Tpc925w==",
+            "version": "6.0.4",
+            "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.4.tgz",
+            "integrity": "sha512-uM5iXipgYIn13UUQCZNdWkYk+sysBeA97d5mHsAoAt1u/wpN3+zxOmsVJWosuzX+IMGRzeYUNytztrYznboIkQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@rolldown/pluginutils": "1.0.0-beta.53"
+                "@rolldown/pluginutils": "1.0.0-rc.2"
             },
             "engines": {
                 "node": "^20.19.0 || >=22.12.0"
@@ -2191,68 +2058,68 @@
             }
         },
         "node_modules/@volar/language-core": {
-            "version": "2.4.27",
-            "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.27.tgz",
-            "integrity": "sha512-DjmjBWZ4tJKxfNC1F6HyYERNHPYS7L7OPFyCrestykNdUZMFYzI9WTyvwPcaNaHlrEUwESHYsfEw3isInncZxQ==",
+            "version": "2.4.28",
+            "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.28.tgz",
+            "integrity": "sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@volar/source-map": "2.4.27"
+                "@volar/source-map": "2.4.28"
             }
         },
         "node_modules/@volar/source-map": {
-            "version": "2.4.27",
-            "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.27.tgz",
-            "integrity": "sha512-ynlcBReMgOZj2i6po+qVswtDUeeBRCTgDurjMGShbm8WYZgJ0PA4RmtebBJ0BCYol1qPv3GQF6jK7C9qoVc7lg==",
+            "version": "2.4.28",
+            "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.28.tgz",
+            "integrity": "sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==",
             "dev": true,
             "license": "MIT"
         },
         "node_modules/@volar/typescript": {
-            "version": "2.4.27",
-            "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.27.tgz",
-            "integrity": "sha512-eWaYCcl/uAPInSK2Lze6IqVWaBu/itVqR5InXcHXFyles4zO++Mglt3oxdgj75BDcv1Knr9Y93nowS8U3wqhxg==",
+            "version": "2.4.28",
+            "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.28.tgz",
+            "integrity": "sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@volar/language-core": "2.4.27",
+                "@volar/language-core": "2.4.28",
                 "path-browserify": "^1.0.1",
                 "vscode-uri": "^3.0.8"
             }
         },
         "node_modules/@vue/compiler-core": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.27.tgz",
-            "integrity": "sha512-gnSBQjZA+//qDZen+6a2EdHqJ68Z7uybrMf3SPjEGgG4dicklwDVmMC1AeIHxtLVPT7sn6sH1KOO+tS6gwOUeQ==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.28.tgz",
+            "integrity": "sha512-kviccYxTgoE8n6OCw96BNdYlBg2GOWfBuOW4Vqwrt7mSKWKwFVvI8egdTltqRgITGPsTFYtKYfxIG8ptX2PJHQ==",
             "license": "MIT",
             "dependencies": {
-                "@babel/parser": "^7.28.5",
-                "@vue/shared": "3.5.27",
-                "entities": "^7.0.0",
+                "@babel/parser": "^7.29.0",
+                "@vue/shared": "3.5.28",
+                "entities": "^7.0.1",
                 "estree-walker": "^2.0.2",
                 "source-map-js": "^1.2.1"
             }
         },
         "node_modules/@vue/compiler-dom": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.27.tgz",
-            "integrity": "sha512-oAFea8dZgCtVVVTEC7fv3T5CbZW9BxpFzGGxC79xakTr6ooeEqmRuvQydIiDAkglZEAd09LgVf1RoDnL54fu5w==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.28.tgz",
+            "integrity": "sha512-/1ZepxAb159jKR1btkefDP+J2xuWL5V3WtleRmxaT+K2Aqiek/Ab/+Ebrw2pPj0sdHO8ViAyyJWfhXXOP/+LQA==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-core": "3.5.27",
-                "@vue/shared": "3.5.27"
+                "@vue/compiler-core": "3.5.28",
+                "@vue/shared": "3.5.28"
             }
         },
         "node_modules/@vue/compiler-sfc": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.27.tgz",
-            "integrity": "sha512-sHZu9QyDPeDmN/MRoshhggVOWE5WlGFStKFwu8G52swATgSny27hJRWteKDSUUzUH+wp+bmeNbhJnEAel/auUQ==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.28.tgz",
+            "integrity": "sha512-6TnKMiNkd6u6VeVDhZn/07KhEZuBSn43Wd2No5zaP5s3xm8IqFTHBj84HJah4UepSUJTro5SoqqlOY22FKY96g==",
             "license": "MIT",
             "dependencies": {
-                "@babel/parser": "^7.28.5",
-                "@vue/compiler-core": "3.5.27",
-                "@vue/compiler-dom": "3.5.27",
-                "@vue/compiler-ssr": "3.5.27",
-                "@vue/shared": "3.5.27",
+                "@babel/parser": "^7.29.0",
+                "@vue/compiler-core": "3.5.28",
+                "@vue/compiler-dom": "3.5.28",
+                "@vue/compiler-ssr": "3.5.28",
+                "@vue/shared": "3.5.28",
                 "estree-walker": "^2.0.2",
                 "magic-string": "^0.30.21",
                 "postcss": "^8.5.6",
@@ -2260,13 +2127,13 @@
             }
         },
         "node_modules/@vue/compiler-ssr": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.27.tgz",
-            "integrity": "sha512-Sj7h+JHt512fV1cTxKlYhg7qxBvack+BGncSpH+8vnN+KN95iPIcqB5rsbblX40XorP+ilO7VIKlkuu3Xq2vjw==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.28.tgz",
+            "integrity": "sha512-JCq//9w1qmC6UGLWJX7RXzrGpKkroubey/ZFqTpvEIDJEKGgntuDMqkuWiZvzTzTA5h2qZvFBFHY7fAAa9475g==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-dom": "3.5.27",
-                "@vue/shared": "3.5.27"
+                "@vue/compiler-dom": "3.5.28",
+                "@vue/shared": "3.5.28"
             }
         },
         "node_modules/@vue/devtools-api": {
@@ -2276,13 +2143,13 @@
             "license": "MIT"
         },
         "node_modules/@vue/language-core": {
-            "version": "3.2.2",
-            "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.2.2.tgz",
-            "integrity": "sha512-5DAuhxsxBN9kbriklh3Q5AMaJhyOCNiQJvCskN9/30XOpdLiqZU9Q+WvjArP17ubdGEyZtBzlIeG5nIjEbNOrQ==",
+            "version": "3.2.5",
+            "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.2.5.tgz",
+            "integrity": "sha512-d3OIxN/+KRedeM5wQ6H6NIpwS3P5gC9nmyaHgBk+rO6dIsjY+tOh4UlPpiZbAh3YtLdCGEX4M16RmsBqPmJV+g==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@volar/language-core": "2.4.27",
+                "@volar/language-core": "2.4.28",
                 "@vue/compiler-dom": "^3.5.0",
                 "@vue/shared": "^3.5.0",
                 "alien-signals": "^3.0.0",
@@ -2292,59 +2159,59 @@
             }
         },
         "node_modules/@vue/reactivity": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.27.tgz",
-            "integrity": "sha512-vvorxn2KXfJ0nBEnj4GYshSgsyMNFnIQah/wczXlsNXt+ijhugmW+PpJ2cNPe4V6jpnBcs0MhCODKllWG+nvoQ==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.28.tgz",
+            "integrity": "sha512-gr5hEsxvn+RNyu9/9o1WtdYdwDjg5FgjUSBEkZWqgTKlo/fvwZ2+8W6AfKsc9YN2k/+iHYdS9vZYAhpi10kNaw==",
             "license": "MIT",
             "dependencies": {
-                "@vue/shared": "3.5.27"
+                "@vue/shared": "3.5.28"
             }
         },
         "node_modules/@vue/runtime-core": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.27.tgz",
-            "integrity": "sha512-fxVuX/fzgzeMPn/CLQecWeDIFNt3gQVhxM0rW02Tvp/YmZfXQgcTXlakq7IMutuZ/+Ogbn+K0oct9J3JZfyk3A==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.28.tgz",
+            "integrity": "sha512-POVHTdbgnrBBIpnbYU4y7pOMNlPn2QVxVzkvEA2pEgvzbelQq4ZOUxbp2oiyo+BOtiYlm8Q44wShHJoBvDPAjQ==",
             "license": "MIT",
             "dependencies": {
-                "@vue/reactivity": "3.5.27",
-                "@vue/shared": "3.5.27"
+                "@vue/reactivity": "3.5.28",
+                "@vue/shared": "3.5.28"
             }
         },
         "node_modules/@vue/runtime-dom": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.27.tgz",
-            "integrity": "sha512-/QnLslQgYqSJ5aUmb5F0z0caZPGHRB8LEAQ1s81vHFM5CBfnun63rxhvE/scVb/j3TbBuoZwkJyiLCkBluMpeg==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.28.tgz",
+            "integrity": "sha512-4SXxSF8SXYMuhAIkT+eBRqOkWEfPu6nhccrzrkioA6l0boiq7sp18HCOov9qWJA5HML61kW8p/cB4MmBiG9dSA==",
             "license": "MIT",
             "dependencies": {
-                "@vue/reactivity": "3.5.27",
-                "@vue/runtime-core": "3.5.27",
-                "@vue/shared": "3.5.27",
+                "@vue/reactivity": "3.5.28",
+                "@vue/runtime-core": "3.5.28",
+                "@vue/shared": "3.5.28",
                 "csstype": "^3.2.3"
             }
         },
         "node_modules/@vue/server-renderer": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.27.tgz",
-            "integrity": "sha512-qOz/5thjeP1vAFc4+BY3Nr6wxyLhpeQgAE/8dDtKo6a6xdk+L4W46HDZgNmLOBUDEkFXV3G7pRiUqxjX0/2zWA==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.28.tgz",
+            "integrity": "sha512-pf+5ECKGj8fX95bNincbzJ6yp6nyzuLDhYZCeFxUNp8EBrQpPpQaLX3nNCp49+UbgbPun3CeVE+5CXVV1Xydfg==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-ssr": "3.5.27",
-                "@vue/shared": "3.5.27"
+                "@vue/compiler-ssr": "3.5.28",
+                "@vue/shared": "3.5.28"
             },
             "peerDependencies": {
-                "vue": "3.5.27"
+                "vue": "3.5.28"
             }
         },
         "node_modules/@vue/shared": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.27.tgz",
-            "integrity": "sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.28.tgz",
+            "integrity": "sha512-cfWa1fCGBxrvaHRhvV3Is0MgmrbSCxYTXCSCau2I0a1Xw1N1pHAvkWCiXPRAqjvToILvguNyEwjevUqAuBQWvQ==",
             "license": "MIT"
         },
         "node_modules/acorn": {
-            "version": "8.15.0",
-            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
-            "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+            "version": "8.16.0",
+            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+            "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
             "dev": true,
             "license": "MIT",
             "bin": {
@@ -2388,29 +2255,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/ansi-styles": {
-            "version": "4.3.0",
-            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-            "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "color-convert": "^2.0.1"
-            },
-            "engines": {
-                "node": ">=8"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-            }
-        },
-        "node_modules/argparse": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-            "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-            "dev": true,
-            "license": "Python-2.0"
-        },
         "node_modules/asynckit": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -2418,13 +2262,13 @@
             "license": "MIT"
         },
         "node_modules/axios": {
-            "version": "1.13.2",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
-            "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+            "version": "1.13.5",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
+            "integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
             "license": "MIT",
             "dependencies": {
-                "follow-redirects": "^1.15.6",
-                "form-data": "^4.0.4",
+                "follow-redirects": "^1.15.11",
+                "form-data": "^4.0.5",
                 "proxy-from-env": "^1.1.0"
             }
         },
@@ -2465,53 +2309,6 @@
                 "node": ">= 0.4"
             }
         },
-        "node_modules/callsites": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-            "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/chalk": {
-            "version": "4.1.2",
-            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "ansi-styles": "^4.1.0",
-                "supports-color": "^7.1.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/chalk/chalk?sponsor=1"
-            }
-        },
-        "node_modules/color-convert": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-            "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "color-name": "~1.1.4"
-            },
-            "engines": {
-                "node": ">=7.0.0"
-            }
-        },
-        "node_modules/color-name": {
-            "version": "1.1.4",
-            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/combined-stream": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2524,13 +2321,6 @@
                 "node": ">= 0.8"
             }
         },
-        "node_modules/concat-map": {
-            "version": "0.0.1",
-            "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-            "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/cross-spawn": {
             "version": "7.0.6",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2566,9 +2356,9 @@
             "license": "MIT"
         },
         "node_modules/daisyui": {
-            "version": "5.5.14",
-            "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.5.14.tgz",
-            "integrity": "sha512-L47rvw7I7hK68TA97VB8Ee0woHew+/ohR6Lx6Ah/krfISOqcG4My7poNpX5Mo5/ytMxiR40fEaz6njzDi7cuSg==",
+            "version": "5.5.19",
+            "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.5.19.tgz",
+            "integrity": "sha512-pbFAkl1VCEh/MPCeclKL61I/MqRIFFhNU7yiXoDDRapXN4/qNCoMxeCCswyxEEhqL5eiTTfwHvucFtOE71C9sA==",
             "license": "MIT",
             "funding": {
                 "url": "https://github.com/saadeghi/daisyui?sponsor=1"
@@ -2642,14 +2432,14 @@
             }
         },
         "node_modules/enhanced-resolve": {
-            "version": "5.18.4",
-            "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz",
-            "integrity": "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==",
+            "version": "5.19.0",
+            "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz",
+            "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "graceful-fs": "^4.2.4",
-                "tapable": "^2.2.0"
+                "tapable": "^2.3.0"
             },
             "engines": {
                 "node": ">=10.13.0"
@@ -2713,9 +2503,9 @@
             }
         },
         "node_modules/esbuild": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
-            "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
+            "integrity": "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==",
             "dev": true,
             "hasInstallScript": true,
             "license": "MIT",
@@ -2726,32 +2516,32 @@
                 "node": ">=18"
             },
             "optionalDependencies": {
-                "@esbuild/aix-ppc64": "0.27.2",
-                "@esbuild/android-arm": "0.27.2",
-                "@esbuild/android-arm64": "0.27.2",
-                "@esbuild/android-x64": "0.27.2",
-                "@esbuild/darwin-arm64": "0.27.2",
-                "@esbuild/darwin-x64": "0.27.2",
-                "@esbuild/freebsd-arm64": "0.27.2",
-                "@esbuild/freebsd-x64": "0.27.2",
-                "@esbuild/linux-arm": "0.27.2",
-                "@esbuild/linux-arm64": "0.27.2",
-                "@esbuild/linux-ia32": "0.27.2",
-                "@esbuild/linux-loong64": "0.27.2",
-                "@esbuild/linux-mips64el": "0.27.2",
-                "@esbuild/linux-ppc64": "0.27.2",
-                "@esbuild/linux-riscv64": "0.27.2",
-                "@esbuild/linux-s390x": "0.27.2",
-                "@esbuild/linux-x64": "0.27.2",
-                "@esbuild/netbsd-arm64": "0.27.2",
-                "@esbuild/netbsd-x64": "0.27.2",
-                "@esbuild/openbsd-arm64": "0.27.2",
-                "@esbuild/openbsd-x64": "0.27.2",
-                "@esbuild/openharmony-arm64": "0.27.2",
-                "@esbuild/sunos-x64": "0.27.2",
-                "@esbuild/win32-arm64": "0.27.2",
-                "@esbuild/win32-ia32": "0.27.2",
-                "@esbuild/win32-x64": "0.27.2"
+                "@esbuild/aix-ppc64": "0.27.3",
+                "@esbuild/android-arm": "0.27.3",
+                "@esbuild/android-arm64": "0.27.3",
+                "@esbuild/android-x64": "0.27.3",
+                "@esbuild/darwin-arm64": "0.27.3",
+                "@esbuild/darwin-x64": "0.27.3",
+                "@esbuild/freebsd-arm64": "0.27.3",
+                "@esbuild/freebsd-x64": "0.27.3",
+                "@esbuild/linux-arm": "0.27.3",
+                "@esbuild/linux-arm64": "0.27.3",
+                "@esbuild/linux-ia32": "0.27.3",
+                "@esbuild/linux-loong64": "0.27.3",
+                "@esbuild/linux-mips64el": "0.27.3",
+                "@esbuild/linux-ppc64": "0.27.3",
+                "@esbuild/linux-riscv64": "0.27.3",
+                "@esbuild/linux-s390x": "0.27.3",
+                "@esbuild/linux-x64": "0.27.3",
+                "@esbuild/netbsd-arm64": "0.27.3",
+                "@esbuild/netbsd-x64": "0.27.3",
+                "@esbuild/openbsd-arm64": "0.27.3",
+                "@esbuild/openbsd-x64": "0.27.3",
+                "@esbuild/openharmony-arm64": "0.27.3",
+                "@esbuild/sunos-x64": "0.27.3",
+                "@esbuild/win32-arm64": "0.27.3",
+                "@esbuild/win32-ia32": "0.27.3",
+                "@esbuild/win32-x64": "0.27.3"
             }
         },
         "node_modules/escape-string-regexp": {
@@ -2768,33 +2558,30 @@
             }
         },
         "node_modules/eslint": {
-            "version": "9.39.2",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
-            "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
+            "version": "10.0.1",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-10.0.1.tgz",
+            "integrity": "sha512-20MV9SUdeN6Jd84xESsKhRly+/vxI+hwvpBMA93s+9dAcjdCuCojn4IqUGS3lvVaqjVYGYHSRMCpeFtF2rQYxQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.8.0",
-                "@eslint-community/regexpp": "^4.12.1",
-                "@eslint/config-array": "^0.21.1",
-                "@eslint/config-helpers": "^0.4.2",
-                "@eslint/core": "^0.17.0",
-                "@eslint/eslintrc": "^3.3.1",
-                "@eslint/js": "9.39.2",
-                "@eslint/plugin-kit": "^0.4.1",
+                "@eslint-community/regexpp": "^4.12.2",
+                "@eslint/config-array": "^0.23.2",
+                "@eslint/config-helpers": "^0.5.2",
+                "@eslint/core": "^1.1.0",
+                "@eslint/plugin-kit": "^0.6.0",
                 "@humanfs/node": "^0.16.6",
                 "@humanwhocodes/module-importer": "^1.0.1",
                 "@humanwhocodes/retry": "^0.4.2",
                 "@types/estree": "^1.0.6",
                 "ajv": "^6.12.4",
-                "chalk": "^4.0.0",
                 "cross-spawn": "^7.0.6",
                 "debug": "^4.3.2",
                 "escape-string-regexp": "^4.0.0",
-                "eslint-scope": "^8.4.0",
-                "eslint-visitor-keys": "^4.2.1",
-                "espree": "^10.4.0",
-                "esquery": "^1.5.0",
+                "eslint-scope": "^9.1.1",
+                "eslint-visitor-keys": "^5.0.1",
+                "espree": "^11.1.1",
+                "esquery": "^1.7.0",
                 "esutils": "^2.0.2",
                 "fast-deep-equal": "^3.1.3",
                 "file-entry-cache": "^8.0.0",
@@ -2804,8 +2591,7 @@
                 "imurmurhash": "^0.1.4",
                 "is-glob": "^4.0.0",
                 "json-stable-stringify-without-jsonify": "^1.0.1",
-                "lodash.merge": "^4.6.2",
-                "minimatch": "^3.1.2",
+                "minimatch": "^10.2.1",
                 "natural-compare": "^1.4.0",
                 "optionator": "^0.9.3"
             },
@@ -2813,7 +2599,7 @@
                 "eslint": "bin/eslint.js"
             },
             "engines": {
-                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+                "node": "^20.19.0 || ^22.13.0 || >=24"
             },
             "funding": {
                 "url": "https://eslint.org/donate"
@@ -2828,9 +2614,9 @@
             }
         },
         "node_modules/eslint-plugin-vue": {
-            "version": "10.7.0",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-10.7.0.tgz",
-            "integrity": "sha512-r2XFCK4qlo1sxEoAMIoTTX0PZAdla0JJDt1fmYiworZUX67WeEGqm+JbyAg3M+pGiJ5U6Mp5WQbontXWtIW7TA==",
+            "version": "10.8.0",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-10.8.0.tgz",
+            "integrity": "sha512-f1J/tcbnrpgC8suPN5AtdJ5MQjuXbSU9pGRSSYAuF3SHoiYCOdEX6O22pLaRyLHXvDcOe+O5ENgc1owQ587agA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -2847,7 +2633,7 @@
             "peerDependencies": {
                 "@stylistic/eslint-plugin": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
                 "@typescript-eslint/parser": "^7.0.0 || ^8.0.0",
-                "eslint": "^8.57.0 || ^9.0.0",
+                "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
                 "vue-eslint-parser": "^10.0.0"
             },
             "peerDependenciesMeta": {
@@ -2860,17 +2646,19 @@
             }
         },
         "node_modules/eslint-scope": {
-            "version": "8.4.0",
-            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
-            "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+            "version": "9.1.1",
+            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-9.1.1.tgz",
+            "integrity": "sha512-GaUN0sWim5qc8KVErfPBWmc31LEsOkrUJbvJZV+xuL3u2phMUK4HIvXlWAakfC8W4nzlK+chPEAkYOYb5ZScIw==",
             "dev": true,
             "license": "BSD-2-Clause",
             "dependencies": {
+                "@types/esrecurse": "^4.3.1",
+                "@types/estree": "^1.0.8",
                 "esrecurse": "^4.3.0",
                 "estraverse": "^5.2.0"
             },
             "engines": {
-                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+                "node": "^20.19.0 || ^22.13.0 || >=24"
             },
             "funding": {
                 "url": "https://opencollective.com/eslint"
@@ -2889,25 +2677,40 @@
                 "url": "https://opencollective.com/eslint"
             }
         },
+        "node_modules/eslint/node_modules/balanced-match": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.2.tgz",
+            "integrity": "sha512-x0K50QvKQ97fdEz2kPehIerj+YTeptKF9hyYkKf6egnwmMWAkADiO0QCzSp0R5xN8FTZgYaBfSaue46Ej62nMg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "jackspeak": "^4.2.3"
+            },
+            "engines": {
+                "node": "20 || >=22"
+            }
+        },
         "node_modules/eslint/node_modules/brace-expansion": {
-            "version": "1.1.12",
-            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-            "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+            "version": "5.0.2",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.2.tgz",
+            "integrity": "sha512-Pdk8c9poy+YhOgVWw1JNN22/HcivgKWwpxKq04M/jTmHyCZn12WPJebZxdjSa5TmBqISrUSgNYU3eRORljfCCw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "balanced-match": "^1.0.0",
-                "concat-map": "0.0.1"
+                "balanced-match": "^4.0.2"
+            },
+            "engines": {
+                "node": "20 || >=22"
             }
         },
         "node_modules/eslint/node_modules/eslint-visitor-keys": {
-            "version": "4.2.1",
-            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
-            "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+            "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
             "dev": true,
             "license": "Apache-2.0",
             "engines": {
-                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+                "node": "^20.19.0 || ^22.13.0 || >=24"
             },
             "funding": {
                 "url": "https://opencollective.com/eslint"
@@ -2924,44 +2727,47 @@
             }
         },
         "node_modules/eslint/node_modules/minimatch": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "version": "10.2.1",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.1.tgz",
+            "integrity": "sha512-MClCe8IL5nRRmawL6ib/eT4oLyeKMGCghibcDWK+J0hh0Q8kqSdia6BvbRMVk6mPa6WqUa5uR2oxt6C5jd533A==",
             "dev": true,
-            "license": "ISC",
+            "license": "BlueOak-1.0.0",
             "dependencies": {
-                "brace-expansion": "^1.1.7"
+                "brace-expansion": "^5.0.2"
             },
             "engines": {
-                "node": "*"
+                "node": "20 || >=22"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
             }
         },
         "node_modules/espree": {
-            "version": "10.4.0",
-            "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
-            "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+            "version": "11.1.1",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-11.1.1.tgz",
+            "integrity": "sha512-AVHPqQoZYc+RUM4/3Ly5udlZY/U4LS8pIG05jEjWM2lQMU/oaZ7qshzAl2YP1tfNmXfftH3ohurfwNAug+MnsQ==",
             "dev": true,
             "license": "BSD-2-Clause",
             "dependencies": {
-                "acorn": "^8.15.0",
+                "acorn": "^8.16.0",
                 "acorn-jsx": "^5.3.2",
-                "eslint-visitor-keys": "^4.2.1"
+                "eslint-visitor-keys": "^5.0.1"
             },
             "engines": {
-                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+                "node": "^20.19.0 || ^22.13.0 || >=24"
             },
             "funding": {
                 "url": "https://opencollective.com/eslint"
             }
         },
         "node_modules/espree/node_modules/eslint-visitor-keys": {
-            "version": "4.2.1",
-            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
-            "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+            "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
             "dev": true,
             "license": "Apache-2.0",
             "engines": {
-                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+                "node": "^20.19.0 || ^22.13.0 || >=24"
             },
             "funding": {
                 "url": "https://opencollective.com/eslint"
@@ -3023,6 +2829,7 @@
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
             "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/fast-json-stable-stringify": {
@@ -3218,19 +3025,6 @@
                 "node": ">=10.13.0"
             }
         },
-        "node_modules/globals": {
-            "version": "14.0.0",
-            "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
-            "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=18"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/gopd": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -3256,16 +3050,6 @@
             "integrity": "sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==",
             "license": "Standard 'no charge' license: https://gsap.com/standard-license."
         },
-        "node_modules/has-flag": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-            "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=8"
-            }
-        },
         "node_modules/has-symbols": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -3315,23 +3099,6 @@
                 "node": ">= 4"
             }
         },
-        "node_modules/import-fresh": {
-            "version": "3.3.1",
-            "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
-            "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "parent-module": "^1.0.0",
-                "resolve-from": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=6"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/imurmurhash": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -3372,6 +3139,22 @@
             "dev": true,
             "license": "ISC"
         },
+        "node_modules/jackspeak": {
+            "version": "4.2.3",
+            "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.2.3.tgz",
+            "integrity": "sha512-ykkVRwrYvFm1nb2AJfKKYPr0emF6IiXDYUaFx4Zn9ZuIH7MrzEZ3sD5RlqGXNRpHtvUHJyOnCEFxOlNDtGo7wg==",
+            "dev": true,
+            "license": "BlueOak-1.0.0",
+            "dependencies": {
+                "@isaacs/cliui": "^9.0.0"
+            },
+            "engines": {
+                "node": "20 || >=22"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
         "node_modules/jiti": {
             "version": "2.6.1",
             "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
@@ -3382,19 +3165,6 @@
                 "jiti": "lib/jiti-cli.mjs"
             }
         },
-        "node_modules/js-yaml": {
-            "version": "4.1.1",
-            "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
-            "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "argparse": "^2.0.1"
-            },
-            "bin": {
-                "js-yaml": "bin/js-yaml.js"
-            }
-        },
         "node_modules/json-buffer": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -3426,15 +3196,6 @@
                 "json-buffer": "3.0.1"
             }
         },
-        "node_modules/klona": {
-            "version": "2.0.6",
-            "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
-            "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
-            "license": "MIT",
-            "engines": {
-                "node": ">= 8"
-            }
-        },
         "node_modules/levn": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -3450,9 +3211,9 @@
             }
         },
         "node_modules/lightningcss": {
-            "version": "1.30.2",
-            "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
-            "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+            "version": "1.31.1",
+            "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.31.1.tgz",
+            "integrity": "sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==",
             "dev": true,
             "license": "MPL-2.0",
             "dependencies": {
@@ -3466,23 +3227,23 @@
                 "url": "https://opencollective.com/parcel"
             },
             "optionalDependencies": {
-                "lightningcss-android-arm64": "1.30.2",
-                "lightningcss-darwin-arm64": "1.30.2",
-                "lightningcss-darwin-x64": "1.30.2",
-                "lightningcss-freebsd-x64": "1.30.2",
-                "lightningcss-linux-arm-gnueabihf": "1.30.2",
-                "lightningcss-linux-arm64-gnu": "1.30.2",
-                "lightningcss-linux-arm64-musl": "1.30.2",
-                "lightningcss-linux-x64-gnu": "1.30.2",
-                "lightningcss-linux-x64-musl": "1.30.2",
-                "lightningcss-win32-arm64-msvc": "1.30.2",
-                "lightningcss-win32-x64-msvc": "1.30.2"
+                "lightningcss-android-arm64": "1.31.1",
+                "lightningcss-darwin-arm64": "1.31.1",
+                "lightningcss-darwin-x64": "1.31.1",
+                "lightningcss-freebsd-x64": "1.31.1",
+                "lightningcss-linux-arm-gnueabihf": "1.31.1",
+                "lightningcss-linux-arm64-gnu": "1.31.1",
+                "lightningcss-linux-arm64-musl": "1.31.1",
+                "lightningcss-linux-x64-gnu": "1.31.1",
+                "lightningcss-linux-x64-musl": "1.31.1",
+                "lightningcss-win32-arm64-msvc": "1.31.1",
+                "lightningcss-win32-x64-msvc": "1.31.1"
             }
         },
         "node_modules/lightningcss-android-arm64": {
-            "version": "1.30.2",
-            "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
-            "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+            "version": "1.31.1",
+            "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.31.1.tgz",
+            "integrity": "sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==",
             "cpu": [
                 "arm64"
             ],
@@ -3501,9 +3262,9 @@
             }
         },
         "node_modules/lightningcss-darwin-arm64": {
-            "version": "1.30.2",
-            "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
-            "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+            "version": "1.31.1",
+            "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.31.1.tgz",
+            "integrity": "sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==",
             "cpu": [
                 "arm64"
             ],
@@ -3522,9 +3283,9 @@
             }
         },
         "node_modules/lightningcss-darwin-x64": {
-            "version": "1.30.2",
-            "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
-            "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+            "version": "1.31.1",
+            "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.31.1.tgz",
+            "integrity": "sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==",
             "cpu": [
                 "x64"
             ],
@@ -3543,9 +3304,9 @@
             }
         },
         "node_modules/lightningcss-freebsd-x64": {
-            "version": "1.30.2",
-            "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
-            "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+            "version": "1.31.1",
+            "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.31.1.tgz",
+            "integrity": "sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==",
             "cpu": [
                 "x64"
             ],
@@ -3564,9 +3325,9 @@
             }
         },
         "node_modules/lightningcss-linux-arm-gnueabihf": {
-            "version": "1.30.2",
-            "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
-            "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+            "version": "1.31.1",
+            "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.31.1.tgz",
+            "integrity": "sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==",
             "cpu": [
                 "arm"
             ],
@@ -3585,9 +3346,9 @@
             }
         },
         "node_modules/lightningcss-linux-arm64-gnu": {
-            "version": "1.30.2",
-            "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
-            "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+            "version": "1.31.1",
+            "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.31.1.tgz",
+            "integrity": "sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==",
             "cpu": [
                 "arm64"
             ],
@@ -3606,9 +3367,9 @@
             }
         },
         "node_modules/lightningcss-linux-arm64-musl": {
-            "version": "1.30.2",
-            "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
-            "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+            "version": "1.31.1",
+            "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.31.1.tgz",
+            "integrity": "sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==",
             "cpu": [
                 "arm64"
             ],
@@ -3627,9 +3388,9 @@
             }
         },
         "node_modules/lightningcss-linux-x64-gnu": {
-            "version": "1.30.2",
-            "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
-            "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+            "version": "1.31.1",
+            "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.31.1.tgz",
+            "integrity": "sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==",
             "cpu": [
                 "x64"
             ],
@@ -3648,9 +3409,9 @@
             }
         },
         "node_modules/lightningcss-linux-x64-musl": {
-            "version": "1.30.2",
-            "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
-            "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+            "version": "1.31.1",
+            "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.31.1.tgz",
+            "integrity": "sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==",
             "cpu": [
                 "x64"
             ],
@@ -3669,9 +3430,9 @@
             }
         },
         "node_modules/lightningcss-win32-arm64-msvc": {
-            "version": "1.30.2",
-            "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
-            "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+            "version": "1.31.1",
+            "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.31.1.tgz",
+            "integrity": "sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==",
             "cpu": [
                 "arm64"
             ],
@@ -3690,9 +3451,9 @@
             }
         },
         "node_modules/lightningcss-win32-x64-msvc": {
-            "version": "1.30.2",
-            "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
-            "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+            "version": "1.31.1",
+            "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.31.1.tgz",
+            "integrity": "sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==",
             "cpu": [
                 "x64"
             ],
@@ -3726,23 +3487,10 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/lodash.merge": {
-            "version": "4.6.2",
-            "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-            "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-            "dev": true,
-            "license": "MIT"
-        },
-        "node_modules/lottie-web": {
-            "version": "5.12.2",
-            "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
-            "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==",
-            "license": "MIT"
-        },
         "node_modules/lucide-vue-next": {
-            "version": "0.562.0",
-            "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.562.0.tgz",
-            "integrity": "sha512-LN0BLGKMFulv0lnfK29r14DcngRUhIqdcaL0zXTt2o0oS9odlrjCGaU3/X9hIihOjjN8l8e+Y9G/famcNYaI7Q==",
+            "version": "0.575.0",
+            "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.575.0.tgz",
+            "integrity": "sha512-UHzA3cYMCgBLyGay5R9IQaidwV0NLocx7cIBnFt8vJ9Xhl6IM/oKD0fUhoCUuouFta15SX1rLXVoko9s3TzWMA==",
             "license": "ISC",
             "peerDependencies": {
                 "vue": ">=3.0.1"
@@ -3927,19 +3675,6 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/parent-module": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-            "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "callsites": "^3.0.0"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
         "node_modules/path-browserify": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -4038,6 +3773,22 @@
                 "node": ">= 0.8.0"
             }
         },
+        "node_modules/prettier": {
+            "version": "3.8.1",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+            "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "prettier": "bin/prettier.cjs"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
+            }
+        },
         "node_modules/proxy-from-env": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -4054,20 +3805,10 @@
                 "node": ">=6"
             }
         },
-        "node_modules/resolve-from": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-            "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=4"
-            }
-        },
         "node_modules/rollup": {
-            "version": "4.56.0",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.56.0.tgz",
-            "integrity": "sha512-9FwVqlgUHzbXtDg9RCMgodF3Ua4Na6Gau+Sdt9vyCN4RhHfVKX2DCHy3BjMLTDd47ITDhYAnTwGulWTblJSDLg==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
+            "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -4081,38 +3822,38 @@
                 "npm": ">=8.0.0"
             },
             "optionalDependencies": {
-                "@rollup/rollup-android-arm-eabi": "4.56.0",
-                "@rollup/rollup-android-arm64": "4.56.0",
-                "@rollup/rollup-darwin-arm64": "4.56.0",
-                "@rollup/rollup-darwin-x64": "4.56.0",
-                "@rollup/rollup-freebsd-arm64": "4.56.0",
-                "@rollup/rollup-freebsd-x64": "4.56.0",
-                "@rollup/rollup-linux-arm-gnueabihf": "4.56.0",
-                "@rollup/rollup-linux-arm-musleabihf": "4.56.0",
-                "@rollup/rollup-linux-arm64-gnu": "4.56.0",
-                "@rollup/rollup-linux-arm64-musl": "4.56.0",
-                "@rollup/rollup-linux-loong64-gnu": "4.56.0",
-                "@rollup/rollup-linux-loong64-musl": "4.56.0",
-                "@rollup/rollup-linux-ppc64-gnu": "4.56.0",
-                "@rollup/rollup-linux-ppc64-musl": "4.56.0",
-                "@rollup/rollup-linux-riscv64-gnu": "4.56.0",
-                "@rollup/rollup-linux-riscv64-musl": "4.56.0",
-                "@rollup/rollup-linux-s390x-gnu": "4.56.0",
-                "@rollup/rollup-linux-x64-gnu": "4.56.0",
-                "@rollup/rollup-linux-x64-musl": "4.56.0",
-                "@rollup/rollup-openbsd-x64": "4.56.0",
-                "@rollup/rollup-openharmony-arm64": "4.56.0",
-                "@rollup/rollup-win32-arm64-msvc": "4.56.0",
-                "@rollup/rollup-win32-ia32-msvc": "4.56.0",
-                "@rollup/rollup-win32-x64-gnu": "4.56.0",
-                "@rollup/rollup-win32-x64-msvc": "4.56.0",
+                "@rollup/rollup-android-arm-eabi": "4.57.1",
+                "@rollup/rollup-android-arm64": "4.57.1",
+                "@rollup/rollup-darwin-arm64": "4.57.1",
+                "@rollup/rollup-darwin-x64": "4.57.1",
+                "@rollup/rollup-freebsd-arm64": "4.57.1",
+                "@rollup/rollup-freebsd-x64": "4.57.1",
+                "@rollup/rollup-linux-arm-gnueabihf": "4.57.1",
+                "@rollup/rollup-linux-arm-musleabihf": "4.57.1",
+                "@rollup/rollup-linux-arm64-gnu": "4.57.1",
+                "@rollup/rollup-linux-arm64-musl": "4.57.1",
+                "@rollup/rollup-linux-loong64-gnu": "4.57.1",
+                "@rollup/rollup-linux-loong64-musl": "4.57.1",
+                "@rollup/rollup-linux-ppc64-gnu": "4.57.1",
+                "@rollup/rollup-linux-ppc64-musl": "4.57.1",
+                "@rollup/rollup-linux-riscv64-gnu": "4.57.1",
+                "@rollup/rollup-linux-riscv64-musl": "4.57.1",
+                "@rollup/rollup-linux-s390x-gnu": "4.57.1",
+                "@rollup/rollup-linux-x64-gnu": "4.57.1",
+                "@rollup/rollup-linux-x64-musl": "4.57.1",
+                "@rollup/rollup-openbsd-x64": "4.57.1",
+                "@rollup/rollup-openharmony-arm64": "4.57.1",
+                "@rollup/rollup-win32-arm64-msvc": "4.57.1",
+                "@rollup/rollup-win32-ia32-msvc": "4.57.1",
+                "@rollup/rollup-win32-x64-gnu": "4.57.1",
+                "@rollup/rollup-win32-x64-msvc": "4.57.1",
                 "fsevents": "~2.3.2"
             }
         },
         "node_modules/semver": {
-            "version": "7.7.3",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-            "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+            "version": "7.7.4",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+            "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
             "dev": true,
             "license": "ISC",
             "bin": {
@@ -4160,36 +3901,10 @@
             "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
             "license": "MIT"
         },
-        "node_modules/strip-json-comments": {
-            "version": "3.1.1",
-            "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-            "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=8"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/supports-color": {
-            "version": "7.2.0",
-            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-            "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "has-flag": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
         "node_modules/tailwindcss": {
-            "version": "4.1.18",
-            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
-            "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.0.tgz",
+            "integrity": "sha512-yYzTZ4++b7fNYxFfpnberEEKu43w44aqDMNM9MHMmcKuCH7lL8jJ4yJ7LGHv7rSwiqM0nkiobF9I6cLlpS2P7Q==",
             "dev": true,
             "license": "MIT"
         },
@@ -4265,9 +3980,9 @@
             }
         },
         "node_modules/undici-types": {
-            "version": "7.16.0",
-            "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
-            "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+            "version": "7.18.2",
+            "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+            "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
             "dev": true,
             "license": "MIT"
         },
@@ -4371,16 +4086,16 @@
             "license": "MIT"
         },
         "node_modules/vue": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.27.tgz",
-            "integrity": "sha512-aJ/UtoEyFySPBGarREmN4z6qNKpbEguYHMmXSiOGk69czc+zhs0NF6tEFrY8TZKAl8N/LYAkd4JHVd5E/AsSmw==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.28.tgz",
+            "integrity": "sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-dom": "3.5.27",
-                "@vue/compiler-sfc": "3.5.27",
-                "@vue/runtime-dom": "3.5.27",
-                "@vue/server-renderer": "3.5.27",
-                "@vue/shared": "3.5.27"
+                "@vue/compiler-dom": "3.5.28",
+                "@vue/compiler-sfc": "3.5.28",
+                "@vue/runtime-dom": "3.5.28",
+                "@vue/server-renderer": "3.5.28",
+                "@vue/shared": "3.5.28"
             },
             "peerDependencies": {
                 "typescript": "*"
@@ -4392,17 +4107,16 @@
             }
         },
         "node_modules/vue-eslint-parser": {
-            "version": "10.2.0",
-            "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-10.2.0.tgz",
-            "integrity": "sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==",
+            "version": "10.4.0",
+            "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-10.4.0.tgz",
+            "integrity": "sha512-Vxi9pJdbN3ZnVGLODVtZ7y4Y2kzAAE2Cm0CZ3ZDRvydVYxZ6VrnBhLikBsRS+dpwj4Jv4UCv21PTEwF5rQ9WXg==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "debug": "^4.4.0",
-                "eslint-scope": "^8.2.0",
-                "eslint-visitor-keys": "^4.2.0",
-                "espree": "^10.3.0",
+                "eslint-scope": "^8.2.0 || ^9.0.0",
+                "eslint-visitor-keys": "^4.2.0 || ^5.0.0",
+                "espree": "^10.3.0 || ^11.0.0",
                 "esquery": "^1.6.0",
                 "semver": "^7.6.3"
             },
@@ -4413,18 +4127,17 @@
                 "url": "https://github.com/sponsors/mysticatea"
             },
             "peerDependencies": {
-                "eslint": "^8.57.0 || ^9.0.0"
+                "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0"
             }
         },
         "node_modules/vue-eslint-parser/node_modules/eslint-visitor-keys": {
-            "version": "4.2.1",
-            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
-            "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.0.tgz",
+            "integrity": "sha512-A0XeIi7CXU7nPlfHS9loMYEKxUaONu/hTEzHTGba9Huu94Cq1hPivf+DE5erJozZOky0LfvXAyrV/tcswpLI0Q==",
             "dev": true,
             "license": "Apache-2.0",
-            "peer": true,
             "engines": {
-                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+                "node": "^20.19.0 || ^22.13.0 || >=24"
             },
             "funding": {
                 "url": "https://opencollective.com/eslint"
@@ -4451,14 +4164,14 @@
             }
         },
         "node_modules/vue-tsc": {
-            "version": "3.2.2",
-            "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.2.2.tgz",
-            "integrity": "sha512-r9YSia/VgGwmbbfC06hDdAatH634XJ9nVl6Zrnz1iK4ucp8Wu78kawplXnIDa3MSu1XdQQePTHLXYwPDWn+nyQ==",
+            "version": "3.2.5",
+            "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.2.5.tgz",
+            "integrity": "sha512-/htfTCMluQ+P2FISGAooul8kO4JMheOTCbCy4M6dYnYYjqLe3BExZudAua6MSIKSFYQtFOYAll7XobYwcpokGA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@volar/typescript": "2.4.27",
-                "@vue/language-core": "3.2.2"
+                "@volar/typescript": "2.4.28",
+                "@vue/language-core": "3.2.5"
             },
             "bin": {
                 "vue-tsc": "bin/vue-tsc.js"
@@ -4467,23 +4180,6 @@
                 "typescript": ">=5.0.0"
             }
         },
-        "node_modules/vue3-lottie": {
-            "version": "3.3.1",
-            "resolved": "https://registry.npmjs.org/vue3-lottie/-/vue3-lottie-3.3.1.tgz",
-            "integrity": "sha512-60uQmx4eefi3FdPjAxWnblrgJJjnVTXUA6e4BAI3jGzgOSR76pyzL1rrWDiyPmMFo4mTw4wGTW6Gbkg3HR1mYw==",
-            "license": "MIT",
-            "dependencies": {
-                "fast-deep-equal": "^3.1.3",
-                "klona": "^2.0.6",
-                "lottie-web": "5.12.2"
-            },
-            "engines": {
-                "node": ">=12"
-            },
-            "peerDependencies": {
-                "vue": "^3.2"
-            }
-        },
         "node_modules/which": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index a8156fc5..bc6e19e1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "collapseloader",
     "private": true,
-    "version": "0.2.7",
+    "version": "0.2.8",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -12,37 +12,39 @@
         "tauri:dev": "tauri dev",
         "check": "vue-tsc --noEmit",
         "lint": "eslint --ext .ts,.tsx,.vue src",
-        "lint:fix": "eslint --ext .ts,.tsx,.vue src --fix"
+        "lint:fix": "eslint --ext .ts,.tsx,.vue src --fix",
+        "format": "prettier --write \"src/**/*\""
     },
     "dependencies": {
         "@guolao/vue-monaco-editor": "1.6.0",
-        "@sentry/vue": "^10.36.0",
-        "@tauri-apps/api": "2.9.1",
+        "@stomp/stompjs": "^7.3.0",
+        "@tauri-apps/api": "2.10.1",
         "@tauri-apps/plugin-dialog": "2.6.0",
         "@tauri-apps/plugin-fs": "2.4.5",
         "@tauri-apps/plugin-notification": "2.3.3",
         "@tauri-apps/plugin-opener": "2.5.3",
-        "axios": "1.13.2",
-        "daisyui": "5.5.14",
+        "axios": "1.13.5",
+        "daisyui": "5.5.19",
         "gsap": "3.14.2",
-        "lucide-vue-next": "0.562.0",
+        "lucide-vue-next": "0.575.0",
         "monaco-editor": "^0.55.1",
-        "vue": "3.5.27",
-        "vue-i18n": "11.2.8",
-        "vue3-lottie": "3.3.1"
+        "vue": "3.5.28",
+        "vue-i18n": "11.2.8"
     },
     "devDependencies": {
-        "@tailwindcss/vite": "4.1.18",
-        "@tauri-apps/cli": "2.9.6",
-        "@types/node": "25.0.10",
-        "@typescript-eslint/eslint-plugin": "8.53.1",
-        "@typescript-eslint/parser": "8.53.1",
-        "@vitejs/plugin-vue": "6.0.3",
-        "eslint": "9.39.2",
-        "eslint-plugin-vue": "10.7.0",
-        "tailwindcss": "4.1.18",
+        "@tailwindcss/vite": "4.2.0",
+        "@tauri-apps/cli": "2.10.0",
+        "@types/node": "25.3.0",
+        "@typescript-eslint/eslint-plugin": "8.56.0",
+        "@typescript-eslint/parser": "8.56.0",
+        "@vitejs/plugin-vue": "6.0.4",
+        "eslint": "^10.0.1",
+        "eslint-plugin-vue": "10.8.0",
+        "vue-eslint-parser": "^10.4.0",
+        "prettier": "3.8.1",
+        "tailwindcss": "4.2.0",
         "typescript": "5.9.3",
         "vite": "7.3.1",
-        "vue-tsc": "3.2.2"
+        "vue-tsc": "3.2.5"
     }
-}
+}
\ No newline at end of file
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 55768d44..68bfcb22 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -16,7 +16,7 @@ checksum = "b169f7a6d4742236a0a00c541b845991d0ac43e546831af1249753ab4c3aa3a0"
 dependencies = [
  "cfg-if",
  "cipher",
- "cpufeatures",
+ "cpufeatures 0.2.17",
 ]
 
 [[package]]
@@ -54,9 +54,9 @@ dependencies = [
 
 [[package]]
 name = "anyhow"
-version = "1.0.100"
+version = "1.0.101"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a23eb6b1614318a8071c9b2521f36b424b2c83db5eb3a0fead4a6c0809af6e61"
+checksum = "5f0e0fee31ef5ed1ba1316088939cea399010ed7731dba877ed44aeb407a75ea"
 
 [[package]]
 name = "ascii"
@@ -157,7 +157,7 @@ checksum = "3b43422f69d8ff38f95f1b2bb76517c91589a924d1559a0e935d7c8ce0274c11"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -192,7 +192,7 @@ checksum = "9035ad2d096bed7955a320ee7e2230574d28fd3c3a0f186cbea1ff3c7eed5dbb"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -232,9 +232,9 @@ checksum = "c08606f8c3cbf4ce6ec8e28fb0014a2c086708fe954eaa885384a6165172e7e8"
 
 [[package]]
 name = "aws-lc-rs"
-version = "1.15.3"
+version = "1.15.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e84ce723ab67259cfeb9877c6a639ee9eb7a27b28123abd71db7f0d5d0cc9d86"
+checksum = "7b7b6141e96a8c160799cc2d5adecd5cbbe5054cb8c7c4af53da0f83bb7ad256"
 dependencies = [
  "aws-lc-sys",
  "zeroize",
@@ -242,9 +242,9 @@ dependencies = [
 
 [[package]]
 name = "aws-lc-sys"
-version = "0.36.0"
+version = "0.37.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "43a442ece363113bd4bd4c8b18977a7798dd4d3c3383f34fb61936960e8f4ad8"
+checksum = "5c34dda4df7017c8db52132f0f8a2e0f8161649d15723ed63fc00c82d0f2081a"
 dependencies = [
  "cc",
  "cmake",
@@ -272,9 +272,9 @@ checksum = "bef38d45163c2f1dde094a7dfd33ccf595c92905c8f8f4fdc18d06fb1037718a"
 
 [[package]]
 name = "bitflags"
-version = "2.10.0"
+version = "2.11.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "812e12b5285cc515a9c72a5c1d3b6d46a19dac5acfef5265968c166106e31dd3"
+checksum = "843867be96c8daad0d758b57df9392b6d8d271134fce549de6ce169ff98a92af"
 dependencies = [
  "serde_core",
 ]
@@ -288,15 +288,6 @@ dependencies = [
  "generic-array",
 ]
 
-[[package]]
-name = "block-buffer"
-version = "0.11.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "96eb4cdd6cf1b31d671e9efe75c5d1ec614776856cefbe109ca373554a6d514f"
-dependencies = [
- "hybrid-array",
-]
-
 [[package]]
 name = "block2"
 version = "0.6.2"
@@ -359,9 +350,9 @@ checksum = "5dd9dc738b7a8311c7ade152424974d8115f2cdad61e8dab8dac9f2362298510"
 
 [[package]]
 name = "bytemuck"
-version = "1.24.0"
+version = "1.25.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1fbdf580320f38b612e485521afda1ee26d10cc9884efaaa750d383e13e3c5f4"
+checksum = "c8efb64bd706a16a1bdde310ae86b351e4d21550d98d056f22f8a7f7a2183fec"
 
 [[package]]
 name = "byteorder"
@@ -371,9 +362,9 @@ checksum = "1fd0f2584146f6f2ef48085050886acf353beff7305ebd1ae69500e27c67f64b"
 
 [[package]]
 name = "bytes"
-version = "1.11.0"
+version = "1.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b35204fbdc0b3f4446b89fc1ac2cf84a8a68971995d0bf2e925ec7cd960f9cb3"
+checksum = "1e748733b7cbc798e1434b6ac524f0c1ff2ab456fe201501e6497c8417a4fc33"
 dependencies = [
  "serde",
 ]
@@ -393,7 +384,7 @@ version = "0.18.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8ca26ef0159422fb77631dc9d17b102f253b876fe1586b03b803e63a309b4ee2"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "cairo-sys-rs",
  "glib",
  "libc",
@@ -456,9 +447,9 @@ dependencies = [
 
 [[package]]
 name = "cc"
-version = "1.2.53"
+version = "1.2.55"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "755d2fce177175ffca841e9a06afdb2c4ab0f593d53b4dee48147dfaade85932"
+checksum = "47b26a0954ae34af09b50f0de26458fa95369a0d478d8236d3f93082b219bd29"
 dependencies = [
  "find-msvc-tools",
  "jobserver",
@@ -480,7 +471,7 @@ checksum = "d38f2da7a0a2c4ccf0065be06397cc26a81f4e528be095826eee9d4adbb8c60f"
 dependencies = [
  "byteorder",
  "fnv",
- "uuid 1.19.0",
+ "uuid 1.21.0",
 ]
 
 [[package]]
@@ -505,6 +496,17 @@ version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "613afe47fcd5fac7ccf1db93babcb082c5994d996f20b8b159f2ad1658eb5724"
 
+[[package]]
+name = "chacha20"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6f8d983286843e49675a4b7a2d174efe136dc93a18d69130dd18198a6c167601"
+dependencies = [
+ "cfg-if",
+ "cpufeatures 0.3.0",
+ "rand_core 0.10.0",
+]
+
 [[package]]
 name = "chrono"
 version = "0.4.43"
@@ -525,7 +527,7 @@ version = "0.4.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "773f3b9af64447d2ce9850330c473515014aa235e6a783b02db81ff39e4a3dad"
 dependencies = [
- "crypto-common 0.1.7",
+ "crypto-common",
  "inout",
 ]
 
@@ -540,7 +542,7 @@ dependencies = [
 
 [[package]]
 name = "collapseloader"
-version = "0.2.7"
+version = "0.2.8"
 dependencies = [
  "base64 0.22.1",
  "chrono",
@@ -553,12 +555,12 @@ dependencies = [
  "open",
  "opener",
  "paste",
- "rand 0.9.2",
- "reqwest 0.13.1",
+ "rand 0.10.0",
+ "reqwest",
  "semver",
  "serde",
  "serde_json",
- "sha2 0.11.0-rc.3",
+ "sha2",
  "socket2",
  "sysinfo",
  "tauri",
@@ -571,7 +573,7 @@ dependencies = [
  "tauri-plugin-single-instance",
  "thiserror 2.0.18",
  "tokio",
- "uuid 1.19.0",
+ "uuid 1.21.0",
  "windows 0.62.2",
  "winreg",
  "zip",
@@ -605,12 +607,6 @@ dependencies = [
  "crossbeam-utils",
 ]
 
-[[package]]
-name = "const-oid"
-version = "0.10.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a6ef517f0926dd24a1582492c791b6a4818a4d94e789a334894aa15b0d12f55c"
-
 [[package]]
 name = "const-random"
 version = "0.1.18"
@@ -633,9 +629,9 @@ dependencies = [
 
 [[package]]
 name = "constant_time_eq"
-version = "0.3.1"
+version = "0.4.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7c74b8349d32d297c9134b8c88677813a227df8f779daa29bfc29c183fe3dca6"
+checksum = "3d52eff69cd5e647efe296129160853a42795992097e8af39800e1060caeea9b"
 
 [[package]]
 name = "convert_case"
@@ -685,7 +681,7 @@ version = "0.24.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fa95a34622365fa5bbf40b20b75dba8dfa8c94c734aea8ac9a5ca38af14316f1"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "core-foundation 0.10.1",
  "core-graphics-types",
  "foreign-types",
@@ -698,7 +694,7 @@ version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3d44a101f213f6c4cdc1853d4b78aef6db6bdfa3468798cc1d9912f4735013eb"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "core-foundation 0.10.1",
  "libc",
 ]
@@ -713,20 +709,14 @@ dependencies = [
 ]
 
 [[package]]
-name = "crc"
-version = "3.3.0"
+name = "cpufeatures"
+version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9710d3b3739c2e349eb44fe848ad0b7c8cb1e42bd87ee49371df2f7acaf3e675"
+checksum = "8b2a41393f66f16b0823bb79094d54ac5fbd34ab292ddafb9a0456ac9f87d201"
 dependencies = [
- "crc-catalog",
+ "libc",
 ]
 
-[[package]]
-name = "crc-catalog"
-version = "2.4.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "19d374276b40fb8bbdee95aef7c7fa6b5316ec764510eb64b8dd0e2ed0d7e7f5"
-
 [[package]]
 name = "crc32fast"
 version = "1.5.0"
@@ -767,15 +757,6 @@ dependencies = [
  "typenum",
 ]
 
-[[package]]
-name = "crypto-common"
-version = "0.2.0-rc.11"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7d2bcc93d5cde6659e8649fc412894417ebc14dee54cfc6ee439c683a4a58342"
-dependencies = [
- "hybrid-array",
-]
-
 [[package]]
 name = "cssparser"
 version = "0.29.6"
@@ -800,7 +781,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "13b588ba4ac1a99f7f2964d24b3d896ddc6bf847ee3855dbd4366f058cfcd331"
 dependencies = [
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -810,7 +791,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "32a2785755761f3ddc1492979ce1e48d2c00d09311c39e4466429188f3dd6501"
 dependencies = [
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -834,7 +815,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "strsim",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -845,7 +826,7 @@ checksum = "d38308df82d1080de0afee5d069fa14b0326a88c14f15c5ccda35b4a6c414c81"
 dependencies = [
  "darling_core",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -874,7 +855,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "rustc_version",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -883,22 +864,11 @@ version = "0.10.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9ed9a281f7bc9b7576e61468ba615a66a5c8cfdff42420a70aa82701a3b1e292"
 dependencies = [
- "block-buffer 0.10.4",
- "crypto-common 0.1.7",
+ "block-buffer",
+ "crypto-common",
  "subtle",
 ]
 
-[[package]]
-name = "digest"
-version = "0.11.0-rc.7"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ca14c221bd9052fd2da7c34a2eeb5ae54732db28be47c35937be71793d675422"
-dependencies = [
- "block-buffer 0.11.0",
- "const-oid",
- "crypto-common 0.2.0-rc.11",
-]
-
 [[package]]
 name = "dirs"
 version = "6.0.0"
@@ -922,9 +892,9 @@ dependencies = [
 
 [[package]]
 name = "discord-rich-presence"
-version = "1.0.0"
+version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ead3c5edc7e048c317c6fc4a7e24aff0c7e4c136918e2ba38106a385b2cc53a5"
+checksum = "90c55d69cab17c19677ce3a5f8face993a9e6eaf847fecac3547f3a3ff4a2494"
 dependencies = [
  "log",
  "serde",
@@ -947,7 +917,7 @@ version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "89a09f22a6c6069a18470eb92d2298acf25463f14256d24778e1230d789a2aec"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "block2",
  "libc",
  "objc2",
@@ -961,7 +931,7 @@ checksum = "97369cbbc041bc366949bc74d34658d6cda5621039731c6310521892a3a20ae0"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -984,7 +954,7 @@ checksum = "0fbbb781877580993a8707ec48672673ec7b81eeba04cfd2310bd28c08e47c8f"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -1097,7 +1067,7 @@ checksum = "67c78a4d8fdf9953a5c9d458f9efe940fd97a0cab0941c075a813ac594733827"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -1181,15 +1151,15 @@ dependencies = [
 
 [[package]]
 name = "find-msvc-tools"
-version = "0.1.8"
+version = "0.1.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8591b0bcc8a98a64310a2fae1bb3e9b8564dd10e381e6e28010fde8e8e8568db"
+checksum = "5baebc0774151f905a1a2cc41989300b1e6fbb29aff0ceffa1064fdd3088d582"
 
 [[package]]
 name = "flate2"
-version = "1.1.8"
+version = "1.1.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b375d6465b98090a5f25b1c7703f3859783755aa9a80433b36e0379a3ec2f369"
+checksum = "843fba2746e448b37e26a819579957415c8cef339bf08564fe8b7ddbd959573c"
 dependencies = [
  "crc32fast",
  "miniz_oxide",
@@ -1202,6 +1172,12 @@ version = "1.0.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3f9eec918d3f24069decb9af1554cad7c880e2da24a9afd88aca000531ab82c1"
 
+[[package]]
+name = "foldhash"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d9c4f5dac5e15c24eb999c26181a6ca40b39fe946cbe4c263c7209467bc83af2"
+
 [[package]]
 name = "foreign-types"
 version = "0.5.0"
@@ -1220,7 +1196,7 @@ checksum = "1a5c6c585bc94aaf2c7b51dd4c2ba22680844aba4c687be581871a6f518c5742"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -1272,9 +1248,9 @@ dependencies = [
 
 [[package]]
 name = "futures-core"
-version = "0.3.31"
+version = "0.3.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "05f29059c0c2090612e8d742178b0580d2dc940c837851ad723096f87af6663e"
+checksum = "7e3450815272ef58cec6d564423f6e755e25379b217b0bc688e295ba24df6b1d"
 
 [[package]]
 name = "futures-executor"
@@ -1289,9 +1265,9 @@ dependencies = [
 
 [[package]]
 name = "futures-io"
-version = "0.3.31"
+version = "0.3.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9e5c1b78ca4aae1ac06c48a526a655760685149f0d465d21f37abfe57ce075c6"
+checksum = "cecba35d7ad927e23624b22ad55235f2239cfa44fd10428eecbeba6d6a717718"
 
 [[package]]
 name = "futures-lite"
@@ -1308,32 +1284,32 @@ dependencies = [
 
 [[package]]
 name = "futures-macro"
-version = "0.3.31"
+version = "0.3.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "162ee34ebcb7c64a8abebc059ce0fee27c2262618d7b60ed8faf72fef13c3650"
+checksum = "e835b70203e41293343137df5c0664546da5745f82ec9b84d40be8336958447b"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
 name = "futures-sink"
-version = "0.3.31"
+version = "0.3.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e575fab7d1e0dcb8d0c7bcf9a63ee213816ab51902e6d244a95819acacf1d4f7"
+checksum = "c39754e157331b013978ec91992bde1ac089843443c49cbc7f46150b0fad0893"
 
 [[package]]
 name = "futures-task"
-version = "0.3.31"
+version = "0.3.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f90f7dce0722e95104fcb095585910c0977252f286e354b5e3bd38902cd99988"
+checksum = "037711b3d59c33004d3856fbdc83b99d4ff37a24768fa1be9ce3538a1cde4393"
 
 [[package]]
 name = "futures-util"
-version = "0.3.31"
+version = "0.3.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9fa08315bb612088cc391249efdc3bc77536f16c91f6cf495e6fbe85b20a4a81"
+checksum = "389ca41296e6190b48053de0321d02a77f32f8a5d2461dd38762c0593805c6d6"
 dependencies = [
  "futures-core",
  "futures-io",
@@ -1342,7 +1318,6 @@ dependencies = [
  "futures-task",
  "memchr",
  "pin-project-lite",
- "pin-utils",
  "slab",
 ]
 
@@ -1502,6 +1477,22 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "getrandom"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "139ef39800118c7683f2fd3c98c1b23c09ae076556b435f8e9064ae108aaeeec"
+dependencies = [
+ "cfg-if",
+ "js-sys",
+ "libc",
+ "r-efi",
+ "rand_core 0.10.0",
+ "wasip2",
+ "wasip3",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "gio"
 version = "0.18.4"
@@ -1540,7 +1531,7 @@ version = "0.18.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "233daaf6e83ae6a12a52055f568f9d7cf4671dabb78ff9560ab6da230ce00ee5"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "futures-channel",
  "futures-core",
  "futures-executor",
@@ -1568,7 +1559,7 @@ dependencies = [
  "proc-macro-error",
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -1647,7 +1638,7 @@ dependencies = [
  "proc-macro-error",
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -1681,6 +1672,15 @@ version = "0.14.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e5274423e17b7c9fc20b6e7e208532f9b19825d82dfd615708b70edd83df41f1"
 
+[[package]]
+name = "hashbrown"
+version = "0.15.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9229cfe53dfd69f0609a49f65461bd93001ea1ef889cd5529dd176593f5338a1"
+dependencies = [
+ "foldhash",
+]
+
 [[package]]
 name = "hashbrown"
 version = "0.16.1"
@@ -1717,7 +1717,7 @@ version = "0.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6c49c37c09c17a53d937dfbb742eb3a961d65a994e6bcdcf37e7399d0cc8ab5e"
 dependencies = [
- "digest 0.10.7",
+ "digest",
 ]
 
 [[package]]
@@ -1771,15 +1771,6 @@ version = "1.10.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6dbf3de79e51f3d586ab4cb9d5c3e2c14aa28ed23d180cf89b4df0454a69cc87"
 
-[[package]]
-name = "hybrid-array"
-version = "0.4.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f471e0a81b2f90ffc0cb2f951ae04da57de8baa46fa99112b062a5173a5088d0"
-dependencies = [
- "typenum",
-]
-
 [[package]]
 name = "hyper"
 version = "1.8.1"
@@ -1820,14 +1811,13 @@ dependencies = [
 
 [[package]]
 name = "hyper-util"
-version = "0.1.19"
+version = "0.1.20"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "727805d60e7938b76b826a6ef209eb70eaa1812794f9424d4a4e2d740662df5f"
+checksum = "96547c2556ec9d12fb1578c4eaf448b04993e7fb79cbaad930a656880a6bdfa0"
 dependencies = [
  "base64 0.22.1",
  "bytes",
  "futures-channel",
- "futures-core",
  "futures-util",
  "http",
  "http-body",
@@ -1846,9 +1836,9 @@ dependencies = [
 
 [[package]]
 name = "iana-time-zone"
-version = "0.1.64"
+version = "0.1.65"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "33e57f83510bb73707521ebaffa789ec8caf86f9657cad665b092b581d40e9fb"
+checksum = "e31bc9ad994ba00e440a8aa5c9ef0ec67d5cb5e5cb0cc7f8b744a35b389cc470"
 dependencies = [
  "android_system_properties",
  "core-foundation-sys",
@@ -1870,9 +1860,9 @@ dependencies = [
 
 [[package]]
 name = "ico"
-version = "0.4.0"
+version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cc50b891e4acf8fe0e71ef88ec43ad82ee07b3810ad09de10f1d01f072ed4b98"
+checksum = "3e795dff5605e0f04bff85ca41b51a96b83e80b281e96231bcaaf1ac35103371"
 dependencies = [
  "byteorder",
  "png",
@@ -1959,6 +1949,12 @@ dependencies = [
  "zerovec",
 ]
 
+[[package]]
+name = "id-arena"
+version = "2.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3d3067d79b975e8844ca9eb072e16b31c3c1c36928edf9c6789548c524d0d954"
+
 [[package]]
 name = "ident_case"
 version = "1.0.1"
@@ -2170,7 +2166,7 @@ version = "0.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b750dcadc39a09dbadd74e118f6dd6598df77fa01df0cfcdc52c28dece74528a"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "serde",
  "unicode-segmentation",
 ]
@@ -2193,6 +2189,12 @@ version = "1.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bbd2bcb4c963f2ddae06a2efc7e9f3591312473c50c6685e1f298068316e66fe"
 
+[[package]]
+name = "leb128fmt"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "09edd9e8b54e49e587e4f6295a7d29c3ea94d469cb40ab8ca70b288248a81db2"
+
 [[package]]
 name = "libappindicator"
 version = "0.9.0"
@@ -2225,9 +2227,9 @@ checksum = "2c4a545a15244c7d945065b5d392b2d2d7f21526fba56ce51467b06ed445e8f7"
 
 [[package]]
 name = "libc"
-version = "0.2.180"
+version = "0.2.182"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bcc35a38544a891a5f7c865aca548a982ccb3b8650a5b06d0fd33a10283c56fc"
+checksum = "6800badb6cb2082ffd7b6a67e6125bb39f18782f793520caee8cb8846be06112"
 
 [[package]]
 name = "libloading"
@@ -2245,7 +2247,7 @@ version = "0.1.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3d0b95e02c851351f877147b7deea7b1afb1df71b63aa5f8270716e0c5720616"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "libc",
 ]
 
@@ -2284,12 +2286,11 @@ checksum = "112b39cec0b298b6c1999fee3e31427f74f676e4cb9879ed1a121b43661a4154"
 
 [[package]]
 name = "lzma-rust2"
-version = "0.15.7"
+version = "0.16.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1670343e58806300d87950e3401e820b519b9384281bbabfb15e3636689ffd69"
+checksum = "47bb1e988e6fb779cf720ad431242d3f03167c1b3f2b1aae7f1a94b2495b36ae"
 dependencies = [
- "crc",
- "sha2 0.10.9",
+ "sha2",
 ]
 
 [[package]]
@@ -2332,7 +2333,7 @@ checksum = "88a9689d8d44bf9964484516275f5cd4c9b59457a6940c1d5d0ecbb94510a36b"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -2349,9 +2350,9 @@ checksum = "ae960838283323069879657ca3de837e9f7bbb4c7bf6ea7f1b290d5e9476d2e0"
 
 [[package]]
 name = "memchr"
-version = "2.7.6"
+version = "2.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f52b00d39961fc5b2736ea853c9cc86238e165017a493d1d5c8eac6bdc4cc273"
+checksum = "f8ca58f447f06ed17d5fc4043ce1b10dd205e060fb3ce5b979b8ed8e59ff3f79"
 
 [[package]]
 name = "memoffset"
@@ -2412,9 +2413,9 @@ dependencies = [
 
 [[package]]
 name = "native-dialog"
-version = "0.9.4"
+version = "0.9.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "89853bb05334e192e6646290ea94ca31bcb80443f25ad40ebf478b6dafb08d6c"
+checksum = "3b2373fb763ea6962e8c586571c7f9c5d8c995f9777cbdebbe0180263691bd4b"
 dependencies = [
  "ascii",
  "block2",
@@ -2440,7 +2441,7 @@ version = "0.9.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c3f42e7bbe13d351b6bead8286a43aac9534b82bd3cc43e47037f012ebfd62d4"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "jni-sys",
  "log",
  "ndk-sys",
@@ -2496,9 +2497,9 @@ dependencies = [
 
 [[package]]
 name = "notify-rust"
-version = "4.11.7"
+version = "4.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6442248665a5aa2514e794af3b39661a8e73033b1cc5e59899e1276117ee4400"
+checksum = "21af20a1b50be5ac5861f74af1a863da53a11c38684d9818d82f1c42f7fdc6c2"
 dependencies = [
  "futures-lite",
  "log",
@@ -2519,9 +2520,9 @@ dependencies = [
 
 [[package]]
 name = "num-conv"
-version = "0.1.0"
+version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "51d515d32fb182ee37cda2ccdcb92950d6a3c2893aa280e540671c2cd0f3b1d9"
+checksum = "cf97ec579c3c42f953ef76dbf8d55ac91fb219dde70e49aa4a6b7d74e9919050"
 
 [[package]]
 name = "num-traits"
@@ -2551,7 +2552,7 @@ dependencies = [
  "proc-macro-crate 3.4.0",
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -2570,7 +2571,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d49e936b501e5c5bf01fda3a9452ff86dc3ea98ad5f283e1455153142d97518c"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "block2",
  "libc",
  "objc2",
@@ -2591,7 +2592,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "73ad74d880bb43877038da939b7427bba67e9dd42004a18b809ba7d87cee241c"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "objc2",
  "objc2-foundation",
 ]
@@ -2602,7 +2603,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0b402a653efbb5e82ce4df10683b6b28027616a2715e90009947d50b8dd298fa"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "objc2",
  "objc2-foundation",
 ]
@@ -2613,7 +2614,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2a180dd8642fa45cdb7dd721cd4c11b1cadd4929ce112ebd8b9f5803cc79d536"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "dispatch2",
  "objc2",
 ]
@@ -2624,7 +2625,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e022c9d066895efa1345f8e33e584b9f958da2fd4cd116792e15e07e4720a807"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "dispatch2",
  "objc2",
  "objc2-core-foundation",
@@ -2647,7 +2648,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0cde0dfb48d25d2b4862161a4d5fcc0e3c24367869ad306b0c9ec0073bfed92d"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "objc2",
  "objc2-core-foundation",
  "objc2-core-graphics",
@@ -2659,7 +2660,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d425caf1df73233f29fd8a5c3e5edbc30d2d4307870f802d18f00d83dc5141a6"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "objc2",
  "objc2-core-foundation",
  "objc2-core-graphics",
@@ -2687,7 +2688,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e3e0adef53c21f888deb4fa59fc59f7eb17404926ee8a6f59f5df0fd7f9f3272"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "block2",
  "libc",
  "objc2",
@@ -2710,7 +2711,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "180788110936d59bab6bd83b6060ffdfffb3b922ba1396b312ae795e1de9d81d"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "objc2",
  "objc2-core-foundation",
 ]
@@ -2731,7 +2732,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "96c1358452b371bf9f104e21ec536d37a650eb10f7ee379fff67d2e08d537f1f"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "objc2",
  "objc2-core-foundation",
  "objc2-foundation",
@@ -2743,7 +2744,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "709fe137109bd1e8b5a99390f77a7d8b2961dafc1a1c5db8f2e60329ad6d895a"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "objc2",
  "objc2-core-foundation",
 ]
@@ -2754,7 +2755,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d87d638e33c06f577498cbcc50491496a3ed4246998a7fbba7ccb98b1e7eab22"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "objc2",
  "objc2-core-foundation",
  "objc2-foundation",
@@ -2766,7 +2767,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b2e5aaab980c433cf470df9d7af96a7b46a9d892d521a2cbbb2f8a4c16751e7f"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "block2",
  "objc2",
  "objc2-app-kit",
@@ -2796,20 +2797,20 @@ dependencies = [
 
 [[package]]
 name = "opener"
-version = "0.8.3"
+version = "0.8.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cb9024962ab91e00c89d2a14352a8d0fc1a64346bf96f1839b45c09149564e47"
+checksum = "a2fa337e0cf13357c13ef1dc108df1333eb192f75fc170bea03fcf1fd404c2ee"
 dependencies = [
  "bstr",
  "normpath",
- "windows-sys 0.60.2",
+ "windows-sys 0.61.2",
 ]
 
 [[package]]
 name = "openssl-probe"
-version = "0.2.0"
+version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9f50d9b3dabb09ecd771ad0aa242ca6894994c130308ca3d7684634df8037391"
+checksum = "7c87def4c32ab89d880effc9e097653c8da5d6ef28e6b539d313baaacfbafcbe"
 
 [[package]]
 name = "option-ext"
@@ -2909,7 +2910,7 @@ version = "0.12.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f8ed6a7761f76e3b9f92dfb0a60a6a6477c61024b775147ff0973a02653abaf2"
 dependencies = [
- "digest 0.10.7",
+ "digest",
  "hmac",
 ]
 
@@ -3023,7 +3024,7 @@ dependencies = [
  "phf_shared 0.11.3",
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -3050,7 +3051,7 @@ version = "0.11.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "67eabc2ef2a60eb7faa00097bd1ffdb5bd28e62bf39990626a582201b7a754e5"
 dependencies = [
- "siphasher 1.0.1",
+ "siphasher 1.0.2",
 ]
 
 [[package]]
@@ -3139,9 +3140,9 @@ checksum = "439ee305def115ba05938db6eb1644ff94165c5ab5e9420d1c1bcedbba909391"
 
 [[package]]
 name = "ppmd-rust"
-version = "1.3.0"
+version = "1.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d558c559f0450f16f2a27a1f017ef38468c1090c9ce63c8e51366232d53717b4"
+checksum = "efca4c95a19a79d1c98f791f10aebd5c1363b473244630bb7dbde1dc98455a24"
 
 [[package]]
 name = "ppv-lite86"
@@ -3158,6 +3159,16 @@ version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "925383efa346730478fb4838dbe9137d2a47675ad789c546d150a6e1dd4ab31c"
 
+[[package]]
+name = "prettyplease"
+version = "0.2.37"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "479ca8adacdd7ce8f1fb39ce9ecccbfe93a3f1344b3d0d97f20bc0196208f62b"
+dependencies = [
+ "proc-macro2",
+ "syn 2.0.115",
+]
+
 [[package]]
 name = "proc-macro-crate"
 version = "1.3.1"
@@ -3219,9 +3230,9 @@ checksum = "dc375e1527247fe1a97d8b7156678dfe7c1af2fc075c9a4db3690ecd2a148068"
 
 [[package]]
 name = "proc-macro2"
-version = "1.0.105"
+version = "1.0.106"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "535d180e0ecab6268a3e718bb9fd44db66bbbc256257165fc699dadf70d16fe7"
+checksum = "8fd00f0bb2e90d81d1044c2b32617f68fcb9fa3bb7640c23e9c748e53fb30934"
 dependencies = [
  "unicode-ident",
 ]
@@ -3302,9 +3313,9 @@ dependencies = [
 
 [[package]]
 name = "quote"
-version = "1.0.43"
+version = "1.0.44"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dc74d9a594b72ae6656596548f56f667211f8a97b3d4c3d467150794690dc40a"
+checksum = "21b2ebcf727b7760c461f091f9f0f539b77b8e87f2fd88131e7f1b433b3cece4"
 dependencies = [
  "proc-macro2",
 ]
@@ -3350,6 +3361,17 @@ dependencies = [
  "rand_core 0.9.5",
 ]
 
+[[package]]
+name = "rand"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bc266eb313df6c5c09c1c7b1fbe2510961e5bcd3add930c1e31f7ed9da0feff8"
+dependencies = [
+ "chacha20",
+ "getrandom 0.4.1",
+ "rand_core 0.10.0",
+]
+
 [[package]]
 name = "rand_chacha"
 version = "0.2.2"
@@ -3407,6 +3429,12 @@ dependencies = [
  "getrandom 0.3.4",
 ]
 
+[[package]]
+name = "rand_core"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0c8d0fd677905edcbeedbf2edb6494d676f0e98d54d5cf9bda0b061cb8fb8aba"
+
 [[package]]
 name = "rand_hc"
 version = "0.2.0"
@@ -3437,7 +3465,7 @@ version = "0.5.18"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ed2bf2547551a7053d6fdfafda3f938979645c44812fbfcda098faae3f1a362d"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
 ]
 
 [[package]]
@@ -3468,14 +3496,14 @@ checksum = "b7186006dcb21920990093f30e3dea63b7d6e977bf1256be20c3563a5db070da"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
 name = "regex"
-version = "1.12.2"
+version = "1.12.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "843bc0191f75f3e22651ae5f1e72939ab2f72a4bc30fa80a066bd66edefc24d4"
+checksum = "e10754a14b9137dd7b1e3e5b0493cc9171fdd105e0ab477f51b72e7f3ac0e276"
 dependencies = [
  "aho-corasick",
  "memchr",
@@ -3485,9 +3513,9 @@ dependencies = [
 
 [[package]]
 name = "regex-automata"
-version = "0.4.13"
+version = "0.4.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5276caf25ac86c8d810222b3dbb938e512c55c6831a10f3e6ed1c93b84041f1c"
+checksum = "6e1dd4122fc1595e8162618945476892eefca7b88c52820e74af6262213cae8f"
 dependencies = [
  "aho-corasick",
  "memchr",
@@ -3496,50 +3524,15 @@ dependencies = [
 
 [[package]]
 name = "regex-syntax"
-version = "0.8.8"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7a2d987857b319362043e95f5353c0535c1f58eec5336fdfcf626430af7def58"
-
-[[package]]
-name = "reqwest"
-version = "0.12.28"
+version = "0.8.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "eddd3ca559203180a307f12d114c268abf583f59b03cb906fd0b3ff8646c1147"
-dependencies = [
- "base64 0.22.1",
- "bytes",
- "futures-core",
- "futures-util",
- "http",
- "http-body",
- "http-body-util",
- "hyper",
- "hyper-util",
- "js-sys",
- "log",
- "percent-encoding",
- "pin-project-lite",
- "serde",
- "serde_json",
- "serde_urlencoded",
- "sync_wrapper",
- "tokio",
- "tokio-util",
- "tower",
- "tower-http",
- "tower-service",
- "url",
- "wasm-bindgen",
- "wasm-bindgen-futures",
- "wasm-streams",
- "web-sys",
-]
+checksum = "a96887878f22d7bad8a3b6dc5b7440e0ada9a245242924394987b21cf2210a4c"
 
 [[package]]
 name = "reqwest"
-version = "0.13.1"
+version = "0.13.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "04e9018c9d814e5f30cc16a0f03271aeab3571e609612d9fe78c1aa8d11c2f62"
+checksum = "ab3f43e3283ab1488b624b44b0e988d0acea0b3214e694730a055cb6b2efa801"
 dependencies = [
  "base64 0.22.1",
  "bytes",
@@ -3648,7 +3641,7 @@ version = "1.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "146c9e247ccc180c1f61615433868c99f3de3ae256a30a43b49f67c2d9171f34"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "errno",
  "libc",
  "linux-raw-sys",
@@ -3736,12 +3729,6 @@ version = "1.0.22"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b39cdef0fa800fc44525c84ccb54a029961a8215f9619753635a9c0d2538d46d"
 
-[[package]]
-name = "ryu"
-version = "1.0.22"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a50f4cf475b65d88e057964e0e9bb1f0aa9bbb2036dc65c64596b42932536984"
-
 [[package]]
 name = "same-file"
 version = "1.0.6"
@@ -3772,7 +3759,7 @@ dependencies = [
  "serde",
  "serde_json",
  "url",
- "uuid 1.19.0",
+ "uuid 1.21.0",
 ]
 
 [[package]]
@@ -3789,9 +3776,9 @@ dependencies = [
 
 [[package]]
 name = "schemars"
-version = "1.2.0"
+version = "1.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "54e910108742c57a770f492731f99be216a52fadd361b06c8fb59d74ccc267d2"
+checksum = "a2b42f36aa1cd011945615b92222f6bf73c599a102a300334cd7f8dbeec726cc"
 dependencies = [
  "dyn-clone",
  "ref-cast",
@@ -3808,7 +3795,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "serde_derive_internals",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -3823,7 +3810,7 @@ version = "3.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b3297343eaf830f66ede390ea39da1d462b6b0c1b000f420d0a83f898bbbe6ef"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "core-foundation 0.10.1",
  "core-foundation-sys",
  "libc",
@@ -3907,7 +3894,7 @@ checksum = "d540f220d3187173da220f885ab66608367b6574e925011a9353e4badda91d79"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -3918,7 +3905,7 @@ checksum = "18d26a20a969b9e3fdf2fc2d9f21eda6c40e2de84c9408bb5d3b05d499aae711"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -3942,7 +3929,7 @@ checksum = "175ee3e80ae9982737ca543e96133087cbd9a485eecc3bc4de9c1a37b47ea59c"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -3963,18 +3950,6 @@ dependencies = [
  "serde_core",
 ]
 
-[[package]]
-name = "serde_urlencoded"
-version = "0.7.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d3491c14715ca2294c4d6a88f15e84739788c1d030eed8c110436aafdaa2f3fd"
-dependencies = [
- "form_urlencoded",
- "itoa",
- "ryu",
- "serde",
-]
-
 [[package]]
 name = "serde_with"
 version = "3.16.1"
@@ -3987,7 +3962,7 @@ dependencies = [
  "indexmap 1.9.3",
  "indexmap 2.13.0",
  "schemars 0.9.0",
- "schemars 1.2.0",
+ "schemars 1.2.1",
  "serde_core",
  "serde_json",
  "serde_with_macros",
@@ -4003,7 +3978,7 @@ dependencies = [
  "darling",
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -4025,7 +4000,7 @@ checksum = "772ee033c0916d670af7860b6e1ef7d658a4629a6d0b4c8c3e67f09b3765b75d"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -4045,8 +4020,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e3bf829a2d51ab4a5ddf1352d8470c140cadc8301b2ae1789db023f01cedd6ba"
 dependencies = [
  "cfg-if",
- "cpufeatures",
- "digest 0.10.7",
+ "cpufeatures 0.2.17",
+ "digest",
 ]
 
 [[package]]
@@ -4056,19 +4031,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a7507d819769d01a365ab707794a4084392c824f54a7a6a7862f8c3d0892b283"
 dependencies = [
  "cfg-if",
- "cpufeatures",
- "digest 0.10.7",
-]
-
-[[package]]
-name = "sha2"
-version = "0.11.0-rc.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "19d43dc0354d88b791216bb5c1bfbb60c0814460cc653ae0ebd71f286d0bd927"
-dependencies = [
- "cfg-if",
- "cpufeatures",
- "digest 0.11.0-rc.7",
+ "cpufeatures 0.2.17",
+ "digest",
 ]
 
 [[package]]
@@ -4101,15 +4065,15 @@ checksum = "38b58827f4464d87d377d175e90bf58eb00fd8716ff0a62f80356b5e61555d0d"
 
 [[package]]
 name = "siphasher"
-version = "1.0.1"
+version = "1.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "56199f7ddabf13fe5074ce809e7d3f42b42ae711800501b5b16ea82ad029c39d"
+checksum = "b2aa850e253778c88a04c3d7323b043aeda9d3e30d5971937c1855769763678e"
 
 [[package]]
 name = "slab"
-version = "0.4.11"
+version = "0.4.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7a2ae44ef20feb57a68b23d846850f861394c2e02dc425a50098ae8c90267589"
+checksum = "0c790de23124f9ab44544d7ac05d60440adc586479ce501c1d6d7da3cd8c9cf5"
 
 [[package]]
 name = "smallvec"
@@ -4119,9 +4083,9 @@ checksum = "67b1b7a3b5fe4f1376887184045fcf45c69e92af734b7aaddc05fb777b6fbd03"
 
 [[package]]
 name = "socket2"
-version = "0.6.1"
+version = "0.6.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "17129e116933cf371d018bb80ae557e889637989d8638274fb25622827b03881"
+checksum = "86f4aa3ad99f2088c990dfa82d367e19cb29268ed67c574d10d0a4bfe71f07e0"
 dependencies = [
  "libc",
  "windows-sys 0.60.2",
@@ -4242,9 +4206,9 @@ dependencies = [
 
 [[package]]
 name = "syn"
-version = "2.0.114"
+version = "2.0.115"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d4d107df263a3013ef9b1879b0df87d706ff80f65a86ea879bd9c31f9b307c2a"
+checksum = "6e614ed320ac28113fa64972c4262d5dbc89deacdfd00c34a3e4cea073243c12"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -4268,7 +4232,7 @@ checksum = "728a70f3dbaf5bab7f0c4b1ac8d7ae5ea60a4b5549c8a5914361c99147a709d2"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -4287,11 +4251,11 @@ dependencies = [
 
 [[package]]
 name = "system-configuration"
-version = "0.6.1"
+version = "0.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3c879d448e9d986b661742763247d3693ed13609438cf3d006f51f5368a5ba6b"
+checksum = "a13f3d0daba03132c0aa9767f98351b3488edc2c100cda2d2ec2b04f3d8d3c8b"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "core-foundation 0.9.4",
  "system-configuration-sys",
 ]
@@ -4325,7 +4289,7 @@ version = "0.34.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f3a753bdc39c07b192151523a3f77cd0394aa75413802c883a0f6f6a0e5ee2e7"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "block2",
  "core-foundation 0.10.1",
  "core-graphics",
@@ -4367,7 +4331,7 @@ checksum = "f4e16beb8b2ac17db28eab8bca40e62dbfbb34c0fcdc6d9826b11b7b5d047dfd"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -4378,9 +4342,9 @@ checksum = "61c41af27dd6d1e27b1b16b489db798443478cef1f06a660c96db617ba5de3b1"
 
 [[package]]
 name = "tauri"
-version = "2.9.5"
+version = "2.10.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8a3868da5508446a7cd08956d523ac3edf0a8bc20bf7e4038f9a95c2800d2033"
+checksum = "463ae8677aa6d0f063a900b9c41ecd4ac2b7ca82f0b058cc4491540e55b20129"
 dependencies = [
  "anyhow",
  "bytes",
@@ -4406,7 +4370,7 @@ dependencies = [
  "percent-encoding",
  "plist",
  "raw-window-handle",
- "reqwest 0.12.28",
+ "reqwest",
  "serde",
  "serde_json",
  "serde_repr",
@@ -4429,9 +4393,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-build"
-version = "2.5.3"
+version = "2.5.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "17fcb8819fd16463512a12f531d44826ce566f486d7ccd211c9c8cebdaec4e08"
+checksum = "ca7bd893329425df750813e95bd2b643d5369d929438da96d5bbb7cc2c918f74"
 dependencies = [
  "anyhow",
  "cargo_toml",
@@ -4451,9 +4415,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-codegen"
-version = "2.5.2"
+version = "2.5.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9fa9844cefcf99554a16e0a278156ae73b0d8680bbc0e2ad1e4287aadd8489cf"
+checksum = "aac423e5859d9f9ccdd32e3cf6a5866a15bedbf25aa6630bcb2acde9468f6ae3"
 dependencies = [
  "base64 0.22.1",
  "brotli",
@@ -4466,35 +4430,35 @@ dependencies = [
  "semver",
  "serde",
  "serde_json",
- "sha2 0.10.9",
- "syn 2.0.114",
+ "sha2",
+ "syn 2.0.115",
  "tauri-utils",
  "thiserror 2.0.18",
  "time",
  "url",
- "uuid 1.19.0",
+ "uuid 1.21.0",
  "walkdir",
 ]
 
 [[package]]
 name = "tauri-macros"
-version = "2.5.2"
+version = "2.5.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3764a12f886d8245e66b7ee9b43ccc47883399be2019a61d80cf0f4117446fde"
+checksum = "1b6a1bd2861ff0c8766b1d38b32a6a410f6dc6532d4ef534c47cfb2236092f59"
 dependencies = [
  "heck 0.5.0",
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
  "tauri-codegen",
  "tauri-utils",
 ]
 
 [[package]]
 name = "tauri-plugin"
-version = "2.5.2"
+version = "2.5.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0e1d0a4860b7ff570c891e1d2a586bf1ede205ff858fbc305e0b5ae5d14c1377"
+checksum = "692a77abd8b8773e107a42ec0e05b767b8d2b7ece76ab36c6c3947e34df9f53f"
 dependencies = [
  "anyhow",
  "glob",
@@ -4509,9 +4473,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-plugin-deep-link"
-version = "2.4.6"
+version = "2.4.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "444b091f24f2f6bdb4a305b54d3961f629c11861c685aceeea9a1972f89e43d5"
+checksum = "94deb2e2e4641514ac496db2cddcfc850d6fc9d51ea17b82292a0490bd20ba5b"
 dependencies = [
  "dunce",
  "plist",
@@ -4611,9 +4575,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-plugin-single-instance"
-version = "2.3.7"
+version = "2.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "acba6b5ca527a96cdfcc96ae09b09ccb91ddff5e33978ca6873b96ea16bb404c"
+checksum = "dc61e4822b8f74d68278e09161d3e3fdd1b14b9eb781e24edccaabf10c420e8c"
 dependencies = [
  "serde",
  "serde_json",
@@ -4627,9 +4591,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-runtime"
-version = "2.9.2"
+version = "2.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "87f766fe9f3d1efc4b59b17e7a891ad5ed195fa8d23582abb02e6c9a01137892"
+checksum = "b885ffeac82b00f1f6fd292b6e5aabfa7435d537cef57d11e38a489956535651"
 dependencies = [
  "cookie",
  "dpi",
@@ -4652,9 +4616,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-runtime-wry"
-version = "2.9.3"
+version = "2.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "187a3f26f681bdf028f796ccf57cf478c1ee422c50128e5a0a6ebeb3f5910065"
+checksum = "5204682391625e867d16584fedc83fc292fb998814c9f7918605c789cd876314"
 dependencies = [
  "gtk",
  "http",
@@ -4679,9 +4643,9 @@ dependencies = [
 
 [[package]]
 name = "tauri-utils"
-version = "2.8.1"
+version = "2.8.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "76a423c51176eb3616ee9b516a9fa67fed5f0e78baaba680e44eb5dd2cc37490"
+checksum = "fcd169fccdff05eff2c1033210b9b94acd07a47e6fa9a3431cf09cfd4f01c87e"
 dependencies = [
  "anyhow",
  "brotli",
@@ -4711,7 +4675,7 @@ dependencies = [
  "toml 0.9.11+spec-1.1.0",
  "url",
  "urlpattern",
- "uuid 1.19.0",
+ "uuid 1.21.0",
  "walkdir",
 ]
 
@@ -4788,7 +4752,7 @@ checksum = "4fee6c4efc90059e10f81e6d42c60a18f76588c3d74cb83a0b242a2b6c7504c1"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -4799,14 +4763,14 @@ checksum = "ebc4ee7f67670e9b64d05fa4253e753e016c6c95ff35b89b7941d6b856dec1d5"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
 name = "time"
-version = "0.3.45"
+version = "0.3.47"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f9e442fc33d7fdb45aa9bfeb312c095964abdf596f7567261062b2a7107aaabd"
+checksum = "743bd48c283afc0388f9b8827b976905fb217ad9e647fae3a379a9283c4def2c"
 dependencies = [
  "deranged",
  "itoa",
@@ -4820,15 +4784,15 @@ dependencies = [
 
 [[package]]
 name = "time-core"
-version = "0.1.7"
+version = "0.1.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8b36ee98fd31ec7426d599183e8fe26932a8dc1fb76ddb6214d05493377d34ca"
+checksum = "7694e1cfe791f8d31026952abf09c69ca6f6fa4e1a1229e18988f06a04a12dca"
 
 [[package]]
 name = "time-macros"
-version = "0.2.25"
+version = "0.2.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "71e552d1249bf61ac2a52db88179fd0673def1e1ad8243a00d9ec9ed71fee3dd"
+checksum = "2e70e4c5a0e0a8a4823ad65dfe1a6930e4f4d756dcd9dd7939022b5e8c501215"
 dependencies = [
  "num-conv",
  "time-core",
@@ -4892,7 +4856,7 @@ checksum = "af407857209536a95c8e56f8231ef2c2e2aff839b22e07a1ffcbc617e9db9fa5"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -5035,7 +4999,7 @@ version = "0.6.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d4e6559d53cc268e5031cd8429d05415bc4cb4aefc4aa5d6cc35fbf5b924a1f8"
 dependencies = [
- "bitflags 2.10.0",
+ "bitflags 2.11.0",
  "bytes",
  "futures-util",
  "http",
@@ -5078,7 +5042,7 @@ checksum = "7490cfa5ec963746568740651ac6781f701c9c5ea257c58e057f3ba8cf69e8da"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -5120,9 +5084,9 @@ checksum = "e421abadd41a4225275504ea4d6566923418b7f05506fbc9c0fe86ba7396114b"
 
 [[package]]
 name = "typed-path"
-version = "0.12.0"
+version = "0.12.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7922f2cdc51280d47b491af9eafc41eb0cdab85eabcb390c854412fcbf26dbe8"
+checksum = "3015e6ce46d5ad8751e4a772543a30c7511468070e98e64e20165f8f81155b64"
 
 [[package]]
 name = "typeid"
@@ -5190,9 +5154,9 @@ dependencies = [
 
 [[package]]
 name = "unicode-ident"
-version = "1.0.22"
+version = "1.0.23"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9312f7c4f6ff9069b165498234ce8be658059c6728633667c526e27dc2cf1df5"
+checksum = "537dd038a89878be9b64dd4bd1b260315c1bb94f4d784956b81e27a088d9a09e"
 
 [[package]]
 name = "unicode-segmentation"
@@ -5200,6 +5164,12 @@ version = "1.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f6ccf251212114b54433ec949fd6a7841275f9ada20dddd2f29e9ceea4501493"
 
+[[package]]
+name = "unicode-xid"
+version = "0.2.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ebc1c04c71510c7f702b52b7c350734c9ff1295c464a03335b00bb84fc54f853"
+
 [[package]]
 name = "untrusted"
 version = "0.9.0"
@@ -5254,11 +5224,11 @@ dependencies = [
 
 [[package]]
 name = "uuid"
-version = "1.19.0"
+version = "1.21.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e2e054861b4bd027cd373e18e8d8d8e6548085000e41290d95ce0c373a654b4a"
+checksum = "b672338555252d43fd2240c714dc444b8c6fb0a5c5335e65a07bba7742735ddb"
 dependencies = [
- "getrandom 0.3.4",
+ "getrandom 0.4.1",
  "js-sys",
  "serde_core",
  "wasm-bindgen",
@@ -5346,6 +5316,15 @@ dependencies = [
  "wit-bindgen",
 ]
 
+[[package]]
+name = "wasip3"
+version = "0.4.0+wasi-0.3.0-rc-2026-01-06"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5428f8bf88ea5ddc08faddef2ac4a67e390b88186c703ce6dbd955e1c145aca5"
+dependencies = [
+ "wit-bindgen",
+]
+
 [[package]]
 name = "wasm-bindgen"
 version = "0.2.108"
@@ -5392,7 +5371,7 @@ dependencies = [
  "bumpalo",
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
  "wasm-bindgen-shared",
 ]
 
@@ -5405,11 +5384,33 @@ dependencies = [
  "unicode-ident",
 ]
 
+[[package]]
+name = "wasm-encoder"
+version = "0.244.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "990065f2fe63003fe337b932cfb5e3b80e0b4d0f5ff650e6985b1048f62c8319"
+dependencies = [
+ "leb128fmt",
+ "wasmparser",
+]
+
+[[package]]
+name = "wasm-metadata"
+version = "0.244.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bb0e353e6a2fbdc176932bbaab493762eb1255a7900fe0fea1a2f96c296cc909"
+dependencies = [
+ "anyhow",
+ "indexmap 2.13.0",
+ "wasm-encoder",
+ "wasmparser",
+]
+
 [[package]]
 name = "wasm-streams"
-version = "0.4.2"
+version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "15053d8d85c7eccdbefef60f06769760a563c7f0a9d6902a13d35c7800b0ad65"
+checksum = "9d1ec4f6517c9e11ae630e200b2b65d193279042e28edd4a2cda233e46670bbb"
 dependencies = [
  "futures-util",
  "js-sys",
@@ -5418,6 +5419,18 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "wasmparser"
+version = "0.244.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "47b807c72e1bac69382b3a6fb3dbe8ea4c0ed87ff5629b8685ae6b9a611028fe"
+dependencies = [
+ "bitflags 2.11.0",
+ "hashbrown 0.15.5",
+ "indexmap 2.13.0",
+ "semver",
+]
+
 [[package]]
 name = "web-sys"
 version = "0.3.85"
@@ -5440,9 +5453,9 @@ dependencies = [
 
 [[package]]
 name = "webkit2gtk"
-version = "2.0.1"
+version = "2.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "76b1bc1e54c581da1e9f179d0b38512ba358fb1af2d634a1affe42e37172361a"
+checksum = "a1027150013530fb2eaf806408df88461ae4815a45c541c8975e61d6f2fc4793"
 dependencies = [
  "bitflags 1.3.2",
  "cairo-rs",
@@ -5464,9 +5477,9 @@ dependencies = [
 
 [[package]]
 name = "webkit2gtk-sys"
-version = "2.0.1"
+version = "2.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "62daa38afc514d1f8f12b8693d30d5993ff77ced33ce30cd04deebc267a6d57c"
+checksum = "916a5f65c2ef0dfe12fff695960a2ec3d4565359fdbb2e9943c974e06c734ea5"
 dependencies = [
  "bitflags 1.3.2",
  "cairo-sys-rs",
@@ -5484,9 +5497,9 @@ dependencies = [
 
 [[package]]
 name = "webpki-root-certs"
-version = "1.0.5"
+version = "1.0.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "36a29fc0408b113f68cf32637857ab740edfafdf460c326cd2afaa2d84cc05dc"
+checksum = "804f18a4ac2676ffb4e8b5b5fa9ae38af06df08162314f96a68d2a363e21a8ca"
 dependencies = [
  "rustls-pki-types",
 ]
@@ -5513,7 +5526,7 @@ checksum = "67a921c1b6914c367b2b823cd4cde6f96beec77d30a939c8199bb377cf9b9b54"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -5694,7 +5707,7 @@ checksum = "053e2e040ab57b9dc951b72c264860db7eb3b0200ba345b4e4c3b14f67855ddf"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -5705,7 +5718,7 @@ checksum = "3f316c4a2570ba26bbec722032c4099d8c8bc095efccdc15688708623367e358"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -6095,6 +6108,88 @@ name = "wit-bindgen"
 version = "0.51.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d7249219f66ced02969388cf2bb044a09756a083d0fab1e566056b04d9fbcaa5"
+dependencies = [
+ "wit-bindgen-rust-macro",
+]
+
+[[package]]
+name = "wit-bindgen-core"
+version = "0.51.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ea61de684c3ea68cb082b7a88508a8b27fcc8b797d738bfc99a82facf1d752dc"
+dependencies = [
+ "anyhow",
+ "heck 0.5.0",
+ "wit-parser",
+]
+
+[[package]]
+name = "wit-bindgen-rust"
+version = "0.51.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b7c566e0f4b284dd6561c786d9cb0142da491f46a9fbed79ea69cdad5db17f21"
+dependencies = [
+ "anyhow",
+ "heck 0.5.0",
+ "indexmap 2.13.0",
+ "prettyplease",
+ "syn 2.0.115",
+ "wasm-metadata",
+ "wit-bindgen-core",
+ "wit-component",
+]
+
+[[package]]
+name = "wit-bindgen-rust-macro"
+version = "0.51.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0c0f9bfd77e6a48eccf51359e3ae77140a7f50b1e2ebfe62422d8afdaffab17a"
+dependencies = [
+ "anyhow",
+ "prettyplease",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.115",
+ "wit-bindgen-core",
+ "wit-bindgen-rust",
+]
+
+[[package]]
+name = "wit-component"
+version = "0.244.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9d66ea20e9553b30172b5e831994e35fbde2d165325bec84fc43dbf6f4eb9cb2"
+dependencies = [
+ "anyhow",
+ "bitflags 2.11.0",
+ "indexmap 2.13.0",
+ "log",
+ "serde",
+ "serde_derive",
+ "serde_json",
+ "wasm-encoder",
+ "wasm-metadata",
+ "wasmparser",
+ "wit-parser",
+]
+
+[[package]]
+name = "wit-parser"
+version = "0.244.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ecc8ac4bc1dc3381b7f59c34f00b67e18f910c2c0f50015669dde7def656a736"
+dependencies = [
+ "anyhow",
+ "id-arena",
+ "indexmap 2.13.0",
+ "log",
+ "semver",
+ "serde",
+ "serde_derive",
+ "serde_json",
+ "unicode-xid",
+ "wasmparser",
+]
 
 [[package]]
 name = "writeable"
@@ -6104,9 +6199,9 @@ checksum = "9edde0db4769d2dc68579893f2306b26c6ecfbe0ef499b013d731b7b9247e0b9"
 
 [[package]]
 name = "wry"
-version = "0.53.5"
+version = "0.54.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "728b7d4c8ec8d81cab295e0b5b8a4c263c0d41a785fb8f8c4df284e5411140a2"
+checksum = "5ed1a195b0375491dd15a7066a10251be217ce743cf4bbbbdcf5391d6473bee0"
 dependencies = [
  "base64 0.22.1",
  "block2",
@@ -6133,7 +6228,7 @@ dependencies = [
  "once_cell",
  "percent-encoding",
  "raw-window-handle",
- "sha2 0.10.9",
+ "sha2",
  "soup3",
  "tao-macros",
  "thiserror 2.0.18",
@@ -6187,7 +6282,7 @@ checksum = "b659052874eb698efe5b9e8cf382204678a0086ebf46982b79d6ca3182927e5d"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
  "synstructure",
 ]
 
@@ -6218,7 +6313,7 @@ dependencies = [
  "serde_repr",
  "tracing",
  "uds_windows",
- "uuid 1.19.0",
+ "uuid 1.21.0",
  "windows-sys 0.61.2",
  "winnow 0.7.14",
  "zbus_macros",
@@ -6235,7 +6330,7 @@ dependencies = [
  "proc-macro-crate 3.4.0",
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
  "zbus_names",
  "zvariant",
  "zvariant_utils",
@@ -6254,22 +6349,22 @@ dependencies = [
 
 [[package]]
 name = "zerocopy"
-version = "0.8.33"
+version = "0.8.39"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "668f5168d10b9ee831de31933dc111a459c97ec93225beb307aed970d1372dfd"
+checksum = "db6d35d663eadb6c932438e763b262fe1a70987f9ae936e60158176d710cae4a"
 dependencies = [
  "zerocopy-derive",
 ]
 
 [[package]]
 name = "zerocopy-derive"
-version = "0.8.33"
+version = "0.8.39"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2c7962b26b0a8685668b671ee4b54d007a67d4eaf05fda79ac0ecf41e32270f1"
+checksum = "4122cd3169e94605190e77839c9a40d40ed048d305bfdc146e7df40ab0f3e517"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -6289,7 +6384,7 @@ checksum = "d71e5d6e06ab090c67b5e44993ec16b72dcbaabc526db883a360057678b48502"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
  "synstructure",
 ]
 
@@ -6310,7 +6405,7 @@ checksum = "85a5b4158499876c763cb03bc4e49185d3cccbabb15b33c627f7884f43db852e"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
@@ -6343,14 +6438,14 @@ checksum = "eadce39539ca5cb3985590102671f2567e659fca9666581ad3411d59207951f3"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
 ]
 
 [[package]]
 name = "zip"
-version = "7.2.0"
+version = "8.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c42e33efc22a0650c311c2ef19115ce232583abbe80850bc8b66509ebef02de0"
+checksum = "6e499faf5c6b97a0d086f4a8733de6d47aee2252b8127962439d8d4311a73f72"
 dependencies = [
  "aes",
  "bzip2",
@@ -6358,8 +6453,7 @@ dependencies = [
  "crc32fast",
  "deflate64",
  "flate2",
- "generic-array",
- "getrandom 0.3.4",
+ "getrandom 0.4.1",
  "hmac",
  "indexmap 2.13.0",
  "lzma-rust2",
@@ -6376,15 +6470,15 @@ dependencies = [
 
 [[package]]
 name = "zlib-rs"
-version = "0.5.5"
+version = "0.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "40990edd51aae2c2b6907af74ffb635029d5788228222c4bb811e9351c0caad3"
+checksum = "a7948af682ccbc3342b6e9420e8c51c1fe5d7bf7756002b4a3c6cabfe96a7e3c"
 
 [[package]]
 name = "zmij"
-version = "1.0.15"
+version = "1.0.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "94f63c051f4fe3c1509da62131a678643c5b6fbdc9273b2b79d4378ebda003d2"
+checksum = "b8848ee67ecc8aedbaf3e4122217aff892639231befc6a1b58d29fff4c2cabaa"
 
 [[package]]
 name = "zopfli"
@@ -6449,7 +6543,7 @@ dependencies = [
  "proc-macro-crate 3.4.0",
  "proc-macro2",
  "quote",
- "syn 2.0.114",
+ "syn 2.0.115",
  "zvariant_utils",
 ]
 
@@ -6462,6 +6556,6 @@ dependencies = [
  "proc-macro2",
  "quote",
  "serde",
- "syn 2.0.114",
+ "syn 2.0.115",
  "winnow 0.7.14",
 ]
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index f01ce5e5..2051cbdf 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "collapseloader"
-version = "0.2.7"
+version = "0.2.8"
 description = "CollapseLoader"
 authors = ["dest4590"]
 edition = "2021"
@@ -11,39 +11,39 @@ name = "collapseloader_lib"
 crate-type = ["staticlib", "cdylib", "rlib"]
 
 [build-dependencies]
-tauri-build = { version = "2.5.3", features = [] }
+tauri-build = { version = "2.5.5", features = [] }
 
 [dependencies]
-tauri = { version = "2.9.5", features = ["devtools"] }
+tauri = { version = "2.10.2", features = ["devtools", "tray-icon"] }
 tauri-plugin-opener = "2.5.3"
 tauri-plugin-notification = "2.3.3"
-tauri-plugin-deep-link = "2.4.6"
-tauri-plugin-single-instance = { version = "2.3.7", features = ["deep-link"] }
+tauri-plugin-deep-link = "2.4.7"
+tauri-plugin-single-instance = { version = "2.4.0", features = ["deep-link"] }
 serde = { version = "1.0.228", features = ["derive"] }
 serde_json = "1.0.149"
 colored = "3.1.1"
-rand = "0.9.2"
-reqwest = { version = "0.13.1", features = ["blocking", "json", "stream"] }
+rand = "0.10.0"
+reqwest = { version = "0.13.2", features = ["blocking", "json", "stream"] }
 semver = "1.0.27"
-zip = "7.2.0"
+zip = "8.1.0"
 tokio = { version = "1.49.0", features = ["macros", "process"] }
-opener = "0.8.3"
-uuid = { version = "1.19.0", features = ["v4"] }
+opener = "0.8.4"
+uuid = { version = "1.21.0", features = ["v4"] }
 chrono = { version = "0.4.43", features = ["serde"] }
 paste = "1.0.15"
 open = "5.3.3"
 md5 = "0.8.0"
-discord-rich-presence = "1.0.0"
-futures-util = "0.3.31"
+discord-rich-presence = "1.1.0"
+futures-util = "0.3.32"
 base64 = "0.22.1"
 tauri-plugin-dialog = "2.6.0"
 dotenvy = "0.15.7"
 tauri-plugin-fs = "2.4.5"
 thiserror = "2.0.18"
-native-dialog = "0.9.4"
+native-dialog = "0.9.6"
 sysinfo = "0.37.2"
-socket2 = "0.6.1"
-sha2 = "0.11.0-rc.3"
+socket2 = "0.6.2"
+sha2 = "0.10.9"
 
 [target.'cfg(windows)'.dependencies]
 winreg = { version = "0.55.0" }
diff --git a/src-tauri/build.rs b/src-tauri/build.rs
index 98600f71..e495cb66 100644
--- a/src-tauri/build.rs
+++ b/src-tauri/build.rs
@@ -109,8 +109,12 @@ fn main() {
     let git_hash = execute_git_command(&["rev-parse", "HEAD"]).unwrap_or_else(|_| "unknown".into());
     let git_branch = execute_git_command(&["rev-parse", "--abbrev-ref", "HEAD"])
         .unwrap_or_else(|_| "unknown".into());
+    let git_commit_body = execute_git_command(&["show", "-s", "--format=%B", "HEAD"])
+        .unwrap_or_else(|_| "unknown".into());
+
     println!("cargo:rustc-env=GIT_HASH={git_hash}");
     println!("cargo:rustc-env=GIT_BRANCH={git_branch}");
+    println!("cargo:rustc-env=GIT_COMMIT_BODY={git_commit_body}");
 
     info(&format!("Build kind: {build_kind}"));
     info(&format!("Profile: {profile}"));
diff --git a/src-tauri/src/commands/clients.rs b/src-tauri/src/commands/clients.rs
index 06decd67..a55905b6 100644
--- a/src-tauri/src/commands/clients.rs
+++ b/src-tauri/src/commands/clients.rs
@@ -3,15 +3,16 @@ use core::clients::{
     client::{Client, CLIENT_LOGS},
     manager::ClientManager,
 };
-use serde::de::DeserializeOwned;
-use serde::Deserialize;
-use tauri::{AppHandle, State};
+use tauri::{AppHandle, Manager, State};
 
 use crate::core::{
-    clients::custom_clients::CustomClient,
-    network::analytics::Analytics,
-    storage::{custom_clients::CustomClientUpdate, data::Data},
-    utils::globals::{API_VERSION, SKIP_AGENT_OVERLAY_VERIFICATION},
+    clients::client::ClientType,
+    network::servers::{ServerConnectivityStatus, SERVERS},
+    utils::helpers::emit_to_main_window,
+};
+use crate::core::{
+    clients::custom_clients::CustomClient, storage::custom_clients::CustomClientUpdate,
+    utils::globals::SKIP_AGENT_OVERLAY_VERIFICATION,
 };
 use crate::core::{
     clients::{client::LaunchOptions, internal::agent_overlay::AgentOverlayManager},
@@ -21,14 +22,6 @@ use crate::core::{
     storage::settings::SETTINGS,
     utils::{discord_rpc, hashing::calculate_md5_hash, logging},
 };
-use crate::{
-    commands::utils::get_api_url,
-    core::{
-        clients::client::ClientType,
-        network::servers::{ServerConnectivityStatus, SERVERS},
-        utils::helpers::emit_to_main_window,
-    },
-};
 use crate::{
     core::{self, storage::data::DATA},
     log_debug, log_error, log_info, log_warn,
@@ -74,13 +67,15 @@ pub async fn initialize_api(state: State<'_, AppState>) -> Result<(), String> {
         return Err("Fetched client list is empty".to_string());
     }
 
-    let mut manager = state
-        .clients
-        .manager
-        .lock()
-        .map_err(|_| "Failed to lock state".to_string())?;
+    {
+        let mut manager = state
+            .clients
+            .manager
+            .lock()
+            .map_err(|_| "Failed to lock state".to_string())?;
 
-    manager.clients = clients;
+        manager.clients = clients;
+    }
 
     Ok(())
 }
@@ -112,39 +107,6 @@ pub fn get_clients(state: State<'_, AppState>) -> Vec<Client> {
         .unwrap_or_default()
 }
 
-#[derive(Deserialize)]
-struct ApiResponse<T> {
-    success: bool,
-    data: T,
-    #[serde(default)]
-    error: Option<String>,
-    #[serde(default)]
-    #[allow(dead_code)]
-    timestamp: Option<i64>,
-}
-
-async fn extract_api_data<T: DeserializeOwned>(response: reqwest::Response) -> Result<T, String> {
-    if !response.status().is_success() {
-        return Err(format!("API returned error: {}", response.status()));
-    }
-
-    let ApiResponse {
-        success,
-        data,
-        error,
-        ..
-    } = response
-        .json::<ApiResponse<T>>()
-        .await
-        .map_err(|e| format!("Failed to parse API response: {e}"))?;
-
-    if !success {
-        return Err(error.unwrap_or_else(|| "API returned unsuccessful response".to_string()));
-    }
-
-    Ok(data)
-}
-
 #[tauri::command]
 pub async fn launch_client(
     id: u32,
@@ -154,34 +116,7 @@ pub async fn launch_client(
 ) -> Result<(), String> {
     let client = get_client_by_id(id, &state.clients.manager)?;
 
-    let filename_for_if = if client.filename.contains("fabric/") {
-        client.filename.replace("fabric/", "")
-    } else if client.filename.contains("/fabric") {
-        client.filename.replace("/fabric", "")
-    } else {
-        client.filename.clone()
-    };
-
-    const MAIN_SEPARATOR: char = std::path::MAIN_SEPARATOR;
-
-    let file_name = Data::get_filename(&client.filename);
-    let jar_path = match client.client_type {
-        ClientType::Default => {
-            DATA.get_local(&format!("{file_name}{MAIN_SEPARATOR}{}", client.filename))
-        }
-        ClientType::Fabric => DATA.get_local(&format!(
-            "{file_name}{MAIN_SEPARATOR}mods{MAIN_SEPARATOR}{filename_for_if}"
-        )),
-        ClientType::Forge => {
-            let jar_basename = std::path::Path::new(&client.filename)
-                .file_name()
-                .and_then(|n| n.to_str())
-                .unwrap_or(&client.filename);
-            DATA.get_local(&format!(
-                "{file_name}{MAIN_SEPARATOR}mods{MAIN_SEPARATOR}{jar_basename}"
-            ))
-        }
-    };
+    let (_, jar_path) = client.get_launch_paths()?;
 
     if !jar_path.exists() {
         log_warn!(
@@ -331,6 +266,17 @@ pub async fn launch_client(
 
     let options = LaunchOptions::new(app_handle.clone(), user_token.clone(), false);
 
+    let minimize_on_launch = {
+        let settings = SETTINGS.lock().unwrap();
+        settings.minimize_to_tray_on_launch.value
+    };
+
+    if minimize_on_launch {
+        if let Some(window) = app_handle.get_webview_window("main") {
+            let _ = window.hide();
+        }
+    }
+
     client.run(options, state.clients.manager.clone()).await
 }
 
@@ -397,7 +343,6 @@ pub async fn download_client_only(
 
     let requirements_download = client.download_requirements(&app_handle);
 
-    Analytics::send_client_download_analytics(id);
     log_debug!("Sent client download analytics for ID: {}", id);
 
     tokio::try_join!(client_download, requirements_download)?;
@@ -561,38 +506,6 @@ pub async fn delete_client(id: u32, state: State<'_, AppState>) -> Result<(), St
     }
 }
 
-#[tauri::command]
-pub async fn get_client_details(client_id: u32) -> Result<serde_json::Value, String> {
-    log_debug!("Fetching details for client ID: {}", client_id);
-    let api_url = get_api_url().await?;
-    let base = api_url.trim_end_matches('/').to_string();
-    let url = format!("{base}/api/{API_VERSION}/clients/{client_id}/detailed");
-    log_debug!("Requesting client details from URL: {}", url);
-
-    let client = reqwest::Client::new();
-    let response = client.get(&url).send().await.map_err(|e| {
-        log_error!("Failed to fetch client details from {}: {}", url, e);
-        format!("Failed to fetch client details: {e}")
-    })?;
-
-    if !response.status().is_success() {
-        log_warn!(
-            "API returned non-success status ({}) for client details request to {}",
-            response.status(),
-            url
-        );
-        return Err(format!("API returned error: {}", response.status()));
-    }
-
-    let details: serde_json::Value = response.json().await.map_err(|e| {
-        log_error!("Failed to parse client details JSON: {}", e);
-        format!("Failed to parse client details: {e}")
-    })?;
-
-    log_info!("Successfully fetched details for client ID: {}", client_id);
-    Ok(details)
-}
-
 #[tauri::command]
 pub fn increment_client_counter(
     id: u32,
@@ -665,14 +578,17 @@ pub fn add_custom_client(
     filename: String,
     file_path: String,
     main_class: String,
+    java_path: Option<String>,
+    java_args: Option<String>,
     state: State<'_, AppState>,
 ) -> Result<(), String> {
     log_info!("Adding new custom client: '{}'", name);
     let mut manager = state.custom_clients.lock();
 
     let path_buf = PathBuf::from(file_path);
-
-    let custom_client = CustomClient::new(0, name, version, filename, path_buf, main_class);
+    let mut custom_client = CustomClient::new(0, name, version, filename, path_buf, main_class);
+    custom_client.java_path = java_path;
+    custom_client.java_args = java_args;
 
     log_debug!("New custom client details: {:?}", custom_client);
     manager.add_client(custom_client)
@@ -692,6 +608,8 @@ pub fn update_custom_client(
     name: Option<String>,
     version: Option<String>,
     main_class: Option<String>,
+    java_path: Option<String>,
+    java_args: Option<String>,
     state: State<'_, AppState>,
 ) -> Result<(), String> {
     log_info!("Updating custom client with ID: {}", id);
@@ -701,6 +619,8 @@ pub fn update_custom_client(
         name,
         version,
         main_class,
+        java_path,
+        java_args,
     };
 
     log_debug!("Applying updates to custom client ID {}: {:?}", id, updates);
@@ -751,6 +671,17 @@ pub async fn launch_custom_client(
 
     let options = LaunchOptions::new(app_handle.clone(), user_token.clone(), true);
 
+    let minimize_on_launch = {
+        let settings = SETTINGS.lock().unwrap();
+        settings.minimize_to_tray_on_launch.value
+    };
+
+    if minimize_on_launch {
+        if let Some(window) = app_handle.get_webview_window("main") {
+            let _ = window.hide();
+        }
+    }
+
     client.run(options, state.clients.manager.clone()).await
 }
 
@@ -769,6 +700,85 @@ pub async fn get_running_custom_client_ids() -> Vec<u32> {
     })
 }
 
+#[tauri::command]
+pub async fn install_mod_from_url(
+    id: u32,
+    url: String,
+    filename: String,
+    state: State<'_, AppState>,
+) -> Result<(), String> {
+    log_info!(
+        "Installing mod for client {}: {} from {}",
+        id,
+        filename,
+        url
+    );
+
+    let client = get_client_by_id(id, &state.clients.manager)?;
+
+    let mods_folder_relative = match client.client_type {
+        ClientType::Fabric | ClientType::Forge | ClientType::Default => {
+            let (folder, _) = client.get_launch_paths().map_err(|e| e.to_string())?;
+            let root = DATA.root_dir.lock().unwrap().clone();
+            let relative = folder
+                .strip_prefix(&root)
+                .map_err(|_| "Client folder is outside of root directory".to_string())?;
+            relative.join("mods")
+        }
+    };
+
+    let mods_folder_str = mods_folder_relative
+        .to_str()
+        .ok_or_else(|| "Invalid mods folder path".to_string())?;
+
+    DATA.download_to_folder(&url, mods_folder_str).await?;
+
+    log_info!(
+        "Successfully installed mod: {} to {}",
+        filename,
+        mods_folder_str
+    );
+
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn list_installed_mods(
+    id: u32,
+    state: State<'_, AppState>,
+) -> Result<Vec<String>, String> {
+    let client = get_client_by_id(id, &state.clients.manager)?;
+
+    let mods_folder = match client.client_type {
+        ClientType::Fabric | ClientType::Forge | ClientType::Default => {
+            let (folder, _) = client.get_launch_paths().map_err(|e| e.to_string())?;
+            folder.join("mods")
+        }
+    };
+
+    if !mods_folder.exists() {
+        return Ok(Vec::new());
+    }
+
+    let mut mods = Vec::new();
+    let mut entries = tokio::fs::read_dir(mods_folder)
+        .await
+        .map_err(|e| format!("Failed to read mods directory: {}", e))?;
+
+    while let Some(entry) = entries.next_entry().await.map_err(|e| e.to_string())? {
+        let path = entry.path();
+        if path.is_file() {
+            if let Some(filename) = path.file_name().and_then(|n| n.to_str()) {
+                if filename.ends_with(".jar") {
+                    mods.push(filename.to_string());
+                }
+            }
+        }
+    }
+
+    Ok(mods)
+}
+
 #[tauri::command]
 pub async fn stop_custom_client(id: u32, state: State<'_, AppState>) -> Result<(), String> {
     log_info!("Attempting to stop custom client with ID: {}", id);
@@ -789,64 +799,3 @@ pub async fn stop_custom_client(id: u32, state: State<'_, AppState>) -> Result<(
         .await
         .map_err(|e| format!("Stop custom client task error: {e}"))?
 }
-
-#[tauri::command]
-pub async fn get_client_comments(client_id: u32) -> Result<serde_json::Value, String> {
-    log_debug!("Fetching comments for client ID: {}", client_id);
-    let api_url = get_api_url().await?;
-    let base = api_url.trim_end_matches('/').to_string();
-    let url = format!("{base}/api/{API_VERSION}/clients/{client_id}/comments");
-
-    let client = reqwest::Client::new();
-    let response = client.get(&url).send().await.map_err(|e| {
-        log_error!("Failed to fetch client comments from {}: {}", url, e);
-        format!("Failed to fetch client comments: {e}")
-    })?;
-
-    extract_api_data(response).await
-}
-
-#[tauri::command]
-pub async fn add_client_comment(
-    client_id: u32,
-    content: String,
-    user_token: String,
-) -> Result<serde_json::Value, String> {
-    let api_url = get_api_url().await?;
-    let base = api_url.trim_end_matches('/').to_string();
-    let url = format!("{base}/api/{API_VERSION}/clients/{client_id}/comments");
-
-    let client = reqwest::Client::new();
-    let response = client
-        .post(&url)
-        .header("Authorization", format!("Bearer {}", user_token))
-        .json(&serde_json::json!({ "content": content }))
-        .send()
-        .await
-        .map_err(|e| format!("Failed to add comment: {e}"))?;
-
-    extract_api_data(response).await
-}
-
-#[tauri::command]
-pub async fn delete_client_comment(
-    client_id: u32,
-    comment_id: u32,
-    user_token: String,
-) -> Result<(), String> {
-    let api_url = get_api_url().await?;
-    let base = api_url.trim_end_matches('/').to_string();
-    let url = format!("{base}/api/{API_VERSION}/clients/{client_id}/comments/{comment_id}");
-
-    let client = reqwest::Client::new();
-    let response = client
-        .delete(&url)
-        .header("Authorization", format!("Bearer {}", user_token))
-        .send()
-        .await
-        .map_err(|e| format!("Failed to delete comment: {e}"))?;
-
-    extract_api_data::<serde_json::Value>(response)
-        .await
-        .map(|_| ())
-}
diff --git a/src-tauri/src/commands/irc.rs b/src-tauri/src/commands/irc.rs
index 52d609b5..5ca2581f 100644
--- a/src-tauri/src/commands/irc.rs
+++ b/src-tauri/src/commands/irc.rs
@@ -108,8 +108,10 @@ pub async fn connect_irc(
                         Ok(0) => {
                             log_info!("IRC connection closed by server");
                             app_clone.emit("irc-disconnected", ()).unwrap_or_default();
-                            let mut writer_guard = writer_for_reader.lock().await;
-                            *writer_guard = None;
+                            {
+                                let mut writer_guard = writer_for_reader.lock().await;
+                                *writer_guard = None;
+                            }
                             break;
                         }
                         Ok(_) => {
@@ -123,8 +125,10 @@ pub async fn connect_irc(
                                 .emit("irc-error", e.to_string())
                                 .unwrap_or_default();
                             app_clone.emit("irc-disconnected", ()).unwrap_or_default();
-                            let mut writer_guard = writer_for_reader.lock().await;
-                            *writer_guard = None;
+                            {
+                                let mut writer_guard = writer_for_reader.lock().await;
+                                *writer_guard = None;
+                            }
                             break;
                         }
                     }
@@ -142,8 +146,8 @@ pub async fn connect_irc(
 
 #[tauri::command]
 pub async fn disconnect_irc(state: State<'_, IrcState>) -> Result<(), String> {
-    let mut writer = state.writer.lock().await;
-    if let Some(mut w) = writer.take() {
+    let value = state.writer.lock().await.take();
+    if let Some(mut w) = value {
         let _ = w.shutdown().await;
     }
     Ok(())
diff --git a/src-tauri/src/commands/presets.rs b/src-tauri/src/commands/presets.rs
index 4fb2c75f..c61d6463 100644
--- a/src-tauri/src/commands/presets.rs
+++ b/src-tauri/src/commands/presets.rs
@@ -8,7 +8,9 @@ use uuid::Uuid;
 pub struct CreatePresetInput {
     pub name: String,
     pub description: Option<String>,
+    #[serde(rename = "customCSS", alias = "customCss")]
     pub custom_css: String,
+    #[serde(rename = "enableCustomCSS", alias = "enableCustomCss")]
     pub enable_custom_css: bool,
 
     // daisyui
@@ -33,6 +35,13 @@ pub struct CreatePresetInput {
     pub warning_content: Option<String>,
     pub error: Option<String>,
     pub error_content: Option<String>,
+
+    #[serde(rename = "backgroundImage")]
+    pub background_image: Option<String>,
+    #[serde(rename = "backgroundBlur")]
+    pub background_blur: Option<f64>,
+    #[serde(rename = "backgroundOpacity")]
+    pub background_opacity: Option<f64>,
 }
 
 #[derive(serde::Deserialize)]
@@ -41,7 +50,9 @@ pub struct UpdatePresetInput {
     pub id: String,
     pub name: String,
     pub description: Option<String>,
+    #[serde(rename = "customCSS", alias = "customCss")]
     pub custom_css: String,
+    #[serde(rename = "enableCustomCSS", alias = "enableCustomCss")]
     pub enable_custom_css: bool,
 
     // daisyui
@@ -66,6 +77,13 @@ pub struct UpdatePresetInput {
     pub warning_content: Option<String>,
     pub error: Option<String>,
     pub error_content: Option<String>,
+
+    #[serde(rename = "backgroundImage")]
+    pub background_image: Option<String>,
+    #[serde(rename = "backgroundBlur")]
+    pub background_blur: Option<f64>,
+    #[serde(rename = "backgroundOpacity")]
+    pub background_opacity: Option<f64>,
 }
 
 #[tauri::command]
@@ -121,6 +139,10 @@ pub fn create_preset(input: CreatePresetInput) -> Result<ThemePreset, String> {
         warning_content: input.warning_content,
         error: input.error,
         error_content: input.error_content,
+
+        background_image: input.background_image,
+        background_blur: input.background_blur,
+        background_opacity: input.background_opacity,
     };
 
     preset_manager.add_preset(preset.clone())?;
@@ -174,6 +196,10 @@ pub fn update_preset(input: UpdatePresetInput) -> Result<ThemePreset, String> {
         warning_content: input.warning_content,
         error: input.error,
         error_content: input.error_content,
+
+        background_image: input.background_image,
+        background_blur: input.background_blur,
+        background_opacity: input.background_opacity,
     };
 
     preset_manager.update_preset(preset.clone())?;
@@ -228,6 +254,10 @@ pub fn duplicate_preset(id: String, new_name: String) -> Result<ThemePreset, Str
         warning_content: existing_preset.warning_content.clone(),
         error: existing_preset.error.clone(),
         error_content: existing_preset.error_content.clone(),
+
+        background_image: existing_preset.background_image.clone(),
+        background_blur: existing_preset.background_blur,
+        background_opacity: existing_preset.background_opacity,
     };
 
     preset_manager.add_preset(new_preset.clone())?;
diff --git a/src-tauri/src/commands/settings.rs b/src-tauri/src/commands/settings.rs
index cd25cdc7..fba5a707 100644
--- a/src-tauri/src/commands/settings.rs
+++ b/src-tauri/src/commands/settings.rs
@@ -46,8 +46,7 @@ pub fn save_settings(input_settings: InputSettings) -> Result<(), String> {
     #[cfg(target_os = "windows")]
     let new_dpi_bypass_value = input_settings.dpi_bypass.value;
 
-    let input_settings_clone = input_settings.clone();
-    let new_settings = Settings::from_input(input_settings_clone, config_path);
+    let new_settings = Settings::from_input(input_settings, config_path);
     *current_settings = new_settings.clone();
 
     new_settings.save_to_disk();
@@ -66,11 +65,15 @@ pub fn save_settings(input_settings: InputSettings) -> Result<(), String> {
 
     #[cfg(target_os = "windows")]
     {
-        if dpi_bypass_changed && new_dpi_bypass_value {
-            log_info!("DPI bypass enabled. Preparing to download and run package");
-
-            if let Err(e) = dpi::download_dpi_bypass() {
-                log_error!("Failed to initiate DPI bypass setup: {e}");
+        if dpi_bypass_changed {
+            if new_dpi_bypass_value {
+                log_info!("DPI bypass enabled. Preparing to download and run package");
+                if let Err(e) = dpi::enable_dpi_bypass_async() {
+                    log_error!("Failed to initiate DPI bypass setup: {e}");
+                }
+            } else {
+                log_info!("DPI bypass disabled. Killing existing processes");
+                dpi::kill_winws();
             }
         }
     }
@@ -323,7 +326,6 @@ pub fn is_telemetry_consent_shown() -> Result<bool, String> {
 
 #[tauri::command]
 pub fn set_custom_clients_display(display: String) -> Result<(), String> {
-    log_info!("Setting custom clients display to: {}", display);
     let mut flags = FLAGS_MANAGER.lock().unwrap();
     flags.set_custom_clients_display(display);
     flags.save_to_disk();
diff --git a/src-tauri/src/commands/updater.rs b/src-tauri/src/commands/updater.rs
index c3c2facf..ff12e06b 100644
--- a/src-tauri/src/commands/updater.rs
+++ b/src-tauri/src/commands/updater.rs
@@ -374,7 +374,7 @@ exit
 }
 
 #[tauri::command]
-pub const fn get_changelog() -> Vec<ChangelogEntry> {
+pub fn get_changelog() -> Vec<ChangelogEntry> {
     Vec::new()
 }
 
diff --git a/src-tauri/src/commands/utils.rs b/src-tauri/src/commands/utils.rs
index d3029161..f5f14c4c 100644
--- a/src-tauri/src/commands/utils.rs
+++ b/src-tauri/src/commands/utils.rs
@@ -3,8 +3,14 @@ use base64::{engine::general_purpose, Engine};
 use crate::commands::clients::{
     get_running_client_ids, get_running_custom_client_ids, stop_client, stop_custom_client,
 };
+use crate::core::storage::accounts::ACCOUNT_MANAGER;
+use crate::core::storage::custom_clients::CUSTOM_CLIENT_MANAGER;
+use crate::core::storage::favorites::FAVORITE_MANAGER;
+use crate::core::storage::flags::FLAGS_MANAGER;
+use crate::core::storage::presets::PRESET_MANAGER;
+use crate::core::storage::settings::SETTINGS;
 use crate::core::utils::discord_rpc;
-use crate::core::utils::globals::{API_VERSION, CODENAME};
+use crate::core::utils::globals::{API_VERSION, CDN_SERVERS, CODENAME};
 use crate::core::utils::helpers::is_development_enabled;
 use crate::core::{network::servers::SERVERS, storage::data::DATA};
 use crate::AppState;
@@ -19,6 +25,7 @@ pub fn get_version() -> Result<serde_json::Value, String> {
       "version":  env!("CARGO_PKG_VERSION").to_string(),
       "codename": CODENAME,
       "commitHash": env!("GIT_HASH").to_string(),
+      "commitMessage": env!("GIT_COMMIT_BODY").to_string(),
       "branch": env!("GIT_BRANCH").to_string(),
       "development": env!("DEVELOPMENT").to_lowercase(),
     });
@@ -33,7 +40,7 @@ pub fn is_development() -> Result<bool, String> {
 
 #[tauri::command]
 pub fn open_data_folder() -> Result<String, String> {
-    let path = DATA.root_dir.to_string_lossy().to_string();
+    let path = DATA.root_dir.lock().unwrap().to_string_lossy().to_string();
     log_info!("Opening data folder at: {}", path);
 
     if let Err(e) = open::that(&path) {
@@ -57,7 +64,7 @@ pub async fn reset_requirements() -> Result<(), String> {
 
 #[tauri::command]
 pub fn get_data_folder() -> Result<String, String> {
-    let path = DATA.root_dir.to_string_lossy().to_string();
+    let path = DATA.root_dir.lock().unwrap().to_string_lossy().to_string();
     log_debug!("Getting data folder path: {}", path);
     Ok(path)
 }
@@ -92,9 +99,9 @@ pub async fn change_data_folder(
     }
 
     log_info!("Stopping all running clients before changing data folder");
-    let running: Vec<u32> = get_running_client_ids(state.clone())
-        .await
-        .map_err(|e| e.to_string())?;
+
+    let running: Vec<u32> = get_running_client_ids(state.clone()).await?;
+
     for id in running {
         log_debug!("Stopping client with ID: {}", id);
         let _ = stop_client(id, state.clone()).await;
@@ -106,7 +113,7 @@ pub async fn change_data_folder(
         let _ = stop_custom_client(id, state.clone()).await;
     }
 
-    let current_dir = DATA.root_dir.clone();
+    let current_dir = DATA.root_dir.lock().unwrap().clone();
     log_debug!("Current data directory is: {:?}", current_dir);
 
     if mode == "move" {
@@ -121,6 +128,13 @@ pub async fn change_data_folder(
                         let entry = entry.map_err(|e| e.to_string())?;
                         let path = entry.path();
                         let target = dst.join(entry.file_name());
+
+                        let file_type = entry.file_type().map_err(|e| e.to_string())?;
+                        if file_type.is_symlink() {
+                            log_debug!("Skipping symlink during move: {:?}", path);
+                            continue;
+                        }
+
                         if path.is_dir() {
                             fs::create_dir_all(&target).map_err(|e| e.to_string())?;
                             copy_dir_recursive(&path, &target)?;
@@ -170,10 +184,45 @@ pub async fn change_data_folder(
         override_file
     );
     fs::write(&override_file, &new_path).map_err(|e| {
-        log_error!("Failed to write override file: {}", e);
-        format!("Failed to write override: {e}")
+        log_error!("Failed to write to override file: {:?}", e);
+        format!("Failed to write to override file: {e}")
     })?;
 
+    {
+        let mut root = DATA.root_dir.lock().unwrap();
+        *root = PathBuf::from(new_path.clone());
+    }
+
+    let new_root = PathBuf::from(new_path.clone());
+
+    if let Ok(mut s) = SETTINGS.lock() {
+        s.config_path = new_root.join("config.json");
+        log_debug!("Updated SETTINGS path: {:?}", s.config_path);
+    }
+    if let Ok(mut pm) = PRESET_MANAGER.lock() {
+        pm.config_path = new_root.join("presets.json");
+        log_debug!("Updated PRESET_MANAGER path: {:?}", pm.config_path);
+    }
+    if let Ok(mut am) = ACCOUNT_MANAGER.lock() {
+        am.accounts_path = new_root.join("accounts.json");
+        log_debug!("Updated ACCOUNT_MANAGER path: {:?}", am.accounts_path);
+    }
+    if let Ok(mut ccm) = CUSTOM_CLIENT_MANAGER.lock() {
+        ccm.custom_clients_path = new_root.join("custom_clients.json");
+        log_debug!(
+            "Updated CUSTOM_CLIENT_MANAGER path: {:?}",
+            ccm.custom_clients_path
+        );
+    }
+    if let Ok(mut fm) = FAVORITE_MANAGER.lock() {
+        fm.favorites_path = new_root.join("favorites.json");
+        log_debug!("Updated FAVORITE_MANAGER path: {:?}", fm.favorites_path);
+    }
+    if let Ok(mut f) = FLAGS_MANAGER.lock() {
+        f.flags_path = new_root.join("flags.json");
+        log_debug!("Updated FLAGS_MANAGER path: {:?}", f.flags_path);
+    }
+
     if let Some(window) = app.get_webview_window("main") {
         log_debug!("Emitting 'data-folder-changed' event to main window");
         let _ = window.emit("data-folder-changed", &new_path);
@@ -190,6 +239,19 @@ pub async fn get_api_url() -> Result<String, String> {
         .map_or_else(|| Ok("https://atlas.collapseloader.org".to_string()), Ok)
 }
 
+#[tauri::command]
+pub async fn get_cdn_url() -> Result<String, String> {
+    SERVERS.get_cdn_server_url().map_or_else(
+        || {
+            Ok(CDN_SERVERS
+                .first()
+                .map(|s| s.url.clone())
+                .unwrap_or_default())
+        },
+        Ok,
+    )
+}
+
 #[tauri::command]
 pub fn get_api_version() -> Result<String, String> {
     Ok(API_VERSION.to_string())
diff --git a/src-tauri/src/core/clients/client.rs b/src-tauri/src/core/clients/client.rs
index fd9c9a26..6cee6716 100644
--- a/src-tauri/src/core/clients/client.rs
+++ b/src-tauri/src/core/clients/client.rs
@@ -23,10 +23,10 @@ use crate::core::storage::{
 use crate::core::utils::{
     globals::{
         AGENT_FILE, AGENT_OVERLAY_FOLDER, ASSETS_FABRIC_FOLDER, ASSETS_FABRIC_ZIP, ASSETS_FOLDER,
-        ASSETS_ZIP, CUSTOM_CLIENTS_FOLDER, FILE_EXTENSION, IS_LINUX, JDK21_FOLDER, JDK8_FOLDER,
-        JDK8_ZIP, LEGACY_SUFFIX, LIBRARIES_FABRIC_FOLDER, LIBRARIES_FOLDER,
-        LIBRARIES_LEGACY_FOLDER, LIBRARIES_LEGACY_ZIP, LIBRARIES_ZIP, LINUX_SUFFIX,
-        MINECRAFT_VERSIONS_FOLDER, MODS_FOLDER, NATIVES_FOLDER, NATIVES_LEGACY_ZIP,
+        ASSETS_ZIP, CUSTOM_CLIENTS_FOLDER, FABRIC_DEPS_URL, FILE_EXTENSION, FORGE_DEPS_URL,
+        IS_LINUX, JDK21_FOLDER, JDK8_FOLDER, LEGACY_SUFFIX, LIBRARIES_FABRIC_FOLDER,
+        LIBRARIES_FOLDER, LIBRARIES_LEGACY_FOLDER, LIBRARIES_LEGACY_ZIP, LIBRARIES_ZIP,
+        LINUX_SUFFIX, MINECRAFT_VERSIONS_FOLDER, MODS_FOLDER, NATIVES_FOLDER, NATIVES_LEGACY_ZIP,
         NATIVES_LINUX_ZIP, NATIVES_ZIP, PATH_SEPARATOR,
     },
     hashing::calculate_md5_hash,
@@ -70,12 +70,6 @@ fn is_minecraft_version_dir_name(name: &str) -> bool {
         .all(|p| !p.is_empty() && p.chars().all(|c| c.is_ascii_digit()))
 }
 
-fn is_fabric_loader_jar(path: &Path) -> bool {
-    path.file_name()
-        .and_then(|n| n.to_str())
-        .is_some_and(|n| n.starts_with("fabric-loader") && n.ends_with(".jar"))
-}
-
 fn collect_jars_recursive(dir: &Path, skip_root_mc_version_dirs: bool) -> Vec<PathBuf> {
     let mut jars = Vec::new();
 
@@ -159,6 +153,8 @@ impl Meta {
                     .and_then(|n| n.to_str())
                     .unwrap_or(filename);
                 DATA.root_dir
+                    .lock()
+                    .unwrap()
                     .join(Data::get_filename(filename))
                     .join(MODS_FOLDER)
                     .join(jar_basename)
@@ -170,6 +166,8 @@ impl Meta {
                         .and_then(|n| n.to_str())
                         .unwrap_or(filename);
                     DATA.root_dir
+                        .lock()
+                        .unwrap()
                         .join(Data::get_filename(filename))
                         .join(MODS_FOLDER)
                         .join(jar_basename)
@@ -235,6 +233,10 @@ pub struct Client {
     pub client_type: ClientType,
     #[serde(default = "default_created_at")]
     pub created_at: DateTime<Utc>,
+    #[serde(default)]
+    pub java_path: Option<String>,
+    #[serde(default)]
+    pub java_args: Option<String>,
 }
 
 #[derive(Serialize, Deserialize, Clone, Debug, PartialEq, Eq)]
@@ -244,7 +246,7 @@ pub struct Requirement {
     size: Option<u64>,
 }
 
-const fn default_meta() -> Meta {
+fn default_meta() -> Meta {
     Meta {
         is_new: false,
         is_fabric: false,
@@ -267,7 +269,7 @@ pub struct LaunchOptions {
 }
 
 impl LaunchOptions {
-    pub const fn new(app_handle: AppHandle, user_token: String, is_custom: bool) -> Self {
+    pub fn new(app_handle: AppHandle, user_token: String, is_custom: bool) -> Self {
         Self {
             app_handle,
             user_token,
@@ -292,28 +294,35 @@ impl Client {
 
     fn jdk_zip_name(&self) -> String {
         if self.client_type == ClientType::Forge {
-            JDK8_ZIP.to_string()
+            format!("misc/{JDK8_FOLDER}.zip")
         } else {
-            format!("{JDK21_FOLDER}.zip")
+            format!("misc/{JDK21_FOLDER}.zip")
         }
     }
 
     fn java_executable_path(&self) -> PathBuf {
         DATA.root_dir
+            .lock()
+            .unwrap()
             .join(self.jdk_folder_name())
             .join("bin")
             .join(format!("java{FILE_EXTENSION}"))
     }
 
-    fn get_launch_paths(&self) -> Result<(PathBuf, PathBuf), String> {
+    pub fn get_launch_paths(&self) -> Result<(PathBuf, PathBuf), String> {
         if self.meta.is_custom {
-            let folder = DATA.root_dir.join(CUSTOM_CLIENTS_FOLDER).join(&self.name);
+            let folder = DATA
+                .root_dir
+                .lock()
+                .unwrap()
+                .join(CUSTOM_CLIENTS_FOLDER)
+                .join(&self.name);
             let jar = folder.join(&self.filename);
             return Ok((folder, jar));
         }
 
         let base_name = Data::get_filename(&self.filename);
-        let folder = DATA.root_dir.join(&base_name);
+        let folder = DATA.root_dir.lock().unwrap().join(&base_name);
 
         match self.client_type {
             ClientType::Forge | ClientType::Fabric => {
@@ -324,11 +333,14 @@ impl Client {
                 Ok((folder.clone(), folder.join(MODS_FOLDER).join(jar_basename)))
             }
             ClientType::Default => {
+                let jar_basename = Path::new(&self.filename)
+                    .file_name()
+                    .and_then(|n| n.to_str())
+                    .unwrap_or(&self.filename);
                 if self.filename.contains("fabric/") {
-                    let jar_basename = Path::new(&self.filename).file_name().unwrap();
                     Ok((folder.clone(), folder.join(MODS_FOLDER).join(jar_basename)))
                 } else {
-                    Ok((folder.clone(), folder.join(&self.filename)))
+                    Ok((folder.clone(), folder.join(jar_basename)))
                 }
             }
         }
@@ -339,10 +351,14 @@ impl Client {
         match self.client_type {
             ClientType::Fabric => DATA
                 .root_dir
+                .lock()
+                .unwrap()
                 .join(MINECRAFT_VERSIONS_FOLDER)
                 .join(format!("fabric_{}.jar", safe_ver)),
             ClientType::Forge => DATA
                 .root_dir
+                .lock()
+                .unwrap()
                 .join(MINECRAFT_VERSIONS_FOLDER)
                 .join(format!("forge_{}.jar", safe_ver)),
             ClientType::Default => self.get_launch_paths().unwrap_or_default().1,
@@ -380,9 +396,17 @@ impl Client {
                 let client_base = Data::get_filename(&self.filename);
                 let mods_folder = format!("{client_base}{MAIN_SEPARATOR}{MODS_FOLDER}");
                 let safe_ver = sanitize_version_for_paths(&self.version);
-                let forge_jar_name = format!("forge_{}.jar", safe_ver);
+                let forge_jar_name =
+                    format!("misc/{MINECRAFT_VERSIONS_FOLDER}/forge_{}.jar", safe_ver);
 
-                DATA.download_to_folder(&self.filename, &mods_folder)
+                let remote_path = if self.filename.contains('/') {
+                    let parts: Vec<&str> = self.filename.split('/').collect();
+                    format!("clients/{}/jars/{}", parts[0], parts[1])
+                } else {
+                    format!("clients/forge/jars/{}", self.filename)
+                };
+
+                DATA.download_to_folder(&remote_path, &mods_folder)
                     .await
                     .map_err(|e| format!("Forge Mod download failed: {e}"))?;
 
@@ -390,7 +414,26 @@ impl Client {
                     .await
                     .map_err(|e| format!("Forge MC Jar download failed: {e}"))
             }
-            _ => DATA.download(&self.filename).await,
+            ClientType::Fabric => {
+                let client_base = Data::get_filename(&self.filename);
+                let mods_folder = format!("{client_base}{MAIN_SEPARATOR}{MODS_FOLDER}");
+                let remote_path = if self.filename.contains('/') {
+                    let parts: Vec<&str> = self.filename.split('/').collect();
+                    format!("clients/{}/jars/{}", parts[0], parts[1])
+                } else {
+                    format!("clients/fabric/jars/{}", self.filename)
+                };
+                DATA.download_to_folder(&remote_path, &mods_folder).await
+            }
+            _ => {
+                let remote_path = if self.filename.contains('/') {
+                    let parts: Vec<&str> = self.filename.split('/').collect();
+                    format!("clients/{}/jars/{}", parts[0], parts[1])
+                } else {
+                    format!("clients/vanilla/jars/{}", self.filename)
+                };
+                DATA.download(&remote_path).await
+            }
         };
 
         if let Err(e) = download_result {
@@ -409,14 +452,7 @@ impl Client {
             return Err(e);
         }
 
-        ClientManager::get_client(manager, self.id, |c| {
-            c.meta.installed = true;
-            c.meta.size = self.size;
-        });
-        log_debug!(
-            "Client '{}' downloaded and installed successfully",
-            self.name
-        );
+        log_debug!("Client '{}' download procedure finished", self.name);
 
         Ok(())
     }
@@ -472,6 +508,76 @@ impl Client {
         Ok(())
     }
 
+    async fn download_dependency(
+        &self,
+        remote_path: &str,
+        local_folder_rel: &str,
+        local_file_abs: &Path,
+        expected_md5: Option<&String>,
+        name_for_logs: &str,
+    ) -> Result<(), String> {
+        let mut need_download = true;
+
+        if local_file_abs.exists() {
+            if let Some(expected) = expected_md5 {
+                let ok = Data::verify_file_md5(local_file_abs, expected)
+                    .await
+                    .map_err(|e| format!("Failed to verify MD5 for {name_for_logs}: {e}"))?;
+                if ok {
+                    need_download = false;
+                } else {
+                    log_warn!(
+                        "MD5 mismatch for {}. Expected: {}. Redownloading...",
+                        name_for_logs,
+                        expected
+                    );
+                    let _ = std::fs::remove_file(local_file_abs);
+                    need_download = true;
+                }
+            } else {
+                need_download = false;
+            }
+        }
+
+        if need_download {
+            log_info!("Downloading dependency: {}", remote_path);
+            DATA.download_to_folder(remote_path, local_folder_rel)
+                .await
+                .map_err(|e| format!("Failed to download dependency {name_for_logs}: {e}"))?;
+
+            if let Some(expected) = expected_md5 {
+                let ok = Data::verify_file_md5(local_file_abs, expected)
+                    .await
+                    .map_err(|e| format!("Failed to verify MD5 for {name_for_logs}: {e}"))?;
+                if !ok {
+                    log_warn!(
+                        "MD5 mismatch after download for {}. Retrying...",
+                        name_for_logs
+                    );
+                    let _ = std::fs::remove_file(local_file_abs);
+                    DATA.download_to_folder(remote_path, local_folder_rel)
+                        .await
+                        .map_err(|e| {
+                            format!("Failed to redownload dependency {name_for_logs}: {e}")
+                        })?;
+
+                    let ok2 = Data::verify_file_md5(local_file_abs, expected)
+                        .await
+                        .map_err(|e| {
+                            format!("Failed to verify MD5 for {name_for_logs} after retry: {e}")
+                        })?;
+                    if !ok2 {
+                        let _ = std::fs::remove_file(local_file_abs);
+                        return Err(format!(
+                            "MD5 mismatch for {name_for_logs} after retry. Aborting."
+                        ));
+                    }
+                }
+            }
+        }
+        Ok(())
+    }
+
     async fn download_fabric_mods(&self) -> Result<(), String> {
         if self.client_type != ClientType::Fabric {
             return Ok(());
@@ -480,77 +586,61 @@ impl Client {
         if let Some(mods) = &self.dependencies {
             let client_base = Data::get_filename(&self.filename);
             let mods_folder_rel = format!("{client_base}{MAIN_SEPARATOR}{MODS_FOLDER}");
-            let mods_folder_abs = DATA.root_dir.join(&client_base).join(MODS_FOLDER);
+            let mods_folder_abs = DATA
+                .root_dir
+                .lock()
+                .unwrap()
+                .join(&client_base)
+                .join(MODS_FOLDER);
 
             for req in mods {
                 let name = req.name.clone();
-                let expected_md5 = req.md5_hash.clone();
-
                 let mod_basename = name.trim_end_matches(".jar");
                 let dest = mods_folder_abs.join(format!("{mod_basename}.jar"));
-                let remote_path = format!("fabric/deps/{mod_basename}.jar");
-
-                let mut need_download = true;
-                if dest.exists() {
-                    if let Some(ref expected) = expected_md5 {
-                        let ok = Data::verify_file_md5(&dest, expected)
-                            .await
-                            .map_err(|e| format!("Failed to verify MD5 for {mod_basename}: {e}"))?;
-                        if ok {
-                            need_download = false;
-                        } else {
-                            log_warn!(
-                                "MD5 mismatch for {}. Expected: {}. Redownloading...",
-                                mod_basename,
-                                expected
-                            );
-                            let _ = std::fs::remove_file(&dest);
-                            need_download = true;
-                        }
-                    } else {
-                        need_download = false;
-                    }
-                }
+                let remote_path = format!("{FABRIC_DEPS_URL}/{mod_basename}.jar");
+
+                self.download_dependency(
+                    &remote_path,
+                    &mods_folder_rel,
+                    &dest,
+                    req.md5_hash.as_ref(),
+                    mod_basename,
+                )
+                .await?;
+            }
+        }
+        Ok(())
+    }
 
-                if need_download {
-                    log_info!("Downloading dependency: {}", remote_path);
-                    DATA.download_to_folder(&remote_path, &mods_folder_rel)
-                        .await
-                        .map_err(|e| {
-                            format!("Failed to download dependency {mod_basename}: {e}")
-                        })?;
+    async fn download_forge_mods(&self) -> Result<(), String> {
+        if self.client_type != ClientType::Forge {
+            return Ok(());
+        }
 
-                    if let Some(ref expected) = expected_md5 {
-                        let ok = Data::verify_file_md5(&dest, expected)
-                            .await
-                            .map_err(|e| format!("Failed to verify MD5 for {mod_basename}: {e}"))?;
-                        if !ok {
-                            log_warn!(
-                                "MD5 mismatch after download for {}. Retrying...",
-                                mod_basename
-                            );
-                            let _ = std::fs::remove_file(&dest);
-                            DATA.download_to_folder(&remote_path, &mods_folder_rel)
-                                .await
-                                .map_err(|e| {
-                                    format!("Failed to redownload dependency {mod_basename}: {e}")
-                                })?;
-
-                            let ok2 =
-                                Data::verify_file_md5(&dest, expected).await.map_err(|e| {
-                                    format!(
-                                        "Failed to verify MD5 for {mod_basename} after retry: {e}"
-                                    )
-                                })?;
-                            if !ok2 {
-                                let _ = std::fs::remove_file(&dest);
-                                return Err(format!(
-                                    "MD5 mismatch for {mod_basename} after retry. Aborting."
-                                ));
-                            }
-                        }
-                    }
-                }
+        if let Some(mods) = &self.dependencies {
+            let client_base = Data::get_filename(&self.filename);
+            let mods_folder_rel = format!("{client_base}{MAIN_SEPARATOR}{MODS_FOLDER}");
+            let mods_folder_abs = DATA
+                .root_dir
+                .lock()
+                .unwrap()
+                .join(&client_base)
+                .join(MODS_FOLDER);
+
+            for req in mods {
+                let name = req.name.clone();
+                let mod_basename = name.trim_end_matches(".jar");
+                let dest = mods_folder_abs.join(format!("{mod_basename}.jar"));
+                let remote_path = format!("{FORGE_DEPS_URL}/{mod_basename}.jar");
+
+                self.download_dependency(
+                    &remote_path,
+                    &mods_folder_rel,
+                    &dest,
+                    req.md5_hash.as_ref(),
+                    mod_basename,
+                )
+                .await?;
             }
         }
         Ok(())
@@ -570,7 +660,7 @@ impl Client {
                 || folder == JDK8_FOLDER
                 || folder == JDK21_FOLDER
             {
-                let path = DATA.root_dir.join(folder);
+                let path = DATA.root_dir.lock().unwrap().join(folder);
                 if !path.exists() {
                     log_info!("Folder '{}' missing. Queuing {} for download.", folder, zip);
                     files_to_download.push(zip.to_string());
@@ -583,7 +673,7 @@ impl Client {
                     "Integrity check failed for '{}'. Wiping folder for clean redownload.",
                     folder
                 );
-                let path = DATA.root_dir.join(folder);
+                let path = DATA.root_dir.lock().unwrap().join(folder);
                 if path.exists() {
                     let _ = std::fs::remove_dir_all(&path);
                 }
@@ -592,41 +682,43 @@ impl Client {
         };
 
         check_and_queue(self.jdk_folder_name(), &self.jdk_zip_name());
+        check_and_queue(
+            if self.client_type == ClientType::Fabric {
+                ASSETS_FABRIC_FOLDER
+            } else {
+                ASSETS_FOLDER
+            },
+            if self.client_type == ClientType::Fabric {
+                ASSETS_FABRIC_ZIP
+            } else {
+                ASSETS_ZIP
+            },
+        );
 
-        match self.client_type {
-            ClientType::Fabric => {
-                check_and_queue(ASSETS_FABRIC_FOLDER, ASSETS_FABRIC_ZIP);
-            }
-            _ => {
-                check_and_queue(ASSETS_FOLDER, ASSETS_ZIP);
-
-                let (libs_zip, libs_folder, natives_zip, natives_folder) =
-                    if self.is_legacy_client() {
-                        (
-                            LIBRARIES_LEGACY_ZIP,
-                            LIBRARIES_LEGACY_FOLDER,
-                            NATIVES_LEGACY_ZIP,
-                            NATIVES_LEGACY_FOLDER,
-                        )
-                    } else {
-                        (LIBRARIES_ZIP, LIBRARIES_FOLDER, NATIVES_ZIP, NATIVES_FOLDER)
-                    };
-
-                check_and_queue(libs_folder, libs_zip);
-
-                let (actual_natives_zip, actual_natives_folder) = if IS_LINUX {
-                    if self.is_legacy_client() {
-                        (NATIVES_LEGACY_LINUX_ZIP, NATIVES_LEGACY_LINUX_FOLDER)
-                    } else {
-                        (NATIVES_LINUX_ZIP, NATIVES_LINUX_FOLDER)
-                    }
-                } else {
-                    (natives_zip, natives_folder)
-                };
+        let (libs_zip, libs_folder, natives_zip, natives_folder) = if self.is_legacy_client() {
+            (
+                LIBRARIES_LEGACY_ZIP,
+                LIBRARIES_LEGACY_FOLDER,
+                NATIVES_LEGACY_ZIP,
+                NATIVES_LEGACY_FOLDER,
+            )
+        } else {
+            (LIBRARIES_ZIP, LIBRARIES_FOLDER, NATIVES_ZIP, NATIVES_FOLDER)
+        };
+
+        check_and_queue(libs_folder, libs_zip);
 
-                check_and_queue(actual_natives_folder, actual_natives_zip);
+        let (actual_natives_zip, actual_natives_folder) = if IS_LINUX {
+            if self.is_legacy_client() {
+                (NATIVES_LEGACY_LINUX_ZIP, NATIVES_LEGACY_LINUX_FOLDER)
+            } else {
+                (NATIVES_LINUX_ZIP, NATIVES_LINUX_FOLDER)
             }
-        }
+        } else {
+            (natives_zip, natives_folder)
+        };
+
+        check_and_queue(actual_natives_folder, actual_natives_zip);
 
         if !files_to_download.is_empty() {
             self.batch_download_requirements(app_handle, files_to_download)
@@ -638,13 +730,18 @@ impl Client {
         }
 
         if self.client_type == ClientType::Fabric || self.client_type == ClientType::Forge {
-            let safe_ver = sanitize_version_for_paths(&self.version);
             let remote = match self.client_type {
                 ClientType::Fabric => {
-                    format!("fabric_{}.jar", safe_ver)
+                    format!(
+                        "misc/{MINECRAFT_VERSIONS_FOLDER}/fabric_{}.jar",
+                        self.version
+                    )
                 }
                 ClientType::Forge => {
-                    format!("forge_{}.jar", safe_ver)
+                    format!(
+                        "misc/{MINECRAFT_VERSIONS_FOLDER}/forge_{}.jar",
+                        self.version
+                    )
                 }
                 _ => unreachable!(),
             };
@@ -652,24 +749,29 @@ impl Client {
             let dest_filename = remote.rsplit('/').next().unwrap_or(&remote);
             let local_path = DATA
                 .root_dir
+                .lock()
+                .unwrap()
                 .join(MINECRAFT_VERSIONS_FOLDER)
                 .join(dest_filename);
 
-            if !local_path.exists() {
-                log_info!(
-                    "MC jar missing, downloading: {} -> {}",
-                    remote,
-                    local_path.display()
-                );
-                DATA.download_to_folder(&remote, MINECRAFT_VERSIONS_FOLDER)
-                    .await?;
-            }
+            self.download_dependency(
+                &remote,
+                MINECRAFT_VERSIONS_FOLDER,
+                &local_path,
+                None,
+                dest_filename,
+            )
+            .await?;
         }
 
         if self.client_type == ClientType::Fabric {
             self.download_fabric_mods().await?;
         }
 
+        if self.client_type == ClientType::Forge {
+            self.download_forge_mods().await?;
+        }
+
         Ok(())
     }
 
@@ -696,6 +798,7 @@ impl Client {
         }
 
         self.download_fabric_mods().await?;
+        self.download_forge_mods().await?;
 
         tokio::time::sleep(tokio::time::Duration::from_millis(500)).await;
 
@@ -712,7 +815,12 @@ impl Client {
         #[cfg(unix)]
         {
             use std::os::unix::fs::PermissionsExt;
-            let bin_dir = DATA.root_dir.join(self.jdk_folder_name()).join("bin");
+            let bin_dir = DATA
+                .root_dir
+                .lock()
+                .unwrap()
+                .join(self.jdk_folder_name())
+                .join("bin");
             if bin_dir.exists() {
                 if let Ok(entries) = std::fs::read_dir(&bin_dir) {
                     for entry in entries.flatten() {
@@ -739,18 +847,25 @@ impl Client {
     }
 
     async fn ensure_fabric_libraries(&self) -> Result<(), String> {
-        let common_dir = DATA.root_dir.join(LIBRARIES_FABRIC_FOLDER);
+        let common_dir = DATA.root_dir.lock().unwrap().join(LIBRARIES_FABRIC_FOLDER);
+
         if !dir_has_any_jars(&common_dir, true) {
             log_info!("Downloading common Fabric libraries");
             DATA.download(LIBRARIES_FABRIC_ZIP).await?;
         }
 
         let versioned_zip = format!(
-            "{}/{}.zip",
+            "misc/{}/{}.zip",
             LIBRARIES_FABRIC_FOLDER,
             sanitize_version_for_paths(&self.version)
         );
-        let versioned_dir = DATA.root_dir.join(versioned_zip.replace(".zip", ""));
+
+        let versioned_dir = DATA.root_dir.lock().unwrap().join(
+            versioned_zip
+                .strip_prefix("misc/")
+                .unwrap_or(&versioned_zip)
+                .replace(".zip", ""),
+        );
 
         if !dir_has_any_jars(&versioned_dir, false) {
             log_info!("Downloading versioned Fabric libraries: {}", versioned_zip);
@@ -766,8 +881,10 @@ impl Client {
 
         log_warn!("Java executable missing. Redownloading requirements...");
 
-        let _ = tokio::fs::remove_dir_all(DATA.root_dir.join(self.jdk_folder_name())).await;
-        let _ = tokio::fs::remove_file(DATA.root_dir.join(self.jdk_zip_name())).await;
+        let jdk_dir = DATA.root_dir.lock().unwrap().join(self.jdk_folder_name());
+        let _ = tokio::fs::remove_dir_all(jdk_dir).await;
+        let jdk_zip = DATA.root_dir.lock().unwrap().join(self.jdk_zip_name());
+        let _ = tokio::fs::remove_file(jdk_zip).await;
 
         self.download_requirements(app_handle).await?;
 
@@ -779,7 +896,7 @@ impl Client {
 
     fn build_classpath(&self) -> Result<String, String> {
         let (_, client_jar) = self.get_launch_paths()?;
-        let agent_overlay = DATA.root_dir.join(AGENT_OVERLAY_FOLDER);
+        let agent_overlay = DATA.root_dir.lock().unwrap().join(AGENT_OVERLAY_FOLDER);
 
         let mut cp_parts = Vec::new();
 
@@ -789,27 +906,25 @@ impl Client {
 
                 let v_libs = DATA
                     .root_dir
+                    .lock()
+                    .unwrap()
                     .join(LIBRARIES_FABRIC_FOLDER)
-                    .join(sanitize_version_for_paths(&self.version));
+                    .join(format!("{}", sanitize_version_for_paths(&self.version)));
                 cp_parts.extend(collect_jars_recursive(&v_libs, false));
 
-                let g_libs = DATA.root_dir.join(LIBRARIES_FABRIC_FOLDER);
-                for jar in collect_jars_recursive(&g_libs, true) {
-                    if !is_fabric_loader_jar(&jar) {
-                        cp_parts.push(jar);
-                    }
-                }
+                let g_libs = DATA.root_dir.lock().unwrap().join(LIBRARIES_FABRIC_FOLDER);
+                cp_parts.extend(collect_jars_recursive(&g_libs, true));
             }
             ClientType::Forge => {
                 cp_parts.push(self.get_minecraft_jar_path());
-                let libs = DATA.root_dir.join(LIBRARIES_LEGACY_FOLDER);
+                let libs = DATA.root_dir.lock().unwrap().join(LIBRARIES_LEGACY_FOLDER);
                 cp_parts.extend(collect_jars_recursive(&libs, false));
             }
             ClientType::Default => {
                 let libs = if self.is_legacy_client() {
-                    DATA.root_dir.join(LIBRARIES_LEGACY_FOLDER)
+                    DATA.root_dir.lock().unwrap().join(LIBRARIES_LEGACY_FOLDER)
                 } else {
-                    DATA.root_dir.join(LIBRARIES_FOLDER)
+                    DATA.root_dir.lock().unwrap().join(LIBRARIES_FOLDER)
                 };
 
                 return Ok(format!(
@@ -839,12 +954,17 @@ impl Client {
         manager: Arc<Mutex<ClientManager>>,
     ) -> Result<(), String> {
         if !options.is_custom && SETTINGS.lock().is_ok_and(|s| s.optional_telemetry.value) {
-            Analytics::send_client_analytics(self.id);
+            Analytics::send_client_analytics(self.id, &options.user_token);
         }
 
         {
             let mut logs = CLIENT_LOGS.lock().unwrap();
-            logs.insert(self.id, Vec::new());
+            let client_logs = logs.entry(self.id).or_insert_with(Vec::new);
+            if !client_logs.is_empty() {
+                client_logs.push("-------------------------------------------".to_string());
+                client_logs.push(format!("--- New Instance Started ---"));
+                client_logs.push("-------------------------------------------".to_string());
+            }
         }
 
         let app_handle = options.app_handle.clone();
@@ -860,29 +980,55 @@ impl Client {
             return Err(e);
         }
 
-        let java_bin = self.java_executable_path();
+        let java_bin = if let Some(ref path) = self.java_path {
+            if !path.is_empty() {
+                PathBuf::from(path)
+            } else if let Ok(s) = SETTINGS.lock() {
+                if !s.java_path.value.is_empty() {
+                    PathBuf::from(&s.java_path.value)
+                } else {
+                    self.java_executable_path()
+                }
+            } else {
+                self.java_executable_path()
+            }
+        } else if let Ok(s) = SETTINGS.lock() {
+            if !s.java_path.value.is_empty() {
+                PathBuf::from(&s.java_path.value)
+            } else {
+                self.java_executable_path()
+            }
+        } else {
+            self.java_executable_path()
+        };
+
         let (client_folder, _) = self.get_launch_paths()?;
         let assets_dir = if self.client_type == ClientType::Fabric {
-            DATA.root_dir.join(ASSETS_FABRIC_FOLDER)
+            DATA.root_dir.lock().unwrap().join(ASSETS_FABRIC_FOLDER)
         } else {
-            DATA.root_dir.join(ASSETS_FOLDER)
+            DATA.root_dir.lock().unwrap().join(ASSETS_FOLDER)
         };
 
         let natives_path = if self.is_legacy_client() {
             if IS_LINUX {
-                DATA.root_dir.join(NATIVES_LEGACY_LINUX_FOLDER)
+                DATA.root_dir
+                    .lock()
+                    .unwrap()
+                    .join(NATIVES_LEGACY_LINUX_FOLDER)
             } else {
                 DATA.root_dir
+                    .lock()
+                    .unwrap()
                     .join(format!("{}{}", NATIVES_FOLDER, LEGACY_SUFFIX))
             }
         } else if self.meta.is_new {
-            DATA.root_dir.join(format!(
+            DATA.root_dir.lock().unwrap().join(format!(
                 "{}{}",
                 NATIVES_FOLDER,
                 if IS_LINUX { LINUX_SUFFIX } else { "" }
             ))
         } else {
-            DATA.root_dir.join(format!(
+            DATA.root_dir.lock().unwrap().join(format!(
                 "{}{}",
                 NATIVES_FOLDER,
                 if IS_LINUX {
@@ -926,7 +1072,7 @@ impl Client {
             lang,
         );
 
-        let agent_overlay_path = DATA.root_dir.join(AGENT_OVERLAY_FOLDER);
+        let agent_overlay_path = DATA.root_dir.lock().unwrap().join(AGENT_OVERLAY_FOLDER);
 
         let mut cmd = Command::new(java_bin);
 
@@ -946,28 +1092,30 @@ impl Client {
             ));
         }
 
-        cmd.arg(format!("-Xmx{ram_mb}M"));
+        if let Ok(s) = SETTINGS.lock() {
+            if !s.java_args.value.is_empty() {
+                for arg in s.java_args.value.split_whitespace() {
+                    cmd.arg(arg);
+                }
+            }
+        }
 
-        if self.client_type != ClientType::Fabric {
-            cmd.arg(format!(
-                "-Djava.library.path={}{}{}",
-                natives_path.display(),
-                PATH_SEPARATOR,
-                agent_overlay_path.display()
-            ));
-        } else {
-            cmd.arg(format!(
-                "-Djava.library.path={}",
-                agent_overlay_path.display()
-            ));
+        if let Some(ref args) = self.java_args {
+            if !args.is_empty() {
+                for arg in args.split_whitespace() {
+                    cmd.arg(arg);
+                }
+            }
         }
 
-        cmd.arg("--add-opens")
-            .arg("java.base/jdk.internal.misc=ALL-UNNAMED");
-        cmd.arg("--add-opens").arg("java.base/sun.misc=ALL-UNNAMED");
-        cmd.arg("--add-opens")
-            .arg("java.base/java.lang=ALL-UNNAMED");
-        cmd.arg("--add-opens").arg("java.base/java.io=ALL-UNNAMED");
+        cmd.arg(format!("-Xmx{ram_mb}M"));
+
+        cmd.arg(format!(
+            "-Djava.library.path={}{}{}",
+            natives_path.display(),
+            PATH_SEPARATOR,
+            agent_overlay_path.display()
+        ));
 
         cmd.arg("-cp").arg(classpath).arg(&self.main_class);
 
diff --git a/src-tauri/src/core/clients/custom_clients.rs b/src-tauri/src/core/clients/custom_clients.rs
index 1a419329..32a132ee 100644
--- a/src-tauri/src/core/clients/custom_clients.rs
+++ b/src-tauri/src/core/clients/custom_clients.rs
@@ -19,6 +19,8 @@ pub struct CustomClient {
     pub is_installed: bool,
     pub launches: u32,
     pub insecure: bool,
+    pub java_path: Option<String>,
+    pub java_args: Option<String>,
 }
 
 impl CustomClient {
@@ -41,6 +43,8 @@ impl CustomClient {
             is_installed: false,
             launches: 0,
             insecure: false,
+            java_path: None,
+            java_args: None,
         }
     }
 
@@ -72,6 +76,8 @@ impl CustomClient {
                 is_custom: true,
                 size: 0,
             },
+            java_path: self.java_path.clone(),
+            java_args: self.java_args.clone(),
         }
     }
 
diff --git a/src-tauri/src/core/clients/internal/agent_overlay.rs b/src-tauri/src/core/clients/internal/agent_overlay.rs
index 72daab9b..0f5e705c 100644
--- a/src-tauri/src/core/clients/internal/agent_overlay.rs
+++ b/src-tauri/src/core/clients/internal/agent_overlay.rs
@@ -8,6 +8,13 @@ use serde::{Deserialize, Serialize};
 use std::fs;
 use std::path::PathBuf;
 
+#[derive(Debug, Serialize, Deserialize)]
+pub struct ApiResponse<T> {
+    pub success: bool,
+    pub data: Option<T>,
+    pub message: Option<String>,
+}
+
 #[derive(Debug, Serialize, Deserialize, Clone)]
 pub struct AgentOverlayInfo {
     pub agent_hash: String,
@@ -25,7 +32,7 @@ pub struct AgentArguments {
 }
 
 impl AgentArguments {
-    pub const fn new(
+    pub fn new(
         token: String,
         client_name: String,
         analytics: bool,
@@ -81,7 +88,7 @@ impl AgentOverlayManager {
 
         let info = Self::get_agent_overlay_info().await?;
 
-        let folder = DATA.root_dir.join(AGENT_OVERLAY_FOLDER);
+        let folder = DATA.root_dir.lock().unwrap().join(AGENT_OVERLAY_FOLDER);
         if !folder.exists() {
             log_debug!(
                 "Agent overlay folder missing, creating: {}",
@@ -180,12 +187,13 @@ impl AgentOverlayManager {
             return Err(format!("Backend returned error: {}", response.status()));
         }
 
-        let info: AgentOverlayInfo = response.json().await.map_err(|e| {
+        let info: ApiResponse<AgentOverlayInfo> = response.json().await.map_err(|e| {
             log_error!("Failed to parse agent/overlay info response: {}", e);
             format!("Failed to parse agent/overlay info: {e}")
         })?;
 
-        Ok(info)
+        info.data
+            .ok_or_else(|| "No agent/overlay info found".to_string())
     }
 
     async fn download_file(url: &str, path: &PathBuf) -> Result<(), String> {
@@ -223,7 +231,7 @@ impl AgentOverlayManager {
     pub async fn verify_agent_overlay_files() -> Result<bool, String> {
         log_debug!("Verifying agent and overlay files...");
 
-        let folder = DATA.root_dir.join(AGENT_OVERLAY_FOLDER);
+        let folder = DATA.root_dir.lock().unwrap().join(AGENT_OVERLAY_FOLDER);
         if !folder.exists() {
             log_debug!(
                 "Agent overlay folder missing during verify, creating: {}",
diff --git a/src-tauri/src/core/clients/log_checker.rs b/src-tauri/src/core/clients/log_checker.rs
index 40033ad8..09be9f0b 100644
--- a/src-tauri/src/core/clients/log_checker.rs
+++ b/src-tauri/src/core/clients/log_checker.rs
@@ -20,7 +20,7 @@ enum CrashType {
 }
 
 impl LogChecker {
-    pub const fn new(client: Client) -> Self {
+    pub fn new(client: Client) -> Self {
         Self { client }
     }
 
diff --git a/src-tauri/src/core/clients/manager.rs b/src-tauri/src/core/clients/manager.rs
index 26269802..a9d11612 100644
--- a/src-tauri/src/core/clients/manager.rs
+++ b/src-tauri/src/core/clients/manager.rs
@@ -1,7 +1,7 @@
-use rand::Rng;
+use rand::RngExt;
 use std::sync::{Arc, Mutex};
 use std::{fs::File, io::BufReader};
-use tauri::AppHandle;
+use tauri::{AppHandle, Manager};
 
 use super::client::Client;
 use crate::core::clients::client::Meta;
@@ -49,7 +49,7 @@ impl ClientManager {
         Ok(clients)
     }
 
-    pub fn get_client<F>(manager: &Arc<Mutex<ClientManager>>, client_id: u32, f: F)
+    pub fn get_client<F>(manager: &Arc<Mutex<Self>>, client_id: u32, f: F)
     where
         F: FnOnce(&mut Client),
     {
@@ -67,8 +67,12 @@ impl ClientManager {
         }
 
         let clients_task = tokio::task::spawn_blocking(|| {
-            if let Some(api_instance) = API.as_ref() {
-                match api_instance.json::<Vec<Client>>("clients") {
+            API.as_ref().map_or_else(
+                || {
+                    log_warn!("API instance not available. Attempting to load clients from cache.");
+                    Self::load_from_cache("clients.json")
+                },
+                |api_instance| match api_instance.json::<Vec<Client>>("clients") {
                     Ok(clients) => Ok(clients),
                     Err(e) => {
                         log_warn!(
@@ -77,40 +81,49 @@ impl ClientManager {
                         );
                         Self::load_from_cache("clients.json")
                     }
-                }
-            } else {
-                log_warn!("API instance not available. Attempting to load clients from cache.");
-                Self::load_from_cache("clients.json")
-            }
+                },
+            )
         });
 
         let fabric_clients_task = tokio::task::spawn_blocking(
             || -> Result<Vec<Client>, Box<dyn std::error::Error + Send + Sync>> {
-                if let Some(api_instance) = API.as_ref() {
-                    api_instance
-                        .json::<Vec<Client>>("fabric-clients")
-                        .or_else(|e| {
-                            log_warn!("Failed to fetch fabric clients: {}", e);
-                            Ok(Vec::new())
-                        })
-                } else {
-                    Ok(Vec::new())
-                }
+                API.as_ref().map_or_else(
+                    || {
+                        log_warn!("API instance not available. Attempting to load fabric-clients from cache.");
+                        Self::load_from_cache("fabric-clients.json")
+                    },
+                    |api_instance| match api_instance.json::<Vec<Client>>("fabric-clients") {
+                        Ok(clients) => Ok(clients),
+                        Err(e) => {
+                            log_warn!(
+                                "Failed to fetch fabric-clients from API: {}. Attempting to load from cache.",
+                                e
+                            );
+                            Self::load_from_cache("fabric-clients.json")
+                        }
+                    },
+                )
             },
         );
 
         let forge_clients_task = tokio::task::spawn_blocking(
             || -> Result<Vec<Client>, Box<dyn std::error::Error + Send + Sync>> {
-                if let Some(api_instance) = API.as_ref() {
-                    api_instance
-                        .json::<Vec<Client>>("forge-clients")
-                        .or_else(|e| {
-                            log_warn!("Failed to fetch forge clients: {}", e);
-                            Ok(Vec::new())
-                        })
-                } else {
-                    Ok(Vec::new())
-                }
+                API.as_ref().map_or_else(
+                    || {
+                        log_warn!("API instance not available. Attempting to load forge-clients from cache.");
+                        Self::load_from_cache("forge-clients.json")
+                    },
+                    |api_instance| match api_instance.json::<Vec<Client>>("forge-clients") {
+                        Ok(clients) => Ok(clients),
+                        Err(e) => {
+                            log_warn!(
+                                "Failed to fetch forge-clients from API: {}. Attempting to load from cache.",
+                                e
+                            );
+                            Self::load_from_cache("forge-clients.json")
+                        }
+                    },
+                )
             },
         );
 
@@ -179,7 +192,12 @@ impl ClientManager {
     fn load_from_cache(
         filename: &str,
     ) -> Result<Vec<Client>, Box<dyn std::error::Error + Send + Sync>> {
-        let cache_path = DATA.root_dir.join(API_CACHE_DIR).join(filename);
+        let cache_path = DATA
+            .root_dir
+            .lock()
+            .unwrap()
+            .join(API_CACHE_DIR)
+            .join(filename);
         if cache_path.exists() {
             let file = File::open(&cache_path)
                 .map_err(|e| Box::new(e) as Box<dyn std::error::Error + Send + Sync>)?;
@@ -215,6 +233,27 @@ impl ClientManager {
             }),
         );
 
+        let minimize_to_tray_on_launch = {
+            let settings = crate::core::storage::settings::SETTINGS.lock().unwrap();
+            settings.minimize_to_tray_on_launch.value
+        };
+
+        if minimize_to_tray_on_launch {
+            let running_clients = Client::get_running_clients(&Arc::new(Mutex::new(Self {
+                clients: self.clients.clone(),
+            })));
+
+            let running_custom_clients =
+                crate::core::clients::custom_clients::CustomClient::get_running_custom_clients();
+
+            if running_clients.is_empty() && running_custom_clients.is_empty() {
+                if let Some(window) = app_handle.get_webview_window("main") {
+                    let _ = window.show();
+                    let _ = window.set_focus();
+                }
+            }
+        }
+
         Ok(())
     }
 }
diff --git a/src-tauri/src/core/network/analytics.rs b/src-tauri/src/core/network/analytics.rs
index 528a7c61..4004b687 100644
--- a/src-tauri/src/core/network/analytics.rs
+++ b/src-tauri/src/core/network/analytics.rs
@@ -10,22 +10,24 @@ impl Analytics {
         Self::send_analytics(
             &format!("api/{API_VERSION}/loader/launch"),
             "start analytics",
+            None,
         );
     }
 
-    pub fn send_client_analytics(client_id: u32) {
+    pub fn send_client_analytics(client_id: u32, token: &str) {
         let endpoint = format!("api/{API_VERSION}/clients/launch/{client_id}");
-        Self::send_analytics(&endpoint, "client analytics");
+        Self::send_analytics(&endpoint, "client analytics", Some(token));
     }
 
-    pub fn send_client_download_analytics(client_id: u32) {
+    pub fn send_client_download_analytics(client_id: u32, token: &str) {
         let endpoint = format!("api/{API_VERSION}/clients/download/{client_id}");
-        Self::send_analytics(&endpoint, "client download analytics");
+        Self::send_analytics(&endpoint, "client download analytics", Some(token));
     }
 
-    fn send_analytics(endpoint: &str, analytics_type: &str) {
+    fn send_analytics(endpoint: &str, analytics_type: &str, token: Option<&str>) {
         let endpoint = endpoint.to_string();
         let analytics_type = analytics_type.to_string();
+        let token = token.map(|t| t.to_string());
 
         thread::spawn(move || {
             let Some(server_url) = Self::get_server_url(&analytics_type) else {
@@ -37,7 +39,11 @@ impl Analytics {
 
             log_debug!("Sending {} to {}", analytics_type, url);
 
-            match client.post(&url).send() {
+            match client
+                .post(&url)
+                .bearer_auth(token.as_deref().unwrap_or(""))
+                .send()
+            {
                 Ok(_) => {}
                 Err(e) => {
                     log_debug!("Failed to send {}: {}", analytics_type, e);
@@ -47,7 +53,8 @@ impl Analytics {
     }
 
     fn get_server_url(analytics_type: &str) -> Option<String> {
-        match SERVERS.selected_api.read().unwrap().clone() {
+        let value = SERVERS.selected_api.read().unwrap().clone();
+        match value {
             Some(server) => Some(server.url),
             None => {
                 log_debug!("No API server selected for {}", analytics_type);
diff --git a/src-tauri/src/core/network/api.rs b/src-tauri/src/core/network/api.rs
index c193a452..5d17362d 100644
--- a/src-tauri/src/core/network/api.rs
+++ b/src-tauri/src/core/network/api.rs
@@ -18,7 +18,7 @@ pub struct Api {
 
 impl Api {
     pub fn json<T: DeserializeOwned>(&self, path: &str) -> Result<T, Box<dyn std::error::Error>> {
-        let cache_dir = DATA.root_dir.join(API_CACHE_DIR);
+        let cache_dir = DATA.root_dir.lock().unwrap().join(API_CACHE_DIR);
         cache::ensure_cache_dir(&cache_dir);
 
         let cache_file_path = cache::cache_file_path(&cache_dir, path);
diff --git a/src-tauri/src/core/network/downloader.rs b/src-tauri/src/core/network/downloader.rs
index 3b954354..ee3e672e 100644
--- a/src-tauri/src/core/network/downloader.rs
+++ b/src-tauri/src/core/network/downloader.rs
@@ -10,37 +10,45 @@ const MAX_RETRIES: u32 = 3;
 const RETRY_DELAY: Duration = Duration::from_secs(2);
 
 pub async fn download_file(
-    url: &str,
+    urls: &[String],
     dest_path: &Path,
     emit_name: &str,
     app_handle: Option<&tauri::AppHandle>,
 ) -> Result<(), String> {
     let mut last_error = String::from("Unknown error");
 
-    for attempt in 1..=MAX_RETRIES {
-        if attempt > 1 {
-            log_warn!(
-                "Retrying download for {} (Attempt {}/{})",
-                emit_name,
-                attempt,
-                MAX_RETRIES
-            );
-            tokio::time::sleep(RETRY_DELAY).await;
-        }
-
-        match perform_download(url, dest_path, emit_name, app_handle).await {
-            Ok(_) => return Ok(()),
-            Err(e) => {
-                last_error = e;
-                log_error!(
-                    "Download failed for {} (Attempt {}/{}): {}",
+    for url in urls {
+        for attempt in 1..=MAX_RETRIES {
+            if attempt > 1 {
+                log_warn!(
+                    "Retrying download for {} (Attempt {}/{})",
                     emit_name,
                     attempt,
-                    MAX_RETRIES,
-                    last_error
+                    MAX_RETRIES
                 );
+                tokio::time::sleep(RETRY_DELAY).await;
+            }
+
+            match perform_download(url, dest_path, emit_name, app_handle).await {
+                Ok(_) => return Ok(()),
+                Err(e) => {
+                    last_error = e;
+                    log_error!(
+                        "Download failed for {} (Attempt {}/{}): {}",
+                        emit_name,
+                        attempt,
+                        MAX_RETRIES,
+                        last_error
+                    );
+                }
             }
         }
+        log_warn!(
+            "Failed to download {} from {} after {} attempts. Trying fallback if available...",
+            emit_name,
+            url,
+            MAX_RETRIES
+        );
     }
 
     Err(format!(
diff --git a/src-tauri/src/core/network/servers.rs b/src-tauri/src/core/network/servers.rs
index 4814d716..5ea6699f 100644
--- a/src-tauri/src/core/network/servers.rs
+++ b/src-tauri/src/core/network/servers.rs
@@ -3,18 +3,19 @@ use crate::{
     log_info, log_warn,
 };
 use reqwest::Client;
+use serde::Serialize;
 use std::sync::{LazyLock, Mutex, RwLock};
 use std::time::Duration;
 use tokio::sync::watch;
 
 const REQUEST_TIMEOUT: Duration = Duration::from_secs(10);
 
-#[derive(Debug, Clone, serde::Serialize)]
+#[derive(Debug, Clone, Serialize, PartialEq, Eq)]
 pub struct Server {
     pub url: String,
 }
 
-#[derive(Debug, Clone, serde::Serialize)]
+#[derive(Debug, Clone, Serialize)]
 pub struct ServerConnectivityStatus {
     pub cdn_online: bool,
     pub api_online: bool,
@@ -117,15 +118,28 @@ impl Servers {
         name: &str,
     ) {
         for server in servers {
-            match client.head(&server.url).send().await {
+            // if CDN located on same server as API we should check API server instead of CDN, to reduce unused requests
+            let url = if name == "CDN" {
+                if let Some(api_server) = self.apis.iter().find(|s| server.url.starts_with(&s.url))
+                {
+                    api_server.url.clone()
+                } else {
+                    server.url.clone()
+                }
+            } else {
+                server.url.clone()
+            };
+
+            let mut ok = false;
+
+            match client.head(&url).send().await {
                 Ok(resp) => {
-                    if resp.status().is_success() {
-                        let mut lock = selected.write().unwrap();
-                        *lock = Some(server.clone());
-                        return;
+                    if resp.status().is_success() || resp.status() == reqwest::StatusCode::NOT_FOUND
+                    {
+                        ok = true;
                     } else {
                         log_warn!(
-                            "{} Server {} returned status: {}",
+                            "{} Server {} returned status (HEAD): {}",
                             name,
                             server.url,
                             resp.status()
@@ -133,9 +147,47 @@ impl Servers {
                     }
                 }
                 Err(e) => {
-                    log_warn!("Failed to connect to {} Server {}: {}", name, server.url, e);
+                    log_warn!(
+                        "Failed to connect to {} Server {} (HEAD): {}",
+                        name,
+                        server.url,
+                        e
+                    );
                 }
             }
+
+            if !ok {
+                match client.get(&url).send().await {
+                    Ok(resp) => {
+                        if resp.status().is_success()
+                            || resp.status() == reqwest::StatusCode::NOT_FOUND
+                        {
+                            ok = true;
+                        } else {
+                            log_warn!(
+                                "{} Server {} returned status (GET): {}",
+                                name,
+                                server.url,
+                                resp.status()
+                            );
+                        }
+                    }
+                    Err(e) => {
+                        log_warn!(
+                            "Failed to connect to {} Server {} (GET): {}",
+                            name,
+                            server.url,
+                            e
+                        );
+                    }
+                }
+            }
+
+            if ok {
+                let mut lock = selected.write().unwrap();
+                *lock = Some(server.clone());
+                return;
+            }
         }
 
         let mut lock = selected.write().unwrap();
@@ -156,6 +208,14 @@ impl Servers {
             .as_ref()
             .map(|server| server.url.clone())
     }
+
+    pub fn get_cdn_server_url(&self) -> Option<String> {
+        self.selected_cdn
+            .read()
+            .unwrap()
+            .as_ref()
+            .map(|server| server.url.clone())
+    }
 }
 
 impl Default for Servers {
diff --git a/src-tauri/src/core/storage/custom_clients.rs b/src-tauri/src/core/storage/custom_clients.rs
index fa156d20..1a9446f9 100644
--- a/src-tauri/src/core/storage/custom_clients.rs
+++ b/src-tauri/src/core/storage/custom_clients.rs
@@ -14,11 +14,18 @@ use super::common::JsonStorage;
 #[derive(Clone, Debug, Serialize, Deserialize)]
 pub struct CustomClientManager {
     pub clients: Vec<CustomClient>,
+    #[serde(skip)]
     pub custom_clients_path: PathBuf,
     pub next_id: u32,
 }
 
 impl CustomClientManager {
+    pub fn load_from_disk(path: PathBuf) -> Self {
+        let mut loaded = <Self as JsonStorage>::load_from_disk(path.clone());
+        loaded.custom_clients_path = path;
+        loaded
+    }
+
     pub fn add_client(&mut self, mut custom_client: CustomClient) -> Result<(), String> {
         if !custom_client.file_path.exists() {
             return Err(format!(
@@ -122,6 +129,14 @@ impl CustomClientManager {
                 client.main_class = main_class;
             }
 
+            if let Some(java_path) = updates.java_path {
+                client.java_path = Some(java_path);
+            }
+
+            if let Some(java_args) = updates.java_args {
+                client.java_args = Some(java_args);
+            }
+
             self.save_to_disk();
             Ok(())
         } else {
@@ -135,6 +150,8 @@ pub struct CustomClientUpdate {
     pub name: Option<String>,
     pub version: Option<String>,
     pub main_class: Option<String>,
+    pub java_path: Option<String>,
+    pub java_args: Option<String>,
 }
 
 impl JsonStorage for CustomClientManager {
diff --git a/src-tauri/src/core/storage/data.rs b/src-tauri/src/core/storage/data.rs
index 038b417f..f2e9d735 100644
--- a/src-tauri/src/core/storage/data.rs
+++ b/src-tauri/src/core/storage/data.rs
@@ -16,7 +16,7 @@ use tokio::fs as tokio_fs;
 use tokio::task;
 
 pub struct Data {
-    pub root_dir: PathBuf,
+    pub root_dir: Mutex<PathBuf>,
 }
 
 pub static APP_HANDLE: std::sync::LazyLock<Mutex<Option<tauri::AppHandle>>> =
@@ -42,7 +42,9 @@ impl Data {
             log_info!("Created root data directory: {}", root_dir.display());
         }
 
-        Self { root_dir }
+        Self {
+            root_dir: Mutex::new(root_dir),
+        }
     }
 
     pub fn has_extension(file_path: &str, extension: &str) -> bool {
@@ -53,7 +55,7 @@ impl Data {
 
     pub fn get_local(&self, relative_path: &str) -> PathBuf {
         let parts: Vec<&str> = relative_path.split(|c| ['/', '\\'].contains(&c)).collect();
-        let mut path = self.root_dir.clone();
+        let mut path = self.root_dir.lock().unwrap().clone();
         for part in parts {
             if part.is_empty() {
                 continue;
@@ -64,20 +66,16 @@ impl Data {
     }
 
     pub async fn unzip(&self, file: &str) -> Result<(), String> {
-        let (emit_name, local_name) = if file.starts_with("http://") || file.starts_with("https://")
-        {
-            (
-                file.to_string(),
-                file.rsplit('/').next().unwrap_or(file).to_string(),
-            )
-        } else {
-            (file.to_string(), file.to_string())
-        };
-
-        let zip_path = self.get_local(&local_name);
-        let unzip_path = self.get_local(local_name.trim_end_matches(".zip"));
+        let info = Self::resolve_local_file_info(file);
+        let zip_path = self.get_local(&info.local_file);
+        let unzip_path = self.get_local(
+            info.local_file
+                .strip_suffix(".zip")
+                .unwrap_or(&info.local_file),
+        );
 
         let app_handle = APP_HANDLE.lock().unwrap().clone();
+        let emit_name = info.local_file.clone();
 
         task::spawn_blocking(move || {
             unzip(&zip_path, &unzip_path, &emit_name, app_handle.as_ref())
@@ -93,7 +91,7 @@ impl Data {
             .file_stem()
             .and_then(|s| s.to_str())
             .unwrap_or(file);
-        self.root_dir.join(file_name)
+        self.root_dir.lock().unwrap().join(file_name)
     }
 
     pub fn get_as_folder_string(file: &str) -> String {
@@ -113,15 +111,15 @@ impl Data {
     }
 
     fn resolve_local_file_info(file: &str) -> FileInfo {
-        let is_url = file.starts_with("http://") || file.starts_with("https://");
-        let local_file = if is_url {
-            file.rsplit('/').next().unwrap_or(file).to_string()
+        let local_file = if file.starts_with("misc/") {
+            file.strip_prefix("misc/").unwrap().to_string()
         } else {
-            file.to_string()
+            file.rsplit(['/', '\\']).next().unwrap_or(file).to_string()
         };
 
         let file_name = Self::get_filename(&local_file);
-        let is_fabric_client = local_file.starts_with("fabric/") && local_file.ends_with(".jar");
+        let is_fabric_client = (file.starts_with("fabric/") || file.contains("/fabric/jars/"))
+            && local_file.ends_with(".jar");
 
         FileInfo {
             local_file,
@@ -130,36 +128,42 @@ impl Data {
         }
     }
 
-    fn get_destination_path(&self, file: &str, info: &FileInfo) -> PathBuf {
+    fn get_destination_path(&self, _file: &str, info: &FileInfo) -> PathBuf {
         if info.is_fabric_client {
-            let jar_basename = Path::new(file)
-                .file_name()
-                .and_then(|n| n.to_str())
-                .unwrap_or(file);
+            let jar_basename = &info.local_file;
             self.root_dir
+                .lock()
+                .unwrap()
                 .join(&info.file_name)
                 .join("mods")
                 .join(jar_basename)
         } else if Self::has_extension(&info.local_file, "jar") {
-            self.root_dir.join(&info.file_name).join(&info.local_file)
+            self.root_dir
+                .lock()
+                .unwrap()
+                .join(&info.file_name)
+                .join(&info.local_file)
         } else {
-            self.root_dir.join(&info.local_file)
+            self.root_dir.lock().unwrap().join(&info.local_file)
         }
     }
 
     fn should_skip_download(&self, info: &FileInfo) -> bool {
         if Self::has_extension(&info.local_file, "zip") {
-            let zip_path = self.root_dir.join(&info.local_file);
-            let unzip_path = self.root_dir.join(info.local_file.trim_end_matches(".zip"));
+            let zip_path = self.root_dir.lock().unwrap().join(&info.local_file);
+            let unzip_path = self
+                .root_dir
+                .lock()
+                .unwrap()
+                .join(info.local_file.trim_end_matches(".zip"));
             zip_path.exists() && unzip_path.exists()
         } else if Self::has_extension(&info.local_file, "jar") {
             if info.is_fabric_client {
-                let jar_basename = Path::new(&info.local_file)
-                    .file_name()
-                    .and_then(|n| n.to_str())
-                    .unwrap_or(&info.local_file);
+                let jar_basename = &info.local_file;
                 let jar_path = self
                     .root_dir
+                    .lock()
+                    .unwrap()
                     .join(&info.file_name)
                     .join("mods")
                     .join(jar_basename);
@@ -177,9 +181,28 @@ impl Data {
     }
 
     async fn prepare_download_dirs(&self, info: &FileInfo) -> Result<(), String> {
+        if let Some(parent) = Path::new(&info.local_file).parent() {
+            if !parent.as_os_str().is_empty() {
+                let parent_path = self.root_dir.lock().unwrap().join(parent);
+                if let Err(e) = tokio_fs::create_dir_all(&parent_path).await {
+                    log_error!(
+                        "Failed to create parent directory {}: {}",
+                        parent_path.display(),
+                        e
+                    );
+                    return Err(format!("Failed to create directory: {e}"));
+                }
+            }
+        }
+
         if Self::has_extension(&info.local_file, "jar") {
             if info.is_fabric_client {
-                let mods_dir = self.root_dir.join(&info.file_name).join("mods");
+                let mods_dir = self
+                    .root_dir
+                    .lock()
+                    .unwrap()
+                    .join(&info.file_name)
+                    .join("mods");
                 if let Err(e) = tokio_fs::create_dir_all(&mods_dir).await {
                     log_error!(
                         "Failed to create fabric mods directory {}: {}",
@@ -210,19 +233,30 @@ impl Data {
         Ok(())
     }
 
-    fn get_download_url(file: &str) -> Result<String, String> {
+    fn get_download_urls(file: &str) -> Result<Vec<String>, String> {
         let is_url = file.starts_with("http://") || file.starts_with("https://");
         if is_url {
-            Ok(file.to_string())
+            Ok(vec![file.to_string()])
         } else {
-            let cdn_url = SERVERS.selected_cdn.read().unwrap().as_ref().map_or_else(
-                || {
-                    log_error!("No CDN server available for download");
-                    Err("No CDN server available for download.".to_string())
-                },
-                |server| Ok(server.url.clone()),
-            )?;
-            Ok(format!("{cdn_url}{file}"))
+            let mut urls = Vec::new();
+
+            if let Some(selected) = SERVERS.selected_cdn.read().unwrap().as_ref() {
+                urls.push(format!("{}{}", selected.url, file));
+            }
+
+            for cdn in &SERVERS.cdns {
+                let url = format!("{}{}", cdn.url, file);
+                if !urls.contains(&url) {
+                    urls.push(url);
+                }
+            }
+
+            if urls.is_empty() {
+                log_error!("No CDN server available for download");
+                return Err("No CDN server available for download.".to_string());
+            }
+
+            Ok(urls)
         }
     }
 
@@ -235,19 +269,25 @@ impl Data {
         }
 
         if let Some(app_handle) = APP_HANDLE.lock().unwrap().as_ref() {
-            emit_to_main_window(app_handle, "download-start", &file);
+            emit_to_main_window(app_handle, "download-start", &info.local_file);
         }
 
         self.prepare_download_dirs(&info).await?;
 
-        let download_url = Self::get_download_url(file)?;
+        let download_urls = Self::get_download_urls(file)?;
         let dest_path = self.get_destination_path(file, &info);
 
         let app_handle = APP_HANDLE.lock().unwrap().clone();
-        download_file(&download_url, &dest_path, file, app_handle.as_ref()).await?;
+        download_file(
+            &download_urls,
+            &dest_path,
+            &info.local_file,
+            app_handle.as_ref(),
+        )
+        .await?;
 
         if let Some(handle) = app_handle.as_ref() {
-            emit_to_main_window(handle, "download-complete", &file);
+            emit_to_main_window(handle, "download-complete", &info.local_file);
         }
 
         if Self::has_extension(&info.local_file, "zip") {
@@ -255,7 +295,7 @@ impl Data {
                 log_error!("Failed to extract {}: {}", file, e);
                 if let Some(app_handle) = APP_HANDLE.lock().unwrap().as_ref() {
                     let err_data = serde_json::json!({
-                        "file": file,
+                        "file": info.local_file,
                         "error": e
                     });
                     emit_to_main_window(app_handle, "unzip-error", err_data);
@@ -268,14 +308,14 @@ impl Data {
     }
 
     pub async fn ensure_client_synced(&self, client_base: &str) -> Result<(), String> {
-        let global_options_dir = self.root_dir.join("synced_options");
+        let global_options_dir = self.root_dir.lock().unwrap().join("synced_options");
         if !global_options_dir.exists() {
             tokio_fs::create_dir_all(&global_options_dir)
                 .await
                 .map_err(|e| format!("Failed to create global options dir: {e}"))?;
         }
 
-        let client_dir = self.root_dir.join(client_base);
+        let client_dir = self.root_dir.lock().unwrap().join(client_base);
         if !client_dir.exists() {
             tokio_fs::create_dir_all(&client_dir)
                 .await
@@ -313,8 +353,14 @@ impl Data {
             }
 
             let client_target = client_dir.join(name);
-            if client_target.exists() {
-                let res = if client_target.is_dir() {
+            if let Ok(meta) = tokio_fs::symlink_metadata(&client_target).await {
+                let res = if meta.file_type().is_symlink() {
+                    if meta.is_dir() {
+                        tokio_fs::remove_dir(&client_target).await
+                    } else {
+                        tokio_fs::remove_file(&client_target).await
+                    }
+                } else if meta.is_dir() {
                     tokio_fs::remove_dir_all(&client_target).await
                 } else {
                     tokio_fs::remove_file(&client_target).await
@@ -329,7 +375,7 @@ impl Data {
                 }
             }
 
-            if let Err(e) = Self::create_symlink(&target, &client_target) {
+            if let Err(e) = Self::create_symlink(&target, &client_target, is_dir) {
                 log_warn!(
                     "Failed to symlink {} for {}: {} -> {}: {}",
                     name,
@@ -344,7 +390,11 @@ impl Data {
         Ok(())
     }
 
-    fn create_symlink(src: &std::path::Path, dst: &std::path::Path) -> Result<(), String> {
+    fn create_symlink(
+        src: &std::path::Path,
+        dst: &std::path::Path,
+        is_dir: bool,
+    ) -> Result<(), String> {
         #[cfg(target_family = "unix")]
         {
             std::os::unix::fs::symlink(src, dst).map_err(|e| e.to_string())
@@ -353,10 +403,8 @@ impl Data {
         #[cfg(target_family = "windows")]
         {
             use std::os::windows::fs::{symlink_dir, symlink_file};
-            if src.is_dir() {
+            if is_dir {
                 symlink_dir(src, dst).map_err(|e| e.to_string())
-            } else if src.is_file() {
-                symlink_file(src, dst).map_err(|e| e.to_string())
             } else {
                 symlink_file(src, dst).map_err(|e| e.to_string())
             }
@@ -364,13 +412,21 @@ impl Data {
     }
 
     pub async fn download_to_folder(&self, file: &str, dest_folder: &str) -> Result<(), String> {
+        let info = Self::resolve_local_file_info(file);
         if let Some(app_handle) = APP_HANDLE.lock().unwrap().as_ref() {
-            emit_to_main_window(app_handle, "download-start", &file);
+            emit_to_main_window(app_handle, "download-start", &info.local_file);
         }
 
-        let download_url = Self::get_download_url(file)?;
+        let download_urls = Self::get_download_urls(file)?;
 
-        let dest_dir = self.root_dir.join(dest_folder);
+        log_debug!(
+            "Downloading {} to folder {} from URLs: {:?}",
+            file,
+            dest_folder,
+            download_urls
+        );
+
+        let dest_dir = self.root_dir.lock().unwrap().join(dest_folder);
         if let Err(e) = tokio_fs::create_dir_all(&dest_dir).await {
             log_error!(
                 "Failed to create destination folder {}: {}",
@@ -384,20 +440,23 @@ impl Data {
         let dest_path = dest_dir.join(dest_filename);
 
         let app_handle = APP_HANDLE.lock().unwrap().clone();
-        download_file(&download_url, &dest_path, file, app_handle.as_ref()).await?;
+        download_file(
+            &download_urls,
+            &dest_path,
+            &info.local_file,
+            app_handle.as_ref(),
+        )
+        .await?;
 
         if let Some(handle) = app_handle.as_ref() {
-            emit_to_main_window(handle, "download-complete", &file);
+            emit_to_main_window(handle, "download-complete", &info.local_file);
         }
 
         Ok(())
     }
 
-    pub async fn verify_file_md5(
-        path: &std::path::PathBuf,
-        expected: &str,
-    ) -> Result<bool, String> {
-        let path = path.clone();
+    pub async fn verify_file_md5(path: &Path, expected: &str) -> Result<bool, String> {
+        let path = path.to_path_buf();
         let expected = expected.to_lowercase();
         let calc = tokio::task::spawn_blocking(move || {
             crate::core::utils::hashing::calculate_md5_hash(&path)
@@ -430,7 +489,7 @@ impl Data {
         }
 
         for requirement in &requirements {
-            let path = self.root_dir.join(requirement);
+            let path = self.root_dir.lock().unwrap().join(requirement);
             if path.exists() {
                 if path.is_dir() {
                     tokio_fs::remove_dir_all(&path)
@@ -448,7 +507,7 @@ impl Data {
     }
 
     pub async fn reset_cache(&self) -> Result<(), String> {
-        let cache_dir = self.root_dir.join("cache");
+        let cache_dir = self.root_dir.lock().unwrap().join("cache");
         if cache_dir.exists() {
             tokio_fs::remove_dir_all(&cache_dir)
                 .await
@@ -473,14 +532,11 @@ impl Data {
             return false;
         }
 
-        match std::fs::read_dir(&path) {
-            Ok(mut entries) => entries.next().is_some(),
-            Err(_) => false,
-        }
+        std::fs::read_dir(&path).is_ok_and(|mut entries| entries.next().is_some())
     }
 
     pub fn verify_folder_integrity(&self, folder_name: &str) -> bool {
-        let folder_path = self.root_dir.join(folder_name);
+        let folder_path = self.root_dir.lock().unwrap().join(folder_name);
         let manifest_path = folder_path.join("manifest.txt");
 
         if !manifest_path.exists() {
diff --git a/src-tauri/src/core/storage/flags.rs b/src-tauri/src/core/storage/flags.rs
index b76f8702..2b0a2a30 100644
--- a/src-tauri/src/core/storage/flags.rs
+++ b/src-tauri/src/core/storage/flags.rs
@@ -10,7 +10,7 @@ pub struct Flag<T> {
 }
 
 impl<T> Flag<T> {
-    pub const fn new(value: T) -> Self {
+    pub fn new(value: T) -> Self {
         Self { value }
     }
 }
diff --git a/src-tauri/src/core/storage/presets.rs b/src-tauri/src/core/storage/presets.rs
index d580a010..9cd55ab6 100644
--- a/src-tauri/src/core/storage/presets.rs
+++ b/src-tauri/src/core/storage/presets.rs
@@ -11,7 +11,9 @@ pub struct ThemePreset {
     pub name: String,
     pub description: Option<String>,
     pub created_at: String,
+    #[serde(rename = "customCSS", alias = "customCss")]
     pub custom_css: String,
+    #[serde(rename = "enableCustomCSS", alias = "enableCustomCss")]
     pub enable_custom_css: bool,
 
     pub base100: Option<String>,
@@ -35,11 +37,19 @@ pub struct ThemePreset {
     pub warning_content: Option<String>,
     pub error: Option<String>,
     pub error_content: Option<String>,
+
+    #[serde(rename = "backgroundImage")]
+    pub background_image: Option<String>,
+    #[serde(rename = "backgroundBlur")]
+    pub background_blur: Option<f64>,
+    #[serde(rename = "backgroundOpacity")]
+    pub background_opacity: Option<f64>,
 }
 
 #[derive(Clone, Debug, Serialize, Deserialize)]
 pub struct PresetManager {
     pub presets: HashMap<String, ThemePreset>,
+    #[serde(skip)]
     pub config_path: PathBuf,
 }
 
@@ -67,6 +77,12 @@ impl JsonStorage for PresetManager {
 }
 
 impl PresetManager {
+    pub fn load_from_disk(path: PathBuf) -> Self {
+        let mut loaded = <Self as JsonStorage>::load_from_disk(path.clone());
+        loaded.config_path = path;
+        loaded
+    }
+
     pub fn add_preset(&mut self, preset: ThemePreset) -> Result<(), String> {
         if self.presets.contains_key(&preset.id) {
             return Err(format!(
diff --git a/src-tauri/src/core/storage/settings.rs b/src-tauri/src/core/storage/settings.rs
index 0460be1d..6306682c 100644
--- a/src-tauri/src/core/storage/settings.rs
+++ b/src-tauri/src/core/storage/settings.rs
@@ -18,7 +18,7 @@ pub struct Setting<T> {
 }
 
 impl<T> Setting<T> {
-    pub const fn new(value: T, show: bool) -> Self {
+    pub fn new(value: T, show: bool) -> Self {
         Self { value, show }
     }
 }
@@ -81,7 +81,7 @@ macro_rules! define_settings {
                         $(
                             $field: Setting {
                                 value: input.$field.value,
-                                show: input.$field.show,
+                                show: $show_val,
                             },
                         )*
                         config_path,
@@ -92,6 +92,9 @@ macro_rules! define_settings {
                     // update config_path here, because value is computed at runtime
                     let mut loaded = <Self as JsonStorage>::load_from_disk(path.clone());
                     loaded.config_path = path;
+                    $(
+                        loaded.$field.show = $show_val;
+                    )*
                     loaded
                 }
             }
@@ -125,6 +128,10 @@ define_settings! {
         hash_verify: Setting<bool> = (true, true),
         sync_client_settings: Setting<bool> = (true, true),
         dpi_bypass: Setting<bool> = (false, true),
+        minimize_to_tray_on_launch: Setting<bool> = (false, true),
+        close_to_tray: Setting<bool> = (false, true),
+        java_path: Setting<String> = ("".to_string(), true),
+        java_args: Setting<String> = ("".to_string(), true),
     }
 }
 
diff --git a/src-tauri/src/core/utils/dpi.rs b/src-tauri/src/core/utils/dpi.rs
index a5d03f45..fa189131 100644
--- a/src-tauri/src/core/utils/dpi.rs
+++ b/src-tauri/src/core/utils/dpi.rs
@@ -8,10 +8,8 @@ use crate::core::utils::helpers::emit_to_main_window;
 use crate::core::utils::helpers::is_development_enabled;
 #[cfg(target_os = "windows")]
 use crate::messagebox;
-#[cfg(target_os = "windows")]
-use crate::{log_error, log_warn};
 
-use crate::log_info;
+use crate::{log_debug, log_error, log_info, log_warn};
 
 #[cfg(target_os = "windows")]
 const DPI_RELEASE_API: &str =
@@ -23,6 +21,39 @@ const DPI_ZIP_NAME: &str = "ZapretCollapseLoader.zip";
 #[cfg(target_os = "windows")]
 const DPI_FOLDER_NAME: &str = "ZapretCollapseLoader";
 
+#[cfg(target_os = "windows")]
+pub fn kill_winws() {
+    use std::os::windows::process::CommandExt;
+    use std::process::Command;
+
+    log_info!("Attempting to kill any existing winws.exe processes");
+
+    let mut cmd = Command::new("taskkill");
+    cmd.args(["/F", "/IM", "winws.exe", "/T"]);
+
+    if !is_development_enabled() {
+        cmd.creation_flags(0x08000000); // CREATE_NO_WINDOW
+    }
+
+    match cmd.output() {
+        Ok(output) => {
+            if output.status.success() {
+                log_info!("Successfully killed existing winws.exe processes");
+            } else {
+                let stderr = String::from_utf8_lossy(&output.stderr);
+                if stderr.contains("not found") || stderr.contains("не найден") {
+                    log_debug!("No winws.exe processes were found to kill");
+                } else {
+                    log_warn!("taskkill returned non-zero status: {}", stderr);
+                }
+            }
+        }
+        Err(e) => {
+            log_error!("Failed to execute taskkill: {}", e);
+        }
+    }
+}
+
 #[cfg(target_os = "windows")]
 pub fn enable_dpi_bypass_async() -> Result<(), String> {
     let app_handle_clone = APP_HANDLE.lock().unwrap().clone();
@@ -40,8 +71,20 @@ pub fn enable_dpi_bypass_async() -> Result<(), String> {
                         "toast-error",
                         "Failed to enable DPI bypass due to insufficient privileges. Please run the application as administrator and try again.",
                     );
+                } else {
+                    emit_to_main_window(
+                        app_handle,
+                        "toast-error",
+                        format!("Failed to enable DPI bypass: {}", e),
+                    );
                 }
             }
+        } else if let Some(app_handle) = app_handle_clone.as_ref() {
+            emit_to_main_window(
+                app_handle,
+                "toast-success",
+                "DPI bypass enabled successfully",
+            );
         }
     });
     Ok(())
@@ -63,7 +106,10 @@ pub fn download_dpi_bypass() -> Result<(), String> {
             if r.status().is_success() {
                 match r.json::<serde_json::Value>() {
                     Ok(json) => {
-                        if let Some(assets) = json.get("assets").and_then(|v| v.as_array()) {
+                        json.get("assets").and_then(|v| v.as_array()).map_or_else(|| {
+                            log_warn!("No assets field in GitHub release JSON; falling back to hardcoded URL");
+                            DPI_ZIP_FALLBACK_URL.to_string()
+                        }, |assets| {
                             let mut found: Option<String> = None;
                             for asset in assets {
                                 if asset.get("name").and_then(|n| n.as_str()) == Some(DPI_ZIP_NAME)
@@ -76,19 +122,16 @@ pub fn download_dpi_bypass() -> Result<(), String> {
                                     }
                                 }
                             }
-                            if let Some(u) = found {
+                            found.map_or_else(|| {
+                                log_warn!("Asset {} not found in latest release; falling back to hardcoded URL", DPI_ZIP_NAME);
+                                DPI_ZIP_FALLBACK_URL.to_string()
+                            }, |u| {
                                 log_info!(
                                     "Resolved latest DPI package URL from GitHub releases API"
                                 );
                                 u
-                            } else {
-                                log_warn!("Asset {} not found in latest release; falling back to hardcoded URL", DPI_ZIP_NAME);
-                                DPI_ZIP_FALLBACK_URL.to_string()
-                            }
-                        } else {
-                            log_warn!("No assets field in GitHub release JSON; falling back to hardcoded URL");
-                            DPI_ZIP_FALLBACK_URL.to_string()
-                        }
+                            })
+                        })
                     }
                     Err(e) => {
                         log_warn!("Failed to parse GitHub release JSON: {}. Falling back to hardcoded URL", e);
@@ -156,8 +199,10 @@ fn start_winws_background_inner() -> Result<(), String> {
         return Ok(());
     }
 
+    kill_winws();
+
     use std::path::PathBuf;
-    let base_dir: PathBuf = DATA.root_dir.join(DPI_FOLDER_NAME);
+    let base_dir: PathBuf = DATA.root_dir.lock().unwrap().join(DPI_FOLDER_NAME);
     let bin_dir = base_dir.join("bin");
     let lists_dir = base_dir.join("lists");
     let winws_path = bin_dir.join("winws.exe");
@@ -178,11 +223,9 @@ fn start_winws_background_inner() -> Result<(), String> {
     }
 
     fn extend_with_game_filter(base: &str, game_filter: &Option<String>) -> String {
-        if let Some(filter) = game_filter {
-            format!("{},{}", base, filter)
-        } else {
-            base.to_string()
-        }
+        game_filter
+            .as_ref()
+            .map_or_else(|| base.to_string(), |filter| format!("{},{}", base, filter))
     }
 
     let game_filter = std::env::var("GameFilter")
@@ -381,6 +424,15 @@ fn start_winws_background_inner() -> Result<(), String> {
                 winws_path.display(),
                 e
             );
+
+            if let Some(app_handle) = APP_HANDLE.lock().unwrap().as_ref() {
+                emit_to_main_window(
+                    app_handle,
+                    "toast-error",
+                    format!("Failed to start DPI bypass process: {}", e),
+                );
+            }
+
             return Err(format!("Failed to start winws.exe: {}", e));
         }
     }
diff --git a/src-tauri/src/core/utils/globals.rs b/src-tauri/src/core/utils/globals.rs
index 4e6a394b..7bcf5165 100644
--- a/src-tauri/src/core/utils/globals.rs
+++ b/src-tauri/src/core/utils/globals.rs
@@ -2,7 +2,7 @@ use std::{fs, path::PathBuf, sync::LazyLock};
 
 use crate::{core::network::servers::Server, log_debug, log_info};
 
-pub static CODENAME: &str = "Abyss";
+pub static CODENAME: &str = "Atlas";
 
 pub static API_VERSION: &str = "v1";
 
@@ -31,27 +31,27 @@ pub static JDK8_ZIP: &str = if IS_LINUX {
 pub static JDK_FOLDERS: LazyLock<Vec<&str>> = LazyLock::new(|| vec![JDK21_FOLDER, JDK8_FOLDER]);
 
 pub static ASSETS_FOLDER: &str = "assets";
-pub static ASSETS_FABRIC_FOLDER: &str = "assets_fabric";
+pub static ASSETS_FABRIC_FOLDER: &str = "assets-fabric";
 pub static LIBRARIES_FOLDER: &str = "libraries";
-pub static LIBRARIES_FABRIC_FOLDER: &str = "libraries_fabric";
+pub static LIBRARIES_FABRIC_FOLDER: &str = "libraries-fabric";
 pub static LIBRARIES_LEGACY_FOLDER: &str = "libraries-legacy";
 pub static NATIVES_FOLDER: &str = "natives";
 pub static NATIVES_LINUX_FOLDER: &str = "natives-linux";
 pub static NATIVES_LEGACY_FOLDER: &str = "natives-legacy";
 pub static NATIVES_LEGACY_LINUX_FOLDER: &str = "natives-legacy-linux";
-pub static NATIVES_FABRIC_FOLDER: &str = "natives_fabric";
-
-pub static ASSETS_ZIP: &str = "assets.zip";
-pub static ASSETS_FABRIC_ZIP: &str = "assets_fabric.zip";
-pub static LIBRARIES_ZIP: &str = "libraries.zip";
-pub static LIBRARIES_FABRIC_ZIP: &str = "libraries_fabric.zip";
-pub static LIBRARIES_LEGACY_ZIP: &str = "libraries-legacy.zip";
-pub static NATIVES_ZIP: &str = "natives.zip";
-pub static NATIVES_LINUX_ZIP: &str = "natives-linux.zip";
-pub static NATIVES_LEGACY_ZIP: &str = "natives-legacy.zip";
-pub static NATIVES_LEGACY_LINUX_ZIP: &str = "natives-legacy-linux.zip";
-
-pub static MINECRAFT_VERSIONS_FOLDER: &str = "minecraft_versions";
+pub static NATIVES_FABRIC_FOLDER: &str = "natives-fabric";
+
+pub static ASSETS_ZIP: &str = "misc/assets.zip";
+pub static ASSETS_FABRIC_ZIP: &str = "misc/assets-fabric.zip";
+pub static LIBRARIES_ZIP: &str = "misc/libraries.zip";
+pub static LIBRARIES_FABRIC_ZIP: &str = "misc/libraries-fabric.zip";
+pub static LIBRARIES_LEGACY_ZIP: &str = "misc/libraries-legacy.zip";
+pub static NATIVES_ZIP: &str = "misc/natives.zip";
+pub static NATIVES_LINUX_ZIP: &str = "misc/natives-linux.zip";
+pub static NATIVES_LEGACY_ZIP: &str = "misc/natives-legacy.zip";
+pub static NATIVES_LEGACY_LINUX_ZIP: &str = "misc/natives-legacy-linux.zip";
+
+pub static MINECRAFT_VERSIONS_FOLDER: &str = "minecraft-versions";
 pub static AGENT_OVERLAY_FOLDER: &str = "agent_overlay";
 pub static CUSTOM_CLIENTS_FOLDER: &str = "custom_clients";
 pub static MODS_FOLDER: &str = "mods";
@@ -61,6 +61,9 @@ pub static OVERLAY_FILE: &str = "CollapseOverlay.dll";
 
 pub static IRC_HOST: &str = "irc.collapseloader.org:1338";
 
+pub static FABRIC_DEPS_URL: &str = "clients/fabric/deps/jars";
+pub static FORGE_DEPS_URL: &str = "clients/forge/deps/jars";
+
 fn parse_env_bool(var: &str) -> bool {
     std::env::var(var).ok().is_some_and(|s| {
         let s = s.trim().to_ascii_lowercase();
@@ -73,33 +76,30 @@ pub static SKIP_AGENT_OVERLAY_VERIFICATION: LazyLock<bool> =
 
 pub static MOCK_CLIENTS: LazyLock<bool> = LazyLock::new(|| parse_env_bool("MOCK_CLIENTS"));
 
-pub static CDN_SERVERS: LazyLock<Vec<Server>> = LazyLock::new(|| {
-    if let Ok(url) = std::env::var("FORCE_CDN") {
+pub static API_SERVERS: LazyLock<Vec<Server>> = LazyLock::new(|| {
+    if let Ok(url) = std::env::var("FORCE_API") {
         if !url.is_empty() {
-            log_info!("Using forced CDN server: {}", url);
+            log_info!("Using forced API server: {}", url);
             return vec![Server::new(&url)];
         }
     }
+
     vec![
-        Server::new("https://cdn.collapseloader.org/"),
-        Server::new("https://collapse.ttfdk.lol/cdn/"),
-        Server::new(
-            "https://axkanxneklh7.objectstorage.eu-amsterdam-1.oci.customer-oci.com/n/axkanxneklh7/b/collapse/o/",
-        ),
+        Server::new("https://atlas.collapseloader.org/"),
+        Server::new("http://141.148.224.27/atlas/"),
     ]
 });
 
-pub static API_SERVERS: LazyLock<Vec<Server>> = LazyLock::new(|| {
-    if let Ok(url) = std::env::var("FORCE_API") {
+pub static CDN_SERVERS: LazyLock<Vec<Server>> = LazyLock::new(|| {
+    if let Ok(url) = std::env::var("FORCE_CDN") {
         if !url.is_empty() {
-            log_info!("Using forced API server: {}", url);
+            log_info!("Using forced CDN server: {}", url);
             return vec![Server::new(&url)];
         }
     }
-
     vec![
-        Server::new("https://atlas.collapseloader.org/"),
-        Server::new("https://collapse.ttfdk.lol/auth/"),
+        Server::new("https://atlas-test.collapseloader.org/uploads/"),
+        Server::new("http://141.148.224.27/cdn/"),
     ]
 });
 
diff --git a/src-tauri/src/core/utils/logging.rs b/src-tauri/src/core/utils/logging.rs
index 46c9604c..d7597a4a 100644
--- a/src-tauri/src/core/utils/logging.rs
+++ b/src-tauri/src/core/utils/logging.rs
@@ -45,11 +45,9 @@ impl Logger {
         }
 
         let mut shorted_tag = {
-            let slice = if let Some(pos) = tag.rfind("collapseloader_lib.") {
-                &tag[pos + "collapseloader_lib.".len()..]
-            } else {
-                tag
-            };
+            let slice = tag
+                .rfind("collapseloader_lib.")
+                .map_or(tag, |pos| &tag[pos + "collapseloader_lib.".len()..]);
             slice.replace("collapse.module.collapseloader_lib", "core.init")
         };
 
diff --git a/src-tauri/src/core/utils/process.rs b/src-tauri/src/core/utils/process.rs
index 27216cd2..b2bdae0b 100644
--- a/src-tauri/src/core/utils/process.rs
+++ b/src-tauri/src/core/utils/process.rs
@@ -10,6 +10,8 @@ pub fn get_jps_path() -> std::path::PathBuf {
     for folder in JDK_FOLDERS.iter() {
         let path = DATA
             .root_dir
+            .lock()
+            .unwrap()
             .join(folder)
             .join("bin")
             .join("jps".to_owned() + FILE_EXTENSION);
@@ -19,6 +21,8 @@ pub fn get_jps_path() -> std::path::PathBuf {
     }
 
     DATA.root_dir
+        .lock()
+        .unwrap()
         .join(JDK21_FOLDER)
         .join("bin")
         .join("jps".to_owned() + FILE_EXTENSION)
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 5593b698..9f51c502 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -5,6 +5,9 @@ use crate::core::utils::discord_rpc;
 use crate::{core::storage::data::APP_HANDLE, logging::Logger};
 use std::sync::OnceLock;
 use std::sync::{Arc, Mutex};
+use std::time::{Duration, Instant};
+use tauri::menu::{Menu, MenuItem};
+use tauri::tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent};
 use tauri::Manager;
 
 use crate::core::{platform::check_platform_dependencies, utils::globals::CODENAME};
@@ -36,7 +39,7 @@ pub fn check_webkit_warning() -> Result<(), StartupError> {
 
 #[cfg(target_os = "windows")]
 pub fn handle_startup_error(error: &StartupError) {
-    if let StartupError::WebView2NotInstalled = error {
+    if matches!(error, StartupError::WebView2NotInstalled) {
         let should_install = messagebox::show_confirm(
             "WebView2 Not Installed",
             "WebView2 is not installed. Would you like to download and install it now?",
@@ -74,36 +77,81 @@ pub fn handle_startup_error(error: &StartupError) {
     error.show_and_exit();
 }
 
-fn handle_deep_link_url(app: &tauri::AppHandle, url: String) {
-    if let Some(window) = app.get_webview_window("main") {
-        let _ = window.set_focus();
+fn handle_deep_link_url(app: &tauri::AppHandle, url: String, was_already_running: bool) {
+    if was_already_running {
+        if let Some(window) = app.get_webview_window("main") {
+            let _ = window.set_focus();
+            let _ = window.show();
+        }
     }
 
-    log_debug!("Handling deep link URL: {}", url);
+    log_debug!(
+        "Handling deep link URL: {} (already running: {})",
+        url,
+        was_already_running
+    );
 
-    if !should_handle_deep_link(&url) {
+    if !should_handle_deep_link(&url) && was_already_running {
         log_debug!("Deep link already handled, skipping: {}", url);
         return;
     }
 
+    if url.contains("verify") {
+        if let Some(query_part) = url.split("?").nth(1) {
+            let mut code = String::new();
+            let mut email = String::new();
+
+            for pair in query_part.split('&') {
+                if let Some((key, value)) = pair.split_once('=') {
+                    match key {
+                        "code" => code = value.to_string(),
+                        "email" => email = value.to_string(),
+                        _ => {}
+                    }
+                }
+            }
+
+            if !code.is_empty() {
+                log_debug!("Emitting verify-email event for code: {}", code);
+                emit_to_main_window(
+                    app,
+                    "verify-email",
+                    serde_json::json!({ "code": code, "email": email }),
+                );
+                return;
+            }
+        }
+    }
+
     if let Some(client_name) = url.split("client=").nth(1) {
         let client_name = client_name.split('&').next().unwrap_or("");
         log_debug!("Launching client from deep link: {}", client_name);
-        emit_to_main_window(app, "launch-client", client_name);
+        emit_to_main_window(
+            app,
+            "launch-client",
+            serde_json::json!({
+                "id": client_name,
+                "was_already_running": was_already_running
+            }),
+        );
     }
 }
 
 fn should_handle_deep_link(url: &str) -> bool {
-    static LAST_HANDLED_URL: OnceLock<Mutex<Option<String>>> = OnceLock::new();
-    let last_url = LAST_HANDLED_URL.get_or_init(|| Mutex::new(None));
-    let mut guard = last_url.lock().unwrap();
+    static LAST_HANDLED: OnceLock<Mutex<Option<(String, Instant)>>> = OnceLock::new();
+    let last = LAST_HANDLED.get_or_init(|| Mutex::new(None));
+    let mut guard = last.lock().unwrap();
     let normalized = url.trim().to_string();
 
-    if guard.as_ref() == Some(&normalized) {
-        return false;
+    if let Some((ref prev, prev_time)) = guard.as_ref() {
+        if prev == &normalized {
+            if prev_time.elapsed() < Duration::from_secs(2) {
+                return false;
+            }
+        }
     }
 
-    *guard = Some(normalized);
+    *guard = Some((normalized, Instant::now()));
     true
 }
 
@@ -117,8 +165,8 @@ pub fn run() {
         .plugin(tauri_plugin_fs::init())
         .plugin(tauri_plugin_deep_link::init())
         .plugin(tauri_plugin_single_instance::init(|app, args, _cwd| {
-            if args.len() > 1 {
-                handle_deep_link_url(app, args[1].clone());
+            if let Some(url) = args.iter().find(|a| a.starts_with("collapseloader://")) {
+                handle_deep_link_url(app, url.clone(), true);
             }
         }))
         .manage(AppState::new(Arc::new(
@@ -126,163 +174,86 @@ pub fn run() {
         )))
         .manage(commands::irc::IrcState::default())
         .invoke_handler(tauri::generate_handler![
+            // client commands
+            commands::clients::add_custom_client,
+            commands::clients::delete_client,
+            commands::clients::detect_main_class,
+            commands::clients::download_client_only,
+            commands::clients::get_app_logs,
+            commands::clients::get_client_logs,
+            commands::clients::get_clients,
+            commands::clients::get_custom_clients,
+            commands::clients::get_latest_client_logs,
+            commands::clients::get_running_client_ids,
+            commands::clients::get_running_custom_client_ids,
+            commands::clients::increment_client_counter,
             commands::clients::initialize_api,
             commands::clients::initialize_rpc,
-            commands::clients::get_server_connectivity_status,
-            commands::clients::get_clients,
-            commands::clients::get_client_details,
+            commands::clients::install_mod_from_url,
             commands::clients::launch_client,
-            commands::clients::get_running_client_ids,
-            commands::clients::stop_client,
-            commands::clients::get_client_logs,
-            commands::clients::get_app_logs,
-            commands::clients::download_client_only,
-            commands::clients::reinstall_client,
+            commands::clients::launch_custom_client,
+            commands::clients::list_installed_mods,
             commands::clients::open_client_folder,
-            commands::clients::get_latest_client_logs,
-            commands::clients::update_client_installed_status,
-            commands::clients::delete_client,
-            commands::clients::increment_client_counter,
-            commands::clients::get_custom_clients,
-            commands::clients::add_custom_client,package org.collapseloader.atlas.domain.presets.entity;
-
-import jakarta.persistence.*;
-import lombok.*;
-import org.collapseloader.atlas.domain.users.entity.User;
-import org.hibernate.annotations.CreationTimestamp;
-import org.hibernate.annotations.UpdateTimestamp;
-
-import java.time.Instant;
-import java.util.ArrayList;
-import java.util.List;
-
-@Entity
-@Table(
-        name = "presets",
-        indexes = {
-                @Index(name = "presets_owner_idx", columnList = "owner_id"),
-                @Index(name = "presets_public_idx", columnList = "is_public"),
-                @Index(name = "presets_created_idx", columnList = "created_at")
-        }
-)
-@Getter
-@Setter
-@ToString
-@NoArgsConstructor
-@AllArgsConstructor
-@Builder
-public class Preset {
-    @Id
-    @GeneratedValue(strategy = GenerationType.IDENTITY)
-    private Long id;
-
-    @ManyToOne(fetch = FetchType.LAZY, optional = false)
-    @JoinColumn(name = "owner_id", nullable = false)
-    @ToString.Exclude
-    private User owner;
-
-    @Column(name = "name", nullable = false, length = 120)
-    private String name;
-
-    @Column(length = 2048)
-    private String description;
-
-    @Column(name = "is_public", nullable = false)
-    private boolean isPublic = true;
-
-    @Embedded
-    private PresetTheme theme;
-
-    @Column(name = "likes_count", nullable = false)
-    private long likesCount;
-
-    @Column(name = "downloads_count", nullable = false)
-    private long downloadsCount;
-
-    @Column(name = "comments_count", nullable = false)
-    private long commentsCount;
-
-    @OneToMany(mappedBy = "preset", cascade = CascadeType.ALL, orphanRemoval = true)
-    @ToString.Exclude
-    @Builder.Default
-    private List<PresetLike> likes = new ArrayList<>();
-
-    @OneToMany(mappedBy = "preset", cascade = CascadeType.ALL, orphanRemoval = true)
-    @ToString.Exclude
-    @Builder.Default
-    private List<PresetComment> comments = new ArrayList<>();
-
-    @CreationTimestamp
-    @Column(name = "created_at", updatable = false)
-    private Instant createdAt;
-
-    @UpdateTimestamp
-    @Column(name = "updated_at")
-    private Instant updatedAt;
-
-    @PrePersist
-    private void ensureTheme() {
-        if (theme == null) {
-            theme = new PresetTheme();
-        }
-    }
-}
-
+            commands::clients::reinstall_client,
             commands::clients::remove_custom_client,
-            commands::clients::update_custom_client,
-            commands::clients::launch_custom_client,
-            commands::clients::get_running_custom_client_ids,
+            commands::clients::stop_client,
             commands::clients::stop_custom_client,
-            commands::clients::detect_main_class,
-            commands::clients::get_client_comments,
-            commands::clients::add_client_comment,
-            commands::clients::delete_client_comment,
-            commands::presets::get_all_presets,
-            commands::presets::get_preset,
+            commands::clients::update_client_installed_status,
+            commands::clients::update_custom_client,
+            // irc commands
+            commands::irc::connect_irc,
+            commands::irc::disconnect_irc,
+            commands::irc::send_irc_message,
+            // preset commands
             commands::presets::create_preset,
-            commands::presets::update_preset,
             commands::presets::delete_preset,
             commands::presets::duplicate_preset,
+            commands::presets::get_all_presets,
+            commands::presets::get_preset,
+            commands::presets::update_preset,
+            // settings commands
+            commands::settings::add_account,
+            commands::settings::add_favorite_client,
+            commands::settings::get_accounts,
+            commands::settings::get_active_account,
+            commands::settings::get_favorite_clients,
+            commands::settings::get_flags,
             commands::settings::get_settings,
-            commands::settings::save_settings,
-            commands::settings::reset_settings,
+            commands::settings::get_system_memory,
+            commands::settings::is_client_favorite,
+            commands::settings::is_telemetry_consent_shown,
             commands::settings::mark_disclaimer_shown,
             commands::settings::mark_first_run_shown,
-            commands::settings::set_optional_telemetry,
             commands::settings::mark_telemetry_consent_shown,
-            commands::settings::is_telemetry_consent_shown,
-            commands::settings::set_custom_clients_display,
-            commands::settings::get_flags,
-            commands::settings::get_accounts,
-            commands::settings::add_account,
             commands::settings::remove_account,
-            commands::settings::set_active_account,
-            commands::settings::update_account,
-            commands::settings::get_active_account,
-            commands::settings::reset_flags,
-            commands::settings::get_favorite_clients,
-            commands::settings::add_favorite_client,
             commands::settings::remove_favorite_client,
+            commands::settings::reset_flags,
+            commands::settings::reset_settings,
+            commands::settings::save_settings,
+            commands::settings::set_active_account,
             commands::settings::set_all_favorites,
-            commands::settings::is_client_favorite,
-            commands::settings::get_system_memory,
-            commands::utils::get_version,
-            commands::utils::is_development,
+            commands::settings::set_custom_clients_display,
+            commands::settings::set_optional_telemetry,
+            commands::settings::update_account,
+            // updater commands
+            commands::updater::check_for_updates,
+            commands::updater::download_and_install_update,
+            commands::updater::get_changelog,
+            // utils commands
+            commands::utils::change_data_folder,
+            commands::utils::decode_base64,
+            commands::utils::encode_base64,
             commands::utils::get_api_url,
             commands::utils::get_api_version,
+            commands::utils::get_cdn_url,
+            commands::utils::get_data_folder,
+            commands::utils::get_version,
+            commands::utils::is_development,
             commands::utils::open_data_folder,
             commands::utils::reset_requirements,
-            commands::utils::get_data_folder,
-            commands::utils::change_data_folder,
-            commands::utils::decode_base64,
-            commands::utils::encode_base64,
             commands::utils::update_presence,
-            commands::updater::check_for_updates,
-            commands::updater::download_and_install_update,
-            commands::updater::get_changelog,
-            commands::irc::connect_irc,
-            commands::irc::disconnect_irc,
-            commands::irc::send_irc_message,
+            // server connectivity
+            commands::clients::get_server_connectivity_status,
         ])
         .setup(|app| {
             #[cfg(desktop)]
@@ -290,7 +261,7 @@ public class Preset {
                 use tauri_plugin_deep_link::DeepLinkExt;
                 let handle = app.handle().clone();
                 app.deep_link().on_open_url(move |event| {
-                    handle_deep_link_url(&handle, event.urls()[0].to_string());
+                    handle_deep_link_url(&handle, event.urls()[0].to_string(), true);
                 });
                 app.deep_link().register_all()?;
             }
@@ -301,7 +272,7 @@ public class Preset {
                 let url_clone = url.clone();
                 spawn(async move {
                     tokio::time::sleep(std::time::Duration::from_millis(2000)).await;
-                    handle_deep_link_url(&handle, url_clone);
+                    handle_deep_link_url(&handle, url_clone, false);
                 });
             }
 
@@ -340,6 +311,53 @@ public class Preset {
                 Analytics::send_start_analytics();
             });
 
+            let show = MenuItem::with_id(app, "show", "Show", true, None::<&str>)?;
+            let hide = MenuItem::with_id(app, "hide", "Hide", true, None::<&str>)?;
+            let quit = MenuItem::with_id(app, "quit", "Quit", true, None::<&str>)?;
+            let menu = Menu::with_items(app, &[&show, &hide, &quit])?;
+
+            let _tray = TrayIconBuilder::new()
+                .icon(app.default_window_icon().unwrap().clone())
+                .menu(&menu)
+                .show_menu_on_left_click(false)
+                .on_menu_event(|app, event| match event.id.as_ref() {
+                    "show" => {
+                        if let Some(window) = app.get_webview_window("main") {
+                            let _ = window.show();
+                            let _ = window.set_focus();
+                        }
+                    }
+                    "hide" => {
+                        if let Some(window) = app.get_webview_window("main") {
+                            let _ = window.hide();
+                        }
+                    }
+                    "quit" => {
+                        app.exit(0);
+                    }
+                    _ => {}
+                })
+                .on_tray_icon_event(|tray, event| {
+                    if let TrayIconEvent::Click {
+                        button: MouseButton::Left,
+                        button_state: MouseButtonState::Up,
+                        ..
+                    } = event
+                    {
+                        let app = tray.app_handle();
+                        if let Some(window) = app.get_webview_window("main") {
+                            let is_visible = window.is_visible().unwrap_or(true);
+                            if is_visible {
+                                let _ = window.hide();
+                            } else {
+                                let _ = window.show();
+                                let _ = window.set_focus();
+                            }
+                        }
+                    }
+                })
+                .build(app)?;
+
             #[cfg(target_os = "windows")]
             {
                 use crate::core::utils::dpi;
@@ -348,9 +366,15 @@ public class Preset {
 
             Ok(())
         })
-        .on_window_event(|_window, event| {
-            if let tauri::WindowEvent::CloseRequested { .. } = event {
-                discord_rpc::shutdown();
+        .on_window_event(|window, event| {
+            if let tauri::WindowEvent::CloseRequested { api, .. } = event {
+                let settings = crate::core::storage::settings::SETTINGS.lock().unwrap();
+                if settings.close_to_tray.value {
+                    api.prevent_close();
+                    let _ = window.hide();
+                } else {
+                    discord_rpc::shutdown();
+                }
             }
         })
         .run(tauri::generate_context!())
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index a1f0ced8..94b6ec8a 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
     "$schema": "https://schema.tauri.app/config/2",
     "productName": "collapseloader",
-    "version": "0.2.7",
+    "version": "0.2.8",
     "identifier": "org.collapseloader",
     "build": {
         "beforeDevCommand": "npm run dev",
@@ -45,4 +45,4 @@
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 5ab7c6aa..57e15e30 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,44 +1,49 @@
 <script setup lang="ts">
-import { invoke } from '@tauri-apps/api/core';
-import { listen } from '@tauri-apps/api/event';
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
-import { router } from './services/router';
-import { useI18n } from 'vue-i18n';
-import GlobalModal from './components/modals/GlobalModal.vue';
-import DevMenuModal from './components/core/DevMenuModal.vue';
-import InitialSetupModals from './components/core/InitialSetupModals.vue';
-import DownloadProgress from './components/features/download/DownloadProgress.vue';
-import Sidebar from './components/layout/Sidebar.vue';
-import Titlebar from './components/layout/Titlebar.vue';
-import RegisterPromptModal from './components/modals/social/account/RegisterPromptModal.vue';
-import ToastContainer from './components/notifications/ToastContainer.vue';
-import { useUser } from './composables/useUser';
-import { globalUserStatus } from './composables/useUserStatus';
-import { syncService } from './services/syncService';
-import { settingsService } from './services/settingsService';
-import { useToast } from './services/toastService';
-import { themeService } from './services/themeService';
-import { updaterService } from './services/updaterService';
-import About from './views/About.vue';
-import AccountView from './views/AccountView.vue';
-import AppLogs from './views/AppLogs.vue';
-import FriendsView from './views/FriendsView.vue';
-import Home from './views/Home.vue';
-import LoginView from './views/LoginView.vue';
-import RegisterView from './views/RegisterView.vue';
-import Settings from './views/Settings.vue';
-import Customization from './views/Customization.vue';
-import UserProfileView from './views/UserProfileView.vue';
-import News from './views/News.vue';
-import CustomClients from './views/CustomClients.vue';
-import Marketplace from './views/Marketplace.vue';
-import { fetchSettings } from './utils/settings';
-import { getDiscordState } from './utils/discord';
-import { VALID_TABS } from './utils/tabs';
-import { getIsDevelopment } from './utils/isDevelopment';
-import Preloader from './components/core/Preloader.vue';
-import { useAppInit } from './composables/useAppInit';
-import type { Client } from './types/ui';
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { router } from "./services/router";
+import { useI18n } from "vue-i18n";
+import GlobalModal from "./components/modals/GlobalModal.vue";
+import DevMenuModal from "./components/core/DevMenuModal.vue";
+import InitialSetupModals from "./components/core/InitialSetupModals.vue";
+import DownloadProgress from "./components/features/download/DownloadProgress.vue";
+import Sidebar from "./components/layout/Sidebar.vue";
+import Titlebar from "./components/layout/Titlebar.vue";
+import RegisterPromptModal from "./components/modals/social/account/RegisterPromptModal.vue";
+import ToastContainer from "./components/notifications/ToastContainer.vue";
+import { useUser } from "./composables/useUser";
+import { globalUserStatus } from "./composables/useUserStatus";
+import { syncService } from "./services/syncService";
+import { settingsService } from "./services/settingsService";
+import { useToast } from "./services/toastService";
+import { themeService } from "./services/themeService";
+import { updaterService } from "./services/updaterService";
+import { webSocketService } from "./services/webSocketService";
+import About from "./views/About.vue";
+import AccountView from "./views/AccountView.vue";
+import AppLogs from "./views/AppLogs.vue";
+import FriendsView from "./views/FriendsView.vue";
+import Home from "./views/Home.vue";
+import LoginView from "./views/LoginView.vue";
+import RegisterView from "./views/RegisterView.vue";
+import VerifyEmailView from "./views/VerifyEmailView.vue";
+import Settings from "./views/Settings.vue";
+import Customization from "./views/Customization.vue";
+import UserProfileView from "./views/UserProfileView.vue";
+import News from "./views/News.vue";
+import CustomClients from "./views/CustomClients.vue";
+import Marketplace from "./views/Marketplace.vue";
+import AuthModal from "./components/layout/modals/AuthModal.vue";
+import { fetchSettings } from "./utils/settings";
+import { getDiscordState } from "./utils/discord";
+import { VALID_TABS } from "./utils/tabs";
+import { getIsDevelopment } from "./utils/isDevelopment";
+import Preloader from "./components/core/Preloader.vue";
+import { useAppInit } from "./composables/useAppInit";
+import type { Client } from "./types/ui";
+import notificationSound from "./assets/misc/notification.mp3";
+import { userService } from "./services/userService";
 
 interface Setting<T> {
     description: string;
@@ -57,7 +62,6 @@ const {
     showPreloader,
     loadingState,
     currentProgress,
-    totalSteps,
     isOnline,
     showFirstRunInfo,
     showInitialDisclaimer,
@@ -66,8 +70,9 @@ const {
     apiInitialized,
     contentVisible,
     initApp,
-    initializeUserDataWrapper
+    initializeUserDataWrapper,
 } = useAppInit();
+
 const appOnline = computed(() => isOnline?.value ?? true);
 
 const activeTab = computed(() => router.currentRoute.value as any);
@@ -75,34 +80,44 @@ const showDevMenu = ref(false);
 const { addToast } = useToast();
 const isAuthenticated = ref(false);
 const showRegistrationPrompt = ref(false);
+const showAuthModal = ref(false);
+const authModalView = ref<"LOGIN" | "REGISTER" | "VERIFY">("LOGIN");
+const pendingVerifyEmail = ref("");
 const currentUserId = ref<number | null>(null);
-const previousTab = ref<string>('home');
+const previousTab = ref<string>("home");
 const news = ref<any[]>([]);
 const unreadNewsCount = ref(0);
 const isDev = ref(false);
 
-const sidebarPosition = ref(localStorage.getItem('sidebarPosition') as 'left' | 'right' | 'top' | 'bottom' || 'left');
-
-const updateSidebarPosition = (newPosition: 'left' | 'right' | 'top' | 'bottom') => {
+const sidebarPosition = ref(
+    (localStorage.getItem("sidebarPosition") as
+        | "left"
+        | "right"
+        | "top"
+        | "bottom") || "left"
+);
+
+const updateSidebarPosition = (
+    newPosition: "left" | "right" | "top" | "bottom"
+) => {
     sidebarPosition.value = newPosition;
-    localStorage.setItem('sidebarPosition', newPosition);
+    localStorage.setItem("sidebarPosition", newPosition);
 };
 
 const mainClasses = computed(() => {
-    const base = 'w-full p-6 pb-8 bg-base-200 overflow-y-auto overflow-x-hidden flex-1';
+    const base =
+        "w-full p-6 pb-8 bg-base-200 overflow-y-auto overflow-x-hidden flex-1";
     const pos = sidebarPosition.value;
 
-    if (pos === 'left') return `${base} ml-20`;
-    if (pos === 'right') return `${base} mr-20`;
-    if (pos === 'top') return `${base} mt-20`;
-    if (pos === 'bottom') return `${base} mb-20`;
+    if (pos === "left") return `${base} ml-20`;
+    if (pos === "right") return `${base} mr-20`;
+    if (pos === "top") return `${base} mt-20`;
+    if (pos === "bottom") return `${base} mb-20`;
 
     return base;
 });
 
-const {
-    stopStatusSync
-} = globalUserStatus;
+const { stopStatusSync } = globalUserStatus;
 
 const handleUnreadNewsCountUpdated = (count: number) => {
     unreadNewsCount.value = count;
@@ -111,7 +126,7 @@ const handleUnreadNewsCountUpdated = (count: number) => {
 const setActiveTab = (tab: string, opts?: { userId?: number | null }) => {
     if (!VALID_TABS.includes(tab)) return;
     previousTab.value = router.currentRoute.value;
-    if (opts && Object.prototype.hasOwnProperty.call(opts, 'userId')) {
+    if (opts && Object.prototype.hasOwnProperty.call(opts, "userId")) {
         currentUserId.value = opts!.userId ?? null;
     } else {
         currentUserId.value = null;
@@ -122,20 +137,19 @@ const setActiveTab = (tab: string, opts?: { userId?: number | null }) => {
 const showUserProfile = (userId: number) => {
     previousTab.value = router.currentRoute.value;
 
-    setActiveTab('user-profile', { userId });
+    setActiveTab("user-profile", { userId });
 };
 
-
 const checkAuthStatus = () => {
-    const token = localStorage.getItem('authToken');
+    const token = localStorage.getItem("authToken");
     isAuthenticated.value = !!token;
 };
 
 const handleFirstRunAccepted = async () => {
     try {
-        await invoke('mark_first_run_shown');
+        await invoke("mark_first_run_shown");
         showFirstRunInfo.value = false;
-        const flags = await invoke<Flags>('get_flags');
+        const flags = await invoke<Flags>("get_flags");
         if (!flags.disclaimer_shown.value) {
             showInitialDisclaimer.value = true;
         } else {
@@ -148,14 +162,14 @@ const handleFirstRunAccepted = async () => {
             }
         }
     } catch (error) {
-        console.error('Failed to mark first run as shown:', error);
-        addToast(t('toast.settings.first_run_save_failed', { error }), 'error');
+        console.error("Failed to mark first run as shown:", error);
+        addToast(t("toast.settings.first_run_save_failed", { error }), "error");
     }
 };
 
 const handleDisclaimerAccepted = async () => {
     try {
-        await invoke('mark_disclaimer_shown');
+        await invoke("mark_disclaimer_shown");
         showInitialDisclaimer.value = false;
         if (showPreloader.value) showPreloader.value = false;
 
@@ -165,17 +179,17 @@ const handleDisclaimerAccepted = async () => {
             }, 500);
         }
     } catch (error) {
-        console.error('Failed to mark disclaimer as shown:', error);
+        console.error("Failed to mark disclaimer as shown:", error);
         addToast(
-          t('toast.settings.disclaimer_save_failed', { error }),
-          'error'
+            t("toast.settings.disclaimer_save_failed", { error }),
+            "error"
         );
     }
 };
 
 const handleOpenDevMenu = () => {
     showDevMenu.value = true;
-    addToast(t('toast.dev.menu_opened'), 'info');
+    addToast(t("toast.dev.menu_opened"), "info");
 };
 
 const closeDevMenu = () => {
@@ -184,18 +198,19 @@ const closeDevMenu = () => {
 
 const handleLoggedOut = () => {
     isAuthenticated.value = false;
-    localStorage.removeItem('authToken');
-    setActiveTab('login');
+    localStorage.removeItem("authToken");
+    setActiveTab("login");
     syncService.destroy();
 
     clearUserData();
 
     globalUserStatus.stopStatusSync();
+    webSocketService.disconnect();
 };
 
 const handleLoggedIn = async () => {
     isAuthenticated.value = true;
-    setActiveTab('home');
+    setActiveTab("home");
 
     await initializeUserDataWrapper(isAuthenticated.value);
 
@@ -203,11 +218,12 @@ const handleLoggedIn = async () => {
     await syncService.checkAndRestoreOnStartup();
 
     globalUserStatus.initializeStatusSystem();
+    webSocketService.connect();
 };
 
 const handleRegistered = () => {
-    setActiveTab('login');
-    addToast(t('toast.auth.registration_success'), 'success');
+    setActiveTab("login");
+    addToast(t("toast.auth.registration_success"), "success");
 };
 
 const views: Record<string, any> = {
@@ -221,8 +237,9 @@ const views: Record<string, any> = {
     account: AccountView,
     login: LoginView,
     register: RegisterView,
+    verify: VerifyEmailView,
     friends: FriendsView,
-    'user-profile': UserProfileView,
+    "user-profile": UserProfileView,
     marketplace: Marketplace,
 };
 
@@ -232,18 +249,20 @@ const updateDiscordRPC = async (tab?: string) => {
     try {
         const settings = await fetchSettings();
         if (!settings?.discord_rpc_enabled?.value) {
-            console.log('Discord RPC is disabled in settings, skipping update');
+            console.log("Discord RPC is disabled in settings, skipping update");
             return;
         }
 
         const currentTab = tab || activeTab.value;
-        const details = t('discord.details.in_menu');
+        const details = t("discord.details.in_menu");
         const state = getDiscordState(currentTab, (k: string) => t(k));
 
-        await invoke('update_presence', { details, state });
-        console.log(`Discord RPC updated for tab: ${currentTab} - ${details}: ${state}`);
+        await invoke("update_presence", { details, state });
+        console.log(
+            `Discord RPC updated for tab: ${currentTab} - ${details}: ${state}`
+        );
     } catch (error) {
-        console.error('Failed to update Discord RPC:', error);
+        console.error("Failed to update Discord RPC:", error);
     }
 };
 
@@ -263,39 +282,81 @@ watch(locale, async () => {
 
 const hideRegistrationPrompt = () => {
     showRegistrationPrompt.value = false;
-    localStorage.setItem('registrationPromptShown', new Date().toISOString());
+    localStorage.setItem("registrationPromptShown", new Date().toISOString());
 };
 
 const handleRegisterPrompt = () => {
-    setActiveTab('register');
+    authModalView.value = "REGISTER";
+    showAuthModal.value = true;
     showRegistrationPrompt.value = false;
-    localStorage.setItem('registrationPromptShown', new Date().toISOString());
+    localStorage.setItem("registrationPromptShown", new Date().toISOString());
 };
 
-const { clearUserData } = useUser();
+const pendingVerifyCode = ref("");
+
+const handleShowVerify = (email: string, code?: string) => {
+    pendingVerifyEmail.value = email;
+    if (code) pendingVerifyCode.value = code;
+
+    setActiveTab("verify");
+};
+
+const handleVerified = (token?: string) => {
+    if (token) {
+        localStorage.setItem("authToken", token);
+        userService.clearCache();
+        addToast(
+            t("auth.verify.success") || "Email verified! Logging you in...",
+            "success"
+        );
+        handleLoggedIn();
+    } else {
+        addToast(
+            t("auth.verify.success") || "Email verified! Please log in.",
+            "success"
+        );
+        setActiveTab("login");
+    }
+};
 
+onMounted(async () => {
+    await listen("verify-email", (event: any) => {
+        const { code, email } = event.payload;
+        console.log("Received verification deep link:", code, email);
+        if (code) {
+            pendingVerifyCode.value = code;
+            if (email) pendingVerifyEmail.value = email;
+
+            if (activeTab.value !== "verify") {
+                setActiveTab("verify");
+            }
+        }
+    });
+});
+
+const { clearUserData } = useUser();
 
 const getTransitionName = () => {
     const tabOrder = [
-        'home',
-        'custom_clients',
-        'friends',
-        'settings',
-        'customization',
-        'app_logs',
-        'account',
-        'login',
-        'register',
-        'about',
+        "home",
+        "custom_clients",
+        "friends",
+        "settings",
+        "customization",
+        "app_logs",
+        "account",
+        "login",
+        "register",
+        "about",
     ];
     const currentIndex = tabOrder.indexOf(activeTab.value);
     const previousIndex = tabOrder.indexOf(previousTab.value);
 
     return currentIndex > previousIndex
-      ? 'slide-down'
-      : currentIndex < previousIndex
-        ? 'slide-up'
-        : 'fade-slide';
+        ? "slide-down"
+        : currentIndex < previousIndex
+          ? "slide-up"
+          : "fade-slide";
 };
 
 onMounted(() => {
@@ -307,35 +368,60 @@ onMounted(() => {
         isDev.value = await getIsDevelopment();
     })();
 
-    listen('launch-client', async (event) => {
-        const clientId = Number(event.payload);
+    listen("launch-client", async (event) => {
+        const { id, was_already_running } = event.payload as {
+            id: string;
+            was_already_running: boolean;
+        };
+        const clientId = Number(id);
 
         if (clientId) {
-            const clients = await invoke<Client[]>('get_clients')
-            const target = clients.find(c => c.id === clientId)
-
-            addToast(
-              t('home.launching', { client: target?.name || 'Client' }),
-              'info',
-              2000
-            );
+            const clients = await invoke<Client[]>("get_clients");
+            const target = clients.find((c) => c.id === clientId);
 
             if (target) {
                 try {
-                    const userToken = localStorage.getItem('authToken') || 'null';
-
-                    await invoke('launch_client', {
+                    const userToken =
+                        localStorage.getItem("authToken") || "null";
+
+                    if (!target.meta.installed) {
+                        addToast(
+                            t("home.starting_download", { name: target.name }),
+                            "info",
+                            3000
+                        );
+                        await invoke("download_client_only", {
+                            id: target.id,
+                        });
+                        target.meta.installed = true;
+                    }
+
+                    addToast(
+                        t("home.launching", { client: target.name }),
+                        "info",
+                        2000
+                    );
+
+                    await invoke("launch_client", {
                         id: target.id,
-                        userToken
-                    })
+                        userToken,
+                    });
+
+                    if (!was_already_running) {
+                        const { getCurrentWindow } = await import(
+                            "@tauri-apps/api/window"
+                        );
+                        await getCurrentWindow().minimize();
+                    }
                 } catch (e) {
-                    console.error('Cannot start client from deeplink', e)
+                    console.error("Cannot start client from deeplink", e);
+                    addToast(String(e), "error", 5000);
                 }
             }
         }
-    })
+    });
 
-    listen('client-launched', async (event) => {
+    listen("client-launched", async (event) => {
         const payload = event.payload as {
             id: number;
             name: string;
@@ -344,23 +430,25 @@ onMounted(() => {
         console.log(`Client ${payload.name} launched, updating status...`);
 
         try {
-            globalUserStatus.setPlayingClient(`${payload.name} (${payload.version || 'unknown version'})`);
+            globalUserStatus.setPlayingClient(
+                `${payload.name} (${payload.version || "unknown version"})`
+            );
             await settingsService.loadSettings();
             const settings = settingsService.getSettings() as any;
             if (settings.discord_rpc_enabled?.value) {
-                await invoke('update_presence', {
-                    details: t('discord.details.in_game'),
+                await invoke("update_presence", {
+                    details: t("discord.details.in_game"),
                     state: payload.name,
                 }).catch((error) => {
-                    console.error('Failed to update Discord presence:', error);
+                    console.error("Failed to update Discord presence:", error);
                 });
             }
         } catch (error) {
-            console.error('Failed to update playing status:', error);
+            console.error("Failed to update playing status:", error);
         }
     });
 
-    listen('client-exited', async (event) => {
+    listen("client-exited", async (event) => {
         const payload = event.payload as {
             id: number;
             name: string;
@@ -373,38 +461,38 @@ onMounted(() => {
             await settingsService.loadSettings();
             const settings = settingsService.getSettings() as any;
             if (settings.discord_rpc_enabled?.value) {
-                await invoke('update_presence', {
-                    details: t('discord.details.in_menu'),
-                    state: t('discord.states.browsing_clients'),
+                await invoke("update_presence", {
+                    details: t("discord.details.in_menu"),
+                    state: t("discord.states.browsing_clients"),
                 }).catch((error) => {
-                    console.error('Failed to reset Discord presence:', error);
+                    console.error("Failed to reset Discord presence:", error);
                 });
             }
         } catch (error) {
-            console.error('Failed to update online status:', error);
+            console.error("Failed to update online status:", error);
         }
     });
 
-    listen('update-user-status', async (event) => {
+    listen("update-user-status", async (event) => {
         const payload = event.payload as {
             status: string;
             currentClient: string | null;
         };
 
-        console.log('Received status update event from backend:', payload);
-        console.log('Backend status event ignored to prevent conflicts');
+        console.log("Received status update event from backend:", payload);
+        console.log("Backend status event ignored to prevent conflicts");
     });
 
-    listen('toast-error', (event) => {
+    listen("toast-error", (event) => {
         console.log(event);
 
         let message: string;
         message = String(event.payload);
 
-        addToast(message, 'error');
+        addToast(message, "error");
     });
 
-    window.addEventListener('beforeunload', () => {
+    window.addEventListener("beforeunload", () => {
         if (globalUserStatus.isAuthenticated.value) {
             globalUserStatus.setOffline();
         }
@@ -412,94 +500,223 @@ onMounted(() => {
 
     const emergencyHandler = (e: KeyboardEvent) => {
         try {
-            if (e.ctrlKey && e.shiftKey && (e.key === 'Home' || e.code === 'Home')) {
+            if (
+                e.ctrlKey &&
+                e.shiftKey &&
+                (e.key === "Home" || e.code === "Home")
+            ) {
                 const active = document.activeElement as HTMLElement | null;
-                const isTyping = !!active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' || active.isContentEditable);
+                const isTyping =
+                    !!active &&
+                    (active.tagName === "INPUT" ||
+                        active.tagName === "TEXTAREA" ||
+                        active.isContentEditable);
                 if (isTyping) return;
 
-                console.warn('Emergency theme reset triggered via Ctrl+Shift+Home');
+                console.warn(
+                    "Emergency theme reset triggered via Ctrl+Shift+Home"
+                );
                 themeService.emergencyReset();
 
                 addToast(
-                  t('toast.theme.emergency_reset_done', {
-                      action: t('toast.theme.emergency_reset_toggle_instruction')
-                  }),
-                  'info',
-                  8000
+                    t("toast.theme.emergency_reset_done", {
+                        action: t(
+                            "toast.theme.emergency_reset_toggle_instruction"
+                        ),
+                    }),
+                    "info",
+                    8000
                 );
             }
         } catch (err) {
-            console.error('Error during emergency theme reset:', err);
+            console.error("Error during emergency theme reset:", err);
         }
     };
 
-    window.addEventListener('keydown', emergencyHandler);
+    window.addEventListener("keydown", emergencyHandler);
+
+    window.addEventListener("achievement-unlocked", (event: any) => {
+        const { key } = event.detail;
+        const name = t(`achievements.list.${key}.name`);
+        const description = t(`achievements.list.${key}.description`);
+        addToast(
+            `${t("achievements.unlocked_title", { name })}\n${description}`,
+            "success",
+            9000
+        );
+    });
+
+    window.addEventListener("friend-request-received", (event: any) => {
+        const { sender, nickname } = event.detail;
+        const displayName = nickname || sender;
+        const audio = new Audio(notificationSound);
+        audio
+            .play()
+            .catch((e) =>
+                console.error("Failed to play notification sound:", e)
+            );
+        addToast(
+            t("notifications.friend_request_received.message", {
+                name: displayName,
+            }),
+            "info",
+            15000
+        );
+    });
+
+    window.addEventListener("friend-request-accepted", (event: any) => {
+        const { sender, nickname } = event.detail;
+        const displayName = nickname || sender;
+        const audio = new Audio(notificationSound);
+        audio
+            .play()
+            .catch((e) =>
+                console.error("Failed to play notification sound:", e)
+            );
+        addToast(
+            t("notifications.friend_request_accepted.message", {
+                name: displayName,
+            }),
+            "success",
+            15000
+        );
+    });
+
     onUnmounted(() => {
-        window.removeEventListener('keydown', emergencyHandler);
+        window.removeEventListener("keydown", emergencyHandler);
     });
 });
 
 onUnmounted(() => {
-    console.log('App unmounting, stopping systems...');
+    console.log("App unmounting, stopping systems...");
     stopStatusSync();
     updaterService.stopPeriodicCheck();
-    window.removeEventListener('beforeunload', () => {
-    });
-    console.log('Status sync stopped');
+    window.removeEventListener("beforeunload", () => {});
+    console.log("Status sync stopped");
 });
 </script>
 
 <template>
-    <Preloader v-model:show="showPreloader" :is-dev="isDev" :loading-state="loadingState"
-               :current-progress="currentProgress" :total-steps="totalSteps" :halloween-active="halloweenActive"
-               :current-theme="currentTheme"/>
-
-    <InitialSetupModals :show-first-run="showFirstRunInfo" :show-disclaimer="showInitialDisclaimer"
-                        :current-theme="currentTheme" @first-run-accepted="handleFirstRunAccepted"
-                        @disclaimer-accepted="handleDisclaimerAccepted" @auto-login="handleLoggedIn"/>
-
-    <DevMenuModal :show-dev-menu="showDevMenu" :registerPrompt="showRegistrationPrompt" @close="closeDevMenu"/>
-
-    <div class="flex h-screen flex-col overflow-hidden"
-         v-if="!showInitialDisclaimer && !showFirstRunInfo && contentVisible">
-        <Titlebar/>
-
-        <div class="flex-1 flex overflow-hidden relative pt-10">
-            <Sidebar
-              :activeTab="activeTab"
-              @changeTab="setActiveTab"
-              @open-dev-menu="handleOpenDevMenu"
-              :is-online="appOnline"
-              :is-authenticated="isAuthenticated"
-              :position="sidebarPosition"
-              @update:position="updateSidebarPosition"
-            />
-
-            <main :class="mainClasses">
-                <transition :name="getTransitionName()" mode="out-in" appear>
-                    <div :key="activeTab + (currentUserId || '')">
-                        <component :is="currentView" @logged-out="handleLoggedOut" @logged-in="handleLoggedIn"
-                                   @registered="handleRegistered" @change-view="setActiveTab"
-                                   @show-user-profile="showUserProfile"
-                                   @back-to-friends="() => setActiveTab('friends')"
-                                   @unread-count-updated="handleUnreadNewsCountUpdated" :key="activeTab"
-                                   :is-online="appOnline"
-                                   :user-id="currentUserId"
-                                   v-bind="activeTab === 'home' ? { unreadNewsCount, apiInitialized } : {}"/>
-                    </div>
-                </transition>
-            </main>
+    <div
+        :style="{
+            '--sidebar-bottom-height':
+                sidebarPosition === 'bottom' ? '80px' : '0px',
+            '--sidebar-top-height': sidebarPosition === 'top' ? '80px' : '0px',
+            '--toast-bottom-offset':
+                sidebarPosition === 'bottom' ? 'calc(1rem + 80px)' : '1rem',
+            '--toast-top-offset':
+                sidebarPosition === 'top' ? 'calc(4rem + 80px)' : '4rem',
+            '--toast-left-offset':
+                sidebarPosition === 'left' ? 'calc(1rem + 80px)' : '1rem',
+            '--toast-right-offset':
+                sidebarPosition === 'right' ? 'calc(1rem + 80px)' : '1rem',
+        }"
+    >
+        <Preloader
+            v-model:show="showPreloader"
+            :is-dev="isDev"
+            :loading-state="loadingState"
+            :current-progress="currentProgress"
+            :halloween-active="halloweenActive"
+            :current-theme="currentTheme"
+        />
+
+        <InitialSetupModals
+            :show-first-run="showFirstRunInfo"
+            :show-disclaimer="showInitialDisclaimer"
+            :current-theme="currentTheme"
+            @first-run-accepted="handleFirstRunAccepted"
+            @disclaimer-accepted="handleDisclaimerAccepted"
+            @auto-login="handleLoggedIn"
+        />
+
+        <DevMenuModal
+            :show-dev-menu="showDevMenu"
+            :registerPrompt="showRegistrationPrompt"
+            @close="closeDevMenu"
+        />
+
+        <div
+            class="flex h-screen flex-col overflow-hidden"
+            v-if="!showInitialDisclaimer && !showFirstRunInfo && contentVisible"
+        >
+            <Titlebar />
+
+            <div class="flex-1 flex overflow-hidden relative pt-10">
+                <Sidebar
+                    :activeTab="activeTab"
+                    @changeTab="setActiveTab"
+                    @open-dev-menu="handleOpenDevMenu"
+                    :is-online="appOnline"
+                    :is-authenticated="isAuthenticated"
+                    :position="sidebarPosition"
+                    @update:position="updateSidebarPosition"
+                />
+
+                <main :class="[mainClasses, 'main-content']">
+                    <transition
+                        :name="getTransitionName()"
+                        mode="out-in"
+                        appear
+                    >
+                        <div :key="activeTab + (currentUserId || '')">
+                            <component
+                                :is="currentView"
+                                @logged-out="handleLoggedOut"
+                                @logged-in="handleLoggedIn"
+                                @registered="handleRegistered"
+                                @change-view="setActiveTab"
+                                @show-user-profile="showUserProfile"
+                                @back-to-friends="() => setActiveTab('friends')"
+                                @unread-count-updated="
+                                    handleUnreadNewsCountUpdated
+                                "
+                                :key="activeTab"
+                                :is-online="appOnline"
+                                :user-id="currentUserId"
+                                v-on="
+                                    activeTab === 'login' ||
+                                    activeTab === 'register' ||
+                                    activeTab === 'verify'
+                                        ? {
+                                              'show-verify': handleShowVerify,
+                                              verified: handleVerified,
+                                          }
+                                        : {}
+                                "
+                                v-bind="
+                                    activeTab === 'verify'
+                                        ? {
+                                              email: pendingVerifyEmail,
+                                              code: pendingVerifyCode,
+                                          }
+                                        : activeTab === 'home'
+                                          ? { unreadNewsCount, apiInitialized }
+                                          : {}
+                                "
+                            />
+                        </div>
+                    </transition>
+                </main>
+            </div>
         </div>
-    </div>
 
-    <DownloadProgress/>
-    <ToastContainer/>
-    <GlobalModal/>
-    <RegisterPromptModal v-model="showRegistrationPrompt" @register="handleRegisterPrompt"
-                         @cancel="hideRegistrationPrompt"/>
+        <DownloadProgress />
+        <ToastContainer />
+        <GlobalModal />
+        <RegisterPromptModal
+            v-model="showRegistrationPrompt"
+            @register="handleRegisterPrompt"
+            @cancel="hideRegistrationPrompt"
+        />
+        <AuthModal
+            v-model="showAuthModal"
+            :initial-view="authModalView"
+            @logged-in="handleLoggedIn"
+        />
+    </div>
 </template>
 
-
 <style scoped>
 .loading-status {
     display: flex;
@@ -551,7 +768,6 @@ onUnmounted(() => {
     transform: translateY(-30px);
 }
 
-
 .slide-up-appear-active,
 .slide-down-appear-active,
 .fade-slide-appear-active {
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index e60a33c9..944fd544 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1,14 +1,11 @@
-@import 'tailwindcss';
-
-@plugin "daisyui" {
-    logs: false;
-}
+@import "tailwindcss";
+@plugin 'daisyui';
 
 @plugin "daisyui/theme" {
-    name: 'dark';
+    name: "dark";
     default: true;
     prefersdark: true;
-    color-scheme: 'dark';
+    color-scheme: "dark";
     --color-base-100: oklch(14% 0 0);
     --color-base-200: oklch(20% 0 0);
     --color-base-300: oklch(0.244 0 89.876);
@@ -40,10 +37,10 @@
 }
 
 @plugin "daisyui/theme" {
-    name: 'light';
+    name: "light";
     default: false;
     prefersdark: false;
-    color-scheme: 'light';
+    color-scheme: "light";
     --color-base-100: oklch(100% 0 0);
     --color-base-200: oklch(98% 0 0);
     --color-base-300: oklch(95% 0 0);
@@ -76,6 +73,78 @@
 
 html {
     @apply bg-base-200;
+    min-height: 100vh;
+}
+
+body {
+    min-height: 100vh;
+    position: relative;
+}
+
+body::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: var(--background-image, none);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    filter: blur(var(--background-blur, 0px));
+    opacity: calc(var(--background-opacity, 100) / 100);
+    z-index: -1;
+    pointer-events: none;
+    transition:
+        filter 0.3s ease,
+        opacity 0.3s ease;
+}
+
+html[data-has-background="true"] {
+    background-color: transparent !important;
+}
+
+html[data-has-background="true"] .main-content,
+html[data-has-background="true"] .main-sidebar,
+html[data-has-background="true"] .titlebar {
+    background-color: color-mix(
+        in srgb,
+        var(--color-base-100, #1f1f1f),
+        transparent 70%
+    ) !important;
+    backdrop-filter: blur(8px) !important;
+    -webkit-backdrop-filter: blur(8px) !important;
+    border-color: rgba(255, 255, 255, 0.03) !important;
+}
+
+html[data-has-background="true"] .irc-chat > div,
+html[data-has-background="true"] .irc-chat > button {
+    background-color: transparent !important;
+}
+
+html[data-has-background="true"] .card,
+html[data-has-background="true"] .irc-chat {
+    background-color: rgba(255, 255, 255, 0.04) !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+    border-color: rgba(255, 255, 255, 0.08) !important;
+}
+
+html[data-has-background="true"] .main-sidebar {
+    border-right-color: rgba(255, 255, 255, 0.05) !important;
+    border-left-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+html[data-has-background="true"] .dropdown-content,
+html[data-has-background="true"] .menu,
+html[data-has-background="true"] .modal-box,
+html[data-has-background="true"] .input,
+html[data-has-background="true"] .select,
+html[data-has-background="true"] .textarea {
+    background-color: var(--color-base-100, #141414) !important;
+    backdrop-filter: none !important;
+    opacity: 1 !important;
 }
 
 .slide-up {
@@ -114,7 +183,7 @@ html {
     display: block;
 }
 
-:root.winter-event[data-theme='dark'] {
+:root.winter-event[data-theme="dark"] {
     --color-primary: oklch(86% 0.06 240);
     --color-primary-content: oklch(0% 0 0);
     --color-accent: oklch(78% 0.05 210);
@@ -122,7 +191,7 @@ html {
     --color-info: oklch(72% 0.12 230);
 }
 
-:root.winter-event[data-theme='light'] {
+:root.winter-event[data-theme="light"] {
     --color-primary: oklch(28% 0.06 245);
     --color-primary-content: oklch(98% 0 0);
     --color-accent: oklch(32% 0.05 220);
diff --git a/src/assets/misc/notification.mp3 b/src/assets/misc/notification.mp3
new file mode 100644
index 00000000..fe4859ef
Binary files /dev/null and b/src/assets/misc/notification.mp3 differ
diff --git a/src/assets/misc/preloader.json b/src/assets/misc/preloader.json
deleted file mode 100644
index d1167847..00000000
--- a/src/assets/misc/preloader.json
+++ /dev/null
@@ -1,2219 +0,0 @@
-{
-    "v": "5.7.5",
-    "fr": 100,
-    "ip": 0,
-    "op": 701.6666666666666,
-    "w": 210,
-    "h": 210,
-    "nm": "loop",
-    "ddd": 0,
-    "assets": [],
-    "layers": [
-        {
-            "ddd": 0,
-            "ind": 1,
-            "ty": 4,
-            "sr": 1,
-            "ks": {
-                "p": { "a": 0, "k": [105.63, 105.09], "ix": 2 },
-                "a": { "a": 0, "k": [1636.13, 1955.25], "ix": 2 },
-                "s": { "a": 0, "k": [5.08, 5.08], "ix": 2 },
-                "r": { "a": 0, "k": -90, "ix": 2 },
-                "o": { "a": 0, "k": 100, "ix": 2 }
-            },
-            "ao": 0,
-            "shapes": [
-                {
-                    "ty": "gr",
-                    "it": [
-                        {
-                            "ty": "gr",
-                            "it": [
-                                {
-                                    "ty": "sh",
-                                    "d": 1,
-                                    "ks": {
-                                        "a": 0,
-                                        "k": {
-                                            "c": true,
-                                            "v": [
-                                                [301.03, -682.9],
-                                                [0.22, -983.75],
-                                                [-300.57, -682.9],
-                                                [-300.12, -682.46],
-                                                [-301.03, -682.46],
-                                                [-301.03, 682.91],
-                                                [-300.57, 682.91],
-                                                [0.22, 983.75],
-                                                [301.03, 682.91],
-                                                [300.57, 682.46],
-                                                [300.57, -682.46],
-                                                [301.03, -682.9]
-                                            ],
-                                            "i": [
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0]
-                                            ],
-                                            "o": [
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0]
-                                            ]
-                                        }
-                                    }
-                                },
-                                {
-                                    "ty": "tr",
-                                    "o": { "a": 0, "k": 100, "ix": 2 }
-                                }
-                            ]
-                        },
-                        {
-                            "ty": "gr",
-                            "it": [
-                                {
-                                    "ty": "sh",
-                                    "d": 1,
-                                    "ks": {
-                                        "a": 0,
-                                        "k": {
-                                            "c": false,
-                                            "v": [[301.03, -682.9]],
-                                            "i": [[0, 0]],
-                                            "o": [[0, 0]]
-                                        }
-                                    }
-                                },
-                                {
-                                    "ty": "tr",
-                                    "o": { "a": 0, "k": 100, "ix": 2 }
-                                }
-                            ]
-                        },
-                        {
-                            "ty": "tr",
-                            "p": {
-                                "a": 1,
-                                "k": [
-                                    {
-                                        "t": -303,
-                                        "s": [1637.83, 6789.75],
-                                        "i": { "x": [0], "y": [1] },
-                                        "o": { "x": [0.187], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    { "t": -205, "s": [1637.83, 2926.75] }
-                                ],
-                                "ix": 2
-                            },
-                            "o": { "a": 0, "k": 100, "ix": 2 }
-                        }
-                    ]
-                },
-                {
-                    "ty": "gr",
-                    "it": [
-                        {
-                            "ty": "gr",
-                            "it": [
-                                {
-                                    "ty": "sh",
-                                    "d": 1,
-                                    "ks": {
-                                        "a": 0,
-                                        "k": {
-                                            "c": true,
-                                            "v": [
-                                                [571.19, 652.97],
-                                                [571.19, 326.47],
-                                                [-408.08, -652.97],
-                                                [-571.31, -489.71],
-                                                [571.19, 652.97]
-                                            ],
-                                            "i": [
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0]
-                                            ],
-                                            "o": [
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0]
-                                            ]
-                                        }
-                                    }
-                                },
-                                {
-                                    "ty": "tr",
-                                    "o": { "a": 0, "k": 100, "ix": 2 }
-                                }
-                            ]
-                        },
-                        {
-                            "ty": "gr",
-                            "it": [
-                                {
-                                    "ty": "sh",
-                                    "d": 1,
-                                    "ks": {
-                                        "a": 0,
-                                        "k": {
-                                            "c": false,
-                                            "v": [[571.19, 652.97]],
-                                            "i": [[0, 0]],
-                                            "o": [[0, 0]]
-                                        }
-                                    }
-                                },
-                                {
-                                    "ty": "tr",
-                                    "o": { "a": 0, "k": 100, "ix": 2 }
-                                }
-                            ]
-                        },
-                        {
-                            "ty": "tr",
-                            "p": {
-                                "a": 1,
-                                "k": [
-                                    {
-                                        "t": -175,
-                                        "s": [-2569.7, -130],
-                                        "i": { "x": [0], "y": [1] },
-                                        "o": { "x": [0.204], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": -125,
-                                        "s": [571.31, 2778.92],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 63,
-                                        "s": [571.31, 2778.92],
-                                        "i": { "x": [0.952], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 97,
-                                        "s": [488.31, 2778.92],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 240,
-                                        "s": [488.31, 2778.92],
-                                        "i": { "x": [0.829], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 275,
-                                        "s": [571.31, 2778.92],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 442,
-                                        "s": [571.31, 2778.92],
-                                        "i": { "x": [0.952], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 475,
-                                        "s": [488.31, 2778.92],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 618,
-                                        "s": [488.31, 2778.92],
-                                        "i": { "x": [0.829], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 653,
-                                        "s": [571.31, 2778.92],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 820,
-                                        "s": [571.31, 2778.92],
-                                        "i": { "x": [0.952], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 853,
-                                        "s": [488.31, 2778.92],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 997,
-                                        "s": [488.31, 2778.92],
-                                        "i": { "x": [0.829], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1032,
-                                        "s": [571.31, 2778.92],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1198,
-                                        "s": [571.31, 2778.92],
-                                        "i": { "x": [0.952], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1232,
-                                        "s": [488.31, 2778.92],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1375,
-                                        "s": [488.31, 2778.92],
-                                        "i": { "x": [0.829], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1410,
-                                        "s": [571.31, 2778.92],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1577,
-                                        "s": [571.31, 2778.92],
-                                        "i": { "x": [0.952], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1610,
-                                        "s": [488.31, 2778.92],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1753,
-                                        "s": [488.31, 2778.92],
-                                        "i": { "x": [0.829], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1788,
-                                        "s": [571.31, 2778.92],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1955,
-                                        "s": [571.31, 2778.92],
-                                        "i": { "x": [0.952], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1988,
-                                        "s": [488.31, 2778.92],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2132,
-                                        "s": [488.31, 2778.92],
-                                        "i": { "x": [0.829], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2167,
-                                        "s": [571.31, 2778.92],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2333,
-                                        "s": [571.31, 2778.92],
-                                        "i": { "x": [0.952], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2367,
-                                        "s": [488.31, 2778.92],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2510,
-                                        "s": [488.31, 2778.92],
-                                        "i": { "x": [0.829], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    { "t": 2545, "s": [571.31, 2778.92] }
-                                ],
-                                "ix": 2
-                            },
-                            "s": {
-                                "a": 1,
-                                "k": [
-                                    {
-                                        "t": 63,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 97,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.743], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 240,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.92], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 275,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 442,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 475,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.743], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 618,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.92], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 653,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 820,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 853,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.743], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 997,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.92], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1032,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1198,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1232,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.743], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1375,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.92], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1410,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1577,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1610,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.743], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1753,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.92], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1788,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1955,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1988,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.743], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2132,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.92], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2167,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2333,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2367,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.743], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2510,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.92], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    { "t": 2545, "s": [100, 100] }
-                                ],
-                                "ix": 2
-                            },
-                            "o": { "a": 0, "k": 100, "ix": 2 }
-                        }
-                    ]
-                },
-                {
-                    "ty": "gr",
-                    "it": [
-                        {
-                            "ty": "gr",
-                            "it": [
-                                {
-                                    "ty": "sh",
-                                    "d": 1,
-                                    "ks": {
-                                        "a": 0,
-                                        "k": {
-                                            "c": true,
-                                            "v": [
-                                                [244.03, -489.52],
-                                                [-571.25, 325.89],
-                                                [-571.25, 653.16],
-                                                [571.25, -489.52],
-                                                [407.64, -653.15],
-                                                [407.63, -653.16],
-                                                [244.02, -489.52],
-                                                [244.03, -489.52]
-                                            ],
-                                            "i": [
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0]
-                                            ],
-                                            "o": [
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0],
-                                                [0, 0]
-                                            ]
-                                        }
-                                    }
-                                },
-                                {
-                                    "ty": "tr",
-                                    "o": { "a": 0, "k": 100, "ix": 2 }
-                                }
-                            ]
-                        },
-                        {
-                            "ty": "gr",
-                            "it": [
-                                {
-                                    "ty": "sh",
-                                    "d": 1,
-                                    "ks": {
-                                        "a": 0,
-                                        "k": {
-                                            "c": false,
-                                            "v": [[244.03, -489.52]],
-                                            "i": [[0, 0]],
-                                            "o": [[0, 0]]
-                                        }
-                                    }
-                                },
-                                {
-                                    "ty": "tr",
-                                    "o": { "a": 0, "k": 100, "ix": 2 }
-                                }
-                            ]
-                        },
-                        {
-                            "ty": "tr",
-                            "p": {
-                                "a": 1,
-                                "k": [
-                                    {
-                                        "t": -200,
-                                        "s": [5849, -23],
-                                        "i": { "x": [0], "y": [1] },
-                                        "o": { "x": [0.202], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": -150,
-                                        "s": [2701, 2778.73],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 63,
-                                        "s": [2701, 2778.73],
-                                        "i": { "x": [0.905], "y": [1] },
-                                        "o": { "x": [0.851], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 97,
-                                        "s": [2781, 2778.73],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 240,
-                                        "s": [2781, 2778.73],
-                                        "i": { "x": [0.829], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 275,
-                                        "s": [2701, 2778.73],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 442,
-                                        "s": [2701, 2778.73],
-                                        "i": { "x": [0.905], "y": [1] },
-                                        "o": { "x": [0.851], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 475,
-                                        "s": [2781, 2778.73],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 618,
-                                        "s": [2781, 2778.73],
-                                        "i": { "x": [0.829], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 653,
-                                        "s": [2701, 2778.73],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 820,
-                                        "s": [2701, 2778.73],
-                                        "i": { "x": [0.905], "y": [1] },
-                                        "o": { "x": [0.851], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 853,
-                                        "s": [2781, 2778.73],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 997,
-                                        "s": [2781, 2778.73],
-                                        "i": { "x": [0.829], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1032,
-                                        "s": [2701, 2778.73],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1198,
-                                        "s": [2701, 2778.73],
-                                        "i": { "x": [0.905], "y": [1] },
-                                        "o": { "x": [0.851], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1232,
-                                        "s": [2781, 2778.73],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1375,
-                                        "s": [2781, 2778.73],
-                                        "i": { "x": [0.829], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1410,
-                                        "s": [2701, 2778.73],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1577,
-                                        "s": [2701, 2778.73],
-                                        "i": { "x": [0.905], "y": [1] },
-                                        "o": { "x": [0.851], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1610,
-                                        "s": [2781, 2778.73],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1753,
-                                        "s": [2781, 2778.73],
-                                        "i": { "x": [0.829], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1788,
-                                        "s": [2701, 2778.73],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1955,
-                                        "s": [2701, 2778.73],
-                                        "i": { "x": [0.905], "y": [1] },
-                                        "o": { "x": [0.851], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1988,
-                                        "s": [2781, 2778.73],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2132,
-                                        "s": [2781, 2778.73],
-                                        "i": { "x": [0.829], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2167,
-                                        "s": [2701, 2778.73],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2333,
-                                        "s": [2701, 2778.73],
-                                        "i": { "x": [0.905], "y": [1] },
-                                        "o": { "x": [0.851], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2367,
-                                        "s": [2781, 2778.73],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2510,
-                                        "s": [2781, 2778.73],
-                                        "i": { "x": [0.829], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    { "t": 2545, "s": [2701, 2778.73] }
-                                ],
-                                "ix": 2
-                            },
-                            "s": {
-                                "a": 1,
-                                "k": [
-                                    {
-                                        "t": 63,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.744], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 97,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.744], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 240,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 275,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 442,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.744], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 475,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.744], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 618,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 653,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 820,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.744], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 853,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.744], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 997,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1032,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1198,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.744], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1232,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.744], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1375,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1410,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1577,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.744], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1610,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.744], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1753,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1788,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1955,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.744], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1988,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.744], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2132,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2167,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2333,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.744], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2367,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.744], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2510,
-                                        "s": [105, 105],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    { "t": 2545, "s": [100, 100] }
-                                ],
-                                "ix": 2
-                            },
-                            "o": { "a": 0, "k": 100, "ix": 2 }
-                        }
-                    ]
-                },
-                {
-                    "ty": "gr",
-                    "it": [
-                        {
-                            "ty": "gr",
-                            "it": [
-                                {
-                                    "ty": "sh",
-                                    "d": 1,
-                                    "ks": {
-                                        "a": 1,
-                                        "k": [
-                                            {
-                                                "t": -238,
-                                                "s": [
-                                                    {
-                                                        "c": true,
-                                                        "v": [
-                                                            [1.71, 245.88],
-                                                            [1.69, 247.64],
-                                                            [0, 245.88],
-                                                            [1.65, 244.31],
-                                                            [3.29, 245.87],
-                                                            [1.67, 249.02],
-                                                            [1.71, 245.88]
-                                                        ],
-                                                        "i": [
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0]
-                                                        ],
-                                                        "o": [
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0]
-                                                        ]
-                                                    }
-                                                ],
-                                                "i": { "x": [0.829], "y": [1] },
-                                                "o": { "x": [1], "y": [0] }
-                                            },
-                                            {
-                                                "t": -177,
-                                                "s": [
-                                                    {
-                                                        "c": true,
-                                                        "v": [
-                                                            [983.38, 245.88],
-                                                            [491.69, 737.64],
-                                                            [0, 245.88],
-                                                            [-491.68, 737.64],
-                                                            [-983.38, 245.88],
-                                                            [0, -737.64],
-                                                            [983.38, 245.88]
-                                                        ],
-                                                        "i": [
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0]
-                                                        ],
-                                                        "o": [
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0]
-                                                        ]
-                                                    }
-                                                ]
-                                            }
-                                        ],
-                                        "ix": 2
-                                    }
-                                },
-                                {
-                                    "ty": "tr",
-                                    "o": { "a": 0, "k": 100, "ix": 2 }
-                                }
-                            ]
-                        },
-                        {
-                            "ty": "gr",
-                            "it": [
-                                {
-                                    "ty": "sh",
-                                    "d": 1,
-                                    "ks": {
-                                        "a": 0,
-                                        "k": {
-                                            "c": false,
-                                            "v": [[983.38, 245.88]],
-                                            "i": [[0, 0]],
-                                            "o": [[0, 0]]
-                                        }
-                                    }
-                                },
-                                {
-                                    "ty": "tr",
-                                    "o": { "a": 0, "k": 100, "ix": 2 }
-                                }
-                            ]
-                        },
-                        {
-                            "ty": "tr",
-                            "p": {
-                                "a": 1,
-                                "k": [
-                                    {
-                                        "t": -3,
-                                        "s": [1636.13, 1390.49],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 52,
-                                        "s": [1636.13, 1345.49],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 148,
-                                        "s": [1636.13, 1345.49],
-                                        "i": { "x": [0.719], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 198,
-                                        "s": [1636.13, 1390.49],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 375,
-                                        "s": [1636.13, 1390.49],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 430,
-                                        "s": [1636.13, 1345.49],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 527,
-                                        "s": [1636.13, 1345.49],
-                                        "i": { "x": [0.719], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 577,
-                                        "s": [1636.13, 1390.49],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 753,
-                                        "s": [1636.13, 1390.49],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 808,
-                                        "s": [1636.13, 1345.49],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 905,
-                                        "s": [1636.13, 1345.49],
-                                        "i": { "x": [0.719], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 955,
-                                        "s": [1636.13, 1390.49],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1132,
-                                        "s": [1636.13, 1390.49],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1187,
-                                        "s": [1636.13, 1345.49],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1283,
-                                        "s": [1636.13, 1345.49],
-                                        "i": { "x": [0.719], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1333,
-                                        "s": [1636.13, 1390.49],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1510,
-                                        "s": [1636.13, 1390.49],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1565,
-                                        "s": [1636.13, 1345.49],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1662,
-                                        "s": [1636.13, 1345.49],
-                                        "i": { "x": [0.719], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1712,
-                                        "s": [1636.13, 1390.49],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1888,
-                                        "s": [1636.13, 1390.49],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1943,
-                                        "s": [1636.13, 1345.49],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2040,
-                                        "s": [1636.13, 1345.49],
-                                        "i": { "x": [0.719], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2090,
-                                        "s": [1636.13, 1390.49],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2267,
-                                        "s": [1636.13, 1390.49],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2322,
-                                        "s": [1636.13, 1345.49],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2418,
-                                        "s": [1636.13, 1345.49],
-                                        "i": { "x": [0.719], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    { "t": 2468, "s": [1636.13, 1390.49] }
-                                ],
-                                "ix": 2
-                            },
-                            "s": {
-                                "a": 1,
-                                "k": [
-                                    {
-                                        "t": -3,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 52,
-                                        "s": [116, 116],
-                                        "i": { "x": [0.943], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 148,
-                                        "s": [116, 116],
-                                        "i": { "x": [0.879], "y": [1] },
-                                        "o": { "x": [0.857], "y": [0] }
-                                    },
-                                    {
-                                        "t": 198,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 375,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 430,
-                                        "s": [116, 116],
-                                        "i": { "x": [0.943], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 527,
-                                        "s": [116, 116],
-                                        "i": { "x": [0.879], "y": [1] },
-                                        "o": { "x": [0.857], "y": [0] }
-                                    },
-                                    {
-                                        "t": 577,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 753,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 808,
-                                        "s": [116, 116],
-                                        "i": { "x": [0.943], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 905,
-                                        "s": [116, 116],
-                                        "i": { "x": [0.879], "y": [1] },
-                                        "o": { "x": [0.857], "y": [0] }
-                                    },
-                                    {
-                                        "t": 955,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1132,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1187,
-                                        "s": [116, 116],
-                                        "i": { "x": [0.943], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1283,
-                                        "s": [116, 116],
-                                        "i": { "x": [0.879], "y": [1] },
-                                        "o": { "x": [0.857], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1333,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1510,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1565,
-                                        "s": [116, 116],
-                                        "i": { "x": [0.943], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1662,
-                                        "s": [116, 116],
-                                        "i": { "x": [0.879], "y": [1] },
-                                        "o": { "x": [0.857], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1712,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1888,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1943,
-                                        "s": [116, 116],
-                                        "i": { "x": [0.943], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2040,
-                                        "s": [116, 116],
-                                        "i": { "x": [0.879], "y": [1] },
-                                        "o": { "x": [0.857], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2090,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2267,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2322,
-                                        "s": [116, 116],
-                                        "i": { "x": [0.943], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2418,
-                                        "s": [116, 116],
-                                        "i": { "x": [0.879], "y": [1] },
-                                        "o": { "x": [0.857], "y": [0] }
-                                    },
-                                    { "t": 2468, "s": [100, 100] }
-                                ],
-                                "ix": 2
-                            },
-                            "o": { "a": 0, "k": 100, "ix": 2 }
-                        }
-                    ]
-                },
-                {
-                    "ty": "gr",
-                    "it": [
-                        {
-                            "ty": "gr",
-                            "it": [
-                                {
-                                    "ty": "sh",
-                                    "d": 1,
-                                    "ks": {
-                                        "a": 1,
-                                        "k": [
-                                            {
-                                                "t": -182,
-                                                "s": [
-                                                    {
-                                                        "c": true,
-                                                        "v": [
-                                                            [-17.83, 170.17],
-                                                            [-13.11, 172.25],
-                                                            [-16.44, 169.52],
-                                                            [-20.6, 173.5],
-                                                            [-20.06, 167.14],
-                                                            [-16.19, 166.84],
-                                                            [-20.35, 166.19],
-                                                            [-17.01, 165.58],
-                                                            [-18.96, 170.17],
-                                                            [-13.39, 164.41],
-                                                            [-17.83, 170.17]
-                                                        ],
-                                                        "i": [
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0]
-                                                        ],
-                                                        "o": [
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0]
-                                                        ]
-                                                    }
-                                                ],
-                                                "i": { "x": [0], "y": [1] },
-                                                "o": {
-                                                    "x": [0.167],
-                                                    "y": [0.167]
-                                                }
-                                            },
-                                            {
-                                                "t": -180,
-                                                "s": [
-                                                    {
-                                                        "c": true,
-                                                        "v": [
-                                                            [732.17, 238.5],
-                                                            [371.89, 610.58],
-                                                            [465.23, 704.52],
-                                                            [924.4, 243.5],
-                                                            [-1.73, -681.19],
-                                                            [-924.52, 246.84],
-                                                            [-468.68, 707.86],
-                                                            [-377.01, 610.58],
-                                                            [-719.79, 247.67],
-                                                            [3.27, -502.25],
-                                                            [732.17, 238.5]
-                                                        ],
-                                                        "i": [
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0]
-                                                        ],
-                                                        "o": [
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0]
-                                                        ]
-                                                    }
-                                                ],
-                                                "i": { "x": [0], "y": [1] },
-                                                "o": { "x": [0.045], "y": [0] }
-                                            },
-                                            {
-                                                "t": -93,
-                                                "s": [
-                                                    {
-                                                        "c": true,
-                                                        "v": [
-                                                            [1308.84, 246.84],
-                                                            [493.56, 1062.25],
-                                                            [493.56, 1389.53],
-                                                            [1636.07, 246.84],
-                                                            [-0.06, -1389.53],
-                                                            [-1636.18, 246.84],
-                                                            [-493.68, 1389.53],
-                                                            [-493.68, 1062.25],
-                                                            [-1308.96, 246.84],
-                                                            [-0.06, -1062.25],
-                                                            [1308.84, 246.84]
-                                                        ],
-                                                        "i": [
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0]
-                                                        ],
-                                                        "o": [
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0],
-                                                            [0, 0]
-                                                        ]
-                                                    }
-                                                ]
-                                            }
-                                        ],
-                                        "ix": 2
-                                    }
-                                },
-                                {
-                                    "ty": "tr",
-                                    "o": { "a": 0, "k": 100, "ix": 2 }
-                                }
-                            ]
-                        },
-                        {
-                            "ty": "gr",
-                            "it": [
-                                {
-                                    "ty": "sh",
-                                    "d": 1,
-                                    "ks": {
-                                        "a": 0,
-                                        "k": {
-                                            "c": false,
-                                            "v": [[1308.84, 246.84]],
-                                            "i": [[0, 0]],
-                                            "o": [[0, 0]]
-                                        }
-                                    }
-                                },
-                                {
-                                    "ty": "tr",
-                                    "o": { "a": 0, "k": 100, "ix": 2 }
-                                }
-                            ]
-                        },
-                        {
-                            "ty": "tr",
-                            "p": {
-                                "a": 1,
-                                "k": [
-                                    {
-                                        "t": 18,
-                                        "s": [1636.18, 1389.53],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 75,
-                                        "s": [1636.18, 1360.53],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 190,
-                                        "s": [1636.18, 1360.53],
-                                        "i": { "x": [0.868], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 247,
-                                        "s": [1636.18, 1389.53],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 397,
-                                        "s": [1636.18, 1389.53],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 453,
-                                        "s": [1636.18, 1360.53],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 568,
-                                        "s": [1636.18, 1360.53],
-                                        "i": { "x": [0.868], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 625,
-                                        "s": [1636.18, 1389.53],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 775,
-                                        "s": [1636.18, 1389.53],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 832,
-                                        "s": [1636.18, 1360.53],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 947,
-                                        "s": [1636.18, 1360.53],
-                                        "i": { "x": [0.868], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1003,
-                                        "s": [1636.18, 1389.53],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1153,
-                                        "s": [1636.18, 1389.53],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1210,
-                                        "s": [1636.18, 1360.53],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1325,
-                                        "s": [1636.18, 1360.53],
-                                        "i": { "x": [0.868], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1382,
-                                        "s": [1636.18, 1389.53],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1532,
-                                        "s": [1636.18, 1389.53],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1588,
-                                        "s": [1636.18, 1360.53],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1703,
-                                        "s": [1636.18, 1360.53],
-                                        "i": { "x": [0.868], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1760,
-                                        "s": [1636.18, 1389.53],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1910,
-                                        "s": [1636.18, 1389.53],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 1967,
-                                        "s": [1636.18, 1360.53],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2082,
-                                        "s": [1636.18, 1360.53],
-                                        "i": { "x": [0.868], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2138,
-                                        "s": [1636.18, 1389.53],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2288,
-                                        "s": [1636.18, 1389.53],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2345,
-                                        "s": [1636.18, 1360.53],
-                                        "i": { "x": [0.75], "y": [0.75] },
-                                        "o": { "x": [0.25], "y": [0.25] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    {
-                                        "t": 2460,
-                                        "s": [1636.18, 1360.53],
-                                        "i": { "x": [0.868], "y": [1] },
-                                        "o": { "x": [1], "y": [0] },
-                                        "ti": [0, 0],
-                                        "to": [0, 0]
-                                    },
-                                    { "t": 2517, "s": [1636.18, 1389.53] }
-                                ],
-                                "ix": 2
-                            },
-                            "s": {
-                                "a": 1,
-                                "k": [
-                                    {
-                                        "t": 18,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.608], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 75,
-                                        "s": [110, 110],
-                                        "i": { "x": [0.679], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 190,
-                                        "s": [110, 110],
-                                        "i": { "x": [0.812], "y": [1] },
-                                        "o": { "x": [0.962], "y": [0] }
-                                    },
-                                    {
-                                        "t": 247,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 397,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.608], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 453,
-                                        "s": [110, 110],
-                                        "i": { "x": [0.679], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 568,
-                                        "s": [110, 110],
-                                        "i": { "x": [0.812], "y": [1] },
-                                        "o": { "x": [0.962], "y": [0] }
-                                    },
-                                    {
-                                        "t": 625,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 775,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.608], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 832,
-                                        "s": [110, 110],
-                                        "i": { "x": [0.679], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 947,
-                                        "s": [110, 110],
-                                        "i": { "x": [0.812], "y": [1] },
-                                        "o": { "x": [0.962], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1003,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1153,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.608], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1210,
-                                        "s": [110, 110],
-                                        "i": { "x": [0.679], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1325,
-                                        "s": [110, 110],
-                                        "i": { "x": [0.812], "y": [1] },
-                                        "o": { "x": [0.962], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1382,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1532,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.608], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1588,
-                                        "s": [110, 110],
-                                        "i": { "x": [0.679], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1703,
-                                        "s": [110, 110],
-                                        "i": { "x": [0.812], "y": [1] },
-                                        "o": { "x": [0.962], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1760,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1910,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.608], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 1967,
-                                        "s": [110, 110],
-                                        "i": { "x": [0.679], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2082,
-                                        "s": [110, 110],
-                                        "i": { "x": [0.812], "y": [1] },
-                                        "o": { "x": [0.962], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2138,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.667], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2288,
-                                        "s": [100, 100],
-                                        "i": { "x": [0.608], "y": [1] },
-                                        "o": { "x": [1], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2345,
-                                        "s": [110, 110],
-                                        "i": { "x": [0.679], "y": [1] },
-                                        "o": { "x": [0.167], "y": [0] }
-                                    },
-                                    {
-                                        "t": 2460,
-                                        "s": [110, 110],
-                                        "i": { "x": [0.812], "y": [1] },
-                                        "o": { "x": [0.962], "y": [0] }
-                                    },
-                                    { "t": 2517, "s": [100, 100] }
-                                ],
-                                "ix": 2
-                            },
-                            "o": { "a": 0, "k": 100, "ix": 2 }
-                        }
-                    ]
-                },
-                {
-                    "ty": "fl",
-                    "c": { "a": 0, "k": [1, 1, 1], "ix": 2 },
-                    "o": { "a": 0, "k": 100, "ix": 2 },
-                    "r": 1,
-                    "bm": 0
-                }
-            ],
-            "ip": 0,
-            "op": 702.6666666666666,
-            "st": 0,
-            "bm": 0
-        }
-    ],
-    "markers": []
-}
diff --git a/src/components/common/ConfirmModal.vue b/src/components/common/ConfirmModal.vue
index bd047a42..7f247a8b 100644
--- a/src/components/common/ConfirmModal.vue
+++ b/src/components/common/ConfirmModal.vue
@@ -3,22 +3,26 @@
         <h3 class="text-lg font-semibold mb-2">{{ title }}</h3>
         <p class="text-sm text-base-content/70 mb-4">{{ message }}</p>
         <div class="flex justify-end gap-2">
-            <button class="btn btn-ghost btn-sm" @click="$emit('cancel')">{{ cancelLabel }}</button>
-            <button class="btn btn-danger btn-sm" @click="$emit('confirm')">{{ confirmLabel }}</button>
+            <button class="btn btn-ghost btn-sm" @click="$emit('cancel')">
+                {{ cancelLabel }}
+            </button>
+            <button class="btn btn-danger btn-sm" @click="$emit('confirm')">
+                {{ confirmLabel }}
+            </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
 const { title, message, confirmLabel, cancelLabel } = defineProps({
-    title: { type: String, default: 'Confirm' },
-    message: { type: String, default: '' },
-    confirmLabel: { type: String, default: 'Confirm' },
-    cancelLabel: { type: String, default: 'Cancel' },
+    title: { type: String, default: "Confirm" },
+    message: { type: String, default: "" },
+    confirmLabel: { type: String, default: "Confirm" },
+    cancelLabel: { type: String, default: "Cancel" },
 });
 
 defineEmits<{
-    (e: 'confirm'): void;
-    (e: 'cancel'): void;
+    (e: "confirm"): void;
+    (e: "cancel"): void;
 }>();
 </script>
diff --git a/src/components/common/FiltersMenu.vue b/src/components/common/FiltersMenu.vue
index e8040bf7..78ee3e5d 100644
--- a/src/components/common/FiltersMenu.vue
+++ b/src/components/common/FiltersMenu.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import {computed, ref, watch} from 'vue';
-import {ChevronDown, Funnel} from 'lucide-vue-next';
-import {useI18n} from 'vue-i18n';
+import { computed, ref, watch } from "vue";
+import { ChevronDown, Funnel } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
 
 interface Filters {
     fabric: boolean;
@@ -10,8 +10,8 @@ interface Filters {
     installed: boolean;
 }
 
-type SortKey = 'popularity' | 'name' | 'newest' | 'version' | 'rating';
-type SortOrder = 'asc' | 'desc';
+type SortKey = "popularity" | "name" | "newest" | "version" | "rating";
+type SortOrder = "asc" | "desc";
 
 const props = defineProps<{
     activeFilters: Filters;
@@ -20,9 +20,9 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    'update:activeFilters': [filters: Filters];
-    'update:clientSortKey': [sortKey: SortKey];
-    'update:clientSortOrder': [sortOrder: SortOrder];
+    "update:activeFilters": [filters: Filters];
+    "update:clientSortKey": [sortKey: SortKey];
+    "update:clientSortOrder": [sortOrder: SortOrder];
 }>();
 
 const { t } = useI18n();
@@ -31,24 +31,26 @@ const showFiltersMenu = ref(false);
 
 const localFilters = computed({
     get: () => props.activeFilters,
-    set: (value) => emit('update:activeFilters', value),
+    set: (value) => emit("update:activeFilters", value),
 });
 
 const localSortKey = computed({
     get: () => props.clientSortKey,
-    set: (value) => emit('update:clientSortKey', value),
+    set: (value) => emit("update:clientSortKey", value),
 });
 
 const localSortOrder = computed({
     get: () => props.clientSortOrder,
-    set: (value) => emit('update:clientSortOrder', value),
+    set: (value) => emit("update:clientSortOrder", value),
 });
 
 const hasModifiedFilters = computed(() => {
-    return props.activeFilters.fabric ||
-      props.activeFilters.forge ||
-      props.activeFilters.vanilla ||
-      props.activeFilters.installed
+    return (
+        props.activeFilters.fabric ||
+        props.activeFilters.forge ||
+        props.activeFilters.vanilla ||
+        props.activeFilters.installed
+    );
 });
 
 const toggleFiltersMenu = (event?: Event) => {
@@ -62,70 +64,109 @@ const closeFiltersMenu = () => {
 
 const onDocumentClick = (e: MouseEvent) => {
     const target = e.target as HTMLElement;
-    if (!target.closest('.filters-container')) {
+    if (!target.closest(".filters-container")) {
         closeFiltersMenu();
     }
 };
 
 watch(showFiltersMenu, (isOpen) => {
     if (isOpen) {
-        document.addEventListener('click', onDocumentClick);
+        document.addEventListener("click", onDocumentClick);
     } else {
-        document.removeEventListener('click', onDocumentClick);
+        document.removeEventListener("click", onDocumentClick);
     }
 });
 
-import {onBeforeUnmount} from 'vue';
+import { onBeforeUnmount } from "vue";
 
 onBeforeUnmount(() => {
-    document.removeEventListener('click', onDocumentClick);
+    document.removeEventListener("click", onDocumentClick);
 });
 </script>
 
 <template>
     <div class="relative filters-container">
-        <button @click.stop="toggleFiltersMenu" class="btn btn-ghost btn-sm ml-2 relative">
-            <Funnel class="w-4 h-4 mr-1"/>
-            {{ t('home.filters_title') }}
-            <ChevronDown class="w-4 h-4 ml-1 transition-all duration-300" :class="{ 'rotate-180 ': showFiltersMenu }"/>
-            <span v-if="hasModifiedFilters" class="absolute top-1 right-1 w-2 h-2 bg-primary rounded-full"></span>
+        <button
+            @click.stop="toggleFiltersMenu"
+            class="btn btn-ghost btn-sm ml-2 relative"
+        >
+            <Funnel class="w-4 h-4 mr-1" />
+            {{ t("home.filters_title") }}
+            <ChevronDown
+                class="w-4 h-4 ml-1 transition-all duration-300"
+                :class="{ 'rotate-180 ': showFiltersMenu }"
+            />
+            <span
+                v-if="hasModifiedFilters"
+                class="absolute top-1 right-1 w-2 h-2 bg-primary rounded-full"
+            ></span>
         </button>
 
         <transition name="slide-up-filter">
-            <div v-if="showFiltersMenu"
-                 class="absolute right-0 mt-2 w-56 bg-base-200 rounded-box shadow-xl border border-base-300 z-50 p-3">
+            <div
+                v-if="showFiltersMenu"
+                class="absolute right-0 mt-2 w-56 bg-base-200 rounded-box shadow-xl border border-base-300 z-50 p-3"
+            >
                 <div class="flex flex-col gap-2 text-sm">
                     <select class="select select-sm" v-model="localSortKey">
-                        <option value="newest">{{ t('home.sort.newest') }}</option>
-                        <option value="popularity">{{ t('home.sort.popularity') }}</option>
-                        <option value="rating">{{ t('home.sort.rating') }}</option>
-                        <option value="name">{{ t('home.sort.name') }}</option>
-                        <option value="version">{{ t('home.sort.version') }}</option>
+                        <option value="newest">
+                            {{ t("home.sort.newest") }}
+                        </option>
+                        <option value="popularity">
+                            {{ t("home.sort.popularity") }}
+                        </option>
+                        <option value="rating">
+                            {{ t("home.sort.rating") }}
+                        </option>
+                        <option value="name">{{ t("home.sort.name") }}</option>
+                        <option value="version">
+                            {{ t("home.sort.version") }}
+                        </option>
                     </select>
 
                     <select class="select select-sm" v-model="localSortOrder">
-                        <option value="asc">{{ t('home.sort.order.asc') }}</option>
-                        <option value="desc">{{ t('home.sort.order.desc') }}</option>
+                        <option value="asc">
+                            {{ t("home.sort.order.asc") }}
+                        </option>
+                        <option value="desc">
+                            {{ t("home.sort.order.desc") }}
+                        </option>
                     </select>
 
                     <label class="flex items-center gap-2">
-                        <input type="checkbox" class="checkbox" v-model="localFilters.fabric"/>
+                        <input
+                            type="checkbox"
+                            class="checkbox"
+                            v-model="localFilters.fabric"
+                        />
                         <span>Fabric</span>
                     </label>
 
                     <label class="flex items-center gap-2">
-                        <input type="checkbox" class="checkbox" v-model="localFilters.forge"/>
+                        <input
+                            type="checkbox"
+                            class="checkbox"
+                            v-model="localFilters.forge"
+                        />
                         <span>Forge</span>
                     </label>
 
                     <label class="flex items-center gap-2">
-                        <input type="checkbox" class="checkbox" v-model="localFilters.vanilla"/>
+                        <input
+                            type="checkbox"
+                            class="checkbox"
+                            v-model="localFilters.vanilla"
+                        />
                         <span>Vanilla</span>
                     </label>
 
                     <label class="flex items-center gap-2">
-                        <input type="checkbox" class="checkbox" v-model="localFilters.installed"/>
-                        <span>{{ t('home.filters.installed') }}</span>
+                        <input
+                            type="checkbox"
+                            class="checkbox"
+                            v-model="localFilters.installed"
+                        />
+                        <span>{{ t("home.filters.installed") }}</span>
                     </label>
                 </div>
             </div>
@@ -144,4 +185,4 @@ onBeforeUnmount(() => {
     opacity: 0;
     transform: translateY(10px);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/common/LogViewer.vue b/src/components/common/LogViewer.vue
index 581cc949..ccd7369f 100644
--- a/src/components/common/LogViewer.vue
+++ b/src/components/common/LogViewer.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
-import { invoke } from '@tauri-apps/api/core';
-import { X } from 'lucide-vue-next';
-import { useToast } from '../../services/toastService';
-import { useI18n } from 'vue-i18n';
+import { ref, onMounted, onUnmounted, watch } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+import { X } from "lucide-vue-next";
+import { useToast } from "../../services/toastService";
+import { useI18n } from "vue-i18n";
 
 interface Props {
     clientId: number;
@@ -12,7 +12,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const emit = defineEmits(['close']);
+const emit = defineEmits(["close"]);
 
 const logs = ref<string[]>([]);
 const logsContainer = ref<HTMLDivElement | null>(null);
@@ -24,15 +24,15 @@ const { t } = useI18n();
 const fetchLogs = async () => {
     if (props.clientId && props.isOpen) {
         try {
-            logs.value = await invoke<string[]>('get_client_logs', {
+            logs.value = await invoke<string[]>("get_client_logs", {
                 id: props.clientId,
             });
             if (autoScroll.value && logsContainer.value) {
                 scrollToBottom();
             }
         } catch (err) {
-            console.error('Error fetching client logs:', err);
-            addToast(t('errors.logs_error', { error: err }), 'error');
+            console.error("Error fetching client logs:", err);
+            addToast(t("errors.logs_error", { error: err }), "error");
         }
     }
 };
@@ -102,7 +102,7 @@ onUnmounted(() => {
 });
 
 const close = () => {
-    emit('close');
+    emit("close");
 };
 </script>
 
@@ -110,20 +110,28 @@ const close = () => {
     <div v-if="isOpen" class="log-viewer-overlay" @click="close">
         <div class="log-viewer-modal" @click.stop>
             <div class="log-viewer-header">
-                <h3>{{ t('logs.title', { client: clientName }) }}</h3>
+                <h3>{{ t("logs.title", { client: clientName }) }}</h3>
                 <div class="log-viewer-actions">
                     <label class="auto-scroll-toggle">
-                        <input type="checkbox" class="checkbox" v-model="autoScroll" />
-                        <span>{{ t('appLogs.autoScroll') }}</span>
+                        <input
+                            type="checkbox"
+                            class="checkbox"
+                            v-model="autoScroll"
+                        />
+                        <span>{{ t("appLogs.autoScroll") }}</span>
                     </label>
                     <button class="close-btn" @click="close">
                         <X class="w-4" />
                     </button>
                 </div>
             </div>
-            <div ref="logsContainer" class="log-viewer-content" @scroll="handleScroll">
+            <div
+                ref="logsContainer"
+                class="log-viewer-content"
+                @scroll="handleScroll"
+            >
                 <div v-if="logs.length === 0" class="no-logs">
-                    {{ t('appLogs.noLogs') }}
+                    {{ t("appLogs.noLogs") }}
                 </div>
                 <pre v-else><code>{{ logs.join('\n') }}</code></pre>
             </div>
@@ -211,7 +219,7 @@ const close = () => {
     overflow-y: auto;
     overflow-x: hidden;
     padding: 16px;
-    font-family: 'Consolas', 'Monaco', monospace;
+    font-family: "Consolas", "Monaco", monospace;
     font-size: 13px;
     line-height: 1.5;
     white-space: pre-wrap;
diff --git a/src/components/common/SearchBar.vue b/src/components/common/SearchBar.vue
index 36bcf53b..72285321 100644
--- a/src/components/common/SearchBar.vue
+++ b/src/components/common/SearchBar.vue
@@ -1,18 +1,37 @@
 <template>
     <div class="search-container group">
         <div class="relative">
-            <input ref="inputRef" type="text"
+            <input
+                ref="inputRef"
+                type="text"
                 class="input input-bordered w-full pl-10 pr-12 transition-all duration-300 z-10 relative bg-base-200/50"
-                :placeholder="t('home.search_placeholder')" v-model="searchTerm" @input="onSearch" />
-            <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none z-20 transition-colors duration-300"
-                :class="{ 'text-primary': isFocused || searchTerm }">
-                <Search class="w-5 h-5" :class="[isFocused || searchTerm ? 'text-primary' : 'text-base-content/50']" />
+                :placeholder="t('home.search_placeholder')"
+                v-model="searchTerm"
+                @input="onSearch"
+            />
+            <div
+                class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none z-20 transition-colors duration-300"
+                :class="{ 'text-primary': isFocused || searchTerm }"
+            >
+                <Search
+                    class="w-5 h-5"
+                    :class="[
+                        isFocused || searchTerm
+                            ? 'text-primary'
+                            : 'text-base-content/50',
+                    ]"
+                />
             </div>
 
-            <div class="absolute right-3 top-1/2 -translate-y-1/2 z-20 flex items-center gap-2">
+            <div
+                class="absolute right-3 top-1/2 -translate-y-1/2 z-20 flex items-center gap-2"
+            >
                 <Transition name="scale">
-                    <button v-if="searchTerm" @click="clearSearch"
-                        class="btn btn-circle btn-ghost btn-xs hover:bg-base-content/10">
+                    <button
+                        v-if="searchTerm"
+                        @click="clearSearch"
+                        class="btn btn-circle btn-ghost btn-xs hover:bg-base-content/10"
+                    >
                         <X class="w-4 h-4 text-base-content/70" />
                     </button>
                 </Transition>
@@ -22,27 +41,27 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
-import { Search, X } from 'lucide-vue-next';
-import { useI18n } from 'vue-i18n';
+import { ref, watch, onMounted, onBeforeUnmount } from "vue";
+import { Search, X } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
 
 const props = defineProps<{
     initialValue?: string;
 }>();
 
-const emit = defineEmits(['search']);
+const emit = defineEmits(["search"]);
 
 const { t } = useI18n();
-const searchTerm = ref(props.initialValue || '');
+const searchTerm = ref(props.initialValue || "");
 const inputRef = ref<HTMLInputElement | null>(null);
 const isFocused = ref(false);
 
 const onSearch = () => {
-    emit('search', searchTerm.value);
+    emit("search", searchTerm.value);
 };
 
 const clearSearch = () => {
-    searchTerm.value = '';
+    searchTerm.value = "";
     onSearch();
     inputRef.value?.focus();
 };
@@ -62,19 +81,22 @@ watch(
     }
 );
 
-const handleFocus = () => { isFocused.value = true; };
-const handleBlur = () => { isFocused.value = false; };
+const handleFocus = () => {
+    isFocused.value = true;
+};
+const handleBlur = () => {
+    isFocused.value = false;
+};
 
 onMounted(() => {
-    inputRef.value?.addEventListener('focus', handleFocus);
-    inputRef.value?.addEventListener('blur', handleBlur);
+    inputRef.value?.addEventListener("focus", handleFocus);
+    inputRef.value?.addEventListener("blur", handleBlur);
 });
 
 onBeforeUnmount(() => {
-    inputRef.value?.removeEventListener('focus', handleFocus);
-    inputRef.value?.removeEventListener('blur', handleBlur);
+    inputRef.value?.removeEventListener("focus", handleFocus);
+    inputRef.value?.removeEventListener("blur", handleBlur);
 });
-
 </script>
 
 <style scoped>
@@ -104,4 +126,4 @@ onBeforeUnmount(() => {
     opacity: 0;
     transform: scale(0.8);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/common/SyncStatus.vue b/src/components/common/SyncStatus.vue
index 4fae5125..2ee56e66 100644
--- a/src/components/common/SyncStatus.vue
+++ b/src/components/common/SyncStatus.vue
@@ -1,27 +1,38 @@
 <template>
-    <div class="sync-status-widget" :class="{ offline: !syncState.isOnline, unauthenticated: !isAuthenticated }">
+    <div
+        class="sync-status-widget"
+        :class="{
+            offline: !syncState.isOnline,
+            unauthenticated: !isAuthenticated,
+        }"
+    >
         <div class="flex items-center gap-2 text-xs">
             <div class="flex items-center gap-1">
-                <div class="w-2 h-2 rounded-full mr-2" :class="{
-                    'bg-success animate-pulse':
-                        syncState.isOnline && !syncState.isSyncing,
-                    'bg-error': !syncState.isOnline,
-                    'bg-warning animate-spin': syncState.isSyncing,
-                    'bg-warning': !isAuthenticated
-                }"></div>
+                <div
+                    class="w-2 h-2 rounded-full mr-2"
+                    :class="{
+                        'bg-success animate-pulse':
+                            syncState.isOnline && !syncState.isSyncing,
+                        'bg-error': !syncState.isOnline,
+                        'bg-warning animate-spin': syncState.isSyncing,
+                        'bg-warning': !isAuthenticated,
+                    }"
+                ></div>
                 <span class="font-medium">
                     {{
                         isAuthenticated
-                            ? (syncState.isOnline
-                                ? (syncState.isSyncing ? t('settings.syncing') : t('time.online'))
-                                : t('time.offline'))
-                            : t('settings.not_signed_in')
+                            ? syncState.isOnline
+                                ? syncState.isSyncing
+                                    ? t("settings.syncing")
+                                    : t("time.online")
+                                : t("time.offline")
+                            : t("settings.not_signed_in")
                     }}
                 </span>
             </div>
 
             <div v-if="syncState.lastSyncTime" class="text-base-content/60">
-                {{ t('sync.last_sync') }}:
+                {{ t("sync.last_sync") }}:
                 {{ formatSyncTime(syncState.lastSyncTime) }}
             </div>
         </div>
@@ -29,10 +40,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
-import { syncService, type SyncServiceState } from '../../services/syncService';
-import { useI18n } from 'vue-i18n';
-import { globalUserStatus } from '../../composables/useUserStatus';
+import { ref, onMounted, onUnmounted } from "vue";
+import { syncService, type SyncServiceState } from "../../services/syncService";
+import { useI18n } from "vue-i18n";
+import { globalUserStatus } from "../../composables/useUserStatus";
 
 const { t } = useI18n();
 const isAuthenticated = globalUserStatus.isAuthenticated;
@@ -45,14 +56,14 @@ const formatSyncTime = (timestamp: string): string => {
     const diffMs = now.getTime() - date.getTime();
     const diffMins = Math.floor(diffMs / (1000 * 60));
 
-    if (diffMins < 1) return t('userProfile.just_now');
-    if (diffMins < 60) return t('sync.minutes_ago', { count: diffMins });
+    if (diffMins < 1) return t("userProfile.just_now");
+    if (diffMins < 60) return t("sync.minutes_ago", { count: diffMins });
 
     const diffHours = Math.floor(diffMins / 60);
-    if (diffHours < 24) return t('sync.hours_ago', { count: diffHours });
+    if (diffHours < 24) return t("sync.hours_ago", { count: diffHours });
 
     const diffDays = Math.floor(diffHours / 24);
-    return t('sync.days_ago', { count: diffDays });
+    return t("sync.days_ago", { count: diffDays });
 };
 
 onMounted(async () => {
@@ -120,7 +131,11 @@ onUnmounted(() => {
 .progress-indeterminate {
     width: 30%;
     height: 100%;
-    background: linear-gradient(90deg, rgba(59, 130, 246, 0.95), rgba(99, 102, 241, 0.9));
+    background: linear-gradient(
+        90deg,
+        rgba(59, 130, 246, 0.95),
+        rgba(99, 102, 241, 0.9)
+    );
     animation: progressIndeterminate 1.1s infinite linear;
 }
 
diff --git a/src/components/core/BootLogs.vue b/src/components/core/BootLogs.vue
index 3e81a74a..c5e6effa 100644
--- a/src/components/core/BootLogs.vue
+++ b/src/components/core/BootLogs.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, nextTick, watch } from 'vue';
-import { bootLogService } from '../../services/bootLogService';
+import { ref, onMounted, nextTick, watch } from "vue";
+import { bootLogService } from "../../services/bootLogService";
 
 interface LogEntry {
     id: number;
     timestamp: string;
-    level: 'OK' | 'INFO' | 'WARN' | 'ERROR';
+    level: "OK" | "INFO" | "WARN" | "ERROR";
     service: string;
     message: string;
 }
@@ -65,31 +65,31 @@ const updateDisplayedLogs = () => {
 
 const getLevelColor = (level: string) => {
     switch (level) {
-        case 'OK':
-            return 'text-green-400';
-        case 'INFO':
-            return 'text-blue-400';
-        case 'WARN':
-            return 'text-yellow-400';
-        case 'ERROR':
-            return 'text-red-400';
+        case "OK":
+            return "text-green-400";
+        case "INFO":
+            return "text-blue-400";
+        case "WARN":
+            return "text-yellow-400";
+        case "ERROR":
+            return "text-red-400";
         default:
-            return 'text-gray-400';
+            return "text-gray-400";
     }
 };
 
 const getLevelSymbol = (level: string) => {
     switch (level) {
-        case 'OK':
-            return '[  OK  ]';
-        case 'INFO':
-            return '[ INFO ]';
-        case 'WARN':
-            return '[ WARN ]';
-        case 'ERROR':
-            return '[ERROR ]';
+        case "OK":
+            return "[  OK  ]";
+        case "INFO":
+            return "[ INFO ]";
+        case "WARN":
+            return "[ WARN ]";
+        case "ERROR":
+            return "[ERROR ]";
         default:
-            return '[     ]';
+            return "[     ]";
     }
 };
 
@@ -117,11 +117,16 @@ onMounted(() => {
 <template>
     <div class="boot-logs-container">
         <div ref="logContainer" class="log-output">
-            <div v-for="(log, _) in displayedLogs" :key="log.id" class="log-entry" :class="getLevelColor(log.level)">
+            <div
+                v-for="(log, _) in displayedLogs"
+                :key="log.id"
+                class="log-entry"
+                :class="getLevelColor(log.level)"
+            >
                 <span class="timestamp">{{ log.timestamp }}</span>
                 <span class="level-badge" :class="getLevelColor(log.level)">{{
                     getLevelSymbol(log.level)
-                    }}</span>
+                }}</span>
                 <span class="service">[{{ log.service }}]</span>
                 <span class="message">{{ log.message }}</span>
             </div>
@@ -145,7 +150,7 @@ onMounted(() => {
     height: 100%;
     overflow-y: auto;
     padding: 20px;
-    font-family: 'Courier New', monospace;
+    font-family: "Courier New", monospace;
     font-size: 12px;
     line-height: 1.4;
     color: #00ff00;
@@ -157,18 +162,20 @@ onMounted(() => {
 }
 
 .log-output::after {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(to bottom,
-            rgba(0, 0, 0, 0.8) 0%,
-            rgba(0, 0, 0, 0.7) 20%,
-            rgba(0, 0, 0, 0.6) 50%,
-            rgba(0, 0, 0, 0.5) 80%,
-            rgba(0, 0, 0, 0.3) 100%);
+    background: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0.8) 0%,
+        rgba(0, 0, 0, 0.7) 20%,
+        rgba(0, 0, 0, 0.6) 50%,
+        rgba(0, 0, 0, 0.5) 80%,
+        rgba(0, 0, 0, 0.3) 100%
+    );
     pointer-events: none;
     z-index: 1;
 }
@@ -216,7 +223,6 @@ onMounted(() => {
 }
 
 @keyframes blink {
-
     0%,
     50% {
         opacity: 1;
@@ -228,37 +234,37 @@ onMounted(() => {
     }
 }
 
-:root[data-theme='dark'] .log-output {
+:root[data-theme="dark"] .log-output {
     color: #00ff00;
     background: rgba(0, 0, 0, 0.15);
 }
 
-:root[data-theme='light'] .log-output {
+:root[data-theme="light"] .log-output {
     color: #003300;
     background: rgba(255, 255, 255, 0.05);
 }
 
-:root[data-theme='light'] .timestamp {
+:root[data-theme="light"] .timestamp {
     color: #999;
 }
 
-:root[data-theme='light'] .service {
+:root[data-theme="light"] .service {
     color: #666;
 }
 
-:root[data-theme='light'] .text-green-400 {
+:root[data-theme="light"] .text-green-400 {
     color: #16a34a !important;
 }
 
-:root[data-theme='light'] .text-blue-400 {
+:root[data-theme="light"] .text-blue-400 {
     color: #2563eb !important;
 }
 
-:root[data-theme='light'] .text-yellow-400 {
+:root[data-theme="light"] .text-yellow-400 {
     color: #ca8a04 !important;
 }
 
-:root[data-theme='light'] .text-red-400 {
+:root[data-theme="light"] .text-red-400 {
     color: #dc2626 !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/core/DevMenuModal.vue b/src/components/core/DevMenuModal.vue
index d688d896..c4ad7ea4 100644
--- a/src/components/core/DevMenuModal.vue
+++ b/src/components/core/DevMenuModal.vue
@@ -1,23 +1,40 @@
 <template>
     <transition name="disclaimer-fade">
-        <div v-if="showDevMenu"
-            class="fixed inset-0 bg-black/80 z-1400 p-9 flex items-center justify-center backdrop-blur-md">
+        <div
+            v-if="showDevMenu"
+            class="fixed inset-0 bg-black/80 z-1400 p-9 flex items-center justify-center backdrop-blur-md"
+        >
             <transition name="disclaimer-scale">
-                <div v-if="showDevMenu"
-                    class="bg-base-200 rounded-xl shadow-2xl border border-base-300 w-full h-full flex flex-col">
-                    <div class="flex flex-col items-center text-center pt-4 grow">
+                <div
+                    v-if="showDevMenu"
+                    class="bg-base-200 rounded-xl shadow-2xl border border-base-300 w-full h-full flex flex-col"
+                >
+                    <div
+                        class="flex flex-col items-center text-center pt-4 grow"
+                    >
                         <h2 class="text-2xl font-bold text-primary mb-4">
                             Developer Menu
                         </h2>
-                        <button class="btn btn-primary mb-4" @click="handleMeow">
+                        <button
+                            class="btn btn-primary mb-4"
+                            @click="handleMeow"
+                        >
                             Meow
                         </button>
-                        <button class="btn btn-primary mb-4" @click="resetFlags">
+                        <button
+                            class="btn btn-primary mb-4"
+                            @click="resetFlags"
+                        >
                             Reset Flags
                         </button>
                     </div>
-                    <div class="p-4 border-t border-base-300 flex justify-center">
-                        <button @click="closeDevMenu" class="btn btn-primary w-full">
+                    <div
+                        class="p-4 border-t border-base-300 flex justify-center"
+                    >
+                        <button
+                            @click="closeDevMenu"
+                            class="btn btn-primary w-full"
+                        >
                             Close Menu
                         </button>
                     </div>
@@ -28,10 +45,10 @@
 </template>
 
 <script setup lang="ts">
-import { invoke } from '@tauri-apps/api/core';
-import { useToast } from '../../services/toastService';
-import { useI18n } from 'vue-i18n';
-import meowUrl from '../../assets/misc/cat-meow.mp3';
+import { invoke } from "@tauri-apps/api/core";
+import { useToast } from "../../services/toastService";
+import { useI18n } from "vue-i18n";
+import meowUrl from "../../assets/misc/cat-meow.mp3";
 
 const { addToast } = useToast();
 const { t } = useI18n();
@@ -40,25 +57,25 @@ defineProps<{
     showDevMenu: boolean;
 }>();
 
-const emit = defineEmits(['close']);
+const emit = defineEmits(["close"]);
 
 const closeDevMenu = () => {
-    emit('close');
+    emit("close");
 };
 
 const resetFlags = async () => {
-    await invoke('reset_flags');
-    addToast(t('toast.dev.flags_reset'), 'success');
+    await invoke("reset_flags");
+    addToast(t("toast.dev.flags_reset"), "success");
 };
 const handleMeow = async () => {
     try {
         const audio = new Audio(meowUrl);
         audio.volume = 0.9;
         await audio.play();
-        addToast("Meow!", 'success');
+        addToast("Meow!", "success");
     } catch (err) {
-        addToast('Unable to play sound', 'error');
-        console.error('Meow playback failed', err);
+        addToast("Unable to play sound", "error");
+        console.error("Meow playback failed", err);
     }
 };
 </script>
diff --git a/src/components/core/InitialSetupModals.vue b/src/components/core/InitialSetupModals.vue
index 2ae2ad51..dcfad845 100644
--- a/src/components/core/InitialSetupModals.vue
+++ b/src/components/core/InitialSetupModals.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { openUrl } from '@tauri-apps/plugin-opener';
-import { useToast } from '../../services/toastService';
-import { useI18n } from 'vue-i18n';
-import { ref, watch, onMounted, onUnmounted, computed } from 'vue';
-import i18n from '../../i18n';
-import HoldButton from '../ui/HoldButton.vue';
+import { openUrl } from "@tauri-apps/plugin-opener";
+import { useToast } from "../../services/toastService";
+import { useI18n } from "vue-i18n";
+import { ref, watch, onMounted, onUnmounted, computed } from "vue";
+import i18n from "../../i18n";
+import HoldButton from "../ui/HoldButton.vue";
 import {
     changeLanguage,
     getAvailableLanguages,
     getCurrentLanguage,
-} from '../../i18n';
+} from "../../i18n";
 import {
     Languages,
     MemoryStick,
@@ -19,10 +19,10 @@ import {
     Handshake,
     Headset,
     NotebookPen,
-    HeartHandshake
-} from 'lucide-vue-next';
-import AnimatedSlider from '../ui/AnimatedSlider.vue';
-import { invoke } from '@tauri-apps/api/core';
+    HeartHandshake,
+} from "lucide-vue-next";
+import AnimatedSlider from "../ui/AnimatedSlider.vue";
+import { invoke } from "@tauri-apps/api/core";
 
 const props = defineProps({
     showFirstRun: Boolean,
@@ -31,15 +31,15 @@ const props = defineProps({
 });
 
 const emit = defineEmits([
-    'firstRunAccepted',
-    'disclaimerAccepted',
-    'auto-login',
+    "firstRunAccepted",
+    "disclaimerAccepted",
+    "auto-login",
 ]);
 const { t } = useI18n();
 const { addToast } = useToast();
 
-const availableThemes = ref(['dark', 'light']);
-const selectedTheme = ref(props.currentTheme || 'dark');
+const availableThemes = ref(["dark", "light"]);
+const selectedTheme = ref(props.currentTheme || "dark");
 
 const currentTutorialStep = ref(1);
 const totalTutorialSteps = 5;
@@ -55,8 +55,19 @@ const tooltipInterval = ref<number | null>(null);
 
 const resolveKeyForLocale = (key: string, locale: string) => {
     try {
-        const messages = i18n.global.getLocaleMessage(locale) as Record<string, any>;
-        return key.split('.').reduce((obj: any, part: string) => (obj && obj[part] !== undefined) ? obj[part] : null, messages) || null;
+        const messages = i18n.global.getLocaleMessage(locale) as Record<
+            string,
+            any
+        >;
+        return (
+            key
+                .split(".")
+                .reduce(
+                    (obj: any, part: string) =>
+                        obj && obj[part] !== undefined ? obj[part] : null,
+                    messages
+                ) || null
+        );
     } catch {
         return null;
     }
@@ -64,26 +75,27 @@ const resolveKeyForLocale = (key: string, locale: string) => {
 
 const tooltipDisplayText = computed(() => {
     const lang = availableLanguages.value[tooltipIndex.value];
-    if (!lang) return t('modals.initial_setup.language_here');
-    const resolved = resolveKeyForLocale('modals.initial_setup.language_here', lang.code);
-    if (typeof resolved === 'string' && resolved.length > 0) return resolved;
-    return lang.nativeName || t('modals.initial_setup.language_here');
+    if (!lang) return t("modals.initial_setup.language_here");
+    const resolved = resolveKeyForLocale(
+        "modals.initial_setup.language_here",
+        lang.code
+    );
+    if (typeof resolved === "string" && resolved.length > 0) return resolved;
+    return lang.nativeName || t("modals.initial_setup.language_here");
 });
 
-
 const ramOptions = [
-    { mb: 2048, label: '2 GB' },
-    { mb: 4096, label: '4 GB' },
-    { mb: 6144, label: '6 GB' },
-    { mb: 8192, label: '8 GB' },
-    { mb: 16384, label: '16 GB' },
-    { mb: 32768, label: '32 GB' },
+    { mb: 2048, label: "2 GB" },
+    { mb: 4096, label: "4 GB" },
+    { mb: 6144, label: "6 GB" },
+    { mb: 8192, label: "8 GB" },
+    { mb: 16384, label: "16 GB" },
+    { mb: 32768, label: "32 GB" },
 ];
 const ramOptionIndex = ref(0);
 const systemMemory = ref<number | null>(null);
 const showRamWarning = ref(false);
 
-
 const selectedRamMb = computed(() => ramOptions[ramOptionIndex.value]?.mb || 0);
 
 const checkRamWarning = () => {
@@ -103,7 +115,7 @@ const goToStep = async (step: number) => {
             try {
                 await saveRamSettings();
             } catch (error) {
-                console.error('Failed to auto-save RAM settings:', error);
+                console.error("Failed to auto-save RAM settings:", error);
             }
         }
         currentTutorialStep.value = step;
@@ -120,52 +132,52 @@ watch(
 );
 
 const acceptFirstRun = () => {
-    emit('firstRunAccepted');
+    emit("firstRunAccepted");
 };
 
 const acceptDisclaimer = () => {
-    emit('disclaimerAccepted');
+    emit("disclaimerAccepted");
 };
 
 const openTelegram = async () => {
     try {
-        await openUrl('https://t.me/CollapseLoader');
+        await openUrl("https://t.me/CollapseLoader");
     } catch (error) {
-        console.error('Failed to open telegram:', error);
-        addToast(t('about.open_failed', { platform: 'Telegram' }), 'error');
+        console.error("Failed to open telegram:", error);
+        addToast(t("about.open_failed", { platform: "Telegram" }), "error");
     }
 };
 
 const openDiscord = async () => {
     try {
-        await openUrl('https://collapseloader.org/discord/');
+        await openUrl("https://collapseloader.org/discord/");
     } catch (error) {
-        console.error('Failed to open discord:', error);
-        addToast(t('about.open_failed', { platform: 'Discord' }), 'error');
+        console.error("Failed to open discord:", error);
+        addToast(t("about.open_failed", { platform: "Discord" }), "error");
     }
 };
 
 const handleLanguageChange = async (languageCode: string) => {
     try {
-        selectedLanguage.value = languageCode as 'en' | 'ru';
+        selectedLanguage.value = languageCode as "en" | "ru";
         await changeLanguage(languageCode);
-        addToast(t('modals.initial_setup.language_changed'), 'success');
+        addToast(t("modals.initial_setup.language_changed"), "success");
     } catch (error) {
-        console.error('Failed to change language:', error);
-        addToast(t('modals.initial_setup.language_change_failed'), 'error');
+        console.error("Failed to change language:", error);
+        addToast(t("modals.initial_setup.language_change_failed"), "error");
     }
 };
 
-const handleSliderChange = () => { };
+const handleSliderChange = () => {};
 
-import { settingsService } from '../../services/settingsService';
+import { settingsService } from "../../services/settingsService";
 
 const saveRamSettings = async () => {
     try {
         const ramValue = ramOptions[ramOptionIndex.value].mb;
-        await settingsService.editSetting('ram', ramValue);
+        await settingsService.editSetting("ram", ramValue);
     } catch (error) {
-        console.error('Failed to save RAM settings:', error);
+        console.error("Failed to save RAM settings:", error);
     }
 };
 
@@ -174,7 +186,6 @@ const stopLanguageCycling = () => {
     animateLanguage.value = false;
 };
 
-
 onMounted(async () => {
     if (tutorialContentWrapper.value) {
         tutorialContentWrapper.value.scrollTop = 0;
@@ -188,7 +199,6 @@ onMounted(async () => {
         }, 500);
     }, 5000);
 
-
     setTimeout(() => {
         showLanguageTooltip.value = false;
 
@@ -197,24 +207,26 @@ onMounted(async () => {
         }, 500);
     }, 10000);
 
-    watch(
-        showLanguageTooltip,
-        (val) => {
-            if (tooltipInterval.value !== null) {
-                clearInterval(tooltipInterval.value);
-                tooltipInterval.value = null;
-            }
+    watch(showLanguageTooltip, (val) => {
+        if (tooltipInterval.value !== null) {
+            clearInterval(tooltipInterval.value);
+            tooltipInterval.value = null;
+        }
 
-            if (val && availableLanguages.value && availableLanguages.value.length > 0) {
-                tooltipIndex.value = 0;
-                tooltipInterval.value = window.setInterval(() => {
-                    tooltipIndex.value = (tooltipIndex.value + 1) % availableLanguages.value.length;
-                }, 1600);
-            } else {
-                tooltipIndex.value = 0;
-            }
-        },
-    );
+        if (
+            val &&
+            availableLanguages.value &&
+            availableLanguages.value.length > 0
+        ) {
+            tooltipIndex.value = 0;
+            tooltipInterval.value = window.setInterval(() => {
+                tooltipIndex.value =
+                    (tooltipIndex.value + 1) % availableLanguages.value.length;
+            }, 1600);
+        } else {
+            tooltipIndex.value = 0;
+        }
+    });
 
     onUnmounted(() => {
         if (tooltipInterval.value !== null) {
@@ -224,10 +236,10 @@ onMounted(async () => {
     });
 
     try {
-        const memoryBytes = await invoke<number>('get_system_memory');
+        const memoryBytes = await invoke<number>("get_system_memory");
         systemMemory.value = Math.floor(memoryBytes / (1024 * 1024));
     } catch (error) {
-        console.error('Failed to get system memory:', error);
+        console.error("Failed to get system memory:", error);
         systemMemory.value = null;
     }
 });
@@ -235,160 +247,334 @@ onMounted(async () => {
 
 <template>
     <transition name="modal-fade">
-        <div v-if="showFirstRun"
-            class="fixed inset-0 bg-linear-to-br from-black/90 to-black/95 flex items-center justify-center z-1500 backdrop-blur-sm">
+        <div
+            v-if="showFirstRun"
+            class="fixed inset-0 bg-linear-to-br from-black/90 to-black/95 flex items-center justify-center z-1500 backdrop-blur-sm"
+        >
             <transition name="modal-scale">
-                <div v-if="showFirstRun"
-                    class="bg-base-100 rounded-xl shadow-2xl w-full h-full max-w-none max-h-none modal-container">
+                <div
+                    v-if="showFirstRun"
+                    class="bg-base-100 rounded-xl shadow-2xl w-full h-full max-w-none max-h-none modal-container"
+                >
                     <div class="flex flex-col h-full">
-                        <div class="bg-primary/5 px-8 py-3 border-b border-base-300 shrink-0">
+                        <div
+                            class="bg-primary/5 px-8 py-3 border-b border-base-300 shrink-0"
+                        >
                             <div class="flex items-center justify-between">
                                 <transition name="step-title" mode="out-in">
-                                    <div v-if="currentTutorialStep === 1" key="step1" class="flex items-center gap-2">
-                                        <DoorOpen class="w-10 h-10 text-primary mr-2" />
+                                    <div
+                                        v-if="currentTutorialStep === 1"
+                                        key="step1"
+                                        class="flex items-center gap-2"
+                                    >
+                                        <DoorOpen
+                                            class="w-10 h-10 text-primary mr-2"
+                                        />
                                         <div class="flex flex-col">
-                                            <h3 class="text-2xl font-bold text-primary">
-                                                {{ t('modals.initial_setup.welcome.title') }}
+                                            <h3
+                                                class="text-2xl font-bold text-primary"
+                                            >
+                                                {{
+                                                    t(
+                                                        "modals.initial_setup.welcome.title"
+                                                    )
+                                                }}
                                             </h3>
-                                            <p class="text-sm text-base-content/70">
-                                                {{ t('modals.initial_setup.welcome.subtitle') }}
+                                            <p
+                                                class="text-sm text-base-content/70"
+                                            >
+                                                {{
+                                                    t(
+                                                        "modals.initial_setup.welcome.subtitle"
+                                                    )
+                                                }}
                                             </p>
                                         </div>
                                     </div>
-                                    <div v-else-if="currentTutorialStep === 2" key="step2"
-                                        class="flex items-center gap-2">
-                                        <MemoryStick class="w-10 h-10 text-primary mr-2" />
+                                    <div
+                                        v-else-if="currentTutorialStep === 2"
+                                        key="step2"
+                                        class="flex items-center gap-2"
+                                    >
+                                        <MemoryStick
+                                            class="w-10 h-10 text-primary mr-2"
+                                        />
                                         <div class="flex flex-col">
-                                            <h3 class="text-2xl font-bold text-primary">
-                                                {{ t('modals.initial_setup.ram.title') }}
+                                            <h3
+                                                class="text-2xl font-bold text-primary"
+                                            >
+                                                {{
+                                                    t(
+                                                        "modals.initial_setup.ram.title"
+                                                    )
+                                                }}
                                             </h3>
-                                            <p class="text-sm text-base-content/70">
-                                                {{ t('modals.initial_setup.ram.subtitle') }}
+                                            <p
+                                                class="text-sm text-base-content/70"
+                                            >
+                                                {{
+                                                    t(
+                                                        "modals.initial_setup.ram.subtitle"
+                                                    )
+                                                }}
                                             </p>
                                         </div>
                                     </div>
-                                    <div v-else-if="currentTutorialStep === 3" key="step3"
-                                        class="flex items-center gap-2">
-                                        <ChartNoAxesCombined class="w-10 h-10 text-primary mr-2" />
+                                    <div
+                                        v-else-if="currentTutorialStep === 3"
+                                        key="step3"
+                                        class="flex items-center gap-2"
+                                    >
+                                        <ChartNoAxesCombined
+                                            class="w-10 h-10 text-primary mr-2"
+                                        />
                                         <div class="flex flex-col">
-                                            <h3 class="text-2xl font-bold text-primary">
-                                                {{ t('modals.initial_setup.telemetry.title') }}
+                                            <h3
+                                                class="text-2xl font-bold text-primary"
+                                            >
+                                                {{
+                                                    t(
+                                                        "modals.initial_setup.telemetry.title"
+                                                    )
+                                                }}
                                             </h3>
-                                            <p class="text-sm text-base-content/70">
-                                                {{ t('modals.initial_setup.telemetry.subtitle') }}
+                                            <p
+                                                class="text-sm text-base-content/70"
+                                            >
+                                                {{
+                                                    t(
+                                                        "modals.initial_setup.telemetry.subtitle"
+                                                    )
+                                                }}
                                             </p>
                                         </div>
                                     </div>
-                                    <div v-else-if="currentTutorialStep === 4" key="step4"
-                                        class="flex items-center gap-2">
-                                        <Headset class="w-10 h-10 text-primary mr-2" />
+                                    <div
+                                        v-else-if="currentTutorialStep === 4"
+                                        key="step4"
+                                        class="flex items-center gap-2"
+                                    >
+                                        <Headset
+                                            class="w-10 h-10 text-primary mr-2"
+                                        />
                                         <div class="flex flex-col">
-                                            <h3 class="text-2xl font-bold text-primary">
-                                                {{ t('modals.initial_setup.feedback.title') }}
+                                            <h3
+                                                class="text-2xl font-bold text-primary"
+                                            >
+                                                {{
+                                                    t(
+                                                        "modals.initial_setup.feedback.title"
+                                                    )
+                                                }}
                                             </h3>
-                                            <p class="text-sm text-base-content/70">
-                                                {{ t('modals.initial_setup.feedback.subtitle') }}
+                                            <p
+                                                class="text-sm text-base-content/70"
+                                            >
+                                                {{
+                                                    t(
+                                                        "modals.initial_setup.feedback.subtitle"
+                                                    )
+                                                }}
                                             </p>
                                         </div>
                                     </div>
-                                    <div v-else-if="currentTutorialStep === 5" key="step5"
-                                        class="flex items-center gap-2">
-                                        <Handshake class="w-10 h-10 text-primary mr-2" />
+                                    <div
+                                        v-else-if="currentTutorialStep === 5"
+                                        key="step5"
+                                        class="flex items-center gap-2"
+                                    >
+                                        <Handshake
+                                            class="w-10 h-10 text-primary mr-2"
+                                        />
                                         <div class="flex flex-col">
-                                            <h3 class="text-2xl font-bold text-primary">
-                                                {{ t('modals.initial_setup.appreciation.title') }}
+                                            <h3
+                                                class="text-2xl font-bold text-primary"
+                                            >
+                                                {{
+                                                    t(
+                                                        "modals.initial_setup.appreciation.title"
+                                                    )
+                                                }}
                                             </h3>
-                                            <p class="text-sm text-base-content/70">
-                                                {{ t('modals.initial_setup.appreciation.subtitle') }}
+                                            <p
+                                                class="text-sm text-base-content/70"
+                                            >
+                                                {{
+                                                    t(
+                                                        "modals.initial_setup.appreciation.subtitle"
+                                                    )
+                                                }}
                                             </p>
                                         </div>
                                     </div>
                                 </transition>
-                                <div class="flex items-center gap-3 ml-auto animate-slide-in-right transition-all duration-300"
-                                    :class="{ 'mr-9': animateLanguage }">
+                                <div
+                                    class="flex items-center gap-3 ml-auto animate-slide-in-right transition-all duration-300"
+                                    :class="{ 'mr-9': animateLanguage }"
+                                >
                                     <Languages class="w-5 h-5 text-primary" />
-                                    <select v-model="selectedLanguage" @change="
-                                        handleLanguageChange(
-                                            selectedLanguage
-                                        )
-                                        " @click="stopLanguageCycling"
-                                        class="select select-bordered select-sm bg-base-100 min-w-0 w-auto transition-all duration-300 hover:scale-105">
-                                        <option v-for="lang in availableLanguages" :key="lang.code" :value="lang.code">
+                                    <select
+                                        v-model="selectedLanguage"
+                                        @change="
+                                            handleLanguageChange(
+                                                selectedLanguage
+                                            )
+                                        "
+                                        @click="stopLanguageCycling"
+                                        class="select select-bordered select-sm bg-base-100 min-w-0 w-auto transition-all duration-300 hover:scale-105"
+                                    >
+                                        <option
+                                            v-for="lang in availableLanguages"
+                                            :key="lang.code"
+                                            :value="lang.code"
+                                        >
                                             {{ lang.nativeName }}
                                         </option>
-
                                     </select>
                                 </div>
 
-                                <div class="absolute right-1 mr-5 -mb-16 flex items-center justify-center">
-                                    <transition name="tooltip-text" mode="out-in">
-                                        <div v-if="showLanguageTooltip" :key="tooltipIndex"
-                                            class="bg-base-100 text-sm text-base-content/80 rounded-md px-3 py-1 shadow-lg mt-2">
-                                            <span class="block animate-fade-in-up">{{ tooltipDisplayText }}</span>
+                                <div
+                                    class="absolute right-1 mr-5 -mb-16 flex items-center justify-center"
+                                >
+                                    <transition
+                                        name="tooltip-text"
+                                        mode="out-in"
+                                    >
+                                        <div
+                                            v-if="showLanguageTooltip"
+                                            :key="tooltipIndex"
+                                            class="bg-base-100 text-sm text-base-content/80 rounded-md px-3 py-1 shadow-lg mt-2"
+                                        >
+                                            <span
+                                                class="block animate-fade-in-up"
+                                                >{{ tooltipDisplayText }}</span
+                                            >
                                         </div>
                                     </transition>
                                 </div>
                             </div>
                         </div>
 
-                        <div ref="tutorialContentWrapper" class="tutorial-content-wrapper grow">
+                        <div
+                            ref="tutorialContentWrapper"
+                            class="tutorial-content-wrapper grow"
+                        >
                             <div class="tutorial-content">
                                 <transition name="step-height" mode="out-in">
-                                    <div v-if="currentTutorialStep === 1" key="step1" class="step-content">
-                                        <div class="text-center max-w-xl mx-auto">
-                                            <img src="../../assets/images/logo.svg" class="w-24 h-24 mx-auto mb-4" />
+                                    <div
+                                        v-if="currentTutorialStep === 1"
+                                        key="step1"
+                                        class="step-content"
+                                    >
+                                        <div
+                                            class="text-center max-w-xl mx-auto"
+                                        >
+                                            <img
+                                                src="../../assets/images/logo.svg"
+                                                class="w-24 h-24 mx-auto mb-4"
+                                            />
                                             <p
-                                                class="text-lg text-base-content/70 mb-4 animate-fade-in-up animation-delay-200">
-                                                {{ t('modals.initial_setup.welcome.description') }}
+                                                class="text-lg text-base-content/70 mb-4 animate-fade-in-up animation-delay-200"
+                                            >
+                                                {{
+                                                    t(
+                                                        "modals.initial_setup.welcome.description"
+                                                    )
+                                                }}
                                             </p>
 
                                             <ul
-                                                class="text-sm text-base-content/70 mb-4 space-y-2 text-left mx-auto max-w-md">
+                                                class="text-sm text-base-content/70 mb-4 space-y-2 text-left mx-auto max-w-md"
+                                            >
                                                 <li class="flex items-start">
-                                                    <span class="text-primary mr-2">•</span>
-                                                    {{ t('modals.initial_setup.welcome.features.fast_startup') }}
+                                                    <span
+                                                        class="text-primary mr-2"
+                                                        >•</span
+                                                    >
+                                                    {{
+                                                        t(
+                                                            "modals.initial_setup.welcome.features.fast_startup"
+                                                        )
+                                                    }}
                                                 </li>
                                                 <li class="flex items-start">
-                                                    <span class="text-primary mr-2">•</span>
-                                                    {{ t('modals.initial_setup.welcome.features.secure_clients') }}
+                                                    <span
+                                                        class="text-primary mr-2"
+                                                        >•</span
+                                                    >
+                                                    {{
+                                                        t(
+                                                            "modals.initial_setup.welcome.features.secure_clients"
+                                                        )
+                                                    }}
                                                 </li>
                                                 <li class="flex items-start">
-                                                    <span class="text-primary mr-2">•</span>
-                                                    {{ t('modals.initial_setup.welcome.features.auto_updates') }}
+                                                    <span
+                                                        class="text-primary mr-2"
+                                                        >•</span
+                                                    >
+                                                    {{
+                                                        t(
+                                                            "modals.initial_setup.welcome.features.auto_updates"
+                                                        )
+                                                    }}
                                                 </li>
                                             </ul>
                                         </div>
                                     </div>
                                 </transition>
                                 <transition name="step-height" mode="out-in">
-                                    <div v-if="currentTutorialStep === 2" key="step3" class="step-content">
+                                    <div
+                                        v-if="currentTutorialStep === 2"
+                                        key="step3"
+                                        class="step-content"
+                                    >
                                         <div class="text-center">
-                                            <Cpu class="w-16 h-16 mx-auto mb-4 text-primary" />
+                                            <Cpu
+                                                class="w-16 h-16 mx-auto mb-4 text-primary"
+                                            />
                                             <p
-                                                class="text-lg text-base-content/70 mb-6 animate-fade-in-up animation-delay-200">
+                                                class="text-lg text-base-content/70 mb-6 animate-fade-in-up animation-delay-200"
+                                            >
                                                 {{
                                                     t(
-                                                        'modals.initial_setup.ram.description'
+                                                        "modals.initial_setup.ram.description"
                                                     )
                                                 }}
                                             </p>
 
                                             <div
-                                                class="space-y-4 animate-fade-in-up animation-delay-400 max-w-xl mx-auto">
-                                                <div class="flex items-center gap-4">
-                                                    <AnimatedSlider v-model="ramOptionIndex" :min="0" :max="ramOptions.length -
-                                                        1
-                                                        " @update:modelValue="
+                                                class="space-y-4 animate-fade-in-up animation-delay-400 max-w-xl mx-auto"
+                                            >
+                                                <div
+                                                    class="flex items-center gap-4"
+                                                >
+                                                    <AnimatedSlider
+                                                        v-model="ramOptionIndex"
+                                                        :min="0"
+                                                        :max="
+                                                            ramOptions.length -
+                                                            1
+                                                        "
+                                                        @update:modelValue="
                                                             handleSliderChange
-                                                        " class="grow" />
+                                                        "
+                                                        class="grow"
+                                                    />
                                                     <div
-                                                        class="flex items-center gap-2 rounded-lg p-3 bg-base-200 min-w-fit shadow-md">
-                                                        <span class="text-lg font-bold">{{
-                                                            ramOptions[
-                                                                ramOptionIndex
-                                                            ].label
-                                                        }}</span>
-                                                        <div class="badge badge-primary">
+                                                        class="flex items-center gap-2 rounded-lg p-3 bg-base-200 min-w-fit shadow-md"
+                                                    >
+                                                        <span
+                                                            class="text-lg font-bold"
+                                                            >{{
+                                                                ramOptions[
+                                                                    ramOptionIndex
+                                                                ].label
+                                                            }}</span
+                                                        >
+                                                        <div
+                                                            class="badge badge-primary"
+                                                        >
                                                             {{
                                                                 ramOptions[
                                                                     ramOptionIndex
@@ -398,56 +584,88 @@ onMounted(async () => {
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div v-if="showRamWarning" class="alert alert-warning mt-4">
-                                                    <span>{{ t('modals.initial_setup.ram.warning', { selectedRamMb })
-                                                        }}</span>
+                                                <div
+                                                    v-if="showRamWarning"
+                                                    class="alert alert-warning mt-4"
+                                                >
+                                                    <span>{{
+                                                        t(
+                                                            "modals.initial_setup.ram.warning",
+                                                            { selectedRamMb }
+                                                        )
+                                                    }}</span>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </transition>
                                 <transition name="step-height" mode="out-in">
-                                    <div v-if="currentTutorialStep === 3" key="step3" class="step-content">
+                                    <div
+                                        v-if="currentTutorialStep === 3"
+                                        key="step3"
+                                        class="step-content"
+                                    >
                                         <div class="text-center">
                                             <p
-                                                class="text-base text-base-content/70 mb-6 animate-fade-in-up animation-delay-200 max-w-lg mx-auto">
+                                                class="text-base text-base-content/70 mb-6 animate-fade-in-up animation-delay-200 max-w-lg mx-auto"
+                                            >
                                                 {{
                                                     t(
-                                                        'modals.initial_setup.telemetry.description'
+                                                        "modals.initial_setup.telemetry.description"
                                                     )
                                                 }}
                                             </p>
                                             <div
-                                                class="bg-base-200 rounded-lg p-4 space-y-3 mb-6 max-w-xl mx-auto text-left">
-                                                <h4 class="font-semibold text-primary text-center">
+                                                class="bg-base-200 rounded-lg p-4 space-y-3 mb-6 max-w-xl mx-auto text-left"
+                                            >
+                                                <h4
+                                                    class="font-semibold text-primary text-center"
+                                                >
                                                     {{
                                                         t(
-                                                            'modals.initial_setup.telemetry.data_collected_title'
+                                                            "modals.initial_setup.telemetry.data_collected_title"
                                                         )
                                                     }}
                                                 </h4>
-                                                <ul class="text-sm text-base-content/70 space-y-2">
-                                                    <li class="flex items-start">
-                                                        <span class="text-primary mr-2">•</span>
+                                                <ul
+                                                    class="text-sm text-base-content/70 space-y-2"
+                                                >
+                                                    <li
+                                                        class="flex items-start"
+                                                    >
+                                                        <span
+                                                            class="text-primary mr-2"
+                                                            >•</span
+                                                        >
                                                         {{
                                                             t(
-                                                                'modals.initial_setup.telemetry.data_collected.performance'
+                                                                "modals.initial_setup.telemetry.data_collected.performance"
                                                             )
                                                         }}
                                                     </li>
-                                                    <li class="flex items-start">
-                                                        <span class="text-primary mr-2">•</span>
+                                                    <li
+                                                        class="flex items-start"
+                                                    >
+                                                        <span
+                                                            class="text-primary mr-2"
+                                                            >•</span
+                                                        >
                                                         {{
                                                             t(
-                                                                'modals.initial_setup.telemetry.data_collected.usage_patterns'
+                                                                "modals.initial_setup.telemetry.data_collected.usage_patterns"
                                                             )
                                                         }}
                                                     </li>
-                                                    <li class="flex items-start">
-                                                        <span class="text-primary mr-2">•</span>
+                                                    <li
+                                                        class="flex items-start"
+                                                    >
+                                                        <span
+                                                            class="text-primary mr-2"
+                                                            >•</span
+                                                        >
                                                         {{
                                                             t(
-                                                                'modals.initial_setup.telemetry.data_collected.crash_reports'
+                                                                "modals.initial_setup.telemetry.data_collected.crash_reports"
                                                             )
                                                         }}
                                                     </li>
@@ -457,40 +675,57 @@ onMounted(async () => {
                                     </div>
                                 </transition>
                                 <transition name="step-height" mode="out-in">
-                                    <div v-if="currentTutorialStep === 4" key="step5" class="step-content">
+                                    <div
+                                        v-if="currentTutorialStep === 4"
+                                        key="step5"
+                                        class="step-content"
+                                    >
                                         <div class="text-center">
-                                            <DoorOpen class="w-16 h-16 mx-auto mb-4 text-primary" />
+                                            <DoorOpen
+                                                class="w-16 h-16 mx-auto mb-4 text-primary"
+                                            />
 
                                             <p
-                                                class="text-lg text-base-content/70 mb-2 animate-fade-in-up animation-delay-200">
+                                                class="text-lg text-base-content/70 mb-2 animate-fade-in-up animation-delay-200"
+                                            >
                                                 {{
                                                     t(
-                                                        'modals.initial_setup.feedback.description'
+                                                        "modals.initial_setup.feedback.description"
                                                     )
                                                 }}
                                             </p>
 
                                             <p
-                                                class="text-sm text-base-content/70 mb-5 animate-fade-in-up animation-delay-300">
+                                                class="text-sm text-base-content/70 mb-5 animate-fade-in-up animation-delay-300"
+                                            >
                                                 {{
                                                     t(
-                                                        'modals.initial_setup.feedback.optional'
+                                                        "modals.initial_setup.feedback.optional"
                                                     )
                                                 }}
                                             </p>
 
                                             <div
-                                                class="flex gap-4 justify-center animate-fade-in-up animation-delay-400">
-                                                <button @click="openTelegram"
-                                                    class="btn btn-ghost bg-info text-white hover:scale-110 transition-transform duration-300">
-                                                    <img src="@/assets/icons/telegram.svg"
-                                                        class="w-6 h-6 mr-2 telegram-icon" />
+                                                class="flex gap-4 justify-center animate-fade-in-up animation-delay-400"
+                                            >
+                                                <button
+                                                    @click="openTelegram"
+                                                    class="btn btn-ghost bg-info text-white hover:scale-110 transition-transform duration-300"
+                                                >
+                                                    <img
+                                                        src="@/assets/icons/telegram.svg"
+                                                        class="w-6 h-6 mr-2 telegram-icon"
+                                                    />
                                                     Telegram
                                                 </button>
-                                                <button @click="openDiscord"
-                                                    class="btn btn-ghost bg-indigo-500 text-white hover:scale-110 transition-transform duration-300">
-                                                    <img src="@/assets/icons/discord.svg"
-                                                        class="w-6 h-6 mr-2 discord-icon" />
+                                                <button
+                                                    @click="openDiscord"
+                                                    class="btn btn-ghost bg-indigo-500 text-white hover:scale-110 transition-transform duration-300"
+                                                >
+                                                    <img
+                                                        src="@/assets/icons/discord.svg"
+                                                        class="w-6 h-6 mr-2 discord-icon"
+                                                    />
                                                     Discord
                                                 </button>
                                             </div>
@@ -498,49 +733,76 @@ onMounted(async () => {
                                     </div>
                                 </transition>
                                 <transition name="step-height" mode="out-in">
-                                    <div v-if="currentTutorialStep === 5" key="step6" class="step-content">
+                                    <div
+                                        v-if="currentTutorialStep === 5"
+                                        key="step6"
+                                        class="step-content"
+                                    >
                                         <div class="text-center">
-                                            <HeartHandshake class="w-16 h-16 mx-auto mb-4 text-primary" />
+                                            <HeartHandshake
+                                                class="w-16 h-16 mx-auto mb-4 text-primary"
+                                            />
                                             <p
-                                                class="text-lg text-base-content/70 animate-fade-in-up animation-delay-200">
+                                                class="text-lg text-base-content/70 animate-fade-in-up animation-delay-200"
+                                            >
                                                 {{
                                                     t(
-                                                        'modals.initial_setup.appreciation.description'
+                                                        "modals.initial_setup.appreciation.description"
                                                     )
                                                 }}
                                             </p>
 
-                                            <HoldButton @start="acceptFirstRun" class="mt-5" />
+                                            <HoldButton
+                                                @start="acceptFirstRun"
+                                                class="mt-5"
+                                            />
                                         </div>
                                     </div>
                                 </transition>
                             </div>
                         </div>
 
-                        <div class="bg-primary/5 px-8 py-4 border-t border-base-300 animate-slide-up shrink-0">
-                            <div class="flex items-center justify-between max-w-4xl mx-auto">
+                        <div
+                            class="bg-primary/5 px-8 py-4 border-t border-base-300 animate-slide-up shrink-0"
+                        >
+                            <div
+                                class="flex items-center justify-between max-w-4xl mx-auto"
+                            >
                                 <div class="flex items-center space-x-3">
-                                    <button v-for="step in totalTutorialSteps" :key="step" @click="goToStep(step)"
+                                    <button
+                                        v-for="step in totalTutorialSteps"
+                                        :key="step"
+                                        @click="goToStep(step)"
                                         class="w-3 h-3 rounded-full transition-all cursor-pointer duration-500 hover:scale-150"
-                                        :class="step === currentTutorialStep
-                                            ? 'bg-primary shadow-lg'
-                                            : 'bg-base-content/30 hover:bg-base-content/50'
-                                            "></button>
+                                        :class="
+                                            step === currentTutorialStep
+                                                ? 'bg-primary shadow-lg'
+                                                : 'bg-base-content/30 hover:bg-base-content/50'
+                                        "
+                                    ></button>
                                 </div>
 
                                 <div class="flex gap-3">
-                                    <button v-if="currentTutorialStep > 1" @click="
-                                        goToStep(currentTutorialStep - 1)
-                                        " class="btn btn-sm btn-outline hover:scale-105 transition-all duration-300">
-                                        {{ t('common.previous') }}
+                                    <button
+                                        v-if="currentTutorialStep > 1"
+                                        @click="
+                                            goToStep(currentTutorialStep - 1)
+                                        "
+                                        class="btn btn-sm btn-outline hover:scale-105 transition-all duration-300"
+                                    >
+                                        {{ t("common.previous") }}
                                     </button>
-                                    <button v-if="
-                                        currentTutorialStep <
-                                        totalTutorialSteps
-                                    " @click="
-                                        goToStep(currentTutorialStep + 1)
-                                        " class="btn btn-sm btn-primary hover:scale-105 transition-all duration-300">
-                                        {{ t('common.next') }}
+                                    <button
+                                        v-if="
+                                            currentTutorialStep <
+                                            totalTutorialSteps
+                                        "
+                                        @click="
+                                            goToStep(currentTutorialStep + 1)
+                                        "
+                                        class="btn btn-sm btn-primary hover:scale-105 transition-all duration-300"
+                                    >
+                                        {{ t("common.next") }}
                                     </button>
                                 </div>
                             </div>
@@ -552,45 +814,64 @@ onMounted(async () => {
     </transition>
 
     <transition name="modal-fade">
-        <div v-if="showDisclaimer"
-            class="fixed inset-0 bg-linear-to-br from-black/90 to-black/95 flex items-center justify-center z-1500 backdrop-blur-sm">
+        <div
+            v-if="showDisclaimer"
+            class="fixed inset-0 bg-linear-to-br from-black/90 to-black/95 flex items-center justify-center z-1500 backdrop-blur-sm"
+        >
             <transition name="modal-scale">
-                <div class="bg-base-100 rounded-xl shadow-2xl w-full h-full max-w-none max-h-none modal-container">
+                <div
+                    class="bg-base-100 rounded-xl shadow-2xl w-full h-full max-w-none max-h-none modal-container"
+                >
                     <div class="flex flex-col h-full">
-                        <div class="bg-error/10 px-8 py-6 border-b border-error/20 shrink-0">
-                            <h2 class="text-xl font-bold text-error animate-slide-in-left">
-                                <NotebookPen class="inline w-6 h-6 mr-2 text-error" />
-                                {{ t('modals.initial_setup.disclaimer.title') }}
+                        <div
+                            class="bg-error/10 px-8 py-6 border-b border-error/20 shrink-0"
+                        >
+                            <h2
+                                class="text-xl font-bold text-error animate-slide-in-left"
+                            >
+                                <NotebookPen
+                                    class="inline w-6 h-6 mr-2 text-error"
+                                />
+                                {{ t("modals.initial_setup.disclaimer.title") }}
                             </h2>
                         </div>
 
                         <div
-                            class="disclaimer-content grow flex items-center justify-center px-8 py-8 animate-fade-in-up animation-delay-200">
-                            <div class="space-y-4 max-w-2xl mx-auto text-center">
+                            class="disclaimer-content grow flex items-center justify-center px-8 py-8 animate-fade-in-up animation-delay-200"
+                        >
+                            <div
+                                class="space-y-4 max-w-2xl mx-auto text-center"
+                            >
                                 <p class="text-base text-base-content/80 mb-4">
                                     {{
                                         t(
-                                            'modals.initial_setup.disclaimer.responsibility'
+                                            "modals.initial_setup.disclaimer.responsibility"
                                         )
                                     }}
                                 </p>
                                 <p class="text-base font-semibold text-warning">
                                     {{
                                         t(
-                                            'modals.initial_setup.disclaimer.acknowledgment'
+                                            "modals.initial_setup.disclaimer.acknowledgment"
                                         )
                                     }}
                                 </p>
                             </div>
                         </div>
 
-                        <div class="animate-slide-up animation-delay-400 shrink-0">
-                            <div class="bg-base-200 px-8 py-4 border-t border-base-300">
-                                <button @click="acceptDisclaimer"
-                                    class="btn btn-error w-full hover:scale-105 transition-all duration-300">
+                        <div
+                            class="animate-slide-up animation-delay-400 shrink-0"
+                        >
+                            <div
+                                class="bg-base-200 px-8 py-4 border-t border-base-300"
+                            >
+                                <button
+                                    @click="acceptDisclaimer"
+                                    class="btn btn-error w-full hover:scale-105 transition-all duration-300"
+                                >
                                     {{
                                         t(
-                                            'modals.initial_setup.disclaimer.accept'
+                                            "modals.initial_setup.disclaimer.accept"
                                         )
                                     }}
                                 </button>
@@ -780,13 +1061,13 @@ onMounted(async () => {
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }
 
-button[class*='w-2 h-2'] {
+button[class*="w-2 h-2"] {
     position: relative;
     overflow: hidden;
 }
 
-button[class*='w-2 h-2']:before {
-    content: '';
+button[class*="w-2 h-2"]:before {
+    content: "";
     position: absolute;
     top: 50%;
     left: 50%;
@@ -798,7 +1079,7 @@ button[class*='w-2 h-2']:before {
     transition: all 0.3s ease;
 }
 
-button[class*='w-2 h-2']:hover:before {
+button[class*="w-2 h-2"]:hover:before {
     width: 200%;
     height: 200%;
 }
@@ -840,7 +1121,6 @@ button[class*='w-2 h-2']:hover:before {
     }
 }
 
-
 @media (max-width: 768px) {
     .step-content {
         padding: 1rem;
@@ -851,13 +1131,15 @@ button[class*='w-2 h-2']:hover:before {
     }
 }
 
-html[data-theme='dark'] .telegram-icon,
-html[data-theme='dark'] .discord-icon {
-    filter: invert(100%) sepia(15%) saturate(1%) hue-rotate(282deg) brightness(102%) contrast(101%);
+html[data-theme="dark"] .telegram-icon,
+html[data-theme="dark"] .discord-icon {
+    filter: invert(100%) sepia(15%) saturate(1%) hue-rotate(282deg)
+        brightness(102%) contrast(101%);
 }
 
-html[data-theme='light'] .telegram-icon,
-html[data-theme='light'] .discord-icon {
-    filter: invert(0%) sepia(15%) saturate(17%) hue-rotate(253deg) brightness(95%) contrast(103%);
+html[data-theme="light"] .telegram-icon,
+html[data-theme="light"] .discord-icon {
+    filter: invert(0%) sepia(15%) saturate(17%) hue-rotate(253deg)
+        brightness(95%) contrast(103%);
 }
 </style>
diff --git a/src/components/core/OdometerText.vue b/src/components/core/OdometerText.vue
new file mode 100644
index 00000000..cc93bcf0
--- /dev/null
+++ b/src/components/core/OdometerText.vue
@@ -0,0 +1,245 @@
+<template>
+    <div class="odometer-container" aria-hidden="true">
+        <span class="sr-only">{{ text }}</span>
+        <TransitionGroup name="odometer-list" tag="div" class="odometer-row">
+            <div v-for="(slot, i) in slots" :key="i" class="char-slot">
+                <span
+                    v-if="slot.prevChar !== null"
+                    :key="`ex-${i}-${slot.gen}`"
+                    class="char char-exit"
+                    :style="{
+                        animationDuration: `${duration}ms`,
+                        animationDelay: `${i * stagger}ms`,
+                    }"
+                >
+                    {{ slot.prevChar }}
+                </span>
+
+                <span
+                    :key="`en-${i}-${slot.gen}`"
+                    class="char"
+                    :class="{ 'char-enter': slot.entering }"
+                    :style="
+                        slot.entering
+                            ? {
+                                  animationDuration: `${duration}ms`,
+                                  animationDelay: `${i * stagger}ms`,
+                              }
+                            : {}
+                    "
+                >
+                    {{ slot.current }}
+                </span>
+            </div>
+        </TransitionGroup>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+const props = defineProps({
+    text: {
+        type: String,
+        default: "",
+    },
+    duration: {
+        type: Number,
+        default: 450,
+    },
+    stagger: {
+        type: Number,
+        default: 20,
+    },
+});
+
+interface Slot {
+    current: string;
+    prevChar: string | null;
+    entering: boolean;
+    gen: number;
+}
+
+const slots = ref<Slot[]>([]);
+let maxLen = 0;
+let currentText = "";
+const queue = ref<string[]>([]);
+const busy = ref(false);
+
+function initSlots(text: string): void {
+    maxLen = text.length;
+    currentText = text;
+    slots.value = Array.from({ length: maxLen }, (_, i) => ({
+        current: text[i] ?? "\u00A0",
+        prevChar: null,
+        entering: false,
+        gen: 0,
+    }));
+}
+
+function applyText(newText: string): void {
+    const len = newText.length;
+
+    if (slots.value.length > len) {
+        slots.value.splice(len);
+    }
+
+    while (slots.value.length < len) {
+        slots.value.push({
+            current: "\u00A0",
+            prevChar: null,
+            entering: false,
+            gen: 0,
+        });
+    }
+
+    maxLen = len;
+    currentText = newText;
+
+    for (let i = 0; i < len; i++) {
+        const ch = newText[i] ?? "\u00A0";
+        const slot = slots.value[i];
+
+        slot.prevChar = slot.current;
+        slot.current = ch;
+        slot.entering = true;
+        slot.gen++;
+
+        const thisGen = slot.gen;
+        const cleanupMs = props.duration + i * props.stagger + 60;
+
+        setTimeout(() => {
+            const s = slots.value[i];
+            if (s && s.gen === thisGen) {
+                s.prevChar = null;
+                s.entering = false;
+            }
+        }, cleanupMs);
+    }
+}
+
+function processQueue(): void {
+    if (busy.value || queue.value.length === 0) return;
+
+    const next = queue.value.shift()!;
+    busy.value = true;
+    applyText(next);
+
+    const lockMs = props.duration + maxLen * props.stagger + 100;
+    setTimeout(() => {
+        busy.value = false;
+        processQueue();
+    }, lockMs);
+}
+
+initSlots(props.text);
+
+watch(
+    () => props.text,
+    (newVal) => {
+        const last = queue.value[queue.value.length - 1] ?? currentText;
+        if (newVal !== last) {
+            queue.value.push(newVal);
+            processQueue();
+        }
+    }
+);
+</script>
+
+<style scoped>
+.odometer-container {
+    display: inline-flex;
+    font-family:
+        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+        "Liberation Mono", monospace;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.5;
+    white-space: pre;
+
+    justify-content: center;
+    min-width: 16ch;
+}
+
+.odometer-row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.odometer-list-enter-active,
+.odometer-list-leave-active,
+.odometer-list-move {
+    transition: all 0.5s cubic-bezier(0.22, 0.9, 0.3, 1);
+}
+
+.odometer-list-enter-from,
+.odometer-list-leave-to {
+    opacity: 0;
+    width: 0 !important;
+    transform: scaleX(0);
+}
+
+.odometer-list-leave-active {
+    position: absolute;
+}
+
+.char-slot {
+    position: relative;
+    width: 1ch;
+    height: 1.5em;
+    overflow: hidden;
+}
+
+.char {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    will-change: transform, opacity;
+}
+
+@keyframes charEnter {
+    0% {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+    60% {
+        transform: translateY(4%);
+        opacity: 1;
+    }
+    85% {
+        transform: translateY(-1.5%);
+    }
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes charExit {
+    0% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+    30% {
+        transform: translateY(-3%);
+    }
+    100% {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+}
+
+.char-enter {
+    animation-name: charEnter;
+    animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1);
+    animation-fill-mode: both;
+}
+
+.char-exit {
+    animation-name: charExit;
+    animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1);
+    animation-fill-mode: both;
+}
+</style>
diff --git a/src/components/core/Preloader.vue b/src/components/core/Preloader.vue
index c5a14df2..d3f6e369 100644
--- a/src/components/core/Preloader.vue
+++ b/src/components/core/Preloader.vue
@@ -1,137 +1,278 @@
 <template>
-  <div id="preloader" v-if="visible" :class="{ 'animate-out': animateOut }" role="status" aria-live="polite"
-    :aria-label="loadingState" :aria-busy="visible" class="fixed inset-0 bg-base-300 flex items-center justify-center">
-    <BootLogs v-if="isDev" :current-progress="currentProgress / totalSteps" :loading-state="loadingState" />
-
-    <div class="flex flex-col items-center justify-center h-full w-screen relative z-10">
-      <div v-if="!halloweenActive" class="w-48 h-48 lottie-animate">
-        <Vue3Lottie :animation-data="preloader" :height="200" :width="200" />
-      </div>
-      <div v-else class="w-48 h-48">
-        <img src="../../assets/misc/ghosts.gif" />
-      </div>
-
-      <span class="sr-only">{{ loadingState }}</span>
-
-      <div class="loading-status mt-6">
-        <transition name="slide-fade" mode="out-in">
-          <span :key="loadingState" class="text-lg font-medium" :class="{ invert: currentTheme === 'light' }">{{
-            loadingState }}</span>
-        </transition>
-      </div>
-
-      <div class="w-80 progress-container mt-4" :class="{ invert: currentTheme === 'light' }" role="progressbar"
-        :aria-valuenow="animatedProgressRounded" aria-valuemin="0" aria-valuemax="100"
-        :aria-valuetext="`${animatedProgressRounded}%`">
-        <div class="bg-base-100 rounded-full h-3 overflow-hidden progress-track" aria-hidden="true">
-          <div class="bg-primary h-full rounded-full progress-fill"
-            :style="{ transform: `scaleX(${(animatedProgress / 100)})` }"></div>
-        </div>
-        <div class="text-center mt-3 text-sm opacity-75">
-          <span :class="['percentage-number', { bump: percentageBump }]">{{ animatedProgressRounded }}%</span>
+    <div
+        id="preloader"
+        v-if="visible"
+        :class="{ 'animate-out': animateOut }"
+        class="fixed inset-0 bg-base-300 flex items-center justify-center"
+    >
+        <BootLogs
+            v-if="isDev"
+            :current-progress="currentProgress / 100"
+            :loading-state="loadingState"
+        />
+
+        <div
+            class="flex flex-col items-center justify-center h-full w-screen relative z-10"
+        >
+            <div
+                v-if="!halloweenActive"
+                class="logo-wrapper mb-8 relative"
+                :style="maskStyle"
+            >
+                <canvas ref="matrixCanvas" class="matrix-canvas"></canvas>
+            </div>
+            <div v-else class="w-48 h-48 mb-8">
+                <img
+                    src="../../assets/misc/ghosts.gif"
+                    class="w-full h-full object-contain"
+                />
+            </div>
+
+            <div class="loading-status mt-2">
+                <OdometerText
+                    :text="loadingState"
+                    :stagger="15"
+                    :duration="500"
+                    class="text-lg font-bold tracking-wider uppercase font-mono"
+                    :class="{
+                        'text-gray-800': currentTheme === 'light',
+                        'text-white': currentTheme !== 'light',
+                    }"
+                />
+            </div>
+
+            <div
+                class="w-96 progress-container mt-6 relative"
+                :class="{ invert: currentTheme === 'light' }"
+            >
+                <div
+                    class="bg-white/5 border border-white/10 rounded-full h-1.5 overflow-hidden progress-track relative shadow-inner"
+                >
+                    <div
+                        class="bg-white h-full progress-fill relative"
+                        :style="{ width: `${displayProgress}%` }"
+                    >
+                        <div
+                            class="absolute inset-0 bg-linear-to-r from-transparent via-white/30 to-transparent"
+                        ></div>
+                    </div>
+                </div>
+
+                <div
+                    class="flex justify-between mt-3 text-[10px] font-mono tracking-[0.2em] text-gray-500"
+                >
+                    <span class="opacity-70">{{
+                        $t("preloader.initializing_progress")
+                    }}</span>
+                    <span class="percentage-number font-bold text-gray-400">
+                        {{ Math.round(displayProgress) }}%
+                    </span>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, onBeforeUnmount } from 'vue';
-import { Vue3Lottie } from 'vue3-lottie';
-import preloader from '../../assets/misc/preloader.json';
-import BootLogs from './BootLogs.vue';
+import {
+    computed,
+    ref,
+    watch,
+    onBeforeUnmount,
+    onMounted,
+    nextTick,
+} from "vue";
+import BootLogs from "./BootLogs.vue";
+import OdometerText from "./OdometerText.vue";
 
 const props = defineProps({
-  show: { type: Boolean, required: true },
-  isDev: { type: Boolean, default: false },
-  loadingState: { type: String, required: true },
-  currentProgress: { type: Number, required: true },
-  totalSteps: { type: Number, required: true },
-  halloweenActive: { type: Boolean, default: false },
-  currentTheme: { type: String, default: 'dark' },
+    show: { type: Boolean, required: true },
+    isDev: { type: Boolean, default: false },
+    loadingState: { type: String, required: true },
+    currentProgress: { type: Number, required: true },
+    halloweenActive: { type: Boolean, default: false },
+    currentTheme: { type: String, default: "dark" },
 });
 
-defineEmits(['update:show']);
+const displayProgress = ref(0);
 
-const progressPercent = computed(() =>
-  Math.min(100, Math.max(0, (props.currentProgress / (props.totalSteps || 1)) * 100))
-);
-const animatedProgress = ref(progressPercent.value);
-const animatedProgressRounded = computed(() => Math.round(animatedProgress.value));
 let _progressRaf: number | null = null;
-const animateTo = (target: number) => {
-  if (_progressRaf) cancelAnimationFrame(_progressRaf);
-  const step = () => {
-    const current = animatedProgress.value;
-    const delta = target - current;
-    const ease = 0.03;
-    const snapThreshold = 0.15;
-    animatedProgress.value = Math.abs(delta) < snapThreshold ? target : current + delta * ease;
-    if (Math.abs(delta) >= snapThreshold) {
-      _progressRaf = requestAnimationFrame(step);
+const LERP_FACTOR = 0.12;
+const LERP_EPS = 0.05;
+
+const stepProgress = () => {
+    const target = props.currentProgress;
+    const current = displayProgress.value;
+    const next = current + (target - current) * LERP_FACTOR;
+    displayProgress.value = Math.abs(target - next) < LERP_EPS ? target : next;
+
+    if (displayProgress.value !== target) {
+        _progressRaf = requestAnimationFrame(stepProgress);
     } else {
-      _progressRaf = null;
+        _progressRaf = null;
     }
-  };
-  if (!Number.isFinite(animatedProgress.value)) animatedProgress.value = 0;
-  _progressRaf = requestAnimationFrame(step);
 };
-watch(progressPercent, (newVal) => animateTo(newVal));
-
-const percentageBump = ref(false);
-let _bumpTimer: number | null = null;
-watch(animatedProgressRounded, () => {
-  percentageBump.value = true;
-  if (_bumpTimer) window.clearTimeout(_bumpTimer);
-  _bumpTimer = window.setTimeout(() => (percentageBump.value = false), 360);
+
+watch(
+    () => props.currentProgress,
+    () => {
+        if (_progressRaf) cancelAnimationFrame(_progressRaf);
+        _progressRaf = requestAnimationFrame(stepProgress);
+    },
+    { immediate: true }
+);
+
+const svgString = `
+<svg xmlns="http://www.w3.org/2000/svg" width="435" height="365" fill="none" viewBox="0 0 435 365">
+    <path fill="#000" d="M182.028 36.5L272.733 127.44L309.138 127.44L182.028 2.22629e-05L-7.97733e-06 182.5L182.028 365L309.138 237.56L272.733 237.56L182.028 328.5L36.4056 182.5L182.028 36.5Z" />
+    <path fill="#000" d="M182.028 72.81L236.731 127.655L182.028 182.5L236.731 237.345L182.028 292.19L72.6217 182.5L182.028 72.81Z" />
+    <path fill="#000" d="M254.65 36.5L345.354 127.44L381.76 127.44L254.65 1.90885e-05L236.447 18.25L236.446 18.2508L254.649 36.5008L254.65 36.5Z" />
+    <path fill="#000" d="M381.76 237.56L345.44 237.56L236.49 346.793L254.65 365L381.76 237.56Z" />
+    <path fill="#000" d="M249.602 148.733L216.137 182.285L249.602 215.837L249.653 215.786L249.653 215.888L401.535 215.888L401.535 215.837L435 182.285L401.535 148.733L401.484 148.783L249.653 148.783L249.602 148.733Z" />
+</svg>
+`;
+
+const maskStyle = computed(() => {
+    const encodedSvg = encodeURIComponent(svgString);
+    const dataUrl = `url("data:image/svg+xml,${encodedSvg}")`;
+    return {
+        maskImage: dataUrl,
+        WebkitMaskImage: dataUrl,
+        maskSize: "contain",
+        WebkitMaskSize: "contain",
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+        maskPosition: "center",
+        WebkitMaskPosition: "center",
+    };
 });
 
+const matrixCanvas = ref<HTMLCanvasElement | null>(null);
+let _matrixInterval: number | null = null;
+
+const initMatrix = () => {
+    const canvas = matrixCanvas.value;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const width = 217.5;
+    const height = 182.5;
+    canvas.width = width * 2;
+    canvas.height = height * 2;
+    ctx.scale(2, 2);
+
+    const fontSize = 7;
+    const columns = Math.ceil(width / fontSize);
+    const drops: number[] = [];
+    for (let x = 0; x < columns; x++) drops[x] = Math.random() * -50;
+    const chars = "01XYZ_<>[]!@#";
+
+    const draw = () => {
+        if (props.currentTheme === "light") {
+            ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
+        } else {
+            ctx.fillStyle = "rgba(255, 255, 255, 1)";
+        }
+
+        ctx.font = `${fontSize}px monospace`;
+        if (displayProgress.value > 50) {
+            ctx.shadowColor = "white";
+            ctx.shadowBlur = 8;
+        }
+
+        for (let i = 0; i < drops.length; i++) {
+            const text = chars[Math.floor(Math.random() * chars.length)];
+            const x = i * fontSize;
+            const y = drops[i] * fontSize;
+            ctx.fillText(text, x, y);
+            if (y > height && Math.random() > 0.95) drops[i] = 0;
+            drops[i] += 1.8;
+        }
+    };
+
+    if (_matrixInterval) clearInterval(_matrixInterval);
+    _matrixInterval = window.setInterval(draw, 16);
+};
+
 const visible = ref(props.show);
 const animateOut = ref(false);
-const ANIMATE_OUT_MS = 600;
-watch(() => props.show, (val) => {
-  if (val) {
-    animateOut.value = false;
-    visible.value = true;
-  } else {
-    animateOut.value = true;
-    window.setTimeout(() => {
-      animateOut.value = false;
-      visible.value = false;
-    }, ANIMATE_OUT_MS);
-  }
-});
+const ANIMATE_OUT_MS = 500;
 
+watch(
+    () => props.show,
+    (val) => {
+        if (val) {
+            animateOut.value = false;
+            visible.value = true;
+            if (!props.halloweenActive) nextTick(() => initMatrix());
+        } else {
+            animateOut.value = true;
+            window.setTimeout(() => {
+                animateOut.value = false;
+                visible.value = false;
+            }, ANIMATE_OUT_MS);
+        }
+    }
+);
+
+onMounted(() => {
+    if (!props.halloweenActive) nextTick(() => initMatrix());
+});
+watch(
+    () => props.halloweenActive,
+    (val) => {
+        if (!val) nextTick(() => initMatrix());
+    }
+);
 onBeforeUnmount(() => {
-  if (_progressRaf) cancelAnimationFrame(_progressRaf);
-  if (_bumpTimer) window.clearTimeout(_bumpTimer);
+    if (_matrixInterval) clearInterval(_matrixInterval);
+    if (_progressRaf) cancelAnimationFrame(_progressRaf);
 });
 </script>
 
 <style scoped>
 #preloader {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  background-color: rgba(0, 0, 0, 1);
-  z-index: 1337;
-  transition:
-    opacity 0.4s ease,
-    transform 0.6s ease,
-    background-color 0.6s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: auto;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: #050505;
+    z-index: 1337;
+    transition: opacity 0.3s ease;
+    color: white;
+}
+
+[data-theme="light"] #preloader {
+    background-color: #f0f0f0;
 }
 
 #preloader.animate-out {
-  background-color: rgba(0, 0, 0, 0);
-  opacity: 0;
-  transform: translateY(-10px);
-  pointer-events: none;
-  transition: opacity 0.5s ease, transform 0.6s ease, background-color 0.6s ease;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.logo-wrapper {
+    width: 217.5px;
+    height: 182.5px;
+    position: relative;
+    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.15));
+}
+
+.matrix-canvas {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+.invert {
+    filter: invert(1);
+}
+
+.progress-fill {
+    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
+    box-shadow:
+        0 0 12px rgba(255, 255, 255, 0.6),
+        0 0 4px rgba(255, 255, 255, 0.8);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/features/PresetManager.vue b/src/components/features/PresetManager.vue
index 9e598be2..e78da3d5 100644
--- a/src/components/features/PresetManager.vue
+++ b/src/components/features/PresetManager.vue
@@ -2,50 +2,64 @@
     <div class="space-y-6">
         <div class="flex items-center justify-between">
             <div>
-                <h2 class="text-xl font-semibold text-primary-focus">{{ $t('theme.presets.title') }}</h2>
+                <h2 class="text-xl font-semibold text-primary-focus">
+                    {{ $t("theme.presets.title") }}
+                </h2>
                 <p class="text-sm text-base-content/70 mt-1">
-                    {{ $t('theme.presets.description') }}
+                    {{ $t("theme.presets.description") }}
                 </p>
             </div>
             <div class="flex gap-2">
                 <button @click="openCreateModal" class="btn btn-primary btn-sm">
                     <Plus class="w-4 h-4 mr-2" />
-                    {{ $t('theme.presets.save_current') }}
+                    {{ $t("theme.presets.save_current") }}
                 </button>
                 <button @click="openImportModal" class="btn btn-outline btn-sm">
                     <Upload class="w-4 h-4 mr-2" />
-                    {{ $t('theme.presets.import') }}
+                    {{ $t("theme.presets.import") }}
                 </button>
             </div>
         </div>
 
         <div v-if="loading" class="text-center py-8">
             <div class="loading loading-spinner loading-md"></div>
-            <p class="text-sm text-base-content/70 mt-2">{{ $t('theme.presets.loading') }}</p>
+            <p class="text-sm text-base-content/70 mt-2">
+                {{ $t("theme.presets.loading") }}
+            </p>
         </div>
 
         <div v-else-if="presets.length === 0" class="text-center py-12">
             <Palette class="w-16 h-16 mx-auto text-base-content/30 mb-4" />
-            <h3 class="text-lg font-medium text-base-content/70 mb-2">{{ $t('theme.presets.no_presets_title') }}</h3>
+            <h3 class="text-lg font-medium text-base-content/70 mb-2">
+                {{ $t("theme.presets.no_presets_title") }}
+            </h3>
             <p class="text-sm text-base-content/50 mb-4">
-                {{ $t('theme.presets.no_presets_description') }}
+                {{ $t("theme.presets.no_presets_description") }}
             </p>
             <button @click="openCreateModal" class="btn btn-primary btn-sm">
                 <Plus class="w-4 h-4 mr-2" />
-                {{ $t('theme.presets.create_first_preset') }}
+                {{ $t("theme.presets.create_first_preset") }}
             </button>
         </div>
 
         <div v-else>
             <div class="flex items-center justify-between mb-3">
                 <div class="text-sm text-base-content/70">
-                    {{ $t('theme.presets.pagination.page_of', { current: currentPage, total: totalPages }) }}
+                    {{
+                        $t("theme.presets.pagination.page_of", {
+                            current: currentPage,
+                            total: totalPages,
+                        })
+                    }}
                 </div>
                 <div class="flex items-center gap-2">
                     <label class="text-xs text-base-content/60 shrink-0">
-                        {{ $t('theme.presets.pagination.per_page') }}
+                        {{ $t("theme.presets.pagination.per_page") }}
                     </label>
-                    <select v-model.number="pageSize" class="select select-bordered select-xs">
+                    <select
+                        v-model.number="pageSize"
+                        class="select select-bordered select-xs"
+                    >
                         <option :value="6">6</option>
                         <option :value="9">9</option>
                         <option :value="12">12</option>
@@ -54,53 +68,81 @@
                 </div>
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                <div v-for="preset in paginatedPresets" :key="preset.id"
+            <div
+                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
+                :style="{
+                    paddingBottom: selectedPresets.size > 0 ? '80px' : '0px',
+                }"
+            >
+                <div
+                    v-for="preset in paginatedPresets"
+                    :key="preset.id"
                     class="preset-card card bg-base-200 shadow-md border border-base-300 hover:shadow-lg transition-all duration-200 cursor-pointer"
-                    :class="{ 'ring ring-primary ring-offset-1 ring-offset-base-100 border-primary/60': isPresetSelected(preset.id) }"
-                    @click="handlePresetClick(preset, $event)">
+                    :class="{
+                        'ring ring-primary ring-offset-1 ring-offset-base-100 border-primary/60':
+                            isPresetSelected(preset.id),
+                    }"
+                    @click="handlePresetClick(preset, $event)"
+                >
                     <div class="card-body p-4">
                         <div class="flex items-start justify-between mb-3">
                             <div class="flex-1">
-                                <h3 class="card-title text-base">{{ preset.name }}</h3>
-                                <p v-if="preset.description" class="text-xs text-base-content/70 mt-1 line-clamp-2">
+                                <h3 class="card-title text-base">
+                                    {{ preset.name }}
+                                </h3>
+                                <p
+                                    v-if="preset.description"
+                                    class="text-xs text-base-content/70 mt-1 line-clamp-2"
+                                >
                                     {{ preset.description }}
                                 </p>
                             </div>
                             <div class="dropdown dropdown-end">
-                                <button tabindex="0" class="btn btn-ghost btn-xs btn-circle" @click.stop>
+                                <button
+                                    tabindex="0"
+                                    class="btn btn-ghost btn-xs btn-circle"
+                                    @click.stop
+                                >
                                     <MoreVertical class="w-4 h-4" />
                                 </button>
-                                <ul tabindex="0" @click.stop
-                                    class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-52 border border-base-300">
+                                <ul
+                                    tabindex="0"
+                                    @click.stop
+                                    class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-52 border border-base-300"
+                                >
                                     <li>
                                         <a @click="applyPreset(preset)">
                                             <Palette class="w-4 h-4" />
-                                            {{ $t('theme.presets.apply_preset') }}
+                                            {{
+                                                $t("theme.presets.apply_preset")
+                                            }}
                                         </a>
                                     </li>
                                     <li>
                                         <a @click="openEditModal(preset)">
                                             <Edit class="w-4 h-4" />
-                                            {{ $t('theme.presets.edit') }}
+                                            {{ $t("theme.presets.edit") }}
                                         </a>
                                     </li>
                                     <li>
                                         <a @click="duplicatePreset(preset)">
                                             <Copy class="w-4 h-4" />
-                                            {{ $t('theme.presets.duplicate') }}
+                                            {{ $t("theme.presets.duplicate") }}
                                         </a>
                                     </li>
                                     <li>
                                         <a @click="exportPreset(preset)">
                                             <Download class="w-4 h-4" />
-                                            {{ $t('theme.presets.export') }}
+                                            {{ $t("theme.presets.export") }}
                                         </a>
                                     </li>
                                     <li>
-                                        <a @click="openDeleteModal(preset)" class="text-error">
+                                        <a
+                                            @click="openDeleteModal(preset)"
+                                            class="text-error"
+                                        >
                                             <Trash2 class="w-4 h-4" />
-                                            {{ $t('theme.presets.delete') }}
+                                            {{ $t("theme.presets.delete") }}
                                         </a>
                                     </li>
                                 </ul>
@@ -108,12 +150,19 @@
                         </div>
 
                         <div class="text-xs text-base-content/50">
-                            {{ $t('theme.presets.created', { date: formatDate(preset.createdAt) }) }}
+                            {{
+                                $t("theme.presets.created", {
+                                    date: formatDate(preset.createdAt),
+                                })
+                            }}
                         </div>
 
                         <div class="card-actions justify-end mt-auto">
-                            <button @click="applyPreset(preset)" class="btn btn-primary btn-xs">
-                                {{ $t('theme.presets.apply') }}
+                            <button
+                                @click="applyPreset(preset)"
+                                class="btn btn-primary btn-xs"
+                            >
+                                {{ $t("theme.presets.apply") }}
                             </button>
                         </div>
                     </div>
@@ -121,62 +170,109 @@
             </div>
 
             <div class="mt-4 flex items-center justify-between">
-                <button class="btn btn-sm" :disabled="currentPage === 1" @click="prevPage">{{ $t('common.previous')
-                }}</button>
-                <div class="text-sm text-base-content/70">{{ $t('theme.presets.pagination.page_of', {
-                    current:
-                        currentPage, total: totalPages
-                }) }}</div>
-                <button class="btn btn-sm" :disabled="currentPage === totalPages || totalPages === 0"
-                    @click="nextPage">{{ $t('common.next') }}</button>
+                <button
+                    class="btn btn-sm"
+                    :disabled="currentPage === 1"
+                    @click="prevPage"
+                >
+                    {{ $t("common.previous") }}
+                </button>
+                <div class="text-sm text-base-content/70">
+                    {{
+                        $t("theme.presets.pagination.page_of", {
+                            current: currentPage,
+                            total: totalPages,
+                        })
+                    }}
+                </div>
+                <button
+                    class="btn btn-sm"
+                    :disabled="currentPage === totalPages || totalPages === 0"
+                    @click="nextPage"
+                >
+                    {{ $t("common.next") }}
+                </button>
             </div>
         </div>
 
         <transition name="slide-up-bottom">
-            <div v-if="selectedPresets.size > 0"
-                class="fixed bottom-4 left-1/2 transform -translate-x-1/2 w-auto max-w-[calc(100%-2rem)] bg-neutral text-neutral-content px-4 py-3 rounded-lg shadow-xl z-30 flex items-center gap-3 sm:gap-4">
+            <div
+                v-if="selectedPresets.size > 0"
+                class="fixed left-1/2 transform -translate-x-1/2 w-auto max-w-[calc(100%-2rem)] bg-neutral text-neutral-content px-4 py-3 rounded-lg shadow-xl z-30 flex items-center gap-3 sm:gap-4"
+                :style="{
+                    bottom: `calc(1rem + var(--sidebar-bottom-height, 0px))`,
+                }"
+            >
                 <span class="font-medium text-xs sm:text-sm whitespace-nowrap">
-                    {{ $t('theme.presets.selected_count', { count: selectedPresets.size }) }}
+                    {{
+                        $t("theme.presets.selected_count", {
+                            count: selectedPresets.size,
+                        })
+                    }}
                 </span>
 
                 <div class="flex items-center gap-1 sm:gap-2">
                     <transition name="button-fade" mode="out-in">
-                        <button v-if="canApplyFirst" @click="applyFirstSelected"
+                        <button
+                            v-if="canApplyFirst"
+                            @click="applyFirstSelected"
                             :title="$t('theme.presets.actions.apply_first')"
-                            class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square">
+                            class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square"
+                        >
                             <Palette class="w-4 h-4 sm:w-5 sm:h-5" />
                         </button>
                     </transition>
 
                     <transition name="button-fade" mode="out-in">
-                        <button v-if="canExportSelected" @click="exportSelectedPresets"
+                        <button
+                            v-if="canExportSelected"
+                            @click="exportSelectedPresets"
                             :title="$t('theme.presets.actions.export_selected')"
-                            class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square">
+                            class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square"
+                        >
                             <Download class="w-4 h-4 sm:w-5 sm:h-5" />
                         </button>
                     </transition>
 
                     <transition name="button-fade" mode="out-in">
-                        <button v-if="canDuplicateSelected" @click="duplicateSelectedPresets"
-                            :title="$t('theme.presets.actions.duplicate_selected')"
-                            class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square">
+                        <button
+                            v-if="canDuplicateSelected"
+                            @click="duplicateSelectedPresets"
+                            :title="
+                                $t('theme.presets.actions.duplicate_selected')
+                            "
+                            class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square"
+                        >
                             <Copy class="w-4 h-4 sm:w-5 sm:h-5" />
                         </button>
                     </transition>
 
                     <transition name="button-fade" mode="out-in">
-                        <button v-if="canDeleteSelected" @click="deleteSelectedPresets"
+                        <button
+                            v-if="canDeleteSelected"
+                            @click="deleteSelectedPresets"
                             :title="$t('theme.presets.actions.delete_selected')"
-                            class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square">
+                            class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square"
+                        >
                             <Trash2 class="w-4 h-4 sm:w-5 sm:h-5" />
                         </button>
                     </transition>
                 </div>
 
-                <div v-if="canApplyFirst || canExportSelected || canDuplicateSelected || canDeleteSelected"
-                    class="border-l border-neutral-content/30 h-5 sm:h-6 mx-1"></div>
-
-                <button @click="clearSelection" class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square">
+                <div
+                    v-if="
+                        canApplyFirst ||
+                        canExportSelected ||
+                        canDuplicateSelected ||
+                        canDeleteSelected
+                    "
+                    class="border-l border-neutral-content/30 h-5 sm:h-6 mx-1"
+                ></div>
+
+                <button
+                    @click="clearSelection"
+                    class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square"
+                >
                     <X class="w-4 h-4 sm:w-5 sm:h-5" />
                 </button>
             </div>
@@ -185,20 +281,27 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onBeforeUnmount, ref, computed, watch } from 'vue';
+import { onMounted, onBeforeUnmount, ref, computed, watch } from "vue";
 import {
-    Plus, Upload, Palette, MoreVertical, Edit, Copy, Download,
-    Trash2, X
-} from 'lucide-vue-next';
-import type { ThemePreset } from '../../types/presets';
-import { usePresets } from '../../composables/usePresets';
-import { useModal } from '../../services/modalService';
-import CreatePresetModal from '../modals/social/presets/CreatePresetModal.vue';
-import ImportPresetModal from '../modals/social/presets/ImportPresetModal.vue';
-import DeletePresetConfirmModal from '../modals/social/presets/DeletePresetConfirmModal.vue';
-import { useI18n } from 'vue-i18n';
-import { formatDate } from '../../utils/utils';
-import { useToast } from '../../services/toastService';
+    Plus,
+    Upload,
+    Palette,
+    MoreVertical,
+    Edit,
+    Copy,
+    Download,
+    Trash2,
+    X,
+} from "lucide-vue-next";
+import type { ThemePreset } from "../../types/presets";
+import { usePresets } from "../../composables/usePresets";
+import { useModal } from "../../services/modalService";
+import CreatePresetModal from "../modals/social/presets/CreatePresetModal.vue";
+import ImportPresetModal from "../modals/social/presets/ImportPresetModal.vue";
+import DeletePresetConfirmModal from "../modals/social/presets/DeletePresetConfirmModal.vue";
+import { useI18n } from "vue-i18n";
+import { formatDate } from "../../utils/utils";
+import { useToast } from "../../services/toastService";
 
 const {
     presets,
@@ -209,7 +312,7 @@ const {
     duplicatePreset: duplicatePresetAction,
     applyPreset: applyPresetAction,
     saveCurrentAsPreset,
-    exportPreset: exportPresetAction
+    exportPreset: exportPresetAction,
 } = usePresets();
 
 const { showModal } = useModal();
@@ -247,66 +350,70 @@ watch(pageSize, () => {
 });
 
 watch(presets, () => {
-    if (currentPage.value > totalPages.value) currentPage.value = totalPages.value;
+    if (currentPage.value > totalPages.value)
+        currentPage.value = totalPages.value;
 });
 
 const openCreateModal = () => {
     showModal(
-        'create-preset',
+        "create-preset",
         CreatePresetModal,
         {
-            title: 'Create New Preset',
+            title: "Create New Preset",
         },
         {},
         {
-            'save': handleCreatePreset,
+            save: handleCreatePreset,
         }
     );
 };
 
 const openEditModal = (preset: ThemePreset) => {
     showModal(
-        'edit-preset',
+        "edit-preset",
         CreatePresetModal,
         {
-            title: 'Edit Preset',
+            title: "Edit Preset",
         },
         { editingPreset: preset },
         {
-            'update': handleUpdatePreset,
+            update: handleUpdatePreset,
         }
     );
 };
 
 const openImportModal = () => {
     showModal(
-        'import-preset',
+        "import-preset",
         ImportPresetModal,
         {
-            title: 'Import Preset',
+            title: "Import Preset",
         },
         {},
         {
-            'import': handleImportPreset,
+            import: handleImportPreset,
         }
     );
 };
 
 const openDeleteModal = (preset: ThemePreset) => {
     showModal(
-        'delete-preset',
+        "delete-preset",
         DeletePresetConfirmModal,
         {
-            title: 'Delete Preset',
+            title: "Delete Preset",
         },
         { preset, id: preset.id },
         {
-            'preset-deleted': handleDeletePreset,
+            "preset-deleted": handleDeletePreset,
         }
     );
 };
 
-const handleCreatePreset = async (data: { name: string; description?: string }) => {
+const handleCreatePreset = async (data: {
+    name: string;
+    description?: string;
+}) => {
     await saveCurrentAsPreset(data.name, data.description);
 };
 
@@ -335,54 +442,56 @@ const exportPreset = async (preset: ThemePreset) => {
     try {
         const json = exportPresetAction(preset);
         await navigator.clipboard.writeText(json);
-        addToast(t('theme.export_success'), 'success');
+        addToast(t("theme.export_success"), "success");
     } catch (e) {
-        console.error('Failed to export preset:', e);
-        addToast(t('theme.export_failed'), 'error');
+        console.error("Failed to export preset:", e);
+        addToast(t("theme.export_failed"), "error");
     }
 };
 
 const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.key === 'Control') {
+    if (event.key === "Control") {
         isCtrlPressed.value = true;
     }
     if (
         event.ctrlKey &&
-        (event.key === 'a' || event.key === 'ф') &&
-        !(event.target as HTMLElement).matches('input, textarea, [contenteditable]')
+        (event.key === "a" || event.key === "ф") &&
+        !(event.target as HTMLElement).matches(
+            "input, textarea, [contenteditable]"
+        )
     ) {
         event.preventDefault();
         selectAllPresets();
     }
-    if (event.key === 'Escape') {
+    if (event.key === "Escape") {
         clearSelection();
     }
 };
 
 const handleKeyUp = (event: KeyboardEvent) => {
-    if (event.key === 'Control') {
+    if (event.key === "Control") {
         isCtrlPressed.value = false;
     }
 };
 
 const handleDocumentClick = (event: MouseEvent) => {
     const target = event.target as HTMLElement;
-    if (!target.closest('.preset-card')) {
+    if (!target.closest(".preset-card")) {
         clearSelection();
     }
 };
 
-onMounted(() => {
+onMounted(async () => {
     loadPresets();
-    document.addEventListener('keydown', handleKeyDown);
-    document.addEventListener('keyup', handleKeyUp);
-    document.addEventListener('click', handleDocumentClick);
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("keyup", handleKeyUp);
+    document.addEventListener("click", handleDocumentClick);
 });
 
 onBeforeUnmount(() => {
-    document.removeEventListener('keydown', handleKeyDown);
-    document.removeEventListener('keyup', handleKeyUp);
-    document.removeEventListener('click', handleDocumentClick);
+    document.removeEventListener("keydown", handleKeyDown);
+    document.removeEventListener("keyup", handleKeyUp);
+    document.removeEventListener("click", handleDocumentClick);
 });
 
 const handlePresetClick = (preset: ThemePreset, event: MouseEvent) => {
@@ -409,12 +518,12 @@ const clearSelection = () => {
 };
 
 const selectAllPresets = () => {
-    const allIds = presets.value.map(p => p.id);
+    const allIds = presets.value.map((p) => p.id);
     selectedPresets.value = new Set(allIds);
 };
 
 const getSelectedPresetsData = (): ThemePreset[] => {
-    return presets.value.filter(p => selectedPresets.value.has(p.id));
+    return presets.value.filter((p) => selectedPresets.value.has(p.id));
 };
 
 const canDeleteSelected = computed(() => selectedPresets.value.size > 0);
@@ -424,7 +533,7 @@ const canApplyFirst = computed(() => selectedPresets.value.size > 0);
 
 const applyFirstSelected = () => {
     const ids = Array.from(selectedPresets.value);
-    const first = presets.value.find(p => p.id === ids[0]);
+    const first = presets.value.find((p) => p.id === ids[0]);
     if (first) {
         applyPresetAction(first);
     }
@@ -437,7 +546,10 @@ const deleteSelectedPresets = async () => {
         await deletePreset(p.id);
     }
     await loadPresets();
-    addToast(t('theme.presets.messages.multiple_deleted', { count: items.length }), 'success');
+    addToast(
+        t("theme.presets.messages.multiple_deleted", { count: items.length }),
+        "success"
+    );
     clearSelection();
 };
 
@@ -449,7 +561,12 @@ const duplicateSelectedPresets = async () => {
         await duplicatePresetAction(p.id, newName);
     }
     await loadPresets();
-    addToast(t('theme.presets.messages.multiple_duplicated', { count: items.length }), 'success');
+    addToast(
+        t("theme.presets.messages.multiple_duplicated", {
+            count: items.length,
+        }),
+        "success"
+    );
     clearSelection();
 };
 
@@ -457,19 +574,26 @@ const exportSelectedPresets = async () => {
     try {
         const items = getSelectedPresetsData();
         if (items.length === 0) return;
-        const exported = items.map(p => {
-            try {
-                return JSON.parse(exportPresetAction(p));
-            } catch {
-                return null;
-            }
-        }).filter(Boolean);
+        const exported = items
+            .map((p) => {
+                try {
+                    return JSON.parse(exportPresetAction(p));
+                } catch {
+                    return null;
+                }
+            })
+            .filter(Boolean);
         const json = JSON.stringify(exported, null, 2);
         await navigator.clipboard.writeText(json);
-        addToast(t('theme.presets.messages.multiple_exported', { count: exported.length }), 'success');
+        addToast(
+            t("theme.presets.messages.multiple_exported", {
+                count: exported.length,
+            }),
+            "success"
+        );
     } catch (e) {
-        console.error('Failed to export selected presets:', e);
-        addToast(t('theme.export_failed'), 'error');
+        console.error("Failed to export selected presets:", e);
+        addToast(t("theme.export_failed"), "error");
     }
 };
 </script>
@@ -506,4 +630,4 @@ const exportSelectedPresets = async () => {
     opacity: 1;
     transform: scale(1) translateY(0);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/features/clients/ClientCard.vue b/src/components/features/clients/ClientCard.vue
index 9d79ca2b..a941a554 100644
--- a/src/components/features/clients/ClientCard.vue
+++ b/src/components/features/clients/ClientCard.vue
@@ -1,39 +1,26 @@
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, triggerRef, watch } from 'vue';
 import {
-    AlertTriangle,
-    Camera,
-    ChevronLeft,
-    ChevronRight,
-    Download,
-    ExternalLink,
-    Info,
-    MessageSquare,
-    RefreshCw,
-    ScrollText,
-    Send,
-    Star,
-    StopCircle,
-    Terminal,
-    Trash2,
-    X,
-    ZoomIn,
-    ZoomOut,
-} from 'lucide-vue-next';
-import { useI18n } from 'vue-i18n';
-import gsap from 'gsap';
-import type { Client, ClientComment, ClientDetails, InstallProgress } from '../../../types/ui';
-import InsecureClientWarningModal from '../../modals/clients/InsecureClientWarningModal.vue';
-import ClientInfo from './ClientInfo.vue';
-import { openUrl } from '@tauri-apps/plugin-opener';
-import { invoke } from '@tauri-apps/api/core';
-import { useModal } from '../../../services/modalService';
-import { userService } from '../../../services/userService';
-import { apiDelete, apiGet, apiPost } from '../../../services/apiClient';
-import { formatDate } from '../../../utils/utils';
-import { resolveApiAssetUrl } from '../../../utils/url';
-import { ensureApiUrl } from '../../../config';
-import { useUser } from '../../../composables/useUser';
+    computed,
+    nextTick,
+    onBeforeUnmount,
+    onMounted,
+    ref,
+    shallowRef,
+    watch,
+} from "vue";
+import { AlertTriangle, Star, X } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
+import gsap from "gsap";
+import type { Client, ClientDetails, InstallProgress } from "../../../types/ui";
+import InsecureClientWarningModal from "../../modals/clients/InsecureClientWarningModal.vue";
+import ClientInfo from "./ClientInfo.vue";
+import ScreenshotViewer from "./ScreenshotViewer.vue";
+import ClientCardActions from "./ClientCardActions.vue";
+import ClientCardDetails from "./ClientCardDetails.vue";
+import { openUrl } from "@tauri-apps/plugin-opener";
+import { apiGet } from "../../../services/apiClient";
+import { useModal } from "../../../services/modalService";
+import { useUser } from "../../../composables/useUser";
 
 const { t } = useI18n();
 const { showModal, hideModal } = useModal();
@@ -55,13 +42,13 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits([
-    'launch',
-    'download',
-    'open-log-viewer',
-    'show-context-menu',
-    'client-click',
-    'expanded-state-changed',
-    'show-user-profile',
+    "launch",
+    "download",
+    "open-log-viewer",
+    "show-context-menu",
+    "client-click",
+    "expanded-state-changed",
+    "show-user-profile",
 ]);
 
 const isExpanded = ref(false);
@@ -72,59 +59,23 @@ const cardRef = shallowRef<HTMLElement | null>(null);
 const placeholder = shallowRef<HTMLElement | null>(null);
 const clientDetails = shallowRef<ClientDetails | null>(null);
 const isLoadingDetails = ref(false);
-const activeTab = ref<'info' | 'screenshots' | 'comments'>('info');
-
-const comments = shallowRef<ClientComment[]>([]);
-const isLoadingComments = ref(false);
-const newCommentText = ref('');
-const isPostingComment = ref(false);
-type CurrentUser = { username: string };
-const currentUser = shallowRef<CurrentUser | null>(null);
+const activeTab = ref<"info" | "screenshots" | "comments">("info");
+
 const myRating = ref<number | null>(null);
-const isSubmittingRating = ref(false);
-const isLoadingMyRating = ref(false);
+const ratingAvgOverride = ref<number | null>(null);
+const ratingCountOverride = ref<number | null>(null);
 
 const { isAuthenticated } = useUser();
 
-const MAX_COMMENT_LENGTH = 500;
-const canComment = computed(() => !!currentUser.value);
-const canRate = computed(() => isAuthenticated.value);
-
-const getRatingEndpoint = () => {
-    return `/clients/${props.client.id}/rating`;
-};
+let expansionLock = false;
+let inTransitionTimeout: number | null = null;
 
-const fetchMyRating = async () => {
-    if (!canRate.value) return;
-    if (isLoadingMyRating.value) return;
-    if (myRating.value !== null) return;
-
-    isLoadingMyRating.value = true;
-    try {
-        await ensureApiUrl();
-
-        const data = await apiGet<{ my_rating?: number | null }>(getRatingEndpoint());
-        if (typeof data?.my_rating === 'number') {
-            myRating.value = data.my_rating;
-        }
-    } catch (error) {
-        console.warn('Failed to fetch my rating:', error);
-    } finally {
-        isLoadingMyRating.value = false;
-    }
-};
-
-const previousTab = ref<'info' | 'screenshots' | 'comments'>('info');
-const slideDirection = ref<'left' | 'right'>('right');
+const previousTab = ref<"info" | "screenshots" | "comments">("info");
+const slideDirection = ref<"left" | "right">("right");
 
 const isScreenshotViewerOpen = ref(false);
 const currentScreenshotIndex = ref(0);
-const isImageLoading = ref(false);
-const imageTransitionDirection = ref<'next' | 'prev'>('next');
-const imageRef = shallowRef<HTMLImageElement | null>(null);
-const imageContainerRef = shallowRef<HTMLElement | null>(null);
 const backdropRef = shallowRef<HTMLElement | null>(null);
-const actionsRef = shallowRef<HTMLElement | null>(null);
 const favoriteRef = shallowRef<HTMLElement | null>(null);
 
 const scrollContainer = shallowRef<HTMLElement | null>(null);
@@ -191,9 +142,9 @@ const startScrollbarDrag = (event: MouseEvent) => {
     dragStartY.value = event.clientY;
     dragStartTop.value = thumbTop.value;
 
-    document.addEventListener('mousemove', onScrollbarDrag);
-    document.addEventListener('mouseup', stopScrollbarDrag);
-    document.body.style.userSelect = 'none';
+    document.addEventListener("mousemove", onScrollbarDrag);
+    document.addEventListener("mouseup", stopScrollbarDrag);
+    document.body.style.userSelect = "none";
 };
 
 const onScrollbarDrag = (event: MouseEvent) => {
@@ -216,166 +167,59 @@ const onScrollbarDrag = (event: MouseEvent) => {
 
 const stopScrollbarDrag = () => {
     isDraggingScrollbar.value = false;
-    document.removeEventListener('mousemove', onScrollbarDrag);
-    document.removeEventListener('mouseup', stopScrollbarDrag);
-    document.body.style.userSelect = '';
-};
-
-const fetchComments = async () => {
-    if (isLoadingComments.value) return;
-    isLoadingComments.value = true;
-    try {
-        comments.value = await invoke<ClientComment[]>('get_client_comments', { clientId: props.client.id });
-    } catch (error) {
-        console.error('Failed to fetch comments:', error);
-    } finally {
-        isLoadingComments.value = false;
-    }
-};
-
-const postComment = async () => {
-    const trimmed = newCommentText.value.trim();
-    if (!trimmed || isPostingComment.value) return;
-
-    if (trimmed.length > MAX_COMMENT_LENGTH) {
-        newCommentText.value = trimmed.slice(0, MAX_COMMENT_LENGTH);
-        return;
-    }
-
-    isPostingComment.value = true;
-    try {
-        const token = localStorage.getItem('authToken');
-        if (!token) return;
-
-        const newComment = await invoke<ClientComment>('add_client_comment', {
-            clientId: props.client.id,
-            content: trimmed,
-            userToken: token
-        });
-
-        comments.value.unshift(newComment);
-        newCommentText.value = '';
-
-        if (clientDetails.value) {
-            clientDetails.value = {
-                ...clientDetails.value,
-                comments_count: (clientDetails.value.comments_count || 0) + 1
-            };
-        }
-    } catch (error) {
-        console.error('Failed to post comment:', error);
-    } finally {
-        isPostingComment.value = false;
-    }
-};
-
-const deleteComment = async (commentId: number) => {
-    try {
-        const token = localStorage.getItem('authToken');
-        if (!token) return;
-
-        await invoke('delete_client_comment', {
-            clientId: props.client.id,
-            commentId: commentId,
-            userToken: token
-        });
-
-        comments.value = comments.value.filter(c => c.id !== commentId);
-
-        if (clientDetails.value && clientDetails.value.comments_count) {
-            clientDetails.value = {
-                ...clientDetails.value,
-                comments_count: Math.max(0, clientDetails.value.comments_count - 1)
-            };
-        }
-    } catch (error) {
-        console.error('Failed to delete comment:', error);
-    }
-};
-
-const openProfileFromComment = async (comment: ClientComment) => {
-    try {
-        emit('show-user-profile', comment.user);
-    } catch (error) {
-        console.error('Failed to open user profile from client comment:', error);
-    }
-};
-
-const loadCurrentUser = async () => {
-    try {
-        const info = await userService.initializeUser();
-        if (info && info.user_info && info.user_info.username) {
-            currentUser.value = { username: info.user_info.username };
+    document.removeEventListener("mousemove", onScrollbarDrag);
+    document.removeEventListener("mouseup", stopScrollbarDrag);
+    document.body.style.userSelect = "";
+};
+
+watch(
+    isExpanded,
+    (newVal) => {
+        if (newVal) {
+            document.body.style.overflow = "hidden";
+            nextTick(() => {
+                updateScrollbar();
+            });
         } else {
-            currentUser.value = null;
+            document.body.style.overflow = "";
         }
-    } catch (e) {
-        console.error("Failed to load user info", e);
-    }
-};
-
-watch(isExpanded, (newVal) => {
-    if (newVal) {
-        loadCurrentUser();
-        fetchMyRating();
-        document.body.style.overflow = 'hidden';
-        nextTick(() => {
-            updateScrollbar();
-        });
-    } else {
-        document.body.style.overflow = '';
-    }
-}, { flush: 'post' });
-
-watch(canRate, (newVal) => {
-    if (newVal && isExpanded.value) {
-        fetchMyRating();
-    }
-}, { flush: 'post' });
-
-watch(clientDetails, () => {
-    if (isExpanded.value) {
-        nextTick(() => {
-            updateScrollbar();
-        });
-    }
-}, { flush: 'post' });
-
-const zoomScale = ref(1);
-const zoomPosition = ref({ x: 0, y: 0 });
-const isZoomed = ref(false);
-const isDragging = ref(false);
-const dragStart = ref({ x: 0, y: 0 });
-const hasDragged = ref(false);
-const maxZoom = 5;
-const minZoom = 1;
-const zoomStep = 0.5;
+    },
+    { flush: "post" }
+);
+
+watch(
+    clientDetails,
+    () => {
+        if (isExpanded.value) {
+            nextTick(() => {
+                updateScrollbar();
+            });
+        }
+    },
+    { flush: "post" }
+);
 
-const tabOrder = ['info', 'screenshots', 'comments'] as const;
+const tabOrder = ["info", "screenshots", "comments"] as const;
 
-const changeTab = (newTab: 'info' | 'screenshots' | 'comments') => {
+const changeTab = (newTab: "info" | "screenshots" | "comments") => {
     const currentIndex = tabOrder.indexOf(activeTab.value);
     const newIndex = tabOrder.indexOf(newTab);
 
-    slideDirection.value = newIndex > currentIndex ? 'right' : 'left';
+    slideDirection.value = newIndex > currentIndex ? "right" : "left";
     previousTab.value = activeTab.value;
     activeTab.value = newTab;
-
-    if (newTab === 'comments') {
-        fetchComments();
-    }
 };
 
 const handleLaunchClick = () => {
-    emit('launch', props.client);
+    emit("launch", props.client);
 };
 
 const handleDownloadClick = () => {
-    emit('download', props.client.id);
+    emit("download", props.client.id);
 };
 
 const handleOpenLogViewer = () => {
-    emit('open-log-viewer', props.client);
+    emit("open-log-viewer", props.client);
 };
 
 const handleCardClick = (event: MouseEvent) => {
@@ -386,13 +230,17 @@ const handleCardClick = (event: MouseEvent) => {
     }
 
     if (props.isMultiSelectMode) {
-        emit('client-click', props.client, event);
+        emit("client-click", props.client, event);
         return;
     }
 
     if (!props.isSelected && !props.client.meta.is_custom) {
         const target = event.target as HTMLElement;
-        if (target.closest('button, a, .progress-bar-container, input, select, textarea, div[class*="tooltip"]')) {
+        if (
+            target.closest(
+                'button, a, .progress-bar-container, input, select, textarea, div[class*="tooltip"]'
+            )
+        ) {
             return;
         }
         expandCard();
@@ -400,20 +248,20 @@ const handleCardClick = (event: MouseEvent) => {
 };
 
 const handleShowContextMenu = (event: MouseEvent) => {
-    emit('show-context-menu', event, props.client);
+    emit("show-context-menu", event, props.client);
 };
 
 const showInsecureWarning = () => {
     showModal(
-      `insecure-warning-${props.client.id}`,
-      InsecureClientWarningModal,
-      {
-          title: t('modals.insecure_client_warning.modal_title'),
-      },
-      { client: props.client, infoVariant: true },
-      {
-          close: () => hideModal(`insecure-warning-${props.client.id}`),
-      }
+        `insecure-warning-${props.client.id}`,
+        InsecureClientWarningModal,
+        {
+            title: t("modals.insecure_client_warning.modal_title"),
+        },
+        { client: props.client, infoVariant: true },
+        {
+            close: () => hideModal(`insecure-warning-${props.client.id}`),
+        }
     );
 };
 
@@ -422,116 +270,58 @@ const clientIsInstalling = computed(() => !!props.isClientInstalling);
 const currentInstallStatus = computed(() => props.installationStatus);
 
 const ratingAvg = computed(() => {
+    if (ratingAvgOverride.value !== null) {
+        return ratingAvgOverride.value;
+    }
     if (!isExpanded.value) {
         const avg = props.client.rating_avg;
-        return typeof avg === 'number' ? avg : null;
+        return typeof avg === "number" ? avg : null;
     }
     const avg = clientDetails.value?.rating_avg ?? props.client.rating_avg;
-    return typeof avg === 'number' ? avg : null;
+    return typeof avg === "number" ? avg : null;
 });
 
 const ratingCount = computed(() => {
+    if (ratingCountOverride.value !== null) {
+        return ratingCountOverride.value;
+    }
     if (!isExpanded.value) {
         const count = props.client.rating_count;
-        return typeof count === 'number' ? count : 0;
+        return typeof count === "number" ? count : 0;
     }
-    const count = clientDetails.value?.rating_count ?? props.client.rating_count;
-    return typeof count === 'number' ? count : 0;
+    const count =
+        clientDetails.value?.rating_count ?? props.client.rating_count;
+    return typeof count === "number" ? count : 0;
 });
 
-const ratingRounded = computed(() => {
-    const avg = ratingAvg.value;
-    if (avg === null) return null;
-    return Math.round(avg * 2) / 2;
-});
-
-const handleRatingClick = async (value: number) => {
-    if (isSubmittingRating.value) return;
-    if (!canRate.value) return;
-
-    if (myRating.value === value) {
-        await removeRating();
-        return;
-    }
-
-    await submitRating(value);
-};
-
-const submitRating = async (value: number) => {
-    if (isSubmittingRating.value) return;
-    if (!canRate.value) return;
-
-    const previousRating = myRating.value;
-    myRating.value = value;
-
-    isSubmittingRating.value = true;
-    try {
-        await ensureApiUrl();
-
-        const data = await apiPost<{
-            rating_avg: number | null;
-            rating_count: number;
-            my_rating?: number | null
-        }>(getRatingEndpoint(), { rating: value });
-
-        if (typeof data?.my_rating === 'number') {
-            myRating.value = data.my_rating;
-        } else {
-            myRating.value = value;
-        }
-
-        if (clientDetails.value) {
-            clientDetails.value = {
-                ...clientDetails.value,
-                rating_avg: typeof data?.rating_avg === 'number' || data?.rating_avg === null ? data.rating_avg : clientDetails.value.rating_avg,
-                rating_count: typeof data?.rating_count === 'number' ? data.rating_count : clientDetails.value.rating_count,
-            };
-            triggerRef(clientDetails);
-        }
-    } catch (error) {
-        console.error('Failed to submit rating:', error);
-        myRating.value = previousRating;
-    } finally {
-        isSubmittingRating.value = false;
-    }
-};
-
-const removeRating = async () => {
-    if (isSubmittingRating.value) return;
-    if (!canRate.value) return;
-    if (myRating.value === null) return;
-
-    const previousRating = myRating.value;
-    myRating.value = null;
-
-    isSubmittingRating.value = true;
-    try {
-        await ensureApiUrl();
-
-        await apiDelete(getRatingEndpoint());
-
-        myRating.value = null;
-    } catch (error) {
-        console.error('Failed to remove rating:', error);
-        myRating.value = previousRating;
-    } finally {
-        isSubmittingRating.value = false;
-    }
-};
-
-
 const expandCard = async () => {
     const card = cardRef.value;
-    if (!card || isAnimating.value) return;
+    if (!card || isAnimating.value || isCollapsing.value || inTransition.value)
+        return;
     if (props.isAnyCardExpanded) return;
     if (props.client.meta.is_custom) return;
 
+    if (expansionLock) return;
+    expansionLock = true;
+
+    isAnimating.value = true;
+
     if (!clientDetails.value && !isLoadingDetails.value) {
         isLoadingDetails.value = true;
         try {
-            clientDetails.value = await invoke<ClientDetails>('get_client_details', { clientId: props.client.id });
+            clientDetails.value = await apiGet<ClientDetails>(
+                `/clients/${props.client.id}/detailed`
+            );
         } catch (error) {
-            console.error('Failed to fetch client details:', error);
+            console.error("Failed to fetch client details:", error);
+            if (inTransitionTimeout !== null) {
+                clearTimeout(inTransitionTimeout);
+                inTransitionTimeout = null;
+            }
+            inTransition.value = false;
+            isAnimating.value = false;
+            expansionLock = false;
+            return;
         } finally {
             isLoadingDetails.value = false;
         }
@@ -547,42 +337,58 @@ const expandCard = async () => {
     const centerX = (viewportWidth - modalWidth) / 2;
     const centerY = (viewportHeight - modalHeight) / 2;
 
-    isAnimating.value = true;
-    emit('expanded-state-changed', props.client.id, true);
+    emit("expanded-state-changed", props.client.id, true);
 
-    placeholder.value = document.createElement('div');
+    placeholder.value = document.createElement("div");
     placeholder.value.style.width = `${card.offsetWidth}px`;
     placeholder.value.style.height = `${card.offsetHeight}px`;
     placeholder.value.style.margin = getComputedStyle(card).margin;
-    placeholder.value.style.visibility = 'hidden';
+    placeholder.value.style.visibility = "hidden";
     card.parentNode?.insertBefore(placeholder.value, card);
 
-    const detailsContainer = card.querySelector('.client-details') as HTMLElement | null;
+    const detailsContainer = card.querySelector(
+        ".client-details"
+    ) as HTMLElement | null;
     if (detailsContainer) {
-        detailsContainer.style.display = 'block';
-        gsap.set(detailsContainer, { opacity: 0, maxHeight: '0px', overflow: 'hidden' });
+        detailsContainer.style.display = "block";
+        gsap.set(detailsContainer, {
+            opacity: 0,
+            maxHeight: "0px",
+            overflow: "hidden",
+        });
     }
 
-    card.style.position = 'fixed';
+    card.style.position = "fixed";
     card.style.top = `${rect.top}px`;
     card.style.left = `${rect.left}px`;
     card.style.width = `${rect.width}px`;
     card.style.height = `${rect.height}px`;
-    card.style.zIndex = '1000';
-    card.style.overflow = 'hidden';
+    card.style.zIndex = "1000";
+    card.style.overflow = "hidden";
+
+    document.body.appendChild(card);
 
-    const backdrop = document.createElement('div');
+    const fixedRect = card.getBoundingClientRect();
+    const offsetX = fixedRect.left - rect.left;
+    const offsetY = fixedRect.top - rect.top;
+
+    if (offsetX !== 0 || offsetY !== 0) {
+        card.style.left = `${rect.left - offsetX}px`;
+        card.style.top = `${rect.top - offsetY}px`;
+    }
+
+    const backdrop = document.createElement("div");
     Object.assign(backdrop.style, {
-        position: 'fixed',
-        top: '0',
-        left: '0',
-        width: '100vw',
-        height: '100vh',
-        backgroundColor: 'rgba(0, 0, 0, 0)',
-        backdropFilter: 'blur(0px)',
-        zIndex: '999',
-        pointerEvents: 'auto',
-        transition: 'background-color 0.5s ease, backdrop-filter 0.5s ease'
+        position: "fixed",
+        top: "0",
+        left: "0",
+        width: "100vw",
+        height: "100vh",
+        backgroundColor: "rgba(0, 0, 0, 0)",
+        backdropFilter: "blur(0px)",
+        zIndex: "999",
+        pointerEvents: "auto",
+        transition: "background-color 0.5s ease, backdrop-filter 0.5s ease",
     });
     document.body.appendChild(backdrop);
     backdropRef.value = backdrop;
@@ -590,59 +396,65 @@ const expandCard = async () => {
     backdrop.offsetHeight;
 
     Object.assign(backdrop.style, {
-        backgroundColor: 'rgba(0, 0, 0, 0.6)',
-        backdropFilter: 'blur(4px)'
+        backgroundColor: "rgba(0, 0, 0, 0.6)",
+        backdropFilter: "blur(4px)",
     });
 
-    backdrop.addEventListener('click', collapseCard);
+    backdrop.addEventListener("click", collapseCard);
 
     const tl = gsap.timeline({
         onComplete: () => {
             isExpanded.value = true;
-        }
+            isAnimating.value = false;
+        },
     });
 
-    if (actionsRef.value) {
-        tl.to(actionsRef.value, {
-            autoAlpha: 0,
-            height: 0,
-            marginTop: 0,
-            duration: 0.3,
-            ease: 'power2.out'
-        }, 0);
-    }
     if (favoriteRef.value) {
-        tl.to(favoriteRef.value, {
-            autoAlpha: 0,
-            duration: 0.3,
-            ease: 'power2.out'
-        }, 0);
-    }
-
-    tl.to(card, {
-        duration: 0.5,
-        top: centerY,
-        left: centerX,
-        width: modalWidth,
-        height: modalHeight,
-        borderRadius: '1rem',
-        boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)',
-        ease: 'back.out(0.6)',
-    }, 0);
+        tl.to(
+            favoriteRef.value,
+            {
+                autoAlpha: 0,
+                duration: 0.3,
+                ease: "power2.out",
+            },
+            0
+        );
+    }
+
+    tl.to(
+        card,
+        {
+            duration: 0.5,
+            top: centerY - offsetY,
+            left: centerX - offsetX,
+            width: modalWidth,
+            height: modalHeight,
+            borderRadius: "1rem",
+            boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
+            ease: "back.out(0.6)",
+        },
+        0
+    );
 
     if (detailsContainer) {
-        tl.to(detailsContainer, {
-            opacity: 1,
-            maxHeight: () => detailsContainer.scrollHeight + 'px',
-            duration: 0.4,
-            ease: 'power2.out',
-        }, "-=0.3");
-
-
-    }
-
-    setTimeout(() => {
+        tl.to(
+            detailsContainer,
+            {
+                opacity: 1,
+                maxHeight: () => detailsContainer.scrollHeight + "px",
+                duration: 0.4,
+                ease: "power2.out",
+            },
+            "-=0.3"
+        );
+    }
+
+    if (inTransitionTimeout !== null) {
+        clearTimeout(inTransitionTimeout);
+    }
+    inTransitionTimeout = window.setTimeout(() => {
         inTransition.value = true;
+        inTransitionTimeout = null;
     }, 300);
 };
 
@@ -650,21 +462,30 @@ const collapseCard = () => {
     const card = cardRef.value;
     if (!card || !placeholder.value || isCollapsing.value) return;
 
+    ratingAvgOverride.value = null;
+    ratingCountOverride.value = null;
+
+    if (inTransitionTimeout !== null) {
+        clearTimeout(inTransitionTimeout);
+        inTransitionTimeout = null;
+    }
     inTransition.value = false;
     isCollapsing.value = true;
     isAnimating.value = true;
 
     const placeholderRect = placeholder.value.getBoundingClientRect();
-    if (card) card.style.overflow = 'hidden';
+    if (card) card.style.overflow = "hidden";
 
-    const detailsContainer = card.querySelector('.client-details') as HTMLElement | null;
+    const detailsContainer = card.querySelector(
+        ".client-details"
+    ) as HTMLElement | null;
 
     if (backdropRef.value) {
         const backdrop = backdropRef.value;
-        backdrop.removeEventListener('click', collapseCard);
+        backdrop.removeEventListener("click", collapseCard);
         Object.assign(backdrop.style, {
-            backgroundColor: 'rgba(0, 0, 0, 0)',
-            backdropFilter: 'blur(0px)'
+            backgroundColor: "rgba(0, 0, 0, 0)",
+            backdropFilter: "blur(0px)",
         });
 
         setTimeout(() => {
@@ -675,36 +496,55 @@ const collapseCard = () => {
         backdropRef.value = null;
     }
 
+    const currentRect = card.getBoundingClientRect();
+    const styleTop = parseFloat(card.style.top);
+    const styleLeft = parseFloat(card.style.left);
+    const offsetX = currentRect.left - styleLeft;
+    const offsetY = currentRect.top - styleTop;
+
     const tl = gsap.timeline({
         onComplete: () => {
             if (card) {
-                card.style.position = '';
-                card.style.top = '';
-                card.style.left = '';
-                card.style.width = '';
-                card.style.height = '';
-                card.style.zIndex = '';
-                card.style.boxShadow = '';
-                card.style.overflow = '';
-                card.style.borderRadius = '';
+                card.style.position = "";
+                card.style.top = "";
+                card.style.left = "";
+                card.style.width = "";
+                card.style.height = "";
+                card.style.zIndex = "";
+                card.style.boxShadow = "";
+                card.style.overflow = "";
+                card.style.borderRadius = "";
+
+                if (placeholder.value && placeholder.value.parentNode) {
+                    placeholder.value.parentNode.insertBefore(
+                        card,
+                        placeholder.value
+                    );
+                }
             }
 
             placeholder.value?.parentNode?.removeChild(placeholder.value);
             placeholder.value = null;
 
             if (detailsContainer) {
-                detailsContainer.style.display = 'none';
-                gsap.set(detailsContainer, { opacity: 0, maxHeight: '0px', overflow: 'hidden' });
+                detailsContainer.style.display = "none";
+                gsap.set(detailsContainer, {
+                    opacity: 0,
+                    maxHeight: "0px",
+                    overflow: "hidden",
+                });
             }
             isExpanded.value = false;
             isAnimating.value = false;
             isCollapsing.value = false;
-            emit('expanded-state-changed', props.client.id, false);
-        }
+            expansionLock = false;
+            emit("expanded-state-changed", props.client.id, false);
+        },
     });
 
     if (detailsContainer) {
-        const extraInfoElements = detailsContainer.querySelectorAll('.extra-info > *');
+        const extraInfoElements =
+            detailsContainer.querySelectorAll(".extra-info > *");
         if (extraInfoElements.length > 0) {
             tl.to(extraInfoElements, {
                 opacity: 0,
@@ -712,62 +552,60 @@ const collapseCard = () => {
                 duration: 0.2,
                 stagger: {
                     each: 0.04,
-                    from: "start"
+                    from: "start",
                 },
-                ease: 'power1.in',
+                ease: "power1.in",
             });
         }
 
-        tl.to(detailsContainer, {
-            maxHeight: '0px',
-            opacity: 0,
-            duration: 0.25,
-            ease: 'power2.in',
-            onStart: () => {
-                if (detailsContainer) detailsContainer.style.overflow = 'hidden';
-            }
-        }, extraInfoElements.length > 0 ? "-=0.1" : ">");
-    }
+        tl.to(
+            detailsContainer,
+            {
+                maxHeight: "0px",
+                opacity: 0,
+                duration: 0.25,
+                ease: "power2.in",
+                onStart: () => {
+                    if (detailsContainer)
+                        detailsContainer.style.overflow = "hidden";
+                },
+            },
+            extraInfoElements.length > 0 ? "-=0.1" : ">"
+        );
+    }
+
+    tl.to(
+        card,
+        {
+            duration: 0.5,
+            top: placeholderRect.top - offsetY,
+            left: placeholderRect.left - offsetX,
+            width: placeholderRect.width,
+            height: placeholderRect.height,
+            borderRadius: "0.5rem",
+            boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+            ease: "power3.inOut",
+        },
+        detailsContainer ? "-=0.2" : ">"
+    );
 
-    tl.to(card, {
-        duration: 0.5,
-        top: placeholderRect.top,
-        left: placeholderRect.left,
-        width: placeholderRect.width,
-        height: placeholderRect.height,
-        borderRadius: '0.5rem',
-        boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
-        ease: 'power3.inOut',
-    }, detailsContainer ? "-=0.2" : ">");
-
-    if (actionsRef.value) {
-        tl.to(actionsRef.value, {
-            autoAlpha: 1,
-            height: 'auto',
-            marginTop: '0.5rem',
-            duration: 0.3,
-            ease: 'power2.out',
-            clearProps: 'all'
-        }, "-=0.3");
-    }
     if (favoriteRef.value) {
-        tl.to(favoriteRef.value, {
-            autoAlpha: 1,
-            duration: 0.3,
-            ease: 'power2.out',
-            clearProps: 'all'
-        }, "-=0.3");
+        tl.to(
+            favoriteRef.value,
+            {
+                autoAlpha: 1,
+                duration: 0.3,
+                ease: "power2.out",
+                clearProps: "all",
+            },
+            "-=0.3"
+        );
     }
 };
 
 const openScreenshotViewer = (index: number) => {
     currentScreenshotIndex.value = index;
     isScreenshotViewerOpen.value = true;
-    isImageLoading.value = true;
-    imageTransitionDirection.value = 'next';
-    resetZoom();
-    document.body.style.overflow = 'hidden';
-    document.addEventListener('keydown', handleScreenshotKeydown);
 };
 
 const handleScreenshotClick = (event: MouseEvent, index: number) => {
@@ -776,268 +614,8 @@ const handleScreenshotClick = (event: MouseEvent, index: number) => {
     openScreenshotViewer(index);
 };
 
-const closeScreenshotViewer = () => {
-    isScreenshotViewerOpen.value = false;
-    isImageLoading.value = false;
-    resetZoom();
-    document.body.style.overflow = '';
-    document.removeEventListener('keydown', handleScreenshotKeydown);
-};
-
-const handleScreenshotViewerClose = (event: MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-    closeScreenshotViewer();
-};
-
-const nextScreenshot = () => {
-    if (clientDetails.value?.screenshot_urls && currentScreenshotIndex.value < clientDetails.value.screenshot_urls.length - 1) {
-        imageTransitionDirection.value = 'next';
-        isImageLoading.value = true;
-        currentScreenshotIndex.value = currentScreenshotIndex.value + 1;
-        resetZoom();
-    } else if (clientDetails.value?.screenshot_urls) {
-        imageTransitionDirection.value = 'next';
-        isImageLoading.value = true;
-        currentScreenshotIndex.value = 0;
-        resetZoom();
-    }
-};
-
-const prevScreenshot = () => {
-    if (currentScreenshotIndex.value > 0) {
-        imageTransitionDirection.value = 'prev';
-        isImageLoading.value = true;
-        currentScreenshotIndex.value = currentScreenshotIndex.value - 1;
-        resetZoom();
-    } else if (clientDetails.value?.screenshot_urls) {
-        imageTransitionDirection.value = 'prev';
-        isImageLoading.value = true;
-        currentScreenshotIndex.value = clientDetails.value.screenshot_urls.length - 1;
-        resetZoom();
-    }
-};
-
-const handleImageLoad = () => {
-    isImageLoading.value = false;
-};
-
-const handleImageError = () => {
-    isImageLoading.value = false;
-    closeScreenshotViewer();
-};
-
-const handleScreenshotKeydown = (event: KeyboardEvent) => {
-    switch (event.key) {
-        case 'Escape':
-            if (isZoomed.value) {
-                resetZoom();
-            } else {
-                closeScreenshotViewer();
-            }
-            break;
-        case 'ArrowLeft':
-            if (!isZoomed.value) {
-                prevScreenshot();
-            }
-            break;
-        case 'ArrowRight':
-            if (!isZoomed.value) {
-                nextScreenshot();
-            }
-            break;
-        case '+':
-        case '=':
-            zoomIn();
-            break;
-        case '-':
-            zoomOut();
-            break;
-        case '0':
-            resetZoom();
-            break;
-    }
-};
-
-
-const resetZoom = () => {
-    zoomScale.value = 1;
-    zoomPosition.value = { x: 0, y: 0 };
-    isZoomed.value = false;
-    isDragging.value = false;
-};
-
-const zoomToPoint = (event: MouseEvent) => {
-    if (!imageRef.value || !imageContainerRef.value) return;
-
-    const rect = imageContainerRef.value.getBoundingClientRect();
-
-    const centerX = rect.left + rect.width / 2;
-    const centerY = rect.top + rect.height / 2;
-
-    const clickX = event.clientX - centerX;
-    const clickY = event.clientY - centerY;
-
-    const newScale = Math.min(zoomScale.value + zoomStep, maxZoom);
-
-    if (newScale > 1) {
-        const scaleFactor = newScale / zoomScale.value;
-
-        zoomPosition.value = {
-            x: (zoomPosition.value.x - clickX) * scaleFactor + clickX,
-            y: (zoomPosition.value.y - clickY) * scaleFactor + clickY
-        };
-
-        zoomScale.value = newScale;
-        isZoomed.value = true;
-
-        setTimeout(() => constrainPosition(), 0);
-    }
-};
-
-const zoomIn = (event?: MouseEvent) => {
-    if (zoomScale.value >= maxZoom) return;
-
-    if (event && imageRef.value) {
-        zoomToPoint(event);
-    } else {
-        const newScale = Math.min(zoomScale.value + zoomStep, maxZoom);
-        zoomScale.value = newScale;
-        isZoomed.value = newScale > 1;
-
-        if (isZoomed.value) {
-            setTimeout(() => constrainPosition(), 0);
-        }
-    }
-};
-
-const zoomOut = () => {
-    const newScale = Math.max(zoomScale.value - zoomStep, minZoom);
-
-    if (newScale <= 1) {
-        resetZoom();
-    } else {
-        zoomScale.value = newScale;
-        setTimeout(() => constrainPosition(), 0);
-    }
-};
-
-const handleWheel = (event: WheelEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (event.deltaY < 0) {
-        zoomIn(event);
-    } else {
-        zoomOut();
-    }
-};
-
-const startDrag = (event: MouseEvent) => {
-    if (!isZoomed.value) return;
-
-    event.preventDefault();
-    event.stopPropagation();
-
-    isDragging.value = true;
-    hasDragged.value = false;
-    dragStart.value = {
-        x: event.clientX - zoomPosition.value.x,
-        y: event.clientY - zoomPosition.value.y
-    };
-
-    document.addEventListener('mousemove', handleDrag, { passive: false });
-    document.addEventListener('mouseup', stopDrag);
-
-    if (imageRef.value) {
-        imageRef.value.style.pointerEvents = 'none';
-    }
-};
-
-const handleDrag = (event: MouseEvent) => {
-    if (!isDragging.value) return;
-
-    event.preventDefault();
-    event.stopPropagation();
-
-    hasDragged.value = true;
-
-    zoomPosition.value = {
-        x: event.clientX - dragStart.value.x,
-        y: event.clientY - dragStart.value.y
-    };
-};
-
-const stopDrag = (event?: MouseEvent) => {
-    if (event) {
-        event.preventDefault();
-        event.stopPropagation();
-    }
-
-    isDragging.value = false;
-    document.removeEventListener('mousemove', handleDrag);
-    document.removeEventListener('mouseup', stopDrag);
-
-    if (imageRef.value) {
-        imageRef.value.style.pointerEvents = '';
-    }
-
-    constrainPosition();
-
-    setTimeout(() => {
-        hasDragged.value = false;
-    }, 100);
-};
-
-const constrainPosition = () => {
-    if (!imageRef.value || !imageContainerRef.value || zoomScale.value <= 1) {
-        zoomPosition.value = { x: 0, y: 0 };
-        return;
-    }
-
-    const containerRect = imageContainerRef.value.getBoundingClientRect();
-    const imageRect = imageRef.value.getBoundingClientRect();
-
-    const scaledWidth = imageRect.width * zoomScale.value;
-    const scaledHeight = imageRect.height * zoomScale.value;
-
-    const maxX = Math.max(0, (scaledWidth - containerRect.width) / 2);
-    const maxY = Math.max(0, (scaledHeight - containerRect.height) / 2);
-
-    const constrainedPosition = {
-        x: Math.min(Math.max(zoomPosition.value.x, -maxX), maxX),
-        y: Math.min(Math.max(zoomPosition.value.y, -maxY), maxY)
-    };
-
-    if (constrainedPosition.x !== zoomPosition.value.x || constrainedPosition.y !== zoomPosition.value.y) {
-        zoomPosition.value = constrainedPosition;
-    }
-};
-
-const handleImageClick = (event: MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (hasDragged.value) return;
-
-    if (isZoomed.value) {
-        resetZoom();
-    } else {
-        zoomToPoint(event);
-    }
-};
-
-const handleViewerBackgroundClick = (event: MouseEvent) => {
-    if (isDragging.value || hasDragged.value) return;
-
-    const target = event.target as HTMLElement;
-    if (target === event.currentTarget) {
-        closeScreenshotViewer();
-    }
-};
-
 const handleCardKeyDown = (event: KeyboardEvent) => {
-    if (event.key === 'Escape' && isExpanded.value && !isCollapsing.value) {
+    if (event.key === "Escape" && isExpanded.value && !isCollapsing.value) {
         collapseCard();
     }
 };
@@ -1046,15 +624,21 @@ const handleClientSourceLink = async (url: string) => {
     try {
         await openUrl(url);
     } catch (error) {
-        console.error('Failed to open URL:', error);
+        console.error("Failed to open URL:", error);
     }
 };
 
 onMounted(() => {
-    document.addEventListener('keydown', handleCardKeyDown);
+    document.addEventListener("keydown", handleCardKeyDown);
 });
 
 const cleanupExpandedCard = () => {
+    if (inTransitionTimeout !== null) {
+        clearTimeout(inTransitionTimeout);
+        inTransitionTimeout = null;
+    }
+    inTransition.value = false;
+
     if (!isExpanded.value || !cardRef.value) return;
 
     const card = cardRef.value;
@@ -1070,614 +654,213 @@ const cleanupExpandedCard = () => {
         backdropRef.value = null;
     }
 
-    card.style.position = '';
-    card.style.top = '';
-    card.style.left = '';
-    card.style.width = '';
-    card.style.height = '';
-    card.style.zIndex = '';
-    card.style.boxShadow = '';
-    card.style.overflow = '';
-    card.style.borderRadius = '';
-
-    const detailsContainer = card.querySelector('.client-details') as HTMLElement | null;
+    card.style.position = "";
+    card.style.top = "";
+    card.style.left = "";
+    card.style.width = "";
+    card.style.height = "";
+    card.style.zIndex = "";
+    card.style.boxShadow = "";
+    card.style.overflow = "";
+    card.style.borderRadius = "";
+
+    const detailsContainer = card.querySelector(
+        ".client-details"
+    ) as HTMLElement | null;
     if (detailsContainer) {
         gsap.killTweensOf(detailsContainer);
-        gsap.set(detailsContainer, { opacity: 0, maxHeight: '0px', overflow: 'hidden' });
-        const extraInfoElements = detailsContainer.querySelectorAll('.extra-info > *');
+        gsap.set(detailsContainer, {
+            opacity: 0,
+            maxHeight: "0px",
+            overflow: "hidden",
+        });
+        const extraInfoElements =
+            detailsContainer.querySelectorAll(".extra-info > *");
         gsap.killTweensOf(extraInfoElements);
         gsap.set(extraInfoElements, { opacity: 0, y: 20 });
     }
 
     isExpanded.value = false;
-    emit('expanded-state-changed', props.client.id, false);
-};
-
-const cleanupScreenshotViewer = () => {
-    if (!isScreenshotViewerOpen.value) return;
-    document.body.style.overflow = '';
-    document.removeEventListener('keydown', handleScreenshotKeydown);
+    expansionLock = false;
+    emit("expanded-state-changed", props.client.id, false);
 };
 
 onBeforeUnmount(() => {
+    if (inTransitionTimeout !== null) {
+        clearTimeout(inTransitionTimeout);
+        inTransitionTimeout = null;
+    }
     cleanupExpandedCard();
-    cleanupScreenshotViewer();
-    document.removeEventListener('keydown', handleCardKeyDown);
+    document.removeEventListener("keydown", handleCardKeyDown);
 });
 </script>
 
 <template>
-    <div ref="cardRef" class="card card-border bg-base-300 shadow-lg border-base-content/10 client-card" :class="{
-        'border-primary/50 ring-2 ring-primary/30 bg-primary/5': isSelected,
-        'border-neutral/10': !isSelected,
-        'cursor-pointer': (isMultiSelectMode || !isAnimating),
-        'hover:border-primary/30': isMultiSelectMode && !isSelected,
-        'hover:bg-primary/10': isMultiSelectMode && !isSelected,
-        'transition-all duration-200 ease-out hover:shadow-xl': !isExpanded
-    }" :data-client-id="client.id" @contextmenu="handleShowContextMenu" @click="handleCardClick">
-        <div v-if="isSelected && !isExpanded" class="absolute z-0" style="right: 1.1rem; top: 1.1rem;">
-            <div class="w-5 h-5 bg-primary rounded-full flex items-center justify-center">
-                <svg class="w-3 h-3 text-primary-content" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd"
-                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                          clip-rule="evenodd"/>
+    <div
+        ref="cardRef"
+        class="card card-border bg-base-300 shadow-lg border-base-content/10 client-card"
+        :class="{
+            'border-primary/50 ring-2 ring-primary/30 bg-primary/5': isSelected,
+            'border-neutral/10': !isSelected,
+            'cursor-pointer': isMultiSelectMode || !isAnimating,
+            'hover:border-primary/30': isMultiSelectMode && !isSelected,
+            'hover:bg-primary/10': isMultiSelectMode && !isSelected,
+            'transition-all duration-200 ease-out hover:shadow-xl': !isExpanded,
+        }"
+        :data-client-id="client.id"
+        @contextmenu="handleShowContextMenu"
+        @click="handleCardClick"
+    >
+        <div
+            v-if="isSelected && !isExpanded"
+            class="absolute z-0"
+            style="right: 1.1rem; top: 1.1rem"
+        >
+            <div
+                class="w-5 h-5 bg-primary rounded-full flex items-center justify-center"
+            >
+                <svg
+                    class="w-3 h-3 text-primary-content"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                >
+                    <path
+                        fill-rule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clip-rule="evenodd"
+                    />
                 </svg>
             </div>
         </div>
-        <div class="absolute z-0 transition-opacity duration-200"
-             :class="[(isMultiSelectMode && !isSelected && !isExpanded) ? 'opacity-100' : 'opacity-0 pointer-events-none']"
-             style="right: 1.1rem; top: 1.1rem;">
-            <div class="w-5 h-5 border-2 border-base-content/30 rounded-full bg-base-100"></div>
+        <div
+            class="absolute z-0 transition-opacity duration-200"
+            :class="[
+                isMultiSelectMode && !isSelected && !isExpanded
+                    ? 'opacity-100'
+                    : 'opacity-0 pointer-events-none',
+            ]"
+            style="right: 1.1rem; top: 1.1rem"
+        >
+            <div
+                class="w-5 h-5 border-2 border-base-content/30 rounded-full bg-base-100"
+            ></div>
         </div>
 
-        <button @click="!isCollapsing && collapseCard()" :disabled="isCollapsing"
-                class="close-btn btn btn-sm btn-circle btn-ghost absolute top-3 right-3 z-50 text-base-content transition-opacity duration-200"
-                :class="{
-                'opacity-0 pointer-events-none': (!isExpanded && !isAnimating) || isCollapsing,
-                'opacity-100 pointer-events-auto mr-2': (isExpanded || isAnimating) && !isCollapsing
-            }">
-            <X class="w-5 h-5"/>
+        <button
+            @click="!isCollapsing && collapseCard()"
+            :disabled="isCollapsing"
+            class="close-btn btn btn-sm btn-circle btn-ghost absolute top-3 right-3 z-50 text-base-content transition-opacity duration-200"
+            :class="{
+                'opacity-0 pointer-events-none':
+                    (!isExpanded && !isAnimating) || isCollapsing,
+                'opacity-100 pointer-events-auto mr-2':
+                    (isExpanded || isAnimating) && !isCollapsing,
+            }"
+        >
+            <X class="w-5 h-5" />
         </button>
 
-        <div class="scroll-container h-full w-full overflow-y-auto custom-scrollbar-hide relative" ref="scrollContainer"
-             @scroll="handleScroll">
+        <div
+            class="scroll-container h-full w-full overflow-y-auto custom-scrollbar-hide relative"
+            ref="scrollContainer"
+            @scroll="handleScroll"
+        >
             <div class="p-4 min-h-full">
                 <div class="card-body flex flex-col p-0">
                     <div class="flex justify-between items-start">
                         <h2 class="card-title text-base">
                             {{ client.name }}
                             <div v-if="client.insecure">
-                                <div class="tooltip tooltip-bottom" :data-tip="t('common.click')"
-                                     @click="showInsecureWarning">
-                                    <AlertTriangle class="text-warning w-4 h-4"/>
+                                <div
+                                    class="tooltip tooltip-bottom"
+                                    :data-tip="t('common.click')"
+                                    @click="showInsecureWarning"
+                                >
+                                    <AlertTriangle
+                                        class="text-warning w-4 h-4"
+                                    />
                                 </div>
                             </div>
                         </h2>
                         <transition name="fade" appear>
-                            <div ref="favoriteRef" v-if="isFavorite" class="favorite-indicator">
-                                <Star class="w-4 h-4 fill-yellow-400 text-yellow-400"/>
+                            <div
+                                ref="favoriteRef"
+                                v-if="isFavorite"
+                                class="favorite-indicator"
+                            >
+                                <Star
+                                    class="w-4 h-4 fill-yellow-400 text-yellow-400"
+                                />
                             </div>
                         </transition>
                     </div>
 
-                    <ClientInfo :client="client" :expanded="inTransition"/>
-
-                    <div ref="actionsRef" class="card-actions justify-end mt-2">
-                        <button v-if="clientIsRunning && !clientIsInstalling" @click.stop="handleOpenLogViewer"
-                                class="btn btn-sm btn-ghost btn-circle text-info hover:bg-info/20">
-                            <Terminal class="w-4 h-4"/>
-                        </button>
-                        <transition name="fade-transform" mode="out-in">
-                            <div v-if="clientIsInstalling" class="w-full">
-                                <div class="flex justify-between mb-1 text-xs text-base-content">
-                                    <span class="truncate max-w-[90%]">
-                                        {{ currentInstallStatus?.action }}
-                                        {{ client.name }}
-                                    </span>
-                                    <span>
-                                        {{ currentInstallStatus?.percentage }}%
-                                    </span>
-                                </div>
-                                <div class="progress-bar-container">
-                                    <div class="progress-bar" :style="{
-                                        width: `${currentInstallStatus?.percentage}%`,
-                                    }"></div>
-                                </div>
-                            </div>
-                            <div v-else class="flex items-center space-x-2">
-                                <button v-if="!client.meta.installed" @click="handleDownloadClick"
-                                        class="btn btn-sm btn-primary relative overflow-hidden group"
-                                        :disabled="isRequirementsInProgress || !client.working">
-                                    <span
-                                      class="flex items-center justify-center w-full transition-all duration-300 group-hover:opacity-0 group-hover:-translate-y-3">
-                                        <Download v-if="client.working" class="w-4 h-4 mr-1"/>
-                                        <span v-if="client.working">{{
-                                                t('home.download')
-                                            }}</span>
-                                        <span v-else-if="!client.working">{{
-                                                t('home.unavailable')
-                                            }}</span>
-                                    </span>
-                                    <span
-                                      class="absolute inset-0 flex items-center justify-center opacity-0 translate-y-3 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0">
-                                        {{ client.meta.size || '0' }} MB
-                                    </span>
-                                </button>
-                                <button v-else @click="handleLaunchClick" class="btn btn-sm min-w-20"
-                                        :disabled="isRequirementsInProgress" :class="clientIsRunning
-                                        ? 'btn-error'
-                                        : 'btn-primary'
-                                        ">
-                                    <StopCircle class="w-4 h-4 mr-1" v-if="clientIsRunning"/>
-                                    {{ clientIsRunning ? t('home.stop') : t('home.launch') }}
-                                </button>
-                            </div>
-                        </transition>
-                    </div>
-                    <div class="client-details">
-                        <div class="space-y-4">
-                            <div v-if="isLoadingDetails" class="text-center py-4">
-                                <div class="loading loading-spinner loading-md"></div>
-                                <p class="text-sm text-base-content/60 mt-2">{{ t('client.details.loading') }}</p>
-                            </div>
-
-                            <div v-else-if="clientDetails">
-                                <div role="tablist" class="tabs tabs-boxed mb-4 w-fit mx-auto">
-                                    <button type="button" role="tab" class="tab"
-                                            :class="{ 'tab-active': activeTab === 'info' }"
-                                            :aria-selected="activeTab === 'info'" @click="changeTab('info')">
-                                        <Info class="w-4 h-4 mr-2"/>
-                                        {{ t('client.details.info_tab') }}
-                                    </button>
-                                    <button type="button" role="tab" class="tab"
-                                            :class="{ 'tab-active': activeTab === 'screenshots' }"
-                                            :aria-selected="activeTab === 'screenshots'"
-                                            @click="changeTab('screenshots')">
-                                        <Camera class="w-4 h-4 mr-2"/>
-                                        {{ t('client.details.screenshots_tab') }}
-                                    </button>
-                                    <button type="button" role="tab" class="tab"
-                                            :class="{ 'tab-active': activeTab === 'comments' }"
-                                            :aria-selected="activeTab === 'comments'" @click="changeTab('comments')">
-                                        <div class="flex items-center gap-2">
-                                            <MessageSquare class="w-4 h-4"/>
-                                            <span>{{ t('client.details.comments_tab') }}</span>
-                                            <span v-if="clientDetails?.comments_count"
-                                                  class="badge badge-sm badge-ghost">{{
-                                                    clientDetails.comments_count
-                                                }}</span>
-                                        </div>
-                                    </button>
-                                </div>
-
-                                <div>
-                                    <transition :name="`tab-slide-${slideDirection}`" mode="out-in">
-                                        <div v-if="activeTab === 'info'" key="info" class="tab-pane p-1 space-y-4">
-                                            <div
-                                              class="stats stats-vertical sm:stats-horizontal w-full rounded-xl bg-base-200/40 border border-base-content/5">
-                                                <div class="stat">
-                                                    <div
-                                                      class="stat-title text-[10px] font-bold uppercase tracking-widest opacity-60">
-                                                        {{ t('client.details.rating') }}
-                                                    </div>
-                                                    <div class="stat-value text-base flex items-center gap-3">
-                                                        <div v-if="canRate" :key="`rating-${myRating}`"
-                                                             class="rating rating-sm">
-                                                            <input type="radio" :name="`rating-input-${client.id}`"
-                                                                   class="rating-hidden"/>
-                                                            <template v-for="i in 5" :key="i">
-                                                                <input type="radio" :name="`rating-input-${client.id}`"
-                                                                       class="mask mask-star-2 bg-warning"
-                                                                       :checked="(myRating ?? 0) === i"
-                                                                       :disabled="isSubmittingRating"
-                                                                       @click="handleRatingClick(i)"/>
-                                                            </template>
-                                                        </div>
-
-                                                        <div v-else class="tooltip tooltip-bottom"
-                                                             :data-tip="t('client.details.login_to_rate')">
-                                                            <div v-if="ratingRounded !== null"
-                                                                 class="rating rating-half rating-sm pointer-events-none opacity-80">
-                                                                <input type="radio"
-                                                                       :name="`rating-display-${client.id}`"
-                                                                       class="rating-hidden" disabled/>
-                                                                <template v-for="i in 5" :key="i">
-                                                                    <input type="radio"
-                                                                           :name="`rating-display-${client.id}`"
-                                                                           class="mask mask-star-2 mask-half-1 bg-warning"
-                                                                           :checked="ratingRounded === (i - 0.5)"
-                                                                           disabled/>
-                                                                    <input type="radio"
-                                                                           :name="`rating-display-${client.id}`"
-                                                                           class="mask mask-star-2 mask-half-2 bg-warning"
-                                                                           :checked="ratingRounded === i" disabled/>
-                                                                </template>
-                                                            </div>
-                                                            <div v-else
-                                                                 class="text-xs font-medium text-base-content/60">
-                                                                {{ t('client.details.no_rating') }}
-                                                            </div>
-                                                        </div>
-
-                                                        <div
-                                                          class="text-xs font-semibold text-base-content/70 whitespace-nowrap">
-                                                            <span v-if="ratingAvg !== null">{{
-                                                                    ratingAvg.toFixed(1)
-                                                                }}/5</span>
-                                                            <span v-else>—</span>
-                                                            <span class="text-base-content/50"> ({{
-                                                                    ratingCount
-                                                                }})</span>
-                                                        </div>
-                                                    </div>
-                                                </div>
-
-                                                <div v-if="clientDetails.created_at" class="stat">
-                                                    <div
-                                                      class="stat-title text-[10px] font-bold uppercase tracking-widest opacity-60">
-                                                        {{ t('client.details.created') }}
-                                                    </div>
-                                                    <div
-                                                      class="stat-value text-sm font-semibold flex items-center gap-2">
-                                                        <Info class="w-4 h-4 text-base-content/40"/>
-                                                        {{
-                                                            new
-                                                            Date(clientDetails.created_at).toLocaleDateString(undefined, {
-                                                                dateStyle: 'medium'
-                                                            })
-                                                        }}
-                                                    </div>
-                                                </div>
-
-                                                <div v-if="clientDetails.source_link" class="stat">
-                                                    <div
-                                                      class="stat-title text-[10px] font-bold uppercase tracking-widest opacity-60">
-                                                        {{ t('client.details.source_link') }}
-                                                    </div>
-                                                    <div class="stat-value text-sm">
-                                                        <button type="button"
-                                                                class="btn btn-ghost btn-sm justify-start px-2 gap-2 min-h-0 h-8"
-                                                                @click="handleClientSourceLink(clientDetails.source_link)">
-                                                            <ExternalLink class="w-4 h-4"/>
-                                                            <span class="truncate max-w-[18rem]">{{
-                                                                    clientDetails.source_link
-                                                                }}</span>
-                                                        </button>
-                                                    </div>
-                                                </div>
-                                            </div>
-
-                                            <div class="card bg-base-200/40 border border-base-content/5">
-                                                <div class="card-body p-4 gap-3">
-                                                    <div class="flex items-center justify-between">
-                                                        <h4
-                                                          class="text-sm font-semibold text-base-content/80 flex items-center gap-2">
-                                                            <ScrollText class="w-4 h-4"/>
-                                                            {{ t('client.details.changelog') }}
-                                                        </h4>
-                                                        <span v-if="clientDetails.changelog_entries"
-                                                              class="badge badge-ghost badge-sm">
-                                                            {{ clientDetails.changelog_entries.length }}
-                                                        </span>
-                                                    </div>
-
-                                                    <div
-                                                      v-if="clientDetails.changelog_entries && clientDetails.changelog_entries.length > 0">
-                                                        <ul
-                                                          class="timeline timeline-compact max-h-52 overflow-y-auto ml-2 pr-4 scrollbar-thin scrollbar-thumb-base-content/20 scrollbar-track-transparent">
-                                                            <li
-                                                              v-for="(entry, index) in clientDetails.changelog_entries"
-                                                              :key="entry.version" class="timeline-item">
-                                                                <div class="timeline-start text-xs text-right">
-                                                                    <span class="badge badge-ghost text-xs">
-                                                                        {{
-                                                                            new
-                                                                            Date(entry.created_at).toLocaleDateString(undefined,
-                                                                              {
-                                                                                  month: 'short', day: 'numeric'
-                                                                              })
-                                                                        }}
-                                                                    </span>
-                                                                </div>
-                                                                <div class="timeline-middle">
-                                                                    <Info class="w-4 h-4 text-base-content/50"/>
-                                                                </div>
-                                                                <div
-                                                                  class="timeline-end timeline-box shadow-sm bg-base-100/40 w-full mb-2 border border-base-content/10">
-                                                                    <div class="font-bold text-sm text-base-content">v{{
-                                                                            entry.version
-                                                                        }}
-                                                                    </div>
-                                                                    <div
-                                                                      class="text-sm whitespace-pre-line text-base-content/80 mt-1 leading-relaxed">
-                                                                        {{
-                                                                            entry.content
-                                                                        }}
-                                                                    </div>
-                                                                </div>
-                                                                <hr
-                                                                  v-if="index < clientDetails.changelog_entries.length - 1"
-                                                                  class="bg-base-content/10"/>
-                                                            </li>
-                                                        </ul>
-                                                    </div>
-
-                                                    <div v-else
-                                                         class="flex flex-col items-center justify-center text-center p-8 bg-base-100/30 border border-dashed border-base-content/10 rounded-lg opacity-0 animate-fade-in">
-                                                        <Info class="w-8 h-8 text-base-content/50 mb-2"/>
-                                                        <p class="text-sm font-medium text-base-content/70">{{
-                                                                t('client.details.no_changelog')
-                                                            }}</p>
-                                                        <p class="text-xs text-base-content/50 mt-1">{{
-                                                                t('client.details.no_changelog_desc')
-                                                            }}</p>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-
-                                        <div v-else-if="activeTab === 'screenshots'" key="screenshots" class="tab-pane">
-                                            <div
-                                              v-if="clientDetails.screenshot_urls && clientDetails.screenshot_urls.length > 0"
-                                              class="screenshots-section">
-                                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-                                                    <div v-for="(screenshot, index) in clientDetails.screenshot_urls"
-                                                         :key="index" class="screenshot-container group">
-                                                        <div
-                                                          class="relative overflow-hidden rounded border border-base-content/10 cursor-pointer"
-                                                          @click.stop="handleScreenshotClick($event, index)">
-                                                            <img :src="screenshot"
-                                                                 :alt="`${client.name} screenshot ${index + 1}`"
-                                                                 class="w-full h-36 object-cover transition-all duration-200 group-hover:scale-105"
-                                                                 @error="($event.target as HTMLImageElement).style.display = 'none'"/>
-                                                            <div
-                                                              class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-200 flex items-center justify-center pointer-events-none">
-                                                                <ZoomIn
-                                                                  class="w-6 h-6 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200"/>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div v-else class="text-center py-8 text-base-content/60">
-                                                <p>{{ t('client.details.no_screenshots') }}</p>
-                                            </div>
-                                        </div>
-
-                                        <div v-else-if="activeTab === 'comments'" key="comments">
-                                            <div class="flex flex-col">
-                                                <div class="flex gap-2">
-                                                    <input v-model="newCommentText" type="text"
-                                                           :placeholder="t('client.comments.placeholder')"
-                                                           class="input input-bordered w-full input-sm"
-                                                           :maxlength="MAX_COMMENT_LENGTH" @keyup.enter="postComment"
-                                                           :disabled="isPostingComment || !canComment"/>
-                                                    <button class="btn btn-primary btn-sm btn-square"
-                                                            @click="postComment"
-                                                            :disabled="isPostingComment || !newCommentText.trim() || !canComment">
-                                                        <span v-if="isPostingComment"
-                                                              class="loading loading-spinner loading-xs"></span>
-                                                        <Send v-else class="w-4 h-4"/>
-                                                    </button>
-                                                </div>
-
-                                                <div class="flex justify-between text-[10px] mt-1 opacity-50">
-                                                    <span v-if="!canComment">{{ t('login') }}</span>
-                                                    <span>{{
-                                                            Math.min(newCommentText.length, MAX_COMMENT_LENGTH)
-                                                        }}/{{ MAX_COMMENT_LENGTH }}</span>
-                                                </div>
-
-                                                <div v-if="isLoadingComments" class="flex justify-center py-8">
-                                                    <span
-                                                      class="loading loading-spinner loading-md text-primary"></span>
-                                                </div>
-                                                <div v-else-if="comments.length === 0"
-                                                     class="text-center py-8 text-base-content/50">
-                                                    <MessageSquare class="w-8 h-8 mx-auto mb-2 opacity-50"/>
-                                                    <p>{{ t('client.comments.empty') }}</p>
-                                                </div>
-                                                <div v-else
-                                                     class="space-y-4 max-h-100 overflow-y-auto pr-2 custom-scrollbar">
-                                                    <div v-for="comment in comments" :key="comment.id"
-                                                         class="chat chat-start">
-                                                        <div class="chat-image avatar">
-                                                            <div class="w-8 rounded-full cursor-pointer select-none"
-                                                                 role="button" tabindex="0"
-                                                                 @click.stop="openProfileFromComment(comment)"
-                                                                 @keydown.enter.stop.prevent="openProfileFromComment(comment)"
-                                                                 @keydown.space.stop.prevent="openProfileFromComment(comment)">
-                                                                <img v-if="comment.author_avatar"
-                                                                     :src="resolveApiAssetUrl(comment.author_avatar)"
-                                                                     :alt="comment.author_username"/>
-                                                                <div v-else
-                                                                     class="bg-base-200 text-base-content/70 w-8 h-8 flex items-center justify-center text-xs font-semibold">
-                                                                    {{
-                                                                        (comment.author_username?.[0] ||
-                                                                          '?').toUpperCase()
-                                                                    }}
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                        <div
-                                                          class="chat-header text-xs opacity-50 mb-1 flex items-center gap-2">
-                                                            <span class="cursor-pointer hover:underline"
-                                                                  @click.stop="openProfileFromComment(comment)">
-                                                                {{ comment.author_username }}
-                                                            </span>
-                                                            <time class="text-[10px]">{{
-                                                                    formatDate(comment.created_at)
-                                                                }}
-                                                            </time>
-                                                            <button
-                                                              v-if="currentUser && currentUser.username === comment.author_username"
-                                                              class="btn btn-ghost btn-xs btn-circle text-error"
-                                                              @click="deleteComment(comment.id)"
-                                                              :title="t('client.comments.delete')">
-                                                                <Trash2 class="w-3 h-3"/>
-                                                            </button>
-                                                        </div>
-                                                        <div
-                                                          class="chat-bubble chat-bubble-secondary text-sm wrap-break-word group relative">
-                                                            {{ comment.content }}
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </transition>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                    <ClientInfo :client="client" :expanded="inTransition" />
+
+                    <ClientCardActions
+                        :client="client"
+                        :clientIsInstalling="clientIsInstalling"
+                        :currentInstallStatus="currentInstallStatus"
+                        :clientIsRunning="clientIsRunning"
+                        :isRequirementsInProgress="isRequirementsInProgress"
+                        :isAnimatingOrExpanded="isAnimating || isExpanded"
+                        @launch="handleLaunchClick"
+                        @download="handleDownloadClick"
+                        @open-log-viewer="handleOpenLogViewer"
+                    />
+
+                    <ClientCardDetails
+                        :client="client"
+                        :clientDetails="clientDetails"
+                        :isLoadingDetails="isLoadingDetails"
+                        :isAuthenticated="isAuthenticated"
+                        :ratingAvg="ratingAvg"
+                        :ratingCount="ratingCount"
+                        :activeTab="activeTab"
+                        :slideDirection="slideDirection"
+                        :myRating="myRating"
+                        @update:my-rating="myRating = $event"
+                        @update:rating-avg="ratingAvgOverride = $event"
+                        @update:rating-count="ratingCountOverride = $event"
+                        @update:client-details="clientDetails = $event"
+                        @change-tab="changeTab"
+                        @screenshot-click="handleScreenshotClick"
+                        @show-user-profile="emit('show-user-profile', $event)"
+                        @open-source-link="handleClientSourceLink"
+                    />
                 </div>
             </div>
         </div>
 
-
         <transition name="fade">
-            <div v-if="showScrollbar"
-                 class="custom-scrollbar-track absolute right-1 top-1 bottom-1 w-1.5 m-1 h-[95%] bg-base-content/5 rounded-full z-50 transition-opacity duration-200"
-                 :class="{
+            <div
+                v-if="showScrollbar"
+                class="custom-scrollbar-track absolute right-1 top-1 bottom-1 w-1.5 m-1 h-[95%] bg-base-content/5 rounded-full z-50 transition-opacity duration-200"
+                :class="{
                     'opacity-0': !isExpanded || isCollapsing,
-                    'opacity-100': isExpanded && !isCollapsing
-                }">
+                    'opacity-100': isExpanded && !isCollapsing,
+                }"
+            >
                 <div
-                  class="custom-scrollbar-thumb absolute w-full bg-base-content/20 hover:bg-base-content/40 rounded-full transition-colors duration-200 cursor-pointer"
-                  :style="{ height: thumbHeight + 'px', top: thumbTop + 'px' }" @mousedown="startScrollbarDrag">
-                </div>
+                    class="custom-scrollbar-thumb absolute w-full bg-base-content/20 hover:bg-base-content/40 rounded-full transition-colors duration-200 cursor-pointer"
+                    :style="{
+                        height: thumbHeight + 'px',
+                        top: thumbTop + 'px',
+                    }"
+                    @mousedown="startScrollbarDrag"
+                ></div>
             </div>
         </transition>
     </div>
 
-    <teleport to="body">
-        <transition name="screenshot-viewer" appear>
-            <div v-if="isScreenshotViewerOpen && clientDetails?.screenshot_urls"
-                 class="fixed inset-0 z-9999 bg-black/95 backdrop-blur-sm flex items-center justify-center"
-                 @click="handleViewerBackgroundClick">
-
-                <button @click="handleScreenshotViewerClose"
-                        class="absolute top-4 right-4 z-10 btn btn-circle btn-ghost text-white hover:bg-white/20 transition-all duration-200">
-                    <X class="w-6 h-6"/>
-                </button>
-
-                <button v-if="clientDetails.screenshot_urls.length > 1 && !isZoomed" @click.stop="prevScreenshot"
-                        class="absolute left-4 top-1/2 transform -translate-y-1/2 z-10 btn btn-circle btn-ghost text-white hover:bg-white/20 transition-all duration-200 hover:scale-110"
-                        :disabled="isImageLoading">
-                    <ChevronLeft class="w-6 h-6"/>
-                </button>
-
-                <button v-if="clientDetails.screenshot_urls.length > 1 && !isZoomed" @click.stop="nextScreenshot"
-                        class="absolute right-4 top-1/2 transform -translate-y-1/2 z-10 btn btn-circle btn-ghost text-white hover:bg-white/20 transition-all duration-200 hover:scale-110"
-                        :disabled="isImageLoading">
-                    <ChevronRight class="w-6 h-6"/>
-                </button>
-
-                <div class="absolute top-4 left-4 z-10 flex flex-col gap-2">
-                    <button @click.stop="zoomIn()"
-                            class="btn btn-circle btn-ghost text-white hover:bg-white/20 transition-all duration-200"
-                            :disabled="zoomScale >= maxZoom" :class="{
-                            'cursor-not-allowed opacity-50': zoomScale >= maxZoom
-                        }">
-                        <ZoomIn class="w-5 h-5"/>
-                    </button>
-                    <button @click.stop="zoomOut"
-                            class="btn btn-circle btn-ghost text-white hover:bg-white/20 transition-all duration-200"
-                            :disabled="zoomScale <= minZoom" :class="{
-                            'cursor-not-allowed opacity-50': zoomScale <= minZoom
-                        }">
-                        <ZoomOut class="w-5 h-5"/>
-                    </button>
-                    <button @click.stop="resetZoom"
-                            class="btn btn-circle btn-ghost text-white hover:bg-white/20 transition-all duration-200"
-                            :disabled="!isZoomed" :class="{
-                            'cursor-not-allowed opacity-50': !isZoomed
-                        }">
-                        <RefreshCw class="w-5 h-5"/>
-                    </button>
-                </div>
-
-                <transition name="fade" appear>
-                    <div v-if="isZoomed"
-                         class="absolute top-4 left-1/2 transform -translate-x-1/2 z-10 bg-black/50 text-white px-3 py-1 rounded-full text-sm backdrop-blur-sm border border-white/10">
-                        {{
-                            t('client.details.screenshot_viewer.zoom_percent', { percent: Math.round(zoomScale * 100) })
-                        }}
-                    </div>
-                </transition>
-
-
-                <div class="relative max-w-[95vw] max-h-[95vh] flex items-center justify-center p-12"
-                     @wheel="handleWheel" @click="handleViewerBackgroundClick">
-                    <div class="relative w-full h-full flex items-center justify-center">
-
-                        <transition name="fade">
-                            <div v-if="isImageLoading" class="absolute inset-0 flex items-center justify-center z-20">
-                                <div class="skeleton-container">
-                                    <div class="skeleton w-full h-full rounded-lg bg-base-200/20"></div>
-                                    <div class="absolute inset-0 flex items-center justify-center">
-                                        <div class="loading loading-spinner loading-lg text-white"></div>
-                                    </div>
-                                </div>
-                            </div>
-                        </transition>
-
-                        <div ref="imageContainerRef"
-                             class="relative w-full h-full flex items-center justify-center overflow-hidden"
-                             @click="handleViewerBackgroundClick">
-                            <transition :name="`image-slide-${imageTransitionDirection}`" mode="out-in" appear>
-                                <img ref="imageRef" :key="currentScreenshotIndex"
-                                     :src="clientDetails.screenshot_urls[currentScreenshotIndex]"
-                                     :alt="`${client.name} screenshot ${currentScreenshotIndex + 1}`"
-                                     class="max-w-full max-h-full object-contain rounded-lg shadow-2xl select-none image-transition"
-                                     :class="{
-                                        'opacity-0': isImageLoading,
-                                        'opacity-100': !isImageLoading,
-                                        'cursor-zoom-in': !isZoomed,
-                                        'cursor-grab': isZoomed && !isDragging,
-                                        'cursor-grabbing': isDragging,
-                                        'smooth-transition': !isDragging
-                                    }" :style="{
-                                        transform: `scale(${zoomScale}) translate(${zoomPosition.x / zoomScale}px, ${zoomPosition.y / zoomScale}px)`,
-                                        transformOrigin: 'center center'
-                                    }" @click="handleImageClick" @mousedown="startDrag" @dragstart.prevent
-                                     @contextmenu.prevent @load="handleImageLoad" @error="handleImageError"/>
-                            </transition>
-                        </div>
-                    </div>
-                </div>
-
-                <transition name="fade-slide-up" appear>
-                    <div v-if="clientDetails.screenshot_urls.length > 1"
-                         class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black/50 text-white px-3 py-1 rounded-full text-sm border border-white/10 backdrop-blur-md">
-                        {{
-                            t('client.details.screenshot_viewer.image_counter', {
-                                current: currentScreenshotIndex + 1,
-                                total: clientDetails.screenshot_urls.length
-                            })
-                        }}
-                    </div>
-                </transition>
-
-                <transition name="fade-slide-up" appear>
-                    <div
-                      class="absolute bottom-4 right-4 text-white/70 text-xs space-y-1 text-right bg-black/40 p-2 rounded border border-white/10 backdrop-blur-md">
-                        <div>{{
-                                isZoomed ? t('client.details.screenshot_viewer.controls.esc_reset') :
-                                  t('client.details.screenshot_viewer.controls.esc_close')
-                            }}
-                        </div>
-                        <div v-if="clientDetails.screenshot_urls.length > 1 && !isZoomed">{{
-                                t('client.details.screenshot_viewer.controls.navigate')
-                            }}
-                        </div>
-                        <div>{{ t('client.details.screenshot_viewer.controls.click_zoom') }}</div>
-                        <div v-if="isZoomed">{{ t('client.details.screenshot_viewer.controls.drag_pan') }}</div>
-                    </div>
-                </transition>
-            </div>
-        </transition>
-    </teleport>
+    <ScreenshotViewer
+        v-if="isScreenshotViewerOpen && clientDetails?.screenshot_urls"
+        :isOpen="isScreenshotViewerOpen"
+        :screenshotUrls="clientDetails.screenshot_urls"
+        :initialIndex="currentScreenshotIndex"
+        :clientName="client.name"
+        @close="isScreenshotViewerOpen = false"
+    />
 </template>
 
 <style scoped>
@@ -1698,12 +881,6 @@ onBeforeUnmount(() => {
     display: none;
 }
 
-.card-actions {
-    min-height: 2rem;
-    display: flex;
-    align-items: center;
-}
-
 .client-details {
     opacity: 0;
     max-height: 0;
@@ -1712,45 +889,11 @@ onBeforeUnmount(() => {
     scrollbar-gutter: stable;
 }
 
-.timeline {
-    scrollbar-gutter: stable;
-    scrollbar-width: thin;
-}
-
-.timeline::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-
-.timeline::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.timeline::-webkit-scrollbar-thumb {
-    background-color: rgba(100, 100, 100, 0.35);
-    border-radius: 999px;
-    border: 3px solid transparent;
-    background-clip: content-box;
-}
-
-.progress-bar-container {
-    height: 6px;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 2px;
-    overflow: hidden;
-}
-
-.progress-bar {
-    height: 100%;
-    background: linear-gradient(90deg, #3b3b3b, #777777);
-    border-radius: 2px;
-    transition: width 0.2s ease-out;
-}
-
 .fade-transform-enter-active,
 .fade-transform-leave-active {
-    transition: opacity 0.2s ease,
-    transform 0.2s ease;
+    transition:
+        opacity 0.2s ease,
+        transform 0.2s ease;
 }
 
 .fade-transform-enter-from,
@@ -1763,7 +906,6 @@ onBeforeUnmount(() => {
     opacity: 1;
 }
 
-
 .favorite-indicator {
     display: flex;
     align-items: center;
@@ -1774,211 +916,6 @@ onBeforeUnmount(() => {
     color: #fbbf24;
 }
 
-.version-badge-container {
-    height: 1.5rem;
-    margin-bottom: 0.5rem;
-}
-
-.version-badge {
-    height: 1.25rem;
-    min-height: 1.25rem;
-    line-height: 1;
-    display: inline-flex;
-    align-items: center;
-    white-space: nowrap;
-}
-
-.tab-slide-enter-active,
-.tab-slide-leave-active {
-    transition: all 0.3s ease;
-}
-
-.tab-slide-enter-from {
-    opacity: 0;
-    transform: translateX(20px);
-}
-
-.tab-slide-leave-to {
-    opacity: 0;
-    transform: translateX(-20px);
-}
-
-.tab-slide-right-enter-active,
-.tab-slide-right-leave-active,
-.tab-slide-left-enter-active,
-.tab-slide-left-leave-active {
-    transition: all 0.3s ease;
-}
-
-.tab-slide-right-enter-from {
-    opacity: 0;
-    transform: translateX(20px);
-}
-
-.tab-slide-right-leave-to {
-    opacity: 0;
-    transform: translateX(-20px);
-}
-
-.tab-slide-left-enter-from {
-    opacity: 0;
-    transform: translateX(-20px);
-}
-
-.tab-slide-left-leave-to {
-    opacity: 0;
-    transform: translateX(20px);
-}
-
-.tab-pane {
-    min-height: 200px;
-}
-
-.tab-content {
-    position: relative;
-}
-
-.tabs {
-    justify-content: center;
-}
-
-.tab {
-    transition: all 0.2s ease;
-    border-radius: 4rem;
-}
-
-.tab:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-
-.screenshot-container {
-    position: relative;
-    overflow: hidden;
-    border-radius: 0.2rem;
-    transition: transform 0.2s ease;
-}
-
-.screenshot-container:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.screenshot-viewer-enter-active,
-.screenshot-viewer-leave-active {
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-.screenshot-viewer-enter-from,
-.screenshot-viewer-leave-to {
-    opacity: 0;
-    backdrop-filter: blur(0px);
-    transform: scale(0.95);
-}
-
-.screenshot-viewer-enter-to,
-.screenshot-viewer-leave-from {
-    opacity: 1;
-    backdrop-filter: blur(4px);
-    transform: scale(1);
-}
-
-.image-slide-next-enter-active {
-    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-.image-slide-next-leave-active {
-    transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
-}
-
-.image-slide-prev-enter-active {
-    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-.image-slide-prev-leave-active {
-    transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
-}
-
-.image-slide-next-enter-from {
-    opacity: 0;
-    transform: translateX(150px) scale(0.9) rotateY(15deg);
-    filter: blur(2px);
-}
-
-.image-slide-next-leave-to {
-    opacity: 0;
-    transform: translateX(-150px) scale(0.9) rotateY(-15deg);
-    filter: blur(2px);
-}
-
-.image-slide-prev-enter-from {
-    opacity: 0;
-    transform: translateX(-150px) scale(0.9) rotateY(-15deg);
-    filter: blur(2px);
-}
-
-.image-slide-prev-leave-to {
-    opacity: 0;
-    transform: translateX(150px) scale(0.9) rotateY(15deg);
-    filter: blur(2px);
-}
-
-.image-slide-next-enter-to,
-.image-slide-next-leave-from,
-.image-slide-prev-enter-to,
-.image-slide-prev-leave-from {
-    opacity: 1;
-    transform: translateX(0) scale(1) rotateY(0deg);
-    filter: blur(0px);
-}
-
-.skeleton-container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    max-width: 800px;
-    max-height: 600px;
-    min-width: 400px;
-    min-height: 300px;
-}
-
-
-.image-transition {
-    transition: opacity 0.3s ease;
-}
-
-.fade-slide-up-enter-active {
-    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    transition-delay: 0.2s;
-}
-
-.fade-slide-up-leave-active {
-    transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
-}
-
-.fade-slide-up-enter-from {
-    opacity: 0;
-    transform: translateY(20px);
-}
-
-.fade-slide-up-leave-to {
-    opacity: 0;
-    transform: translateY(10px);
-}
-
-.fade-slide-up-enter-to,
-.fade-slide-up-leave-from {
-    opacity: 1;
-    transform: translateY(0);
-}
-
-.smooth-transition {
-    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-img.cursor-grabbing {
-    transition: none;
-}
-
 .fade-enter-active,
 .fade-leave-active {
     transition: opacity 0.3s ease;
@@ -1989,25 +926,18 @@ img.cursor-grabbing {
     opacity: 0;
 }
 
-
-@keyframes fade-in {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+.fade-transform-enter-active,
+.fade-transform-leave-active {
+    transition: all 0.3s ease;
 }
 
-.animate-fade-in {
-    animation: fade-in 0.4s ease-out forwards;
+.fade-transform-enter-from {
+    opacity: 0;
+    transform: translateX(10px);
 }
 
-.scrollbar-thin {
-    scrollbar-width: thin;
-    scrollbar-color: var(--thumb-color) var(--track-color);
+.fade-transform-leave-to {
+    opacity: 0;
+    transform: translateX(-10px);
 }
 </style>
diff --git a/src/components/features/clients/ClientCardActions.vue b/src/components/features/clients/ClientCardActions.vue
new file mode 100644
index 00000000..0ddbd713
--- /dev/null
+++ b/src/components/features/clients/ClientCardActions.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { Download, StopCircle, Terminal } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
+import type { Client, InstallProgress } from "../../../types/ui";
+
+const { t } = useI18n();
+
+defineProps<{
+    client: Client;
+    clientIsInstalling: boolean;
+    currentInstallStatus: InstallProgress | undefined;
+    clientIsRunning: boolean;
+    isRequirementsInProgress: boolean;
+    isAnimatingOrExpanded: boolean;
+}>();
+
+const emit = defineEmits(["launch", "download", "open-log-viewer"]);
+
+const handleLaunchClick = () => {
+    emit("launch");
+};
+
+const handleDownloadClick = () => {
+    emit("download");
+};
+
+const handleOpenLogViewer = () => {
+    emit("open-log-viewer");
+};
+</script>
+
+<template>
+    <transition-group
+        name="action-list"
+        tag="div"
+        class="card-actions justify-end mt-2 relative"
+        :class="[isAnimatingOrExpanded ? 'mr-4' : '']"
+    >
+        <div v-if="clientIsInstalling" key="installing" class="w-full">
+            <div class="flex justify-between mb-1 text-xs text-base-content">
+                <span class="truncate max-w-[90%]">
+                    {{ currentInstallStatus?.action }}
+                    {{ client.name }}
+                </span>
+                <span>{{ currentInstallStatus?.percentage }}%</span>
+            </div>
+            <div class="progress-bar-container">
+                <div
+                    class="progress-bar"
+                    :style="{
+                        width: `${currentInstallStatus?.percentage}%`,
+                    }"
+                ></div>
+            </div>
+        </div>
+
+        <div v-else key="standard-actions" class="flex items-center space-x-2">
+            <button
+                v-if="!client.meta.installed"
+                @click="handleDownloadClick"
+                class="btn btn-sm btn-primary relative overflow-hidden group"
+                :disabled="isRequirementsInProgress || !client.working"
+            >
+                <span
+                    class="flex items-center justify-center w-full transition-all duration-300 group-hover:opacity-0 group-hover:-translate-y-3"
+                >
+                    <Download v-if="client.working" class="w-4 h-4 mr-1" />
+                    <span v-if="client.working">{{ t("home.download") }}</span>
+                    <span v-else-if="!client.working">{{
+                        t("home.unavailable")
+                    }}</span>
+                </span>
+                <span
+                    class="absolute inset-0 flex items-center justify-center opacity-0 translate-y-3 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0"
+                >
+                    {{ client.meta.size || "0" }} MB
+                </span>
+            </button>
+            <button
+                v-else
+                @click="handleLaunchClick"
+                class="btn btn-sm min-w-20"
+                :disabled="isRequirementsInProgress"
+                :class="clientIsRunning ? 'btn-error' : 'btn-primary'"
+            >
+                <StopCircle class="w-4 h-4 mr-1" v-if="clientIsRunning" />
+                {{ clientIsRunning ? t("home.stop") : t("home.launch") }}
+            </button>
+        </div>
+
+        <button
+            v-if="clientIsRunning && !clientIsInstalling"
+            key="terminal"
+            @click.stop="handleOpenLogViewer"
+            class="btn btn-sm btn-ghost btn-circle text-info hover:bg-info/20 ml-2"
+        >
+            <Terminal class="w-4 h-4" />
+        </button>
+    </transition-group>
+</template>
+
+<style scoped>
+.card-actions {
+    min-height: 2rem;
+    display: flex;
+    align-items: center;
+}
+
+.progress-bar-container {
+    height: 6px;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.progress-bar {
+    height: 100%;
+    background: linear-gradient(90deg, #3b3b3b, #777777);
+    border-radius: 2px;
+    transition: width 0.2s ease-out;
+}
+
+.action-list-move,
+.action-list-enter-active,
+.action-list-leave-active {
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.action-list-enter-from,
+.action-list-leave-to {
+    opacity: 0;
+    transform: translateX(20px);
+}
+
+.action-list-leave-active {
+    position: absolute;
+}
+</style>
diff --git a/src/components/features/clients/ClientCardDetails.vue b/src/components/features/clients/ClientCardDetails.vue
new file mode 100644
index 00000000..212c7adc
--- /dev/null
+++ b/src/components/features/clients/ClientCardDetails.vue
@@ -0,0 +1,519 @@
+<script setup lang="ts">
+import {
+    Camera,
+    ExternalLink,
+    Info,
+    MessageSquare,
+    ScrollText,
+    ZoomIn,
+} from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
+import type { Client, ClientDetails } from "../../../types/ui";
+import ClientRating from "./ClientRating.vue";
+import ClientComments from "./ClientComments.vue";
+
+const { t } = useI18n();
+
+defineProps<{
+    client: Client;
+    clientDetails: ClientDetails | null;
+    isLoadingDetails: boolean;
+    isAuthenticated: boolean;
+    ratingAvg: number | null;
+    ratingCount: number;
+    activeTab: "info" | "screenshots" | "comments";
+    slideDirection: "left" | "right";
+    myRating: number | null;
+}>();
+
+const emit = defineEmits([
+    "change-tab",
+    "update:my-rating",
+    "update:rating-avg",
+    "update:rating-count",
+    "update:client-details",
+    "screenshot-click",
+    "show-user-profile",
+    "open-source-link",
+]);
+
+const handleClientSourceLink = (url: string) => {
+    emit("open-source-link", url);
+};
+
+const handleScreenshotClick = (event: MouseEvent, index: number) => {
+    emit("screenshot-click", event, index);
+};
+</script>
+
+<template>
+    <div class="client-details">
+        <div class="space-y-4">
+            <div v-if="isLoadingDetails" class="text-center py-4">
+                <div class="loading loading-spinner loading-md"></div>
+                <p class="text-sm text-base-content/60 mt-2">
+                    {{ t("client.details.loading") }}
+                </p>
+            </div>
+
+            <div v-else-if="clientDetails">
+                <div role="tablist" class="tabs tabs-boxed mb-4 w-fit mx-auto">
+                    <button
+                        type="button"
+                        role="tab"
+                        class="tab"
+                        :class="{ 'tab-active': activeTab === 'info' }"
+                        :aria-selected="activeTab === 'info'"
+                        @click="emit('change-tab', 'info')"
+                    >
+                        <Info class="w-4 h-4 mr-2" />
+                        {{ t("client.details.info_tab") }}
+                    </button>
+                    <button
+                        type="button"
+                        role="tab"
+                        class="tab"
+                        :class="{ 'tab-active': activeTab === 'screenshots' }"
+                        :aria-selected="activeTab === 'screenshots'"
+                        @click="emit('change-tab', 'screenshots')"
+                    >
+                        <Camera class="w-4 h-4 mr-2" />
+                        {{ t("client.details.screenshots_tab") }}
+                    </button>
+                    <button
+                        type="button"
+                        role="tab"
+                        class="tab"
+                        :class="{ 'tab-active': activeTab === 'comments' }"
+                        :aria-selected="activeTab === 'comments'"
+                        @click="emit('change-tab', 'comments')"
+                    >
+                        <div class="flex items-center gap-2">
+                            <MessageSquare class="w-4 h-4" />
+                            <span>{{ t("client.details.comments_tab") }}</span>
+                            <span
+                                v-if="clientDetails?.comments_count"
+                                class="badge badge-sm badge-ghost"
+                                >{{ clientDetails.comments_count }}</span
+                            >
+                        </div>
+                    </button>
+                </div>
+
+                <div>
+                    <transition
+                        :name="`tab-slide-${slideDirection}`"
+                        mode="out-in"
+                    >
+                        <div
+                            v-if="activeTab === 'info'"
+                            key="info"
+                            class="tab-pane p-1 space-y-4"
+                        >
+                            <div
+                                class="stats stats-vertical sm:stats-horizontal w-full rounded-xl bg-base-200/40 border border-base-content/5"
+                            >
+                                <ClientRating
+                                    :clientId="client.id"
+                                    :ratingAvg="ratingAvg"
+                                    :ratingCount="ratingCount"
+                                    :myRating="myRating"
+                                    @update:my-rating="
+                                        emit('update:my-rating', $event)
+                                    "
+                                    :isAuthenticated="isAuthenticated"
+                                    @update:rating-avg="
+                                        emit('update:rating-avg', $event)
+                                    "
+                                    @update:rating-count="
+                                        emit('update:rating-count', $event)
+                                    "
+                                />
+
+                                <div
+                                    v-if="clientDetails.created_at"
+                                    class="stat"
+                                >
+                                    <div
+                                        class="stat-title text-[10px] font-bold uppercase tracking-widest opacity-60"
+                                    >
+                                        {{ t("client.details.created") }}
+                                    </div>
+                                    <div
+                                        class="stat-value text-sm font-semibold flex items-center gap-2"
+                                    >
+                                        <Info
+                                            class="w-4 h-4 text-base-content/40"
+                                        />
+                                        {{
+                                            new Date(
+                                                clientDetails.created_at
+                                            ).toLocaleDateString(undefined, {
+                                                dateStyle: "medium",
+                                            })
+                                        }}
+                                    </div>
+                                </div>
+
+                                <div
+                                    v-if="clientDetails.source_link"
+                                    class="stat"
+                                >
+                                    <div
+                                        class="stat-title text-[10px] font-bold uppercase tracking-widest opacity-60"
+                                    >
+                                        {{ t("client.details.source_link") }}
+                                    </div>
+                                    <div
+                                        class="stat-value text-sm flex items-center gap-2"
+                                    >
+                                        <button
+                                            type="button"
+                                            class="btn btn-ghost btn-sm justify-start px-2 gap-2 min-h-0 h-8"
+                                            @click.stop="
+                                                handleClientSourceLink(
+                                                    clientDetails.source_link
+                                                )
+                                            "
+                                        >
+                                            <ExternalLink class="w-4 h-4" />
+                                            <span
+                                                class="truncate max-w-[18rem]"
+                                                >{{
+                                                    clientDetails.source_link
+                                                }}</span
+                                            >
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div
+                                class="card bg-base-200/40 border border-base-content/5"
+                            >
+                                <div class="card-body p-4 gap-3">
+                                    <div
+                                        class="flex items-center justify-between"
+                                    >
+                                        <h4
+                                            class="text-sm font-semibold text-base-content/80 flex items-center gap-2"
+                                        >
+                                            <ScrollText class="w-4 h-4" />
+                                            {{ t("client.details.changelog") }}
+                                        </h4>
+                                        <span
+                                            v-if="
+                                                clientDetails.changelog_entries
+                                            "
+                                            class="badge badge-ghost badge-sm"
+                                        >
+                                            {{
+                                                clientDetails.changelog_entries
+                                                    .length
+                                            }}
+                                        </span>
+                                    </div>
+
+                                    <div
+                                        v-if="
+                                            clientDetails.changelog_entries &&
+                                            clientDetails.changelog_entries
+                                                .length > 0
+                                        "
+                                    >
+                                        <ul
+                                            class="timeline timeline-compact max-h-52 overflow-y-auto ml-2 pr-4 scrollbar-thin scrollbar-thumb-base-content/20 scrollbar-track-transparent"
+                                        >
+                                            <li
+                                                v-for="(
+                                                    entry, index
+                                                ) in clientDetails.changelog_entries"
+                                                :key="entry.version"
+                                                class="timeline-item"
+                                            >
+                                                <div
+                                                    class="timeline-start text-xs text-right"
+                                                >
+                                                    <span
+                                                        class="badge badge-ghost text-xs"
+                                                    >
+                                                        {{
+                                                            new Date(
+                                                                entry.created_at
+                                                            ).toLocaleDateString(
+                                                                undefined,
+                                                                {
+                                                                    month: "short",
+                                                                    day: "numeric",
+                                                                }
+                                                            )
+                                                        }}
+                                                    </span>
+                                                </div>
+                                                <div class="timeline-middle">
+                                                    <Info
+                                                        class="w-4 h-4 text-base-content/50"
+                                                    />
+                                                </div>
+                                                <div
+                                                    class="timeline-end timeline-box shadow-sm bg-base-100/40 w-full mb-2 border border-base-content/10"
+                                                >
+                                                    <div
+                                                        class="font-bold text-sm text-base-content"
+                                                    >
+                                                        v{{ entry.version }}
+                                                    </div>
+                                                    <div
+                                                        class="text-sm whitespace-pre-line text-base-content/80 mt-1 leading-relaxed"
+                                                    >
+                                                        {{ entry.content }}
+                                                    </div>
+                                                </div>
+                                                <hr
+                                                    v-if="
+                                                        index <
+                                                        clientDetails
+                                                            .changelog_entries
+                                                            .length -
+                                                            1
+                                                    "
+                                                    class="bg-base-content/10"
+                                                />
+                                            </li>
+                                        </ul>
+                                    </div>
+
+                                    <div
+                                        v-else
+                                        class="flex flex-col items-center justify-center text-center p-8 bg-base-100/30 border border-dashed border-base-content/10 rounded-lg opacity-0 animate-fade-in"
+                                    >
+                                        <Info
+                                            class="w-8 h-8 text-base-content/50 mb-2"
+                                        />
+                                        <p
+                                            class="text-sm font-medium text-base-content/70"
+                                        >
+                                            {{
+                                                t("client.details.no_changelog")
+                                            }}
+                                        </p>
+                                        <p
+                                            class="text-xs text-base-content/50 mt-1"
+                                        >
+                                            {{
+                                                t(
+                                                    "client.details.no_changelog_desc"
+                                                )
+                                            }}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div
+                            v-else-if="activeTab === 'screenshots'"
+                            key="screenshots"
+                            class="tab-pane"
+                        >
+                            <div
+                                v-if="
+                                    clientDetails.screenshot_urls &&
+                                    clientDetails.screenshot_urls.length > 0
+                                "
+                                class="screenshots-section"
+                            >
+                                <div
+                                    class="grid grid-cols-1 sm:grid-cols-2 gap-2"
+                                >
+                                    <div
+                                        v-for="(
+                                            screenshot, index
+                                        ) in clientDetails.screenshot_urls"
+                                        :key="index"
+                                        class="screenshot-container group"
+                                    >
+                                        <div
+                                            class="relative overflow-hidden rounded border border-base-content/10 cursor-pointer"
+                                            @click.stop="
+                                                handleScreenshotClick(
+                                                    $event,
+                                                    index
+                                                )
+                                            "
+                                        >
+                                            <img
+                                                :src="screenshot"
+                                                :alt="`${client.name} screenshot ${index + 1}`"
+                                                class="w-full h-36 object-cover transition-all duration-200 group-hover:scale-105"
+                                                @error="
+                                                    (
+                                                        $event.target as HTMLImageElement
+                                                    ).style.display = 'none'
+                                                "
+                                            />
+                                            <div
+                                                class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-200 flex items-center justify-center pointer-events-none"
+                                            >
+                                                <ZoomIn
+                                                    class="w-6 h-6 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+                                                />
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                v-else
+                                class="text-center py-8 text-base-content/60"
+                            >
+                                <p>{{ t("client.details.no_screenshots") }}</p>
+                            </div>
+                        </div>
+
+                        <div
+                            v-else-if="activeTab === 'comments'"
+                            key="comments"
+                        >
+                            <ClientComments
+                                :clientId="client.id"
+                                :commentsCount="clientDetails.comments_count"
+                                @update:comments-count="
+                                    emit('update:client-details', {
+                                        ...clientDetails,
+                                        comments_count: $event,
+                                    })
+                                "
+                                @show-user-profile="
+                                    emit('show-user-profile', $event)
+                                "
+                            />
+                        </div>
+                    </transition>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.client-details {
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+    display: none;
+    scrollbar-gutter: stable;
+}
+
+.timeline {
+    scrollbar-gutter: stable;
+    scrollbar-width: thin;
+}
+
+.timeline::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+.timeline::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.timeline::-webkit-scrollbar-thumb {
+    background-color: rgba(100, 100, 100, 0.35);
+    border-radius: 999px;
+    border: 3px solid transparent;
+    background-clip: content-box;
+}
+
+.tab-slide-enter-active,
+.tab-slide-leave-active {
+    transition: all 0.3s ease;
+}
+
+.tab-slide-enter-from {
+    opacity: 0;
+    transform: translateX(20px);
+}
+
+.tab-slide-leave-to {
+    opacity: 0;
+    transform: translateX(-20px);
+}
+
+.tab-slide-right-enter-active,
+.tab-slide-right-leave-active,
+.tab-slide-left-enter-active,
+.tab-slide-left-leave-active {
+    transition: all 0.3s ease;
+}
+
+.tab-slide-right-enter-from {
+    opacity: 0;
+    transform: translateX(20px);
+}
+
+.tab-slide-right-leave-to {
+    opacity: 0;
+    transform: translateX(-20px);
+}
+
+.tab-slide-left-enter-from {
+    opacity: 0;
+    transform: translateX(-20px);
+}
+
+.tab-slide-left-leave-to {
+    opacity: 0;
+    transform: translateX(20px);
+}
+
+.tab-pane {
+    min-height: 200px;
+}
+
+.tabs {
+    justify-content: center;
+}
+
+.tab {
+    transition: all 0.2s ease;
+    border-radius: 4rem;
+}
+
+.tab:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.screenshot-container {
+    position: relative;
+    overflow: hidden;
+    border-radius: 0.2rem;
+    transition: transform 0.2s ease;
+}
+
+.screenshot-container:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-fade-in {
+    animation: fade-in 0.4s ease-out forwards;
+}
+
+.scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: var(--thumb-color) var(--track-color);
+}
+</style>
diff --git a/src/components/features/clients/ClientComments.vue b/src/components/features/clients/ClientComments.vue
new file mode 100644
index 00000000..497bfcb3
--- /dev/null
+++ b/src/components/features/clients/ClientComments.vue
@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import { ref, shallowRef, onMounted, computed } from "vue";
+import { MessageSquare, Send, Trash2 } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
+import { apiDelete, apiGet, apiPost } from "../../../services/apiClient";
+import { userService } from "../../../services/userService";
+import { formatDate } from "../../../utils/utils";
+import { resolveApiAssetUrl } from "../../../utils/url";
+import type { ClientComment } from "../../../types/ui";
+
+const props = defineProps<{
+    clientId: number;
+    commentsCount?: number;
+}>();
+
+const emit = defineEmits(["update:comments-count", "show-user-profile"]);
+
+const { t } = useI18n();
+
+const comments = shallowRef<ClientComment[]>([]);
+const isLoadingComments = ref(false);
+const newCommentText = ref("");
+const isPostingComment = ref(false);
+
+const MAX_COMMENT_LENGTH = 500;
+type CurrentUser = { username: string };
+const currentUser = shallowRef<CurrentUser | null>(null);
+
+const canComment = computed(() => !!currentUser.value);
+
+const loadCurrentUser = async () => {
+    try {
+        const info = await userService.initializeUser();
+        if (info && info.user_info && info.user_info.username) {
+            currentUser.value = { username: info.user_info.username };
+        } else {
+            currentUser.value = null;
+        }
+    } catch (e) {
+        console.error("Failed to load user info", e);
+    }
+};
+
+const fetchComments = async () => {
+    if (isLoadingComments.value) return;
+    isLoadingComments.value = true;
+    try {
+        comments.value = await apiGet<ClientComment[]>(
+            `/clients/${props.clientId}/comments`
+        );
+    } catch (error) {
+        console.error("Failed to fetch comments:", error);
+    } finally {
+        isLoadingComments.value = false;
+    }
+};
+
+const postComment = async () => {
+    const trimmed = newCommentText.value.trim();
+    if (!trimmed || isPostingComment.value) return;
+
+    if (trimmed.length > MAX_COMMENT_LENGTH) {
+        newCommentText.value = trimmed.slice(0, MAX_COMMENT_LENGTH);
+        return;
+    }
+
+    isPostingComment.value = true;
+    try {
+        const newComment = await apiPost<ClientComment>(
+            `/clients/${props.clientId}/comments`,
+            { content: trimmed }
+        );
+
+        comments.value.unshift(newComment);
+        newCommentText.value = "";
+        emit("update:comments-count", (props.commentsCount || 0) + 1);
+    } catch (error) {
+        console.error("Failed to post comment:", error);
+    } finally {
+        isPostingComment.value = false;
+    }
+};
+
+const deleteComment = async (commentId: number) => {
+    try {
+        await apiDelete(`/clients/${props.clientId}/comments/${commentId}`);
+
+        comments.value = comments.value.filter((c) => c.id !== commentId);
+        emit(
+            "update:comments-count",
+            Math.max(0, (props.commentsCount || 0) - 1)
+        );
+    } catch (error) {
+        console.error("Failed to delete comment:", error);
+    }
+};
+
+const openProfileFromComment = (comment: ClientComment) => {
+    emit("show-user-profile", comment.user);
+};
+
+onMounted(async () => {
+    await loadCurrentUser();
+    await fetchComments();
+});
+</script>
+
+<template>
+    <div class="flex flex-col">
+        <div class="flex gap-2">
+            <input
+                v-model="newCommentText"
+                type="text"
+                :placeholder="t('client.comments.placeholder')"
+                class="input input-bordered w-full input-sm"
+                :maxlength="MAX_COMMENT_LENGTH"
+                @keyup.enter="postComment"
+                :disabled="isPostingComment || !canComment"
+            />
+            <button
+                class="btn btn-primary btn-sm btn-square"
+                @click="postComment"
+                :disabled="
+                    isPostingComment || !newCommentText.trim() || !canComment
+                "
+            >
+                <span
+                    v-if="isPostingComment"
+                    class="loading loading-spinner loading-xs"
+                ></span>
+                <Send v-else class="w-4 h-4" />
+            </button>
+        </div>
+
+        <div class="flex justify-between text-[10px] mt-1 opacity-50">
+            <span v-if="!canComment">{{ t("login") }}</span>
+            <span
+                >{{ Math.min(newCommentText.length, MAX_COMMENT_LENGTH) }}/{{
+                    MAX_COMMENT_LENGTH
+                }}</span
+            >
+        </div>
+
+        <div v-if="isLoadingComments" class="flex justify-center py-8">
+            <span
+                class="loading loading-spinner loading-md text-primary"
+            ></span>
+        </div>
+        <div
+            v-else-if="comments.length === 0"
+            class="text-center py-8 text-base-content/50"
+        >
+            <MessageSquare class="w-8 h-8 mx-auto mb-2 opacity-50" />
+            <p>{{ t("client.comments.empty") }}</p>
+        </div>
+        <div
+            v-else
+            class="space-y-4 max-h-100 overflow-y-auto pr-2 custom-scrollbar"
+        >
+            <div
+                v-for="comment in comments"
+                :key="comment.id"
+                class="chat chat-start"
+            >
+                <div class="chat-image avatar">
+                    <div
+                        class="w-8 rounded-full cursor-pointer select-none"
+                        role="button"
+                        tabindex="0"
+                        @click.stop="openProfileFromComment(comment)"
+                        @keydown.enter.stop.prevent="
+                            openProfileFromComment(comment)
+                        "
+                        @keydown.space.stop.prevent="
+                            openProfileFromComment(comment)
+                        "
+                    >
+                        <img
+                            v-if="comment.author_avatar"
+                            :src="resolveApiAssetUrl(comment.author_avatar)"
+                            :alt="comment.author_username"
+                        />
+                        <div
+                            v-else
+                            class="bg-base-200 text-base-content/70 w-8 h-8 flex items-center justify-center text-xs font-semibold"
+                        >
+                            {{
+                                (
+                                    comment.author_username?.[0] || "?"
+                                ).toUpperCase()
+                            }}
+                        </div>
+                    </div>
+                </div>
+                <div
+                    class="chat-header text-xs opacity-50 mb-1 flex items-center gap-2"
+                >
+                    <span
+                        class="cursor-pointer hover:underline"
+                        @click.stop="openProfileFromComment(comment)"
+                    >
+                        {{ comment.author_username }}
+                    </span>
+                    <time class="text-[10px]">{{
+                        formatDate(comment.created_at)
+                    }}</time>
+                    <button
+                        v-if="
+                            currentUser &&
+                            currentUser.username === comment.author_username
+                        "
+                        class="btn btn-ghost btn-xs btn-circle text-error"
+                        @click="deleteComment(comment.id)"
+                        :title="t('client.comments.delete')"
+                    >
+                        <Trash2 class="w-3 h-3" />
+                    </button>
+                </div>
+                <div
+                    class="chat-bubble chat-bubble-secondary text-sm wrap-break-word group relative"
+                >
+                    {{ comment.content }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar {
+    width: 6px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.2);
+}
+</style>
diff --git a/src/components/features/clients/ClientInfo.vue b/src/components/features/clients/ClientInfo.vue
index a3aa51a9..356febd5 100644
--- a/src/components/features/clients/ClientInfo.vue
+++ b/src/components/features/clients/ClientInfo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { CircleDot, Download, HardDrive, Play } from 'lucide-vue-next';
-import { Client } from '../../../types/ui';
+import { computed } from "vue";
+import { CircleDot, Download, HardDrive, Play } from "lucide-vue-next";
+import { Client } from "../../../types/ui";
 
 const props = defineProps<{
     client: Client;
@@ -31,9 +31,16 @@ const formattedLaunches = computed(() => {
     <div class="client-stats stats-compact">
         <div class="stats">
             <CircleDot class="w-3 h-3 opacity-60" />
-            <span class="text-xs font-semibold opacity-70">{{ client.version }}</span>
-            <HardDrive v-if="client.meta.is_custom" class="ml-1 w-3 h-3 opacity-60" />
-            <span v-if="client.meta.is_custom" class="text-xs text-success w-14">CUSTOM</span>
+            <span class="text-xs font-semibold opacity-70">{{
+                client.version
+            }}</span>
+            <HardDrive
+                v-if="client.meta.is_custom"
+                class="ml-1 w-3 h-3 opacity-60"
+            />
+            <span v-if="client.meta.is_custom" class="text-xs text-success w-14"
+                >CUSTOM</span
+            >
         </div>
         <transition name="fade">
             <div v-if="expanded" class="expanded-stats stats">
@@ -41,14 +48,18 @@ const formattedLaunches = computed(() => {
 
                 <div class="stats">
                     <Download class="w-3 h-3 opacity-60" />
-                    <span class="text-xs font-medium">{{ formattedDownloads }}</span>
+                    <span class="text-xs font-medium">{{
+                        formattedDownloads
+                    }}</span>
                 </div>
 
                 <span class="stat-separator">•</span>
 
                 <div class="stats">
                     <Play class="w-3 h-3 opacity-60" />
-                    <span class="text-xs font-medium">{{ formattedLaunches }}</span>
+                    <span class="text-xs font-medium">{{
+                        formattedLaunches
+                    }}</span>
                 </div>
             </div>
         </transition>
diff --git a/src/components/features/clients/ClientRating.vue b/src/components/features/clients/ClientRating.vue
new file mode 100644
index 00000000..0b56c226
--- /dev/null
+++ b/src/components/features/clients/ClientRating.vue
@@ -0,0 +1,274 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { apiDelete, apiGet, apiPost } from "../../../services/apiClient";
+import { ensureApiUrl } from "../../../config";
+import type { ClientDetails } from "../../../types/ui";
+
+const props = defineProps<{
+    clientId: number;
+    ratingAvg: number | null;
+    ratingCount: number;
+    myRating: number | null;
+    isAuthenticated: boolean;
+}>();
+
+const emit = defineEmits([
+    "update:rating-avg",
+    "update:rating-count",
+    "update:my-rating",
+]);
+
+const { t } = useI18n();
+
+const isSubmittingRating = ref(false);
+const isLoadingMyRating = ref(false);
+
+const ratingRounded = computed(() => {
+    if (props.ratingAvg === null || props.ratingAvg === 0) return null;
+    return Math.round(props.ratingAvg * 2) / 2;
+});
+
+const getRatingEndpoint = () => {
+    return `/clients/${props.clientId}/rating`;
+};
+
+const fetchMyRating = async () => {
+    if (!props.isAuthenticated) return;
+    if (isLoadingMyRating.value) return;
+    if (props.myRating !== null) return;
+
+    isLoadingMyRating.value = true;
+    try {
+        await ensureApiUrl();
+        const data = await apiGet<{ my_rating?: number | null }>(
+            getRatingEndpoint()
+        );
+        if (typeof data?.my_rating === "number") {
+            emit("update:my-rating", data.my_rating);
+        }
+    } catch (error) {
+        console.warn("Failed to fetch my rating:", error);
+    } finally {
+        isLoadingMyRating.value = false;
+    }
+};
+
+const handleRatingClick = async (value: number) => {
+    if (isSubmittingRating.value) return;
+    if (!props.isAuthenticated) return;
+
+    if (props.myRating === value) {
+        await removeRating();
+        return;
+    }
+
+    await submitRating(value);
+};
+
+const handleRatingChange = async (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    const value = parseFloat(target.getAttribute("data-value") || "0");
+
+    if (value === 0) {
+        await removeRating();
+    }
+};
+
+const submitRating = async (value: number) => {
+    if (isSubmittingRating.value) return;
+    if (!props.isAuthenticated) return;
+
+    const previousRating = props.myRating;
+    emit("update:my-rating", value);
+
+    isSubmittingRating.value = true;
+    try {
+        await ensureApiUrl();
+        const data = await apiPost<{
+            rating_avg: number | null;
+            rating_count: number;
+            my_rating?: number | null;
+        }>(getRatingEndpoint(), { rating: value });
+
+        if (typeof data?.my_rating === "number") {
+            emit("update:my-rating", data.my_rating);
+        } else {
+            emit("update:my-rating", value);
+        }
+
+        if (typeof data?.rating_avg === "number" || data?.rating_avg === null) {
+            emit("update:rating-avg", data.rating_avg);
+        }
+        if (typeof data?.rating_count === "number") {
+            emit("update:rating-count", data.rating_count);
+        }
+        try {
+            const updated = await apiGet<ClientDetails>(
+                `/clients/${props.clientId}/detailed`
+            );
+            if (
+                typeof updated?.rating_avg === "number" ||
+                updated?.rating_avg === null
+            ) {
+                emit("update:rating-avg", updated.rating_avg);
+            }
+            if (typeof updated?.rating_count === "number") {
+                emit("update:rating-count", updated.rating_count);
+            }
+        } catch (e) {
+            console.warn(
+                "Failed to refetch client details after rating submit:",
+                e
+            );
+        }
+    } catch (error) {
+        console.error("Failed to submit rating:", error);
+        emit("update:my-rating", previousRating);
+    } finally {
+        isSubmittingRating.value = false;
+    }
+};
+
+const removeRating = async () => {
+    if (isSubmittingRating.value) return;
+    if (!props.isAuthenticated) return;
+    if (props.myRating === null) return;
+
+    const previousRating = props.myRating;
+    emit("update:my-rating", null);
+
+    isSubmittingRating.value = true;
+    try {
+        await apiDelete(getRatingEndpoint());
+
+        try {
+            const updated = await apiGet<ClientDetails>(
+                `/clients/${props.clientId}/detailed`
+            );
+            emit("update:rating-avg", updated.rating_avg);
+            emit("update:rating-count", updated.rating_count);
+        } catch (e) {
+            console.warn(
+                "Failed to refetch client details after rating delete:",
+                e
+            );
+        }
+    } catch (error) {
+        console.error("Failed to remove rating:", error);
+        emit("update:my-rating", previousRating);
+    } finally {
+        isSubmittingRating.value = false;
+    }
+};
+
+watch(
+    () => props.isAuthenticated,
+    (newVal) => {
+        if (newVal) fetchMyRating();
+    }
+);
+
+onMounted(() => {
+    if (props.isAuthenticated) fetchMyRating();
+});
+</script>
+
+<template>
+    <div class="stat">
+        <div
+            class="stat-title text-[10px] font-bold uppercase tracking-widest opacity-60"
+        >
+            {{ t("client.details.rating") }}
+        </div>
+        <div class="stat-value text-base flex flex-col gap-2">
+            <div class="flex items-center gap-3">
+                <div
+                    :key="`avg-display-${ratingRounded}`"
+                    class="rating rating-half rating-sm pointer-events-none opacity-80"
+                >
+                    <input
+                        type="radio"
+                        :name="`rating-avg-display-${clientId}`"
+                        class="rating-hidden"
+                        :checked="ratingRounded === null"
+                        disabled
+                    />
+                    <template v-for="i in 5" :key="i">
+                        <input
+                            type="radio"
+                            :name="`rating-avg-display-${clientId}`"
+                            class="mask mask-star-2 mask-half-1 bg-warning"
+                            :checked="ratingRounded === i - 0.5"
+                            disabled
+                        />
+                        <input
+                            type="radio"
+                            :name="`rating-avg-display-${clientId}`"
+                            class="mask mask-star-2 mask-half-2 bg-warning"
+                            :checked="ratingRounded === i"
+                            disabled
+                        />
+                    </template>
+                </div>
+                <div
+                    class="text-xs font-semibold text-base-content/70 whitespace-nowrap"
+                >
+                    <span v-if="ratingAvg !== null"
+                        >{{ ratingAvg.toFixed(1) }}/5</span
+                    >
+                    <span v-else>—</span>
+                    <span class="text-base-content/50">
+                        ({{ ratingCount }})</span
+                    >
+                </div>
+            </div>
+
+            <div v-if="isAuthenticated" class="flex items-center gap-3">
+                <span
+                    class="text-[10px] font-bold uppercase tracking-widest opacity-40"
+                >
+                    {{ t("client.details.your_rating") }}:
+                </span>
+                <div
+                    :key="`my-rating-${myRating}-${clientId}`"
+                    class="rating rating-half rating-sm"
+                >
+                    <input
+                        type="radio"
+                        :name="`my-rating-input-${clientId}`"
+                        class="rating-hidden"
+                        :checked="myRating === null"
+                        data-value="0"
+                        @change="handleRatingChange"
+                    />
+                    <template v-for="i in 5" :key="i">
+                        <input
+                            type="radio"
+                            :name="`my-rating-input-${clientId}`"
+                            class="mask mask-star-2 mask-half-1 bg-warning cursor-pointer"
+                            :checked="myRating === i - 0.5"
+                            :disabled="isSubmittingRating"
+                            :data-value="i - 0.5"
+                            @click="handleRatingClick(i - 0.5)"
+                            @change="() => {}"
+                        />
+                        <input
+                            type="radio"
+                            :name="`my-rating-input-${clientId}`"
+                            class="mask mask-star-2 mask-half-2 bg-warning cursor-pointer"
+                            :checked="myRating === i"
+                            :disabled="isSubmittingRating"
+                            :data-value="i"
+                            @click="handleRatingClick(i)"
+                            @change="() => {}"
+                        />
+                    </template>
+                </div>
+            </div>
+            <div v-else class="text-xs font-medium text-base-content/60 italic">
+                {{ t("client.details.login_to_rate") }}
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/components/features/clients/ScreenshotViewer.vue b/src/components/features/clients/ScreenshotViewer.vue
new file mode 100644
index 00000000..d12e83b8
--- /dev/null
+++ b/src/components/features/clients/ScreenshotViewer.vue
@@ -0,0 +1,615 @@
+<script setup lang="ts">
+import { ref, shallowRef, onMounted, onBeforeUnmount } from "vue";
+import {
+    ChevronLeft,
+    ChevronRight,
+    RefreshCw,
+    X,
+    ZoomIn,
+    ZoomOut,
+} from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
+
+const props = defineProps<{
+    isOpen: boolean;
+    screenshotUrls: string[];
+    initialIndex?: number;
+    clientName: string;
+}>();
+
+const emit = defineEmits(["close"]);
+
+const { t } = useI18n();
+
+const currentScreenshotIndex = ref(props.initialIndex || 0);
+const isImageLoading = ref(false);
+const imageTransitionDirection = ref<"next" | "prev">("next");
+const imageRef = shallowRef<HTMLImageElement | null>(null);
+const imageContainerRef = shallowRef<HTMLElement | null>(null);
+
+const zoomScale = ref(1);
+const zoomPosition = ref({ x: 0, y: 0 });
+const isZoomed = ref(false);
+const isDragging = ref(false);
+const dragStart = ref({ x: 0, y: 0 });
+const hasDragged = ref(false);
+const maxZoom = 5;
+const minZoom = 1;
+const zoomStep = 0.5;
+
+const resetZoom = () => {
+    zoomScale.value = 1;
+    zoomPosition.value = { x: 0, y: 0 };
+    isZoomed.value = false;
+    isDragging.value = false;
+};
+
+const handleImageLoad = () => {
+    isImageLoading.value = false;
+};
+
+const handleImageError = () => {
+    isImageLoading.value = false;
+    emit("close");
+};
+
+const nextScreenshot = () => {
+    if (props.screenshotUrls.length <= 1) return;
+    imageTransitionDirection.value = "next";
+    isImageLoading.value = true;
+    currentScreenshotIndex.value =
+        (currentScreenshotIndex.value + 1) % props.screenshotUrls.length;
+    resetZoom();
+};
+
+const prevScreenshot = () => {
+    if (props.screenshotUrls.length <= 1) return;
+    imageTransitionDirection.value = "prev";
+    isImageLoading.value = true;
+    currentScreenshotIndex.value =
+        (currentScreenshotIndex.value - 1 + props.screenshotUrls.length) %
+        props.screenshotUrls.length;
+    resetZoom();
+};
+
+const zoomIn = (event?: MouseEvent) => {
+    if (zoomScale.value >= maxZoom) return;
+
+    if (event && imageRef.value) {
+        zoomToPoint(event);
+    } else {
+        const newScale = Math.min(zoomScale.value + zoomStep, maxZoom);
+        zoomScale.value = newScale;
+        isZoomed.value = newScale > 1;
+
+        if (isZoomed.value) {
+            setTimeout(() => constrainPosition(), 0);
+        }
+    }
+};
+
+const zoomOut = () => {
+    const newScale = Math.max(zoomScale.value - zoomStep, minZoom);
+
+    if (newScale <= 1) {
+        resetZoom();
+    } else {
+        zoomScale.value = newScale;
+        setTimeout(() => constrainPosition(), 0);
+    }
+};
+
+const zoomToPoint = (event: MouseEvent) => {
+    if (!imageRef.value || !imageContainerRef.value) return;
+
+    const rect = imageContainerRef.value.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+
+    const clickX = event.clientX - centerX;
+    const clickY = event.clientY - centerY;
+
+    const newScale = Math.min(zoomScale.value + zoomStep, maxZoom);
+
+    if (newScale > 1) {
+        const scaleFactor = newScale / zoomScale.value;
+
+        zoomPosition.value = {
+            x: (zoomPosition.value.x - clickX) * scaleFactor + clickX,
+            y: (zoomPosition.value.y - clickY) * scaleFactor + clickY,
+        };
+
+        zoomScale.value = newScale;
+        isZoomed.value = true;
+
+        setTimeout(() => constrainPosition(), 0);
+    }
+};
+
+const handleWheel = (event: WheelEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (event.deltaY < 0) {
+        zoomIn(event);
+    } else {
+        zoomOut();
+    }
+};
+
+const startDrag = (event: MouseEvent) => {
+    if (!isZoomed.value) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    isDragging.value = true;
+    hasDragged.value = false;
+    dragStart.value = {
+        x: event.clientX - zoomPosition.value.x,
+        y: event.clientY - zoomPosition.value.y,
+    };
+
+    document.addEventListener("mousemove", handleDrag, { passive: false });
+    document.addEventListener("mouseup", stopDrag);
+
+    if (imageRef.value) {
+        imageRef.value.style.pointerEvents = "none";
+    }
+};
+
+const handleDrag = (event: MouseEvent) => {
+    if (!isDragging.value) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    hasDragged.value = true;
+
+    zoomPosition.value = {
+        x: event.clientX - dragStart.value.x,
+        y: event.clientY - dragStart.value.y,
+    };
+};
+
+const stopDrag = (event?: MouseEvent) => {
+    if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    isDragging.value = false;
+    document.removeEventListener("mousemove", handleDrag);
+    document.removeEventListener("mouseup", stopDrag);
+
+    if (imageRef.value) {
+        imageRef.value.style.pointerEvents = "";
+    }
+
+    constrainPosition();
+
+    setTimeout(() => {
+        hasDragged.value = false;
+    }, 100);
+};
+
+const constrainPosition = () => {
+    if (!imageRef.value || !imageContainerRef.value || zoomScale.value <= 1) {
+        zoomPosition.value = { x: 0, y: 0 };
+        return;
+    }
+
+    const containerRect = imageContainerRef.value.getBoundingClientRect();
+    const imageRect = imageRef.value.getBoundingClientRect();
+
+    const scaledWidth = imageRect.width * zoomScale.value;
+    const scaledHeight = imageRect.height * zoomScale.value;
+
+    const maxX = Math.max(0, (scaledWidth - containerRect.width) / 2);
+    const maxY = Math.max(0, (scaledHeight - containerRect.height) / 2);
+
+    const constrainedPosition = {
+        x: Math.min(Math.max(zoomPosition.value.x, -maxX), maxX),
+        y: Math.min(Math.max(zoomPosition.value.y, -maxY), maxY),
+    };
+
+    if (
+        constrainedPosition.x !== zoomPosition.value.x ||
+        constrainedPosition.y !== zoomPosition.value.y
+    ) {
+        zoomPosition.value = constrainedPosition;
+    }
+};
+
+const handleImageClick = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (hasDragged.value) return;
+
+    if (isZoomed.value) {
+        resetZoom();
+    } else {
+        zoomToPoint(event);
+    }
+};
+
+const handleViewerBackgroundClick = (event: MouseEvent) => {
+    if (isDragging.value || hasDragged.value) return;
+
+    const target = event.target as HTMLElement;
+    if (target === event.currentTarget) {
+        emit("close");
+    }
+};
+
+const handleScreenshotKeydown = (event: KeyboardEvent) => {
+    switch (event.key) {
+        case "Escape":
+            if (isZoomed.value) {
+                resetZoom();
+            } else {
+                emit("close");
+            }
+            break;
+        case "ArrowLeft":
+            if (!isZoomed.value) {
+                prevScreenshot();
+            }
+            break;
+        case "ArrowRight":
+            if (!isZoomed.value) {
+                nextScreenshot();
+            }
+            break;
+        case "+":
+        case "=":
+            zoomIn();
+            break;
+        case "-":
+            zoomOut();
+            break;
+        case "0":
+            resetZoom();
+            break;
+    }
+};
+
+onMounted(() => {
+    document.addEventListener("keydown", handleScreenshotKeydown);
+    document.body.style.overflow = "hidden";
+});
+
+onBeforeUnmount(() => {
+    document.removeEventListener("keydown", handleScreenshotKeydown);
+    document.body.style.overflow = "";
+});
+</script>
+
+<template>
+    <teleport to="body">
+        <transition name="screenshot-viewer" appear>
+            <div
+                v-if="isOpen"
+                class="fixed inset-0 z-9999 bg-black/95 backdrop-blur-sm flex items-center justify-center"
+                @click="handleViewerBackgroundClick"
+            >
+                <button
+                    @click="emit('close')"
+                    class="absolute top-4 right-4 z-10 btn btn-circle btn-ghost text-white hover:bg-white/20 transition-all duration-200"
+                >
+                    <X class="w-6 h-6" />
+                </button>
+
+                <button
+                    v-if="screenshotUrls.length > 1 && !isZoomed"
+                    @click.stop="prevScreenshot"
+                    class="absolute left-4 top-1/2 transform -translate-y-1/2 z-10 btn btn-circle btn-ghost text-white hover:bg-white/20 transition-all duration-200 hover:scale-110"
+                    :disabled="isImageLoading"
+                >
+                    <ChevronLeft class="w-6 h-6" />
+                </button>
+
+                <button
+                    v-if="screenshotUrls.length > 1 && !isZoomed"
+                    @click.stop="nextScreenshot"
+                    class="absolute right-4 top-1/2 transform -translate-y-1/2 z-10 btn btn-circle btn-ghost text-white hover:bg-white/20 transition-all duration-200 hover:scale-110"
+                    :disabled="isImageLoading"
+                >
+                    <ChevronRight class="w-6 h-6" />
+                </button>
+
+                <div class="absolute top-4 left-4 z-10 flex flex-col gap-2">
+                    <button
+                        @click.stop="zoomIn()"
+                        class="btn btn-circle btn-ghost text-white hover:bg-white/20 transition-all duration-200"
+                        :disabled="zoomScale >= maxZoom"
+                    >
+                        <ZoomIn class="w-5 h-5" />
+                    </button>
+                    <button
+                        @click.stop="zoomOut"
+                        class="btn btn-circle btn-ghost text-white hover:bg-white/20 transition-all duration-200"
+                        :disabled="zoomScale <= minZoom"
+                    >
+                        <ZoomOut class="w-5 h-5" />
+                    </button>
+                    <button
+                        @click.stop="resetZoom"
+                        class="btn btn-circle btn-ghost text-white hover:bg-white/20 transition-all duration-200"
+                        :disabled="!isZoomed"
+                        :class="{ 'cursor-not-allowed opacity-50': !isZoomed }"
+                    >
+                        <RefreshCw class="w-5 h-5" />
+                    </button>
+                </div>
+
+                <transition name="fade" appear>
+                    <div
+                        v-if="isZoomed"
+                        class="absolute top-4 left-1/2 transform -translate-x-1/2 z-10 bg-black/50 text-white px-3 py-1 rounded-full text-sm backdrop-blur-sm border border-white/10"
+                    >
+                        {{
+                            t("client.details.screenshot_viewer.zoom_percent", {
+                                percent: Math.round(zoomScale * 100),
+                            })
+                        }}
+                    </div>
+                </transition>
+
+                <div
+                    class="relative max-w-[95vw] max-h-[95vh] flex items-center justify-center p-12"
+                    @wheel="handleWheel"
+                    @click="handleViewerBackgroundClick"
+                >
+                    <div
+                        class="relative w-full h-full flex items-center justify-center"
+                    >
+                        <transition name="fade">
+                            <div
+                                v-if="isImageLoading"
+                                class="absolute inset-0 flex items-center justify-center z-20"
+                            >
+                                <div class="skeleton-container">
+                                    <div
+                                        class="skeleton w-full h-full rounded-lg bg-base-200/20"
+                                    ></div>
+                                    <div
+                                        class="absolute inset-0 flex items-center justify-center"
+                                    >
+                                        <div
+                                            class="loading loading-spinner loading-lg text-white"
+                                        ></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </transition>
+
+                        <div
+                            ref="imageContainerRef"
+                            class="relative w-full h-full flex items-center justify-center overflow-hidden"
+                            @click="handleViewerBackgroundClick"
+                        >
+                            <transition
+                                :name="`image-slide-${imageTransitionDirection}`"
+                                mode="out-in"
+                                appear
+                            >
+                                <img
+                                    ref="imageRef"
+                                    :key="currentScreenshotIndex"
+                                    :src="
+                                        screenshotUrls[currentScreenshotIndex]
+                                    "
+                                    :alt="`${clientName} screenshot ${currentScreenshotIndex + 1}`"
+                                    class="max-w-full max-h-full object-contain rounded-lg shadow-2xl select-none image-transition"
+                                    :class="{
+                                        'opacity-0': isImageLoading,
+                                        'opacity-100': !isImageLoading,
+                                        'cursor-zoom-in': !isZoomed,
+                                        'cursor-grab': isZoomed && !isDragging,
+                                        'cursor-grabbing': isDragging,
+                                        'smooth-transition': !isDragging,
+                                    }"
+                                    :style="{
+                                        transform: `scale(${zoomScale}) translate(${zoomPosition.x / zoomScale}px, ${zoomPosition.y / zoomScale}px)`,
+                                        transformOrigin: 'center center',
+                                    }"
+                                    @click="handleImageClick"
+                                    @mousedown="startDrag"
+                                    @dragstart.prevent
+                                    @contextmenu.prevent
+                                    @load="handleImageLoad"
+                                    @error="handleImageError"
+                                />
+                            </transition>
+                        </div>
+                    </div>
+                </div>
+
+                <transition name="fade-slide-up" appear>
+                    <div
+                        v-if="screenshotUrls.length > 1"
+                        class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black/50 text-white px-3 py-1 rounded-full text-sm border border-white/10 backdrop-blur-md"
+                    >
+                        {{
+                            t(
+                                "client.details.screenshot_viewer.image_counter",
+                                {
+                                    current: currentScreenshotIndex + 1,
+                                    total: screenshotUrls.length,
+                                }
+                            )
+                        }}
+                    </div>
+                </transition>
+
+                <transition name="fade-slide-up" appear>
+                    <div
+                        class="absolute bottom-4 right-4 text-white/70 text-xs space-y-1 text-right bg-black/40 p-2 rounded border border-white/10 backdrop-blur-md"
+                    >
+                        <div>
+                            {{
+                                isZoomed
+                                    ? t(
+                                          "client.details.screenshot_viewer.controls.esc_reset"
+                                      )
+                                    : t(
+                                          "client.details.screenshot_viewer.controls.esc_close"
+                                      )
+                            }}
+                        </div>
+                        <div v-if="screenshotUrls.length > 1 && !isZoomed">
+                            {{
+                                t(
+                                    "client.details.screenshot_viewer.controls.navigate"
+                                )
+                            }}
+                        </div>
+                        <div>
+                            {{
+                                t(
+                                    "client.details.screenshot_viewer.controls.click_zoom"
+                                )
+                            }}
+                        </div>
+                        <div v-if="isZoomed">
+                            {{
+                                t(
+                                    "client.details.screenshot_viewer.controls.drag_pan"
+                                )
+                            }}
+                        </div>
+                    </div>
+                </transition>
+            </div>
+        </transition>
+    </teleport>
+</template>
+
+<style scoped>
+.screenshot-viewer-enter-active,
+.screenshot-viewer-leave-active {
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.screenshot-viewer-enter-from,
+.screenshot-viewer-leave-to {
+    opacity: 0;
+    backdrop-filter: blur(0px);
+    transform: scale(0.95);
+}
+
+.screenshot-viewer-enter-to,
+.screenshot-viewer-leave-from {
+    opacity: 1;
+    backdrop-filter: blur(4px);
+    transform: scale(1);
+}
+
+.image-slide-next-enter-active {
+    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.image-slide-next-leave-active {
+    transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+
+.image-slide-prev-enter-active {
+    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.image-slide-prev-leave-active {
+    transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+
+.image-slide-next-enter-from {
+    opacity: 0;
+    transform: translateX(150px) scale(0.9) rotateY(15deg);
+    filter: blur(2px);
+}
+
+.image-slide-next-leave-to {
+    opacity: 0;
+    transform: translateX(-150px) scale(0.9) rotateY(-15deg);
+    filter: blur(2px);
+}
+
+.image-slide-prev-enter-from {
+    opacity: 0;
+    transform: translateX(-150px) scale(0.9) rotateY(-15deg);
+    filter: blur(2px);
+}
+
+.image-slide-prev-leave-to {
+    opacity: 0;
+    transform: translateX(150px) scale(0.9) rotateY(15deg);
+    filter: blur(2px);
+}
+
+.image-slide-next-enter-to,
+.image-slide-next-leave-from,
+.image-slide-prev-enter-to,
+.image-slide-prev-leave-from {
+    opacity: 1;
+    transform: translateX(0) scale(1) rotateY(0deg);
+    filter: blur(0px);
+}
+
+.skeleton-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    max-width: 800px;
+    max-height: 600px;
+    min-width: 400px;
+    min-height: 300px;
+}
+
+.image-transition {
+    transition: opacity 0.3s ease;
+}
+
+.fade-slide-up-enter-active {
+    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0.2s;
+}
+
+.fade-slide-up-leave-active {
+    transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}
+
+.fade-slide-up-enter-from {
+    opacity: 0;
+    transform: translateY(20px);
+}
+
+.fade-slide-up-leave-to {
+    opacity: 0;
+    transform: translateY(10px);
+}
+
+.fade-slide-up-enter-to,
+.fade-slide-up-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.smooth-transition {
+    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+img.cursor-grabbing {
+    transition: none;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>
diff --git a/src/components/features/download/DownloadProgress.vue b/src/components/features/download/DownloadProgress.vue
index d680e1ff..64ae6545 100644
--- a/src/components/features/download/DownloadProgress.vue
+++ b/src/components/features/download/DownloadProgress.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
-import { listen } from '@tauri-apps/api/event';
-import { useI18n } from 'vue-i18n';
-import { useDownloadSpeedMonitor } from '../../../composables/useDownloadSpeedMonitor';
+import { ref, onMounted, onUnmounted } from "vue";
+import { listen } from "@tauri-apps/api/event";
+import { useI18n } from "vue-i18n";
+import { useDownloadSpeedMonitor } from "../../../composables/useDownloadSpeedMonitor";
 
 const { t } = useI18n();
 const downloadMonitor = useDownloadSpeedMonitor();
@@ -19,17 +19,17 @@ interface ProgressEvent {
 
 const isVisible = ref(false);
 const percentage = ref(0);
-const currentFile = ref('');
-const currentAction = ref('Downloading');
+const currentFile = ref("");
+const currentAction = ref("Downloading");
 const listeners = ref<any[]>([]);
 const activeDownloads = ref<Set<string>>(new Set());
 
 const isEssentialFile = (filename: string): boolean => {
-    return filename.endsWith('.zip');
+    return filename.endsWith(".zip");
 };
 
 const isClientFile = (filename: string): boolean => {
-    return filename.endsWith('.jar');
+    return filename.endsWith(".jar");
 };
 
 const shouldShowProgress = (filename: string): boolean => {
@@ -38,14 +38,14 @@ const shouldShowProgress = (filename: string): boolean => {
 
 onMounted(async () => {
     listeners.value.push(
-        await listen('download-start', (event: any) => {
+        await listen("download-start", (event: any) => {
             const filename = event.payload as string;
             downloadMonitor.startMonitoring();
 
             if (shouldShowProgress(filename)) {
                 activeDownloads.value.add(filename);
                 currentFile.value = filename;
-                currentAction.value = t('installation.downloading');
+                currentAction.value = t("installation.downloading");
                 percentage.value = 0;
                 isVisible.value = true;
             }
@@ -53,7 +53,7 @@ onMounted(async () => {
     );
 
     listeners.value.push(
-        await listen('download-progress', (event: any) => {
+        await listen("download-progress", (event: any) => {
             const data = event.payload as ProgressEvent;
 
             if (data.downloaded !== undefined) {
@@ -65,7 +65,7 @@ onMounted(async () => {
                 activeDownloads.value.has(data.file)
             ) {
                 currentFile.value = data.file;
-                currentAction.value = t('installation.downloading');
+                currentAction.value = t("installation.downloading");
                 percentage.value = data.percentage;
                 isVisible.value = true;
             }
@@ -73,12 +73,12 @@ onMounted(async () => {
     );
 
     listeners.value.push(
-        await listen('download-complete', (event: any) => {
+        await listen("download-complete", (event: any) => {
             const filename = event.payload as string;
             downloadMonitor.stopMonitoring();
 
             if (shouldShowProgress(filename)) {
-                if (!filename.endsWith('.zip')) {
+                if (!filename.endsWith(".zip")) {
                     activeDownloads.value.delete(filename);
                     if (activeDownloads.value.size === 0) {
                         isVisible.value = false;
@@ -89,14 +89,14 @@ onMounted(async () => {
     );
 
     listeners.value.push(
-        await listen('unzip-start', (event: any) => {
+        await listen("unzip-start", (event: any) => {
             const filename = event.payload as string;
             if (
                 shouldShowProgress(filename) &&
                 activeDownloads.value.has(filename)
             ) {
                 currentFile.value = filename;
-                currentAction.value = t('installation.extracting');
+                currentAction.value = t("installation.extracting");
                 percentage.value = 0;
                 isVisible.value = true;
             }
@@ -104,21 +104,21 @@ onMounted(async () => {
     );
 
     listeners.value.push(
-        await listen('unzip-progress', (event: any) => {
+        await listen("unzip-progress", (event: any) => {
             const data = event.payload as ProgressEvent;
             if (
                 shouldShowProgress(data.file) &&
                 activeDownloads.value.has(data.file)
             ) {
                 currentFile.value = data.file;
-                currentAction.value = t('installation.extracting');
+                currentAction.value = t("installation.extracting");
                 percentage.value = data.percentage;
             }
         })
     );
 
     listeners.value.push(
-        await listen('unzip-complete', (event: any) => {
+        await listen("unzip-complete", (event: any) => {
             const filename = event.payload as string;
             if (shouldShowProgress(filename)) {
                 activeDownloads.value.delete(filename);
@@ -130,7 +130,7 @@ onMounted(async () => {
     );
 
     listeners.value.push(
-        await listen('requirements-status', (event: any) => {
+        await listen("requirements-status", (event: any) => {
             const isDownloading = event.payload as boolean;
             if (!isDownloading) {
                 activeDownloads.value.clear();
@@ -155,7 +155,10 @@ onUnmounted(() => {
                 <span>{{ percentage }}%</span>
             </div>
             <div class="progress-bar-container">
-                <div class="progress-bar" :style="{ width: `${percentage}%` }"></div>
+                <div
+                    class="progress-bar"
+                    :style="{ width: `${percentage}%` }"
+                ></div>
             </div>
         </div>
     </Transition>
diff --git a/src/components/features/friends/AvatarUploader.vue b/src/components/features/friends/AvatarUploader.vue
index 78d12ce9..42e37e0b 100644
--- a/src/components/features/friends/AvatarUploader.vue
+++ b/src/components/features/friends/AvatarUploader.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { userService } from '../../../services/userService';
-import { useToast } from '../../../services/toastService';
-import { useI18n } from 'vue-i18n';
-import { getCurrentWebview } from '@tauri-apps/api/webview';
-import { readFile } from '@tauri-apps/plugin-fs';
-import { basename } from '@tauri-apps/api/path';
-import { resolveApiAssetUrl } from '../../../utils/url';
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import { userService } from "../../../services/userService";
+import { useToast } from "../../../services/toastService";
+import { useI18n } from "vue-i18n";
+import { getCurrentWebview } from "@tauri-apps/api/webview";
+import { readFile } from "@tauri-apps/plugin-fs";
+import { basename } from "@tauri-apps/api/path";
+import { resolveApiAssetUrl } from "../../../utils/url";
 
 const props = defineProps<{ currentUrl?: string | null }>();
-const emit = defineEmits<{ (e: 'uploaded', url: string | null): void }>();
+const emit = defineEmits<{ (e: "uploaded", url: string | null): void }>();
 
 const { addToast } = useToast();
 const { t } = useI18n();
@@ -22,9 +22,9 @@ const uploading = ref(false);
 let unlisten: (() => void) | null = null;
 
 const maxSize = 5 * 1024 * 1024;
-const allowed = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+const allowed = ["image/png", "image/jpeg", "image/gif", "image/webp"];
 
-const helpText = computed(() => t('account.avatar_help'));
+const helpText = computed(() => t("account.avatar_help"));
 
 function onBrowse() {
     fileRef.value?.click();
@@ -38,25 +38,26 @@ async function onFileChange(e: Event) {
 
 async function handleFile(file: File) {
     if (!allowed.includes(file.type)) {
-        addToast(t('account.avatar_type_error'), 'error');
+        addToast(t("account.avatar_type_error"), "error");
         return;
     }
     if (file.size > maxSize) {
-        addToast(t('account.avatar_size_error'), 'error');
+        addToast(t("account.avatar_size_error"), "error");
         return;
     }
 
     uploading.value = true;
     try {
-        const { success, profile, error } = await userService.uploadAvatar(file);
-        if (!success) throw new Error(error || 'Upload failed');
+        const { success, profile, error } =
+            await userService.uploadAvatar(file);
+        if (!success) throw new Error(error || "Upload failed");
         const url = profile?.avatar_url || null;
         previewUrl.value = url;
 
-        emit('uploaded', url);
-        addToast(t('account.avatar_uploaded'), 'success');
+        emit("uploaded", url);
+        addToast(t("account.avatar_uploaded"), "success");
     } catch (err: any) {
-        addToast(err.message || t('account.avatar_upload_failed'), 'error');
+        addToast(err.message || t("account.avatar_upload_failed"), "error");
     } finally {
         uploading.value = false;
     }
@@ -64,9 +65,9 @@ async function handleFile(file: File) {
 
 onMounted(async () => {
     unlisten = await getCurrentWebview().onDragDropEvent(async (event) => {
-        if (event.payload.type === 'over') {
+        if (event.payload.type === "over") {
             hovering.value = true;
-        } else if (event.payload.type === 'drop') {
+        } else if (event.payload.type === "drop") {
             hovering.value = false;
             const paths = event.payload.paths;
             if (paths.length > 0) {
@@ -76,18 +77,18 @@ onMounted(async () => {
                     const fileName = await basename(filePath);
                     const mimeType = getMimeType(fileName);
                     if (!allowed.includes(mimeType)) {
-                        addToast(t('account.avatar_type_error'), 'error');
+                        addToast(t("account.avatar_type_error"), "error");
                         return;
                     }
                     if (data.length > maxSize) {
-                        addToast(t('account.avatar_size_error'), 'error');
+                        addToast(t("account.avatar_size_error"), "error");
                         return;
                     }
                     const file = new File([data], fileName, { type: mimeType });
                     await handleFile(file);
                 } catch (e) {
                     console.log("Failed to read dropped file:", e);
-                    addToast(t('account.avatar_upload_failed'), 'error');
+                    addToast(t("account.avatar_upload_failed"), "error");
                 }
             }
         } else {
@@ -103,37 +104,51 @@ onUnmounted(() => {
 });
 
 function getMimeType(fileName: string): string {
-    const ext = fileName.split('.').pop()?.toLowerCase();
+    const ext = fileName.split(".").pop()?.toLowerCase();
     switch (ext) {
-        case 'png':
-            return 'image/png';
-        case 'jpg':
-        case 'jpeg':
-            return 'image/jpeg';
-        case 'gif':
-            return 'image/gif';
-        case 'webp':
-            return 'image/webp';
+        case "png":
+            return "image/png";
+        case "jpg":
+        case "jpeg":
+            return "image/jpeg";
+        case "gif":
+            return "image/gif";
+        case "webp":
+            return "image/webp";
         default:
-            return '';
+            return "";
     }
 }
 </script>
 <template>
     <div class="flex items-center space-x-3">
-        <div @click="onBrowse" :class="[
-            'rounded-xl p-4 flex items-center gap-3 cursor-pointer border-2 border-dashed',
-            hovering ? 'border-primary bg-base-200' : 'border-base-300 bg-transparent'
-        ]">
-            <img v-if="resolvedPreviewUrl" :src="resolvedPreviewUrl" alt="avatar"
-                class="w-8 h-8 rounded-full object-cover" />
+        <div
+            @click="onBrowse"
+            :class="[
+                'rounded-xl p-4 flex items-center gap-3 cursor-pointer border-2 border-dashed',
+                hovering
+                    ? 'border-primary bg-base-200'
+                    : 'border-base-300 bg-transparent',
+            ]"
+        >
+            <img
+                v-if="resolvedPreviewUrl"
+                :src="resolvedPreviewUrl"
+                alt="avatar"
+                class="w-8 h-8 rounded-full object-cover"
+            />
             <div class="text-left">
-                <div class="text-sm">{{ t('account.avatar_drop') }}</div>
+                <div class="text-sm">{{ t("account.avatar_drop") }}</div>
                 <div class="text-xs opacity-70">{{ helpText }}</div>
             </div>
         </div>
 
-        <input ref="fileRef" type="file" class="hidden" accept="image/png,image/jpeg,image/gif,image/webp"
-            @change="onFileChange" />
+        <input
+            ref="fileRef"
+            type="file"
+            class="hidden"
+            accept="image/png,image/jpeg,image/gif,image/webp"
+            @change="onFileChange"
+        />
     </div>
 </template>
diff --git a/src/components/features/friends/BlockedUserCard.vue b/src/components/features/friends/BlockedUserCard.vue
index f27c7414..828fdcf6 100644
--- a/src/components/features/friends/BlockedUserCard.vue
+++ b/src/components/features/friends/BlockedUserCard.vue
@@ -3,7 +3,10 @@
         <div class="card-body p-4">
             <div class="flex items-center justify-between">
                 <div class="flex items-center gap-3">
-                    <div @click="$emit('view-profile', blockedUser.id)" class="avatar-click-area cursor-pointer">
+                    <div
+                        @click="$emit('view-profile', blockedUser.id)"
+                        class="avatar-click-area cursor-pointer"
+                    >
                         <UserAvatar :name="displayNickname" />
                     </div>
                     <div>
@@ -12,15 +15,18 @@
                             @{{ displayUsername }}
                         </p>
                         <p class="text-xs text-base-content/50">
-                            {{ $t('common.blocked') }}
+                            {{ $t("common.blocked") }}
                         </p>
                     </div>
                 </div>
 
                 <div class="flex items-center gap-2">
-                    <button @click="handleUnblockUser" class="btn btn-primary btn-sm">
+                    <button
+                        @click="handleUnblockUser"
+                        class="btn btn-primary btn-sm"
+                    >
                         <UserCheck class="w-4 h-4 mr-1" />
-                        {{ $t('userProfile.unblock_user') }}
+                        {{ $t("userProfile.unblock_user") }}
                     </button>
                 </div>
             </div>
@@ -29,11 +35,11 @@
 </template>
 
 <script setup lang="ts">
-import { UserCheck } from 'lucide-vue-next';
-import UserAvatar from '../../ui/UserAvatar.vue';
-import type { Friend } from '../../../services/userService';
-import { useStreamerMode } from '../../../composables/useStreamerMode';
-import { computed } from 'vue';
+import { UserCheck } from "lucide-vue-next";
+import UserAvatar from "../../ui/UserAvatar.vue";
+import type { Friend } from "../../../services/userService";
+import { useStreamerMode } from "../../../composables/useStreamerMode";
+import { computed } from "vue";
 
 const props = defineProps<{
     blockedUser: Friend;
@@ -41,13 +47,16 @@ const props = defineProps<{
 
 const emit = defineEmits<{
     unblockUser: [user: Friend];
-    'view-profile': [userId: number];
+    "view-profile": [userId: number];
 }>();
 
 const streamer = useStreamerMode();
 
 const displayNickname = computed(() => {
-    return streamer.getDisplayName(props.blockedUser.nickname, props.blockedUser.username);
+    return streamer.getDisplayName(
+        props.blockedUser.nickname,
+        props.blockedUser.username
+    );
 });
 
 const displayUsername = computed(() => {
@@ -55,7 +64,7 @@ const displayUsername = computed(() => {
 });
 
 const handleUnblockUser = () => {
-    emit('unblockUser', props.blockedUser);
+    emit("unblockUser", props.blockedUser);
 };
 </script>
 
diff --git a/src/components/features/friends/FriendCard.vue b/src/components/features/friends/FriendCard.vue
index 95d1f40e..66dd0c1c 100644
--- a/src/components/features/friends/FriendCard.vue
+++ b/src/components/features/friends/FriendCard.vue
@@ -1,14 +1,19 @@
 <template>
     <div
-        class="card bg-base-200 shadow-md border border-base-300 hover:shadow-lg transition-shadow h-full flex flex-col">
+        class="card bg-base-200 shadow-md border border-base-300 hover:shadow-lg transition-shadow h-full flex flex-col"
+    >
         <div class="card-body p-4 flex-1 flex items-center">
             <div class="flex items-center justify-between w-full">
                 <div class="flex items-center gap-4">
                     <div @click="handleViewProfile" class="avatar-click-area">
-                        <UserAvatar :name="friend.nickname || friend.username" :show-status="true"
-                            :is-online="friend.status.is_online" :is-clickable="true"
+                        <UserAvatar
+                            :name="friend.nickname || friend.username"
+                            :show-status="true"
+                            :is-online="friend.status.is_online"
+                            :is-clickable="true"
                             :src="(friend as any).avatar_url || null"
-                            :original-src="(friend as any).avatar_url || null" />
+                            :original-src="(friend as any).avatar_url || null"
+                        />
                     </div>
                     <div class="flex-1 min-h-14">
                         <p class="font-medium">{{ displayNickname }}</p>
@@ -16,24 +21,50 @@
                             @{{ displayUsername }}
                         </p>
 
-                        <div v-if="friend.status.current_client" class="flex items-center gap-2 mt-1">
+                        <div
+                            v-if="friend.status.current_client"
+                            class="flex items-center gap-2 mt-1"
+                        >
                             <Gamepad2 class="w-3 h-3 text-primary" />
-                            <span class="text-xs text-primary">{{ t('userProfile.playing') }}
-                                {{ friend.status.current_client }}</span>
-                            <span v-if="friend.status.client_version" class="text-xs text-base-content/50">
+                            <span class="text-xs text-primary"
+                                >{{ t("userProfile.playing") }}
+                                {{ friend.status.current_client }}</span
+                            >
+                            <span
+                                v-if="friend.status.client_version"
+                                class="text-xs text-base-content/50"
+                            >
                                 ({{ friend.status.client_version }})
                             </span>
+                            <span
+                                v-if="playtimeDuration"
+                                class="badge badge-sm bg-base-300/50 border-none text-base-content/70 ml-1 py-0 px-2 text-[10px] h-4 flex items-center gap-1 shrink-0"
+                            >
+                                <Clock class="w-2.5 h-2.5" />
+                                {{ playtimeDuration }}
+                            </span>
                         </div>
 
-                        <div v-else-if="friend.status.is_online" class="flex items-center gap-2 mt-1">
-                            <span class="w-2 h-2 rounded-full bg-success inline-block" aria-hidden="true"></span>
-                            <span class="text-xs text-success">{{ t('userProfile.online') }}</span>
+                        <div
+                            v-else-if="friend.status.is_online"
+                            class="flex items-center gap-2 mt-1"
+                        >
+                            <span
+                                class="w-2 h-2 rounded-full bg-success inline-block"
+                                aria-hidden="true"
+                            ></span>
+                            <span class="text-xs text-success">{{
+                                t("userProfile.online")
+                            }}</span>
                         </div>
 
-                        <div v-else-if="friend.status.last_seen" class="flex items-center gap-2 mt-1">
+                        <div
+                            v-else-if="friend.status.last_seen"
+                            class="flex items-center gap-2 mt-1"
+                        >
                             <Clock class="w-3 h-3 text-base-content/50" />
                             <span class="text-xs text-base-content/50">
-                                {{ t('userProfile.last_seen') }}
+                                {{ t("userProfile.last_seen") }}
                                 {{ formatLastSeen(friend.status.last_seen) }}
                             </span>
                         </div>
@@ -41,21 +72,34 @@
                 </div>
 
                 <div class="dropdown dropdown-end">
-                    <div tabindex="0" role="button" class="btn btn-ghost btn-sm btn-circle">
+                    <div
+                        tabindex="0"
+                        role="button"
+                        class="btn btn-ghost btn-sm btn-circle"
+                    >
                         <MoreVertical class="w-4 h-4" />
                     </div>
-                    <ul tabindex="0"
-                        class="dropdown-content menu p-2 bg-base-200 shadow-xl border border-base-300 rounded-box w-52 z-9999">
+                    <ul
+                        tabindex="0"
+                        class="dropdown-content menu p-2 bg-base-200 shadow-xl border border-base-300 rounded-box w-52 z-9999"
+                    >
                         <li>
                             <a @click="handleRemoveFriend" class="text-error">
                                 <UserMinus class="w-4 h-4" />
-                                {{ t('userProfile.remove_friend') }}
+                                {{ t("userProfile.remove_friend") }}
                             </a>
                         </li>
                         <li>
                             <a @click="handleBlockFriend" class="text-error">
                                 <Shield class="w-4 h-4" />
-                                {{ t('userProfile.block_user') }}
+                                {{ t("userProfile.block_user") }}
+                            </a>
+                        </li>
+                        <div class="divider my-0"></div>
+                        <li>
+                            <a @click="handleReportUser" class="text-warning">
+                                <AlertTriangle class="w-4 h-4" />
+                                {{ t("userProfile.report_user") }}
                             </a>
                         </li>
                     </ul>
@@ -72,12 +116,15 @@ import {
     MoreVertical,
     UserMinus,
     Shield,
-} from 'lucide-vue-next';
-import UserAvatar from '../../ui/UserAvatar.vue';
-import type { Friend } from '../../../services/userService';
-import { useI18n } from 'vue-i18n';
-import { useStreamerMode } from '../../../composables/useStreamerMode';
-import { computed } from 'vue';
+    AlertTriangle,
+} from "lucide-vue-next";
+import UserAvatar from "../../ui/UserAvatar.vue";
+import type { Friend } from "../../../services/userService";
+import { useI18n } from "vue-i18n";
+import { useStreamerMode } from "../../../composables/useStreamerMode";
+import { useModal } from "../../../services/modalService";
+import ReportModal from "../../modals/common/ReportModal.vue";
+import { computed, ref, onUnmounted, watch } from "vue";
 
 const props = defineProps<{
     friend: Friend;
@@ -91,9 +138,13 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 const streamer = useStreamerMode();
+const { showModal, hideModal } = useModal();
 
 const displayNickname = computed(() => {
-    return streamer.getDisplayName(props.friend.nickname, props.friend.username);
+    return streamer.getDisplayName(
+        props.friend.nickname,
+        props.friend.username
+    );
 });
 
 const displayUsername = computed(() => {
@@ -108,40 +159,100 @@ const formatLastSeen = (lastSeen: string): string => {
     const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
     const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
 
-    if (diffMins < 1) return t('userProfile.just_now');
+    if (diffMins < 1) return t("userProfile.just_now");
     if (diffMins < 60)
-        return t('userProfile.minutes_ago', {
+        return t("userProfile.minutes_ago", {
             count: diffMins,
-            s: diffMins === 1 ? 'у' : '',
+            s: diffMins === 1 ? "у" : "",
         });
     if (diffHours < 24)
-        return t('userProfile.hours_ago', {
+        return t("userProfile.hours_ago", {
             count: diffHours,
-            s: diffHours === 1 ? '' : 'ов',
+            s: diffHours === 1 ? "" : "ов",
         });
     if (diffDays < 7)
-        return t('userProfile.days_ago', {
+        return t("userProfile.days_ago", {
             count: diffDays,
-            s: diffDays === 1 ? 'ень' : 'я',
+            s: diffDays === 1 ? "ень" : "я",
         });
 
-    const day = String(date.getDate()).padStart(2, '0');
-    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
     const year = date.getFullYear();
     return `${day}/${month}/${year}`;
 };
 
 const handleRemoveFriend = () => {
-    emit('removeFriend', props.friend);
+    emit("removeFriend", props.friend);
 };
 
 const handleBlockFriend = () => {
-    emit('blockFriend', props.friend);
+    emit("blockFriend", props.friend);
 };
 
 const handleViewProfile = () => {
-    emit('viewProfile', props.friend.id);
+    emit("viewProfile", props.friend.id);
+};
+
+const handleReportUser = () => {
+    showModal(
+        "report-user",
+        ReportModal,
+        { size: "md" },
+        {
+            userId: props.friend.id,
+            username: props.friend.nickname || props.friend.username,
+        },
+        {
+            close: () => hideModal("report-user"),
+        }
+    );
+};
+
+const playtimeDuration = ref("");
+let playtimeInterval: any = null;
+
+const updatePlaytime = () => {
+    if (!props.friend.status?.started_at) {
+        playtimeDuration.value = "";
+        return;
+    }
+    const start = new Date(props.friend.status.started_at).getTime();
+    const now = new Date().getTime();
+    const diff = Math.max(0, now - start);
+
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+
+    if (hours > 0) {
+        playtimeDuration.value = `${hours}h ${minutes}m`;
+    } else {
+        playtimeDuration.value = `${minutes}m`;
+    }
 };
+
+watch(
+    () => props.friend.status?.started_at,
+    (newVal) => {
+        if (newVal) {
+            updatePlaytime();
+            if (!playtimeInterval) {
+                playtimeInterval = setInterval(updatePlaytime, 60000);
+            }
+        } else {
+            if (playtimeInterval) {
+                clearInterval(playtimeInterval);
+                playtimeInterval = null;
+            }
+            playtimeDuration.value = "";
+        }
+    },
+    { immediate: true }
+);
+
+onUnmounted(() => {
+    if (playtimeInterval) clearInterval(playtimeInterval);
+});
 </script>
 
 <style scoped>
diff --git a/src/components/features/friends/FriendRequestCard.vue b/src/components/features/friends/FriendRequestCard.vue
index 591d2c85..aecfa32d 100644
--- a/src/components/features/friends/FriendRequestCard.vue
+++ b/src/components/features/friends/FriendRequestCard.vue
@@ -1,12 +1,19 @@
 <template>
-    <div class="card bg-base-200 shadow-sm border border-base-300 h-full flex flex-col">
+    <div
+        class="card bg-base-200 shadow-sm border border-base-300 h-full flex flex-col"
+    >
         <div class="card-body p-4 flex-1 flex items-center">
             <div class="flex items-center justify-between w-full">
                 <div class="flex items-center gap-3">
                     <div @click="$emit('viewProfile', user.id)">
-                        <UserAvatar :name="displayNickname" :is-clickable="true"
+                        <UserAvatar
+                            :name="displayNickname"
+                            :is-clickable="true"
                             :src="(props.user as any).avatar_url || null"
-                            :original-src="(props.user as any).avatar_url || null" />
+                            :original-src="
+                                (props.user as any).avatar_url || null
+                            "
+                        />
                     </div>
                     <div class="min-h-14">
                         <p class="font-medium">{{ displayNickname }}</p>
@@ -16,17 +23,36 @@
                     </div>
                 </div>
                 <div v-if="type === 'received'" class="flex gap-2 items-center">
-                    <button @click="$emit('accept', requestId)" class="btn btn-success btn-sm">
+                    <button
+                        @click="$emit('accept', requestId)"
+                        class="btn btn-success btn-sm"
+                    >
                         <Check class="w-4 h-4" />
                     </button>
-                    <button @click="$emit('reject', requestId)" class="btn btn-error btn-sm">
+                    <button
+                        @click="$emit('reject', requestId)"
+                        class="btn btn-error btn-sm"
+                    >
                         <X class="w-4 h-4" />
                     </button>
+                    <button
+                        @click="$emit('report', user)"
+                        class="btn btn-warning btn-outline btn-sm"
+                        :title="t('reports.report_user')"
+                    >
+                        <Flag class="w-4 h-4" />
+                    </button>
                 </div>
-                <div v-else-if="type === 'sent'" class="flex gap-2 items-center">
-                    <button @click="confirmCancel" class="btn btn-error btn-outline btn-sm">
+                <div
+                    v-else-if="type === 'sent'"
+                    class="flex gap-2 items-center"
+                >
+                    <button
+                        @click="confirmCancel"
+                        class="btn btn-error btn-outline btn-sm"
+                    >
                         <X class="w-4 h-4" />
-                        {{ t('common.cancel') }}
+                        {{ t("common.cancel") }}
                     </button>
                 </div>
             </div>
@@ -35,14 +61,14 @@
 </template>
 
 <script setup lang="ts">
-import { Check, X } from 'lucide-vue-next';
-import { useI18n } from 'vue-i18n';
-import { useModal } from '../../../services/modalService';
-import UserAvatar from '../../ui/UserAvatar.vue';
-import CancelFriendRequestConfirmModal from '../../modals/social/friends/CancelFriendRequestConfirmModal.vue';
-import type { Friend } from '../../../services/userService';
-import { useStreamerMode } from '../../../composables/useStreamerMode';
-import { computed } from 'vue';
+import { Check, Flag, X } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
+import { useModal } from "../../../services/modalService";
+import UserAvatar from "../../ui/UserAvatar.vue";
+import CancelFriendRequestConfirmModal from "../../modals/social/friends/CancelFriendRequestConfirmModal.vue";
+import type { Friend } from "../../../services/userService";
+import { useStreamerMode } from "../../../composables/useStreamerMode";
+import { computed } from "vue";
 
 const { t } = useI18n();
 const { showModal, hideModal } = useModal();
@@ -51,7 +77,7 @@ const streamer = useStreamerMode();
 const props = defineProps<{
     user: Friend;
     requestId: number;
-    type: 'received' | 'sent';
+    type: "received" | "sent";
 }>();
 
 const emit = defineEmits<{
@@ -59,6 +85,7 @@ const emit = defineEmits<{
     reject: [requestId: number];
     viewProfile: [userId: number];
     cancel: [requestId: number];
+    report: [user: Friend];
 }>();
 
 const displayNickname = computed(() => {
@@ -71,16 +98,16 @@ const displayUsername = computed(() => {
 
 const confirmCancel = () => {
     showModal(
-        'cancel-friend-request-confirm',
+        "cancel-friend-request-confirm",
         CancelFriendRequestConfirmModal,
-        { title: t('friends.cancel_friend_request') },
+        { title: t("friends.cancel_friend_request") },
         { user: props.user, requestId: props.requestId },
         {
             confirm: (requestId: number) => {
-                emit('cancel', requestId);
-                hideModal('cancel-friend-request-confirm');
+                emit("cancel", requestId);
+                hideModal("cancel-friend-request-confirm");
             },
-            close: () => hideModal('cancel-friend-request-confirm'),
+            close: () => hideModal("cancel-friend-request-confirm"),
         }
     );
 };
diff --git a/src/components/features/profile/AchievementCard.vue b/src/components/features/profile/AchievementCard.vue
new file mode 100644
index 00000000..9d6f9085
--- /dev/null
+++ b/src/components/features/profile/AchievementCard.vue
@@ -0,0 +1,87 @@
+<template>
+    <div
+        class="card bg-base-100 shadow-sm border border-base-200 transition-all hover:shadow-md"
+        :class="{ 'opacity-60 grayscale': locked }"
+    >
+        <div class="card-body p-4 flex flex-row items-center gap-4">
+            <div
+                class="p-3 rounded-full bg-base-200 text-primary"
+                :class="{ 'bg-base-300 text-base-content/50': locked }"
+            >
+                <component :is="iconComponent" class="w-6 h-6" />
+            </div>
+            <div class="flex-1">
+                <h3
+                    class="font-bold text-sm"
+                    :class="{ 'text-base-content/50': locked }"
+                >
+                    {{ title }}
+                </h3>
+                <p class="text-xs text-base-content/70">
+                    {{ description }}
+                </p>
+                <p
+                    v-if="!locked && unlockedAt"
+                    class="text-[10px] text-primary mt-1"
+                >
+                    {{
+                        t("achievements.unlocked_at", {
+                            date: formatDate(unlockedAt),
+                        })
+                    }}
+                </p>
+                <p
+                    v-if="receivePercentage !== undefined"
+                    class="text-[10px] text-base-content/40 mt-0.5"
+                >
+                    {{
+                        t("achievements.owned_percentage", {
+                            percent: Number(receivePercentage).toFixed(1),
+                        })
+                    }}
+                </p>
+            </div>
+            <div
+                v-if="locked"
+                class="text-xs font-semibold px-2 py-1 bg-base-300 rounded text-base-content/60"
+            >
+                <Lock class="w-3 h-3" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import * as LucideIcons from "lucide-vue-next";
+import { Lock } from "lucide-vue-next";
+import { formatDate } from "../../../utils/utils";
+
+const props = defineProps<{
+    achievementKey: string;
+    iconName: string;
+    locked: boolean;
+    unlockedAt?: string | null;
+    hidden?: boolean;
+    receivePercentage?: number;
+}>();
+
+const { t } = useI18n();
+
+const iconComponent = computed(() => {
+    // @ts-ignore
+    return LucideIcons[props.iconName] || LucideIcons.Trophy;
+});
+
+const title = computed(() => {
+    if (props.locked && props.hidden) return t("achievements.secret_title");
+    return t(`achievements.list.${props.achievementKey}.name`);
+});
+
+const description = computed(() => {
+    if (props.locked && props.hidden)
+        return t("achievements.secret_description");
+    return t(`achievements.list.${props.achievementKey}.description`);
+});
+</script>
diff --git a/src/components/features/profile/AvatarUploader.vue b/src/components/features/profile/AvatarUploader.vue
index d5f25656..42e37e0b 100644
--- a/src/components/features/profile/AvatarUploader.vue
+++ b/src/components/features/profile/AvatarUploader.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { userService } from '../../../services/userService';
-import { useToast } from '../../../services/toastService';
-import { useI18n } from 'vue-i18n';
-import { getCurrentWebview } from '@tauri-apps/api/webview';
-import { readFile } from '@tauri-apps/plugin-fs';
-import { basename } from '@tauri-apps/api/path';
-import { resolveApiAssetUrl } from '../../../utils/url';
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import { userService } from "../../../services/userService";
+import { useToast } from "../../../services/toastService";
+import { useI18n } from "vue-i18n";
+import { getCurrentWebview } from "@tauri-apps/api/webview";
+import { readFile } from "@tauri-apps/plugin-fs";
+import { basename } from "@tauri-apps/api/path";
+import { resolveApiAssetUrl } from "../../../utils/url";
 
 const props = defineProps<{ currentUrl?: string | null }>();
-const emit = defineEmits<{ (e: 'uploaded', url: string | null): void }>();
+const emit = defineEmits<{ (e: "uploaded", url: string | null): void }>();
 
 const { addToast } = useToast();
 const { t } = useI18n();
@@ -22,113 +22,133 @@ const uploading = ref(false);
 let unlisten: (() => void) | null = null;
 
 const maxSize = 5 * 1024 * 1024;
-const allowed = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+const allowed = ["image/png", "image/jpeg", "image/gif", "image/webp"];
 
-const helpText = computed(() => t('account.avatar_help'));
+const helpText = computed(() => t("account.avatar_help"));
 
 function onBrowse() {
-  fileRef.value?.click();
+    fileRef.value?.click();
 }
 
 async function onFileChange(e: Event) {
-  const input = e.target as HTMLInputElement;
-  const file = input.files?.[0];
-  if (file) await handleFile(file);
+    const input = e.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (file) await handleFile(file);
 }
 
 async function handleFile(file: File) {
-  if (!allowed.includes(file.type)) {
-    addToast(t('account.avatar_type_error'), 'error');
-    return;
-  }
-  if (file.size > maxSize) {
-    addToast(t('account.avatar_size_error'), 'error');
-    return;
-  }
+    if (!allowed.includes(file.type)) {
+        addToast(t("account.avatar_type_error"), "error");
+        return;
+    }
+    if (file.size > maxSize) {
+        addToast(t("account.avatar_size_error"), "error");
+        return;
+    }
 
-  uploading.value = true;
-  try {
-    const { success, profile, error } = await userService.uploadAvatar(file);
-    if (!success) throw new Error(error || 'Upload failed');
-    const url = profile?.avatar_url || null;
-    previewUrl.value = url;
+    uploading.value = true;
+    try {
+        const { success, profile, error } =
+            await userService.uploadAvatar(file);
+        if (!success) throw new Error(error || "Upload failed");
+        const url = profile?.avatar_url || null;
+        previewUrl.value = url;
 
-    emit('uploaded', url);
-    addToast(t('account.avatar_uploaded'), 'success');
-  } catch (err: any) {
-    addToast(err.message || t('account.avatar_upload_failed'), 'error');
-  } finally {
-    uploading.value = false;
-  }
+        emit("uploaded", url);
+        addToast(t("account.avatar_uploaded"), "success");
+    } catch (err: any) {
+        addToast(err.message || t("account.avatar_upload_failed"), "error");
+    } finally {
+        uploading.value = false;
+    }
 }
 
 onMounted(async () => {
-  unlisten = await getCurrentWebview().onDragDropEvent(async (event) => {
-    if (event.payload.type === 'over') {
-      hovering.value = true;
-    } else if (event.payload.type === 'drop') {
-      hovering.value = false;
-      const paths = event.payload.paths;
-      if (paths.length > 0) {
-        const filePath = paths[0];
-        try {
-          const data = await readFile(filePath);
-          const fileName = await basename(filePath);
-          const mimeType = getMimeType(fileName);
-          if (!allowed.includes(mimeType)) {
-            addToast(t('account.avatar_type_error'), 'error');
-            return;
-          }
-          if (data.length > maxSize) {
-            addToast(t('account.avatar_size_error'), 'error');
-            return;
-          }
-          const file = new File([data], fileName, { type: mimeType });
-          await handleFile(file);
-        } catch (e) {
-          console.log("Failed to read dropped file:", e);
-          addToast(t('account.avatar_upload_failed'), 'error');
+    unlisten = await getCurrentWebview().onDragDropEvent(async (event) => {
+        if (event.payload.type === "over") {
+            hovering.value = true;
+        } else if (event.payload.type === "drop") {
+            hovering.value = false;
+            const paths = event.payload.paths;
+            if (paths.length > 0) {
+                const filePath = paths[0];
+                try {
+                    const data = await readFile(filePath);
+                    const fileName = await basename(filePath);
+                    const mimeType = getMimeType(fileName);
+                    if (!allowed.includes(mimeType)) {
+                        addToast(t("account.avatar_type_error"), "error");
+                        return;
+                    }
+                    if (data.length > maxSize) {
+                        addToast(t("account.avatar_size_error"), "error");
+                        return;
+                    }
+                    const file = new File([data], fileName, { type: mimeType });
+                    await handleFile(file);
+                } catch (e) {
+                    console.log("Failed to read dropped file:", e);
+                    addToast(t("account.avatar_upload_failed"), "error");
+                }
+            }
+        } else {
+            hovering.value = false;
         }
-      }
-    } else {
-      hovering.value = false;
-    }
-  });
+    });
 });
 
 onUnmounted(() => {
-  if (unlisten) {
-    unlisten();
-  }
+    if (unlisten) {
+        unlisten();
+    }
 });
 
 function getMimeType(fileName: string): string {
-  const ext = fileName.split('.').pop()?.toLowerCase();
-  switch (ext) {
-    case 'png': return 'image/png';
-    case 'jpg':
-    case 'jpeg': return 'image/jpeg';
-    case 'gif': return 'image/gif';
-    case 'webp': return 'image/webp';
-    default: return '';
-  }
+    const ext = fileName.split(".").pop()?.toLowerCase();
+    switch (ext) {
+        case "png":
+            return "image/png";
+        case "jpg":
+        case "jpeg":
+            return "image/jpeg";
+        case "gif":
+            return "image/gif";
+        case "webp":
+            return "image/webp";
+        default:
+            return "";
+    }
 }
 </script>
 <template>
-  <div class="flex items-center space-x-3">
-    <div @click="onBrowse" :class="[
-      'rounded-xl p-4 flex items-center gap-3 cursor-pointer border-2 border-dashed',
-      hovering ? 'border-primary bg-base-200' : 'border-base-300 bg-transparent'
-    ]">
-      <img v-if="resolvedPreviewUrl" :src="resolvedPreviewUrl" alt="avatar"
-        class="w-8 h-8 rounded-full object-cover" />
-      <div class="text-left">
-        <div class="text-sm">{{ t('account.avatar_drop') }}</div>
-        <div class="text-xs opacity-70">{{ helpText }}</div>
-      </div>
-    </div>
+    <div class="flex items-center space-x-3">
+        <div
+            @click="onBrowse"
+            :class="[
+                'rounded-xl p-4 flex items-center gap-3 cursor-pointer border-2 border-dashed',
+                hovering
+                    ? 'border-primary bg-base-200'
+                    : 'border-base-300 bg-transparent',
+            ]"
+        >
+            <img
+                v-if="resolvedPreviewUrl"
+                :src="resolvedPreviewUrl"
+                alt="avatar"
+                class="w-8 h-8 rounded-full object-cover"
+            />
+            <div class="text-left">
+                <div class="text-sm">{{ t("account.avatar_drop") }}</div>
+                <div class="text-xs opacity-70">{{ helpText }}</div>
+            </div>
+        </div>
 
-    <input ref="fileRef" type="file" class="hidden" accept="image/png,image/jpeg,image/gif,image/webp"
-      @change="onFileChange" />
-  </div>
+        <input
+            ref="fileRef"
+            type="file"
+            class="hidden"
+            accept="image/png,image/jpeg,image/gif,image/webp"
+            @change="onFileChange"
+        />
+    </div>
 </template>
diff --git a/src/components/features/social/InlineIRCChat.vue b/src/components/features/social/InlineIRCChat.vue
index 545845fb..370c619c 100644
--- a/src/components/features/social/InlineIRCChat.vue
+++ b/src/components/features/social/InlineIRCChat.vue
@@ -1,132 +1,267 @@
 <template>
-    <div v-bind="attrs"
+    <div
+        v-bind="attrs"
         class="irc-chat flex flex-col bg-base-200 border border-base-300 rounded-lg overflow-hidden transition-all duration-300 ease-out relative mb-6"
-        :class="isExpanded ? 'shadow-lg max-h-95' : 'shadow-sm max-h-17 hover:shadow-md'">
-        <button type="button" class="flex items-center justify-between w-full px-4 py-3 bg-base-300/40 cursor-pointer"
-            @click="toggleExpanded">
+        :class="
+            isExpanded
+                ? 'shadow-lg max-h-95'
+                : 'shadow-sm max-h-17 hover:shadow-md'
+        "
+    >
+        <button
+            type="button"
+            class="flex items-center justify-between w-full px-4 py-3 bg-base-300/40 cursor-pointer"
+            @click="toggleExpanded"
+        >
             <div class="flex items-center gap-3">
                 <MessageSquare class="w-5 h-5" />
                 <div class="flex flex-col text-left leading-tight">
-                    <span class="font-semibold text-sm">{{ $t('irc.inline.title') }}</span>
-                    <span class="text-xs text-base-content/70 whitespace-nowrap"
-                        :class="{ 'w-[70%] truncate overflow-hidden': latestActivity.length > 100 }">
+                    <span class="font-semibold text-sm">{{
+                        $t("irc.inline.title")
+                    }}</span>
+                    <span
+                        class="text-xs text-base-content/70 whitespace-nowrap"
+                        :class="{
+                            'w-[70%] truncate overflow-hidden':
+                                latestActivity.length > 100,
+                        }"
+                    >
                         {{ latestActivity }}
                     </span>
                 </div>
             </div>
             <div class="flex items-center gap-3">
-                <button class="p-1 rounded hover:bg-base-300/50 cursor-pointer" @click.stop="forceReconnect">
+                <button
+                    class="p-1 rounded hover:bg-base-300/50 cursor-pointer"
+                    @click.stop="forceReconnect"
+                >
                     <RefreshCw class="w-4 h-4" />
                 </button>
 
-                <ChevronDown class="w-4 h-4 transition-transform duration-200 m-2"
-                    :class="isExpanded ? 'rotate-180' : ''" />
+                <ChevronDown
+                    class="w-4 h-4 transition-transform duration-200 m-2"
+                    :class="isExpanded ? 'rotate-180' : ''"
+                />
             </div>
         </button>
 
-        <div class="overflow-hidden transition-all duration-300 ease-out"
-            :class="isExpanded ? 'max-h-80 opacity-100' : 'max-h-0 opacity-0'">
+        <div
+            class="overflow-hidden transition-all duration-300 ease-out"
+            :class="isExpanded ? 'max-h-80 opacity-100' : 'max-h-0 opacity-0'"
+        >
             <div class="flex flex-col h-70 bg-base-100/40">
                 <div class="flex justify-between items-center">
                     <transition name="irc-status">
-                        <div v-if="isExpanded"
+                        <div
+                            v-if="isExpanded"
                             class="p-4 flex items-center gap-2 text-xs font-semibold pointer-events-none select-none"
-                            :class="statusMeta.textClass">
-                            <component :is="statusMeta.icon" class="w-4 h-4" :class="statusMeta.iconClass" />
+                            :class="statusMeta.textClass"
+                        >
+                            <component
+                                :is="statusMeta.icon"
+                                class="w-4 h-4"
+                                :class="statusMeta.iconClass"
+                            />
                             <span>{{ statusMeta.label }}</span>
                         </div>
                     </transition>
 
                     <transition name="irc-status">
-                        <div v-if="isExpanded && connected"
-                            class="p-4 flex items-center gap-3 text-xs text-base-content/70 select-none">
-                            <div class="flex items-center gap-1" title="Online Users">
-                                <span class="w-2 h-2 rounded-full bg-success mr-1"></span>
+                        <div
+                            v-if="isExpanded && connected"
+                            class="p-4 flex items-center gap-3 text-xs text-base-content/70 select-none"
+                        >
+                            <div
+                                class="flex items-center gap-1"
+                                title="Online Users"
+                            >
+                                <span
+                                    class="w-2 h-2 rounded-full bg-success mr-1"
+                                ></span>
                                 <span>{{ onlineUsers }}</span>
                             </div>
-                            <div class="flex items-center gap-1" title="Online Guests">
-                                <span class="w-2 h-2 rounded-full bg-blue-500/30 mr-1"></span>
+                            <div
+                                class="flex items-center gap-1"
+                                title="Online Guests"
+                            >
+                                <span
+                                    class="w-2 h-2 rounded-full bg-blue-500/30 mr-1"
+                                ></span>
                                 <span>{{ onlineGuests }}</span>
                             </div>
                         </div>
                     </transition>
                 </div>
 
-                <div class="flex-1 overflow-y-auto px-4 pb-4 space-y-2" ref="messagesContainer">
-                    <div v-for="(msg, index) in visibleMessages" :key="index"
-                        class="text-sm wrap-break-word whitespace-pre-wrap">
+                <div
+                    class="flex-1 overflow-y-auto px-4 pb-4 space-y-2"
+                    ref="messagesContainer"
+                >
+                    <div
+                        v-for="(msg, index) in visibleMessages"
+                        :key="index"
+                        class="text-sm wrap-break-word whitespace-pre-wrap"
+                    >
                         <span class="opacity-70 mr-2">[{{ msg.time }}]</span>
 
                         <template v-if="msg.sender">
-                            <span class="cursor-pointer hover:underline"
-                                :style="{ color: getRoleColor(msg.sender.role) }"
+                            <span
+                                class="cursor-pointer hover:underline"
+                                :style="{
+                                    color: getRoleColor(msg.sender.role),
+                                }"
                                 @click="handleUsernameClick(msg.sender)"
-                                @contextmenu.prevent="openContextMenu($event, msg.sender.username, msg.sender.username)">
+                                @contextmenu.prevent="
+                                    openContextMenu(
+                                        $event,
+                                        msg.sender.username,
+                                        msg.sender.username
+                                    )
+                                "
+                            >
                                 {{ msg.sender.username }}
                             </span>
-                            <span v-for="(part, pIndex) in parseMessage(msg.content)" :key="pIndex"
-                                :style="{ color: part.color }" :class="{ 'font-bold': part.bold }">
+                            <span
+                                v-for="(part, pIndex) in parseMessage(
+                                    msg.content
+                                )"
+                                :key="pIndex"
+                                :style="{ color: part.color }"
+                                :class="{ 'font-bold': part.bold }"
+                            >
                                 {{ part.text }}
                             </span>
                         </template>
                         <template v-else>
-                            <span v-for="(part, pIndex) in parseMessage(msg.content, msg.type)" :key="pIndex"
+                            <span
+                                v-for="(part, pIndex) in parseMessage(
+                                    msg.content,
+                                    msg.type
+                                )"
+                                :key="pIndex"
                                 :style="{ color: part.color }"
-                                :class="[{ 'cursor-pointer underline': part.isName, 'font-bold': part.bold }]"
-                                @contextmenu.prevent="part.isName && openContextMenu($event, part.text, extractDisplayName(msg.content))">{{
-                                    part.text }}</span>
+                                :class="[
+                                    {
+                                        'cursor-pointer underline': part.isName,
+                                        'font-bold': part.bold,
+                                    },
+                                ]"
+                                @contextmenu.prevent="
+                                    part.isName &&
+                                    openContextMenu(
+                                        $event,
+                                        part.text,
+                                        extractDisplayName(msg.content)
+                                    )
+                                "
+                                >{{ part.text }}</span
+                            >
                         </template>
                     </div>
                 </div>
 
                 <transition name="irc-input">
-                    <div v-show="isExpanded" class="p-4 bg-base-200 border-t border-base-300 flex gap-2">
-                        <input ref="ircInput" v-model="inputMessage" @keyup.enter="sendMessage" type="text"
-                            :placeholder="$t('irc.inline.placeholder')" class="input input-bordered flex-1"
-                            :disabled="!connected" />
-                        <button class="btn btn-primary" @click="sendMessage"
-                            :disabled="!connected || !inputMessage.trim()">
-                            {{ $t('common.send') }}
+                    <div
+                        v-show="isExpanded"
+                        class="p-4 bg-base-200 border-t border-base-300 flex gap-2"
+                    >
+                        <input
+                            ref="ircInput"
+                            v-model="inputMessage"
+                            @keyup.enter="sendMessage"
+                            type="text"
+                            :placeholder="$t('irc.inline.placeholder')"
+                            class="input input-bordered flex-1"
+                            :disabled="!connected"
+                        />
+                        <button
+                            class="btn btn-primary"
+                            @click="sendMessage"
+                            :disabled="!connected || !inputMessage.trim()"
+                        >
+                            {{ $t("common.send") }}
                         </button>
                     </div>
                 </transition>
             </div>
         </div>
     </div>
-    <div v-if="contextMenu.visible" class="fixed z-50"
-        :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }" @click.stop>
-        <div class="bg-base-100 border border-base-300 rounded shadow-md p-2 flex flex-col context-menu">
-            <button class="text-left px-2 py-1 hover:bg-base-200 rounded flex items-center gap-2"
-                @click.prevent.stop="startPrivateMessage">
+    <div
+        v-if="contextMenu.visible"
+        class="fixed z-50"
+        :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
+        @click.stop
+    >
+        <div
+            class="bg-base-100 border border-base-300 rounded shadow-md p-2 flex flex-col context-menu"
+        >
+            <button
+                class="text-left px-2 py-1 hover:bg-base-200 rounded flex items-center gap-2"
+                @click.prevent.stop="startPrivateMessage"
+            >
                 <AtSign class="w-4 h-4" />
-                <span>{{ $t('irc.inline.privateMessage') }}</span>
+                <span>{{ $t("irc.inline.privateMessage") }}</span>
             </button>
-            <button class="text-left px-2 py-1 hover:bg-base-200 rounded flex items-center gap-2"
-                @click.prevent.stop="copyToClipboard(contextMenu.username)">
+            <button
+                class="text-left px-2 py-1 hover:bg-base-200 rounded flex items-center gap-2"
+                @click.prevent.stop="copyToClipboard(contextMenu.username)"
+            >
                 <Copy class="w-4 h-4" />
-                <span>{{ $t('irc.inline.copyNickname') }}</span>
+                <span>{{ $t("irc.inline.copyNickname") }}</span>
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch, onUnmounted, useAttrs } from 'vue';
+import {
+    computed,
+    nextTick,
+    onMounted,
+    ref,
+    watch,
+    onUnmounted,
+    useAttrs,
+} from "vue";
 defineOptions({ inheritAttrs: false });
-import { CheckCircle2, ChevronDown, Loader2, MessageSquare, RefreshCw, WifiOff, AtSign, Copy } from 'lucide-vue-next';
-import { useToast } from '../../../services/toastService';
-import { useIrcChat } from '../../../composables/useIrcChat';
-import { useI18n } from 'vue-i18n';
-import { userService } from '../../../services/userService';
-
-const emit = defineEmits<{ 'show-user-profile': [userId: number]; }>();
+import {
+    CheckCircle2,
+    ChevronDown,
+    Loader2,
+    MessageSquare,
+    RefreshCw,
+    WifiOff,
+    AtSign,
+    Copy,
+} from "lucide-vue-next";
+import { useToast } from "../../../services/toastService";
+import { useIrcChat } from "../../../composables/useIrcChat";
+import { useI18n } from "vue-i18n";
+import { userService } from "../../../services/userService";
+
+const emit = defineEmits<{ "show-user-profile": [userId: number] }>();
 
 const attrs = useAttrs();
-const { messages, connected, status, sendIrcMessage, forceReconnect, ensureIrcConnection, onlineUsers, onlineGuests } = useIrcChat();
+const {
+    messages,
+    connected,
+    status,
+    sendIrcMessage,
+    forceReconnect,
+    ensureIrcConnection,
+    onlineUsers,
+    onlineGuests,
+} = useIrcChat();
 const { t } = useI18n();
-const inputMessage = ref('');
+const inputMessage = ref("");
 const ircInput = ref<HTMLInputElement | null>(null);
-const contextMenu = ref({ visible: false, x: 0, y: 0, username: '', displayName: '' });
+const contextMenu = ref({
+    visible: false,
+    x: 0,
+    y: 0,
+    username: "",
+    displayName: "",
+});
 let clickHandlerRef: (() => void) | null = null;
 let keydownHandlerRef: ((e: KeyboardEvent) => void) | null = null;
 const isExpanded = ref(false);
@@ -136,37 +271,62 @@ const profileIdCache = new Map<string, number>();
 
 const getRoleColor = (role: string) => {
     switch (role.toLowerCase()) {
-        case 'admin': return '#AA0000';
-        case 'developer': return '#AA00AA';
-        case 'moderator': return '#00AA00';
-        default: return undefined;
+        case "admin":
+            return "#AA0000";
+        case "developer":
+            return "#AA00AA";
+        case "moderator":
+            return "#00AA00";
+        default:
+            return undefined;
     }
 };
 
 const parseMessage = (msg: string, type?: string) => {
     const colorMap: Record<string, string> = {
-        '0': '#000000', '1': '#0000AA', '2': '#00AA00', '3': '#00AAAA',
-        '4': '#AA0000', '5': '#AA00AA', '6': '#FFAA00', '7': '#AAAAAA',
-        '8': '#555555', '9': '#5555FF', 'a': '#55FF55', 'b': '#55FFFF',
-        'c': '#FF5555', 'd': '#FF55FF', 'e': '#FFFF55', 'f': '#FFFFFF'
+        "0": "#000000",
+        "1": "#0000AA",
+        "2": "#00AA00",
+        "3": "#00AAAA",
+        "4": "#AA0000",
+        "5": "#AA00AA",
+        "6": "#FFAA00",
+        "7": "#AAAAAA",
+        "8": "#555555",
+        "9": "#5555FF",
+        a: "#55FF55",
+        b: "#55FFFF",
+        c: "#FF5555",
+        d: "#FF55FF",
+        e: "#FFFF55",
+        f: "#FFFFFF",
     };
 
     let contentToParse = msg;
 
-    if (type !== 'system' && type !== 'private') {
+    if (type !== "system" && type !== "private") {
         const nameStripRegex = /^.*?(?= §7\(| \[§)/;
 
         if (nameStripRegex.test(msg)) {
-            contentToParse = msg.replace(nameStripRegex, '');
+            contentToParse = msg.replace(nameStripRegex, "");
         } else {
-            const colonIndex = msg.indexOf(': ');
-            if (colonIndex !== -1 && colonIndex < 50 && !msg.toLowerCase().startsWith('system')) {
+            const colonIndex = msg.indexOf(": ");
+            if (
+                colonIndex !== -1 &&
+                colonIndex < 50 &&
+                !msg.toLowerCase().startsWith("system")
+            ) {
                 contentToParse = msg.substring(colonIndex + 2);
             }
         }
     }
 
-    const parts: { text: string; color?: string; isName?: boolean; bold?: boolean }[] = [];
+    const parts: {
+        text: string;
+        color?: string;
+        isName?: boolean;
+        bold?: boolean;
+    }[] = [];
     let currentColor: string | undefined = undefined;
     let currentBold = false;
 
@@ -177,14 +337,19 @@ const parseMessage = (msg: string, type?: string) => {
     while ((match = regex.exec(contentToParse)) !== null) {
         const text = contentToParse.substring(lastIndex, match.index);
         if (text) {
-            parts.push({ text, color: currentColor, isName: false, bold: currentBold });
+            parts.push({
+                text,
+                color: currentColor,
+                isName: false,
+                bold: currentBold,
+            });
         }
 
         const code = match[1].toLowerCase();
-        if (code === 'r') {
+        if (code === "r") {
             currentColor = undefined;
             currentBold = false;
-        } else if (code === 'l') {
+        } else if (code === "l") {
             currentBold = true;
         } else if (colorMap[code]) {
             currentColor = colorMap[code];
@@ -195,25 +360,31 @@ const parseMessage = (msg: string, type?: string) => {
 
     const remaining = contentToParse.substring(lastIndex);
     if (remaining) {
-        parts.push({ text: remaining, color: currentColor, isName: false, bold: currentBold });
+        parts.push({
+            text: remaining,
+            color: currentColor,
+            isName: false,
+            bold: currentBold,
+        });
     }
 
     return parts;
 };
 
-const stripColorCodes = (text: string) => text.replace(/§[0-9a-frklmnor]/gi, '');
+const stripColorCodes = (text: string) =>
+    text.replace(/§[0-9a-frklmnor]/gi, "");
 
 const extractDisplayName = (content: string) => {
-    const idx = content.indexOf(':');
+    const idx = content.indexOf(":");
     const header = idx === -1 ? content : content.substring(0, idx);
     return stripColorCodes(header).trim();
 };
 
 const resolveUserId = async (username: string, senderUserId?: string) => {
     const normalized = username.trim().toLowerCase();
-    if (!normalized) throw new Error('invalid');
+    if (!normalized) throw new Error("invalid");
 
-    if (senderUserId && !senderUserId.startsWith('guest-')) {
+    if (senderUserId && !senderUserId.startsWith("guest-")) {
         const numericId = Number.parseInt(senderUserId, 10);
         if (!Number.isNaN(numericId)) {
             profileIdCache.set(normalized, numericId);
@@ -225,64 +396,99 @@ const resolveUserId = async (username: string, senderUserId?: string) => {
     if (cached) return cached;
 
     const results = await userService.searchUsers(username);
-    const match = results.find((user) => user.username.toLowerCase() === normalized);
+    const match = results.find(
+        (user) => user.username.toLowerCase() === normalized
+    );
     if (match) {
         profileIdCache.set(normalized, match.id);
         return match.id;
     }
 
-    throw new Error('not_found');
+    throw new Error("not_found");
 };
 
-const handleUsernameClick = async (sender?: { username?: string; userId?: string }) => {
+const handleUsernameClick = async (sender?: {
+    username?: string;
+    userId?: string;
+}) => {
     const username = sender?.username?.trim();
     if (!username) return;
 
     try {
         const userId = await resolveUserId(username, sender?.userId);
-        emit('show-user-profile', userId);
+        emit("show-user-profile", userId);
     } catch (err: any) {
         const status = err?.response?.status;
         if (status === 401) {
-            addToast(t('userProfile.login_required'), 'error');
-        } else if (err?.message === 'not_found') {
-            addToast(t('userProfile.user_not_found'), 'error');
+            addToast(t("userProfile.login_required"), "error");
+        } else if (err?.message === "not_found") {
+            addToast(t("userProfile.user_not_found"), "error");
         } else {
-            addToast(t('userProfile.profile_load_failed'), 'error');
+            addToast(t("userProfile.profile_load_failed"), "error");
         }
-        console.error('Failed to open user profile from IRC chat', err);
+        console.error("Failed to open user profile from IRC chat", err);
     }
 };
 
-const visibleMessages = computed(() => messages.value.filter(m => m && m.type !== 'ping'));
+const visibleMessages = computed(() =>
+    messages.value.filter((m) => m && m.type !== "ping")
+);
 
 const latestActivity = computed(() => {
     const last = visibleMessages.value[visibleMessages.value.length - 1];
     if (!last) {
-        return connected.value ? t('irc.inline.latest_activity_connected') : t('irc.inline.tap_to_connect');
+        return connected.value
+            ? t("irc.inline.latest_activity_connected")
+            : t("irc.inline.tap_to_connect");
     }
-    return `${last.content.replace(/§[0-9a-f]|§r/gi, '')}`;
+    return `${last.content.replace(/§[0-9a-f]|§r/gi, "")}`;
 });
 
 const statusMeta = computed(() => {
     switch (status.value) {
-        case 'connected':
-            return { label: t('irc.inline.status.connected'), textClass: 'text-success', icon: CheckCircle2, iconClass: 'text-success' };
-        case 'reconnecting':
-            return { label: t('irc.inline.status.reconnecting'), textClass: 'text-warning', icon: RefreshCw, iconClass: 'animate-spin-slow text-warning' };
-        case 'connecting':
-            return { label: t('irc.inline.status.connecting'), textClass: 'text-info', icon: Loader2, iconClass: 'animate-spin-slow text-info' };
-        case 'error':
-            return { label: t('irc.inline.status.error'), textClass: 'text-error', icon: WifiOff, iconClass: 'text-error' };
+        case "connected":
+            return {
+                label: t("irc.inline.status.connected"),
+                textClass: "text-success",
+                icon: CheckCircle2,
+                iconClass: "text-success",
+            };
+        case "reconnecting":
+            return {
+                label: t("irc.inline.status.reconnecting"),
+                textClass: "text-warning",
+                icon: RefreshCw,
+                iconClass: "animate-spin-slow text-warning",
+            };
+        case "connecting":
+            return {
+                label: t("irc.inline.status.connecting"),
+                textClass: "text-info",
+                icon: Loader2,
+                iconClass: "animate-spin-slow text-info",
+            };
+        case "error":
+            return {
+                label: t("irc.inline.status.error"),
+                textClass: "text-error",
+                icon: WifiOff,
+                iconClass: "text-error",
+            };
         default:
-            return { label: t('irc.inline.status.disconnected'), textClass: 'text-base-content/70', icon: WifiOff, iconClass: 'text-base-content/60' };
+            return {
+                label: t("irc.inline.status.disconnected"),
+                textClass: "text-base-content/70",
+                icon: WifiOff,
+                iconClass: "text-base-content/60",
+            };
     }
 });
 
 const scrollToBottom = async () => {
     await nextTick();
     if (messagesContainer.value) {
-        messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
+        messagesContainer.value.scrollTop =
+            messagesContainer.value.scrollHeight;
     }
 };
 
@@ -299,17 +505,18 @@ const sendMessage = async () => {
     try {
         await ensureIrcConnection();
         await sendIrcMessage(inputMessage.value);
-        inputMessage.value = '';
+        inputMessage.value = "";
     } catch (err) {
-        console.error('Failed to send message:', err);
-        addToast(
-            t('irc.inline.send_failed'),
-            'error',
-        );
+        console.error("Failed to send message:", err);
+        addToast(t("irc.inline.send_failed"), "error");
     }
 };
 
-const openContextMenu = (e: MouseEvent, username: string, displayName: string) => {
+const openContextMenu = (
+    e: MouseEvent,
+    username: string,
+    displayName: string
+) => {
     e.preventDefault();
     contextMenu.value.visible = true;
     contextMenu.value.x = e.clientX;
@@ -320,8 +527,8 @@ const openContextMenu = (e: MouseEvent, username: string, displayName: string) =
 
 const closeContextMenu = () => {
     contextMenu.value.visible = false;
-    contextMenu.value.username = '';
-    contextMenu.value.displayName = '';
+    contextMenu.value.username = "";
+    contextMenu.value.displayName = "";
 };
 
 const startPrivateMessage = async () => {
@@ -337,9 +544,9 @@ const startPrivateMessage = async () => {
 const copyToClipboard = async (text: string) => {
     try {
         await navigator.clipboard.writeText(text);
-        addToast('Copied to clipboard', 'success');
+        addToast("Copied to clipboard", "success");
     } catch {
-        addToast('Failed to copy', 'error');
+        addToast("Failed to copy", "error");
     }
     closeContextMenu();
 };
@@ -349,32 +556,45 @@ onMounted(async () => {
         await ensureIrcConnection();
         await scrollToBottom();
     } catch (err) {
-        console.error('Failed to connect to IRC:', err);
+        console.error("Failed to connect to IRC:", err);
         addToast(
-            t('irc.inline.connection_error', { error: String(err) }),
-            'error',
+            t("irc.inline.connection_error", { error: String(err) }),
+            "error"
         );
     }
-    clickHandlerRef = () => { if (contextMenu.value.visible) closeContextMenu(); };
-    keydownHandlerRef = (e: KeyboardEvent) => { if (e.key === 'Escape' && contextMenu.value.visible) closeContextMenu(); };
-    document.addEventListener('click', clickHandlerRef);
-    window.addEventListener('keydown', keydownHandlerRef);
+    clickHandlerRef = () => {
+        if (contextMenu.value.visible) closeContextMenu();
+    };
+    keydownHandlerRef = (e: KeyboardEvent) => {
+        if (e.key === "Escape" && contextMenu.value.visible) closeContextMenu();
+    };
+    document.addEventListener("click", clickHandlerRef);
+    window.addEventListener("keydown", keydownHandlerRef);
 });
 
 onUnmounted(() => {
-    if (clickHandlerRef) document.removeEventListener('click', clickHandlerRef);
-    if (keydownHandlerRef) window.removeEventListener('keydown', keydownHandlerRef as EventListener);
+    if (clickHandlerRef) document.removeEventListener("click", clickHandlerRef);
+    if (keydownHandlerRef)
+        window.removeEventListener(
+            "keydown",
+            keydownHandlerRef as EventListener
+        );
 });
 
-watch(() => visibleMessages.value.length, () => {
-    scrollToBottom();
-});
+watch(
+    () => visibleMessages.value.length,
+    () => {
+        scrollToBottom();
+    }
+);
 </script>
 
 <style scoped>
 .irc-input-enter-active,
 .irc-input-leave-active {
-    transition: opacity 0.2s ease, transform 0.2s ease;
+    transition:
+        opacity 0.2s ease,
+        transform 0.2s ease;
 }
 
 .irc-input-enter-from,
@@ -385,7 +605,9 @@ watch(() => visibleMessages.value.length, () => {
 
 .irc-status-enter-active,
 .irc-status-leave-active {
-    transition: opacity 0.2s ease, transform 0.2s ease;
+    transition:
+        opacity 0.2s ease,
+        transform 0.2s ease;
 }
 
 .irc-status-enter-from,
diff --git a/src/components/layout/Sidebar.vue b/src/components/layout/Sidebar.vue
index 61968b73..bbd8b752 100644
--- a/src/components/layout/Sidebar.vue
+++ b/src/components/layout/Sidebar.vue
@@ -9,28 +9,32 @@ import {
     Users,
     SlidersVertical,
     UserCog,
-} from 'lucide-vue-next';
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useFriends } from '../../composables/useFriends';
-import { getIsDevelopment } from '../../utils/isDevelopment';
-import { isHalloweenEvent } from '../../utils/events';
+} from "lucide-vue-next";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useFriends } from "../../composables/useFriends";
+import { getIsDevelopment } from "../../utils/isDevelopment";
+import { isHalloweenEvent } from "../../utils/events";
 
 const { t } = useI18n();
 const halloweenActive = ref(isHalloweenEvent());
 
-const sidebarHelpVideo = new URL('../../assets/videos/sidebar-help.mp4', import.meta.url).href;
-const sidebarHelpKey = 'sidebar-help-shown';
+const sidebarHelpVideo = new URL(
+    "../../assets/videos/sidebar-help.mp4",
+    import.meta.url
+).href;
+const sidebarHelpKey = "sidebar-help-shown";
+const sidebarCenterKey = "sidebar-centered";
 const showSidebarHelp = ref(false);
 
 const props = defineProps<{
     activeTab: string;
     isOnline: boolean;
     isAuthenticated: boolean;
-    position?: 'left' | 'right' | 'top' | 'bottom';
+    position?: "left" | "right" | "top" | "bottom";
 }>();
 
-const emit = defineEmits(['changeTab', 'open-dev-menu', 'update:position']);
+const emit = defineEmits(["changeTab", "open-dev-menu", "update:position"]);
 const visible = ref(false);
 const isAltPressed = ref(false);
 const altPressCount = ref(0);
@@ -39,13 +43,15 @@ const altPressTimeout = ref<number | null>(null);
 const isDev = ref(false);
 
 const { onlineFriendsCount, friendRequests } = useFriends();
-const incomingRequestsCount = computed(() => (friendRequests.value?.received?.length) || 0);
+const incomingRequestsCount = computed(
+    () => friendRequests.value?.received?.length || 0
+);
 
 let homeClickCount = 0;
 const homeClickTimeout = ref<number | null>(null);
 
 const changeTab = (tab: string) => {
-    if (tab === 'home') {
+    if (tab === "home") {
         homeClickCount++;
         if (homeClickTimeout.value) {
             clearTimeout(homeClickTimeout.value);
@@ -59,7 +65,7 @@ const changeTab = (tab: string) => {
             if (homeClickTimeout.value) {
                 clearTimeout(homeClickTimeout.value);
             }
-            emit('open-dev-menu');
+            emit("open-dev-menu");
         }
     } else {
         homeClickCount = 0;
@@ -68,12 +74,11 @@ const changeTab = (tab: string) => {
         }
     }
 
-
-    emit('changeTab', tab);
+    emit("changeTab", tab);
 };
 
 const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.key === 'Alt') {
+    if (event.key === "Alt") {
         altPressCount.value++;
 
         if (altPressTimeout.value) {
@@ -105,8 +110,8 @@ const onDrag = (event: MouseEvent) => {
 
     if (!isDragging.value) {
         isDragging.value = true;
-        document.body.style.cursor = 'grabbing';
-        document.body.style.userSelect = 'none';
+        document.body.style.cursor = "grabbing";
+        document.body.style.userSelect = "none";
     }
 
     const { clientX, clientY } = event;
@@ -119,103 +124,124 @@ const onDrag = (event: MouseEvent) => {
     const distBottom = innerHeight - clientY;
 
     const min = Math.min(distLeft, distRight, distTop, distBottom);
-    let newPos = 'left';
+    let newPos = "left";
 
-    if (min === distLeft) newPos = 'left';
-    else if (min === distRight) newPos = 'right';
-    else if (min === distTop) newPos = 'top';
-    else if (min === distBottom) newPos = 'bottom';
+    if (min === distLeft) newPos = "left";
+    else if (min === distRight) newPos = "right";
+    else if (min === distTop) newPos = "top";
+    else if (min === distBottom) newPos = "bottom";
 
     dragTarget.value = newPos;
 
     if (newPos !== props.position) {
-        emit('update:position', newPos);
+        emit("update:position", newPos);
     }
 };
 
 const startDrag = (event: MouseEvent) => {
     const target = event.target as HTMLElement;
-    if (target.closest('button')) return;
+    if (target.closest("button")) return;
 
     isMouseDown.value = true;
     if (showSidebarHelp.value) {
         hideSidebarHelp();
     }
-    document.addEventListener('mouseup', stopDrag);
-    document.addEventListener('mousemove', onDrag);
+    document.addEventListener("mouseup", stopDrag);
+    document.addEventListener("mousemove", onDrag);
 };
 
 const stopDrag = () => {
     isMouseDown.value = false;
     if (isDragging.value) {
         isDragging.value = false;
-        document.body.style.cursor = '';
-        document.body.style.userSelect = '';
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
         dragTarget.value = null;
     }
-    document.removeEventListener('mouseup', stopDrag);
-    document.removeEventListener('mousemove', onDrag);
+    document.removeEventListener("mouseup", stopDrag);
+    document.removeEventListener("mousemove", onDrag);
 };
 
 const isCentered = ref(false);
 
 const toggleCenter = (event: MouseEvent) => {
     const target = event.target as HTMLElement;
-    if (target.closest('button')) return;
+    if (target.closest("button")) return;
     isCentered.value = !isCentered.value;
+    try {
+        localStorage.setItem(sidebarCenterKey, isCentered.value.toString());
+    } catch {}
     if (showSidebarHelp.value) {
         hideSidebarHelp();
     }
 };
 
-const currentPosition = computed(() => props.position || 'left');
+const currentPosition = computed(() => props.position || "left");
 
 const sidebarClasses = computed(() => {
-    const base = 'fixed bg-base-300 flex items-center shadow-md border-base-content/10 z-[90] transition-all duration-500 ease-in-out active:cursor-grabbing';
+    const base =
+        "fixed bg-base-300 flex items-center shadow-md border-base-content/10 z-[90] transition-all duration-500 ease-in-out active:cursor-grabbing";
     const pos = currentPosition.value;
 
-    if (pos === 'left') return `${base} w-20 left-0 top-10 flex-col py-6 border-r` + ' h-[calc(100vh-2.5rem)]';
-    if (pos === 'right') return `${base} w-20 right-0 top-10 flex-col py-6 border-l` + ' h-[calc(100vh-2.5rem)]';
-    if (pos === 'top') return `${base} w-full h-20 left-0 top-10 flex-row px-6 border-b`;
-    if (pos === 'bottom') return `${base} w-full h-20 left-0 bottom-0 flex-row px-6 border-t`;
-    return '';
+    if (pos === "left")
+        return (
+            `${base} w-20 left-0 top-10 flex-col py-6 border-r` +
+            " h-[calc(100vh-2.5rem)]"
+        );
+    if (pos === "right")
+        return (
+            `${base} w-20 right-0 top-10 flex-col py-6 border-l` +
+            " h-[calc(100vh-2.5rem)]"
+        );
+    if (pos === "top")
+        return `${base} w-full h-20 left-0 top-10 flex-row px-6 border-b`;
+    if (pos === "bottom")
+        return `${base} w-full h-20 left-0 bottom-0 flex-row px-6 border-t`;
+    return "";
 });
 
 const tooltipClass = computed(() => {
     const pos = currentPosition.value;
-    if (pos === 'left') return 'tooltip-right';
-    if (pos === 'right') return 'tooltip-left';
-    if (pos === 'top') return 'tooltip-bottom';
-    if (pos === 'bottom') return 'tooltip-top';
-    return 'tooltip-right';
+    if (pos === "left") return "tooltip-right";
+    if (pos === "right") return "tooltip-left";
+    if (pos === "top") return "tooltip-bottom";
+    if (pos === "bottom") return "tooltip-top";
+    return "tooltip-right";
 });
 
 const containerClasses = computed(() => {
-    return ['flex', 'gap-4', ['top', 'bottom'].includes(currentPosition.value) ? 'flex-row' : 'flex-col'];
+    return [
+        "flex",
+        "gap-4",
+        ["top", "bottom"].includes(currentPosition.value)
+            ? "flex-row"
+            : "flex-col",
+    ];
 });
 
 const footerClasses = computed(() => {
-    const isHorizontal = ['top', 'bottom'].includes(currentPosition.value);
-    return [isHorizontal ? 'flex-row' : 'flex-col', 'flex', 'gap-4'];
+    const isHorizontal = ["top", "bottom"].includes(currentPosition.value);
+    return [isHorizontal ? "flex-row" : "flex-col", "flex", "gap-4"];
 });
 
 const animationClass = computed(() => {
     if (!visible.value) {
-        if (currentPosition.value === 'left') return 'sidebar-hidden-left';
-        if (currentPosition.value === 'right') return 'sidebar-hidden-right';
-        if (currentPosition.value === 'top') return 'sidebar-hidden-top';
-        if (currentPosition.value === 'bottom') return 'sidebar-hidden-bottom';
+        if (currentPosition.value === "left") return "sidebar-hidden-left";
+        if (currentPosition.value === "right") return "sidebar-hidden-right";
+        if (currentPosition.value === "top") return "sidebar-hidden-top";
+        if (currentPosition.value === "bottom") return "sidebar-hidden-bottom";
     }
-    return 'sidebar-entered';
+    return "sidebar-entered";
 });
 
 const helpTooltipClasses = computed(() => {
     const pos = currentPosition.value;
-    if (pos === 'left') return 'left-24 top-16';
-    if (pos === 'right') return 'right-24 top-16';
-    if (pos === 'top') return 'left-1/2 top-32 transform -translate-x-1/2';
-    if (pos === 'bottom') return 'left-1/2 bottom-24 transform -translate-x-1/2';
-    return 'left-24 top-16';
+    if (pos === "left") return "left-24 top-16";
+    if (pos === "right") return "right-24 top-16";
+    if (pos === "top") return "left-1/2 top-32 transform -translate-x-1/2";
+    if (pos === "bottom")
+        return "left-1/2 bottom-24 transform -translate-x-1/2";
+    return "left-24 top-16";
 });
 
 const sidebarRef = ref<HTMLElement | null>(null);
@@ -223,9 +249,8 @@ const helpTooltipRef = ref<HTMLElement | null>(null);
 
 const hideSidebarHelp = () => {
     try {
-        localStorage.setItem(sidebarHelpKey, 'true');
-    } catch {
-    }
+        localStorage.setItem(sidebarHelpKey, "true");
+    } catch {}
     showSidebarHelp.value = false;
 };
 
@@ -237,12 +262,12 @@ const handleDocumentClick = (event: MouseEvent) => {
 };
 
 watch(showSidebarHelp, (val) => {
-    if (val) document.addEventListener('click', handleDocumentClick);
-    else document.removeEventListener('click', handleDocumentClick);
+    if (val) document.addEventListener("click", handleDocumentClick);
+    else document.removeEventListener("click", handleDocumentClick);
 });
 
 onMounted(async () => {
-    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener("keydown", handleKeyDown);
 
     visible.value = false;
     requestAnimationFrame(() => {
@@ -251,7 +276,6 @@ onMounted(async () => {
         }, 40);
     });
 
-
     isDev.value = await getIsDevelopment();
 
     try {
@@ -259,12 +283,16 @@ onMounted(async () => {
         if (!shown) {
             showSidebarHelp.value = true;
         }
-    } catch {
-    }
+
+        const centered = localStorage.getItem(sidebarCenterKey);
+        if (centered === "true") {
+            isCentered.value = true;
+        }
+    } catch {}
 });
 
 onUnmounted(() => {
-    window.removeEventListener('keydown', handleKeyDown);
+    window.removeEventListener("keydown", handleKeyDown);
 
     if (homeClickTimeout.value) {
         clearTimeout(homeClickTimeout.value);
@@ -273,157 +301,273 @@ onUnmounted(() => {
     if (altPressTimeout.value) {
         clearTimeout(altPressTimeout.value);
     }
-    document.removeEventListener('click', handleDocumentClick);
+    document.removeEventListener("click", handleDocumentClick);
 });
 </script>
 
 <template>
     <div v-if="isDragging" class="fixed inset-0 z-40 pointer-events-none">
-        <div class="absolute left-0 top-10 w-20 border-2 border-dashed transition-all duration-200"
+        <div
+            class="absolute left-0 top-10 w-20 border-2 border-dashed transition-all duration-200"
             style="height: calc(100vh - 2.5rem)"
-            :class="[dragTarget === 'left' ? 'border-primary  scale-105 opacity-100' : 'border-base-content/10 scale-100 opacity-50']">
-        </div>
-        <div class="absolute right-0 top-10 w-20 border-2 border-dashed transition-all duration-200"
+            :class="[
+                dragTarget === 'left'
+                    ? 'border-primary  scale-105 opacity-100'
+                    : 'border-base-content/10 scale-100 opacity-50',
+            ]"
+        ></div>
+        <div
+            class="absolute right-0 top-10 w-20 border-2 border-dashed transition-all duration-200"
             style="height: calc(100vh - 2.5rem)"
-            :class="[dragTarget === 'right' ? 'border-primary  scale-105 opacity-100' : 'border-base-content/10 scale-100 opacity-50']">
-        </div>
-        <div class="absolute left-0 top-10 w-full h-20 border-2 border-dashed transition-all duration-200"
-            :class="[dragTarget === 'top' ? 'border-primary  scale-105 opacity-100' : 'border-base-content/10 scale-100 opacity-50']">
-        </div>
-        <div class="absolute left-0 bottom-0 w-full h-20 border-2 border-dashed transition-all duration-200"
-            :class="[dragTarget === 'bottom' ? 'border-primary  scale-105 opacity-100' : 'border-base-content/10 scale-100 opacity-50']">
-        </div>
+            :class="[
+                dragTarget === 'right'
+                    ? 'border-primary  scale-105 opacity-100'
+                    : 'border-base-content/10 scale-100 opacity-50',
+            ]"
+        ></div>
+        <div
+            class="absolute left-0 top-10 w-full h-20 border-2 border-dashed transition-all duration-200"
+            :class="[
+                dragTarget === 'top'
+                    ? 'border-primary  scale-105 opacity-100'
+                    : 'border-base-content/10 scale-100 opacity-50',
+            ]"
+        ></div>
+        <div
+            class="absolute left-0 bottom-0 w-full h-20 border-2 border-dashed transition-all duration-200"
+            :class="[
+                dragTarget === 'bottom'
+                    ? 'border-primary  scale-105 opacity-100'
+                    : 'border-base-content/10 scale-100 opacity-50',
+            ]"
+        ></div>
     </div>
 
-    <div ref="sidebarRef" :class="[sidebarClasses, animationClass]" @mousedown="startDrag" @dblclick="toggleCenter">
-        <div v-if="showSidebarHelp" ref="helpTooltipRef"
-            :class="['sidebar-help-tooltip absolute z-60 p-3 w-80 origin-top-left bg-base-100 rounded-lg ml-3 mt-[100%]', helpTooltipClasses]">
+    <div
+        ref="sidebarRef"
+        :class="[sidebarClasses, animationClass, 'main-sidebar']"
+        @mousedown="startDrag"
+        @dblclick="toggleCenter"
+    >
+        <div
+            v-if="showSidebarHelp"
+            ref="helpTooltipRef"
+            :class="[
+                'sidebar-help-tooltip absolute z-60 p-3 w-80 origin-top-left bg-base-100 rounded-lg ml-3 mt-[100%]',
+                helpTooltipClasses,
+            ]"
+        >
             <div class="flex flex-col gap-2">
-                <video class="w-full rounded-md mb-2" :src="sidebarHelpVideo" muted autoplay loop playsinline
-                    controls></video>
+                <video
+                    class="w-full rounded-md mb-2"
+                    :src="sidebarHelpVideo"
+                    muted
+                    autoplay
+                    loop
+                    playsinline
+                    controls
+                ></video>
                 <div class="text-sm">
-                    <strong>{{ t('navigation.sidebar_help.title') }}</strong>&nbsp;{{ t('navigation.sidebar_help.tip')
-                    }}
+                    <strong>{{ t("navigation.sidebar_help.title") }}</strong
+                    >&nbsp;{{ t("navigation.sidebar_help.tip") }}
                 </div>
                 <div class="flex justify-end mt-1 gap-2">
-                    <button class="btn btn-ghost btn-xs" @click.stop="hideSidebarHelp">{{
-                        t('navigation.sidebar_help.got_it')
-                        }}
+                    <button
+                        class="btn btn-ghost btn-xs"
+                        @click.stop="hideSidebarHelp"
+                    >
+                        {{ t("navigation.sidebar_help.got_it") }}
                     </button>
                 </div>
             </div>
         </div>
-        <div class="transition-all duration-500 ease-in-out basis-0" :class="isCentered ? 'grow' : 'grow-0'">
-        </div>
+        <div
+            class="transition-all duration-500 ease-in-out basis-0"
+            :class="isCentered ? 'grow' : 'grow-0'"
+        ></div>
 
         <div :class="containerClasses">
-            <div class="tooltip" :class="[tooltipClass, halloweenActive ? 'tooltip-warning' : 'tooltip-accent']"
-                :data-tip="t('navigation.home')">
-                <button class="btn btn-ghost btn-square rounded-lg transition-all relative sidebar-btn" :class="{
-                    'bg-primary text-primary-content shadow-lg scale-110':
-                        activeTab === 'home',
-                }" @click="changeTab('home')">
+            <div
+                class="tooltip"
+                :class="[
+                    tooltipClass,
+                    halloweenActive ? 'tooltip-warning' : 'tooltip-accent',
+                ]"
+                :data-tip="t('navigation.home')"
+            >
+                <button
+                    class="btn btn-ghost btn-square rounded-lg transition-all relative sidebar-btn"
+                    :class="{
+                        'bg-primary text-primary-content shadow-lg scale-110':
+                            activeTab === 'home',
+                    }"
+                    @click="changeTab('home')"
+                >
                     <Home class="w-5 h-5" />
-                    <span v-if="halloweenActive" class="absolute -top-1 -right-1 text-xl">🎃</span>
-                    <span v-if="!isOnline"
-                        class="absolute top-0 right-0 w-3 h-3 bg-error rounded-full border-2 border-base-300"></span>
+                    <span
+                        v-if="halloweenActive"
+                        class="absolute -top-1 -right-1 text-xl"
+                        >🎃</span
+                    >
+                    <span
+                        v-if="!isOnline"
+                        class="absolute top-0 right-0 w-3 h-3 bg-error rounded-full border-2 border-base-300"
+                    ></span>
                 </button>
             </div>
 
-
-            <div v-if="isAuthenticated" class="tooltip tooltip-accent" :class="tooltipClass"
-                :data-tip="t('navigation.friends')">
-                <button class="btn btn-ghost btn-square rounded-lg transition-all relative sidebar-btn"
-                    @click="changeTab('friends')" :class="{
+            <div
+                v-if="isAuthenticated"
+                class="tooltip tooltip-accent"
+                :class="tooltipClass"
+                :data-tip="t('navigation.friends')"
+            >
+                <button
+                    class="btn btn-ghost btn-square rounded-lg transition-all relative sidebar-btn"
+                    @click="changeTab('friends')"
+                    :class="{
                         'bg-primary text-primary-content shadow-lg scale-110':
                             activeTab === 'friends',
-                    }">
+                    }"
+                >
                     <Users class="w-5 h-5" />
-                    <span v-if="onlineFriendsCount > 0"
-                        class="absolute -top-1 -right-1 bg-success text-success-content text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center border-2 border-base-300">
+                    <span
+                        v-if="onlineFriendsCount > 0"
+                        class="absolute -top-1 -right-1 bg-success text-success-content text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center border-2 border-base-300"
+                    >
                         {{ onlineFriendsCount }}
                     </span>
 
-                    <span v-if="incomingRequestsCount > 0"
-                        class="absolute -bottom-1 -right-1 bg-info text-info-content text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center border-2 border-base-300">
+                    <span
+                        v-if="incomingRequestsCount > 0"
+                        class="absolute -bottom-1 -right-1 bg-info text-info-content text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center border-2 border-base-300"
+                    >
                         {{ incomingRequestsCount }}
                     </span>
                 </button>
             </div>
 
-            <div class="tooltip tooltip-accent" :class="tooltipClass" :data-tip="t('navigation.settings')">
-                <button class="btn btn-ghost btn-square rounded-lg sidebar-btn" :class="{
-                    'bg-primary text-primary-content shadow-lg scale-110':
-                        activeTab === 'settings',
-                }" @click="changeTab('settings')">
-                    <Settings class="w-5 h-5 settings-icon" :style="{
-                        transform:
-                            activeTab === 'settings'
-                                ? 'rotate(180deg)'
-                                : 'rotate(0deg)',
-                    }" />
+            <div
+                class="tooltip tooltip-accent"
+                :class="tooltipClass"
+                :data-tip="t('navigation.settings')"
+            >
+                <button
+                    class="btn btn-ghost btn-square rounded-lg sidebar-btn"
+                    :class="{
+                        'bg-primary text-primary-content shadow-lg scale-110':
+                            activeTab === 'settings',
+                    }"
+                    @click="changeTab('settings')"
+                >
+                    <Settings
+                        class="w-5 h-5 settings-icon"
+                        :style="{
+                            transform:
+                                activeTab === 'settings'
+                                    ? 'rotate(180deg)'
+                                    : 'rotate(0deg)',
+                        }"
+                    />
                 </button>
             </div>
-            <div class="tooltip tooltip-accent" :class="tooltipClass" :data-tip="t('navigation.customization')">
-                <button class="btn btn-ghost btn-square rounded-lg transition-all sidebar-btn" :class="{
-                    'bg-primary text-primary-content shadow-lg scale-110':
-                        activeTab === 'customization',
-                }" @click="changeTab('customization')">
+            <div
+                class="tooltip tooltip-accent"
+                :class="tooltipClass"
+                :data-tip="t('navigation.customization')"
+            >
+                <button
+                    class="btn btn-ghost btn-square rounded-lg transition-all sidebar-btn"
+                    :class="{
+                        'bg-primary text-primary-content shadow-lg scale-110':
+                            activeTab === 'customization',
+                    }"
+                    @click="changeTab('customization')"
+                >
                     <SlidersVertical class="w-5 h-5" />
                 </button>
             </div>
 
-            <div v-show="isAltPressed" class="tooltip tooltip-accent" :class="tooltipClass"
-                :data-tip="t('navigation.logs')">
-                <button class="btn btn-ghost btn-square rounded-lg sidebar-btn" :class="{
-                    'bg-primary text-primary-content shadow-lg scale-110':
-                        activeTab === 'app_logs',
-                }" @click="changeTab('app_logs')">
+            <div
+                v-show="isAltPressed"
+                class="tooltip tooltip-accent"
+                :class="tooltipClass"
+                :data-tip="t('navigation.logs')"
+            >
+                <button
+                    class="btn btn-ghost btn-square rounded-lg sidebar-btn"
+                    :class="{
+                        'bg-primary text-primary-content shadow-lg scale-110':
+                            activeTab === 'app_logs',
+                    }"
+                    @click="changeTab('app_logs')"
+                >
                     <Terminal class="w-5 h-5" />
                 </button>
             </div>
         </div>
 
-        <div class="transition-all duration-500 ease-in-out basis-4" :class="isCentered ? 'grow-0' : 'grow'">
-        </div>
+        <div
+            class="transition-all duration-500 ease-in-out basis-4"
+            :class="isCentered ? 'grow-0' : 'grow'"
+        ></div>
 
         <div :class="footerClasses">
-            <div class="tooltip tooltip-accent" :class="tooltipClass" :data-tip="isAuthenticated
-                ? t('navigation.account')
-                : t('auth.login.title')
-                ">
-                <button class="btn btn-ghost btn-square rounded-lg relative sidebar-btn" :class="{
-                    'bg-primary text-primary-content shadow-lg scale-110': [
-                        'login',
-                        'register',
-                        'account',
-                    ].includes(activeTab),
-                }" @click="changeTab(isAuthenticated ? 'account' : 'login')">
+            <div
+                class="tooltip tooltip-accent"
+                :class="tooltipClass"
+                :data-tip="
+                    isAuthenticated
+                        ? t('navigation.account')
+                        : t('auth.login.title')
+                "
+            >
+                <button
+                    class="btn btn-ghost btn-square rounded-lg relative sidebar-btn"
+                    :class="{
+                        'bg-primary text-primary-content shadow-lg scale-110': [
+                            'login',
+                            'register',
+                            'account',
+                        ].includes(activeTab),
+                    }"
+                    @click="changeTab(isAuthenticated ? 'account' : 'login')"
+                >
                     <LogIn v-if="!isAuthenticated" class="w-5 h-5" />
                     <UserCog v-if="isAuthenticated && isDev" class="w-5 h-5" />
                     <User v-if="isAuthenticated && !isDev" class="w-5 h-5" />
                 </button>
             </div>
 
-            <div class="tooltip tooltip-accent" :class="tooltipClass" :data-tip="t('navigation.about')">
-                <button class="btn btn-ghost btn-square rounded-lg transition-all sidebar-btn"
-                    @click="changeTab('about')" :class="{
+            <div
+                class="tooltip tooltip-accent"
+                :class="tooltipClass"
+                :data-tip="t('navigation.about')"
+            >
+                <button
+                    class="btn btn-ghost btn-square rounded-lg transition-all sidebar-btn"
+                    @click="changeTab('about')"
+                    :class="{
                         'bg-primary text-primary-content shadow-lg scale-110':
                             activeTab === 'about',
-                    }">
+                    }"
+                >
                     <Info class="w-5 h-5" />
                 </button>
             </div>
         </div>
 
-        <div class="transition-all duration-500 ease-in-out basis-0" :class="isCentered ? 'grow' : 'grow-0'">
-        </div>
+        <div
+            class="transition-all duration-500 ease-in-out basis-0"
+            :class="isCentered ? 'grow' : 'grow-0'"
+        ></div>
     </div>
 </template>
 
 <style scoped>
 .btn-square {
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    transition:
+        all 0.2s cubic-bezier(0.4, 0, 0.2, 1),
         transform 0.15s ease-out;
     outline: none;
 }
@@ -446,7 +590,7 @@ onUnmounted(() => {
 
 .sidebar-btn,
 .btn-square.sidebar-btn,
-.btn-square.sidebar-btn>* {
+.btn-square.sidebar-btn > * {
     border-radius: var(--radius-box, 0.5rem) !important;
 }
 
@@ -454,7 +598,6 @@ onUnmounted(() => {
     will-change: transform, box-shadow;
 }
 
-
 .sidebar-hidden-left {
     transform: translateX(-28px);
     opacity: 0;
@@ -482,54 +625,58 @@ onUnmounted(() => {
 .sidebar-entered {
     transform: translateX(0) translateY(0);
     opacity: 1;
-    transition: transform 1.6s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.5s ease;
+    transition:
+        transform 1.6s cubic-bezier(0.2, 0.9, 0.2, 1),
+        opacity 0.5s ease;
 }
 
-.sidebar-hidden-left .flex>*,
-.sidebar-hidden-left .mt-auto>*,
-.sidebar-hidden-right .flex>*,
-.sidebar-hidden-right .mt-auto>*,
-.sidebar-hidden-top .flex>*,
-.sidebar-hidden-top .mt-auto>*,
-.sidebar-hidden-bottom .flex>*,
-.sidebar-hidden-bottom .mt-auto>* {
+.sidebar-hidden-left .flex > *,
+.sidebar-hidden-left .mt-auto > *,
+.sidebar-hidden-right .flex > *,
+.sidebar-hidden-right .mt-auto > *,
+.sidebar-hidden-top .flex > *,
+.sidebar-hidden-top .mt-auto > *,
+.sidebar-hidden-bottom .flex > *,
+.sidebar-hidden-bottom .mt-auto > * {
     opacity: 0;
     transform: scale(0.995);
 }
 
-.sidebar-entered .flex>*,
-.sidebar-entered .mt-auto>* {
+.sidebar-entered .flex > *,
+.sidebar-entered .mt-auto > * {
     opacity: 1;
     transform: scale(1);
-    transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.42s ease;
+    transition:
+        transform 0.42s cubic-bezier(0.2, 0.9, 0.2, 1),
+        opacity 0.42s ease;
 }
 
-.sidebar-entered .flex>*:nth-child(1) {
+.sidebar-entered .flex > *:nth-child(1) {
     transition-delay: 0.06s;
 }
 
-.sidebar-entered .flex>*:nth-child(2) {
-    transition-delay: 0.10s;
+.sidebar-entered .flex > *:nth-child(2) {
+    transition-delay: 0.1s;
 }
 
-.sidebar-entered .flex>*:nth-child(3) {
+.sidebar-entered .flex > *:nth-child(3) {
     transition-delay: 0.14s;
 }
 
-.sidebar-entered .flex>*:nth-child(4) {
+.sidebar-entered .flex > *:nth-child(4) {
     transition-delay: 0.18s;
 }
 
-.sidebar-entered .mt-auto>*:nth-child(1) {
+.sidebar-entered .mt-auto > *:nth-child(1) {
     transition-delay: 0.22s;
 }
 
-.sidebar-entered .mt-auto>*:nth-child(2) {
+.sidebar-entered .mt-auto > *:nth-child(2) {
     transition-delay: 0.26s;
 }
 
-.sidebar-entered .mt-auto>*:nth-child(3) {
-    transition-delay: 0.30s;
+.sidebar-entered .mt-auto > *:nth-child(3) {
+    transition-delay: 0.3s;
 }
 
 .sidebar-help-tooltip video {
diff --git a/src/components/layout/Titlebar.vue b/src/components/layout/Titlebar.vue
index 12d08363..03f3cd44 100644
--- a/src/components/layout/Titlebar.vue
+++ b/src/components/layout/Titlebar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { getCurrentWindow } from '@tauri-apps/api/window';
-import { invoke } from '@tauri-apps/api/core';
-import { ref, onMounted, onUnmounted } from 'vue';
-import { Minus, Square, X } from 'lucide-vue-next';
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { invoke } from "@tauri-apps/api/core";
+import { ref, onMounted, onUnmounted, computed } from "vue";
+import { Minus, Square, X } from "lucide-vue-next";
 
 const appWindow = getCurrentWindow();
 const minimize = async () => appWindow.minimize();
@@ -22,22 +22,56 @@ const checkMax = async () => {
     }
 };
 
-const version = ref('');
-const codename = ref('');
-const commitFull = ref('');
-const commitShort = ref('');
+const version = ref("");
+const codename = ref("");
+const commitFull = ref("");
+const commitShort = ref("");
+const commitMessage = ref("");
+const apiUrl = ref("");
+const cdnUrl = ref("");
 const isVisible = ref(false);
 
+const tooltipContent = computed(() => {
+    const lines: string[] = [];
+    if (version.value)
+        lines.push(
+            `Build: v${version.value}${codename.value ? ` (${codename.value})` : ""}`
+        );
+    if (apiUrl.value) lines.push(`Server: ${apiUrl.value}`);
+    if (cdnUrl.value) lines.push(`CDN: ${cdnUrl.value}`);
+    if (commitFull.value) lines.push(`Commit: ${commitFull.value}`);
+    if (commitMessage.value) lines.push(`\nMessage: ${commitMessage.value}`);
+    return lines.length > 0 ? lines.join("\n") : "No version info";
+});
+
 const fetchVersion = async () => {
     try {
-        const result = await invoke('get_version');
-        const data = typeof result === 'string' ? JSON.parse(result) : result;
-        version.value = data.version || '';
-        codename.value = data.codename || '';
-        commitFull.value = String(data.commitHash || '');
-        commitShort.value = commitFull.value ? String(commitFull.value).slice(0, 7) : '';
+        const result = await invoke("get_version");
+        const data = typeof result === "string" ? JSON.parse(result) : result;
+        version.value = data.version || "";
+        codename.value = data.codename || "";
+        commitFull.value = String(data.commitHash || "");
+        commitShort.value = commitFull.value
+            ? String(commitFull.value).slice(0, 7)
+            : "";
+        commitMessage.value = data.commitMessage || "";
+    } catch (e) {
+        console.error("Titlebar: failed to fetch version info", e);
+    }
+
+    try {
+        const s = await invoke("get_api_url");
+        apiUrl.value = typeof s === "string" ? s : String(s);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (e) {
+        apiUrl.value = "";
+    }
+    try {
+        const c = await invoke("get_cdn_url");
+        cdnUrl.value = typeof c === "string" ? c : String(c);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } catch (e) {
-        console.error('Titlebar: failed to fetch version info', e);
+        cdnUrl.value = "";
     }
 };
 
@@ -45,57 +79,94 @@ let resizeUnlisten: any;
 onMounted(() => {
     fetchVersion();
     checkMax();
-    resizeUnlisten = appWindow.listen('tauri://resize', checkMax);
+    resizeUnlisten = appWindow.listen("tauri://resize", checkMax);
     setTimeout(() => {
         isVisible.value = true;
     }, 300);
 });
 
 onUnmounted(() => {
-    if (resizeUnlisten && typeof resizeUnlisten.then === 'function') {
+    if (resizeUnlisten && typeof resizeUnlisten.then === "function") {
         resizeUnlisten.then((un: () => void) => un());
     }
 });
 </script>
 
 <template>
-    <div data-tauri-drag-region :class="[
-        'titlebar fixed top-0 left-0 right-0 flex justify-between items-center h-10 select-none z-100',
-        isVisible ? 'opacity-100' : 'opacity-0'
-    ]">
-        <div class="flex items-center pl-3 gap-2 pointer-events-none">
-            <span :class="[
-                'text-[12px] font-semibold tracking-tight text-base-content/80 uppercase',
-                'transition-all duration-1000 delay-200 ease-out',
-                isVisible ? 'opacity-100 translate-x-0 scale-100' : 'opacity-0 -translate-x-8 scale-90'
-            ]">
+    <div
+        data-tauri-drag-region
+        :class="[
+            'titlebar fixed top-0 left-0 right-0 flex justify-between items-center h-10 select-none z-100',
+            isVisible ? 'opacity-100' : 'opacity-0',
+        ]"
+    >
+        <div
+            data-tauri-drag-region
+            class="flex items-center pl-3 gap-2 h-full grow"
+        >
+            <span
+                data-tauri-drag-region
+                :class="[
+                    'text-[12px] font-semibold tracking-tight text-base-content/80 uppercase cursor-default',
+                    'transition-all duration-1000 delay-200 ease-out',
+                    isVisible
+                        ? 'opacity-100 translate-x-0 scale-100'
+                        : 'opacity-0 -translate-x-8 scale-90',
+                ]"
+            >
                 CollapseLoader
             </span>
-            <span v-if="version || codename || commitShort"
-                :title="(version ? `v${version}` : '') + (codename ? ` · ${codename}` : '') + (commitFull ? ` (commit ${commitFull})` : '')"
+
+            <div
+                v-if="version || codename || commitShort"
+                data-tauri-drag-region
+                :data-tip="tooltipContent"
                 :class="[
-                    'text-[10px] font-medium tracking-tight text-base-content/50 uppercase select-none',
+                    'tooltip tooltip-bottom tooltip-multiline cursor-default pointer-events-auto',
+                    'text-[10px] font-medium tracking-tight text-base-content/50 select-none',
                     'transition-all duration-1000 delay-400 ease-out',
-                    isVisible ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-6'
-                ]">
-                <template v-if="version">v{{ version }}</template>
-                <template v-if="codename"> <span class="mx-1">·</span> {{ codename }}</template>
-                <template v-if="commitShort"> <span class="mx-1">·</span> {{ commitShort }}</template>
-            </span>
+                    isVisible
+                        ? 'opacity-100 translate-x-0'
+                        : 'opacity-0 -translate-x-6',
+                ]"
+            >
+                <span data-tauri-drag-region v-if="version"
+                    >v{{ version }}</span
+                >
+                <span data-tauri-drag-region v-if="codename">
+                    <span class="mx-1">·</span> {{ codename }}</span
+                >
+                <span data-tauri-drag-region v-if="commitShort">
+                    <span class="mx-1">·</span>
+                    <span data-tauri-drag-region>{{ commitShort }}</span>
+                </span>
+            </div>
         </div>
-        <div :class="[
-            'flex h-full',
-            'transition-all duration-1000 delay-300 ease-out',
-            isVisible ? 'opacity-100 translate-x-0 scale-100' : 'opacity-0 translate-x-8 scale-90'
-        ]">
-            <button class="titlebar-btn" @click="minimize" title="Minimize" aria-label="Minimize window">
+
+        <div
+            :class="[
+                'flex h-full relative z-10',
+                'transition-all duration-1000 delay-300 ease-out',
+                isVisible
+                    ? 'opacity-100 translate-x-0 scale-100'
+                    : 'opacity-0 translate-x-8 scale-90',
+            ]"
+        >
+            <button class="titlebar-btn" @click="minimize" title="Minimize">
                 <Minus :size="14" :stroke-width="2.5" />
             </button>
-            <button class="titlebar-btn" @click="maximize" :title="isMaximized ? 'Restore' : 'Maximize'"
-                :aria-label="isMaximized ? 'Restore window' : 'Maximize window'">
+            <button
+                class="titlebar-btn"
+                @click="maximize"
+                :title="isMaximized ? 'Restore' : 'Maximize'"
+            >
                 <Square :size="12" :stroke-width="2.5" />
             </button>
-            <button class="titlebar-btn titlebar-close" @click="close" title="Close" aria-label="Close window">
+            <button
+                class="titlebar-btn titlebar-close"
+                @click="close"
+                title="Close"
+            >
                 <X :size="14" :stroke-width="2.5" />
             </button>
         </div>
@@ -104,10 +175,33 @@ onUnmounted(() => {
 
 <style scoped>
 .titlebar {
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.02));
+    background: linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0.02),
+        rgba(0, 0, 0, 0.02)
+    );
     backdrop-filter: blur(6px);
     border-bottom: 1px solid rgba(148, 163, 184, 0.06);
-    transition: opacity .25s ease, transform .35s cubic-bezier(.2, .9, .2, 1);
+    transition:
+        opacity 0.25s ease,
+        transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1);
+}
+
+.tooltip-multiline:before {
+    white-space: pre-wrap;
+    text-align: left;
+    max-width: 320px;
+    font-size: 11px;
+    line-height: 1.5;
+    padding: 10px 12px;
+    background-color: #121212;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+}
+
+.tooltip-multiline:after {
+    border-bottom-color: #121212;
 }
 
 .titlebar-btn {
@@ -118,7 +212,11 @@ onUnmounted(() => {
     justify-content: center;
     background: transparent;
     border: none;
-    transition: transform .18s ease, background-color .12s ease, color .12s ease, box-shadow .12s ease;
+    transition:
+        transform 0.18s ease,
+        background-color 0.12s ease,
+        color 0.12s ease,
+        box-shadow 0.12s ease;
     cursor: pointer;
     outline: none;
 }
@@ -130,7 +228,7 @@ onUnmounted(() => {
 }
 
 .titlebar-btn:active {
-    transform: scale(.96);
+    transform: scale(0.96);
 }
 
 .titlebar-btn:focus {
@@ -144,11 +242,10 @@ onUnmounted(() => {
 }
 
 @media (prefers-reduced-motion: reduce) {
-
     .titlebar,
     .titlebar-btn {
         transition: none !important;
         transform: none !important;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/layout/forms/LoginForm.vue b/src/components/layout/forms/LoginForm.vue
new file mode 100644
index 00000000..9530138c
--- /dev/null
+++ b/src/components/layout/forms/LoginForm.vue
@@ -0,0 +1,99 @@
+<template>
+    <form @submit.prevent="handleLogin" class="space-y-4">
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">{{ t("common.username") }}</span>
+            </label>
+            <input
+                v-model="username"
+                type="text"
+                :placeholder="t('auth.login.username_placeholder')"
+                class="input input-bordered w-full bg-base-100"
+                required
+                :disabled="isLoading"
+            />
+        </div>
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">{{ t("common.password") }}</span>
+            </label>
+            <input
+                v-model="password"
+                type="password"
+                :placeholder="t('auth.login.password_placeholder')"
+                class="input input-bordered w-full bg-base-100"
+                required
+                :disabled="isLoading"
+            />
+        </div>
+        <div class="pt-2">
+            <button
+                type="submit"
+                class="btn btn-primary w-full"
+                :disabled="isLoading"
+            >
+                <span v-if="isLoading" class="loading loading-spinner"></span>
+                {{ t("auth.login.login_button") }}
+            </button>
+        </div>
+    </form>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { apiPost } from "../../../services/apiClient";
+import { getApiBaseWithVersion } from "../../../config";
+import { useToast } from "../../../services/toastService";
+import { userService } from "../../../services/userService";
+import { invoke } from "@tauri-apps/api/core";
+
+const { t } = useI18n();
+const { addToast } = useToast();
+const emit = defineEmits(["logged-in", "unverified"]);
+
+const username = ref("");
+const password = ref("");
+const isLoading = ref(false);
+
+const handleLogin = async () => {
+    try {
+        isLoading.value = true;
+        const response = await apiPost(
+            `${getApiBaseWithVersion()}/auth/login`,
+            {
+                username: username.value,
+                password: password.value,
+            }
+        );
+
+        if (response.token) {
+            localStorage.setItem("authToken", response.token);
+            userService.clearCache();
+            try {
+                await invoke("update_presence", {
+                    details: "In Menu",
+                    state: "Browsing clients",
+                });
+            } catch (e) {
+                console.error("Presence update failed", e);
+            }
+            addToast(t("auth.login.success"), "success");
+            emit("logged-in");
+        }
+    } catch (error: any) {
+        console.error("Login failed:", error);
+        const errorMsg = error.response?.data?.error || "";
+        console.log("Error message:", errorMsg);
+        if (errorMsg.startsWith("Email not verified")) {
+            const email = errorMsg.split(": ")[1] || "";
+            console.log("Emitting unverified event with email:", email);
+            emit("unverified", { username: username.value, email });
+        } else {
+            addToast(errorMsg || t("auth.login.error"), "error");
+        }
+    } finally {
+        isLoading.value = false;
+    }
+};
+</script>
diff --git a/src/components/layout/forms/RegistrationForm.vue b/src/components/layout/forms/RegistrationForm.vue
index 5f9add67..90ffb833 100644
--- a/src/components/layout/forms/RegistrationForm.vue
+++ b/src/components/layout/forms/RegistrationForm.vue
@@ -1,45 +1,92 @@
 <template>
-    <div class="space-y-4">
+    <div v-if="!showVerificationMessage" class="space-y-4">
         <div class="form-control">
-            <input v-model="username" type="text" :placeholder="t('auth.register.username_placeholder')"
-                class="input input-bordered w-full bg-base-100" required :disabled="isRegistering" />
+            <input
+                v-model="username"
+                type="text"
+                :placeholder="t('auth.register.username_placeholder')"
+                class="input input-bordered w-full bg-base-100"
+                required
+                :disabled="isRegistering"
+            />
         </div>
         <div class="form-control">
-            <input v-model="email" type="email" :placeholder="t('auth.register.email_placeholder')"
-                class="input input-bordered w-full bg-base-100" required :disabled="isRegistering" />
+            <input
+                v-model="email"
+                type="email"
+                :placeholder="t('auth.register.email_placeholder')"
+                class="input input-bordered w-full bg-base-100"
+                required
+                :disabled="isRegistering"
+            />
         </div>
         <div class="form-control">
-            <input v-model="password" type="password" :placeholder="t('auth.register.password_placeholder')"
-                class="input input-bordered w-full bg-base-100" required :disabled="isRegistering" />
+            <input
+                v-model="password"
+                type="password"
+                :placeholder="t('auth.register.password_placeholder')"
+                class="input input-bordered w-full bg-base-100"
+                required
+                :disabled="isRegistering"
+            />
         </div>
         <div class="form-control">
-            <input v-model="confirmPassword" type="password"
+            <input
+                v-model="confirmPassword"
+                type="password"
                 :placeholder="t('auth.register.confirm_password_placeholder')"
-                class="input input-bordered w-full bg-base-100" required :disabled="isRegistering" />
+                class="input input-bordered w-full bg-base-100"
+                required
+                :disabled="isRegistering"
+            />
         </div>
         <div class="flex gap-2 pt-3">
-            <button @click="handleRegister" class="btn btn-primary flex-1" :disabled="isRegistering">
+            <button
+                @click="handleRegister"
+                class="btn btn-primary flex-1"
+                :disabled="isRegistering"
+            >
                 {{
                     isRegistering
-                        ? t('modals.initial_setup.registration.registering')
-                        : t('auth.register.register_button')
+                        ? t("modals.initial_setup.registration.registering")
+                        : t("auth.register.register_button")
                 }}
             </button>
-            <button v-if="showCancelButton" class="btn btn-outline" :disabled="isRegistering" @click="emit('cancel')">
-                {{ t('common.cancel') }}
+            <button
+                v-if="showCancelButton"
+                class="btn btn-outline"
+                :disabled="isRegistering"
+                @click="emit('cancel')"
+            >
+                {{ t("common.cancel") }}
             </button>
         </div>
     </div>
+    <div v-else class="text-center space-y-4 py-4">
+        <div class="text-4xl">📧</div>
+        <h3 class="text-xl font-bold">
+            {{ t("auth.register.verification_required") }}
+        </h3>
+        <p class="text-sm opacity-70">
+            {{ t("auth.register.check_email", { email: registrationEmail }) }}
+        </p>
+        <button
+            v-if="showCancelButton"
+            @click="emit('cancel')"
+            class="btn btn-ghost"
+        >
+            {{ t("common.close") }}
+        </button>
+    </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useToast } from '../../../services/toastService';
-import { userService } from '../../../services/userService';
-import { useI18n } from 'vue-i18n';
-import { apiPost } from '../../../services/apiClient';
-import { getCurrentLanguage } from '../../../i18n';
-import { getApiBaseWithVersion } from '../../../config';
+import { ref } from "vue";
+import { useToast } from "../../../services/toastService";
+import { useI18n } from "vue-i18n";
+import { apiPost } from "../../../services/apiClient";
+import { getCurrentLanguage } from "../../../i18n";
+import { getApiBaseWithVersion } from "../../../config";
 
 interface Props {
     showCancelButton?: boolean;
@@ -51,133 +98,71 @@ withDefaults(defineProps<Props>(), {
     compact: false,
 });
 
-const emit = defineEmits(['registered', 'logged-in', 'cancel']);
+const emit = defineEmits(["registered", "logged-in", "cancel"]);
 const { t } = useI18n();
 const { addToast } = useToast();
 
-const username = ref('');
-const email = ref('');
-const password = ref('');
-const confirmPassword = ref('');
+const username = ref("");
+const email = ref("");
+const password = ref("");
+const confirmPassword = ref("");
 const isRegistering = ref(false);
-
-const extractAuthToken = (payload: any): string | null => {
-    if (!payload) return null;
-    const candidate =
-        payload.token ||
-        payload.auth_token ||
-        payload.access_token ||
-        payload.accessToken ||
-        payload?.tokens?.token ||
-        payload?.tokens?.access_token ||
-        payload?.tokens?.accessToken ||
-        payload?.data?.token ||
-        payload?.data?.auth_token ||
-        payload?.data?.access_token ||
-        payload?.data?.accessToken;
-    return typeof candidate === 'string' && candidate.length > 0 ? candidate : null;
-};
+const registrationEmail = ref("");
+const showVerificationMessage = ref(false);
 
 const handleRegister = async () => {
     if (password.value !== confirmPassword.value) {
-        addToast(t('validation.passwords_no_match'), 'error');
+        addToast(t("validation.passwords_no_match"), "error");
         return;
     }
     if (password.value.length < 8) {
         addToast(
-            t('validation.min_length', {
-                field: t('common.password'),
+            t("validation.min_length", {
+                field: t("common.password"),
                 length: 8,
             }),
-            'error'
+            "error"
         );
         return;
     }
     try {
         isRegistering.value = true;
+        registrationEmail.value = email.value;
 
         await apiPost(
             `${getApiBaseWithVersion()}/auth/register`,
             {
                 username: username.value,
                 password: password.value,
+                email: email.value,
             },
             {
                 headers: {
-                    'Accept-Language': getCurrentLanguage() || 'en',
-                    'Content-Type': 'application/json',
+                    "Accept-Language": getCurrentLanguage() || "en",
+                    "Content-Type": "application/json",
                 },
             }
         );
 
-        try {
-            const loginResponse = await apiPost(
-                `${getApiBaseWithVersion()}/auth/login`,
-                {
-                    username: username.value,
-                    password: password.value,
-                },
-                {
-                    headers: {
-                        'Accept-Language': getCurrentLanguage() || 'en',
-                        'Content-Type': 'application/json',
-                    },
-                }
-            );
-
-            const authToken = extractAuthToken(loginResponse);
-
-            if (authToken) {
-                localStorage.setItem('authToken', authToken);
-                userService.clearCache();
-                addToast(t('auth.login.success'), 'success');
-                emit('logged-in');
-            } else {
-                console.error('No auth token found in auto-login response:', loginResponse);
-                addToast(t('auth.login.no_token'), 'error');
-                emit('registered');
-            }
-        } catch (loginError) {
-            console.error('Auto-login failed:', loginError);
-            addToast(t('auth.register.auto_login_failed'), 'warning');
-            emit('registered');
-        }
+        showVerificationMessage.value = true;
+        addToast(t("auth.register.verification_required"), "info");
+        emit("registered", { username: username.value, email: email.value });
     } catch (error: any) {
-        console.error('Registration failed:', error);
-        console.error('Registration error response:', error.response);
-
-        if (error.response && error.response.data) {
-            let errorMessage = t('auth.register.registration_failed');
-            const errors = error.response.data;
-            if (errors.username) {
-                errorMessage = `Username: ${errors.username.join(' ')}`;
-            } else if (errors.email) {
-                errorMessage = `Email: ${errors.email.join(' ')}`;
-            } else if (errors.password) {
-                errorMessage = `Password: ${errors.password.join(' ')}`;
-            } else if (Array.isArray(errors) && errors.length > 0) {
-                errorMessage = errors.join(' ');
-            } else if (typeof errors === 'string') {
-                errorMessage = errors;
-            } else if (errors.error) {
-                errorMessage = errors.error;
-            } else if (errors.detail) {
-                errorMessage = errors.detail;
-            }
-            addToast(errorMessage, 'error');
-        } else {
-            addToast(t('auth.register.registration_failed'), 'error');
-        }
+        console.error("Registration failed:", error);
+        const errorMsg =
+            error.response?.data?.error ||
+            t("auth.register.registration_failed");
+        addToast(errorMsg, "error");
     } finally {
         isRegistering.value = false;
     }
 };
 
 const clearForm = () => {
-    username.value = '';
-    email.value = '';
-    password.value = '';
-    confirmPassword.value = '';
+    username.value = "";
+    email.value = "";
+    password.value = "";
+    confirmPassword.value = "";
 };
 
 defineExpose({
diff --git a/src/components/layout/modals/AuthModal.vue b/src/components/layout/modals/AuthModal.vue
new file mode 100644
index 00000000..b1033a29
--- /dev/null
+++ b/src/components/layout/modals/AuthModal.vue
@@ -0,0 +1,238 @@
+<template>
+    <div
+        v-if="modelValue"
+        class="fixed inset-0 flex items-center justify-center z-2000 slide-up backdrop-blur-sm"
+    >
+        <div class="custom-modal-overlay" @click.self="closeModal">
+            <div class="custom-modal-content max-w-md w-full">
+                <div class="custom-modal-header">
+                    <h2 class="text-xl font-bold">{{ modalTitle }}</h2>
+                    <button
+                        @click="closeModal"
+                        class="custom-modal-close-button"
+                    >
+                        ×
+                    </button>
+                </div>
+
+                <div class="custom-modal-body p-4">
+                    <LoginForm
+                        v-if="view === 'LOGIN'"
+                        @logged-in="handleLoggedIn"
+                        @unverified="handleUnverified"
+                    />
+
+                    <RegistrationForm
+                        v-else-if="view === 'REGISTER'"
+                        @registered="handleRegistered"
+                        @cancel="view = 'LOGIN'"
+                        :show-cancel-button="false"
+                    />
+
+                    <div
+                        v-else-if="view === 'VERIFY'"
+                        class="text-center space-y-6 py-4"
+                    >
+                        <div class="flex justify-center">
+                            <div class="p-4 bg-primary/10 rounded-full">
+                                <Mail class="w-12 h-12 text-primary" />
+                            </div>
+                        </div>
+                        <div class="space-y-2">
+                            <h3 class="text-lg font-bold">
+                                {{ t("auth.register.verification_required") }}
+                            </h3>
+                            <p class="text-sm opacity-70">
+                                {{
+                                    t("auth.register.check_email", {
+                                        email: pendingEmail,
+                                    })
+                                }}
+                            </p>
+                        </div>
+
+                        <div class="pt-4 space-y-3">
+                            <button
+                                @click="handleResend"
+                                class="btn btn-primary w-full"
+                                :disabled="isResending"
+                            >
+                                <span
+                                    v-if="isResending"
+                                    class="loading loading-spinner"
+                                ></span>
+                                {{ t("common.send_again") || "Resend Email" }}
+                            </button>
+                            <button
+                                @click="view = 'LOGIN'"
+                                class="btn btn-ghost w-full"
+                            >
+                                {{
+                                    t("common.back_to_login") || "Back to Login"
+                                }}
+                            </button>
+                        </div>
+                    </div>
+
+                    <div
+                        v-if="view !== 'VERIFY' && view !== 'SUCCESS'"
+                        class="mt-6 text-center text-sm"
+                    >
+                        <template v-if="view === 'LOGIN'">
+                            <span class="opacity-70">{{
+                                t("auth.login.register_link")
+                            }}</span>
+                            <button
+                                @click="view = 'REGISTER'"
+                                class="link link-primary ml-1"
+                            >
+                                {{ t("common.register") }}
+                            </button>
+                        </template>
+                        <template v-else>
+                            <span class="opacity-70">{{
+                                t("auth.register.login_link")
+                            }}</span>
+                            <button
+                                @click="view = 'LOGIN'"
+                                class="link link-primary ml-1"
+                            >
+                                {{ t("common.login") }}
+                            </button>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { Mail } from "lucide-vue-next";
+import LoginForm from "../forms/LoginForm.vue";
+import RegistrationForm from "../forms/RegistrationForm.vue";
+import { apiPost } from "../../../services/apiClient";
+import { getApiBaseWithVersion } from "../../../config";
+import { useToast } from "../../../services/toastService";
+
+const props = defineProps<{
+    modelValue: boolean;
+    initialView?: "LOGIN" | "REGISTER" | "VERIFY";
+    email?: string;
+}>();
+
+const emit = defineEmits(["update:modelValue", "logged-in"]);
+const { t } = useI18n();
+const { addToast } = useToast();
+
+const view = ref<"LOGIN" | "REGISTER" | "VERIFY" | "SUCCESS">(
+    props.initialView || "LOGIN"
+);
+const pendingEmail = ref(props.email || "");
+const isResending = ref(false);
+
+const modalTitle = computed(() => {
+    switch (view.value) {
+        case "LOGIN":
+            return t("auth.login.title");
+        case "REGISTER":
+            return t("auth.register.title");
+        case "VERIFY":
+            return t("auth.register.verification_required");
+        default:
+            return "";
+    }
+});
+
+const closeModal = () => {
+    emit("update:modelValue", false);
+};
+
+const handleLoggedIn = () => {
+    emit("logged-in");
+    closeModal();
+};
+
+const handleRegistered = (data: { email: string }) => {
+    pendingEmail.value = data.email;
+    view.value = "VERIFY";
+};
+
+const handleUnverified = (data: { email: string }) => {
+    pendingEmail.value = data.email;
+    view.value = "VERIFY";
+};
+
+const handleResend = async () => {
+    try {
+        isResending.value = true;
+        await apiPost(
+            `${getApiBaseWithVersion()}/auth/resend-verification?email=${encodeURIComponent(pendingEmail.value)}`
+        );
+        addToast(
+            t("common.verification_sent") || "Verification email resent!",
+            "success"
+        );
+    } catch (e) {
+        console.error("Resend failed", e);
+    } finally {
+        isResending.value = false;
+    }
+};
+</script>
+
+<style scoped>
+.custom-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.75);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    animation: blur 0.3s ease-out forwards;
+}
+
+@keyframes blur {
+    from {
+        backdrop-filter: blur(0px);
+    }
+
+    to {
+        backdrop-filter: blur(5px);
+    }
+}
+
+.custom-modal-content {
+    background-color: var(--color-base-200, oklch(20% 0 0));
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.custom-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.custom-modal-close-button {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: currentColor;
+    opacity: 0.7;
+}
+
+.custom-modal-close-button:hover {
+    opacity: 1;
+}
+</style>
diff --git a/src/components/modals/CustomModal.vue b/src/components/modals/CustomModal.vue
index 3d9bab4b..ea66da02 100644
--- a/src/components/modals/CustomModal.vue
+++ b/src/components/modals/CustomModal.vue
@@ -1,18 +1,34 @@
 <template>
     <transition name="modal-fade">
-        <div v-if="isOpen" class="custom-modal-overlay" @click.self="closeModal">
-            <div v-if="showContent" class="custom-modal-content" :class="[contentClass]">
-                <div class="custom-modal-header">
+        <div v-if="isOpen" class="modal-overlay" @click.self="closeModal">
+            <div
+                v-if="showContent"
+                :class="[
+                    'modal-content bg-base-200 rounded-lg shadow-2xl w-full flex flex-col max-h-[90vh] border border-base-content/5',
+                    sizeClasses[size || 'md'],
+                    contentClass,
+                ]"
+            >
+                <div
+                    class="flex justify-between items-center p-4 border-b border-base-content/10 shrink-0"
+                >
                     <slot name="header">
-                        <h2 class="font-bold text-lg text-primary-focus">
+                        <h2 class="font-bold text-lg text-primary">
                             {{ title }}
                         </h2>
                     </slot>
-                    <button @click="closeModal" class="custom-modal-close-button">
+                    <button
+                        @click="closeModal"
+                        class="btn btn-ghost btn-sm btn-square text-lg opacity-70 hover:opacity-100 transition-opacity"
+                    >
+                        <span class="sr-only">Close</span>
                         ×
                     </button>
                 </div>
-                <div class="custom-modal-body">
+
+                <div
+                    class="flex-1 overflow-y-auto overflow-x-hidden min-h-0 p-4 custom-scrollbar"
+                >
                     <slot name="body"></slot>
                 </div>
             </div>
@@ -21,34 +37,43 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch, onUnmounted, ref } from 'vue';
+import { computed, watch, onUnmounted, ref } from "vue";
+import { lockScroll, unlockScroll } from "../../utils/scrollLock";
 
 const props = defineProps<{
     modelValue: boolean;
     title?: string;
     contentClass?: string;
+    size?: "sm" | "md" | "lg" | "xl" | "full";
 }>();
 
-const emit = defineEmits(['update:modelValue', 'close']);
+const emit = defineEmits(["update:modelValue", "close"]);
 
 const showContent = ref(false);
-import { lockScroll, unlockScroll } from '../../utils/scrollLock';
+
+const sizeClasses = {
+    sm: "max-w-md",
+    md: "max-w-2xl",
+    lg: "max-w-4xl",
+    xl: "max-w-6xl",
+    full: "max-w-full h-full m-4",
+};
 
 const isOpen = computed({
     get: () => props.modelValue,
-    set: (value) => emit('update:modelValue', value),
+    set: (value) => emit("update:modelValue", value),
 });
 
 const closeModal = () => {
     showContent.value = false;
     setTimeout(() => {
         isOpen.value = false;
-        emit('close');
-    }, 200);
+        emit("close");
+    }, 250);
 };
 
 const handleEscape = (e: KeyboardEvent) => {
-    if (e.key === 'Escape' && isOpen.value) {
+    if (e.key === "Escape" && isOpen.value) {
         closeModal();
     }
 };
@@ -58,13 +83,13 @@ watch(
     (newVal) => {
         if (newVal) {
             lockScroll();
-            document.addEventListener('keydown', handleEscape);
+            document.addEventListener("keydown", handleEscape);
             setTimeout(() => {
                 showContent.value = true;
-            }, 150);
+            }, 50);
         } else {
             unlockScroll();
-            document.removeEventListener('keydown', handleEscape);
+            document.removeEventListener("keydown", handleEscape);
             showContent.value = false;
         }
     },
@@ -72,7 +97,7 @@ watch(
 );
 
 onUnmounted(() => {
-    document.removeEventListener('keydown', handleEscape);
+    document.removeEventListener("keydown", handleEscape);
     if (isOpen.value) {
         unlockScroll();
     }
@@ -80,19 +105,19 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.custom-modal-overlay {
+.modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: rgba(0, 0, 0, 0.75);
+    background-color: rgba(0, 0, 0, 0.7);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 1000;
     backdrop-filter: blur(0px);
-    animation: overlay-enter 0.4s ease-out forwards;
+    animation: overlay-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
     padding: 1rem;
     overflow: hidden;
     overscroll-behavior: contain;
@@ -104,26 +129,16 @@ onUnmounted(() => {
         backdrop-filter: blur(0px);
     }
 
-    50% {
-        background-color: rgba(0, 0, 0, 0.4);
-        backdrop-filter: blur(1px);
-    }
-
     100% {
-        background-color: rgba(0, 0, 0, 0.75);
-        backdrop-filter: blur(2px);
+        background-color: rgba(0, 0, 0, 0.7);
+        backdrop-filter: blur(1.5px);
     }
 }
 
 @keyframes overlay-exit {
     0% {
-        background-color: rgba(0, 0, 0, 0.75);
-        backdrop-filter: blur(2px);
-    }
-
-    50% {
-        background-color: rgba(0, 0, 0, 0.4);
-        backdrop-filter: blur(1px);
+        background-color: rgba(0, 0, 0, 0.7);
+        backdrop-filter: blur(1.5px);
     }
 
     100% {
@@ -132,90 +147,31 @@ onUnmounted(() => {
     }
 }
 
-.custom-modal-content {
-    background-color: var(--color-base-200);
-    padding: 1rem;
-    border-radius: 0.5rem;
-    box-shadow:
-        0 10px 25px -5px rgba(0, 0, 0, 0.3),
-        0 8px 10px -6px rgba(0, 0, 0, 0.2);
-    width: 100%;
-    max-width: min(28rem, calc(100vw - 2rem));
-    max-height: calc(100vh - 2rem);
+.modal-content {
     position: relative;
     box-sizing: border-box;
-    animation: slide-down 0.3s ease-out forwards;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-}
-
-.custom-modal-content .custom-modal-body {
-    overflow-x: hidden;
-    overflow-y: auto;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    -webkit-overflow-scrolling: touch;
-}
-
-.custom-modal-content .custom-modal-body::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-    display: none;
-}
-
-.custom-modal-content .custom-modal-body::-webkit-scrollbar-track,
-.custom-modal-content .custom-modal-body::-webkit-scrollbar-thumb {
-    background: transparent;
-    display: none;
-}
-
-.custom-modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem;
-    flex-shrink: 0;
-}
-
-.custom-modal-body {
-    flex: 1;
-    overflow-x: hidden;
-    overflow-y: auto;
-    word-wrap: break-word;
-    word-break: break-word;
-    min-height: 0;
+    animation: content-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 }
 
-.custom-modal-close-button {
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    color: var(--fallback-bc, oklch(var(--bc)));
-    padding: 0;
-    line-height: 1;
-    opacity: 0.7;
-    transition: opacity 0.2s ease;
-    flex-shrink: 0;
-}
+@keyframes content-enter {
+    0% {
+        opacity: 0;
+        transform: scale(0.96) translateY(20px);
+    }
 
-.custom-modal-close-button:hover {
-    opacity: 1;
+    100% {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
 }
 
-
 .modal-fade-enter-active {
-    transition: opacity 0.4s ease;
+    transition: opacity 0.5s ease;
 }
 
 .modal-fade-leave-active {
-    transition: opacity 0.3s ease;
-    animation: overlay-exit 0.3s ease-out forwards;
+    transition: opacity 0.4s ease;
+    animation: overlay-exit 0.4s ease-out forwards;
 }
 
 .modal-fade-enter-from {
@@ -225,105 +181,4 @@ onUnmounted(() => {
 .modal-fade-leave-to {
     opacity: 0;
 }
-
-@keyframes slide-down {
-    from {
-        transform: translateY(-20px);
-        opacity: 0;
-    }
-
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-@keyframes slide-up {
-    from {
-        transform: translateY(20px);
-        opacity: 0;
-    }
-
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-.wide {
-    max-width: min(90vw, 80rem);
-    width: 90vw;
-    max-height: 90vh;
-}
-
-.tall {
-    max-height: 90vh;
-    height: auto;
-}
-
-.compact {
-    max-width: min(24rem, calc(100vw - 2rem));
-}
-
-.medium {
-    max-width: min(36rem, calc(100vw - 2rem));
-}
-
-.large {
-    max-width: min(48rem, calc(100vw - 2rem));
-}
-
-.full-mobile {
-    @media (max-width: 768px) {
-        max-width: calc(100vw - 2rem);
-        max-height: calc(100vh - 2rem);
-        padding: 1rem;
-    }
-}
-
-@media (max-width: 768px) {
-    .custom-modal-overlay {
-        padding: 0.5rem;
-    }
-
-    .custom-modal-content {
-        max-width: calc(100vw - 1rem);
-        max-height: calc(100vh - 1rem);
-        padding: 1rem;
-    }
-
-    .custom-modal-header {
-        margin-bottom: 0.75rem;
-    }
-}
-
-@media (max-width: 480px) {
-    .custom-modal-overlay {
-        padding: 0.25rem;
-    }
-
-    .custom-modal-content {
-        max-width: calc(100vw - 0.5rem);
-        max-height: calc(100vh - 0.5rem);
-        padding: 0.75rem;
-    }
-}
-
-.custom-modal-body::-webkit-scrollbar {
-    width: 6px;
-}
-
-.custom-modal-body::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 3px;
-}
-
-.custom-modal-body::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 3px;
-}
-
-.custom-modal-body::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.4);
-}
 </style>
diff --git a/src/components/modals/GlobalModal.vue b/src/components/modals/GlobalModal.vue
index 71cea156..3ca372fe 100644
--- a/src/components/modals/GlobalModal.vue
+++ b/src/components/modals/GlobalModal.vue
@@ -1,14 +1,24 @@
 <template>
     <div class="global-modals">
         <template v-for="(modal, id) in modals" :key="id">
-            <CustomModal v-model="modal.open" :title="modal.title" :content-class="modal.contentClass"
-                @close="closeModal(id)">
+            <CustomModal
+                v-model="modal.open"
+                :title="modal.title"
+                :content-class="modal.contentClass"
+                :size="modal.size"
+                @close="closeModal(id)"
+            >
                 <template #header>
                     <slot :name="`header-${id}`"></slot>
                 </template>
                 <template #body>
-                    <component :is="modal.component" v-bind="modal.props || {}" v-on="modal.listeners || {}"
-                        @close="closeModal(id)" :key="`${id}-${locale}`" />
+                    <component
+                        :is="modal.component"
+                        v-bind="modal.props || {}"
+                        v-on="modal.listeners || {}"
+                        @close="closeModal(id)"
+                        :key="`${id}-${locale}`"
+                    />
                 </template>
                 <template #footer>
                     <slot :name="`footer-${id}`"></slot>
@@ -19,9 +29,9 @@
 </template>
 
 <script setup lang="ts">
-import { useModal } from '../../services/modalService';
-import { useI18n } from 'vue-i18n';
-import CustomModal from '../modals/CustomModal.vue';
+import { useModal } from "../../services/modalService";
+import { useI18n } from "vue-i18n";
+import CustomModal from "../modals/CustomModal.vue";
 
 const { getModals, hideModal } = useModal();
 const { locale } = useI18n();
diff --git a/src/components/modals/clients/AddCustomClientModal.vue b/src/components/modals/clients/AddCustomClientModal.vue
index 72e56842..1a4c8052 100644
--- a/src/components/modals/clients/AddCustomClientModal.vue
+++ b/src/components/modals/clients/AddCustomClientModal.vue
@@ -1,22 +1,24 @@
 <script setup lang="ts">
-import { ref, reactive } from 'vue';
-import { invoke } from '@tauri-apps/api/core';
-import { open } from '@tauri-apps/plugin-dialog';
-import { useToast } from '../../../services/toastService';
+import { ref, reactive } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+import { open } from "@tauri-apps/plugin-dialog";
+import { useToast } from "../../../services/toastService";
 
 const { addToast } = useToast();
 
 const emit = defineEmits<{
-    'client-added': [];
-    'close': [];
+    "client-added": [];
+    close: [];
 }>();
 
 const form = reactive({
-    name: '',
-    version: '',
-    mainClass: 'net.minecraft.client.main.Main',
-    filePath: '',
-    fileName: '',
+    name: "",
+    version: "",
+    mainClass: "net.minecraft.client.main.Main",
+    filePath: "",
+    fileName: "",
+    javaPath: "",
+    javaArgs: "",
 });
 
 const loading = ref(false);
@@ -26,19 +28,19 @@ const validateForm = () => {
     errors.value = {};
 
     if (!form.name.trim()) {
-        errors.value.name = 'Name is required';
+        errors.value.name = "Name is required";
     }
 
     if (!form.version.trim()) {
-        errors.value.version = 'Version is required';
+        errors.value.version = "Version is required";
     }
 
     if (!form.mainClass.trim()) {
-        errors.value.mainClass = 'Main class is required';
+        errors.value.mainClass = "Main class is required";
     }
 
     if (!form.filePath) {
-        errors.value.filePath = 'Please select a .jar file';
+        errors.value.filePath = "Please select a .jar file";
     }
 
     return Object.keys(errors.value).length === 0;
@@ -48,10 +50,12 @@ const selectFile = async () => {
     try {
         const selected = await open({
             multiple: false,
-            filters: [{
-                name: 'JAR Files',
-                extensions: ['jar']
-            }]
+            filters: [
+                {
+                    name: "JAR Files",
+                    extensions: ["jar"],
+                },
+            ],
         });
 
         if (selected) {
@@ -60,18 +64,20 @@ const selectFile = async () => {
             form.fileName = pathParts[pathParts.length - 1];
 
             try {
-                const mainClass = await invoke<string>('detect_main_class', { filePath: selected });
+                const mainClass = await invoke<string>("detect_main_class", {
+                    filePath: selected,
+                });
                 if (mainClass) {
                     form.mainClass = mainClass;
-                    addToast('Main class detected successfully', 'success');
+                    addToast("Main class detected successfully", "success");
                 }
             } catch (e) {
-                console.warn('Failed to detect main class:', e);
+                console.warn("Failed to detect main class:", e);
             }
         }
     } catch (error) {
-        console.error('File selection error:', error);
-        addToast('Failed to select file', 'error');
+        console.error("File selection error:", error);
+        addToast("Failed to select file", "error");
     }
 };
 
@@ -83,26 +89,30 @@ const handleSubmit = async () => {
     try {
         loading.value = true;
 
-        await invoke('add_custom_client', {
+        await invoke("add_custom_client", {
             name: form.name.trim(),
             version: form.version,
             filename: form.fileName,
             filePath: form.filePath,
             mainClass: form.mainClass.trim(),
+            javaPath: form.javaPath.trim() || null,
+            javaArgs: form.javaArgs.trim() || null,
         });
 
         Object.assign(form, {
-            name: '',
-            version: '',
-            mainClass: 'net.minecraft.client.main.Main',
-            filePath: '',
-            fileName: '',
+            name: "",
+            version: "",
+            mainClass: "net.minecraft.client.main.Main",
+            filePath: "",
+            fileName: "",
+            javaPath: "",
+            javaArgs: "",
         });
 
-        emit('client-added');
-        emit('close');
+        emit("client-added");
+        emit("close");
     } catch (err) {
-        addToast(`Failed to add custom client: ${err}`, 'error');
+        addToast(`Failed to add custom client: ${err}`, "error");
     } finally {
         loading.value = false;
     }
@@ -110,68 +120,180 @@ const handleSubmit = async () => {
 </script>
 
 <template>
-    <form @submit.prevent="handleSubmit" class="space-y-4 ">
+    <form @submit.prevent="handleSubmit" class="space-y-4">
         <div class="form-scroll-area">
             <div class="form-control">
                 <label class="label">
-                    <span class="label-text">{{ $t('modals.add_custom_client_modal.client_name') }} *</span>
+                    <span class="label-text"
+                        >{{
+                            $t("modals.add_custom_client_modal.client_name")
+                        }}
+                        *</span
+                    >
                 </label>
-                <input v-model="form.name" type="text" :placeholder="$t('modals.add_custom_client_modal.enter_client_name')" class="input input-bordered"
-                    :class="{ 'input-error': errors.name }" />
+                <input
+                    v-model="form.name"
+                    type="text"
+                    :placeholder="
+                        $t('modals.add_custom_client_modal.enter_client_name')
+                    "
+                    class="input input-bordered"
+                    :class="{ 'input-error': errors.name }"
+                />
                 <label v-if="errors.name" class="label">
-                    <span class="label-text-alt text-error">{{ errors.name }}</span>
+                    <span class="label-text-alt text-error">{{
+                        errors.name
+                    }}</span>
                 </label>
             </div>
 
             <div class="form-control">
                 <label class="label">
-                    <span class="label-text">{{ $t('modals.add_custom_client_modal.minecraft_version') }} *</span>
+                    <span class="label-text"
+                        >{{
+                            $t(
+                                "modals.add_custom_client_modal.minecraft_version"
+                            )
+                        }}
+                        *</span
+                    >
                 </label>
-                <input v-model="form.version" type="text" placeholder="e.g. 1.16.5" class="input input-bordered"
-                    :class="{ 'input-error': errors.version }" />
+                <input
+                    v-model="form.version"
+                    type="text"
+                    placeholder="e.g. 1.16.5"
+                    class="input input-bordered"
+                    :class="{ 'input-error': errors.version }"
+                />
                 <label v-if="errors.version" class="label">
-                    <span class="label-text-alt text-error">{{ errors.version }}</span>
+                    <span class="label-text-alt text-error">{{
+                        errors.version
+                    }}</span>
                 </label>
             </div>
 
             <div class="form-control">
                 <label class="label">
-                    <span class="label-text">{{ $t('modals.add_custom_client_modal.main_class') }} *</span>
+                    <span class="label-text"
+                        >{{
+                            $t("modals.add_custom_client_modal.main_class")
+                        }}
+                        *</span
+                    >
                 </label>
-                <input v-model="form.mainClass" type="text" :placeholder="$t('modals.add_custom_client_modal.main_class_placeholder')"
-                    class="input input-bordered" :class="{ 'input-error': errors.mainClass }" />
+                <input
+                    v-model="form.mainClass"
+                    type="text"
+                    :placeholder="
+                        $t(
+                            'modals.add_custom_client_modal.main_class_placeholder'
+                        )
+                    "
+                    class="input input-bordered"
+                    :class="{ 'input-error': errors.mainClass }"
+                />
                 <label v-if="errors.mainClass" class="label">
-                    <span class="label-text-alt text-error">{{ errors.mainClass }}</span>
+                    <span class="label-text-alt text-error">{{
+                        errors.mainClass
+                    }}</span>
                 </label>
             </div>
 
             <div class="form-control">
                 <label class="label">
-                    <span class="label-text">{{ $t('modals.add_custom_client_modal.jar_file') }} *</span>
+                    <span class="label-text"
+                        >{{
+                            $t("modals.add_custom_client_modal.jar_file")
+                        }}
+                        *</span
+                    >
                 </label>
                 <div class="flex gap-2">
-                    <input :value="form.fileName || $t('modals.add_custom_client_modal.no_file_selected')" type="text" :placeholder="$t('modals.add_custom_client_modal.select_jar_file')"
-                        class="input input-bordered flex-1" readonly :class="{ 'input-error': errors.filePath }" />
-                    <button type="button" @click="selectFile" class="btn btn-outline">
-                        {{ $t('common.browse') }}
+                    <input
+                        :value="
+                            form.fileName ||
+                            $t(
+                                'modals.add_custom_client_modal.no_file_selected'
+                            )
+                        "
+                        type="text"
+                        :placeholder="
+                            $t('modals.add_custom_client_modal.select_jar_file')
+                        "
+                        class="input input-bordered flex-1"
+                        readonly
+                        :class="{ 'input-error': errors.filePath }"
+                    />
+                    <button
+                        type="button"
+                        @click="selectFile"
+                        class="btn btn-outline"
+                    >
+                        {{ $t("common.browse") }}
                     </button>
                 </div>
                 <label v-if="errors.filePath" class="label">
-                    <span class="label-text-alt text-error">{{ errors.filePath }}</span>
+                    <span class="label-text-alt text-error">{{
+                        errors.filePath
+                    }}</span>
                 </label>
                 <label v-if="form.fileName" class="label">
-                    <span class="label-text-alt text-success">{{ $t('modals.add_custom_client_modal.selected') }}: {{ form.fileName }}</span>
+                    <span class="label-text-alt text-success"
+                        >{{ $t("modals.add_custom_client_modal.selected") }}:
+                        {{ form.fileName }}</span
+                    >
                 </label>
             </div>
+
+            <div class="divider text-xs opacity-50 uppercase tracking-widest">
+                {{ $t("common.advanced") }}
+            </div>
+
+            <div class="form-control">
+                <label class="label">
+                    <span class="label-text">Custom Java Path (Optional)</span>
+                </label>
+                <input
+                    v-model="form.javaPath"
+                    type="text"
+                    placeholder="C:\Path\To\bin\java.exe"
+                    class="input input-bordered"
+                />
+            </div>
+
+            <div class="form-control">
+                <label class="label">
+                    <span class="label-text"
+                        >Custom Java Arguments (Optional)</span
+                    >
+                </label>
+                <textarea
+                    v-model="form.javaArgs"
+                    class="textarea textarea-bordered h-20"
+                    placeholder="-Xms512M -XX:+UseG1GC"
+                ></textarea>
+            </div>
         </div>
         <div class="modal-action">
-            <button type="button" class="btn" @click="$emit('close')" :disabled="loading">
-                {{ $t('common.cancel') }}
+            <button
+                type="button"
+                class="btn"
+                @click="$emit('close')"
+                :disabled="loading"
+            >
+                {{ $t("common.cancel") }}
             </button>
             <button type="submit" class="btn btn-primary" :disabled="loading">
-                <span v-if="loading" class="loading loading-spinner loading-sm"></span>
-                {{ loading ? $t('modals.add_custom_client_modal.adding') : $t('modals.add_custom_client_modal.add_client') }}
+                <span
+                    v-if="loading"
+                    class="loading loading-spinner loading-sm"
+                ></span>
+                {{
+                    loading
+                        ? $t("modals.add_custom_client_modal.adding")
+                        : $t("modals.add_custom_client_modal.add_client")
+                }}
             </button>
         </div>
     </form>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/modals/clients/ClientCrashModal.vue b/src/components/modals/clients/ClientCrashModal.vue
index 287cc15f..ca25f495 100644
--- a/src/components/modals/clients/ClientCrashModal.vue
+++ b/src/components/modals/clients/ClientCrashModal.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="client-crash-modal">
         <p v-if="error" class="error-message">
-            {{ $t('modals.client_crash.error_occurred', { error }) }}
+            {{ $t("modals.client_crash.error_occurred", { error }) }}
         </p>
         <p v-else>
-            {{ $t('modals.client_crash.crashed_message', { clientName }) }}
+            {{ $t("modals.client_crash.crashed_message", { clientName }) }}
         </p>
 
         <div class="logs-container">
@@ -13,19 +13,19 @@
 
         <div class="modal-actions">
             <button @click="copyLogs" class="btn btn-sm btn-outline">
-                {{ $t('modals.client_crash.copy_logs') }}
+                {{ $t("modals.client_crash.copy_logs") }}
             </button>
             <button @click="closeModal" class="btn btn-sm btn-primary">
-                {{ $t('modals.client_crash.close') }}
+                {{ $t("modals.client_crash.close") }}
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useToast } from '../../../services/toastService';
-import { useI18n } from 'vue-i18n';
+import { computed } from "vue";
+import { useToast } from "../../../services/toastService";
+import { useI18n } from "vue-i18n";
 
 interface Props {
     clientId: number;
@@ -35,29 +35,29 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const emit = defineEmits(['close']);
+const emit = defineEmits(["close"]);
 
 const { addToast } = useToast();
 const { t } = useI18n();
 
 const formattedLogs = computed(() => {
     if (!props.logs || props.logs.length === 0) {
-        return t('modals.client_crash.no_logs');
+        return t("modals.client_crash.no_logs");
     }
-    return props.logs.join('\n');
+    return props.logs.join("\n");
 });
 
 const closeModal = () => {
-    emit('close');
+    emit("close");
 };
 
 const copyLogs = async () => {
     try {
         await navigator.clipboard.writeText(formattedLogs.value);
-        addToast(t('toast.logs.client_logs_copied'), 'success');
+        addToast(t("toast.logs.client_logs_copied"), "success");
     } catch (err) {
-        console.error('Failed to copy logs: ', err);
-        addToast(t('toast.logs.client_logs_copy_failed'), 'error');
+        console.error("Failed to copy logs: ", err);
+        addToast(t("toast.logs.client_logs_copy_failed"), "error");
     }
 };
 </script>
diff --git a/src/components/modals/clients/CustomClientDisplaySettingsModal.vue b/src/components/modals/clients/CustomClientDisplaySettingsModal.vue
index 3f9886d5..2695d0d8 100644
--- a/src/components/modals/clients/CustomClientDisplaySettingsModal.vue
+++ b/src/components/modals/clients/CustomClientDisplaySettingsModal.vue
@@ -1,43 +1,42 @@
 <script lang="ts" setup>
-import { invoke } from '@tauri-apps/api/core';
-import { useToast } from '../../../services/toastService';
-import { onMounted, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { invoke } from "@tauri-apps/api/core";
+import { useToast } from "../../../services/toastService";
+import { onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 
-defineEmits(['close'])
+defineEmits(["close"]);
 
 const { addToast } = useToast();
 const { t } = useI18n();
-const displayOption = ref<string>('separate');
-const selectedOption = ref<string>('separate');
+const selectedOption = ref<string>("separate");
 
 const getFlags = async () => {
     try {
-        const flags = await invoke('get_flags');
-        const typedFlags = flags as { custom_clients_display?: string };
-        displayOption.value = typedFlags.custom_clients_display || 'separate';
+        const flags = await invoke("get_flags");
+        const typedFlags = flags as {
+            custom_clients_display?: { value: string };
+        };
+        selectedOption.value =
+            typedFlags.custom_clients_display?.value || "separate";
         return typedFlags;
     } catch (err) {
-        console.error('Error loading flags:', err);
-        addToast(`Failed to load flags: ${err}`, 'error');
+        console.error("Error loading flags:", err);
+        addToast(`Failed to load flags: ${err}`, "error");
         return {};
     }
 };
 
 const setCustomClientsDisplay = async () => {
     try {
-        await invoke('set_custom_clients_display', { display: selectedOption.value });
+        await invoke("set_custom_clients_display", {
+            display: selectedOption.value,
+        });
     } catch (error) {
-        console.error('Failed to save flags:', error);
-        addToast(t('settings.save_flags_failed', { error }), 'error');
+        console.error("Failed to save flags:", error);
+        addToast(t("settings.save_flags_failed", { error }), "error");
     }
 };
 
-const handleSelect = (event: Event) => {
-    const target = event.target as HTMLSelectElement;
-    selectedOption.value = target.value;
-};
-
 onMounted(async () => {
     await getFlags();
 });
@@ -49,15 +48,22 @@ watch(selectedOption, async () => {
 <template>
     <div class="form-control w-full mb-6">
         <label class="label mb-2">
-            <span class="label-text font-medium">{{ $t('custom_clients.display_mode') }}</span>
+            <span class="label-text font-medium">{{
+                $t("custom_clients.display_mode")
+            }}</span>
         </label>
-        <select v-model="selectedOption" @select="handleSelect" class="select select-bordered w-full">
-            <option value="separate">{{ $t('custom_clients.display_mode_separate') }}</option>
-            <option value="global">{{ $t('custom_clients.display_mode_global') }}</option>
+        <select v-model="selectedOption" class="select select-bordered w-full">
+            <option value="separate">
+                {{ $t("custom_clients.display_mode_separate") }}
+            </option>
+            <option value="global">
+                {{ $t("custom_clients.display_mode_global") }}
+            </option>
         </select>
     </div>
     <div class="flex justify-end">
-        <button class="btn btn-primary" @click="$emit('close')">{{ $t('common.save') }}</button>
+        <button class="btn btn-primary" @click="$emit('close')">
+            {{ $t("common.save") }}
+        </button>
     </div>
-
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/modals/clients/DeleteCustomClientConfirmModal.vue b/src/components/modals/clients/DeleteCustomClientConfirmModal.vue
index 84e53320..f5381772 100644
--- a/src/components/modals/clients/DeleteCustomClientConfirmModal.vue
+++ b/src/components/modals/clients/DeleteCustomClientConfirmModal.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-import { invoke } from '@tauri-apps/api/core';
-import { useToast } from '../../../services/toastService';
-import { useModal } from '../../../services/modalService';
-import { Trash2 } from 'lucide-vue-next';
-import type { CustomClient } from '../../../types/ui';
+import { ref, watch } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+import { useToast } from "../../../services/toastService";
+import { useModal } from "../../../services/modalService";
+import { Trash2 } from "lucide-vue-next";
+import type { CustomClient } from "../../../types/ui";
 
 const { addToast } = useToast();
 const { getModals } = useModal();
 
 const emit = defineEmits<{
-    'client-deleted': [];
-    'close': []
+    "client-deleted": [];
+    close: [];
 }>();
 
 const loading = ref(false);
@@ -25,14 +25,14 @@ const handleDelete = async () => {
     try {
         loading.value = true;
 
-        await invoke('remove_custom_client', {
+        await invoke("remove_custom_client", {
             id: currentClient.value.id,
         });
 
-        emit('client-deleted');
-        emit('close');
+        emit("client-deleted");
+        emit("close");
     } catch (err) {
-        addToast(`Failed to delete custom client: ${err}`, 'error');
+        addToast(`Failed to delete custom client: ${err}`, "error");
     } finally {
         loading.value = false;
     }
@@ -40,35 +40,64 @@ const handleDelete = async () => {
 
 const modals = getModals();
 
-watch(() => modals['delete-custom-client-confirm']?.props?.client, (client: CustomClient | undefined) => {
-    if (client) {
-        currentClient.value = client;
-    }
-}, { immediate: true });
+watch(
+    () => modals["delete-custom-client-confirm"]?.props?.client,
+    (client: CustomClient | undefined) => {
+        if (client) {
+            currentClient.value = client;
+        }
+    },
+    { immediate: true }
+);
 </script>
 
 <template>
     <div class="flex items-center gap-3 mb-4">
         <div class="shrink-0">
-            <div class="w-12 h-12 bg-error/20 rounded-full flex items-center justify-center">
+            <div
+                class="w-12 h-12 bg-error/20 rounded-full flex items-center justify-center"
+            >
                 <Trash2 class="w-6 h-6 text-error" />
             </div>
         </div>
         <div>
-            <h3 class="font-bold text-lg">{{ $t('modals.delete_custom_client_confirm_modal.title') }}</h3>
+            <h3 class="font-bold text-lg">
+                {{ $t("modals.delete_custom_client_confirm_modal.title") }}
+            </h3>
             <p class="text-base-content/70 text-sm">
-                {{ $t('modals.delete_custom_client_confirm_modal.description') }}
+                {{
+                    $t("modals.delete_custom_client_confirm_modal.description")
+                }}
             </p>
         </div>
     </div>
 
     <div class="modal-action">
-        <button type="button" class="btn" @click="$emit('close')" :disabled="loading">
-            {{ $t('common.cancel') }}
+        <button
+            type="button"
+            class="btn"
+            @click="$emit('close')"
+            :disabled="loading"
+        >
+            {{ $t("common.cancel") }}
         </button>
-        <button type="button" class="btn btn-error" @click="handleDelete" :disabled="loading">
-            <div v-if="loading" class="loading loading-spinner loading-sm"></div>
-            {{ loading ? $t('modals.delete_custom_client_confirm_modal.deleting') : $t('modals.delete_custom_client_confirm_modal.delete_client') }}
+        <button
+            type="button"
+            class="btn btn-error"
+            @click="handleDelete"
+            :disabled="loading"
+        >
+            <div
+                v-if="loading"
+                class="loading loading-spinner loading-sm"
+            ></div>
+            {{
+                loading
+                    ? $t("modals.delete_custom_client_confirm_modal.deleting")
+                    : $t(
+                          "modals.delete_custom_client_confirm_modal.delete_client"
+                      )
+            }}
         </button>
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/modals/clients/EditCustomClientModal.vue b/src/components/modals/clients/EditCustomClientModal.vue
index 67c6bea4..99b35ce5 100644
--- a/src/components/modals/clients/EditCustomClientModal.vue
+++ b/src/components/modals/clients/EditCustomClientModal.vue
@@ -1,22 +1,24 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from 'vue';
-import { invoke } from '@tauri-apps/api/core';
-import { useToast } from '../../../services/toastService';
-import { useModal } from '../../../services/modalService';
-import type { CustomClient } from '../../../types/ui';
+import { ref, reactive, watch } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+import { useToast } from "../../../services/toastService";
+import { useModal } from "../../../services/modalService";
+import type { CustomClient } from "../../../types/ui";
 
 const { addToast } = useToast();
 const { getModals } = useModal();
 
 const emit = defineEmits<{
-    'client-edited': [];
-    'close': []
+    "client-edited": [];
+    close: [];
 }>();
 
 const form = reactive({
-    name: '',
-    version: '',
-    mainClass: '',
+    name: "",
+    version: "",
+    mainClass: "",
+    javaPath: "",
+    javaArgs: "",
 });
 
 const loading = ref(false);
@@ -27,15 +29,15 @@ const validateForm = () => {
     errors.value = {};
 
     if (!form.name.trim()) {
-        errors.value.name = 'Name is required';
+        errors.value.name = "Name is required";
     }
 
     if (!form.version.trim()) {
-        errors.value.version = 'Version is required';
+        errors.value.version = "Version is required";
     }
 
     if (!form.mainClass.trim()) {
-        errors.value.mainClass = 'Main class is required';
+        errors.value.mainClass = "Main class is required";
     }
 
     return Object.keys(errors.value).length === 0;
@@ -49,17 +51,19 @@ const handleSubmit = async () => {
     try {
         loading.value = true;
 
-        await invoke('update_custom_client', {
+        await invoke("update_custom_client", {
             id: currentClient.value.id,
             name: form.name.trim(),
             version: form.version,
             mainClass: form.mainClass.trim(),
+            javaPath: form.javaPath.trim() || null,
+            javaArgs: form.javaArgs.trim() || null,
         });
 
-        emit('client-edited');
-        emit('close');
+        emit("client-edited");
+        emit("close");
     } catch (err) {
-        addToast(`Failed to update custom client: ${err}`, 'error');
+        addToast(`Failed to update custom client: ${err}`, "error");
     } finally {
         loading.value = false;
     }
@@ -67,24 +71,42 @@ const handleSubmit = async () => {
 
 const modals = getModals();
 
-watch(() => modals['edit-custom-client']?.props?.client, (client: CustomClient | undefined) => {
-    if (client) {
-        currentClient.value = client;
-        form.name = client.name;
-        form.version = client.version;
-        form.mainClass = client.main_class;
-    }
-}, { immediate: true });
+watch(
+    () => modals["edit-custom-client"]?.props?.client,
+    (client: CustomClient | undefined) => {
+        if (client) {
+            currentClient.value = client;
+            form.name = client.name;
+            form.version = client.version;
+            form.mainClass = client.main_class;
+            form.javaPath = client.java_path || "";
+            form.javaArgs = client.java_args || "";
+        }
+    },
+    { immediate: true }
+);
 </script>
 
 <template>
     <form @submit.prevent="handleSubmit" class="space-y-4">
         <div class="form-control">
             <label class="label">
-                <span class="label-text">{{ $t('modals.edit_custom_client_modal.client_name') }} *</span>
+                <span class="label-text"
+                    >{{
+                        $t("modals.edit_custom_client_modal.client_name")
+                    }}
+                    *</span
+                >
             </label>
-            <input v-model="form.name" type="text" :placeholder="$t('modals.edit_custom_client_modal.enter_client_name')" class="input input-bordered"
-                :class="{ 'input-error': errors.name }" />
+            <input
+                v-model="form.name"
+                type="text"
+                :placeholder="
+                    $t('modals.edit_custom_client_modal.enter_client_name')
+                "
+                class="input input-bordered"
+                :class="{ 'input-error': errors.name }"
+            />
             <label v-if="errors.name" class="label">
                 <span class="label-text-alt text-error">{{ errors.name }}</span>
             </label>
@@ -92,34 +114,99 @@ watch(() => modals['edit-custom-client']?.props?.client, (client: CustomClient |
 
         <div class="form-control">
             <label class="label">
-                <span class="label-text">{{ $t('modals.edit_custom_client_modal.minecraft_version') }} *</span>
+                <span class="label-text"
+                    >{{
+                        $t("modals.edit_custom_client_modal.minecraft_version")
+                    }}
+                    *</span
+                >
             </label>
-            <input v-model="form.version" type="text" placeholder="e.g. 1.16.5" class="input input-bordered"
-                :class="{ 'input-error': errors.version }" />
+            <input
+                v-model="form.version"
+                type="text"
+                placeholder="e.g. 1.16.5"
+                class="input input-bordered"
+                :class="{ 'input-error': errors.version }"
+            />
             <label v-if="errors.version" class="label">
-                <span class="label-text-alt text-error">{{ errors.version }}</span>
+                <span class="label-text-alt text-error">{{
+                    errors.version
+                }}</span>
             </label>
         </div>
 
         <div class="form-control">
             <label class="label">
-                <span class="label-text">{{ $t('modals.edit_custom_client_modal.main_class') }} *</span>
+                <span class="label-text"
+                    >{{
+                        $t("modals.edit_custom_client_modal.main_class")
+                    }}
+                    *</span
+                >
             </label>
-            <input v-model="form.mainClass" type="text" :placeholder="$t('modals.edit_custom_client_modal.main_class_placeholder')"
-                class="input input-bordered" :class="{ 'input-error': errors.mainClass }" />
+            <input
+                v-model="form.mainClass"
+                type="text"
+                :placeholder="
+                    $t('modals.edit_custom_client_modal.main_class_placeholder')
+                "
+                class="input input-bordered"
+                :class="{ 'input-error': errors.mainClass }"
+            />
             <label v-if="errors.mainClass" class="label">
-                <span class="label-text-alt text-error">{{ errors.mainClass }}</span>
+                <span class="label-text-alt text-error">{{
+                    errors.mainClass
+                }}</span>
+            </label>
+        </div>
+
+        <div class="divider text-xs opacity-50 uppercase tracking-widest">
+            {{ $t("common.advanced") || "Advanced" }}
+        </div>
+
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Custom Java Path (Optional)</span>
+            </label>
+            <input
+                v-model="form.javaPath"
+                type="text"
+                placeholder="C:\Path\To\bin\java.exe"
+                class="input input-bordered"
+            />
+        </div>
+
+        <div class="form-control">
+            <label class="label">
+                <span class="label-text">Custom Java Arguments (Optional)</span>
             </label>
+            <textarea
+                v-model="form.javaArgs"
+                class="textarea textarea-bordered h-20"
+                placeholder="-Xms512M -XX:+UseG1GC"
+            ></textarea>
         </div>
 
         <div class="modal-action">
-            <button type="button" class="btn" @click="$emit('close')" :disabled="loading">
-                {{ $t('common.cancel') }}
+            <button
+                type="button"
+                class="btn"
+                @click="$emit('close')"
+                :disabled="loading"
+            >
+                {{ $t("common.cancel") }}
             </button>
             <button type="submit" class="btn btn-primary" :disabled="loading">
-                <div v-if="loading" class="loading loading-spinner loading-sm"></div>
-                {{ loading ? $t('modals.edit_custom_client_modal.updating') : $t('modals.edit_custom_client_modal.update_client') }}
+                <div
+                    v-if="loading"
+                    class="loading loading-spinner loading-sm"
+                ></div>
+                {{
+                    loading
+                        ? $t("modals.edit_custom_client_modal.updating")
+                        : $t("modals.edit_custom_client_modal.update_client")
+                }}
             </button>
         </div>
     </form>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/modals/clients/InsecureClientWarningModal.vue b/src/components/modals/clients/InsecureClientWarningModal.vue
index 98b6e1c3..e2012cfb 100644
--- a/src/components/modals/clients/InsecureClientWarningModal.vue
+++ b/src/components/modals/clients/InsecureClientWarningModal.vue
@@ -1,13 +1,15 @@
 <template>
-    <div class="bg-warning/10 border border-warning/30 rounded-lg shadow-sm p-3 space-y-2 mb-4">
+    <div
+        class="bg-warning/10 border border-warning/30 rounded-lg shadow-sm p-3 space-y-2 mb-4"
+    >
         <div class="flex items-center gap-2">
             <AlertTriangle class="w-6 h-6 text-warning shrink-0" />
             <div>
                 <h3 class="font-semibold text-base text-warning">
-                    {{ t('modals.insecure_client_warning.title') }}
+                    {{ t("modals.insecure_client_warning.title") }}
                 </h3>
                 <p class="text-xs text-warning/80">
-                    {{ t('modals.insecure_client_warning.subtitle') }}
+                    {{ t("modals.insecure_client_warning.subtitle") }}
                 </p>
             </div>
         </div>
@@ -16,7 +18,7 @@
     <div class="space-y-3 mb-4">
         <p class="text-md text-base-content/80">
             {{
-                t('modals.insecure_client_warning.description', {
+                t("modals.insecure_client_warning.description", {
                     clientName: client.name,
                 })
             }}
@@ -24,34 +26,46 @@
 
         <div class="form-control" v-if="!infoVariant">
             <label class="label cursor-pointer justify-start gap-3">
-                <input type="checkbox" class="checkbox checkbox-sm" v-model="dontShowAgain" />
+                <input
+                    type="checkbox"
+                    class="checkbox checkbox-sm"
+                    v-model="dontShowAgain"
+                />
                 <span class="label-text">
-                    {{ t('modals.insecure_client_warning.dont_show_again') }}
+                    {{ t("modals.insecure_client_warning.dont_show_again") }}
                 </span>
             </label>
         </div>
     </div>
 
     <div class="flex flex-col sm:flex-row gap-3 justify-end">
-        <button @click="handleCancel" class="btn btn-outline order-2 sm:order-1" v-if="!infoVariant">
+        <button
+            @click="handleCancel"
+            class="btn btn-outline order-2 sm:order-1"
+            v-if="!infoVariant"
+        >
             <X class="w-4 h-4 mr-2" />
-            {{ t('modals.insecure_client_warning.cancel') }}
+            {{ t("modals.insecure_client_warning.cancel") }}
         </button>
-        <button @click="handleProceed" class="btn btn-warning order-1 sm:order-2" v-if="!infoVariant">
+        <button
+            @click="handleProceed"
+            class="btn btn-warning order-1 sm:order-2"
+            v-if="!infoVariant"
+        >
             <Play class="w-4 h-4 mr-2" />
-            {{ t('modals.insecure_client_warning.proceed_anyway') }}
+            {{ t("modals.insecure_client_warning.proceed_anyway") }}
         </button>
 
         <button @click="emit('close')" class="btn btn-ghost order-3">
-            {{ t('modals.insecure_client_warning.close') }}
+            {{ t("modals.insecure_client_warning.close") }}
         </button>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { AlertTriangle, X, Play } from 'lucide-vue-next';
-import { useI18n } from 'vue-i18n';
+import { ref } from "vue";
+import { AlertTriangle, X, Play } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
 
 interface Client {
     id: number;
@@ -64,21 +78,21 @@ const props = defineProps<{
     infoVariant: boolean;
 }>();
 
-const emit = defineEmits(['proceed', 'cancel', 'close']);
+const emit = defineEmits(["proceed", "cancel", "close"]);
 
 const { t } = useI18n();
 const dontShowAgain = ref(false);
 
 const handleProceed = () => {
-    emit('proceed', {
+    emit("proceed", {
         client: props.client,
         dontShowAgain: dontShowAgain.value,
     });
-    emit('close');
+    emit("close");
 };
 
 const handleCancel = () => {
-    emit('cancel');
-    emit('close');
+    emit("cancel");
+    emit("close");
 };
 </script>
diff --git a/src/components/modals/clients/LogViewerModal.vue b/src/components/modals/clients/LogViewerModal.vue
index 73aa066e..bfb98268 100644
--- a/src/components/modals/clients/LogViewerModal.vue
+++ b/src/components/modals/clients/LogViewerModal.vue
@@ -1,68 +1,108 @@
 <template>
     <div class="flex flex-col h-full max-h-[80vh]">
-        <div class="flex flex-col gap-4 pb-4 border-b border-base-300/30 shrink-0">
+        <div
+            class="flex flex-col gap-4 pb-4 border-b border-base-300/30 shrink-0"
+        >
             <div class="flex flex-wrap items-center justify-between gap-4">
                 <div class="flex items-center gap-4">
-                    <label class="flex items-center gap-2 text-sm cursor-pointer">
-                        <input type="checkbox" class="checkbox checkbox-sm checkbox-primary" v-model="autoScroll" />
-                        <span>{{ t('appLogs.autoScroll') }}</span>
+                    <label
+                        class="flex items-center gap-2 text-sm cursor-pointer"
+                    >
+                        <input
+                            type="checkbox"
+                            class="checkbox checkbox-sm checkbox-primary"
+                            v-model="autoScroll"
+                        />
+                        <span>{{ t("appLogs.autoScroll") }}</span>
                     </label>
 
                     <div class="join">
-                        <div class="join-item flex items-center px-3 bg-base-200 border border-base-300">
+                        <div
+                            class="join-item flex items-center px-3 bg-base-200 border border-base-300"
+                        >
                             <Search class="w-4 h-4 opacity-50" />
                         </div>
-                        <input v-model="searchQuery" type="text" :placeholder="t('appLogs.searchPlaceholder')"
-                            class="input input-sm join-item bg-base-200 border-base-300 focus:outline-none" />
+                        <input
+                            v-model="searchQuery"
+                            type="text"
+                            :placeholder="t('appLogs.searchPlaceholder')"
+                            class="input input-sm join-item bg-base-200 border-base-300 focus:outline-none"
+                        />
                     </div>
                 </div>
 
                 <div class="flex items-center gap-2">
-                    <button @click="downloadLogs" class="btn btn-sm btn-ghost gap-2" :title="t('appLogs.download')">
+                    <button
+                        @click="downloadLogs"
+                        class="btn btn-sm btn-ghost gap-2"
+                        :title="t('appLogs.download')"
+                    >
                         <Download class="w-4 h-4" />
-                        <span class="hidden sm:inline">{{ t('appLogs.download') }}</span>
+                        <span class="hidden sm:inline">{{
+                            t("appLogs.download")
+                        }}</span>
                     </button>
                 </div>
             </div>
 
             <div class="flex flex-wrap items-center gap-2">
-                <span class="text-xs font-semibold opacity-50 uppercase mr-2">{{ t('appLogs.filterByLevel') }}:</span>
-                <button v-for="level in levels" :key="level.id" @click="toggleLevel(level.id)"
-                    class="badge cursor-pointer transition-all duration-200" :class="[
+                <span class="text-xs font-semibold opacity-50 uppercase mr-2"
+                    >{{ t("appLogs.filterByLevel") }}:</span
+                >
+                <button
+                    v-for="level in levels"
+                    :key="level.id"
+                    @click="toggleLevel(level.id)"
+                    class="badge cursor-pointer transition-all duration-200"
+                    :class="[
                         selectedLevels.includes(level.id)
                             ? `${level.color} border-transparent`
-                            : 'badge-ghost opacity-40 grayscale'
-                    ]">
+                            : 'badge-ghost opacity-40 grayscale',
+                    ]"
+                >
                     {{ level.id }}
                 </button>
             </div>
         </div>
 
-        <div ref="logsContainer"
+        <div
+            ref="logsContainer"
             class="flex-1 p-4 font-mono text-sm leading-6 whitespace-pre-wrap wrap-break-word text-base-content/90 bg-base-300/30 rounded mt-4 overflow-y-auto min-h-0"
-            @scroll="handleScroll" style="max-height: calc(80vh - 160px);">
-            <div v-if="filteredLogs.length === 0" class="text-center py-8 text-base-content/60">
-                {{ searchQuery || selectedLevels.length < levels.length ? t('appLogs.noMatchingLogs') :
-                    t('appLogs.noLogs') }} </div>
-                    <div v-else class="space-y-1">
-                        <div v-for="(log, idx) in filteredLogs" :key="idx"
-                            class="w-full rounded px-2 py-0.5 border-l-2 border-transparent hover:bg-base-200/30 transition-colors"
-                            :class="getLogLineClass(log)">
-                            {{ log }}
-                        </div>
-                    </div>
+            @scroll="handleScroll"
+            style="max-height: calc(80vh - 160px)"
+        >
+            <div
+                v-if="filteredLogs.length === 0"
+                class="text-center py-8 text-base-content/60"
+            >
+                {{
+                    searchQuery || selectedLevels.length < levels.length
+                        ? t("appLogs.noMatchingLogs")
+                        : t("appLogs.noLogs")
+                }}
+            </div>
+            <div v-else class="space-y-1">
+                <div
+                    v-for="(log, idx) in filteredLogs"
+                    :key="idx"
+                    class="w-full rounded px-2 py-0.5 border-l-2 border-transparent hover:bg-base-200/30 transition-colors"
+                    :class="getLogLineClass(log)"
+                >
+                    {{ log }}
+                </div>
             </div>
         </div>
+    </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
-import { invoke } from '@tauri-apps/api/core';
-import { useToast } from '../../../services/toastService';
-import { useI18n } from 'vue-i18n';
-import { Search, Download } from 'lucide-vue-next';
-import { save } from '@tauri-apps/plugin-dialog';
-import { writeTextFile } from '@tauri-apps/plugin-fs';
+import { ref, onMounted, onUnmounted, watch, computed } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+import { useToast } from "../../../services/toastService";
+import { useI18n } from "vue-i18n";
+import { Search, Download } from "lucide-vue-next";
+import { save } from "@tauri-apps/plugin-dialog";
+import { writeTextFile } from "@tauri-apps/plugin-fs";
 
 interface Props {
     clientId: number;
@@ -71,7 +111,7 @@ interface Props {
 
 const props = defineProps<Props>();
 
-defineEmits(['close']);
+defineEmits(["close"]);
 
 const logs = ref<string[]>([]);
 const logsContainer = ref<HTMLDivElement | null>(null);
@@ -80,20 +120,27 @@ const refreshInterval = ref<number | null>(null);
 const { addToast } = useToast();
 const { t } = useI18n();
 
-const searchQuery = ref('');
-const selectedLevels = ref<string[]>(['INFO', 'WARN', 'ERROR', 'DEBUG', 'FATAL', 'COLLAPSE']);
+const searchQuery = ref("");
+const selectedLevels = ref<string[]>([
+    "INFO",
+    "WARN",
+    "ERROR",
+    "DEBUG",
+    "FATAL",
+    "COLLAPSE",
+]);
 const levels = [
-    { id: 'INFO', color: 'badge-info' },
-    { id: 'WARN', color: 'badge-warning' },
-    { id: 'ERROR', color: 'badge-error' },
-    { id: 'DEBUG', color: 'badge-neutral' },
-    { id: 'FATAL', color: 'badge-error' },
-    { id: 'COLLAPSE', color: 'badge-primary' }
+    { id: "INFO", color: "badge-info" },
+    { id: "WARN", color: "badge-warning" },
+    { id: "ERROR", color: "badge-error" },
+    { id: "DEBUG", color: "badge-neutral" },
+    { id: "FATAL", color: "badge-error" },
+    { id: "COLLAPSE", color: "badge-primary" },
 ];
 
 const toggleLevel = (level: string) => {
     if (selectedLevels.value.includes(level)) {
-        selectedLevels.value = selectedLevels.value.filter(l => l !== level);
+        selectedLevels.value = selectedLevels.value.filter((l) => l !== level);
     } else {
         selectedLevels.value.push(level);
     }
@@ -104,21 +151,29 @@ const filteredLogs = computed(() => {
         return logs.value;
     }
 
-    return logs.value.filter(log => {
+    return logs.value.filter((log) => {
         const logUpper = log.toUpperCase();
-        const matchesSearch = !searchQuery.value || log.toLowerCase().includes(searchQuery.value.toLowerCase());
+        const matchesSearch =
+            !searchQuery.value ||
+            log.toLowerCase().includes(searchQuery.value.toLowerCase());
 
-        const logHasLevel = levels.find(l => {
-            if (l.id === 'COLLAPSE') {
+        const logHasLevel = levels.find((l) => {
+            if (l.id === "COLLAPSE") {
                 const low = log.toLowerCase();
-                return low.includes('[collapsewarden]') || low.includes('[collapseagent]') || low.includes('[collapsenative]');
+                return (
+                    low.includes("[collapsewarden]") ||
+                    low.includes("[collapseagent]") ||
+                    low.includes("[collapsenative]")
+                );
             }
 
             return logUpper.includes(l.id);
         });
 
         if (logHasLevel) {
-            return matchesSearch && selectedLevels.value.includes(logHasLevel.id);
+            return (
+                matchesSearch && selectedLevels.value.includes(logHasLevel.id)
+            );
         }
 
         return matchesSearch;
@@ -128,33 +183,33 @@ const filteredLogs = computed(() => {
 const getLogLineClass = (log: string) => {
     const lower = log.toLowerCase();
 
-    if (lower.includes('[collapsewarden]')) {
-        return 'bg-info/10 border-info';
+    if (lower.includes("[collapsewarden]")) {
+        return "bg-info/10 border-info";
     }
 
-    if (lower.includes('[collapseagent]')) {
-        return 'bg-success/10 border-success';
+    if (lower.includes("[collapseagent]")) {
+        return "bg-success/10 border-success";
     }
 
-    if (lower.includes('[collapsenative]')) {
-        return 'bg-warning/10 border-warning';
+    if (lower.includes("[collapsenative]")) {
+        return "bg-warning/10 border-warning";
     }
 
-    return '';
+    return "";
 };
 
 const fetchLogs = async () => {
     if (props.clientId) {
         try {
-            logs.value = await invoke<string[]>('get_client_logs', {
+            logs.value = await invoke<string[]>("get_client_logs", {
                 id: props.clientId,
             });
             if (autoScroll.value && logsContainer.value) {
                 scrollToBottom();
             }
         } catch (err) {
-            console.error('Error fetching client logs:', err);
-            addToast(t('errors.logs_error', { error: err }), 'error');
+            console.error("Error fetching client logs:", err);
+            addToast(t("errors.logs_error", { error: err }), "error");
         }
     }
 };
@@ -162,20 +217,22 @@ const fetchLogs = async () => {
 const downloadLogs = async () => {
     try {
         const filePath = await save({
-            filters: [{
-                name: 'Log Files',
-                extensions: ['txt']
-            }],
-            defaultPath: `${props.clientName}_logs.txt`
+            filters: [
+                {
+                    name: "Log Files",
+                    extensions: ["txt"],
+                },
+            ],
+            defaultPath: `${props.clientName}_logs.txt`,
         });
 
         if (filePath) {
-            await writeTextFile(filePath, logs.value.join('\n'));
-            addToast(t('toast.logs.download_success'), 'success');
+            await writeTextFile(filePath, logs.value.join("\n"));
+            addToast(t("toast.logs.download_success"), "success");
         }
     } catch (err) {
-        console.error('Error downloading logs:', err);
-        addToast(t('toast.logs.download_failed', { error: err }), 'error');
+        console.error("Error downloading logs:", err);
+        addToast(t("toast.logs.download_failed", { error: err }), "error");
     }
 };
 
@@ -222,7 +279,7 @@ onUnmounted(() => {
 
 <style scoped>
 .font-mono {
-    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-family: "Consolas", "Monaco", "Courier New", monospace;
 }
 
 .overflow-y-auto::-webkit-scrollbar {
diff --git a/src/components/modals/clients/ModsManagerModal.vue b/src/components/modals/clients/ModsManagerModal.vue
new file mode 100644
index 00000000..7cb64086
--- /dev/null
+++ b/src/components/modals/clients/ModsManagerModal.vue
@@ -0,0 +1,310 @@
+<template>
+    <div class="space-y-4 flex flex-col h-full overflow-hidden">
+        <div v-if="!selectedVersionsMod" class="flex items-center gap-2">
+            <input
+                v-model="searchQuery"
+                @keyup.enter="handleSearch"
+                type="text"
+                :placeholder="t('mods.search_placeholder')"
+                class="input input-bordered w-full"
+                :disabled="isLoading"
+            />
+            <button
+                @click="handleSearch"
+                class="btn btn-primary"
+                :disabled="isLoading"
+            >
+                <Search class="w-4 h-4" />
+            </button>
+        </div>
+
+        <div
+            v-else
+            class="flex items-center gap-4 border-b border-base-content/10 pb-2"
+        >
+            <button
+                @click="selectedVersionsMod = null"
+                class="btn btn-sm btn-ghost btn-circle"
+            >
+                <ChevronLeft class="w-4 h-4" />
+            </button>
+            <h3 class="font-bold truncate text-sm">
+                {{ t("mods.versions_for", { mod: selectedVersionsMod.title }) }}
+            </h3>
+        </div>
+
+        <div class="flex-1 overflow-y-auto custom-scrollbar pr-2 min-h-0">
+            <div v-if="!selectedVersionsMod">
+                <div
+                    v-if="isLoading"
+                    class="flex justify-center items-center h-40"
+                >
+                    <span
+                        class="loading loading-spinner loading-lg text-primary"
+                    ></span>
+                </div>
+
+                <div v-else-if="error" class="alert alert-error">
+                    <AlertCircle class="w-4 h-4" />
+                    <span>{{ error }}</span>
+                </div>
+
+                <div
+                    v-else-if="mods.length === 0 && hasSearched"
+                    class="text-center py-8 text-base-content/60"
+                >
+                    <p>{{ t("mods.no_results") }}</p>
+                </div>
+
+                <div v-else class="space-y-2">
+                    <div
+                        v-for="mod in mods"
+                        :key="mod.project_id"
+                        class="bg-base-200/50 p-3 rounded-lg flex items-center gap-3 hover:bg-base-200 transition-colors"
+                    >
+                        <img
+                            :src="
+                                mod.icon_url ||
+                                'https://cdn.modrinth.com/assets/unknown_server.png'
+                            "
+                            :alt="mod.title"
+                            class="w-10 h-10 rounded shadow-sm object-cover"
+                        />
+                        <div class="flex-1 min-w-0">
+                            <div class="flex items-center gap-2">
+                                <h4 class="font-bold text-sm truncate">
+                                    {{ mod.title }}
+                                </h4>
+                                <span
+                                    class="text-[10px] bg-base-300 px-1.5 py-0.5 rounded text-base-content/60"
+                                    >{{ mod.author }}</span
+                                >
+                                <span
+                                    v-if="isModInstalled(mod)"
+                                    class="badge badge-success badge-xs text-[10px] py-2 px-2 uppercase font-bold tracking-tighter opacity-70"
+                                    >{{ t("mods.installed") }}</span
+                                >
+                            </div>
+                            <p class="text-xs text-base-content/70 truncate">
+                                {{ mod.description }}
+                            </p>
+                        </div>
+                        <button
+                            @click="showVersions(mod)"
+                            class="btn btn-sm btn-primary"
+                            :disabled="installingMods.has(mod.project_id)"
+                        >
+                            <span
+                                v-if="installingMods.has(mod.project_id)"
+                                class="loading loading-spinner loading-xs"
+                            ></span>
+                            <Download v-else class="w-4 h-4" />
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div v-else class="space-y-2">
+                <div
+                    v-if="isLoadingVersions"
+                    class="flex justify-center items-center h-40"
+                >
+                    <span
+                        class="loading loading-spinner loading-lg text-primary"
+                    ></span>
+                </div>
+                <div
+                    v-else-if="versions.length === 0"
+                    class="text-center py-8 text-base-content/60"
+                >
+                    <p>
+                        {{
+                            t("mods.no_compatible_version", {
+                                version: client.version,
+                            })
+                        }}
+                    </p>
+                </div>
+                <div
+                    v-else
+                    v-for="version in versions"
+                    :key="version.id"
+                    class="bg-base-200/50 p-3 rounded-lg flex items-center justify-between gap-3 border border-transparent hover:border-primary/30 transition-all"
+                >
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center gap-2 font-bold text-sm">
+                            {{ version.version_number }}
+                            <span
+                                v-if="version.version_type === 'release'"
+                                class="badge badge-success badge-xs"
+                                >Release</span
+                            >
+                            <span
+                                v-else-if="version.version_type === 'beta'"
+                                class="badge badge-warning badge-xs"
+                                >Beta</span
+                            >
+                        </div>
+                        <div class="text-[10px] text-base-content/50 mt-1">
+                            {{
+                                new Date(
+                                    version.date_published
+                                ).toLocaleDateString()
+                            }}
+                            • {{ version.loaders.join(", ") }}
+                        </div>
+                    </div>
+                    <button
+                        @click="installVersion(selectedVersionsMod, version)"
+                        class="btn btn-sm btn-primary"
+                    >
+                        {{ t("mods.install") }}
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <div
+            class="flex justify-end gap-2 pt-2 border-t border-base-content/10"
+        >
+            <button @click="emit('close')" class="btn btn-ghost">
+                {{ t("common.close") }}
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
+import { Search, Download, AlertCircle, ChevronLeft } from "lucide-vue-next";
+import {
+    ModrinthService,
+    type ModrinthSearchResult,
+    type ModrinthVersion,
+} from "../../../services/modrinthService";
+import { invoke } from "@tauri-apps/api/core";
+import type { Client } from "../../../types/ui";
+import { useToast } from "../../../services/toastService";
+
+const props = defineProps<{
+    client: Client;
+}>();
+
+const emit = defineEmits(["close"]);
+const { t } = useI18n();
+const { addToast } = useToast();
+
+const searchQuery = ref("");
+const mods = ref<ModrinthSearchResult[]>([]);
+const isLoading = ref(false);
+const error = ref<string | null>(null);
+const hasSearched = ref(false);
+const installingMods = ref(new Set<string>());
+
+const installedModFiles = ref<string[]>([]);
+
+const selectedVersionsMod = ref<ModrinthSearchResult | null>(null);
+const versions = ref<ModrinthVersion[]>([]);
+const isLoadingVersions = ref(false);
+
+const fetchInstalledMods = async () => {
+    try {
+        installedModFiles.value = await invoke<string[]>(
+            "list_installed_mods",
+            { id: props.client.id }
+        );
+    } catch (e) {
+        console.error("Failed to fetch installed mods", e);
+    }
+};
+
+const isModInstalled = (mod: ModrinthSearchResult) => {
+    const slugLower = mod.slug.toLowerCase();
+    const titleLower = mod.title.toLowerCase().replace(/\s+/g, "-");
+    return installedModFiles.value.some((file) => {
+        const fileLower = file.toLowerCase();
+        return fileLower.includes(slugLower) || fileLower.includes(titleLower);
+    });
+};
+
+onMounted(() => {
+    fetchInstalledMods();
+});
+
+const handleSearch = async () => {
+    if (!searchQuery.value.trim()) return;
+
+    isLoading.value = true;
+    error.value = null;
+    mods.value = [];
+    hasSearched.value = true;
+
+    try {
+        const result = await ModrinthService.searchMods(searchQuery.value, {
+            limit: 20,
+            facets: JSON.stringify([[`project_type:mod`]]),
+        });
+        mods.value = result.hits;
+    } catch (e: any) {
+        console.error("Search failed", e);
+        error.value = e.message || "Failed to search mods";
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const showVersions = async (mod: ModrinthSearchResult) => {
+    selectedVersionsMod.value = mod;
+    isLoadingVersions.value = true;
+    try {
+        const gameVersion = props.client.version;
+        versions.value = await ModrinthService.getModVersions(
+            mod.slug,
+            ["fabric"],
+            [gameVersion]
+        );
+    } catch (e: any) {
+        console.error("Failed to fetch versions", e);
+        addToast(t("mods.install_failed", { error: e.message }), "error", 5000);
+        selectedVersionsMod.value = null;
+    } finally {
+        isLoadingVersions.value = false;
+    }
+};
+
+const installVersion = async (
+    mod: ModrinthSearchResult,
+    version: ModrinthVersion
+) => {
+    if (installingMods.value.has(mod.project_id)) return;
+
+    installingMods.value.add(mod.project_id);
+
+    try {
+        const file =
+            version.files.find((f: any) => f.primary) || version.files[0];
+        if (!file) {
+            throw new Error("No file found in version");
+        }
+
+        await invoke("install_mod_from_url", {
+            id: props.client.id,
+            url: file.url,
+            filename: file.filename,
+        });
+
+        addToast(
+            t("mods.install_success", { mod: mod.title }),
+            "success",
+            3000
+        );
+        await fetchInstalledMods();
+    } catch (e: any) {
+        console.error("Install failed", e);
+        addToast(t("mods.install_failed", { error: e.message }), "error", 5000);
+    } finally {
+        installingMods.value.delete(mod.project_id);
+    }
+};
+</script>
diff --git a/src/components/modals/clients/TelemetryConsentModal.vue b/src/components/modals/clients/TelemetryConsentModal.vue
index 08e4d9bb..094ad7ee 100644
--- a/src/components/modals/clients/TelemetryConsentModal.vue
+++ b/src/components/modals/clients/TelemetryConsentModal.vue
@@ -1,34 +1,42 @@
 <template>
     <transition name="disclaimer-fade">
-        <div v-if="show"
-            class="fixed inset-0 bg-black/80 z-1400 p-9 flex items-center justify-center backdrop-blur-md">
+        <div
+            v-if="show"
+            class="fixed inset-0 bg-black/80 z-1400 p-9 flex items-center justify-center backdrop-blur-md"
+        >
             <transition name="disclaimer-scale">
-                <div v-if="show"
-                    class="bg-base-200 rounded-xl shadow-2xl border border-base-300 w-full max-w-2xl flex flex-col max-h-[80vh]">
-                    <div class="flex flex-col items-center text-center p-6 grow overflow-y-auto">
+                <div
+                    v-if="show"
+                    class="bg-base-200 rounded-xl shadow-2xl border border-base-300 w-full max-w-2xl flex flex-col max-h-[80vh]"
+                >
+                    <div
+                        class="flex flex-col items-center text-center p-6 grow overflow-y-auto"
+                    >
                         <h2 class="text-2xl font-bold text-primary mb-4">
-                            {{ t('modals.telemetry_consent.title') }}
+                            {{ t("modals.telemetry_consent.title") }}
                         </h2>
 
                         <div class="text-left space-y-4 max-w-xl">
                             <p class="text-base-content/80">
-                                {{ t('modals.telemetry_consent.description') }}
+                                {{ t("modals.telemetry_consent.description") }}
                             </p>
 
                             <div class="bg-base-300 rounded-lg p-4 space-y-3">
                                 <h3 class="font-semibold text-primary">
                                     {{
                                         t(
-                                            'modals.telemetry_consent.data_collected_title'
+                                            "modals.telemetry_consent.data_collected_title"
                                         )
                                     }}
                                 </h3>
-                                <ul class="text-sm text-base-content/70 space-y-2">
+                                <ul
+                                    class="text-sm text-base-content/70 space-y-2"
+                                >
                                     <li class="flex items-start">
                                         <span class="text-primary mr-2">•</span>
                                         {{
                                             t(
-                                                'modals.telemetry_consent.data_collected.performance'
+                                                "modals.telemetry_consent.data_collected.performance"
                                             )
                                         }}
                                     </li>
@@ -36,7 +44,7 @@
                                         <span class="text-primary mr-2">•</span>
                                         {{
                                             t(
-                                                'modals.telemetry_consent.data_collected.usage_patterns'
+                                                "modals.telemetry_consent.data_collected.usage_patterns"
                                             )
                                         }}
                                     </li>
@@ -44,7 +52,7 @@
                                         <span class="text-primary mr-2">•</span>
                                         {{
                                             t(
-                                                'modals.telemetry_consent.data_collected.crash_reports'
+                                                "modals.telemetry_consent.data_collected.crash_reports"
                                             )
                                         }}
                                     </li>
@@ -52,23 +60,25 @@
                                         <span class="text-primary mr-2">•</span>
                                         {{
                                             t(
-                                                'modals.telemetry_consent.data_collected.feature_usage'
+                                                "modals.telemetry_consent.data_collected.feature_usage"
                                             )
                                         }}
                                     </li>
                                 </ul>
                             </div>
 
-                            <div class="bg-info/10 border border-info/20 rounded-lg p-4">
+                            <div
+                                class="bg-info/10 border border-info/20 rounded-lg p-4"
+                            >
                                 <p class="text-sm text-base-content/80">
                                     <span class="font-semibold text-info">{{
                                         t(
-                                            'modals.telemetry_consent.privacy_note_title'
+                                            "modals.telemetry_consent.privacy_note_title"
                                         )
                                     }}</span>
                                     {{
                                         t(
-                                            'modals.telemetry_consent.privacy_note'
+                                            "modals.telemetry_consent.privacy_note"
                                         )
                                     }}
                                 </p>
@@ -76,12 +86,14 @@
                         </div>
                     </div>
 
-                    <div class="p-6 border-t border-base-300 flex flex-col sm:flex-row gap-3 justify-end">
+                    <div
+                        class="p-6 border-t border-base-300 flex flex-col sm:flex-row gap-3 justify-end"
+                    >
                         <button @click="handleDecline" class="btn btn-ghost">
-                            {{ t('modals.telemetry_consent.decline') }}
+                            {{ t("modals.telemetry_consent.decline") }}
                         </button>
                         <button @click="handleAccept" class="btn btn-primary">
-                            {{ t('modals.telemetry_consent.accept') }}
+                            {{ t("modals.telemetry_consent.accept") }}
                         </button>
                     </div>
                 </div>
@@ -91,45 +103,45 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
-import { invoke } from '@tauri-apps/api/core';
-import { useToast } from '../../../services/toastService';
+import { useI18n } from "vue-i18n";
+import { invoke } from "@tauri-apps/api/core";
+import { useToast } from "../../../services/toastService";
 
 defineProps<{
     show: boolean;
 }>();
 
-const emit = defineEmits(['accept', 'decline', 'close']);
+const emit = defineEmits(["accept", "decline", "close"]);
 
 const { t } = useI18n();
 const { addToast } = useToast();
 
 const handleAccept = async () => {
     try {
-        await invoke('set_optional_telemetry', { enabled: true });
-        addToast(t('toast.telemetry.analytics_enabled'), 'success');
-        emit('accept');
-        emit('close');
+        await invoke("set_optional_telemetry", { enabled: true });
+        addToast(t("toast.telemetry.analytics_enabled"), "success");
+        emit("accept");
+        emit("close");
     } catch (error) {
-        console.error('Failed to enable analytics:', error);
+        console.error("Failed to enable analytics:", error);
         addToast(
-            t('toast.telemetry.analytics_enable_failed', { error }),
-            'error'
+            t("toast.telemetry.analytics_enable_failed", { error }),
+            "error"
         );
     }
 };
 
 const handleDecline = async () => {
     try {
-        await invoke('set_optional_telemetry', { enabled: false });
-        addToast(t('toast.telemetry.analytics_disabled'), 'info');
-        emit('decline');
-        emit('close');
+        await invoke("set_optional_telemetry", { enabled: false });
+        addToast(t("toast.telemetry.analytics_disabled"), "info");
+        emit("decline");
+        emit("close");
     } catch (error) {
-        console.error('Failed to disable analytics:', error);
+        console.error("Failed to disable analytics:", error);
         addToast(
-            t('toast.telemetry.analytics_disable_failed', { error }),
-            'error'
+            t("toast.telemetry.analytics_disable_failed", { error }),
+            "error"
         );
     }
 };
diff --git a/src/components/modals/clients/TelemetryInfoModal.vue b/src/components/modals/clients/TelemetryInfoModal.vue
index 1b318530..02b54d7f 100644
--- a/src/components/modals/clients/TelemetryInfoModal.vue
+++ b/src/components/modals/clients/TelemetryInfoModal.vue
@@ -3,20 +3,20 @@
         <!-- same text as TelemetryConsentModal.vue -->
         <div class="bg-base-300 rounded-xl shadow-md p-5 space-y-4">
             <h3 class="font-bold text-lg text-primary">
-                {{ t('modals.telemetry_consent.data_collected_title') }}
+                {{ t("modals.telemetry_consent.data_collected_title") }}
             </h3>
             <ul class="text-sm text-base-content/70 space-y-3">
                 <li class="flex items-start">
                     <span class="text-primary text-lg mr-2.5 leading-5">•</span>
                     <span>{{
-                        t('modals.telemetry_consent.data_collected.performance')
+                        t("modals.telemetry_consent.data_collected.performance")
                     }}</span>
                 </li>
                 <li class="flex items-start">
                     <span class="text-primary text-lg mr-2.5 leading-5">•</span>
                     <span>{{
                         t(
-                            'modals.telemetry_consent.data_collected.usage_patterns'
+                            "modals.telemetry_consent.data_collected.usage_patterns"
                         )
                     }}</span>
                 </li>
@@ -24,7 +24,7 @@
                     <span class="text-primary text-lg mr-2.5 leading-5">•</span>
                     <span>{{
                         t(
-                            'modals.telemetry_consent.data_collected.crash_reports'
+                            "modals.telemetry_consent.data_collected.crash_reports"
                         )
                     }}</span>
                 </li>
@@ -32,7 +32,7 @@
                     <span class="text-primary text-lg mr-2.5 leading-5">•</span>
                     <span>{{
                         t(
-                            'modals.telemetry_consent.data_collected.feature_usage'
+                            "modals.telemetry_consent.data_collected.feature_usage"
                         )
                     }}</span>
                 </li>
@@ -40,20 +40,22 @@
         </div>
 
         <div class="flex justify-end mt-8">
-            <button @click="$emit('close')"
-                class="btn btn-primary px-6 hover:opacity-90 transition-opacity duration-200 flex items-center">
+            <button
+                @click="$emit('close')"
+                class="btn btn-primary px-6 hover:opacity-90 transition-opacity duration-200 flex items-center"
+            >
                 <CheckIcon class="w-4.5 h-4.5 mr-2.5" />
-                {{ $t('common.ok') }}
+                {{ $t("common.ok") }}
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { Check as CheckIcon } from 'lucide-vue-next';
-import { useI18n } from 'vue-i18n';
+import { Check as CheckIcon } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
 
-defineEmits(['close']);
+defineEmits(["close"]);
 
 const { t } = useI18n();
 </script>
diff --git a/src/components/modals/common/FullscreenAvatarModal.vue b/src/components/modals/common/FullscreenAvatarModal.vue
index 7ddc326c..4deae7a4 100644
--- a/src/components/modals/common/FullscreenAvatarModal.vue
+++ b/src/components/modals/common/FullscreenAvatarModal.vue
@@ -1,8 +1,14 @@
 <template>
     <div class="w-full h-full flex items-center justify-center p-6">
         <div class="relative max-w-[95%] max-h-[95%] w-full">
-            <div class="w-full h-full flex items-center justify-center overflow-hidden rounded">
-                <img :src="src" :alt="alt || 'avatar'" class="object-contain w-full h-full bg-base-200" />
+            <div
+                class="w-full h-full flex items-center justify-center overflow-hidden rounded"
+            >
+                <img
+                    :src="src"
+                    :alt="alt || 'avatar'"
+                    class="object-contain w-full h-full bg-base-200"
+                />
             </div>
         </div>
     </div>
@@ -10,7 +16,7 @@
 
 <script setup lang="ts">
 defineProps<{ src: string; alt?: string }>();
-defineEmits(['close']);
+defineEmits(["close"]);
 </script>
 
 <style scoped>
diff --git a/src/components/modals/common/ReportModal.vue b/src/components/modals/common/ReportModal.vue
new file mode 100644
index 00000000..662346eb
--- /dev/null
+++ b/src/components/modals/common/ReportModal.vue
@@ -0,0 +1,99 @@
+<template>
+    <div class="space-y-4">
+        <div class="flex flex-col gap-1">
+            <h2 class="text-xl font-bold">
+                {{ t("reports.title", { name: username }) }}
+            </h2>
+            <p class="text-sm text-base-content/70">
+                {{ t("reports.description") }}
+            </p>
+        </div>
+
+        <div class="form-control w-full">
+            <label class="label">
+                <span class="label-text">{{ t("reports.reason_label") }}</span>
+            </label>
+            <select v-model="reason" class="select select-bordered w-full">
+                <option disabled value="">
+                    {{ t("reports.select_reason") }}
+                </option>
+                <option v-for="r in reasons" :key="r" :value="r">
+                    {{ t(`reports.reasons.${r}`) }}
+                </option>
+            </select>
+        </div>
+
+        <div class="form-control w-full">
+            <label class="label">
+                <span class="label-text">{{ t("reports.details_label") }}</span>
+            </label>
+            <textarea
+                v-model="details"
+                class="textarea textarea-bordered h-24"
+                :placeholder="t('reports.details_placeholder')"
+            ></textarea>
+        </div>
+
+        <div class="flex justify-end gap-2 mt-6">
+            <button class="btn btn-ghost" @click="$emit('close')">
+                {{ t("common.cancel") }}
+            </button>
+            <button
+                class="btn btn-primary"
+                :disabled="!reason || loading"
+                @click="submitReport"
+            >
+                <span
+                    v-if="loading"
+                    class="loading loading-spinner loading-xs"
+                ></span>
+                {{ t("reports.submit") }}
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { reportService } from "../../../services/reportService";
+import { useToast } from "../../../services/toastService";
+
+const props = defineProps<{
+    userId: number;
+    username: string;
+}>();
+
+const emit = defineEmits(["close", "success"]);
+
+const { t } = useI18n();
+
+const { addToast } = useToast();
+
+const reason = ref("");
+const details = ref("");
+const loading = ref(false);
+
+const reasons = ["HARASSMENT", "SPAM", "INAPPROPRIATE_CONTENT", "OTHER"];
+
+const submitReport = async () => {
+    if (!reason.value) return;
+
+    loading.value = true;
+    try {
+        await reportService.createReport({
+            reportedUserId: props.userId,
+            reason: reason.value,
+            description: details.value,
+        });
+        addToast(t("reports.success_message"), "success");
+        emit("success");
+        emit("close");
+    } catch (e) {
+        console.error("Failed to submit report", e);
+        addToast(t("reports.error_message"), "error");
+    } finally {
+        loading.value = false;
+    }
+};
+</script>
diff --git a/src/components/modals/common/SlowDownloadWarningModal.vue b/src/components/modals/common/SlowDownloadWarningModal.vue
index a9e52ffe..caa6fa66 100644
--- a/src/components/modals/common/SlowDownloadWarningModal.vue
+++ b/src/components/modals/common/SlowDownloadWarningModal.vue
@@ -1,12 +1,18 @@
 <template>
     <div class="space-y-3 mb-4">
         <p class="text-md text-base-content/80">
-            {{ isStalled ? t('modals.slow_download.stalled_description') : t('modals.slow_download.description') }}
+            {{
+                isStalled
+                    ? t("modals.slow_download.stalled_description")
+                    : t("modals.slow_download.description")
+            }}
         </p>
 
         <div v-if="!isStalled" class="bg-base-200 rounded-lg p-3">
             <div class="flex items-center justify-between">
-                <span class="text-sm text-base-content/70">{{ t('modals.slow_download.current_speed') }}</span>
+                <span class="text-sm text-base-content/70">{{
+                    t("modals.slow_download.current_speed")
+                }}</span>
                 <span class="font-mono text-warning">{{ formattedSpeed }}</span>
             </div>
         </div>
@@ -14,36 +20,42 @@
         <div v-else class="bg-error/10 border border-error/20 rounded-lg p-3">
             <div class="flex items-center gap-2">
                 <WifiOff class="w-5 h-5 text-error" />
-                <span class="text-sm text-error">{{ t('modals.slow_download.no_progress') }}</span>
+                <span class="text-sm text-error">{{
+                    t("modals.slow_download.no_progress")
+                }}</span>
             </div>
         </div>
 
-        <ul class="text-sm text-base-content/70 space-y-1 list-disc list-inside">
-            <li>{{ t('modals.slow_download.tip_1') }}</li>
-            <li>{{ t('modals.slow_download.tip_2') }}</li>
-            <li>{{ t('modals.slow_download.tip_3') }}</li>
-            <li class="text-warning font-medium">{{ t('modals.slow_download.tip_zapret') }}</li>
+        <ul
+            class="text-sm text-base-content/70 space-y-1 list-disc list-inside"
+        >
+            <li>{{ t("modals.slow_download.tip_1") }}</li>
+            <li>{{ t("modals.slow_download.tip_2") }}</li>
+            <li>{{ t("modals.slow_download.tip_3") }}</li>
+            <li class="text-warning font-medium">
+                {{ t("modals.slow_download.tip_zapret") }}
+            </li>
         </ul>
     </div>
 
     <div class="flex flex-col sm:flex-row gap-3 justify-end items-center">
         <button @click="handleClose" class="btn btn-primary">
-            {{ t('common.ok') }}
+            {{ t("common.ok") }}
         </button>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { WifiOff } from 'lucide-vue-next';
-import { useI18n } from 'vue-i18n';
+import { computed } from "vue";
+import { WifiOff } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
 
 const props = defineProps<{
     currentSpeed: number;
     isStalled?: boolean;
 }>();
 
-const emit = defineEmits(['close']);
+const emit = defineEmits(["close"]);
 
 const { t } = useI18n();
 
@@ -59,6 +71,6 @@ const formattedSpeed = computed(() => {
 });
 
 const handleClose = () => {
-    emit('close');
+    emit("close");
 };
 </script>
diff --git a/src/components/modals/settings/ChangeRootFolderModal.vue b/src/components/modals/settings/ChangeRootFolderModal.vue
index 7b17437a..128877f2 100644
--- a/src/components/modals/settings/ChangeRootFolderModal.vue
+++ b/src/components/modals/settings/ChangeRootFolderModal.vue
@@ -1,80 +1,116 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { open } from '@tauri-apps/plugin-dialog';
-import { invoke } from '@tauri-apps/api/core';
-import { useToast } from '../../../services/toastService';
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { open } from "@tauri-apps/plugin-dialog";
+import { invoke } from "@tauri-apps/api/core";
+import { useToast } from "../../../services/toastService";
 
 const { t } = useI18n();
 const { addToast } = useToast();
 
-const selectedPath = ref<string>('');
-const mode = ref<'move' | 'wipe'>('move');
+const selectedPath = ref<string>("");
+const mode = ref<"move" | "wipe">("move");
 const busy = ref(false);
 
 const browse = async () => {
     const dir = await open({ directory: true, multiple: false });
-    if (typeof dir === 'string') {
+    if (typeof dir === "string") {
         selectedPath.value = dir;
     }
 };
 
 const confirm = async () => {
     if (!selectedPath.value) {
-        addToast(t('settings.change_root.select_folder_first'), 'warning');
+        addToast(t("settings.change_root.select_folder_first"), "warning");
         return;
     }
     try {
         busy.value = true;
-        await invoke('change_data_folder', {
+        await invoke("change_data_folder", {
             newPath: selectedPath.value,
             mode: mode.value,
         } as any);
-        addToast(t('settings.change_root.success'), 'success');
-        addToast(t('settings.change_root.restart_required'), 'info', 5000);
-        emit('done');
+        addToast(t("settings.change_root.success"), "success");
+        addToast(t("settings.change_root.restart_required"), "info", 5000);
+        emit("done");
     } catch (e: any) {
-        addToast(t('settings.change_root.failed', { error: String(e) }), 'error');
+        addToast(
+            t("settings.change_root.failed", { error: String(e) }),
+            "error"
+        );
     } finally {
         busy.value = false;
     }
 };
 
-const emit = defineEmits<{ (e: 'close'): void; (e: 'done'): void }>();
+const emit = defineEmits<{ (e: "close"): void; (e: "done"): void }>();
 </script>
 
 <template>
     <div class="space-y-4">
         <div>
             <label class="label">
-                <span class="label-text">{{ t('settings.change_root.target_folder') }}</span>
+                <span class="label-text">{{
+                    t("settings.change_root.target_folder")
+                }}</span>
             </label>
             <div class="flex gap-2">
-                <input class="input input-bordered w-full bg-base-100" :placeholder="t('common.browse')"
-                    v-model="selectedPath" />
-                <button class="btn btn-secondary" @click="browse">{{ t('common.browse') }}</button>
+                <input
+                    class="input input-bordered w-full bg-base-100"
+                    :placeholder="t('common.browse')"
+                    v-model="selectedPath"
+                />
+                <button class="btn btn-secondary" @click="browse">
+                    {{ t("common.browse") }}
+                </button>
             </div>
-            <p class="text-xs opacity-70 mt-2">{{ t('settings.change_root.hint') }}</p>
+            <p class="text-xs opacity-70 mt-2">
+                {{ t("settings.change_root.hint") }}
+            </p>
         </div>
 
         <div>
-            <label class="label"><span class="label-text">{{ t('settings.change_root.mode') }}</span></label>
+            <label class="label"
+                ><span class="label-text">{{
+                    t("settings.change_root.mode")
+                }}</span></label
+            >
             <div class="join join-vertical sm:join-horizontal w-full">
-                <input class="join-item btn" type="radio" name="mode" :aria-label="t('settings.change_root.mode_move')"
-                    value="move" v-model="mode" />
-                <input class="join-item btn" type="radio" name="mode" :aria-label="t('settings.change_root.mode_wipe')"
-                    value="wipe" v-model="mode" />
+                <input
+                    class="join-item btn"
+                    type="radio"
+                    name="mode"
+                    :aria-label="t('settings.change_root.mode_move')"
+                    value="move"
+                    v-model="mode"
+                />
+                <input
+                    class="join-item btn"
+                    type="radio"
+                    name="mode"
+                    :aria-label="t('settings.change_root.mode_wipe')"
+                    value="wipe"
+                    v-model="mode"
+                />
             </div>
             <ul class="list-disc ml-5 mt-2 text-xs opacity-70">
-                <li v-if="mode === 'move'">{{ t('settings.change_root.mode_move_desc') }}</li>
-                <li v-else>{{ t('settings.change_root.mode_wipe_desc') }}</li>
+                <li v-if="mode === 'move'">
+                    {{ t("settings.change_root.mode_move_desc") }}
+                </li>
+                <li v-else>{{ t("settings.change_root.mode_wipe_desc") }}</li>
             </ul>
         </div>
 
         <div class="flex justify-end gap-2 mt-4">
-            <button class="btn" @click="$emit('close')">{{ t('common.cancel') }}</button>
-            <button class="btn btn-primary" :class="{ 'btn-disabled': busy }" @click="confirm">
-                <span v-if="!busy">{{ t('common.save') }}</span>
+            <button class="btn" @click="$emit('close')">
+                {{ t("common.cancel") }}
+            </button>
+            <button
+                class="btn btn-primary"
+                :class="{ 'btn-disabled': busy }"
+                @click="confirm"
+            >
+                <span v-if="!busy">{{ t("common.save") }}</span>
                 <span v-else class="loading loading-spinner loading-sm"></span>
             </button>
         </div>
diff --git a/src/components/modals/settings/ResetConfirmModal.vue b/src/components/modals/settings/ResetConfirmModal.vue
index f4b841f3..5c64de0a 100644
--- a/src/components/modals/settings/ResetConfirmModal.vue
+++ b/src/components/modals/settings/ResetConfirmModal.vue
@@ -1,41 +1,41 @@
 <template>
     <div>
         <p class="text-sm text-base-content/70">
-            {{ $t('modals.reset_confirm.message') }}
+            {{ $t("modals.reset_confirm.message") }}
         </p>
 
         <div class="flex justify-end space-x-2 mt-6">
             <button @click="confirmReset" class="btn btn-primary">
                 <check-icon class="w-4 h-4 mr-2" />
-                {{ $t('modals.reset_confirm.yes_reset') }}
+                {{ $t("modals.reset_confirm.yes_reset") }}
             </button>
             <button @click="$emit('close')" class="btn btn-outline">
                 <x-icon class="w-4 h-4 mr-2" />
-                {{ $t('common.cancel') }}
+                {{ $t("common.cancel") }}
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { invoke } from '@tauri-apps/api/core';
-import { useToast } from '../../../services/toastService';
-import { Check as CheckIcon, X as XIcon } from 'lucide-vue-next';
-import { useI18n } from 'vue-i18n';
+import { invoke } from "@tauri-apps/api/core";
+import { useToast } from "../../../services/toastService";
+import { Check as CheckIcon, X as XIcon } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
 
-const emit = defineEmits(['close', 'settings-reset']);
+const emit = defineEmits(["close", "settings-reset"]);
 const { addToast } = useToast();
 const { t } = useI18n();
 
 const confirmReset = async () => {
     try {
-        await invoke('reset_settings');
-        addToast(t('toast.modal.settings_reset_success'), 'success');
-        emit('settings-reset');
-        emit('close');
+        await invoke("reset_settings");
+        addToast(t("toast.modal.settings_reset_success"), "success");
+        emit("settings-reset");
+        emit("close");
     } catch (error) {
-        console.error('Failed to reset settings:', error);
-        addToast(t('toast.modal.settings_reset_failed', { error }), 'error');
+        console.error("Failed to reset settings:", error);
+        addToast(t("toast.modal.settings_reset_failed", { error }), "error");
     }
 };
 </script>
diff --git a/src/components/modals/settings/UpdateModal.vue b/src/components/modals/settings/UpdateModal.vue
index f86cdbbc..d0b86324 100644
--- a/src/components/modals/settings/UpdateModal.vue
+++ b/src/components/modals/settings/UpdateModal.vue
@@ -3,54 +3,93 @@
         <div class="text-center space-y-4 shrink-0 pb-4">
             <div class="space-y-2">
                 <div class="flex items-center justify-center gap-4 text-sm">
-                    <div class="flex items-center gap-2 px-3 py-1 bg-base-200 rounded-full">
-                        <span class="text-base-content/60">{{ t('updater.current') }}:</span>
-                        <code class="text-primary font-mono">v{{ updateInfo.current_version }}</code>
+                    <div
+                        class="flex items-center gap-2 px-3 py-1 bg-base-200 rounded-full"
+                    >
+                        <span class="text-base-content/60"
+                            >{{ t("updater.current") }}:</span
+                        >
+                        <code class="text-primary font-mono"
+                            >v{{ updateInfo.current_version }}</code
+                        >
                     </div>
                     <ChevronRight class="w-4 h-4 text-base-content/40" />
-                    <div class="flex items-center gap-2 px-3 py-1 bg-primary/10 rounded-full">
-                        <span class="text-base-content/60">{{ t('updater.latest') }}:</span>
-                        <code class="text-primary font-mono font-bold">{{ updateInfo.latest_version }}</code>
+                    <div
+                        class="flex items-center gap-2 px-3 py-1 bg-primary/10 rounded-full"
+                    >
+                        <span class="text-base-content/60"
+                            >{{ t("updater.latest") }}:</span
+                        >
+                        <code class="text-primary font-mono font-bold">{{
+                            updateInfo.latest_version
+                        }}</code>
                     </div>
                 </div>
             </div>
         </div>
 
-        <div class="flex-1 overflow-y-auto min-h-0 space-y-6" style="max-height: calc(80vh - 160px);">
-            <div v-if="updateInfo.changelog && updateInfo.changelog.length > 0" class="space-y-4">
+        <div
+            class="flex-1 overflow-y-auto min-h-0 space-y-6"
+            style="max-height: calc(80vh - 160px)"
+        >
+            <div
+                v-if="updateInfo.changelog && updateInfo.changelog.length > 0"
+                class="space-y-4"
+            >
                 <div class="divider">
-                    <h4 class="font-semibold flex items-center gap-2 text-primary">
+                    <h4
+                        class="font-semibold flex items-center gap-2 text-primary"
+                    >
                         <History class="w-4 h-4" />
-                        {{ t('updater.changelog') }}
+                        {{ t("updater.changelog") }}
                     </h4>
                 </div>
 
                 <div class="space-y-6">
-                    <div v-for="(entry, index) in displayedChangelogEntries" :key="entry.version"
-                        class="relative timeline-entry" :class="{ 'opacity-60': index > 0 }">
-
-                        <div v-if="index < displayedChangelogEntries.length - 1"
-                            class="absolute left-6 top-14 w-0.5 h-full bg-linear-to-b from-primary/40 to-transparent">
-                        </div>
+                    <div
+                        v-for="(entry, index) in displayedChangelogEntries"
+                        :key="entry.version"
+                        class="relative timeline-entry"
+                        :class="{ 'opacity-60': index > 0 }"
+                    >
+                        <div
+                            v-if="index < displayedChangelogEntries.length - 1"
+                            class="absolute left-6 top-14 w-0.5 h-full bg-linear-to-b from-primary/40 to-transparent"
+                        ></div>
 
                         <div class="flex items-center gap-4 mb-4">
                             <div class="flex-1">
                                 <div class="flex items-center gap-3 mb-1">
-                                    <h5 class="text-lg font-bold">{{ entry.version }}</h5>
+                                    <h5 class="text-lg font-bold">
+                                        {{ entry.version }}
+                                    </h5>
                                     <span class="text-xs text-base-content/50">
                                         {{ entry.date }}
                                     </span>
                                 </div>
 
-                                <div v-if="entry.highlights && entry.highlights.length > 0"
-                                    class="flex flex-wrap gap-2">
-                                    <span v-for="highlight in entry.highlights.slice(0, 3)" :key="highlight"
-                                        class="inline-flex items-center gap-1 px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">
+                                <div
+                                    v-if="
+                                        entry.highlights &&
+                                        entry.highlights.length > 0
+                                    "
+                                    class="flex flex-wrap gap-2"
+                                >
+                                    <span
+                                        v-for="highlight in entry.highlights.slice(
+                                            0,
+                                            3
+                                        )"
+                                        :key="highlight"
+                                        class="inline-flex items-center gap-1 px-2 py-1 bg-primary/10 text-primary text-xs rounded-full"
+                                    >
                                         <Star class="w-3 h-3" />
                                         {{ highlight }}
                                     </span>
-                                    <span v-if="entry.highlights.length > 3"
-                                        class="text-xs text-base-content/50 self-center">
+                                    <span
+                                        v-if="entry.highlights.length > 3"
+                                        class="text-xs text-base-content/50 self-center"
+                                    >
                                         +{{ entry.highlights.length - 3 }} more
                                     </span>
                                 </div>
@@ -58,23 +97,46 @@
                         </div>
 
                         <div class="ml-16 space-y-3">
-                            <div v-for="(categoryGroup, category) in groupChangesByCategory(entry.changes)"
-                                :key="category" class="space-y-2">
-
-                                <h6 class="text-sm font-medium flex items-center gap-2"
-                                    :class="getCategoryHeaderClass(category)">
-                                    <component :is="getCategoryIcon(category)" class="w-4 h-4" />
+                            <div
+                                v-for="(
+                                    categoryGroup, category
+                                ) in groupChangesByCategory(entry.changes)"
+                                :key="category"
+                                class="space-y-2"
+                            >
+                                <h6
+                                    class="text-sm font-medium flex items-center gap-2"
+                                    :class="getCategoryHeaderClass(category)"
+                                >
+                                    <component
+                                        :is="getCategoryIcon(category)"
+                                        class="w-4 h-4"
+                                    />
                                     {{ t(`updater.categories.${category}`) }}
-                                    <span class="badge badge-xs">{{ categoryGroup.length }}</span>
+                                    <span class="badge badge-xs">{{
+                                        categoryGroup.length
+                                    }}</span>
                                 </h6>
 
                                 <div class="space-y-2">
-                                    <div v-for="change in categoryGroup" :key="change.description_key"
+                                    <div
+                                        v-for="change in categoryGroup"
+                                        :key="change.description_key"
                                         class="flex items-start gap-3 p-3 rounded-lg transition-all duration-200 hover:bg-base-200/50"
-                                        :class="getCategoryBgClass(category)">
-                                        <span class="text-lg shrink-0 mt-0.5">{{ change.icon }}</span>
-                                        <span class="text-sm text-base-content/80 leading-relaxed">
-                                            {{ resolveDescription(change, entry) }}
+                                        :class="getCategoryBgClass(category)"
+                                    >
+                                        <span class="text-lg shrink-0 mt-0.5">{{
+                                            change.icon
+                                        }}</span>
+                                        <span
+                                            class="text-sm text-base-content/80 leading-relaxed"
+                                        >
+                                            {{
+                                                resolveDescription(
+                                                    change,
+                                                    entry
+                                                )
+                                            }}
                                         </span>
                                     </div>
                                 </div>
@@ -82,13 +144,27 @@
                         </div>
                     </div>
 
-                    <div v-if="updateInfo.changelog.length > maxDisplayedEntries" class="text-center pb-4">
-                        <button @click="toggleShowAllChangelog" class="btn btn-sm btn-ghost btn-outline">
-                            <ChevronDown class="w-4 h-4 transition-transform duration-200"
-                                :class="{ 'rotate-180': showAllChangelog }" />
-                            {{ showAllChangelog ? t('updater.show_less') : t('updater.show_more', {
-                                count: updateInfo.changelog.length - maxDisplayedEntries
-                            }) }}
+                    <div
+                        v-if="updateInfo.changelog.length > maxDisplayedEntries"
+                        class="text-center pb-4"
+                    >
+                        <button
+                            @click="toggleShowAllChangelog"
+                            class="btn btn-sm btn-ghost btn-outline"
+                        >
+                            <ChevronDown
+                                class="w-4 h-4 transition-transform duration-200"
+                                :class="{ 'rotate-180': showAllChangelog }"
+                            />
+                            {{
+                                showAllChangelog
+                                    ? t("updater.show_less")
+                                    : t("updater.show_more", {
+                                          count:
+                                              updateInfo.changelog.length -
+                                              maxDisplayedEntries,
+                                      })
+                            }}
                         </button>
                     </div>
                 </div>
@@ -98,21 +174,32 @@
         <div class="flex gap-3 justify-end mt-4">
             <button @click="$emit('close')" class="btn btn-ghost">
                 <X class="w-4 h-4 mr-2" />
-                {{ t('updater.skip') }}
+                {{ t("updater.skip") }}
             </button>
-            <button @click="handleDownload" :disabled="isDownloading" class="btn btn-primary gap-2"
-                :class="{ 'btn-error': updateInfo.is_critical }">
-                <span v-if="isDownloading" class="loading loading-spinner loading-sm"></span>
+            <button
+                @click="handleDownload"
+                :disabled="isDownloading"
+                class="btn btn-primary gap-2"
+                :class="{ 'btn-error': updateInfo.is_critical }"
+            >
+                <span
+                    v-if="isDownloading"
+                    class="loading loading-spinner loading-sm"
+                ></span>
                 <Download v-else class="w-4 h-4" />
-                {{ isDownloading ? t('updater.downloading') : t('updater.download_install') }}
+                {{
+                    isDownloading
+                        ? t("updater.downloading")
+                        : t("updater.download_install")
+                }}
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
 import {
     Download,
     FileText,
@@ -126,7 +213,7 @@ import {
     Shield,
     Plus,
     Bug,
-} from 'lucide-vue-next';
+} from "lucide-vue-next";
 
 interface ChangeItem {
     category: string;
@@ -178,27 +265,30 @@ const toggleShowAllChangelog = () => {
 };
 
 const groupChangesByCategory = (changes: ChangeItem[]) => {
-    return changes.reduce((groups, change) => {
-        const category = change.category;
-        if (!groups[category]) {
-            groups[category] = [];
-        }
-        groups[category].push(change);
-        return groups;
-    }, {} as Record<string, ChangeItem[]>);
+    return changes.reduce(
+        (groups, change) => {
+            const category = change.category;
+            if (!groups[category]) {
+                groups[category] = [];
+            }
+            groups[category].push(change);
+            return groups;
+        },
+        {} as Record<string, ChangeItem[]>
+    );
 };
 
 const getCategoryIcon = (category: string) => {
     switch (category) {
-        case 'feature':
+        case "feature":
             return Plus;
-        case 'improvement':
+        case "improvement":
             return Zap;
-        case 'bugfix':
+        case "bugfix":
             return Bug;
-        case 'security':
+        case "security":
             return Shield;
-        case 'breaking':
+        case "breaking":
             return AlertTriangle;
         default:
             return FileText;
@@ -207,54 +297,54 @@ const getCategoryIcon = (category: string) => {
 
 const getCategoryHeaderClass = (category: string): string => {
     switch (category) {
-        case 'feature':
-            return 'text-primary';
-        case 'improvement':
-            return 'text-info';
-        case 'bugfix':
-            return 'text-warning';
-        case 'security':
-            return 'text-error';
-        case 'breaking':
-            return 'text-error';
+        case "feature":
+            return "text-primary";
+        case "improvement":
+            return "text-info";
+        case "bugfix":
+            return "text-warning";
+        case "security":
+            return "text-error";
+        case "breaking":
+            return "text-error";
         default:
-            return 'text-base-content/70';
+            return "text-base-content/70";
     }
 };
 
 const getCategoryBgClass = (category: string): string => {
     switch (category) {
-        case 'feature':
-            return 'bg-primary/5 border border-primary/10';
-        case 'improvement':
-            return 'bg-info/5 border border-info/10';
-        case 'bugfix':
-            return 'bg-warning/5 border border-warning/10';
-        case 'security':
-            return 'bg-error/5 border border-error/10';
-        case 'breaking':
-            return 'bg-error/5 border border-error/10';
+        case "feature":
+            return "bg-primary/5 border border-primary/10";
+        case "improvement":
+            return "bg-info/5 border border-info/10";
+        case "bugfix":
+            return "bg-warning/5 border border-warning/10";
+        case "security":
+            return "bg-error/5 border border-error/10";
+        case "breaking":
+            return "bg-error/5 border border-error/10";
         default:
-            return 'bg-base-200/30 border border-base-300/50';
+            return "bg-base-200/30 border border-base-300/50";
     }
 };
 
 const handleDownload = async () => {
     isDownloading.value = true;
     try {
-        emit('download');
+        emit("download");
     } finally {
     }
 };
 
 const resolveDescription = (change: ChangeItem, entry: ChangelogEntry) => {
-    const raw = change.description_key || '';
-    if (raw.includes('.')) {
+    const raw = change.description_key || "";
+    if (raw.includes(".")) {
         const val = t(raw as any) as string;
         if (val && val !== raw) return val;
     }
 
-    const versionKey = `v${entry.version.replace(/\./g, '_')}`;
+    const versionKey = `v${entry.version.replace(/\./g, "_")}`;
     const scoped = `updater.changelogs.${change.category}.${versionKey}.${raw}`;
     const scopedVal = t(scoped as any) as string;
     if (scopedVal && scopedVal !== scoped) return scopedVal;
diff --git a/src/components/modals/social/account/AddAccountModal.vue b/src/components/modals/social/account/AddAccountModal.vue
index 833cb19c..c0438f0e 100644
--- a/src/components/modals/social/account/AddAccountModal.vue
+++ b/src/components/modals/social/account/AddAccountModal.vue
@@ -3,72 +3,80 @@
         <div class="form-control">
             <label class="label">
                 <span class="label-text font-medium mb-1">{{
-                    t('modals.add_account.username_label')
-                    }}</span>
+                    t("modals.add_account.username_label")
+                }}</span>
             </label>
-            <input v-model="username" type="text" class="input input-bordered w-full bg-base-100"
-                :placeholder="t('modals.add_account.username_placeholder')" />
+            <input
+                v-model="username"
+                type="text"
+                class="input input-bordered w-full bg-base-100"
+                :placeholder="t('modals.add_account.username_placeholder')"
+            />
         </div>
 
         <div class="form-control">
             <label class="label">
                 <span class="label-text font-medium mb-1">{{
-                    t('modals.add_account.tags_label')
-                    }}</span>
+                    t("modals.add_account.tags_label")
+                }}</span>
             </label>
-            <input v-model="tags" type="text" class="input input-bordered w-full bg-base-100"
-                :placeholder="t('modals.add_account.tags_placeholder')" />
+            <input
+                v-model="tags"
+                type="text"
+                class="input input-bordered w-full bg-base-100"
+                :placeholder="t('modals.add_account.tags_placeholder')"
+            />
         </div>
 
         <div class="flex justify-end space-x-2 mt-9 w-full">
             <button @click="addAccount" class="btn btn-primary">
-                {{ t('modals.add_account.add_account') }}
+                {{ t("modals.add_account.add_account") }}
             </button>
             <button @click="$emit('close')" class="btn btn-outline">
-                {{ t('common.cancel') }}
+                {{ t("common.cancel") }}
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { invoke } from '@tauri-apps/api/core';
-import { useToast } from '../../../../services/toastService';
-import { useI18n } from 'vue-i18n';
+import { ref } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+import { useToast } from "../../../../services/toastService";
+import { useI18n } from "vue-i18n";
 
-const emit = defineEmits(['close', 'account-added']);
+const emit = defineEmits(["close", "account-added"]);
 const { addToast } = useToast();
 const { t } = useI18n();
 
-const username = ref('');
-const tags = ref('');
+const username = ref("");
+const tags = ref("");
 
 const addAccount = async () => {
     if (!username.value.trim()) {
-        addToast(t('toast.account.username_required'), 'error');
+        addToast(t("toast.account.username_required"), "error");
         return;
     }
 
     try {
         const tagList = tags.value
-            .split(',')
+            .split(",")
             .map((tag) => tag.trim())
             .filter((tag) => tag.length > 0);
 
-        await invoke('add_account', {
+        await invoke("add_account", {
             username: username.value.trim(),
             tags: tagList,
         });
 
-        username.value = '';
-        tags.value = '';
-        addToast(t('toast.account.account_added'), 'success');
-        emit('account-added');
-        emit('close');
+        username.value = "";
+        tags.value = "";
+        addToast(t("toast.account.account_added"), "success");
+        emit("account-added");
+        emit("close");
     } catch (error) {
-        console.error('Failed to add account:', error);
-        addToast(t('toast.account.account_add_failed', { error }), 'error');
+        console.error("Failed to add account:", error);
+        addToast(t("toast.account.account_add_failed", { error }), "error");
     }
 };
 </script>
diff --git a/src/components/modals/social/account/AvatarUploadModal.vue b/src/components/modals/social/account/AvatarUploadModal.vue
index b8ad2072..da4debda 100644
--- a/src/components/modals/social/account/AvatarUploadModal.vue
+++ b/src/components/modals/social/account/AvatarUploadModal.vue
@@ -2,56 +2,62 @@
     <div class="p-4">
         <h3 class="text-lg font-medium mb-4">{{ title }}</h3>
         <div>
-            <AvatarUploader :current-url="currentUrl" @uploaded="onUploaded"/>
+            <AvatarUploader :current-url="currentUrl" @uploaded="onUploaded" />
         </div>
         <div class="mt-4 flex justify-between items-center">
             <div>
-                <button class="btn btn-error btn-sm" @click="onResetAvatar">{{ t('account.reset_avatar') }}</button>
+                <button class="btn btn-error btn-sm" @click="onResetAvatar">
+                    {{ t("account.reset_avatar") }}
+                </button>
             </div>
             <div>
-                <button class="btn btn-ghost mr-2" @click="closeModal">{{ t('common.cancel') }}</button>
-                <button class="btn btn-primary" @click="closeModal">{{ t('common.done') }}</button>
+                <button class="btn btn-ghost mr-2" @click="closeModal">
+                    {{ t("common.cancel") }}
+                </button>
+                <button class="btn btn-primary" @click="closeModal">
+                    {{ t("common.done") }}
+                </button>
             </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import {useI18n} from 'vue-i18n';
-import AvatarUploader from '../../../../components/features/friends/AvatarUploader.vue';
-import {userService} from '../../../../services/userService';
-import {useToast} from '../../../../services/toastService';
+import { useI18n } from "vue-i18n";
+import AvatarUploader from "../../../../components/features/friends/AvatarUploader.vue";
+import { userService } from "../../../../services/userService";
+import { useToast } from "../../../../services/toastService";
 
 const props = defineProps<{ title?: string; currentUrl?: string }>();
 const emit = defineEmits<{
-    (e: 'uploaded'): void;
-    (e: 'close'): void;
+    (e: "uploaded"): void;
+    (e: "close"): void;
 }>();
 
-const {t} = useI18n();
+const { t } = useI18n();
 
-const {addToast} = useToast();
+const { addToast } = useToast();
 
 const currentUrl = props.currentUrl || null;
 
 const onUploaded = () => {
-    emit('uploaded');
+    emit("uploaded");
 };
 
 async function onResetAvatar() {
     try {
-        const {success, error} = await userService.resetAvatar();
-        if (!success) throw new Error(error || 'Failed');
-        addToast(t('account.avatar_reset_success'), 'success');
-        emit('uploaded');
+        const { success, error } = await userService.resetAvatar();
+        if (!success) throw new Error(error || "Failed");
+        addToast(t("account.avatar_reset_success"), "success");
+        emit("uploaded");
         closeModal();
     } catch (e: any) {
-        addToast(e.message || t('account.avatar_reset_failed'), 'error');
+        addToast(e.message || t("account.avatar_reset_failed"), "error");
     }
 }
 
 const closeModal = () => {
-    emit('close');
+    emit("close");
 };
 </script>
 
diff --git a/src/components/modals/social/account/ChangePasswordConfirmModal.vue b/src/components/modals/social/account/ChangePasswordConfirmModal.vue
index d6829657..17b4654d 100644
--- a/src/components/modals/social/account/ChangePasswordConfirmModal.vue
+++ b/src/components/modals/social/account/ChangePasswordConfirmModal.vue
@@ -1,31 +1,31 @@
 <template>
     <div>
         <p class="text-sm text-base-content/70 mb-4">
-            {{ $t('modals.change_password_confirm.message') }}
+            {{ $t("modals.change_password_confirm.message") }}
         </p>
 
         <div class="alert alert-warning mb-4">
             <AlertTriangle class="w-5 h-5" />
             <span class="text-sm">{{
-                $t('modals.change_password_confirm.warning')
-                }}</span>
+                $t("modals.change_password_confirm.warning")
+            }}</span>
         </div>
 
         <div class="flex justify-end space-x-2 mt-6">
             <button @click="confirmPasswordChange" class="btn btn-primary">
                 <Check class="w-4 h-4 mr-2" />
-                {{ $t('modals.change_password_confirm.yes_change') }}
+                {{ $t("modals.change_password_confirm.yes_change") }}
             </button>
             <button @click="$emit('close')" class="btn btn-outline">
                 <X class="w-4 h-4 mr-2" />
-                {{ $t('common.cancel') }}
+                {{ $t("common.cancel") }}
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { AlertTriangle, Check, X } from 'lucide-vue-next';
+import { AlertTriangle, Check, X } from "lucide-vue-next";
 
 interface Props {
     currentPassword: string;
@@ -33,10 +33,10 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const emit = defineEmits(['close', 'confirm']);
+const emit = defineEmits(["close", "confirm"]);
 
 const confirmPasswordChange = () => {
-    emit('confirm', {
+    emit("confirm", {
         currentPassword: props.currentPassword,
         newPassword: props.newPassword,
     });
diff --git a/src/components/modals/social/account/DeleteAccountConfirmModal.vue b/src/components/modals/social/account/DeleteAccountConfirmModal.vue
index 8c52c253..7f866cef 100644
--- a/src/components/modals/social/account/DeleteAccountConfirmModal.vue
+++ b/src/components/modals/social/account/DeleteAccountConfirmModal.vue
@@ -2,7 +2,7 @@
     <div>
         <p class="text-sm text-base-content/70">
             {{
-                $t('modals.delete_account_confirm.message', {
+                $t("modals.delete_account_confirm.message", {
                     username: account?.username,
                 })
             }}
@@ -11,21 +11,21 @@
         <div class="flex justify-end space-x-2 mt-6">
             <button @click="confirmDelete" class="btn btn-primary">
                 <check-icon class="w-4 h-4 mr-2" />
-                {{ $t('modals.delete_account_confirm.yes_delete') }}
+                {{ $t("modals.delete_account_confirm.yes_delete") }}
             </button>
             <button @click="$emit('close')" class="btn btn-outline">
                 <x-icon class="w-4 h-4 mr-2" />
-                {{ $t('common.cancel') }}
+                {{ $t("common.cancel") }}
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { invoke } from '@tauri-apps/api/core';
-import { useToast } from '../../../../services/toastService';
-import { Check as CheckIcon, X as XIcon } from 'lucide-vue-next';
-import { useI18n } from 'vue-i18n';
+import { invoke } from "@tauri-apps/api/core";
+import { useToast } from "../../../../services/toastService";
+import { Check as CheckIcon, X as XIcon } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
 
 interface Account {
     id: string;
@@ -40,19 +40,19 @@ const props = defineProps<{
     account: Account;
 }>();
 
-const emit = defineEmits(['close', 'account-deleted']);
+const emit = defineEmits(["close", "account-deleted"]);
 const { addToast } = useToast();
 const { t } = useI18n();
 
 const confirmDelete = async () => {
     try {
-        await invoke('remove_account', { id: props.account.id });
-        addToast(t('toast.account.account_deleted'), 'success');
-        emit('account-deleted');
-        emit('close');
+        await invoke("remove_account", { id: props.account.id });
+        addToast(t("toast.account.account_deleted"), "success");
+        emit("account-deleted");
+        emit("close");
     } catch (error) {
-        console.error('Failed to delete account:', error);
-        addToast(t('toast.account.account_delete_failed', { error }), 'error');
+        console.error("Failed to delete account:", error);
+        addToast(t("toast.account.account_delete_failed", { error }), "error");
     }
 };
 </script>
diff --git a/src/components/modals/social/account/EditAccountModal.vue b/src/components/modals/social/account/EditAccountModal.vue
index e9b663c4..0d7900a5 100644
--- a/src/components/modals/social/account/EditAccountModal.vue
+++ b/src/components/modals/social/account/EditAccountModal.vue
@@ -3,40 +3,48 @@
         <div class="form-control">
             <label class="label">
                 <span class="label-text font-medium mb-1">{{
-                    $t('modals.edit_account.username_label')
-                    }}</span>
+                    $t("modals.edit_account.username_label")
+                }}</span>
             </label>
-            <input v-model="username" type="text" class="input input-bordered w-full bg-base-100" />
+            <input
+                v-model="username"
+                type="text"
+                class="input input-bordered w-full bg-base-100"
+            />
         </div>
 
         <div class="form-control">
             <label class="label">
                 <span class="label-text font-medium mb-1">{{
-                    $t('modals.edit_account.tags_label')
-                    }}</span>
+                    $t("modals.edit_account.tags_label")
+                }}</span>
             </label>
-            <input v-model="tags" type="text" class="input input-bordered w-full bg-base-100" />
+            <input
+                v-model="tags"
+                type="text"
+                class="input input-bordered w-full bg-base-100"
+            />
         </div>
 
         <div class="flex justify-end space-x-2 mt-6">
             <button @click="updateAccount" class="btn btn-primary">
                 <check-icon class="w-4 h-4 mr-2" />
-                {{ $t('modals.edit_account.update') }}
+                {{ $t("modals.edit_account.update") }}
             </button>
             <button @click="$emit('close')" class="btn btn-outline">
                 <x-icon class="w-4 h-4 mr-2" />
-                {{ $t('common.cancel') }}
+                {{ $t("common.cancel") }}
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { invoke } from '@tauri-apps/api/core';
-import { useToast } from '../../../../services/toastService';
-import { Check as CheckIcon, X as XIcon } from 'lucide-vue-next';
-import { useI18n } from 'vue-i18n';
+import { ref } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+import { useToast } from "../../../../services/toastService";
+import { Check as CheckIcon, X as XIcon } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
 
 interface Account {
     id: string;
@@ -51,37 +59,37 @@ const props = defineProps<{
     account: Account;
 }>();
 
-const emit = defineEmits(['close', 'account-updated']);
+const emit = defineEmits(["close", "account-updated"]);
 const { addToast } = useToast();
 const { t } = useI18n();
 
 const username = ref(props.account.username);
-const tags = ref(props.account.tags.join(', '));
+const tags = ref(props.account.tags.join(", "));
 
 const updateAccount = async () => {
     if (!username.value.trim()) {
-        addToast(t('toast.account.username_required'), 'error');
+        addToast(t("toast.account.username_required"), "error");
         return;
     }
 
     try {
         const tagList = tags.value
-            .split(',')
+            .split(",")
             .map((tag) => tag.trim())
             .filter((tag) => tag.length > 0);
 
-        await invoke('update_account', {
+        await invoke("update_account", {
             id: props.account.id,
             username: username.value.trim(),
             tags: tagList,
         });
 
-        addToast(t('toast.account.account_updated'), 'success');
-        emit('account-updated');
-        emit('close');
+        addToast(t("toast.account.account_updated"), "success");
+        emit("account-updated");
+        emit("close");
     } catch (error) {
-        console.error('Failed to update account:', error);
-        addToast(t('toast.account.account_update_failed', { error }), 'error');
+        console.error("Failed to update account:", error);
+        addToast(t("toast.account.account_update_failed", { error }), "error");
     }
 };
 </script>
diff --git a/src/components/modals/social/account/EditNicknameModal.vue b/src/components/modals/social/account/EditNicknameModal.vue
index e6b61043..7c4bb671 100644
--- a/src/components/modals/social/account/EditNicknameModal.vue
+++ b/src/components/modals/social/account/EditNicknameModal.vue
@@ -3,43 +3,49 @@
         <div class="form-control">
             <label class="label">
                 <span class="label-text font-medium mb-1">{{
-                    $t('modals.edit_nickname.label')
-                    }}</span>
+                    $t("modals.edit_nickname.label")
+                }}</span>
             </label>
-            <input v-model="nicknameInput" type="text" :placeholder="$t('modals.edit_nickname.placeholder')"
-                class="input input-bordered w-full bg-base-100" maxlength="100" @keyup.enter="updateNickname" />
+            <input
+                v-model="nicknameInput"
+                type="text"
+                :placeholder="$t('modals.edit_nickname.placeholder')"
+                class="input input-bordered w-full bg-base-100"
+                maxlength="100"
+                @keyup.enter="updateNickname"
+            />
             <label class="label mt-2">
                 <span class="label-text-alt text-base-content/70">{{
-                    $t('modals.edit_nickname.description')
-                    }}</span>
+                    $t("modals.edit_nickname.description")
+                }}</span>
             </label>
         </div>
 
         <div class="flex justify-end space-x-2 mt-3">
             <button @click="updateNickname" class="btn btn-primary">
                 <check-icon class="w-4 h-4 mr-2" />
-                {{ $t('modals.edit_nickname.update') }}
+                {{ $t("modals.edit_nickname.update") }}
             </button>
             <button @click="$emit('close')" class="btn btn-outline">
                 <x-icon class="w-4 h-4 mr-2" />
-                {{ $t('common.cancel') }}
+                {{ $t("common.cancel") }}
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useToast } from '../../../../services/toastService';
-import { Check as CheckIcon, X as XIcon } from 'lucide-vue-next';
-import { apiPatch } from '../../../../services/apiClient';
-import { useI18n } from 'vue-i18n';
+import { ref } from "vue";
+import { useToast } from "../../../../services/toastService";
+import { Check as CheckIcon, X as XIcon } from "lucide-vue-next";
+import { apiPatch } from "../../../../services/apiClient";
+import { useI18n } from "vue-i18n";
 
 const props = defineProps<{
     currentNickname: string;
 }>();
 
-const emit = defineEmits(['close', 'nickname-updated']);
+const emit = defineEmits(["close", "nickname-updated"]);
 const { addToast } = useToast();
 const { t } = useI18n();
 
@@ -48,34 +54,34 @@ const nicknameInput = ref(props.currentNickname);
 const updateNickname = async () => {
     try {
         await apiPatch(
-            '/users/me/profile',
+            "/users/me/profile",
             {
                 nickname: nicknameInput.value,
             },
             {
                 headers: {
-                    Authorization: `Bearer ${localStorage.getItem('authToken')}`,
+                    Authorization: `Bearer ${localStorage.getItem("authToken")}`,
                 },
             }
         );
 
-        emit('nickname-updated', nicknameInput.value);
-        emit('close');
+        emit("nickname-updated", nicknameInput.value);
+        emit("close");
     } catch (error: any) {
-        console.error('Failed to update nickname:', error);
+        console.error("Failed to update nickname:", error);
         if (error.response && error.response.data) {
-            let errorMessage = t('toast.account.nickname_update_failed');
+            let errorMessage = t("toast.account.nickname_update_failed");
             const errors = error.response.data;
             if (errors.nickname) {
-                errorMessage = errors.nickname.join(' ');
-            } else if (typeof errors === 'string') {
+                errorMessage = errors.nickname.join(" ");
+            } else if (typeof errors === "string") {
                 errorMessage = errors;
             } else if (errors.detail) {
                 errorMessage = errors.detail;
             }
-            addToast(errorMessage, 'error');
+            addToast(errorMessage, "error");
         } else {
-            addToast(t('toast.account.nickname_update_failed'), 'error');
+            addToast(t("toast.account.nickname_update_failed"), "error");
         }
     }
 };
diff --git a/src/components/modals/social/account/LogoutConfirmModal.vue b/src/components/modals/social/account/LogoutConfirmModal.vue
index 3368b8d7..df0d4847 100644
--- a/src/components/modals/social/account/LogoutConfirmModal.vue
+++ b/src/components/modals/social/account/LogoutConfirmModal.vue
@@ -1,22 +1,22 @@
 <template>
     <div>
         <p class="text-sm text-base-content/70 mb-4">
-            {{ $t('modals.logout_confirm.message') }}
+            {{ $t("modals.logout_confirm.message") }}
         </p>
 
         <div class="alert alert-info mb-4">
             <info-icon class="w-5 h-5" />
-            <span class="text-sm">{{ $t('modals.logout_confirm.info') }}</span>
+            <span class="text-sm">{{ $t("modals.logout_confirm.info") }}</span>
         </div>
 
         <div class="flex justify-end space-x-2 mt-6">
             <button @click="confirmLogout" class="btn btn-error">
                 <log-out-icon class="w-4 h-4 mr-2" />
-                {{ $t('modals.logout_confirm.yes_logout') }}
+                {{ $t("modals.logout_confirm.yes_logout") }}
             </button>
             <button @click="$emit('close')" class="btn btn-outline">
                 <x-icon class="w-4 h-4 mr-2" />
-                {{ $t('common.cancel') }}
+                {{ $t("common.cancel") }}
             </button>
         </div>
     </div>
@@ -27,11 +27,11 @@ import {
     LogOut as LogOutIcon,
     X as XIcon,
     Info as InfoIcon,
-} from 'lucide-vue-next';
+} from "lucide-vue-next";
 
-const emit = defineEmits(['close', 'confirm']);
+const emit = defineEmits(["close", "confirm"]);
 
 const confirmLogout = () => {
-    emit('confirm');
+    emit("confirm");
 };
 </script>
diff --git a/src/components/modals/social/account/RegisterPromptModal.vue b/src/components/modals/social/account/RegisterPromptModal.vue
index e2179fc7..ec6de8a4 100644
--- a/src/components/modals/social/account/RegisterPromptModal.vue
+++ b/src/components/modals/social/account/RegisterPromptModal.vue
@@ -1,10 +1,16 @@
 <template>
-    <div v-if="modelValue" class="fixed inset-0 flex items-center justify-center z-2000 slide-up backdrop-blur-sm">
+    <div
+        v-if="modelValue"
+        class="fixed inset-0 flex items-center justify-center z-2000 slide-up backdrop-blur-sm"
+    >
         <div class="custom-modal-overlay" @click.self="closeModal">
             <div class="custom-modal-content">
                 <div class="custom-modal-header">
                     <div></div>
-                    <button @click="closeModal" class="custom-modal-close-button">
+                    <button
+                        @click="closeModal"
+                        class="custom-modal-close-button"
+                    >
                         ×
                     </button>
                 </div>
@@ -14,33 +20,36 @@
                             <UserRound class="w-7 h-7" />
                         </div>
                         <h3 class="text-xl font-bold mb-2">
-                            {{ $t('modals.register_prompt.title') }}
+                            {{ $t("modals.register_prompt.title") }}
                         </h3>
                     </div>
 
                     <p class="text-base-content/80 mb-4">
-                        {{ $t('modals.register_prompt.description') }}
+                        {{ $t("modals.register_prompt.description") }}
                     </p>
 
                     <ul class="list-disc list-inside space-y-2 mb-6 text-sm">
                         <li>
-                            {{ $t('modals.register_prompt.benefits.sync') }}
+                            {{ $t("modals.register_prompt.benefits.sync") }}
                         </li>
                         <li>
                             {{
                                 $t(
-                                    'modals.register_prompt.benefits.notifications'
+                                    "modals.register_prompt.benefits.notifications"
                                 )
                             }}
                         </li>
                     </ul>
 
                     <div class="flex flex-col sm:flex-row gap-3 mt-4">
-                        <button @click="proceedToRegister" class="btn btn-primary flex-1">
-                            {{ $t('modals.register_prompt.register_now') }}
+                        <button
+                            @click="proceedToRegister"
+                            class="btn btn-primary flex-1"
+                        >
+                            {{ $t("modals.register_prompt.register_now") }}
                         </button>
                         <button @click="cancel" class="btn btn-outline flex-1">
-                            {{ $t('modals.register_prompt.maybe_later') }}
+                            {{ $t("modals.register_prompt.maybe_later") }}
                         </button>
                     </div>
                 </div>
@@ -50,37 +59,37 @@
 </template>
 
 <script setup lang="ts">
-import { UserRound } from 'lucide-vue-next';
-import { computed, watch, onUnmounted } from 'vue';
+import { UserRound } from "lucide-vue-next";
+import { computed, watch, onUnmounted } from "vue";
 
 const props = defineProps<{
     modelValue: boolean;
 }>();
 
-const emit = defineEmits(['update:modelValue', 'register', 'cancel']);
+const emit = defineEmits(["update:modelValue", "register", "cancel"]);
 
 const isOpen = computed({
     get: () => props.modelValue,
-    set: (value) => emit('update:modelValue', value),
+    set: (value) => emit("update:modelValue", value),
 });
 
 const closeModal = () => {
     isOpen.value = false;
-    emit('cancel');
+    emit("cancel");
 };
 
 const proceedToRegister = () => {
     isOpen.value = false;
-    emit('register');
+    emit("register");
 };
 
 const cancel = () => {
     isOpen.value = false;
-    emit('cancel');
+    emit("cancel");
 };
 
 const handleEscape = (e: KeyboardEvent) => {
-    if (e.key === 'Escape' && isOpen.value) {
+    if (e.key === "Escape" && isOpen.value) {
         closeModal();
     }
 };
@@ -89,19 +98,19 @@ watch(
     isOpen,
     (newVal) => {
         if (newVal) {
-            document.body.style.overflow = 'hidden';
-            document.addEventListener('keydown', handleEscape);
+            document.body.style.overflow = "hidden";
+            document.addEventListener("keydown", handleEscape);
         } else {
-            document.body.style.overflow = '';
-            document.removeEventListener('keydown', handleEscape);
+            document.body.style.overflow = "";
+            document.removeEventListener("keydown", handleEscape);
         }
     },
     { immediate: true }
 );
 
 onUnmounted(() => {
-    document.removeEventListener('keydown', handleEscape);
-    document.body.style.overflow = '';
+    document.removeEventListener("keydown", handleEscape);
+    document.body.style.overflow = "";
 });
 </script>
 
diff --git a/src/components/modals/social/account/SocialLinksModal.vue b/src/components/modals/social/account/SocialLinksModal.vue
index 9f8db4a0..9335204b 100644
--- a/src/components/modals/social/account/SocialLinksModal.vue
+++ b/src/components/modals/social/account/SocialLinksModal.vue
@@ -1,37 +1,67 @@
 <template>
     <div class="space-y-4 max-h-[70vh] overflow-hidden flex flex-col">
         <div v-if="loading" class="text-center py-6">
-            <span>{{ t('common.loading') }}…</span>
+            <span>{{ t("common.loading") }}…</span>
         </div>
 
         <div v-else class="flex-1 min-h-0 overflow-y-auto">
-            <div v-if="isStreamerMode" class="p-4 text-center text-base-content/70">
-                {{ t('modals.social_links.hidden_in_streamer_mode') }}
+            <div
+                v-if="isStreamerMode"
+                class="p-4 text-center text-base-content/70"
+            >
+                {{ t("modals.social_links.hidden_in_streamer_mode") }}
             </div>
 
             <div v-else>
-                <div v-if="links.length === 0" class="text-sm text-base-content/70 p-2">
-                    {{ t('account.no_social_links') }}
+                <div
+                    v-if="links.length === 0"
+                    class="text-sm text-base-content/70 p-2"
+                >
+                    {{ t("account.no_social_links") }}
                 </div>
 
                 <div class="space-y-2 p-2">
-                    <div v-for="link in links" :key="link.platform"
-                        class="social-link-row flex flex-col sm:flex-row sm:items-center sm:justify-between p-2 rounded-md bg-base-100">
+                    <div
+                        v-for="link in links"
+                        :key="link.platform"
+                        class="social-link-row flex flex-col sm:flex-row sm:items-center sm:justify-between p-2 rounded-md bg-base-100"
+                    >
                         <div class="flex-1 min-w-0">
-                            <div class="font-medium truncate">{{ platformLabel(link.platform) }}</div>
-                            <a v-if="link.platform !== 'DISCORD'" :href="platformHref(link.platform, link.url)"
+                            <div class="font-medium truncate">
+                                {{ platformLabel(link.platform) }}
+                            </div>
+                            <a
+                                v-if="link.platform !== 'DISCORD'"
+                                :href="platformHref(link.platform, link.url)"
                                 target="_blank"
                                 class="text-sm text-primary hover:underline truncate block wrap-break-word"
-                                rel="noreferrer">{{ displayHref(link.platform, link.url) }}</a>
-                            <div v-else class="text-sm truncate block">{{ displayHandle(link.platform, link.url) }}
+                                rel="noreferrer"
+                                >{{ displayHref(link.platform, link.url) }}</a
+                            >
+                            <div v-else class="text-sm truncate block">
+                                {{ displayHandle(link.platform, link.url) }}
                             </div>
                         </div>
 
-                        <div class="flex items-center gap-2 mt-2 sm:mt-0 ml-0 sm:ml-4 shrink-0">
-                            <button v-if="!isStreamerMode" type="button" @click="startEdit(link)"
-                                class="btn btn-ghost btn-sm">{{ t('common.edit') }}</button>
-                            <button v-if="!isStreamerMode" type="button" @click="confirmDelete(link)"
-                                class="btn btn-ghost btn-sm text-error">{{ t('common.delete') }}</button>
+                        <div
+                            class="flex items-center gap-2 mt-2 sm:mt-0 ml-0 sm:ml-4 shrink-0"
+                        >
+                            <button
+                                v-if="!isStreamerMode"
+                                type="button"
+                                @click="startEdit(link)"
+                                class="btn btn-ghost btn-sm"
+                            >
+                                {{ t("common.edit") }}
+                            </button>
+                            <button
+                                v-if="!isStreamerMode"
+                                type="button"
+                                @click="confirmDelete(link)"
+                                class="btn btn-ghost btn-sm text-error"
+                            >
+                                {{ t("common.delete") }}
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -40,31 +70,69 @@
 
         <div class="pt-4 border-t border-base-300 mt-4 shrink-0">
             <div v-if="!editing && !isStreamerMode">
-                <h4 class="font-medium mb-2">{{ t('modals.social_links.add_title') }}</h4>
+                <h4 class="font-medium mb-2">
+                    {{ t("modals.social_links.add_title") }}
+                </h4>
                 <div class="grid grid-cols-1 gap-2">
-                    <select v-model="newPlatform" class="select select-bordered w-full bg-base-100">
+                    <select
+                        v-model="newPlatform"
+                        class="select select-bordered w-full bg-base-100"
+                    >
                         <option value="">Select platform</option>
-                        <option v-for="(label, key) in platformOptions" :key="key" :value="key">{{ label }}</option>
+                        <option
+                            v-for="(label, key) in platformOptions"
+                            :key="key"
+                            :value="key"
+                        >
+                            {{ label }}
+                        </option>
                     </select>
-                    <input v-model="newUrl" type="text" class="input input-bordered w-full bg-base-100"
-                        placeholder="username or full URL (e.g. @name or https://github.com/name)" />
+                    <input
+                        v-model="newUrl"
+                        type="text"
+                        class="input input-bordered w-full bg-base-100"
+                        placeholder="username or full URL (e.g. @name or https://github.com/name)"
+                    />
                     <div class="flex justify-end gap-2">
-                        <button @click="addLink" class="btn btn-primary">{{ t('common.add') }}</button>
-                        <button @click="$emit('close')" class="btn btn-outline">{{ t('common.cancel') }}</button>
+                        <button @click="addLink" class="btn btn-primary">
+                            {{ t("common.add") }}
+                        </button>
+                        <button @click="$emit('close')" class="btn btn-outline">
+                            {{ t("common.cancel") }}
+                        </button>
                     </div>
                 </div>
             </div>
 
             <div v-else-if="!isStreamerMode" class="mt-2">
-                <h4 class="font-medium mb-2">{{ t('modals.social_links.edit_title') }}</h4>
+                <h4 class="font-medium mb-2">
+                    {{ t("modals.social_links.edit_title") }}
+                </h4>
                 <div class="grid grid-cols-1 gap-2">
-                    <select v-model="editing.platform" class="select select-bordered w-full bg-base-100">
-                        <option v-for="(label, key) in platformOptions" :key="key" :value="key">{{ label }}</option>
+                    <select
+                        v-model="editing.platform"
+                        class="select select-bordered w-full bg-base-100"
+                    >
+                        <option
+                            v-for="(label, key) in platformOptions"
+                            :key="key"
+                            :value="key"
+                        >
+                            {{ label }}
+                        </option>
                     </select>
-                    <input v-model="editing.url" type="text" class="input input-bordered w-full bg-base-100" />
+                    <input
+                        v-model="editing.url"
+                        type="text"
+                        class="input input-bordered w-full bg-base-100"
+                    />
                     <div class="flex justify-end gap-2">
-                        <button @click="saveEdit" class="btn btn-primary">{{ t('common.save') }}</button>
-                        <button @click="cancelEdit" class="btn btn-outline">{{ t('common.cancel') }}</button>
+                        <button @click="saveEdit" class="btn btn-primary">
+                            {{ t("common.save") }}
+                        </button>
+                        <button @click="cancelEdit" class="btn btn-outline">
+                            {{ t("common.cancel") }}
+                        </button>
                     </div>
                 </div>
             </div>
@@ -73,11 +141,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue';
-import { globalUserStatus } from '../../../../composables/useUserStatus';
-import { useI18n } from 'vue-i18n';
-import { useToast } from '../../../../services/toastService';
-import { apiGet, apiPut } from '../../../../services/apiClient';
+import { ref, onMounted, computed } from "vue";
+import { globalUserStatus } from "../../../../composables/useUserStatus";
+import { useI18n } from "vue-i18n";
+import { useToast } from "../../../../services/toastService";
+import { apiGet, apiPut } from "../../../../services/apiClient";
 
 const { t } = useI18n();
 const { addToast } = useToast();
@@ -88,25 +156,25 @@ const loading = ref(true);
 const isStreamerMode = computed(() => globalUserStatus.isStreamer.value);
 
 const platformOptions: Record<string, string> = {
-    DISCORD: 'Discord',
-    TELEGRAM: 'Telegram',
-    GITHUB: 'GitHub',
-    YOUTUBE: 'YouTube',
+    DISCORD: "Discord",
+    TELEGRAM: "Telegram",
+    GITHUB: "GitHub",
+    YOUTUBE: "YouTube",
 };
 
-const newPlatform = ref('');
-const newUrl = ref('');
+const newPlatform = ref("");
+const newUrl = ref("");
 
 const editing = ref<any | null>(null);
 
 const loadLinks = async () => {
     loading.value = true;
     try {
-        const resp = await apiGet<any[]>('/users/me/social-links');
+        const resp = await apiGet<any[]>("/users/me/social-links");
         links.value = resp || [];
     } catch (error) {
-        console.error('Failed to load social links', error);
-        addToast(t('modals.social_links.load_failed'), 'error');
+        console.error("Failed to load social links", error);
+        addToast(t("modals.social_links.load_failed"), "error");
     } finally {
         loading.value = false;
     }
@@ -116,38 +184,46 @@ const platformLabel = (key: string) => platformOptions[key] || key;
 
 const updateSocialLinks = async (updatedLinks: any[]) => {
     const payload = {
-        links: updatedLinks.map(l => ({
+        links: updatedLinks.map((l) => ({
             platform: l.platform,
-            url: l.url
-        }))
+            url: l.url,
+        })),
     };
-    const resp = await apiPut<any[]>('/users/me/social-links', payload);
+    const resp = await apiPut<any[]>("/users/me/social-links", payload);
     links.value = resp || [];
 };
 
 const addLink = async () => {
     if (isStreamerMode.value) return;
     if (!newPlatform.value || !newUrl.value.trim()) {
-        addToast(t('modals.social_links.fill_fields'), 'error');
+        addToast(t("modals.social_links.fill_fields"), "error");
         return;
     }
 
     // Prevent adding duplicate platforms
-    if (links.value.some(l => l.platform === newPlatform.value)) {
-        addToast(t('modals.social_links.platform_exists') || t('modals.social_links.add_failed'), 'error');
+    if (links.value.some((l) => l.platform === newPlatform.value)) {
+        addToast(
+            t("modals.social_links.platform_exists") ||
+                t("modals.social_links.add_failed"),
+            "error"
+        );
         return;
     }
 
     try {
-        const newLinks = [...links.value, { platform: newPlatform.value, url: newUrl.value.trim() }];
+        const newLinks = [
+            ...links.value,
+            { platform: newPlatform.value, url: newUrl.value.trim() },
+        ];
         await updateSocialLinks(newLinks);
-        newPlatform.value = '';
-        newUrl.value = '';
-        addToast(t('modals.social_links.added'), 'success');
+        newPlatform.value = "";
+        newUrl.value = "";
+        addToast(t("modals.social_links.added"), "success");
     } catch (error: any) {
-        console.error('Add social link failed', error);
-        const msg = error?.response?.data?.error || t('modals.social_links.add_failed');
-        addToast(msg, 'error');
+        console.error("Add social link failed", error);
+        const msg =
+            error?.response?.data?.error || t("modals.social_links.add_failed");
+        addToast(msg, "error");
     }
 };
 
@@ -158,12 +234,14 @@ const confirmDelete = (link: any) => {
 const deleteLink = async (link: any) => {
     if (isStreamerMode.value) return;
     try {
-        const newLinks = links.value.filter((l) => l.platform !== link.platform);
+        const newLinks = links.value.filter(
+            (l) => l.platform !== link.platform
+        );
         await updateSocialLinks(newLinks);
-        addToast(t('modals.social_links.deleted'), 'success');
+        addToast(t("modals.social_links.deleted"), "success");
     } catch (error) {
-        console.error('Delete social link failed', error);
-        addToast(t('modals.social_links.delete_failed'), 'error');
+        console.error("Delete social link failed", error);
+        addToast(t("modals.social_links.delete_failed"), "error");
     }
 };
 
@@ -178,43 +256,49 @@ const cancelEdit = () => {
 
 const saveEdit = async () => {
     if (!editing.value.platform || !editing.value.url) {
-        addToast(t('modals.social_links.fill_fields'), 'error');
+        addToast(t("modals.social_links.fill_fields"), "error");
         return;
     }
     // Prevent changing platform to one that already exists on another link
     if (
         editing.value.platform !== editing.value.originalPlatform &&
-        links.value.some(l => l.platform === editing.value.platform)
+        links.value.some((l) => l.platform === editing.value.platform)
     ) {
-        addToast(t('modals.social_links.platform_exists') || t('modals.social_links.update_failed'), 'error');
+        addToast(
+            t("modals.social_links.platform_exists") ||
+                t("modals.social_links.update_failed"),
+            "error"
+        );
         return;
     }
     try {
-        const updatedLinks = links.value.map(l =>
+        const updatedLinks = links.value.map((l) =>
             l.platform === editing.value.originalPlatform
                 ? { platform: editing.value.platform, url: editing.value.url }
                 : l
         );
         await updateSocialLinks(updatedLinks);
         editing.value = null;
-        addToast(t('modals.social_links.updated'), 'success');
+        addToast(t("modals.social_links.updated"), "success");
     } catch (error: any) {
-        console.error('Update social link failed', error);
-        const msg = error?.response?.data?.error || t('modals.social_links.update_failed');
-        addToast(msg, 'error');
+        console.error("Update social link failed", error);
+        const msg =
+            error?.response?.data?.error ||
+            t("modals.social_links.update_failed");
+        addToast(msg, "error");
     }
 };
 
 const platformHref = (platform: string, handle: string) => {
-    if (!handle) return '#';
-    const h = handle.startsWith('@') ? handle.substring(1) : handle;
+    if (!handle) return "#";
+    const h = handle.startsWith("@") ? handle.substring(1) : handle;
     switch (platform) {
-        case 'GITHUB':
+        case "GITHUB":
             return `https://github.com/${h}`;
-        case 'TELEGRAM':
+        case "TELEGRAM":
             return `https://t.me/${h}`;
-        case 'YOUTUBE':
-            if (handle.startsWith('@')) return `https://www.youtube.com/${h}`;
+        case "YOUTUBE":
+            if (handle.startsWith("@")) return `https://www.youtube.com/${h}`;
             return `https://www.youtube.com/@${h}`;
         default:
             return `#`;
@@ -222,13 +306,13 @@ const platformHref = (platform: string, handle: string) => {
 };
 
 const displayHref = (platform: string, handle: string) => {
-    if (!handle) return '';
+    if (!handle) return "";
     switch (platform) {
-        case 'GITHUB':
-            return `github.com/${handle.startsWith('@') ? handle.substring(1) : handle}`;
-        case 'TELEGRAM':
-            return `t.me/${handle.startsWith('@') ? handle.substring(1) : handle}`;
-        case 'YOUTUBE':
+        case "GITHUB":
+            return `github.com/${handle.startsWith("@") ? handle.substring(1) : handle}`;
+        case "TELEGRAM":
+            return `t.me/${handle.startsWith("@") ? handle.substring(1) : handle}`;
+        case "YOUTUBE":
             return handle;
         default:
             return handle;
@@ -236,8 +320,8 @@ const displayHref = (platform: string, handle: string) => {
 };
 
 const displayHandle = (_platform: string, handle: string) => {
-    if (!handle) return '';
-    return handle.startsWith('@') ? handle : `@${handle}`;
+    if (!handle) return "";
+    return handle.startsWith("@") ? handle : `@${handle}`;
 };
 
 onMounted(() => {
diff --git a/src/components/modals/social/friends/AddFriendModal.vue b/src/components/modals/social/friends/AddFriendModal.vue
index 8f4ec9c2..d50d5209 100644
--- a/src/components/modals/social/friends/AddFriendModal.vue
+++ b/src/components/modals/social/friends/AddFriendModal.vue
@@ -3,11 +3,16 @@
         <div class="form-control shrink-0">
             <label class="label">
                 <span class="label-text">{{
-                        t('modals.add_friend.search_label')
-                    }}</span>
+                    t("modals.add_friend.search_label")
+                }}</span>
             </label>
-            <input v-model="searchQuery" type="text" :placeholder="t('modals.add_friend.search_placeholder')"
-                   class="input input-bordered w-full" @input="handleSearch"/>
+            <input
+                v-model="searchQuery"
+                type="text"
+                :placeholder="t('modals.add_friend.search_placeholder')"
+                class="input input-bordered w-full"
+                @input="handleSearch"
+            />
         </div>
 
         <div class="flex-1 min-h-0 overflow-y-auto">
@@ -16,98 +21,121 @@
             </div>
 
             <div v-else-if="searchResults.length > 0" class="space-y-3">
-                <div v-for="user in searchResults" :key="user.id"
-                     class="card bg-base-100 shadow-sm border border-base-300">
+                <div
+                    v-for="user in searchResults"
+                    :key="user.id"
+                    class="card bg-base-100 shadow-sm border border-base-300"
+                >
                     <div class="card-body p-3">
                         <div class="flex items-center justify-between gap-3">
                             <div class="flex items-center gap-3 min-w-0 flex-1">
-                                <div @click="$emit('view-profile', user.id)" class="avatar-click-area shrink-0">
-                                    <UserAvatar :name="getDisplayNickname(user)" :is-clickable="true"
-                                                :src="(user as any).avatar_url || null"
-                                                :original-src="(user as any).avatar_url || null"/>
+                                <div
+                                    @click="$emit('view-profile', user.id)"
+                                    class="avatar-click-area shrink-0"
+                                >
+                                    <UserAvatar
+                                        :name="getDisplayNickname(user)"
+                                        :is-clickable="true"
+                                        :src="user.avatar_url || null"
+                                        :original-src="user.avatar_url || null"
+                                        "
+                                    />
                                 </div>
                                 <div class="min-w-0 flex-1">
                                     <p class="font-medium truncate">
                                         {{ getDisplayNickname(user) }}
                                     </p>
-                                    <p class="text-sm text-base-content/70 truncate">
+                                    <p
+                                        class="text-sm text-base-content/70 truncate"
+                                    >
                                         @{{ getDisplayUsername(user) }}
                                     </p>
                                 </div>
                             </div>
 
                             <div class="shrink-0">
-                                <button v-if="user.friendship_status === null"
-                                        @click="sendFriendRequest(user.username, user.id)"
-                                        class="btn btn-primary btn-sm" :disabled="sendingRequest">
-                                    <UserPlus class="w-4 h-4 mr-1"/>
-                                    <span class="hidden sm:inline">{{ t('modals.add_friend.add_friend') }}</span>
+                                <button
+                                    @click="sendFriendRequest(user.username, user.id)"
+                                    class="btn btn-primary btn-sm"
+                                    :disabled="
+                                        sendingRequest ||
+                                        user.friendship_status === 'friends'
+                                    "
+                                >
+                                    <UserPlus class="w-4 h-4 mr-1" />
+                                    <span class="hidden sm:inline">
+                                        {{ getFriendButtonLabel(user) }}
+                                    </span>
                                 </button>
 
-                                <div v-else-if="user.friendship_status === 'friends'" class="badge badge-success">
-                                    <span class="hidden sm:inline">{{ t('modals.add_friend.already_friends') }}</span>
-                                    <span class="sm:hidden">✓</span>
-                                </div>
-
-                                <div v-else-if="
-                                    user.friendship_status === 'request_sent'
-                                " class="badge badge-warning">
-                                    <span class="hidden sm:inline">{{ t('modals.add_friend.request_sent') }}</span>
-                                    <span class="sm:hidden">⏳</span>
-                                </div>
-
-                                <div v-else-if="
-                                    user.friendship_status ===
-                                    'request_received'
-                                " class="badge badge-info">
-                                    <span class="hidden sm:inline">{{ t('modals.add_friend.request_received') }}</span>
-                                    <span class="sm:hidden">📨</span>
-                                </div>
-
-                                <div v-else-if="user.friendship_status === 'blocked'" class="badge badge-error">
-                                    <span class="hidden sm:inline">{{ t('modals.add_friend.blocked') }}</span>
-                                    <span class="sm:hidden">🚫</span>
-                                </div>
+                                <template v-if="user.friendship_status === 'request_sent'">
+                                    <div class="badge badge-warning ml-2 hidden sm:inline-block">
+                                        {{ t('modals.add_friend.request_sent') }}
+                                    </div>
+                                </template>
+
+                                <template v-else-if="user.friendship_status === 'request_received'">
+                                    <div class="badge badge-info ml-2 hidden sm:inline-block">
+                                        {{ t('modals.add_friend.request_received') }}
+                                    </div>
+                                </template>
+
+                                <template v-else-if="user.friendship_status === 'blocked'">
+                                    <div class="badge badge-error ml-2 hidden sm:inline-block">
+                                        {{ t('modals.add_friend.blocked') }}
+                                    </div>
+                                </template>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <div v-else-if="searchQuery.length >= 2 && !searching" class="text-center py-4 mt-4 text-base-content/70">
-                <Users class="w-8 h-8 mx-auto mb-2 opacity-50"/>
-                <p>{{ t('modals.add_friend.no_users_found') }}</p>
+            <div
+                v-else-if="searchQuery.length >= 2 && !searching"
+                class="text-center py-4 mt-4 text-base-content/70"
+            >
+                <Users class="w-8 h-8 mx-auto mb-2 opacity-50" />
+                <p>{{ t("modals.add_friend.no_users_found") }}</p>
             </div>
 
-            <div v-else-if="searchQuery.length > 0 && searchQuery.length < 2"
-                 class="text-center py-4 mt-4 text-base-content/70">
-                <p class="text-sm">{{ t('modals.add_friend.search_hint') }}</p>
+            <div
+                v-else-if="searchQuery.length > 0 && searchQuery.length < 2"
+                class="text-center py-4 mt-4 text-base-content/70"
+            >
+                <p class="text-sm">{{ t("modals.add_friend.search_hint") }}</p>
             </div>
         </div>
 
-        <div class="modal-action shrink-0 pt-4" :class="{ 'border-t border-base-300': searchResults.length !== 0 }">
-            <button @click="$emit('close')" class="btn btn-outline w-full sm:w-auto">
-                {{ t('modals.add_friend.close') }}
+        <div
+            class="modal-action shrink-0 pt-4"
+            :class="{ 'border-t border-base-300': searchResults.length !== 0 }"
+        >
+            <button
+                @click="$emit('close')"
+                class="btn btn-outline w-full sm:w-auto"
+            >
+                {{ t("modals.add_friend.close") }}
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useToast } from '../../../../services/toastService';
-import { type SearchUser, userService } from '../../../../services/userService';
-import { UserPlus, Users } from 'lucide-vue-next';
-import UserAvatar from '../../../ui/UserAvatar.vue';
-import { useI18n } from 'vue-i18n';
-import { useStreamerMode } from '../../../../composables/useStreamerMode';
-
-const emit = defineEmits(['close', 'friend-added', 'view-profile']);
+import { ref } from "vue";
+import { useToast } from "../../../../services/toastService";
+import { type SearchUser, userService } from "../../../../services/userService";
+import { UserPlus, Users } from "lucide-vue-next";
+import UserAvatar from "../../../ui/UserAvatar.vue";
+import { useI18n } from "vue-i18n";
+import { useStreamerMode } from "../../../../composables/useStreamerMode";
+
+const emit = defineEmits(["close", "friend-added", "view-profile"]);
 const { addToast } = useToast();
 const { t } = useI18n();
 const streamer = useStreamerMode();
 
-const searchQuery = ref('');
+const searchQuery = ref("");
 const searching = ref(false);
 const sendingRequest = ref(false);
 const searchResults = ref<SearchUser[]>([]);
@@ -120,6 +148,22 @@ const getDisplayUsername = (user: SearchUser) => {
     return streamer.getDisplayUsername(user.username);
 };
 
+const getFriendButtonLabel = (user: SearchUser) => {
+    if (!user || !user.friendship_status) return t("modals.add_friend.add_friend");
+    switch (user.friendship_status) {
+        case "friends":
+            return t("modals.add_friend.already_friends");
+        case "request_sent":
+            return t("modals.add_friend.request_sent");
+        case "request_received":
+            return t("modals.add_friend.request_received");
+        case "blocked":
+            return t("modals.add_friend.blocked");
+        default:
+            return t("modals.add_friend.add_friend");
+    }
+};
+
 let searchTimeout: ReturnType<typeof setTimeout> | null = null;
 
 const handleSearch = () => {
@@ -144,8 +188,8 @@ const performSearch = async () => {
     try {
         searchResults.value = await userService.searchUsers(searchQuery.value);
     } catch (error) {
-        console.error('Failed to search users:', error);
-        addToast(t('toast.friends.search_failed'), 'error');
+        console.error("Failed to search users:", error);
+        addToast(t("toast.friends.search_failed"), "error");
         searchResults.value = [];
     } finally {
         searching.value = false;
@@ -157,21 +201,20 @@ const sendFriendRequest = async (username: string, userId: number) => {
     try {
         await userService.sendFriendRequest(userId);
         addToast(
-          t('toast.friends.request_sent', { name: username }),
-          'success'
+            t("toast.friends.request_sent", { name: username }),
+            "success"
         );
 
         const userIndex = searchResults.value.findIndex(
-          (u) => u.username === username
+            (u) => u.username === username
         );
         if (userIndex !== -1) {
-            searchResults.value[userIndex].friendship_status = 'request_sent';
+            searchResults.value[userIndex].friendship_status = "request_sent";
         }
 
-        emit('friend-added');
+        emit("friend-added");
     } catch (error) {
-        console.error('Failed to send friend request:', error);
-        addToast(t('toast.friends.request_send_failed'), 'error');
+        console.error("Failed to send friend request:", error);
     } finally {
         sendingRequest.value = false;
     }
diff --git a/src/components/modals/social/friends/BlockUnblockConfirmModal.vue b/src/components/modals/social/friends/BlockUnblockConfirmModal.vue
index e96e3bd1..9ef39689 100644
--- a/src/components/modals/social/friends/BlockUnblockConfirmModal.vue
+++ b/src/components/modals/social/friends/BlockUnblockConfirmModal.vue
@@ -5,23 +5,27 @@
         </p>
 
         <div class="flex justify-end space-x-2 mt-6">
-            <button @click="confirmAction" class="btn" :class="actionButtonClass">
+            <button
+                @click="confirmAction"
+                class="btn"
+                :class="actionButtonClass"
+            >
                 <component :is="actionIcon" class="w-4 h-4 mr-2" />
                 {{ actionButtonText }}
             </button>
             <button @click="$emit('close')" class="btn btn-outline">
                 <x-icon class="w-4 h-4 mr-2" />
-                {{ $t('common.cancel') }}
+                {{ $t("common.cancel") }}
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { Shield, ShieldOff, X as XIcon } from 'lucide-vue-next';
-import { useI18n } from 'vue-i18n';
-import { useStreamerMode } from '../../../../composables/useStreamerMode';
+import { computed } from "vue";
+import { Shield, ShieldOff, X as XIcon } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
+import { useStreamerMode } from "../../../../composables/useStreamerMode";
 
 interface User {
     id: number;
@@ -31,42 +35,45 @@ interface User {
 
 const props = defineProps<{
     user: User;
-    action: 'block' | 'unblock';
+    action: "block" | "unblock";
 }>();
 
-const emit = defineEmits(['close', 'confirm']);
+const emit = defineEmits(["close", "confirm"]);
 const { t } = useI18n();
 const streamer = useStreamerMode();
 
 const confirmationMessage = computed(() => {
-    const maskedName = streamer.getDisplayName(props.user.nickname, props.user.username);
-    if (props.action === 'block') {
-        return t('modals.block_unblock_confirm.block_message', {
+    const maskedName = streamer.getDisplayName(
+        props.user.nickname,
+        props.user.username
+    );
+    if (props.action === "block") {
+        return t("modals.block_unblock_confirm.block_message", {
             displayName: maskedName,
         });
     } else {
-        return t('modals.block_unblock_confirm.unblock_message', {
+        return t("modals.block_unblock_confirm.unblock_message", {
             displayName: maskedName,
         });
     }
 });
 
 const actionButtonText = computed(() => {
-    return props.action === 'block'
-        ? t('modals.block_unblock_confirm.yes_block')
-        : t('modals.block_unblock_confirm.yes_unblock');
+    return props.action === "block"
+        ? t("modals.block_unblock_confirm.yes_block")
+        : t("modals.block_unblock_confirm.yes_unblock");
 });
 
 const actionButtonClass = computed(() => {
-    return props.action === 'block' ? 'btn-error' : 'btn-primary';
+    return props.action === "block" ? "btn-error" : "btn-primary";
 });
 
 const actionIcon = computed(() => {
-    return props.action === 'block' ? Shield : ShieldOff;
+    return props.action === "block" ? Shield : ShieldOff;
 });
 
 const confirmAction = () => {
-    emit('confirm', props.user);
-    emit('close');
+    emit("confirm", props.user);
+    emit("close");
 };
 </script>
diff --git a/src/components/modals/social/friends/CancelFriendRequestConfirmModal.vue b/src/components/modals/social/friends/CancelFriendRequestConfirmModal.vue
index c60478d8..2bf8116a 100644
--- a/src/components/modals/social/friends/CancelFriendRequestConfirmModal.vue
+++ b/src/components/modals/social/friends/CancelFriendRequestConfirmModal.vue
@@ -2,7 +2,7 @@
     <div>
         <p class="text-sm text-base-content/70">
             {{
-                $t('modals.cancel_friend_request_confirm.message', {
+                $t("modals.cancel_friend_request_confirm.message", {
                     displayName,
                 })
             }}
@@ -11,20 +11,20 @@
         <div class="flex justify-end space-x-2 mt-6">
             <button @click="confirmAction" class="btn btn-error">
                 <X class="w-4 h-4 mr-2" />
-                {{ $t('modals.cancel_friend_request_confirm.yes_cancel') }}
+                {{ $t("modals.cancel_friend_request_confirm.yes_cancel") }}
             </button>
             <button @click="$emit('close')" class="btn btn-outline">
                 <ArrowLeft class="w-4 h-4 mr-2" />
-                {{ $t('modals.cancel_friend_request_confirm.keep_request') }}
+                {{ $t("modals.cancel_friend_request_confirm.keep_request") }}
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { X, ArrowLeft } from 'lucide-vue-next';
-import { globalUserStatus } from '../../../../composables/useUserStatus';
+import { computed } from "vue";
+import { X, ArrowLeft } from "lucide-vue-next";
+import { globalUserStatus } from "../../../../composables/useUserStatus";
 
 interface User {
     id: number;
@@ -37,12 +37,16 @@ const props = defineProps<{
     requestId: number;
 }>();
 
-const emit = defineEmits(['close', 'confirm']);
+const emit = defineEmits(["close", "confirm"]);
 
-const displayName = computed(() => globalUserStatus.isStreamer.value ? '??' : (props.user.nickname || props.user.username));
+const displayName = computed(() =>
+    globalUserStatus.isStreamer.value
+        ? "??"
+        : props.user.nickname || props.user.username
+);
 
 const confirmAction = () => {
-    emit('confirm', props.requestId);
-    emit('close');
+    emit("confirm", props.requestId);
+    emit("close");
 };
 </script>
diff --git a/src/components/modals/social/friends/RemoveFriendConfirmModal.vue b/src/components/modals/social/friends/RemoveFriendConfirmModal.vue
index 5cb6b246..e9351494 100644
--- a/src/components/modals/social/friends/RemoveFriendConfirmModal.vue
+++ b/src/components/modals/social/friends/RemoveFriendConfirmModal.vue
@@ -1,26 +1,26 @@
 <template>
     <div>
         <p class="text-sm text-base-content/70">
-            {{ $t('modals.remove_friend_confirm.message', { displayName }) }}
+            {{ $t("modals.remove_friend_confirm.message", { displayName }) }}
         </p>
 
         <div class="flex justify-end space-x-2 mt-6">
             <button @click="confirmAction" class="btn btn-error">
                 <UserMinus class="w-4 h-4 mr-2" />
-                {{ $t('modals.remove_friend_confirm.yes_remove') }}
+                {{ $t("modals.remove_friend_confirm.yes_remove") }}
             </button>
             <button @click="$emit('close')" class="btn btn-outline">
                 <X class="w-4 h-4 mr-2" />
-                {{ $t('common.cancel') }}
+                {{ $t("common.cancel") }}
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { UserMinus, X } from 'lucide-vue-next';
-import { globalUserStatus } from '../../../../composables/useUserStatus';
+import { computed } from "vue";
+import { UserMinus, X } from "lucide-vue-next";
+import { globalUserStatus } from "../../../../composables/useUserStatus";
 
 interface Friend {
     id: number;
@@ -32,14 +32,16 @@ const props = defineProps<{
     friend: Friend;
 }>();
 
-const emit = defineEmits(['close', 'confirm']);
+const emit = defineEmits(["close", "confirm"]);
 
-const displayName = computed(
-    () => globalUserStatus.isStreamer.value ? '??' : (props.friend.nickname || props.friend.username)
+const displayName = computed(() =>
+    globalUserStatus.isStreamer.value
+        ? "??"
+        : props.friend.nickname || props.friend.username
 );
 
 const confirmAction = () => {
-    emit('confirm', props.friend);
-    emit('close');
+    emit("confirm", props.friend);
+    emit("close");
 };
 </script>
diff --git a/src/components/modals/social/presets/CreatePresetModal.vue b/src/components/modals/social/presets/CreatePresetModal.vue
index 0d7a8149..b318d252 100644
--- a/src/components/modals/social/presets/CreatePresetModal.vue
+++ b/src/components/modals/social/presets/CreatePresetModal.vue
@@ -2,11 +2,18 @@
     <div class="p-6 space-y-4">
         <div class="form-control">
             <label class="label">
-                <span class="label-text">{{ $t('theme.presets.create_modal.name_label') }} *</span>
+                <span class="label-text"
+                    >{{ $t("theme.presets.create_modal.name_label") }} *</span
+                >
             </label>
-            <input v-model="form.name" type="text" :placeholder="$t('theme.presets.create_modal.name_placeholder')"
-                class="input input-bordered w-full" :class="{ 'input-error': errors.name }"
-                @input="clearError('name')" />
+            <input
+                v-model="form.name"
+                type="text"
+                :placeholder="$t('theme.presets.create_modal.name_placeholder')"
+                class="input input-bordered w-full"
+                :class="{ 'input-error': errors.name }"
+                @input="clearError('name')"
+            />
             <label v-if="errors.name" class="label">
                 <span class="label-text-alt text-error">{{ errors.name }}</span>
             </label>
@@ -14,57 +21,75 @@
 
         <div class="form-control">
             <label class="label">
-                <span class="label-text">{{ $t('theme.presets.create_modal.description_label') }}</span>
+                <span class="label-text">{{
+                    $t("theme.presets.create_modal.description_label")
+                }}</span>
             </label>
-            <textarea v-model="form.description" :placeholder="$t('theme.presets.create_modal.description_placeholder')"
-                class="textarea textarea-bordered w-full" rows="3"></textarea>
+            <textarea
+                v-model="form.description"
+                :placeholder="
+                    $t('theme.presets.create_modal.description_placeholder')
+                "
+                class="textarea textarea-bordered w-full"
+                rows="3"
+            ></textarea>
         </div>
 
         <div class="form-control">
             <label class="label">
                 <span class="label-text flex items-center gap-2">
                     <Info class="w-4 h-4" />
-                    {{ $t('theme.presets.create_modal.source_info') }}
+                    {{ $t("theme.presets.create_modal.source_info") }}
                 </span>
             </label>
             <div class="text-sm text-base-content/70">
-                {{ editingPreset ? $t('theme.presets.create_modal.source_edit') :
-                    $t('theme.presets.create_modal.source_create') }}
+                {{
+                    editingPreset
+                        ? $t("theme.presets.create_modal.source_edit")
+                        : $t("theme.presets.create_modal.source_create")
+                }}
             </div>
         </div>
     </div>
 
     <div class="flex gap-3 p-6 border-t border-base-300">
-        <button @click="save" class="btn btn-primary flex-1" :class="{ 'loading': saving }"
-            :disabled="saving || !form.name.trim()">
+        <button
+            @click="save"
+            class="btn btn-primary flex-1"
+            :class="{ loading: saving }"
+            :disabled="saving || !form.name.trim()"
+        >
             <Save class="w-4 h-4 mr-2" v-if="!saving" />
-            {{ editingPreset ? $t('theme.presets.create_modal.update_button') :
-                $t('theme.presets.create_modal.create_button') }}
+            {{
+                editingPreset
+                    ? $t("theme.presets.create_modal.update_button")
+                    : $t("theme.presets.create_modal.create_button")
+            }}
         </button>
         <button @click="close" class="btn btn-ghost flex-1">
-            {{ $t('theme.presets.create_modal.cancel') }}
+            {{ $t("theme.presets.create_modal.cancel") }}
         </button>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch } from 'vue';
-import { Save, Info } from 'lucide-vue-next';
-import { useI18n } from 'vue-i18n';
-import type { ThemePreset, UpdatePresetInput } from '../../../../types/presets';
+import { ref, reactive, watch } from "vue";
+import { Save, Info } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
+import type { ThemePreset, UpdatePresetInput } from "../../../../types/presets";
 
 interface Props {
     editingPreset?: ThemePreset | null;
 }
 
 interface Emits {
-    (e: 'close'): void;
-    (e: 'save', data: { name: string; description?: string }): void;
-    (e: 'update', data: UpdatePresetInput): void;
+    (e: "close"): void;
+    (e: "save", data: { name: string; description?: string }): void;
+    (e: "update", data: UpdatePresetInput): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    editingPreset: null
+    editingPreset: null,
 });
 
 const emit = defineEmits<Emits>();
@@ -73,26 +98,26 @@ const { t } = useI18n();
 const saving = ref(false);
 
 const form = reactive({
-    name: '',
-    description: ''
+    name: "",
+    description: "",
 });
 
 const errors = reactive({
-    name: ''
+    name: "",
 });
 
 const clearError = (field: keyof typeof errors) => {
-    errors[field] = '';
+    errors[field] = "";
 };
 
 const validateForm = (): boolean => {
     let isValid = true;
 
     if (!form.name.trim()) {
-        errors.name = t('theme.presets.create_modal.name_required');
+        errors.name = t("theme.presets.create_modal.name_required");
         isValid = false;
     } else if (form.name.trim().length > 50) {
-        errors.name = t('theme.presets.create_modal.name_too_long');
+        errors.name = t("theme.presets.create_modal.name_too_long");
         isValid = false;
     }
 
@@ -106,7 +131,7 @@ const save = async () => {
         saving.value = true;
 
         if (props.editingPreset) {
-            emit('update', {
+            emit("update", {
                 id: props.editingPreset.id,
                 name: form.name.trim(),
                 description: form.description.trim() || undefined,
@@ -134,11 +159,14 @@ const save = async () => {
                 warningContent: props.editingPreset.warningContent,
                 error: props.editingPreset.error,
                 errorContent: props.editingPreset.errorContent,
+                backgroundImage: props.editingPreset.backgroundImage,
+                backgroundBlur: props.editingPreset.backgroundBlur,
+                backgroundOpacity: props.editingPreset.backgroundOpacity,
             });
         } else {
-            emit('save', {
+            emit("save", {
                 name: form.name.trim(),
-                description: form.description.trim() || undefined
+                description: form.description.trim() || undefined,
             });
         }
     } finally {
@@ -148,21 +176,25 @@ const save = async () => {
 };
 
 const close = () => {
-    emit('close');
+    emit("close");
 };
 
 const resetForm = () => {
-    form.name = '';
-    form.description = '';
-    errors.name = '';
+    form.name = "";
+    form.description = "";
+    errors.name = "";
 };
 
-watch(() => props.editingPreset, (preset) => {
-    if (preset) {
-        form.name = preset.name;
-        form.description = preset.description || '';
-    } else {
-        resetForm();
-    }
-}, { immediate: true });
-</script>
\ No newline at end of file
+watch(
+    () => props.editingPreset,
+    (preset) => {
+        if (preset) {
+            form.name = preset.name;
+            form.description = preset.description || "";
+        } else {
+            resetForm();
+        }
+    },
+    { immediate: true }
+);
+</script>
diff --git a/src/components/modals/social/presets/DeletePresetConfirmModal.vue b/src/components/modals/social/presets/DeletePresetConfirmModal.vue
index c58ad41e..5103ef45 100644
--- a/src/components/modals/social/presets/DeletePresetConfirmModal.vue
+++ b/src/components/modals/social/presets/DeletePresetConfirmModal.vue
@@ -1,35 +1,35 @@
 <template>
     <div>
         <p class="text-sm text-base-content/70">
-            {{ $t('theme.presets.delete_modal.message', { name: presetName }) }}
-            {{ $t('theme.presets.delete_modal.warning') }}
+            {{ $t("theme.presets.delete_modal.message", { name: presetName }) }}
+            {{ $t("theme.presets.delete_modal.warning") }}
         </p>
 
         <div class="flex justify-end space-x-2 mt-6">
             <button @click="confirmDelete" class="btn btn-error">
                 <Trash2 class="w-4 h-4 mr-2" />
-                {{ $t('theme.presets.delete_modal.delete_button') }}
+                {{ $t("theme.presets.delete_modal.delete_button") }}
             </button>
             <button @click="$emit('close')" class="btn btn-outline">
                 <X class="w-4 h-4 mr-2" />
-                {{ $t('theme.presets.delete_modal.cancel') }}
+                {{ $t("theme.presets.delete_modal.cancel") }}
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { Trash2, X } from 'lucide-vue-next';
-import type { ThemePreset } from '../../../../types/presets';
-import { computed } from 'vue';
-import { usePresets } from '../../../../composables/usePresets';
+import { Trash2, X } from "lucide-vue-next";
+import type { ThemePreset } from "../../../../types/presets";
+import { computed } from "vue";
+import { usePresets } from "../../../../composables/usePresets";
 
 const props = defineProps<{
     preset?: ThemePreset;
     id?: string | number;
 }>();
 
-const emit = defineEmits(['close', 'preset-deleted', 'deleted']);
+const emit = defineEmits(["close", "preset-deleted", "deleted"]);
 
 const { getPresetById } = usePresets();
 
@@ -40,20 +40,20 @@ const targetId = computed(() => {
 const presetName = computed(() => {
     if (props.preset && props.preset.name) return props.preset.name;
     const id = targetId.value;
-    if (id === undefined || id === null) return '';
+    if (id === undefined || id === null) return "";
     const p = getPresetById(String(id));
-    return p?.name ?? '';
+    return p?.name ?? "";
 });
 
 const confirmDelete = () => {
     const id = targetId.value;
     if (id === undefined || id === null) {
-        emit('close');
+        emit("close");
         return;
     }
     const idStr = String(id);
-    emit('preset-deleted', idStr);
-    emit('deleted', idStr);
-    emit('close');
+    emit("preset-deleted", idStr);
+    emit("deleted", idStr);
+    emit("close");
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/modals/social/presets/ImportExportCssModal.vue b/src/components/modals/social/presets/ImportExportCssModal.vue
index 281724f9..4b78a923 100644
--- a/src/components/modals/social/presets/ImportExportCssModal.vue
+++ b/src/components/modals/social/presets/ImportExportCssModal.vue
@@ -1,54 +1,72 @@
 <template>
     <div>
         <div v-if="mode === 'export'">
-            <p class="mb-2">{{ t('theme.export_desc') }}</p>
-            <textarea class="textarea textarea-bordered w-full mb-4" rows="4" readonly :value="exportedCode" />
-            <button class="btn btn-primary w-full" @click="copyToClipboard(exportedCode)">{{ t('theme.copy') }}</button>
+            <p class="mb-2">{{ t("theme.export_desc") }}</p>
+            <textarea
+                class="textarea textarea-bordered w-full mb-4"
+                rows="4"
+                readonly
+                :value="exportedCode"
+            />
+            <button
+                class="btn btn-primary w-full"
+                @click="copyToClipboard(exportedCode)"
+            >
+                {{ t("theme.copy") }}
+            </button>
         </div>
         <div v-else>
-            <p class="mb-2">{{ t('theme.import_desc') }}</p>
-            <textarea v-model="importCode" class="textarea textarea-bordered w-full mb-4" rows="4" />
+            <p class="mb-2">{{ t("theme.import_desc") }}</p>
+            <textarea
+                v-model="importCode"
+                class="textarea textarea-bordered w-full mb-4"
+                rows="4"
+            />
 
-            <div v-if="importError" class="text-error text-sm mt-2">{{ importError }}</div>
+            <div v-if="importError" class="text-error text-sm mt-2">
+                {{ importError }}
+            </div>
         </div>
         <div class="flex gap-3 p-6 border-t border-base-300">
             <button class="btn btn-primary flex-1" @click="importCss">
                 <Upload class="w-4 h-4 mr-2" />
-                {{ t('theme.import') }}
+                {{ t("theme.import") }}
             </button>
             <button @click="$emit('close')" class="btn btn-ghost flex-1">
-                {{ $t('theme.presets.import_modal.cancel') }}
+                {{ $t("theme.presets.import_modal.cancel") }}
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { invoke } from '@tauri-apps/api/core';
-import { useI18n } from 'vue-i18n';
-import { useToast } from '../../../../services/toastService';
-import { Upload } from 'lucide-vue-next';
+import { ref, onMounted } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+import { useI18n } from "vue-i18n";
+import { useToast } from "../../../../services/toastService";
+import { Upload } from "lucide-vue-next";
 
 const props = defineProps<{
-    mode: 'import' | 'export',
-    css?: string
+    mode: "import" | "export";
+    css?: string;
 }>();
-const emit = defineEmits(['import', 'close']);
+const emit = defineEmits(["import", "close"]);
 const { t } = useI18n();
 const { addToast } = useToast();
 
-const importCode = ref('');
-const importError = ref('');
-const exportedCode = ref('');
+const importCode = ref("");
+const importError = ref("");
+const exportedCode = ref("");
 
 onMounted(async () => {
-    if (props.mode === 'export' && props.css) {
+    if (props.mode === "export" && props.css) {
         try {
-            exportedCode.value = await invoke('encode_base64', { input: props.css });
+            exportedCode.value = await invoke("encode_base64", {
+                input: props.css,
+            });
         } catch (e) {
-            console.error('Failed to encode CSS to base64:', e);
-            exportedCode.value = '';
+            console.error("Failed to encode CSS to base64:", e);
+            exportedCode.value = "";
         }
     }
 });
@@ -56,26 +74,31 @@ onMounted(async () => {
 const copyToClipboard = async (text: string) => {
     try {
         await navigator.clipboard.writeText(text);
-        addToast(t('theme.copied'), 'success');
+        addToast(t("theme.copied"), "success");
     } catch {
-        addToast(t('theme.copy_failed'), 'error');
+        addToast(t("theme.copy_failed"), "error");
     }
 };
 
 const importCss = async () => {
-    importError.value = '';
+    importError.value = "";
     try {
-        const decoded = await invoke('decode_base64', { input: importCode.value });
+        const decoded = await invoke("decode_base64", {
+            input: importCode.value,
+        });
 
-        if (typeof decoded !== 'string' || /script|@import|url\(|expression|<|>|javascript:/i.test(decoded)) {
-            importError.value = t('theme.import_invalid');
+        if (
+            typeof decoded !== "string" ||
+            /script|@import|url\(|expression|<|>|javascript:/i.test(decoded)
+        ) {
+            importError.value = t("theme.import_invalid");
             return;
         }
-        emit('import', decoded);
-        addToast(t('theme.import_success'), 'success');
-        emit('close');
+        emit("import", decoded);
+        addToast(t("theme.import_success"), "success");
+        emit("close");
     } catch {
-        importError.value = t('theme.import_invalid');
+        importError.value = t("theme.import_invalid");
     }
 };
 </script>
diff --git a/src/components/modals/social/presets/ImportPresetModal.vue b/src/components/modals/social/presets/ImportPresetModal.vue
index 60887d15..b64f2639 100644
--- a/src/components/modals/social/presets/ImportPresetModal.vue
+++ b/src/components/modals/social/presets/ImportPresetModal.vue
@@ -1,40 +1,64 @@
 <template>
-
     <div class="p-6 space-y-4">
         <div class="form-control">
             <label class="label">
-                <span class="label-text">{{ $t('theme.presets.import_modal.method_label') }}</span>
+                <span class="label-text">{{
+                    $t("theme.presets.import_modal.method_label")
+                }}</span>
             </label>
             <div class="tabs tabs-boxed">
-                <button @click="importMethod = 'file'" class="tab" :class="{ 'tab-active': importMethod === 'file' }">
+                <button
+                    @click="importMethod = 'file'"
+                    class="tab"
+                    :class="{ 'tab-active': importMethod === 'file' }"
+                >
                     <Upload class="w-4 h-4 mr-2" />
-                    {{ $t('theme.presets.import_modal.method_file') }}
+                    {{ $t("theme.presets.import_modal.method_file") }}
                 </button>
-                <button @click="importMethod = 'json'" class="tab" :class="{ 'tab-active': importMethod === 'json' }">
+                <button
+                    @click="importMethod = 'json'"
+                    class="tab"
+                    :class="{ 'tab-active': importMethod === 'json' }"
+                >
                     <FileText class="w-4 h-4 mr-2" />
-                    {{ $t('theme.presets.import_modal.method_json') }}
+                    {{ $t("theme.presets.import_modal.method_json") }}
                 </button>
             </div>
         </div>
 
         <div v-if="importMethod === 'file'" class="form-control">
             <label class="label">
-                <span class="label-text">{{ $t('theme.presets.import_modal.file_label') }}</span>
+                <span class="label-text">{{
+                    $t("theme.presets.import_modal.file_label")
+                }}</span>
             </label>
-            <input ref="fileInput" type="file" accept=".json" @change="handleFileChange"
-                class="file-input file-input-bordered w-full" />
+            <input
+                ref="fileInput"
+                type="file"
+                accept=".json"
+                @change="handleFileChange"
+                class="file-input file-input-bordered w-full"
+            />
             <label class="label">
-                <span class="label-text-alt">{{ $t('theme.presets.import_modal.file_help') }}</span>
+                <span class="label-text-alt">{{
+                    $t("theme.presets.import_modal.file_help")
+                }}</span>
             </label>
         </div>
 
         <div v-if="importMethod === 'json'" class="form-control">
             <label class="label">
-                <span class="label-text">{{ $t('theme.presets.import_modal.json_label') }}</span>
+                <span class="label-text">{{
+                    $t("theme.presets.import_modal.json_label")
+                }}</span>
             </label>
-            <textarea v-model="jsonInput" :placeholder="$t('theme.presets.import_modal.json_placeholder')"
-                class="textarea textarea-bordered w-full h-32" :class="{ 'textarea-error': error }"
-                @input="error = ''"></textarea>
+            <textarea
+                v-model="jsonInput"
+                :placeholder="$t('theme.presets.import_modal.json_placeholder')"
+                class="textarea textarea-bordered w-full h-32"
+                :class="{ 'textarea-error': error }"
+                @input="error = ''"
+            ></textarea>
             <label v-if="error" class="label">
                 <span class="label-text-alt text-error">{{ error }}</span>
             </label>
@@ -42,13 +66,27 @@
 
         <div v-if="previewData" class="card bg-base-200 border border-base-300">
             <div class="card-body p-4">
-                <h4 class="card-title text-sm">{{ $t('theme.presets.import_modal.preview_title') }}</h4>
+                <h4 class="card-title text-sm">
+                    {{ $t("theme.presets.import_modal.preview_title") }}
+                </h4>
                 <div class="text-sm space-y-1">
-                    <div><strong>{{ $t('theme.presets.import_modal.preview_name') }}:</strong> {{ previewData.name }}
+                    <div>
+                        <strong
+                            >{{
+                                $t("theme.presets.import_modal.preview_name")
+                            }}:</strong
+                        >
+                        {{ previewData.name }}
                     </div>
                     <div v-if="previewData.description">
-                        <strong>{{ $t('theme.presets.import_modal.preview_description') }}:</strong> {{
-                            previewData.description }}
+                        <strong
+                            >{{
+                                $t(
+                                    "theme.presets.import_modal.preview_description"
+                                )
+                            }}:</strong
+                        >
+                        {{ previewData.description }}
                     </div>
                 </div>
             </div>
@@ -56,43 +94,50 @@
     </div>
 
     <div class="flex gap-3 p-6 border-t border-base-300">
-        <button @click="importPreset" class="btn btn-primary flex-1" :class="{ 'loading': importing }"
-            :disabled="importing || !canImport">
+        <button
+            @click="importPreset"
+            class="btn btn-primary flex-1"
+            :class="{ loading: importing }"
+            :disabled="importing || !canImport"
+        >
             <Upload class="w-4 h-4 mr-2" v-if="!importing" />
-            {{ importing ? $t('theme.presets.import_modal.importing') : $t('theme.presets.import_modal.import_button')
+            {{
+                importing
+                    ? $t("theme.presets.import_modal.importing")
+                    : $t("theme.presets.import_modal.import_button")
             }}
         </button>
         <button @click="close" class="btn btn-ghost flex-1">
-            {{ $t('theme.presets.import_modal.cancel') }}
+            {{ $t("theme.presets.import_modal.cancel") }}
         </button>
     </div>
 </template>
 
 <script setup lang="ts">
-import {computed, ref, watch} from 'vue';
-import {useI18n} from 'vue-i18n';
-import {FileText, Upload} from 'lucide-vue-next';
-import {usePresets} from '../../../../composables/usePresets';
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { FileText, Upload } from "lucide-vue-next";
+import { usePresets } from "../../../../composables/usePresets";
 
 const { t } = useI18n();
 
 interface Emits {
-    (e: 'close'): void;
-    (e: 'import'): void;
+    (e: "close"): void;
+    (e: "import"): void;
 }
 
 const emit = defineEmits<Emits>();
 
 const { importPresetFromJSON } = usePresets();
 
-const importMethod = ref<'file' | 'json'>('file');
-const jsonInput = ref('');
-const error = ref('');
+const importMethod = ref<"file" | "json">("file");
+const jsonInput = ref("");
+const error = ref("");
 const importing = ref(false);
 const previewData = ref<any>(null);
 
 const canImport = computed(() => {
-    if (importMethod.value === 'file') {
+    if (importMethod.value === "file") {
         return previewData.value !== null;
     }
     return jsonInput.value.trim().length > 0 && !error.value;
@@ -110,10 +155,10 @@ const handleFileChange = async (event: Event) => {
     try {
         const text = await file.text();
         previewData.value = JSON.parse(text);
-        error.value = '';
+        error.value = "";
     } catch (e) {
-        console.error('Failed to parse preset file:', e);
-        error.value = t('theme.presets.import_modal.error_invalid_file');
+        console.error("Failed to parse preset file:", e);
+        error.value = t("theme.presets.import_modal.error_invalid_file");
         previewData.value = null;
     }
 };
@@ -122,12 +167,15 @@ const validateJSON = (jsonString: string) => {
     try {
         const data = JSON.parse(jsonString);
         if (!data.name) {
-            throw new Error(t('theme.presets.import_modal.error_no_name'));
+            throw new Error(t("theme.presets.import_modal.error_no_name"));
         }
         previewData.value = data;
-        error.value = '';
+        error.value = "";
     } catch (err) {
-        error.value = err instanceof Error ? err.message : t('theme.presets.import_modal.error_invalid_json');
+        error.value =
+            err instanceof Error
+                ? err.message
+                : t("theme.presets.import_modal.error_invalid_json");
         previewData.value = null;
     }
 };
@@ -140,7 +188,7 @@ const importPreset = async () => {
 
         let jsonData;
 
-        if (importMethod.value === 'file' && previewData.value) {
+        if (importMethod.value === "file" && previewData.value) {
             jsonData = JSON.stringify(previewData.value);
         } else {
             jsonData = jsonInput.value.trim();
@@ -148,7 +196,7 @@ const importPreset = async () => {
 
         const result = await importPresetFromJSON(jsonData);
         if (result) {
-            emit('import');
+            emit("import");
             close();
         }
     } finally {
@@ -157,11 +205,11 @@ const importPreset = async () => {
 };
 
 const close = () => {
-    emit('close');
+    emit("close");
 };
 
 watch(jsonInput, (newValue) => {
-    if (importMethod.value === 'json' && newValue.trim()) {
+    if (importMethod.value === "json" && newValue.trim()) {
         validateJSON(newValue);
     } else {
         previewData.value = null;
@@ -170,6 +218,6 @@ watch(jsonInput, (newValue) => {
 
 watch(importMethod, () => {
     previewData.value = null;
-    error.value = '';
+    error.value = "";
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/modals/social/presets/MarketplaceDeleteConfirmModal.vue b/src/components/modals/social/presets/MarketplaceDeleteConfirmModal.vue
index 01f12011..d70807d2 100644
--- a/src/components/modals/social/presets/MarketplaceDeleteConfirmModal.vue
+++ b/src/components/modals/social/presets/MarketplaceDeleteConfirmModal.vue
@@ -1,22 +1,32 @@
 <template>
     <div>
-        <p class="text-sm text-base-content/70">{{ t('marketplace.delete_confirm') }}</p>
+        <p class="text-sm text-base-content/70">
+            {{ t("marketplace.delete_confirm") }}
+        </p>
         <div class="flex justify-end gap-2 mt-6">
-            <button class="btn" @click="$emit('close')">{{ t('common.cancel') }}</button>
-            <button class="btn btn-error" :class="{ loading: deleting }" @click="confirm" :disabled="deleting">{{
-                t('common.delete') }}</button>
+            <button class="btn" @click="$emit('close')">
+                {{ t("common.cancel") }}
+            </button>
+            <button
+                class="btn btn-error"
+                :class="{ loading: deleting }"
+                @click="confirm"
+                :disabled="deleting"
+            >
+                {{ t("common.delete") }}
+            </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { marketplaceService } from '../../../../services/marketplaceService';
-import { useToast } from '../../../../services/toastService';
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { marketplaceService } from "../../../../services/marketplaceService";
+import { useToast } from "../../../../services/toastService";
 
 const props = defineProps<{ id: number }>();
-const emit = defineEmits(['deleted', 'close']);
+const emit = defineEmits(["deleted", "close"]);
 
 const { t } = useI18n();
 const { addToast } = useToast();
@@ -26,14 +36,14 @@ async function confirm() {
     try {
         deleting.value = true;
         await marketplaceService.deletePreset(props.id);
-        addToast(t('marketplace.deleted_success'), 'success');
-        emit('deleted');
-        emit('close');
+        addToast(t("marketplace.deleted_success"), "success");
+        emit("deleted");
+        emit("close");
     } catch (e) {
-        console.error('Failed to delete preset:', e);
-        addToast(t('marketplace.deleted_failed'), 'error');
+        console.error("Failed to delete preset:", e);
+        addToast(t("marketplace.deleted_failed"), "error");
     } finally {
         deleting.value = false;
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/modals/social/presets/MarketplaceEditPresetModal.vue b/src/components/modals/social/presets/MarketplaceEditPresetModal.vue
index 1b0bb6c0..c66e3674 100644
--- a/src/components/modals/social/presets/MarketplaceEditPresetModal.vue
+++ b/src/components/modals/social/presets/MarketplaceEditPresetModal.vue
@@ -1,42 +1,66 @@
 <template>
     <div class="space-y-4">
         <div class="form-control">
-            <label class="label"><span class="label-text">{{ t('marketplace.title_label') }}</span></label>
-            <input v-model="title" class="input input-bordered w-full"
-                :placeholder="t('marketplace.title_placeholder')" />
+            <label class="label"
+                ><span class="label-text">{{
+                    t("marketplace.title_label")
+                }}</span></label
+            >
+            <input
+                v-model="title"
+                class="input input-bordered w-full"
+                :placeholder="t('marketplace.title_placeholder')"
+            />
         </div>
         <div class="form-control">
-            <label class="label"><span class="label-text">{{ t('marketplace.description_label') }}</span></label>
-            <textarea v-model="description" class="textarea textarea-bordered w-full" rows="4"
-                :placeholder="t('marketplace.description_placeholder')"></textarea>
+            <label class="label"
+                ><span class="label-text">{{
+                    t("marketplace.description_label")
+                }}</span></label
+            >
+            <textarea
+                v-model="description"
+                class="textarea textarea-bordered w-full"
+                rows="4"
+                :placeholder="t('marketplace.description_placeholder')"
+            ></textarea>
         </div>
         <div class="form-control">
             <label class="cursor-pointer label">
-                <span class="label-text">{{ t('marketplace.public_label') }}</span>
+                <span class="label-text">{{
+                    t("marketplace.public_label")
+                }}</span>
                 <input type="checkbox" class="toggle" v-model="isPublic" />
             </label>
         </div>
         <div class="flex justify-end gap-2">
-            <button class="btn" @click="$emit('close')">{{ t('common.cancel') }}</button>
-            <button class="btn btn-primary" :disabled="saving || !title" @click="save">{{ saving ?
-                t('common.please_wait') : t('common.save') }}</button>
+            <button class="btn" @click="$emit('close')">
+                {{ t("common.cancel") }}
+            </button>
+            <button
+                class="btn btn-primary"
+                :disabled="saving || !title"
+                @click="save"
+            >
+                {{ saving ? t("common.please_wait") : t("common.save") }}
+            </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { marketplaceService } from '../../../../services/marketplaceService';
-import { useToast } from '../../../../services/toastService';
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { marketplaceService } from "../../../../services/marketplaceService";
+import { useToast } from "../../../../services/toastService";
 
 const props = defineProps<{ preset: any }>();
-const emit = defineEmits(['updated', 'close']);
+const emit = defineEmits(["updated", "close"]);
 
 const { t } = useI18n();
 const { addToast } = useToast();
-const title = ref(props.preset?.title ?? props.preset?.name ?? '');
-const description = ref(props.preset?.description || '');
+const title = ref(props.preset?.title ?? props.preset?.name ?? "");
+const description = ref(props.preset?.description || "");
 const isPublic = ref(!!props.preset?.is_public);
 const saving = ref(false);
 
@@ -48,12 +72,12 @@ async function save() {
             description: description.value,
             is_public: isPublic.value,
         });
-        addToast(t('marketplace.updated_success'), 'success');
-        emit('updated');
-        emit('close');
+        addToast(t("marketplace.updated_success"), "success");
+        emit("updated");
+        emit("close");
     } catch (e) {
-        console.error('Failed to update preset:', e);
-        addToast(t('marketplace.updated_failed'), 'error');
+        console.error("Failed to update preset:", e);
+        addToast(t("marketplace.updated_failed"), "error");
     } finally {
         saving.value = false;
     }
diff --git a/src/components/modals/social/presets/PresetDetailsModal.vue b/src/components/modals/social/presets/PresetDetailsModal.vue
index c846eab6..ae3f5059 100644
--- a/src/components/modals/social/presets/PresetDetailsModal.vue
+++ b/src/components/modals/social/presets/PresetDetailsModal.vue
@@ -1,16 +1,55 @@
 <template>
     <div class="max-w-4xl">
-        <div v-if="loading" class="flex items-center gap-2 text-base-content/70">
+        <div
+            v-if="loading"
+            class="flex items-center gap-2 text-base-content/70"
+        >
             <span class="loading loading-spinner loading-sm"></span>
-            <span>{{ t('common.loading') }}</span>
+            <span>{{ t("common.loading") }}</span>
         </div>
         <div v-else-if="preset" class="space-y-4">
-            <div class="flex items-start justify-between gap-4 sticky top-0 bg-base-200 z-10 py-2 -mt-2">
+            <div
+                class="flex items-start justify-between gap-4 sticky top-0 bg-base-200 z-10 py-2 -mt-2"
+            >
                 <div class="flex-1 min-w-0">
-                    <h2 class="text-xl font-semibold truncate">{{ preset.title ?? preset.name }}</h2>
-                    <p class="text-xs text-base-content/60 truncate">{{ t('marketplace.by_user', {
-                        name: ownerDisplayName
-                    }) }}</p>
+                    <h2 class="text-xl font-semibold truncate">
+                        {{ preset.title ?? preset.name }}
+                    </h2>
+                    <div class="flex items-center gap-2 mt-1">
+                        <div
+                            v-if="
+                                preset.author?.author_avatar ||
+                                preset.author?.avatar
+                            "
+                            class="w-5 h-5 rounded-full overflow-hidden border border-white/10 shrink-0 cursor-pointer"
+                            @click="
+                                emit('show-user-profile', preset.author?.id)
+                            "
+                        >
+                            <img
+                                :src="
+                                    resolveApiAssetUrl(
+                                        preset.author.author_avatar ||
+                                            preset.author.avatar
+                                    )
+                                "
+                                class="w-full h-full object-cover"
+                                :alt="ownerDisplayName"
+                            />
+                        </div>
+                        <p
+                            class="text-xs text-base-content/60 truncate cursor-pointer hover:text-base-content/80 transition-colors"
+                            @click="
+                                emit('show-user-profile', preset.author?.id)
+                            "
+                        >
+                            {{
+                                t("marketplace.by_user", {
+                                    name: ownerDisplayName,
+                                })
+                            }}
+                        </p>
+                    </div>
                 </div>
                 <div class="flex items-center gap-2">
                     <span class="badge badge-ghost">
@@ -20,55 +59,141 @@
                         <Download class="w-4 h-4" />
                         {{ preset.downloads_count }}
                     </span>
-                    <span v-if="isOwner" class="badge badge-ghost"
-                        :class="preset.is_public ? 'text-success' : 'text-warning'">
-                        {{ preset.is_public ? t('marketplace.public_label') : t('marketplace.private_label') }}
+                    <span
+                        class="badge badge-ghost hover:bg-base-300 transition-colors cursor-pointer"
+                        @click="scrollToComments"
+                    >
+                        <MessageSquare class="w-4 h-4" />
+                        {{ preset.comments_count || 0 }}
+                    </span>
+                    <span
+                        v-if="isOwner"
+                        class="badge badge-ghost"
+                        :class="
+                            preset.is_public ? 'text-success' : 'text-warning'
+                        "
+                    >
+                        {{
+                            preset.is_public
+                                ? t("marketplace.public_label")
+                                : t("marketplace.private_label")
+                        }}
                     </span>
                     <div v-if="onNavigate" class="ml-2 join mr-4">
-                        <button class="btn btn-sm join-item" @click="onNavigate('prev')">
+                        <button
+                            class="btn btn-sm join-item"
+                            @click="onNavigate('prev')"
+                        >
                             <ChevronLeft class="w-4 h-4" />
                         </button>
-                        <button class="btn btn-sm join-item" @click="onNavigate('next')">
+                        <button
+                            class="btn btn-sm join-item"
+                            @click="onNavigate('next')"
+                        >
                             <ChevronRight class="w-4 h-4" />
                         </button>
                     </div>
                 </div>
-
             </div>
 
             <div class="flex items-center gap-2 ml-2">
-                <button class="btn btn-neutral btn-sm" @click="applyFromDetails">{{ t('marketplace.apply')
-                }}</button>
-                <button class="btn btn-neutral btn-sm" :disabled="downloading" @click="downloadFromDetails">{{
-                    t('common.download')
-                }}</button>
-                <button class="btn btn-neutral btn-sm" :disabled="preset?.liking" @click="likeFromDetails">{{
-                    t('marketplace.like') }}</button>
+                <button
+                    class="btn btn-neutral btn-sm"
+                    @click="applyFromDetails"
+                >
+                    {{ t("marketplace.apply") }}
+                </button>
+                <button
+                    class="btn btn-neutral btn-sm"
+                    :disabled="downloading"
+                    @click="downloadFromDetails"
+                >
+                    {{ t("common.download") }}
+                </button>
+                <button
+                    class="btn btn-neutral btn-sm"
+                    :disabled="preset?.liking"
+                    @click="likeFromDetails"
+                >
+                    {{ t("marketplace.like") }}
+                </button>
                 <template v-if="isOwner">
-                    <button class="btn btn-neutral btn-sm" @click="openEdit">{{ t('common.edit') }}</button>
-                    <button class="btn btn-neutral btn-sm" :disabled="toggling" @click="toggleVisibility">
-                        {{ preset.is_public ? t('marketplace.make_private') : t('marketplace.make_public') }}
+                    <button class="btn btn-neutral btn-sm" @click="openEdit">
+                        {{ t("common.edit") }}
+                    </button>
+                    <button
+                        class="btn btn-neutral btn-sm"
+                        :disabled="toggling"
+                        @click="toggleVisibility"
+                    >
+                        {{
+                            preset.is_public
+                                ? t("marketplace.make_private")
+                                : t("marketplace.make_public")
+                        }}
+                    </button>
+                    <button class="btn btn-error btn-sm" @click="askDelete">
+                        {{ t("common.delete") }}
                     </button>
-                    <button class="btn btn-error btn-sm" @click="askDelete">{{ t('common.delete')
-                    }}</button>
                 </template>
             </div>
 
             <p class="text-sm whitespace-pre-line">{{ preset.description }}</p>
 
+            <div v-if="themeSource.backgroundImage" class="space-y-2">
+                <h3 class="font-medium flex items-center gap-2">
+                    <ImageIcon class="w-4 h-4" />
+                    {{ t("customization.background_image") }}
+                </h3>
+                <div
+                    class="w-full h-48 rounded-xl bg-cover bg-center border border-white/5"
+                    :style="{
+                        backgroundImage: `url(${themeSource.backgroundImage})`,
+                    }"
+                ></div>
+                <div class="flex gap-4 text-xs opacity-60">
+                    <span v-if="themeSource.backgroundBlur !== undefined"
+                        >{{ t("customization.background_blur") }}:
+                        {{ themeSource.backgroundBlur }}px</span
+                    >
+                    <span v-if="themeSource.backgroundOpacity !== undefined"
+                        >{{ t("customization.background_opacity") }}:
+                        {{ themeSource.backgroundOpacity }}%</span
+                    >
+                </div>
+            </div>
+
             <div class="divider my-2"></div>
 
             <div>
-                <h3 class="font-medium mb-2">{{ t('marketplace.preset_details') }}</h3>
+                <h3 class="font-medium mb-2">
+                    {{ t("marketplace.preset_details") }}
+                </h3>
                 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                     <div class="md:col-span-2">
-                        <div v-if="displayedColors.length" class="grid grid-cols-3 sm:grid-cols-6 gap-2">
-                            <div v-for="c in displayedColors" :key="c" class="tooltip" :data-tip="c">
-                                <div class="h-10 rounded-box border border-base-300 cursor-pointer"
-                                    :style="{ backgroundColor: pData[c] }" role="button" tabindex="0"
-                                    :aria-label="`Copy ${c} color ${pData[c]}`" @click="copyColor(c)"
-                                    @keydown.enter.prevent="copyColor(c)" @keydown.space.prevent="copyColor(c)"></div>
-                                <div class="text-xs opacity-70 mt-1 truncate">{{ c }}</div>
+                        <div
+                            v-if="displayedColors.length"
+                            class="grid grid-cols-3 sm:grid-cols-6 gap-2"
+                        >
+                            <div
+                                v-for="c in displayedColors"
+                                :key="c"
+                                class="tooltip"
+                                :data-tip="c"
+                            >
+                                <div
+                                    class="h-10 rounded-box border border-base-300 cursor-pointer"
+                                    :style="{ backgroundColor: pData[c] }"
+                                    role="button"
+                                    tabindex="0"
+                                    :aria-label="`Copy ${c} color ${pData[c]}`"
+                                    @click="copyColor(c)"
+                                    @keydown.enter.prevent="copyColor(c)"
+                                    @keydown.space.prevent="copyColor(c)"
+                                ></div>
+                                <div class="text-xs opacity-70 mt-1 truncate">
+                                    {{ c }}
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -77,49 +202,132 @@
 
             <div class="divider my-2"></div>
 
-            <div>
+            <div id="preset-comments-section">
                 <h3 class="font-medium mb-3 flex items-center justify-between">
-                    <span>{{ t('marketplace.comments') }}</span>
-                    <span class="text-sm opacity-60">{{ comments.length }}</span>
+                    <span>{{ t("marketplace.comments") }}</span>
+                    <span class="text-sm opacity-60">{{
+                        comments.length
+                    }}</span>
                 </h3>
 
                 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                     <div class="md:col-span-2">
                         <div class="space-y-3 max-h-80 overflow-auto pr-1">
-                            <div v-if="commentsLoading" class="flex items-center gap-2 text-base-content/70">
-                                <span class="loading loading-spinner loading-sm"></span>
-                                <span>{{ t('common.loading') }}</span>
+                            <div
+                                v-if="commentsLoading"
+                                class="flex items-center gap-2 text-base-content/70"
+                            >
+                                <span
+                                    class="loading loading-spinner loading-sm"
+                                ></span>
+                                <span>{{ t("common.loading") }}</span>
                             </div>
 
                             <div v-else>
-                                <div v-if="!comments.length" class="text-sm opacity-60">
-                                    {{ t('marketplace.no_comments') }}
+                                <div
+                                    v-if="!comments.length"
+                                    class="text-sm opacity-60"
+                                >
+                                    {{ t("marketplace.no_comments") }}
                                 </div>
 
-                                <div v-for="c in comments" :key="c.id"
-                                    class="p-3 rounded-box border border-base-300 bg-base-100 mt-2">
+                                <div
+                                    v-for="c in comments"
+                                    :key="c.id"
+                                    class="p-3 rounded-xl border border-white/5 bg-white/5 mt-2"
+                                >
                                     <div class="flex gap-3">
                                         <div
-                                            class="w-10 h-10 rounded-full bg-base-300 flex items-center justify-center text-sm font-semibold">
-                                            {{ c.author_username ? c.author_username.charAt(0).toUpperCase() : '?' }}
+                                            class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center overflow-hidden text-xs font-bold text-white/80 shrink-0 cursor-pointer hover:bg-white/20 transition-colors"
+                                            @click="
+                                                emit(
+                                                    'show-user-profile',
+                                                    c.author_id || c.authorId
+                                                )
+                                            "
+                                        >
+                                            <img
+                                                v-if="
+                                                    c.author_avatar || c.avatar
+                                                "
+                                                :src="
+                                                    resolveApiAssetUrl(
+                                                        c.author_avatar ||
+                                                            c.avatar
+                                                    )
+                                                "
+                                                class="w-full h-full object-cover"
+                                                :alt="
+                                                    c.author_username ||
+                                                    c.authorUsername
+                                                "
+                                            />
+                                            <span v-else>{{
+                                                (
+                                                    c.author_nickname ||
+                                                    c.author_username ||
+                                                    c.authorNickname ||
+                                                    c.authorUsername ||
+                                                    "?"
+                                                )
+                                                    .charAt(0)
+                                                    .toUpperCase()
+                                            }}</span>
                                         </div>
 
                                         <div class="flex-1 min-w-0">
-                                            <div class="flex items-center justify-between gap-2 text-xs opacity-70">
+                                            <div
+                                                class="flex items-center justify-between gap-2 text-xs opacity-70"
+                                            >
                                                 <div class="truncate">
-                                                    <span class="font-medium mr-2">{{ c.author_username }}</span>
-                                                    <span class="text-[11px] opacity-60">{{ formatDate(c.created_at)
-                                                    }}</span>
+                                                    <span
+                                                        class="font-bold text-white/80 mr-2 cursor-pointer hover:text-white transition-colors"
+                                                        @click="
+                                                            emit(
+                                                                'show-user-profile',
+                                                                c.author_id ||
+                                                                    c.authorId
+                                                            )
+                                                        "
+                                                    >
+                                                        {{
+                                                            c.author_nickname ||
+                                                            c.author_username ||
+                                                            c.authorNickname ||
+                                                            c.authorUsername
+                                                        }}
+                                                    </span>
+                                                    <span
+                                                        class="text-[10px] text-white/40 font-medium"
+                                                        >{{
+                                                            formatDate(
+                                                                c.created_at ||
+                                                                    c.createdAt
+                                                            )
+                                                        }}</span
+                                                    >
                                                 </div>
-                                                <div v-if="canDelete(c)" class="flex items-center gap-2">
-                                                    <button class="btn btn-ghost btn-xs" @click="onDeleteComment(c)"
-                                                        aria-label="Delete comment">
-                                                        {{ t('common.delete') }}
+                                                <div
+                                                    v-if="canDelete(c)"
+                                                    class="flex items-center gap-2"
+                                                >
+                                                    <button
+                                                        class="btn btn-ghost btn-xs"
+                                                        @click="
+                                                            onDeleteComment(c)
+                                                        "
+                                                        aria-label="Delete comment"
+                                                    >
+                                                        {{ t("common.delete") }}
                                                     </button>
                                                 </div>
                                             </div>
 
-                                            <p class="mt-2 text-sm wrap-break-word whitespace-pre-wrap">{{ c.text }}</p>
+                                            <p
+                                                class="mt-2 text-sm wrap-break-word whitespace-pre-wrap"
+                                            >
+                                                {{ c.text }}
+                                            </p>
                                         </div>
                                     </div>
                                 </div>
@@ -128,21 +336,43 @@
                     </div>
 
                     <div class="md:col-span-1">
-                        <div class="sticky top-2 bg-base-200 p-3 rounded-box border border-base-300">
+                        <div
+                            class="sticky top-2 bg-base-200 p-3 rounded-box border border-base-300"
+                        >
                             <label class="label mb-2">
-                                <span class="label-text">{{ t('marketplace.add_comment') }}</span>
+                                <span class="label-text">{{
+                                    t("marketplace.add_comment")
+                                }}</span>
                             </label>
 
-                            <textarea v-model="newComment" class="textarea textarea-bordered w-full" rows="4"
-                                maxlength="1000" :placeholder="t('marketplace.comment_placeholder')"
-                                aria-label="Add a comment"></textarea>
-
-                            <div class="mt-2 flex items-center justify-between gap-2">
-                                <div class="text-xs opacity-60">{{ newComment.length }}/1000</div>
-                                <button class="btn btn-primary" :disabled="!newComment.trim() || creating"
-                                    @click="onAddComment" aria-label="Send comment">
-                                    <span v-if="creating" class="loading loading-spinner loading-xs"></span>
-                                    <span v-else>{{ t('common.send') }}</span>
+                            <textarea
+                                v-model="newComment"
+                                class="textarea textarea-bordered w-full"
+                                rows="4"
+                                maxlength="1000"
+                                :placeholder="
+                                    t('marketplace.comment_placeholder')
+                                "
+                                aria-label="Add a comment"
+                            ></textarea>
+
+                            <div
+                                class="mt-2 flex items-center justify-between gap-2"
+                            >
+                                <div class="text-xs opacity-60">
+                                    {{ newComment.length }}/1000
+                                </div>
+                                <button
+                                    class="btn btn-primary"
+                                    :disabled="!newComment.trim() || creating"
+                                    @click="onAddComment"
+                                    aria-label="Send comment"
+                                >
+                                    <span
+                                        v-if="creating"
+                                        class="loading loading-spinner loading-xs"
+                                    ></span>
+                                    <span v-else>{{ t("common.send") }}</span>
                                 </button>
                             </div>
                         </div>
@@ -151,26 +381,39 @@
             </div>
         </div>
     </div>
-
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { formatDate } from '../../../../utils/utils';
-import { marketplaceService } from '../../../../services/marketplaceService';
-import { useUser } from '../../../../composables/useUser';
-import { ChevronLeft, ChevronRight, Download, ThumbsUp } from 'lucide-vue-next';
-import { presetService } from '../../../../services/presetService';
-import { useToast } from '../../../../services/toastService';
-import { useModal } from '../../../../services/modalService';
-import MarketplaceEditPresetModal from '../presets/MarketplaceEditPresetModal.vue';
-import MarketplaceDeleteConfirmModal from '../presets/MarketplaceDeleteConfirmModal.vue';
-import { buildPresetCreatePayload } from '../../../../utils/presetPayload';
-import type { MarketplacePreset, MarketplaceTheme } from '../../../../types/presets';
-
-const props = defineProps<{ id: number; onNavigate?: (dir: 'prev' | 'next') => void }>();
-const emit = defineEmits(['close']);
+import { onMounted, ref, watch, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { formatDate } from "../../../../utils/utils";
+import { resolveApiAssetUrl } from "../../../../utils/url";
+import { marketplaceService } from "../../../../services/marketplaceService";
+import { useUser } from "../../../../composables/useUser";
+import {
+    ChevronLeft,
+    ChevronRight,
+    Download,
+    ThumbsUp,
+    MessageSquare,
+    Image as ImageIcon,
+} from "lucide-vue-next";
+import { presetService } from "../../../../services/presetService";
+import { useToast } from "../../../../services/toastService";
+import { useModal } from "../../../../services/modalService";
+import MarketplaceEditPresetModal from "../presets/MarketplaceEditPresetModal.vue";
+import MarketplaceDeleteConfirmModal from "../presets/MarketplaceDeleteConfirmModal.vue";
+import { buildPresetCreatePayload } from "../../../../utils/presetPayload";
+import type {
+    MarketplacePreset,
+    MarketplaceTheme,
+} from "../../../../types/presets";
+
+const props = defineProps<{
+    id: number;
+    onNavigate?: (dir: "prev" | "next") => void;
+}>();
+const emit = defineEmits(["close", "show-user-profile"]);
 
 const { t } = useI18n();
 const { username } = useUser();
@@ -181,24 +424,32 @@ const loading = ref(false);
 const preset = ref<MarketplacePreset | null>(null);
 const comments = ref<any[]>([]);
 const commentsLoading = ref(false);
-const newComment = ref('');
+const newComment = ref("");
 const creating = ref(false);
 const downloading = ref(false);
 const toggling = ref(false);
 
 const ownerDisplayName = computed(() => {
     const author = preset.value?.author;
-    return author?.displayName ?? author?.username ?? preset.value?.owner_username ?? '';
+    return (
+        author?.displayName ??
+        author?.username ??
+        preset.value?.owner_username ??
+        ""
+    );
 });
 
 const isOwner = computed(() => {
     if (!username.value || !preset.value) return false;
-    const owner = preset.value.author?.username ?? preset.value.owner_username ?? '';
+    const owner =
+        preset.value.author?.username ?? preset.value.owner_username ?? "";
     return owner === username.value;
 });
 
 const themeSource = computed<MarketplaceTheme>(() => {
-    return (preset.value?.theme ?? preset.value?.preset_data ?? {}) as MarketplaceTheme;
+    return (preset.value?.theme ??
+        preset.value?.preset_data ??
+        {}) as MarketplaceTheme;
 });
 
 const pData = computed(() => themeSource.value as Record<string, any>);
@@ -206,31 +457,31 @@ const pData = computed(() => themeSource.value as Record<string, any>);
 const displayedColors = computed(() => {
     const pd = themeSource.value;
     const keys: Array<keyof MarketplaceTheme> = [
-        'base100',
-        'base200',
-        'base300',
-        'baseContent',
-        'primary',
-        'primaryContent',
-        'secondary',
-        'secondaryContent',
-        'accent',
-        'accentContent',
-        'neutral',
-        'neutralContent',
-        'info',
-        'infoContent',
-        'success',
-        'successContent',
-        'warning',
-        'warningContent',
-        'error',
-        'errorContent',
+        "base100",
+        "base200",
+        "base300",
+        "baseContent",
+        "primary",
+        "primaryContent",
+        "secondary",
+        "secondaryContent",
+        "accent",
+        "accentContent",
+        "neutral",
+        "neutralContent",
+        "info",
+        "infoContent",
+        "success",
+        "successContent",
+        "warning",
+        "warningContent",
+        "error",
+        "errorContent",
     ];
 
     return keys.filter((k) => {
         const value = pd[k];
-        return value !== undefined && value !== null && value !== '';
+        return value !== undefined && value !== null && value !== "";
     });
 });
 
@@ -244,15 +495,23 @@ async function copyColor(key: string) {
         if (navigator.clipboard && navigator.clipboard.writeText) {
             await navigator.clipboard.writeText(color);
         }
-        addToast(t('common.copied_to_clipboard', { value: color }) || color, 'success');
+        addToast(
+            t("common.copied_to_clipboard", { value: color }) || color,
+            "success"
+        );
     } catch (e) {
-        console.error('Copy failed', e);
+        console.error("Copy failed", e);
     }
 }
 
 function canDelete(c: any): boolean {
-    const owner = preset.value?.author?.username ?? preset.value?.owner_username;
-    return !!username.value && (c.author_username === username.value || owner === username.value);
+    const owner =
+        preset.value?.author?.username ?? preset.value?.owner_username;
+    const author = c.author_username || c.authorUsername;
+    return (
+        !!username.value &&
+        (author === username.value || owner === username.value)
+    );
 }
 
 async function loadPreset() {
@@ -280,7 +539,7 @@ async function onAddComment() {
     creating.value = true;
     try {
         await marketplaceService.addComment(props.id, text);
-        newComment.value = '';
+        newComment.value = "";
         await loadComments();
     } finally {
         creating.value = false;
@@ -292,7 +551,7 @@ async function onDeleteComment(c: any) {
         await marketplaceService.deleteComment(props.id, c.id);
         await loadComments();
     } catch (e) {
-        console.error('Failed to delete comment:', e);
+        console.error("Failed to delete comment:", e);
     }
 }
 
@@ -301,7 +560,7 @@ function applyFromDetails() {
     if (!p) return;
     const theme = themeSource.value;
     presetService.applyPresetToTheme({
-        customCSS: theme.customCSS ?? '',
+        customCSS: theme.customCSS ?? "",
         enableCustomCSS: theme.enableCustomCSS ?? false,
         base100: theme.base100,
         base200: theme.base200,
@@ -323,6 +582,9 @@ function applyFromDetails() {
         warningContent: theme.warningContent,
         error: theme.error,
         errorContent: theme.errorContent,
+        backgroundImage: theme.backgroundImage,
+        backgroundBlur: theme.backgroundBlur,
+        backgroundOpacity: theme.backgroundOpacity,
     } as any);
 }
 
@@ -333,7 +595,10 @@ async function likeFromDetails() {
     try {
         if (preset.value.liked) {
             await marketplaceService.unlikePreset(preset.value.id);
-            preset.value.likes_count = Math.max(0, (preset.value.likes_count || 0) - 1);
+            preset.value.likes_count = Math.max(
+                0,
+                (preset.value.likes_count || 0) - 1
+            );
             preset.value.liked = false;
         } else {
             await marketplaceService.likePreset(preset.value.id);
@@ -341,7 +606,7 @@ async function likeFromDetails() {
             preset.value.liked = true;
         }
     } catch (e) {
-        console.error('Failed to toggle like preset:', e);
+        console.error("Failed to toggle like preset:", e);
     } finally {
         preset.value.liking = false;
     }
@@ -353,21 +618,29 @@ async function downloadFromDetails() {
         downloading.value = true;
         const p: any = preset.value;
         if (!p) return;
-        const name = p.title ?? p.name ?? 'Imported preset';
-        const input = buildPresetCreatePayload(name, p.description || undefined, themeSource.value);
+        const name = p.title ?? p.name ?? "Imported preset";
+        const input = buildPresetCreatePayload(
+            name,
+            p.description || undefined,
+            themeSource.value
+        );
         await presetService.createPreset(input);
-        addToast(t('theme.presets.messages.import_success'), 'success');
+        addToast(
+            t("theme.presets.messages.import_success", { name }),
+            "success"
+        );
         try {
             await marketplaceService.downloadPreset(p.id);
             if (preset.value) {
-                preset.value.downloads_count = (preset.value.downloads_count || 0) + 1;
+                preset.value.downloads_count =
+                    (preset.value.downloads_count || 0) + 1;
             }
         } catch (e) {
-            console.error('Failed to record download:', e);
+            console.error("Failed to record download:", e);
         }
     } catch (e) {
-        console.error('Failed to import preset:', e);
-        addToast(t('theme.presets.messages.import_error'), 'error');
+        console.error("Failed to import preset:", e);
+        addToast(t("theme.presets.messages.import_error"), "error");
     } finally {
         downloading.value = false;
     }
@@ -379,7 +652,7 @@ function openEdit() {
     showModal(
         id,
         MarketplaceEditPresetModal,
-        { title: t('marketplace.edit_modal_title') },
+        { title: t("marketplace.edit_modal_title") },
         { preset: preset.value },
         {
             updated: async () => {
@@ -396,11 +669,13 @@ async function toggleVisibility() {
     preset.value.is_public = !prev;
     toggling.value = true;
     try {
-        await marketplaceService.updatePreset(preset.value.id, { is_public: preset.value.is_public });
+        await marketplaceService.updatePreset(preset.value.id, {
+            is_public: preset.value.is_public,
+        });
     } catch (e) {
         preset.value.is_public = prev;
-        console.error('Failed to update preset visibility:', e);
-        addToast(t('marketplace.updated_failed'), 'error');
+        console.error("Failed to update preset visibility:", e);
+        addToast(t("marketplace.updated_failed"), "error");
     } finally {
         toggling.value = false;
     }
@@ -412,28 +687,38 @@ function askDelete() {
     showModal(
         cid,
         MarketplaceDeleteConfirmModal,
-        { title: t('common.delete') },
+        { title: t("common.delete") },
         { id: preset.value.id },
         {
             deleted: async () => {
                 hideModal(cid);
-                emit('close');
+                emit("close");
             },
         }
     );
 }
 
-watch(() => props.id, async () => {
-    if (props.id) {
-        await Promise.all([loadPreset(), loadComments()]);
-    }
-}, { immediate: true });
+watch(
+    () => props.id,
+    async () => {
+        if (props.id) {
+            await Promise.all([loadPreset(), loadComments()]);
+        }
+    },
+    { immediate: true }
+);
 
 onMounted(async () => {
     if (props.id) {
         await Promise.all([loadPreset(), loadComments()]);
     }
 });
+function scrollToComments() {
+    const el = document.getElementById("preset-comments-section");
+    if (el) {
+        el.scrollIntoView({ behavior: "smooth" });
+    }
+}
 </script>
 
 <style scoped></style>
diff --git a/src/components/modals/social/presets/ShareLocalPresetModal.vue b/src/components/modals/social/presets/ShareLocalPresetModal.vue
index c87597cc..072b1c4c 100644
--- a/src/components/modals/social/presets/ShareLocalPresetModal.vue
+++ b/src/components/modals/social/presets/ShareLocalPresetModal.vue
@@ -1,71 +1,111 @@
 <template>
     <div class="space-y-4">
         <div class="form-control">
-            <label class="label"><span class="label-text">{{ t('marketplace.preset_picker_label') }}</span></label>
+            <label class="label"
+                ><span class="label-text">{{
+                    t("marketplace.preset_picker_label")
+                }}</span></label
+            >
             <select v-model="selectedId" class="select select-bordered w-full">
-                <option :value="''" disabled>{{ t('marketplace.preset_picker_placeholder') }}</option>
-                <option v-for="p in presets" :key="p.id" :value="p.id">{{ p.name }}</option>
+                <option :value="''" disabled>
+                    {{ t("marketplace.preset_picker_placeholder") }}
+                </option>
+                <option v-for="p in presets" :key="p.id" :value="p.id">
+                    {{ p.name }}
+                </option>
             </select>
-            <p v-if="!presetsLoading && presets.length === 0" class="text-sm text-base-content/60 mt-2">
-                {{ t('marketplace.no_local_presets') }}
+            <p
+                v-if="!presetsLoading && presets.length === 0"
+                class="text-sm text-base-content/60 mt-2"
+            >
+                {{ t("marketplace.no_local_presets") }}
             </p>
         </div>
 
         <div class="form-control">
-            <label class="label"><span class="label-text">{{ t('marketplace.title_label') }}</span></label>
-            <input v-model="title" class="input input-bordered w-full"
-                :placeholder="t('marketplace.title_placeholder')" />
+            <label class="label"
+                ><span class="label-text">{{
+                    t("marketplace.title_label")
+                }}</span></label
+            >
+            <input
+                v-model="title"
+                class="input input-bordered w-full"
+                :placeholder="t('marketplace.title_placeholder')"
+            />
         </div>
 
         <div class="form-control">
-            <label class="label"><span class="label-text">{{ t('marketplace.description_label') }}</span></label>
-            <textarea v-model="description" class="textarea textarea-bordered w-full" rows="4"
-                :placeholder="t('marketplace.description_placeholder')"></textarea>
+            <label class="label"
+                ><span class="label-text">{{
+                    t("marketplace.description_label")
+                }}</span></label
+            >
+            <textarea
+                v-model="description"
+                class="textarea textarea-bordered w-full"
+                rows="4"
+                :placeholder="t('marketplace.description_placeholder')"
+            ></textarea>
         </div>
 
         <div class="form-control">
             <label class="cursor-pointer label">
-                <span class="label-text block">{{ t('marketplace.public_label') }}</span>
+                <span class="label-text block">{{
+                    t("marketplace.public_label")
+                }}</span>
                 <input type="checkbox" class="toggle" v-model="isPublic" />
             </label>
         </div>
 
         <div class="flex justify-end gap-2">
-            <button class="btn" @click="$emit('close')">{{ t('common.cancel') }}</button>
-            <button class="btn btn-primary" :disabled="submitting || !title || !selectedPreset" @click="share">
-                {{ submitting ? t('marketplace.sharing') : t('marketplace.share') }}
+            <button class="btn" @click="$emit('close')">
+                {{ t("common.cancel") }}
+            </button>
+            <button
+                class="btn btn-primary"
+                :disabled="submitting || !title || !selectedPreset"
+                @click="share"
+            >
+                {{
+                    submitting
+                        ? t("marketplace.sharing")
+                        : t("marketplace.share")
+                }}
             </button>
         </div>
     </div>
-
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { usePresets } from '../../../../composables/usePresets';
-import type { ThemePreset } from '../../../../types/presets';
-import { marketplaceService } from '../../../../services/marketplaceService';
-import { useToast } from '../../../../services/toastService';
+import { ref, watch, computed, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
+import { usePresets } from "../../../../composables/usePresets";
+import type { ThemePreset } from "../../../../types/presets";
+import { marketplaceService } from "../../../../services/marketplaceService";
+import { useToast } from "../../../../services/toastService";
 
-const emit = defineEmits(['shared', 'close']);
+const emit = defineEmits(["shared", "close"]);
 
 const { t } = useI18n();
 const { addToast } = useToast();
 const { presets, loading: presetsLoading, loadPresets } = usePresets();
 
-const selectedId = ref<string>('');
-const title = ref('');
-const description = ref('');
+const selectedId = ref<string>("");
+const title = ref("");
+const description = ref("");
 const isPublic = ref(true);
 const submitting = ref(false);
 
-const selectedPreset = computed<ThemePreset | undefined>(() => presets.value.find(p => p.id === selectedId.value));
+const selectedPreset = computed<ThemePreset | undefined>(() =>
+    presets.value.find((p) => p.id === selectedId.value)
+);
 
 watch(selectedPreset, (p) => {
     if (p && !title.value) {
         title.value = p.name;
-        if (!description.value && p.description) description.value = p.description;
+        if (!description.value && p.description)
+            description.value = p.description;
     }
 });
 
@@ -75,44 +115,47 @@ onMounted(() => {
 
 async function share() {
     if (!selectedPreset.value) return;
-        try {
-            const s = selectedPreset.value;
-            const payload = {
-                name: title.value.trim(),
-                description: description.value.trim(),
-                customCSS: s.customCSS,
-                enableCustomCSS: s.enableCustomCSS,
-                base100: s.base100,
-                base200: s.base200,
-                base300: s.base300,
-                baseContent: s.baseContent,
-                primary: s.primary,
-                primaryContent: s.primaryContent,
-                secondary: s.secondary,
-                secondaryContent: s.secondaryContent,
-                accent: s.accent,
-                accentContent: s.accentContent,
-                neutral: s.neutral,
-                neutralContent: s.neutralContent,
-                info: s.info,
-                infoContent: s.infoContent,
-                success: s.success,
-                successContent: s.successContent,
-                warning: s.warning,
-                warningContent: s.warningContent,
-                error: s.error,
-                errorContent: s.errorContent,
-                is_public: isPublic.value,
-            };
+    try {
+        const s = selectedPreset.value;
+        const payload = {
+            name: title.value.trim(),
+            description: description.value.trim(),
+            customCSS: s.customCSS,
+            enableCustomCSS: s.enableCustomCSS,
+            base100: s.base100,
+            base200: s.base200,
+            base300: s.base300,
+            baseContent: s.baseContent,
+            primary: s.primary,
+            primaryContent: s.primaryContent,
+            secondary: s.secondary,
+            secondaryContent: s.secondaryContent,
+            accent: s.accent,
+            accentContent: s.accentContent,
+            neutral: s.neutral,
+            neutralContent: s.neutralContent,
+            info: s.info,
+            infoContent: s.infoContent,
+            success: s.success,
+            successContent: s.successContent,
+            warning: s.warning,
+            warningContent: s.warningContent,
+            error: s.error,
+            errorContent: s.errorContent,
+            backgroundImage: s.backgroundImage,
+            backgroundBlur: s.backgroundBlur,
+            backgroundOpacity: s.backgroundOpacity,
+            is_public: isPublic.value,
+        };
 
         submitting.value = true;
         await marketplaceService.createPreset(payload);
-        addToast(t('marketplace.shared_success'), 'success');
-        emit('shared');
-        emit('close');
+        addToast(t("marketplace.shared_success"), "success");
+        emit("shared");
+        emit("close");
     } catch (e) {
-        console.error('Failed to share preset:', e);
-        addToast(t('marketplace.shared_failed'), 'error');
+        console.error("Failed to share preset:", e);
+        addToast(t("marketplace.shared_failed"), "error");
     } finally {
         submitting.value = false;
     }
diff --git a/src/components/modals/social/presets/SharePresetModal.vue b/src/components/modals/social/presets/SharePresetModal.vue
index c8e1dab2..3ca16b7b 100644
--- a/src/components/modals/social/presets/SharePresetModal.vue
+++ b/src/components/modals/social/presets/SharePresetModal.vue
@@ -1,42 +1,68 @@
 <template>
     <div class="space-y-4">
         <div class="form-control">
-            <label class="label"><span class="label-text">{{ t('marketplace.title_label') }}</span></label>
-            <input v-model="title" class="input input-bordered w-full"
-                :placeholder="t('marketplace.title_placeholder')" />
+            <label class="label"
+                ><span class="label-text">{{
+                    t("marketplace.title_label")
+                }}</span></label
+            >
+            <input
+                v-model="title"
+                class="input input-bordered w-full"
+                :placeholder="t('marketplace.title_placeholder')"
+            />
         </div>
         <div class="form-control">
-            <label class="label"><span class="label-text">{{ t('marketplace.description_label') }}</span></label>
-            <textarea v-model="description" class="textarea textarea-bordered w-full" rows="4"
-                :placeholder="t('marketplace.description_placeholder')"></textarea>
+            <label class="label"
+                ><span class="label-text">{{
+                    t("marketplace.description_label")
+                }}</span></label
+            >
+            <textarea
+                v-model="description"
+                class="textarea textarea-bordered w-full"
+                rows="4"
+                :placeholder="t('marketplace.description_placeholder')"
+            ></textarea>
         </div>
         <div class="form-control">
             <label class="cursor-pointer label">
-                <span class="label-text block">{{ t('marketplace.public_label') }}</span>
+                <span class="label-text block">{{
+                    t("marketplace.public_label")
+                }}</span>
                 <input type="checkbox" class="toggle" v-model="isPublic" />
             </label>
         </div>
         <div class="flex justify-end gap-2">
-            <button class="btn" @click="$emit('close')">{{ t('common.cancel') }}</button>
-            <button class="btn btn-primary" :disabled="loading || !title" @click="share">{{ loading ?
-                t('marketplace.sharing') : t('marketplace.share') }}</button>
+            <button class="btn" @click="$emit('close')">
+                {{ t("common.cancel") }}
+            </button>
+            <button
+                class="btn btn-primary"
+                :disabled="loading || !title"
+                @click="share"
+            >
+                {{
+                    loading ? t("marketplace.sharing") : t("marketplace.share")
+                }}
+            </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { themeService } from '../../../../services/themeService';
-import { marketplaceService } from '../../../../services/marketplaceService';
-import { useToast } from '../../../../services/toastService';
-import { useI18n } from 'vue-i18n';
+import { ref } from "vue";
+import { themeService } from "../../../../services/themeService";
+import { marketplaceService } from "../../../../services/marketplaceService";
+import { useToast } from "../../../../services/toastService";
+import { useI18n } from "vue-i18n";
 
-const emit = defineEmits(['shared', 'close']);
+const emit = defineEmits(["shared", "close"]);
 
 const { addToast } = useToast();
 const { t } = useI18n();
-const title = ref('');
-const description = ref('');
+const title = ref("");
+const description = ref("");
 const isPublic = ref(true);
 const loading = ref(false);
 
@@ -69,15 +95,18 @@ async function share() {
             warningContent: s.warningContent || undefined,
             error: s.error || undefined,
             errorContent: s.errorContent || undefined,
+            backgroundImage: s.backgroundImage || undefined,
+            backgroundBlur: s.backgroundBlur,
+            backgroundOpacity: s.backgroundOpacity,
             is_public: isPublic.value,
         };
         await marketplaceService.createPreset(payload);
-        addToast(t('marketplace.shared_success'), 'success');
-        emit('shared');
-        emit('close');
+        addToast(t("marketplace.shared_success"), "success");
+        emit("shared");
+        emit("close");
     } catch (e) {
-        console.error('Failed to share preset:', e);
-        addToast(t('marketplace.shared_failed'), 'error');
+        console.error("Failed to share preset:", e);
+        addToast(t("marketplace.shared_failed"), "error");
     } finally {
         loading.value = false;
     }
diff --git a/src/components/notifications/ToastContainer.vue b/src/components/notifications/ToastContainer.vue
index 37a96cac..0ccb66d8 100644
--- a/src/components/notifications/ToastContainer.vue
+++ b/src/components/notifications/ToastContainer.vue
@@ -1,15 +1,20 @@
 <template>
     <div class="toast-container" :class="positionClass">
         <transition-group name="toast-list" tag="div">
-            <ToastNotification v-for="toast in toasts" :key="toast.id" :toast="toast" @close="removeToast" />
+            <ToastNotification
+                v-for="toast in toasts"
+                :key="toast.id"
+                :toast="toast"
+                @close="removeToast"
+            />
         </transition-group>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import ToastNotification from './ToastNotification.vue';
-import { useToast } from '../../services/toastService';
+import { computed } from "vue";
+import ToastNotification from "./ToastNotification.vue";
+import { useToast } from "../../services/toastService";
 
 const { toasts, removeToast, toastPosition } = useToast();
 
@@ -26,33 +31,33 @@ const positionClass = computed(() => {
 }
 
 .toast-position-bottom-right {
-    bottom: 1rem;
-    right: 1rem;
+    bottom: var(--toast-bottom-offset, 1rem);
+    right: var(--toast-right-offset, 1rem);
 }
 
 .toast-position-bottom-left {
-    bottom: 1rem;
-    left: 1rem;
+    bottom: var(--toast-bottom-offset, 1rem);
+    left: var(--toast-left-offset, 1rem);
 }
 
 .toast-position-top-right {
-    top: 1rem;
-    right: 1rem;
+    top: var(--toast-top-offset, 1rem);
+    right: var(--toast-right-offset, 1rem);
 }
 
 .toast-position-top-left {
-    top: 1rem;
-    left: 1rem;
+    top: var(--toast-top-offset, 1rem);
+    left: var(--toast-left-offset, 1rem);
 }
 
 .toast-position-bottom-center {
-    bottom: 1rem;
+    bottom: var(--toast-bottom-offset, 1rem);
     left: 50%;
     transform: translateX(-50%);
 }
 
 .toast-position-top-center {
-    top: 1rem;
+    top: var(--toast-top-offset, 1rem);
     left: 50%;
     transform: translateX(-50%);
 }
diff --git a/src/components/notifications/ToastNotification.vue b/src/components/notifications/ToastNotification.vue
index 05e3dbdf..64f79065 100644
--- a/src/components/notifications/ToastNotification.vue
+++ b/src/components/notifications/ToastNotification.vue
@@ -1,43 +1,59 @@
 <template>
-    <div class="toast-notification" :class="`toast-${toast.type}`" @mouseenter="handleMouseEnter"
-        @mouseleave="handleMouseLeave">
+    <div
+        class="toast-notification"
+        :class="`toast-${toast.type}`"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="handleMouseLeave"
+    >
         <div class="toast-content">
             <div class="toast-icon">
-                <component :is="currentIcon" v-if="currentIcon" class="w-5 h-5" />
+                <component
+                    :is="currentIcon"
+                    v-if="currentIcon"
+                    class="w-5 h-5"
+                />
             </div>
             <div class="toast-message">{{ displayMessage }}</div>
-            <button v-if="props.toast.action" class="toast-action-btn" @click.stop="handleActionClick">{{
-                props.toast.action.label }}</button>
+            <button
+                v-if="props.toast.action"
+                class="toast-action-btn"
+                @click.stop="handleActionClick"
+            >
+                {{ props.toast.action.label }}
+            </button>
             <button class="toast-close-btn" @click.stop="closeToast">
                 <X class="w-4 h-4" />
             </button>
         </div>
         <div class="toast-progress-container">
-            <div class="toast-progress" :style="{ animationDuration: `${toast.duration}ms` }"
-                :class="{ 'toast-progress-paused': isPaused }"></div>
+            <div
+                class="toast-progress"
+                :style="{ animationDuration: `${toast.duration}ms` }"
+                :class="{ 'toast-progress-paused': isPaused }"
+            ></div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
-import type { ToastMessage, ToastType } from '../../types/toast';
+import { computed, ref } from "vue";
+import type { ToastMessage, ToastType } from "../../types/toast";
 import {
     CheckCircle,
     XCircle,
     AlertCircle,
     AlertTriangle,
     X,
-} from 'lucide-vue-next';
-import { useToast } from '../../services/toastService';
-import { openUrl } from '@tauri-apps/plugin-opener';
+} from "lucide-vue-next";
+import { useToast } from "../../services/toastService";
+import { openUrl } from "@tauri-apps/plugin-opener";
 
 interface Props {
     toast: ToastMessage;
 }
 
 const props = defineProps<Props>();
-const emit = defineEmits(['close']);
+const emit = defineEmits(["close"]);
 
 const { pauseToast, resumeToast, getDisplayMessage } = useToast();
 const isPaused = ref(false);
@@ -53,7 +69,7 @@ const currentIcon = computed(() => iconMap[props.toast.type]);
 const displayMessage = computed(() => getDisplayMessage(props.toast));
 
 const closeToast = () => {
-    emit('close', props.toast.id);
+    emit("close", props.toast.id);
 };
 
 const handleActionClick = async () => {
@@ -62,7 +78,7 @@ const handleActionClick = async () => {
         try {
             await openUrl(action.url);
         } catch (e) {
-            console.error('Failed to open URL via Tauri shell: ', e);
+            console.error("Failed to open URL via Tauri shell: ", e);
         }
     }
 };
@@ -82,7 +98,7 @@ const handleMouseLeave = () => {
     if (
         props.toast.duration &&
         props.toast.duration > 0 &&
-        typeof props.toast.remainingDuration === 'number'
+        typeof props.toast.remainingDuration === "number"
     ) {
         isPaused.value = false;
         resumeToast(props.toast.id);
diff --git a/src/components/presets/PresetColorPreview.vue b/src/components/presets/PresetColorPreview.vue
new file mode 100644
index 00000000..a60151f6
--- /dev/null
+++ b/src/components/presets/PresetColorPreview.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="flex items-center gap-2">
+        <div class="flex gap-2 h-2 rounded-full flex-1">
+            <div
+                v-for="color in colors"
+                :key="color"
+                class="flex-1 h-full rounded-full shadow-sm"
+                :style="{ backgroundColor: color }"
+            ></div>
+        </div>
+        <div v-if="hasBackground" class="flex-none">
+            <Image class="w-3 h-3 text-primary" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { MarketplacePreset } from "../../types/presets";
+import { Image } from "lucide-vue-next";
+
+const props = defineProps<{
+    preset: MarketplacePreset;
+}>();
+
+const colors = computed(() => {
+    const theme = props.preset.theme ?? props.preset.preset_data ?? {};
+    const keys = ["primary", "secondary", "accent", "neutral", "base100"];
+    return keys
+        .map((k) => (theme as any)[k])
+        .filter((c) => c && typeof c === "string" && c.startsWith("#"));
+});
+
+const hasBackground = computed(() => {
+    const theme = props.preset.theme ?? props.preset.preset_data ?? {};
+    return !!(theme as any).backgroundImage;
+});
+</script>
diff --git a/src/components/presets/PresetGallery.vue b/src/components/presets/PresetGallery.vue
index ec9a3da3..0a082dc4 100644
--- a/src/components/presets/PresetGallery.vue
+++ b/src/components/presets/PresetGallery.vue
@@ -1,140 +1,396 @@
 <template>
     <div class="preset-gallery">
-        <div v-if="loading" class="flex items-center gap-2 text-base-content/70">
+        <div
+            v-if="loading"
+            class="flex items-center gap-2 text-base-content/70"
+        >
             <span class="loading loading-spinner loading-sm"></span>
-            <span>{{ t('common.loading') }}</span>
+            <span>{{ t("common.loading") }}</span>
         </div>
         <div v-else>
-            <div class="mb-4">
-                <input type="text" class="input input-bordered w-full"
-                    :placeholder="t('marketplace.search_placeholder')" v-model="search" />
+            <div class="flex flex-col md:flex-row gap-2 mb-3">
+                <div class="relative flex-1">
+                    <input
+                        type="text"
+                        class="input input-sm input-bordered w-full pl-9 transition-all bg-base-100/10 border-base-content/10 focus:border-primary/50"
+                        :placeholder="t('marketplace.search_placeholder')"
+                        v-model="search"
+                        @input="debouncedLoad"
+                    />
+                    <Search
+                        class="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-base-content/60 z-10 pointer-events-none"
+                    />
+                </div>
+                <div class="flex gap-2">
+                    <select
+                        class="select select-sm select-bordered bg-base-100/10 border-base-content/10"
+                        v-model="sortBy"
+                        @change="load"
+                    >
+                        <option value="newest">
+                            {{ t("marketplace.sort_newest") }}
+                        </option>
+                        <option value="popular">
+                            {{ t("marketplace.sort_popular") }}
+                        </option>
+                        <option value="downloads">
+                            {{ t("marketplace.sort_downloads") }}
+                        </option>
+                        <option value="comments">
+                            {{ t("marketplace.sort_comments") }}
+                        </option>
+                    </select>
+                </div>
             </div>
-            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-                <div class="card bg-base-200 border border-base-300 shadow-sm hover:shadow" v-for="p in filteredPresets"
-                    :key="p.id">
-                    <div class="card-body p-4">
-                        <div class="cursor-pointer rounded-box hover:bg-base-300/20 transition-colors p-1 -m-1"
-                            @click="openDetails(p)">
-                            <h4 class="card-title text-lg">
-                                {{ p.title ?? p.name }}
-                            </h4>
-                            <p class="text-xs text-base-content/70">
-                                {{ t('marketplace.by_user', { name: getOwnerName(p) || '' }) }}
+            <div
+                class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-3"
+            >
+                <div
+                    class="card bg-base-100/50 border border-white/5 shadow-xl hover:bg-base-300 transition-all duration-300 rounded-2xl group"
+                    v-for="p in filteredPresets"
+                    :key="p.id"
+                >
+                    <div class="card-body p-3.5">
+                        <div
+                            class="cursor-pointer flex flex-col h-full"
+                            @click="openDetails(p)"
+                        >
+                            <div class="flex flex-col gap-0.5 mb-2.5">
+                                <h4
+                                    class="text-base font-bold text-base-content tracking-tight line-clamp-1"
+                                >
+                                    {{ p.title ?? p.name }}
+                                </h4>
+                                <p
+                                    class="text-[9px] font-black text-base-content/30 uppercase tracking-widest hover:text-base-content/50 transition-colors cursor-pointer"
+                                    @click.stop="
+                                        $emit('show-user-profile', p.author?.id)
+                                    "
+                                >
+                                    {{
+                                        t("marketplace.by_author", {
+                                            name:
+                                                getOwnerName(p).toUpperCase() ||
+                                                "",
+                                        })
+                                    }}
+                                </p>
+                            </div>
+
+                            <div
+                                v-if="getThemeValues(p).backgroundImage"
+                                class="w-full h-24 rounded-xl bg-base-300/50 border border-white/5 overflow-hidden relative group-hover:border-primary/20 transition-colors mb-2.5"
+                            >
+                                <div
+                                    class="w-full h-full bg-cover bg-center transition-transform duration-500 group-hover:scale-105"
+                                    :style="{
+                                        backgroundImage: `url(${getThemeValues(p).backgroundImage})`,
+                                    }"
+                                ></div>
+                            </div>
+
+                            <div
+                                v-else
+                                class="w-full h-24 rounded-xl bg-base-300/20 border border-white/5 flex items-center justify-center mb-2.5 relative overflow-hidden group-hover:border-primary/5 transition-all duration-500"
+                            >
+                                <div
+                                    class="absolute inset-0 opacity-[0.03]"
+                                    style="
+                                        background-image: radial-gradient(
+                                            circle at 2px 2px,
+                                            currentColor 1px,
+                                            transparent 0
+                                        );
+                                        background-size: 16px 16px;
+                                    "
+                                ></div>
+                                <div
+                                    class="absolute inset-0 opacity-0 group-hover:opacity-5 transition-opacity duration-500"
+                                    :style="{
+                                        background: `radial-gradient(circle at center, ${getThemeValues(p).primary || 'currentColor'} 0%, transparent 70%)`,
+                                    }"
+                                ></div>
+                                <Image
+                                    class="w-5 h-5 text-base-content/10 group-hover:text-base-content/20 transition-colors duration-500"
+                                />
+                            </div>
+
+                            <PresetColorPreview :preset="p" class="mt-0!" />
+
+                            <p
+                                class="text-[11px] text-base-content/50 line-clamp-2 mt-2 leading-snug min-h-8"
+                                v-if="p.description"
+                            >
+                                {{ p.description }}
                             </p>
-                            <p class="text-sm text-base-content/80 line-clamp-3 mt-2" v-if="p.description">{{ p.description }}</p>
-                            <div class="mt-2 flex items-center gap-3 text-xs text-base-content/60">
-                                <span class="badge badge-ghost">
-                                    <ThumbsUp class="w-4 h-4" />
-                                    {{ p.likes_count }}
+                            <div v-else class="min-h-8"></div>
+
+                            <div class="mt-auto pt-3 flex items-center gap-4">
+                                <span
+                                    class="flex items-center gap-1.5 transition-colors"
+                                >
+                                    <ThumbsUp class="w-3.5 h-3.5" />
+                                    <span class="text-[11px] font-bold">{{
+                                        p.likes_count || 0
+                                    }}</span>
                                 </span>
-                                <span class="badge badge-ghost">
-                                    <Download class="w-4 h-4" />
-                                    {{ p.downloads_count }}
+                                <span
+                                    class="flex items-center gap-1.5 transition-colors"
+                                >
+                                    <Download class="w-3.5 h-3.5" />
+                                    <span class="text-[11px] font-bold">{{
+                                        p.downloads_count || 0
+                                    }}</span>
                                 </span>
-                                <span v-if="isOwner(p)" class="badge"
-                                    :class="p.is_public ? 'badge-success' : 'badge-warning'">
-                                    {{ p.is_public ? t('marketplace.public_label') : t('marketplace.private_label') }}
+                                <span
+                                    class="flex items-center gap-1.5 transition-colors"
+                                >
+                                    <MessageSquare class="w-3.5 h-3.5" />
+                                    <span class="text-[11px] font-bold">{{
+                                        p.comments_count || 0
+                                    }}</span>
                                 </span>
                             </div>
                         </div>
-                        <div class="card-actions justify-end mt-3">
-                            <button class="btn btn-primary btn-sm" @click.stop="apply(p)">{{ t('marketplace.apply')
-                                }}</button>
-                            <button class="btn btn-primary btn-sm" @click.stop="download(p)">{{ t('common.download')
-                                }}</button>
-                            <button class="btn btn-secondary btn-sm" @click.stop="like(p)">{{ t('marketplace.like')
-                                }}</button>
-                            <button class="btn btn-secondary btn-sm" @click.stop="openDetails(p)">{{ t('common.details')
-                                }}</button>
-                            <template v-if="isOwner(p)">
-                                <button class="btn btn-neutral btn-sm" @click.stop="openEdit(p)">{{ t('common.edit')
-                                    }}</button>
-                                <button class="btn btn-neutral btn-sm" @click.stop="toggleVisibility(p)">
-                                    {{ p.is_public ? t('marketplace.make_private') : t('marketplace.make_public') }}
+
+                        <div class="card-actions justify-end mt-2">
+                            <div class="flex items-center gap-1">
+                                <template v-if="isOwner(p)">
+                                    <div
+                                        class="dropdown dropdown-end dropdown-top"
+                                    >
+                                        <button
+                                            tabindex="0"
+                                            class="btn btn-circle btn-xs btn-ghost"
+                                            @click.stop
+                                        >
+                                            <MoreVertical
+                                                class="w-3 h-3 text-white/30"
+                                            />
+                                        </button>
+                                        <ul
+                                            tabindex="0"
+                                            class="dropdown-content bg-base-200 z-10 menu p-1 shadow-2xl rounded-xl w-48 border border-white/10 mb-2"
+                                        >
+                                            <li>
+                                                <a
+                                                    @click.stop="openEdit(p)"
+                                                    class="hover:bg-white/5 py-1.5 text-xs"
+                                                >
+                                                    <Edit class="w-3 h-3" />
+                                                    {{ t("common.edit") }}
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a
+                                                    @click.stop="
+                                                        toggleVisibility(p)
+                                                    "
+                                                    class="hover:bg-white/5 py-1.5 text-xs"
+                                                >
+                                                    <component
+                                                        :is="
+                                                            p.is_public
+                                                                ? 'EyeOff'
+                                                                : 'Eye'
+                                                        "
+                                                        class="w-3 h-3"
+                                                    />
+                                                    {{
+                                                        p.is_public
+                                                            ? t(
+                                                                  "marketplace.make_private"
+                                                              )
+                                                            : t(
+                                                                  "marketplace.make_public"
+                                                              )
+                                                    }}
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a
+                                                    @click.stop="askDelete(p)"
+                                                    class="text-error hover:bg-error/10 py-1.5 text-xs"
+                                                >
+                                                    <Trash2 class="w-3 h-3" />
+                                                    {{ t("common.delete") }}
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </template>
+
+                                <button
+                                    class="btn btn-circle btn-xs btn-primary border-none group/apply"
+                                    @click.stop="apply(p)"
+                                >
+                                    <PaintBucket class="w-3.5 h-3.5" />
+                                </button>
+                                <button
+                                    class="btn btn-circle btn-xs border-none"
+                                    @click.stop="download(p)"
+                                >
+                                    <Download class="w-3.5 h-3.5" />
                                 </button>
-                                <button class="btn btn-error btn-sm" @click.stop="askDelete(p)">{{
-                                    t('common.delete') }}</button>
-                            </template>
+                                <button
+                                    class="btn btn-circle btn-xs border-none"
+                                    :class="{
+                                        'bg-primary/20 text-primary': p.liked,
+                                    }"
+                                    @click.stop="like(p)"
+                                >
+                                    <ThumbsUp
+                                        class="w-3.5 h-3.5"
+                                        :class="{ 'fill-current': p.liked }"
+                                    />
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <div v-if="!filteredPresets.length" class="text-sm text-base-content/60 mt-4">{{ t('marketplace.no_items')
-            }}</div>
+        </div>
+        <div
+            v-if="!filteredPresets.length"
+            class="text-sm text-base-content/60 mt-4"
+        >
+            {{ t("marketplace.no_items") }}
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { marketplaceService } from '../../services/marketplaceService';
-import type { MarketplacePreset, MarketplaceTheme } from '../../types/presets';
-import { presetService } from '../../services/presetService';
-import { useUser } from '../../composables/useUser';
-import { useToast } from '../../services/toastService';
-import { useModal } from '../../services/modalService';
-import MarketplaceEditPresetModal from '../modals/social/presets/MarketplaceEditPresetModal.vue';
-import PresetDetailsModal from '../modals/social/presets/PresetDetailsModal.vue';
-import MarketplaceDeleteConfirmModal from '../modals/social/presets/MarketplaceDeleteConfirmModal.vue';
-import { Download, ThumbsUp } from 'lucide-vue-next';
-import { buildPresetCreatePayload } from '../../utils/presetPayload';
+import { defineComponent, ref, onMounted, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { marketplaceService } from "../../services/marketplaceService";
+import type { MarketplacePreset, MarketplaceTheme } from "../../types/presets";
+import { presetService } from "../../services/presetService";
+import { useUser } from "../../composables/useUser";
+import { useToast } from "../../services/toastService";
+import { useModal } from "../../services/modalService";
+import MarketplaceEditPresetModal from "../modals/social/presets/MarketplaceEditPresetModal.vue";
+import PresetDetailsModal from "../modals/social/presets/PresetDetailsModal.vue";
+import MarketplaceDeleteConfirmModal from "../modals/social/presets/MarketplaceDeleteConfirmModal.vue";
+import {
+    Download,
+    ThumbsUp,
+    MessageSquare,
+    Search,
+    MoreVertical,
+    Edit,
+    Trash2,
+    Eye,
+    EyeOff,
+    Image,
+    PaintBucket,
+} from "lucide-vue-next";
+import { buildPresetCreatePayload } from "../../utils/presetPayload";
+import PresetColorPreview from "./PresetColorPreview.vue";
 
 type MarketplacePresetView = MarketplacePreset & {
     liking?: boolean;
 };
 
+let debounceTimer: any = null;
+
 function getThemeValues(preset: MarketplacePreset): MarketplaceTheme {
     return preset.theme || {};
 }
 
 export default defineComponent({
-    name: 'PresetGallery',
-    components: { Download, ThumbsUp },
+    name: "PresetGallery",
+    components: {
+        Download,
+        ThumbsUp,
+        MessageSquare,
+        Search,
+        MoreVertical,
+        Edit,
+        Trash2,
+        Eye,
+        EyeOff,
+        PresetColorPreview,
+        Image,
+        PaintBucket,
+    },
     props: {
-        ownerId: { type: Number, required: false }
+        ownerId: { type: Number, required: false },
+        initialPresets: {
+            type: Array as () => MarketplacePresetView[],
+            required: false,
+        },
     },
-    setup(props) {
+    emits: ["show-user-profile"],
+    setup(props, { emit }) {
         const presets = ref<MarketplacePresetView[]>([]);
         const loading = ref(true);
-        const search = ref('');
+        const search = ref("");
         const { t } = useI18n();
         const { username } = useUser();
         const { addToast } = useToast();
 
         const { showModal, hideModal } = useModal();
 
+        const sortBy = ref("newest");
+
         async function load() {
             loading.value = true;
             try {
+                if (
+                    props.initialPresets &&
+                    !search.value.trim() &&
+                    sortBy.value === "newest" &&
+                    presets.value.length === 0
+                ) {
+                    presets.value = props.initialPresets.map((preset) => ({
+                        ...preset,
+                        liking: false,
+                    }));
+                    loading.value = false;
+                    return;
+                }
+
                 const params: any = {};
-                if (props.ownerId) params.owner = props.ownerId;
+                
+                if (props.ownerId !== undefined && props.ownerId !== null)
+                    params.owner = Number(props.ownerId);
+                
+                if (search.value.trim()) params.q = search.value.trim();
+                
+                params.sort = sortBy.value;
+
                 const data = await marketplaceService.listPresets(params);
-                presets.value = data.map((preset) => ({ ...preset, liking: false }));
+                presets.value = data.map((preset) => ({
+                    ...preset,
+                    liking: false,
+                }));
             } finally {
                 loading.value = false;
             }
         }
 
-        const filteredPresets = computed(() => {
-            const q = search.value.trim().toLowerCase();
-            if (!q) return presets.value;
-            return presets.value.filter((p) => {
-                const parts = [p.title ?? p.name, p.description, getOwnerName(p)]
-                    .filter(Boolean)
-                    .map((v) => String(v).toLowerCase());
-                return parts.some((text) => text.includes(q));
-            });
-        });
+        function debouncedLoad() {
+            if (debounceTimer) clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(() => {
+                load();
+            }, 300);
+        }
+
+        const filteredPresets = computed(() => presets.value);
 
         function getOwnerName(p: MarketplacePreset): string {
-            return p.author?.displayName ?? p.author?.username ?? p.owner_username ?? '';
+            return (
+                p.author?.displayName ??
+                p.author?.username ??
+                p.owner_username ??
+                ""
+            );
         }
 
         function apply(p: MarketplacePreset) {
             const theme = getThemeValues(p);
             presetService.applyPresetToTheme({
-                customCSS: theme.customCSS ?? '',
+                customCSS: theme.customCSS ?? "",
                 enableCustomCSS: theme.enableCustomCSS ?? false,
                 base100: theme.base100,
                 base200: theme.base200,
@@ -156,6 +412,9 @@ export default defineComponent({
                 warningContent: theme.warningContent,
                 error: theme.error,
                 errorContent: theme.errorContent,
+                backgroundImage: theme.backgroundImage,
+                backgroundBlur: theme.backgroundBlur,
+                backgroundOpacity: theme.backgroundOpacity,
             } as any);
         }
 
@@ -173,7 +432,7 @@ export default defineComponent({
                     p.liked = true;
                 }
             } catch (e) {
-                console.error('Failed to toggle like preset:', e);
+                console.error("Failed to toggle like preset:", e);
             } finally {
                 p.liking = false;
             }
@@ -181,24 +440,31 @@ export default defineComponent({
 
         async function download(p: MarketplacePreset) {
             try {
-                const name = p.title ?? p.name ?? 'Imported preset';
-                const input = buildPresetCreatePayload(name, p.description, getThemeValues(p));
+                const name = p.title ?? p.name ?? "Imported preset";
+                const input = buildPresetCreatePayload(
+                    name,
+                    p.description,
+                    getThemeValues(p)
+                );
                 await presetService.createPreset(input);
-                addToast(t('theme.presets.messages.import_success'), 'success');
+                addToast(
+                    t("theme.presets.messages.import_success", { name }),
+                    "success"
+                );
                 try {
                     await marketplaceService.downloadPreset(p.id);
                     p.downloads_count = (p.downloads_count || 0) + 1;
                 } catch (e) {
-                    console.error('Failed to record preset download:', e);
+                    console.error("Failed to record preset download:", e);
                 }
             } catch (e) {
-                console.error('Failed to import preset:', e);
-                addToast(t('theme.presets.messages.import_error'), 'error');
+                console.error("Failed to import preset:", e);
+                addToast(t("theme.presets.messages.import_error"), "error");
             }
         }
 
         function isOwner(p: MarketplacePreset): boolean {
-            const owner = p.author?.username ?? p.owner_username ?? '';
+            const owner = p.author?.username ?? p.owner_username ?? "";
             return !!username.value && owner === username.value;
         }
 
@@ -207,7 +473,7 @@ export default defineComponent({
             showModal(
                 id,
                 MarketplaceEditPresetModal,
-                { title: t('marketplace.edit_modal_title') },
+                { title: t("marketplace.edit_modal_title") },
                 { preset: p },
                 {
                     updated: async () => {
@@ -223,17 +489,35 @@ export default defineComponent({
             showModal(
                 id,
                 PresetDetailsModal,
-                { title: t('marketplace.preset_details_title'), contentClass: 'wide' },
-                { id: p.id, onNavigate: (dir: 'prev' | 'next') => navigateFrom(p.id, dir) },
-                {}
+                {
+                    title: t("marketplace.preset_details_title"),
+                    contentClass: "wide",
+                },
+                {
+                    id: p.id,
+                    onNavigate: (dir: "prev" | "next") =>
+                        navigateFrom(p.id, dir),
+                },
+                {
+                    "show-user-profile": (userId: number) => {
+                        hideModal(id);
+                        emit("show-user-profile", userId);
+                    },
+                }
             );
         }
 
-        function navigateFrom(currentId: number | string, dir: 'prev' | 'next') {
+        function navigateFrom(
+            currentId: number | string,
+            dir: "prev" | "next"
+        ) {
             const list = filteredPresets.value;
             const idx = list.findIndex((x) => x.id === currentId);
             if (idx === -1 || !list.length) return;
-            const nextIdx = dir === 'next' ? (idx + 1) % list.length : (idx - 1 + list.length) % list.length;
+            const nextIdx =
+                dir === "next"
+                    ? (idx + 1) % list.length
+                    : (idx - 1 + list.length) % list.length;
             const next = list[nextIdx];
             const oldId = `preset-details-${currentId}`;
             hideModal(oldId);
@@ -241,9 +525,21 @@ export default defineComponent({
             showModal(
                 newId,
                 PresetDetailsModal,
-                { title: t('marketplace.preset_details_title'), contentClass: 'wide' },
-                { id: next.id, onNavigate: (d: 'prev' | 'next') => navigateFrom(next.id, d) },
-                {}
+                {
+                    title: t("marketplace.preset_details_title"),
+                    contentClass: "wide",
+                },
+                {
+                    id: next.id,
+                    onNavigate: (d: "prev" | "next") =>
+                        navigateFrom(next.id, d),
+                },
+                {
+                    "show-user-profile": (userId: number) => {
+                        hideModal(newId);
+                        emit("show-user-profile", userId);
+                    },
+                }
             );
         }
 
@@ -251,11 +547,13 @@ export default defineComponent({
             const prev = p.is_public;
             p.is_public = !p.is_public;
             try {
-                await marketplaceService.updatePreset(p.id, { is_public: p.is_public });
+                await marketplaceService.updatePreset(p.id, {
+                    is_public: p.is_public,
+                });
             } catch (e) {
                 p.is_public = prev;
-                addToast(t('marketplace.updated_failed'), 'error');
-                console.error('Failed to update preset visibility:', e);
+                addToast(t("marketplace.updated_failed"), "error");
+                console.error("Failed to update preset visibility:", e);
             }
         }
 
@@ -264,7 +562,7 @@ export default defineComponent({
             showModal(
                 id,
                 MarketplaceDeleteConfirmModal,
-                { title: t('common.delete') },
+                { title: t("common.delete") },
                 { id: p.id },
                 {
                     deleted: async () => {
@@ -293,8 +591,12 @@ export default defineComponent({
             toggleVisibility,
             askDelete,
             t,
+            sortBy,
+            debouncedLoad,
             getOwnerName,
+            load,
+            getThemeValues,
         };
-    }
+    },
 });
 </script>
diff --git a/src/components/settings/AccountCard.vue b/src/components/settings/AccountCard.vue
index efe30904..08478390 100644
--- a/src/components/settings/AccountCard.vue
+++ b/src/components/settings/AccountCard.vue
@@ -12,54 +12,108 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: 'set-active', account: any): void;
-    (e: 'edit-account', account: any): void;
-    (e: 'delete-account', account: any): void;
+    (e: "set-active", account: any): void;
+    (e: "edit-account", account: any): void;
+    (e: "delete-account", account: any): void;
 }>();
 
-const handleSetActive = () => emit('set-active', props.account);
-const handleEdit = () => emit('edit-account', props.account);
-const handleDelete = () => emit('delete-account', props.account);
+const handleSetActive = () => emit("set-active", props.account);
+const handleEdit = () => emit("edit-account", props.account);
+const handleDelete = () => emit("delete-account", props.account);
 </script>
 
 <template>
-    <div class="card bg-base-200 shadow-sm border border-base-300 account-card hover:border-primary/20 transition-colors">
+    <div
+        class="card bg-base-200 shadow-sm border border-base-300 account-card hover:border-primary/20 transition-colors"
+    >
         <div class="card-body p-4">
-            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+            <div
+                class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4"
+            >
                 <div class="flex-1 min-w-0 space-y-1.5">
                     <div class="flex items-center gap-3">
-                        <h3 class="font-semibold text-base text-base-content truncate">{{ account.username }}</h3>
-                        <div v-if="account.is_active" class="badge badge-success badge-sm gap-1">
-                            <div class="w-1.5 h-1.5 rounded-full bg-current"></div>
+                        <h3
+                            class="font-semibold text-base text-base-content truncate"
+                        >
+                            {{ account.username }}
+                        </h3>
+                        <div
+                            v-if="account.is_active"
+                            class="badge badge-success badge-sm gap-1"
+                        >
+                            <div
+                                class="w-1.5 h-1.5 rounded-full bg-current"
+                            ></div>
                             Active
                         </div>
                     </div>
-                    
-                    <div class="flex flex-wrap gap-2 items-center text-xs text-base-content/60">
-                        <span class="flex items-center gap-1.5 bg-base-300/50 px-2 py-1 rounded-md" v-if="account.tags.length">
-                            <span v-for="tag in account.tags" :key="tag" class="font-medium text-primary">{{ tag }}</span>
+
+                    <div
+                        class="flex flex-wrap gap-2 items-center text-xs text-base-content/60"
+                    >
+                        <span
+                            class="flex items-center gap-1.5 bg-base-300/50 px-2 py-1 rounded-md"
+                            v-if="account.tags.length"
+                        >
+                            <span
+                                v-for="tag in account.tags"
+                                :key="tag"
+                                class="font-medium text-primary"
+                                >{{ tag }}</span
+                            >
                         </span>
-                        <span v-if="account.tags.length" class="w-1 h-1 rounded-full bg-base-content/20"></span>
-                        <span>Created {{ formatDate ? formatDate(account.created_at) : account.created_at }}</span>
+                        <span
+                            v-if="account.tags.length"
+                            class="w-1 h-1 rounded-full bg-base-content/20"
+                        ></span>
+                        <span
+                            >Created
+                            {{
+                                formatDate
+                                    ? formatDate(account.created_at)
+                                    : account.created_at
+                            }}</span
+                        >
                         <template v-if="account.last_used">
-                            <span class="w-1 h-1 rounded-full bg-base-content/20"></span>
-                            <span>Used {{ formatDate ? formatDate(account.last_used) : account.last_used }}</span>
+                            <span
+                                class="w-1 h-1 rounded-full bg-base-content/20"
+                            ></span>
+                            <span
+                                >Used
+                                {{
+                                    formatDate
+                                        ? formatDate(account.last_used)
+                                        : account.last_used
+                                }}</span
+                            >
                         </template>
                     </div>
                 </div>
 
-                <div class="flex items-center gap-2 w-full sm:w-auto justify-end">
-                    <button @click="handleSetActive" class="btn btn-sm btn-square" :class="account.is_active
-                        ? 'btn-success text-success-content'
-                        : 'btn-ghost hover:bg-success/10 hover:text-success'">
+                <div
+                    class="flex items-center gap-2 w-full sm:w-auto justify-end"
+                >
+                    <button
+                        @click="handleSetActive"
+                        class="btn btn-sm btn-square"
+                        :class="
+                            account.is_active
+                                ? 'btn-success text-success-content'
+                                : 'btn-ghost hover:bg-success/10 hover:text-success'
+                        "
+                    >
                         <slot name="user-icon" />
                     </button>
-                    <button @click="handleEdit"
-                        class="btn btn-sm btn-square btn-ghost hover:bg-warning/10 hover:text-warning">
+                    <button
+                        @click="handleEdit"
+                        class="btn btn-sm btn-square btn-ghost hover:bg-warning/10 hover:text-warning"
+                    >
                         <slot name="edit-icon" />
                     </button>
-                    <button @click="handleDelete"
-                        class="btn btn-sm btn-square btn-ghost hover:bg-error/10 hover:text-error">
+                    <button
+                        @click="handleDelete"
+                        class="btn btn-sm btn-square btn-ghost hover:bg-error/10 hover:text-error"
+                    >
                         <slot name="delete-icon" />
                     </button>
                 </div>
@@ -75,12 +129,10 @@ const handleDelete = () => emit('delete-account', props.account);
     animation: fadeInUp 0.4s ease-out forwards;
 }
 
-
-
 .account-list-enter-active,
 .account-list-leave-active {
     transition:
         opacity 0.3s ease,
         transform 0.3s ease;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/settings/SettingCard.vue b/src/components/settings/SettingCard.vue
index 9ab1f10f..b50d44fd 100644
--- a/src/components/settings/SettingCard.vue
+++ b/src/components/settings/SettingCard.vue
@@ -5,27 +5,44 @@ const props = defineProps<{
     description?: string;
     delay?: number;
     field?: any;
-    layout?: 'row' | 'col';
+    layout?: "row" | "col";
 }>();
 </script>
 
 <template>
-    <div class="card bg-base-200 shadow-sm border border-base-300 settings-card hover:border-primary/20 transition-colors"
-        :style="{ 'animation-delay': `${props.delay || 0}s` }">
-        <div class="card-body p-4"
-            :class="[layout === 'col' ? 'flex-col items-start gap-4' : 'flex-row items-center justify-between gap-4']">
+    <div
+        class="card bg-base-200 shadow-sm border border-base-300 settings-card hover:border-primary/20 transition-colors"
+        :style="{ 'animation-delay': `${props.delay || 0}s` }"
+    >
+        <div
+            class="card-body p-3 h-full"
+            :class="[
+                layout === 'col'
+                    ? 'flex-col items-start gap-3 justify-between'
+                    : 'flex-row items-center justify-between gap-3',
+            ]"
+        >
             <div class="flex-1 min-w-0">
-                <h2 class="card-title text-sm font-semibold text-base-content flex items-center gap-2">
+                <h2
+                    class="card-title text-sm font-semibold text-base-content flex items-center gap-2"
+                >
                     <slot name="title">
-                        <div v-if="props.icon" class="p-1.5 rounded-md bg-base-300 text-primary">
+                        <div
+                            v-if="props.icon"
+                            class="p-1.5 rounded-md bg-base-300 text-primary"
+                        >
                             <component :is="props.icon" class="w-4 h-4" />
                         </div>
                         {{ props.title }}
                         <slot name="info" />
                     </slot>
                 </h2>
-                <p v-if="description" class="text-xs text-base-content/60 mt-1 font-medium leading-relaxed">{{
-                    description }}</p>
+                <p
+                    v-if="description"
+                    class="text-xs text-base-content/60 mt-1 font-medium leading-relaxed"
+                >
+                    {{ description }}
+                </p>
             </div>
 
             <div :class="[layout === 'col' ? 'w-full' : 'shrink-0']">
@@ -40,5 +57,14 @@ const props = defineProps<{
     opacity: 0;
     transform: translateY(10px);
     animation: fadeInUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+    height: 100%;
+    width: 100%;
+    display: flex;
 }
-</style>
\ No newline at end of file
+
+.settings-card .card-body {
+    flex: 1;
+    display: flex;
+    width: 100%;
+}
+</style>
diff --git a/src/components/ui/AnimatedSlider.vue b/src/components/ui/AnimatedSlider.vue
index c0e191fe..e30b5ad1 100644
--- a/src/components/ui/AnimatedSlider.vue
+++ b/src/components/ui/AnimatedSlider.vue
@@ -1,25 +1,37 @@
 <template>
-    <div class="relative w-full cursor-pointer select-none" @mousedown="startDrag" @mousemove="drag" @mouseup="stopDrag"
-        @mouseleave="stopDrag" ref="slider">
-        <div class="absolute top-1/2 left-0 w-full h-2 bg-base-300 rounded-full -translate-y-1/2" />
+    <div
+        class="relative w-full cursor-pointer select-none"
+        @mousedown="startDrag"
+        @mousemove="drag"
+        @mouseup="stopDrag"
+        @mouseleave="stopDrag"
+        ref="slider"
+    >
+        <div
+            class="absolute top-1/2 left-0 w-full h-2 bg-base-300 rounded-full -translate-y-1/2"
+        />
 
-        <div class="absolute top-1/2 left-0 h-2 bg-primary rounded-full -translate-y-1/2 transition-all duration-200"
-            :style="{ width: animatedValue + '%' }" />
+        <div
+            class="absolute top-1/2 left-0 h-2 bg-primary rounded-full -translate-y-1/2 transition-all duration-200"
+            :style="{ width: animatedValue + '%' }"
+        />
 
-        <div class="absolute top-1/2 bg-base-100 border-2 border-primary rounded-full w-4 h-4 -translate-y-1/2 -translate-x-1/2 shadow-md hover:shadow-lg transition-all duration-200"
-            :style="{ left: animatedValue + '%' }" />
+        <div
+            class="absolute top-1/2 bg-base-100 border-2 border-primary rounded-full w-4 h-4 -translate-y-1/2 -translate-x-1/2 shadow-md hover:shadow-lg transition-all duration-200"
+            :style="{ left: animatedValue + '%' }"
+        />
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onUnmounted } from 'vue';
+import { ref, computed, watch, onUnmounted } from "vue";
 
 const props = defineProps<{
     modelValue: number;
     min: number;
     max: number;
 }>();
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(["update:modelValue"]);
 
 const slider = ref<HTMLElement | null>(null);
 const isDragging = ref(false);
@@ -37,8 +49,8 @@ const animatedValue = computed(() => {
 const startDrag = (e: MouseEvent) => {
     isDragging.value = true;
     updateValue(e.clientX);
-    window.addEventListener('mouseup', stopDrag);
-    window.addEventListener('mousemove', drag);
+    window.addEventListener("mouseup", stopDrag);
+    window.addEventListener("mousemove", drag);
 };
 
 const drag = (e: MouseEvent) => {
@@ -49,13 +61,13 @@ const drag = (e: MouseEvent) => {
 
 const stopDrag = () => {
     isDragging.value = false;
-    window.removeEventListener('mouseup', stopDrag);
-    window.removeEventListener('mousemove', drag);
+    window.removeEventListener("mouseup", stopDrag);
+    window.removeEventListener("mousemove", drag);
 };
 
 onUnmounted(() => {
-    window.removeEventListener('mouseup', stopDrag);
-    window.removeEventListener('mousemove', drag);
+    window.removeEventListener("mouseup", stopDrag);
+    window.removeEventListener("mousemove", drag);
 });
 
 const updateValue = (clientX: number) => {
@@ -67,6 +79,6 @@ const updateValue = (clientX: number) => {
     );
     const newValue = Math.round(props.min + percent * (props.max - props.min));
     value.value = newValue;
-    emit('update:modelValue', newValue);
+    emit("update:modelValue", newValue);
 };
 </script>
diff --git a/src/components/ui/HoldButton.vue b/src/components/ui/HoldButton.vue
index a93cfed2..13409c0a 100644
--- a/src/components/ui/HoldButton.vue
+++ b/src/components/ui/HoldButton.vue
@@ -1,22 +1,34 @@
 <!-- BUTTON FROM DAISYUI THEME GENERATOR -->
 <!-- https://github.com/saadeghi/daisyui/blob/b4196cce349e1b09e1eeca01a180ed5bcabe2d01/packages/docs/src/routes/(routes)/theme-generator/%2Bpage.svelte#L545 -->
 <template>
-    <button ref="btnElement" class="btn btn-neutral btn-lg group" @mousedown="handleMouseDown"
-        @mouseup="handleMouseUpOrLeave" @mouseleave="handleMouseUpOrLeave" @blur="handleMouseUpOrLeave"
-        @touchstart.prevent="handleMouseDown" @touchend="handleMouseUpOrLeave" @keydown="handleKeyDown"
-        @keyup="handleKeyUp" @click="onClick">
-        <Gamepad2 ref="svgElement" class="w-7 h-7  transition-transform duration-300 ease-in-out" />
-        <span class="font-normal text-lg">{{ $t('hold_button.label') }}</span>
+    <button
+        ref="btnElement"
+        class="btn btn-neutral btn-lg group"
+        @mousedown="handleMouseDown"
+        @mouseup="handleMouseUpOrLeave"
+        @mouseleave="handleMouseUpOrLeave"
+        @blur="handleMouseUpOrLeave"
+        @touchstart.prevent="handleMouseDown"
+        @touchend="handleMouseUpOrLeave"
+        @keydown="handleKeyDown"
+        @keyup="handleKeyUp"
+        @click="onClick"
+    >
+        <Gamepad2
+            ref="svgElement"
+            class="w-7 h-7 transition-transform duration-300 ease-in-out"
+        />
+        <span class="font-normal text-lg">{{ $t("hold_button.label") }}</span>
     </button>
 </template>
 
 <script setup>
-import { ref, onUnmounted } from 'vue';
-import { Gamepad2 } from 'lucide-vue-next';
-import { useToast } from '../../services/toastService';
-import { useI18n } from 'vue-i18n';
+import { ref, onUnmounted } from "vue";
+import { Gamepad2 } from "lucide-vue-next";
+import { useToast } from "../../services/toastService";
+import { useI18n } from "vue-i18n";
 
-const emit = defineEmits(['start']);
+const emit = defineEmits(["start"]);
 const { addToast } = useToast();
 const { t } = useI18n();
 
@@ -30,16 +42,12 @@ let holdTriggered = false;
 
 const onClick = () => {
     if (!holdTriggered) {
-        addToast(
-            t('hold_button.info_message'),
-            'info',
-            3000
-        );
+        addToast(t("hold_button.info_message"), "info", 3000);
         try {
-            localStorage.setItem('holdButton_shown_info', '1');
-        } catch { }
+            localStorage.setItem("holdButton_shown_info", "1");
+        } catch {}
     }
-}
+};
 
 const handleMouseDown = () => {
     if (holdTimeout || holdInterval) return;
@@ -48,10 +56,11 @@ const handleMouseDown = () => {
     holdTriggered = false;
 
     if (btnElement.value && svgElement.value) {
-        svgElement.value.style.transition = 'rotate 3s linear';
-        btnElement.value.style.transition = 'box-shadow 3s ease-out';
+        svgElement.value.style.transition = "rotate 3s linear";
+        btnElement.value.style.transition = "box-shadow 3s ease-out";
 
-        btnElement.value.style.boxShadow = '0 0 0 -0.1rem color-mix(in oklab, var(--color-base-content) 30%, transparent) inset';
+        btnElement.value.style.boxShadow =
+            "0 0 0 -0.1rem color-mix(in oklab, var(--color-base-content) 30%, transparent) inset";
 
         holdInterval = setInterval(() => {
             const elapsedTime = Date.now() - startTime;
@@ -59,7 +68,7 @@ const handleMouseDown = () => {
             const boxShadowOffset = -2 * (elapsedTime / 600) - 3.5;
 
             if (rotation >= 90) {
-                svgElement.value.style.rotate = '90deg';
+                svgElement.value.style.rotate = "90deg";
                 clearInterval(holdInterval);
                 holdInterval = null;
             } else {
@@ -71,7 +80,7 @@ const handleMouseDown = () => {
 
     holdTimeout = setTimeout(() => {
         holdTriggered = true;
-        emit('start');
+        emit("start");
 
         handleMouseUpOrLeave();
     }, 3000);
@@ -84,24 +93,28 @@ const handleMouseUpOrLeave = () => {
     holdInterval = null;
 
     if (svgElement.value) {
-        svgElement.value.style.removeProperty('transition');
-        svgElement.value.style.removeProperty('rotate');
+        svgElement.value.style.removeProperty("transition");
+        svgElement.value.style.removeProperty("rotate");
     }
     if (btnElement.value) {
-        btnElement.value.style.removeProperty('transition');
-        btnElement.value.style.removeProperty('box-shadow');
+        btnElement.value.style.removeProperty("transition");
+        btnElement.value.style.removeProperty("box-shadow");
     }
 };
 
 const handleKeyDown = (event) => {
-    if ((event.key === 'Enter' || event.key === ' ') && !holdTimeout && !holdInterval) {
+    if (
+        (event.key === "Enter" || event.key === " ") &&
+        !holdTimeout &&
+        !holdInterval
+    ) {
         event.preventDefault();
         handleMouseDown();
     }
 };
 
 const handleKeyUp = (event) => {
-    if (event.key === 'Enter' || event.key === ' ') {
+    if (event.key === "Enter" || event.key === " ") {
         handleMouseUpOrLeave();
     }
 };
@@ -118,4 +131,4 @@ onUnmounted(() => {
         radial-gradient(ellipse at 20% 150%, #00ff8847, transparent 60%),
         radial-gradient(ellipse at 70% 200%, #22ff0047, transparent 60%);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/ui/UserAvatar.vue b/src/components/ui/UserAvatar.vue
index 012e155e..cf5dc724 100644
--- a/src/components/ui/UserAvatar.vue
+++ b/src/components/ui/UserAvatar.vue
@@ -1,36 +1,64 @@
 <template>
-    <div class="avatar placeholder avatar-clickable"
-        :class="{ relative: showStatus, clickable: isClickable || !!resolvedSrc }" @click="handleClick">
-        <div class="bg-base-100 text-primary-content rounded-full flex content-center overflow-hidden justify-center"
-            :class="[sizeClasses, backgroundClass, { 'avatar-inner': !resolvedSrc }]">
-            <img v-if="resolvedSrc && !imageError" :src="resolvedSrc" alt="avatar" class="w-full h-full object-cover"
-                @error="onImageError" />
+    <div
+        class="avatar placeholder avatar-clickable"
+        :class="{
+            relative: showStatus,
+            clickable: isClickable || !!resolvedSrc,
+        }"
+        @click="handleClick"
+    >
+        <div
+            class="bg-base-100 text-primary-content rounded-full flex content-center overflow-hidden justify-center"
+            :class="[
+                sizeClasses,
+                backgroundClass,
+                { 'avatar-inner': !resolvedSrc },
+            ]"
+        >
+            <img
+                v-if="resolvedSrc && !imageError"
+                :src="resolvedSrc"
+                alt="avatar"
+                class="w-full h-full object-cover"
+                @error="onImageError"
+            />
             <template v-else-if="resolvedSrc && imageError">
-                <div class="w-full h-full flex items-center justify-center bg-transparent">
-                    <ImageOff class="text-base-content" width="48" height="48" />
+                <div
+                    class="w-full h-full flex items-center justify-center bg-transparent"
+                >
+                    <ImageOff
+                        class="text-base-content"
+                        width="48"
+                        height="48"
+                    />
                 </div>
             </template>
-            <span class="font-bold text-primary flex justify-center items-center avatar-text" :class="textSizeClass"
-                v-else>
+            <span
+                class="font-bold text-primary flex justify-center items-center avatar-text"
+                :class="textSizeClass"
+                v-else
+            >
                 {{ getInitials(displayName) }}
             </span>
         </div>
 
-        <div v-if="showStatus && !globalUserStatus.isStreamer.value"
+        <div
+            v-if="showStatus && !globalUserStatus.isStreamer.value"
             class="absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-base-200 bg-base-200"
-            :class="[statusClass, { 'status-indicator': isOnline }]"></div>
+            :class="[statusClass, { 'status-indicator': isOnline }]"
+        ></div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import { ImageOff } from 'lucide-vue-next';
-import { globalUserStatus } from '../../composables/useUserStatus';
-import { resolveApiAssetUrl } from '../../utils/url';
+import { computed, ref, watch } from "vue";
+import { ImageOff } from "lucide-vue-next";
+import { globalUserStatus } from "../../composables/useUserStatus";
+import { resolveApiAssetUrl } from "../../utils/url";
 
 interface Props {
     name: string;
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+    size?: "sm" | "md" | "lg" | "xl";
     showStatus?: boolean;
     isOnline?: boolean;
     backgroundClass?: string;
@@ -40,10 +68,10 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    size: 'md',
+    size: "md",
     showStatus: false,
     isOnline: false,
-    backgroundClass: 'bg-base-100',
+    backgroundClass: "bg-base-100",
     isClickable: false,
     src: null,
     originalSrc: null,
@@ -51,45 +79,47 @@ const props = withDefaults(defineProps<Props>(), {
 
 const sizeClasses = computed(() => {
     switch (props.size) {
-        case 'sm':
-            return 'w-8 h-8';
-        case 'md':
-            return 'w-10 h-10';
-        case 'lg':
-            return 'w-16 h-16';
-        case 'xl':
-            return 'w-20 h-20';
+        case "sm":
+            return "w-8 h-8";
+        case "md":
+            return "w-10 h-10";
+        case "lg":
+            return "w-16 h-16";
+        case "xl":
+            return "w-20 h-20";
         default:
-            return 'w-10 h-10';
+            return "w-10 h-10";
     }
 });
 
 const textSizeClass = computed(() => {
     switch (props.size) {
-        case 'sm':
-            return 'text-lg';
-        case 'md':
-            return 'text-xl';
-        case 'lg':
-            return 'text-2xl';
-        case 'xl':
-            return 'text-3xl';
+        case "sm":
+            return "text-lg";
+        case "md":
+            return "text-xl";
+        case "lg":
+            return "text-2xl";
+        case "xl":
+            return "text-3xl";
         default:
-            return 'text-xl';
+            return "text-xl";
     }
 });
 
 const statusClass = computed(() => {
-    return props.isOnline ? 'bg-success' : 'bg-base-300';
+    return props.isOnline ? "bg-success" : "bg-base-300";
 });
 
 const displayName = computed(() => {
-    return globalUserStatus.isStreamer.value ? 'Streamer' : props.name;
+    return globalUserStatus.isStreamer.value ? "Streamer" : props.name;
 });
 
 const resolvedSrc = computed<string | undefined>(() => {
     if (globalUserStatus.isStreamer.value) return undefined;
-    return resolveApiAssetUrl(props.src || props.originalSrc || null) ?? undefined;
+    return (
+        resolveApiAssetUrl(props.src || props.originalSrc || null) ?? undefined
+    );
 });
 
 const imageError = ref(false);
@@ -115,15 +145,15 @@ watch(
 );
 
 const getInitials = (name: string): string => {
-    if (!name) return '?';
+    if (!name) return "?";
     return name.charAt(0).toUpperCase();
 };
 
-const emit = defineEmits(['click']);
+const emit = defineEmits(["click"]);
 
 const handleClick = () => {
     if (props.isClickable) {
-        emit('click', resolvedSrc.value || null);
+        emit("click", resolvedSrc.value || null);
     }
 };
 </script>
@@ -158,16 +188,18 @@ const handleClick = () => {
 }
 
 .avatar-inner::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(45deg,
-            transparent 30%,
-            rgba(255, 255, 255, 0.1) 50%,
-            transparent 70%);
+    background: linear-gradient(
+        45deg,
+        transparent 30%,
+        rgba(255, 255, 255, 0.1) 50%,
+        transparent 70%
+    );
     transform: translateX(-100%);
     transition: transform 0.6s ease;
 }
diff --git a/src/components/ui/icons/DiscordIcon.vue b/src/components/ui/icons/DiscordIcon.vue
index 41ed126c..faf20e27 100644
--- a/src/components/ui/icons/DiscordIcon.vue
+++ b/src/components/ui/icons/DiscordIcon.vue
@@ -1,25 +1,26 @@
 <template>
     <IconBase v-bind="$props" viewBox="0 -28.5 256 256">
         <path
-            d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" />
+            d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
+        />
     </IconBase>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import IconBase from './IconBase.vue'
+import { defineComponent } from "vue";
+import IconBase from "./IconBase.vue";
 
 export default defineComponent({
-    name: 'DiscordIcon',
+    name: "DiscordIcon",
     components: { IconBase },
     inheritAttrs: false,
     props: {
         size: { type: [Number, String], default: 24 },
         width: { type: [Number, String], default: null },
         height: { type: [Number, String], default: null },
-        fill: { type: String, default: 'themed' },
-        ariaLabel: { type: String, default: 'Discord' },
+        fill: { type: String, default: "themed" },
+        ariaLabel: { type: String, default: "Discord" },
         svgClass: { type: [String, Object, Array], default: null },
     },
-})
+});
 </script>
diff --git a/src/components/ui/icons/GithubIcon.vue b/src/components/ui/icons/GithubIcon.vue
index e128cd06..3ac63513 100644
--- a/src/components/ui/icons/GithubIcon.vue
+++ b/src/components/ui/icons/GithubIcon.vue
@@ -1,25 +1,26 @@
 <template>
     <IconBase v-bind="$props" viewBox="0 0 98 96">
         <path
-            d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" />
+            d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+        />
     </IconBase>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import IconBase from './IconBase.vue'
+import { defineComponent } from "vue";
+import IconBase from "./IconBase.vue";
 
 export default defineComponent({
-    name: 'GithubIcon',
+    name: "GithubIcon",
     components: { IconBase },
     inheritAttrs: false,
     props: {
         size: { type: [Number, String], default: 24 },
         width: { type: [Number, String], default: null },
         height: { type: [Number, String], default: null },
-        fill: { type: String, default: 'themed' },
-        ariaLabel: { type: String, default: 'Github' },
+        fill: { type: String, default: "themed" },
+        ariaLabel: { type: String, default: "Github" },
         svgClass: { type: [String, Object, Array], default: null },
     },
-})
+});
 </script>
diff --git a/src/components/ui/icons/IconBase.vue b/src/components/ui/icons/IconBase.vue
index 0a41104e..094095c6 100644
--- a/src/components/ui/icons/IconBase.vue
+++ b/src/components/ui/icons/IconBase.vue
@@ -1,52 +1,67 @@
 <template>
-  <svg :width="computedWidth" :height="computedHeight" :viewBox="viewBox" :fill="computedFill" :class="svgClass"
-    xmlns="http://www.w3.org/2000/svg" :role="role" :aria-label="ariaLabel">
-    <slot />
-  </svg>
+    <svg
+        :width="computedWidth"
+        :height="computedHeight"
+        :viewBox="viewBox"
+        :fill="computedFill"
+        :class="svgClass"
+        xmlns="http://www.w3.org/2000/svg"
+        :role="role"
+        :aria-label="ariaLabel"
+    >
+        <slot />
+    </svg>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, onMounted, onUnmounted } from 'vue'
+import { defineComponent, computed, ref, onMounted, onUnmounted } from "vue";
 
 export default defineComponent({
-  name: 'IconBase',
-  props: {
-    size: { type: [Number, String], default: 24 },
-    width: { type: [Number, String], default: null },
-    height: { type: [Number, String], default: null },
-    viewBox: { type: String, default: '0 0 24 24' },
-    fill: { type: String, default: 'currentColor' },
-    ariaLabel: { type: String, default: null },
-    role: { type: String, default: 'img' },
-    svgClass: { type: [String, Object, Array], default: null },
-  },
-  setup(props) {
-    const computedWidth = computed(() => props.width ?? props.size)
-    const computedHeight = computed(() => props.height ?? props.size)
+    name: "IconBase",
+    props: {
+        size: { type: [Number, String], default: 24 },
+        width: { type: [Number, String], default: null },
+        height: { type: [Number, String], default: null },
+        viewBox: { type: String, default: "0 0 24 24" },
+        fill: { type: String, default: "currentColor" },
+        ariaLabel: { type: String, default: null },
+        role: { type: String, default: "img" },
+        svgClass: { type: [String, Object, Array], default: null },
+    },
+    setup(props) {
+        const computedWidth = computed(() => props.width ?? props.size);
+        const computedHeight = computed(() => props.height ?? props.size);
 
-    const theme = ref(document.documentElement.getAttribute('data-theme') || 'dark')
+        const theme = ref(
+            document.documentElement.getAttribute("data-theme") || "dark"
+        );
 
-    let observer: MutationObserver | null = null
-    onMounted(() => {
-      observer = new MutationObserver(() => {
-        const t = document.documentElement.getAttribute('data-theme') || 'dark'
-        if (theme.value !== t) theme.value = t
-      })
-      observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })
-    })
+        let observer: MutationObserver | null = null;
+        onMounted(() => {
+            observer = new MutationObserver(() => {
+                const t =
+                    document.documentElement.getAttribute("data-theme") ||
+                    "dark";
+                if (theme.value !== t) theme.value = t;
+            });
+            observer.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ["data-theme"],
+            });
+        });
 
-    onUnmounted(() => {
-      if (observer) observer.disconnect()
-    })
+        onUnmounted(() => {
+            if (observer) observer.disconnect();
+        });
 
-    const computedFill = computed(() => {
-      if (props.fill === 'themed') {
-        return theme.value === 'light' ? '#000000' : '#ffffff'
-      }
-      return props.fill
-    })
+        const computedFill = computed(() => {
+            if (props.fill === "themed") {
+                return theme.value === "light" ? "#000000" : "#ffffff";
+            }
+            return props.fill;
+        });
 
-    return { computedWidth, computedHeight, computedFill }
-  },
-})
+        return { computedWidth, computedHeight, computedFill };
+    },
+});
 </script>
diff --git a/src/components/ui/icons/TelegramIcon.vue b/src/components/ui/icons/TelegramIcon.vue
index e619298b..977aca32 100644
--- a/src/components/ui/icons/TelegramIcon.vue
+++ b/src/components/ui/icons/TelegramIcon.vue
@@ -1,25 +1,26 @@
 <template>
     <IconBase v-bind="$props" viewBox="0 0 48 48">
         <path
-            d="M40.83,8.48c1.14,0,2,1,1.54,2.86l-5.58,26.3c-.39,1.87-1.52,2.32-3.08,1.45L20.4,29.26a.4.4,0,0,1,0-.65L35.77,14.73c.7-.62-.15-.92-1.07-.36L15.41,26.54a.46.46,0,0,1-.4.05L6.82,24C5,23.47,5,22.22,7.23,21.33L40,8.69a2.16,2.16,0,0,1,.83-.21Z" />
+            d="M40.83,8.48c1.14,0,2,1,1.54,2.86l-5.58,26.3c-.39,1.87-1.52,2.32-3.08,1.45L20.4,29.26a.4.4,0,0,1,0-.65L35.77,14.73c.7-.62-.15-.92-1.07-.36L15.41,26.54a.46.46,0,0,1-.4.05L6.82,24C5,23.47,5,22.22,7.23,21.33L40,8.69a2.16,2.16,0,0,1,.83-.21Z"
+        />
     </IconBase>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import IconBase from './IconBase.vue'
+import { defineComponent } from "vue";
+import IconBase from "./IconBase.vue";
 
 export default defineComponent({
-    name: 'TelegramIcon',
+    name: "TelegramIcon",
     components: { IconBase },
     inheritAttrs: false,
     props: {
         size: { type: [Number, String], default: 24 },
         width: { type: [Number, String], default: null },
         height: { type: [Number, String], default: null },
-        fill: { type: String, default: 'themed' },
-        ariaLabel: { type: String, default: 'Telegram' },
+        fill: { type: String, default: "themed" },
+        ariaLabel: { type: String, default: "Telegram" },
         svgClass: { type: [String, Object, Array], default: null },
     },
-})
+});
 </script>
diff --git a/src/components/ui/icons/YoutubeIcon.vue b/src/components/ui/icons/YoutubeIcon.vue
index f0a8bd27..72248bae 100644
--- a/src/components/ui/icons/YoutubeIcon.vue
+++ b/src/components/ui/icons/YoutubeIcon.vue
@@ -2,28 +2,32 @@
     <IconBase v-bind="$props" viewBox="0 0 28.57 20">
         <g>
             <path
-                d="M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 2.24288e-07 14.285 0 14.285 0C14.285 0 5.35042 2.24288e-07 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C2.24288e-07 5.35042 0 10 0 10C0 10 2.24288e-07 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z">
+                d="M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 2.24288e-07 14.285 0 14.285 0C14.285 0 5.35042 2.24288e-07 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C2.24288e-07 5.35042 0 10 0 10C0 10 2.24288e-07 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z"
+            >
             </path>
-            <path d="M11.4253 14.2854L18.8477 10.0004L11.4253 5.71533V14.2854Z" fill="#000"></path>
+            <path
+                d="M11.4253 14.2854L18.8477 10.0004L11.4253 5.71533V14.2854Z"
+                fill="#000"
+            ></path>
         </g>
     </IconBase>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import IconBase from './IconBase.vue'
+import { defineComponent } from "vue";
+import IconBase from "./IconBase.vue";
 
 export default defineComponent({
-    name: 'YoutubeIcon',
+    name: "YoutubeIcon",
     components: { IconBase },
     inheritAttrs: false,
     props: {
         size: { type: [Number, String], default: 24 },
         width: { type: [Number, String], default: null },
         height: { type: [Number, String], default: null },
-        fill: { type: String, default: 'themed' },
-        ariaLabel: { type: String, default: 'Youtube' },
+        fill: { type: String, default: "themed" },
+        ariaLabel: { type: String, default: "Youtube" },
         svgClass: { type: [String, Object, Array], default: null },
     },
-})
+});
 </script>
diff --git a/src/composables/useAppInit.ts b/src/composables/useAppInit.ts
index 3f906558..f73ad4ea 100644
--- a/src/composables/useAppInit.ts
+++ b/src/composables/useAppInit.ts
@@ -1,20 +1,22 @@
-import {ref} from 'vue';
-import {useI18n} from 'vue-i18n';
-import {invoke} from '@tauri-apps/api/core';
-import {listen} from '@tauri-apps/api/event';
-import {bootLogService} from '../services/bootLogService';
-import {applyLanguageOnStartup, applyThemeOnStartup} from '../utils/settings';
-import {applyCursorForEvent, isHalloweenEvent} from '../utils/events';
-import {useToast} from '../services/toastService';
-import {globalUserStatus} from './useUserStatus';
-import {useUser} from './useUser';
-import {globalFriends} from './useFriends';
-import {updaterService} from '../services/updaterService';
-import {syncService} from '../services/syncService';
-import {getCurrentLanguage} from '../i18n';
-import {useModal} from '../services/modalService';
-import ClientCrashModal from '../components/modals/clients/ClientCrashModal.vue';
-import {apiGet} from '../services/apiClient';
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import { bootLogService } from "../services/bootLogService";
+import { applyLanguageOnStartup, applyThemeOnStartup } from "../utils/settings";
+import { applyCursorForEvent, isHalloweenEvent } from "../utils/events";
+import { useToast } from "../services/toastService";
+import { globalUserStatus } from "./useUserStatus";
+import { useUser } from "./useUser";
+import { userService } from "../services/userService";
+import { globalFriends } from "./useFriends";
+import { updaterService } from "../services/updaterService";
+import { syncService } from "../services/syncService";
+import { getCurrentLanguage } from "../i18n";
+import { useModal } from "../services/modalService";
+import ClientCrashModal from "../components/modals/clients/ClientCrashModal.vue";
+import { apiGet } from "../services/apiClient";
+import { webSocketService } from "../services/webSocketService";
 
 interface Flags {
     disclaimer_shown: { value: boolean };
@@ -22,271 +24,245 @@ interface Flags {
     optional_analytics: { value: boolean };
 }
 
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
 export function useAppInit() {
     const { t, locale } = useI18n();
     const { addToast } = useToast();
     const { showModal } = useModal();
-    const { loadUserData } = useUser();
-    const { loadFriendsData } = globalFriends;
+    const { loadUserData, hydrateUser } = useUser();
+    const { loadFriendsData, hydrateFriends } = globalFriends;
     const { initializeStatusSystem } = globalUserStatus;
 
     const showPreloader = ref(true);
     const contentVisible = ref(false);
-    const loadingState = ref(t('preloader.initializing'));
+
     const loadingStates = [
-        t('preloader.initializing'),
-        t('preloader.connecting_servers'),
+        t("preloader.initializing"),
+        t("preloader.connecting_servers"),
+        t("preloader.loading_user_data"),
     ];
+
+    const loadingState = ref(loadingStates[0]);
+
     const currentProgress = ref(0);
-    const totalSteps = ref(4);
     const isOnline = ref(true);
     const initialModalsLoaded = ref(false);
     const showFirstRunInfo = ref(false);
     const showInitialDisclaimer = ref(false);
     const halloweenActive = ref(isHalloweenEvent());
-    const currentTheme = ref('dark');
+    const currentTheme = ref("dark");
     const apiInitialized = ref(false);
 
     const initializeUserDataWrapper = async (isAuthenticated: boolean) => {
         if (!isAuthenticated || !isOnline.value) return;
-
         try {
-            await loadUserData();
+            const initData = await userService.initializeUserFull();
+            const userInfo = {
+                id: initData.user.id,
+                username: initData.user.username,
+                email: initData.user.email,
+                role: initData.user.role,
+                created_at: initData.user.created_at,
+                updated_at: initData.user.updated_at,
+                last_login_at: initData.user.last_login_at ?? null,
+            };
+            hydrateUser(initData.user.profile, userInfo);
+            hydrateFriends(initData.friends);
             initializeStatusSystem();
-            await loadFriendsData();
+            await syncService.restoreFromInitData(initData);
         } catch (error) {
-            console.error('Failed to initialize user data on startup:', error);
+            console.error("Init fallback:", error);
+            try {
+                await loadUserData();
+                initializeStatusSystem();
+                await loadFriendsData();
+                await syncService.checkAndRestoreOnStartup();
+            } catch (fallbackError) {
+                console.error(fallbackError);
+            }
         }
     };
 
-    const fetchNewsAndUpdateUnreadCount = async (news: any, unreadNewsCount: any) => {
+    const fetchNewsAndUpdateUnreadCount = async (
+        news: any,
+        unreadNewsCount: any
+    ) => {
         try {
-            const currentLanguage = getCurrentLanguage() || 'en';
-            const response = await apiGet('/news/', {
+            const currentLanguage = getCurrentLanguage() || "en";
+            const response = await apiGet("/news/", {
                 headers: {
-                    'Accept-Language': currentLanguage,
-                    'Content-Type': 'application/json',
+                    "Accept-Language": currentLanguage,
+                    "Content-Type": "application/json",
                 },
             });
             const allNews = response as any[];
             news.value = allNews.filter(
-                (article: any) => article.language === currentLanguage
+                (a: any) => a.language === currentLanguage
+            );
+            const getNewsUniqueId = (a: any) => `news_${a.language}_${a.id}`;
+            const readNews = JSON.parse(
+                localStorage.getItem("readNews") || "[]"
             );
-
-            const getNewsUniqueId = (article: any) =>
-                `news_${article.language}_${article.id}`;
-            const readNews = JSON.parse(localStorage.getItem('readNews') || '[]');
             unreadNewsCount.value = news.value.filter(
-                (article: any) => !readNews.includes(getNewsUniqueId(article))
+                (a: any) => !readNews.includes(getNewsUniqueId(a))
             ).length;
         } catch (e) {
-            console.error('Failed to fetch news:', e);
             unreadNewsCount.value = 0;
         }
     };
 
-    const initApp = async (isAuthenticated: any, checkAuthStatus: () => void, news: any, unreadNewsCount: any) => {
+    const initApp = async (
+        isAuthenticated: any,
+        checkApiStatus: () => void,
+        news: any,
+        unreadNewsCount: any
+    ) => {
         bootLogService.start();
         bootLogService.systemInit();
 
-        const rpcTask = invoke('initialize_rpc').catch((error) => {
-            console.error('Failed to initialize Discord RPC:', error);
-            bootLogService.addCustomLog('WARN', 'rpc', `Discord RPC init failed: ${String(error)}`);
-        });
+        loadingState.value = loadingStates[0];
+        currentProgress.value = 5;
+
+        const rpcTask = invoke("initialize_rpc").catch((e) =>
+            bootLogService.addCustomLog("WARN", "rpc", String(e))
+        );
 
-        const themeTask = applyThemeOnStartup().then(() => {
+        const themeTask = applyThemeOnStartup().then((theme) => {
+            currentTheme.value = (theme as string) || "dark";
             bootLogService.themeApplied(currentTheme.value);
         });
 
         const languageTask = applyLanguageOnStartup().then(() => {
-            bootLogService.languageApplied(locale.value || getCurrentLanguage() || 'en');
+            bootLogService.languageApplied(
+                locale.value || getCurrentLanguage() || "en"
+            );
         });
 
-        const cursorTask = applyCursorForEvent().then(() => {
-            bootLogService.cursorApplied();
-        });
+        const cursorTask = applyCursorForEvent().then(() =>
+            bootLogService.cursorApplied()
+        );
 
         await Promise.all([rpcTask, themeTask, languageTask, cursorTask]);
 
         const { getToastPosition } = useToast();
         getToastPosition();
-        bootLogService.toastSystemReady();
-
-        showPreloader.value = true;
-        currentProgress.value = 0;
-        totalSteps.value = 4;
 
         bootLogService.eventListenersInit();
 
-        await listen('client-crashed', (event) => {
-            const payload = event.payload as {
-                id: number;
-                name: string;
-                error?: string;
-            };
+        await listen("client-crashed", (event: any) => {
             addToast(
-                t('toast.client.crashed', {
-                    name: payload.name,
-                    error: payload.error || '',
+                t("toast.client.crashed", {
+                    name: event.payload.name,
+                    error: event.payload.error || "",
                 }),
-                'error'
+                "error"
             );
         });
 
-        await listen('client-crash-details', (event) => {
-            const payload = event.payload as {
-                id: number;
-                name: string;
-                logs: string[];
-                error?: string;
-            };
+        await listen("client-crash-details", (event: any) => {
             showModal(
-                `client-crash-${payload.id}`,
+                `client-crash-${event.payload.id}`,
                 ClientCrashModal,
                 {
-                    title: t('modal.client_crash.title', { name: payload.name }),
-                    contentClass: 'wide',
+                    title: t("modal.client_crash.title", {
+                        name: event.payload.name,
+                    }),
+                    contentClass: "wide",
                 },
                 {
-                    clientName: payload.name,
-                    clientId: payload.id,
-                    logs: payload.logs,
-                    error: payload.error,
+                    clientName: event.payload.name,
+                    clientId: event.payload.id,
+                    logs: event.payload.logs,
+                    error: event.payload.error,
                 }
             );
         });
 
-        bootLogService.eventListenersReady();
+        currentProgress.value = 25;
 
-        loadingState.value = loadingStates[0];
-        currentProgress.value = 1;
+        await wait(1000);
+
+        loadingState.value = loadingStates[1];
 
         try {
-            bootLogService.serverConnectivityCheck();
             const connectivity = await invoke<{
                 cdn_online?: boolean;
                 api_online?: boolean;
                 auth_online?: boolean;
-            }>('get_server_connectivity_status');
+            }>("get_server_connectivity_status");
             const cdnOnline = connectivity.cdn_online ?? false;
-            const apiOnline = connectivity.api_online ?? connectivity.auth_online ?? false;
+            const apiOnline =
+                connectivity.api_online ?? connectivity.auth_online ?? false;
             isOnline.value = Boolean(cdnOnline && apiOnline);
 
             if (cdnOnline) bootLogService.cdnOnline();
             else bootLogService.cdnOffline();
-
             if (apiOnline) bootLogService.webApiOnline();
             else bootLogService.webApiOffline();
 
-            if (!isOnline.value) {
-                let offlineMessage = t('toast.server.offline_base');
-                if (!cdnOnline && !apiOnline) {
-                    offlineMessage += t('toast.server.cdn_and_api_offline');
-                } else if (!cdnOnline) {
-                    offlineMessage += t('toast.server.cdn_offline');
-                } else {
-                    offlineMessage += t('toast.server.api_offline');
-                }
-                addToast(offlineMessage, 'warning');
-            }
+            if (!isOnline.value) addToast(t("toast.server.offline"), "error");
         } catch (error) {
-            console.error('Failed to get server connectivity status:', error);
             isOnline.value = false;
-            addToast(t('toast.server.offline'), 'error');
-            bootLogService.addCustomLog('ERROR', 'network', `Connectivity check failed: ${String(error)}`);
         }
 
-        loadingState.value = loadingStates[1];
-        currentProgress.value = 2;
-
         try {
-            bootLogService.apiInit();
-            await invoke('initialize_api');
+            await invoke("initialize_api");
             apiInitialized.value = true;
             bootLogService.apiInitSuccess();
         } catch (error) {
-            console.error('Failed to initialize API:', error);
-            addToast(t('toast.server.api_init_failed', { error }), 'error');
             bootLogService.apiInitFailed();
         }
 
+        currentProgress.value = 50;
+        await wait(500);
+
+        loadingState.value = loadingStates[2];
+
         bootLogService.authCheck();
-        checkAuthStatus();
-        if (isAuthenticated.value) bootLogService.authSuccess();
-        else bootLogService.authSkipped();
+        checkApiStatus();
 
-        if (isAuthenticated.value && isOnline.value) {
-            try {
-                bootLogService.userDataInit();
+        if (isAuthenticated.value) {
+            bootLogService.authSuccess();
+            if (isOnline.value) {
                 await initializeUserDataWrapper(isAuthenticated.value);
-                bootLogService.userDataSuccess();
-
-                globalUserStatus.initializeStatusSystem();
-                bootLogService.syncInit();
-                await syncService.checkAndRestoreOnStartup();
                 bootLogService.syncReady();
-            } catch (error) {
-                console.error('Failed to initialize user data on startup:', error);
-                bootLogService.userDataFailed();
+                webSocketService.connect();
             }
+        } else {
+            bootLogService.authSkipped();
         }
 
-        currentProgress.value = 3;
-
-        const flagsTask = invoke<Flags>('get_flags')
+        const flagsTask = invoke<Flags>("get_flags")
             .then((currentFlags) => {
-                if (currentFlags.first_run.value) {
-                    showFirstRunInfo.value = true;
-                } else if (!currentFlags.disclaimer_shown.value) {
+                if (currentFlags.first_run.value) showFirstRunInfo.value = true;
+                else if (!currentFlags.disclaimer_shown.value)
                     showInitialDisclaimer.value = true;
-                }
                 initialModalsLoaded.value = true;
-                bootLogService.flagsLoaded();
             })
-            .catch((error) => {
-                console.error('Failed to load flags for initial modals:', error);
-                addToast(t('toast.settings.flags_load_failed', { error }), 'error');
+            .catch(() => {
                 initialModalsLoaded.value = true;
-                bootLogService.flagsLoadFailed();
             });
 
-
-        fetchNewsAndUpdateUnreadCount(news, unreadNewsCount).catch(console.error);
-
+        fetchNewsAndUpdateUnreadCount(news, unreadNewsCount);
         await flagsTask;
 
         updaterService.startPeriodicCheck(t);
 
-        currentProgress.value = 4;
-        loadingState.value = t('preloader.ready');
-
-        const preloaderElement = document.querySelector(
-            '#preloader'
-        ) as HTMLElement;
-        if (preloaderElement) {
-            preloaderElement.style.opacity = '0';
-            preloaderElement.classList.add('animate-out');
-
-            setTimeout(() => {
-                showPreloader.value = false;
-                try {
-                    document.documentElement.classList.add('app-ready');
-                } catch (e) {
-                    console.error('Failed to add app-ready class:', e);
-                }
-                setTimeout(() => {
-                    contentVisible.value = true;
-                    bootLogService.systemReady();
-                    try {
-                        bootLogService.clear();
-                    } catch (e) {
-                        console.error('Failed to clear boot logs:', e);
-                    }
-                }, 80);
-            }, 800);
-        } else {
-            showPreloader.value = false;
-        }
+        loadingState.value = loadingStates[3] ?? loadingStates[2] ?? "";
+        currentProgress.value = 100;
+
+        await wait(1000);
+
+        showPreloader.value = false;
+
+        await wait(500);
+
+        document.documentElement.classList.add("app-ready");
+        setTimeout(() => {
+            contentVisible.value = true;
+            bootLogService.clear();
+        }, 80);
     };
 
     return {
@@ -294,7 +270,6 @@ export function useAppInit() {
         contentVisible,
         loadingState,
         currentProgress,
-        totalSteps,
         isOnline,
         initialModalsLoaded,
         showFirstRunInfo,
@@ -303,6 +278,6 @@ export function useAppInit() {
         currentTheme,
         apiInitialized,
         initApp,
-        initializeUserDataWrapper
+        initializeUserDataWrapper,
     };
 }
diff --git a/src/composables/useDownloadSpeedMonitor.ts b/src/composables/useDownloadSpeedMonitor.ts
index bda7caae..f9e4cae3 100644
--- a/src/composables/useDownloadSpeedMonitor.ts
+++ b/src/composables/useDownloadSpeedMonitor.ts
@@ -1,7 +1,7 @@
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useModal } from '../services/modalService';
-import SlowDownloadWarningModal from '../components/modals/common/SlowDownloadWarningModal.vue';
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useModal } from "../services/modalService";
+import SlowDownloadWarningModal from "../components/modals/common/SlowDownloadWarningModal.vue";
 
 export interface DownloadSpeedConfig {
     slowSpeedThreshold?: number;
@@ -38,7 +38,6 @@ export function useDownloadSpeedMonitor(config: DownloadSpeedConfig = {}) {
             const bytesDiff = downloaded - lastDownloaded.value;
             if (timeDiff > 0 && bytesDiff >= 0) {
                 currentSpeed.value = bytesDiff / timeDiff;
-                console.log(`[DownloadMonitor] Speed: ${(currentSpeed.value / 1024).toFixed(1)} KB/s`);
             }
         }
         lastDownloaded.value = downloaded;
@@ -50,7 +49,6 @@ export function useDownloadSpeedMonitor(config: DownloadSpeedConfig = {}) {
     const checkSlowSpeed = () => {
         if (currentSpeed.value > 0 && currentSpeed.value < slowSpeedThreshold) {
             slowSpeedCount.value++;
-            console.log(`[DownloadMonitor] Slow speed! Count: ${slowSpeedCount.value}/${slowSpeedConsecutiveCount}`);
         } else {
             slowSpeedCount.value = 0;
         }
@@ -71,8 +69,10 @@ export function useDownloadSpeedMonitor(config: DownloadSpeedConfig = {}) {
         const now = Date.now();
         const timeSinceLastProgress = now - lastProgressTime.value;
 
-        if (lastProgressTime.value > 0 && timeSinceLastProgress >= stalledTimeout) {
-            console.log(`[DownloadMonitor] Download stalled! No progress for ${(timeSinceLastProgress / 1000).toFixed(0)}s`);
+        if (
+            lastProgressTime.value > 0 &&
+            timeSinceLastProgress >= stalledTimeout
+        ) {
             showStalledWarningModal();
         }
     };
@@ -80,17 +80,17 @@ export function useDownloadSpeedMonitor(config: DownloadSpeedConfig = {}) {
     const showSlowWarningModal = () => {
         slowSpeedWarningShown.value = true;
         showModal(
-            'slow-download-warning',
+            "slow-download-warning",
             SlowDownloadWarningModal,
             {
-                title: t('modals.slow_download.modal_title'),
+                title: t("modals.slow_download.modal_title"),
             },
             {
                 currentSpeed: currentSpeed.value,
                 isStalled: false,
             },
             {
-                close: () => hideModal('slow-download-warning'),
+                close: () => hideModal("slow-download-warning"),
             }
         );
     };
@@ -98,17 +98,17 @@ export function useDownloadSpeedMonitor(config: DownloadSpeedConfig = {}) {
     const showStalledWarningModal = () => {
         stalledWarningShown.value = true;
         showModal(
-            'slow-download-warning',
+            "slow-download-warning",
             SlowDownloadWarningModal,
             {
-                title: t('modals.slow_download.stalled_modal_title'),
+                title: t("modals.slow_download.stalled_modal_title"),
             },
             {
                 currentSpeed: 0,
                 isStalled: true,
             },
             {
-                close: () => hideModal('slow-download-warning'),
+                close: () => hideModal("slow-download-warning"),
             }
         );
     };
diff --git a/src/composables/useFriends.ts b/src/composables/useFriends.ts
index 639cc35d..fa601e27 100644
--- a/src/composables/useFriends.ts
+++ b/src/composables/useFriends.ts
@@ -1,5 +1,9 @@
-import { ref, computed, reactive, watch } from 'vue';
-import { userService, type Friend, type FriendRequest } from '../services/userService';
+import { ref, computed, reactive, watch } from "vue";
+import {
+    userService,
+    type Friend,
+    type FriendRequest,
+} from "../services/userService";
 
 interface GlobalFriendsState {
     friends: Friend[];
@@ -18,28 +22,27 @@ const globalFriendsState = reactive<GlobalFriendsState>({
     isLoading: false,
     isLoaded: false,
     lastUpdated: null,
-    lastStatusUpdate: 0
+    lastStatusUpdate: 0,
 });
 
 const isStatusLoading = ref(false);
-const statusUpdateInterval: { current: NodeJS.Timeout | null } = { current: null };
+const statusUpdateInterval: { current: NodeJS.Timeout | null } = {
+    current: null,
+};
 const STATUS_UPDATE_INTERVAL = 45000;
 
-const isAuthenticated = computed(() => !!localStorage.getItem('authToken'));
+const isAuthenticated = computed(() => !!localStorage.getItem("authToken"));
 
 export function useFriends() {
-
     const onlineFriends = computed(() =>
-        globalFriendsState.friends.filter(friend =>
-            friend.status.is_online
-        )
+        globalFriendsState.friends.filter((friend) => friend.status.is_online)
     );
 
     const onlineFriendsCount = computed(() => onlineFriends.value.length);
 
     const friendRequests = computed(() => ({
         sent: globalFriendsState.sentRequests,
-        received: globalFriendsState.receivedRequests
+        received: globalFriendsState.receivedRequests,
     }));
 
     const loadFriendsData = async (forceRefresh = false): Promise<void> => {
@@ -48,22 +51,30 @@ export function useFriends() {
             return;
         }
 
-        if (globalFriendsState.isLoading) {
-            console.log('Friends data loading already in progress');
+        if (globalFriendsState.isLoading && !forceRefresh) {
+            console.log("Friends data loading already in progress");
             return;
         }
 
-        if (globalFriendsState.isLoaded && !forceRefresh &&
+        if (
+            globalFriendsState.isLoaded &&
+            !forceRefresh &&
             globalFriendsState.lastUpdated &&
-            Date.now() - new Date(globalFriendsState.lastUpdated).getTime() < 30000) {
+            Date.now() - new Date(globalFriendsState.lastUpdated).getTime() <
+                30000
+        ) {
             return;
         }
 
+        if (forceRefresh) {
+            console.log("Force refreshing friends data...");
+        }
+
         globalFriendsState.isLoading = true;
         const startTime = Date.now();
 
         try {
-            console.log('Loading friends data via batch endpoint...');
+            console.log("Loading friends data via batch endpoint...");
 
             const batchData = await userService.getFriendsBatch();
 
@@ -71,12 +82,13 @@ export function useFriends() {
             console.log(`Batch friends data loaded in ${responseTime}ms:`, {
                 friends: batchData.friends?.length || 0,
                 sentRequests: batchData.requests?.sent?.length || 0,
-                receivedRequests: batchData.requests?.received?.length || 0
+                receivedRequests: batchData.requests?.received?.length || 0,
             });
 
             globalFriendsState.friends = batchData.friends || [];
             globalFriendsState.sentRequests = batchData.requests?.sent || [];
-            globalFriendsState.receivedRequests = batchData.requests?.received || [];
+            globalFriendsState.receivedRequests =
+                batchData.requests?.received || [];
             globalFriendsState.lastUpdated = new Date().toISOString();
             globalFriendsState.isLoaded = true;
 
@@ -84,9 +96,12 @@ export function useFriends() {
                 startStatusUpdates();
             }
 
-            console.log('Friends data loaded successfully');
+            console.log("Friends data loaded successfully");
         } catch (error) {
-            console.error('Failed to load friends data via batch endpoint:', error);
+            console.error(
+                "Failed to load friends data via batch endpoint:",
+                error
+            );
         } finally {
             globalFriendsState.isLoading = false;
         }
@@ -108,15 +123,19 @@ export function useFriends() {
                 updatedById.set(f.id, f);
             }
 
-            globalFriendsState.friends.forEach(friend => {
+            globalFriendsState.friends.forEach((friend) => {
                 const updatedFriend = updatedById.get(friend.id);
                 if (!updatedFriend) return;
 
                 const oldOnlineStatus = friend.status.is_online;
                 const oldClient = friend.status.current_client;
 
-                const oldUpdatedAt = friend.status.updated_at ? new Date(friend.status.updated_at).getTime() : null;
-                const newUpdatedAt = updatedFriend.status.updated_at ? new Date(updatedFriend.status.updated_at).getTime() : null;
+                const oldUpdatedAt = friend.status.updated_at
+                    ? new Date(friend.status.updated_at).getTime()
+                    : null;
+                const newUpdatedAt = updatedFriend.status.updated_at
+                    ? new Date(updatedFriend.status.updated_at).getTime()
+                    : null;
 
                 const shouldUpdate =
                     oldUpdatedAt === null ||
@@ -129,12 +148,15 @@ export function useFriends() {
 
                 friend.status.is_online = updatedFriend.status.is_online;
                 friend.status.last_seen = updatedFriend.status.last_seen;
-                friend.status.current_client = updatedFriend.status.current_client;
+                friend.status.current_client =
+                    updatedFriend.status.current_client;
                 friend.status.updated_at = updatedFriend.status.updated_at;
                 friend.status.raw_status = updatedFriend.status.raw_status;
 
-                if (oldOnlineStatus !== updatedFriend.status.is_online ||
-                    oldClient !== updatedFriend.status.current_client) {
+                if (
+                    oldOnlineStatus !== updatedFriend.status.is_online ||
+                    oldClient !== updatedFriend.status.current_client
+                ) {
                     hasChanges = true;
                 }
             });
@@ -142,9 +164,11 @@ export function useFriends() {
             const responseTime = Date.now() - startTime;
             globalFriendsState.lastStatusUpdate = Date.now();
 
-            console.log(`Friend statuses updated in ${responseTime}ms (${hasChanges ? 'with changes' : 'no changes'})`);
+            console.log(
+                `Friend statuses updated in ${responseTime}ms (${hasChanges ? "with changes" : "no changes"})`
+            );
         } catch (error) {
-            console.error('Failed to update friend statuses:', error);
+            console.error("Failed to update friend statuses:", error);
             hasChanges = false;
         } finally {
             isStatusLoading.value = false;
@@ -153,18 +177,20 @@ export function useFriends() {
         return hasChanges;
     };
 
-
     const startStatusUpdates = (): void => {
         if (statusUpdateInterval.current) {
             clearInterval(statusUpdateInterval.current);
         }
 
         const runStatusUpdate = async () => {
-            if (document && document.visibilityState === 'hidden') {
+            if (document && document.visibilityState === "hidden") {
                 return;
             }
 
-            if (!isAuthenticated.value || globalFriendsState.friends.length === 0) {
+            if (
+                !isAuthenticated.value ||
+                globalFriendsState.friends.length === 0
+            ) {
                 return;
             }
 
@@ -172,20 +198,24 @@ export function useFriends() {
         };
 
         runStatusUpdate().then(
-            () => console.log('Status updates started successfully'),
-            error => console.error('Failed to start status updates:', error)
+            () => console.log("Status updates started successfully"),
+            (error) => console.error("Failed to start status updates:", error)
         );
 
-        statusUpdateInterval.current = setInterval(runStatusUpdate, STATUS_UPDATE_INTERVAL);
+        statusUpdateInterval.current = setInterval(
+            runStatusUpdate,
+            STATUS_UPDATE_INTERVAL
+        );
 
-        document.addEventListener('visibilitychange', () => {
-            if (document.visibilityState === 'visible') {
-                runStatusUpdate().catch(() => {
-                });
+        document.addEventListener("visibilitychange", () => {
+            if (document.visibilityState === "visible") {
+                runStatusUpdate().catch(() => {});
             }
         });
 
-        console.log(`Started status updates with ${STATUS_UPDATE_INTERVAL}ms interval`);
+        console.log(
+            `Started status updates with ${STATUS_UPDATE_INTERVAL}ms interval`
+        );
     };
 
     const searchUsers = async (query: string): Promise<any[]> => {
@@ -196,12 +226,11 @@ export function useFriends() {
         try {
             return await userService.searchUsers(query);
         } catch (error) {
-            console.error('Failed to search users:', error);
+            console.error("Failed to search users:", error);
             return [];
         }
     };
 
-
     const sendFriendRequest = async (userId: number): Promise<boolean> => {
         try {
             const result = await userService.sendFriendRequest(userId);
@@ -210,27 +239,40 @@ export function useFriends() {
             console.log(`Friend request sent to ${userId}`);
             return true;
         } catch (error) {
-            console.error('Failed to send friend request:', error);
+            console.error("Failed to send friend request:", error);
             return false;
         }
     };
 
-    const respondToFriendRequest = async (requestId: number, action: 'accept' | 'reject'): Promise<boolean> => {
+    const respondToFriendRequest = async (
+        requestId: number,
+        action: "accept" | "reject"
+    ): Promise<boolean> => {
         try {
             await userService.respondToFriendRequest(requestId, action);
 
-            const request = globalFriendsState.receivedRequests.find(req => req.id === requestId);
+            const request = globalFriendsState.receivedRequests.find(
+                (req) => req.id === requestId
+            );
             if (request) {
-                if (action === 'accept') {
-                    globalFriendsState.friends.push({
-                        id: request.requester.id,
-                        username: request.requester.username,
-                        nickname: request.requester.nickname,
-                        status: request.requester.status
-                    });
+                if (action === "accept") {
+                    if (
+                        !globalFriendsState.friends.some(
+                            (f) => f.id === request.requester.id
+                        )
+                    ) {
+                        globalFriendsState.friends.push({
+                            id: request.requester.id,
+                            username: request.requester.username,
+                            nickname: request.requester.nickname,
+                            avatar_url: request.requester.avatar_url,
+                            status: request.requester.status,
+                        });
+                    }
                 }
 
-                const index = globalFriendsState.receivedRequests.indexOf(request);
+                const index =
+                    globalFriendsState.receivedRequests.indexOf(request);
                 if (index > -1) {
                     globalFriendsState.receivedRequests.splice(index, 1);
                 }
@@ -244,32 +286,33 @@ export function useFriends() {
         }
     };
 
-
     const removeFriend = async (userId: number): Promise<boolean> => {
         try {
             await userService.removeFriend(userId);
 
-            const index = globalFriendsState.friends.findIndex(friend => friend.id === userId);
+            const index = globalFriendsState.friends.findIndex(
+                (friend) => friend.id === userId
+            );
             if (index > -1) {
                 globalFriendsState.friends.splice(index, 1);
             }
 
-            console.log('Friend removed');
+            console.log("Friend removed");
             return true;
         } catch (error) {
-            console.error('Failed to remove friend:', error);
+            console.error("Failed to remove friend:", error);
             return false;
         }
     };
 
     const getOnlineFriends = (): Friend[] => {
-        return globalFriendsState.friends.filter(friend =>
-            friend.status.is_online
+        return globalFriendsState.friends.filter(
+            (friend) => friend.status.is_online
         );
     };
 
     const refreshFriendsData = async (): Promise<void> => {
-        console.log('Force refreshing friends data...');
+        console.log("Force refreshing friends data...");
         await loadFriendsData(true);
     };
 
@@ -288,12 +331,33 @@ export function useFriends() {
         }
     };
 
+    const hydrateFriends = (data: {
+        friends: any[];
+        requests: { sent: any[]; received: any[]; blocked: any[] };
+    }) => {
+        globalFriendsState.friends = (data.friends || []).map((f: any) =>
+            userService.mapFriend(f)
+        );
+        globalFriendsState.sentRequests = (data.requests?.sent || []).map(
+            (r: any) => userService.mapFriendRequest(r)
+        );
+        globalFriendsState.receivedRequests = (
+            data.requests?.received || []
+        ).map((r: any) => userService.mapFriendRequest(r));
+        globalFriendsState.isLoading = false;
+        globalFriendsState.isLoaded = true;
+        globalFriendsState.lastUpdated = new Date().toISOString();
+
+        if (!statusUpdateInterval.current) {
+            startStatusUpdates();
+        }
+    };
 
     const stopStatusUpdates = (): void => {
         if (statusUpdateInterval.current) {
             clearInterval(statusUpdateInterval.current);
             statusUpdateInterval.current = null;
-            console.log('Stopped status updates');
+            console.log("Stopped status updates");
         }
     };
 
@@ -321,6 +385,8 @@ export function useFriends() {
         refreshFriendsData,
         clearFriendsData,
 
+        hydrateFriends,
+
         searchUsers,
         sendFriendRequest,
         respondToFriendRequest,
@@ -331,7 +397,7 @@ export function useFriends() {
         startStatusUpdates,
         stopStatusUpdates,
 
-        lastStatusUpdate: computed(() => globalFriendsState.lastStatusUpdate)
+        lastStatusUpdate: computed(() => globalFriendsState.lastStatusUpdate),
     };
 }
 
diff --git a/src/composables/useIrcChat.ts b/src/composables/useIrcChat.ts
index 94710622..138ee94f 100644
--- a/src/composables/useIrcChat.ts
+++ b/src/composables/useIrcChat.ts
@@ -1,7 +1,7 @@
-import { ref } from 'vue';
-import { invoke } from '@tauri-apps/api/core';
-import { listen } from '@tauri-apps/api/event';
-import { useToast } from '../services/toastService';
+import { ref } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import { useToast } from "../services/toastService";
 
 interface SenderInfo {
     username: string;
@@ -32,14 +32,19 @@ interface IncomingIrcPayload {
     room_state?: RoomState;
 }
 
-type IrcStatus = 'disconnected' | 'connecting' | 'connected' | 'reconnecting' | 'error';
+type IrcStatus =
+    | "disconnected"
+    | "connecting"
+    | "connected"
+    | "reconnecting"
+    | "error";
 
 const RECONNECT_DELAY_MS = 4000;
 
 const messages = ref<IrcMessage[]>([]);
 const connected = ref(false);
 const isConnecting = ref(false);
-const status = ref<IrcStatus>('disconnected');
+const status = ref<IrcStatus>("disconnected");
 const onlineUsers = ref(0);
 const onlineGuests = ref(0);
 
@@ -51,7 +56,7 @@ const { addToast } = useToast();
 
 const currentTime = (): string => {
     const now = new Date();
-    return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
+    return `${now.getHours().toString().padStart(2, "0")}:${now.getMinutes().toString().padStart(2, "0")}`;
 };
 
 const formatIsoToTime = (isoString?: string): string => {
@@ -59,15 +64,17 @@ const formatIsoToTime = (isoString?: string): string => {
     const parsed = new Date(isoString);
     if (Number.isNaN(parsed.getTime())) return currentTime();
 
-    const hours = parsed.getHours().toString().padStart(2, '0');
-    const minutes = parsed.getMinutes().toString().padStart(2, '0');
+    const hours = parsed.getHours().toString().padStart(2, "0");
+    const minutes = parsed.getMinutes().toString().padStart(2, "0");
     return `${hours}:${minutes}`;
 };
 
 const parseIrcPayload = (payload: unknown): IrcMessage | null => {
     const fallbackTime = currentTime();
 
-    const normalizeSender = (raw?: IncomingIrcPayload['sender']): SenderInfo | undefined => {
+    const normalizeSender = (
+        raw?: IncomingIrcPayload["sender"]
+    ): SenderInfo | undefined => {
         if (!raw) return undefined;
 
         const userId = raw.userId ?? raw.user_id;
@@ -78,22 +85,22 @@ const parseIrcPayload = (payload: unknown): IrcMessage | null => {
         };
     };
 
-    if (typeof payload === 'string') {
+    if (typeof payload === "string") {
         try {
             const parsed = JSON.parse(payload) as IncomingIrcPayload;
 
-            if (parsed.type === 'pong') return null;
+            if (parsed.type === "pong") return null;
 
             return {
                 time: formatIsoToTime(parsed.time),
-                content: parsed.content || '',
+                content: parsed.content || "",
                 type: parsed.type,
                 isHistory: Boolean(parsed.history),
                 sender: normalizeSender(parsed.sender),
                 roomState: parsed.room_state,
             };
         } catch {
-            return { time: fallbackTime, content: payload, type: 'system' };
+            return { time: fallbackTime, content: payload, type: "system" };
         }
     }
 
@@ -115,10 +122,10 @@ const registerListeners = async (): Promise<void> => {
     listenersRegistered = true;
 
     try {
-        await listen<string>('irc-message', (event) => {
+        await listen<string>("irc-message", (event) => {
             const msg = parseIrcPayload(event.payload);
             if (msg) {
-                if (msg.type === 'room_state' && msg.roomState) {
+                if (msg.type === "room_state" && msg.roomState) {
                     onlineUsers.value = msg.roomState.online_users;
                     onlineGuests.value = msg.roomState.online_guests;
                 } else {
@@ -127,32 +134,33 @@ const registerListeners = async (): Promise<void> => {
             }
         });
 
-        await listen('irc-connected', () => {
-            console.debug('IRC: connected event');
+        await listen("irc-connected", () => {
+            console.debug("IRC: connected event");
             connected.value = true;
-            status.value = 'connected';
+            status.value = "connected";
             clearReconnectTimer();
         });
 
-        await listen('irc-disconnected', () => {
-            console.debug('IRC: disconnected event');
+        await listen("irc-disconnected", () => {
+            console.debug("IRC: disconnected event");
             connected.value = false;
-            status.value = 'reconnecting';
-            messages.value.push({ time: currentTime(), content: 'Disconnected from IRC server.', type: 'error' });
+            status.value = "reconnecting";
+            messages.value.push({
+                time: currentTime(),
+                content: "Disconnected from IRC server.",
+                type: "error",
+            });
             connectionPromise = null;
-            scheduleReconnect('Connection lost. Reconnecting...');
+            scheduleReconnect("Connection lost. Reconnecting...");
         });
 
-        await listen<string>('irc-error', (event) => {
-            console.error('IRC: error event', event.payload);
+        await listen<string>("irc-error", (event) => {
+            console.error("IRC: error event", event.payload);
             connected.value = false;
-            status.value = 'error';
+            status.value = "error";
             connectionPromise = null;
-            addToast(
-                'IRC Error: ' + event.payload,
-                'error',
-            );
-            scheduleReconnect('Error occurred. Attempting to reconnect...');
+            addToast("IRC Error: " + event.payload, "error");
+            scheduleReconnect("Error occurred. Attempting to reconnect...");
         });
     } catch (err) {
         listenersRegistered = false;
@@ -164,22 +172,28 @@ const scheduleReconnect = (reason?: string) => {
     if (reconnectTimer) return;
 
     if (reason) {
-        messages.value.push({ time: currentTime(), content: reason, type: 'system' });
+        messages.value.push({
+            time: currentTime(),
+            content: reason,
+            type: "system",
+        });
     }
 
-    status.value = 'reconnecting';
+    status.value = "reconnecting";
     reconnectTimer = setTimeout(async () => {
         reconnectTimer = null;
         try {
             await ensureIrcConnection(true);
         } catch (err) {
-            console.error('IRC: reconnection attempt failed', err);
-            scheduleReconnect('Reconnection failed. Retrying...');
+            console.error("IRC: reconnection attempt failed", err);
+            scheduleReconnect("Reconnection failed. Retrying...");
         }
     }, RECONNECT_DELAY_MS);
 };
 
-export const ensureIrcConnection = async (isReconnect = false): Promise<void> => {
+export const ensureIrcConnection = async (
+    isReconnect = false
+): Promise<void> => {
     await registerListeners();
 
     if (connectionPromise) {
@@ -188,18 +202,18 @@ export const ensureIrcConnection = async (isReconnect = false): Promise<void> =>
 
     connectionPromise = (async () => {
         isConnecting.value = true;
-        status.value = isReconnect ? 'reconnecting' : 'connecting';
-        const token = localStorage.getItem('authToken') || '';
+        status.value = isReconnect ? "reconnecting" : "connecting";
+        const token = localStorage.getItem("authToken") || "";
         const tokenPresent = token.length > 0;
-        console.debug('IRC: attempting connect, token present =', tokenPresent);
+        console.debug("IRC: attempting connect, token present =", tokenPresent);
 
         clearReconnectTimer();
-        await invoke('connect_irc', { token: tokenPresent ? token : null });
+        await invoke("connect_irc", { token: tokenPresent ? token : null });
     })()
         .catch((err) => {
             connectionPromise = null;
-            status.value = 'error';
-            scheduleReconnect('Connection failed. Retrying...');
+            status.value = "error";
+            scheduleReconnect("Connection failed. Retrying...");
             throw err;
         })
         .finally(() => {
@@ -210,15 +224,15 @@ export const ensureIrcConnection = async (isReconnect = false): Promise<void> =>
 };
 
 export function forceReconnect(): void {
-    console.debug('IRC: forceReconnect called');
+    console.debug("IRC: forceReconnect called");
     connectionPromise = null;
     ensureIrcConnection(true).catch((err) => {
-        console.error('IRC: forceReconnect failed', err);
+        console.error("IRC: forceReconnect failed", err);
     });
 }
 
 export const sendIrcMessage = async (message: string): Promise<void> => {
-    await invoke('send_irc_message', { message });
+    await invoke("send_irc_message", { message });
 };
 
 export function useIrcChat() {
@@ -231,6 +245,6 @@ export function useIrcChat() {
         onlineGuests,
         ensureIrcConnection,
         forceReconnect,
-        sendIrcMessage
+        sendIrcMessage,
     };
 }
diff --git a/src/composables/usePresets.ts b/src/composables/usePresets.ts
index 173b9276..69df062f 100644
--- a/src/composables/usePresets.ts
+++ b/src/composables/usePresets.ts
@@ -1,8 +1,12 @@
-import { ref, type Ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import type { ThemePreset, CreatePresetInput, UpdatePresetInput } from '../types/presets';
-import { presetService } from '../services/presetService';
-import { useToast } from '../services/toastService';
+import { ref, type Ref } from "vue";
+import { useI18n } from "vue-i18n";
+import type {
+    ThemePreset,
+    CreatePresetInput,
+    UpdatePresetInput,
+} from "../types/presets";
+import { presetService } from "../services/presetService";
+import { useToast } from "../services/toastService";
 
 const presets: Ref<ThemePreset[]> = ref([]);
 const loading = ref(false);
@@ -18,70 +22,115 @@ export function usePresets() {
             error.value = null;
             presets.value = await presetService.getAllPresets();
         } catch (err) {
-            error.value = err instanceof Error ? err.message : t('theme.presets.messages.load_error');
-            addToast(t('theme.presets.messages.load_error'), 'error');
+            error.value =
+                err instanceof Error
+                    ? err.message
+                    : t("theme.presets.messages.load_error");
+            addToast(t("theme.presets.messages.load_error"), "error");
         } finally {
             loading.value = false;
         }
     };
 
-    const createPreset = async (input: CreatePresetInput): Promise<ThemePreset | null> => {
+    const createPreset = async (
+        input: CreatePresetInput
+    ): Promise<ThemePreset | null> => {
         try {
             const preset = await presetService.createPreset(input);
             presets.value.push(preset);
-            addToast(t('theme.presets.messages.create_success', { name: preset.name }), 'success');
+            addToast(
+                t("theme.presets.messages.create_success", {
+                    name: preset.name,
+                }),
+                "success"
+            );
             return preset;
         } catch (err) {
             console.log("Failed to create preset:", err);
-            const message = err instanceof Error ? err.message : t('theme.presets.messages.create_error');
+            const message =
+                err instanceof Error
+                    ? err.message
+                    : t("theme.presets.messages.create_error");
             error.value = message;
-            addToast(message, 'error');
+            addToast(message, "error");
             return null;
         }
     };
 
-    const updatePreset = async (input: UpdatePresetInput): Promise<ThemePreset | null> => {
+    const updatePreset = async (
+        input: UpdatePresetInput
+    ): Promise<ThemePreset | null> => {
         try {
             const updatedPreset = await presetService.updatePreset(input);
-            const index = presets.value.findIndex(p => p.id === input.id);
+            const index = presets.value.findIndex((p) => p.id === input.id);
             if (index !== -1) {
                 presets.value[index] = updatedPreset;
             }
-            addToast(t('theme.presets.messages.update_success', { name: updatedPreset.name }), 'success');
+            addToast(
+                t("theme.presets.messages.update_success", {
+                    name: updatedPreset.name,
+                }),
+                "success"
+            );
             return updatedPreset;
         } catch (err) {
-            const message = err instanceof Error ? err.message : t('theme.presets.messages.update_error');
+            const message =
+                err instanceof Error
+                    ? err.message
+                    : t("theme.presets.messages.update_error");
             error.value = message;
-            addToast(message, 'error');
+            addToast(message, "error");
             return null;
         }
     };
 
     const deletePreset = async (id: string): Promise<boolean> => {
         try {
-            const preset = presets.value.find(p => p.id === id);
+            const preset = presets.value.find((p) => p.id === id);
             await presetService.deletePreset(id);
-            presets.value = presets.value.filter(p => p.id !== id);
-            addToast(t('theme.presets.messages.delete_success', { name: preset?.name || 'Unknown' }), 'success');
+            presets.value = presets.value.filter((p) => p.id !== id);
+            addToast(
+                t("theme.presets.messages.delete_success", {
+                    name: preset?.name || "Unknown",
+                }),
+                "success"
+            );
             return true;
         } catch (err) {
-            const message = err instanceof Error ? err.message : t('theme.presets.messages.delete_error');
+            const message =
+                err instanceof Error
+                    ? err.message
+                    : t("theme.presets.messages.delete_error");
             error.value = message;
-            addToast(message, 'error');
+            addToast(message, "error");
             return false;
         }
     };
 
-    const duplicatePreset = async (id: string, newName: string): Promise<ThemePreset | null> => {
+    const duplicatePreset = async (
+        id: string,
+        newName: string
+    ): Promise<ThemePreset | null> => {
         try {
-            const duplicatedPreset = await presetService.duplicatePreset(id, newName);
+            const duplicatedPreset = await presetService.duplicatePreset(
+                id,
+                newName
+            );
             presets.value.push(duplicatedPreset);
-            addToast(t('theme.presets.messages.duplicate_success', { name: duplicatedPreset.name }), 'success');
+            addToast(
+                t("theme.presets.messages.duplicate_success", {
+                    name: duplicatedPreset.name,
+                }),
+                "success"
+            );
             return duplicatedPreset;
         } catch (err) {
-            const message = err instanceof Error ? err.message : t('theme.presets.messages.duplicate_error');
+            const message =
+                err instanceof Error
+                    ? err.message
+                    : t("theme.presets.messages.duplicate_error");
             error.value = message;
-            addToast(message, 'error');
+            addToast(message, "error");
             return null;
         }
     };
@@ -89,40 +138,59 @@ export function usePresets() {
     const applyPreset = (preset: ThemePreset): void => {
         try {
             presetService.applyPresetToTheme(preset);
-            addToast(t('theme.presets.messages.apply_success', { name: preset.name }), 'success');
+            addToast(
+                t("theme.presets.messages.apply_success", {
+                    name: preset.name,
+                }),
+                "success"
+            );
         } catch (err) {
-            const message = err instanceof Error ? err.message : t('theme.presets.messages.apply_error');
+            const message =
+                err instanceof Error
+                    ? err.message
+                    : t("theme.presets.messages.apply_error");
             error.value = message;
-            addToast(message, 'error');
+            addToast(message, "error");
         }
     };
 
-    const saveCurrentAsPreset = async (name: string, description?: string): Promise<ThemePreset | null> => {
-        const input = presetService.createPresetFromCurrentSettings(name, description);
+    const saveCurrentAsPreset = async (
+        name: string,
+        description?: string
+    ): Promise<ThemePreset | null> => {
+        const input = presetService.createPresetFromCurrentSettings(
+            name,
+            description
+        );
         return await createPreset(input);
     };
 
     const getPresetById = (id: string): ThemePreset | undefined => {
-        return presets.value.find(p => p.id === id);
+        return presets.value.find((p) => p.id === id);
     };
 
     const exportPreset = (preset: ThemePreset): string => {
         return JSON.stringify(preset, null, 2);
     };
 
-    const importPresetFromJSON = async (jsonString: string): Promise<ThemePreset | null> => {
+    const importPresetFromJSON = async (
+        jsonString: string
+    ): Promise<ThemePreset | null> => {
         try {
             const presetData = JSON.parse(jsonString);
 
             if (!presetData.name) {
-                throw new Error(t('theme.presets.messages.import_no_name'));
+                throw new Error(t("theme.presets.messages.import_no_name"));
             }
 
             const input: CreatePresetInput = {
-                name: presetData.name + ' (Imported)',
+                name: presetData.name + " (Imported)",
                 description: presetData.description,
-                customCSS: presetData.custom_css || presetData.customCSS || '',
-                enableCustomCSS: presetData.enable_custom_css ?? presetData.enableCustomCSS ?? false,
+                customCSS: presetData.custom_css || presetData.customCSS || "",
+                enableCustomCSS:
+                    presetData.enable_custom_css ??
+                    presetData.enableCustomCSS ??
+                    false,
                 primary: presetData.primary || presetData.primaryColorOverride,
 
                 base100: presetData.base100,
@@ -130,28 +198,38 @@ export function usePresets() {
                 base300: presetData.base300,
                 baseContent: presetData.base_content || presetData.baseContent,
 
-                primaryContent: presetData.primary_content || presetData.primaryContent,
+                primaryContent:
+                    presetData.primary_content || presetData.primaryContent,
                 secondary: presetData.secondary,
-                secondaryContent: presetData.secondary_content || presetData.secondaryContent,
+                secondaryContent:
+                    presetData.secondary_content || presetData.secondaryContent,
                 accent: presetData.accent,
-                accentContent: presetData.accent_content || presetData.accentContent,
+                accentContent:
+                    presetData.accent_content || presetData.accentContent,
                 neutral: presetData.neutral,
-                neutralContent: presetData.neutral_content || presetData.neutralContent,
+                neutralContent:
+                    presetData.neutral_content || presetData.neutralContent,
                 info: presetData.info,
                 infoContent: presetData.info_content || presetData.infoContent,
                 success: presetData.success,
-                successContent: presetData.success_content || presetData.successContent,
+                successContent:
+                    presetData.success_content || presetData.successContent,
                 warning: presetData.warning,
-                warningContent: presetData.warning_content || presetData.warningContent,
+                warningContent:
+                    presetData.warning_content || presetData.warningContent,
                 error: presetData.error,
-                errorContent: presetData.error_content || presetData.errorContent,
+                errorContent:
+                    presetData.error_content || presetData.errorContent,
             };
 
             return await createPreset(input);
         } catch (err) {
-            const message = err instanceof Error ? err.message : t('theme.presets.messages.import_error');
+            const message =
+                err instanceof Error
+                    ? err.message
+                    : t("theme.presets.messages.import_error");
             error.value = message;
-            addToast(message, 'error');
+            addToast(message, "error");
             return null;
         }
     };
@@ -169,6 +247,6 @@ export function usePresets() {
         saveCurrentAsPreset,
         getPresetById,
         exportPreset,
-        importPresetFromJSON
+        importPresetFromJSON,
     };
-}
\ No newline at end of file
+}
diff --git a/src/composables/useStreamerMode.ts b/src/composables/useStreamerMode.ts
index a45e24e1..aef26018 100644
--- a/src/composables/useStreamerMode.ts
+++ b/src/composables/useStreamerMode.ts
@@ -1,21 +1,21 @@
-import { ref, computed } from 'vue';
+import { ref, computed } from "vue";
 
-const STORAGE_KEY = 'streamerModeEnabled';
+const STORAGE_KEY = "streamerModeEnabled";
 
 function readStoredFlag(key: string): boolean {
     try {
-        return localStorage.getItem(key) === 'true';
+        return localStorage.getItem(key) === "true";
     } catch (e) {
-        console.warn('useStreamerMode: failed to read storage', e);
+        console.warn("useStreamerMode: failed to read storage", e);
         return false;
     }
 }
 
 function writeStoredFlag(key: string, value: boolean): void {
     try {
-        localStorage.setItem(key, value ? 'true' : 'false');
+        localStorage.setItem(key, value ? "true" : "false");
     } catch (e) {
-        console.warn('useStreamerMode: failed to write storage', e);
+        console.warn("useStreamerMode: failed to write storage", e);
     }
 }
 
@@ -30,38 +30,40 @@ function emitChange(enabled: boolean) {
         try {
             l(enabled);
         } catch (e) {
-            console.error('useStreamerMode listener error', e);
+            console.error("useStreamerMode listener error", e);
         }
     }
 }
 
-function maskString(input: string | undefined | null, maskChar = '*'): string {
-    if (!input) return '';
+function maskString(input: string | undefined | null, maskChar = "*"): string {
+    if (!input) return "";
     return maskChar.repeat([...input].length);
 }
 
 function maskName(name?: string): string {
-    if (!name) return 'User';
+    if (!name) return "User";
     const chars = [...name];
-    if (chars.length <= 1) return chars[0] || 'U';
-    return maskString(chars.slice(0, -1).join('')) + chars[chars.length - 1];
+    if (chars.length <= 1) return chars[0] || "U";
+    return maskString(chars.slice(0, -1).join("")) + chars[chars.length - 1];
 }
 
 function maskUsername(username?: string): string {
-    if (!username) return 'user';
+    if (!username) return "user";
     const chars = [...username];
-    const lead = chars.slice(0, 2).join('');
-    return lead + maskString(chars.slice(2).join(''));
+    const lead = chars.slice(0, 2).join("");
+    return lead + maskString(chars.slice(2).join(""));
 }
 
 function maskEmail(email?: string): string {
-    if (!email) return 'unknown@*****.***';
-    const [local, domain] = email.split('@');
+    if (!email) return "unknown@*****.***";
+    const [local, domain] = email.split("@");
     if (!domain) return maskString(email);
-    const domainParts = domain.split('.');
+    const domainParts = domain.split(".");
     const tld = domainParts.pop();
-    const maskedLocal = local ? local[0] + maskString(local.slice(1)) : '';
-    const maskedDomain = domainParts.join('.') ? domainParts.map(() => '*****').join('.') : '*****';
+    const maskedLocal = local ? local[0] + maskString(local.slice(1)) : "";
+    const maskedDomain = domainParts.join(".")
+        ? domainParts.map(() => "*****").join(".")
+        : "*****";
     return `${maskedLocal}@${maskedDomain}.${tld}`;
 }
 
@@ -75,7 +77,7 @@ export function useStreamerMode() {
     }
 
     function toggleStreamerMode(enabled?: boolean) {
-        if (typeof enabled === 'boolean') {
+        if (typeof enabled === "boolean") {
             setStreamerMode(enabled);
             return;
         }
@@ -87,26 +89,32 @@ export function useStreamerMode() {
         return () => listeners.delete(cb);
     }
 
-    function getDisplayName(nickname?: string | null, username?: string | null, fallback = 'User'): string {
+    function getDisplayName(
+        nickname?: string | null,
+        username?: string | null,
+        fallback = "User"
+    ): string {
         const name = nickname || username || fallback;
         return isStreamerModeEnabled.value ? maskName(name) : name;
     }
 
     function getDisplayUsername(username?: string | null): string {
-        const value = username || 'user';
+        const value = username || "user";
         return isStreamerModeEnabled.value ? maskUsername(value) : value;
     }
 
     function getDisplayEmail(email?: string | null): string {
-        const value = email || '';
+        const value = email || "";
         return isStreamerModeEnabled.value ? maskEmail(value) : value;
     }
 
-    function maskIfEnabled(value?: string | null, masker: (v?: string | null) => string = maskString): string {
-        return isStreamerModeEnabled.value ? masker(value) : (value || '');
+    function maskIfEnabled(
+        value?: string | null,
+        masker: (v?: string | null) => string = maskString
+    ): string {
+        return isStreamerModeEnabled.value ? masker(value) : value || "";
     }
 
-
     return {
         isStreamerModeEnabled: isEnabled,
         enabled: isEnabled,
@@ -120,17 +128,20 @@ export function useStreamerMode() {
         maskName,
         maskUsername,
         maskEmail,
-        maskIfEnabled
+        maskIfEnabled,
     };
 }
 
 export default useStreamerMode;
 
-if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
+if (
+    typeof window !== "undefined" &&
+    typeof window.addEventListener === "function"
+) {
     if (!storageListenerInstalled) {
-        window.addEventListener('storage', (e: StorageEvent) => {
+        window.addEventListener("storage", (e: StorageEvent) => {
             if (e.key === STORAGE_KEY) {
-                const newVal = e.newValue === 'true';
+                const newVal = e.newValue === "true";
                 if (isStreamerModeEnabled.value !== newVal) {
                     isStreamerModeEnabled.value = newVal;
                     emitChange(newVal);
diff --git a/src/composables/useUser.ts b/src/composables/useUser.ts
index a9539c12..4ca6ba55 100644
--- a/src/composables/useUser.ts
+++ b/src/composables/useUser.ts
@@ -1,5 +1,9 @@
-import { reactive, computed, ref, watch } from 'vue';
-import { userService, type UserProfile, type UserInfo } from '../services/userService';
+import { reactive, computed, ref, watch } from "vue";
+import {
+    userService,
+    type UserProfile,
+    type UserInfo,
+} from "../services/userService";
 
 interface GlobalUserState {
     profile: UserProfile | null;
@@ -14,23 +18,23 @@ const globalUserState = reactive<GlobalUserState>({
     info: null,
     isLoading: false,
     isLoaded: false,
-    lastUpdated: null
+    lastUpdated: null,
 });
 
-const authToken = ref(localStorage.getItem('authToken'));
+const authToken = ref(localStorage.getItem("authToken"));
 const isAuthenticated = computed(() => !!authToken.value);
 
 let authWatcherAttached = false;
 
-window.addEventListener('storage', (event) => {
-    if (event.key === 'authToken') {
+window.addEventListener("storage", (event) => {
+    if (event.key === "authToken") {
         authToken.value = event.newValue;
     }
 });
 
 const originalSetItem = localStorage.setItem;
 localStorage.setItem = function (key: string, value: string) {
-    if (key === 'authToken') {
+    if (key === "authToken") {
         authToken.value = value;
     }
     originalSetItem.apply(this, [key, value]);
@@ -38,20 +42,24 @@ localStorage.setItem = function (key: string, value: string) {
 
 const originalRemoveItem = localStorage.removeItem;
 localStorage.removeItem = function (key: string) {
-    if (key === 'authToken') {
+    if (key === "authToken") {
         authToken.value = null;
     }
     originalRemoveItem.apply(this, [key]);
 };
 
 const displayName = computed(() => {
-    if (!globalUserState.info && !globalUserState.profile) return '';
-    return globalUserState.profile?.nickname || globalUserState.info?.username || '';
+    if (!globalUserState.info && !globalUserState.profile) return "";
+    return (
+        globalUserState.profile?.nickname ||
+        globalUserState.info?.username ||
+        ""
+    );
 });
 
-const username = computed(() => globalUserState.info?.username || '');
-const email = computed(() => globalUserState.info?.email || '');
-const nickname = computed(() => globalUserState.profile?.nickname || '');
+const username = computed(() => globalUserState.info?.username || "");
+const email = computed(() => globalUserState.info?.email || "");
+const nickname = computed(() => globalUserState.profile?.nickname || "");
 
 const loadUserData = async (forceRefresh = false): Promise<void> => {
     if (!isAuthenticated.value) {
@@ -77,9 +85,9 @@ const loadUserData = async (forceRefresh = false): Promise<void> => {
         globalUserState.lastUpdated = new Date().toISOString();
         globalUserState.isLoaded = true;
 
-        console.log('Global user data loaded successfully');
+        console.log("Global user data loaded successfully");
     } catch (error) {
-        console.error('Failed to load global user data:', error);
+        console.error("Failed to load global user data:", error);
     } finally {
         globalUserState.isLoading = false;
     }
@@ -96,7 +104,7 @@ const updateUserProfile = async (newNickname: string): Promise<boolean> => {
 
         return result.success;
     } catch (error) {
-        console.error('Failed to update user profile:', error);
+        console.error("Failed to update user profile:", error);
         return false;
     }
 };
@@ -109,12 +117,20 @@ const clearUserData = (): void => {
     globalUserState.lastUpdated = null;
 };
 
+const hydrateUser = (profile: UserProfile, info: UserInfo): void => {
+    globalUserState.profile = profile;
+    globalUserState.info = info;
+    globalUserState.lastUpdated = new Date().toISOString();
+    globalUserState.isLoaded = true;
+    globalUserState.isLoading = false;
+};
+
 const refreshUserData = (): Promise<void> => {
     return loadUserData(true);
 };
 
 const logout = (): void => {
-    localStorage.removeItem('authToken');
+    localStorage.removeItem("authToken");
     userService.clearCache();
     clearUserData();
 };
@@ -153,7 +169,8 @@ export function useUser() {
         loadUserData,
         updateUserProfile,
         clearUserData,
+        hydrateUser,
         refreshUserData,
-        logout
+        logout,
     };
 }
diff --git a/src/composables/useUserStatus.ts b/src/composables/useUserStatus.ts
index cbaf02a7..a4c06549 100644
--- a/src/composables/useUserStatus.ts
+++ b/src/composables/useUserStatus.ts
@@ -1,29 +1,29 @@
-import { ref, computed, reactive, nextTick } from 'vue';
-import { apiClient } from '../services/apiClient';
-import { useStreamerMode } from './useStreamerMode';
+import { ref, computed, reactive, nextTick } from "vue";
+import { apiClient } from "../services/apiClient";
+import { useStreamerMode } from "./useStreamerMode";
 
 interface StatusData {
     isOnline: boolean;
-    currentClientName?: string | null;
+    currentClientName: string | null;
     invisibleMode: boolean;
     lastSeen: string | null;
     username: string;
     nickname: string | null;
     lastStatusUpdate: string | null;
+    startedAt: string | null;
 }
 
-
 const globalStatus = reactive<StatusData>({
     isOnline: false,
     currentClientName: null,
     invisibleMode: false,
     lastSeen: null,
-    username: '',
+    username: "",
     nickname: null,
-    lastStatusUpdate: null
+    lastStatusUpdate: null,
+    startedAt: null,
 });
 
-
 const isAuthenticated = ref(false);
 
 const pollingConfig = {
@@ -38,14 +38,15 @@ export function useUserStatus() {
     const streamer = useStreamerMode();
 
     const checkAuthStatus = (): boolean => {
-        const token = localStorage.getItem('authToken');
+        const token = localStorage.getItem("authToken");
         const isAuth = !!token;
         isAuthenticated.value = isAuth;
 
         return isAuth;
     };
 
-    const extractApiData = (resp: any) => resp && resp.data ? resp.data : resp;
+    const extractApiData = (resp: any) =>
+        resp && resp.data ? resp.data : resp;
 
     const syncStatusToServer = async (force = false): Promise<any> => {
         if (!checkAuthStatus()) {
@@ -60,25 +61,35 @@ export function useUserStatus() {
 
         try {
             const statusPayload = {
-                status: globalStatus.isOnline && !globalStatus.invisibleMode ? 'ONLINE' : 'OFFLINE',
-                client_name: globalStatus.currentClientName ?? null
+                status:
+                    globalStatus.isOnline && !globalStatus.invisibleMode
+                        ? "ONLINE"
+                        : "OFFLINE",
+                client_name: globalStatus.currentClientName ?? null,
             };
 
-            pendingStatusUpdate = apiClient.put('/users/me/status', statusPayload);
+            pendingStatusUpdate = apiClient.put(
+                "/users/me/status",
+                statusPayload
+            );
             const raw = await pendingStatusUpdate;
             const response = extractApiData(raw);
 
             if (currentRequestId === lastRequestId) {
                 updateLocalStatus(response);
-                console.log(`Status synced: ${globalStatus.isOnline ? 'online' : 'offline'}${globalStatus.invisibleMode ? ' (invisible)' : ''}`,
-                    globalStatus.currentClientName ? `on client: ${globalStatus.currentClientName}` : '');
+                console.log(
+                    `Status synced: ${globalStatus.isOnline ? "online" : "offline"}${globalStatus.invisibleMode ? " (invisible)" : ""} `,
+                    globalStatus.currentClientName
+                        ? `on client: ${globalStatus.currentClientName} `
+                        : ""
+                );
             } else {
-                console.log('Ignoring stale status response');
+                console.log("Ignoring stale status response");
             }
 
             return response;
         } catch (error) {
-            console.error('Failed to sync status to server:', error);
+            console.error("Failed to sync status to server:", error);
             throw error;
         } finally {
             if (currentRequestId === lastRequestId) {
@@ -93,59 +104,87 @@ export function useUserStatus() {
         if (!serverResponse) return false;
 
         if (serverResponse.status !== undefined) {
-            const normalized = String(serverResponse.status || '').toUpperCase();
-            globalStatus.isOnline = normalized.length > 0 && normalized !== 'OFFLINE' && normalized !== 'INVISIBLE';
+            const normalized = String(
+                serverResponse.status || ""
+            ).toUpperCase();
+            globalStatus.isOnline =
+                normalized.length > 0 &&
+                normalized !== "OFFLINE" &&
+                normalized !== "INVISIBLE";
         }
         if (serverResponse.client_name !== undefined) {
             globalStatus.currentClientName = serverResponse.client_name ?? null;
         }
         if (serverResponse.updated_at) {
             globalStatus.lastStatusUpdate = serverResponse.updated_at;
-            globalStatus.lastSeen = globalStatus.isOnline ? null : serverResponse.updated_at;
+            globalStatus.lastSeen = globalStatus.isOnline
+                ? null
+                : serverResponse.updated_at;
+        }
+        if (serverResponse.started_at) {
+            globalStatus.startedAt = serverResponse.started_at;
         }
 
-        const hasChanges = (
+        const hasChanges =
             oldStatus.isOnline !== globalStatus.isOnline ||
             oldStatus.currentClientName !== globalStatus.currentClientName ||
-            oldStatus.invisibleMode !== globalStatus.invisibleMode
-        );
+            oldStatus.invisibleMode !== globalStatus.invisibleMode ||
+            oldStatus.startedAt !== globalStatus.startedAt;
 
         if (hasChanges) {
-            console.log('Status change detected:', { ...globalStatus });
+            console.log("Status change detected:", { ...globalStatus });
         }
 
         return hasChanges;
     };
 
     const setOnline = (shouldQueue: boolean = true) => {
-        console.log('Setting user online (no client)');
+        console.log("Setting user online (no client)");
         globalStatus.isOnline = true;
         globalStatus.currentClientName = null;
-        if (shouldQueue) syncStatusToServer(true).catch(error => {
-            console.error('Immediate status update (online) failed:', error);
-        });
+        if (shouldQueue)
+            syncStatusToServer(true).catch((error) => {
+                console.error(
+                    "Immediate status update (online) failed:",
+                    error
+                );
+            });
     };
 
     const setOffline = (shouldQueue: boolean = true) => {
-        console.log('Setting user offline');
+        console.log("Setting user offline");
         globalStatus.isOnline = false;
         globalStatus.currentClientName = null;
-        if (shouldQueue) syncStatusToServer(true).catch(error => {
-            console.error('Immediate status update (offline) failed:', error);
-        });
+        if (shouldQueue)
+            syncStatusToServer(true).catch((error) => {
+                console.error(
+                    "Immediate status update (offline) failed:",
+                    error
+                );
+            });
     };
 
-    const setPlayingClient = (clientName?: string | null, shouldQueue: boolean = true) => {
-        console.log(`Setting user playing client name: ${clientName}`);
+    const setPlayingClient = (
+        clientName?: string | null,
+        shouldQueue: boolean = true
+    ) => {
+        console.log(`Setting user playing client name: ${clientName} `);
         globalStatus.isOnline = true;
-        if (clientName !== undefined) globalStatus.currentClientName = clientName ?? null;
-        if (shouldQueue) syncStatusToServer(true).catch(error => {
-            console.error('Immediate status update (client_change) failed:', error);
-        });
+        if (clientName !== undefined)
+            globalStatus.currentClientName = clientName ?? null;
+        if (shouldQueue)
+            syncStatusToServer(true).catch((error) => {
+                console.error(
+                    "Immediate status update (client_change) failed:",
+                    error
+                );
+            });
     };
 
     const setInvisibleMode = (enable: boolean, shouldQueue: boolean = true) => {
-        console.log(`Setting invisible mode: ${enable ? 'enabled' : 'disabled'}`);
+        console.log(
+            `Setting invisible mode: ${enable ? "enabled" : "disabled"} `
+        );
         globalStatus.invisibleMode = enable;
 
         if (enable) {
@@ -154,13 +193,19 @@ export function useUserStatus() {
         } else {
             globalStatus.isOnline = true;
         }
-        if (shouldQueue) syncStatusToServer(true).catch(error => {
-            console.error('Immediate status update (invisible_toggle) failed:', error);
-        });
+        if (shouldQueue)
+            syncStatusToServer(true).catch((error) => {
+                console.error(
+                    "Immediate status update (invisible_toggle) failed:",
+                    error
+                );
+            });
     };
 
     const setStreamerMode = (enable: boolean) => {
-        console.log(`Setting streamer mode: ${enable ? 'enabled' : 'disabled'}`);
+        console.log(
+            `Setting streamer mode: ${enable ? "enabled" : "disabled"} `
+        );
         streamer.setStreamerMode(enable);
     };
 
@@ -170,46 +215,42 @@ export function useUserStatus() {
         }
 
         const pollWrapper = async () => {
-            if (document && document.visibilityState === 'hidden') {
-                return;
-            }
-
             if (checkAuthStatus()) {
-                syncStatusToServer().catch(error => {
-                    console.error('Scheduled status sync failed:', error);
+                syncStatusToServer().catch((error) => {
+                    console.error("Scheduled status sync failed:", error);
                 });
             } else {
-                console.log('Auth check failed in sync interval, stopping sync');
+                console.log(
+                    "Auth check failed in sync interval, stopping sync"
+                );
                 await stopStatusSync();
             }
         };
 
         statusSyncInterval = setInterval(pollWrapper, pollingConfig.interval);
 
-        document.addEventListener('visibilitychange', () => {
-            if (document.visibilityState === 'visible') {
-                pollWrapper().catch(() => {
-                });
+        document.addEventListener("visibilitychange", () => {
+            if (document.visibilityState === "visible") {
+                pollWrapper().catch(() => {});
             }
         });
     };
 
     const startStatusSync = () => {
         if (!checkAuthStatus()) {
-            console.log('Cannot start status sync - user not authenticated');
+            console.log("Cannot start status sync - user not authenticated");
             return;
         }
 
-        syncStatusToServer(true).catch(error => {
-            console.error('Failed to sync status on start:', error);
+        syncStatusToServer(true).catch((error) => {
+            console.error("Failed to sync status on start:", error);
         });
 
         startPolling();
     };
 
-
     const stopStatusSync = async () => {
-        console.log('Stopping status sync...');
+        console.log("Stopping status sync...");
 
         if (statusSyncInterval) {
             clearInterval(statusSyncInterval);
@@ -221,45 +262,42 @@ export function useUserStatus() {
             try {
                 await syncStatusToServer(true);
             } catch (error) {
-                console.error('Failed to mark user offline on stop:', error);
+                console.error("Failed to mark user offline on stop:", error);
             }
         }
-        console.log('Status sync stopped');
+        console.log("Status sync stopped");
     };
 
-
     const forceSyncStatus = async () => {
         return await syncStatusToServer(true);
     };
 
-
     const fetchCurrentStatus = async () => {
         if (!checkAuthStatus()) return null;
 
         try {
-            const statusRaw = await apiClient.get('/users/me/status');
+            const statusRaw = await apiClient.get("/users/me/status");
             const status = extractApiData(statusRaw);
             updateLocalStatus(status);
             return status;
         } catch (error) {
-            console.error('Failed to fetch current status:', error);
+            console.error("Failed to fetch current status:", error);
             return null;
         }
     };
 
-
     const initializeStatusSystem = () => {
         checkAuthStatus();
         if (isAuthenticated.value) {
-
             setOnline(false);
             startStatusSync();
         } else {
-            console.log('User not authenticated, skipping status system initialization');
+            console.log(
+                "User not authenticated, skipping status system initialization"
+            );
         }
     };
 
-
     const restartStatusSystem = async () => {
         await stopStatusSync();
         await nextTick();
@@ -297,7 +335,7 @@ export function useUserStatus() {
         initializeStatusSystem,
         restartStatusSystem,
         fetchCurrentStatus,
-        checkAuthStatus
+        checkAuthStatus,
     };
 }
 
diff --git a/src/config.ts b/src/config.ts
index e2cdcbf8..2599df09 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,4 +1,4 @@
-import { invoke } from '@tauri-apps/api/core';
+import { invoke } from "@tauri-apps/api/core";
 
 let currentApiUrl = "";
 let isInitialized = false;
@@ -16,24 +16,30 @@ export const initializeApiUrl = (): Promise<string> => {
 
     initPromise = (async () => {
         try {
-            const result = await invoke<string>('get_api_url');
+            const result = await invoke<string>("get_api_url");
             if (result.length > 0) {
-                currentApiUrl = result.endsWith('/') ? result.slice(0, -1) : result;
-                console.log('API URL from backend:', currentApiUrl);
+                currentApiUrl = result.endsWith("/")
+                    ? result.slice(0, -1)
+                    : result;
+                console.log("API URL from backend:", currentApiUrl);
             } else {
-                throw new Error('Invalid API url from backend');
+                throw new Error("Invalid API url from backend");
             }
             try {
-                const ver = await invoke<string>('get_api_version');
+                const ver = await invoke<string>("get_api_version");
                 if (ver && ver.length > 0) {
                     currentApiVersion = ver;
-                    console.log('API version from backend:', currentApiVersion);
+                    console.log("API version from backend:", currentApiVersion);
                 }
             } catch (e) {
-                console.warn('Failed to get API version from backend, defaulting to', currentApiVersion, e);
+                console.warn(
+                    "Failed to get API version from backend, defaulting to",
+                    currentApiVersion,
+                    e
+                );
             }
         } catch (error) {
-            console.error('Failed to get API URL from backend:', error);
+            console.error("Failed to get API URL from backend:", error);
             currentApiUrl = "https://atlas.collapseloader.org";
         }
 
@@ -46,7 +52,8 @@ export const initializeApiUrl = (): Promise<string> => {
 
 export const getApiUrl = (): string => currentApiUrl;
 export const getApiVersion = (): string => currentApiVersion;
-export const getApiBaseWithVersion = (): string => `${currentApiUrl}/api/${currentApiVersion}`;
+export const getApiBaseWithVersion = (): string =>
+    `${currentApiUrl}/api/${currentApiVersion}`;
 export const ensureApiUrl = async (): Promise<string> => {
     if (isInitialized) return currentApiUrl;
     return initializeApiUrl();
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index a5afb937..0750d0f9 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -1,16 +1,18 @@
-import { createI18n } from 'vue-i18n';
-import { settingsService } from '../services/settingsService';
+import { createI18n } from "vue-i18n";
+import { settingsService } from "../services/settingsService";
 
-import en from './locales/en.json';
-import ru from './locales/ru.json';
-import ua from './locales/ua.json';
-import zh_cn from './locales/zh_cn.json'
+import en from "./locales/en.json";
+import ru from "./locales/ru.json";
+import ua from "./locales/ua.json";
+import zh_cn from "./locales/zh_cn.json";
+import pl from "./locales/pl.json";
 
 const messages = {
     en,
     ru,
     ua,
-    zh_cn
+    zh_cn,
+    pl,
 };
 
 interface Setting<T> {
@@ -28,51 +30,55 @@ const getInitialLanguage = async () => {
     try {
         await settingsService.loadSettings();
         const settings = settingsService.getSettings() as AppSettings | null;
-        if (settings && settings.language?.value && messages[settings.language.value as keyof typeof messages]) {
+        if (
+            settings &&
+            settings.language?.value &&
+            messages[settings.language.value as keyof typeof messages]
+        ) {
             return settings.language.value;
         }
     } catch (error) {
-        console.warn('Failed to load language from settings:', error);
+        console.warn("Failed to load language from settings:", error);
     }
 
-    return localStorage.getItem('language') || 'en';
+    return localStorage.getItem("language") || "en";
 };
 
 const getStoredLanguage = () => {
-    return localStorage.getItem('language') || 'en';
+    return localStorage.getItem("language") || "en";
 };
 
 const i18n = createI18n({
     legacy: false,
     locale: getStoredLanguage(),
-    fallbackLocale: 'en',
+    fallbackLocale: "en",
     messages,
-    globalInjection: true
+    globalInjection: true,
 });
 
 const initializeLanguage = async () => {
     const language = await getInitialLanguage();
     if (language !== i18n.global.locale.value) {
         i18n.global.locale.value = language as any;
-        document.documentElement.setAttribute('lang', language);
+        document.documentElement.setAttribute("lang", language);
     }
 };
 
-initializeLanguage().catch(error => {
-    console.warn('Failed to initialize language:', error);
+initializeLanguage().catch((error) => {
+    console.warn("Failed to initialize language:", error);
 });
 
 export default i18n;
 
 export const changeLanguage = async (locale: string) => {
     i18n.global.locale.value = locale as any;
-    localStorage.setItem('language', locale);
-    document.documentElement.setAttribute('lang', locale);
+    localStorage.setItem("language", locale);
+    document.documentElement.setAttribute("lang", locale);
 
     try {
-        await settingsService.editSetting('language', locale);
+        await settingsService.editSetting("language", locale);
     } catch (error) {
-        console.error('Failed to save language to settings:', error);
+        console.error("Failed to save language to settings:", error);
     }
 };
 
@@ -82,9 +88,10 @@ export const getCurrentLanguage = () => {
 
 export const getAvailableLanguages = () => {
     return [
-        { code: 'en', name: 'English', nativeName: 'English' },
-        { code: 'ru', name: 'Russian', nativeName: 'Русский' },
-        { code: 'ua', name: 'Ukrainian', nativeName: 'Українська' },
-        { code: 'zh_cn', name: 'Chinese', nativeName: '简体中文' }
+        { code: "en", name: "English", nativeName: "English" },
+        { code: "ru", name: "Russian", nativeName: "Русский" },
+        { code: "ua", name: "Ukrainian", nativeName: "Українська" },
+        { code: "zh_cn", name: "Chinese", nativeName: "简体中文" },
+        { code: "pl", name: "Polish", nativeName: "Polski" },
     ];
-};
\ No newline at end of file
+};
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 4a14b5ab..14b215a5 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1,1076 +1,1226 @@
 {
-  "modals": {
-    "initial_setup": {
-      "welcome": {
-        "title": "Welcome to CollapseLoader",
-        "description": "We'll guide you through a quick setup to optimize performance and privacy.",
-        "subtitle": "Quick setup to get you up and running",
-        "features": {
-          "fast_startup": "Fast startup — minimal waiting time",
-          "secure_clients": "Secure clients — verified and safe",
-          "auto_updates": "Automatic updates — keep loader and clients up to date"
-        }
-      },
-      "gui": {},
-      "ram": {
-        "title": "Memory Settings",
-        "subtitle": "Choose how much client memory to allocate for best performance",
-        "description": "Configure how much RAM to allocate for optimal performance",
-        "warning": "Warning: You have selected {selectedRamMb} MB of RAM. This exceeds the recommended limit of 6 GB and may cause performance issues or crashes."
-      },
-      "registration": {
-        "registering": "Registering..."
-      },
-      "feedback": {
-        "title": "Feedback",
-        "subtitle": "Connect and share feedback with our community",
-        "description": "Join our community",
-        "optional": "Optional, but we recommend to subscribe"
-      },
-      "telemetry": {
-        "title": "Optional Analytics",
-        "subtitle": "Share anonymous usage data to help us prioritize improvements (optional)",
-        "description": "Help us improve CollapseLoader by sharing anonymous usage data. You can change this setting anytime in the settings menu.",
-        "data_collected_title": "What we collect:",
-        "data_collected": {
-          "performance": "Performance metrics (startup time, memory usage)",
-          "usage_patterns": "Usage patterns (most used clients, launch frequency)",
-          "crash_reports": "Crash reports and errors to improve stability"
-        }
-      },
-      "appreciation": {
-        "title": "Thank You for Choosing CollapseLoader",
-        "subtitle": "You're all set — ready to start",
-        "description": "We hope you enjoy using our loader!"
-      },
-      "disclaimer": {
-        "title": "Disclaimer",
-        "responsibility": "The developers of CollapseLoader and the creators of any listed clients are not responsible for any consequences that may arise from your use of this software or the clients it provides access to.",
-        "acknowledgment": "By using this application, you accept all risks",
-        "accept": "I understand and accept"
-      },
-      "language_changed": "Language changed successfully!",
-      "language_change_failed": "Failed to change language. Please try again.",
-      "language_here": "You can change the language here"
-    },
-    "block_unblock_confirm": {
-      "block_message": "Are you sure you want to block {displayName}? This will remove them from your friends list and prevent future contact.",
-      "unblock_message": "Are you sure you want to unblock {displayName}? They will be able to send you friend requests again.",
-      "yes_unblock": "Yes, unblock",
-      "yes_block": "Yes, block"
-    },
-    "reset_confirm": {
-      "message": "Are you sure you want to reset all settings to their default values? This action cannot be undone.",
-      "yes_reset": "Yes, Reset"
+    "reports": {
+        "title": "Report {name}",
+        "description": "If someone is violating the rules or being toxic, please let us know.",
+        "reason_label": "Reason",
+        "select_reason": "Select a reason",
+        "reasons": {
+            "HARASSMENT": "Harassment",
+            "SPAM": "Spam",
+            "INAPPROPRIATE_CONTENT": "Inappropriate Content",
+            "OTHER": "Other"
+        },
+        "details_label": "Details (optional)",
+        "details_placeholder": "Provide more context about the situation...",
+        "submit": "Submit Report",
+        "report_user": "Report User",
+        "success_message": "Report submitted successfully. Thank you!",
+        "error_message": "Failed to submit report. Please try again later."
     },
-    "remove_friend_confirm": {
-      "message": "Are you sure you want to remove {displayName} from your friends? This action cannot be undone.",
-      "yes_remove": "Yes, Remove"
-    },
-    "cancel_friend_request_confirm": {
-      "message": "Are you sure you want to cancel your friend request to {displayName}?",
-      "yes_cancel": "Yes, Cancel Request",
-      "keep_request": "Keep Request"
-    },
-    "register_prompt": {
-      "title": "Create an Account",
-      "description": "Register an account to unlock all features and sync your settings across devices.",
-      "benefits": {
-        "sync": "Save and sync your settings (include themes, favorites, etc.)",
-        "notifications": "Receive notifications about updates"
-      },
-      "register_now": "Register Now",
-      "maybe_later": "Maybe Later"
+    "modals": {
+        "initial_setup": {
+            "welcome": {
+                "title": "Welcome to CollapseLoader",
+                "description": "We'll guide you through a quick setup to optimize performance and privacy.",
+                "subtitle": "Quick setup to get you up and running",
+                "features": {
+                    "fast_startup": "Fast startup — minimal waiting time",
+                    "secure_clients": "Secure clients — verified and safe",
+                    "auto_updates": "Automatic updates — keep loader and clients up to date"
+                }
+            },
+            "gui": {},
+            "ram": {
+                "title": "Memory Settings",
+                "subtitle": "Choose how much client memory to allocate for best performance",
+                "description": "Configure how much RAM to allocate for optimal performance",
+                "warning": "Warning: You have selected {selectedRamMb} MB of RAM. This exceeds the recommended limit of 6 GB and may cause performance issues or crashes."
+            },
+            "registration": {
+                "registering": "Registering..."
+            },
+            "feedback": {
+                "title": "Feedback",
+                "subtitle": "Connect and share feedback with our community",
+                "description": "Join our community",
+                "optional": "Optional, but we recommend to subscribe"
+            },
+            "telemetry": {
+                "title": "Optional Analytics",
+                "subtitle": "Share anonymous usage data to help us prioritize improvements (optional)",
+                "description": "Help us improve CollapseLoader by sharing anonymous usage data. You can change this setting anytime in the settings menu.",
+                "data_collected_title": "What we collect:",
+                "data_collected": {
+                    "performance": "Performance metrics (startup time, memory usage)",
+                    "usage_patterns": "Usage patterns (most used clients, launch frequency)",
+                    "crash_reports": "Crash reports and errors to improve stability"
+                }
+            },
+            "appreciation": {
+                "title": "Thank You for Choosing CollapseLoader",
+                "subtitle": "You're all set — ready to start",
+                "description": "We hope you enjoy using our loader!"
+            },
+            "disclaimer": {
+                "title": "Disclaimer",
+                "responsibility": "The developers of CollapseLoader and the creators of any listed clients are not responsible for any consequences that may arise from your use of this software or the clients it provides access to.",
+                "acknowledgment": "By using this application, you accept all risks",
+                "accept": "I understand and accept"
+            },
+            "language_changed": "Language changed successfully!",
+            "language_change_failed": "Failed to change language. Please try again.",
+            "language_here": "You can change the language here"
+        },
+        "block_unblock_confirm": {
+            "block_message": "Are you sure you want to block {displayName}? This will remove them from your friends list and prevent future contact.",
+            "unblock_message": "Are you sure you want to unblock {displayName}? They will be able to send you friend requests again.",
+            "yes_unblock": "Yes, unblock",
+            "yes_block": "Yes, block"
+        },
+        "reset_confirm": {
+            "message": "Are you sure you want to reset all settings to their default values? This action cannot be undone.",
+            "yes_reset": "Yes, Reset"
+        },
+        "remove_friend_confirm": {
+            "message": "Are you sure you want to remove {displayName} from your friends? This action cannot be undone.",
+            "yes_remove": "Yes, Remove"
+        },
+        "cancel_friend_request_confirm": {
+            "message": "Are you sure you want to cancel your friend request to {displayName}?",
+            "yes_cancel": "Yes, Cancel Request",
+            "keep_request": "Keep Request"
+        },
+        "register_prompt": {
+            "title": "Create an Account",
+            "description": "Register an account to unlock all features and sync your settings across devices.",
+            "benefits": {
+                "sync": "Save and sync your settings (include themes, favorites, etc.)",
+                "notifications": "Receive notifications about updates"
+            },
+            "register_now": "Register Now",
+            "maybe_later": "Maybe Later"
+        },
+        "edit_nickname": {
+            "label": "Nickname",
+            "placeholder": "Enter your nickname",
+            "description": "Optional - this is how others will see you",
+            "update": "Update Nickname"
+        },
+        "social_links": {
+            "title": "Social Links",
+            "add_title": "Add Social Link",
+            "edit_title": "Edit Social Link",
+            "fill_fields": "Please select a platform and enter a valid URL.",
+            "added": "Social link added.",
+            "add_failed": "Failed to add social link.",
+            "load_failed": "Failed to load social links.",
+            "deleted": "Social link deleted.",
+            "delete_failed": "Failed to delete social link.",
+            "updated": "Social link updated.",
+            "update_failed": "Failed to update social link.",
+            "hidden_in_streamer_mode": "Social links hidden in streamer mode."
+        },
+        "edit_account": {
+            "username_label": "Username",
+            "tags_label": "Tags (comma separated)",
+            "update": "Update Account"
+        },
+        "delete_account_confirm": {
+            "message": "Are you sure you want to delete the account \"{username}\"? This action cannot be undone.",
+            "yes_delete": "Yes, Delete"
+        },
+        "change_password_confirm": {
+            "message": "Are you sure you want to change your password? This will immediately update your account credentials.",
+            "warning": "If you lose access to your current password you may need to use account recovery to regain access.",
+            "yes_change": "Yes, change password"
+        },
+        "logout_confirm": {
+            "message": "Are you sure you want to log out of your account?",
+            "info": "This will sign you out and may require you to sign in again to access some features.",
+            "yes_logout": "Yes, log out"
+        },
+        "client_crash": {
+            "error_occurred": "An error occurred: {error}",
+            "crashed_message": "Client {clientName} has crashed. See the logs below for more details.",
+            "no_logs": "No logs available.",
+            "copy_logs": "Copy Logs",
+            "close": "Close"
+        },
+        "add_friend": {
+            "search_label": "Search for users",
+            "search_placeholder": "Enter username...",
+            "add_friend": "Add Friend",
+            "already_friends": "Already Friends",
+            "request_sent": "Request Sent",
+            "request_received": "Request Received",
+            "blocked": "Blocked",
+            "no_users_found": "No users found",
+            "search_hint": "Enter at least 2 characters to search",
+            "close": "Close"
+        },
+        "add_account": {
+            "username_label": "Username",
+            "username_placeholder": "Enter username",
+            "tags_label": "Tags (comma separated)",
+            "tags_placeholder": "e.g. funtime, spookytime",
+            "add_account": "Add Account"
+        },
+        "telemetry_consent": {
+            "title": "Optional Analytics Consent",
+            "description": "To improve your CollapseLoader experience, we may collect additional analytics. This data helps us understand how the application is being used and make it better.",
+            "data_collected_title": "What data we collect:",
+            "data_collected": {
+                "performance": "Performance metrics (startup time, memory usage)",
+                "usage_patterns": "Usage patterns (most used clients, launch frequency)",
+                "crash_reports": "Crash reports and errors to improve stability",
+                "feature_usage": "Application feature usage statistics"
+            },
+            "privacy_note_title": "Privacy: ",
+            "privacy_note": "All data is anonymous and contains no personal information. You can disable this feature at any time in settings.",
+            "accept": "Allow Analytics",
+            "decline": "Decline"
+        },
+        "insecure_client_warning": {
+            "modal_title": "Security Warning",
+            "title": "Unverified Client Warning",
+            "subtitle": "This client has not been checked for viruses",
+            "description": "You are about to launch \"{clientName}\", which has not been verified for malware or viruses. This client may contain potentially harmful code that could damage your system or compromise your security.",
+            "dont_show_again": "Don't show this warning again for this client",
+            "proceed_anyway": "Launch Anyway",
+            "cancel": "Cancel",
+            "close": "I understand"
+        },
+        "slow_download": {
+            "modal_title": "Slow Download Detected",
+            "title": "Slow Download Speed",
+            "subtitle": "Your download speed is lower than expected",
+            "description": "Your current download speed is slower than usual. This may result in longer download times.",
+            "current_speed": "Current Speed:",
+            "tip_1": "Check your internet connection",
+            "tip_2": "Try closing other applications using bandwidth",
+            "tip_3": "Consider retrying the download later",
+            "dont_show_again": "Don't show this warning again",
+            "stalled_modal_title": "Download Stalled",
+            "stalled_title": "Download Stuck",
+            "stalled_subtitle": "No progress detected",
+            "stalled_description": "Your download appears to be stuck. No data has been received for a while.",
+            "no_progress": "No download progress detected",
+            "tip_zapret": "If you are from CIS (Russia, Belarus, Kazakhstan, except Ukraine), your provider may block our domains. Try enabling 'DPI Bypass' in settings and restart the loader as administrator."
+        },
+        "add_custom_client": "Add custom client",
+        "edit_custom_client": "Edit client",
+        "delete_custom_client": "Delete custom client",
+        "client_added": "Client added",
+        "client_edited": "Client edited",
+        "client_deleted": "Client deleted",
+        "delete_custom_client_confirm": {},
+        "add_custom_client_modal": {
+            "client_name": "Client Name",
+            "enter_client_name": "Enter client name",
+            "minecraft_version": "Minecraft Version",
+            "main_class": "Main Class",
+            "main_class_placeholder": "e.g., net.minecraft.client.main.Main",
+            "jar_file": "JAR File",
+            "no_file_selected": "No file selected",
+            "select_jar_file": "Select a .jar file",
+            "selected": "Selected",
+            "adding": "Adding...",
+            "add_client": "Add Client"
+        },
+        "edit_custom_client_modal": {
+            "client_name": "Client Name",
+            "enter_client_name": "Enter client name",
+            "minecraft_version": "Minecraft Version",
+            "main_class": "Main Class",
+            "main_class_placeholder": "e.g., net.minecraft.client.main.Main",
+            "updating": "Updating...",
+            "update_client": "Update Client"
+        },
+        "delete_custom_client_confirm_modal": {
+            "title": "Delete Custom Client",
+            "description": "This action cannot be undone",
+            "deleting": "Deleting...",
+            "delete_client": "Delete Client"
+        }
     },
-    "edit_nickname": {
-      "label": "Nickname",
-      "placeholder": "Enter your nickname",
-      "description": "Optional - this is how others will see you",
-      "update": "Update Nickname"
+    "preloader": {
+        "initializing": "Initialization...",
+        "connecting_servers": "Connecting to servers...",
+        "ready": "Ready!",
+        "initializing_progress": "INITIALIZING LOADER",
+        "loading_user_data": "Loading user data..."
     },
-    "social_links": {
-      "title": "Social Links",
-      "add_title": "Add Social Link",
-      "edit_title": "Edit Social Link",
-      "fill_fields": "Please select a platform and enter a valid URL.",
-      "added": "Social link added.",
-      "add_failed": "Failed to add social link.",
-      "load_failed": "Failed to load social links.",
-      "deleted": "Social link deleted.",
-      "delete_failed": "Failed to delete social link.",
-      "updated": "Social link updated.",
-      "update_failed": "Failed to update social link.",
-      "hidden_in_streamer_mode": "Social links hidden in streamer mode."
+    "about": {
+        "title": "About CollapseLoader",
+        "version": "Version",
+        "codename": "Codename",
+        "commit": "Commit",
+        "description": "Join our community for updates, support, and to report any issues you may encounter.",
+        "open_failed": "Failed to open {platform}",
+        "branch": "Branch",
+        "development": "Development Mode",
+        "commit_message": "Commit Message"
     },
-    "edit_account": {
-      "username_label": "Username",
-      "tags_label": "Tags (comma separated)",
-      "update": "Update Account"
+    "account": {
+        "no_email": "No email",
+        "invisible_mode": "Invisible mode",
+        "invisible_mode_description": "When enabled, you'll appear offline to other users",
+        "streamer_mode": "Streamer mode",
+        "streamer_mode_description": "When enabled, all usernames will be hidden for privacy",
+        "streamer_enabled": "Streamer mode enabled",
+        "streamer_disabled": "Streamer mode disabled",
+        "streamer_failed": "Failed to toggle streamer mode",
+        "invisible_failed": "You must be online to change visibility settings",
+        "using_cached_data": "Offline mode - Status changes disabled",
+        "change_password": "Change password",
+        "change_password_confirm_title": "Confirm Password Change",
+        "current_password": "Current password",
+        "new_password": "New password",
+        "confirm_password": "Confirm password",
+        "password_change_failed": "Failed to change password. Please check your connection and try again.",
+        "password_change_success": "Password changed successfully!",
+        "password_too_short": "New password must be at least 8 characters long.",
+        "password_mismatch": "New passwords do not match.",
+        "nickname_update_failed": "Failed to update nickname. Please try again when online.",
+        "nickname_update_success": "Nickname updated successfully!",
+        "nickname_label": "Edit nickname",
+        "invisible_enabled": "Invisible mode enabled",
+        "invisible_disabled": "Invisible mode disabled",
+        "logout_confirm_title": "Confirm Logout",
+        "social_links": "Social Links",
+        "no_social_links": "No social links added yet.",
+        "avatar_help": "PNG, JPG, GIF, WEBP up to 5MB",
+        "avatar_drop": "Drop or click to upload avatar",
+        "upload_avatar": "Upload avatar",
+        "avatar_upload_refresh_failed": "Failed to refresh avatar after upload: {error}",
+        "avatar_type_error": "Unsupported file type",
+        "avatar_size_error": "File is too large (max 5MB)",
+        "avatar_uploaded": "Avatar updated",
+        "avatar_upload_failed": "Failed to upload avatar",
+        "reset_avatar": "Reset avatar",
+        "avatar_reset_success": "Avatar reset successfully",
+        "avatar_reset_failed": "Failed to reset avatar: {error}",
+        "favorite_client": "Favorite Client",
+        "favorite_client_description": "Select your favorite client to display on your profile",
+        "select_favorite_client": "Select favorite client",
+        "no_favorite_client": "No favorite client selected",
+        "current_favorite": "Current favorite",
+        "favorite_client_updated": "Favorite client updated successfully",
+        "favorite_client_update_failed": "Failed to update favorite client"
     },
-    "delete_account_confirm": {
-      "message": "Are you sure you want to delete the account \"{username}\"? This action cannot be undone.",
-      "yes_delete": "Yes, Delete"
+    "roles": {
+        "user": "User",
+        "tester": "Tester",
+        "admin": "Admin",
+        "developer": "Developer",
+        "owner": "Owner"
     },
-    "change_password_confirm": {
-      "message": "Are you sure you want to change your password? This will immediately update your account credentials.",
-      "warning": "If you lose access to your current password you may need to use account recovery to regain access.",
-      "yes_change": "Yes, change password"
+    "time": {
+        "offline": "Offline",
+        "online": "Online"
     },
-    "logout_confirm": {
-      "message": "Are you sure you want to log out of your account?",
-      "info": "This will sign you out and may require you to sign in again to access some features.",
-      "yes_logout": "Yes, log out"
+    "common": {
+        "logout": "Logout",
+        "back": "Back",
+        "unblock": "Unblock",
+        "next": "Next",
+        "previous": "Previous",
+        "delete": "Delete",
+        "username": "Username",
+        "password": "Password",
+        "login": "Login",
+        "register": "Register",
+        "download": "Download",
+        "please_wait": "Please wait",
+        "cancel": "Cancel",
+        "reinstall": "Reinstall",
+        "blocked": "Blocked",
+        "loading": "Loading...",
+        "ok": "Ok",
+        "close": "Close",
+        "save": "Save",
+        "browse": "Browse",
+        "edit": "Edit",
+        "add": "Add",
+        "details": "Details",
+        "send": "Send",
+        "copied_to_clipboard": "Color {color} copied to clipboard",
+        "done": "Done",
+        "click": "Click",
+        "show_more": "Show More",
+        "show_less": "Show Less",
+        "advanced": "Advanced",
+        "send_again": "Resend Email",
+        "back_to_login": "Back to Login",
+        "verification_sent": "Verification email sent!"
     },
-    "client_crash": {
-      "error_occurred": "An error occurred: {error}",
-      "crashed_message": "Client {clientName} has crashed. See the logs below for more details.",
-      "no_logs": "No logs available.",
-      "copy_logs": "Copy Logs",
-      "close": "Close"
+    "auth": {
+        "logout": {
+            "confirm": "Are you sure you want to log out of your account?",
+            "local_only": "Logout completed locally. There was an issue with server logout.",
+            "success": "Logged out successfully!"
+        },
+        "login": {
+            "title": "Login",
+            "username_placeholder": "Enter your username",
+            "password_placeholder": "Enter your password",
+            "login_button": "Login",
+            "register_link": "Don't have an account?",
+            "success": "Logged in successfully!",
+            "login_failed": "Login failed. Please check your credentials.",
+            "no_token": "No authentication token received.",
+            "error": "Cannot login, check your username and password "
+        },
+        "register": {
+            "title": "Register",
+            "username_placeholder": "Choose a username",
+            "email_placeholder": "Enter your email",
+            "password_placeholder": "Choose a password",
+            "confirm_password_placeholder": "Confirm password",
+            "register_button": "Register",
+            "login_link": "Already have an account?",
+            "registration_failed": "Registration failed. Please try again.",
+            "auto_login_failed": "Registration successful, but automatic login failed. Please log in manually.",
+            "verification_required": "Email Verification Required",
+            "check_email": "A verification email has been sent to {email}. Please check your inbox and follow the instructions to verify your account."
+        },
+        "verify": {
+            "code_label": "Verification Code",
+            "code_placeholder": "Enter verification code",
+            "verify_button": "Verify Email",
+            "success": "Email verified successfully!",
+            "error": "Invalid or expired verification code"
+        }
     },
-    "add_friend": {
-      "search_label": "Search for users",
-      "search_placeholder": "Enter username...",
-      "add_friend": "Add Friend",
-      "already_friends": "Already Friends",
-      "request_sent": "Request Sent",
-      "request_received": "Request Received",
-      "blocked": "Blocked",
-      "no_users_found": "No users found",
-      "search_hint": "Enter at least 2 characters to search",
-      "close": "Close"
+    "appLogs": {
+        "copyLogs": "Copy",
+        "autoScroll": "Auto scroll",
+        "noLogs": "No application logs available.",
+        "searchPlaceholder": "Search logs...",
+        "download": "Download Logs",
+        "filterByLevel": "Filter by level",
+        "noMatchingLogs": "No logs match your filters."
     },
-    "add_account": {
-      "username_label": "Username",
-      "username_placeholder": "Enter username",
-      "tags_label": "Tags (comma separated)",
-      "tags_placeholder": "e.g. funtime, spookytime",
-      "add_account": "Add Account"
+    "blockedUsers": {
+        "title": "Blocked Users ({count})",
+        "noBlockedUsers": "No blocked users. Blocked users will appear here."
     },
-    "telemetry_consent": {
-      "title": "Optional Analytics Consent",
-      "description": "To improve your CollapseLoader experience, we may collect additional analytics. This data helps us understand how the application is being used and make it better.",
-      "data_collected_title": "What data we collect:",
-      "data_collected": {
-        "performance": "Performance metrics (startup time, memory usage)",
-        "usage_patterns": "Usage patterns (most used clients, launch frequency)",
-        "crash_reports": "Crash reports and errors to improve stability",
-        "feature_usage": "Application feature usage statistics"
-      },
-      "privacy_note_title": "Privacy: ",
-      "privacy_note": "All data is anonymous and contains no personal information. You can disable this feature at any time in settings.",
-      "accept": "Allow Analytics",
-      "decline": "Decline"
+    "friends": {
+        "addFriend": "Add Friend",
+        "noFriends": "No friends yet. \nAdd some friends to get started!",
+        "receivedRequests": "Received",
+        "sentRequests": "Sent",
+        "title": "Friends ({count})",
+        "cancel_friend_request": "Cancel Friend Request",
+        "remove_success": "{name} removed from friends",
+        "block_success": "{name} has been blocked",
+        "unblock_success": "{name} has been unblocked",
+        "request_accepted": "Friend request accepted",
+        "request_rejected": "Friend request rejected",
+        "request_canceled": "Friend request canceled",
+        "remove_failed": "Failed to remove friend",
+        "block_failed": "Failed to block user",
+        "unblock_failed": "Failed to unblock user",
+        "request_failed": "Failed to {action} friend request",
+        "load_failed": "Failed to load friends data"
     },
-    "insecure_client_warning": {
-      "modal_title": "Security Warning",
-      "title": "Unverified Client Warning",
-      "subtitle": "This client has not been checked for viruses",
-      "description": "You are about to launch \"{clientName}\", which has not been verified for malware or viruses. This client may contain potentially harmful code that could damage your system or compromise your security.",
-      "dont_show_again": "Don't show this warning again for this client",
-      "proceed_anyway": "Launch Anyway",
-      "cancel": "Cancel",
-      "close": "I understand"
+    "home": {
+        "search_placeholder": "Search clients...",
+        "no_clients": "No clients found",
+        "adjust_search": "Try adjusting your search query.",
+        "favorite_added": "Added to favorites",
+        "favorite_removed": "Removed from favorites",
+        "starting_download": "Starting download for {name}",
+        "no_internet": "Cannot download client: No internet connection.",
+        "not_installed": "{name} is not installed. Please download it first.",
+        "launching": "Launching {client}...",
+        "stopping": "Stopping {name}...",
+        "opened_folder": "Opened folder for {name}",
+        "reinstalling": "Reinstalling {name}...",
+        "no_internet_reinstall": "Cannot reinstall client: No internet connection.",
+        "logs_copied": "Logs for {name} copied to clipboard",
+        "deleted_success": "{name} deleted successfully",
+        "unavailable": "Unavailable",
+        "download": "Download",
+        "stop": "Stop",
+        "launch": "Launch",
+        "launch_another": "Launch another instance",
+        "start_with": "Start with",
+        "selected_clients": "Selected: {count} clients",
+        "multiple_clients_selected": "{count} clients selected",
+        "download_selected": "Download Selected",
+        "reinstall_selected": "Reinstall Selected",
+        "delete_selected": "Delete Selected",
+        "downloading_multiple": "Downloading {count} clients...",
+        "deleting_multiple": "Deleting {count} clients...",
+        "reinstalling_multiple": "Reinstalling {count} clients...",
+        "multiple_clients_deleted": "{count} clients deleted successfully",
+        "multiple_clients_reinstalled": "{count} clients reinstalled successfully",
+        "no_clients_to_download": "No clients available for download",
+        "no_clients_to_delete": "No installed clients to delete",
+        "no_clients_to_reinstall": "No installed clients to reinstall",
+        "stop_selected": "Stop selected clients",
+        "stopping_multiple": "Stopping {count} clients",
+        "multiple_clients_stopped": "{count} clients stopped successfully",
+        "filters_title": "Filters",
+        "sort": {
+            "popularity": "Popularity",
+            "name": "By name",
+            "newest": "Newest",
+            "version": "By version",
+            "order": {
+                "asc": "Ascending",
+                "desc": "Descending"
+            },
+            "rating": "By rating"
+        },
+        "filters": {
+            "installed": "Installed"
+        },
+        "clear_filters": "Clear filters"
     },
-    "slow_download": {
-      "modal_title": "Slow Download Detected",
-      "title": "Slow Download Speed",
-      "subtitle": "Your download speed is lower than expected",
-      "description": "Your current download speed is slower than usual. This may result in longer download times.",
-      "current_speed": "Current Speed:",
-      "tip_1": "Check your internet connection",
-      "tip_2": "Try closing other applications using bandwidth",
-      "tip_3": "Consider retrying the download later",
-      "dont_show_again": "Don't show this warning again",
-      "stalled_modal_title": "Download Stalled",
-      "stalled_title": "Download Stuck",
-      "stalled_subtitle": "No progress detected",
-      "stalled_description": "Your download appears to be stuck. No data has been received for a while.",
-      "no_progress": "No download progress detected",
-      "tip_zapret": "If you are from CIS (Russia, Belarus, Kazakhstan, except Ukraine), your provider may block our domains. Try enabling 'DPI Bypass' in settings and restart the loader as administrator."
+    "theme": {
+        "actions": {
+            "add_favorite": "Add to Favorites",
+            "remove_favorite": "Remove from Favorites",
+            "open_folder": "Open Folder"
+        },
+        "select_theme": "Select Theme",
+        "description": "Select your preferred theme.",
+        "change_success": "Theme changed",
+        "save_failed": "Failed to save theme: {error}",
+        "reset_button": "Reset",
+        "expert_css_title": "Expert CSS Customization",
+        "show_expert": "Show Expert",
+        "hide_expert": "Hide Expert",
+        "expert_warning": "Advanced users only. Invalid CSS may break the interface.",
+        "custom_css_label": "Custom CSS",
+        "enable_custom_css": "Enable custom CSS",
+        "css_examples_title": "Examples",
+        "example_1": "Add backdrop blur to cards",
+        "example_inserted": "Example inserted",
+        "enable_custom_css_first": "Enable custom css first",
+        "selected": "Selected",
+        "insert_example": "Insert",
+        "available_classes_label": "Available classes for editing (click to insert them into code)",
+        "tooltip_client_card": "Main class of the client card",
+        "tooltip_sidebar_btn": "Class for left navigation buttons",
+        "tooltip_launch_download_btn": "Classes of download and launch buttons",
+        "export_css_btn": "Export CSS",
+        "import_css_btn": "Import CSS",
+        "export_css_title": "Export Custom CSS",
+        "import_css_title": "Import Custom CSS",
+        "export_desc": "Copy the encoded CSS below and share it. Only safe CSS is allowed.",
+        "import_desc": "Paste the encoded CSS here to import. Only safe CSS is allowed.",
+        "copy": "Copy",
+        "copied": "Copied!",
+        "copy_failed": "Failed to copy",
+        "import": "Import",
+        "import_success": "Preset imported successfully!",
+        "import_invalid": "Invalid preset. Import failed.",
+        "primary": "Primary color",
+        "export_success": "Preset copied to clipboard",
+        "export_failed": "Failed to export preset",
+        "colors": "Colors",
+        "base_colors": "Base Colors",
+        "base100": "Base 100",
+        "base200": "Base 200",
+        "base300": "Base 300",
+        "base_content": "Base content",
+        "primary_secondary_accent": "Primary / Secondary / Accent",
+        "primary_content": "Primary content",
+        "secondary": "Secondary",
+        "secondary_content": "Secondary content",
+        "accent": "Accent",
+        "accent_content": "Accent content",
+        "semantic_colors": "Semantic Colors",
+        "neutral": "Neutral",
+        "neutral_content": "Neutral content",
+        "info": "Info",
+        "info_content": "Info content",
+        "success": "Success",
+        "success_content": "Success content",
+        "warning": "Warning",
+        "warning_content": "Warning content",
+        "error": "Error",
+        "error_content": "Error content",
+        "preset": "Preset",
+        "presets": {
+            "title": "Theme Presets",
+            "description": "Save and manage your customization presets",
+            "save_current": "Save Current",
+            "import": "Import",
+            "pagination": {
+                "per_page": "Per page",
+                "page_of": "Page {current} of {total}"
+            },
+            "create_first_preset": "Create First Preset",
+            "no_presets_title": "No presets yet",
+            "no_presets_description": "Create your first preset by saving your current customization settings",
+            "loading": "Loading presets...",
+            "apply_preset": "Apply Preset",
+            "edit": "Edit",
+            "duplicate": "Duplicate",
+            "export": "Export",
+            "delete": "Delete",
+            "apply": "Apply",
+            "created": "Created {date}",
+            "selected_count": "Selected presets: {count}",
+            "actions": {
+                "apply_first": "Apply first selected",
+                "export_selected": "Export selected",
+                "duplicate_selected": "Duplicate selected",
+                "delete_selected": "Delete selected"
+            },
+            "create_modal": {
+                "name_label": "Preset Name",
+                "name_required": "Preset name is required",
+                "name_too_long": "Preset name must be 50 characters or less",
+                "name_placeholder": "Enter preset name",
+                "description_label": "Description",
+                "description_placeholder": "Optional description for this preset",
+                "source_info": "Preset Source",
+                "source_create": "Will capture current customization settings",
+                "source_edit": "Editing existing preset",
+                "create_button": "Create Preset",
+                "update_button": "Update Preset",
+                "cancel": "Cancel"
+            },
+            "import_modal": {
+                "method_label": "Import Method",
+                "method_file": "File",
+                "method_json": "JSON",
+                "file_label": "Select Preset File",
+                "file_help": "Choose a .json preset file",
+                "json_label": "Paste JSON Data",
+                "json_placeholder": "Paste your preset JSON data here...",
+                "preview_title": "Preview",
+                "preview_name": "Name",
+                "preview_description": "Description",
+                "import_button": "Import Preset",
+                "importing": "Importing...",
+                "cancel": "Cancel",
+                "error_invalid_file": "Invalid JSON file",
+                "error_no_name": "Preset must have a name",
+                "error_invalid_json": "Invalid JSON"
+            },
+            "delete_modal": {
+                "message": "Are you sure you want to delete the preset \"{name}\"?",
+                "warning": "This action cannot be undone.",
+                "delete_button": "Delete Preset",
+                "cancel": "Cancel"
+            },
+            "messages": {
+                "load_error": "Failed to load presets",
+                "create_success": "Preset \"{name}\" created successfully",
+                "create_error": "Failed to create preset",
+                "update_success": "Preset \"{name}\" updated successfully",
+                "update_error": "Failed to update preset",
+                "delete_success": "Preset \"{name}\" deleted successfully",
+                "delete_error": "Failed to delete preset",
+                "duplicate_success": "Preset \"{name}\" duplicated successfully",
+                "duplicate_error": "Failed to duplicate preset",
+                "apply_success": "Preset \"{name}\" applied successfully",
+                "apply_error": "Failed to apply preset \"{name}\": {error}",
+                "import_success": "Preset \"{name}\" imported successfully",
+                "import_no_name": "Imported preset is missing a name",
+                "import_error": "Failed to import preset: {error}",
+                "multiple_deleted": "{count} presets deleted successfully",
+                "multiple_duplicated": "{count} presets duplicated successfully",
+                "multiple_exported": "{count} presets exported to clipboard"
+            }
+        },
+        "dark": "Dark",
+        "light": "Light"
     },
-    "add_custom_client": "Add custom client",
-    "edit_custom_client": "Edit client",
-    "delete_custom_client": "Delete custom client",
-    "client_added": "Client added",
-    "client_edited": "Client edited",
-    "client_deleted": "Client deleted",
-    "delete_custom_client_confirm": {},
-    "add_custom_client_modal": {
-      "client_name": "Client Name",
-      "enter_client_name": "Enter client name",
-      "minecraft_version": "Minecraft Version",
-      "main_class": "Main Class",
-      "main_class_placeholder": "e.g., net.minecraft.client.main.Main",
-      "jar_file": "JAR File",
-      "no_file_selected": "No file selected",
-      "select_jar_file": "Select a .jar file",
-      "selected": "Selected",
-      "adding": "Adding...",
-      "add_client": "Add Client"
+    "logs": {
+        "copy_logs": "Copy logs",
+        "title": "{client} Logs",
+        "view": "View logs"
     },
-    "edit_custom_client_modal": {
-      "client_name": "Client Name",
-      "enter_client_name": "Enter client name",
-      "minecraft_version": "Minecraft Version",
-      "main_class": "Main Class",
-      "main_class_placeholder": "e.g., net.minecraft.client.main.Main",
-      "updating": "Updating...",
-      "update_client": "Update Client"
+    "installation": {
+        "downloading": "Downloading",
+        "extracting": "Extracting",
+        "download_complete": "Download Complete",
+        "installation_complete": "Installation Complete"
     },
-    "delete_custom_client_confirm_modal": {
-      "title": "Delete Custom Client",
-      "description": "This action cannot be undone",
-      "deleting": "Deleting...",
-      "delete_client": "Delete Client"
-    }
-  },
-  "preloader": {
-    "initializing": "Initialization...",
-    "connecting_servers": "Connecting to servers...",
-    "ready": "Ready!"
-  },
-  "about": {
-    "title": "About CollapseLoader",
-    "version": "Version",
-    "codename": "Codename",
-    "commit": "Commit",
-    "description": "Join our community for updates, support, and to report any issues you may encounter.",
-    "open_failed": "Failed to open {platform}",
-    "branch": "Branch",
-    "development": "Development Mode"
-  },
-  "account": {
-    "no_email": "No email",
-    "invisible_mode": "Invisible mode",
-    "invisible_mode_description": "When enabled, you'll appear offline to other users",
-    "streamer_mode": "Streamer mode",
-    "streamer_mode_description": "When enabled, all usernames will be hidden for privacy",
-    "streamer_enabled": "Streamer mode enabled",
-    "streamer_disabled": "Streamer mode disabled",
-    "streamer_failed": "Failed to toggle streamer mode",
-    "invisible_failed": "You must be online to change visibility settings",
-    "using_cached_data": "Offline mode - Status changes disabled",
-    "change_password": "Change password",
-    "change_password_confirm_title": "Confirm Password Change",
-    "current_password": "Current password",
-    "new_password": "New password",
-    "confirm_password": "Confirm password",
-    "password_change_failed": "Failed to change password. Please check your connection and try again.",
-    "password_change_success": "Password changed successfully!",
-    "password_too_short": "New password must be at least 8 characters long.",
-    "password_mismatch": "New passwords do not match.",
-    "nickname_update_failed": "Failed to update nickname. Please try again when online.",
-    "nickname_update_success": "Nickname updated successfully!",
-    "nickname_label": "Edit nickname",
-    "invisible_enabled": "Invisible mode enabled",
-    "invisible_disabled": "Invisible mode disabled",
-    "logout_confirm_title": "Confirm Logout",
-    "social_links": "Social Links",
-    "no_social_links": "No social links added yet.",
-    "avatar_help": "PNG, JPG, GIF, WEBP up to 5MB",
-    "avatar_drop": "Drop or click to upload avatar",
-    "upload_avatar": "Upload avatar",
-    "avatar_upload_refresh_failed": "Failed to refresh avatar after upload: {error}",
-    "avatar_type_error": "Unsupported file type",
-    "avatar_size_error": "File is too large (max 5MB)",
-    "avatar_uploaded": "Avatar updated",
-    "avatar_upload_failed": "Failed to upload avatar",
-    "reset_avatar": "Reset avatar",
-    "avatar_reset_success": "Avatar reset successfully",
-    "avatar_reset_failed": "Failed to reset avatar: {error}"
-  },
-  "roles": {
-    "USER": "User",
-    "TESTER": "Tester",
-    "ADMIN": "Admin",
-    "DEVELOPER": "Developer",
-    "OWNER": "Owner"
-  },
-  "time": {
-    "offline": "Offline",
-    "online": "Online"
-  },
-  "common": {
-    "logout": "Logout",
-    "back": "Back",
-    "unblock": "Unblock",
-    "next": "Next",
-    "previous": "Previous",
-    "delete": "Delete",
-    "username": "Username",
-    "password": "Password",
-    "login": "Login",
-    "register": "Register",
-    "download": "Download",
-    "please_wait": "Please wait",
-    "cancel": "Cancel",
-    "reinstall": "Reinstall",
-    "blocked": "Blocked",
-    "loading": "Loading...",
-    "ok": "Ok",
-    "close": "Close",
-    "save": "Save",
-    "browse": "Browse",
-    "edit": "Edit",
-    "add": "Add",
-    "details": "Details",
-    "send": "Send",
-    "copied_to_clipboard": "Color {color} copied to clipboard",
-    "done": "Done",
-    "click": "Click"
-  },
-  "auth": {
-    "logout": {
-      "confirm": "Are you sure you want to log out of your account?",
-      "local_only": "Logout completed locally. There was an issue with server logout.",
-      "success": "Logged out successfully!"
+    "errors": {
+        "clients_load_failed": "Failed to load clients: {error}",
+        "clients_unavailable": "Clients are currently unavailable.",
+        "stop_error": "Failed to stop client: {error}",
+        "folder_error": "Failed to open data folder: {error}",
+        "reinstall_error": "Failed to reinstall {name}: {error}",
+        "logs_error": "Failed to access logs: {error}",
+        "delete_error": "Failed to delete {name}: {error}",
+        "download_error": "Failed to download {name}: {error}",
+        "load_accounts_error": "Error loading accounts: {error}",
+        "launch_with_account_error": "Error launching client with account: {error}",
+        "download_network_error": "Network connection error while downloading: {error}",
+        "download_timeout_error": "Download timed out. Please check your connection: {error}",
+        "download_disk_error": "Failed to save file to disk. Please check available storage: {error}",
+        "hash_verification_failed": "File integrity check failed for {name}. The downloaded file is corrupted and has been removed. Please try downloading again.",
+        "hash_verification_launch_failed": "Cannot check hash for client {name}"
     },
-    "login": {
-      "title": "Login",
-      "username_placeholder": "Enter your username",
-      "password_placeholder": "Enter your password",
-      "login_button": "Login",
-      "register_link": "Don't have an account?",
-      "success": "Logged in successfully!",
-      "login_failed": "Login failed. Please check your credentials.",
-      "no_token": "No authentication token received."
+    "validation": {
+        "passwords_no_match": "Passwords do not match.",
+        "min_length": "{field} must be at least {length} characters long."
     },
-    "register": {
-      "title": "Register",
-      "username_placeholder": "Choose a username",
-      "email_placeholder": "Enter your email",
-      "password_placeholder": "Choose a password",
-      "confirm_password_placeholder": "Confirm password",
-      "register_button": "Register",
-      "login_link": "Already have an account?",
-      "registration_failed": "Registration failed. Please try again.",
-      "auto_login_failed": "Registration successful, but automatic login failed. Please log in manually."
-    }
-  },
-  "appLogs": {
-    "copyLogs": "Copy",
-    "autoScroll": "Auto scroll",
-    "noLogs": "No application logs available.",
-    "searchPlaceholder": "Search logs...",
-    "download": "Download Logs",
-    "filterByLevel": "Filter by level",
-    "noMatchingLogs": "No logs match your filters."
-  },
-  "blockedUsers": {
-    "title": "Blocked Users ({count})",
-    "noBlockedUsers": "No blocked users. Blocked users will appear here."
-  },
-  "friends": {
-    "addFriend": "Add Friend",
-    "noFriends": "No friends yet. \nAdd some friends to get started!",
-    "receivedRequests": "Received",
-    "sentRequests": "Sent",
-    "title": "Friends ({count})",
-    "cancel_friend_request": "Cancel Friend Request",
-    "remove_success": "{name} removed from friends",
-    "block_success": "{name} has been blocked",
-    "unblock_success": "{name} has been unblocked",
-    "request_accepted": "Friend request accepted",
-    "request_rejected": "Friend request rejected",
-    "request_canceled": "Friend request canceled",
-    "remove_failed": "Failed to remove friend",
-    "block_failed": "Failed to block user",
-    "unblock_failed": "Failed to unblock user",
-    "request_failed": "Failed to {action} friend request",
-    "load_failed": "Failed to load friends data"
-  },
-  "home": {
-    "search_placeholder": "Search clients...",
-    "no_clients": "No clients found",
-    "adjust_search": "Try adjusting your search query.",
-    "favorite_added": "Added to favorites",
-    "favorite_removed": "Removed from favorites",
-    "starting_download": "Starting download for {name}",
-    "no_internet": "Cannot download client: No internet connection.",
-    "not_installed": "{name} is not installed. Please download it first.",
-    "launching": "Launching {client}...",
-    "stopping": "Stopping {name}...",
-    "opened_folder": "Opened folder for {name}",
-    "reinstalling": "Reinstalling {name}...",
-    "no_internet_reinstall": "Cannot reinstall client: No internet connection.",
-    "logs_copied": "Logs for {name} copied to clipboard",
-    "deleted_success": "{name} deleted successfully",
-    "unavailable": "Unavailable",
-    "download": "Download",
-    "stop": "Stop",
-    "launch": "Launch",
-    "start_with": "Start with",
-    "selected_clients": "Selected: {count} clients",
-    "multiple_clients_selected": "{count} clients selected",
-    "download_selected": "Download Selected",
-    "reinstall_selected": "Reinstall Selected",
-    "delete_selected": "Delete Selected",
-    "downloading_multiple": "Downloading {count} clients...",
-    "deleting_multiple": "Deleting {count} clients...",
-    "reinstalling_multiple": "Reinstalling {count} clients...",
-    "multiple_clients_deleted": "{count} clients deleted successfully",
-    "multiple_clients_reinstalled": "{count} clients reinstalled successfully",
-    "no_clients_to_download": "No clients available for download",
-    "no_clients_to_delete": "No installed clients to delete",
-    "no_clients_to_reinstall": "No installed clients to reinstall",
-    "stop_selected": "Stop selected clients",
-    "stopping_multiple": "Stopping {count} clients",
-    "multiple_clients_stopped": "{count} clients stopped successfully",
-    "filters_title": "Filters",
-    "sort": {
-      "popularity": "Popularity",
-      "name": "By name",
-      "newest": "Newest",
-      "version": "By version",
-      "order": {
-        "asc": "Ascending",
-        "desc": "Descending"
-      },
-      "rating": "By rating"
+    "irc": {
+        "inline": {
+            "title": "Global Chat",
+            "latest_activity_connected": "Connected to IRC chat",
+            "tap_to_connect": "Tap to connect to IRC",
+            "placeholder": "Type a message...",
+            "send_failed": "Failed to send message",
+            "connection_error": "Connection Error: {error}",
+            "status": {
+                "connected": "Connected",
+                "reconnecting": "Reconnecting...",
+                "connecting": "Connecting...",
+                "error": "Connection issue",
+                "disconnected": "Disconnected"
+            },
+            "privateMessage": "Private message",
+            "copyNickname": "Copy nickname"
+        }
     },
-    "filters": {
-      "installed": "Installed"
+    "settings": {
+        "general": "Settings",
+        "sync": "Cloud Sync",
+        "accounts": "Accounts",
+        "accounts_management": "Accounts Management",
+        "accounts_description": "Manage your game accounts and switch between them easily",
+        "search_accounts": "Search accounts...",
+        "no_matching_accounts": "No matching accounts found",
+        "try_different_search": "Try adjusting your search or filters",
+        "reset_tooltip": "Reset to defaults",
+        "local_account_sync": "Local account sync",
+        "local_account_sync_description": "Keep your CollapseLoader accounts synced with Atlas so you can restore them on other devices.",
+        "sync_accounts_from_cloud_button": "Import Atlas accounts",
+        "sync_accounts_to_cloud_button": "Upload local accounts",
+        "remote_accounts_loading": "Checking Atlas for synced accounts...",
+        "remote_accounts_present": "{count} accounts are synced with Atlas.",
+        "remote_accounts_more": "and {count} more saved on Atlas",
+        "remote_accounts_empty": "No accounts synced to Atlas yet.",
+        "sync_status": "Cloud Sync Status",
+        "sync_controls": "Sync Controls",
+        "upload_title": "Upload to Cloud",
+        "upload_description": "Backup your current settings, favorites, and accounts to the cloud.",
+        "upload_button": "Upload Now",
+        "download_title": "Download from Cloud",
+        "download_description": "Restore your settings, favorites, and accounts from the cloud.",
+        "download_button": "Download Now",
+        "syncing": "Syncing...",
+        "auto_sync": "Auto-sync",
+        "auto_sync_description": "Automatically sync your data to the cloud every 5 minutes when online.",
+        "offline_warning": "You are currently offline. Sync features are disabled.",
+        "no_cloud_data": "No cloud data found. Upload your data to get started with cloud sync.",
+        "add_account": "Add Account",
+        "active": "Active",
+        "tags": "Tags",
+        "created": "Created",
+        "last_used": "Last used",
+        "no_accounts_title": "No accounts yet",
+        "no_accounts_description": "Add your first account to get started",
+        "account_set_active": "{username} is now the active account!",
+        "account_set_active_failed": "Failed to set active account: {error}",
+        "download_success": "Downloaded from cloud successfully!",
+        "download_failed": "Download from cloud failed: {error}",
+        "sync_accounts_to_cloud_success": "Local accounts synced to Atlas successfully!",
+        "sync_accounts_to_cloud_failed": "Failed to sync local accounts to Atlas: {error}",
+        "sync_accounts_from_cloud_success": "Imported accounts from Atlas successfully!",
+        "sync_accounts_from_cloud_failed": "Failed to import accounts from Atlas: {error}",
+        "load_remote_accounts_failed": "Failed to load Atlas accounts: {error}",
+        "load_settings_failed": "Failed to load settings: {error}",
+        "save_settings_failed": "Failed to save settings: {error}",
+        "load_accounts_failed": "Failed to load accounts: {error}",
+        "load_flags_failed": "Failed to load flags: {error}",
+        "language_change_failed": "Failed to change language: {error}",
+        "ram": {
+            "warning": "Warning: You have selected {selectedRamMb} MB of RAM. This exceeds the recommended 6 GB limit and may cause performance issues or crashes."
+        },
+        "descriptions": {
+            "ram": "Amount of RAM to allocate in MB.",
+            "language": "The application language (e.g., en, ru).",
+            "discord_rpc_enabled": "Enable Discord Rich Presence to show your activity in Discord.",
+            "optional_telemetry": "Allow anonymous analytics to help improve CollapseLoader. No personal information is collected.",
+            "cordshare": "Share your coordinates with friends to show your location in-game, even when you're outside loaded chunks.",
+            "irc_chat": "Chat with other CollapseLoader users in the IRC chat available in each client.",
+            "hash_verify": "Enable hash verification to ensure downloaded clients are not corrupted. This helps keep your clients up to date.",
+            "dpi_bypass": "Enable if a client download is stuck at 0%, the client won't start, or clients fail to load.",
+            "sync_client_settings": "Sync options, resourcepacks, and other settings across all clients.",
+            "minimize_to_tray_on_launch": "Minimize the app to system tray when a client is launched.",
+            "close_to_tray": "Minimize the app to system tray instead of closing when the close button is clicked.",
+            "java_path": "Path to the Java executable. Leave empty to use the default version.",
+            "java_args": "Custom JVM arguments to pass to the client on launch."
+        },
+        "ram_warning": {},
+        "telemetry": "Analytics",
+        "open_data": "Open data folder",
+        "add_account_title": "Add New Account",
+        "edit_account_title": "Edit account",
+        "reset_title": "Reset Settings Confirmation",
+        "delete_account_title": "Delete Account Confirmation",
+        "actions": "Actions",
+        "toast_position": {
+            "title": "Toast Position",
+            "description": "Choose where notifications appear on your screen",
+            "bottom_right": "Bottom Right",
+            "bottom_left": "Bottom Left",
+            "top_right": "Top Right",
+            "top_left": "Top Left",
+            "bottom_center": "Bottom Center",
+            "top_center": "Top Center",
+            "preview_message": "Toast position changed!"
+        },
+        "telemetry_info_title": "Info about telemetry",
+        "reset_requirements": "Reset loader files",
+        "reset_requirements_success": "Successfully removed requirements, now download any client",
+        "reset_requirements_failed": "Cannot remove requirements, try again or restart loader",
+        "login_required": "You will need to log into your account to use this feature.",
+        "reset_cache_failed": "Cannot remove cache, try again",
+        "hash_verify": "Hash verify",
+        "irc_chat": "IRC Chat",
+        "save_flags_failed": "Failed to save flags: {error}",
+        "change_root": {
+            "title": "Change Data Folder",
+            "action": "Change data folder",
+            "target_folder": "Target folder",
+            "hint": "Choose the folder where CollapseLoader files (clients, cache, etc.) will be stored",
+            "mode": "What to do with the old folder?",
+            "mode_move": "Move",
+            "mode_wipe": "Delete",
+            "mode_move_desc": "Move all data from the old folder to the new one (recommended)",
+            "mode_wipe_desc": "Delete the old folder (all data will be removed)",
+            "select_folder_first": "Select a folder first",
+            "success": "Data folder changed",
+            "failed": "Failed to change data folder: {error}",
+            "restart_required": "Please restart the app for changes to take effect"
+        },
+        "sync_client_settings": "Sync client settings",
+        "minimize_to_tray_on_launch": "Minimize to tray on launch",
+        "close_to_tray": "Close to tray",
+        "reset_settings": "Reset settings",
+        "sync_login_required": "Sign in to enable syncing",
+        "not_signed_in": "You are not logged in"
     },
-    "clear_filters": "Clear filters"
-  },
-  "theme": {
-    "actions": {
-      "add_favorite": "Add to Favorites",
-      "remove_favorite": "Remove from Favorites",
-      "open_folder": "Open Folder"
+    "userProfile": {
+        "back_to_friends": "Back to Friends",
+        "profile_information": "Profile Information",
+        "username": "Username",
+        "nickname": "Nickname",
+        "member_since": "Member since",
+        "actions": "Actions",
+        "online": "Online",
+        "offline": "Offline",
+        "playing": "Playing",
+        "last_seen": "Last seen",
+        "just_now": "just now",
+        "minutes_ago": "{count}m ago",
+        "hours_ago": "{count}h ago",
+        "days_ago": "{count}d ago",
+        "friends_with": "You are friends with {name}",
+        "remove_friend": "Remove Friend",
+        "friend_request_sent": "Friend request sent to {name}",
+        "friend_request_received": "{name} sent you a friend request",
+        "accept": "Accept",
+        "decline": "Decline",
+        "user_blocked": "This user is blocked",
+        "send_friend_request": "Send Friend Request",
+        "sending": "Sending...",
+        "canceling": "Canceling...",
+        "cancel_friend_request": "Cancel Request",
+        "block_user": "Block User",
+        "unblock_user": "Unblock User",
+        "report_user": "Report User",
+        "no_user_id": "No user ID provided",
+        "user_not_found": "User not found",
+        "login_required": "You need to be logged in to view profiles",
+        "profile_load_failed": "Failed to load user profile",
+        "favorite_client": "Favorite Client",
+        "friend_request_sent_success": "Friend request sent to {name}",
+        "friend_request_failed": "Failed to send friend request: {error}",
+        "copy_username": "Copy username",
+        "copied_username": "{name} copied to clipboard",
+        "copy_failed": "Failed to copy username",
+        "friend_request_canceled": "Friend request canceled successfully",
+        "friend_request_cancel_failed": "Failed to cancel friend request",
+        "friend_removed_success": "{name} removed from friends",
+        "friend_remove_failed": "Failed to remove friend",
+        "friend_request_responded": "Friend request {action}ed",
+        "friend_request_respond_failed": "Failed to {action} friend request",
+        "friend_request_not_found": "Friend request not found",
+        "user_blocked_success": "{name} has been blocked",
+        "user_block_failed": "Failed to block user",
+        "presets_title": "Presets",
+        "presets": "presets",
+        "presets_hidden_streamer": "Presets are hidden in streamer mode.",
+        "no_presets": "This user hasn't shared any presets yet.",
+        "create_preset": "Create Preset"
     },
-    "select_theme": "Select Theme",
-    "description": "Select your preferred theme.",
-    "change_success": "Theme changed",
-    "save_failed": "Failed to save theme: {error}",
-    "reset_button": "Reset",
-    "expert_css_title": "Expert CSS Customization",
-    "show_expert": "Show Expert",
-    "hide_expert": "Hide Expert",
-    "expert_warning": "Advanced users only. Invalid CSS may break the interface.",
-    "custom_css_label": "Custom CSS",
-    "enable_custom_css": "Enable custom CSS",
-    "css_examples_title": "Examples",
-    "example_1": "Add backdrop blur to cards",
-    "example_inserted": "Example inserted",
-    "enable_custom_css_first": "Enable custom css first",
-    "selected": "Selected",
-    "insert_example": "Insert",
-    "available_classes_label": "Available classes for editing (click to insert them into code)",
-    "tooltip_client_card": "Main class of the client card",
-    "tooltip_sidebar_btn": "Class for left navigation buttons",
-    "tooltip_launch_download_btn": "Classes of download and launch buttons",
-    "export_css_btn": "Export CSS",
-    "import_css_btn": "Import CSS",
-    "export_css_title": "Export Custom CSS",
-    "import_css_title": "Import Custom CSS",
-    "export_desc": "Copy the encoded CSS below and share it. Only safe CSS is allowed.",
-    "import_desc": "Paste the encoded CSS here to import. Only safe CSS is allowed.",
-    "copy": "Copy",
-    "copied": "Copied!",
-    "copy_failed": "Failed to copy",
-    "import": "Import",
-    "import_success": "Preset imported successfully!",
-    "import_invalid": "Invalid preset. Import failed.",
-    "primary": "Primary color",
-    "export_success": "Preset copied to clipboard",
-    "export_failed": "Failed to export preset",
-    "colors": "Colors",
-    "base_colors": "Base Colors",
-    "base100": "Base 100",
-    "base200": "Base 200",
-    "base300": "Base 300",
-    "base_content": "Base content",
-    "primary_secondary_accent": "Primary / Secondary / Accent",
-    "primary_content": "Primary content",
-    "secondary": "Secondary",
-    "secondary_content": "Secondary content",
-    "accent": "Accent",
-    "accent_content": "Accent content",
-    "semantic_colors": "Semantic Colors",
-    "neutral": "Neutral",
-    "neutral_content": "Neutral content",
-    "info": "Info",
-    "info_content": "Info content",
-    "success": "Success",
-    "success_content": "Success content",
-    "warning": "Warning",
-    "warning_content": "Warning content",
-    "error": "Error",
-    "error_content": "Error content",
-    "preset": "Preset",
-    "presets": {
-      "title": "Theme Presets",
-      "description": "Save and manage your customization presets",
-      "save_current": "Save Current",
-      "import": "Import",
-      "pagination": {
-        "per_page": "Per page",
-        "page_of": "Page {current} of {total}"
-      },
-      "create_first_preset": "Create First Preset",
-      "no_presets_title": "No presets yet",
-      "no_presets_description": "Create your first preset by saving your current customization settings",
-      "loading": "Loading presets...",
-      "apply_preset": "Apply Preset",
-      "edit": "Edit",
-      "duplicate": "Duplicate",
-      "export": "Export",
-      "delete": "Delete",
-      "apply": "Apply",
-      "created": "Created {date}",
-      "selected_count": "Selected presets: {count}",
-      "actions": {
-        "apply_first": "Apply first selected",
-        "export_selected": "Export selected",
-        "duplicate_selected": "Duplicate selected",
-        "delete_selected": "Delete selected"
-      },
-      "create_modal": {
-        "name_label": "Preset Name",
-        "name_required": "Preset name is required",
-        "name_too_long": "Preset name must be 50 characters or less",
-        "name_placeholder": "Enter preset name",
-        "description_label": "Description",
-        "description_placeholder": "Optional description for this preset",
-        "source_info": "Preset Source",
-        "source_create": "Will capture current customization settings",
-        "source_edit": "Editing existing preset",
-        "create_button": "Create Preset",
-        "update_button": "Update Preset",
-        "cancel": "Cancel"
-      },
-      "import_modal": {
-        "method_label": "Import Method",
-        "method_file": "File",
-        "method_json": "JSON",
-        "file_label": "Select Preset File",
-        "file_help": "Choose a .json preset file",
-        "json_label": "Paste JSON Data",
-        "json_placeholder": "Paste your preset JSON data here...",
-        "preview_title": "Preview",
-        "preview_name": "Name",
-        "preview_description": "Description",
-        "import_button": "Import Preset",
-        "importing": "Importing...",
-        "cancel": "Cancel",
-        "error_invalid_file": "Invalid JSON file",
-        "error_no_name": "Preset must have a name",
-        "error_invalid_json": "Invalid JSON"
-      },
-      "delete_modal": {
-        "message": "Are you sure you want to delete the preset \"{name}\"?",
-        "warning": "This action cannot be undone.",
-        "delete_button": "Delete Preset",
-        "cancel": "Cancel"
-      },
-      "messages": {
-        "load_error": "Failed to load presets",
-        "create_success": "Preset \"{name}\" created successfully",
-        "create_error": "Failed to create preset",
-        "update_success": "Preset \"{name}\" updated successfully",
-        "update_error": "Failed to update preset",
-        "delete_success": "Preset \"{name}\" deleted successfully",
-        "delete_error": "Failed to delete preset",
-        "duplicate_success": "Preset \"{name}\" duplicated successfully",
-        "duplicate_error": "Failed to duplicate preset",
-        "apply_success": "Preset \"{name}\" applied successfully",
-        "apply_error": "Failed to apply preset \"{name}\": {error}",
-        "import_success": "Preset \"{name}\" imported successfully",
-        "import_no_name": "Imported preset is missing a name",
-        "import_error": "Failed to import preset: {error}",
-        "multiple_deleted": "{count} presets deleted successfully",
-        "multiple_duplicated": "{count} presets duplicated successfully",
-        "multiple_exported": "{count} presets exported to clipboard"
-      }
+    "sync": {
+        "last_sync": "Last sync",
+        "minutes_ago": "{count}m ago",
+        "hours_ago": "{count}h ago",
+        "days_ago": "{count}d ago"
     },
-    "dark": "Dark",
-    "light": "Light"
-  },
-  "logs": {
-    "copy_logs": "Copy logs",
-    "title": "{client} Logs",
-    "view": "View logs"
-  },
-  "installation": {
-    "downloading": "Downloading",
-    "extracting": "Extracting",
-    "download_complete": "Download Complete",
-    "installation_complete": "Installation Complete"
-  },
-  "errors": {
-    "clients_load_failed": "Failed to load clients: {error}",
-    "clients_unavailable": "Clients are currently unavailable.",
-    "stop_error": "Failed to stop client: {error}",
-    "folder_error": "Failed to open data folder: {error}",
-    "reinstall_error": "Failed to reinstall {name}: {error}",
-    "logs_error": "Failed to access logs: {error}",
-    "delete_error": "Failed to delete {name}: {error}",
-    "download_error": "Failed to download {name}: {error}",
-    "load_accounts_error": "Error loading accounts: {error}",
-    "launch_with_account_error": "Error launching client with account: {error}",
-    "download_network_error": "Network connection error while downloading: {error}",
-    "download_timeout_error": "Download timed out. Please check your connection: {error}",
-    "download_disk_error": "Failed to save file to disk. Please check available storage: {error}",
-    "hash_verification_failed": "File integrity check failed for {name}. The downloaded file is corrupted and has been removed. Please try downloading again.",
-    "hash_verification_launch_failed": "Cannot check hash for client {name}"
-  },
-  "validation": {
-    "passwords_no_match": "Passwords do not match.",
-    "min_length": "{field} must be at least {length} characters long."
-  },
-  "irc": {
-    "inline": {
-      "title": "Global Chat",
-      "latest_activity_connected": "Connected to IRC chat",
-      "tap_to_connect": "Tap to connect to IRC",
-      "placeholder": "Type a message...",
-      "send_failed": "Failed to send message",
-      "connection_error": "Connection Error: {error}",
-      "status": {
-        "connected": "Connected",
-        "reconnecting": "Reconnecting...",
-        "connecting": "Connecting...",
-        "error": "Connection issue",
-        "disconnected": "Disconnected"
-      },
-      "privateMessage": "Private message",
-      "copyNickname": "Copy nickname"
-    }
-  },
-  "settings": {
-    "general": "Settings",
-    "sync": "Cloud Sync",
-    "accounts": "Accounts",
-    "accounts_management": "Accounts Management",
-    "accounts_description": "Manage your game accounts and switch between them easily",
-    "search_accounts": "Search accounts...",
-    "no_matching_accounts": "No matching accounts found",
-    "try_different_search": "Try adjusting your search or filters",
-    "reset_tooltip": "Reset to defaults",
-    "local_account_sync": "Local account sync",
-    "local_account_sync_description": "Keep your CollapseLoader accounts synced with Atlas so you can restore them on other devices.",
-    "sync_accounts_from_cloud_button": "Import Atlas accounts",
-    "sync_accounts_to_cloud_button": "Upload local accounts",
-    "remote_accounts_loading": "Checking Atlas for synced accounts...",
-    "remote_accounts_present": "{count} accounts are synced with Atlas.",
-    "remote_accounts_more": "and {count} more saved on Atlas",
-    "remote_accounts_empty": "No accounts synced to Atlas yet.",
-    "sync_status": "Cloud Sync Status",
-    "sync_controls": "Sync Controls",
-    "upload_title": "Upload to Cloud",
-    "upload_description": "Backup your current settings, favorites, and accounts to the cloud.",
-    "upload_button": "Upload Now",
-    "download_title": "Download from Cloud",
-    "download_description": "Restore your settings, favorites, and accounts from the cloud.",
-    "download_button": "Download Now",
-    "syncing": "Syncing...",
-    "auto_sync": "Auto-sync",
-    "auto_sync_description": "Automatically sync your data to the cloud every 5 minutes when online.",
-    "offline_warning": "You are currently offline. Sync features are disabled.",
-    "no_cloud_data": "No cloud data found. Upload your data to get started with cloud sync.",
-    "add_account": "Add Account",
-    "active": "Active",
-    "tags": "Tags",
-    "created": "Created",
-    "last_used": "Last used",
-    "no_accounts_title": "No accounts yet",
-    "no_accounts_description": "Add your first account to get started",
-    "account_set_active": "{username} is now the active account!",
-    "account_set_active_failed": "Failed to set active account: {error}",
-    "download_success": "Downloaded from cloud successfully!",
-    "download_failed": "Download from cloud failed: {error}",
-    "sync_accounts_to_cloud_success": "Local accounts synced to Atlas successfully!",
-    "sync_accounts_to_cloud_failed": "Failed to sync local accounts to Atlas: {error}",
-    "sync_accounts_from_cloud_success": "Imported accounts from Atlas successfully!",
-    "sync_accounts_from_cloud_failed": "Failed to import accounts from Atlas: {error}",
-    "load_remote_accounts_failed": "Failed to load Atlas accounts: {error}",
-    "load_settings_failed": "Failed to load settings: {error}",
-    "save_settings_failed": "Failed to save settings: {error}",
-    "load_accounts_failed": "Failed to load accounts: {error}",
-    "load_flags_failed": "Failed to load flags: {error}",
-    "language_change_failed": "Failed to change language: {error}",
-    "ram": {
-      "warning": "Warning: You have selected {selectedRamMb} MB of RAM. This exceeds the recommended 6 GB limit and may cause performance issues or crashes."
+    "navigation": {
+        "home": "Home",
+        "friends": "Friends",
+        "settings": "Settings",
+        "logs": "Application Logs",
+        "account": "Account",
+        "about": "About",
+        "news": "News",
+        "customization": "Customization",
+        "custom_clients": "Custom Clients",
+        "sidebar_help": {
+            "title": "Tip:",
+            "tip": "You can move the sidebar to any side of the screen. Double-click the sidebar to remove margin between icons.",
+            "got_it": "Got it"
+        }
     },
-    "descriptions": {
-      "ram": "Amount of RAM to allocate in MB.",
-      "language": "The application language (e.g., en, ru).",
-      "discord_rpc_enabled": "Enable Discord Rich Presence to show your activity in Discord.",
-      "optional_telemetry": "Allow anonymous analytics to help improve CollapseLoader. No personal information is collected.",
-      "cordshare": "Share your coordinates with friends to show your location in-game, even when you're outside loaded chunks.",
-      "irc_chat": "Chat with other CollapseLoader users in the IRC chat available in each client.",
-      "hash_verify": "Enable hash verification to ensure downloaded clients are not corrupted. This helps keep your clients up to date.",
-      "dpi_bypass": "Enable if a client download is stuck at 0%, the client won't start, or clients fail to load.",
-      "sync_client_settings": "Sync options, resourcepacks, and other settings across all clients."
+    "toast": {
+        "dev": {
+            "menu_opened": "Developer menu opened",
+            "flags_reset": "Flags have been reset!"
+        },
+        "theme": {
+            "emergency_reset_done": "Custom CSS reset. {action}",
+            "emergency_reset_toggle_instruction": "To re-enable custom CSS, open Theme settings and toggle 'Enable custom CSS' off and on."
+        },
+        "client": {
+            "crashed": "Client {name} has crashed. {error}",
+            "crashed_incomplete": "Client {name} crashed due to incomplete download. Attempting auto-reinstall.",
+            "reinstall_success": "Successfully reinstalled {name}. Please try launching again.",
+            "reinstall_failed": "Failed to reinstall {name}: {error}. Please reinstall manually.",
+            "redownload_success": "Successfully redownloaded {name}. Hash verified."
+        },
+        "server": {
+            "offline": "Could not determine server status. Assuming offline.",
+            "offline_base": "You are currently offline. ",
+            "cdn_and_api_offline": "Cannot connect to CDN and API.",
+            "cdn_offline": "Cannot connect to CDN.",
+            "api_offline": "Cannot connect to API.",
+            "api_init_failed": "Failed to initialize API: {error}"
+        },
+        "settings": {
+            "flags_load_failed": "Failed to load flags: {error}",
+            "first_run_save_failed": "Failed to save first run status: {error}",
+            "disclaimer_save_failed": "Failed to save disclaimer status: {error}",
+            "theme_save_failed": "Failed to save theme: {error}"
+        },
+        "telemetry": {
+            "analytics_enabled": "Analytics enabled. Thank you for helping us improve!",
+            "analytics_disabled": "Analytics disabled.",
+            "analytics_enable_failed": "Failed to enable analytics: {error}",
+            "analytics_disable_failed": "Failed to disable analytics: {error}"
+        },
+        "auth": {
+            "registration_success": "Registration successful! Please log in."
+        },
+        "logs": {
+            "fetch_failed": "Error fetching app logs: {error}",
+            "copied_success": "App logs copied to clipboard!",
+            "copy_failed": "Failed to copy app logs: {error}",
+            "client_logs_copied": "Logs copied to clipboard!",
+            "client_logs_copy_failed": "Failed to copy logs to clipboard.",
+            "download_success": "Logs saved successfully!",
+            "download_failed": "Failed to save logs: {error}"
+        },
+        "users": {
+            "blocked_load_failed": "Failed to load blocked users",
+            "unblocked_success": "{name} has been unblocked",
+            "unblock_failed": "Failed to unblock user"
+        },
+        "friends": {
+            "search_failed": "Failed to search users",
+            "request_sent": "Friend request sent to {name}",
+            "request_send_failed": "Failed to send friend request"
+        },
+        "account": {
+            "username_required": "Username is required",
+            "account_updated": "Account updated successfully!",
+            "account_update_failed": "Failed to update account: {error}",
+            "account_added": "Account added successfully!",
+            "account_add_failed": "Failed to add account: {error}",
+            "account_deleted": "Account deleted successfully!",
+            "account_delete_failed": "Failed to delete account: {error}",
+            "nickname_update_failed": "Failed to update nickname. Please try again."
+        },
+        "modal": {
+            "settings_reset_success": "Settings reset successfully!",
+            "settings_reset_failed": "Failed to reset settings: {error}"
+        },
+        "sync": {
+            "offline_error": "Cannot sync while offline",
+            "already_in_progress": "Sync already in progress",
+            "syncing": "Syncing to cloud...",
+            "success": "Sync completed successfully!",
+            "failed": "Sync failed: {error}",
+            "login_required": "Please sign in to sync"
+        }
     },
-    "ram_warning": {},
-    "telemetry": "Analytics",
-    "open_data": "Open data folder",
-    "add_account_title": "Add New Account",
-    "edit_account_title": "Edit account",
-    "reset_title": "Reset Settings Confirmation",
-    "delete_account_title": "Delete Account Confirmation",
-    "actions": "Actions",
-    "toast_position": {
-      "title": "Toast Position",
-      "description": "Choose where notifications appear on your screen",
-      "bottom_right": "Bottom Right",
-      "bottom_left": "Bottom Left",
-      "top_right": "Top Right",
-      "top_left": "Top Left",
-      "bottom_center": "Bottom Center",
-      "top_center": "Top Center",
-      "preview_message": "Toast position changed!"
+    "discord": {
+        "details": {
+            "in_menu": "In Menu",
+            "in_game": "In Game"
+        },
+        "states": {
+            "browsing_clients": "Browsing clients",
+            "configuring_settings": "Configuring settings",
+            "enjoying_visuals": "Enjoying the visuals",
+            "watching_client_behavior": "Watching the client's behavior",
+            "in_profile": "In profile",
+            "watching_about": "Watching about us",
+            "debugging": "Debugging",
+            "logging_in": "Logging in",
+            "browsing_friends": "Watching what friends do",
+            "browsing_news": "Reading news",
+            "browsing_custom_clients": "Browsing custom clients"
+        }
     },
-    "telemetry_info_title": "Info about telemetry",
-    "reset_requirements": "Reset loader files",
-    "reset_requirements_success": "Successfully removed requirements, now download any client",
-    "reset_requirements_failed": "Cannot remove requirements, try again or restart loader",
-    "login_required": "You will need to log into your account to use this feature.",
-    "reset_cache_failed": "Cannot remove cache, try again",
-    "hash_verify": "Hash verify",
-    "irc_chat": "IRC Chat",
-    "save_flags_failed": "Failed to save flags: {error}",
-    "change_root": {
-      "title": "Change Data Folder",
-      "action": "Change data folder",
-      "target_folder": "Target folder",
-      "hint": "Choose the folder where CollapseLoader files (clients, cache, etc.) will be stored",
-      "mode": "What to do with the old folder?",
-      "mode_move": "Move",
-      "mode_wipe": "Delete",
-      "mode_move_desc": "Move all data from the old folder to the new one (recommended)",
-      "mode_wipe_desc": "Delete the old folder (all data will be removed)",
-      "select_folder_first": "Select a folder first",
-      "success": "Data folder changed",
-      "failed": "Failed to change data folder: {error}",
-      "restart_required": "Please restart the app for changes to take effect"
+    "modal": {
+        "client_crash": {
+            "title": "Crash Report for {name}"
+        }
     },
-    "sync_client_settings": "Sync client settings",
-    "reset_settings": "Reset settings",
-    "sync_login_required": "Sign in to enable syncing",
-    "not_signed_in": "You are not logged in"
-  },
-  "userProfile": {
-    "back_to_friends": "Back to Friends",
-    "profile_information": "Profile Information",
-    "username": "Username",
-    "nickname": "Nickname",
-    "member_since": "Member since",
-    "actions": "Actions",
-    "online": "Online",
-    "offline": "Offline",
-    "playing": "Playing",
-    "last_seen": "Last seen",
-    "just_now": "just now",
-    "minutes_ago": "{count}m ago",
-    "hours_ago": "{count}h ago",
-    "days_ago": "{count}d ago",
-    "friends_with": "You are friends with {name}",
-    "remove_friend": "Remove Friend",
-    "friend_request_sent": "Friend request sent to {name}",
-    "friend_request_received": "{name} sent you a friend request",
-    "accept": "Accept",
-    "decline": "Decline",
-    "user_blocked": "This user is blocked",
-    "send_friend_request": "Send Friend Request",
-    "sending": "Sending...",
-    "canceling": "Canceling...",
-    "cancel_friend_request": "Cancel Request",
-    "block_user": "Block User",
-    "unblock_user": "Unblock User",
-    "no_user_id": "No user ID provided",
-    "user_not_found": "User not found",
-    "login_required": "You need to be logged in to view profiles",
-    "profile_load_failed": "Failed to load user profile",
-    "friend_request_sent_success": "Friend request sent to {name}",
-    "friend_request_failed": "Failed to send friend request: {error}",
-    "copy_username": "Copy username",
-    "copied_username": "{name} copied to clipboard",
-    "copy_failed": "Failed to copy username",
-    "friend_request_canceled": "Friend request canceled successfully",
-    "friend_request_cancel_failed": "Failed to cancel friend request",
-    "friend_removed_success": "{name} removed from friends",
-    "friend_remove_failed": "Failed to remove friend",
-    "friend_request_responded": "Friend request {action}ed",
-    "friend_request_respond_failed": "Failed to {action} friend request",
-    "friend_request_not_found": "Friend request not found",
-    "user_blocked_success": "{name} has been blocked",
-    "user_block_failed": "Failed to block user",
-    "presets_title": "Presets",
-    "presets": "presets",
-    "presets_hidden_streamer": "Presets are hidden in streamer mode.",
-    "no_presets": "This user hasn't shared any presets yet.",
-    "create_preset": "Create Preset"
-  },
-  "sync": {
-    "last_sync": "Last sync",
-    "minutes_ago": "{count}m ago",
-    "hours_ago": "{count}h ago",
-    "days_ago": "{count}d ago"
-  },
-  "navigation": {
-    "home": "Home",
-    "friends": "Friends",
-    "settings": "Settings",
-    "logs": "Application Logs",
-    "account": "Account",
-    "about": "About",
-    "news": "News",
-    "customization": "Customization",
-    "custom_clients": "Custom Clients",
-    "sidebar_help": {
-      "title": "Tip:",
-      "tip": "You can move the sidebar to any side of the screen. Double-click the sidebar to remove margin between icons.",
-      "got_it": "Got it"
-    }
-  },
-  "toast": {
-    "dev": {
-      "menu_opened": "Developer menu opened",
-      "flags_reset": "Flags have been reset!"
+    "news": {
+        "loading": "Loading news...",
+        "error_title": "Error Loading News",
+        "retry": "Try Again",
+        "no_news": "No News Available",
+        "no_news_description": "There are currently no news articles to display.",
+        "updated_at": "Updated",
+        "not_found": "News not found",
+        "server_error": "Server error occurred",
+        "network_error": "Network connection error",
+        "fetch_failed": "Failed to fetch news: {error}",
+        "fetch_failed_toast": "Failed to load news",
+        "new": "New",
+        "time": {},
+        "search_placeholder": "News search...",
+        "mark_all_read": "Mark everything as read",
+        "refresh": "Refresh"
     },
-    "theme": {
-      "emergency_reset_done": "Custom CSS reset. {action}",
-      "emergency_reset_toggle_instruction": "To re-enable custom CSS, open Theme settings and toggle 'Enable custom CSS' off and on."
+    "hold_button": {
+        "label": "Hold to begin!",
+        "info_message": "Are you serious?"
     },
     "client": {
-      "crashed": "Client {name} has crashed. {error}",
-      "crashed_incomplete": "Client {name} crashed due to incomplete download. Attempting auto-reinstall.",
-      "reinstall_success": "Successfully reinstalled {name}. Please try launching again.",
-      "reinstall_failed": "Failed to reinstall {name}: {error}. Please reinstall manually.",
-      "redownload_success": "Successfully redownloaded {name}. Hash verified."
-    },
-    "server": {
-      "offline": "Could not determine server status. Assuming offline.",
-      "offline_base": "You are currently offline. ",
-      "cdn_and_api_offline": "Cannot connect to CDN and API.",
-      "cdn_offline": "Cannot connect to CDN.",
-      "api_offline": "Cannot connect to API.",
-      "api_init_failed": "Failed to initialize API: {error}"
-    },
-    "settings": {
-      "flags_load_failed": "Failed to load flags: {error}",
-      "first_run_save_failed": "Failed to save first run status: {error}",
-      "disclaimer_save_failed": "Failed to save disclaimer status: {error}",
-      "theme_save_failed": "Failed to save theme: {error}"
-    },
-    "telemetry": {
-      "analytics_enabled": "Analytics enabled. Thank you for helping us improve!",
-      "analytics_disabled": "Analytics disabled.",
-      "analytics_enable_failed": "Failed to enable analytics: {error}",
-      "analytics_disable_failed": "Failed to disable analytics: {error}"
-    },
-    "auth": {
-      "registration_success": "Registration successful! Please log in."
-    },
-    "logs": {
-      "fetch_failed": "Error fetching app logs: {error}",
-      "copied_success": "App logs copied to clipboard!",
-      "copy_failed": "Failed to copy app logs: {error}",
-      "client_logs_copied": "Logs copied to clipboard!",
-      "client_logs_copy_failed": "Failed to copy logs to clipboard.",
-      "download_success": "Logs saved successfully!",
-      "download_failed": "Failed to save logs: {error}"
+        "details": {
+            "loading": "Loading details...",
+            "info_tab": "Information",
+            "screenshots_tab": "Screenshots",
+            "rating": "Rating",
+            "no_rating": "No ratings yet",
+            "login_to_rate": "Log in to rate",
+            "your_rating": "Your Rating",
+            "source_link": "Source Link",
+            "created": "Created",
+            "changelog": "Changelog",
+            "no_changelog": "No changelog available",
+            "no_screenshots": "No screenshots available",
+            "screenshot_viewer": {
+                "zoom_percent": "{percent}%",
+                "image_counter": "{current} / {total}",
+                "controls": {
+                    "esc_close": "ESC - Close",
+                    "esc_reset": "ESC - Reset zoom",
+                    "navigate": "← → - Navigate",
+                    "click_zoom": "Click - Zoom | Scroll - Zoom",
+                    "drag_pan": "Drag - Pan | +/- - Zoom | 0 - Reset"
+                }
+            },
+            "no_changelog_desc": "Updates and changes will appear here.",
+            "comments_tab": "Comments"
+        },
+        "comments": {
+            "placeholder": "Write a comment...",
+            "empty": "No comments yet. Be the first!",
+            "delete": "Delete"
+        }
     },
-    "users": {
-      "blocked_load_failed": "Failed to load blocked users",
-      "unblocked_success": "{name} has been unblocked",
-      "unblock_failed": "Failed to unblock user"
+    "customization": {
+        "background_title": "Background",
+        "background_image": "Background Image",
+        "background_image_placeholder": "https://example.com/image.jpg",
+        "background_image_help": "Supports jpg, png, webp, data-urls",
+        "background_blur": "Blur",
+        "background_opacity": "Opacity"
     },
-    "friends": {
-      "search_failed": "Failed to search users",
-      "request_sent": "Friend request sent to {name}",
-      "request_send_failed": "Failed to send friend request"
+    "updater": {
+        "update_available": "Update Available",
+        "current": "Current",
+        "latest": "Latest",
+        "changelog": "Changelog",
+        "download_install": "Download & Install",
+        "downloading": "Downloading...",
+        "skip": "Skip",
+        "starting_download": "Starting update download...",
+        "update_installed": "Update installed successfully! The app will restart.",
+        "update_failed": "Update failed: {error}",
+        "check_for_updates": "Check for Updates",
+        "checking_updates": "Checking for updates...",
+        "up_to_date": "You're running the latest version!",
+        "show_more": "Show {count} more versions",
+        "show_less": "Show less",
+        "release_types": {},
+        "categories": {
+            "feature": "Feature",
+            "improvement": "Improvement"
+        },
+        "no_update": "Updates not found"
     },
-    "account": {
-      "username_required": "Username is required",
-      "account_updated": "Account updated successfully!",
-      "account_update_failed": "Failed to update account: {error}",
-      "account_added": "Account added successfully!",
-      "account_add_failed": "Failed to add account: {error}",
-      "account_deleted": "Account deleted successfully!",
-      "account_delete_failed": "Failed to delete account: {error}",
-      "nickname_update_failed": "Failed to update nickname. Please try again."
+    "custom_clients": {
+        "add": "Add custom client",
+        "running": "Running",
+        "edit": "Edit",
+        "delete": "Delete",
+        "added": "Added",
+        "stop": "Stop",
+        "launch": "Launch",
+        "display_settings": "Display settings",
+        "display_mode": "Display Mode",
+        "display_mode_separate": "Separate",
+        "display_mode_global": "Global",
+        "no_results": "Try adjusting your search query.",
+        "no_clients_yet": "Add your first custom client to get started."
     },
-    "modal": {
-      "settings_reset_success": "Settings reset successfully!",
-      "settings_reset_failed": "Failed to reset settings: {error}"
+    "marketplace": {
+        "title": "Marketplace",
+        "open_marketplace": "Marketplace",
+        "search_placeholder": "Search presets...",
+        "share_local": "Share your preset",
+        "share_current": "Share current preset",
+        "share_modal_title": "Share Preset",
+        "title_label": "Title",
+        "title_placeholder": "My preset",
+        "description_label": "Description",
+        "description_placeholder": "Describe your preset",
+        "public_label": "Public",
+        "private_label": "Private",
+        "make_private": "Make private",
+        "make_public": "Make public",
+        "sort_newest": "Newest",
+        "sort_popular": "Popular",
+        "sort_downloads": "Most Downloaded",
+        "sort_comments": "Most Commented",
+        "edit_modal_title": "Edit Preset",
+        "delete_confirm": "Are you sure you want to delete this preset? This action cannot be undone.",
+        "share": "Share",
+        "sharing": "Sharing...",
+        "shared_success": "Preset shared!",
+        "shared_failed": "Failed to share preset",
+        "updated_success": "Preset updated",
+        "updated_failed": "Failed to update preset",
+        "deleted_success": "Preset deleted",
+        "deleted_failed": "Failed to delete preset",
+        "apply": "Apply",
+        "like": "Like",
+        "by_user": "by {name}",
+        "by_author": "BY {name}",
+        "no_items": "No presets yet",
+        "preset_details_title": "Preset Details",
+        "preset_details": "Preset details",
+        "comments": "Comments",
+        "no_comments": "No comments yet",
+        "add_comment": "Add a comment",
+        "comment_placeholder": "Write a comment...",
+        "preset_picker_label": "Choose a local preset",
+        "preset_picker_placeholder": "Select a preset...",
+        "no_local_presets": "You don't have any presets yet"
     },
-    "sync": {
-      "offline_error": "Cannot sync while offline",
-      "already_in_progress": "Sync already in progress",
-      "syncing": "Syncing to cloud...",
-      "success": "Sync completed successfully!",
-      "failed": "Sync failed: {error}",
-      "login_required": "Please sign in to sync"
-    }
-  },
-  "discord": {
-    "details": {
-      "in_menu": "In Menu",
-      "in_game": "In Game"
+    "events": {
+        "halloween": {
+            "greeting": "Happy Halloween!",
+            "message": "Spooky season is here! 🎃",
+            "tooltip": "Happy Halloween! (Oct 25 - Nov 5)"
+        }
     },
-    "states": {
-      "browsing_clients": "Browsing clients",
-      "configuring_settings": "Configuring settings",
-      "enjoying_visuals": "Enjoying the visuals",
-      "watching_client_behavior": "Watching the client's behavior",
-      "in_profile": "In profile",
-      "watching_about": "Watching about us",
-      "debugging": "Debugging",
-      "logging_in": "Logging in",
-      "browsing_friends": "Watching what friends do",
-      "browsing_news": "Reading news",
-      "browsing_custom_clients": "Browsing custom clients"
-    }
-  },
-  "modal": {
-    "client_crash": {
-      "title": "Crash Report for {name}"
-    }
-  },
-  "news": {
-    "loading": "Loading news...",
-    "error_title": "Error Loading News",
-    "retry": "Try Again",
-    "no_news": "No News Available",
-    "no_news_description": "There are currently no news articles to display.",
-    "updated_at": "Updated",
-    "not_found": "News not found",
-    "server_error": "Server error occurred",
-    "network_error": "Network connection error",
-    "fetch_failed": "Failed to fetch news: {error}",
-    "fetch_failed_toast": "Failed to load news",
-    "new": "New",
-    "time": {},
-    "search_placeholder": "News search...",
-    "mark_all_read": "Mark everything as read",
-    "refresh": "Refresh"
-  },
-  "hold_button": {
-    "label": "Hold to begin!",
-    "info_message": "Are you serious?"
-  },
-  "client": {
-    "details": {
-      "loading": "Loading details...",
-      "info_tab": "Information",
-      "screenshots_tab": "Screenshots",
-      "rating": "Rating",
-      "no_rating": "No ratings yet",
-      "login_to_rate": "Log in to rate",
-      "source_link": "Source Link",
-      "created": "Created",
-      "changelog": "Changelog",
-      "no_changelog": "No changelog available",
-      "no_screenshots": "No screenshots available",
-      "screenshot_viewer": {
-        "zoom_percent": "{percent}%",
-        "image_counter": "{current} / {total}",
-        "controls": {
-          "esc_close": "ESC - Close",
-          "esc_reset": "ESC - Reset zoom",
-          "navigate": "← → - Navigate",
-          "click_zoom": "Click - Zoom | Scroll - Zoom",
-          "drag_pan": "Drag - Pan | +/- - Zoom | 0 - Reset"
+    "login": "You need to log in to your account.",
+    "notifications": {
+        "friend_request_received": {
+            "title": "Friend Request",
+            "message": "{name} sent you a friend request!"
+        },
+        "friend_request_accepted": {
+            "title": "Friend Request Accepted",
+            "message": "{name} accepted your friend request!"
         }
-      },
-      "no_changelog_desc": "Updates and changes will appear here.",
-      "comments_tab": "Comments"
     },
-    "comments": {
-      "placeholder": "Write a comment...",
-      "empty": "No comments yet. Be the first!",
-      "delete": "Delete"
-    }
-  },
-  "customization": {},
-  "updater": {
-    "update_available": "Update Available",
-    "current": "Current",
-    "latest": "Latest",
-    "changelog": "Changelog",
-    "download_install": "Download & Install",
-    "downloading": "Downloading...",
-    "skip": "Skip",
-    "starting_download": "Starting update download...",
-    "update_installed": "Update installed successfully! The app will restart.",
-    "update_failed": "Update failed: {error}",
-    "check_for_updates": "Check for Updates",
-    "checking_updates": "Checking for updates...",
-    "up_to_date": "You're running the latest version!",
-    "show_more": "Show {count} more versions",
-    "show_less": "Show less",
-    "release_types": {},
-    "categories": {
-      "feature": "Feature",
-      "improvement": "Improvement"
+    "achievements": {
+        "title": "Achievements",
+        "unlocked_title": "Achievement unlocked: {name}",
+        "locked": "Locked",
+        "unlocked_at": "Unlocked {date}",
+        "owned_percentage": "{percent}% of players have this",
+        "login_to_unlock": "You need to be logged in to unlock this achievement.",
+        "secret_title": "Hidden Achievement",
+        "secret_description": "Keep playing to unlock this secret!",
+        "list": {
+            "PLAYED_1Hour": {
+                "name": "Getting Started",
+                "description": "Play for 1 hour."
+            },
+            "PLAYED_10Hours": {
+                "name": "Dedicated",
+                "description": "Play for 10 hours."
+            },
+            "FIRST_GAME": {
+                "name": "First Steps",
+                "description": "Launch your first client."
+            },
+            "SECRET_FINDER": {
+                "name": "Secret Finder",
+                "description": "You found a secret!"
+            },
+            "SOCIAL_BUTTERFLY": {
+                "name": "Social Butterfly",
+                "description": "Add a social link to your profile."
+            },
+            "FREQUENT_FLYER": {
+                "name": "Frequent Flyer",
+                "description": "Launch clients 50 times."
+            },
+            "PRESET_MAX": {
+                "name": "Fashionista",
+                "description": "Create and share a customization preset."
+            },
+            "BETA_TESTER": {
+                "name": "Beta Tester",
+                "description": "Join the testing program."
+            },
+            "COLLECTOR": {
+                "name": "Collector",
+                "description": "Favorite 5 different clients."
+            },
+            "NIGHT_OWL": {
+                "name": "Night Owl",
+                "description": "Play between 2 AM and 5 AM."
+            },
+            "EARLY_BIRD": {
+                "name": "Early Bird",
+                "description": "Play between 5 AM and 8 AM."
+            },
+            "WEEKEND_WARRIOR": {
+                "name": "After job",
+                "description": "Play on a weekend."
+            }
+        }
     },
-    "no_update": "Updates not found"
-  },
-  "custom_clients": {
-    "add": "Add custom client",
-    "running": "Running",
-    "edit": "Edit",
-    "delete": "Delete",
-    "added": "Added",
-    "stop": "Stop",
-    "launch": "Launch",
-    "display_settings": "Display settings",
-    "display_mode": "Display Mode",
-    "display_mode_separate": "Separate",
-    "display_mode_global": "Global",
-    "no_results": "Try adjusting your search query.",
-    "no_clients_yet": "Add your first custom client to get started."
-  },
-  "marketplace": {
-    "title": "Marketplace",
-    "open_marketplace": "Marketplace",
-    "search_placeholder": "Search presets...",
-    "share_local": "Share your preset",
-    "share_current": "Share current preset",
-    "share_modal_title": "Share Preset",
-    "title_label": "Title",
-    "title_placeholder": "My preset",
-    "description_label": "Description",
-    "description_placeholder": "Describe your preset",
-    "public_label": "Public",
-    "private_label": "Private",
-    "make_private": "Make private",
-    "make_public": "Make public",
-    "edit_modal_title": "Edit Preset",
-    "delete_confirm": "Are you sure you want to delete this preset? This action cannot be undone.",
-    "share": "Share",
-    "sharing": "Sharing...",
-    "shared_success": "Preset shared!",
-    "shared_failed": "Failed to share preset",
-    "updated_success": "Preset updated",
-    "updated_failed": "Failed to update preset",
-    "deleted_success": "Preset deleted",
-    "deleted_failed": "Failed to delete preset",
-    "apply": "Apply",
-    "like": "Like",
-    "by_user": "by {name}",
-    "no_items": "No presets yet",
-    "preset_details_title": "Preset Details",
-    "preset_details": "Preset details",
-    "comments": "Comments",
-    "no_comments": "No comments yet",
-    "add_comment": "Add a comment",
-    "comment_placeholder": "Write a comment...",
-    "preset_picker_label": "Choose a local preset",
-    "preset_picker_placeholder": "Select a preset...",
-    "no_local_presets": "You don't have any presets yet"
-  },
-  "events": {
-    "halloween": {
-      "greeting": "Happy Halloween!",
-      "message": "Spooky season is here! 🎃",
-      "tooltip": "Happy Halloween! (Oct 25 - Nov 5)"
+    "mods": {
+        "manager_title": "Mods Manager",
+        "search_placeholder": "Search mods on Modrinth...",
+        "no_results": "No mods found",
+        "no_compatible_version": "No compatible version found for {version}",
+        "install_success": "Successfully installed {mod}",
+        "install_failed": "Failed to install mod: {error}",
+        "manage_mods": "Manage Mods",
+        "installed": "Installed",
+        "install": "Install",
+        "choose_version": "Choose Version",
+        "versions_for": "Versions for {mod}",
+        "loading_versions": "Loading versions..."
     }
-  },
-  "login": "You need to log in to your account."
 }
diff --git a/src/i18n/locales/pl.json b/src/i18n/locales/pl.json
new file mode 100644
index 00000000..944286b8
--- /dev/null
+++ b/src/i18n/locales/pl.json
@@ -0,0 +1,1201 @@
+{
+    "reports": {
+        "title": "Zgłoś {name}",
+        "report_user": "Zgłoś użytkownika",
+        "description": "Jeśli ktoś łamie zasady lub zachowuje się toksycznie, daj nam znać.",
+        "reason_label": "Powód",
+        "select_reason": "Wybierz powód",
+        "reasons": {
+            "HARASSMENT": "Nękanie",
+            "SPAM": "Spam",
+            "INAPPROPRIATE_CONTENT": "Nieodpowiednia treść",
+            "OTHER": "Inne"
+        },
+        "details_label": "Szczegóły (opcjonalnie)",
+        "details_placeholder": "Podaj więcej informacji o sytuacji...",
+        "submit": "Wyślij zgłoszenie",
+        "success_message": "Zgłoszenie zostało wysłane pomyślnie. Dziękujemy!",
+        "error_message": "Nie udało się wysłać zgłoszenia. Spróbuj ponownie później."
+    },
+    "modals": {
+        "initial_setup": {
+            "welcome": {
+                "title": "Witamy w CollapseLoader",
+                "description": "Szybko skonfigurujmy aplikację, aby uzyskać lepszą wydajność i prywatność.",
+                "subtitle": "Szybka konfiguracja, aby rozpocząć",
+                "features": {
+                    "fast_startup": "Szybki start — minimalny czas oczekiwania",
+                    "secure_clients": "Niezawodne klienty — sprawdzone i w pełni bezpieczne",
+                    "auto_updates": "Automatyczne aktualizacje — loader i klienty zawsze aktualne"
+                }
+            },
+            "gui": {},
+            "ram": {
+                "title": "Ustawienia pamięci",
+                "subtitle": "Wybierz, ile pamięci RAM przydzielić klientom",
+                "description": "Dostosuj ilość pamięci RAM dla optymalnej wydajności",
+                "warning": "Ostrzeżenie: Wybrano {selectedRamMb} MB pamięci RAM. Przekracza to zalecany limit 6 GB i może powodować problemy z wydajnością lub awarie."
+            },
+            "registration": {
+                "registering": "Rejestracja..."
+            },
+            "feedback": {
+                "title": "Informacje zwrotne",
+                "subtitle": "Skontaktuj się z naszą społecznością, aby uzyskać wsparcie i przekazać opinie",
+                "description": "Dołącz do naszej społeczności, aby otrzymywać wsparcie i aktualizacje",
+                "optional": "Nieobowiązkowe, ale zalecamy subskrypcję"
+            },
+            "telemetry": {
+                "title": "Dodatkowa analityka",
+                "subtitle": "Udostępnij anonimowe statystyki, aby pomóc w priorytetyzacji ulepszeń (opcjonalne)",
+                "description": "Pomóż nam ulepszyć CollapseLoader. Te informacje pomagają nam zrozumieć, jak aplikacja jest używana, i uczynić ją lepszą. Możesz zmienić to ustawienie w dowolnym momencie w menu ustawień.",
+                "data_collected_title": "Co zbieramy:",
+                "data_collected": {
+                    "performance": "Wskaźniki wydajności (czas uruchamiania, użycie pamięci)",
+                    "usage_patterns": "Wzorce użytkowania (najczęściej używane klienty, częstotliwość uruchamiania)",
+                    "crash_reports": "Raporty o awariach i błędach dla poprawy stabilności"
+                }
+            },
+            "appreciation": {
+                "title": "Dziękujemy za wybór CollapseLoader",
+                "subtitle": "Gotowe — można zaczynać",
+                "description": "Mamy nadzieję, że korzystanie z naszego loadera sprawi Ci przyjemność!"
+            },
+            "disclaimer": {
+                "title": "Wyłączenie odpowiedzialności",
+                "responsibility": "Twórcy CollapseLoader oraz twórcy jakichkolwiek wymienionych klientów nie ponoszą odpowiedzialności za jakiekolwiek konsekwencje wynikające z używania tego oprogramowania lub klientów, do których zapewnia ono dostęp.",
+                "acknowledgment": "Używając tej aplikacji, przyjmujesz na siebie całe ryzyko",
+                "accept": "Rozumiem i akceptuję"
+            },
+            "language_changed": "Język został pomyślnie zmieniony!",
+            "language_change_failed": "Nie udało się zmienić języka. Spróbuj ponownie.",
+            "language_here": "Tutaj możesz zmienić język"
+        },
+        "block_unblock_confirm": {
+            "block_message": "Czy na pewno chcesz zablokować użytkownika {displayName}? Usunie to go z listy znajomych i uniemożliwi przyszły kontakt.",
+            "unblock_message": "Czy na pewno chcesz odblokować użytkownika {displayName}? Będzie on mógł ponownie wysyłać Ci zaproszenia do znajomych.",
+            "yes_unblock": "Tak, odblokuj",
+            "yes_block": "Tak, zablokuj"
+        },
+        "reset_confirm": {
+            "message": "Czy na pewno chcesz przywrócić wszystkie ustawienia do wartości domyślnych? Tej operacji nie można cofnąć.",
+            "yes_reset": "Tak, zresetuj"
+        },
+        "remove_friend_confirm": {
+            "message": "Czy na pewno chcesz usunąć {displayName} ze znajomych? Tej operacji nie można cofnąć.",
+            "yes_remove": "Tak, usuń"
+        },
+        "cancel_friend_request_confirm": {
+            "message": "Czy na pewno chcesz anulować zaproszenie do znajomych dla {displayName}?",
+            "yes_cancel": "Tak, anuluj zaproszenie",
+            "keep_request": "Pozostaw zaproszenie"
+        },
+        "register_prompt": {
+            "title": "Utwórz konto",
+            "description": "Zarejestruj konto, aby odblokować wszystkie funkcje i synchronizować ustawienia między urządzeniami.",
+            "benefits": {
+                "sync": "Zapisywanie i synchronizacja ustawień (w tym motywów, ulubionych itp.)",
+                "notifications": "Otrzymywanie powiadomień o aktualizacjach"
+            },
+            "register_now": "Zarejestruj się",
+            "maybe_later": "Może później"
+        },
+        "edit_nickname": {
+            "label": "Pseudonim",
+            "placeholder": "Wprowadź swój pseudonim",
+            "description": "Opcjonalne - tak będą widzieć Cię inni",
+            "update": "Zaktualizuj pseudonim"
+        },
+        "social_links": {
+            "title": "Linki społecznościowe",
+            "add_title": "Dodaj link",
+            "edit_title": "Edytuj link",
+            "fill_fields": "Wybierz platformę i wprowadź poprawny link.",
+            "added": "Link dodany.",
+            "add_failed": "Nie udało się dodać linku.",
+            "load_failed": "Nie udało się załadować linków.",
+            "deleted": "Link usunięty.",
+            "delete_failed": "Nie udało się usunąć linku.",
+            "updated": "Link zaktualizowany.",
+            "update_failed": "Nie udało się zaktualizować linku.",
+            "hidden_in_streamer_mode": "Linki społecznościowe są ukryte w trybie streamera."
+        },
+        "edit_account": {
+            "username_label": "Nazwa użytkownika",
+            "tags_label": "Tagi (oddzielone przecinkami)",
+            "update": "Zaktualizuj konto"
+        },
+        "delete_account_confirm": {
+            "message": "Czy na pewno chcesz usunąć konto \"{username}\"? Tej operacji nie można cofnąć.",
+            "yes_delete": "Tak, usuń"
+        },
+        "change_password_confirm": {
+            "message": "Czy na pewno chcesz zmienić hasło? Spowoduje to natychmiastową aktualizację danych logowania.",
+            "warning": "Jeśli utracisz dostęp do obecnego hasła, może być wymagane odzyskiwanie konta.",
+            "yes_change": "Tak, zmień hasło"
+        },
+        "logout_confirm": {
+            "message": "Czy na pewno chcesz się wylogować?",
+            "info": "To spowoduje wylogowanie i może wymagać ponownego zalogowania, aby uzyskać dostęp do niektórych funkcji.",
+            "yes_logout": "Tak, wyloguj"
+        },
+        "client_crash": {
+            "error_occurred": "Wystąpił błąd: {error}",
+            "crashed_message": "Klient {clientName} uległ awarii. Sprawdź logi poniżej, aby uzyskać szczegóły.",
+            "no_logs": "Logi są niedostępne.",
+            "copy_logs": "Kopiuj logi",
+            "close": "Zamknij"
+        },
+        "add_friend": {
+            "search_label": "Wyszukaj użytkowników",
+            "search_placeholder": "Wprowadź nazwę użytkownika...",
+            "add_friend": "Dodaj do znajomych",
+            "already_friends": "Jesteście już znajomymi",
+            "request_sent": "Zaproszenie wysłane",
+            "request_received": "Otrzymano zaproszenie",
+            "blocked": "Zablokowany",
+            "no_users_found": "Nie znaleziono użytkowników",
+            "search_hint": "Wpisz co najmniej 2 znaki, aby wyszukać",
+            "close": "Zamknij"
+        },
+        "add_account": {
+            "username_label": "Nazwa użytkownika",
+            "username_placeholder": "Wprowadź nazwę użytkownika",
+            "tags_label": "Tagi (oddzielone przecinkami)",
+            "tags_placeholder": "np.: funtime, spookytime",
+            "add_account": "Dodaj konto"
+        },
+        "telemetry_consent": {
+            "title": "Zgoda na dodatkową telemetrię",
+            "description": "Aby poprawić Twoje doświadczenia z korzystania z CollapseLoader, możemy zbierać dodatkową analitykę. Dane te pomogą nam zrozumieć, jak aplikacja jest używana, i ją ulepszyć.",
+            "data_collected_title": "Jakie dane zbieramy:",
+            "data_collected": {
+                "performance": "Wskaźniki wydajności (czas uruchamiania, użycie pamięci)",
+                "usage_patterns": "Wzorce użytkowania (najczęściej używane klienty, częstotliwość uruchamiania)",
+                "crash_reports": "Raporty o awariach i błędach dla poprawy stabilności (ANONIMOWE, dane systemowe nie są zbierane)",
+                "feature_usage": "Statystyki użycia funkcji aplikacji (np. które klienty są najczęściej uruchamiane, które funkcje są używane)"
+            },
+            "privacy_note_title": "Prywatność: ",
+            "privacy_note": "Wszystkie dane są anonimowe i nie zawierają informacji osobistych. Możesz wyłączyć tę funkcję w dowolnym momencie w ustawieniach.",
+            "accept": "Zezwól na analitykę",
+            "decline": "Odmów"
+        },
+        "insecure_client_warning": {
+            "modal_title": "Ostrzeżenie bezpieczeństwa",
+            "title": "Ostrzeżenie o niezweryfikowanym kliencie",
+            "subtitle": "Ten klient nie został sprawdzony pod kątem wirusów",
+            "description": "Zamierzasz uruchomić \"{clientName}\", który nie został sprawdzony pod kątem złośliwego oprogramowania lub wirusów. Ten klient może zawierać potencjalnie niebezpieczny kod, który może uszkodzić Twój system lub naruszyć bezpieczeństwo.",
+            "dont_show_again": "Nie pokazuj więcej tego ostrzeżenia dla tego klienta",
+            "proceed_anyway": "Uruchom mimo to",
+            "cancel": "Anuluj",
+            "close": "Rozumiem"
+        },
+        "slow_download": {
+            "modal_title": "Wolne pobieranie",
+            "title": "Niska prędkość pobierania",
+            "subtitle": "Prędkość pobierania jest niższa niż oczekiwana",
+            "description": "Bieżąca prędkość pobierania jest niższa niż zwykle. Może to prowadzić do wydłużenia czasu pobierania.",
+            "current_speed": "Bieżąca prędkość:",
+            "tip_1": "Sprawdź połączenie internetowe",
+            "tip_2": "Spróbuj zamknąć inne aplikacje korzystające z Internetu",
+            "tip_3": "Spróbuj pobrać ponownie później",
+            "dont_show_again": "Nie pokazuj więcej tego ostrzeżenia",
+            "stalled_modal_title": "Pobieranie zawieszone",
+            "stalled_title": "Pobieranie zatrzymane",
+            "stalled_subtitle": "Brak postępu",
+            "stalled_description": "Pobieranie wygląda na zawieszone. Dane nie napływają od dłuższego czasu.",
+            "no_progress": "Brak postępu pobierania",
+            "tip_zapret": "Jeśli znajdujesz się w krajach WNP (Rosja, Białoruś, Kazachstan, z wyjątkiem Ukrainy), Twój dostawca może blokować nasze domeny. Spróbuj włączyć 'DPI Bypass' w ustawieniach i uruchom loader ponownie jako administrator."
+        },
+        "add_custom_client": "Dodaj własnego klienta",
+        "delete_custom_client": "Usuń własnego klienta",
+        "client_added": "Klient dodany",
+        "client_edited": "Klient zmieniony",
+        "client_deleted": "Klient usunięty",
+        "edit_custom_client": "Edytuj klienta",
+        "delete_custom_client_confirm": {},
+        "add_custom_client_modal": {
+            "client_name": "Nazwa klienta",
+            "enter_client_name": "Wprowadź nazwę klienta",
+            "minecraft_version": "Wersja Minecraft",
+            "main_class": "Klasa główna",
+            "main_class_placeholder": "np.: net.minecraft.client.main.Main",
+            "jar_file": "Plik JAR",
+            "no_file_selected": "Nie wybrano pliku",
+            "select_jar_file": "Wybierz plik .jar",
+            "selected": "Wybrano",
+            "adding": "Dodawanie...",
+            "add_client": "Dodaj klienta"
+        },
+        "edit_custom_client_modal": {
+            "client_name": "Nazwa klienta",
+            "enter_client_name": "Wprowadź nazwę klienta",
+            "minecraft_version": "Wersja Minecraft",
+            "main_class": "Klasa główna",
+            "main_class_placeholder": "np.: net.minecraft.client.main.Main",
+            "updating": "Aktualizowanie...",
+            "update_client": "Zaktualizuj klienta"
+        },
+        "delete_custom_client_confirm_modal": {
+            "title": "Usuń klienta",
+            "description": "Tej operacji nie można cofnąć",
+            "deleting": "Usuwanie...",
+            "delete_client": "Usuń klienta"
+        }
+    },
+    "preloader": {
+        "initializing": "Inicjalizacja...",
+        "connecting_servers": "Łączenie z serwerami...",
+        "loading_user_data": "Ładowanie danych użytkownika...",
+        "setting_up": "Ustawianie...",
+        "ready": "Gotowe!",
+        "initializing_progress": "INICJALIZACJA LOADERA"
+    },
+    "about": {
+        "codename": "Nazwa kodowa",
+        "commit": "Commit",
+        "description": "Dołącz do naszej społeczności, aby otrzymywać aktualizacje, wsparcie i zgłaszać wszelkie problemy, które możesz napotkać.",
+        "open_failed": "Nie udało się otworzyć {platform}",
+        "title": "O CollapseLoader",
+        "version": "Wersja",
+        "branch": "Gałąź",
+        "development": "Tryb deweloperski",
+        "commit_message": "Zatwierdź wiadomość"
+    },
+    "account": {
+        "change_password": "Zmień hasło",
+        "change_password_confirm_title": "Potwierdź zmianę hasła",
+        "confirm_password": "Potwierdź hasło",
+        "current_password": "Bieżące hasło",
+        "invisible_disabled": "Tryb niewidoczny wyłączony",
+        "invisible_enabled": "Tryb niewidoczny włączony",
+        "invisible_failed": "Musisz być online, aby zmienić ustawienia widoczności",
+        "invisible_mode": "Tryb niewidoczny",
+        "invisible_mode_description": "Po włączeniu będziesz w trybie offline dla innych użytkowników",
+        "streamer_mode": "Tryb streamera",
+        "streamer_mode_description": "Po włączeniu wszystkie pseudonimy będą ukryte dla prywatności",
+        "streamer_enabled": "Tryb streamera włączony",
+        "streamer_disabled": "Tryb streamera wyłączony",
+        "streamer_failed": "Nie udało się przełączyć trybu streamera",
+        "new_password": "Nowe hasło",
+        "nickname_label": "Edytuj nick",
+        "nickname_update_failed": "Nie udało się zaktualizować nicku. \nSpróbuj ponownie, gdy będziesz online.",
+        "nickname_update_success": "Nick zaktualizowany pomyślnie!",
+        "no_email": "Brak adresu email",
+        "password_change_failed": "Nie udało się zmienić hasła. \nSprawdź swoje połączenie i spróbuj ponownie.",
+        "password_change_success": "Hasło zostało pomyślnie zmienione!",
+        "password_mismatch": "Nowe hasła nie są identyczne.",
+        "password_too_short": "Nowe hasło musi mieć co najmniej 8 znaków.",
+        "using_cached_data": "Jesteś offline - zmiana statusu wyłączona",
+        "logout_confirm_title": "Potwierdź wylogowanie",
+        "social_links": "Linki społecznościowe",
+        "no_social_links": "Nie dodano linków",
+        "avatar_help": "PNG, JPG, GIF, WEBP do 5MB",
+        "avatar_drop": "Przeciągnij lub kliknij, aby przesłać awatar",
+        "upload_avatar": "Prześlij awatar",
+        "avatar_upload_refresh_failed": "Nie udało się odświeżyć awatara po przesłaniu: {error}",
+        "avatar_type_error": "Nieobsługiwany typ pliku",
+        "avatar_size_error": "Plik zbyt duży (maks. 5MB)",
+        "avatar_uploaded": "Awatar zaktualizowany",
+        "avatar_upload_failed": "Nie udało się przesłać awatara",
+        "reset_avatar": "Zresetuj awatar",
+        "avatar_reset_success": "Awatar pomyślnie zresetowany",
+        "avatar_reset_failed": "Nie udało się zresetować awatara: {error}",
+        "current_favorite": "Aktualny faworyt",
+        "favorite_client": "Ulubiony Klient",
+        "favorite_client_description": "Wybierz swojego ulubionego klienta, który chcesz wyświetlić w swoim profilu",
+        "favorite_client_update_failed": "Nie udało się zaktualizować ulubionego klienta",
+        "favorite_client_updated": "Ulubiony klient został pomyślnie zaktualizowany",
+        "no_favorite_client": "Nie wybrano ulubionego klienta",
+        "select_favorite_client": "Wybierz ulubionego klienta"
+    },
+    "roles": {
+        "admin": "Administrator",
+        "developer": "Wywoływacz",
+        "owner": "Właściciel",
+        "tester": "Próbnik",
+        "user": "Użytkownik"
+    },
+    "appLogs": {
+        "autoScroll": "Automatyczne przewijanie",
+        "copyLogs": "Kopiuj",
+        "noLogs": "Brak dostępnych logów.",
+        "searchPlaceholder": "Szukaj w logach...",
+        "download": "Pobierz logi",
+        "filterByLevel": "Filtruj wg poziomu",
+        "noMatchingLogs": "Nie znaleziono logów dla wybranych filtrów."
+    },
+    "auth": {
+        "logout": {
+            "confirm": "Czy na pewno chcesz wylogować się ze swojego konta?",
+            "local_only": "Wylogowanie następuje lokalnie. \nProblem z połączeniem z serwerem.",
+            "success": "Wylogowano pomyślnie!"
+        },
+        "login": {
+            "title": "Logowanie",
+            "username_placeholder": "Wprowadź nazwę użytkownika",
+            "password_placeholder": "Wprowadź hasło",
+            "login_button": "Zaloguj się",
+            "register_link": "Nie masz konta?",
+            "success": "Zalogowano pomyślnie!",
+            "login_failed": "Błąd logowania. Sprawdź swoje dane.",
+            "no_token": "Nie otrzymano tokena uwierzytelniającego.",
+            "error": "Nie można się zalogować. Sprawdź swoją nazwę użytkownika i hasło"
+        },
+        "register": {
+            "title": "Rejestracja",
+            "username_placeholder": "Wybierz nazwę użytkownika",
+            "email_placeholder": "Wprowadź swój email",
+            "password_placeholder": "Wybierz hasło",
+            "confirm_password_placeholder": "Potwierdź hasło",
+            "register_button": "Zarejestruj się",
+            "login_link": "Masz już konto?",
+            "registration_failed": "Rejestracja nie powiodła się. Spróbuj ponownie.",
+            "auto_login_failed": "Rejestracja pomyślna, ale automatyczne logowanie nie powiodło się. Zaloguj się ręcznie.",
+            "verification_required": "Wymagana weryfikacja adresu e-mail",
+            "check_email": "Wiadomość weryfikacyjna została wysłana na adres {email}. Sprawdź swoją skrzynkę odbiorczą i postępuj zgodnie z instrukcjami, aby zweryfikować swoje konto."
+        }
+    },
+    "blockedUsers": {
+        "noBlockedUsers": "Brak zablokowanych użytkowników. \nZablokowani użytkownicy pojawią się tutaj.",
+        "title": "Zablokowani użytkownicy ({count})"
+    },
+    "common": {
+        "back": "Wstecz",
+        "logout": "Wyloguj",
+        "unblock": "Odblokuj",
+        "next": "Dalej",
+        "previous": "Wstecz",
+        "delete": "Usuń",
+        "username": "Nazwa użytkownika",
+        "password": "Hasło",
+        "login": "Zaloguj",
+        "register": "Zarejestruj",
+        "download": "Pobierz",
+        "please_wait": "Proszę czekać",
+        "cancel": "Anuluj",
+        "reinstall": "Przeinstaluj",
+        "blocked": "Zablokowany",
+        "loading": "Ładowanie...",
+        "ok": "OK",
+        "close": "Zamknij",
+        "save": "Zapisz",
+        "browse": "Wybierz",
+        "edit": "Edytuj",
+        "add": "Dodaj",
+        "details": "Szczegóły",
+        "send": "Wyślij",
+        "copied_to_clipboard": "Kolor {color} skopiowany do schowka",
+        "done": "Gotowe",
+        "click": "Kliknij",
+        "show_more": "Pokaż więcej",
+        "show_less": "Ukryj",
+        "advanced": "Zaawansowany"
+    },
+    "friends": {
+        "addFriend": "Dodaj znajomego",
+        "noFriends": "Na razie brak znajomych. \nDodaj znajomych, aby zacząć!",
+        "receivedRequests": "Otrzymane",
+        "sentRequests": "Wysłane",
+        "title": "Znajomi ({count})",
+        "cancel_friend_request": "Anuluj zaproszenie",
+        "remove_success": "{name} usunięty ze znajomych",
+        "block_success": "{name} zablokowany",
+        "unblock_success": "{name} odblokowany",
+        "request_accepted": "Zaproszenie do znajomych przyjęte",
+        "request_rejected": "Zaproszenie do znajomych odrzucone",
+        "request_canceled": "Zaproszenie do znajomych anulowane",
+        "remove_failed": "Nie udało się usunąć znajomego",
+        "block_failed": "Nie udało się zablokować użytkownika",
+        "unblock_failed": "Nie udało się odblokować użytkownika",
+        "request_failed": "Nie udało się {action} zaproszenia do znajomych",
+        "load_failed": "Nie udało się załadować listy znajomych"
+    },
+    "time": {
+        "offline": "Offline",
+        "online": "Online"
+    },
+    "home": {
+        "search_placeholder": "Szukaj klientów...",
+        "no_clients": "Nie znaleziono klientów",
+        "adjust_search": "Spróbuj zmienić zapytanie wyszukiwania.",
+        "favorite_added": "Dodano do ulubionych",
+        "favorite_removed": "Usunięto z ulubionych",
+        "starting_download": "Rozpoczynanie pobierania {name}",
+        "no_internet": "Nie można pobrać klienta: Brak połączenia z Internetem.",
+        "not_installed": "{name} nie jest zainstalowany. Proszę go najpierw pobrać.",
+        "launching": "Uruchamianie {client}...",
+        "stopping": "Zatrzymywanie {name}...",
+        "opened_folder": "Otwarto folder dla {name}",
+        "reinstalling": "Ponowna instalacja {name}...",
+        "no_internet_reinstall": "Nie można przeinstalować klienta: Brak połączenia z Internetem.",
+        "logs_copied": "Logi dla {name} skopiowane do schowka",
+        "deleted_success": "{name} pomyślnie usunięty",
+        "download": "Pobierz",
+        "launch": "Uruchom",
+        "stop": "Zatrzymaj",
+        "unavailable": "Niedostępne",
+        "start_with": "Uruchom z",
+        "selected_clients": "Wybrano: {count} klientów",
+        "multiple_clients_selected": "Wybrano klientów: {count}",
+        "download_selected": "Pobierz wybrane",
+        "reinstall_selected": "Przeinstaluj wybrane",
+        "delete_selected": "Usuń wybrane",
+        "downloading_multiple": "Pobieranie {count} klientów...",
+        "deleting_multiple": "Usuwanie {count} klientów...",
+        "reinstalling_multiple": "Ponowna instalacja {count} klientów...",
+        "multiple_clients_deleted": "Pomyślnie usunięto {count} klientów",
+        "multiple_clients_reinstalled": "Pomyślnie przeinstalowano {count} klientów",
+        "no_clients_to_download": "Brak klientów do pobrania",
+        "no_clients_to_delete": "Brak zainstalowanych klientów do usunięcia",
+        "no_clients_to_reinstall": "Brak zainstalowanych klientów do przeinstalowania",
+        "stop_selected": "Zatrzymaj wybrane klienty",
+        "stopping_multiple": "Zatrzymywanie {count} klientów",
+        "multiple_clients_stopped": "Zatrzymano {count} klientów",
+        "filters_title": "Filtry",
+        "sort": {
+            "popularity": "Popularne",
+            "name": "Wg nazwy",
+            "newest": "Najnowsze",
+            "version": "Wg wersji",
+            "order": {
+                "asc": "Rosnąco",
+                "desc": "Malejąco"
+            },
+            "rating": "Wg oceny"
+        },
+        "filters": {
+            "installed": "Zainstalowane"
+        },
+        "clear_filters": "Wyczyść filtry",
+        "launch_another": "Uruchom inną instancję"
+    },
+    "theme": {
+        "actions": {
+            "add_favorite": "Dodaj do ulubionych",
+            "remove_favorite": "Usuń z ulubionych",
+            "open_folder": "Otwórz folder"
+        },
+        "select_theme": "Wybierz motyw",
+        "description": "Wybierz preferowany motyw.",
+        "change_success": "Motyw zmieniony",
+        "save_failed": "Nie udało się zapisać motywu: {error}",
+        "reset_button": "Reset",
+        "expert_css_title": "Ekspercka konfiguracja CSS",
+        "show_expert": "Pokaż eksperckie",
+        "hide_expert": "Ukryj eksperckie",
+        "expert_warning": "Tylko dla zaawansowanych użytkowników. Nieprawidłowy CSS może zepsuć interfejs.",
+        "custom_css_label": "Niestandardowy CSS",
+        "enable_custom_css": "Włącz niestandardowy CSS",
+        "css_examples_title": "Przykłady",
+        "example_1": "Dodaj rozmycie do kart",
+        "example_inserted": "Przykład wstawiony",
+        "enable_custom_css_first": "Najpierw włącz niestandardowy CSS",
+        "selected": "Wybrano",
+        "insert_example": "Wstaw",
+        "available_classes_label": "Dostępne klasy do edycji (kliknij, aby dodać je do kodu)",
+        "tooltip_client_card": "Główna klasa karty klienta",
+        "tooltip_sidebar_btn": "Klasa dla przycisków nawigacji po lewej",
+        "tooltip_launch_download_btn": "Klasy przycisków pobierania i uruchamiania",
+        "export_css_btn": "Eksportuj CSS",
+        "import_css_btn": "Importuj CSS",
+        "export_css_title": "Eksport niestandardowego CSS",
+        "import_css_title": "Import niestandardowego CSS",
+        "export_desc": "Skopiuj zakodowany CSS poniżej i udostępnij go. Dozwolony jest tylko bezpieczny CSS.",
+        "import_desc": "Wklej zakodowany CSS do importu. Dozwolony jest tylko bezpieczny CSS.",
+        "copy": "Kopiuj",
+        "copied": "Skopiowano!",
+        "copy_failed": "Nie udało się skopiować",
+        "import": "Importuj",
+        "import_success": "Preset pomyślnie zaimportowany!",
+        "import_invalid": "Nieprawidłowy preset. Import nieudany.",
+        "primary": "Kolor podstawowy",
+        "export_success": "Preset skopiowany do schowka",
+        "export_failed": "Nie udało się wyeksportować presetu",
+        "colors": "Kolory",
+        "base_colors": "Kolory bazowe",
+        "base100": "Baza 100",
+        "base200": "Baza 200",
+        "base300": "Baza 300",
+        "base_content": "Kolor treści (baza)",
+        "primary_secondary_accent": "Podstawowy / Wtórny / Akcent",
+        "primary_content": "Kolor tekstu podstawowego",
+        "secondary": "Wtórny",
+        "secondary_content": "Kolor tekstu wtórnego",
+        "accent": "Akcent",
+        "accent_content": "Kolor akcentu",
+        "semantic_colors": "Kolory semantyczne",
+        "neutral": "Neutralny",
+        "neutral_content": "Kolor tekstu neutralnego",
+        "info": "Informacja",
+        "info_content": "Kolor informacji",
+        "success": "Sukces",
+        "success_content": "Kolor sukcesu",
+        "warning": "Ostrzeżenie",
+        "warning_content": "Kolor ostrzeżenia",
+        "error": "Błąd",
+        "error_content": "Kolor błędu",
+        "preset": "Preset",
+        "presets": {
+            "title": "Presety motywów",
+            "description": "Zapisuj i zarządzaj presetami ustawień",
+            "save_current": "Zapisz bieżące",
+            "import": "Import",
+            "pagination": {
+                "per_page": "Na stronie",
+                "page_of": "Strona {current} z {total}"
+            },
+            "create_first_preset": "Utwórz pierwszy preset",
+            "no_presets_title": "Brak presetów",
+            "no_presets_description": "Utwórz swój pierwszy preset, zapisując bieżące ustawienia",
+            "loading": "Ładowanie presetów...",
+            "apply_preset": "Zastosuj preset",
+            "edit": "Edytuj",
+            "duplicate": "Duplikuj",
+            "export": "Eksportuj",
+            "delete": "Usuń",
+            "apply": "Zastosuj",
+            "created": "Utworzono {date}",
+            "selected_count": "Wybrano presetów: {count}",
+            "actions": {
+                "apply_first": "Zastosuj pierwszy wybrany",
+                "export_selected": "Eksportuj wybrane",
+                "duplicate_selected": "Duplikuj wybrane",
+                "delete_selected": "Usuń wybrane"
+            },
+            "create_modal": {
+                "name_label": "Nazwa presetu",
+                "name_required": "Nazwa presetu jest wymagana",
+                "name_too_long": "Nazwa presetu nie może przekraczać 50 znaków",
+                "name_placeholder": "Wprowadź nazwę presetu",
+                "description_label": "Opis",
+                "description_placeholder": "Dodatkowy opis presetu",
+                "source_info": "Źródło presetu",
+                "source_create": "Zostaną zapisane bieżące ustawienia",
+                "source_edit": "Edycja istniejącego presetu",
+                "create_button": "Utwórz preset",
+                "update_button": "Zaktualizuj preset",
+                "cancel": "Anuluj"
+            },
+            "import_modal": {
+                "method_label": "Metoda importu",
+                "method_file": "Plik",
+                "method_json": "JSON",
+                "file_label": "Wybierz plik presetu",
+                "file_help": "Wybierz plik .json presetu",
+                "json_label": "Wklej dane JSON",
+                "json_placeholder": "Wklej dane JSON presetu tutaj...",
+                "preview_title": "Podgląd",
+                "preview_name": "Nazwa",
+                "preview_description": "Opis",
+                "import_button": "Importuj preset",
+                "importing": "Importowanie...",
+                "cancel": "Anuluj",
+                "error_invalid_file": "Nieprawidłowy plik JSON",
+                "error_no_name": "Preset musi mieć nazwę",
+                "error_invalid_json": "Nieprawidłowy JSON"
+            },
+            "delete_modal": {
+                "message": "Czy na pewno chcesz usunąć preset \"{name}\"?",
+                "warning": "Tej operacji nie można cofnąć.",
+                "delete_button": "Usuń preset",
+                "cancel": "Anuluj"
+            },
+            "messages": {
+                "load_error": "Nie udało się załadować presetów",
+                "create_success": "Preset \"{name}\" utworzony pomyślnie",
+                "create_error": "Nie udało się utworzyć presetu",
+                "update_success": "Preset \"{name}\" zaktualizowany pomyślnie",
+                "update_error": "Nie udało się zaktualizować presetu",
+                "delete_success": "Preset \"{name}\" usunięty pomyślnie",
+                "delete_error": "Nie udało się usunąć presetu",
+                "duplicate_success": "Preset \"{name}\" zduplikowany pomyślnie",
+                "duplicate_error": "Nie udało się zduplikować presetu",
+                "apply_success": "Preset \"{name}\" zastosowany pomyślnie",
+                "import_success": "Preset \"{name}\" zaimportowany pomyślnie",
+                "apply_error": "Nie udało się zastosować presetu \"{name}\": {error}",
+                "import_no_name": "W importowanym presecie brakuje nazwy",
+                "import_error": "Nie udało się zaimportować presetu: {error}",
+                "multiple_deleted": "Pomyślnie usunięto {count} presetów",
+                "multiple_duplicated": "Pomyślnie zduplikowano {count} presetów",
+                "multiple_exported": "Wyeksportowano {count} presetów do schowka"
+            }
+        },
+        "dark": "Ciemny",
+        "light": "Jasny"
+    },
+    "logs": {
+        "copy_logs": "Kopiuj logi",
+        "title": "Logi {client}",
+        "view": "Zobacz logi"
+    },
+    "installation": {
+        "downloading": "Pobieranie",
+        "extracting": "Rozpakowywanie",
+        "download_complete": "Pobieranie zakończone",
+        "installation_complete": "Instalacja zakończona"
+    },
+    "errors": {
+        "clients_load_failed": "Nie udało się załadować listy klientów: {error}",
+        "clients_unavailable": "Klienci są w tej chwili niedostępni.",
+        "stop_error": "Nie udało się zatrzymać klienta: {error}",
+        "folder_error": "Nie udało się otworzyć folderu danych: {error}",
+        "reinstall_error": "Nie udało się przeinstalować {name}: {error}",
+        "logs_error": "Nie udało się uzyskać dostępu do logów: {error}",
+        "delete_error": "Nie udało się usunąć {name}: {error}",
+        "download_error": "Nie udało się pobrać {name}: {error}",
+        "load_accounts_error": "Błąd ładowania kont: {error}",
+        "launch_with_account_error": "Błąd uruchamiania klienta z kontem: {error}",
+        "download_network_error": "Błąd połączenia sieciowego podczas pobierania: {error}",
+        "download_timeout_error": "Przekroczono limit czasu pobierania. Sprawdź połączenie: {error}",
+        "download_disk_error": "Nie udało się zapisać pliku na dysku. Sprawdź wolne miejsce: {error}",
+        "hash_verification_failed": "Weryfikacja integralności pliku nie powiodła się dla {name}. Pobrany plik jest uszkodzony i został usunięty. Spróbuj pobrać ponownie.",
+        "hash_verification_launch_failed": "Nie można zweryfikować sumy kontrolnej dla klienta {name}"
+    },
+    "validation": {
+        "passwords_no_match": "Hasła nie są identyczne.",
+        "min_length": "{field} musi mieć co najmniej {length} znaków."
+    },
+    "irc": {
+        "inline": {
+            "title": "Czat globalny",
+            "latest_activity_connected": "Połączono z serwerem IRC.",
+            "tap_to_connect": "Kliknij, aby połączyć się z IRC",
+            "placeholder": "Wpisz wiadomość...",
+            "send_failed": "Nie udało się wysłać wiadomości",
+            "connection_error": "Błąd połączenia: {error}",
+            "status": {
+                "connected": "Połączono",
+                "reconnecting": "Ponowne łączenie...",
+                "connecting": "Łączenie...",
+                "error": "Problem z połączeniem",
+                "disconnected": "Rozłączono"
+            },
+            "privateMessage": "Wiadomość prywatna",
+            "copyNickname": "Kopiuj nick"
+        }
+    },
+    "settings": {
+        "general": "Ustawienia",
+        "sync": "Synchronizacja w chmurze",
+        "accounts": "Konta",
+        "reset_tooltip": "Przywróć wartości domyślne",
+        "sync_status": "Status synchronizacji w chmurze",
+        "sync_controls": "Zarządzanie synchronizacją",
+        "upload_title": "Prześlij do chmury",
+        "upload_description": "Utwórz kopię zapasową swoich bieżących ustawień, ulubionych i kont w chmurze.",
+        "upload_button": "Prześlij teraz",
+        "download_title": "Pobierz z chmury",
+        "download_description": "Przywróć swoje ustawienia, ulubione i konta z chmury.",
+        "download_button": "Pobierz teraz",
+        "syncing": "Synchronizacja...",
+        "auto_sync": "Autosynchronizacja",
+        "auto_sync_description": "Automatycznie synchronizuj dane z chmurą co 5 minut przy połączeniu z Internetem.",
+        "offline_warning": "Jesteś teraz offline. Funkcje synchronizacji są wyłączone.",
+        "no_cloud_data": "Nie znaleziono danych w chmurze. Prześlij swoje dane, aby zacząć korzystać z synchronizacji w chmurze.",
+        "add_account": "Dodaj konto",
+        "active": "Aktywne",
+        "tags": "Tagi",
+        "created": "Utworzono",
+        "last_used": "Ostatnie użycie",
+        "no_accounts_title": "Na razie brak kont",
+        "no_accounts_description": "Dodaj swoje pierwsze konto, aby rozpocząć",
+        "account_set_active": "{username} jest teraz aktywnym kontem!",
+        "account_set_active_failed": "Nie udało się ustawić aktywnego konta: {error}",
+        "download_success": "Pomyślnie pobrano z chmury!",
+        "download_failed": "Pobieranie z chmury nie powiodło się: {error}",
+        "sync_accounts_to_cloud_success": "Konta lokalne pomyślnie zsynchronizowane z Atlas!",
+        "sync_accounts_to_cloud_failed": "Nie udało się zsynchronizować kont lokalnych z Atlas: {error}",
+        "sync_accounts_from_cloud_success": "Konta pomyślnie zaimportowane z Atlas!",
+        "sync_accounts_from_cloud_failed": "Nie udało się zaimportować kont z Atlas: {error}",
+        "load_remote_accounts_failed": "Nie udało się załadować kont Atlas: {error}",
+        "load_settings_failed": "Nie udało się załadować ustawień: {error}",
+        "save_settings_failed": "Nie udało się zapisać ustawień: {error}",
+        "load_accounts_failed": "Nie udało się załadować kont: {error}",
+        "load_flags_failed": "Nie udało się załadować flag: {error}",
+        "language_change_failed": "Nie udało się zmienić języka: {error}",
+        "ram": {
+            "warning": "Ostrzeżenie: Wybrano {selectedRamMb} MB pamięci RAM. Przekracza to zalecany limit 6 GB i może powodować problemy z wydajnością lub awarie."
+        },
+        "descriptions": {
+            "ram": "Ilość przydzielonej pamięci w MB.",
+            "language": "Język aplikacji (np. en, pl).",
+            "discord_rpc_enabled": "Włącz Discord Rich Presence, aby pokazywać swoją aktywność na Discordzie.",
+            "optional_telemetry": "Zezwól na anonimową analitykę, aby ulepszyć CollapseLoader. Dane osobowe nie są zbierane.",
+            "cordshare": "Udostępniaj współrzędne znajomym, aby widzieli Twoją lokalizację w grze, nawet jeśli jesteś poza załadowanymi chunkami.",
+            "irc_chat": "Rozmawiaj z innymi użytkownikami CollapseLoader na czacie IRC w każdym kliencie.",
+            "hash_verify": "Włącz weryfikację sumy kontrolnej, aby upewnić się, że pobrane klienty nie są uszkodzone. Pomaga to w terminowym aktualizowaniu klientów do najnowszej wersji.",
+            "dpi_bypass": "Włącz, jeśli pobieranie klienta zatrzymało się na 0%, klient nie uruchamia się lub klienty nie ładują się.",
+            "sync_client_settings": "Synchronizuj ustawienia, paczki zasobów i inne parametry między wszystkimi klientami.",
+            "close_to_tray": "Zminimalizuj aplikację do zasobnika systemowego, zamiast zamykać ją po kliknięciu przycisku zamykania.",
+            "minimize_to_tray_on_launch": "Zminimalizuj aplikację do zasobnika systemowego po uruchomieniu klienta.",
+            "java_path": "Ścieżka do pliku wykonywalnego Java. Pozostaw puste, aby użyć domyślnej wersji.",
+            "java_args": "Dodatkowe argumenty JVM używane podczas uruchamiania klienta."
+        },
+        "ram_warning": {},
+        "telemetry": "Analityka",
+        "open_data": "Otwórz folder loadera",
+        "add_account_title": "Dodaj nowe konto",
+        "edit_account_title": "Edytuj konto",
+        "reset_title": "Potwierdzenie resetu ustawień",
+        "delete_account_title": "Potwierdzenie usunięcia konta",
+        "actions": "Działania",
+        "toast_position": {
+            "title": "Pozycja powiadomień",
+            "description": "Wybierz, gdzie na ekranie będą pojawiać się powiadomienia",
+            "bottom_right": "Dół, prawa",
+            "bottom_left": "Dół, lewa",
+            "top_right": "Góra, prawa",
+            "top_left": "Góra, lewa",
+            "bottom_center": "Dół, środek",
+            "top_center": "Góra, środek",
+            "preview_message": "Pozycja powiadomień zmieniona!"
+        },
+        "telemetry_info_title": "Informacje o telemetrii",
+        "reset_requirements": "Zresetuj pliki loadera",
+        "reset_requirements_success": "Pomyślnie usunięto pliki, teraz pobierz dowolnego klienta",
+        "reset_requirements_failed": "Nie udało się usunąć plików, spróbuj ponownie lub zrestartuj loader",
+        "login_required": "Musisz zalogować się na swoje konto, aby używać tej funkcji.",
+        "reset_cache_failed": "Nie udało się wyczyścić pamięci podręcznej, spróbuj ponownie",
+        "hash_verify": "Weryfikacja hash ",
+        "irc_chat": "Czat IRC",
+        "save_flags_failed": "Nie udało się zapisać flag: {error}",
+        "change_root": {
+            "title": "Zmień folder danych",
+            "action": "Zmień folder danych",
+            "target_folder": "Nowy folder",
+            "hint": "Wybierz folder, w którym będą przechowywane pliki CollapseLoader (klienty, cache itp.)",
+            "mode": "Co zrobić ze starym folderem?",
+            "mode_move": "Przenieś",
+            "mode_wipe": "Usuń",
+            "mode_move_desc": "Przenieś wszystkie dane ze starego folderu do nowego (zalecane)",
+            "mode_wipe_desc": "Usuń stary folder (wszystkie dane zostaną usunięte)",
+            "select_folder_first": "Najpierw wybierz folder",
+            "success": "Folder danych zmieniony",
+            "failed": "Nie udało się zmienić folderu danych: {error}",
+            "restart_required": "Uruchom ponownie aplikację, aby zmiany weszły w życie"
+        },
+        "sync_client_settings": "Synchronizuj ustawienia klienta",
+        "reset_settings": "Zresetuj ustawienia",
+        "accounts_description": "Zarządzaj swoimi kontami do gier i łatwo przełączaj się między nimi",
+        "accounts_management": "Zarządzanie kontami",
+        "no_matching_accounts": "Nie znaleziono pasujących kont",
+        "search_accounts": "Szukaj kont...",
+        "try_different_search": "Spróbuj zmienić parametry wyszukiwania lub filtry",
+        "local_account_sync": "Synchronizacja kont lokalnych",
+        "local_account_sync_description": "Utrzymuj lokalne konta CollapseLoader zsynchronizowane z Atlas, aby przywrócić je na innych urządzeniach.",
+        "sync_accounts_from_cloud_button": "Importuj konta Atlas",
+        "sync_accounts_to_cloud_button": "Prześlij konta lokalne",
+        "remote_accounts_loading": "Sprawdzanie kont na Atlas...",
+        "remote_accounts_present": "Na Atlas zsynchronizowano {count} kont.",
+        "remote_accounts_more": "i jeszcze {count} kont",
+        "remote_accounts_empty": "Na Atlas nie ma jeszcze zsynchronizowanych kont.",
+        "sync_login_required": "Zaloguj się, aby włączyć synchronizację",
+        "not_signed_in": "Nie jesteś zalogowany",
+        "close_to_tray": "Blisko tacy",
+        "minimize_to_tray_on_launch": "Minimalizuj do zasobnika przy uruchomieniu"
+    },
+    "userProfile": {
+        "playing": "Gra w",
+        "last_seen": "Był online",
+        "just_now": "przed chwilą",
+        "minutes_ago": "{count}min temu",
+        "hours_ago": "{count}godz. temu",
+        "days_ago": "{count}dni temu",
+        "remove_friend": "Usuń ze znajomych",
+        "block_user": "Zablokuj użytkownika",
+        "unblock_user": "Odblokuj użytkownika",
+        "back_to_friends": "Powrót do znajomych",
+        "profile_information": "Informacje o profilu",
+        "username": "Nazwa użytkownika",
+        "nickname": "Pseudonim",
+        "member_since": "Użytkownik od",
+        "actions": "Działania",
+        "online": "Online",
+        "offline": "Offline",
+        "friends_with": "Przyjaźnisz się z {name}",
+        "friend_request_sent": "Zaproszenie do znajomych wysłane do {name}",
+        "friend_request_received": "{name} wysłał Ci zaproszenie do znajomych",
+        "accept": "Akceptuj",
+        "decline": "Odrzuć",
+        "user_blocked": "Ten użytkownik jest zablokowany",
+        "send_friend_request": "Wyślij zaproszenie do znajomych",
+        "sending": "Wysyłanie...",
+        "canceling": "Anulowanie...",
+        "cancel_friend_request": "Anuluj zaproszenie",
+        "no_user_id": "ID użytkownika nie podane",
+        "user_not_found": "Użytkownik nie znaleziony",
+        "login_required": "Musisz się zalogować, aby przeglądać profile",
+        "profile_load_failed": "Nie udało się załadować profilu użytkownika",
+        "friend_request_sent_success": "Zaproszenie do znajomych wysłane do {name}",
+        "friend_request_failed": "Nie udało się wysłać zaproszenia: {error}",
+        "copy_username": "Kopiuj nazwę użytkownika",
+        "copied_username": "{name} skopiowano do schowka",
+        "copy_failed": "Nie udało się skopiować nazwy użytkownika",
+        "friend_request_canceled": "Zaproszenie do znajomych pomyślnie anulowane",
+        "friend_request_cancel_failed": "Nie udało się anulować zaproszenia",
+        "friend_removed_success": "{name} usunięty ze znajomych",
+        "friend_remove_failed": "Nie udało się usunąć ze znajomych",
+        "friend_request_responded": "Zaproszenie do znajomych {action}",
+        "friend_request_respond_failed": "Nie udało się {action} zaproszenia do znajomych",
+        "friend_request_not_found": "Nie znaleziono zaproszenia do znajomych",
+        "user_blocked_success": "{name} zablokowany",
+        "user_block_failed": "Nie udało się zablokować użytkownika",
+        "no_presets": "Ten użytkownik nie udostępnił jeszcze żadnych presetów.",
+        "create_preset": "Utwórz preset",
+        "presets_title": "Presety",
+        "presets": "presetów",
+        "presets_hidden_streamer": "Presety ukryte w trybie streamera.",
+        "favorite_client": "Ulubiony Klient"
+    },
+    "sync": {
+        "last_sync": "Ostatnia synchronizacja",
+        "minutes_ago": "{count}min temu",
+        "hours_ago": "{count}godz. temu",
+        "days_ago": "{count}dni temu"
+    },
+    "navigation": {
+        "home": "Główna",
+        "friends": "Znajomi",
+        "settings": "Ustawienia",
+        "logs": "Logi aplikacji",
+        "account": "Konto",
+        "about": "O programie",
+        "news": "Aktualności",
+        "customization": "Personalizacja",
+        "custom_clients": "Własne klienty",
+        "sidebar_help": {
+            "title": "Porada:",
+            "tip": "Możesz przenieść pasek boczny na dowolną stronę ekranu. Podwójne kliknięcie na pasek usunie odstępy między ikonami.",
+            "got_it": "Zrozumiałem"
+        }
+    },
+    "toast": {
+        "dev": {
+            "menu_opened": "Menu deweloperskie otwarte",
+            "flags_reset": "Flagi zresetowane!"
+        },
+        "theme": {
+            "emergency_reset_done": "Niestandardowy CSS zresetowany. {action}",
+            "emergency_reset_toggle_instruction": "Aby ponownie włączyć niestandardowy CSS, otwórz ustawienia motywu i wyłącz, a następnie włącz 'Włącz niestandardowy CSS'."
+        },
+        "client": {
+            "crashed": "Klient {name} uległ awarii. {error}",
+            "crashed_incomplete": "Klient {name} uległ awarii z powodu niekompletnego pobrania. Próba automatycznej ponownej instalacji.",
+            "reinstall_success": "Pomyślnie przeinstalowano {name}. Spróbuj uruchomić ponownie.",
+            "reinstall_failed": "Nie udało się przeinstalować {name}: {error}. Proszę przeinstalować ręcznie.",
+            "redownload_success": "Pomyślnie przeinstalowano {name}. Hash zweryfikowany."
+        },
+        "server": {
+            "offline": "Nie udało się określić statusu serwera. Zakładany tryb offline.",
+            "offline_base": "Jesteś teraz offline. ",
+            "cdn_and_api_offline": "Nie można połączyć się z CDN i API.",
+            "cdn_offline": "Nie można połączyć się z CDN.",
+            "api_offline": "Nie można połączyć się z API.",
+            "api_init_failed": "Nie udało się zainicjować API: {error}"
+        },
+        "settings": {
+            "flags_load_failed": "Nie udało się załadować flag: {error}",
+            "first_run_save_failed": "Nie udało się zapisać statusu pierwszego uruchomienia: {error}",
+            "disclaimer_save_failed": "Nie udało się zapisać statusu wyłączenia odpowiedzialności: {error}",
+            "theme_save_failed": "Nie udało się zapisać motywu: {error}"
+        },
+        "auth": {
+            "registration_success": "Rejestracja pomyślna! Proszę się zalogować."
+        },
+        "logs": {
+            "fetch_failed": "Błąd pobierania logów aplikacji: {error}",
+            "copied_success": "Logi aplikacji skopiowane do schowka!",
+            "copy_failed": "Nie udało się skopiować logów aplikacji: {error}",
+            "client_logs_copied": "Logi skopiowane do schowka!",
+            "client_logs_copy_failed": "Nie udało się skopiować logów do schowka.",
+            "download_success": "Logi pomyślnie zapisane!",
+            "download_failed": "Nie udało się zapisać logów: {error}"
+        },
+        "users": {
+            "blocked_load_failed": "Nie udało się załadować zablokowanych użytkowników",
+            "unblocked_success": "{name} odblokowany",
+            "unblock_failed": "Nie udało się odblokować użytkownika"
+        },
+        "friends": {
+            "search_failed": "Nie udało się znaleźć użytkowników",
+            "request_sent": "Zaproszenie do znajomych wysłane do {name}",
+            "request_send_failed": "Nie udało się wysłać zaproszenia"
+        },
+        "account": {
+            "username_required": "Wymagana nazwa użytkownika",
+            "account_updated": "Konto pomyślnie zaktualizowane!",
+            "account_update_failed": "Nie udało się zaktualizować konta: {error}",
+            "account_added": "Konto pomyślnie dodane!",
+            "account_add_failed": "Nie udało się dodać konta: {error}",
+            "account_deleted": "Konto pomyślnie usunięte!",
+            "account_delete_failed": "Nie udało się usunąć konta: {error}",
+            "nickname_update_failed": "Nie udało się zaktualizować pseudonimu. Spróbuj ponownie."
+        },
+        "modal": {
+            "settings_reset_success": "Ustawienia pomyślnie zresetowane!",
+            "settings_reset_failed": "Nie udało się zresetować ustawień: {error}"
+        },
+        "sync": {
+            "offline_error": "Nie można synchronizować w trybie offline",
+            "already_in_progress": "Synchronizacja już trwa",
+            "syncing": "Synchronizacja z chmurą...",
+            "success": "Synchronizacja zakończona pomyślnie!",
+            "failed": "Synchronizacja nie powiodła się: {error}",
+            "login_required": "Zaloguj się, aby włączyć synchronizację"
+        },
+        "telemetry": {
+            "analytics_enabled": "Analityka włączona. Dziękujemy za pomoc w ulepszaniu aplikacji!",
+            "analytics_disabled": "Analityka wyłączona.",
+            "analytics_enable_failed": "Nie udało się włączyć analityki: {error}",
+            "analytics_disable_failed": "Nie udało się wyłączyć analityki: {error}"
+        }
+    },
+    "discord": {
+        "details": {
+            "in_menu": "W menu",
+            "in_game": "W grze"
+        },
+        "states": {
+            "browsing_clients": "Przegląda klienty",
+            "configuring_settings": "Konfiguruje ustawienia",
+            "enjoying_visuals": "Podziwia wygląd",
+            "watching_client_behavior": "Przegląda logi klienta",
+            "in_profile": "W profilu",
+            "watching_about": "Przegląda informacje o nas",
+            "debugging": "Debugowanie",
+            "logging_in": "Loguje się",
+            "browsing_friends": "Patrzy co robią znajomi",
+            "browsing_news": "Czyta aktualności",
+            "browsing_custom_clients": "Patrzy na własne klienty"
+        }
+    },
+    "modal": {
+        "client_crash": {
+            "title": "Logi awarii {name}"
+        }
+    },
+    "news": {
+        "loading": "Ładowanie aktualności...",
+        "error_title": "Błąd ładowania aktualności",
+        "retry": "Spróbuj ponownie",
+        "no_news": "Brak aktualności",
+        "no_news_description": "Obecnie brak aktualności do wyświetlenia.",
+        "updated_at": "Zaktualizowano",
+        "not_found": "Nie znaleziono aktualności",
+        "server_error": "Wystąpił błąd serwera",
+        "network_error": "Błąd połączenia sieciowego",
+        "fetch_failed": "Nie udało się załadować aktualności: {error}",
+        "fetch_failed_toast": "Nie udało się załadować aktualności",
+        "new": "Nowe",
+        "mark_all_read": "Oznacz wszystko jako przeczytane",
+        "refresh": "Odśwież",
+        "search_placeholder": "Szukaj aktualności...",
+        "time": {}
+    },
+    "hold_button": {
+        "label": "Przytrzymaj, aby rozpocząć!",
+        "info_message": "Mówisz poważnie?"
+    },
+    "client": {
+        "details": {
+            "loading": "Ładowanie szczegółów...",
+            "info_tab": "Informacje",
+            "screenshots_tab": "Zrzuty ekranu",
+            "rating": "Ocena",
+            "no_rating": "Na razie brak ocen",
+            "login_to_rate": "Zaloguj się, aby ocenić",
+            "source_link": "Link do źródła",
+            "created": "Utworzono",
+            "changelog": "Lista zmian",
+            "no_changelog": "Lista zmian niedostępna",
+            "no_screenshots": "Zrzuty ekranu niedostępne",
+            "screenshot_viewer": {
+                "zoom_percent": "{percent}%",
+                "image_counter": "{current} / {total}",
+                "controls": {
+                    "esc_close": "ESC - Zamknij",
+                    "esc_reset": "ESC - Resetuj powiększenie",
+                    "navigate": "← → - Nawigacja",
+                    "click_zoom": "Klik - Powiększenie | Kółko - Powiększenie",
+                    "drag_pan": "Przeciąganie - Przesuwanie | +/- - Powiększenie | 0 - Reset"
+                }
+            },
+            "no_changelog_desc": "Aktualizacje i zmiany pojawią się tutaj.",
+            "comments_tab": "Komentarze",
+            "your_rating": "Twoja ocena"
+        },
+        "comments": {
+            "delete": "Usuń",
+            "empty": "Na razie brak komentarzy. Bądź pierwszy!",
+            "placeholder": "Napisz komentarz..."
+        }
+    },
+    "customization": {
+        "background_title": "Tło",
+        "background_image": "Adres URL obrazu tła",
+        "background_image_help": "Obsługuje jpg, png, webp, adresy URL danych",
+        "background_image_placeholder": "https://example.com/image.jpg",
+        "background_blur": "Rozmycie",
+        "background_opacity": "Nieprzezroczystość"
+    },
+    "updater": {
+        "update_available": "Dostępna aktualizacja",
+        "current": "Bieżąca",
+        "latest": "Najnowsza",
+        "changelog": "Lista zmian",
+        "download_install": "Pobierz i zainstaluj",
+        "downloading": "Pobieranie...",
+        "skip": "Pomiń",
+        "starting_download": "Rozpoczynanie pobierania aktualizacji...",
+        "update_installed": "Aktualizacja zainstalowana pomyślnie! Aplikacja zostanie uruchomiona ponownie.",
+        "update_failed": "Aktualizacja nie powiodła się: {error}",
+        "check_for_updates": "Sprawdź aktualizacje",
+        "checking_updates": "Sprawdzanie aktualizacji...",
+        "up_to_date": "Masz zainstalowaną najnowszą wersję!",
+        "show_more": "Pokaż jeszcze {count} wersji",
+        "show_less": "Pokaż mniej",
+        "categories": {
+            "feature": "Funkcjonalność",
+            "improvement": "Ulepszenie"
+        },
+        "no_update": "Nie znaleziono aktualizacji"
+    },
+    "custom_clients": {
+        "add": "Dodaj własnego klienta",
+        "running": "Uruchomiony",
+        "edit": "Edytuj",
+        "delete": "Usuń",
+        "added": "Dodano",
+        "stop": "Zatrzymaj",
+        "launch": "Uruchom",
+        "display_settings": "Ustawienia wyświetlania",
+        "display_mode_global": "Globalnie",
+        "display_mode": "Tryb wyświetlania",
+        "display_mode_separate": "Oddzielnie",
+        "no_results": "Spróbuj zmienić zapytanie wyszukiwania",
+        "no_clients_yet": "Dodaj swojego pierwszego klienta, aby zacząć"
+    },
+    "marketplace": {
+        "title": "Marketplace",
+        "open_marketplace": "Marketplace",
+        "search_placeholder": "Szukaj presetów...",
+        "share_local": "Udostępnij swój preset",
+        "share_current": "Udostępnij bieżący preset",
+        "share_modal_title": "Udostępnij preset",
+        "title_label": "Nazwa",
+        "title_placeholder": "Mój preset",
+        "description_label": "Opis",
+        "description_placeholder": "Opisz swój preset",
+        "public_label": "Publiczny",
+        "private_label": "Prywatny",
+        "make_private": "Ustaw jako prywatny",
+        "make_public": "Ustaw jako publiczny",
+        "edit_modal_title": "Edytuj preset",
+        "delete_confirm": "Czy na pewno chcesz usunąć ten preset? Tej operacji nie można cofnąć.",
+        "share": "Udostępnij",
+        "sharing": "Publikowanie...",
+        "shared_success": "Preset opublikowany!",
+        "shared_failed": "Nie udało się opublikować presetu",
+        "updated_success": "Preset zaktualizowany",
+        "updated_failed": "Nie udało się zaktualizować presetu",
+        "deleted_success": "Preset usunięty",
+        "deleted_failed": "Nie udało się usunąć presetu",
+        "apply": "Zastosuj",
+        "like": "Lubię to",
+        "by_user": "od {name}",
+        "no_items": "Na razie brak presetów",
+        "preset_details_title": "Szczegóły presetu",
+        "preset_details": "Szczegóły presetu",
+        "comments": "Komentarze",
+        "no_comments": "Na razie brak komentarzy",
+        "add_comment": "Dodaj komentarz",
+        "comment_placeholder": "Napisz komentarz...",
+        "preset_picker_label": "Wybierz preset lokalny",
+        "preset_picker_placeholder": "Wybierz preset...",
+        "no_local_presets": "Nie masz jeszcze żadnych presetów",
+        "by_author": "PRZEZ {imię}",
+        "sort_comments": "Najczęściej komentowane",
+        "sort_downloads": "Najczęściej pobierane",
+        "sort_newest": "Najnowszy",
+        "sort_popular": "Popularny"
+    },
+    "events": {
+        "halloween": {
+            "greeting": "Wesołego Halloween!",
+            "message": "Straszny sezon się rozpoczął! 🎃",
+            "tooltip": "Dobrego Halloween! (25 paź - 5 lis)"
+        }
+    },
+    "login": "Musisz zalogować się na swoje konto.",
+    "notifications": {
+        "friend_request_received": {
+            "title": "Zaproszenie do znajomych",
+            "message": "{name} wysłał Ci zaproszenie do znajomych!"
+        },
+        "friend_request_accepted": {
+            "title": "Zaproszenie zaakceptowane",
+            "message": "{name} zaakceptował Twoje zaproszenie do znajomych!"
+        }
+    },
+    "achievements": {
+        "title": "Osiągnięcia",
+        "unlocked_title": "Osiągnięcie odblokowane: {name}",
+        "locked": "Zablokowane",
+        "unlocked_at": "Odblokowano {date}",
+        "owned_percentage": "posiada {percent}% graczy",
+        "login_to_unlock": "Musisz być zalogowany, aby odblokować to osiągnięcie.",
+        "secret_title": "Ukryte osiągnięcie",
+        "secret_description": "Graj dalej, aby odkryć ten sekret!",
+        "list": {
+            "PLAYED_1Hour": {
+                "name": "Pierwsze kroki",
+                "description": "Graj przez 1 godzinę."
+            },
+            "PLAYED_10Hours": {
+                "name": "Dedykowany",
+                "description": "Graj przez 10 godzin."
+            },
+            "FIRST_GAME": {
+                "name": "Pierwsze uruchomienie",
+                "description": "Uruchom swojego pierwszego klienta."
+            },
+            "SECRET_FINDER": {
+                "name": "Poszukiwacz sekretów",
+                "description": "Znalazłeś sekret!"
+            },
+            "SOCIAL_BUTTERFLY": {
+                "name": "Społeczny motyl",
+                "description": "Dodaj link społecznościowy do swojego profilu."
+            },
+            "FREQUENT_FLYER": {
+                "name": "Częsty gość",
+                "description": "Uruchom klienty 50 razy."
+            },
+            "PRESET_MAX": {
+                "name": "Modniś",
+                "description": "Stwórz i udostępnij preset kastomizacji."
+            },
+            "BETA_TESTER": {
+                "name": "Beta tester",
+                "description": "Dołącz do programu testowego."
+            },
+            "COLLECTOR": {
+                "name": "Kolekcjoner",
+                "description": "Dodaj do ulubionych 5 różnych klientów."
+            },
+            "NIGHT_OWL": {
+                "name": "Nocny marek",
+                "description": "Graj między 2:00 a 5:00 rano."
+            },
+            "EARLY_BIRD": {
+                "name": "Ranny ptaszek",
+                "description": "Graj między 5:00 a 8:00 rano."
+            },
+            "WEEKEND_WARRIOR": {
+                "name": "Po pracy",
+                "description": "Graj w weekend."
+            }
+        }
+    }
+}
diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json
index 5ad1346d..f3a6e2bc 100644
--- a/src/i18n/locales/ru.json
+++ b/src/i18n/locales/ru.json
@@ -1,1075 +1,1200 @@
 {
-  "modals": {
-    "initial_setup": {
-      "welcome": {
-        "title": "Добро пожаловать в CollapseLoader",
-        "description": "Давайте быстро настроим приложение для лучшей производительности и приватности.",
-        "subtitle": "Быстрая настройка, чтобы начать работу",
-        "features": {
-          "fast_startup": "Быстрый старт — минимальное время ожидания",
-          "secure_clients": "Надёжные клиенты — проверены и полностью безопасны",
-          "auto_updates": "Автообновления — держите лоадер и клиенты актуальными"
-        }
-      },
-      "gui": {},
-      "ram": {
-        "title": "Настройки памяти",
-        "subtitle": "Выберите, сколько оперативной памяти выделить клиентам",
-        "description": "Настройте объем ОЗУ для оптимальной производительности",
-        "warning": "Предупреждение: Вы выбрали {selectedRamMb} МБ оперативной памяти. Это превышает рекомендуемый лимит в 6 ГБ и может вызвать проблемы с производительностью или сбои."
-      },
-      "registration": {
-        "registering": "Регистрация..."
-      },
-      "feedback": {
-        "title": "Обратная связь",
-        "subtitle": "Свяжитесь с нашим сообществом для поддержки и обратной связи",
-        "description": "Присоединяйтесь к нашему сообществу для получения поддержки и обновлений",
-        "optional": "Не обязательно, но мы рекомендуем подписаться"
-      },
-      "telemetry": {
-        "title": "Дополнительная аналитика",
-        "subtitle": "Поделитесь анонимной статистикой, чтобы помочь приоритизировать улучшения (необязательно)",
-        "description": "Помогите нам улучшить CollapseLoader. Эта информация помогает нам понять, как используется приложение, и сделать его лучше. Вы можете изменить эту настройку в любое время в меню настроек.",
-        "data_collected_title": "Что мы собираем:",
-        "data_collected": {
-          "performance": "Показатели производительности (время запуска, использование памяти)",
-          "usage_patterns": "Паттерны использования (наиболее используемые клиенты, частота запуска)",
-          "crash_reports": "Отчеты о сбоях и ошибках для улучшения стабильности"
-        }
-      },
-      "appreciation": {
-        "title": "Спасибо за выбор CollapseLoader",
-        "subtitle": "Вы готовы — можно начинать",
-        "description": "Мы надеемся, что вам понравится использовать наш лоадер!"
-      },
-      "disclaimer": {
-        "title": "Отказ от ответственности",
-        "responsibility": "Разработчики CollapseLoader и создатели любых перечисленных клиентов не несут ответственности за любые последствия, которые могут возникнуть в результате вашего использования этого программного обеспечения или клиентов, к которым оно предоставляет доступ.",
-        "acknowledgment": "Используя это приложение, вы принимаете на себя все риски",
-        "accept": "Я понимаю и принимаю"
-      },
-      "language_changed": "Язык успешно изменен!",
-      "language_change_failed": "Не удалось изменить язык. Попробуйте еще раз.",
-      "language_here": "Вы можете изменить язык тут"
-    },
-    "block_unblock_confirm": {
-      "block_message": "Вы уверены, что хотите заблокировать {displayName}? Это удалит их из списка друзей и предотвратит будущий контакт.",
-      "unblock_message": "Вы уверены, что хотите разблокировать {displayName}? Они смогут снова отправить вам запросы в друзья.",
-      "yes_unblock": "Да, разблокировать",
-      "yes_block": "Да, заблокировать"
-    },
-    "reset_confirm": {
-      "message": "Вы уверены, что хотите сбросить все настройки к значениям по умолчанию? Это действие нельзя отменить.",
-      "yes_reset": "Да, сбросить"
+    "reports": {
+        "title": "Жалоба на {name}",
+        "description": "Если кто-то нарушает правила или ведёт себя токсично, пожалуйста, сообщите нам.",
+        "reason_label": "Причина",
+        "select_reason": "Выберите причину",
+        "reasons": {
+            "HARASSMENT": "Домогательства / Травля",
+            "SPAM": "Спам",
+            "INAPPROPRIATE_CONTENT": "Неприемлемый контент",
+            "OTHER": "Другое"
+        },
+        "details_label": "Подробности (необязательно)",
+        "details_placeholder": "Укажите дополнительную информацию о ситуации...",
+        "submit": "Отправить жалобу",
+        "report_user": "Пожаловаться на пользователя",
+        "success_message": "Жалоба успешно отправлена. Спасибо!",
+        "error_message": "Не удалось отправить жалобу. Попробуйте позже."
     },
-    "remove_friend_confirm": {
-      "message": "Вы уверены, что хотите удалить {displayName} из друзей? Это действие нельзя отменить.",
-      "yes_remove": "Да, удалить"
-    },
-    "cancel_friend_request_confirm": {
-      "message": "Вы уверены, что хотите отменить запрос в друзья для {displayName}?",
-      "yes_cancel": "Да, отменить запрос",
-      "keep_request": "Оставить запрос"
-    },
-    "register_prompt": {
-      "title": "Создать аккаунт",
-      "description": "Зарегистрируйте аккаунт, чтобы разблокировать все функции и синхронизировать настройки между устройствами.",
-      "benefits": {
-        "sync": "Сохранение и синхронизация настроек (включая темы, избранное и т.д.)",
-        "notifications": "Получение уведомлений об обновлениях"
-      },
-      "register_now": "Зарегистрироваться",
-      "maybe_later": "Возможно, позже"
+    "modals": {
+        "initial_setup": {
+            "welcome": {
+                "title": "Добро пожаловать в CollapseLoader",
+                "description": "Давайте быстро настроим приложение для лучшей производительности и приватности.",
+                "subtitle": "Быстрая настройка, чтобы начать работу",
+                "features": {
+                    "fast_startup": "Быстрый старт — минимальное время ожидания",
+                    "secure_clients": "Надёжные клиенты — проверены и полностью безопасны",
+                    "auto_updates": "Автообновления — держите лоадер и клиенты актуальными"
+                }
+            },
+            "gui": {},
+            "ram": {
+                "title": "Настройки памяти",
+                "subtitle": "Выберите, сколько оперативной памяти выделить клиентам",
+                "description": "Настройте объем ОЗУ для оптимальной производительности",
+                "warning": "Предупреждение: Вы выбрали {selectedRamMb} МБ оперативной памяти. Это превышает рекомендуемый лимит в 6 ГБ и может вызвать проблемы с производительностью или сбои."
+            },
+            "registration": {
+                "registering": "Регистрация..."
+            },
+            "feedback": {
+                "title": "Обратная связь",
+                "subtitle": "Свяжитесь с нашим сообществом для поддержки и обратной связи",
+                "description": "Присоединяйтесь к нашему сообществу для получения поддержки и обновлений",
+                "optional": "Не обязательно, но мы рекомендуем подписаться"
+            },
+            "telemetry": {
+                "title": "Дополнительная аналитика",
+                "subtitle": "Поделитесь анонимной статистикой, чтобы помочь приоритизировать улучшения (необязательно)",
+                "description": "Помогите нам улучшить CollapseLoader. Эта информация помогает нам понять, как используется приложение, и сделать его лучше. Вы можете изменить эту настройку в любое время в меню настроек.",
+                "data_collected_title": "Что мы собираем:",
+                "data_collected": {
+                    "performance": "Показатели производительности (время запуска, использование памяти)",
+                    "usage_patterns": "Паттерны использования (наиболее используемые клиенты, частота запуска)",
+                    "crash_reports": "Отчеты о сбоях и ошибках для улучшения стабильности"
+                }
+            },
+            "appreciation": {
+                "title": "Спасибо за выбор CollapseLoader",
+                "subtitle": "Вы готовы — можно начинать",
+                "description": "Мы надеемся, что вам понравится использовать наш лоадер!"
+            },
+            "disclaimer": {
+                "title": "Отказ от ответственности",
+                "responsibility": "Разработчики CollapseLoader и создатели любых перечисленных клиентов не несут ответственности за любые последствия, которые могут возникнуть в результате вашего использования этого программного обеспечения или клиентов, к которым оно предоставляет доступ.",
+                "acknowledgment": "Используя это приложение, вы принимаете на себя все риски",
+                "accept": "Я понимаю и принимаю"
+            },
+            "language_changed": "Язык успешно изменен!",
+            "language_change_failed": "Не удалось изменить язык. Попробуйте еще раз.",
+            "language_here": "Вы можете изменить язык тут"
+        },
+        "block_unblock_confirm": {
+            "block_message": "Вы уверены, что хотите заблокировать {displayName}? Это удалит их из списка друзей и предотвратит будущий контакт.",
+            "unblock_message": "Вы уверены, что хотите разблокировать {displayName}? Они смогут снова отправить вам запросы в друзья.",
+            "yes_unblock": "Да, разблокировать",
+            "yes_block": "Да, заблокировать"
+        },
+        "reset_confirm": {
+            "message": "Вы уверены, что хотите сбросить все настройки к значениям по умолчанию? Это действие нельзя отменить.",
+            "yes_reset": "Да, сбросить"
+        },
+        "remove_friend_confirm": {
+            "message": "Вы уверены, что хотите удалить {displayName} из друзей? Это действие нельзя отменить.",
+            "yes_remove": "Да, удалить"
+        },
+        "cancel_friend_request_confirm": {
+            "message": "Вы уверены, что хотите отменить запрос в друзья для {displayName}?",
+            "yes_cancel": "Да, отменить запрос",
+            "keep_request": "Оставить запрос"
+        },
+        "register_prompt": {
+            "title": "Создать аккаунт",
+            "description": "Зарегистрируйте аккаунт, чтобы разблокировать все функции и синхронизировать настройки между устройствами.",
+            "benefits": {
+                "sync": "Сохранение и синхронизация настроек (включая темы, избранное и т.д.)",
+                "notifications": "Получение уведомлений об обновлениях"
+            },
+            "register_now": "Зарегистрироваться",
+            "maybe_later": "Возможно, позже"
+        },
+        "edit_nickname": {
+            "label": "Никнейм",
+            "placeholder": "Введите ваш никнейм",
+            "description": "Необязательно - так вас будут видеть другие",
+            "update": "Обновить никнейм"
+        },
+        "social_links": {
+            "title": "Социальные ссылки",
+            "add_title": "Добавить ссылку",
+            "edit_title": "Редактировать ссылку",
+            "fill_fields": "Пожалуйста, выберите платформу и введите корректную ссылку.",
+            "added": "Ссылка добавлена.",
+            "add_failed": "Не удалось добавить ссылку.",
+            "load_failed": "Не удалось загрузить ссылки.",
+            "deleted": "Ссылка удалена.",
+            "delete_failed": "Не удалось удалить ссылку.",
+            "updated": "Ссылка обновлена.",
+            "update_failed": "Не удалось обновить ссылку.",
+            "hidden_in_streamer_mode": "Социальные ссылки скрыты в режиме стримера."
+        },
+        "edit_account": {
+            "username_label": "Имя пользователя",
+            "tags_label": "Теги (через запятую)",
+            "update": "Обновить аккаунт"
+        },
+        "delete_account_confirm": {
+            "message": "Вы уверены, что хотите удалить аккаунт \"{username}\"? Это действие нельзя отменить.",
+            "yes_delete": "Да, удалить"
+        },
+        "change_password_confirm": {
+            "message": "Вы уверены, что хотите изменить пароль? Это немедленно обновит учетные данные вашего аккаунта.",
+            "warning": "Если вы потеряете доступ к текущему паролю, возможно, потребуется восстановление аккаунта.",
+            "yes_change": "Да, изменить пароль"
+        },
+        "logout_confirm": {
+            "message": "Вы уверены, что хотите выйти из аккаунта?",
+            "info": "Это разлогинит вас, и может потребовать повторного входа для доступа к некоторым функциям.",
+            "yes_logout": "Да, выйти"
+        },
+        "client_crash": {
+            "error_occurred": "Произошла ошибка: {error}",
+            "crashed_message": "Клиент {clientName} крашнул. Смотрите логи ниже для подробностей.",
+            "no_logs": "Логи недоступны.",
+            "copy_logs": "Копировать логи",
+            "close": "Закрыть"
+        },
+        "add_friend": {
+            "search_label": "Поиск пользователей",
+            "search_placeholder": "Введите имя пользователя...",
+            "add_friend": "Добавить в друзья",
+            "already_friends": "Уже друзья",
+            "request_sent": "Запрос отправлен",
+            "request_received": "Запрос получен",
+            "blocked": "Заблокирован",
+            "no_users_found": "Пользователи не найдены",
+            "search_hint": "Введите не менее 2 символов для поиска",
+            "close": "Закрыть"
+        },
+        "add_account": {
+            "username_label": "Имя пользователя",
+            "username_placeholder": "Введите имя пользователя",
+            "tags_label": "Теги (через запятую)",
+            "tags_placeholder": "например: funtime, spookytime",
+            "add_account": "Добавить аккаунт"
+        },
+        "telemetry_consent": {
+            "title": "Согласие на дополнительную телеметрию",
+            "description": "Чтобы улучшить ваш опыт использования CollapseLoader, мы можем собирать дополнительную аналитику. Эти данные помогут нам понять, как приложение используется, и сделать его лучше.",
+            "data_collected_title": "Какие данные мы собираем:",
+            "data_collected": {
+                "performance": "Показатели производительности (время запуска, использование памяти)",
+                "usage_patterns": "Паттерны использования (наиболее используемые клиенты, частота запуска)",
+                "crash_reports": "Отчеты о сбоях и ошибках для улучшения стабильности (АНОНИМНЫЕ, данные о системе не собираются)",
+                "feature_usage": "Статистика использования функций приложения (например, какие клиенты чаще всего запускаются, какие функции используются)"
+            },
+            "privacy_note_title": "Приватность: ",
+            "privacy_note": "Все данные анонимны и не содержат личной информации. Вы можете отключить эту функцию в любое время в настройках.",
+            "accept": "Разрешить аналитику",
+            "decline": "Отказаться"
+        },
+        "insecure_client_warning": {
+            "modal_title": "Предупреждение безопасности",
+            "title": "Предупреждение о непроверенном клиенте",
+            "subtitle": "Этот клиент не проверен на вирусы",
+            "description": "Вы собираетесь запустить \"{clientName}\", который не был проверен на наличие вредоносного ПО или вирусов. Этот клиент может содержать потенциально опасный код, который может повредить вашу систему или скомпрометировать безопасность.",
+            "dont_show_again": "Больше не показывать это предупреждение для этого клиента",
+            "proceed_anyway": "Запустить в любом случае",
+            "cancel": "Отмена",
+            "close": "Я понял"
+        },
+        "slow_download": {
+            "modal_title": "Медленная загрузка",
+            "title": "Низкая скорость загрузки",
+            "subtitle": "Скорость загрузки ниже ожидаемой",
+            "description": "Текущая скорость загрузки ниже обычной. Это может привести к увеличению времени загрузки.",
+            "current_speed": "Текущая скорость:",
+            "tip_1": "Проверьте подключение к интернету",
+            "tip_2": "Попробуйте закрыть другие приложения, использующие интернет",
+            "tip_3": "Попробуйте повторить загрузку позже",
+            "dont_show_again": "Больше не показывать это предупреждение",
+            "stalled_modal_title": "Загрузка зависла",
+            "stalled_title": "Загрузка остановилась",
+            "stalled_subtitle": "Нет прогресса",
+            "stalled_description": "Загрузка, похоже, зависла. Данные не поступают уже некоторое время.",
+            "no_progress": "Нет прогресса загрузки",
+            "tip_zapret": "Если вы находитесь в странах СНГ (Россия, Беларусь, Казахстан, кроме Украины), ваш провайдер может блокировать наши домены. Попробуйте включить 'DPI Bypass' в настройках и перезапустите загрузчик от имени администратора."
+        },
+        "add_custom_client": "Добавить пользовательский клиент",
+        "delete_custom_client": "Удалить свой клиент",
+        "client_added": "Клиент добавлен",
+        "client_edited": "Клиент изменён",
+        "client_deleted": "Клиент удалён",
+        "edit_custom_client": "Редактировать клиент",
+        "delete_custom_client_confirm": {},
+        "add_custom_client_modal": {
+            "client_name": "Имя клиента",
+            "enter_client_name": "Введите имя клиента",
+            "minecraft_version": "Версия Minecraft",
+            "main_class": "Главный класс",
+            "main_class_placeholder": "например: net.minecraft.client.main.Main",
+            "jar_file": "JAR файл",
+            "no_file_selected": "Файл не выбран",
+            "select_jar_file": "Выберите .jar файл",
+            "selected": "Выбрано",
+            "adding": "Добавление...",
+            "add_client": "Добавить клиент"
+        },
+        "edit_custom_client_modal": {
+            "client_name": "Имя клиента",
+            "enter_client_name": "Введите имя клиента",
+            "minecraft_version": "Версия Minecraft",
+            "main_class": "Главный класс",
+            "main_class_placeholder": "например: net.minecraft.client.main.Main",
+            "updating": "Обновление...",
+            "update_client": "Обновить клиент"
+        },
+        "delete_custom_client_confirm_modal": {
+            "title": "Удалить клиент",
+            "description": "Это действие нельзя отменить",
+            "deleting": "Удаление...",
+            "delete_client": "Удалить клиент"
+        }
     },
-    "edit_nickname": {
-      "label": "Никнейм",
-      "placeholder": "Введите ваш никнейм",
-      "description": "Необязательно - так вас будут видеть другие",
-      "update": "Обновить никнейм"
+    "preloader": {
+        "initializing": "Инициализация...",
+        "connecting_servers": "Подключение к серверам...",
+        "ready": "Готово!",
+        "initializing_progress": "ИНИЦИАЛИЗАЦИЯ ЛОАДЕРА",
+        "loading_user_data": "Загрузка данных юзера..."
     },
-    "social_links": {
-      "title": "Социальные ссылки",
-      "add_title": "Добавить ссылку",
-      "edit_title": "Редактировать ссылку",
-      "fill_fields": "Пожалуйста, выберите платформу и введите корректную ссылку.",
-      "added": "Ссылка добавлена.",
-      "add_failed": "Не удалось добавить ссылку.",
-      "load_failed": "Не удалось загрузить ссылки.",
-      "deleted": "Ссылка удалена.",
-      "delete_failed": "Не удалось удалить ссылку.",
-      "updated": "Ссылка обновлена.",
-      "update_failed": "Не удалось обновить ссылку.",
-      "hidden_in_streamer_mode": "Социальные ссылки скрыты в режиме стримера."
+    "about": {
+        "codename": "Кодовое имя",
+        "commit": "Коммит",
+        "description": "Присоединяйтесь к нашему сообществу, чтобы получать обновления, поддержку, и сообщать о любых проблемах, с которыми вы можете столкнуться.",
+        "open_failed": "Не удалось открыть {platform}",
+        "title": "Об CollapseLoader",
+        "version": "Версия",
+        "branch": "Бренч",
+        "development": "Режим разработчика",
+        "commit_message": "Сообщение коммита"
     },
-    "edit_account": {
-      "username_label": "Имя пользователя",
-      "tags_label": "Теги (через запятую)",
-      "update": "Обновить аккаунт"
+    "account": {
+        "change_password": "Изменить пароль",
+        "change_password_confirm_title": "Подтвердить изменение пароля",
+        "confirm_password": "Подтвердите пароль",
+        "current_password": "Текущий пароль",
+        "invisible_disabled": "Невидимый режим отключен",
+        "invisible_enabled": "Невидимый режим включен",
+        "invisible_failed": "Вы должны быть онлайн, чтобы изменить настройки видимости",
+        "invisible_mode": "Невидимый режим",
+        "invisible_mode_description": "При включении вы окажетесь в офлайн режиме для других пользователей",
+        "streamer_mode": "Режим стримера",
+        "streamer_mode_description": "При включении все никнеймы будут скрыты для приватности",
+        "streamer_enabled": "Режим стримера включен",
+        "streamer_disabled": "Режим стримера отключен",
+        "streamer_failed": "Не удалось переключить режим стримера",
+        "new_password": "Новый пароль",
+        "nickname_label": "Редактировать ник",
+        "nickname_update_failed": "Не удалось обновить ник. \nПожалуйста, попробуйте еще раз, когда вы будете онлайн.",
+        "nickname_update_success": "Ник обновлен успешно!",
+        "no_email": "Нет электронной почты",
+        "password_change_failed": "Не удалось изменить пароль. \nПожалуйста, проверьте свое соединение и попробуйте еще раз.",
+        "password_change_success": "Пароль успешно изменился!",
+        "password_mismatch": "Новые пароли не совпадают.",
+        "password_too_short": "Новый пароль должен быть не менее 8 символов в длину.",
+        "using_cached_data": "Вы в офлайне - изменения статуса отключено",
+        "logout_confirm_title": "Подтвердить выход",
+        "social_links": "Социальные ссылки",
+        "no_social_links": "Ссылки не добавлены",
+        "avatar_help": "PNG, JPG, GIF, WEBP до 5МБ",
+        "avatar_drop": "Перетащите или кликните, чтобы загрузить аватар",
+        "upload_avatar": "Загрузить аватар",
+        "avatar_upload_refresh_failed": "Не удалось обновить аватар после загрузки: {error}",
+        "avatar_type_error": "Неподдерживаемый тип файла",
+        "avatar_size_error": "Файл слишком большой (макс 5МБ)",
+        "avatar_uploaded": "Аватар обновлён",
+        "avatar_upload_failed": "Не удалось загрузить аватар",
+        "reset_avatar": "Сбросить аватар",
+        "avatar_reset_success": "Аватар успешно сброшен",
+        "avatar_reset_failed": "Не удалось сбросить аватар: {error}",
+        "favorite_client": "Любимый клиент",
+        "favorite_client_description": "Выберите свой любимый клиент для отображения в профиле",
+        "select_favorite_client": "Выбрать любимый клиент",
+        "no_favorite_client": "Любимый клиент не выбран",
+        "current_favorite": "Текущий любимый",
+        "favorite_client_updated": "Любимый клиент успешно обновлён",
+        "favorite_client_update_failed": "Не удалось обновить любимый клиент"
     },
-    "delete_account_confirm": {
-      "message": "Вы уверены, что хотите удалить аккаунт \"{username}\"? Это действие нельзя отменить.",
-      "yes_delete": "Да, удалить"
+    "roles": {
+        "user": "Пользователь",
+        "tester": "Тестер",
+        "admin": "Админ",
+        "developer": "Разработчик",
+        "owner": "Владелец"
     },
-    "change_password_confirm": {
-      "message": "Вы уверены, что хотите изменить пароль? Это немедленно обновит учетные данные вашего аккаунта.",
-      "warning": "Если вы потеряете доступ к текущему паролю, возможно, потребуется восстановление аккаунта.",
-      "yes_change": "Да, изменить пароль"
+    "appLogs": {
+        "autoScroll": "Автоматическая прокрутка",
+        "copyLogs": "Копировать",
+        "noLogs": "Нет доступных логов.",
+        "searchPlaceholder": "Поиск логов...",
+        "download": "Скачать логи",
+        "filterByLevel": "Фильтр по уровню",
+        "noMatchingLogs": "Логи не найдены по вашим фильтрам."
     },
-    "logout_confirm": {
-      "message": "Вы уверены, что хотите выйти из аккаунта?",
-      "info": "Это разлогинит вас, и может потребовать повторного входа для доступа к некоторым функциям.",
-      "yes_logout": "Да, выйти"
+    "auth": {
+        "logout": {
+            "confirm": "Вы уверены, что хотите выйти из своей учетной записи?",
+            "local_only": "Выход производиться локально. \nПроблема с подключением к серверу.",
+            "success": "Вы вышли из системы успешно!"
+        },
+        "login": {
+            "title": "Вход",
+            "username_placeholder": "Введите ваше имя пользователя",
+            "password_placeholder": "Введите ваш пароль",
+            "login_button": "Войти",
+            "register_link": "Нет аккаунта?",
+            "success": "Вход выполнен успешно!",
+            "login_failed": "Ошибка входа. Проверьте свои учетные данные.",
+            "no_token": "Токен аутентификации не получен.",
+            "error": "Не получилось войти, проверьте логин и пароль"
+        },
+        "register": {
+            "title": "Регистрация",
+            "username_placeholder": "Выберите имя пользователя",
+            "email_placeholder": "Введите ваш email",
+            "password_placeholder": "Выберите пароль",
+            "confirm_password_placeholder": "Подтвердите пароль",
+            "register_button": "Зарегистрироваться",
+            "login_link": "Уже есть аккаунт?",
+            "registration_failed": "Регистрация не удалась. Пожалуйста, попробуйте еще раз.",
+            "auto_login_failed": "Регистрация прошла успешно, но автоматический вход не удался. Пожалуйста, войдите вручную.",
+            "verification_required": "Требуется подтверждение электронной почты",
+            "check_email": "На электронную почту {email} было отправлено письмо для подтверждения. Пожалуйста, проверьте свой почтовый ящик и следуйте инструкциям, чтобы подтвердить свою учетную запись."
+        }
     },
-    "client_crash": {
-      "error_occurred": "Произошла ошибка: {error}",
-      "crashed_message": "Клиент {clientName} крашнул. Смотрите логи ниже для подробностей.",
-      "no_logs": "Логи недоступны.",
-      "copy_logs": "Копировать логи",
-      "close": "Закрыть"
+    "blockedUsers": {
+        "noBlockedUsers": "Нет заблокированных пользователей. \nЗаблокированные пользователи появятся здесь.",
+        "title": "Заблокированные пользователи ({count})"
     },
-    "add_friend": {
-      "search_label": "Поиск пользователей",
-      "search_placeholder": "Введите имя пользователя...",
-      "add_friend": "Добавить в друзья",
-      "already_friends": "Уже друзья",
-      "request_sent": "Запрос отправлен",
-      "request_received": "Запрос получен",
-      "blocked": "Заблокирован",
-      "no_users_found": "Пользователи не найдены",
-      "search_hint": "Введите не менее 2 символов для поиска",
-      "close": "Закрыть"
+    "common": {
+        "back": "Назад",
+        "logout": "Выход",
+        "unblock": "Разблокировать",
+        "next": "Дальше",
+        "previous": "Назад",
+        "delete": "Удалить",
+        "username": "Имя пользователя",
+        "password": "Пароль",
+        "login": "Вход",
+        "register": "Регистрация",
+        "download": "Скачать",
+        "please_wait": "Пожалуйста, подождите",
+        "cancel": "Отмена",
+        "reinstall": "Переустановить",
+        "blocked": "Заблокированный",
+        "loading": "Загрузка...",
+        "ok": "Окей",
+        "close": "Закрыть",
+        "save": "Сохранить",
+        "browse": "Выбрать",
+        "edit": "Редактировать",
+        "add": "Добавить",
+        "details": "Подробности",
+        "send": "Отправить",
+        "copied_to_clipboard": "Цвет {color} скопирован в буфер обмена",
+        "done": "Готово",
+        "click": "Нажмите",
+        "show_more": "Показать больше",
+        "show_less": "Скрыть",
+        "advanced": "Дополнительные"
     },
-    "add_account": {
-      "username_label": "Имя пользователя",
-      "username_placeholder": "Введите имя пользователя",
-      "tags_label": "Теги (через запятую)",
-      "tags_placeholder": "например: funtime, spookytime",
-      "add_account": "Добавить аккаунт"
+    "friends": {
+        "addFriend": "Добавить друга",
+        "noFriends": "Пока нет друзей. \nДобавьте друзей чтобы начать!",
+        "receivedRequests": "Полученные",
+        "sentRequests": "Отправленные",
+        "title": "Друзья ({count})",
+        "cancel_friend_request": "Отменить запрос в друзья",
+        "remove_success": "{name} удален из друзей",
+        "block_success": "{name} заблокирован",
+        "unblock_success": "{name} разблокирован",
+        "request_accepted": "Запрос в друзья принят",
+        "request_rejected": "Запрос в друзья отклонен",
+        "request_canceled": "Запрос в друзья отменен",
+        "remove_failed": "Не удалось удалить друга",
+        "block_failed": "Не удалось заблокировать пользователя",
+        "unblock_failed": "Не удалось разблокировать пользователя",
+        "request_failed": "Не удалось {action} запрос в друзья",
+        "load_failed": "Не удалось загрузить данные друзей"
     },
-    "telemetry_consent": {
-      "title": "Согласие на дополнительную телеметрию",
-      "description": "Чтобы улучшить ваш опыт использования CollapseLoader, мы можем собирать дополнительную аналитику. Эти данные помогут нам понять, как приложение используется, и сделать его лучше.",
-      "data_collected_title": "Какие данные мы собираем:",
-      "data_collected": {
-        "performance": "Показатели производительности (время запуска, использование памяти)",
-        "usage_patterns": "Паттерны использования (наиболее используемые клиенты, частота запуска)",
-        "crash_reports": "Отчеты о сбоях и ошибках для улучшения стабильности (АНОНИМНЫЕ, данные о системе не собираются)",
-        "feature_usage": "Статистика использования функций приложения (например, какие клиенты чаще всего запускаются, какие функции используются)"
-      },
-      "privacy_note_title": "Приватность: ",
-      "privacy_note": "Все данные анонимны и не содержат личной информации. Вы можете отключить эту функцию в любое время в настройках.",
-      "accept": "Разрешить аналитику",
-      "decline": "Отказаться"
+    "time": {
+        "offline": "Офлайн",
+        "online": "Онлайн"
     },
-    "insecure_client_warning": {
-      "modal_title": "Предупреждение безопасности",
-      "title": "Предупреждение о непроверенном клиенте",
-      "subtitle": "Этот клиент не проверен на вирусы",
-      "description": "Вы собираетесь запустить \"{clientName}\", который не был проверен на наличие вредоносного ПО или вирусов. Этот клиент может содержать потенциально опасный код, который может повредить вашу систему или скомпрометировать безопасность.",
-      "dont_show_again": "Больше не показывать это предупреждение для этого клиента",
-      "proceed_anyway": "Запустить в любом случае",
-      "cancel": "Отмена",
-      "close": "Я понял"
+    "home": {
+        "search_placeholder": "Поиск клиентов...",
+        "no_clients": "Клиенты не найдены",
+        "adjust_search": "Попробуйте изменить поисковый запрос.",
+        "favorite_added": "Добавлено в избранное",
+        "favorite_removed": "Удалено из избранного",
+        "starting_download": "Начинается загрузка {name}",
+        "no_internet": "Невозможно загрузить клиент: Нет подключения к интернету.",
+        "not_installed": "{name} не установлен. Пожалуйста, сначала загрузите его.",
+        "launching": "Запуск {client}...",
+        "stopping": "Остановка {name}...",
+        "opened_folder": "Папка для {name} открыта",
+        "reinstalling": "Переустановка {name}...",
+        "no_internet_reinstall": "Невозможно переустановить клиент: Нет подключения к интернету.",
+        "logs_copied": "Логи для {name} скопированы в буфер обмена",
+        "deleted_success": "{name} успешно удален",
+        "download": "Скачать",
+        "launch": "Запустить",
+        "launch_another": "Запустить ещё раз",
+        "stop": "Остановить",
+        "unavailable": "Не доступно",
+        "start_with": "Запустить с",
+        "selected_clients": "Выбрано: {count} клиентов",
+        "multiple_clients_selected": "Выбрано клиентов: {count}",
+        "download_selected": "Скачать выбранные",
+        "reinstall_selected": "Переустановить выбранные",
+        "delete_selected": "Удалить выбранные",
+        "downloading_multiple": "Скачивание {count} клиентов...",
+        "deleting_multiple": "Удаление {count} клиентов...",
+        "reinstalling_multiple": "Переустановка {count} клиентов...",
+        "multiple_clients_deleted": "{count} клиентов успешно удалено",
+        "multiple_clients_reinstalled": "{count} клиентов успешно переустановлено",
+        "no_clients_to_download": "Нет клиентов для скачивания",
+        "no_clients_to_delete": "Нет установленных клиентов для удаления",
+        "no_clients_to_reinstall": "Нет установленных клиентов для переустановки",
+        "stop_selected": "Остановить выбранные клиенты",
+        "stopping_multiple": "Останавливаем {count} клиентов",
+        "multiple_clients_stopped": "{count} клиентов остановлено",
+        "filters_title": "Фильтры",
+        "sort": {
+            "popularity": "Популярные",
+            "name": "По названию",
+            "newest": "Новые",
+            "version": "По версии",
+            "order": {
+                "asc": "По возрастанию",
+                "desc": "По убыванию"
+            },
+            "rating": "По рейтингу"
+        },
+        "filters": {
+            "installed": "Установленные"
+        },
+        "clear_filters": "Отчистить фильтры"
     },
-    "slow_download": {
-      "modal_title": "Медленная загрузка",
-      "title": "Низкая скорость загрузки",
-      "subtitle": "Скорость загрузки ниже ожидаемой",
-      "description": "Текущая скорость загрузки ниже обычной. Это может привести к увеличению времени загрузки.",
-      "current_speed": "Текущая скорость:",
-      "tip_1": "Проверьте подключение к интернету",
-      "tip_2": "Попробуйте закрыть другие приложения, использующие интернет",
-      "tip_3": "Попробуйте повторить загрузку позже",
-      "dont_show_again": "Больше не показывать это предупреждение",
-      "stalled_modal_title": "Загрузка зависла",
-      "stalled_title": "Загрузка остановилась",
-      "stalled_subtitle": "Нет прогресса",
-      "stalled_description": "Загрузка, похоже, зависла. Данные не поступают уже некоторое время.",
-      "no_progress": "Нет прогресса загрузки",
-      "tip_zapret": "Если вы находитесь в странах СНГ (Россия, Беларусь, Казахстан, кроме Украины), ваш провайдер может блокировать наши домены. Попробуйте включить 'DPI Bypass' в настройках и перезапустите загрузчик от имени администратора."
+    "theme": {
+        "actions": {
+            "add_favorite": "Добавить в избранное",
+            "remove_favorite": "Удалить из избранного",
+            "open_folder": "Открыть папку"
+        },
+        "select_theme": "Выбрать тему",
+        "description": "Выберите предпочитаемую тему.",
+        "change_success": "Тема изменена",
+        "save_failed": "Не удалось сохранить тему: {error}",
+        "reset_button": "Сброс",
+        "expert_css_title": "Экспертная настройка CSS",
+        "show_expert": "Показать экспертные",
+        "hide_expert": "Скрыть экспертные",
+        "expert_warning": "Только для продвинутых пользователей. Неправильный CSS может сломать интерфейс.",
+        "custom_css_label": "Пользовательский CSS",
+        "enable_custom_css": "Включить пользовательский CSS",
+        "css_examples_title": "Примеры",
+        "example_1": "Добавить размытие к карточкам",
+        "example_inserted": "Пример вставлен",
+        "enable_custom_css_first": "Сначала включите пользовательский CSS",
+        "selected": "Выбрано",
+        "insert_example": "Вставить",
+        "available_classes_label": "Доступные классы для редактирования (нажмите, чтобы добавить их в код)",
+        "tooltip_client_card": "Главный класс карточки клиента",
+        "tooltip_sidebar_btn": "Класс для кнопок навигации слева",
+        "tooltip_launch_download_btn": "Классы кнопок скачивания и запуска",
+        "export_css_btn": "Экспорт CSS",
+        "import_css_btn": "Импорт CSS",
+        "export_css_title": "Экспорт пользовательского CSS",
+        "import_css_title": "Импорт пользовательского CSS",
+        "export_desc": "Скопируйте закодированный CSS ниже и поделитесь им. Разрешён только безопасный CSS.",
+        "import_desc": "Вставьте закодированный CSS для импорта. Разрешён только безопасный CSS.",
+        "copy": "Копировать",
+        "copied": "Скопировано!",
+        "copy_failed": "Не удалось скопировать",
+        "import": "Импортировать",
+        "import_success": "Пресет успешно импортирован!",
+        "import_invalid": "Некорректный пресет. Импорт не выполнен.",
+        "primary": "Основной цвет",
+        "export_success": "Пресет скопирован в буфер обмена",
+        "export_failed": "Не удалось экспортировать пресет",
+        "colors": "Цвета",
+        "base_colors": "Базовые цвета",
+        "base100": "База 100",
+        "base200": "База 200",
+        "base300": "База 300",
+        "base_content": "Цвет контента (база)",
+        "primary_secondary_accent": "Основной / Вторичный / Акцент",
+        "primary_content": "Цвет основного текста",
+        "secondary": "Вторичный",
+        "secondary_content": "Цвет вторичного текста",
+        "accent": "Акцент",
+        "accent_content": "Цвет акцента",
+        "semantic_colors": "Семантические цвета",
+        "neutral": "Нейтральный",
+        "neutral_content": "Цвет нейтрального текста",
+        "info": "Информация",
+        "info_content": "Цвет информации",
+        "success": "Успех",
+        "success_content": "Цвет успеха",
+        "warning": "Предупреждение",
+        "warning_content": "Цвет предупреждения",
+        "error": "Ошибка",
+        "error_content": "Цвет ошибки",
+        "preset": "Пресет",
+        "presets": {
+            "title": "Пресеты тем",
+            "description": "Сохраняйте и управляйте пресетами настроек",
+            "save_current": "Сохранить текущие",
+            "import": "Импорт",
+            "pagination": {
+                "per_page": "На странице",
+                "page_of": "Страница {current} из {total}"
+            },
+            "create_first_preset": "Создать первый пресет",
+            "no_presets_title": "Пресетов пока нет",
+            "no_presets_description": "Создайте свой первый пресет, сохранив текущие настройки",
+            "loading": "Загрузка пресетов...",
+            "apply_preset": "Применить пресет",
+            "edit": "Редактировать",
+            "duplicate": "Дублировать",
+            "export": "Экспорт",
+            "delete": "Удалить",
+            "apply": "Применить",
+            "created": "Создан {date}",
+            "selected_count": "Выбрано пресетов: {count}",
+            "actions": {
+                "apply_first": "Применить первый выбранный",
+                "export_selected": "Экспортировать выбранные",
+                "duplicate_selected": "Дублировать выбранные",
+                "delete_selected": "Удалить выбранные"
+            },
+            "create_modal": {
+                "name_label": "Название пресета",
+                "name_required": "Название пресета обязательно",
+                "name_too_long": "Название пресета должно быть не более 50 символов",
+                "name_placeholder": "Введите название пресета",
+                "description_label": "Описание",
+                "description_placeholder": "Дополнительное описание пресета",
+                "source_info": "Источник пресета",
+                "source_create": "Будут сохранены текущие настройки",
+                "source_edit": "Редактирование существующего пресета",
+                "create_button": "Создать пресет",
+                "update_button": "Обновить пресет",
+                "cancel": "Отмена"
+            },
+            "import_modal": {
+                "method_label": "Метод импорта",
+                "method_file": "Файл",
+                "method_json": "JSON",
+                "file_label": "Выберите файл пресета",
+                "file_help": "Выберите .json файл пресета",
+                "json_label": "Вставьте JSON данные",
+                "json_placeholder": "Вставьте JSON данные пресета сюда...",
+                "preview_title": "Предпросмотр",
+                "preview_name": "Название",
+                "preview_description": "Описание",
+                "import_button": "Импортировать пресет",
+                "importing": "Импортируем...",
+                "cancel": "Отмена",
+                "error_invalid_file": "Неверный JSON файл",
+                "error_no_name": "Пресет должен иметь название",
+                "error_invalid_json": "Неверный JSON"
+            },
+            "delete_modal": {
+                "message": "Вы уверены, что хотите удалить пресет \"{name}\"?",
+                "warning": "Это действие нельзя отменить.",
+                "delete_button": "Удалить пресет",
+                "cancel": "Отмена"
+            },
+            "messages": {
+                "load_error": "Не удалось загрузить пресеты",
+                "create_success": "Пресет \"{name}\" успешно создан",
+                "create_error": "Не удалось создать пресет",
+                "update_success": "Пресет \"{name}\" успешно обновлён",
+                "update_error": "Не удалось обновить пресет",
+                "delete_success": "Пресет \"{name}\" успешно удалён",
+                "delete_error": "Не удалось удалить пресет",
+                "duplicate_success": "Пресет \"{name}\" успешно продублирован",
+                "duplicate_error": "Не удалось продублировать пресет",
+                "apply_success": "Пресет \"{name}\" успешно применен",
+                "import_success": "Пресет \"{name}\" успешно импортирован",
+                "apply_error": "Не удалось применить пресет \"{name}\": {error}",
+                "import_no_name": "В импортируемом пресете отсутствует название",
+                "import_error": "Не удалось импортировать пресет: {error}",
+                "multiple_deleted": "{count} пресетов успешно удалено",
+                "multiple_duplicated": "{count} пресетов успешно дублировано",
+                "multiple_exported": "{count} пресетов экспортировано в буфер обмена"
+            }
+        },
+        "dark": "Темная",
+        "light": "Светлая"
     },
-    "add_custom_client": "Добавить пользовательский клиент",
-    "delete_custom_client": "Удалить свой клиент",
-    "client_added": "Клиент добавлен",
-    "client_edited": "Клиент изменён",
-    "client_deleted": "Клиент удалён",
-    "edit_custom_client": "Редактировать клиент",
-    "delete_custom_client_confirm": {},
-    "add_custom_client_modal": {
-      "client_name": "Имя клиента",
-      "enter_client_name": "Введите имя клиента",
-      "minecraft_version": "Версия Minecraft",
-      "main_class": "Главный класс",
-      "main_class_placeholder": "например: net.minecraft.client.main.Main",
-      "jar_file": "JAR файл",
-      "no_file_selected": "Файл не выбран",
-      "select_jar_file": "Выберите .jar файл",
-      "selected": "Выбрано",
-      "adding": "Добавление...",
-      "add_client": "Добавить клиент"
+    "logs": {
+        "copy_logs": "Копировать логи",
+        "title": "Логи {client}",
+        "view": "Просмотреть логи"
     },
-    "edit_custom_client_modal": {
-      "client_name": "Имя клиента",
-      "enter_client_name": "Введите имя клиента",
-      "minecraft_version": "Версия Minecraft",
-      "main_class": "Главный класс",
-      "main_class_placeholder": "например: net.minecraft.client.main.Main",
-      "updating": "Обновление...",
-      "update_client": "Обновить клиент"
+    "installation": {
+        "downloading": "Загрузка",
+        "extracting": "Извлечение",
+        "download_complete": "Загрузка завершена",
+        "installation_complete": "Установка завершена"
     },
-    "delete_custom_client_confirm_modal": {
-      "title": "Удалить клиент",
-      "description": "Это действие нельзя отменить",
-      "deleting": "Удаление...",
-      "delete_client": "Удалить клиент"
-    }
-  },
-  "preloader": {
-    "initializing": "Инициализация...",
-    "connecting_servers": "Подключение к серверам...",
-    "ready": "Готово!"
-  },
-  "about": {
-    "codename": "Кодовое имя",
-    "commit": "Коммит",
-    "description": "Присоединяйтесь к нашему сообществу, чтобы получать обновления, поддержку, и сообщать о любых проблемах, с которыми вы можете столкнуться.",
-    "open_failed": "Не удалось открыть {platform}",
-    "title": "Об CollapseLoader",
-    "version": "Версия",
-    "branch": "Бренч",
-    "development": "Режим разработчика"
-  },
-  "account": {
-    "change_password": "Изменить пароль",
-    "change_password_confirm_title": "Подтвердить изменение пароля",
-    "confirm_password": "Подтвердите пароль",
-    "current_password": "Текущий пароль",
-    "invisible_disabled": "Невидимый режим отключен",
-    "invisible_enabled": "Невидимый режим включен",
-    "invisible_failed": "Вы должны быть онлайн, чтобы изменить настройки видимости",
-    "invisible_mode": "Невидимый режим",
-    "invisible_mode_description": "При включении вы окажетесь в офлайн режиме для других пользователей",
-    "streamer_mode": "Режим стримера",
-    "streamer_mode_description": "При включении все никнеймы будут скрыты для приватности",
-    "streamer_enabled": "Режим стримера включен",
-    "streamer_disabled": "Режим стримера отключен",
-    "streamer_failed": "Не удалось переключить режим стримера",
-    "new_password": "Новый пароль",
-    "nickname_label": "Редактировать ник",
-    "nickname_update_failed": "Не удалось обновить ник. \nПожалуйста, попробуйте еще раз, когда вы будете онлайн.",
-    "nickname_update_success": "Ник обновлен успешно!",
-    "no_email": "Нет электронной почты",
-    "password_change_failed": "Не удалось изменить пароль. \nПожалуйста, проверьте свое соединение и попробуйте еще раз.",
-    "password_change_success": "Пароль успешно изменился!",
-    "password_mismatch": "Новые пароли не совпадают.",
-    "password_too_short": "Новый пароль должен быть не менее 8 символов в длину.",
-    "using_cached_data": "Вы в офлайне - изменения статуса отключено",
-    "logout_confirm_title": "Подтвердить выход",
-    "social_links": "Социальные ссылки",
-    "no_social_links": "Ссылки не добавлены",
-    "avatar_help": "PNG, JPG, GIF, WEBP до 5МБ",
-    "avatar_drop": "Перетащите или кликните, чтобы загрузить аватар",
-    "upload_avatar": "Загрузить аватар",
-    "avatar_upload_refresh_failed": "Не удалось обновить аватар после загрузки: {error}",
-    "avatar_type_error": "Неподдерживаемый тип файла",
-    "avatar_size_error": "Файл слишком большой (макс 5МБ)",
-    "avatar_uploaded": "Аватар обновлён",
-    "avatar_upload_failed": "Не удалось загрузить аватар",
-    "reset_avatar": "Сбросить аватар",
-    "avatar_reset_success": "Аватар успешно сброшен",
-    "avatar_reset_failed": "Не удалось сбросить аватар: {error}"
-  },
-  "roles": {
-    "USER": "Пользователь",
-    "TESTER": "Тестер",
-    "ADMIN": "Админ",
-    "DEVELOPER": "Разработчик",
-    "OWNER": "Владелец"
-  },
-  "appLogs": {
-    "autoScroll": "Автоматическая прокрутка",
-    "copyLogs": "Копировать",
-    "noLogs": "Нет доступных логов.",
-    "searchPlaceholder": "Поиск логов...",
-    "download": "Скачать логи",
-    "filterByLevel": "Фильтр по уровню",
-    "noMatchingLogs": "Логи не найдены по вашим фильтрам."
-  },
-  "auth": {
-    "logout": {
-      "confirm": "Вы уверены, что хотите выйти из своей учетной записи?",
-      "local_only": "Выход производиться локально. \nПроблема с подключением к серверу.",
-      "success": "Вы вышли из системы успешно!"
+    "errors": {
+        "clients_load_failed": "Не удалось загрузить список клиентов: {error}",
+        "clients_unavailable": "Клиенты в данный момент недоступны.",
+        "stop_error": "Не удалось остановить клиент: {error}",
+        "folder_error": "Не удалось открыть папку данных: {error}",
+        "reinstall_error": "Не удалось переустановить {name}: {error}",
+        "logs_error": "Не удалось получить доступ к логам: {error}",
+        "delete_error": "Не удалось удалить {name}: {error}",
+        "download_error": "Не удалось загрузить {name}: {error}",
+        "load_accounts_error": "Ошибка загрузки аккаунтов: {error}",
+        "launch_with_account_error": "Ошибка запуска клиента с аккаунтом: {error}",
+        "download_network_error": "Ошибка сетевого соединения при загрузке: {error}",
+        "download_timeout_error": "Время загрузки истекло. Проверьте соединение: {error}",
+        "download_disk_error": "Не удалось сохранить файл на диск. Проверьте свободное место: {error}",
+        "hash_verification_failed": "Проверка целостности файла не удалась для {name}. Загруженный файл поврежден и был удален. Пожалуйста, попробуйте загрузить снова.",
+        "hash_verification_launch_failed": "Не удается проверить хэш для клиента {name}"
     },
-    "login": {
-      "title": "Вход",
-      "username_placeholder": "Введите ваше имя пользователя",
-      "password_placeholder": "Введите ваш пароль",
-      "login_button": "Войти",
-      "register_link": "Нет аккаунта?",
-      "success": "Вход выполнен успешно!",
-      "login_failed": "Ошибка входа. Проверьте свои учетные данные.",
-      "no_token": "Токен аутентификации не получен."
+    "validation": {
+        "passwords_no_match": "Пароли не совпадают.",
+        "min_length": "{field} должно быть не менее {length} символов."
     },
-    "register": {
-      "title": "Регистрация",
-      "username_placeholder": "Выберите имя пользователя",
-      "email_placeholder": "Введите ваш email",
-      "password_placeholder": "Выберите пароль",
-      "confirm_password_placeholder": "Подтвердите пароль",
-      "register_button": "Зарегистрироваться",
-      "login_link": "Уже есть аккаунт?",
-      "registration_failed": "Регистрация не удалась. Пожалуйста, попробуйте еще раз.",
-      "auto_login_failed": "Регистрация прошла успешно, но автоматический вход не удался. Пожалуйста, войдите вручную."
-    }
-  },
-  "blockedUsers": {
-    "noBlockedUsers": "Нет заблокированных пользователей. \nЗаблокированные пользователи появятся здесь.",
-    "title": "Заблокированные пользователи ({count})"
-  },
-  "common": {
-    "back": "Назад",
-    "logout": "Выход",
-    "unblock": "Разблокировать",
-    "next": "Дальше",
-    "previous": "Назад",
-    "delete": "Удалить",
-    "username": "Имя пользователя",
-    "password": "Пароль",
-    "login": "Вход",
-    "register": "Регистрация",
-    "download": "Скачать",
-    "please_wait": "Пожалуйста, подождите",
-    "cancel": "Отмена",
-    "reinstall": "Переустановить",
-    "blocked": "Заблокированный",
-    "loading": "Загрузка...",
-    "ok": "Окей",
-    "close": "Закрыть",
-    "save": "Сохранить",
-    "browse": "Выбрать",
-    "edit": "Редактировать",
-    "add": "Добавить",
-    "details": "Подробности",
-    "send": "Отправить",
-    "copied_to_clipboard": "Цвет {color} скопирован в буфер обмена",
-    "done": "Готово",
-    "click": "Нажмите"
-  },
-  "friends": {
-    "addFriend": "Добавить друга",
-    "noFriends": "Пока нет друзей. \nДобавьте друзей чтобы начать!",
-    "receivedRequests": "Полученные",
-    "sentRequests": "Отправленные",
-    "title": "Друзья ({count})",
-    "cancel_friend_request": "Отменить запрос в друзья",
-    "remove_success": "{name} удален из друзей",
-    "block_success": "{name} заблокирован",
-    "unblock_success": "{name} разблокирован",
-    "request_accepted": "Запрос в друзья принят",
-    "request_rejected": "Запрос в друзья отклонен",
-    "request_canceled": "Запрос в друзья отменен",
-    "remove_failed": "Не удалось удалить друга",
-    "block_failed": "Не удалось заблокировать пользователя",
-    "unblock_failed": "Не удалось разблокировать пользователя",
-    "request_failed": "Не удалось {action} запрос в друзья",
-    "load_failed": "Не удалось загрузить данные друзей"
-  },
-  "time": {
-    "offline": "Офлайн",
-    "online": "Онлайн"
-  },
-  "home": {
-    "search_placeholder": "Поиск клиентов...",
-    "no_clients": "Клиенты не найдены",
-    "adjust_search": "Попробуйте изменить поисковый запрос.",
-    "favorite_added": "Добавлено в избранное",
-    "favorite_removed": "Удалено из избранного",
-    "starting_download": "Начинается загрузка {name}",
-    "no_internet": "Невозможно загрузить клиент: Нет подключения к интернету.",
-    "not_installed": "{name} не установлен. Пожалуйста, сначала загрузите его.",
-    "launching": "Запуск {client}...",
-    "stopping": "Остановка {name}...",
-    "opened_folder": "Папка для {name} открыта",
-    "reinstalling": "Переустановка {name}...",
-    "no_internet_reinstall": "Невозможно переустановить клиент: Нет подключения к интернету.",
-    "logs_copied": "Логи для {name} скопированы в буфер обмена",
-    "deleted_success": "{name} успешно удален",
-    "download": "Скачать",
-    "launch": "Запустить",
-    "stop": "Остановить",
-    "unavailable": "Не доступно",
-    "start_with": "Запустить с",
-    "selected_clients": "Выбрано: {count} клиентов",
-    "multiple_clients_selected": "Выбрано клиентов: {count}",
-    "download_selected": "Скачать выбранные",
-    "reinstall_selected": "Переустановить выбранные",
-    "delete_selected": "Удалить выбранные",
-    "downloading_multiple": "Скачивание {count} клиентов...",
-    "deleting_multiple": "Удаление {count} клиентов...",
-    "reinstalling_multiple": "Переустановка {count} клиентов...",
-    "multiple_clients_deleted": "{count} клиентов успешно удалено",
-    "multiple_clients_reinstalled": "{count} клиентов успешно переустановлено",
-    "no_clients_to_download": "Нет клиентов для скачивания",
-    "no_clients_to_delete": "Нет установленных клиентов для удаления",
-    "no_clients_to_reinstall": "Нет установленных клиентов для переустановки",
-    "stop_selected": "Остановить выбранные клиенты",
-    "stopping_multiple": "Останавливаем {count} клиентов",
-    "multiple_clients_stopped": "{count} клиентов остановлено",
-    "filters_title": "Фильтры",
-    "sort": {
-      "popularity": "Популярные",
-      "name": "По названию",
-      "newest": "Новые",
-      "version": "По версии",
-      "order": {
-        "asc": "По возрастанию",
-        "desc": "По убыванию"
-      },
-      "rating": "По рейтингу"
+    "irc": {
+        "inline": {
+            "title": "Глобальный чат",
+            "latest_activity_connected": "Подключено к IRC серверу.",
+            "tap_to_connect": "Нажмите, чтобы подключиться к IRC",
+            "placeholder": "Введите сообщение...",
+            "send_failed": "Не удалось отправить сообщение",
+            "connection_error": "Ошибка соединения: {error}",
+            "status": {
+                "connected": "Подключено",
+                "reconnecting": "Повторное подключение...",
+                "connecting": "Подключение...",
+                "error": "Проблема с подключением",
+                "disconnected": "Отключено"
+            },
+            "privateMessage": "Личное сообщение",
+            "copyNickname": "Скопировать никнейм"
+        }
     },
-    "filters": {
-      "installed": "Установленные"
+    "settings": {
+        "general": "Настройки",
+        "sync": "Облачная синхронизация",
+        "accounts": "Аккаунты",
+        "reset_tooltip": "Сбросить к значениям по умолчанию",
+        "sync_status": "Статус облачной синхронизации",
+        "sync_controls": "Управление синхронизацией",
+        "upload_title": "Загрузить в облако",
+        "upload_description": "Создать резервную копию ваших текущих настроек, избранного и аккаунтов в облаке.",
+        "upload_button": "Загрузить сейчас",
+        "download_title": "Скачать из облака",
+        "download_description": "Восстановить ваши настройки, избранное и аккаунты из облака.",
+        "download_button": "Скачать сейчас",
+        "syncing": "Синхронизация...",
+        "auto_sync": "Автосинхронизация",
+        "auto_sync_description": "Автоматически синхронизировать ваши данные в облако каждые 5 минут при подключении к интернету.",
+        "offline_warning": "Вы сейчас не в сети. Функции синхронизации отключены.",
+        "no_cloud_data": "Данные в облаке не найдены. Загрузите ваши данные, чтобы начать использовать облачную синхронизацию.",
+        "add_account": "Добавить аккаунт",
+        "active": "Активный",
+        "tags": "Теги",
+        "created": "Создан",
+        "last_used": "Последнее использование",
+        "no_accounts_title": "Пока нет аккаунтов",
+        "no_accounts_description": "Добавьте ваш первый аккаунт для начала работы",
+        "account_set_active": "{username} теперь активный аккаунт!",
+        "account_set_active_failed": "Не удалось установить активный аккаунт: {error}",
+        "download_success": "Успешно скачано из облака!",
+        "download_failed": "Скачивание из облака не удалось: {error}",
+        "sync_accounts_to_cloud_success": "Локальные аккаунты успешно синхронизированы с Atlas!",
+        "sync_accounts_to_cloud_failed": "Не удалось синхронизировать локальные аккаунты с Atlas: {error}",
+        "sync_accounts_from_cloud_success": "Аккаунты успешно импортированы из Atlas!",
+        "sync_accounts_from_cloud_failed": "Не удалось импортировать аккаунты из Atlas: {error}",
+        "load_remote_accounts_failed": "Не удалось загрузить аккаунты Atlas: {error}",
+        "load_settings_failed": "Не удалось загрузить настройки: {error}",
+        "save_settings_failed": "Не удалось сохранить настройки: {error}",
+        "load_accounts_failed": "Не удалось загрузить аккаунты: {error}",
+        "load_flags_failed": "Не удалось загрузить флаги: {error}",
+        "language_change_failed": "Не удалось изменить язык: {error}",
+        "ram": {
+            "warning": "Предупреждение: Вы выбрали {selectedRamMb} МБ оперативной памяти. Это превышает рекомендуемый лимит в 6 ГБ и может вызвать проблемы с производительностью или сбои."
+        },
+        "descriptions": {
+            "ram": "Объем выделяемой памяти в МБ.",
+            "language": "Язык приложения (например, en, ru).",
+            "discord_rpc_enabled": "Включить Discord Rich Presence для отображения вашей активности в Discord.",
+            "optional_telemetry": "Разрешить анонимную аналитику для улучшения CollapseLoader. Личные данные не собираются.",
+            "cordshare": "Делитесь координатами с друзьями, чтобы они видели ваше местоположение в игре, даже если вы находитесь вне загруженных чанков.",
+            "irc_chat": "Общайтесь с другими пользователями CollapseLoader в IRC-чате в каждом клиенте.",
+            "hash_verify": "Включите проверку хеша, чтобы убедиться, что загруженные клиенты не повреждены. Это помогает своевременно обновлять клиенты до последней версии.",
+            "dpi_bypass": "Включайте если загрузка клиента застряла на 0%, клиент не запускается или клиенты не загружаются.",
+            "sync_client_settings": "Синхронизировать настройки, ресурспаки и другие параметры среди всех клиентов.",
+            "minimize_to_tray_on_launch": "Сворачивать приложение в системный трей при запуске клиента.",
+            "close_to_tray": "Сворачивать приложение в системный трей вместо закрытия при нажатии кнопки закрытия.",
+            "java_path": "Путь к исполняемому файлу Java. Оставьте пустым, чтобы использовать стандартную версию.",
+            "java_args": "Дополнительные аргументы JVM для запуска клиента."
+        },
+        "ram_warning": {},
+        "telemetry": "Аналитика",
+        "open_data": "Открыть папку лоадера",
+        "add_account_title": "Добавить новый аккаунт",
+        "edit_account_title": "Редактировать аккаунт",
+        "reset_title": "Потверждения сброса настроек",
+        "delete_account_title": "Потверждение удаления аккаунта",
+        "actions": "Действия",
+        "toast_position": {
+            "title": "Позиция уведомлений",
+            "description": "Выберите, где на экране будут появляться уведомления",
+            "bottom_right": "Внизу справа",
+            "bottom_left": "Внизу слева",
+            "top_right": "Вверху справа",
+            "top_left": "Вверху слева",
+            "bottom_center": "Внизу по центру",
+            "top_center": "Вверху по центру",
+            "preview_message": "Позиция уведомлений изменена!"
+        },
+        "telemetry_info_title": "Информация о телеметрии",
+        "reset_requirements": "Сбросить файлы лоадера",
+        "reset_requirements_success": "Успешно удалены файлы, теперь скачайте любой клиент",
+        "reset_requirements_failed": "Не удалось удалить файлы, попробуйте ещё раз, или перезапустите лоадер",
+        "login_required": "Вам нужно войти в свою учетную запись, чтобы использовать эту функцию.",
+        "reset_cache_failed": "Не удалось удалить кэш, попробуйте еще раз",
+        "hash_verify": "Проверка хэша ",
+        "irc_chat": "IRC чат",
+        "save_flags_failed": "Не удалось сохранить флаги: {error}",
+        "change_root": {
+            "title": "Изменить папку данных",
+            "action": "Сменить папку данных",
+            "target_folder": "Новая папка",
+            "hint": "Выберите папку, где будут храниться файлы CollapseLoader (клиенты, кэш и т.д.)",
+            "mode": "Что сделать со старой папкой?",
+            "mode_move": "Перенести",
+            "mode_wipe": "Удалить",
+            "mode_move_desc": "Перенести все данные из старой папки в новую (рекомендуется)",
+            "mode_wipe_desc": "Удалить старую папку (все данные будут удалены)",
+            "select_folder_first": "Сначала выберите папку",
+            "success": "Папка данных изменена",
+            "failed": "Не удалось изменить папку данных: {error}",
+            "restart_required": "Перезапустите приложение, чтобы изменения вступили в силу"
+        },
+        "sync_client_settings": "Синхронизировать настройки клиента",
+        "minimize_to_tray_on_launch": "Сворачивать в трей при запуске",
+        "close_to_tray": "Закрывать в трей",
+        "reset_settings": "Сбросить настройки",
+        "accounts_description": "Управляйте своими игровыми аккаунтами и легко переключайтесь между ними",
+        "accounts_management": "Управление учетными записями",
+        "no_matching_accounts": "Не найдены соответствующие учетные записи",
+        "search_accounts": "Поиск учетных записей...",
+        "try_different_search": "Попробуйте изменить параметры поиска или фильтры",
+        "local_account_sync": "Синхронизация локальных аккаунтов",
+        "local_account_sync_description": "Держите локальные аккаунты CollapseLoader синхронизированными с Atlas, чтобы восстановить их на других устройствах.",
+        "sync_accounts_from_cloud_button": "Импортировать аккаунты Atlas",
+        "sync_accounts_to_cloud_button": "Загрузить локальные аккаунты",
+        "remote_accounts_loading": "Проверка аккаунтов на Atlas...",
+        "remote_accounts_present": "На Atlas синхронизировано {count} аккаунтов.",
+        "remote_accounts_more": "и еще {count} аккаунтов",
+        "remote_accounts_empty": "На Atlas еще нет синхронизированных аккаунтов.",
+        "sync_login_required": "Войдите, чтобы включить синхронизацию",
+        "not_signed_in": "Вы не зашли в аккаунт"
     },
-    "clear_filters": "Отчистить фильтры"
-  },
-  "theme": {
-    "actions": {
-      "add_favorite": "Добавить в избранное",
-      "remove_favorite": "Удалить из избранного",
-      "open_folder": "Открыть папку"
+    "userProfile": {
+        "playing": "Играет в",
+        "last_seen": "Был в сети",
+        "just_now": "только что",
+        "minutes_ago": "{count}м назад",
+        "hours_ago": "{count}ч назад",
+        "days_ago": "{count}д назад",
+        "remove_friend": "Удалить из друзей",
+        "block_user": "Заблокировать пользователя",
+        "unblock_user": "Разблокировать пользователя",
+        "back_to_friends": "Назад к друзьям",
+        "profile_information": "Информация о профиле",
+        "username": "Имя пользователя",
+        "nickname": "Никнейм",
+        "member_since": "Участник с",
+        "actions": "Действия",
+        "online": "В сети",
+        "offline": "Не в сети",
+        "friends_with": "Вы дружите с {name}",
+        "friend_request_sent": "Запрос в друзья отправлен {name}",
+        "friend_request_received": "{name} отправил вам запрос в друзья",
+        "accept": "Принять",
+        "decline": "Отклонить",
+        "user_blocked": "Этот пользователь заблокирован",
+        "send_friend_request": "Отправить запрос в друзья",
+        "sending": "Отправка...",
+        "canceling": "Отмена...",
+        "cancel_friend_request": "Отменить запрос",
+        "no_user_id": "ID пользователя не указан",
+        "user_not_found": "Пользователь не найден",
+        "login_required": "Необходимо войти в систему для просмотра профилей",
+        "profile_load_failed": "Не удалось загрузить профиль пользователя",
+        "favorite_client": "Любимый клиент",
+        "friend_request_sent_success": "Запрос в друзья отправлен {name}",
+        "friend_request_failed": "Не удалось отправить запрос в друзья: {error}",
+        "copy_username": "Копировать имя пользователя",
+        "copied_username": "{name} скопировано в буфер обмена",
+        "copy_failed": "Не удалось скопировать имя пользователя",
+        "friend_request_canceled": "Запрос в друзья успешно отменен",
+        "friend_request_cancel_failed": "Не удалось отменить запрос в друзья",
+        "friend_removed_success": "{name} удален из друзей",
+        "friend_remove_failed": "Не удалось удалить из друзей",
+        "friend_request_responded": "Запрос в друзья {action}",
+        "friend_request_respond_failed": "Не удалось {action} запрос в друзья",
+        "friend_request_not_found": "Запрос в друзья не найден",
+        "user_blocked_success": "{name} заблокирован",
+        "user_block_failed": "Не удалось заблокировать пользователя",
+        "no_presets": "Этот пользователь еще не делился никакими пресетами.",
+        "create_preset": "Создать пресет",
+        "presets_title": "Пресеты",
+        "presets": "пресетов",
+        "presets_hidden_streamer": "Пресеты скрыты в режиме стримера."
     },
-    "select_theme": "Выбрать тему",
-    "description": "Выберите предпочитаемую тему.",
-    "change_success": "Тема изменена",
-    "save_failed": "Не удалось сохранить тему: {error}",
-    "reset_button": "Сброс",
-    "expert_css_title": "Экспертная настройка CSS",
-    "show_expert": "Показать экспертные",
-    "hide_expert": "Скрыть экспертные",
-    "expert_warning": "Только для продвинутых пользователей. Неправильный CSS может сломать интерфейс.",
-    "custom_css_label": "Пользовательский CSS",
-    "enable_custom_css": "Включить пользовательский CSS",
-    "css_examples_title": "Примеры",
-    "example_1": "Добавить размытие к карточкам",
-    "example_inserted": "Пример вставлен",
-    "enable_custom_css_first": "Сначала включите пользовательский CSS",
-    "selected": "Выбрано",
-    "insert_example": "Вставить",
-    "available_classes_label": "Доступные классы для редактирования (нажмите, чтобы добавить их в код)",
-    "tooltip_client_card": "Главный класс карточки клиента",
-    "tooltip_sidebar_btn": "Класс для кнопок навигации слева",
-    "tooltip_launch_download_btn": "Классы кнопок скачивания и запуска",
-    "export_css_btn": "Экспорт CSS",
-    "import_css_btn": "Импорт CSS",
-    "export_css_title": "Экспорт пользовательского CSS",
-    "import_css_title": "Импорт пользовательского CSS",
-    "export_desc": "Скопируйте закодированный CSS ниже и поделитесь им. Разрешён только безопасный CSS.",
-    "import_desc": "Вставьте закодированный CSS для импорта. Разрешён только безопасный CSS.",
-    "copy": "Копировать",
-    "copied": "Скопировано!",
-    "copy_failed": "Не удалось скопировать",
-    "import": "Импортировать",
-    "import_success": "Пресет успешно импортирован!",
-    "import_invalid": "Некорректный пресет. Импорт не выполнен.",
-    "primary": "Основной цвет",
-    "export_success": "Пресет скопирован в буфер обмена",
-    "export_failed": "Не удалось экспортировать пресет",
-    "colors": "Цвета",
-    "base_colors": "Базовые цвета",
-    "base100": "База 100",
-    "base200": "База 200",
-    "base300": "База 300",
-    "base_content": "Цвет контента (база)",
-    "primary_secondary_accent": "Основной / Вторичный / Акцент",
-    "primary_content": "Цвет основного текста",
-    "secondary": "Вторичный",
-    "secondary_content": "Цвет вторичного текста",
-    "accent": "Акцент",
-    "accent_content": "Цвет акцента",
-    "semantic_colors": "Семантические цвета",
-    "neutral": "Нейтральный",
-    "neutral_content": "Цвет нейтрального текста",
-    "info": "Информация",
-    "info_content": "Цвет информации",
-    "success": "Успех",
-    "success_content": "Цвет успеха",
-    "warning": "Предупреждение",
-    "warning_content": "Цвет предупреждения",
-    "error": "Ошибка",
-    "error_content": "Цвет ошибки",
-    "preset": "Пресет",
-    "presets": {
-      "title": "Пресеты тем",
-      "description": "Сохраняйте и управляйте пресетами настроек",
-      "save_current": "Сохранить текущие",
-      "import": "Импорт",
-      "pagination": {
-        "per_page": "На странице",
-        "page_of": "Страница {current} из {total}"
-      },
-      "create_first_preset": "Создать первый пресет",
-      "no_presets_title": "Пресетов пока нет",
-      "no_presets_description": "Создайте свой первый пресет, сохранив текущие настройки",
-      "loading": "Загрузка пресетов...",
-      "apply_preset": "Применить пресет",
-      "edit": "Редактировать",
-      "duplicate": "Дублировать",
-      "export": "Экспорт",
-      "delete": "Удалить",
-      "apply": "Применить",
-      "created": "Создан {date}",
-      "selected_count": "Выбрано пресетов: {count}",
-      "actions": {
-        "apply_first": "Применить первый выбранный",
-        "export_selected": "Экспортировать выбранные",
-        "duplicate_selected": "Дублировать выбранные",
-        "delete_selected": "Удалить выбранные"
-      },
-      "create_modal": {
-        "name_label": "Название пресета",
-        "name_required": "Название пресета обязательно",
-        "name_too_long": "Название пресета должно быть не более 50 символов",
-        "name_placeholder": "Введите название пресета",
-        "description_label": "Описание",
-        "description_placeholder": "Дополнительное описание пресета",
-        "source_info": "Источник пресета",
-        "source_create": "Будут сохранены текущие настройки",
-        "source_edit": "Редактирование существующего пресета",
-        "create_button": "Создать пресет",
-        "update_button": "Обновить пресет",
-        "cancel": "Отмена"
-      },
-      "import_modal": {
-        "method_label": "Метод импорта",
-        "method_file": "Файл",
-        "method_json": "JSON",
-        "file_label": "Выберите файл пресета",
-        "file_help": "Выберите .json файл пресета",
-        "json_label": "Вставьте JSON данные",
-        "json_placeholder": "Вставьте JSON данные пресета сюда...",
-        "preview_title": "Предпросмотр",
-        "preview_name": "Название",
-        "preview_description": "Описание",
-        "import_button": "Импортировать пресет",
-        "importing": "Импортируем...",
-        "cancel": "Отмена",
-        "error_invalid_file": "Неверный JSON файл",
-        "error_no_name": "Пресет должен иметь название",
-        "error_invalid_json": "Неверный JSON"
-      },
-      "delete_modal": {
-        "message": "Вы уверены, что хотите удалить пресет \"{name}\"?",
-        "warning": "Это действие нельзя отменить.",
-        "delete_button": "Удалить пресет",
-        "cancel": "Отмена"
-      },
-      "messages": {
-        "load_error": "Не удалось загрузить пресеты",
-        "create_success": "Пресет \"{name}\" успешно создан",
-        "create_error": "Не удалось создать пресет",
-        "update_success": "Пресет \"{name}\" успешно обновлён",
-        "update_error": "Не удалось обновить пресет",
-        "delete_success": "Пресет \"{name}\" успешно удалён",
-        "delete_error": "Не удалось удалить пресет",
-        "duplicate_success": "Пресет \"{name}\" успешно продублирован",
-        "duplicate_error": "Не удалось продублировать пресет",
-        "apply_success": "Пресет \"{name}\" успешно применен",
-        "import_success": "Пресет \"{name}\" успешно импортирован",
-        "apply_error": "Не удалось применить пресет \"{name}\": {error}",
-        "import_no_name": "В импортируемом пресете отсутствует название",
-        "import_error": "Не удалось импортировать пресет: {error}",
-        "multiple_deleted": "{count} пресетов успешно удалено",
-        "multiple_duplicated": "{count} пресетов успешно дублировано",
-        "multiple_exported": "{count} пресетов экспортировано в буфер обмена"
-      }
+    "sync": {
+        "last_sync": "Последняя синхронизация",
+        "minutes_ago": "{count}м назад",
+        "hours_ago": "{count}ч назад",
+        "days_ago": "{count}д назад"
     },
-    "dark": "Темная",
-    "light": "Светлая"
-  },
-  "logs": {
-    "copy_logs": "Копировать логи",
-    "title": "Логи {client}",
-    "view": "Просмотреть логи"
-  },
-  "installation": {
-    "downloading": "Загрузка",
-    "extracting": "Извлечение",
-    "download_complete": "Загрузка завершена",
-    "installation_complete": "Установка завершена"
-  },
-  "errors": {
-    "clients_load_failed": "Не удалось загрузить список клиентов: {error}",
-    "clients_unavailable": "Клиенты в данный момент недоступны.",
-    "stop_error": "Не удалось остановить клиент: {error}",
-    "folder_error": "Не удалось открыть папку данных: {error}",
-    "reinstall_error": "Не удалось переустановить {name}: {error}",
-    "logs_error": "Не удалось получить доступ к логам: {error}",
-    "delete_error": "Не удалось удалить {name}: {error}",
-    "download_error": "Не удалось загрузить {name}: {error}",
-    "load_accounts_error": "Ошибка загрузки аккаунтов: {error}",
-    "launch_with_account_error": "Ошибка запуска клиента с аккаунтом: {error}",
-    "download_network_error": "Ошибка сетевого соединения при загрузке: {error}",
-    "download_timeout_error": "Время загрузки истекло. Проверьте соединение: {error}",
-    "download_disk_error": "Не удалось сохранить файл на диск. Проверьте свободное место: {error}",
-    "hash_verification_failed": "Проверка целостности файла не удалась для {name}. Загруженный файл поврежден и был удален. Пожалуйста, попробуйте загрузить снова.",
-    "hash_verification_launch_failed": "Не удается проверить хэш для клиента {name}"
-  },
-  "validation": {
-    "passwords_no_match": "Пароли не совпадают.",
-    "min_length": "{field} должно быть не менее {length} символов."
-  },
-  "irc": {
-    "inline": {
-      "title": "Глобальный чат",
-      "latest_activity_connected": "Подключено к IRC серверу.",
-      "tap_to_connect": "Нажмите, чтобы подключиться к IRC",
-      "placeholder": "Введите сообщение...",
-      "send_failed": "Не удалось отправить сообщение",
-      "connection_error": "Ошибка соединения: {error}",
-      "status": {
-        "connected": "Подключено",
-        "reconnecting": "Повторное подключение...",
-        "connecting": "Подключение...",
-        "error": "Проблема с подключением",
-        "disconnected": "Отключено"
-      },
-      "privateMessage": "Личное сообщение",
-      "copyNickname": "Скопировать никнейм"
-    }
-  },
-  "settings": {
-    "general": "Настройки",
-    "sync": "Облачная синхронизация",
-    "accounts": "Аккаунты",
-    "reset_tooltip": "Сбросить к значениям по умолчанию",
-    "sync_status": "Статус облачной синхронизации",
-    "sync_controls": "Управление синхронизацией",
-    "upload_title": "Загрузить в облако",
-    "upload_description": "Создать резервную копию ваших текущих настроек, избранного и аккаунтов в облаке.",
-    "upload_button": "Загрузить сейчас",
-    "download_title": "Скачать из облака",
-    "download_description": "Восстановить ваши настройки, избранное и аккаунты из облака.",
-    "download_button": "Скачать сейчас",
-    "syncing": "Синхронизация...",
-    "auto_sync": "Автосинхронизация",
-    "auto_sync_description": "Автоматически синхронизировать ваши данные в облако каждые 5 минут при подключении к интернету.",
-    "offline_warning": "Вы сейчас не в сети. Функции синхронизации отключены.",
-    "no_cloud_data": "Данные в облаке не найдены. Загрузите ваши данные, чтобы начать использовать облачную синхронизацию.",
-    "add_account": "Добавить аккаунт",
-    "active": "Активный",
-    "tags": "Теги",
-    "created": "Создан",
-    "last_used": "Последнее использование",
-    "no_accounts_title": "Пока нет аккаунтов",
-    "no_accounts_description": "Добавьте ваш первый аккаунт для начала работы",
-    "account_set_active": "{username} теперь активный аккаунт!",
-    "account_set_active_failed": "Не удалось установить активный аккаунт: {error}",
-    "download_success": "Успешно скачано из облака!",
-    "download_failed": "Скачивание из облака не удалось: {error}",
-    "sync_accounts_to_cloud_success": "Локальные аккаунты успешно синхронизированы с Atlas!",
-    "sync_accounts_to_cloud_failed": "Не удалось синхронизировать локальные аккаунты с Atlas: {error}",
-    "sync_accounts_from_cloud_success": "Аккаунты успешно импортированы из Atlas!",
-    "sync_accounts_from_cloud_failed": "Не удалось импортировать аккаунты из Atlas: {error}",
-    "load_remote_accounts_failed": "Не удалось загрузить аккаунты Atlas: {error}",
-    "load_settings_failed": "Не удалось загрузить настройки: {error}",
-    "save_settings_failed": "Не удалось сохранить настройки: {error}",
-    "load_accounts_failed": "Не удалось загрузить аккаунты: {error}",
-    "load_flags_failed": "Не удалось загрузить флаги: {error}",
-    "language_change_failed": "Не удалось изменить язык: {error}",
-    "ram": {
-      "warning": "Предупреждение: Вы выбрали {selectedRamMb} МБ оперативной памяти. Это превышает рекомендуемый лимит в 6 ГБ и может вызвать проблемы с производительностью или сбои."
+    "navigation": {
+        "home": "Главная",
+        "friends": "Друзья",
+        "settings": "Настройки",
+        "logs": "Логи приложения",
+        "account": "Аккаунт",
+        "about": "О программе",
+        "news": "Новости",
+        "customization": "Кастомизация",
+        "custom_clients": "Свои клиенты",
+        "sidebar_help": {
+            "title": "Совет:",
+            "tip": "Вы можете переместить боковую панель на любую сторону экрана. Двойной щелчок по панели уберет отступы между иконками.",
+            "got_it": "Понял"
+        }
     },
-    "descriptions": {
-      "ram": "Объем выделяемой памяти в МБ.",
-      "language": "Язык приложения (например, en, ru).",
-      "discord_rpc_enabled": "Включить Discord Rich Presence для отображения вашей активности в Discord.",
-      "optional_telemetry": "Разрешить анонимную аналитику для улучшения CollapseLoader. Личные данные не собираются.",
-      "cordshare": "Делитесь координатами с друзьями, чтобы они видели ваше местоположение в игре, даже если вы находитесь вне загруженных чанков.",
-      "irc_chat": "Общайтесь с другими пользователями CollapseLoader в IRC-чате в каждом клиенте.",
-      "hash_verify": "Включите проверку хеша, чтобы убедиться, что загруженные клиенты не повреждены. Это помогает своевременно обновлять клиенты до последней версии.",
-      "dpi_bypass": "Включайте если загрузка клиента застряла на 0%, клиент не запускается или клиенты не загружаются.",
-      "sync_client_settings": "Синхронизировать настройки, ресурспаки и другие параметры среди всех клиентов."
+    "toast": {
+        "dev": {
+            "menu_opened": "Меню разработчика открыто",
+            "flags_reset": "Флаги сброшены!"
+        },
+        "theme": {
+            "emergency_reset_done": "Кастомный CSS сброшен. {action}",
+            "emergency_reset_toggle_instruction": "Чтобы снова включить кастомный CSS, откройте настройки темы и выключите, затем включите 'Включить кастомный CSS'."
+        },
+        "client": {
+            "crashed": "Клиент {name} крашнул. {error}",
+            "crashed_incomplete": "Клиент {name} крашнул из-за неполной загрузки. Попытка автоматической переустановки.",
+            "reinstall_success": "Успешно переустановлен {name}. Попробуйте запустить снова.",
+            "reinstall_failed": "Не удалось переустановить {name}: {error}. Пожалуйста, переустановите вручную.",
+            "redownload_success": "Успешно переустановлен {name}. Хеш проверен."
+        },
+        "server": {
+            "offline": "Не удалось определить статус сервера.",
+            "offline_base": "Вы сейчас не в сети.",
+            "cdn_and_api_offline": "Не удается подключиться к CDN и API.",
+            "cdn_offline": "Не удается подключиться к CDN.",
+            "api_offline": "Не удается подключиться к API.",
+            "api_init_failed": "Не удалось инициализировать API: {error}"
+        },
+        "settings": {
+            "flags_load_failed": "Не удалось загрузить флаги: {error}",
+            "first_run_save_failed": "Не удалось сохранить статус первого запуска: {error}",
+            "disclaimer_save_failed": "Не удалось сохранить статус отказа от ответственности: {error}",
+            "theme_save_failed": "Не удалось сохранить тему: {error}"
+        },
+        "auth": {
+            "registration_success": "Регистрация прошла успешно! Пожалуйста, войдите в систему."
+        },
+        "logs": {
+            "fetch_failed": "Ошибка получения логов приложения: {error}",
+            "copied_success": "Логи приложения скопированы в буфер обмена!",
+            "copy_failed": "Не удалось скопировать логи приложения: {error}",
+            "client_logs_copied": "Логи скопированы в буфер обмена!",
+            "client_logs_copy_failed": "Не удалось скопировать логи в буфер обмена.",
+            "download_success": "Логи успешно сохранены!",
+            "download_failed": "Не удалось сохранить логи: {error}"
+        },
+        "users": {
+            "blocked_load_failed": "Не удалось загрузить заблокированных пользователей",
+            "unblocked_success": "{name} разблокирован",
+            "unblock_failed": "Не удалось разблокировать пользователя"
+        },
+        "friends": {
+            "search_failed": "Не удалось найти пользователей",
+            "request_sent": "Запрос в друзья отправлен {name}",
+            "request_send_failed": "Не удалось отправить запрос в друзья"
+        },
+        "account": {
+            "username_required": "Требуется имя пользователя",
+            "account_updated": "Аккаунт успешно обновлен!",
+            "account_update_failed": "Не удалось обновить аккаунт: {error}",
+            "account_added": "Аккаунт успешно добавлен!",
+            "account_add_failed": "Не удалось добавить аккаунт: {error}",
+            "account_deleted": "Аккаунт успешно удален!",
+            "account_delete_failed": "Не удалось удалить аккаунт: {error}",
+            "nickname_update_failed": "Не удалось обновить никнейм. Пожалуйста, попробуйте еще раз."
+        },
+        "modal": {
+            "settings_reset_success": "Настройки успешно сброшены!",
+            "settings_reset_failed": "Не удалось сбросить настройки: {error}"
+        },
+        "sync": {
+            "offline_error": "Невозможно синхронизировать в офлайне",
+            "already_in_progress": "Синхронизация уже выполняется",
+            "syncing": "Синхронизация с облаком...",
+            "success": "Синхронизация завершена успешно!",
+            "failed": "Синхронизация не удалась: {error}",
+            "login_required": "Пожалуйста, войдите, чтобы включить синхронизацию"
+        },
+        "telemetry": {
+            "analytics_enabled": "Аналитика включена. Спасибо за помощь в улучшении приложения!",
+            "analytics_disabled": "Аналитика отключена.",
+            "analytics_enable_failed": "Не удалось включить аналитику: {error}",
+            "analytics_disable_failed": "Не удалось отключить аналитику: {error}"
+        }
     },
-    "ram_warning": {},
-    "telemetry": "Аналитика",
-    "open_data": "Открыть папку лоадера",
-    "add_account_title": "Добавить новый аккаунт",
-    "edit_account_title": "Редактировать аккаунт",
-    "reset_title": "Потверждения сброса настроек",
-    "delete_account_title": "Потверждение удаления аккаунта",
-    "actions": "Действия",
-    "toast_position": {
-      "title": "Позиция уведомлений",
-      "description": "Выберите, где на экране будут появляться уведомления",
-      "bottom_right": "Внизу справа",
-      "bottom_left": "Внизу слева",
-      "top_right": "Вверху справа",
-      "top_left": "Вверху слева",
-      "bottom_center": "Внизу по центру",
-      "top_center": "Вверху по центру",
-      "preview_message": "Позиция уведомлений изменена!"
+    "discord": {
+        "details": {
+            "in_menu": "В меню",
+            "in_game": "В игре"
+        },
+        "states": {
+            "browsing_clients": "Просматривает клиенты",
+            "configuring_settings": "Настраивает параметры",
+            "enjoying_visuals": "Наслаждается визуалом",
+            "watching_client_behavior": "Смотрит логи клиента",
+            "in_profile": "В профиле",
+            "watching_about": "Смотрит информацию о нас",
+            "debugging": "Отладка",
+            "logging_in": "Входит в систему",
+            "browsing_friends": "Смотрит что делают друзья",
+            "browsing_news": "Читает новости",
+            "browsing_custom_clients": "Смотрит на свои клиенты"
+        }
     },
-    "telemetry_info_title": "Информация о телеметрии",
-    "reset_requirements": "Сбросить файлы лоадера",
-    "reset_requirements_success": "Успешно удалены файлы, теперь скачайте любой клиент",
-    "reset_requirements_failed": "Не удалось удалить файлы, попробуйте ещё раз, или перезапустите лоадер",
-    "login_required": "Вам нужно войти в свою учетную запись, чтобы использовать эту функцию.",
-    "reset_cache_failed": "Не удалось удалить кэш, попробуйте еще раз",
-    "hash_verify": "Проверка хэша ",
-    "irc_chat": "IRC чат",
-    "save_flags_failed": "Не удалось сохранить флаги: {error}",
-    "change_root": {
-      "title": "Изменить папку данных",
-      "action": "Сменить папку данных",
-      "target_folder": "Новая папка",
-      "hint": "Выберите папку, где будут храниться файлы CollapseLoader (клиенты, кэш и т.д.)",
-      "mode": "Что сделать со старой папкой?",
-      "mode_move": "Перенести",
-      "mode_wipe": "Удалить",
-      "mode_move_desc": "Перенести все данные из старой папки в новую (рекомендуется)",
-      "mode_wipe_desc": "Удалить старую папку (все данные будут удалены)",
-      "select_folder_first": "Сначала выберите папку",
-      "success": "Папка данных изменена",
-      "failed": "Не удалось изменить папку данных: {error}",
-      "restart_required": "Перезапустите приложение, чтобы изменения вступили в силу"
+    "modal": {
+        "client_crash": {
+            "title": "Логи краша {name}"
+        }
     },
-    "sync_client_settings": "Синхронизировать настройки клиента",
-    "reset_settings": "Сбросить настройки",
-    "accounts_description": "Управляйте своими игровыми аккаунтами и легко переключайтесь между ними",
-    "accounts_management": "Управление учетными записями",
-    "no_matching_accounts": "Не найдены соответствующие учетные записи",
-    "search_accounts": "Поиск учетных записей...",
-    "try_different_search": "Попробуйте изменить параметры поиска или фильтры",
-    "local_account_sync": "Синхронизация локальных аккаунтов",
-    "local_account_sync_description": "Держите локальные аккаунты CollapseLoader синхронизированными с Atlas, чтобы восстановить их на других устройствах.",
-    "sync_accounts_from_cloud_button": "Импортировать аккаунты Atlas",
-    "sync_accounts_to_cloud_button": "Загрузить локальные аккаунты",
-    "remote_accounts_loading": "Проверка аккаунтов на Atlas...",
-    "remote_accounts_present": "На Atlas синхронизировано {count} аккаунтов.",
-    "remote_accounts_more": "и еще {count} аккаунтов",
-    "remote_accounts_empty": "На Atlas еще нет синхронизированных аккаунтов.",
-    "sync_login_required": "Войдите, чтобы включить синхронизацию",
-    "not_signed_in": "Вы не зашли в аккаунт"
-  },
-  "userProfile": {
-    "playing": "Играет в",
-    "last_seen": "Был в сети",
-    "just_now": "только что",
-    "minutes_ago": "{count}м назад",
-    "hours_ago": "{count}ч назад",
-    "days_ago": "{count}д назад",
-    "remove_friend": "Удалить из друзей",
-    "block_user": "Заблокировать пользователя",
-    "unblock_user": "Разблокировать пользователя",
-    "back_to_friends": "Назад к друзьям",
-    "profile_information": "Информация о профиле",
-    "username": "Имя пользователя",
-    "nickname": "Никнейм",
-    "member_since": "Участник с",
-    "actions": "Действия",
-    "online": "В сети",
-    "offline": "Не в сети",
-    "friends_with": "Вы дружите с {name}",
-    "friend_request_sent": "Запрос в друзья отправлен {name}",
-    "friend_request_received": "{name} отправил вам запрос в друзья",
-    "accept": "Принять",
-    "decline": "Отклонить",
-    "user_blocked": "Этот пользователь заблокирован",
-    "send_friend_request": "Отправить запрос в друзья",
-    "sending": "Отправка...",
-    "canceling": "Отмена...",
-    "cancel_friend_request": "Отменить запрос",
-    "no_user_id": "ID пользователя не указан",
-    "user_not_found": "Пользователь не найден",
-    "login_required": "Необходимо войти в систему для просмотра профилей",
-    "profile_load_failed": "Не удалось загрузить профиль пользователя",
-    "friend_request_sent_success": "Запрос в друзья отправлен {name}",
-    "friend_request_failed": "Не удалось отправить запрос в друзья: {error}",
-    "copy_username": "Копировать имя пользователя",
-    "copied_username": "{name} скопировано в буфер обмена",
-    "copy_failed": "Не удалось скопировать имя пользователя",
-    "friend_request_canceled": "Запрос в друзья успешно отменен",
-    "friend_request_cancel_failed": "Не удалось отменить запрос в друзья",
-    "friend_removed_success": "{name} удален из друзей",
-    "friend_remove_failed": "Не удалось удалить из друзей",
-    "friend_request_responded": "Запрос в друзья {action}",
-    "friend_request_respond_failed": "Не удалось {action} запрос в друзья",
-    "friend_request_not_found": "Запрос в друзья не найден",
-    "user_blocked_success": "{name} заблокирован",
-    "user_block_failed": "Не удалось заблокировать пользователя",
-    "no_presets": "Этот пользователь еще не делился никакими пресетами.",
-    "create_preset": "Создать пресет",
-    "presets_title": "Пресеты",
-    "presets": "пресетов",
-    "presets_hidden_streamer": "Пресеты скрыты в режиме стримера."
-  },
-  "sync": {
-    "last_sync": "Последняя синхронизация",
-    "minutes_ago": "{count}м назад",
-    "hours_ago": "{count}ч назад",
-    "days_ago": "{count}д назад"
-  },
-  "navigation": {
-    "home": "Главная",
-    "friends": "Друзья",
-    "settings": "Настройки",
-    "logs": "Логи приложения",
-    "account": "Аккаунт",
-    "about": "О программе",
-    "news": "Новости",
-    "customization": "Кастомизация",
-    "custom_clients": "Свои клиенты",
-    "sidebar_help": {
-      "title": "Совет:",
-      "tip": "Вы можете переместить боковую панель на любую сторону экрана. Двойной щелчок по панели уберет отступы между иконками.",
-      "got_it": "Понял"
-    }
-  },
-  "toast": {
-    "dev": {
-      "menu_opened": "Меню разработчика открыто",
-      "flags_reset": "Флаги сброшены!"
+    "news": {
+        "loading": "Загрузка новостей...",
+        "error_title": "Ошибка загрузки новостей",
+        "retry": "Попробовать снова",
+        "no_news": "Новостей нет",
+        "no_news_description": "В настоящее время нет новостей для отображения.",
+        "updated_at": "Обновлено",
+        "not_found": "Новости не найдены",
+        "server_error": "Произошла ошибка сервера",
+        "network_error": "Ошибка сетевого подключения",
+        "fetch_failed": "Не удалось загрузить новости: {error}",
+        "fetch_failed_toast": "Не удалось загрузить новости",
+        "new": "Новое",
+        "mark_all_read": "Отметить всё как прочитанное",
+        "refresh": "Обновить",
+        "search_placeholder": "Поиск новостей...",
+        "time": {}
     },
-    "theme": {
-      "emergency_reset_done": "Кастомный CSS сброшен. {action}",
-      "emergency_reset_toggle_instruction": "Чтобы снова включить кастомный CSS, откройте настройки темы и выключите, затем включите 'Включить кастомный CSS'."
+    "hold_button": {
+        "label": "Зажмите, чтобы начать!",
+        "info_message": "Ты серьезно?"
     },
     "client": {
-      "crashed": "Клиент {name} крашнул. {error}",
-      "crashed_incomplete": "Клиент {name} крашнул из-за неполной загрузки. Попытка автоматической переустановки.",
-      "reinstall_success": "Успешно переустановлен {name}. Попробуйте запустить снова.",
-      "reinstall_failed": "Не удалось переустановить {name}: {error}. Пожалуйста, переустановите вручную.",
-      "redownload_success": "Успешно переустановлен {name}. Хеш проверен."
-    },
-    "server": {
-      "offline": "Не удалось определить статус сервера. Предполагается офлайн.",
-      "offline_base": "Вы сейчас не в сети. ",
-      "cdn_and_api_offline": "Не удается подключиться к CDN и API.",
-      "cdn_offline": "Не удается подключиться к CDN.",
-      "api_offline": "Не удается подключиться к API.",
-      "api_init_failed": "Не удалось инициализировать API: {error}"
-    },
-    "settings": {
-      "flags_load_failed": "Не удалось загрузить флаги: {error}",
-      "first_run_save_failed": "Не удалось сохранить статус первого запуска: {error}",
-      "disclaimer_save_failed": "Не удалось сохранить статус отказа от ответственности: {error}",
-      "theme_save_failed": "Не удалось сохранить тему: {error}"
-    },
-    "auth": {
-      "registration_success": "Регистрация прошла успешно! Пожалуйста, войдите в систему."
-    },
-    "logs": {
-      "fetch_failed": "Ошибка получения логов приложения: {error}",
-      "copied_success": "Логи приложения скопированы в буфер обмена!",
-      "copy_failed": "Не удалось скопировать логи приложения: {error}",
-      "client_logs_copied": "Логи скопированы в буфер обмена!",
-      "client_logs_copy_failed": "Не удалось скопировать логи в буфер обмена.",
-      "download_success": "Логи успешно сохранены!",
-      "download_failed": "Не удалось сохранить логи: {error}"
-    },
-    "users": {
-      "blocked_load_failed": "Не удалось загрузить заблокированных пользователей",
-      "unblocked_success": "{name} разблокирован",
-      "unblock_failed": "Не удалось разблокировать пользователя"
-    },
-    "friends": {
-      "search_failed": "Не удалось найти пользователей",
-      "request_sent": "Запрос в друзья отправлен {name}",
-      "request_send_failed": "Не удалось отправить запрос в друзья"
+        "details": {
+            "loading": "Загрузка подробностей...",
+            "info_tab": "Информация",
+            "screenshots_tab": "Скриншоты",
+            "rating": "Рейтинг",
+            "no_rating": "Пока нет оценок",
+            "login_to_rate": "Войдите, чтобы оценить",
+            "source_link": "Ссылка на источник",
+            "created": "Создан",
+            "changelog": "Список изменений",
+            "no_changelog": "Список изменений недоступен",
+            "no_screenshots": "Скриншоты недоступны",
+            "screenshot_viewer": {
+                "zoom_percent": "{percent}%",
+                "image_counter": "{current} / {total}",
+                "controls": {
+                    "esc_close": "ESC - Закрыть",
+                    "esc_reset": "ESC - Сбросить масштаб",
+                    "navigate": "← → - Навигация",
+                    "click_zoom": "Клик - Масштаб | Колесо - Масштаб",
+                    "drag_pan": "Перетаскивание - Панорамирование | +/- - Масштаб | 0 - Сбросить"
+                }
+            },
+            "no_changelog_desc": "Обновления и изменения появятся здесь.",
+            "comments_tab": "Комментарии",
+            "your_rating": "Ваш рейтинг"
+        },
+        "comments": {
+            "delete": "Удалить",
+            "empty": "Комментариев пока нет.  Будьте первым!",
+            "placeholder": "Напишите комментарий..."
+        }
     },
-    "account": {
-      "username_required": "Требуется имя пользователя",
-      "account_updated": "Аккаунт успешно обновлен!",
-      "account_update_failed": "Не удалось обновить аккаунт: {error}",
-      "account_added": "Аккаунт успешно добавлен!",
-      "account_add_failed": "Не удалось добавить аккаунт: {error}",
-      "account_deleted": "Аккаунт успешно удален!",
-      "account_delete_failed": "Не удалось удалить аккаунт: {error}",
-      "nickname_update_failed": "Не удалось обновить никнейм. Пожалуйста, попробуйте еще раз."
+    "customization": {
+        "background_title": "Фон",
+        "background_image": "URL изображения",
+        "background_image_placeholder": "https://example.com/image.jpg",
+        "background_image_help": "Поддерживает jpg, png, webp, data-urls",
+        "background_blur": "Размытие",
+        "background_opacity": "Прозрачность"
     },
-    "modal": {
-      "settings_reset_success": "Настройки успешно сброшены!",
-      "settings_reset_failed": "Не удалось сбросить настройки: {error}"
+    "updater": {
+        "update_available": "Доступно обновление",
+        "current": "Текущая",
+        "latest": "Последняя",
+        "changelog": "Список изменений",
+        "download_install": "Скачать и установить",
+        "downloading": "Скачивание...",
+        "skip": "Пропустить",
+        "starting_download": "Начинается скачивание обновления...",
+        "update_installed": "Обновление установлено успешно! Приложение будет перезапущено.",
+        "update_failed": "Обновление не удалось: {error}",
+        "check_for_updates": "Проверить обновления",
+        "checking_updates": "Проверка обновлений...",
+        "up_to_date": "У вас установлена последняя версия!",
+        "show_more": "Показать еще {count} версий",
+        "show_less": "Показать меньше",
+        "categories": {
+            "feature": "Функционал",
+            "improvement": "Улучшение"
+        },
+        "no_update": "Обновления не найдены"
     },
-    "sync": {
-      "offline_error": "Невозможно синхронизировать в офлайне",
-      "already_in_progress": "Синхронизация уже выполняется",
-      "syncing": "Синхронизация с облаком...",
-      "success": "Синхронизация завершена успешно!",
-      "failed": "Синхронизация не удалась: {error}",
-      "login_required": "Пожалуйста, войдите, чтобы включить синхронизацию"
+    "custom_clients": {
+        "add": "Добавить свой клиент",
+        "running": "Запущен",
+        "edit": "Редактировать",
+        "delete": "Удалить",
+        "added": "Добавлено",
+        "stop": "Остановить",
+        "launch": "Запустить",
+        "display_settings": "Настройка отображения",
+        "display_mode_global": "Глобально",
+        "display_mode": "Режим отображения",
+        "display_mode_separate": "Отдельно",
+        "no_results": "Попробуйте изменить поисковый запрос",
+        "no_clients_yet": "Добавьте свой первый клиент, чтобы начать"
     },
-    "telemetry": {
-      "analytics_enabled": "Аналитика включена. Спасибо за помощь в улучшении приложения!",
-      "analytics_disabled": "Аналитика отключена.",
-      "analytics_enable_failed": "Не удалось включить аналитику: {error}",
-      "analytics_disable_failed": "Не удалось отключить аналитику: {error}"
-    }
-  },
-  "discord": {
-    "details": {
-      "in_menu": "В меню",
-      "in_game": "В игре"
+    "marketplace": {
+        "title": "Маркетплейс",
+        "open_marketplace": "Маркетплейс",
+        "search_placeholder": "Поиск пресетов...",
+        "share_local": "Поделиться своим пресетом",
+        "share_current": "Поделиться текущим пресетом",
+        "share_modal_title": "Поделиться пресетом",
+        "title_label": "Название",
+        "title_placeholder": "Мой пресет",
+        "description_label": "Описание",
+        "description_placeholder": "Опишите ваш пресет",
+        "public_label": "Публичный",
+        "private_label": "Приватный",
+        "make_private": "Сделать приватным",
+        "make_public": "Сделать публичным",
+        "sort_newest": "Новые",
+        "sort_popular": "Популярные",
+        "sort_downloads": "Много загрузок",
+        "sort_comments": "Много комментариев",
+        "edit_modal_title": "Редактировать пресет",
+        "delete_confirm": "Вы уверены, что хотите удалить этот пресет? Это действие нельзя отменить.",
+        "share": "Поделиться",
+        "sharing": "Публикация...",
+        "shared_success": "Пресет опубликован!",
+        "shared_failed": "Не удалось опубликовать пресет",
+        "updated_success": "Пресет обновлён",
+        "updated_failed": "Не удалось обновить пресет",
+        "deleted_success": "Пресет удалён",
+        "deleted_failed": "Не удалось удалить пресет",
+        "apply": "Применить",
+        "like": "Лайк",
+        "by_user": "от {name}",
+        "by_author": "ОТ {name}",
+        "no_items": "Пресеты еще не созданы",
+        "preset_details_title": "Подробности пресета",
+        "preset_details": "Детали пресета",
+        "comments": "Комментарии",
+        "no_comments": "Пока нет комментариев",
+        "add_comment": "Добавить комментарий",
+        "comment_placeholder": "Напишите комментарий...",
+        "preset_picker_label": "Выберите локальный пресет",
+        "preset_picker_placeholder": "Выберите пресет...",
+        "no_local_presets": "У вас пока нет пресетов"
     },
-    "states": {
-      "browsing_clients": "Просматривает клиенты",
-      "configuring_settings": "Настраивает параметры",
-      "enjoying_visuals": "Наслаждается визуалом",
-      "watching_client_behavior": "Смотрит логи клиента",
-      "in_profile": "В профиле",
-      "watching_about": "Смотрит информацию о нас",
-      "debugging": "Отладка",
-      "logging_in": "Входит в систему",
-      "browsing_friends": "Смотрит что делают друзья",
-      "browsing_news": "Читает новости",
-      "browsing_custom_clients": "Смотрит на свои клиенты"
-    }
-  },
-  "modal": {
-    "client_crash": {
-      "title": "Логи краша {name}"
-    }
-  },
-  "news": {
-    "loading": "Загрузка новостей...",
-    "error_title": "Ошибка загрузки новостей",
-    "retry": "Попробовать снова",
-    "no_news": "Новостей нет",
-    "no_news_description": "В настоящее время нет новостей для отображения.",
-    "updated_at": "Обновлено",
-    "not_found": "Новости не найдены",
-    "server_error": "Произошла ошибка сервера",
-    "network_error": "Ошибка сетевого подключения",
-    "fetch_failed": "Не удалось загрузить новости: {error}",
-    "fetch_failed_toast": "Не удалось загрузить новости",
-    "new": "Новое",
-    "mark_all_read": "Отметить всё как прочитанное",
-    "refresh": "Обновить",
-    "search_placeholder": "Поиск новостей...",
-    "time": {}
-  },
-  "hold_button": {
-    "label": "Зажмите, чтобы начать!",
-    "info_message": "Ты серьезно?"
-  },
-  "client": {
-    "details": {
-      "loading": "Загрузка подробностей...",
-      "info_tab": "Информация",
-      "screenshots_tab": "Скриншоты",
-      "rating": "Рейтинг",
-      "no_rating": "Пока нет оценок",
-      "login_to_rate": "Войдите, чтобы оценить",
-      "source_link": "Ссылка на источник",
-      "created": "Создан",
-      "changelog": "Список изменений",
-      "no_changelog": "Список изменений недоступен",
-      "no_screenshots": "Скриншоты недоступны",
-      "screenshot_viewer": {
-        "zoom_percent": "{percent}%",
-        "image_counter": "{current} / {total}",
-        "controls": {
-          "esc_close": "ESC - Закрыть",
-          "esc_reset": "ESC - Сбросить масштаб",
-          "navigate": "← → - Навигация",
-          "click_zoom": "Клик - Масштаб | Колесо - Масштаб",
-          "drag_pan": "Перетаскивание - Панорамирование | +/- - Масштаб | 0 - Сбросить"
+    "events": {
+        "halloween": {
+            "greeting": "Счастливого Хэллоуина!",
+            "message": "Жуткий сезон начался! 🎃",
+            "tooltip": "Хорошего хеллоувина! (25 окт - 5 ноя)"
         }
-      },
-      "no_changelog_desc": "Обновления и изменения появятся здесь.",
-      "comments_tab": "Комментарии"
     },
-    "comments": {
-      "delete": "Удалить",
-      "empty": "Комментариев пока нет.  Будьте первым!",
-      "placeholder": "Напишите комментарий..."
-    }
-  },
-  "customization": {},
-  "updater": {
-    "update_available": "Доступно обновление",
-    "current": "Текущая",
-    "latest": "Последняя",
-    "changelog": "Список изменений",
-    "download_install": "Скачать и установить",
-    "downloading": "Скачивание...",
-    "skip": "Пропустить",
-    "starting_download": "Начинается скачивание обновления...",
-    "update_installed": "Обновление установлено успешно! Приложение будет перезапущено.",
-    "update_failed": "Обновление не удалось: {error}",
-    "check_for_updates": "Проверить обновления",
-    "checking_updates": "Проверка обновлений...",
-    "up_to_date": "У вас установлена последняя версия!",
-    "show_more": "Показать еще {count} версий",
-    "show_less": "Показать меньше",
-    "categories": {
-      "feature": "Функционал",
-      "improvement": "Улучшение"
+    "login": "Вам необходимо войти в свою учетную запись.",
+    "notifications": {
+        "friend_request_received": {
+            "title": "Запрос в друзья",
+            "message": "{name} отправил вам запрос в друзья!"
+        },
+        "friend_request_accepted": {
+            "title": "Запрос принят",
+            "message": "{name} принял ваш запрос в друзья!"
+        }
     },
-    "no_update": "Обновления не найдены"
-  },
-  "custom_clients": {
-    "add": "Добавить свой клиент",
-    "running": "Запущен",
-    "edit": "Редактировать",
-    "delete": "Удалить",
-    "added": "Добавлено",
-    "stop": "Остановить",
-    "launch": "Запустить",
-    "display_settings": "Настройка отображения",
-    "display_mode_global": "Глобально",
-    "display_mode": "Режим отображения",
-    "display_mode_separate": "Отдельно",
-    "no_results": "Попробуйте изменить поисковый запрос",
-    "no_clients_yet": "Добавьте свой первый клиент, чтобы начать"
-  },
-  "marketplace": {
-    "title": "Маркетплейс",
-    "open_marketplace": "Маркетплейс",
-    "search_placeholder": "Поиск пресетов...",
-    "share_local": "Поделиться своим пресетом",
-    "share_current": "Поделиться текущим пресетом",
-    "share_modal_title": "Поделиться пресетом",
-    "title_label": "Название",
-    "title_placeholder": "Мой пресет",
-    "description_label": "Описание",
-    "description_placeholder": "Опишите ваш пресет",
-    "public_label": "Публичный",
-    "private_label": "Приватный",
-    "make_private": "Сделать приватным",
-    "make_public": "Сделать публичным",
-    "edit_modal_title": "Редактировать пресет",
-    "delete_confirm": "Вы уверены, что хотите удалить этот пресет? Это действие нельзя отменить.",
-    "share": "Поделиться",
-    "sharing": "Публикация...",
-    "shared_success": "Пресет опубликован!",
-    "shared_failed": "Не удалось опубликовать пресет",
-    "updated_success": "Пресет обновлён",
-    "updated_failed": "Не удалось обновить пресет",
-    "deleted_success": "Пресет удалён",
-    "deleted_failed": "Не удалось удалить пресет",
-    "apply": "Применить",
-    "like": "Лайк",
-    "by_user": "от {name}",
-    "no_items": "Пока нет пресетов",
-    "preset_details_title": "Подробности пресета",
-    "preset_details": "Детали пресета",
-    "comments": "Комментарии",
-    "no_comments": "Пока нет комментариев",
-    "add_comment": "Добавить комментарий",
-    "comment_placeholder": "Напишите комментарий...",
-    "preset_picker_label": "Выберите локальный пресет",
-    "preset_picker_placeholder": "Выберите пресет...",
-    "no_local_presets": "У вас пока нет пресетов"
-  },
-  "events": {
-    "halloween": {
-      "greeting": "Счастливого Хэллоуина!",
-      "message": "Жуткий сезон начался! 🎃",
-      "tooltip": "Хорошего хеллоувина! (25 окт - 5 ноя)"
+    "achievements": {
+        "title": "Достижения",
+        "unlocked_title": "Достижение разблокировано: {name}",
+        "locked": "Заблокировано",
+        "unlocked_at": "Разблокировано {date}",
+        "owned_percentage": "есть у {percent}% игроков",
+        "login_to_unlock": "Вам необходимо войти в систему, чтобы разблокировать это достижение.",
+        "secret_title": "Скрытое достижение",
+        "secret_description": "Продолжайте играть, чтобы открыть этот секрет!",
+        "list": {
+            "PLAYED_1Hour": {
+                "name": "Начало пути",
+                "description": "Играйте в течение 1 часа."
+            },
+            "PLAYED_10Hours": {
+                "name": "Преданный игрок",
+                "description": "Играйте в течение 10 часов."
+            },
+            "FIRST_GAME": {
+                "name": "Первые шаги",
+                "description": "Запустите свой первый клиент."
+            },
+            "SECRET_FINDER": {
+                "name": "Искатель секретов",
+                "description": "Вы нашли секрет!"
+            },
+            "SOCIAL_BUTTERFLY": {
+                "name": "Душа компании",
+                "description": "Добавьте социальную ссылку в свой профиль."
+            },
+            "FREQUENT_FLYER": {
+                "name": "Частый гость",
+                "description": "Запустите клиенты 50 раз."
+            },
+            "PRESET_MAX": {
+                "name": "Модник",
+                "description": "Создайте и поделитесь пресетом кастомизации."
+            },
+            "BETA_TESTER": {
+                "name": "Бета-тестер",
+                "description": "Присоединитесь к программе тестирования."
+            },
+            "COLLECTOR": {
+                "name": "Коллекционер",
+                "description": "Добавьте в избранное 5 различных клиентов."
+            },
+            "NIGHT_OWL": {
+                "name": "Сова",
+                "description": "Играйте с 2 до 5 часов утра."
+            },
+            "EARLY_BIRD": {
+                "name": "Жаворонок",
+                "description": "Играйте с 5 до 8 часов утра."
+            },
+            "WEEKEND_WARRIOR": {
+                "name": "После завода",
+                "description": "Играйте в выходные."
+            }
+        }
     }
-  },
-  "login": "Вам необходимо войти в свою учетную запись."
 }
diff --git a/src/i18n/locales/ua.json b/src/i18n/locales/ua.json
index 71e961f1..eb2a817e 100644
--- a/src/i18n/locales/ua.json
+++ b/src/i18n/locales/ua.json
@@ -1,1075 +1,1203 @@
 {
-  "modals": {
-    "initial_setup": {
-      "welcome": {
-        "title": "Ласкаво просимо до CollapseLoader",
-        "description": "Ми проведемо швидке налаштування, щоб оптимізувати продуктивність та конфіденційність.",
-        "subtitle": "Швидке налаштування, щоб почати роботу",
-        "features": {
-          "fast_startup": "Швидкий старт — мінімальний час очікування",
-          "secure_clients": "Надійні клієнти — перевірені й повністю безпечні.",
-          "auto_updates": "Автопоновлення — тримайте лоадер і клієнти в актуальному стані"
-        }
-      },
-      "gui": {},
-      "ram": {
-        "title": "Налаштування пам'яті",
-        "subtitle": "Виберіть, скільки оперативної пам'яті виділити клієнтам",
-        "description": "Налаштуйте обсяг ОЗП для оптимальної продуктивності",
-        "warning": "Попередження: Ви вибрали {selectedRamMb} МБ оперативної пам'яті. Це перевищує рекомендований ліміт у 6 ГБ і може спричинити проблеми з продуктивністю або збої."
-      },
-      "registration": {
-        "registering": "Реєстрація..."
-      },
-      "feedback": {
-        "title": "Зворотний зв'язок",
-        "subtitle": "Зв'яжіться з нашою спільнотою для підтримки та фідбеку",
-        "description": "Приєднуйтесь до нашої спільноти",
-        "optional": "Не обов'язково, але ми рекомендуємо підписатися"
-      },
-      "telemetry": {
-        "title": "Додаткова аналітика",
-        "subtitle": "Поділіться анонімними даними, щоб допомогти пріоритезувати покращення (необов'язково)",
-        "description": "Допоможіть нам покращити CollapseLoader, ділячись анонімними даними про використання. Ви можете змінити це налаштування в будь-який час у меню налаштувань.",
-        "data_collected_title": "Що ми збираємо:",
-        "data_collected": {
-          "performance": "Показники продуктивності (час запуску, використання пам'яті)",
-          "usage_patterns": "Патерни використання (найбільш використовувані клієнти, частота запуску)",
-          "crash_reports": "Звіти про збої та помилки для покращення стабільності"
-        }
-      },
-      "appreciation": {
-        "title": "Дякуємо за вибір CollapseLoader",
-        "subtitle": "Ви готові — можна починати",
-        "description": "Сподіваємося, вам сподобається використовувати наш лоадер!"
-      },
-      "disclaimer": {
-        "title": "Відмова від відповідальності",
-        "responsibility": "Розробники CollapseLoader та творці будь-яких перелічених клієнтів не несуть відповідальності за будь-які наслідки, що можуть виникнути в результаті вашого використання цього програмного забезпечення або клієнтів, до яких воно надає доступ.",
-        "acknowledgment": "Використовуючи цей застосунок, ви приймаєте на себе всі ризики",
-        "accept": "Я розумію та приймаю"
-      },
-      "language_changed": "Мову успішно змінено!",
-      "language_change_failed": "Не вдалося змінити мову. Спробуйте ще раз.",
-      "language_here": "Ви можете змінити мову тут"
-    },
-    "block_unblock_confirm": {
-      "block_message": "Ви впевнені, що хочете заблокувати {displayName}? Це видалить їх зі списку друзів і унеможливить майбутній контакт.",
-      "unblock_message": "Ви впевнені, що хочете розблокувати {displayName}? Вони зможуть знову надсилати вам запити в друзі.",
-      "yes_unblock": "Так, розблокувати",
-      "yes_block": "Так, заблокувати"
-    },
-    "reset_confirm": {
-      "message": "Ви впевнені, що хочете скинути всі налаштування до стандартних значень? Цю дію не можна скасувати.",
-      "yes_reset": "Так, скинути"
+    "reports": {
+        "title": "Скарга на {name}",
+        "description": "Якщо хтось порушує правила або поводиться токсично, будь ласка, повідомте нам.",
+        "reason_label": "Причина",
+        "select_reason": "Оберіть причину",
+        "reasons": {
+            "HARASSMENT": "Домагання / Травля",
+            "SPAM": "Спам",
+            "INAPPROPRIATE_CONTENT": "Неприпустимий контент",
+            "OTHER": "Інше"
+        },
+        "details_label": "Деталі (необов’язково)",
+        "details_placeholder": "Надайте більше контексту про ситуацію...",
+        "submit": "Надіслати скаргу",
+        "report_user": "Поскаржитися на користувача",
+        "success_message": "Скаргу успішно надіслано. Дякуємо!",
+        "error_message": "Не вдалося надіслати скаргу. Спробуйте ще раз пізніше."
     },
-    "remove_friend_confirm": {
-      "message": "Ви впевнені, що хочете видалити {displayName} з друзів? Цю дію не можна скасувати.",
-      "yes_remove": "Так, видалити"
-    },
-    "cancel_friend_request_confirm": {
-      "message": "Ви впевнені, що хочете скасувати запит у друзі до {displayName}?",
-      "yes_cancel": "Так, скасувати запит",
-      "keep_request": "Залишити запит"
-    },
-    "register_prompt": {
-      "title": "Створити акаунт",
-      "description": "Зареєструйте акаунт, щоб розблокувати всі функції та синхронізувати налаштування між пристроями.",
-      "benefits": {
-        "sync": "Збереження та синхронізація налаштувань (включаючи теми, обране тощо)",
-        "notifications": "Отримання сповіщень про оновлення"
-      },
-      "register_now": "Зареєструватися зараз",
-      "maybe_later": "Можливо, пізніше"
+    "modals": {
+        "initial_setup": {
+            "welcome": {
+                "title": "Ласкаво просимо до CollapseLoader",
+                "description": "Ми проведемо швидке налаштування, щоб оптимізувати продуктивність та конфіденційність.",
+                "subtitle": "Швидке налаштування, щоб почати роботу",
+                "features": {
+                    "fast_startup": "Швидкий старт — мінімальний час очікування",
+                    "secure_clients": "Надійні клієнти — перевірені та повністю безпечні.",
+                    "auto_updates": "Автооновлення — підтримуйте лоадер та клієнти в актуальному стані"
+                }
+            },
+            "gui": {},
+            "ram": {
+                "title": "Налаштування пам'яті",
+                "subtitle": "Виберіть, скільки оперативної пам'яті виділити клієнтам",
+                "description": "Налаштуйте обсяг ОЗП для оптимальної продуктивності",
+                "warning": "Попередження: Ви вибрали {selectedRamMb} МБ оперативної пам'яті. Це перевищує рекомендований ліміт у 6 ГБ і може спричинити проблеми з продуктивністю або збої."
+            },
+            "registration": {
+                "registering": "Реєстрація..."
+            },
+            "feedback": {
+                "title": "Зворотний зв'язок",
+                "subtitle": "Зв'яжіться з нашою спільнотою для підтримки та фідбеку",
+                "description": "Приєднуйтесь до нашої спільноти",
+                "optional": "Не обов'язково, але ми рекомендуємо підписатися"
+            },
+            "telemetry": {
+                "title": "Додаткова аналітика",
+                "subtitle": "Поділіться анонімними даними, щоб допомогти пріоритезувати покращення (необов'язково)",
+                "description": "Допоможіть нам покращити CollapseLoader, ділячись анонімними даними про використання. Ви можете змінити це налаштування в будь-який час у меню налаштувань.",
+                "data_collected_title": "Що ми збираємо:",
+                "data_collected": {
+                    "performance": "Показники продуктивності (час запуску, використання пам'яті)",
+                    "usage_patterns": "Патерни використання (найбільш використовувані клієнти, частота запуску)",
+                    "crash_reports": "Звіти про збої та помилки для покращення стабільності"
+                }
+            },
+            "appreciation": {
+                "title": "Дякуємо за вибір CollapseLoader",
+                "subtitle": "Ви готові — можна починати",
+                "description": "Сподіваємося, вам сподобається використовувати наш лоадер!"
+            },
+            "disclaimer": {
+                "title": "Відмова від відповідальності",
+                "responsibility": "Розробники CollapseLoader та творці будь-яких перелічених клієнтів не несуть відповідальності за будь-які наслідки, що можуть виникнути в результаті вашого використання цього програмного забезпечення або клієнтів, до яких воно надає доступ.",
+                "acknowledgment": "Використовуючи цей застосунок, ви приймаєте на себе всі ризики",
+                "accept": "Я розумію та приймаю"
+            },
+            "language_changed": "Мову успішно змінено!",
+            "language_change_failed": "Не вдалося змінити мову. Спробуйте ще раз.",
+            "language_here": "Ви можете змінити мову тут"
+        },
+        "block_unblock_confirm": {
+            "block_message": "Ви впевнені, що хочете заблокувати {displayName}? Це видалить їх зі списку друзів і унеможливить майбутній контакт.",
+            "unblock_message": "Ви впевнені, що хочете розблокувати {displayName}? Вони зможуть знову надсилати вам запити в друзі.",
+            "yes_unblock": "Так, розблокувати",
+            "yes_block": "Так, заблокувати"
+        },
+        "reset_confirm": {
+            "message": "Ви впевнені, що хочете скинути всі налаштування до стандартних значень? Цю дію не можна скасувати.",
+            "yes_reset": "Так, скинути"
+        },
+        "remove_friend_confirm": {
+            "message": "Ви впевнені, що хочете видалити {displayName} з друзів? Цю дію не можна скасувати.",
+            "yes_remove": "Так, видалити"
+        },
+        "cancel_friend_request_confirm": {
+            "message": "Ви впевнені, що хочете скасувати запит у друзі до {displayName}?",
+            "yes_cancel": "Так, скасувати запит",
+            "keep_request": "Залишити запит"
+        },
+        "register_prompt": {
+            "title": "Створити акаунт",
+            "description": "Зареєструйте акаунт, щоб розблокувати всі функції та синхронізувати налаштування між пристроями.",
+            "benefits": {
+                "sync": "Збереження та синхронізація налаштувань (включаючи теми, обране тощо)",
+                "notifications": "Отримання сповіщень про оновлення"
+            },
+            "register_now": "Зареєструватися зараз",
+            "maybe_later": "Можливо, пізніше"
+        },
+        "edit_nickname": {
+            "label": "Нікнейм",
+            "placeholder": "Введіть ваш нікнейм",
+            "description": "Необов'язково - так вас бачитимуть інші",
+            "update": "Оновити нікнейм"
+        },
+        "social_links": {
+            "title": "Посилання на соцмережі",
+            "add_title": "Додати посилання",
+            "edit_title": "Редагувати посилання",
+            "fill_fields": "Будь ласка, оберіть платформу та введіть дійсне посилання.",
+            "added": "Соціальне посилання додано.",
+            "add_failed": "Не вдалося додати соціальне посилання.",
+            "load_failed": "Не вдалося завантажити соціальні посилання.",
+            "deleted": "Соціальне посилання видалено.",
+            "delete_failed": "Не вдалося видалити соціальне посилання.",
+            "updated": "Соціальне посилання оновлено.",
+            "update_failed": "Не вдалося оновити соціальне посилання.",
+            "hidden_in_streamer_mode": "Соціальні посилання приховані в режимі стримера."
+        },
+        "edit_account": {
+            "username_label": "Ім'я користувача",
+            "tags_label": "Теги (через кому)",
+            "update": "Оновити акаунт"
+        },
+        "delete_account_confirm": {
+            "message": "Ви впевнені, що хочете видалити акаунт \"{username}\"? Цю дію не можна скасувати.",
+            "yes_delete": "Так, видалити"
+        },
+        "change_password_confirm": {
+            "message": "Ви впевнені, що хочете змінити пароль? Це негайно оновить дані вашого акаунту.",
+            "warning": "Якщо ви втратите доступ до поточного пароля, можливо доведеться скористатися відновленням акаунту.",
+            "yes_change": "Так, змінити пароль"
+        },
+        "logout_confirm": {
+            "message": "Ви впевнені, що хочете вийти з акаунту?",
+            "info": "Це виконає вихід, та може потребувати повторного входу для доступу до деяких функцій.",
+            "yes_logout": "Так, вийти"
+        },
+        "client_crash": {
+            "error_occurred": "Сталася помилка: {error}",
+            "crashed_message": "Клієнт {clientName} зазнав збою. Перегляньте логи нижче для отримання докладної інформації.",
+            "no_logs": "Логи відсутні.",
+            "copy_logs": "Копіювати логи",
+            "close": "Закрити"
+        },
+        "add_friend": {
+            "search_label": "Пошук користувачів",
+            "search_placeholder": "Введіть ім'я користувача...",
+            "add_friend": "Додати в друзі",
+            "already_friends": "Вже друзі",
+            "request_sent": "Запит надіслано",
+            "request_received": "Запит отримано",
+            "blocked": "Заблоковано",
+            "no_users_found": "Користувачів не знайдено",
+            "search_hint": "Введіть щонайменше 2 символи для пошуку",
+            "close": "Закрити"
+        },
+        "add_account": {
+            "username_label": "Ім'я користувача",
+            "username_placeholder": "Введіть ім'я користувача",
+            "tags_label": "Теги (через кому)",
+            "tags_placeholder": "напр. funtime, spookytime",
+            "add_account": "Додати акаунт"
+        },
+        "telemetry_consent": {
+            "title": "Згода на додаткову аналітику",
+            "description": "Щоб покращити ваш досвід використання CollapseLoader, ми можемо збирати додаткову аналітику. Ці дані допомагають нам зрозуміти, як використовується застосунок, і зробити його кращим.",
+            "data_collected_title": "Які дані ми збираємо:",
+            "data_collected": {
+                "performance": "Показники продуктивності (час запуску, використання пам'яті)",
+                "usage_patterns": "Патерни використання (найбільш використовувані клієнти, частота запуску)",
+                "crash_reports": "Звіти про збої та помилки для покращення стабільності",
+                "feature_usage": "Статистика використання функцій застосунку"
+            },
+            "privacy_note_title": "Приватність: ",
+            "privacy_note": "Усі дані анонімні та не містять особистої інформації. Ви можете вимкнути цю функцію в будь-який час у налаштуваннях.",
+            "accept": "Дозволити аналітику",
+            "decline": "Відхилити"
+        },
+        "insecure_client_warning": {
+            "modal_title": "Попередження про безпеку",
+            "title": "Попередження про неперевірений клієнт",
+            "subtitle": "Цей клієнт не перевірено на віруси",
+            "description": "Ви збираєтеся запустити \"{clientName}\", який не перевірявся на наявність шкідливого програмного забезпечення або вірусів. Цей клієнт може містити потенційно небезпечний код, який може пошкодити вашу систему або загрожувати вашій безпеці.",
+            "dont_show_again": "Більше не показувати це попередження для цього клієнта",
+            "proceed_anyway": "Запустити в будь-якому разі",
+            "cancel": "Скасувати",
+            "close": "Я зрозумів"
+        },
+        "slow_download": {
+            "modal_title": "Повільне завантаження",
+            "title": "Низька швидкість завантаження",
+            "subtitle": "Швидкість завантаження нижча за очікувану",
+            "description": "Поточна швидкість завантаження нижча за звичайну. Це може призвести до збільшення часу завантаження.",
+            "current_speed": "Поточна швидкість:",
+            "tip_1": "Перевірте підключення до інтернету",
+            "tip_2": "Спробуйте закрити інші програми, що використовують інтернет",
+            "tip_3": "Спробуйте повторити завантаження пізніше",
+            "dont_show_again": "Більше не показувати це попередження",
+            "stalled_modal_title": "Завантаження зависло",
+            "stalled_title": "Завантаження зупинилося",
+            "stalled_subtitle": "Немає прогресу",
+            "stalled_description": "Завантаження, ймовірно, зависло. Дані не надходять вже деякий час.",
+            "no_progress": "Немає прогресу завантаження",
+            "tip_zapret": "Якщо ви перебуваєте у країнах СНД (Росія, Білорусь, Казахстан, крім України), ваш провайдер може блокувати наші домени. Спробуйте увімкнути 'DPI Bypass' у налаштуваннях і перезапустіть лоадер від імені адміністратора."
+        },
+        "add_custom_client": "Додати власний клієнт",
+        "edit_custom_client": "Редагувати клієнт",
+        "delete_custom_client": "Видалити власний клієнт",
+        "client_added": "Клієнт додано",
+        "client_edited": "Клієнт змінено",
+        "client_deleted": "Клієнт видалено",
+        "delete_custom_client_confirm": {},
+        "add_custom_client_modal": {
+            "client_name": "Назва клієнта",
+            "enter_client_name": "Введіть назву клієнта",
+            "minecraft_version": "Версія Minecraft",
+            "main_class": "Головний клас",
+            "main_class_placeholder": "напр., net.minecraft.client.main.Main",
+            "jar_file": "JAR-файл",
+            "no_file_selected": "Файл не обрано",
+            "select_jar_file": "Оберіть .jar файл",
+            "selected": "Обрано",
+            "adding": "Додавання...",
+            "add_client": "Додати клієнт"
+        },
+        "edit_custom_client_modal": {
+            "client_name": "Назва клієнта",
+            "enter_client_name": "Введіть назву клієнта",
+            "minecraft_version": "Версія Minecraft",
+            "main_class": "Головний клас",
+            "main_class_placeholder": "напр., net.minecraft.client.main.Main",
+            "updating": "Оновлення...",
+            "update_client": "Оновити клієнт"
+        },
+        "delete_custom_client_confirm_modal": {
+            "title": "Видалити власний клієнт",
+            "description": "Цю дію не можна скасувати",
+            "deleting": "Видалення...",
+            "delete_client": "Видалити клієнт"
+        }
     },
-    "edit_nickname": {
-      "label": "Нікнейм",
-      "placeholder": "Введіть ваш нікнейм",
-      "description": "Необов'язково - так вас бачитимуть інші",
-      "update": "Оновити нікнейм"
+    "preloader": {
+        "initializing": "Ініціалізація...",
+        "connecting_servers": "Підключення до серверів...",
+        "ready": "Готово!",
+        "initializing_progress": "ІНІЦІАЛІЗАЦІЯ ЛОАДЕРА",
+        "loading_user_data": "Завантаження даних користувача..."
     },
-    "social_links": {
-      "title": "Соціальні посилання",
-      "add_title": "Додати посилання",
-      "edit_title": "Редагувати посилання",
-      "fill_fields": "Будь ласка, оберіть платформу та введіть дійсне посилання.",
-      "added": "Соціальне посилання додано.",
-      "add_failed": "Не вдалося додати соціальне посилання.",
-      "load_failed": "Не вдалося завантажити соціальні посилання.",
-      "deleted": "Соціальне посилання видалено.",
-      "delete_failed": "Не вдалося видалити соціальне посилання.",
-      "updated": "Соціальне посилання оновлено.",
-      "update_failed": "Не вдалося оновити соціальне посилання.",
-      "hidden_in_streamer_mode": "Соціальні посилання приховані в режимі стрімера."
+    "about": {
+        "title": "Про CollapseLoader",
+        "version": "Версія",
+        "codename": "Кодове ім'я",
+        "commit": "Коміт",
+        "description": "Приєднуйтесь до нашої спільноти для отримання оновлень, підтримки та повідомлення про будь-які проблеми, з якими ви можете зіткнутися.",
+        "open_failed": "Не вдалося відкрити {platform}",
+        "branch": "Гілка",
+        "development": "Режим розробника",
+        "commit_message": "Повідомлення комміту"
     },
-    "edit_account": {
-      "username_label": "Ім'я користувача",
-      "tags_label": "Теги (через кому)",
-      "update": "Оновити акаунт"
+    "account": {
+        "no_email": "Немає пошти",
+        "invisible_mode": "Режим невидимості",
+        "invisible_mode_description": "Коли увімкнено, ви будете відображатися офлайн для інших користувачів",
+        "streamer_mode": "Режим стримера",
+        "streamer_mode_description": "Коли увімкнено, всі імена користувачів будуть приховані для конфіденційності",
+        "streamer_enabled": "Режим стримера увімкнено",
+        "streamer_disabled": "Режим стримера вимкнено",
+        "streamer_failed": "Не вдалося перемкнути режим стримера",
+        "invisible_failed": "Ви повинні бути онлайн, щоб змінити налаштування видимості",
+        "using_cached_data": "Офлайн-режим - зміна статусу вимкнена",
+        "change_password": "Змінити пароль",
+        "change_password_confirm_title": "Підтвердити зміну пароля",
+        "current_password": "Поточний пароль",
+        "new_password": "Новий пароль",
+        "confirm_password": "Підтвердіть пароль",
+        "password_change_failed": "Не вдалося змінити пароль. Будь ласка, перевірте з'єднання та спробуйте ще раз.",
+        "password_change_success": "Пароль успішно змінено!",
+        "password_too_short": "Новий пароль повинен містити щонайменше 8 символів.",
+        "password_mismatch": "Нові паролі не збігаються.",
+        "nickname_update_failed": "Не вдалося оновити нікнейм. Будь ласка, спробуйте ще раз, коли будете онлайн.",
+        "nickname_update_success": "Нікнейм успішно оновлено!",
+        "nickname_label": "Редагувати нікнейм",
+        "invisible_enabled": "Режим невидимості увімкнено",
+        "invisible_disabled": "Режим невидимості вимкнено",
+        "logout_confirm_title": "Підтвердити вихід",
+        "social_links": "Посилання на соцмережі",
+        "no_social_links": "Посилання на соцмережі ще не додано.",
+        "avatar_help": "PNG, JPG, GIF, WEBP до 5МБ",
+        "avatar_drop": "Перетягніть або натисніть, щоб завантажити аватар",
+        "upload_avatar": "Завантажити аватар",
+        "avatar_upload_refresh_failed": "Не вдалося оновити аватар після завантаження: {error}",
+        "avatar_type_error": "Непідтримуваний тип файлу",
+        "avatar_size_error": "Файл занадто великий (макс. 5МБ)",
+        "avatar_uploaded": "Аватар оновлено",
+        "avatar_upload_failed": "Не вдалося завантажити аватар",
+        "reset_avatar": "Скинути аватар",
+        "avatar_reset_success": "Аватар успішно скинуто",
+        "avatar_reset_failed": "Не вдалося скинути аватар: {error}",
+        "current_favorite": "Поточний улюблений",
+        "favorite_client": "Улюблений клієнт",
+        "favorite_client_description": "Виберіть улюблений клієнт для відображення у вашому профілі",
+        "favorite_client_update_failed": "Не вдалося оновити улюблений клієнт",
+        "favorite_client_updated": "Улюблений клієнт успішно оновлено",
+        "no_favorite_client": "Не вибрано улюблений клієнт",
+        "select_favorite_client": "Вибрати улюблений клієнт"
     },
-    "delete_account_confirm": {
-      "message": "Ви впевнені, що хочете видалити акаунт \"{username}\"? Цю дію не можна скасувати.",
-      "yes_delete": "Так, видалити"
+    "roles": {
+        "user": "Користувач",
+        "tester": "Тестувальник",
+        "admin": "Адміністратор",
+        "developer": "Розробник",
+        "owner": "Власник"
     },
-    "change_password_confirm": {
-      "message": "Ви впевнені, що хочете змінити пароль? Це негайно оновить дані вашого акаунту.",
-      "warning": "Якщо ви втратите доступ до поточного пароля, можливо доведеться скористатися відновленням акаунту.",
-      "yes_change": "Так, змінити пароль"
+    "time": {
+        "offline": "Офлайн",
+        "online": "Онлайн"
     },
-    "logout_confirm": {
-      "message": "Ви впевнені, що хочете вийти з акаунту?",
-      "info": "Це виконає вихід, та може потребувати повторного входу для доступу до деяких функцій.",
-      "yes_logout": "Так, вийти"
+    "common": {
+        "logout": "Вийти",
+        "back": "Назад",
+        "unblock": "Розблокувати",
+        "next": "Далі",
+        "previous": "Назад",
+        "delete": "Видалити",
+        "username": "Ім'я користувача",
+        "password": "Пароль",
+        "login": "Увійти",
+        "register": "Реєстрація",
+        "download": "Завантажити",
+        "please_wait": "Будь ласка, зачекайте",
+        "cancel": "Скасувати",
+        "reinstall": "Перевстановити",
+        "blocked": "Заблоковано",
+        "loading": "Завантаження...",
+        "ok": "Гаразд",
+        "close": "Закрити",
+        "save": "Зберегти",
+        "browse": "Огляд",
+        "edit": "Редагувати",
+        "add": "Додати",
+        "details": "Деталі",
+        "send": "Надіслати",
+        "copied_to_clipboard": "Колір {color} скопійовано до буфера обміну",
+        "done": "Готово",
+        "click": "Натисніть",
+        "show_more": "Показати більше",
+        "show_less": "Сховати",
+        "advanced": "Доповнені",
+        "send_again": "Надіслати ще раз",
+        "back_to_login": "Назад до входу",
+        "verification_sent": "Лист верифікації надіслано!"
     },
-    "client_crash": {
-      "error_occurred": "Сталася помилка: {error}",
-      "crashed_message": "Клієнт {clientName} зазнав збою. Перегляньте логи нижче для отримання докладної інформації.",
-      "no_logs": "Логи відсутні.",
-      "copy_logs": "Копіювати логи",
-      "close": "Закрити"
+    "auth": {
+        "logout": {
+            "confirm": "Ви впевнені, що хочете вийти з акаунту?",
+            "local_only": "Вихід виконано локально. Виникла проблема з виходом на сервері.",
+            "success": "Ви успішно вийшли з системи!"
+        },
+        "login": {
+            "title": "Вхід",
+            "username_placeholder": "Введіть ваше ім'я користувача",
+            "password_placeholder": "Введіть ваш пароль",
+            "login_button": "Увійти",
+            "register_link": "Не маєте акаунту?",
+            "success": "Вхід виконано успішно!",
+            "login_failed": "Помилка входу. Будь ласка, перевірте ваші дані.",
+            "no_token": "Не отримано токен автентифікації.",
+            "error": "Не вдалося увійти, перевірте логін і пароль"
+        },
+        "register": {
+            "title": "Реєстрація",
+            "username_placeholder": "Оберіть ім'я користувача",
+            "email_placeholder": "Введіть вашу ел. пошту",
+            "password_placeholder": "Оберіть пароль",
+            "confirm_password_placeholder": "Підтвердіть пароль",
+            "register_button": "Зареєструватися",
+            "login_link": "Вже маєте акаунт?",
+            "registration_failed": "Реєстрація не вдалася. Будь ласка, спробуйте ще раз.",
+            "auto_login_failed": "Реєстрація успішна, але автоматичний вхід не вдався. Будь ласка, увійдіть вручну.",
+            "verification_required": "Потрібне підтвердження електронної пошти",
+            "check_email": "На електронну адресу {email} надіслано лист для підтвердження. Будь ласка, перевірте свою поштову скриньку та дотримуйтесь інструкцій, щоб підтвердити свій обліковий запис."
+        }
     },
-    "add_friend": {
-      "search_label": "Пошук користувачів",
-      "search_placeholder": "Введіть ім'я користувача...",
-      "add_friend": "Додати в друзі",
-      "already_friends": "Вже друзі",
-      "request_sent": "Запит надіслано",
-      "request_received": "Запит отримано",
-      "blocked": "Заблоковано",
-      "no_users_found": "Користувачів не знайдено",
-      "search_hint": "Введіть щонайменше 2 символи для пошуку",
-      "close": "Закрити"
+    "appLogs": {
+        "copyLogs": "Копіювати",
+        "autoScroll": "Автопрокрутка",
+        "noLogs": "Логи застосунку відсутні.",
+        "searchPlaceholder": "Пошук логів...",
+        "download": "Завантажити логи",
+        "filterByLevel": "Фільтр за рівнем",
+        "noMatchingLogs": "Логи не знайдено за вашими фільтрами."
     },
-    "add_account": {
-      "username_label": "Ім'я користувача",
-      "username_placeholder": "Введіть ім'я користувача",
-      "tags_label": "Теги (через кому)",
-      "tags_placeholder": "напр. funtime, spookytime",
-      "add_account": "Додати акаунт"
+    "blockedUsers": {
+        "title": "Заблоковані користувачі ({count})",
+        "noBlockedUsers": "Немає заблокованих користувачів. Заблоковані користувачі з'являться тут."
     },
-    "telemetry_consent": {
-      "title": "Згода на додаткову аналітику",
-      "description": "Щоб покращити ваш досвід використання CollapseLoader, ми можемо збирати додаткову аналітику. Ці дані допомагають нам зрозуміти, як використовується застосунок, і зробити його кращим.",
-      "data_collected_title": "Які дані ми збираємо:",
-      "data_collected": {
-        "performance": "Показники продуктивності (час запуску, використання пам'яті)",
-        "usage_patterns": "Патерни використання (найбільш використовувані клієнти, частота запуску)",
-        "crash_reports": "Звіти про збої та помилки для покращення стабільності",
-        "feature_usage": "Статистика використання функцій застосунку"
-      },
-      "privacy_note_title": "Приватність: ",
-      "privacy_note": "Усі дані анонімні та не містять особистої інформації. Ви можете вимкнути цю функцію в будь-який час у налаштуваннях.",
-      "accept": "Дозволити аналітику",
-      "decline": "Відхилити"
+    "friends": {
+        "addFriend": "Додати друга",
+        "noFriends": "Ще немає друзів. \nДодайте друзів, щоб почати!",
+        "receivedRequests": "Отримані",
+        "sentRequests": "Надіслані",
+        "title": "Друзі ({count})",
+        "cancel_friend_request": "Скасувати запит у друзі",
+        "remove_success": "{name} видалено з друзів",
+        "block_success": "{name} заблоковано",
+        "unblock_success": "{name} розблоковано",
+        "request_accepted": "Запит у друзі прийнято",
+        "request_rejected": "Запит у друзі відхилено",
+        "request_canceled": "Запит у друзі скасовано",
+        "remove_failed": "Не вдалося видалити друга",
+        "block_failed": "Не вдалося заблокувати користувача",
+        "unblock_failed": "Не вдалося розблокувати користувача",
+        "request_failed": "Не вдалося {action} запит у друзі",
+        "load_failed": "Не вдалося завантажити дані друзів"
     },
-    "insecure_client_warning": {
-      "modal_title": "Попередження про безпеку",
-      "title": "Попередження про неперевірений клієнт",
-      "subtitle": "Цей клієнт не перевірено на віруси",
-      "description": "Ви збираєтеся запустити \"{clientName}\", який не був перевірений на наявність шкідливого програмного забезпечення або вірусів. Цей клієнт може містити потенційно небезпечний код, який може пошкодити вашу систему або загрожувати вашій безпеці.",
-      "dont_show_again": "Більше не показувати це попередження для цього клієнта",
-      "proceed_anyway": "Запустити в будь-якому разі",
-      "cancel": "Скасувати",
-      "close": "Я зрозумів"
+    "home": {
+        "search_placeholder": "Пошук клієнтів...",
+        "no_clients": "Клієнтів не знайдено",
+        "adjust_search": "Спробуйте змінити свій пошуковий запит.",
+        "favorite_added": "Додано до обраного",
+        "favorite_removed": "Видалено з обраного",
+        "starting_download": "Починається завантаження {name}",
+        "no_internet": "Неможливо завантажити клієнт: Немає підключення до Інтернету.",
+        "not_installed": "{name} не встановлено. Будь ласка, завантажте його спочатку.",
+        "launching": "Запуск {client}...",
+        "stopping": "Зупинка {name}...",
+        "opened_folder": "Відкрито папку для {name}",
+        "reinstalling": "Перевстановити {name}...",
+        "no_internet_reinstall": "Неможливо перевстановити клієнт: Немає підключення до Інтернету.",
+        "logs_copied": "Логи для {name} скопійовано до буфера обміну",
+        "deleted_success": "{name} успішно видалено",
+        "unavailable": "Недоступно",
+        "download": "Завантажити",
+        "stop": "Зупинити",
+        "launch": "Запустити",
+        "start_with": "Запустити з",
+        "selected_clients": "Обрано: {count} клієнтів",
+        "multiple_clients_selected": "Обрано {count} клієнтів",
+        "download_selected": "Завантажити обрані",
+        "reinstall_selected": "Перевстановити обрані",
+        "delete_selected": "Видалити обрані",
+        "downloading_multiple": "Завантаження {count} клієнтів...",
+        "deleting_multiple": "Видалення {count} клієнтів...",
+        "reinstalling_multiple": "Перевстановити {count} клієнтів...",
+        "multiple_clients_deleted": "{count} клієнтів успішно видалено",
+        "multiple_clients_reinstalled": "{count} клієнтів успішно перевстановлено",
+        "no_clients_to_download": "Немає клієнтів для завантаження",
+        "no_clients_to_delete": "Немає встановлених клієнтів для видалення",
+        "no_clients_to_reinstall": "Немає встановлених клієнтів для перевстановлення",
+        "stop_selected": "Зупинити обрані клієнти",
+        "stopping_multiple": "Зупинка {count} клієнтів",
+        "multiple_clients_stopped": "{count} клієнтів успішно зупинено",
+        "filters_title": "Фільтри",
+        "sort": {
+            "popularity": "Популярність",
+            "name": "За назвою",
+            "newest": "Найновіші",
+            "version": "За версією",
+            "order": {
+                "asc": "За зростанням",
+                "desc": "За спаданням"
+            },
+            "rating": "За рейтингом"
+        },
+        "filters": {
+            "installed": "Встановлені"
+        },
+        "clear_filters": "Очистити фільтри",
+        "launch_another": "Запустити ще раз"
     },
-    "slow_download": {
-      "modal_title": "Повільне завантаження",
-      "title": "Низька швидкість завантаження",
-      "subtitle": "Швидкість завантаження нижча за очікувану",
-      "description": "Поточна швидкість завантаження нижча за звичайну. Це може призвести до збільшення часу завантаження.",
-      "current_speed": "Поточна швидкість:",
-      "tip_1": "Перевірте підключення до інтернету",
-      "tip_2": "Спробуйте закрити інші програми, що використовують інтернет",
-      "tip_3": "Спробуйте повторити завантаження пізніше",
-      "dont_show_again": "Більше не показувати це попередження",
-      "stalled_modal_title": "Завантаження зависло",
-      "stalled_title": "Завантаження зупинилося",
-      "stalled_subtitle": "Немає прогресу",
-      "stalled_description": "Завантаження, схоже, зависло. Дані не надходять вже деякий час.",
-      "no_progress": "Немає прогресу завантаження",
-      "tip_zapret": "Якщо ви перебуваєте в країнах СНД (Росія, Білорусь, Казахстан, крім України), ваш провайдер може блокувати наші домени. Спробуйте увімкнути 'DPI Bypass' у налаштуваннях і перезапустіть лоадер від імені адміністратора."
+    "theme": {
+        "actions": {
+            "add_favorite": "Додати до обраного",
+            "remove_favorite": "Видалити з обраного",
+            "open_folder": "Відкрити папку"
+        },
+        "select_theme": "Обрати тему",
+        "description": "Оберіть бажану тему.",
+        "change_success": "Тему змінено",
+        "save_failed": "Не вдалося зберегти тему: {error}",
+        "reset_button": "Скинути",
+        "expert_css_title": "Експертне налаштування CSS",
+        "show_expert": "Показати експертні",
+        "hide_expert": "Приховати експертні",
+        "expert_warning": "Лише для досвідчених користувачів. Некоректний CSS може порушити роботу інтерфейсу.",
+        "custom_css_label": "Власний CSS",
+        "enable_custom_css": "Увімкнути власний CSS",
+        "css_examples_title": "Приклади",
+        "example_1": "Додати розмиття фону до карток",
+        "example_inserted": "Приклад вставлено",
+        "enable_custom_css_first": "Спочатку увімкніть власний CSS",
+        "selected": "Обрано",
+        "insert_example": "Вставити",
+        "available_classes_label": "Доступні класи для редагування (натисніть, щоб вставити їх у код)",
+        "tooltip_client_card": "Головний клас картки клієнта",
+        "tooltip_sidebar_btn": "Клас для кнопок лівої навігації",
+        "tooltip_launch_download_btn": "Класи кнопок завантаження та запуску",
+        "export_css_btn": "Експорт CSS",
+        "import_css_btn": "Імпорт CSS",
+        "export_css_title": "Експорт власного CSS",
+        "import_css_title": "Імпорт власного CSS",
+        "export_desc": "Скопіюйте закодований CSS нижче та поділіться ним. Дозволено лише безпечний CSS.",
+        "import_desc": "Вставте закодований CSS сюди для імпорту. Дозволено лише безпечний CSS.",
+        "copy": "Копіювати",
+        "copied": "Скопійовано!",
+        "copy_failed": "Не вдалося скопіювати",
+        "import": "Імпортувати",
+        "import_success": "Пресет успішно імпортовано!",
+        "import_invalid": "Недійсний пресет. Імпорт не вдався.",
+        "primary": "Основний колір",
+        "export_success": "Пресет скопійовано до буфера обміну",
+        "export_failed": "Не вдалося експортувати пресет",
+        "colors": "Кольори",
+        "base_colors": "Базові кольори",
+        "base100": "База 100",
+        "base200": "База 200",
+        "base300": "База 300",
+        "base_content": "Базовий контент",
+        "primary_secondary_accent": "Основний / Вторинний / Акцент",
+        "primary_content": "Основний контент",
+        "secondary": "Вторинний",
+        "secondary_content": "Вторинний контент",
+        "accent": "Акцент",
+        "accent_content": "Акцентний контент",
+        "semantic_colors": "Семантичні кольори",
+        "neutral": "Нейтральний",
+        "neutral_content": "Нейтральний контент",
+        "info": "Інформація",
+        "info_content": "Інформаційний контент",
+        "success": "Успіх",
+        "success_content": "Контент успіху",
+        "warning": "Попередження",
+        "warning_content": "Контент попередження",
+        "error": "Помилка",
+        "error_content": "Контент помилки",
+        "preset": "Пресет",
+        "presets": {
+            "title": "Пресети тем",
+            "description": "Зберігайте та керуйте своїми пресетами налаштувань",
+            "save_current": "Зберегти поточний",
+            "import": "Імпортувати",
+            "pagination": {
+                "per_page": "На сторінці",
+                "page_of": "Сторінка {current} з {total}"
+            },
+            "create_first_preset": "Створити перший пресет",
+            "no_presets_title": "Пресетів ще немає",
+            "no_presets_description": "Створіть свій перший пресет, зберігши поточні налаштування",
+            "loading": "Завантаження пресетів...",
+            "apply_preset": "Застосувати пресет",
+            "edit": "Редагувати",
+            "duplicate": "Дублювати",
+            "export": "Експортувати",
+            "delete": "Видалити",
+            "apply": "Застосувати",
+            "created": "Створено {date}",
+            "selected_count": "Обрано пресетів: {count}",
+            "actions": {
+                "apply_first": "Застосувати перший обраний",
+                "export_selected": "Експортувати обрані",
+                "duplicate_selected": "Дублювати обрані",
+                "delete_selected": "Видалити обрані"
+            },
+            "create_modal": {
+                "name_label": "Назва пресету",
+                "name_required": "Назва пресету є обов'язковою",
+                "name_too_long": "Назва пресету має бути не довшою за 50 символів",
+                "name_placeholder": "Введіть назву пресету",
+                "description_label": "Опис",
+                "description_placeholder": "Необов'язковий опис для цього пресету",
+                "source_info": "Джерело пресету",
+                "source_create": "Буде збережено поточні налаштування",
+                "source_edit": "Редагування існуючого пресету",
+                "create_button": "Створити пресет",
+                "update_button": "Оновити пресет",
+                "cancel": "Скасувати"
+            },
+            "import_modal": {
+                "method_label": "Метод імпорту",
+                "method_file": "Файл",
+                "method_json": "JSON",
+                "file_label": "Оберіть файл пресету",
+                "file_help": "Оберіть .json файл пресету",
+                "json_label": "Вставте JSON-дані",
+                "json_placeholder": "Вставте дані вашого пресету у форматі JSON сюди...",
+                "preview_title": "Попередній перегляд",
+                "preview_name": "Назва",
+                "preview_description": "Опис",
+                "import_button": "Імпортувати пресет",
+                "importing": "Імпортування...",
+                "cancel": "Скасувати",
+                "error_invalid_file": "Недійсний JSON-файл",
+                "error_no_name": "Пресет повинен мати назву",
+                "error_invalid_json": "Недійсний JSON"
+            },
+            "delete_modal": {
+                "message": "Ви впевнені, що хочете видалити пресет \"{name}\"?",
+                "warning": "Цю дію не можна скасувати.",
+                "delete_button": "Видалити пресет",
+                "cancel": "Скасувати"
+            },
+            "messages": {
+                "load_error": "Не вдалося завантажити пресети",
+                "create_success": "Пресет \"{name}\" успішно створено",
+                "create_error": "Не вдалося створити пресет",
+                "update_success": "Пресет \"{name}\" успішно оновлено",
+                "update_error": "Не вдалося оновити пресет",
+                "delete_success": "Пресет \"{name}\" успішно видалено",
+                "delete_error": "Не вдалося видалити пресет",
+                "duplicate_success": "Пресет \"{name}\" успішно дубльовано",
+                "duplicate_error": "Не вдалося дублювати пресет",
+                "apply_success": "Пресет \"{name}\" успішно застосовано",
+                "apply_error": "Не вдалося застосувати пресет \"{name}\": {error}",
+                "import_success": "Пресет \"{name}\" успішно імпортовано",
+                "import_no_name": "Імпортований пресет не має назви",
+                "import_error": "Не вдалося імпортувати пресет: {error}",
+                "multiple_deleted": "{count} пресетів успішно видалено",
+                "multiple_duplicated": "{count} пресетів успішно дубльовано",
+                "multiple_exported": "{count} пресетів експортовано до буфера обміну"
+            }
+        },
+        "dark": "Темна",
+        "light": "Світла"
     },
-    "add_custom_client": "Додати власний клієнт",
-    "edit_custom_client": "Редагувати клієнт",
-    "delete_custom_client": "Видалити власний клієнт",
-    "client_added": "Клієнт додано",
-    "client_edited": "Клієнт змінено",
-    "client_deleted": "Клієнт видалено",
-    "delete_custom_client_confirm": {},
-    "add_custom_client_modal": {
-      "client_name": "Назва клієнта",
-      "enter_client_name": "Введіть назву клієнта",
-      "minecraft_version": "Версія Minecraft",
-      "main_class": "Головний клас",
-      "main_class_placeholder": "напр., net.minecraft.client.main.Main",
-      "jar_file": "JAR-файл",
-      "no_file_selected": "Файл не обрано",
-      "select_jar_file": "Оберіть .jar файл",
-      "selected": "Обрано",
-      "adding": "Додавання...",
-      "add_client": "Додати клієнт"
+    "logs": {
+        "copy_logs": "Копіювати логи",
+        "title": "Логи {client}",
+        "view": "Переглянути логи"
     },
-    "edit_custom_client_modal": {
-      "client_name": "Назва клієнта",
-      "enter_client_name": "Введіть назву клієнта",
-      "minecraft_version": "Версія Minecraft",
-      "main_class": "Головний клас",
-      "main_class_placeholder": "напр., net.minecraft.client.main.Main",
-      "updating": "Оновлення...",
-      "update_client": "Оновити клієнт"
+    "installation": {
+        "downloading": "Завантаження",
+        "extracting": "Розпакування",
+        "download_complete": "Завантаження завершено",
+        "installation_complete": "Встановлення завершено"
     },
-    "delete_custom_client_confirm_modal": {
-      "title": "Видалити власний клієнт",
-      "description": "Цю дію не можна скасувати",
-      "deleting": "Видалення...",
-      "delete_client": "Видалити клієнт"
-    }
-  },
-  "preloader": {
-    "initializing": "Ініціалізація...",
-    "connecting_servers": "Підключення до серверів...",
-    "ready": "Готово!"
-  },
-  "about": {
-    "title": "Про CollapseLoader",
-    "version": "Версія",
-    "codename": "Кодове ім'я",
-    "commit": "Коміт",
-    "description": "Приєднуйтесь до нашої спільноти для отримання оновлень, підтримки та повідомлення про будь-які проблеми, з якими ви можете зіткнутися.",
-    "open_failed": "Не вдалося відкрити {platform}",
-    "branch": "Гілка",
-    "development": "Режим розробника"
-  },
-  "account": {
-    "no_email": "Немає пошти",
-    "invisible_mode": "Режим невидимості",
-    "invisible_mode_description": "Коли увімкнено, ви будете відображатися офлайн для інших користувачів",
-    "streamer_mode": "Режим стрімера",
-    "streamer_mode_description": "Коли увімкнено, всі імена користувачів будуть приховані для конфіденційності",
-    "streamer_enabled": "Режим стрімера увімкнено",
-    "streamer_disabled": "Режим стрімера вимкнено",
-    "streamer_failed": "Не вдалося перемкнути режим стрімера",
-    "invisible_failed": "Ви повинні бути онлайн, щоб змінити налаштування видимості",
-    "using_cached_data": "Офлайн-режим - зміна статусу вимкнена",
-    "change_password": "Змінити пароль",
-    "change_password_confirm_title": "Підтвердити зміну пароля",
-    "current_password": "Поточний пароль",
-    "new_password": "Новий пароль",
-    "confirm_password": "Підтвердіть пароль",
-    "password_change_failed": "Не вдалося змінити пароль. Будь ласка, перевірте з'єднання та спробуйте ще раз.",
-    "password_change_success": "Пароль успішно змінено!",
-    "password_too_short": "Новий пароль повинен містити щонайменше 8 символів.",
-    "password_mismatch": "Нові паролі не збігаються.",
-    "nickname_update_failed": "Не вдалося оновити нікнейм. Будь ласка, спробуйте ще раз, коли будете онлайн.",
-    "nickname_update_success": "Нікнейм успішно оновлено!",
-    "nickname_label": "Редагувати нікнейм",
-    "invisible_enabled": "Режим невидимості увімкнено",
-    "invisible_disabled": "Режим невидимості вимкнено",
-    "logout_confirm_title": "Підтвердити вихід",
-    "social_links": "Соціальні посилання",
-    "no_social_links": "Соціальні посилання ще не додано.",
-    "avatar_help": "PNG, JPG, GIF, WEBP до 5МБ",
-    "avatar_drop": "Перетягніть або натисніть, щоб завантажити аватар",
-    "upload_avatar": "Завантажити аватар",
-    "avatar_upload_refresh_failed": "Не вдалося оновити аватар після завантаження: {error}",
-    "avatar_type_error": "Непідтримуваний тип файлу",
-    "avatar_size_error": "Файл занадто великий (макс. 5МБ)",
-    "avatar_uploaded": "Аватар оновлено",
-    "avatar_upload_failed": "Не вдалося завантажити аватар",
-    "reset_avatar": "Скинути аватар",
-    "avatar_reset_success": "Аватар успішно скинуто",
-    "avatar_reset_failed": "Не вдалося скинути аватар: {error}"
-  },
-  "roles": {
-    "USER": "Користувач",
-    "TESTER": "Тестувальник",
-    "ADMIN": "Адміністратор",
-    "DEVELOPER": "Розробник",
-    "OWNER": "Власник"
-  },
-  "time": {
-    "offline": "Офлайн",
-    "online": "Онлайн"
-  },
-  "common": {
-    "logout": "Вийти",
-    "back": "Назад",
-    "unblock": "Розблокувати",
-    "next": "Далі",
-    "previous": "Назад",
-    "delete": "Видалити",
-    "username": "Ім'я користувача",
-    "password": "Пароль",
-    "login": "Увійти",
-    "register": "Реєстрація",
-    "download": "Завантажити",
-    "please_wait": "Будь ласка, зачекайте",
-    "cancel": "Скасувати",
-    "reinstall": "Перевстановити",
-    "blocked": "Заблоковано",
-    "loading": "Завантаження...",
-    "ok": "Гаразд",
-    "close": "Закрити",
-    "save": "Зберегти",
-    "browse": "Огляд",
-    "edit": "Редагувати",
-    "add": "Додати",
-    "details": "Деталі",
-    "send": "Надіслати",
-    "copied_to_clipboard": "Колір {color} скопійовано до буфера обміну",
-    "done": "Готово",
-    "click": "Натисніть"
-  },
-  "auth": {
-    "logout": {
-      "confirm": "Ви впевнені, що хочете вийти з акаунту?",
-      "local_only": "Вихід виконано локально. Виникла проблема з виходом на сервері.",
-      "success": "Ви успішно вийшли з системи!"
+    "errors": {
+        "clients_load_failed": "Не вдалося завантажити клієнти: {error}",
+        "clients_unavailable": "Клієнти наразі недоступні.",
+        "stop_error": "Не вдалося зупинити клієнт: {error}",
+        "folder_error": "Не вдалося відкрити папку даних: {error}",
+        "reinstall_error": "Не вдалося переінсталювати {name}: {error}",
+        "logs_error": "Не вдалося отримати доступ до логів: {error}",
+        "delete_error": "Не вдалося видалити {name}: {error}",
+        "download_error": "Не вдалося завантажити {name}: {error}",
+        "load_accounts_error": "Помилка завантаження акаунтів: {error}",
+        "launch_with_account_error": "Помилка запуску клієнта з акаунтом: {error}",
+        "download_network_error": "Помилка мережевого з'єднання під час завантаження: {error}",
+        "download_timeout_error": "Час завантаження вичерпано. Перевірте з'єднання: {error}",
+        "download_disk_error": "Не вдалося зберегти файл на диск. Перевірте вільне місце: {error}",
+        "hash_verification_failed": "Перевірка цілісності файлу для {name} не вдалася. Завантажений файл пошкоджено і було видалено. Будь ласка, спробуйте завантажити знову.",
+        "hash_verification_launch_failed": "Неможливо перевірити хеш для клієнта {name}"
     },
-    "login": {
-      "title": "Вхід",
-      "username_placeholder": "Введіть ваше ім'я користувача",
-      "password_placeholder": "Введіть ваш пароль",
-      "login_button": "Увійти",
-      "register_link": "Не маєте акаунту?",
-      "success": "Вхід виконано успішно!",
-      "login_failed": "Помилка входу. Будь ласка, перевірте ваші дані.",
-      "no_token": "Не отримано токен автентифікації."
+    "validation": {
+        "passwords_no_match": "Паролі не збігаються.",
+        "min_length": "{field} повинен містити щонайменше {length} символів."
     },
-    "register": {
-      "title": "Реєстрація",
-      "username_placeholder": "Оберіть ім'я користувача",
-      "email_placeholder": "Введіть вашу ел. пошту",
-      "password_placeholder": "Оберіть пароль",
-      "confirm_password_placeholder": "Підтвердіть пароль",
-      "register_button": "Зареєструватися",
-      "login_link": "Вже маєте акаунт?",
-      "registration_failed": "Реєстрація не вдалася. Будь ласка, спробуйте ще раз.",
-      "auto_login_failed": "Реєстрація успішна, але автоматичний вхід не вдався. Будь ласка, увійдіть вручну."
-    }
-  },
-  "appLogs": {
-    "copyLogs": "Копіювати",
-    "autoScroll": "Автопрокрутка",
-    "noLogs": "Логи застосунку відсутні.",
-    "searchPlaceholder": "Пошук логів...",
-    "download": "Завантажити логи",
-    "filterByLevel": "Фільтр за рівнем",
-    "noMatchingLogs": "Логи не знайдено за вашими фільтрами."
-  },
-  "blockedUsers": {
-    "title": "Заблоковані користувачі ({count})",
-    "noBlockedUsers": "Немає заблокованих користувачів. Заблоковані користувачі з'являться тут."
-  },
-  "friends": {
-    "addFriend": "Додати друга",
-    "noFriends": "Ще немає друзів. \nДодайте друзів, щоб почати!",
-    "receivedRequests": "Отримані",
-    "sentRequests": "Надіслані",
-    "title": "Друзі ({count})",
-    "cancel_friend_request": "Скасувати запит у друзі",
-    "remove_success": "{name} видалено з друзів",
-    "block_success": "{name} заблоковано",
-    "unblock_success": "{name} розблоковано",
-    "request_accepted": "Запит у друзі прийнято",
-    "request_rejected": "Запит у друзі відхилено",
-    "request_canceled": "Запит у друзі скасовано",
-    "remove_failed": "Не вдалося видалити друга",
-    "block_failed": "Не вдалося заблокувати користувача",
-    "unblock_failed": "Не вдалося розблокувати користувача",
-    "request_failed": "Не вдалося {action} запит у друзі",
-    "load_failed": "Не вдалося завантажити дані друзів"
-  },
-  "home": {
-    "search_placeholder": "Пошук клієнтів...",
-    "no_clients": "Клієнтів не знайдено",
-    "adjust_search": "Спробуйте змінити свій пошуковий запит.",
-    "favorite_added": "Додано до обраного",
-    "favorite_removed": "Видалено з обраного",
-    "starting_download": "Починається завантаження {name}",
-    "no_internet": "Неможливо завантажити клієнт: Немає підключення до Інтернету.",
-    "not_installed": "{name} не встановлено. Будь ласка, завантажте його спочатку.",
-    "launching": "Запуск {client}...",
-    "stopping": "Зупинка {name}...",
-    "opened_folder": "Відкрито папку для {name}",
-    "reinstalling": "Перевстановлення {name}...",
-    "no_internet_reinstall": "Неможливо перевстановити клієнт: Немає підключення до Інтернету.",
-    "logs_copied": "Логи для {name} скопійовано до буфера обміну",
-    "deleted_success": "{name} успішно видалено",
-    "unavailable": "Недоступно",
-    "download": "Завантажити",
-    "stop": "Зупинити",
-    "launch": "Запустити",
-    "start_with": "Запустити з",
-    "selected_clients": "Обрано: {count} клієнтів",
-    "multiple_clients_selected": "Обрано {count} клієнтів",
-    "download_selected": "Завантажити обрані",
-    "reinstall_selected": "Перевстановити обрані",
-    "delete_selected": "Видалити обрані",
-    "downloading_multiple": "Завантаження {count} клієнтів...",
-    "deleting_multiple": "Видалення {count} клієнтів...",
-    "reinstalling_multiple": "Перевстановлення {count} клієнтів...",
-    "multiple_clients_deleted": "{count} клієнтів успішно видалено",
-    "multiple_clients_reinstalled": "{count} клієнтів успішно перевстановлено",
-    "no_clients_to_download": "Немає клієнтів для завантаження",
-    "no_clients_to_delete": "Немає встановлених клієнтів для видалення",
-    "no_clients_to_reinstall": "Немає встановлених клієнтів для перевстановлення",
-    "stop_selected": "Зупинити обрані клієнти",
-    "stopping_multiple": "Зупинка {count} клієнтів",
-    "multiple_clients_stopped": "{count} клієнтів успішно зупинено",
-    "filters_title": "Фільтри",
-    "sort": {
-      "popularity": "Популярність",
-      "name": "За назвою",
-      "newest": "Найновіші",
-      "version": "За версією",
-      "order": {
-        "asc": "За зростанням",
-        "desc": "За спаданням"
-      },
-      "rating": "За рейтингом"
+    "irc": {
+        "inline": {
+            "title": "Глобальний чат",
+            "latest_activity_connected": "Підключено до IRC чату",
+            "tap_to_connect": "Торкніться, щоб під'єднатися до IRC",
+            "placeholder": "Введіть повідомлення...",
+            "send_failed": "Не вдалося відправити повідомлення",
+            "connection_error": "Помилка з'єднання: {error}",
+            "status": {
+                "connected": "Підключено",
+                "reconnecting": "Перепідключення...",
+                "connecting": "Підключення...",
+                "error": "Проблеми з підключенням",
+                "disconnected": "Відключено"
+            },
+            "privateMessage": "Особисте повідомлення",
+            "copyNickname": "Скопіювати нікнейм"
+        }
     },
-    "filters": {
-      "installed": "Встановлені"
+    "settings": {
+        "general": "Налаштування",
+        "sync": "Хмарна синхронізація",
+        "accounts": "Акаунти",
+        "reset_tooltip": "Скинути до стандартних",
+        "sync_status": "Статус хмарної синхронізації",
+        "sync_controls": "Керування синхронізацією",
+        "upload_title": "Завантажити в хмару",
+        "upload_description": "Створіть резервну копію ваших поточних налаштувань, обраного та акаунтів у хмарі.",
+        "upload_button": "Завантажити зараз",
+        "download_title": "Завантажити з хмари",
+        "download_description": "Відновіть ваші налаштування, обране та акаунти з хмари.",
+        "download_button": "Завантажити зараз",
+        "syncing": "Синхронізація...",
+        "auto_sync": "Автосинхронізація",
+        "auto_sync_description": "Автоматично синхронізувати ваші дані з хмарою кожні 5 хвилин, коли ви онлайн.",
+        "offline_warning": "Ви зараз офлайн. Функції синхронізації вимкнено.",
+        "no_cloud_data": "Хмарних даних не знайдено. Завантажте свої дані, щоб почати використовувати хмарну синхронізацію.",
+        "add_account": "Додати акаунт",
+        "active": "Активний",
+        "tags": "Теги",
+        "created": "Створено",
+        "last_used": "Останнє використання",
+        "no_accounts_title": "Ще немає акаунтів",
+        "no_accounts_description": "Додайте свій перший акаунт, щоб почати",
+        "account_set_active": "{username} тепер активний акаунт!",
+        "account_set_active_failed": "Не вдалося встановити активний акаунт: {error}",
+        "download_success": "Успішно завантажено з хмари!",
+        "download_failed": "Завантаження з хмари не вдалося: {error}",
+        "sync_accounts_to_cloud_success": "Локальні акаунти успішно синхронізовано з Atlas!",
+        "sync_accounts_to_cloud_failed": "Не вдалося синхронізувати локальні акаунти з Atlas: {error}",
+        "sync_accounts_from_cloud_success": "Акаунти успішно імпортовано з Atlas!",
+        "sync_accounts_from_cloud_failed": "Не вдалося імпортувати акаунти з Atlas: {error}",
+        "load_remote_accounts_failed": "Не вдалося завантажити акаунти Atlas: {error}",
+        "load_settings_failed": "Не вдалося завантажити налаштування: {error}",
+        "save_settings_failed": "Не вдалося зберегти налаштування: {error}",
+        "load_accounts_failed": "Не вдалося завантажити акаунти: {error}",
+        "load_flags_failed": "Не вдалося завантажити прапорці: {error}",
+        "language_change_failed": "Не вдалося змінити мову: {error}",
+        "descriptions": {
+            "ram": "Обсяг виділеної оперативної пам'яті (у МБ)",
+            "language": "Мова застосунку (напр., en, uk).",
+            "discord_rpc_enabled": "Увімкнути Discord Rich Presence, щоб показувати вашу активність у Discord.",
+            "optional_telemetry": "Дозволити анонімну аналітику для покращення CollapseLoader. Особисті дані не збираються.",
+            "cordshare": "Діліться своїми координатами з друзями, щоб показувати ваше місцезнаходження в грі, навіть коли ви за межами завантажених чанків.",
+            "irc_chat": "Спілкуйтеся з іншими користувачами CollapseLoader в IRC-чаті, доступному в кожному клієнті.",
+            "hash_verify": "Увімкніть перевірку хешу, щоб переконатися, що завантажені клієнти не пошкоджені. Це допомагає підтримувати ваші клієнти в актуальному стані.",
+            "sync_client_settings": "Синхронізувати опції, ресурспаки та інші налаштування між усіма клієнтами.",
+            "dpi_bypass": "Увімкніть, якщо завантаження клієнта застрягло на 0%, клієнт не запускається або клієнти взагалі не завантажуються.",
+            "minimize_to_tray_on_launch": "Згортати застосунок у системний трей при запуску клієнта.",
+            "close_to_tray": "Згортати застосунок у системний трей замість закриття при натисканні кнопки закриття.",
+            "java_path": "Шлях до виконуваного файлу Java. Залиште порожнім, щоб використовувати стандартну версію.",
+            "java_args": "Додаткові аргументи JVM для запуску клієнта."
+        },
+        "telemetry": "Аналітика",
+        "open_data": "Відкрити папку з даними",
+        "add_account_title": "Додати новий акаунт",
+        "edit_account_title": "Редагувати акаунт",
+        "reset_title": "Підтвердження скидання налаштувань",
+        "delete_account_title": "Підтвердження видалення акаунту",
+        "actions": "Дії",
+        "toast_position": {
+            "title": "Позиція сповіщень",
+            "description": "Оберіть, де на екрані з'являтимуться сповіщення",
+            "bottom_right": "Внизу праворуч",
+            "bottom_left": "Внизу ліворуч",
+            "top_right": "Вгорі праворуч",
+            "top_left": "Вгорі ліворуч",
+            "bottom_center": "Внизу по центру",
+            "top_center": "Вгорі по центру",
+            "preview_message": "Позицію сповіщень змінено!"
+        },
+        "telemetry_info_title": "Інформація про телеметрію",
+        "reset_requirements": "Скинути файли лоадера",
+        "reset_requirements_success": "Успішно видалено файли, тепер завантажте будь-який клієнт",
+        "reset_requirements_failed": "Не вдалося видалити файли, спробуйте ще раз або перезапустіть лоадер",
+        "login_required": "Вам потрібно увійти до свого акаунту, щоб використовувати цю функцію.",
+        "reset_cache_failed": "Не вдалося видалити кеш, спробуйте ще раз",
+        "hash_verify": "Перевірка хешу",
+        "irc_chat": "IRC-чат",
+        "save_flags_failed": "Не вдалося зберегти прапорці: {error}",
+        "change_root": {
+            "title": "Змінити папку даних",
+            "action": "Змінити папку даних",
+            "target_folder": "Цільова папка",
+            "hint": "Оберіть папку, де зберігатимуться файли CollapseLoader (клієнти, кеш тощо)",
+            "mode": "Що робити зі старою папкою?",
+            "mode_move": "Перемістити",
+            "mode_wipe": "Видалити",
+            "mode_move_desc": "Перемістити всі дані зі старої папки до нової (рекомендовано)",
+            "mode_wipe_desc": "Видалити стару папку (всі дані буде видалено)",
+            "select_folder_first": "Спочатку оберіть папку",
+            "success": "Папку даних змінено",
+            "failed": "Не вдалося змінити папку даних: {error}",
+            "restart_required": "Будь ласка, перезапустіть застосунок, щоб зміни набули чинності"
+        },
+        "sync_client_settings": "Синхронізувати налаштування клієнта",
+        "minimize_to_tray_on_launch": "Згортати в трей при запуску",
+        "close_to_tray": "Закривати в трей",
+        "ram": {
+            "warning": "Попередження: Ви вибрали {selectedRamMb} МБ оперативної пам'яті. Це перевищує рекомендований ліміт у 6 ГБ і може спричинити проблеми з продуктивністю або збій системи."
+        },
+        "reset_settings": "Скинути налаштування",
+        "accounts_description": "Керуйте своїми ігровими обліковими записами та легко переключайтеся між ними",
+        "accounts_management": "Управління обліковими записами",
+        "no_matching_accounts": "Не знайдено відповідних облікових записів",
+        "search_accounts": "Пошук облікових записів...",
+        "try_different_search": "Спробуйте змінити параметри пошуку або фільтри",
+        "local_account_sync": "Синхронізація локальних акаунтів",
+        "local_account_sync_description": "Тримайте ваші локальні акаунти CollapseLoader синхронізованими з Atlas, щоб відновлювати їх на інших пристроях.",
+        "sync_accounts_from_cloud_button": "Імпортувати акаунти Atlas",
+        "sync_accounts_to_cloud_button": "Завантажити локальні акаунти",
+        "remote_accounts_loading": "Перевірка акаунтів на Atlas...",
+        "remote_accounts_present": "{count} акаунтів синхронізовано з Atlas.",
+        "remote_accounts_more": "та ще {count}",
+        "remote_accounts_empty": "Поки що немає акаунтів, синхронізованих з Atlas.",
+        "sync_login_required": "Увійдіть, щоб увімкнути синхронізацію",
+        "not_signed_in": "Ви не увійшли в обліковий запис"
     },
-    "clear_filters": "Очистити фільтри"
-  },
-  "theme": {
-    "actions": {
-      "add_favorite": "Додати до обраного",
-      "remove_favorite": "Видалити з обраного",
-      "open_folder": "Відкрити папку"
+    "userProfile": {
+        "back_to_friends": "Назад до друзів",
+        "profile_information": "Інформація про профіль",
+        "username": "Ім'я користувача",
+        "nickname": "Нікнейм",
+        "member_since": "Учасник з",
+        "actions": "Дії",
+        "online": "Онлайн",
+        "offline": "Офлайн",
+        "playing": "Грає в",
+        "last_seen": "Востаннє в мережі",
+        "just_now": "щойно",
+        "minutes_ago": "{count}хв тому",
+        "hours_ago": "{count}год тому",
+        "days_ago": "{count}д тому",
+        "friends_with": "Ви друзі з {name}",
+        "remove_friend": "Видалити з друзів",
+        "friend_request_sent": "Запит у друзі надіслано до {name}",
+        "friend_request_received": "{name} надіслав вам запит у друзі",
+        "accept": "Прийняти",
+        "decline": "Відхилити",
+        "user_blocked": "Цей користувач заблокований",
+        "send_friend_request": "Надіслати запит у друзі",
+        "sending": "Надсилання...",
+        "canceling": "Скасування...",
+        "cancel_friend_request": "Скасувати запит",
+        "block_user": "Заблокувати користувача",
+        "unblock_user": "Розблокувати користувача",
+        "no_user_id": "Не надано ID користувача",
+        "user_not_found": "Користувача не знайдено",
+        "login_required": "Вам потрібно увійти, щоб переглядати профілі",
+        "profile_load_failed": "Не вдалося завантажити профіль користувача",
+        "friend_request_sent_success": "Запит у друзі надіслано до {name}",
+        "friend_request_failed": "Не вдалося надіслати запит у друзі",
+        "copy_username": "Копіювати ім'я користувача",
+        "copied_username": "{name} скопійовано до буфера обміну",
+        "copy_failed": "Не вдалося скопіювати ім'я користувача",
+        "friend_request_canceled": "Запит у друзі успішно скасовано",
+        "friend_request_cancel_failed": "Не вдалося скасувати запит у друзі",
+        "friend_removed_success": "{name} видалено з друзів",
+        "friend_remove_failed": "Не вдалося видалити з друзів",
+        "friend_request_responded": "На запит у друзі надано відповідь: {action}",
+        "friend_request_respond_failed": "Не вдалося {action} запит у друзі",
+        "friend_request_not_found": "Запит у друзі не знайдено",
+        "user_blocked_success": "{name} заблоковано",
+        "user_block_failed": "Не вдалося заблокувати користувача",
+        "presets_title": "Пресети",
+        "presets": "пресетів",
+        "no_presets": "Цей користувач ще не поділився жодними пресетами.",
+        "create_preset": "Створити пресет",
+        "presets_hidden_streamer": "Пресети приховані в режимі стримера.",
+        "favorite_client": "Улюблений клієнт"
     },
-    "select_theme": "Обрати тему",
-    "description": "Оберіть бажану тему.",
-    "change_success": "Тему змінено",
-    "save_failed": "Не вдалося зберегти тему: {error}",
-    "reset_button": "Скинути",
-    "expert_css_title": "Експертне налаштування CSS",
-    "show_expert": "Показати експертні",
-    "hide_expert": "Приховати експертні",
-    "expert_warning": "Лише для досвідчених користувачів. Неправильний CSS може зламати інтерфейс.",
-    "custom_css_label": "Власний CSS",
-    "enable_custom_css": "Увімкнути власний CSS",
-    "css_examples_title": "Приклади",
-    "example_1": "Додати розмиття фону до карток",
-    "example_inserted": "Приклад вставлено",
-    "enable_custom_css_first": "Спочатку увімкніть власний CSS",
-    "selected": "Обрано",
-    "insert_example": "Вставити",
-    "available_classes_label": "Доступні класи для редагування (натисніть, щоб вставити їх у код)",
-    "tooltip_client_card": "Головний клас картки клієнта",
-    "tooltip_sidebar_btn": "Клас для кнопок лівої навігації",
-    "tooltip_launch_download_btn": "Класи кнопок завантаження та запуску",
-    "export_css_btn": "Експорт CSS",
-    "import_css_btn": "Імпорт CSS",
-    "export_css_title": "Експорт власного CSS",
-    "import_css_title": "Імпорт власного CSS",
-    "export_desc": "Скопіюйте закодований CSS нижче та поділіться ним. Дозволено лише безпечний CSS.",
-    "import_desc": "Вставте закодований CSS сюди для імпорту. Дозволено лише безпечний CSS.",
-    "copy": "Копіювати",
-    "copied": "Скопійовано!",
-    "copy_failed": "Не вдалося скопіювати",
-    "import": "Імпортувати",
-    "import_success": "Пресет успішно імпортовано!",
-    "import_invalid": "Недійсний пресет. Імпорт не вдався.",
-    "primary": "Основний колір",
-    "export_success": "Пресет скопійовано до буфера обміну",
-    "export_failed": "Не вдалося експортувати пресет",
-    "colors": "Кольори",
-    "base_colors": "Базові кольори",
-    "base100": "База 100",
-    "base200": "База 200",
-    "base300": "База 300",
-    "base_content": "Базовий контент",
-    "primary_secondary_accent": "Основний / Вторинний / Акцент",
-    "primary_content": "Основний контент",
-    "secondary": "Вторинний",
-    "secondary_content": "Вторинний контент",
-    "accent": "Акцент",
-    "accent_content": "Акцентний контент",
-    "semantic_colors": "Семантичні кольори",
-    "neutral": "Нейтральний",
-    "neutral_content": "Нейтральний контент",
-    "info": "Інформація",
-    "info_content": "Інформаційний контент",
-    "success": "Успіх",
-    "success_content": "Контент успіху",
-    "warning": "Попередження",
-    "warning_content": "Контент попередження",
-    "error": "Помилка",
-    "error_content": "Контент помилки",
-    "preset": "Пресет",
-    "presets": {
-      "title": "Пресети тем",
-      "description": "Зберігайте та керуйте своїми пресетами налаштувань",
-      "save_current": "Зберегти поточний",
-      "import": "Імпортувати",
-      "pagination": {
-        "per_page": "На сторінці",
-        "page_of": "Сторінка {current} з {total}"
-      },
-      "create_first_preset": "Створити перший пресет",
-      "no_presets_title": "Пресетів ще немає",
-      "no_presets_description": "Створіть свій перший пресет, зберігши поточні налаштування",
-      "loading": "Завантаження пресетів...",
-      "apply_preset": "Застосувати пресет",
-      "edit": "Редагувати",
-      "duplicate": "Дублювати",
-      "export": "Експортувати",
-      "delete": "Видалити",
-      "apply": "Застосувати",
-      "created": "Створено {date}",
-      "selected_count": "Обрано пресетів: {count}",
-      "actions": {
-        "apply_first": "Застосувати перший обраний",
-        "export_selected": "Експортувати обрані",
-        "duplicate_selected": "Дублювати обрані",
-        "delete_selected": "Видалити обрані"
-      },
-      "create_modal": {
-        "name_label": "Назва пресету",
-        "name_required": "Назва пресету є обов'язковою",
-        "name_too_long": "Назва пресету має бути не довшою за 50 символів",
-        "name_placeholder": "Введіть назву пресету",
-        "description_label": "Опис",
-        "description_placeholder": "Необов'язковий опис для цього пресету",
-        "source_info": "Джерело пресету",
-        "source_create": "Буде збережено поточні налаштування",
-        "source_edit": "Редагування існуючого пресету",
-        "create_button": "Створити пресет",
-        "update_button": "Оновити пресет",
-        "cancel": "Скасувати"
-      },
-      "import_modal": {
-        "method_label": "Метод імпорту",
-        "method_file": "Файл",
-        "method_json": "JSON",
-        "file_label": "Оберіть файл пресету",
-        "file_help": "Оберіть .json файл пресету",
-        "json_label": "Вставте JSON-дані",
-        "json_placeholder": "Вставте дані вашого пресету у форматі JSON сюди...",
-        "preview_title": "Попередній перегляд",
-        "preview_name": "Назва",
-        "preview_description": "Опис",
-        "import_button": "Імпортувати пресет",
-        "importing": "Імпортування...",
-        "cancel": "Скасувати",
-        "error_invalid_file": "Недійсний JSON-файл",
-        "error_no_name": "Пресет повинен мати назву",
-        "error_invalid_json": "Недійсний JSON"
-      },
-      "delete_modal": {
-        "message": "Ви впевнені, що хочете видалити пресет \"{name}\"?",
-        "warning": "Цю дію не можна скасувати.",
-        "delete_button": "Видалити пресет",
-        "cancel": "Скасувати"
-      },
-      "messages": {
-        "load_error": "Не вдалося завантажити пресети",
-        "create_success": "Пресет \"{name}\" успішно створено",
-        "create_error": "Не вдалося створити пресет",
-        "update_success": "Пресет \"{name}\" успішно оновлено",
-        "update_error": "Не вдалося оновити пресет",
-        "delete_success": "Пресет \"{name}\" успішно видалено",
-        "delete_error": "Не вдалося видалити пресет",
-        "duplicate_success": "Пресет \"{name}\" успішно дубльовано",
-        "duplicate_error": "Не вдалося дублювати пресет",
-        "apply_success": "Пресет \"{name}\" успішно застосовано",
-        "apply_error": "Не вдалося застосувати пресет \"{name}\": {error}",
-        "import_success": "Пресет \"{name}\" успішно імпортовано",
-        "import_no_name": "Імпортований пресет не має назви",
-        "import_error": "Не вдалося імпортувати пресет: {error}",
-        "multiple_deleted": "{count} пресетів успішно видалено",
-        "multiple_duplicated": "{count} пресетів успішно дубльовано",
-        "multiple_exported": "{count} пресетів експортовано до буфера обміну"
-      }
+    "sync": {
+        "last_sync": "Остання синхронізація",
+        "minutes_ago": "{count}хв тому",
+        "hours_ago": "{count}год тому",
+        "days_ago": "{count}д тому"
     },
-    "dark": "Темна",
-    "light": "Світла"
-  },
-  "logs": {
-    "copy_logs": "Копіювати логи",
-    "title": "Логи {client}",
-    "view": "Переглянути логи"
-  },
-  "installation": {
-    "downloading": "Завантаження",
-    "extracting": "Розпакування",
-    "download_complete": "Завантаження завершено",
-    "installation_complete": "Встановлення завершено"
-  },
-  "errors": {
-    "clients_load_failed": "Не вдалося завантажити клієнти: {error}",
-    "clients_unavailable": "Клієнти наразі недоступні.",
-    "stop_error": "Не вдалося зупинити клієнт: {error}",
-    "folder_error": "Не вдалося відкрити папку даних: {error}",
-    "reinstall_error": "Не вдалося переінсталювати {name}: {error}",
-    "logs_error": "Не вдалося отримати доступ до логів: {error}",
-    "delete_error": "Не вдалося видалити {name}: {error}",
-    "download_error": "Не вдалося завантажити {name}: {error}",
-    "load_accounts_error": "Помилка завантаження акаунтів: {error}",
-    "launch_with_account_error": "Помилка запуску клієнта з акаунтом: {error}",
-    "download_network_error": "Помилка мережевого з'єднання під час завантаження: {error}",
-    "download_timeout_error": "Час завантаження вичерпано. Перевірте з'єднання: {error}",
-    "download_disk_error": "Не вдалося зберегти файл на диск. Перевірте вільне місце: {error}",
-    "hash_verification_failed": "Перевірка цілісності файлу для {name} не вдалася. Завантажений файл пошкоджено і було видалено. Будь ласка, спробуйте завантажити знову.",
-    "hash_verification_launch_failed": "Неможливо перевірити хеш для клієнта {name}"
-  },
-  "validation": {
-    "passwords_no_match": "Паролі не збігаються.",
-    "min_length": "{field} повинен містити щонайменше {length} символів."
-  },
-  "irc": {
-    "inline": {
-      "title": "Глобальний чат",
-      "latest_activity_connected": "Підключено до IRC чату",
-      "tap_to_connect": "Торкніться, щоб підключитись до IRC",
-      "placeholder": "Введіть повідомлення...",
-      "send_failed": "Не вдалося відправити повідомлення",
-      "connection_error": "Помилка з'єднання: {error}",
-      "status": {
-        "connected": "Підключено",
-        "reconnecting": "Перепідключення...",
-        "connecting": "Підключення...",
-        "error": "Проблеми з підключенням",
-        "disconnected": "Відключено"
-      },
-      "privateMessage": "Особисте повідомлення",
-      "copyNickname": "Скопіювати нікнейм"
-    }
-  },
-  "settings": {
-    "general": "Налаштування",
-    "sync": "Хмарна синхронізація",
-    "accounts": "Акаунти",
-    "reset_tooltip": "Скинути до стандартних",
-    "sync_status": "Статус хмарної синхронізації",
-    "sync_controls": "Керування синхронізацією",
-    "upload_title": "Завантажити в хмару",
-    "upload_description": "Створіть резервну копію ваших поточних налаштувань, обраного та акаунтів у хмарі.",
-    "upload_button": "Завантажити зараз",
-    "download_title": "Завантажити з хмари",
-    "download_description": "Відновіть ваші налаштування, обране та акаунти з хмари.",
-    "download_button": "Завантажити зараз",
-    "syncing": "Синхронізація...",
-    "auto_sync": "Автосинхронізація",
-    "auto_sync_description": "Автоматично синхронізувати ваші дані з хмарою кожні 5 хвилин, коли ви онлайн.",
-    "offline_warning": "Ви зараз офлайн. Функції синхронізації вимкнено.",
-    "no_cloud_data": "Хмарних даних не знайдено. Завантажте свої дані, щоб почати використовувати хмарну синхронізацію.",
-    "add_account": "Додати акаунт",
-    "active": "Активний",
-    "tags": "Теги",
-    "created": "Створено",
-    "last_used": "Останнє використання",
-    "no_accounts_title": "Ще немає акаунтів",
-    "no_accounts_description": "Додайте свій перший акаунт, щоб почати",
-    "account_set_active": "{username} тепер активний акаунт!",
-    "account_set_active_failed": "Не вдалося встановити активний акаунт: {error}",
-    "download_success": "Успішно завантажено з хмари!",
-    "download_failed": "Завантаження з хмари не вдалося: {error}",
-    "sync_accounts_to_cloud_success": "Локальні акаунти успішно синхронізовано з Atlas!",
-    "sync_accounts_to_cloud_failed": "Не вдалося синхронізувати локальні акаунти з Atlas: {error}",
-    "sync_accounts_from_cloud_success": "Акаунти успішно імпортовано з Atlas!",
-    "sync_accounts_from_cloud_failed": "Не вдалося імпортувати акаунти з Atlas: {error}",
-    "load_remote_accounts_failed": "Не вдалося завантажити акаунти Atlas: {error}",
-    "load_settings_failed": "Не вдалося завантажити налаштування: {error}",
-    "save_settings_failed": "Не вдалося зберегти налаштування: {error}",
-    "load_accounts_failed": "Не вдалося завантажити акаунти: {error}",
-    "load_flags_failed": "Не вдалося завантажити прапорці: {error}",
-    "language_change_failed": "Не вдалося змінити мову: {error}",
-    "descriptions": {
-      "ram": "Обсяг ОЗП, що виділяється, в МБ.",
-      "language": "Мова застосунку (напр., en, uk).",
-      "discord_rpc_enabled": "Увімкнути Discord Rich Presence, щоб показувати вашу активність у Discord.",
-      "optional_telemetry": "Дозволити анонімну аналітику для покращення CollapseLoader. Особиста інформація не збирається.",
-      "cordshare": "Діліться своїми координатами з друзями, щоб показувати ваше місцезнаходження в грі, навіть коли ви за межами завантажених чанків.",
-      "irc_chat": "Спілкуйтеся з іншими користувачами CollapseLoader в IRC-чаті, доступному в кожному клієнті.",
-      "hash_verify": "Увімкніть перевірку хешу, щоб переконатися, що завантажені клієнти не пошкоджені. Це допомагає підтримувати ваші клієнти в актуальному стані.",
-      "sync_client_settings": "Синхронізувати опції, ресурспаки та інші налаштування між усіма клієнтами.",
-      "dpi_bypass": "Увімкніть, якщо завантаження клієнта застрягло на 0%, клієнт не запускається або клієнти зовсім не завантажуються."
+    "navigation": {
+        "home": "Головна",
+        "friends": "Друзі",
+        "settings": "Налаштування",
+        "logs": "Логи застосунку",
+        "account": "Акаунт",
+        "about": "Про програму",
+        "news": "Новини",
+        "customization": "Фон",
+        "custom_clients": "Власні клієнти",
+        "sidebar_help": {
+            "title": "Порада:",
+            "tip": "Ви можете перемістити бічну панель на будь-який бік екрану. Подвійне клацання по бічній панелі прибирає відступи між іконками.",
+            "got_it": "Зрозумів"
+        }
     },
-    "telemetry": "Аналітика",
-    "open_data": "Відкрити папку з даними",
-    "add_account_title": "Додати новий акаунт",
-    "edit_account_title": "Редагувати акаунт",
-    "reset_title": "Підтвердження скидання налаштувань",
-    "delete_account_title": "Підтвердження видалення акаунту",
-    "actions": "Дії",
-    "toast_position": {
-      "title": "Позиція сповіщень",
-      "description": "Оберіть, де на екрані з'являтимуться сповіщення",
-      "bottom_right": "Внизу праворуч",
-      "bottom_left": "Внизу ліворуч",
-      "top_right": "Вгорі праворуч",
-      "top_left": "Вгорі ліворуч",
-      "bottom_center": "Внизу по центру",
-      "top_center": "Вгорі по центру",
-      "preview_message": "Позицію сповіщень змінено!"
+    "toast": {
+        "dev": {
+            "menu_opened": "Меню розробника відкрито",
+            "flags_reset": "Прапорці скинуто!"
+        },
+        "theme": {
+            "emergency_reset_done": "Власний CSS скинуто. {action}",
+            "emergency_reset_toggle_instruction": "Щоб знову увімкнути власний CSS, відкрийте налаштування теми та вимкніть, а потім увімкніть 'Увімкнути власний CSS'."
+        },
+        "client": {
+            "crashed": "Клієнт {name} зазнав збою. {error}",
+            "crashed_incomplete": "Клієнт {name} зазнав збою через неповне завантаження. Спроба автоматичного перевстановлення.",
+            "reinstall_success": "Успішно перевстановлено {name}. Спробуйте запустити знову.",
+            "reinstall_failed": "Не вдалося перевстановити {name}: {error}. Будь ласка, перевстановіть вручну.",
+            "redownload_success": "Успішно повторно завантажено {name}. Хеш перевірено."
+        },
+        "server": {
+            "offline": "Не вдалося визначити статус сервера. Припускається, що він офлайн.",
+            "offline_base": "Ви зараз офлайн. ",
+            "cdn_and_api_offline": "Неможливо підключитися до CDN та API.",
+            "cdn_offline": "Неможливо підключитися до CDN.",
+            "api_offline": "Неможливо підключитися до API.",
+            "api_init_failed": "Не вдалося ініціалізувати API: {error}"
+        },
+        "settings": {
+            "flags_load_failed": "Не вдалося завантажити прапорці: {error}",
+            "first_run_save_failed": "Не вдалося зберегти статус першого запуску: {error}",
+            "disclaimer_save_failed": "Не вдалося зберегти статус відмови від відповідальності: {error}",
+            "theme_save_failed": "Не вдалося зберегти тему: {error}"
+        },
+        "telemetry": {
+            "analytics_enabled": "Аналітику увімкнено. Дякуємо за допомогу в покращенні!",
+            "analytics_disabled": "Аналітику вимкнено.",
+            "analytics_enable_failed": "Не вдалося увімкнути аналітику: {error}",
+            "analytics_disable_failed": "Не вдалося вимкнути аналітику: {error}"
+        },
+        "auth": {
+            "registration_success": "Реєстрація успішна! Будь ласка, увійдіть."
+        },
+        "logs": {
+            "fetch_failed": "Помилка отримання логів застосунку: {error}",
+            "copied_success": "Логи застосунку скопійовано до буфера обміну!",
+            "copy_failed": "Не вдалося скопіювати логи застосунку: {error}",
+            "client_logs_copied": "Логи скопійовано до буфера обміну!",
+            "client_logs_copy_failed": "Не вдалося скопіювати логи до буфера обміну.",
+            "download_success": "Логи успішно збережено!",
+            "download_failed": "Не вдалося зберегти логи: {error}"
+        },
+        "users": {
+            "blocked_load_failed": "Не вдалося завантажити заблокованих користувачів",
+            "unblocked_success": "{name} розблоковано",
+            "unblock_failed": "Не вдалося розблокувати користувача"
+        },
+        "friends": {
+            "search_failed": "Не вдалося знайти користувачів",
+            "request_sent": "Запит у друзі надіслано до {name}",
+            "request_send_failed": "Не вдалося надіслати запит у друзі"
+        },
+        "account": {
+            "username_required": "Ім'я користувача є обов'язковим",
+            "account_updated": "Акаунт успішно оновлено!",
+            "account_update_failed": "Не вдалося оновити акаунт: {error}",
+            "account_added": "Акаунт успішно додано!",
+            "account_add_failed": "Не вдалося додати акаунт: {error}",
+            "account_deleted": "Акаунт успішно видалено!",
+            "account_delete_failed": "Не вдалося видалити акаунт: {error}",
+            "nickname_update_failed": "Не вдалося оновити нікнейм. Будь ласка, спробуйте ще раз."
+        },
+        "modal": {
+            "settings_reset_success": "Налаштування успішно скинуто!",
+            "settings_reset_failed": "Не вдалося скинути налаштування: {error}"
+        },
+        "sync": {
+            "offline_error": "Неможливо синхронізувати в офлайн-режимі",
+            "already_in_progress": "Синхронізація вже виконується",
+            "syncing": "Синхронізація з хмарою...",
+            "success": "Синхронізацію успішно завершено!",
+            "failed": "Синхронізація не вдалася: {error}",
+            "login_required": "Будь ласка, увійдіть, щоб синхронізувати"
+        }
     },
-    "telemetry_info_title": "Інформація про телеметрію",
-    "reset_requirements": "Скинути файли лоадера",
-    "reset_requirements_success": "Успішно видалено файли, тепер завантажте будь-який клієнт",
-    "reset_requirements_failed": "Не вдалося видалити файли, спробуйте ще раз або перезапустіть лоадер",
-    "login_required": "Вам потрібно увійти до свого акаунту, щоб використовувати цю функцію.",
-    "reset_cache_failed": "Не вдалося видалити кеш, спробуйте ще раз",
-    "hash_verify": "Перевірка хешу",
-    "irc_chat": "IRC-чат",
-    "save_flags_failed": "Не вдалося зберегти прапорці: {error}",
-    "change_root": {
-      "title": "Змінити папку даних",
-      "action": "Змінити папку даних",
-      "target_folder": "Цільова папка",
-      "hint": "Оберіть папку, де зберігатимуться файли CollapseLoader (клієнти, кеш тощо)",
-      "mode": "Що робити зі старою папкою?",
-      "mode_move": "Перемістити",
-      "mode_wipe": "Видалити",
-      "mode_move_desc": "Перемістити всі дані зі старої папки до нової (рекомендовано)",
-      "mode_wipe_desc": "Видалити стару папку (всі дані буде видалено)",
-      "select_folder_first": "Спочатку оберіть папку",
-      "success": "Папку даних змінено",
-      "failed": "Не вдалося змінити папку даних: {error}",
-      "restart_required": "Будь ласка, перезапустіть застосунок, щоб зміни набули чинності"
+    "discord": {
+        "details": {
+            "in_menu": "У меню",
+            "in_game": "У грі"
+        },
+        "states": {
+            "browsing_clients": "Переглядає клієнти",
+            "configuring_settings": "Налаштовує параметри",
+            "enjoying_visuals": "Насолоджується візуалом",
+            "watching_client_behavior": "Спостерігає за поведінкою клієнта",
+            "in_profile": "У профілі",
+            "watching_about": "Дивиться інформацію про нас",
+            "debugging": "Налагодження",
+            "logging_in": "Входить у систему",
+            "browsing_friends": "Дивиться, що роблять друзі",
+            "browsing_news": "Читає новини",
+            "browsing_custom_clients": "Переглядає власні клієнти"
+        }
     },
-    "sync_client_settings": "Синхронізувати налаштування клієнта",
-    "ram": {
-      "warning": "Попередження: Ви вибрали {selectedRamMb} МБ оперативної пам'яті. Це перевищує рекомендований ліміт у 6 ГБ і може спричинити проблеми з продуктивністю або збій системи."
+    "modal": {
+        "client_crash": {
+            "title": "Звіт про збій для {name}"
+        }
     },
-    "reset_settings": "Скинути налаштування",
-    "accounts_description": "Керуйте своїми ігровими обліковими записами та легко переключайтеся між ними",
-    "accounts_management": "Управління обліковими записами",
-    "no_matching_accounts": "Не знайдено відповідних облікових записів",
-    "search_accounts": "Пошук облікових записів...",
-    "try_different_search": "Спробуйте змінити параметри пошуку або фільтри",
-    "local_account_sync": "Синхронізація локальних акаунтів",
-    "local_account_sync_description": "Тримайте ваші локальні акаунти CollapseLoader синхронізованими з Atlas, щоб відновлювати їх на інших пристроях.",
-    "sync_accounts_from_cloud_button": "Імпортувати акаунти Atlas",
-    "sync_accounts_to_cloud_button": "Завантажити локальні акаунти",
-    "remote_accounts_loading": "Перевірка акаунтів на Atlas...",
-    "remote_accounts_present": "{count} акаунтів синхронізовано з Atlas.",
-    "remote_accounts_more": "та ще {count}",
-    "remote_accounts_empty": "Поки що немає акаунтів, синхронізованих з Atlas.",
-    "sync_login_required": "Увійдіть, щоб увімкнути синхронізацію",
-    "not_signed_in": "Ви не увійшли в обліковий запис"
-  },
-  "userProfile": {
-    "back_to_friends": "Назад до друзів",
-    "profile_information": "Інформація про профіль",
-    "username": "Ім'я користувача",
-    "nickname": "Нікнейм",
-    "member_since": "Учасник з",
-    "actions": "Дії",
-    "online": "Онлайн",
-    "offline": "Офлайн",
-    "playing": "Грає в",
-    "last_seen": "Востаннє в мережі",
-    "just_now": "щойно",
-    "minutes_ago": "{count}хв тому",
-    "hours_ago": "{count}год тому",
-    "days_ago": "{count}д тому",
-    "friends_with": "Ви друзі з {name}",
-    "remove_friend": "Видалити з друзів",
-    "friend_request_sent": "Запит у друзі надіслано до {name}",
-    "friend_request_received": "{name} надіслав вам запит у друзі",
-    "accept": "Прийняти",
-    "decline": "Відхилити",
-    "user_blocked": "Цей користувач заблокований",
-    "send_friend_request": "Надіслати запит у друзі",
-    "sending": "Надсилання...",
-    "canceling": "Скасування...",
-    "cancel_friend_request": "Скасувати запит",
-    "block_user": "Заблокувати користувача",
-    "unblock_user": "Розблокувати користувача",
-    "no_user_id": "Не надано ID користувача",
-    "user_not_found": "Користувача не знайдено",
-    "login_required": "Вам потрібно увійти, щоб переглядати профілі",
-    "profile_load_failed": "Не вдалося завантажити профіль користувача",
-    "friend_request_sent_success": "Запит у друзі надіслано до {name}",
-    "friend_request_failed": "Не вдалося надіслати запит у друзі",
-    "copy_username": "Копіювати ім'я користувача",
-    "copied_username": "{name} скопійовано до буфера обміну",
-    "copy_failed": "Не вдалося скопіювати ім'я користувача",
-    "friend_request_canceled": "Запит у друзі успішно скасовано",
-    "friend_request_cancel_failed": "Не вдалося скасувати запит у друзі",
-    "friend_removed_success": "{name} видалено з друзів",
-    "friend_remove_failed": "Не вдалося видалити з друзів",
-    "friend_request_responded": "На запит у друзі надано відповідь: {action}",
-    "friend_request_respond_failed": "Не вдалося {action} запит у друзі",
-    "friend_request_not_found": "Запит у друзі не знайдено",
-    "user_blocked_success": "{name} заблоковано",
-    "user_block_failed": "Не вдалося заблокувати користувача",
-    "presets_title": "Пресети",
-    "presets": "пресетів",
-    "no_presets": "Цей користувач ще не поділився жодними пресетами.",
-    "create_preset": "Створити пресет",
-    "presets_hidden_streamer": "Пресети приховані в режимі стрімера."
-  },
-  "sync": {
-    "last_sync": "Остання синхронізація",
-    "minutes_ago": "{count}хв тому",
-    "hours_ago": "{count}год тому",
-    "days_ago": "{count}д тому"
-  },
-  "navigation": {
-    "home": "Головна",
-    "friends": "Друзі",
-    "settings": "Налаштування",
-    "logs": "Логи застосунку",
-    "account": "Акаунт",
-    "about": "Про програму",
-    "news": "Новини",
-    "customization": "Кастомізація",
-    "custom_clients": "Власні клієнти",
-    "sidebar_help": {
-      "title": "Порада:",
-      "tip": "Ви можете перемістити бічну панель на будь-який бік екрану. Подвійне клацання по бічній панелі прибирає відступи між іконками.",
-      "got_it": "Зрозумів"
-    }
-  },
-  "toast": {
-    "dev": {
-      "menu_opened": "Меню розробника відкрито",
-      "flags_reset": "Прапорці скинуто!"
+    "news": {
+        "loading": "Завантаження новин...",
+        "error_title": "Помилка завантаження новин",
+        "retry": "Спробувати знову",
+        "no_news": "Новин немає",
+        "no_news_description": "Наразі немає новин для відображення.",
+        "updated_at": "Оновлено",
+        "not_found": "Новини не знайдено",
+        "server_error": "Сталася помилка сервера",
+        "network_error": "Помилка мережевого з'єднання",
+        "fetch_failed": "Не вдалося завантажити новини: {error}",
+        "fetch_failed_toast": "Не вдалося завантажити новини",
+        "new": "Нове",
+        "time": {},
+        "search_placeholder": "Пошук новин...",
+        "mark_all_read": "Позначити все як прочитане",
+        "refresh": "Оновити"
     },
-    "theme": {
-      "emergency_reset_done": "Власний CSS скинуто. {action}",
-      "emergency_reset_toggle_instruction": "Щоб знову увімкнути власний CSS, відкрийте налаштування теми та вимкніть, а потім увімкніть 'Увімкнути власний CSS'."
+    "hold_button": {
+        "label": "Затисніть, щоб почати!",
+        "info_message": "Ти серйозно?"
     },
     "client": {
-      "crashed": "Клієнт {name} зазнав збою. {error}",
-      "crashed_incomplete": "Клієнт {name} зазнав збою через неповне завантаження. Спроба автоматичного перевстановлення.",
-      "reinstall_success": "Успішно перевстановлено {name}. Спробуйте запустити знову.",
-      "reinstall_failed": "Не вдалося перевстановити {name}: {error}. Будь ласка, перевстановіть вручну.",
-      "redownload_success": "Успішно повторно завантажено {name}. Хеш перевірено."
-    },
-    "server": {
-      "offline": "Не вдалося визначити статус сервера. Припускається, що він офлайн.",
-      "offline_base": "Ви зараз офлайн. ",
-      "cdn_and_api_offline": "Неможливо підключитися до CDN та API.",
-      "cdn_offline": "Неможливо підключитися до CDN.",
-      "api_offline": "Неможливо підключитися до API.",
-      "api_init_failed": "Не вдалося ініціалізувати API: {error}"
-    },
-    "settings": {
-      "flags_load_failed": "Не вдалося завантажити прапорці: {error}",
-      "first_run_save_failed": "Не вдалося зберегти статус першого запуску: {error}",
-      "disclaimer_save_failed": "Не вдалося зберегти статус відмови від відповідальності: {error}",
-      "theme_save_failed": "Не вдалося зберегти тему: {error}"
-    },
-    "telemetry": {
-      "analytics_enabled": "Аналітику увімкнено. Дякуємо за допомогу в покращенні!",
-      "analytics_disabled": "Аналітику вимкнено.",
-      "analytics_enable_failed": "Не вдалося увімкнути аналітику: {error}",
-      "analytics_disable_failed": "Не вдалося вимкнути аналітику: {error}"
-    },
-    "auth": {
-      "registration_success": "Реєстрація успішна! Будь ласка, увійдіть."
-    },
-    "logs": {
-      "fetch_failed": "Помилка отримання логів застосунку: {error}",
-      "copied_success": "Логи застосунку скопійовано до буфера обміну!",
-      "copy_failed": "Не вдалося скопіювати логи застосунку: {error}",
-      "client_logs_copied": "Логи скопійовано до буфера обміну!",
-      "client_logs_copy_failed": "Не вдалося скопіювати логи до буфера обміну.",
-      "download_success": "Логи успішно збережено!",
-      "download_failed": "Не вдалося зберегти логи: {error}"
-    },
-    "users": {
-      "blocked_load_failed": "Не вдалося завантажити заблокованих користувачів",
-      "unblocked_success": "{name} розблоковано",
-      "unblock_failed": "Не вдалося розблокувати користувача"
+        "details": {
+            "loading": "Завантаження деталей...",
+            "info_tab": "Інформація",
+            "screenshots_tab": "Знімки екрана",
+            "rating": "Рейтинг",
+            "no_rating": "Ще немає оцінок",
+            "login_to_rate": "Увійдіть, щоб оцінити",
+            "source_link": "Посилання на джерело",
+            "created": "Створено",
+            "changelog": "Список змін",
+            "no_changelog": "Список змін відсутній",
+            "no_screenshots": "Знімки екрана відсутні",
+            "screenshot_viewer": {
+                "zoom_percent": "{percent}%",
+                "image_counter": "{current} / {total}",
+                "controls": {
+                    "esc_close": "ESC - Закрити",
+                    "esc_reset": "ESC - Скинути масштаб",
+                    "navigate": "← → - Навігація",
+                    "click_zoom": "Клік - Масштаб | Прокрутка - Масштаб",
+                    "drag_pan": "Перетягування - Панорамування | +/- - Масштаб | 0 - Скинути"
+                }
+            },
+            "no_changelog_desc": "Оновлення та зміни з'являться тут.",
+            "comments_tab": "Коментарі",
+            "your_rating": "Ваш рейтинг"
+        },
+        "comments": {
+            "delete": "Видалити",
+            "empty": "Ще немає коментарів. Будьте першим!",
+            "placeholder": "Напишіть коментар..."
+        }
     },
-    "friends": {
-      "search_failed": "Не вдалося знайти користувачів",
-      "request_sent": "Запит у друзі надіслано до {name}",
-      "request_send_failed": "Не вдалося надіслати запит у друзі"
+    "customization": {
+        "background_title": "Фон",
+        "background_image": "URL зображення",
+        "background_image_placeholder": "https://example.com/image.jpg",
+        "background_image_help": "Підтримує jpg, png, webp, data-urls",
+        "background_blur": "Розмиття",
+        "background_opacity": "Прозорість"
     },
-    "account": {
-      "username_required": "Ім'я користувача є обов'язковим",
-      "account_updated": "Акаунт успішно оновлено!",
-      "account_update_failed": "Не вдалося оновити акаунт: {error}",
-      "account_added": "Акаунт успішно додано!",
-      "account_add_failed": "Не вдалося додати акаунт: {error}",
-      "account_deleted": "Акаунт успішно видалено!",
-      "account_delete_failed": "Не вдалося видалити акаунт: {error}",
-      "nickname_update_failed": "Не вдалося оновити нікнейм. Будь ласка, спробуйте ще раз."
+    "updater": {
+        "update_available": "Доступне оновлення",
+        "current": "Поточна",
+        "latest": "Остання",
+        "changelog": "Список змін",
+        "download_install": "Завантажити та встановити",
+        "downloading": "Завантаження...",
+        "skip": "Пропустити",
+        "starting_download": "Початок завантаження оновлення...",
+        "update_installed": "Оновлення успішно встановлено! Застосунок буде перезапущено.",
+        "update_failed": "Оновлення не вдалося: {error}",
+        "check_for_updates": "Перевірити оновлення",
+        "checking_updates": "Перевірка оновлень...",
+        "up_to_date": "У вас встановлена остання версія!",
+        "show_more": "Показати ще {count} версій",
+        "show_less": "Показати менше",
+        "release_types": {},
+        "categories": {
+            "feature": "Функціонал",
+            "improvement": "Поліпшення"
+        },
+        "no_update": "Оновлень не знайдено"
     },
-    "modal": {
-      "settings_reset_success": "Налаштування успішно скинуто!",
-      "settings_reset_failed": "Не вдалося скинути налаштування: {error}"
+    "custom_clients": {
+        "add": "Додати власний клієнт",
+        "running": "Запущено",
+        "edit": "Редагувати",
+        "delete": "Видалити",
+        "added": "Додано",
+        "stop": "Зупинити",
+        "launch": "Запустити",
+        "display_settings": "Налаштування відображення",
+        "display_mode": "Режим відображення",
+        "display_mode_separate": "Окремо",
+        "display_mode_global": "Глобально",
+        "no_results": "Спробуйте змінити свій пошуковий запит.",
+        "no_clients_yet": "Додайте свій перший власний клієнт, щоб почати."
     },
-    "sync": {
-      "offline_error": "Неможливо синхронізувати в офлайн-режимі",
-      "already_in_progress": "Синхронізація вже виконується",
-      "syncing": "Синхронізація з хмарою...",
-      "success": "Синхронізацію успішно завершено!",
-      "failed": "Синхронізація не вдалася: {error}",
-      "login_required": "Будь ласка, увійдіть, щоб синхронізувати"
-    }
-  },
-  "discord": {
-    "details": {
-      "in_menu": "У меню",
-      "in_game": "У грі"
+    "marketplace": {
+        "title": "Маркетплейс",
+        "open_marketplace": "Маркетплейс",
+        "search_placeholder": "Пошук пресетів...",
+        "share_local": "Поділитися своїм пресетом",
+        "share_current": "Поділитися поточним пресетом",
+        "share_modal_title": "Поділитися пресетом",
+        "title_label": "Назва",
+        "title_placeholder": "Мій пресет",
+        "description_label": "Опис",
+        "description_placeholder": "Опишіть ваш пресет",
+        "public_label": "Публічний",
+        "private_label": "Приватний",
+        "make_private": "Зробити приватним",
+        "make_public": "Зробити публічним",
+        "sort_newest": "Нові",
+        "sort_popular": "Популярні",
+        "sort_downloads": "Багато завантажень",
+        "sort_comments": "Багато коментарів",
+        "edit_modal_title": "Редагувати пресет",
+        "delete_confirm": "Ви впевнені, що хочете видалити цей пресет? Цю дію не можна скасувати.",
+        "share": "Поділитися",
+        "sharing": "Публікація...",
+        "shared_success": "Пресет опубліковано!",
+        "shared_failed": "Не вдалося опублікувати пресет",
+        "updated_success": "Пресет оновлено",
+        "updated_failed": "Не вдалося оновити пресет",
+        "deleted_success": "Пресет видалено",
+        "deleted_failed": "Не вдалося видалити пресет",
+        "apply": "Застосувати",
+        "like": "Вподобати",
+        "by_user": "від {name}",
+        "by_author": "ВІД {name}",
+        "no_items": "Пресетів ще немає",
+        "preset_details_title": "Деталі пресету",
+        "preset_details": "Деталі пресету",
+        "comments": "Коментарі",
+        "no_comments": "Коментарів ще немає",
+        "add_comment": "Додати коментар",
+        "comment_placeholder": "Напишіть коментар...",
+        "preset_picker_label": "Оберіть локальний пресет",
+        "preset_picker_placeholder": "Оберіть пресет...",
+        "no_local_presets": "У вас ще немає жодних пресетів"
     },
-    "states": {
-      "browsing_clients": "Переглядає клієнти",
-      "configuring_settings": "Налаштовує параметри",
-      "enjoying_visuals": "Насолоджується візуалом",
-      "watching_client_behavior": "Спостерігає за поведінкою клієнта",
-      "in_profile": "У профілі",
-      "watching_about": "Дивиться інформацію про нас",
-      "debugging": "Налагодження",
-      "logging_in": "Входить у систему",
-      "browsing_friends": "Дивиться, що роблять друзі",
-      "browsing_news": "Читає новини",
-      "browsing_custom_clients": "Переглядає власні клієнти"
-    }
-  },
-  "modal": {
-    "client_crash": {
-      "title": "Звіт про збій для {name}"
-    }
-  },
-  "news": {
-    "loading": "Завантаження новин...",
-    "error_title": "Помилка завантаження новин",
-    "retry": "Спробувати знову",
-    "no_news": "Новин немає",
-    "no_news_description": "Наразі немає новин для відображення.",
-    "updated_at": "Оновлено",
-    "not_found": "Новини не знайдено",
-    "server_error": "Сталася помилка сервера",
-    "network_error": "Помилка мережевого з'єднання",
-    "fetch_failed": "Не вдалося завантажити новини: {error}",
-    "fetch_failed_toast": "Не вдалося завантажити новини",
-    "new": "Нове",
-    "time": {},
-    "search_placeholder": "Пошук новин...",
-    "mark_all_read": "Позначити все як прочитане",
-    "refresh": "Оновити"
-  },
-  "hold_button": {
-    "label": "Затисніть, щоб почати!",
-    "info_message": "Ти серйозно?"
-  },
-  "client": {
-    "details": {
-      "loading": "Завантаження деталей...",
-      "info_tab": "Інформація",
-      "screenshots_tab": "Знімки екрана",
-      "rating": "Рейтинг",
-      "no_rating": "Ще немає оцінок",
-      "login_to_rate": "Увійдіть, щоб оцінити",
-      "source_link": "Посилання на джерело",
-      "created": "Створено",
-      "changelog": "Список змін",
-      "no_changelog": "Список змін відсутній",
-      "no_screenshots": "Знімки екрана відсутні",
-      "screenshot_viewer": {
-        "zoom_percent": "{percent}%",
-        "image_counter": "{current} / {total}",
-        "controls": {
-          "esc_close": "ESC - Закрити",
-          "esc_reset": "ESC - Скинути масштаб",
-          "navigate": "← → - Навігація",
-          "click_zoom": "Клік - Масштаб | Прокрутка - Масштаб",
-          "drag_pan": "Перетягування - Панорамування | +/- - Масштаб | 0 - Скинути"
+    "events": {
+        "halloween": {
+            "greeting": "Щасливого Хеллоуїна!",
+            "message": "Моторошний сезон розпочався! 🎃",
+            "tooltip": "Гарного Хелловіна! (25 жовт - 5 лист)"
         }
-      },
-      "no_changelog_desc": "Оновлення та зміни з'являться тут.",
-      "comments_tab": "Коментарі"
     },
-    "comments": {
-      "delete": "Видалити",
-      "empty": "Ще немає коментарів. Будьте першим!",
-      "placeholder": "Напишіть коментар..."
-    }
-  },
-  "customization": {},
-  "updater": {
-    "update_available": "Доступне оновлення",
-    "current": "Поточна",
-    "latest": "Остання",
-    "changelog": "Список змін",
-    "download_install": "Завантажити та встановити",
-    "downloading": "Завантаження...",
-    "skip": "Пропустити",
-    "starting_download": "Початок завантаження оновлення...",
-    "update_installed": "Оновлення успішно встановлено! Застосунок буде перезапущено.",
-    "update_failed": "Оновлення не вдалося: {error}",
-    "check_for_updates": "Перевірити оновлення",
-    "checking_updates": "Перевірка оновлень...",
-    "up_to_date": "У вас встановлена остання версія!",
-    "show_more": "Показати ще {count} версій",
-    "show_less": "Показати менше",
-    "release_types": {},
-    "categories": {
-      "feature": "Функціонал",
-      "improvement": "Поліпшення"
+    "login": "Вам потрібно увійти у свій обліковий запис.",
+    "notifications": {
+        "friend_request_received": {
+            "title": "Запит у друзі",
+            "message": "{name} надіслав вам запит у друзі!"
+        },
+        "friend_request_accepted": {
+            "title": "Запит прийнято",
+            "message": "{name} прийняв ваш запит у друзі!"
+        }
     },
-    "no_update": "Оновлень не знайдено"
-  },
-  "custom_clients": {
-    "add": "Додати власний клієнт",
-    "running": "Запущено",
-    "edit": "Редагувати",
-    "delete": "Видалити",
-    "added": "Додано",
-    "stop": "Зупинити",
-    "launch": "Запустити",
-    "display_settings": "Налаштування відображення",
-    "display_mode": "Режим відображення",
-    "display_mode_separate": "Окремо",
-    "display_mode_global": "Глобально",
-    "no_results": "Спробуйте змінити свій пошуковий запит.",
-    "no_clients_yet": "Додайте свій перший власний клієнт, щоб почати."
-  },
-  "marketplace": {
-    "title": "Маркетплейс",
-    "open_marketplace": "Маркетплейс",
-    "search_placeholder": "Пошук пресетів...",
-    "share_local": "Поділитися своїм пресетом",
-    "share_current": "Поділитися поточним пресетом",
-    "share_modal_title": "Поділитися пресетом",
-    "title_label": "Назва",
-    "title_placeholder": "Мій пресет",
-    "description_label": "Опис",
-    "description_placeholder": "Опишіть ваш пресет",
-    "public_label": "Публічний",
-    "private_label": "Приватний",
-    "make_private": "Зробити приватним",
-    "make_public": "Зробити публічним",
-    "edit_modal_title": "Редагувати пресет",
-    "delete_confirm": "Ви впевнені, що хочете видалити цей пресет? Цю дію не можна скасувати.",
-    "share": "Поділитися",
-    "sharing": "Публікація...",
-    "shared_success": "Пресет опубліковано!",
-    "shared_failed": "Не вдалося опублікувати пресет",
-    "updated_success": "Пресет оновлено",
-    "updated_failed": "Не вдалося оновити пресет",
-    "deleted_success": "Пресет видалено",
-    "deleted_failed": "Не вдалося видалити пресет",
-    "apply": "Застосувати",
-    "like": "Вподобати",
-    "by_user": "від {name}",
-    "no_items": "Пресетів ще немає",
-    "preset_details_title": "Деталі пресету",
-    "preset_details": "Деталі пресету",
-    "comments": "Коментарі",
-    "no_comments": "Коментарів ще немає",
-    "add_comment": "Додати коментар",
-    "comment_placeholder": "Напишіть коментар...",
-    "preset_picker_label": "Оберіть локальний пресет",
-    "preset_picker_placeholder": "Оберіть пресет...",
-    "no_local_presets": "У вас ще немає жодних пресетів"
-  },
-  "events": {
-    "halloween": {
-      "greeting": "Щасливого Хеллоуїна!",
-      "message": "Моторошний сезон розпочався! 🎃",
-      "tooltip": "Гарного Хелловіна! (25 жовт - 5 лист)"
+    "achievements": {
+        "title": "Досягнення",
+        "unlocked_title": "Досягнення розблоковано: {name}",
+        "locked": "Заблоковано",
+        "unlocked_at": "Розблоковано {date}",
+        "owned_percentage": "є у {percent}% гравців",
+        "login_to_unlock": "Вам потрібно увійти в систему, щоб відкрити це досягнення.",
+        "secret_title": "Приховане досягнення",
+        "secret_description": "Продовжуйте грати, щоб відкрити цей секрет!",
+        "list": {
+            "PLAYED_1Hour": {
+                "name": "Початок шляху",
+                "description": "Грайте протягом 1 години."
+            },
+            "PLAYED_10Hours": {
+                "name": "Відданий гравець",
+                "description": "Грайте протягом 10 годин."
+            },
+            "FIRST_GAME": {
+                "name": "Перші кроки",
+                "description": "Запустіть свій перший клієнт."
+            },
+            "SECRET_FINDER": {
+                "name": "Шукач секретів",
+                "description": "Ви знайшли секрет!"
+            },
+            "SOCIAL_BUTTERFLY": {
+                "name": "Соціальний метелик",
+                "description": "Додайте соціальне посилання у свій профіль."
+            },
+            "FREQUENT_FLYER": {
+                "name": "Частий гість",
+                "description": "Запустіть клієнти 50 разів."
+            },
+            "PRESET_MAX": {
+                "name": "Модник",
+                "description": "Створіть та поділіться пресетом кастомізації."
+            },
+            "BETA_TESTER": {
+                "name": "Бета-тестер",
+                "description": "Приєднайтеся до програми тестування."
+            },
+            "COLLECTOR": {
+                "name": "Колекціонер",
+                "description": "Додайте в обране 5 різних клієнтів."
+            },
+            "NIGHT_OWL": {
+                "name": "Опівнічник",
+                "description": "Грайте з 2 до 5 години ранку."
+            },
+            "EARLY_BIRD": {
+                "name": "Рання пташка",
+                "description": "Грайте з 5 до 8 години ранку."
+            },
+            "WEEKEND_WARRIOR": {
+                "name": "Після заводу",
+                "description": "Грайте у вихідні."
+            }
+        }
     }
-  },
-  "login": "Вам потрібно увійти у свій обліковий запис."
 }
diff --git a/src/i18n/locales/zh_cn.json b/src/i18n/locales/zh_cn.json
index 2f77037e..5aa2a6d3 100644
--- a/src/i18n/locales/zh_cn.json
+++ b/src/i18n/locales/zh_cn.json
@@ -1,1073 +1,1203 @@
 {
-  "modals": {
-    "initial_setup": {
-      "welcome": {
-        "title": "欢迎使用 CollapseLoader",
-        "description": "我们将引导您完成快速设置，以优化性能与隐私。",
-        "subtitle": "快速设置，立即开始",
-        "features": {
-          "fast_startup": "快速启动 — 减少等待时间",
-          "secure_clients": "可靠的客户——经过验证并且完全安全。",
-          "auto_updates": "自动更新 — 保持加载器和客户端为最新"
-        }
-      },
-      "gui": {},
-      "ram": {
-        "title": "内存设置",
-        "subtitle": "选择分配给客户端的内存量以获得最佳性能",
-        "description": "配置分配的内存大小以获得最佳性能",
-        "warning": "警告：您选择了 {selectedRamMb} MB 内存。这超过了 6 GB 的推荐限制，可能会导致性能问题或系统故障。"
-      },
-      "registration": {
-        "registering": "正在注册..."
-      },
-      "feedback": {
-        "title": "反馈",
-        "subtitle": "与社区联系以获得支持和反馈",
-        "description": "加入我们的社区",
-        "optional": "非必需，但我们建议订阅"
-      },
-      "telemetry": {
-        "title": "可选分析",
-        "subtitle": "分享匿名使用数据，帮助我们改进（可选）",
-        "description": "通过分享匿名使用数据帮助我们改进 CollapseLoader。您可随时在设置菜单中更改此设置。",
-        "data_collected_title": "我们收集：",
-        "data_collected": {
-          "performance": "性能信息（启动时间、内存占用）",
-          "usage_patterns": "使用信息（最常用客户端、启动频率）",
-          "crash_reports": "崩溃日志"
-        }
-      },
-      "appreciation": {
-        "title": "感谢选择 CollapseLoader",
-        "subtitle": "您已准备就绪 — 开始使用吧",
-        "description": "希望您喜欢我们的加载器！"
-      },
-      "disclaimer": {
-        "title": "免责声明",
-        "responsibility": "CollapseLoader 的开发者以及任何已列出客户端的创作者不对您使用本软件或其提供访问的客户端所产生的任何后果承担责任。",
-        "acknowledgment": "使用本应用即表示您自行承担一切风险",
-        "accept": "我已知悉并接受"
-      },
-      "language_changed": "语言切换成功！",
-      "language_change_failed": "语言切换失败。请重试。",
-      "language_here": "您可以在这里更改语言"
-    },
-    "block_unblock_confirm": {
-      "block_message": "确定要屏蔽 {displayName} 吗？这将把其从您的好友列表中移除，并阻止后续联系。",
-      "unblock_message": "确定要取消屏蔽 {displayName} 吗？TA 将可以再次向您发送好友请求。",
-      "yes_unblock": "是，取消屏蔽",
-      "yes_block": "是，屏蔽"
-    },
-    "reset_confirm": {
-      "message": "确定要将所有设置重置为默认值吗？此操作不可撤销。",
-      "yes_reset": "是，重置"
-    },
-    "remove_friend_confirm": {
-      "message": "确定要将 {displayName} 从您的好友中移除吗？此操作不可撤销。",
-      "yes_remove": "是，移除"
-    },
-    "cancel_friend_request_confirm": {
-      "message": "确定要取消向 {displayName} 发送的好友请求吗？",
-      "yes_cancel": "是，取消请求",
-      "keep_request": "保留请求"
-    },
-    "register_prompt": {
-      "title": "创建账户",
-      "description": "注册账户以解锁全部功能，并在多设备间同步您的设置。",
-      "benefits": {
-        "sync": "保存并同步您的设置（包括主题、收藏等）",
-        "notifications": "接收关于更新的通知"
-      },
-      "register_now": "立即注册",
-      "maybe_later": "稍后再说"
+    "reports": {
+        "title": "举报 {name}",
+        "description": "如果有人违反规则或发布恶意/有害内容，请向我们举报。",
+        "reason_label": "举报原因",
+        "select_reason": "选择原因",
+        "reasons": {
+            "HARASSMENT": "骚扰",
+            "SPAM": "垃圾信息",
+            "INAPPROPRIATE_CONTENT": "不当内容",
+            "OTHER": "其他"
+        },
+        "details_label": "详细说明（选填）",
+        "details_placeholder": "提供更多关于此情况的说明…",
+        "submit": "提交举报",
+        "report_user": "举报用户",
+        "success_message": "举报提交成功。感谢您！",
+        "error_message": "提交举报失败，请稍后再试。"
     },
-    "edit_nickname": {
-      "label": "昵称",
-      "placeholder": "输入您的昵称",
-      "description": "可选—这是他人看到的名称",
-      "update": "更新昵称"
-    },
-    "social_links": {
-      "title": "社交链接",
-      "add_title": "添加社交链接",
-      "edit_title": "编辑社交链接",
-      "fill_fields": "请选择平台并输入有效的 URL。",
-      "added": "已添加社交链接。",
-      "add_failed": "添加社交链接失败。",
-      "load_failed": "加载社交链接失败。",
-      "deleted": "已删除社交链接。",
-      "delete_failed": "删除社交链接失败。",
-      "updated": "已更新社交链接。",
-      "update_failed": "更新社交链接失败。",
-      "hidden_in_streamer_mode": "主播模式下已隐藏社交链接。"
+    "modals": {
+        "initial_setup": {
+            "welcome": {
+                "title": "欢迎使用 CollapseLoader",
+                "description": "我们将引导您完成快速设置，以优化性能与隐私。",
+                "subtitle": "快速设置，立即开始",
+                "features": {
+                    "fast_startup": "快速启动 — 减少等待时间",
+                    "secure_clients": "可靠的客户——经过验证并且完全安全。",
+                    "auto_updates": "自动更新 — 保持加载器和客户端为最新"
+                }
+            },
+            "gui": {},
+            "ram": {
+                "title": "内存设置",
+                "subtitle": "选择分配给客户端的内存量以获得最佳性能",
+                "description": "配置分配的内存大小以获得最佳性能",
+                "warning": "警告：您选择了 {selectedRamMb} MB 内存。这超过了 6 GB 的推荐限制，可能会导致性能问题或系统故障。"
+            },
+            "registration": {
+                "registering": "正在注册..."
+            },
+            "feedback": {
+                "title": "反馈",
+                "subtitle": "与社区联系以获得支持和反馈",
+                "description": "加入我们的社区",
+                "optional": "非必需，但我们建议订阅"
+            },
+            "telemetry": {
+                "title": "可选分析",
+                "subtitle": "分享匿名使用数据，帮助我们改进（可选）",
+                "description": "通过分享匿名使用数据帮助我们改进 CollapseLoader。您可随时在设置菜单中更改此设置。",
+                "data_collected_title": "我们收集：",
+                "data_collected": {
+                    "performance": "性能信息（启动时间、内存占用）",
+                    "usage_patterns": "使用信息（最常用客户端、启动频率）",
+                    "crash_reports": "崩溃日志"
+                }
+            },
+            "appreciation": {
+                "title": "感谢选择 CollapseLoader",
+                "subtitle": "您已准备就绪 — 开始使用吧",
+                "description": "希望您喜欢我们的加载器！"
+            },
+            "disclaimer": {
+                "title": "免责声明",
+                "responsibility": "CollapseLoader 的开发者以及任何已列出客户端的创作者不对您使用本软件或其提供访问的客户端所产生的任何后果承担责任。",
+                "acknowledgment": "使用本应用即表示您自行承担一切风险",
+                "accept": "我已知悉并接受"
+            },
+            "language_changed": "语言切换成功！",
+            "language_change_failed": "语言切换失败。请重试。",
+            "language_here": "您可以在这里更改语言"
+        },
+        "block_unblock_confirm": {
+            "block_message": "确定要屏蔽 {displayName} 吗？这将把其从您的好友列表中移除，并阻止后续联系。",
+            "unblock_message": "确定要取消屏蔽 {displayName} 吗？TA 将可以再次向您发送好友请求。",
+            "yes_unblock": "是，取消屏蔽",
+            "yes_block": "是，屏蔽"
+        },
+        "reset_confirm": {
+            "message": "确定要将所有设置重置为默认值吗？此操作不可撤销。",
+            "yes_reset": "是，重置"
+        },
+        "remove_friend_confirm": {
+            "message": "确定要将 {displayName} 从您的好友中移除吗？此操作不可撤销。",
+            "yes_remove": "是，移除"
+        },
+        "cancel_friend_request_confirm": {
+            "message": "确定要取消向 {displayName} 发送的好友请求吗？",
+            "yes_cancel": "是，取消请求",
+            "keep_request": "保留请求"
+        },
+        "register_prompt": {
+            "title": "创建账户",
+            "description": "注册账户以解锁全部功能，并在多设备间同步您的设置。",
+            "benefits": {
+                "sync": "保存并同步您的设置（包括主题、收藏等）",
+                "notifications": "接收关于更新的通知"
+            },
+            "register_now": "立即注册",
+            "maybe_later": "稍后再说"
+        },
+        "edit_nickname": {
+            "label": "昵称",
+            "placeholder": "输入您的昵称",
+            "description": "可选—这是他人看到的名称",
+            "update": "更新昵称"
+        },
+        "social_links": {
+            "title": "社交链接",
+            "add_title": "添加社交链接",
+            "edit_title": "编辑社交链接",
+            "fill_fields": "请选择平台并输入有效的 URL。",
+            "added": "已添加社交链接。",
+            "add_failed": "添加社交链接失败。",
+            "load_failed": "加载社交链接失败。",
+            "deleted": "已删除社交链接。",
+            "delete_failed": "删除社交链接失败。",
+            "updated": "已更新社交链接。",
+            "update_failed": "更新社交链接失败。",
+            "hidden_in_streamer_mode": "主播模式下已隐藏社交链接。"
+        },
+        "edit_account": {
+            "username_label": "用户名",
+            "tags_label": "标签（逗号分隔）",
+            "update": "更新账户"
+        },
+        "delete_account_confirm": {
+            "message": "您确定要删除账户吗？此操作不可撤销。",
+            "yes_delete": "是，删除"
+        },
+        "change_password_confirm": {
+            "message": "您确定要更改密码吗？这将立即更新您的账户凭据。",
+            "warning": "如果您无法访问当前密码，可能需要使用账户恢复来重新获得访问权限。",
+            "yes_change": "是的，修改密码"
+        },
+        "logout_confirm": {
+            "message": "您确定要退出您的账户吗？",
+            "info": "这将导致您退出登录，访问某些功能时可能需要重新登录。",
+            "yes_logout": "是的，退出"
+        },
+        "client_crash": {
+            "error_occurred": "发生错误：{error}",
+            "crashed_message": "客户端 {clientName} 已崩溃。更多详情请查看下方日志。",
+            "no_logs": "暂无可用日志。",
+            "copy_logs": "复制日志",
+            "close": "关闭"
+        },
+        "add_friend": {
+            "search_label": "搜索用户",
+            "search_placeholder": "输入用户名...",
+            "add_friend": "添加好友",
+            "already_friends": "已是好友",
+            "request_sent": "已发送请求",
+            "request_received": "已接收请求",
+            "blocked": "已屏蔽",
+            "no_users_found": "未找到用户",
+            "search_hint": "请输入至少 2 个字符进行搜索",
+            "close": "关闭"
+        },
+        "add_account": {
+            "username_label": "用户名",
+            "username_placeholder": "输入用户名",
+            "tags_label": "标签（逗号分隔）",
+            "tags_placeholder": "例如：funtime, spookytime",
+            "add_account": "添加账户"
+        },
+        "telemetry_consent": {
+            "title": "可选分析同意",
+            "description": "为提升您的 CollapseLoader 体验，我们可能会收集额外的分析数据。这些数据帮助我们了解应用的使用方式并持续改进。",
+            "data_collected_title": "我们收集的数据：",
+            "data_collected": {
+                "performance": "性能指标（启动时间、内存占用）",
+                "usage_patterns": "使用模式（最常用客户端、启动频率）",
+                "crash_reports": "崩溃报告和错误，以提升稳定性",
+                "feature_usage": "应用功能使用统计"
+            },
+            "privacy_note_title": "隐私：",
+            "privacy_note": "所有数据均匿名且不包含个人信息。您可以随时在设置中禁用此功能。",
+            "accept": "允许分析",
+            "decline": "拒绝"
+        },
+        "insecure_client_warning": {
+            "modal_title": "安全警告",
+            "title": "未验证客户端警告",
+            "subtitle": "该客户端尚未进行病毒检查",
+            "description": "您即将启动 \"{clientName}\"，其尚未经过恶意软件或病毒验证。该客户端可能包含潜在有害代码，可能损害您的系统或危及您的安全。",
+            "dont_show_again": "对此客户端不再显示该警告",
+            "proceed_anyway": "仍然启动",
+            "cancel": "取消",
+            "close": "我已了解"
+        },
+        "slow_download": {
+            "modal_title": "下载速度慢",
+            "title": "下载速度过慢",
+            "subtitle": "您的下载速度低于预期",
+            "description": "当前下载速度低于正常水平。这可能导致下载时间延长。",
+            "current_speed": "当前速度：",
+            "tip_1": "检查您的网络连接",
+            "tip_2": "尝试关闭其他占用带宽的应用程序",
+            "tip_3": "考虑稍后重新下载",
+            "dont_show_again": "不再显示此警告",
+            "stalled_modal_title": "下载停滞",
+            "stalled_title": "下载卡住",
+            "stalled_subtitle": "未检测到进度",
+            "stalled_description": "您的下载似乎卡住了。已有一段时间未接收到数据。",
+            "no_progress": "未检测到下载进度",
+            "tip_zapret": "如果您位于独联体地区（俄罗斯、白俄罗斯、哈萨克斯坦，乌克兰除外），您的网络提供商可能会屏蔽我们的域名。请尝试在设置中启用“DPI 绕过”并以管理员身份重启加载器。"
+        },
+        "add_custom_client": "添加自定义客户端",
+        "edit_custom_client": "编辑客户端",
+        "delete_custom_client": "删除自定义客户端",
+        "client_added": "已添加客户端",
+        "client_edited": "已编辑客户端",
+        "client_deleted": "已删除客户端",
+        "delete_custom_client_confirm": {},
+        "add_custom_client_modal": {
+            "client_name": "客户端名称",
+            "enter_client_name": "输入客户端名称",
+            "minecraft_version": "Minecraft 版本",
+            "main_class": "主类",
+            "main_class_placeholder": "例如：net.minecraft.client.main.Main",
+            "jar_file": "JAR 文件",
+            "no_file_selected": "未选择文件",
+            "select_jar_file": "选择 .jar 文件",
+            "selected": "已选择",
+            "adding": "正在添加...",
+            "add_client": "添加客户端"
+        },
+        "edit_custom_client_modal": {
+            "client_name": "客户端名称",
+            "enter_client_name": "输入客户端名称",
+            "minecraft_version": "Minecraft 版本",
+            "main_class": "主类",
+            "main_class_placeholder": "例如：net.minecraft.client.main.Main",
+            "updating": "正在更新...",
+            "update_client": "更新客户端"
+        },
+        "delete_custom_client_confirm_modal": {
+            "title": "删除自定义客户端",
+            "description": "此操作不可撤销",
+            "deleting": "正在删除...",
+            "delete_client": "删除客户端"
+        }
     },
-    "edit_account": {
-      "username_label": "用户名",
-      "tags_label": "标签（逗号分隔）",
-      "update": "更新账户"
+    "preloader": {
+        "initializing": "正在初始化...",
+        "connecting_servers": "正在连接服务器...",
+        "ready": "就绪！",
+        "initializing_progress": "初始化加载程序",
+        "loading_user_data": "正在加载用户数据..."
     },
-    "delete_account_confirm": {
-      "message": "您确定要删除账户吗？此操作不可撤销。",
-      "yes_delete": "是，删除"
+    "about": {
+        "title": "关于 CollapseLoader",
+        "version": "版本",
+        "codename": "代号",
+        "commit": "提交",
+        "description": "加入我们的社区以获取更新、支持，并反馈您遇到的问题。",
+        "open_failed": "打开 {platform} 失败",
+        "branch": "分支",
+        "development": "开发模式",
+        "commit_message": "提交消息"
     },
-    "change_password_confirm": {
-      "message": "您确定要更改密码吗？这将立即更新您的账户凭据。",
-      "warning": "如果您无法访问当前密码，可能需要使用账户恢复来重新获得访问权限。",
-      "yes_change": "是的，修改密码"
+    "account": {
+        "no_email": "暂无邮箱",
+        "invisible_mode": "隐身模式",
+        "invisible_mode_description": "启用后，您对其他用户将显示为离线",
+        "streamer_mode": "主播模式",
+        "streamer_mode_description": "启用后，为保护隐私将隐藏所有用户名",
+        "streamer_enabled": "已启用主播模式",
+        "streamer_disabled": "已禁用主播模式",
+        "streamer_failed": "切换主播模式失败",
+        "invisible_failed": "更改可见性设置需要在线状态",
+        "using_cached_data": "离线模式 - 状态更改已禁用",
+        "change_password": "更改密码",
+        "change_password_confirm_title": "确认更改密码",
+        "current_password": "当前密码",
+        "new_password": "新密码",
+        "confirm_password": "确认密码",
+        "password_change_failed": "修改密码失败。请检查您的网络连接后重试。",
+        "password_change_success": "密码修改成功！",
+        "password_too_short": "新密码长度至少为 8 个字符。",
+        "password_mismatch": "两次输入的新密码不一致。",
+        "nickname_update_failed": "更新昵称失败。请在联网时重试。",
+        "nickname_update_success": "昵称更新成功！",
+        "nickname_label": "编辑昵称",
+        "invisible_enabled": "已启用隐身模式",
+        "invisible_disabled": "已禁用隐身模式",
+        "logout_confirm_title": "确认登出",
+        "social_links": "社交链接",
+        "no_social_links": "尚未添加任何社交链接。",
+        "avatar_help": "PNG、JPG、GIF、WEBP，最大 5MB",
+        "avatar_drop": "拖拽或点击上传头像",
+        "upload_avatar": "上传头像",
+        "avatar_upload_refresh_failed": "上传后刷新头像失败：{error}",
+        "avatar_type_error": "不支持的文件类型",
+        "avatar_size_error": "文件过大（最大 5MB）",
+        "avatar_uploaded": "头像已更新",
+        "avatar_upload_failed": "上传头像失败",
+        "reset_avatar": "重置头像",
+        "avatar_reset_success": "头像重置成功",
+        "avatar_reset_failed": "重置头像失败：{error}",
+        "current_favorite": "目前最喜欢的",
+        "favorite_client": "最喜欢的客户",
+        "favorite_client_description": "选择您最喜欢的客户以显示在您的个人资料上",
+        "favorite_client_update_failed": "更新收藏客户端失败",
+        "favorite_client_updated": "收藏客户端更新成功",
+        "no_favorite_client": "没有选择最喜欢的客户",
+        "select_favorite_client": "选择最喜欢的客户"
     },
-    "logout_confirm": {
-      "message": "您确定要退出您的账户吗？",
-      "info": "这将导致您退出登录，访问某些功能时可能需要重新登录。",
-      "yes_logout": "是的，退出"
+    "roles": {
+        "user": "用户",
+        "tester": "测试员",
+        "admin": "管理员",
+        "developer": "开发者",
+        "owner": "所有者"
     },
-    "client_crash": {
-      "error_occurred": "发生错误：{error}",
-      "crashed_message": "客户端 {clientName} 已崩溃。更多详情请查看下方日志。",
-      "no_logs": "暂无可用日志。",
-      "copy_logs": "复制日志",
-      "close": "关闭"
+    "time": {
+        "offline": "离线",
+        "online": "在线"
     },
-    "add_friend": {
-      "search_label": "搜索用户",
-      "search_placeholder": "输入用户名...",
-      "add_friend": "添加好友",
-      "already_friends": "已是好友",
-      "request_sent": "已发送请求",
-      "request_received": "已接收请求",
-      "blocked": "已屏蔽",
-      "no_users_found": "未找到用户",
-      "search_hint": "请输入至少 2 个字符进行搜索",
-      "close": "关闭"
+    "common": {
+        "logout": "登出",
+        "back": "返回",
+        "unblock": "取消屏蔽",
+        "next": "下一步",
+        "previous": "上一步",
+        "delete": "删除",
+        "username": "用户名",
+        "password": "密码",
+        "login": "登录",
+        "register": "注册",
+        "download": "下载",
+        "please_wait": "请稍候",
+        "cancel": "取消",
+        "reinstall": "重新安装",
+        "blocked": "已屏蔽",
+        "loading": "正在加载...",
+        "ok": "确定",
+        "close": "关闭",
+        "save": "保存",
+        "browse": "浏览",
+        "edit": "编辑",
+        "add": "添加",
+        "details": "详情",
+        "send": "发送",
+        "copied_to_clipboard": "颜色 {color} 已复制到剪贴板",
+        "done": "完成",
+        "click": "点击",
+        "show_more": "显示更多",
+        "show_less": "收起",
+        "advanced": "先进的",
+        "send_again": "重新发送邮件",
+        "back_to_login": "返回登录",
+        "verification_sent": "验证邮件已发送！"
     },
-    "add_account": {
-      "username_label": "用户名",
-      "username_placeholder": "输入用户名",
-      "tags_label": "标签（逗号分隔）",
-      "tags_placeholder": "例如：funtime, spookytime",
-      "add_account": "添加账户"
+    "auth": {
+        "logout": {
+            "confirm": "您确定要退出登录吗？",
+            "local_only": "已在本地完成登出。服务器登出时出现问题。",
+            "success": "已成功登出！"
+        },
+        "login": {
+            "title": "登录",
+            "username_placeholder": "输入您的用户名",
+            "password_placeholder": "输入您的密码",
+            "login_button": "登录",
+            "register_link": "还没有账户？",
+            "success": "登录成功！",
+            "login_failed": "登录失败。请检查您的凭据。",
+            "no_token": "未收到身份验证令牌。",
+            "error": "无法登录，请检查您的用户名和密码"
+        },
+        "register": {
+            "title": "注册",
+            "username_placeholder": "选择一个用户名",
+            "email_placeholder": "输入您的邮箱",
+            "password_placeholder": "设置密码",
+            "confirm_password_placeholder": "确认密码",
+            "register_button": "注册",
+            "login_link": "已经有账户？",
+            "registration_failed": "注册失败。请重试。",
+            "auto_login_failed": "注册成功，但自动登录失败。请手动登录。",
+            "verification_required": "需要邮箱验证",
+            "check_email": "验证邮件已发送至 {email}。请检查您的收件箱并按照说明进行验证。"
+        }
     },
-    "telemetry_consent": {
-      "title": "可选分析同意",
-      "description": "为提升您的 CollapseLoader 体验，我们可能会收集额外的分析数据。这些数据帮助我们了解应用的使用方式并持续改进。",
-      "data_collected_title": "我们收集的数据：",
-      "data_collected": {
-        "performance": "性能指标（启动时间、内存占用）",
-        "usage_patterns": "使用模式（最常用客户端、启动频率）",
-        "crash_reports": "崩溃报告和错误，以提升稳定性",
-        "feature_usage": "应用功能使用统计"
-      },
-      "privacy_note_title": "隐私：",
-      "privacy_note": "所有数据均匿名且不包含个人信息。您可以随时在设置中禁用此功能。",
-      "accept": "允许分析",
-      "decline": "拒绝"
+    "appLogs": {
+        "copyLogs": "复制",
+        "autoScroll": "自动滚动",
+        "noLogs": "暂无应用日志。",
+        "searchPlaceholder": "搜索日志...",
+        "download": "下载日志",
+        "filterByLevel": "按级别过滤",
+        "noMatchingLogs": "没有符合过滤条件的日志。"
     },
-    "insecure_client_warning": {
-      "modal_title": "安全警告",
-      "title": "未验证客户端警告",
-      "subtitle": "该客户端尚未进行病毒检查",
-      "description": "您即将启动 \"{clientName}\"，其尚未经过恶意软件或病毒验证。该客户端可能包含潜在有害代码，可能损害您的系统或危及您的安全。",
-      "dont_show_again": "对此客户端不再显示该警告",
-      "proceed_anyway": "仍然启动",
-      "cancel": "取消",
-      "close": "我已了解"
+    "blockedUsers": {
+        "title": "已屏蔽用户（{count}）",
+        "noBlockedUsers": "暂无被屏蔽的用户。被屏蔽的用户会显示在这里。"
     },
-    "slow_download": {
-      "modal_title": "下载速度慢",
-      "title": "下载速度过慢",
-      "subtitle": "您的下载速度低于预期",
-      "description": "当前下载速度低于正常水平。这可能导致下载时间延长。",
-      "current_speed": "当前速度：",
-      "tip_1": "检查您的网络连接",
-      "tip_2": "尝试关闭其他占用带宽的应用程序",
-      "tip_3": "考虑稍后重新下载",
-      "dont_show_again": "不再显示此警告",
-      "stalled_modal_title": "下载停滞",
-      "stalled_title": "下载卡住",
-      "stalled_subtitle": "未检测到进度",
-      "stalled_description": "您的下载似乎卡住了。已有一段时间未接收到数据。",
-      "no_progress": "未检测到下载进度",
-      "tip_zapret": "如果您位于独联体地区（俄罗斯、白俄罗斯、哈萨克斯坦，乌克兰除外），您的网络提供商可能会屏蔽我们的域名。请尝试在设置中启用“DPI 绕过”并以管理员身份重启加载器。"
+    "friends": {
+        "addFriend": "添加好友",
+        "noFriends": "还没有好友。\n添加一些好友开始使用吧！",
+        "receivedRequests": "已接收",
+        "sentRequests": "已发送",
+        "title": "好友（{count}）",
+        "cancel_friend_request": "取消好友请求",
+        "remove_success": "已将 {name} 从好友中移除",
+        "block_success": "已屏蔽 {name}",
+        "unblock_success": "已取消屏蔽 {name}",
+        "request_accepted": "已接受好友请求",
+        "request_rejected": "已拒绝好友请求",
+        "request_canceled": "已取消好友请求",
+        "remove_failed": "移除好友失败",
+        "block_failed": "屏蔽用户失败",
+        "unblock_failed": "取消屏蔽用户失败",
+        "request_failed": "{action} 好友请求失败",
+        "load_failed": "加载好友数据失败"
     },
-    "add_custom_client": "添加自定义客户端",
-    "edit_custom_client": "编辑客户端",
-    "delete_custom_client": "删除自定义客户端",
-    "client_added": "已添加客户端",
-    "client_edited": "已编辑客户端",
-    "client_deleted": "已删除客户端",
-    "delete_custom_client_confirm": {},
-    "add_custom_client_modal": {
-      "client_name": "客户端名称",
-      "enter_client_name": "输入客户端名称",
-      "minecraft_version": "Minecraft 版本",
-      "main_class": "主类",
-      "main_class_placeholder": "例如：net.minecraft.client.main.Main",
-      "jar_file": "JAR 文件",
-      "no_file_selected": "未选择文件",
-      "select_jar_file": "选择 .jar 文件",
-      "selected": "已选择",
-      "adding": "正在添加...",
-      "add_client": "添加客户端"
+    "home": {
+        "search_placeholder": "搜索客户端...",
+        "no_clients": "未找到客户端",
+        "adjust_search": "尝试调整您的搜索条件。",
+        "favorite_added": "已添加到收藏",
+        "favorite_removed": "已从收藏移除",
+        "starting_download": "开始下载 {name}",
+        "no_internet": "无法下载客户端：无网络连接。",
+        "not_installed": "{name} 未安装。请先下载。",
+        "launching": "正在启动 {client}...",
+        "stopping": "正在停止 {name}...",
+        "opened_folder": "已打开 {name} 的文件夹",
+        "reinstalling": "正在重新安装 {name}...",
+        "no_internet_reinstall": "无法重新安装客户端：无网络连接。",
+        "logs_copied": "{name} 的日志已复制到剪贴板",
+        "deleted_success": "{name} 删除成功",
+        "unavailable": "不可用",
+        "download": "下载",
+        "stop": "停止",
+        "launch": "启动",
+        "start_with": "启动方式",
+        "selected_clients": "已选中：{count} 个客户端",
+        "multiple_clients_selected": "已选择 {count} 个客户端",
+        "download_selected": "下载所选",
+        "reinstall_selected": "重装所选",
+        "delete_selected": "删除所选",
+        "downloading_multiple": "正在下载 {count} 个客户端...",
+        "deleting_multiple": "正在删除 {count} 个客户端...",
+        "reinstalling_multiple": "正在重新安装 {count} 个客户端...",
+        "multiple_clients_deleted": "已成功删除 {count} 个客户端",
+        "multiple_clients_reinstalled": "已成功重装 {count} 个客户端",
+        "no_clients_to_download": "没有可供下载的客户端",
+        "no_clients_to_delete": "没有已安装的客户端可删除",
+        "no_clients_to_reinstall": "没有已安装的客户端可重装",
+        "stop_selected": "停止所选客户端",
+        "stopping_multiple": "正在停止 {count} 个客户端",
+        "multiple_clients_stopped": "已成功停止 {count} 个客户端",
+        "filters_title": "筛选",
+        "sort": {
+            "popularity": "人气",
+            "name": "按名称",
+            "newest": "最新",
+            "version": "据称",
+            "order": {
+                "asc": "升序",
+                "desc": "降序"
+            },
+            "rating": "按评级"
+        },
+        "filters": {
+            "installed": "已安装"
+        },
+        "clear_filters": "清除筛选条件",
+        "launch_another": "启动另一个实例"
     },
-    "edit_custom_client_modal": {
-      "client_name": "客户端名称",
-      "enter_client_name": "输入客户端名称",
-      "minecraft_version": "Minecraft 版本",
-      "main_class": "主类",
-      "main_class_placeholder": "例如：net.minecraft.client.main.Main",
-      "updating": "正在更新...",
-      "update_client": "更新客户端"
+    "theme": {
+        "actions": {
+            "add_favorite": "添加到收藏",
+            "remove_favorite": "从收藏移除",
+            "open_folder": "打开文件夹"
+        },
+        "select_theme": "选择主题",
+        "description": "选择您偏好的主题。",
+        "change_success": "主题已更改",
+        "save_failed": "保存主题失败：{error}",
+        "reset_button": "重置",
+        "expert_css_title": "高级 CSS 自定义",
+        "show_expert": "显示高级",
+        "hide_expert": "隐藏高级",
+        "expert_warning": "仅限高级用户。无效的 CSS 可能破坏界面。",
+        "custom_css_label": "自定义 CSS",
+        "enable_custom_css": "启用自定义 CSS",
+        "css_examples_title": "示例",
+        "example_1": "为卡片添加毛玻璃模糊",
+        "example_inserted": "示例已插入",
+        "enable_custom_css_first": "请先启用自定义 CSS",
+        "selected": "已选择",
+        "insert_example": "插入",
+        "available_classes_label": "可编辑的类（点击可插入到代码中）",
+        "tooltip_client_card": "客户端卡片的主类",
+        "tooltip_sidebar_btn": "左侧导航按钮的类",
+        "tooltip_launch_download_btn": "下载与启动按钮的类",
+        "export_css_btn": "导出 CSS",
+        "import_css_btn": "导入 CSS",
+        "export_css_title": "导出自定义 CSS",
+        "import_css_title": "导入自定义 CSS",
+        "export_desc": "复制下方编码后的 CSS 并分享。仅允许安全的 CSS。",
+        "import_desc": "在此粘贴编码后的 CSS 以导入。仅允许安全的 CSS。",
+        "copy": "复制",
+        "copied": "已复制！",
+        "copy_failed": "复制失败",
+        "import": "导入",
+        "import_success": "预设导入成功！",
+        "import_invalid": "预设无效。导入失败。",
+        "primary": "主色",
+        "export_success": "预设已复制到剪贴板",
+        "export_failed": "导出预设失败",
+        "colors": "颜色",
+        "base_colors": "基础颜色",
+        "base100": "Base 100",
+        "base200": "Base 200",
+        "base300": "Base 300",
+        "base_content": "基础内容",
+        "primary_secondary_accent": "主色 / 次要色 / 强调色",
+        "primary_content": "主色内容",
+        "secondary": "次要色",
+        "secondary_content": "次要色内容",
+        "accent": "强调色",
+        "accent_content": "强调色内容",
+        "semantic_colors": "语义颜色",
+        "neutral": "中性色",
+        "neutral_content": "中性色内容",
+        "info": "信息",
+        "info_content": "信息内容",
+        "success": "成功",
+        "success_content": "成功内容",
+        "warning": "警告",
+        "warning_content": "警告内容",
+        "error": "错误",
+        "error_content": "错误内容",
+        "preset": "预设",
+        "presets": {
+            "title": "主题预设",
+            "description": "保存并管理您的自定义预设",
+            "save_current": "保存当前",
+            "import": "导入",
+            "pagination": {
+                "per_page": "每页",
+                "page_of": "第 {current} 页，共 {total} 页"
+            },
+            "create_first_preset": "创建第一个预设",
+            "no_presets_title": "暂无预设",
+            "no_presets_description": "通过保存当前自定义设置来创建您的第一个预设",
+            "loading": "正在加载预设...",
+            "apply_preset": "应用预设",
+            "edit": "编辑",
+            "duplicate": "复制",
+            "export": "导出",
+            "delete": "删除",
+            "apply": "应用",
+            "created": "创建于 {date}",
+            "selected_count": "已选择的预设：{count}",
+            "actions": {
+                "apply_first": "应用第一个选中的",
+                "export_selected": "导出所选",
+                "duplicate_selected": "复制所选",
+                "delete_selected": "删除所选"
+            },
+            "create_modal": {
+                "name_label": "预设名称",
+                "name_required": "预设名称为必填",
+                "name_too_long": "预设名称长度需不超过 50 个字符",
+                "name_placeholder": "输入预设名称",
+                "description_label": "描述",
+                "description_placeholder": "此预设的可选描述",
+                "source_info": "预设来源",
+                "source_create": "将捕获当前自定义设置",
+                "source_edit": "正在编辑已有预设",
+                "create_button": "创建预设",
+                "update_button": "更新预设",
+                "cancel": "取消"
+            },
+            "import_modal": {
+                "method_label": "导入方式",
+                "method_file": "文件",
+                "method_json": "JSON",
+                "file_label": "选择预设文件",
+                "file_help": "选择一个 .json 预设文件",
+                "json_label": "粘贴 JSON 数据",
+                "json_placeholder": "在此粘贴您的预设 JSON 数据...",
+                "preview_title": "预览",
+                "preview_name": "名称",
+                "preview_description": "描述",
+                "import_button": "导入预设",
+                "importing": "正在导入...",
+                "cancel": "取消",
+                "error_invalid_file": "无效的 JSON 文件",
+                "error_no_name": "预设必须包含名称",
+                "error_invalid_json": "无效的 JSON"
+            },
+            "delete_modal": {
+                "message": "您确定要删除预设 \"{name}\" 吗？",
+                "warning": "此操作不可撤销。",
+                "delete_button": "删除预设",
+                "cancel": "取消"
+            },
+            "messages": {
+                "load_error": "加载预设失败",
+                "create_success": "预设 \"{name}\" 创建成功",
+                "create_error": "创建预设失败",
+                "update_success": "预设 \"{name}\" 更新成功",
+                "update_error": "更新预设失败",
+                "delete_success": "预设 \"{name}\" 删除成功",
+                "delete_error": "删除预设失败",
+                "duplicate_error": "复制预设失败",
+                "duplicate_success": "预设已复制",
+                "apply_success": "预设 \"{name}\" 应用成功",
+                "apply_error": "应用预设 \"{name}\" 失败：{error}",
+                "import_success": "预设 \"{name}\" 导入成功",
+                "import_no_name": "导入的预设缺少名称",
+                "import_error": "导入预设失败：{error}",
+                "multiple_deleted": "已成功删除 {count} 个预设",
+                "multiple_duplicated": "已成功复制 {count} 个预设",
+                "multiple_exported": "已将 {count} 个预设导出到剪贴板"
+            }
+        },
+        "dark": "黑暗的",
+        "light": "光"
     },
-    "delete_custom_client_confirm_modal": {
-      "title": "删除自定义客户端",
-      "description": "此操作不可撤销",
-      "deleting": "正在删除...",
-      "delete_client": "删除客户端"
-    }
-  },
-  "preloader": {
-    "initializing": "正在初始化...",
-    "connecting_servers": "正在连接服务器...",
-    "ready": "就绪！"
-  },
-  "about": {
-    "title": "关于 CollapseLoader",
-    "version": "版本",
-    "codename": "代号",
-    "commit": "提交",
-    "description": "加入我们的社区以获取更新、支持，并反馈您遇到的问题。",
-    "open_failed": "打开 {platform} 失败",
-    "branch": "分支",
-    "development": "开发模式"
-  },
-  "account": {
-    "no_email": "暂无邮箱",
-    "invisible_mode": "隐身模式",
-    "invisible_mode_description": "启用后，您对其他用户将显示为离线",
-    "streamer_mode": "主播模式",
-    "streamer_mode_description": "启用后，为保护隐私将隐藏所有用户名",
-    "streamer_enabled": "已启用主播模式",
-    "streamer_disabled": "已禁用主播模式",
-    "streamer_failed": "切换主播模式失败",
-    "invisible_failed": "更改可见性设置需要在线状态",
-    "using_cached_data": "离线模式 - 状态更改已禁用",
-    "change_password": "更改密码",
-    "change_password_confirm_title": "确认更改密码",
-    "current_password": "当前密码",
-    "new_password": "新密码",
-    "confirm_password": "确认密码",
-    "password_change_failed": "修改密码失败。请检查您的网络连接后重试。",
-    "password_change_success": "密码修改成功！",
-    "password_too_short": "新密码长度至少为 8 个字符。",
-    "password_mismatch": "两次输入的新密码不一致。",
-    "nickname_update_failed": "更新昵称失败。请在联网时重试。",
-    "nickname_update_success": "昵称更新成功！",
-    "nickname_label": "编辑昵称",
-    "invisible_enabled": "已启用隐身模式",
-    "invisible_disabled": "已禁用隐身模式",
-    "logout_confirm_title": "确认登出",
-    "social_links": "社交链接",
-    "no_social_links": "尚未添加任何社交链接。",
-    "avatar_help": "PNG、JPG、GIF、WEBP，最大 5MB",
-    "avatar_drop": "拖拽或点击上传头像",
-    "upload_avatar": "上传头像",
-    "avatar_upload_refresh_failed": "上传后刷新头像失败：{error}",
-    "avatar_type_error": "不支持的文件类型",
-    "avatar_size_error": "文件过大（最大 5MB）",
-    "avatar_uploaded": "头像已更新",
-    "avatar_upload_failed": "上传头像失败",
-    "reset_avatar": "重置头像",
-    "avatar_reset_success": "头像重置成功",
-    "avatar_reset_failed": "重置头像失败：{error}"
-  },
-  "roles": {
-    "USER": "用户",
-    "TESTER": "测试员",
-    "ADMIN": "管理员",
-    "DEVELOPER": "开发者",
-    "OWNER": "所有者"
-  },
-  "time": {
-    "offline": "离线",
-    "online": "在线"
-  },
-  "common": {
-    "logout": "登出",
-    "back": "返回",
-    "unblock": "取消屏蔽",
-    "next": "下一步",
-    "previous": "上一步",
-    "delete": "删除",
-    "username": "用户名",
-    "password": "密码",
-    "login": "登录",
-    "register": "注册",
-    "download": "下载",
-    "please_wait": "请稍候",
-    "cancel": "取消",
-    "reinstall": "重新安装",
-    "blocked": "已屏蔽",
-    "loading": "正在加载...",
-    "ok": "确定",
-    "close": "关闭",
-    "save": "保存",
-    "browse": "浏览",
-    "edit": "编辑",
-    "add": "添加",
-    "details": "详情",
-    "send": "发送",
-    "copied_to_clipboard": "颜色 {color} 已复制到剪贴板",
-    "done": "完成",
-    "click": "点击"
-  },
-  "auth": {
-    "logout": {
-      "confirm": "您确定要退出登录吗？",
-      "local_only": "已在本地完成登出。服务器登出时出现问题。",
-      "success": "已成功登出！"
+    "errors": {
+        "clients_load_failed": "加载客户端列表失败：{error}",
+        "clients_unavailable": "客户端当前不可用。",
+        "stop_error": "停止客户端失败：{error}",
+        "folder_error": "打开数据文件夹失败：{error}",
+        "reinstall_error": "重新安装 {name} 失败：{error}",
+        "logs_error": "访问日志失败：{error}",
+        "delete_error": "删除 {name} 失败：{error}",
+        "download_error": "下载 {name} 失败：{error}",
+        "load_accounts_error": "加载账户时出错：{error}",
+        "launch_with_account_error": "使用账户启动客户端时出错：{error}",
+        "download_network_error": "下载时网络连接错误：{error}",
+        "download_timeout_error": "下载超时。请检查您的连接：{error}",
+        "download_disk_error": "保存文件到磁盘失败。请检查可用空间：{error}",
+        "hash_verification_failed": "{name} 的文件完整性检查失败。下载的文件已损坏并被移除。请重试下载。",
+        "hash_verification_launch_failed": "无法为客户端 {name} 检查哈希"
     },
-    "login": {
-      "title": "登录",
-      "username_placeholder": "输入您的用户名",
-      "password_placeholder": "输入您的密码",
-      "login_button": "登录",
-      "register_link": "还没有账户？",
-      "success": "登录成功！",
-      "login_failed": "登录失败。请检查您的凭据。",
-      "no_token": "未收到身份验证令牌。"
+    "validation": {
+        "passwords_no_match": "两次输入的密码不一致。",
+        "min_length": "{field} 至少需要 {length} 个字符。"
     },
-    "register": {
-      "title": "注册",
-      "username_placeholder": "选择一个用户名",
-      "email_placeholder": "输入您的邮箱",
-      "password_placeholder": "设置密码",
-      "confirm_password_placeholder": "确认密码",
-      "register_button": "注册",
-      "login_link": "已经有账户？",
-      "registration_failed": "注册失败。请重试。",
-      "auto_login_failed": "注册成功，但自动登录失败。请手动登录。"
-    }
-  },
-  "appLogs": {
-    "copyLogs": "复制",
-    "autoScroll": "自动滚动",
-    "noLogs": "暂无应用日志。",
-    "searchPlaceholder": "搜索日志...",
-    "download": "下载日志",
-    "filterByLevel": "按级别过滤",
-    "noMatchingLogs": "没有符合过滤条件的日志。"
-  },
-  "blockedUsers": {
-    "title": "已屏蔽用户（{count}）",
-    "noBlockedUsers": "暂无被屏蔽的用户。被屏蔽的用户会显示在这里。"
-  },
-  "friends": {
-    "addFriend": "添加好友",
-    "noFriends": "还没有好友。\n添加一些好友开始使用吧！",
-    "receivedRequests": "已接收",
-    "sentRequests": "已发送",
-    "title": "好友（{count}）",
-    "cancel_friend_request": "取消好友请求",
-    "remove_success": "已将 {name} 从好友中移除",
-    "block_success": "已屏蔽 {name}",
-    "unblock_success": "已取消屏蔽 {name}",
-    "request_accepted": "已接受好友请求",
-    "request_rejected": "已拒绝好友请求",
-    "request_canceled": "已取消好友请求",
-    "remove_failed": "移除好友失败",
-    "block_failed": "屏蔽用户失败",
-    "unblock_failed": "取消屏蔽用户失败",
-    "request_failed": "{action} 好友请求失败",
-    "load_failed": "加载好友数据失败"
-  },
-  "home": {
-    "search_placeholder": "搜索客户端...",
-    "no_clients": "未找到客户端",
-    "adjust_search": "尝试调整您的搜索条件。",
-    "favorite_added": "已添加到收藏",
-    "favorite_removed": "已从收藏移除",
-    "starting_download": "开始下载 {name}",
-    "no_internet": "无法下载客户端：无网络连接。",
-    "not_installed": "{name} 未安装。请先下载。",
-    "launching": "正在启动 {client}...",
-    "stopping": "正在停止 {name}...",
-    "opened_folder": "已打开 {name} 的文件夹",
-    "reinstalling": "正在重新安装 {name}...",
-    "no_internet_reinstall": "无法重新安装客户端：无网络连接。",
-    "logs_copied": "{name} 的日志已复制到剪贴板",
-    "deleted_success": "{name} 删除成功",
-    "unavailable": "不可用",
-    "download": "下载",
-    "stop": "停止",
-    "launch": "启动",
-    "start_with": "启动方式",
-    "selected_clients": "已选中：{count} 个客户端",
-    "multiple_clients_selected": "已选择 {count} 个客户端",
-    "download_selected": "下载所选",
-    "reinstall_selected": "重装所选",
-    "delete_selected": "删除所选",
-    "downloading_multiple": "正在下载 {count} 个客户端...",
-    "deleting_multiple": "正在删除 {count} 个客户端...",
-    "reinstalling_multiple": "正在重新安装 {count} 个客户端...",
-    "multiple_clients_deleted": "已成功删除 {count} 个客户端",
-    "multiple_clients_reinstalled": "已成功重装 {count} 个客户端",
-    "no_clients_to_download": "没有可供下载的客户端",
-    "no_clients_to_delete": "没有已安装的客户端可删除",
-    "no_clients_to_reinstall": "没有已安装的客户端可重装",
-    "stop_selected": "停止所选客户端",
-    "stopping_multiple": "正在停止 {count} 个客户端",
-    "multiple_clients_stopped": "已成功停止 {count} 个客户端",
-    "filters_title": "筛选",
-    "sort": {
-      "popularity": "人气",
-      "name": "按名称",
-      "newest": "最新",
-      "version": "据称",
-      "order": {
-        "asc": "升序",
-        "desc": "降序"
-      },
-      "rating": "按评级"
+    "irc": {
+        "inline": {
+            "title": "全局聊天",
+            "latest_activity_connected": "连接到IRC聊天",
+            "tap_to_connect": "点击以连接到 IRC",
+            "placeholder": "输入消息...",
+            "send_failed": "发送消息失败",
+            "connection_error": "连接错误：{error}",
+            "status": {
+                "connected": "已连接",
+                "reconnecting": "正在重连...",
+                "connecting": "连接中...",
+                "error": "连接问题",
+                "disconnected": "已断开"
+            },
+            "privateMessage": "私人消息",
+            "copyNickname": "复制昵称"
+        }
     },
-    "filters": {
-      "installed": "已安装"
+    "settings": {
+        "general": "设置",
+        "sync": "云同步",
+        "accounts": "账户",
+        "reset_tooltip": "重置为默认",
+        "sync_status": "云同步状态",
+        "sync_controls": "同步控制",
+        "upload_title": "上传到云端",
+        "upload_description": "将您当前的设置、收藏和账户备份到云端。",
+        "upload_button": "立即上传",
+        "download_title": "从云端下载",
+        "download_description": "从云端恢复您的设置、收藏和账户。",
+        "download_button": "立即下载",
+        "syncing": "正在同步...",
+        "auto_sync": "自动同步",
+        "auto_sync_description": "在线时每 5 分钟自动将您的数据同步到云端。",
+        "offline_warning": "您当前处于离线状态。同步功能已禁用。",
+        "no_cloud_data": "未找到云端数据。上传您的数据以开始使用云同步。",
+        "add_account": "添加账户",
+        "active": "活跃",
+        "tags": "标签",
+        "created": "创建时间",
+        "last_used": "上次使用",
+        "no_accounts_title": "尚无账户",
+        "no_accounts_description": "添加您的第一个账户以开始使用",
+        "account_set_active": "{username} 现为活动账户！",
+        "account_set_active_failed": "设置活动账户失败：{error}",
+        "download_success": "已成功从云端下载！",
+        "download_failed": "从云端下载失败：{error}",
+        "sync_accounts_to_cloud_success": "本地账户已成功同步到 Atlas！",
+        "sync_accounts_to_cloud_failed": "本地账户同步到 Atlas 失败：{error}",
+        "sync_accounts_from_cloud_success": "已成功从 Atlas 导入账户！",
+        "sync_accounts_from_cloud_failed": "从 Atlas 导入账户失败：{error}",
+        "load_remote_accounts_failed": "无法加载 Atlas 账户：{error}",
+        "load_settings_failed": "加载设置失败：{error}",
+        "save_settings_failed": "保存设置失败：{error}",
+        "load_accounts_failed": "加载账户失败：{error}",
+        "load_flags_failed": "加载标志失败：{error}",
+        "language_change_failed": "切换语言失败：{error}",
+        "descriptions": {
+            "ram": "要分配的内存大小（MB）。",
+            "language": "应用语言（例如：en、ru）。",
+            "discord_rpc_enabled": "启用 Discord 状态，在 Discord 中展示您的活动。",
+            "optional_telemetry": "允许匿名分析数据以帮助改进 CollapseLoader。不收集个人信息。",
+            "cordshare": "与好友分享您的坐标，即使您不在已加载区块内，也能在游戏中显示您的位置。",
+            "irc_chat": "在每个客户端中提供的 IRC 聊天中与其他 CollapseLoader 用户聊天。",
+            "hash_verify": "启用哈希校验以确保下载的客户端未损坏。这有助于保持客户端最新。",
+            "sync_client_settings": "在所有客户端之间同步选项、资源包及其他设置。",
+            "dpi_bypass": "如果客户端下载卡在 0%、客户端无法启动或客户端加载失败，则启用此功能。",
+            "minimize_to_tray_on_launch": "启动客户端时将应用最小化到系统托盘。",
+            "close_to_tray": "点击关闭按钮时将应用最小化到系统托盘而不是关闭。",
+            "java_path": "Java 可执行文件的路径。留空则使用默认版本。",
+            "java_args": "启动客户端时传递的自定义 JVM 参数。"
+        },
+        "telemetry": "分析",
+        "open_data": "打开数据文件夹",
+        "add_account_title": "添加新账户",
+        "edit_account_title": "编辑账户",
+        "reset_title": "重置设置确认",
+        "delete_account_title": "删除账户确认",
+        "actions": "操作",
+        "toast_position": {
+            "title": "提示位置",
+            "description": "选择通知在屏幕上的显示位置",
+            "bottom_right": "右下角",
+            "bottom_left": "左下角",
+            "top_right": "右上角",
+            "top_left": "左上角",
+            "bottom_center": "下中",
+            "top_center": "上中",
+            "preview_message": "提示位置已更改！"
+        },
+        "telemetry_info_title": "关于遥测的说明",
+        "reset_requirements": "重置加载器文件",
+        "reset_requirements_success": "已成功移除依赖，现在可以下载任意客户端",
+        "reset_requirements_failed": "无法移除依赖，请重试或重启加载器",
+        "login_required": "使用此功能需要登录您的账户。",
+        "reset_cache_failed": "无法删除缓存，请重试",
+        "hash_verify": "哈希校验",
+        "irc_chat": "IRC 聊天",
+        "save_flags_failed": "保存标志失败：{error}",
+        "change_root": {
+            "title": "更改数据文件夹",
+            "action": "更改数据文件夹",
+            "target_folder": "目标文件夹",
+            "hint": "选择存放 CollapseLoader 文件（客户端、缓存等）的文件夹",
+            "mode": "如何处理旧文件夹？",
+            "mode_move": "移动",
+            "mode_wipe": "删除",
+            "mode_move_desc": "将旧文件夹中的所有数据移动到新文件夹（推荐）",
+            "mode_wipe_desc": "删除旧文件夹（所有数据将被移除）",
+            "select_folder_first": "请先选择文件夹",
+            "success": "数据文件夹已更改",
+            "failed": "更改数据文件夹失败：{error}",
+            "restart_required": "请重启应用以使更改生效"
+        },
+        "sync_client_settings": "同步客户端设置",
+        "minimize_to_tray_on_launch": "启动时最小化到系统托盘",
+        "close_to_tray": "关闭到系统托盘",
+        "ram": {
+            "warning": "警告：您已选择 {selectedRamMb} MB 内存。此配置超过推荐的 6 GB 限制，可能导致性能问题或系统崩溃。"
+        },
+        "reset_settings": "重置设置",
+        "accounts_description": "轻松管理您的游戏账号并自由切换",
+        "accounts_management": "账户管理",
+        "no_matching_accounts": "未找到匹配的帐户",
+        "search_accounts": "搜索账户...",
+        "try_different_search": "请尝试调整您的搜索条件或筛选器",
+        "local_account_sync": "本地账户同步",
+        "local_account_sync_description": "将 CollapseLoader 的本地账户与 Atlas 保持同步，以便在其他设备恢复使用。",
+        "sync_accounts_from_cloud_button": "从 Atlas 导入账户",
+        "sync_accounts_to_cloud_button": "上传本地账户",
+        "remote_accounts_loading": "正在检查 Atlas 上的同步账户...",
+        "remote_accounts_present": "Atlas 上有 {count} 个同步账户。",
+        "remote_accounts_more": "还有 {count} 个账户",
+        "remote_accounts_empty": "Atlas 上尚无同步账户。",
+        "sync_login_required": "登录以启用同步功能",
+        "not_signed_in": "您尚未登录账户"
     },
-    "clear_filters": "清除筛选条件"
-  },
-  "theme": {
-    "actions": {
-      "add_favorite": "添加到收藏",
-      "remove_favorite": "从收藏移除",
-      "open_folder": "打开文件夹"
+    "userProfile": {
+        "back_to_friends": "返回好友",
+        "profile_information": "资料信息",
+        "username": "用户名",
+        "nickname": "昵称",
+        "member_since": "加入时间",
+        "actions": "操作",
+        "online": "在线",
+        "offline": "离线",
+        "playing": "正在游玩",
+        "last_seen": "上次在线",
+        "just_now": "刚刚",
+        "minutes_ago": "{count} 分钟前",
+        "hours_ago": "{count} 小时前",
+        "days_ago": "{count} 天前",
+        "friends_with": "您与 {name} 是好友",
+        "remove_friend": "移除好友",
+        "friend_request_sent": "已向 {name} 发送好友请求",
+        "friend_request_received": "{name} 向您发送了好友请求",
+        "accept": "接受",
+        "decline": "拒绝",
+        "user_blocked": "该用户已被屏蔽",
+        "send_friend_request": "发送好友请求",
+        "sending": "正在发送...",
+        "canceling": "正在取消...",
+        "cancel_friend_request": "取消请求",
+        "block_user": "屏蔽用户",
+        "unblock_user": "取消屏蔽用户",
+        "no_user_id": "未提供用户 ID",
+        "user_not_found": "未找到用户",
+        "login_required": "需要登录后才能查看资料",
+        "profile_load_failed": "加载用户资料失败",
+        "friend_request_sent_success": "已向 {name} 发送好友请求",
+        "friend_request_failed": "发送好友请求失败: {error}",
+        "copy_username": "复制用户名",
+        "copied_username": "{name} 已复制到剪贴板",
+        "copy_failed": "复制用户名失败",
+        "friend_request_canceled": "已成功取消好友请求",
+        "friend_request_cancel_failed": "取消好友请求失败",
+        "friend_removed_success": "已将 {name} 从好友中移除",
+        "friend_remove_failed": "移除好友失败",
+        "friend_request_responded": "好友请求已{action}",
+        "friend_request_respond_failed": "{action} 好友请求失败",
+        "friend_request_not_found": "未找到好友请求",
+        "user_blocked_success": "{name} 已被屏蔽",
+        "user_block_failed": "屏蔽用户失败",
+        "presets_title": "预设",
+        "presets": "预设",
+        "no_presets": "该用户尚未分享任何预设。",
+        "create_preset": "创建预设",
+        "presets_hidden_streamer": "主播模式下已隐藏预设。",
+        "favorite_client": "最喜欢的客户"
     },
-    "select_theme": "选择主题",
-    "description": "选择您偏好的主题。",
-    "change_success": "主题已更改",
-    "save_failed": "保存主题失败：{error}",
-    "reset_button": "重置",
-    "expert_css_title": "高级 CSS 自定义",
-    "show_expert": "显示高级",
-    "hide_expert": "隐藏高级",
-    "expert_warning": "仅限高级用户。无效的 CSS 可能破坏界面。",
-    "custom_css_label": "自定义 CSS",
-    "enable_custom_css": "启用自定义 CSS",
-    "css_examples_title": "示例",
-    "example_1": "为卡片添加毛玻璃模糊",
-    "example_inserted": "示例已插入",
-    "enable_custom_css_first": "请先启用自定义 CSS",
-    "selected": "已选择",
-    "insert_example": "插入",
-    "available_classes_label": "可编辑的类（点击可插入到代码中）",
-    "tooltip_client_card": "客户端卡片的主类",
-    "tooltip_sidebar_btn": "左侧导航按钮的类",
-    "tooltip_launch_download_btn": "下载与启动按钮的类",
-    "export_css_btn": "导出 CSS",
-    "import_css_btn": "导入 CSS",
-    "export_css_title": "导出自定义 CSS",
-    "import_css_title": "导入自定义 CSS",
-    "export_desc": "复制下方编码后的 CSS 并分享。仅允许安全的 CSS。",
-    "import_desc": "在此粘贴编码后的 CSS 以导入。仅允许安全的 CSS。",
-    "copy": "复制",
-    "copied": "已复制！",
-    "copy_failed": "复制失败",
-    "import": "导入",
-    "import_success": "预设导入成功！",
-    "import_invalid": "预设无效。导入失败。",
-    "primary": "主色",
-    "export_success": "预设已复制到剪贴板",
-    "export_failed": "导出预设失败",
-    "colors": "颜色",
-    "base_colors": "基础颜色",
-    "base100": "Base 100",
-    "base200": "Base 200",
-    "base300": "Base 300",
-    "base_content": "基础内容",
-    "primary_secondary_accent": "主色 / 次要色 / 强调色",
-    "primary_content": "主色内容",
-    "secondary": "次要色",
-    "secondary_content": "次要色内容",
-    "accent": "强调色",
-    "accent_content": "强调色内容",
-    "semantic_colors": "语义颜色",
-    "neutral": "中性色",
-    "neutral_content": "中性色内容",
-    "info": "信息",
-    "info_content": "信息内容",
-    "success": "成功",
-    "success_content": "成功内容",
-    "warning": "警告",
-    "warning_content": "警告内容",
-    "error": "错误",
-    "error_content": "错误内容",
-    "preset": "预设",
-    "presets": {
-      "title": "主题预设",
-      "description": "保存并管理您的自定义预设",
-      "save_current": "保存当前",
-      "import": "导入",
-      "pagination": {
-        "per_page": "每页",
-        "page_of": "第 {current} 页，共 {total} 页"
-      },
-      "create_first_preset": "创建第一个预设",
-      "no_presets_title": "暂无预设",
-      "no_presets_description": "通过保存当前自定义设置来创建您的第一个预设",
-      "loading": "正在加载预设...",
-      "apply_preset": "应用预设",
-      "edit": "编辑",
-      "duplicate": "复制",
-      "export": "导出",
-      "delete": "删除",
-      "apply": "应用",
-      "created": "创建于 {date}",
-      "selected_count": "已选择的预设：{count}",
-      "actions": {
-        "apply_first": "应用第一个选中的",
-        "export_selected": "导出所选",
-        "duplicate_selected": "复制所选",
-        "delete_selected": "删除所选"
-      },
-      "create_modal": {
-        "name_label": "预设名称",
-        "name_required": "预设名称为必填",
-        "name_too_long": "预设名称长度需不超过 50 个字符",
-        "name_placeholder": "输入预设名称",
-        "description_label": "描述",
-        "description_placeholder": "此预设的可选描述",
-        "source_info": "预设来源",
-        "source_create": "将捕获当前自定义设置",
-        "source_edit": "正在编辑已有预设",
-        "create_button": "创建预设",
-        "update_button": "更新预设",
-        "cancel": "取消"
-      },
-      "import_modal": {
-        "method_label": "导入方式",
-        "method_file": "文件",
-        "method_json": "JSON",
-        "file_label": "选择预设文件",
-        "file_help": "选择一个 .json 预设文件",
-        "json_label": "粘贴 JSON 数据",
-        "json_placeholder": "在此粘贴您的预设 JSON 数据...",
-        "preview_title": "预览",
-        "preview_name": "名称",
-        "preview_description": "描述",
-        "import_button": "导入预设",
-        "importing": "正在导入...",
-        "cancel": "取消",
-        "error_invalid_file": "无效的 JSON 文件",
-        "error_no_name": "预设必须包含名称",
-        "error_invalid_json": "无效的 JSON"
-      },
-      "delete_modal": {
-        "message": "您确定要删除预设 \"{name}\" 吗？",
-        "warning": "此操作不可撤销。",
-        "delete_button": "删除预设",
-        "cancel": "取消"
-      },
-      "messages": {
-        "load_error": "加载预设失败",
-        "create_success": "预设 \"{name}\" 创建成功",
-        "create_error": "创建预设失败",
-        "update_success": "预设 \"{name}\" 更新成功",
-        "update_error": "更新预设失败",
-        "delete_success": "预设 \"{name}\" 删除成功",
-        "delete_error": "删除预设失败",
-        "duplicate_error": "复制预设失败",
-        "duplicate_success": "预设已复制",
-        "apply_success": "预设 \"{name}\" 应用成功",
-        "apply_error": "应用预设 \"{name}\" 失败：{error}",
-        "import_success": "预设 \"{name}\" 导入成功",
-        "import_no_name": "导入的预设缺少名称",
-        "import_error": "导入预设失败：{error}",
-        "multiple_deleted": "已成功删除 {count} 个预设",
-        "multiple_duplicated": "已成功复制 {count} 个预设",
-        "multiple_exported": "已将 {count} 个预设导出到剪贴板"
-      }
+    "sync": {
+        "last_sync": "上次同步",
+        "minutes_ago": "{count} 分钟前",
+        "hours_ago": "{count} 小时前",
+        "days_ago": "{count} 天前"
     },
-    "dark": "黑暗的",
-    "light": "光"
-  },
-  "errors": {
-    "clients_load_failed": "加载客户端列表失败：{error}",
-    "clients_unavailable": "客户端当前不可用。",
-    "stop_error": "停止客户端失败：{error}",
-    "folder_error": "打开数据文件夹失败：{error}",
-    "reinstall_error": "重新安装 {name} 失败：{error}",
-    "logs_error": "访问日志失败：{error}",
-    "delete_error": "删除 {name} 失败：{error}",
-    "download_error": "下载 {name} 失败：{error}",
-    "load_accounts_error": "加载账户时出错：{error}",
-    "launch_with_account_error": "使用账户启动客户端时出错：{error}",
-    "download_network_error": "下载时网络连接错误：{error}",
-    "download_timeout_error": "下载超时。请检查您的连接：{error}",
-    "download_disk_error": "保存文件到磁盘失败。请检查可用空间：{error}",
-    "hash_verification_failed": "{name} 的文件完整性检查失败。下载的文件已损坏并被移除。请重试下载。",
-    "hash_verification_launch_failed": "无法为客户端 {name} 检查哈希"
-  },
-  "validation": {
-    "passwords_no_match": "两次输入的密码不一致。",
-    "min_length": "{field} 至少需要 {length} 个字符。"
-  },
-  "irc": {
-    "inline": {
-      "title": "全局聊天",
-      "latest_activity_connected": "连接到IRC聊天",
-      "tap_to_connect": "点击以连接到 IRC",
-      "placeholder": "输入消息...",
-      "send_failed": "发送消息失败",
-      "connection_error": "连接错误：{error}",
-      "status": {
-        "connected": "已连接",
-        "reconnecting": "正在重连...",
-        "connecting": "连接中...",
-        "error": "连接问题",
-        "disconnected": "已断开"
-      },
-      "privateMessage": "私人消息",
-      "copyNickname": "复制昵称"
-    }
-  },
-  "settings": {
-    "general": "设置",
-    "sync": "云同步",
-    "accounts": "账户",
-    "reset_tooltip": "重置为默认",
-    "sync_status": "云同步状态",
-    "sync_controls": "同步控制",
-    "upload_title": "上传到云端",
-    "upload_description": "将您当前的设置、收藏和账户备份到云端。",
-    "upload_button": "立即上传",
-    "download_title": "从云端下载",
-    "download_description": "从云端恢复您的设置、收藏和账户。",
-    "download_button": "立即下载",
-    "syncing": "正在同步...",
-    "auto_sync": "自动同步",
-    "auto_sync_description": "在线时每 5 分钟自动将您的数据同步到云端。",
-    "offline_warning": "您当前处于离线状态。同步功能已禁用。",
-    "no_cloud_data": "未找到云端数据。上传您的数据以开始使用云同步。",
-    "add_account": "添加账户",
-    "active": "活跃",
-    "tags": "标签",
-    "created": "创建时间",
-    "last_used": "上次使用",
-    "no_accounts_title": "尚无账户",
-    "no_accounts_description": "添加您的第一个账户以开始使用",
-    "account_set_active": "{username} 现为活动账户！",
-    "account_set_active_failed": "设置活动账户失败：{error}",
-    "download_success": "已成功从云端下载！",
-    "download_failed": "从云端下载失败：{error}",
-    "sync_accounts_to_cloud_success": "本地账户已成功同步到 Atlas！",
-    "sync_accounts_to_cloud_failed": "本地账户同步到 Atlas 失败：{error}",
-    "sync_accounts_from_cloud_success": "已成功从 Atlas 导入账户！",
-    "sync_accounts_from_cloud_failed": "从 Atlas 导入账户失败：{error}",
-    "load_remote_accounts_failed": "无法加载 Atlas 账户：{error}",
-    "load_settings_failed": "加载设置失败：{error}",
-    "save_settings_failed": "保存设置失败：{error}",
-    "load_accounts_failed": "加载账户失败：{error}",
-    "load_flags_failed": "加载标志失败：{error}",
-    "language_change_failed": "切换语言失败：{error}",
-    "descriptions": {
-      "ram": "要分配的内存大小（MB）。",
-      "language": "应用语言（例如：en、ru）。",
-      "discord_rpc_enabled": "启用 Discord 状态，在 Discord 中展示您的活动。",
-      "optional_telemetry": "允许匿名分析数据以帮助改进 CollapseLoader。不收集个人信息。",
-      "cordshare": "与好友分享您的坐标，即使您不在已加载区块内，也能在游戏中显示您的位置。",
-      "irc_chat": "在每个客户端中提供的 IRC 聊天中与其他 CollapseLoader 用户聊天。",
-      "hash_verify": "启用哈希校验以确保下载的客户端未损坏。这有助于保持客户端最新。",
-      "sync_client_settings": "在所有客户端之间同步选项、资源包及其他设置。",
-      "dpi_bypass": "如果客户端下载卡在 0%、客户端无法启动或客户端加载失败，则启用此功能。"
+    "navigation": {
+        "home": "首页",
+        "friends": "好友",
+        "settings": "设置",
+        "logs": "应用日志",
+        "account": "账户",
+        "about": "关于",
+        "news": "新闻",
+        "customization": "个性化",
+        "custom_clients": "自定义客户端",
+        "sidebar_help": {
+            "title": "提示：",
+            "tip": "您可以将侧边栏移动到屏幕的任意一侧。双击侧边栏可移除图标之间的间距。",
+            "got_it": "知道了"
+        }
     },
-    "telemetry": "分析",
-    "open_data": "打开数据文件夹",
-    "add_account_title": "添加新账户",
-    "edit_account_title": "编辑账户",
-    "reset_title": "重置设置确认",
-    "delete_account_title": "删除账户确认",
-    "actions": "操作",
-    "toast_position": {
-      "title": "提示位置",
-      "description": "选择通知在屏幕上的显示位置",
-      "bottom_right": "右下角",
-      "bottom_left": "左下角",
-      "top_right": "右上角",
-      "top_left": "左上角",
-      "bottom_center": "下中",
-      "top_center": "上中",
-      "preview_message": "提示位置已更改！"
+    "toast": {
+        "dev": {
+            "menu_opened": "开发者菜单已打开",
+            "flags_reset": "标志已重置！"
+        },
+        "theme": {
+            "emergency_reset_done": "自定义 CSS 已重置。{action}",
+            "emergency_reset_toggle_instruction": "要重新启用自定义 CSS，请打开主题设置并将“启用自定义 CSS”关闭后再打开。"
+        },
+        "client": {
+            "crashed": "客户端 {name} 已崩溃。{error}",
+            "crashed_incomplete": "客户端 {name} 因下载不完整而崩溃。正在尝试自动重装。",
+            "reinstall_success": "{name} 重新安装成功。请重试启动。",
+            "reinstall_failed": "重新安装 {name} 失败：{error}。请手动重装。",
+            "redownload_success": "{name} 重新下载成功。哈希已验证。"
+        },
+        "server": {
+            "offline": "无法确定服务器状态。将视为离线。",
+            "offline_base": "您当前处于离线状态。",
+            "cdn_and_api_offline": "无法连接到 CDN 和 API。",
+            "cdn_offline": "无法连接到 CDN。",
+            "api_offline": "无法连接到 API。",
+            "api_init_failed": "初始化 API 失败：{error}"
+        },
+        "settings": {
+            "flags_load_failed": "加载标志失败：{error}",
+            "first_run_save_failed": "保存首次运行状态失败：{error}",
+            "disclaimer_save_failed": "保存免责声明状态失败：{error}",
+            "theme_save_failed": "保存主题失败：{error}"
+        },
+        "telemetry": {
+            "analytics_enabled": "已启用分析。感谢您的帮助！",
+            "analytics_disabled": "分析已禁用。",
+            "analytics_enable_failed": "启用分析失败：{error}",
+            "analytics_disable_failed": "禁用分析失败：{error}"
+        },
+        "auth": {
+            "registration_success": "注册成功！请登录。"
+        },
+        "logs": {
+            "fetch_failed": "获取应用日志时出错：{error}",
+            "copied_success": "应用日志已复制到剪贴板！",
+            "copy_failed": "复制应用日志失败：{error}",
+            "client_logs_copied": "日志已复制到剪贴板！",
+            "client_logs_copy_failed": "复制日志到剪贴板失败。",
+            "download_failed": "无法保存日志：{错误}",
+            "download_success": "日志保存成功！"
+        },
+        "users": {
+            "blocked_load_failed": "加载被屏蔽用户失败",
+            "unblocked_success": "已取消屏蔽 {name}",
+            "unblock_failed": "取消屏蔽用户失败"
+        },
+        "friends": {
+            "search_failed": "搜索用户失败",
+            "request_sent": "已向 {name} 发送好友请求",
+            "request_send_failed": "发送好友请求失败"
+        },
+        "account": {
+            "username_required": "用户名为必填项",
+            "account_updated": "账户更新成功！",
+            "account_update_failed": "更新账户失败：{error}",
+            "account_added": "账户添加成功！",
+            "account_add_failed": "添加账户失败：{error}",
+            "account_deleted": "账户删除成功！",
+            "account_delete_failed": "删除账户失败：{error}",
+            "nickname_update_failed": "更新昵称失败。请重试。"
+        },
+        "modal": {
+            "settings_reset_success": "设置重置成功！",
+            "settings_reset_failed": "重置设置失败：{error}"
+        },
+        "sync": {
+            "offline_error": "离线时无法同步",
+            "already_in_progress": "同步已在进行中",
+            "syncing": "正在同步到云端...",
+            "success": "同步成功完成！",
+            "failed": "同步失败：{error}",
+            "login_required": "请登录以同步"
+        }
     },
-    "telemetry_info_title": "关于遥测的说明",
-    "reset_requirements": "重置加载器文件",
-    "reset_requirements_success": "已成功移除依赖，现在可以下载任意客户端",
-    "reset_requirements_failed": "无法移除依赖，请重试或重启加载器",
-    "login_required": "使用此功能需要登录您的账户。",
-    "reset_cache_failed": "无法删除缓存，请重试",
-    "hash_verify": "哈希校验",
-    "irc_chat": "IRC 聊天",
-    "save_flags_failed": "保存标志失败：{error}",
-    "change_root": {
-      "title": "更改数据文件夹",
-      "action": "更改数据文件夹",
-      "target_folder": "目标文件夹",
-      "hint": "选择存放 CollapseLoader 文件（客户端、缓存等）的文件夹",
-      "mode": "如何处理旧文件夹？",
-      "mode_move": "移动",
-      "mode_wipe": "删除",
-      "mode_move_desc": "将旧文件夹中的所有数据移动到新文件夹（推荐）",
-      "mode_wipe_desc": "删除旧文件夹（所有数据将被移除）",
-      "select_folder_first": "请先选择文件夹",
-      "success": "数据文件夹已更改",
-      "failed": "更改数据文件夹失败：{error}",
-      "restart_required": "请重启应用以使更改生效"
+    "discord": {
+        "details": {
+            "in_menu": "在菜单中",
+            "in_game": "游戏中"
+        },
+        "states": {
+            "browsing_clients": "浏览客户端",
+            "configuring_settings": "配置设置",
+            "enjoying_visuals": "欣赏界面",
+            "watching_client_behavior": "观察客户端行为",
+            "in_profile": "查看资料",
+            "watching_about": "浏览关于页面",
+            "debugging": "调试中",
+            "logging_in": "登录中",
+            "browsing_friends": "查看好友动态",
+            "browsing_news": "阅读新闻",
+            "browsing_custom_clients": "浏览自定义客户端"
+        }
     },
-    "sync_client_settings": "同步客户端设置",
-    "ram": {
-      "warning": "警告：您已选择 {selectedRamMb} MB 内存。此配置超过推荐的 6 GB 限制，可能导致性能问题或系统崩溃。"
+    "modal": {
+        "client_crash": {
+            "title": "{name} 的崩溃报告"
+        }
     },
-    "reset_settings": "重置设置",
-    "accounts_description": "轻松管理您的游戏账号并自由切换",
-    "accounts_management": "账户管理",
-    "no_matching_accounts": "未找到匹配的帐户",
-    "search_accounts": "搜索账户...",
-    "try_different_search": "请尝试调整您的搜索条件或筛选器",
-    "local_account_sync": "本地账户同步",
-    "local_account_sync_description": "将 CollapseLoader 的本地账户与 Atlas 保持同步，以便在其他设备恢复使用。",
-    "sync_accounts_from_cloud_button": "从 Atlas 导入账户",
-    "sync_accounts_to_cloud_button": "上传本地账户",
-    "remote_accounts_loading": "正在检查 Atlas 上的同步账户...",
-    "remote_accounts_present": "Atlas 上有 {count} 个同步账户。",
-    "remote_accounts_more": "还有 {count} 个账户",
-    "remote_accounts_empty": "Atlas 上尚无同步账户。",
-    "sync_login_required": "登录以启用同步功能",
-    "not_signed_in": "您尚未登录账户"
-  },
-  "userProfile": {
-    "back_to_friends": "返回好友",
-    "profile_information": "资料信息",
-    "username": "用户名",
-    "nickname": "昵称",
-    "member_since": "加入时间",
-    "actions": "操作",
-    "online": "在线",
-    "offline": "离线",
-    "playing": "正在游玩",
-    "last_seen": "上次在线",
-    "just_now": "刚刚",
-    "minutes_ago": "{count} 分钟前",
-    "hours_ago": "{count} 小时前",
-    "days_ago": "{count} 天前",
-    "friends_with": "您与 {name} 是好友",
-    "remove_friend": "移除好友",
-    "friend_request_sent": "已向 {name} 发送好友请求",
-    "friend_request_received": "{name} 向您发送了好友请求",
-    "accept": "接受",
-    "decline": "拒绝",
-    "user_blocked": "该用户已被屏蔽",
-    "send_friend_request": "发送好友请求",
-    "sending": "正在发送...",
-    "canceling": "正在取消...",
-    "cancel_friend_request": "取消请求",
-    "block_user": "屏蔽用户",
-    "unblock_user": "取消屏蔽用户",
-    "no_user_id": "未提供用户 ID",
-    "user_not_found": "未找到用户",
-    "login_required": "需要登录后才能查看资料",
-    "profile_load_failed": "加载用户资料失败",
-    "friend_request_sent_success": "已向 {name} 发送好友请求",
-    "friend_request_failed": "发送好友请求失败: {error}",
-    "copy_username": "复制用户名",
-    "copied_username": "{name} 已复制到剪贴板",
-    "copy_failed": "复制用户名失败",
-    "friend_request_canceled": "已成功取消好友请求",
-    "friend_request_cancel_failed": "取消好友请求失败",
-    "friend_removed_success": "已将 {name} 从好友中移除",
-    "friend_remove_failed": "移除好友失败",
-    "friend_request_responded": "好友请求已{action}",
-    "friend_request_respond_failed": "{action} 好友请求失败",
-    "friend_request_not_found": "未找到好友请求",
-    "user_blocked_success": "{name} 已被屏蔽",
-    "user_block_failed": "屏蔽用户失败",
-    "presets_title": "预设",
-    "presets": "预设",
-    "no_presets": "该用户尚未分享任何预设。",
-    "create_preset": "创建预设",
-    "presets_hidden_streamer": "主播模式下已隐藏预设。"
-  },
-  "sync": {
-    "last_sync": "上次同步",
-    "minutes_ago": "{count} 分钟前",
-    "hours_ago": "{count} 小时前",
-    "days_ago": "{count} 天前"
-  },
-  "navigation": {
-    "home": "首页",
-    "friends": "好友",
-    "settings": "设置",
-    "logs": "应用日志",
-    "account": "账户",
-    "about": "关于",
-    "news": "新闻",
-    "customization": "个性化",
-    "custom_clients": "自定义客户端",
-    "sidebar_help": {
-      "title": "提示：",
-      "tip": "您可以将侧边栏移动到屏幕的任意一侧。双击侧边栏可移除图标之间的间距。",
-      "got_it": "知道了"
-    }
-  },
-  "toast": {
-    "dev": {
-      "menu_opened": "开发者菜单已打开",
-      "flags_reset": "标志已重置！"
+    "news": {
+        "loading": "正在加载新闻...",
+        "error_title": "加载新闻出错",
+        "retry": "重试",
+        "no_news": "暂无新闻",
+        "no_news_description": "当前没有可显示的新闻。",
+        "updated_at": "更新于",
+        "not_found": "未找到新闻",
+        "server_error": "服务器发生错误",
+        "network_error": "网络连接错误",
+        "fetch_failed": "获取新闻失败：{error}",
+        "fetch_failed_toast": "加载新闻失败",
+        "new": "新",
+        "time": {},
+        "search_placeholder": "搜索新闻...",
+        "mark_all_read": "标记全部为已读",
+        "refresh": "刷新"
     },
-    "theme": {
-      "emergency_reset_done": "自定义 CSS 已重置。{action}",
-      "emergency_reset_toggle_instruction": "要重新启用自定义 CSS，请打开主题设置并将“启用自定义 CSS”关闭后再打开。"
+    "hold_button": {
+        "label": "长按开始！",
+        "info_message": "长按！长按！长按！长按！长按！长按！长按！长按！"
     },
     "client": {
-      "crashed": "客户端 {name} 已崩溃。{error}",
-      "crashed_incomplete": "客户端 {name} 因下载不完整而崩溃。正在尝试自动重装。",
-      "reinstall_success": "{name} 重新安装成功。请重试启动。",
-      "reinstall_failed": "重新安装 {name} 失败：{error}。请手动重装。",
-      "redownload_success": "{name} 重新下载成功。哈希已验证。"
-    },
-    "server": {
-      "offline": "无法确定服务器状态。将视为离线。",
-      "offline_base": "您当前处于离线状态。",
-      "cdn_and_api_offline": "无法连接到 CDN 和 API。",
-      "cdn_offline": "无法连接到 CDN。",
-      "api_offline": "无法连接到 API。",
-      "api_init_failed": "初始化 API 失败：{error}"
-    },
-    "settings": {
-      "flags_load_failed": "加载标志失败：{error}",
-      "first_run_save_failed": "保存首次运行状态失败：{error}",
-      "disclaimer_save_failed": "保存免责声明状态失败：{error}",
-      "theme_save_failed": "保存主题失败：{error}"
-    },
-    "telemetry": {
-      "analytics_enabled": "已启用分析。感谢您的帮助！",
-      "analytics_disabled": "分析已禁用。",
-      "analytics_enable_failed": "启用分析失败：{error}",
-      "analytics_disable_failed": "禁用分析失败：{error}"
+        "details": {
+            "loading": "正在加载详情...",
+            "info_tab": "信息",
+            "screenshots_tab": "截图",
+            "rating": "评分",
+            "no_rating": "暂无评分",
+            "login_to_rate": "登录后即可评分",
+            "source_link": "源链接",
+            "created": "创建时间",
+            "changelog": "更新日志",
+            "no_changelog": "暂无更新日志",
+            "no_screenshots": "暂无截图",
+            "screenshot_viewer": {
+                "zoom_percent": "{percent}%",
+                "image_counter": "{current} / {total}",
+                "controls": {
+                    "esc_close": "ESC - 关闭",
+                    "esc_reset": "ESC - 重置缩放",
+                    "navigate": "← → - 导航",
+                    "click_zoom": "点击 - 缩放 | 滚轮 - 缩放",
+                    "drag_pan": "拖拽 - 平移 | +/- - 缩放 | 0 - 重置"
+                }
+            },
+            "no_changelog_desc": "更新与改动将显示在此处。",
+            "comments_tab": "评论",
+            "your_rating": "您的评价"
+        },
+        "comments": {
+            "delete": "删除",
+            "empty": "暂无评论。快来发表你的见解吧！",
+            "placeholder": "写一条评论..."
+        }
     },
-    "auth": {
-      "registration_success": "注册成功！请登录。"
+    "customization": {
+        "background_title": "背景",
+        "background_image": "背景图片网址",
+        "background_image_placeholder": "https://example.com/image.jpg",
+        "background_image_help": "支持 jpg、png、webp、data-url",
+        "background_blur": "模糊",
+        "background_opacity": "不透明度"
     },
-    "logs": {
-      "fetch_failed": "获取应用日志时出错：{error}",
-      "copied_success": "应用日志已复制到剪贴板！",
-      "copy_failed": "复制应用日志失败：{error}",
-      "client_logs_copied": "日志已复制到剪贴板！",
-      "client_logs_copy_failed": "复制日志到剪贴板失败。"
+    "updater": {
+        "update_available": "有可用更新",
+        "current": "当前",
+        "latest": "最新",
+        "changelog": "更新日志",
+        "download_install": "下载并安装",
+        "downloading": "正在下载...",
+        "skip": "跳过",
+        "starting_download": "开始下载更新...",
+        "update_installed": "更新安装成功！应用将重启。",
+        "update_failed": "更新失败：{error}",
+        "check_for_updates": "检查更新",
+        "checking_updates": "正在检查更新...",
+        "up_to_date": "您已是最新版本！",
+        "show_more": "再显示 {count} 个版本",
+        "show_less": "收起",
+        "release_types": {},
+        "categories": {
+            "feature": "功能",
+            "improvement": "改善"
+        },
+        "no_update": "未找到更新"
     },
-    "users": {
-      "blocked_load_failed": "加载被屏蔽用户失败",
-      "unblocked_success": "已取消屏蔽 {name}",
-      "unblock_failed": "取消屏蔽用户失败"
+    "custom_clients": {
+        "add": "添加自定义客户端",
+        "running": "运行中",
+        "edit": "编辑",
+        "delete": "删除",
+        "added": "已添加",
+        "stop": "停止",
+        "launch": "启动",
+        "display_settings": "显示设置",
+        "display_mode": "显示模式",
+        "display_mode_separate": "分离",
+        "display_mode_global": "全局",
+        "no_results": "尝试调整您的搜索条件。",
+        "no_clients_yet": "添加您的第一个自定义客户端以开始使用。"
     },
-    "friends": {
-      "search_failed": "搜索用户失败",
-      "request_sent": "已向 {name} 发送好友请求",
-      "request_send_failed": "发送好友请求失败"
+    "marketplace": {
+        "title": "市场",
+        "open_marketplace": "市场",
+        "search_placeholder": "搜索预设...",
+        "share_local": "分享您的预设",
+        "share_current": "分享当前预设",
+        "share_modal_title": "分享预设",
+        "title_label": "标题",
+        "title_placeholder": "我的预设",
+        "description_label": "描述",
+        "description_placeholder": "描述您的预设",
+        "public_label": "公开",
+        "private_label": "私密",
+        "make_private": "设为私密",
+        "make_public": "设为公开",
+        "edit_modal_title": "编辑预设",
+        "delete_confirm": "确定要删除此预设吗？此操作不可撤销。",
+        "share": "分享",
+        "sharing": "正在分享...",
+        "shared_success": "预设已分享！",
+        "shared_failed": "分享预设失败",
+        "updated_success": "预设已更新",
+        "updated_failed": "更新预设失败",
+        "deleted_success": "预设已删除",
+        "deleted_failed": "删除预设失败",
+        "apply": "应用",
+        "like": "点赞",
+        "by_user": "由 {name}",
+        "no_items": "暂无预设",
+        "preset_details_title": "预设详情",
+        "preset_details": "预设详情",
+        "comments": "评论",
+        "no_comments": "暂无评论",
+        "add_comment": "添加评论",
+        "comment_placeholder": "撰写评论...",
+        "preset_picker_label": "选择本地预设",
+        "preset_picker_placeholder": "选择一个预设...",
+        "no_local_presets": "您还没有任何预设",
+        "by_author": "作者：{name}",
+        "sort_comments": "评论最多",
+        "sort_downloads": "下载次数最多",
+        "sort_newest": "最新",
+        "sort_popular": "受欢迎的"
     },
-    "account": {
-      "username_required": "用户名为必填项",
-      "account_updated": "账户更新成功！",
-      "account_update_failed": "更新账户失败：{error}",
-      "account_added": "账户添加成功！",
-      "account_add_failed": "添加账户失败：{error}",
-      "account_deleted": "账户删除成功！",
-      "account_delete_failed": "删除账户失败：{error}",
-      "nickname_update_failed": "更新昵称失败。请重试。"
+    "events": {
+        "halloween": {
+            "greeting": "万圣节快乐！",
+            "message": "诡异季节来了！🎃",
+            "tooltip": "万圣节快乐！（10月25日-11月5日）"
+        }
     },
-    "modal": {
-      "settings_reset_success": "设置重置成功！",
-      "settings_reset_failed": "重置设置失败：{error}"
+    "logs": {
+        "copy_logs": "复制日志",
+        "title": "{client} 日志",
+        "view": "查看日志"
     },
-    "sync": {
-      "offline_error": "离线时无法同步",
-      "already_in_progress": "同步已在进行中",
-      "syncing": "正在同步到云端...",
-      "success": "同步成功完成！",
-      "failed": "同步失败：{error}",
-      "login_required": "请登录以同步"
-    }
-  },
-  "discord": {
-    "details": {
-      "in_menu": "在菜单中",
-      "in_game": "游戏中"
+    "installation": {
+        "downloading": "正在下载",
+        "extracting": "正在解压",
+        "download_complete": "下载完成",
+        "installation_complete": "安装完成"
     },
-    "states": {
-      "browsing_clients": "浏览客户端",
-      "configuring_settings": "配置设置",
-      "enjoying_visuals": "欣赏界面",
-      "watching_client_behavior": "观察客户端行为",
-      "in_profile": "查看资料",
-      "watching_about": "浏览关于页面",
-      "debugging": "调试中",
-      "logging_in": "登录中",
-      "browsing_friends": "查看好友动态",
-      "browsing_news": "阅读新闻",
-      "browsing_custom_clients": "浏览自定义客户端"
-    }
-  },
-  "modal": {
-    "client_crash": {
-      "title": "{name} 的崩溃报告"
-    }
-  },
-  "news": {
-    "loading": "正在加载新闻...",
-    "error_title": "加载新闻出错",
-    "retry": "重试",
-    "no_news": "暂无新闻",
-    "no_news_description": "当前没有可显示的新闻。",
-    "updated_at": "更新于",
-    "not_found": "未找到新闻",
-    "server_error": "服务器发生错误",
-    "network_error": "网络连接错误",
-    "fetch_failed": "获取新闻失败：{error}",
-    "fetch_failed_toast": "加载新闻失败",
-    "new": "新",
-    "time": {},
-    "search_placeholder": "搜索新闻...",
-    "mark_all_read": "标记全部为已读",
-    "refresh": "刷新"
-  },
-  "hold_button": {
-    "label": "长按开始！",
-    "info_message": "长按！长按！长按！长按！长按！长按！长按！长按！"
-  },
-  "client": {
-    "details": {
-      "loading": "正在加载详情...",
-      "info_tab": "信息",
-      "screenshots_tab": "截图",
-      "rating": "评分",
-      "no_rating": "暂无评分",
-      "login_to_rate": "登录后即可评分",
-      "source_link": "源链接",
-      "created": "创建时间",
-      "changelog": "更新日志",
-      "no_changelog": "暂无更新日志",
-      "no_screenshots": "暂无截图",
-      "screenshot_viewer": {
-        "zoom_percent": "{percent}%",
-        "image_counter": "{current} / {total}",
-        "controls": {
-          "esc_close": "ESC - 关闭",
-          "esc_reset": "ESC - 重置缩放",
-          "navigate": "← → - 导航",
-          "click_zoom": "点击 - 缩放 | 滚轮 - 缩放",
-          "drag_pan": "拖拽 - 平移 | +/- - 缩放 | 0 - 重置"
+    "login": "您需要登录您的帐户。",
+    "notifications": {
+        "friend_request_received": {
+            "title": "好友请求",
+            "message": "{name} 向你发送了好友请求！"
+        },
+        "friend_request_accepted": {
+            "title": "好友请求已接受",
+            "message": "{name} 接受了你的好友请求！"
         }
-      },
-      "no_changelog_desc": "更新与改动将显示在此处。",
-      "comments_tab": "评论"
     },
-    "comments": {
-      "delete": "删除",
-      "empty": "暂无评论。快来发表你的见解吧！",
-      "placeholder": "写一条评论..."
-    }
-  },
-  "customization": {},
-  "updater": {
-    "update_available": "有可用更新",
-    "current": "当前",
-    "latest": "最新",
-    "changelog": "更新日志",
-    "download_install": "下载并安装",
-    "downloading": "正在下载...",
-    "skip": "跳过",
-    "starting_download": "开始下载更新...",
-    "update_installed": "更新安装成功！应用将重启。",
-    "update_failed": "更新失败：{error}",
-    "check_for_updates": "检查更新",
-    "checking_updates": "正在检查更新...",
-    "up_to_date": "您已是最新版本！",
-    "show_more": "再显示 {count} 个版本",
-    "show_less": "收起",
-    "release_types": {},
-    "categories": {
-      "feature": "功能",
-      "improvement": "改善"
-    },
-    "no_update": "未找到更新"
-  },
-  "custom_clients": {
-    "add": "添加自定义客户端",
-    "running": "运行中",
-    "edit": "编辑",
-    "delete": "删除",
-    "added": "已添加",
-    "stop": "停止",
-    "launch": "启动",
-    "display_settings": "显示设置",
-    "display_mode": "显示模式",
-    "display_mode_separate": "分离",
-    "display_mode_global": "全局",
-    "no_results": "尝试调整您的搜索条件。",
-    "no_clients_yet": "添加您的第一个自定义客户端以开始使用。"
-  },
-  "marketplace": {
-    "title": "市场",
-    "open_marketplace": "市场",
-    "search_placeholder": "搜索预设...",
-    "share_local": "分享您的预设",
-    "share_current": "分享当前预设",
-    "share_modal_title": "分享预设",
-    "title_label": "标题",
-    "title_placeholder": "我的预设",
-    "description_label": "描述",
-    "description_placeholder": "描述您的预设",
-    "public_label": "公开",
-    "private_label": "私密",
-    "make_private": "设为私密",
-    "make_public": "设为公开",
-    "edit_modal_title": "编辑预设",
-    "delete_confirm": "确定要删除此预设吗？此操作不可撤销。",
-    "share": "分享",
-    "sharing": "正在分享...",
-    "shared_success": "预设已分享！",
-    "shared_failed": "分享预设失败",
-    "updated_success": "预设已更新",
-    "updated_failed": "更新预设失败",
-    "deleted_success": "预设已删除",
-    "deleted_failed": "删除预设失败",
-    "apply": "应用",
-    "like": "点赞",
-    "by_user": "由 {name}",
-    "no_items": "暂无预设",
-    "preset_details_title": "预设详情",
-    "preset_details": "预设详情",
-    "comments": "评论",
-    "no_comments": "暂无评论",
-    "add_comment": "添加评论",
-    "comment_placeholder": "撰写评论...",
-    "preset_picker_label": "选择本地预设",
-    "preset_picker_placeholder": "选择一个预设...",
-    "no_local_presets": "您还没有任何预设"
-  },
-  "events": {
-    "halloween": {
-      "greeting": "万圣节快乐！",
-      "message": "诡异季节来了！🎃",
-      "tooltip": "万圣节快乐！（10月25日-11月5日）"
+    "achievements": {
+        "title": "成就",
+        "unlocked_title": "成就已解锁: {name}",
+        "locked": "未解锁",
+        "unlocked_at": "解锁于 {date}",
+        "owned_percentage": "{percent}% 的玩家拥有此成就",
+        "login_to_unlock": "您需要登录才能解锁此成就。",
+        "secret_title": "隐藏成就",
+        "secret_description": "继续玩下去以揭开这个秘密！",
+        "list": {
+            "PLAYED_1Hour": {
+                "name": "小试牛刀",
+                "description": "累计游玩 1 小时。"
+            },
+            "PLAYED_10Hours": {
+                "name": "持之以恒",
+                "description": "累计游玩 10 小时。"
+            },
+            "FIRST_GAME": {
+                "name": "迈出第一步",
+                "description": "启动您的第一个客户端。"
+            },
+            "SECRET_FINDER": {
+                "name": "秘密发现者",
+                "description": "你发现了一个秘密！"
+            },
+            "SOCIAL_BUTTERFLY": {
+                "name": "社交高手",
+                "description": "在个人资料中添加社交链接。"
+            },
+            "FREQUENT_FLYER": {
+                "name": "常客",
+                "description": "启动客户端 50 次。"
+            },
+            "PRESET_MAX": {
+                "name": "时尚达人",
+                "description": "创建并分享一个自定义预设。"
+            },
+            "BETA_TESTER": {
+                "name": "内测玩家",
+                "description": "加入测试计划。"
+            },
+            "COLLECTOR": {
+                "name": "收藏家",
+                "description": "收藏 5 个不同的客户端。"
+            },
+            "NIGHT_OWL": {
+                "name": "熬夜冠军",
+                "description": "在凌晨 2 点到 5 点之间游玩。"
+            },
+            "EARLY_BIRD": {
+                "name": "早起鸟儿",
+                "description": "在凌晨 5 点到 8 点之间游玩。"
+            },
+            "WEEKEND_WARRIOR": {
+                "name": "下班后",
+                "description": "在周末游玩。"
+            }
+        }
     }
-  },
-  "logs": {
-    "copy_logs": "复制日志",
-    "title": "{client} 日志",
-    "view": "查看日志"
-  },
-  "installation": {
-    "downloading": "正在下载",
-    "extracting": "正在解压",
-    "download_complete": "下载完成",
-    "installation_complete": "安装完成"
-  },
-  "login": "您需要登录您的帐户。"
 }
diff --git a/src/main.ts b/src/main.ts
index 1f026ba2..10aea2c2 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,34 +1,17 @@
 import { createApp } from "vue";
 import App from "./App.vue";
-import Vue3Lottie from "vue3-lottie";
-import i18n from './i18n/index';
-import { initializeApiUrl } from './config';
-import { loader } from '@guolao/vue-monaco-editor';
-
-import * as Sentry from "@sentry/vue";
+import i18n from "./i18n/index";
+import { initializeApiUrl } from "./config";
+import { loader } from "@guolao/vue-monaco-editor";
 
 loader.config({
-  paths: {
-    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.55/min/vs',
-  },
-})
-
-const app = createApp(App)
-  .use(Vue3Lottie)
-  .use(i18n);
+    paths: {
+        vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.55/min/vs",
+    },
+});
 
-initializeApiUrl()
-  .finally(() => {
-    app.mount('#app');
-  });
+const app = createApp(App).use(i18n);
 
-Sentry.init({
-  app,
-  dsn: "https://2220bc70de22a1841c3792c4bf314731@o4510521933889536.ingest.de.sentry.io/4510521935528016",
-  sendDefaultPii: true,
-  integrations: [
-    Sentry.replayIntegration()
-  ],
-  replaysSessionSampleRate: 0.1,
-  replaysOnErrorSampleRate: 1.0
-});
\ No newline at end of file
+initializeApiUrl().finally(() => {
+    app.mount("#app");
+});
diff --git a/src/services/achievementService.ts b/src/services/achievementService.ts
new file mode 100644
index 00000000..10613f34
--- /dev/null
+++ b/src/services/achievementService.ts
@@ -0,0 +1,40 @@
+import { apiClient } from "./apiClient";
+
+export interface Achievement {
+    id: number;
+    key: string;
+    icon: string;
+    hidden: boolean;
+    receivePercentage: number;
+}
+
+export interface UserAchievement {
+    achievement: Achievement;
+    unlockedAt: string;
+}
+
+class AchievementService {
+    private achievementsCache: Achievement[] | null = null;
+
+    async getAllAchievements(): Promise<Achievement[]> {
+        if (this.achievementsCache) {
+            return this.achievementsCache;
+        }
+        const achievements =
+            await apiClient.get<Achievement[]>("/achievements");
+        this.achievementsCache = achievements;
+        return achievements;
+    }
+
+    async getUserAchievements(userId: number): Promise<UserAchievement[]> {
+        return await apiClient.get<UserAchievement[]>(
+            `/achievements/users/${userId}`
+        );
+    }
+
+    async unlockAchievement(key: string): Promise<void> {
+        return await apiClient.post(`/achievements/unlock/${key}`, {});
+    }
+}
+
+export const achievementService = new AchievementService();
diff --git a/src/services/apiClient.ts b/src/services/apiClient.ts
index dc8486b6..13300985 100644
--- a/src/services/apiClient.ts
+++ b/src/services/apiClient.ts
@@ -1,21 +1,22 @@
-import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
-import { getApiBaseWithVersion, ensureApiUrl } from '../config';
-import { getCurrentLanguage } from '../i18n';
+import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from "axios";
+import { getApiBaseWithVersion, ensureApiUrl } from "../config";
+import { getCurrentLanguage } from "../i18n";
+import { useToast } from "./toastService";
 
 export interface ApiResponse<T> {
     success: boolean;
     data: T;
     error: string | null;
-    timestamp: string;
+    timestamp: number | string;
 }
 
 const isApiResponse = (value: any): value is ApiResponse<any> => {
     return (
         !!value &&
-        typeof value === 'object' &&
-        typeof value.success === 'boolean' &&
-        'data' in value &&
-        'timestamp' in value
+        typeof value === "object" &&
+        typeof value.success === "boolean" &&
+        "data" in value &&
+        "timestamp" in value
     );
 };
 
@@ -23,15 +24,15 @@ export class ApiResponseError extends Error {
     response: { status: number; data: ApiResponse<any> };
 
     constructor(resp: ApiResponse<any>) {
-        super(resp?.error || 'Request failed');
-        this.name = 'ApiResponseError';
+        super(resp?.error || "Request failed");
+        this.name = "ApiResponseError";
         this.response = { status: 200, data: resp };
     }
 }
 
 class ApiClient {
     private client = axios.create({
-        baseURL: ''
+        baseURL: "",
     });
 
     constructor() {
@@ -43,59 +44,150 @@ class ApiClient {
             await ensureApiUrl();
             const baseUrl = getApiBaseWithVersion();
 
-            if (config.url?.startsWith('/')) {
+            if (config.url?.startsWith("/")) {
                 config.url = `${baseUrl}${config.url}`;
             }
 
-            const token = localStorage.getItem('authToken');
+            const token = localStorage.getItem("authToken");
             if (token) {
                 config.headers = config.headers || {};
-                config.headers['Authorization'] = `Bearer ${token}`;
+                config.headers["Authorization"] = `Bearer ${token}`;
             }
 
             config.headers = config.headers || {};
-            config.headers['Accept-Language'] = getCurrentLanguage() || 'en';
+            config.headers["Accept-Language"] = getCurrentLanguage() || "en";
 
             return config;
         });
-    }
-
-    async get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
-        const resp = await this.executeRequest<any>(url, { ...config, method: 'GET' });
-        return this.unwrapResponse<T>(resp.data);
-    }
 
+        this.client.interceptors.response.use(
+            (response) => response,
+            async (error: AxiosError) => {
+                const { addToast } = useToast();
+
+                const originalRequest: any = error.config;
+                if (
+                    error.response?.status === 401 &&
+                    !originalRequest?._retry
+                ) {
+                    originalRequest._retry = true;
+
+                    const ok = await this.refreshingPromise;
+                    this.refreshingPromise = null;
+                    if (ok) {
+                        const token = localStorage.getItem("authToken");
+                        if (token) {
+                            originalRequest.headers =
+                                originalRequest.headers || {};
+                            originalRequest.headers["Authorization"] =
+                                `Bearer ${token}`;
+                        }
+                        return this.client.request(originalRequest);
+                    } else {
+                        localStorage.removeItem("authToken");
+                        return Promise.reject(error);
+                    }
+                }
+
+                let errorMessage = "An unexpected error occurred";
+
+                if (
+                    error.response?.data &&
+                    isApiResponse(error.response.data)
+                ) {
+                    errorMessage =
+                        (error.response.data as ApiResponse<any>).error ||
+                        errorMessage;
+                } else if (error.message) {
+                    errorMessage = error.message;
+                }
+
+                if (error.config?.headers?.["X-Skip-Toast"] === "true") {
+                    return Promise.reject(error);
+                }
+
+                addToast(errorMessage, "error");
+                return Promise.reject(error);
+            }
+        );
 
-    async post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
-        const resp = await this.executeRequest<any>(url, { ...config, method: 'POST', data });
-        return this.unwrapResponse<T>(resp.data);
+        this.refreshingPromise = null;
     }
 
+    private refreshingPromise: Promise<boolean> | null = null;
 
-    async put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
-        const resp = await this.executeRequest<any>(url, { ...config, method: 'PUT', data });
-        return this.unwrapResponse<T>(resp.data);
+    async get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+        const resp = await this.executeRequest<any>(url, {
+            ...config,
+            method: "GET",
+        });
+        return this.unwrapResponse<T>(resp.data, config);
     }
 
+    async post<T = any>(
+        url: string,
+        data?: any,
+        config?: AxiosRequestConfig
+    ): Promise<T> {
+        const resp = await this.executeRequest<any>(url, {
+            ...config,
+            method: "POST",
+            data,
+        });
+        return this.unwrapResponse<T>(resp.data, config);
+    }
 
-    async patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
-        const resp = await this.executeRequest<any>(url, { ...config, method: 'PATCH', data });
-        return this.unwrapResponse<T>(resp.data);
+    async put<T = any>(
+        url: string,
+        data?: any,
+        config?: AxiosRequestConfig
+    ): Promise<T> {
+        const resp = await this.executeRequest<any>(url, {
+            ...config,
+            method: "PUT",
+            data,
+        });
+        return this.unwrapResponse<T>(resp.data, config);
     }
 
+    async patch<T = any>(
+        url: string,
+        data?: any,
+        config?: AxiosRequestConfig
+    ): Promise<T> {
+        const resp = await this.executeRequest<any>(url, {
+            ...config,
+            method: "PATCH",
+            data,
+        });
+        return this.unwrapResponse<T>(resp.data, config);
+    }
 
-    async delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
-        const resp = await this.executeRequest<any>(url, { ...config, method: 'DELETE' });
-        return this.unwrapResponse<T>(resp.data);
+    async delete<T = any>(
+        url: string,
+        config?: AxiosRequestConfig
+    ): Promise<T> {
+        const resp = await this.executeRequest<any>(url, {
+            ...config,
+            method: "DELETE",
+        });
+        return this.unwrapResponse<T>(resp.data, config);
     }
 
-    private async executeRequest<T>(url: string, config: AxiosRequestConfig): Promise<AxiosResponse<T>> {
+    private async executeRequest<T>(
+        url: string,
+        config: AxiosRequestConfig
+    ): Promise<AxiosResponse<T>> {
         return await this.client.request<T>({ url, ...config });
     }
 
-    private unwrapResponse<T>(payload: any): T {
+    private unwrapResponse<T>(payload: any, config?: AxiosRequestConfig): T {
         if (isApiResponse(payload)) {
             if (!payload.success) {
+                if (config?.headers?.["X-Skip-Toast"] !== "true") {
+                    const { addToast } = useToast();
+                    addToast(payload.error || "Request failed", "error");
+                }
                 throw new ApiResponseError(payload);
             }
             return payload.data as T;
diff --git a/src/services/authClient.ts b/src/services/authClient.ts
index 21d611a6..7d558acd 100644
--- a/src/services/authClient.ts
+++ b/src/services/authClient.ts
@@ -1,4 +1,4 @@
-import { apiClient } from './apiClient';
+import { apiClient } from "./apiClient";
 
 export const apiGet = apiClient.get.bind(apiClient);
 export const apiPost = apiClient.post.bind(apiClient);
diff --git a/src/services/bootLogService.ts b/src/services/bootLogService.ts
index 83ca1452..2002c522 100644
--- a/src/services/bootLogService.ts
+++ b/src/services/bootLogService.ts
@@ -1,9 +1,9 @@
-import { ref } from 'vue';
+import { ref } from "vue";
 
 export interface BootLogEntry {
     id: number;
     timestamp: string;
-    level: 'OK' | 'INFO' | 'WARN' | 'ERROR';
+    level: "OK" | "INFO" | "WARN" | "ERROR";
     service: string;
     message: string;
 }
@@ -17,125 +17,137 @@ class BootLogService {
         const elapsed = Date.now() - this.startTime;
         const seconds = Math.floor(elapsed / 1000);
         const milliseconds = elapsed % 1000;
-        return `${seconds.toString().padStart(2, '0')}:${(milliseconds / 10).toFixed(0).padStart(2, '0')}.${(milliseconds % 10).toString()}`;
+        return `${seconds.toString().padStart(2, "0")}:${(milliseconds / 10).toFixed(0).padStart(2, "0")}.${(milliseconds % 10).toString()}`;
     }
 
-    private addLog(level: BootLogEntry['level'], service: string, message: string) {
+    private addLog(
+        level: BootLogEntry["level"],
+        service: string,
+        message: string
+    ) {
         this.logs.value.push({
             id: ++this.logIdCounter,
             timestamp: this.getTimestamp(),
             level,
             service,
-            message
+            message,
         });
     }
 
     start() {
-        this.addLog('OK', 'init', 'CollapseLoader starting...');
+        this.addLog("OK", "init", "CollapseLoader starting...");
     }
 
     systemInit() {
-        this.addLog('INFO', 'init', 'Initializing system components');
+        this.addLog("INFO", "init", "Initializing system components");
     }
 
     themeApplied(theme: string) {
-        this.addLog('OK', 'theme', `Theme applied: ${theme} [OK]`);
+        this.addLog("OK", "theme", `Theme applied: ${theme} [OK]`);
     }
 
     languageApplied(language: string) {
-        this.addLog('OK', 'i18n', `Language system initialized: ${language} [OK]`);
+        this.addLog(
+            "OK",
+            "i18n",
+            `Language system initialized: ${language} [OK]`
+        );
     }
 
     cursorApplied() {
-        this.addLog('OK', 'cursor', `Event cursor applied [OK]`);
+        this.addLog("OK", "cursor", `Event cursor applied [OK]`);
     }
 
     eventListenersInit() {
-        this.addLog('INFO', 'events', 'Registering event listeners...');
+        this.addLog("INFO", "events", "Registering event listeners...");
     }
 
     eventListenersReady() {
-        this.addLog('OK', 'events', 'Event listeners registered [OK]');
+        this.addLog("OK", "events", "Event listeners registered [OK]");
     }
 
     serverConnectivityCheck() {
-        this.addLog('INFO', 'network', 'Checking server connectivity...');
+        this.addLog("INFO", "network", "Checking server connectivity...");
     }
 
     cdnOnline() {
-        this.addLog('OK', 'cdn', 'CDN connection established [OK]');
+        this.addLog("OK", "cdn", "CDN connection established [OK]");
     }
 
     cdnOffline() {
-        this.addLog('ERROR', 'cdn', 'CDN connection failed [ERROR]');
+        this.addLog("ERROR", "cdn", "CDN connection failed [ERROR]");
     }
 
     webApiOnline() {
-        this.addLog('OK', 'webapi', 'API connection verified [OK]');
+        this.addLog("OK", "webapi", "API connection verified [OK]");
     }
 
     webApiOffline() {
-        this.addLog('ERROR', 'webapi', 'API connection failed [ERROR]');
+        this.addLog("ERROR", "webapi", "API connection failed [ERROR]");
     }
 
     apiInit() {
-        this.addLog('INFO', 'api', 'Initializing API bridge...');
+        this.addLog("INFO", "api", "Initializing API bridge...");
     }
 
     apiInitSuccess() {
-        this.addLog('OK', 'tauri', 'Tauri API bridge initialized [OK]');
+        this.addLog("OK", "tauri", "Tauri API bridge initialized [OK]");
     }
 
     apiInitFailed() {
-        this.addLog('ERROR', 'tauri', 'Tauri API bridge failed [ERROR]');
+        this.addLog("ERROR", "tauri", "Tauri API bridge failed [ERROR]");
     }
 
     authCheck() {
-        this.addLog('INFO', 'auth', 'Checking authentication status...');
+        this.addLog("INFO", "auth", "Checking authentication status...");
     }
 
     authSuccess() {
-        this.addLog('OK', 'auth', 'User authenticated [OK]');
+        this.addLog("OK", "auth", "User authenticated [OK]");
     }
 
     authSkipped() {
-        this.addLog('INFO', 'auth', 'No authentication token found');
+        this.addLog("INFO", "auth", "No authentication token found");
     }
 
     userDataInit() {
-        this.addLog('INFO', 'user', 'Loading user data...');
+        this.addLog("INFO", "user", "Loading user data...");
     }
 
     userDataSuccess() {
-        this.addLog('OK', 'user', 'User data structures ready [OK]');
+        this.addLog("OK", "user", "User data structures ready [OK]");
     }
 
     userDataFailed() {
-        this.addLog('WARN', 'user', 'Failed to load user data [WARN]');
+        this.addLog("WARN", "user", "Failed to load user data [WARN]");
     }
 
     syncInit() {
-        this.addLog('INFO', 'sync', 'Initializing synchronization service...');
+        this.addLog("INFO", "sync", "Initializing synchronization service...");
     }
 
     syncReady() {
-        this.addLog('OK', 'sync', 'Synchronization service loaded [OK]');
+        this.addLog("OK", "sync", "Synchronization service loaded [OK]");
     }
 
     toastSystemReady() {
-        this.addLog('OK', 'toast', 'Notification system active [OK]');
+        this.addLog("OK", "toast", "Notification system active [OK]");
     }
 
     flagsLoaded() {
-        this.addLog('OK', 'config', 'Configuration flags loaded [OK]');
+        this.addLog("OK", "config", "Configuration flags loaded [OK]");
     }
 
     flagsLoadFailed() {
-        this.addLog('ERROR', 'config', 'Failed to load configuration flags [ERROR]');
+        this.addLog(
+            "ERROR",
+            "config",
+            "Failed to load configuration flags [ERROR]"
+        );
     }
 
     systemReady() {
-        this.addLog('INFO', 'system', 'All systems operational');
+        this.addLog("INFO", "system", "All systems operational");
     }
 
     clear() {
@@ -148,9 +160,13 @@ class BootLogService {
         return this.logs;
     }
 
-    addCustomLog(level: BootLogEntry['level'], service: string, message: string) {
+    addCustomLog(
+        level: BootLogEntry["level"],
+        service: string,
+        message: string
+    ) {
         this.addLog(level, service, message);
     }
 }
 
-export const bootLogService = new BootLogService();
\ No newline at end of file
+export const bootLogService = new BootLogService();
diff --git a/src/services/changelogParser.ts b/src/services/changelogParser.ts
index 9179ffd5..47a0f856 100644
--- a/src/services/changelogParser.ts
+++ b/src/services/changelogParser.ts
@@ -1,6 +1,6 @@
-import i18n from '../i18n';
+import i18n from "../i18n";
 
-export type Category = 'feature' | 'improvement' | 'bugfix' | 'other';
+export type Category = "feature" | "improvement" | "bugfix" | "other";
 
 export interface ChangeItem {
     category: Category;
@@ -16,15 +16,15 @@ export interface ChangelogEntry {
 }
 
 const CATEGORY_KEYS: Record<Category, string> = {
-    feature: 'changelog.category.feature',
-    improvement: 'changelog.category.improvement',
-    bugfix: 'changelog.category.bugfix',
-    other: 'changelog.category.other',
+    feature: "changelog.category.feature",
+    improvement: "changelog.category.improvement",
+    bugfix: "changelog.category.bugfix",
+    other: "changelog.category.other",
 };
 
 export function resolveDescription(keyOrText: string) {
-    if (!keyOrText) return '';
-    if (keyOrText.includes('.')) {
+    if (!keyOrText) return "";
+    if (keyOrText.includes(".")) {
         return i18n.global.t(keyOrText) as string;
     }
     return keyOrText;
@@ -38,16 +38,17 @@ export function parseChangelog(raw: any): ChangelogEntry[] {
     return raw.map((entry: any) => {
         const changes: ChangeItem[] = Array.isArray(entry.changes)
             ? entry.changes.map((c: any) => ({
-                category: (c.category || 'other').toLowerCase() as Category,
-                description_key: c.description_key || c.description || c.text || '',
-                icon: c.icon || (c.category === 'Feature' ? '✨' : undefined),
-            }))
+                  category: (c.category || "other").toLowerCase() as Category,
+                  description_key:
+                      c.description_key || c.description || c.text || "",
+                  icon: c.icon || (c.category === "Feature" ? "✨" : undefined),
+              }))
             : [];
 
         return {
-            version: entry.version || entry.tag || '',
+            version: entry.version || entry.tag || "",
             changes,
-            date: entry.date || entry.published_at || '',
+            date: entry.date || entry.published_at || "",
             highlights: Array.isArray(entry.highlights) ? entry.highlights : [],
         } as ChangelogEntry;
     });
@@ -63,14 +64,14 @@ export function renderChange(change: ChangeItem) {
 
 function defaultIconForCategory(category: Category) {
     switch (category) {
-        case 'feature':
-            return '✨';
-        case 'improvement':
-            return '🔧';
-        case 'bugfix':
-            return '🐛';
+        case "feature":
+            return "✨";
+        case "improvement":
+            return "🔧";
+        case "bugfix":
+            return "🐛";
         default:
-            return '🔹';
+            return "🔹";
     }
 }
 
diff --git a/src/services/marketplaceService.ts b/src/services/marketplaceService.ts
index a8e05318..4dde984b 100644
--- a/src/services/marketplaceService.ts
+++ b/src/services/marketplaceService.ts
@@ -1,38 +1,56 @@
-import { apiGet, apiPost, apiPatch, apiDelete } from './apiClient';
-import type { MarketplacePreset, MarketplaceTheme } from '../types/presets';
+import { apiGet, apiPost, apiPatch, apiDelete } from "./apiClient";
+import type { MarketplacePreset, MarketplaceTheme } from "../types/presets";
 
 const themeFieldAliases: Record<keyof MarketplaceTheme, string[]> = {
-    customCSS: ['customCSS', 'custom_css', 'customCss'],
-    enableCustomCSS: ['enableCustomCSS', 'enable_custom_css', 'enableCustomCss'],
-    base100: ['base100'],
-    base200: ['base200'],
-    base300: ['base300'],
-    baseContent: ['baseContent', 'base_content'],
-    primary: ['primary'],
-    primaryContent: ['primaryContent', 'primary_content'],
-    secondary: ['secondary'],
-    secondaryContent: ['secondaryContent', 'secondary_content'],
-    accent: ['accent'],
-    accentContent: ['accentContent', 'accent_content'],
-    neutral: ['neutral'],
-    neutralContent: ['neutralContent', 'neutral_content'],
-    info: ['info'],
-    infoContent: ['infoContent', 'info_content'],
-    success: ['success'],
-    successContent: ['successContent', 'success_content'],
-    warning: ['warning'],
-    warningContent: ['warningContent', 'warning_content'],
-    error: ['error'],
-    errorContent: ['errorContent', 'error_content'],
+    customCSS: ["customCSS", "custom_css", "customCss"],
+    enableCustomCSS: [
+        "enableCustomCSS",
+        "enable_custom_css",
+        "enableCustomCss",
+    ],
+    base100: ["base100"],
+    base200: ["base200"],
+    base300: ["base300"],
+    baseContent: ["baseContent", "base_content"],
+    primary: ["primary"],
+    primaryContent: ["primaryContent", "primary_content"],
+    secondary: ["secondary"],
+    secondaryContent: ["secondaryContent", "secondary_content"],
+    accent: ["accent"],
+    accentContent: ["accentContent", "accent_content"],
+    neutral: ["neutral"],
+    neutralContent: ["neutralContent", "neutral_content"],
+    info: ["info"],
+    infoContent: ["infoContent", "info_content"],
+    success: ["success"],
+    successContent: ["successContent", "success_content"],
+    warning: ["warning"],
+    warningContent: ["warningContent", "warning_content"],
+    error: ["error"],
+    errorContent: ["errorContent", "error_content"],
+    backgroundImage: ["backgroundImage", "background_image"],
+    backgroundBlur: ["backgroundBlur", "background_blur"],
+    backgroundOpacity: ["backgroundOpacity", "background_opacity"],
 };
 
 function extractTheme(source: Record<string, any> = {}): MarketplaceTheme {
     const theme: MarketplaceTheme = {};
-    for (const key of Object.keys(themeFieldAliases) as (keyof MarketplaceTheme)[]) {
+    for (const key of Object.keys(
+        themeFieldAliases
+    ) as (keyof MarketplaceTheme)[]) {
         const aliases = themeFieldAliases[key];
         for (const alias of aliases) {
             if (Object.prototype.hasOwnProperty.call(source, alias)) {
-                theme[key] = source[alias];
+                let val = source[alias];
+
+                if (
+                    (key === "backgroundBlur" || key === "backgroundOpacity") &&
+                    val !== null &&
+                    val !== undefined
+                ) {
+                    val = Number(val);
+                }
+                theme[key] = val;
                 break;
             }
         }
@@ -44,7 +62,7 @@ function normalizePreset(raw: Record<string, any>): MarketplacePreset {
     const themeSource = raw.theme ?? raw.preset_data ?? raw;
     const theme = extractTheme(themeSource);
     const presetId: number | string =
-        raw.id ?? raw.presetId ?? raw.preset_id ?? raw.name ?? raw.title ?? '';
+        raw.id ?? raw.presetId ?? raw.preset_id ?? raw.name ?? raw.title ?? "";
     const ownerUsername =
         raw.author?.username ??
         raw.author?.name ??
@@ -61,21 +79,34 @@ function normalizePreset(raw: Record<string, any>): MarketplacePreset {
         author: raw.author,
         liked: raw.liked ?? raw.liked_by_user ?? false,
         theme,
-        preset_data: raw.preset_data ?? (raw.theme ? raw.theme : themeSource === raw ? undefined : themeSource),
+        preset_data:
+            raw.preset_data ??
+            (raw.theme
+                ? raw.theme
+                : themeSource === raw
+                  ? undefined
+                  : themeSource),
     };
 }
 
 function normalizeList(payload: any): MarketplacePreset[] {
     if (!payload) return [];
     if (Array.isArray(payload)) return payload.map(normalizePreset);
-    const list = payload.results ?? payload.items ?? payload.presets ?? payload.data ?? [];
+    const list =
+        payload.results ??
+        payload.items ??
+        payload.presets ??
+        payload.data ??
+        [];
     if (Array.isArray(list)) return list.map(normalizePreset);
     return [];
 }
 
 export class MarketplaceService {
-    async listPresets(params: Record<string, any> = {}): Promise<MarketplacePreset[]> {
-        const data = await apiGet('/presets', { params });
+    async listPresets(
+        params: Record<string, any> = {}
+    ): Promise<MarketplacePreset[]> {
+        const data = await apiGet("/presets", { params });
         return normalizeList(data);
     }
 
@@ -84,8 +115,10 @@ export class MarketplaceService {
         return data ? normalizePreset(data) : null;
     }
 
-    async createPreset(payload: Record<string, any>): Promise<MarketplacePreset> {
-        const data = await apiPost('/presets', payload);
+    async createPreset(
+        payload: Record<string, any>
+    ): Promise<MarketplacePreset> {
+        const data = await apiPost("/presets", payload);
         return normalizePreset(data);
     }
 
@@ -101,7 +134,10 @@ export class MarketplaceService {
         return apiPost(`/presets/${id}/download`);
     }
 
-    async updatePreset(id: number | string, payload: Record<string, any>): Promise<MarketplacePreset> {
+    async updatePreset(
+        id: number | string,
+        payload: Record<string, any>
+    ): Promise<MarketplacePreset> {
         const data = await apiPatch(`/presets/${id}`, payload);
         return normalizePreset(data);
     }
@@ -118,7 +154,10 @@ export class MarketplaceService {
         return apiPost(`/presets/${presetId}/comments`, { text });
     }
 
-    async deleteComment(presetId: number | string, commentId: number | string): Promise<any> {
+    async deleteComment(
+        presetId: number | string,
+        commentId: number | string
+    ): Promise<any> {
         return apiDelete(`/presets/${presetId}/comments/${commentId}`);
     }
 }
diff --git a/src/services/modalService.ts b/src/services/modalService.ts
index 1eef719a..99aea09e 100644
--- a/src/services/modalService.ts
+++ b/src/services/modalService.ts
@@ -1,8 +1,9 @@
-import { reactive, markRaw } from 'vue';
+import { reactive, markRaw } from "vue";
 
 export interface ModalOptions {
     title?: string;
     contentClass?: string;
+    size?: "sm" | "md" | "lg" | "xl" | "full";
     [key: string]: any;
 }
 
@@ -24,7 +25,7 @@ export function useModal() {
         props: Record<string, any> = {},
         listeners: Record<string, (...args: any[]) => void> = {}
     ) => {
-        const contentClass = options.contentClass || 'medium full-mobile';
+        const contentClass = options.contentClass || "medium full-mobile";
 
         modals[id] = {
             id,
@@ -53,4 +54,4 @@ export function useModal() {
         hideModal,
         getModals,
     };
-}
\ No newline at end of file
+}
diff --git a/src/services/modrinthService.ts b/src/services/modrinthService.ts
new file mode 100644
index 00000000..34aadc5e
--- /dev/null
+++ b/src/services/modrinthService.ts
@@ -0,0 +1,136 @@
+const MODRINTH_API_URL = "https://api.modrinth.com/v2";
+
+export interface ModrinthSearchResult {
+    project_id: string;
+    project_type: string;
+    slug: string;
+    author: string;
+    title: string;
+    description: string;
+    categories: string[];
+    display_categories: string[];
+    versions: string[];
+    downloads: number;
+    follows: number;
+    icon_url: string;
+    date_created: string;
+    date_modified: string;
+    latest_version: string;
+    license: string;
+    client_side: string;
+    server_side: string;
+    gallery: string[];
+}
+
+export interface ModrinthVersion {
+    id: string;
+    project_id: string;
+    author_id: string;
+    featured: boolean;
+    name: string;
+    version_number: string;
+    changelog: string;
+    changelog_url: string | null;
+    date_published: string;
+    downloads: number;
+    version_type: "release" | "beta" | "alpha";
+    files: {
+        hashes: {
+            sha1: string;
+            sha512: string;
+        };
+        url: string;
+        filename: string;
+        primary: boolean;
+        size: number;
+    }[];
+    dependencies: {
+        version_id: string | null;
+        project_id: string | null;
+        file_name: string | null;
+        dependency_type: "required" | "optional" | "incompatible" | "embedded";
+    }[];
+    game_versions: string[];
+    loaders: string[];
+}
+
+export class ModrinthService {
+    private static async request<T>(
+        endpoint: string,
+        params: Record<string, any> = {}
+    ): Promise<T> {
+        const url = new URL(`${MODRINTH_API_URL}${endpoint}`);
+        Object.keys(params).forEach((key) => {
+            if (params[key] !== undefined && params[key] !== null) {
+                url.searchParams.append(key, String(params[key]));
+            }
+        });
+
+        const response = await fetch(url.toString(), {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+                "User-Agent":
+                    "CollapseLoader/ModrinthIntegration (dest4590@gmail.com)",
+            },
+        });
+
+        if (!response.ok) {
+            throw new Error(
+                `Modrinth API Error: ${response.status} ${response.statusText}`
+            );
+        }
+
+        return response.json();
+    }
+
+    static async searchMods(
+        query: string,
+        filters: {
+            limit?: number;
+            offset?: number;
+            facets?: string;
+            index?:
+                | "relevance"
+                | "downloads"
+                | "followers"
+                | "newest"
+                | "updated";
+        } = {}
+    ): Promise<{
+        hits: ModrinthSearchResult[];
+        offset: number;
+        limit: number;
+        total_hits: number;
+    }> {
+        return this.request("/search", {
+            query,
+            limit: filters.limit || 20,
+            offset: filters.offset || 0,
+            facets: filters.facets,
+            index: filters.index || "relevance",
+        });
+    }
+
+    static async getModVersions(
+        slug: string,
+        loaders: string[] = ["fabric"],
+        game_versions?: string[]
+    ): Promise<ModrinthVersion[]> {
+        const params: Record<string, any> = {};
+
+        if (loaders && loaders.length > 0) {
+            params.loaders = JSON.stringify(loaders);
+        }
+
+        if (game_versions && game_versions.length > 0) {
+            params.game_versions = JSON.stringify(game_versions);
+        }
+
+        return this.request(`/project/${slug}/version`, params);
+    }
+
+    static async getProject(slug: string): Promise<any> {
+        return this.request(`/project/${slug}`);
+    }
+}
diff --git a/src/services/presetService.ts b/src/services/presetService.ts
index bc3edf2f..127a85c2 100644
--- a/src/services/presetService.ts
+++ b/src/services/presetService.ts
@@ -1,33 +1,43 @@
-import { invoke } from '@tauri-apps/api/core';
-import type { ThemePreset, CreatePresetInput, UpdatePresetInput } from '../types/presets';
-import { themeService } from './themeService';
+import { invoke } from "@tauri-apps/api/core";
+import type {
+    ThemePreset,
+    CreatePresetInput,
+    UpdatePresetInput,
+} from "../types/presets";
+import { themeService } from "./themeService";
 
 export class PresetService {
     async getAllPresets(): Promise<ThemePreset[]> {
-        return await invoke<ThemePreset[]>('get_all_presets');
+        return await invoke<ThemePreset[]>("get_all_presets");
     }
 
     async getPreset(id: string): Promise<ThemePreset | null> {
-        return await invoke<ThemePreset | null>('get_preset', { id });
+        return await invoke<ThemePreset | null>("get_preset", { id });
     }
 
     async createPreset(input: CreatePresetInput): Promise<ThemePreset> {
-        return await invoke<ThemePreset>('create_preset', { input });
+        return await invoke<ThemePreset>("create_preset", { input });
     }
 
     async updatePreset(input: UpdatePresetInput): Promise<ThemePreset> {
-        return await invoke<ThemePreset>('update_preset', { input });
+        return await invoke<ThemePreset>("update_preset", { input });
     }
 
     async deletePreset(id: string): Promise<void> {
-        await invoke<void>('delete_preset', { id });
+        await invoke<void>("delete_preset", { id });
     }
 
     async duplicatePreset(id: string, newName: string): Promise<ThemePreset> {
-        return await invoke<ThemePreset>('duplicate_preset', { id, newName: newName });
+        return await invoke<ThemePreset>("duplicate_preset", {
+            id,
+            newName: newName,
+        });
     }
 
-    createPresetFromCurrentSettings(name: string, description?: string): CreatePresetInput {
+    createPresetFromCurrentSettings(
+        name: string,
+        description?: string
+    ): CreatePresetInput {
         const settings = themeService.presetSettings;
 
         return {
@@ -57,6 +67,9 @@ export class PresetService {
             warningContent: settings.warningContent || undefined,
             error: settings.error || undefined,
             errorContent: settings.errorContent || undefined,
+            backgroundImage: settings.backgroundImage || undefined,
+            backgroundBlur: settings.backgroundBlur || undefined,
+            backgroundOpacity: settings.backgroundOpacity || undefined,
         };
     }
 
@@ -86,8 +99,11 @@ export class PresetService {
             warningContent: preset.warningContent,
             error: preset.error,
             errorContent: preset.errorContent,
+            backgroundImage: preset.backgroundImage,
+            backgroundBlur: preset.backgroundBlur,
+            backgroundOpacity: preset.backgroundOpacity,
         });
     }
 }
 
-export const presetService = new PresetService();
\ No newline at end of file
+export const presetService = new PresetService();
diff --git a/src/services/reportService.ts b/src/services/reportService.ts
new file mode 100644
index 00000000..441954d4
--- /dev/null
+++ b/src/services/reportService.ts
@@ -0,0 +1,23 @@
+import { apiClient } from "./apiClient";
+
+export interface CreateReportRequest {
+    reportedUserId: number;
+    reason: string;
+    description?: string;
+}
+
+export interface UserReportResponse {
+    id: number;
+    status: string;
+    createdAt: string;
+}
+
+class ReportService {
+    public async createReport(
+        request: CreateReportRequest
+    ): Promise<UserReportResponse> {
+        return apiClient.post<UserReportResponse>("/reports", request);
+    }
+}
+
+export const reportService = new ReportService();
diff --git a/src/services/router.ts b/src/services/router.ts
index 9c700571..ccb0aca8 100644
--- a/src/services/router.ts
+++ b/src/services/router.ts
@@ -1,13 +1,18 @@
-import { ref } from 'vue';
+import { ref } from "vue";
 
 type RouteName = string;
 
-const currentRoute = ref<RouteName>('home');
+const currentRoute = ref<RouteName>("home");
 const currentParams = ref<Record<string, any> | null>(null);
-const historyStack = ref<Array<{ name: RouteName; params: Record<string, any> | null }>>([]);
+const historyStack = ref<
+    Array<{ name: RouteName; params: Record<string, any> | null }>
+>([]);
 
 function push(name: RouteName, params?: Record<string, any>) {
-    historyStack.value.push({ name: currentRoute.value, params: currentParams.value });
+    historyStack.value.push({
+        name: currentRoute.value,
+        params: currentParams.value,
+    });
     currentRoute.value = name;
     currentParams.value = params || null;
 }
diff --git a/src/services/settingsService.ts b/src/services/settingsService.ts
index 5515964f..193f98c0 100644
--- a/src/services/settingsService.ts
+++ b/src/services/settingsService.ts
@@ -1,5 +1,5 @@
-import { reactive, ref, watch } from 'vue';
-import { invoke } from '@tauri-apps/api/core';
+import { reactive, ref, watch } from "vue";
+import { invoke } from "@tauri-apps/api/core";
 
 export interface Setting<T> {
     value: T;
@@ -27,13 +27,17 @@ class SettingsService {
     async loadSettings(): Promise<void> {
         this.isLoading.value = true;
         try {
-            const loaded = await invoke<SettingsMap>('get_settings');
+            const loaded = await invoke<SettingsMap>("get_settings");
             Object.keys(this.settings).forEach((k) => delete this.settings[k]);
             Object.entries(loaded || {}).forEach(([k, v]) => {
-                this.settings[k] = v;
+                if (v && typeof v === "object" && "value" in v && "show" in v) {
+                    this.settings[k] = v;
+                } else {
+                    this.settings[k] = { value: v, show: true };
+                }
             });
         } catch (err) {
-            console.error('Failed to load settings:', err);
+            console.error("Failed to load settings:", err);
             throw err;
         } finally {
             this.isLoading.value = false;
@@ -44,9 +48,9 @@ class SettingsService {
         this.isSaving.value = true;
         try {
             const payload = settingsArg ?? this.settings;
-            await invoke('save_settings', { inputSettings: payload });
+            await invoke("save_settings", { inputSettings: payload });
         } catch (err) {
-            console.error('Failed to save settings:', err);
+            console.error("Failed to save settings:", err);
             throw err;
         } finally {
             this.isSaving.value = false;
@@ -55,13 +59,13 @@ class SettingsService {
 
     async loadFlags(): Promise<void> {
         try {
-            const loaded = await invoke<FlagsMap>('get_flags');
+            const loaded = await invoke<FlagsMap>("get_flags");
             Object.keys(this.flags).forEach((k) => delete this.flags[k]);
             Object.entries(loaded || {}).forEach(([k, v]) => {
                 this.flags[k] = v;
             });
         } catch (err) {
-            console.error('Failed to load flags:', err);
+            console.error("Failed to load flags:", err);
             throw err;
         }
     }
@@ -74,7 +78,11 @@ class SettingsService {
         this.settings[key].value = value;
     }
 
-    async editSetting(key: string, value: any, show: boolean = true): Promise<void> {
+    async editSetting(
+        key: string,
+        value: any,
+        show: boolean = true
+    ): Promise<void> {
         this.isEditing.value = true;
         try {
             if (this.settings[key]) {
@@ -117,7 +125,7 @@ class SettingsService {
                     try {
                         await this.saveSettings();
                     } catch (e) {
-                        console.error('Auto-save failed', e);
+                        console.error("Auto-save failed", e);
                     }
                 }, 500) as unknown as number;
             },
diff --git a/src/services/syncService.ts b/src/services/syncService.ts
index 2016cab0..ee3313f9 100644
--- a/src/services/syncService.ts
+++ b/src/services/syncService.ts
@@ -1,10 +1,13 @@
-import { invoke } from '@tauri-apps/api/core';
-import { userService, type SyncData } from './userService';
-import { settingsService } from './settingsService';
-import { globalUserStatus } from '../composables/useUserStatus';
+import { invoke } from "@tauri-apps/api/core";
+import { userService, type SyncData, type UserInitData } from "./userService";
+import { settingsService } from "./settingsService";
+import { globalUserStatus } from "../composables/useUserStatus";
 
 export type ToastFunction = (message: string, type: string) => void;
-export type TranslateFunction = (key: string, params?: Record<string, any>) => string;
+export type TranslateFunction = (
+    key: string,
+    params?: Record<string, any>
+) => string;
 
 interface SyncServiceState {
     isOnline: boolean;
@@ -20,24 +23,24 @@ class SyncService {
         isSyncing: false,
         lastSyncTime: null,
         hasCloudData: false,
-        autoSyncEnabled: true
+        autoSyncEnabled: true,
     };
 
     private listeners: ((state: SyncServiceState) => void)[] = [];
     private autoSyncInterval: number | null = null;
 
     constructor() {
-        window.addEventListener('online', () => {
+        window.addEventListener("online", () => {
             this.state.isOnline = true;
             this.notifyListeners();
             if (this.state.autoSyncEnabled && this.isAuthenticated()) {
-                this.autoSync().then(r => {
-                    console.log('Auto-sync completed:', r);
+                this.autoSync().then((r) => {
+                    console.log("Auto-sync completed:", r);
                 });
             }
         });
 
-        window.addEventListener('offline', () => {
+        window.addEventListener("offline", () => {
             this.state.isOnline = false;
             this.notifyListeners();
         });
@@ -48,31 +51,39 @@ class SyncService {
     subscribe(listener: (state: SyncServiceState) => void) {
         this.listeners.push(listener);
         return () => {
-            this.listeners = this.listeners.filter(l => l !== listener);
+            this.listeners = this.listeners.filter((l) => l !== listener);
         };
     }
 
     private notifyListeners() {
-        this.listeners.forEach(listener => listener({ ...this.state }));
+        this.listeners.forEach((listener) => listener({ ...this.state }));
     }
 
     private startAutoSync() {
         if (this.autoSyncInterval) return;
 
-        this.autoSyncInterval = setInterval(() => {
-            if (this.state.isOnline && this.state.autoSyncEnabled && !this.state.isSyncing && this.isAuthenticated()) {
-                this.autoSync().then(r => {
-                    console.log('Auto-sync completed:', r);
-                });
-            }
-        }, 5 * 60 * 1000) as unknown as number;
+        this.autoSyncInterval = setInterval(
+            () => {
+                if (
+                    this.state.isOnline &&
+                    this.state.autoSyncEnabled &&
+                    !this.state.isSyncing &&
+                    this.isAuthenticated()
+                ) {
+                    this.autoSync().then((r) => {
+                        console.log("Auto-sync completed:", r);
+                    });
+                }
+            },
+            5 * 60 * 1000
+        ) as unknown as number;
     }
 
     private isAuthenticated(): boolean {
         try {
             return !!globalUserStatus?.isAuthenticated?.value;
         } catch (e) {
-            console.error('Error checking authentication status:', e);
+            console.error("Error checking authentication status:", e);
             return false;
         }
     }
@@ -82,7 +93,7 @@ class SyncService {
             await this.downloadFromCloud();
             await this.uploadToCloud();
         } catch (error) {
-            console.warn('Auto-sync failed:', error);
+            console.warn("Auto-sync failed:", error);
         }
     }
 
@@ -98,18 +109,63 @@ class SyncService {
             }
             this.notifyListeners();
         } catch (error) {
-            console.error('Failed to get sync status:', error);
+            console.error("Failed to get sync status:", error);
+        }
+    }
+
+    hydrateSyncStatus(data: UserInitData) {
+        if (!this.state.isOnline) return;
+
+        try {
+            const settingsPref =
+                data.preferences.find(
+                    (p) => p.key === "collapseloader.settings"
+                ) || null;
+
+            const maxIsoTimestamp = (
+                timestamps: Array<string | null | undefined>
+            ): string | null => {
+                let max: number | null = null;
+                let maxIso: string | null = null;
+                for (const ts of timestamps) {
+                    if (!ts) continue;
+                    const time = new Date(ts).getTime();
+                    if (Number.isNaN(time)) continue;
+                    if (max === null || time > max) {
+                        max = time;
+                        maxIso = ts;
+                    }
+                }
+                return maxIso;
+            };
+
+            const lastSync = maxIsoTimestamp([
+                settingsPref?.updated_at ?? null,
+                ...data.favorites.map((f) => f.created_at ?? null),
+                ...data.accounts.map((a) => a.updated_at ?? null),
+            ]);
+
+            this.state.lastSyncTime = lastSync;
+            this.state.hasCloudData =
+                !!settingsPref ||
+                data.favorites.length > 0 ||
+                data.accounts.length > 0;
+            this.notifyListeners();
+        } catch (error) {
+            console.error("Failed to hydrate sync status:", error);
         }
     }
 
     async checkAndRestoreOnStartup(): Promise<void> {
         if (!this.state.isOnline) {
-            console.log('Offline - skipping startup sync check');
+            console.log("Offline - skipping startup sync check");
             return;
         }
 
         if (!this.isAuthenticated()) {
-            console.log('User not authenticated - skipping startup sync restore');
+            console.log(
+                "User not authenticated - skipping startup sync restore"
+            );
             return;
         }
 
@@ -117,18 +173,22 @@ class SyncService {
             await this.initializeSyncStatus();
 
             if (!this.state.hasCloudData) {
-                console.log('No cloud data available - skipping startup restore');
+                console.log(
+                    "No cloud data available - skipping startup restore"
+                );
                 return;
             }
 
-            console.log('Checking for startup sync restoration...');
+            console.log("Checking for startup sync restoration...");
 
             await this.downloadFromCloud();
 
-            console.log('Startup sync restoration completed');
-
+            console.log("Startup sync restoration completed");
         } catch (error) {
-            console.warn('Failed to check/restore synced data on startup:', error);
+            console.warn(
+                "Failed to check/restore synced data on startup:",
+                error
+            );
         }
     }
 
@@ -143,14 +203,14 @@ class SyncService {
             await settingsService.loadSettings();
             const settings = settingsService.getSettings();
             const [favorites, accounts] = await Promise.all([
-                invoke<number[]>('get_favorite_clients'),
-                invoke<any[]>('get_accounts')
+                invoke<number[]>("get_favorite_clients"),
+                invoke<any[]>("get_accounts"),
             ]);
 
             const syncData: SyncData = {
                 settings_data: settings,
                 favorites_data: favorites,
-                accounts_data: accounts
+                accounts_data: accounts,
             };
 
             await userService.syncToCloud(syncData);
@@ -158,14 +218,15 @@ class SyncService {
             const status = await userService.getSyncStatus();
 
             if (status) {
-                this.state.lastSyncTime = status.last_sync_timestamp || new Date().toISOString();
+                this.state.lastSyncTime =
+                    status.last_sync_timestamp || new Date().toISOString();
             }
 
             this.state.hasCloudData = true;
 
             return true;
         } catch (error) {
-            console.error('Failed to upload to cloud:', error);
+            console.error("Failed to upload to cloud:", error);
             throw error;
         } finally {
             this.state.isSyncing = false;
@@ -173,75 +234,140 @@ class SyncService {
         }
     }
 
-    async downloadFromCloud(): Promise<boolean> {
-        if (!this.state.isOnline || this.state.isSyncing) return false;
-        if (!this.isAuthenticated()) return false;
+    async restoreFromInitData(data: UserInitData): Promise<void> {
+        if (!this.state.isOnline) return;
 
-        this.state.isSyncing = true;
-        this.notifyListeners();
+        this.hydrateSyncStatus(data);
+
+        if (!this.state.hasCloudData) return;
 
         try {
-            const cloudData = await userService.downloadFromCloud();
+            const syncData = userService.formatSyncData(
+                data.preferences,
+                data.favorites,
+                data.accounts
+            );
+            await this.restoreData(syncData);
+        } catch (error) {
+            console.error("Failed to restore from init data:", error);
+        }
+    }
 
-            if (!cloudData) return false;
+    private async restoreData(cloudData: SyncData): Promise<boolean> {
+        if (!cloudData) return false;
 
-            if (cloudData.settings_data && Object.keys(cloudData.settings_data).length > 0) {
-                await settingsService.loadSettings();
-                const currentSettings = settingsService.getSettings();
-                const mergedSettings = { ...currentSettings, ...cloudData.settings_data };
-                await settingsService.saveSettings(mergedSettings as any);
+        if (
+            cloudData.settings_data &&
+            Object.keys(cloudData.settings_data).length > 0
+        ) {
+            await settingsService.loadSettings();
+            const currentSettings = settingsService.getSettings();
+
+            const mergedSettings = { ...currentSettings };
+
+            for (const key in cloudData.settings_data) {
+                if (mergedSettings[key]) {
+                    mergedSettings[key].value =
+                        cloudData.settings_data[key].value;
+                } else {
+                    mergedSettings[key] = cloudData.settings_data[key];
+                }
             }
 
-            if (cloudData.favorites_data && Array.isArray(cloudData.favorites_data)) {
-                try {
-                    const currentFavorites = await invoke<number[]>('get_favorite_clients');
-                    const favoritesChanged =
-                        cloudData.favorites_data.length !== currentFavorites.length ||
-                        !cloudData.favorites_data.every((id: number) => currentFavorites.includes(id));
+            await settingsService.saveSettings(mergedSettings as any);
+            await settingsService.loadSettings();
+        }
 
-                    if (favoritesChanged) {
-                        await invoke('set_all_favorites', { clientIds: cloudData.favorites_data });
-                    }
-                } catch (e) {
-                    console.warn('Failed to set all favorites, falling back to loop', e);
-                    const currentFavorites = await invoke<number[]>('get_favorite_clients');
-                    for (const clientId of currentFavorites) {
-                        await invoke('remove_favorite_client', { clientId });
-                    }
-                    for (const clientId of cloudData.favorites_data) {
-                        await invoke('add_favorite_client', { clientId });
-                    }
+        if (
+            cloudData.favorites_data &&
+            Array.isArray(cloudData.favorites_data)
+        ) {
+            try {
+                const currentFavorites = await invoke<number[]>(
+                    "get_favorite_clients"
+                );
+                const favoritesChanged =
+                    cloudData.favorites_data.length !==
+                        currentFavorites.length ||
+                    !cloudData.favorites_data.every((id: number) =>
+                        currentFavorites.includes(id)
+                    );
+
+                if (favoritesChanged) {
+                    await invoke("set_all_favorites", {
+                        clientIds: cloudData.favorites_data,
+                    });
+                }
+            } catch (e) {
+                console.warn(
+                    "Failed to set all favorites, falling back to loop",
+                    e
+                );
+                const currentFavorites = await invoke<number[]>(
+                    "get_favorite_clients"
+                );
+                for (const clientId of currentFavorites) {
+                    await invoke("remove_favorite_client", { clientId });
+                }
+                for (const clientId of cloudData.favorites_data) {
+                    await invoke("add_favorite_client", { clientId });
                 }
             }
+        }
 
-            if (cloudData.accounts_data && Array.isArray(cloudData.accounts_data)) {
-                try {
-                    const localAccounts = await invoke<any[]>('get_accounts');
-                    const localUsernames = new Set(localAccounts.map((acc: any) => acc.username));
-
-                    for (const cloudAccount of cloudData.accounts_data) {
-                        if (cloudAccount.username && !localUsernames.has(cloudAccount.username)) {
-                            try {
-                                await invoke('add_account', {
-                                    username: cloudAccount.username,
-                                    tags: cloudAccount.tags || ['cloud-sync']
-                                });
-                            } catch (error) {
-                                console.warn('Failed to add cloud account:', cloudAccount.username, error);
-                            }
+        if (cloudData.accounts_data && Array.isArray(cloudData.accounts_data)) {
+            try {
+                const localAccounts = await invoke<any[]>("get_accounts");
+                const localUsernames = new Set(
+                    localAccounts.map((acc: any) => acc.username)
+                );
+
+                for (const cloudAccount of cloudData.accounts_data) {
+                    if (
+                        cloudAccount.username &&
+                        !localUsernames.has(cloudAccount.username)
+                    ) {
+                        try {
+                            await invoke("add_account", {
+                                username: cloudAccount.username,
+                                tags: cloudAccount.tags || ["cloud-sync"],
+                            });
+                        } catch (error) {
+                            console.warn(
+                                "Failed to add cloud account:",
+                                cloudAccount.username,
+                                error
+                            );
                         }
                     }
-                } catch (error) {
-                    console.warn('Failed to sync accounts from cloud:', error);
                 }
+            } catch (error) {
+                console.warn("Failed to sync accounts from cloud:", error);
             }
+        }
 
-            this.state.lastSyncTime = cloudData.last_sync_timestamp || new Date().toISOString();
-            this.state.hasCloudData = true;
+        this.state.lastSyncTime =
+            cloudData.last_sync_timestamp || new Date().toISOString();
+        this.state.hasCloudData = true;
 
-            return true;
+        return true;
+    }
+
+    async downloadFromCloud(): Promise<boolean> {
+        if (!this.state.isOnline || this.state.isSyncing) return false;
+        if (!this.isAuthenticated()) return false;
+
+        this.state.isSyncing = true;
+        this.notifyListeners();
+
+        try {
+            const cloudData = await userService.downloadFromCloud();
+
+            if (!cloudData) return false;
+
+            return await this.restoreData(cloudData);
         } catch (error) {
-            console.error('Failed to download from cloud:', error);
+            console.error("Failed to download from cloud:", error);
             throw error;
         } finally {
             this.state.isSyncing = false;
@@ -253,39 +379,39 @@ class SyncService {
         addToast: ToastFunction,
         t: TranslateFunction
     ): Promise<void> {
-        if (typeof addToast !== 'function') {
-            console.error('addToast is not a function:', addToast);
+        if (typeof addToast !== "function") {
+            console.error("addToast is not a function:", addToast);
             return;
         }
 
-        if (typeof t !== 'function') {
-            console.error('t (translation function) is not a function:', t);
+        if (typeof t !== "function") {
+            console.error("t (translation function) is not a function:", t);
             return;
         }
 
         if (!this.isAuthenticated()) {
-            addToast(t('toast.sync.login_required'), 'error');
+            addToast(t("toast.sync.login_required"), "error");
             return;
         }
 
         if (!this.state.isOnline) {
-            addToast(t('toast.sync.offline_error'), 'error');
+            addToast(t("toast.sync.offline_error"), "error");
             return;
         }
 
         if (this.state.isSyncing) {
-            addToast(t('toast.sync.already_in_progress'), 'info');
+            addToast(t("toast.sync.already_in_progress"), "info");
             return;
         }
 
         try {
-            addToast(t('toast.sync.syncing'), 'info');
+            addToast(t("toast.sync.syncing"), "info");
 
             await this.downloadFromCloud();
             await this.uploadToCloud();
-            addToast(t('toast.sync.success'), 'success');
+            addToast(t("toast.sync.success"), "success");
         } catch (error) {
-            addToast(t('toast.sync.failed', { error }), 'error');
+            addToast(t("toast.sync.failed", { error }), "error");
         }
     }
 
@@ -307,4 +433,4 @@ class SyncService {
 }
 
 export const syncService = new SyncService();
-export type { SyncServiceState };
\ No newline at end of file
+export type { SyncServiceState };
diff --git a/src/services/themeService.ts b/src/services/themeService.ts
index fe9635d1..3a500fb7 100644
--- a/src/services/themeService.ts
+++ b/src/services/themeService.ts
@@ -1,4 +1,5 @@
-import { reactive, watchEffect } from 'vue';
+import { reactive, watchEffect } from "vue";
+import { convertFileSrc } from "@tauri-apps/api/core";
 
 interface ThemeSettings {
     customCSS: string;
@@ -25,10 +26,14 @@ interface ThemeSettings {
     warningContent?: string | null;
     error?: string | null;
     errorContent?: string | null;
+
+    backgroundImage?: string | null;
+    backgroundBlur?: number | null;
+    backgroundOpacity?: number | null;
 }
 
 const defaultSettings: ThemeSettings = {
-    customCSS: '',
+    customCSS: "",
     enableCustomCSS: false,
     primary: null,
 
@@ -52,16 +57,38 @@ const defaultSettings: ThemeSettings = {
     warningContent: null,
     error: null,
     errorContent: null,
+
+    backgroundImage: null,
+    backgroundBlur: 0,
+    backgroundOpacity: 100,
 };
 
 const presetSettings = reactive<ThemeSettings>({ ...defaultSettings });
 
 export const cssVarList = [
-    '--color-primary',
-    '--color-base-100', '--color-base-200', '--color-base-300', '--color-base-content',
-    '--color-primary-content', '--color-secondary', '--color-secondary-content', '--color-accent', '--color-accent-content',
-    '--color-neutral', '--color-neutral-content', '--color-info', '--color-info-content', '--color-success', '--color-success-content',
-    '--color-warning', '--color-warning-content', '--color-error', '--color-error-content'
+    "--color-primary",
+    "--color-base-100",
+    "--color-base-200",
+    "--color-base-300",
+    "--color-base-content",
+    "--color-primary-content",
+    "--color-secondary",
+    "--color-secondary-content",
+    "--color-accent",
+    "--color-accent-content",
+    "--color-neutral",
+    "--color-neutral-content",
+    "--color-info",
+    "--color-info-content",
+    "--color-success",
+    "--color-success-content",
+    "--color-warning",
+    "--color-warning-content",
+    "--color-error",
+    "--color-error-content",
+    "--background-image",
+    "--background-blur",
+    "--background-opacity",
 ];
 
 const applyPreset = () => {
@@ -69,46 +96,74 @@ const applyPreset = () => {
     const settings = presetSettings as Record<string, any>;
 
     const varMap: Record<string, string> = {
-        primary: '--color-primary',
-        base100: '--color-base-100',
-        base200: '--color-base-200',
-        base300: '--color-base-300',
-        baseContent: '--color-base-content',
-        primaryContent: '--color-primary-content',
-        secondary: '--color-secondary',
-        secondaryContent: '--color-secondary-content',
-        accent: '--color-accent',
-        accentContent: '--color-accent-content',
-        neutral: '--color-neutral',
-        neutralContent: '--color-neutral-content',
-        info: '--color-info',
-        infoContent: '--color-info-content',
-        success: '--color-success',
-        successContent: '--color-success-content',
-        warning: '--color-warning',
-        warningContent: '--color-warning-content',
-        error: '--color-error',
-        errorContent: '--color-error-content'
+        primary: "--color-primary",
+        base100: "--color-base-100",
+        base200: "--color-base-200",
+        base300: "--color-base-300",
+        baseContent: "--color-base-content",
+        primaryContent: "--color-primary-content",
+        secondary: "--color-secondary",
+        secondaryContent: "--color-secondary-content",
+        accent: "--color-accent",
+        accentContent: "--color-accent-content",
+        neutral: "--color-neutral",
+        neutralContent: "--color-neutral-content",
+        info: "--color-info",
+        infoContent: "--color-info-content",
+        success: "--color-success",
+        successContent: "--color-success-content",
+        warning: "--color-warning",
+        warningContent: "--color-warning-content",
+        error: "--color-error",
+        errorContent: "--color-error-content",
+        backgroundImage: "--background-image",
+        backgroundBlur: "--background-blur",
+        backgroundOpacity: "--background-opacity",
     };
 
     Object.entries(varMap).forEach(([key, cssVar]) => {
         const value = settings[key];
-        if (value && typeof value === 'string' && value.trim().length > 0) {
-            root.style.setProperty(cssVar, value);
+
+        if (
+            value !== undefined &&
+            value !== null &&
+            (typeof value === "string" ? value.trim().length > 0 : true)
+        ) {
+            let cssValue = String(value);
+            if (key === "backgroundBlur") cssValue = `${value}px`;
+            if (key === "backgroundImage") {
+                if (value.startsWith("http") || value.startsWith("data:")) {
+                    cssValue = `url("${value}")`;
+                } else if (value.trim().length > 0) {
+                    cssValue = `url("${convertFileSrc(value)}")`;
+                }
+            }
+            root.style.setProperty(cssVar, cssValue);
         } else {
             root.style.removeProperty(cssVar);
         }
     });
 
-    let styleEl = document.getElementById('custom-theme-styles');
+    const bgImage = presetSettings.backgroundImage;
+    const bgOpacity = presetSettings.backgroundOpacity;
+    const hasBg =
+        bgImage && bgImage.trim().length > 0 && bgOpacity && bgOpacity > 0;
+
+    if (hasBg) {
+        root.setAttribute("data-has-background", "true");
+    } else {
+        root.removeAttribute("data-has-background");
+    }
+
+    let styleEl = document.getElementById("custom-theme-styles");
     if (!styleEl) {
-        styleEl = document.createElement('style');
-        styleEl.id = 'custom-theme-styles';
+        styleEl = document.createElement("style");
+        styleEl.id = "custom-theme-styles";
         document.head.appendChild(styleEl);
     }
 
     if (presetSettings.enableCustomCSS) {
-        let customStyles = '';
+        let customStyles = "";
 
         if (presetSettings.customCSS) {
             customStyles += presetSettings.customCSS;
@@ -116,35 +171,34 @@ const applyPreset = () => {
 
         styleEl.textContent = customStyles;
     } else {
-        styleEl.textContent = '';
+        styleEl.textContent = "";
     }
 };
 
 const loadSettings = () => {
     try {
-        const savedSettings = localStorage.getItem('presetSettings');
+        const savedSettings = localStorage.getItem("presetSettings");
         if (savedSettings) {
             const parsedSettings = JSON.parse(savedSettings);
             Object.assign(presetSettings, {
                 ...defaultSettings,
-                ...parsedSettings
+                ...parsedSettings,
             });
         }
     } catch (error) {
-        console.error('Failed to load settings:', error);
+        console.error("Failed to load settings:", error);
         Object.assign(presetSettings, defaultSettings);
     }
 
     applyPreset();
 };
 
-
 const saveCardSettings = () => {
     try {
-        localStorage.setItem('presetSettings', JSON.stringify(presetSettings));
-        console.log('Saved preset settings to localStorage:', presetSettings);
+        localStorage.setItem("presetSettings", JSON.stringify(presetSettings));
+        console.log("Saved preset settings to localStorage:", presetSettings);
     } catch (error) {
-        console.error('Failed to save preset settings:', error);
+        console.error("Failed to save preset settings:", error);
     }
 };
 
@@ -161,13 +215,13 @@ const resetPresetSettings = () => {
 };
 
 const clearCustomTheme = () => {
-    const styleEl = document.getElementById('custom-theme-styles');
+    const styleEl = document.getElementById("custom-theme-styles");
     if (styleEl && styleEl.parentNode) {
         styleEl.parentNode.removeChild(styleEl);
     }
 
     const root = document.documentElement;
-    cssVarList.forEach(v => root.style.removeProperty(v));
+    cssVarList.forEach((v) => root.style.removeProperty(v));
 };
 
 const emergencyReset = () => {
@@ -204,7 +258,11 @@ const exportPreset = (): string => {
         warning: presetSettings.warning,
         warningContent: presetSettings.warningContent,
         error: presetSettings.error,
-        errorContent: presetSettings.errorContent
+        errorContent: presetSettings.errorContent,
+
+        backgroundImage: presetSettings.backgroundImage,
+        backgroundBlur: presetSettings.backgroundBlur,
+        backgroundOpacity: presetSettings.backgroundOpacity,
     };
     return JSON.stringify(preset, null, 2);
 };
@@ -213,35 +271,126 @@ const importPreset = (presetJSON: string): void => {
     try {
         const parsed = JSON.parse(presetJSON);
         updatePresetSettings({
-            customCSS: typeof parsed.customCSS === 'string' ? parsed.customCSS : presetSettings.customCSS,
-            enableCustomCSS: typeof parsed.enableCustomCSS === 'boolean' ? parsed.enableCustomCSS : presetSettings.enableCustomCSS,
-            primary: typeof parsed.primaryColorOverride === 'string' || parsed.primaryColorOverride === null
-                ? parsed.primaryColorOverride
-                : presetSettings.primary,
-
-            base100: typeof parsed.base100 === 'string' || parsed.base100 === null ? parsed.base100 : presetSettings.base100,
-            base200: typeof parsed.base200 === 'string' || parsed.base200 === null ? parsed.base200 : presetSettings.base200,
-            base300: typeof parsed.base300 === 'string' || parsed.base300 === null ? parsed.base300 : presetSettings.base300,
-            baseContent: typeof parsed.baseContent === 'string' || parsed.baseContent === null ? parsed.baseContent : presetSettings.baseContent,
-
-            primaryContent: typeof parsed.primaryContent === 'string' || parsed.primaryContent === null ? parsed.primaryContent : presetSettings.primaryContent,
-            secondary: typeof parsed.secondary === 'string' || parsed.secondary === null ? parsed.secondary : presetSettings.secondary,
-            secondaryContent: typeof parsed.secondaryContent === 'string' || parsed.secondaryContent === null ? parsed.secondaryContent : presetSettings.secondaryContent,
-            accent: typeof parsed.accent === 'string' || parsed.accent === null ? parsed.accent : presetSettings.accent,
-            accentContent: typeof parsed.accentContent === 'string' || parsed.accentContent === null ? parsed.accentContent : presetSettings.accentContent,
-            neutral: typeof parsed.neutral === 'string' || parsed.neutral === null ? parsed.neutral : presetSettings.neutral,
-            neutralContent: typeof parsed.neutralContent === 'string' || parsed.neutralContent === null ? parsed.neutralContent : presetSettings.neutralContent,
-            info: typeof parsed.info === 'string' || parsed.info === null ? parsed.info : presetSettings.info,
-            infoContent: typeof parsed.infoContent === 'string' || parsed.infoContent === null ? parsed.infoContent : presetSettings.infoContent,
-            success: typeof parsed.success === 'string' || parsed.success === null ? parsed.success : presetSettings.success,
-            successContent: typeof parsed.successContent === 'string' || parsed.successContent === null ? parsed.successContent : presetSettings.successContent,
-            warning: typeof parsed.warning === 'string' || parsed.warning === null ? parsed.warning : presetSettings.warning,
-            warningContent: typeof parsed.warningContent === 'string' || parsed.warningContent === null ? parsed.warningContent : presetSettings.warningContent,
-            error: typeof parsed.error === 'string' || parsed.error === null ? parsed.error : presetSettings.error,
-            errorContent: typeof parsed.errorContent === 'string' || parsed.errorContent === null ? parsed.errorContent : presetSettings.errorContent
+            customCSS:
+                typeof parsed.customCSS === "string"
+                    ? parsed.customCSS
+                    : presetSettings.customCSS,
+            enableCustomCSS:
+                typeof parsed.enableCustomCSS === "boolean"
+                    ? parsed.enableCustomCSS
+                    : presetSettings.enableCustomCSS,
+            primary:
+                typeof parsed.primaryColorOverride === "string" ||
+                parsed.primaryColorOverride === null
+                    ? parsed.primaryColorOverride
+                    : presetSettings.primary,
+
+            base100:
+                typeof parsed.base100 === "string" || parsed.base100 === null
+                    ? parsed.base100
+                    : presetSettings.base100,
+            base200:
+                typeof parsed.base200 === "string" || parsed.base200 === null
+                    ? parsed.base200
+                    : presetSettings.base200,
+            base300:
+                typeof parsed.base300 === "string" || parsed.base300 === null
+                    ? parsed.base300
+                    : presetSettings.base300,
+            baseContent:
+                typeof parsed.baseContent === "string" ||
+                parsed.baseContent === null
+                    ? parsed.baseContent
+                    : presetSettings.baseContent,
+
+            primaryContent:
+                typeof parsed.primaryContent === "string" ||
+                parsed.primaryContent === null
+                    ? parsed.primaryContent
+                    : presetSettings.primaryContent,
+            secondary:
+                typeof parsed.secondary === "string" ||
+                parsed.secondary === null
+                    ? parsed.secondary
+                    : presetSettings.secondary,
+            secondaryContent:
+                typeof parsed.secondaryContent === "string" ||
+                parsed.secondaryContent === null
+                    ? parsed.secondaryContent
+                    : presetSettings.secondaryContent,
+            accent:
+                typeof parsed.accent === "string" || parsed.accent === null
+                    ? parsed.accent
+                    : presetSettings.accent,
+            accentContent:
+                typeof parsed.accentContent === "string" ||
+                parsed.accentContent === null
+                    ? parsed.accentContent
+                    : presetSettings.accentContent,
+            neutral:
+                typeof parsed.neutral === "string" || parsed.neutral === null
+                    ? parsed.neutral
+                    : presetSettings.neutral,
+            neutralContent:
+                typeof parsed.neutralContent === "string" ||
+                parsed.neutralContent === null
+                    ? parsed.neutralContent
+                    : presetSettings.neutralContent,
+            info:
+                typeof parsed.info === "string" || parsed.info === null
+                    ? parsed.info
+                    : presetSettings.info,
+            infoContent:
+                typeof parsed.infoContent === "string" ||
+                parsed.infoContent === null
+                    ? parsed.infoContent
+                    : presetSettings.infoContent,
+            success:
+                typeof parsed.success === "string" || parsed.success === null
+                    ? parsed.success
+                    : presetSettings.success,
+            successContent:
+                typeof parsed.successContent === "string" ||
+                parsed.successContent === null
+                    ? parsed.successContent
+                    : presetSettings.successContent,
+            warning:
+                typeof parsed.warning === "string" || parsed.warning === null
+                    ? parsed.warning
+                    : presetSettings.warning,
+            warningContent:
+                typeof parsed.warningContent === "string" ||
+                parsed.warningContent === null
+                    ? parsed.warningContent
+                    : presetSettings.warningContent,
+            error:
+                typeof parsed.error === "string" || parsed.error === null
+                    ? parsed.error
+                    : presetSettings.error,
+            errorContent:
+                typeof parsed.errorContent === "string" ||
+                parsed.errorContent === null
+                    ? parsed.errorContent
+                    : presetSettings.errorContent,
+
+            backgroundImage:
+                typeof parsed.backgroundImage === "string" ||
+                parsed.backgroundImage === null
+                    ? parsed.backgroundImage
+                    : presetSettings.backgroundImage,
+            backgroundBlur:
+                typeof parsed.backgroundBlur === "number" ||
+                parsed.backgroundBlur === null
+                    ? parsed.backgroundBlur
+                    : presetSettings.backgroundBlur,
+            backgroundOpacity:
+                typeof parsed.backgroundOpacity === "number" ||
+                parsed.backgroundOpacity === null
+                    ? parsed.backgroundOpacity
+                    : presetSettings.backgroundOpacity,
         });
     } catch (e) {
-        console.error('Failed to import theme preset:', e);
+        console.error("Failed to import theme preset:", e);
         throw e;
     }
 };
@@ -261,5 +410,5 @@ export const themeService = {
     loadSettings,
     saveCardSettings,
     exportPreset,
-    importPreset
-};
\ No newline at end of file
+    importPreset,
+};
diff --git a/src/services/toastService.ts b/src/services/toastService.ts
index d67c6c4f..295df25c 100644
--- a/src/services/toastService.ts
+++ b/src/services/toastService.ts
@@ -1,21 +1,33 @@
-import { ref } from 'vue';
-import type { ToastMessage, ToastType } from '../types/toast';
+import { ref } from "vue";
+import type { ToastMessage, ToastType } from "../types/toast";
 
 const toasts = ref<ToastMessage[]>([]);
 let nextId = 0;
 let DUPLICATE_THRESHOLD = 2000;
 
-export type ToastPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-center' | 'top-center';
-
-const toastPosition = ref<ToastPosition>('bottom-right');
-
-function addToast(message: string, type: ToastType, duration: number = 5000, action?: { label: string; url: string }) {
+export type ToastPosition =
+    | "bottom-right"
+    | "bottom-left"
+    | "top-right"
+    | "top-left"
+    | "bottom-center"
+    | "top-center";
+
+const toastPosition = ref<ToastPosition>("bottom-right");
+
+function addToast(
+    message: string,
+    type: ToastType,
+    duration: number = 5000,
+    action?: { label: string; url: string }
+) {
     const now = Date.now();
-    const existingToast = toasts.value.find(toast =>
-        toast.message === message &&
-        toast.type === type &&
-        toast.startTime &&
-        (now - toast.startTime) < DUPLICATE_THRESHOLD
+    const existingToast = toasts.value.find(
+        (toast) =>
+            toast.message === message &&
+            toast.type === type &&
+            toast.startTime &&
+            now - toast.startTime < DUPLICATE_THRESHOLD
     );
 
     if (existingToast) {
@@ -42,12 +54,12 @@ function addToast(message: string, type: ToastType, duration: number = 5000, act
         type,
         duration,
         remainingDuration: duration,
-        count: 1
+        count: 1,
     } as ToastMessage;
 
     if (action) {
         toast.action = action;
-    };
+    }
 
     toasts.value.push(toast);
 
@@ -66,7 +78,7 @@ function startToastTimer(toast: ToastMessage) {
 }
 
 function removeToast(id: number) {
-    const toast = toasts.value.find(t => t.id === id);
+    const toast = toasts.value.find((t) => t.id === id);
     if (toast?.timeoutId) {
         clearTimeout(toast.timeoutId);
     }
@@ -74,17 +86,20 @@ function removeToast(id: number) {
 }
 
 function pauseToast(id: number) {
-    const toast = toasts.value.find(t => t.id === id);
+    const toast = toasts.value.find((t) => t.id === id);
     if (toast?.timeoutId && toast.startTime) {
         clearTimeout(toast.timeoutId);
         const elapsed = Date.now() - toast.startTime;
-        toast.remainingDuration = Math.max(0, (toast.remainingDuration || 0) - elapsed);
+        toast.remainingDuration = Math.max(
+            0,
+            (toast.remainingDuration || 0) - elapsed
+        );
         toast.timeoutId = undefined;
     }
 }
 
 function resumeToast(id: number) {
-    const toast = toasts.value.find(t => t.id === id);
+    const toast = toasts.value.find((t) => t.id === id);
     if (toast && toast.remainingDuration && toast.remainingDuration > 0) {
         startToastTimer(toast);
     }
@@ -103,17 +118,27 @@ function setDuplicateThreshold(threshold: number) {
 
 function setToastPosition(position: ToastPosition) {
     toastPosition.value = position;
-    localStorage.setItem('toastPosition', position);
+    localStorage.setItem("toastPosition", position);
 }
 
 function getToastPosition(): ToastPosition {
-    const stored = localStorage.getItem('toastPosition');
-    if (stored && ['bottom-right', 'bottom-left', 'top-right', 'top-left', 'bottom-center', 'top-center'].includes(stored)) {
+    const stored = localStorage.getItem("toastPosition");
+    if (
+        stored &&
+        [
+            "bottom-right",
+            "bottom-left",
+            "top-right",
+            "top-left",
+            "bottom-center",
+            "top-center",
+        ].includes(stored)
+    ) {
         toastPosition.value = stored as ToastPosition;
         return stored as ToastPosition;
     }
-    toastPosition.value = 'bottom-right';
-    return 'bottom-right';
+    toastPosition.value = "bottom-right";
+    return "bottom-right";
 }
 
 export function useToast() {
diff --git a/src/services/updaterService.ts b/src/services/updaterService.ts
index 68f85811..13d659e2 100644
--- a/src/services/updaterService.ts
+++ b/src/services/updaterService.ts
@@ -1,8 +1,8 @@
-import { invoke } from '@tauri-apps/api/core';
-import { useModal } from './modalService';
-import { useToast } from './toastService';
-import UpdateModal from '../components/modals/settings/UpdateModal.vue';
-import i18n from '../i18n';
+import { invoke } from "@tauri-apps/api/core";
+import { useModal } from "./modalService";
+import { useToast } from "./toastService";
+import UpdateModal from "../components/modals/settings/UpdateModal.vue";
+import i18n from "../i18n";
 
 interface ChangeItem {
     category: string;
@@ -31,7 +31,10 @@ class UpdaterService {
     private isChecking = false;
     private readonly CHECK_INTERVAL = 6 * 60 * 60 * 1000;
 
-    async checkForUpdates(showNoUpdateToast = true, t: any): Promise<UpdateInfo | null> {
+    async checkForUpdates(
+        showNoUpdateToast = true,
+        t: any
+    ): Promise<UpdateInfo | null> {
         if (this.isChecking) {
             return null;
         }
@@ -39,17 +42,24 @@ class UpdaterService {
         this.isChecking = true;
 
         try {
-            console.log('Checking for updates...');
-            const updateInfo = await invoke<UpdateInfo>('check_for_updates');
-            if (updateInfo?.translations && typeof updateInfo.translations === 'object') {
+            console.log("Checking for updates...");
+            const updateInfo = await invoke<UpdateInfo>("check_for_updates");
+            if (
+                updateInfo?.translations &&
+                typeof updateInfo.translations === "object"
+            ) {
                 try {
-                    const translations = updateInfo.translations as Record<string, any>;
-                    const isObject = (v: any) => v && typeof v === 'object' && !Array.isArray(v);
+                    const translations = updateInfo.translations as Record<
+                        string,
+                        any
+                    >;
+                    const isObject = (v: any) =>
+                        v && typeof v === "object" && !Array.isArray(v);
 
                     const deepMerge = (target: any, source: any): any => {
                         if (!isObject(target)) return source;
                         const out: any = { ...target };
-                        Object.keys(source).forEach(key => {
+                        Object.keys(source).forEach((key) => {
                             const sVal = source[key];
                             const tVal = out[key];
                             if (isObject(sVal) && isObject(tVal)) {
@@ -61,30 +71,34 @@ class UpdaterService {
                         return out;
                     };
 
-                    Object.keys(translations).forEach(locale => {
-                        const existing = i18n.global.getLocaleMessage(locale) || {};
-                        const merged = deepMerge(existing, translations[locale]);
+                    Object.keys(translations).forEach((locale) => {
+                        const existing =
+                            i18n.global.getLocaleMessage(locale) || {};
+                        const merged = deepMerge(
+                            existing,
+                            translations[locale]
+                        );
                         i18n.global.setLocaleMessage(locale, merged);
                     });
                 } catch (e) {
-                    console.warn('Failed to merge release translations:', e);
+                    console.warn("Failed to merge release translations:", e);
                 }
             }
-            console.log('Update check result:', updateInfo);
+            console.log("Update check result:", updateInfo);
 
             if (updateInfo.available) {
                 this.showUpdateNotification(updateInfo, t);
             } else if (showNoUpdateToast) {
                 const { addToast } = useToast();
-                addToast(t('updater.up_to_date'), 'success');
+                addToast(t("updater.up_to_date"), "success");
             }
 
             return updateInfo;
         } catch (error) {
-            console.error('Failed to check for updates:', error);
+            console.error("Failed to check for updates:", error);
             if (showNoUpdateToast) {
                 const { addToast } = useToast();
-                addToast(`updater.check_failed|${error}`, 'error');
+                addToast(`updater.check_failed|${error}`, "error");
             }
             return null;
         } finally {
@@ -96,10 +110,10 @@ class UpdaterService {
         const { showModal } = useModal();
 
         showModal(
-            'update-available',
+            "update-available",
             UpdateModal,
             {
-                title: t('updater.update_available'),
+                title: t("updater.update_available"),
                 contentClass: "wide",
             },
             { updateInfo },
@@ -109,28 +123,31 @@ class UpdaterService {
                 },
                 close: () => {
                     const { hideModal } = useModal();
-                    hideModal('update-available');
-                }
+                    hideModal("update-available");
+                },
             }
         );
     }
 
-    async downloadAndInstallUpdate(updateInfo: UpdateInfo, t: any): Promise<void> {
+    async downloadAndInstallUpdate(
+        updateInfo: UpdateInfo,
+        t: any
+    ): Promise<void> {
         const { addToast } = useToast();
         const { hideModal } = useModal();
 
         try {
-            addToast(t('updater.starting_download'), 'info');
+            addToast(t("updater.starting_download"), "info");
 
-            await invoke('download_and_install_update', {
-                downloadUrl: updateInfo.download_url
+            await invoke("download_and_install_update", {
+                downloadUrl: updateInfo.download_url,
             });
 
-            hideModal('update-available');
-            addToast(t('updater.update_installed'), 'success');
+            hideModal("update-available");
+            addToast(t("updater.update_installed"), "success");
         } catch (error) {
-            console.error('Failed to download/install update:', error);
-            addToast(`${t('updater.update_failed', { error })}`, 'error');
+            console.error("Failed to download/install update:", error);
+            addToast(`${t("updater.update_failed", { error })}`, "error");
         }
     }
 
@@ -140,14 +157,12 @@ class UpdaterService {
         }
 
         setTimeout(() => {
-            this.checkForUpdates(false, t).then(r => {
-                console.log('Initial update check completed:', r);
-            });
+            this.checkForUpdates(false, t);
         }, 10000);
 
         this.checkInterval = window.setInterval(() => {
-            this.checkForUpdates(false, t).then(r => {
-                console.log('Periodic update check completed:', r);
+            this.checkForUpdates(false, t).then((r) => {
+                console.log("Periodic update check completed:", r);
             });
         }, this.CHECK_INTERVAL);
     }
@@ -157,7 +172,7 @@ class UpdaterService {
             clearInterval(this.checkInterval);
             this.checkInterval = null;
         }
-        console.log('Stopped periodic update checking');
+        console.log("Stopped periodic update checking");
     }
 
     get isCheckingForUpdates(): boolean {
diff --git a/src/services/userService.ts b/src/services/userService.ts
index d1188d2d..b6db7b9e 100644
--- a/src/services/userService.ts
+++ b/src/services/userService.ts
@@ -1,6 +1,11 @@
-import { apiClient } from './apiClient';
+import { apiClient } from "./apiClient";
 
-type FriendshipStatus = 'friends' | 'request_sent' | 'request_received' | 'blocked' | null;
+type FriendshipStatus =
+    | "friends"
+    | "request_sent"
+    | "request_received"
+    | "blocked"
+    | null;
 
 export interface SocialLink {
     platform: string;
@@ -10,13 +15,37 @@ export interface SocialLink {
 export interface UserProfile {
     id: number;
     nickname: string | null;
-    avatar_path: string | null;
     avatar_url: string | null;
-    avatar_updated_at: string | null;
     role: string | null;
     social_links: SocialLink[];
     created_at: string;
     updated_at: string;
+    favorite_client_id: number | null;
+}
+
+export interface UserInitData {
+    user: {
+        id: number;
+        username: string;
+        email: string;
+        role: string;
+        created_at: string;
+        updated_at: string;
+        last_login_at: string | null;
+        profile: UserProfile;
+        status: UserStatus;
+    };
+    preferences: UserPreference[];
+    favorites: UserFavorite[];
+    accounts: UserExternalAccount[];
+    friends: {
+        friends: any[];
+        requests: {
+            sent: any[];
+            received: any[];
+            blocked: any[];
+        };
+    };
 }
 
 export interface UserInfo {
@@ -39,6 +68,7 @@ export interface UserStatus {
     status: string;
     client_name: string | null;
     updated_at: string | null;
+    started_at?: string | null;
 }
 
 export interface ClientUserStatus {
@@ -47,6 +77,7 @@ export interface ClientUserStatus {
     current_client: string | null;
     client_version?: string | null;
     updated_at: string | null;
+    started_at: string | null;
     raw_status: string | null;
 }
 
@@ -54,6 +85,7 @@ export interface Friend {
     id: number;
     username: string;
     nickname: string | null;
+    avatar_url: string | null;
     status: ClientUserStatus;
 }
 
@@ -69,12 +101,14 @@ export interface FriendRequest {
 export interface FriendRequestsBatch {
     sent: FriendRequest[];
     received: FriendRequest[];
+    blocked: FriendRequest[];
 }
 
 export interface SearchUser {
     id: number;
     username: string;
     nickname: string | null;
+    avatar_url: string | null;
     friendship_status: FriendshipStatus;
 }
 
@@ -88,6 +122,9 @@ export interface PublicUserProfile {
     avatar_url: string | null;
     social_links: SocialLink[];
     role: string | null;
+    achievements?: any[];
+    presets?: any[];
+    favorite_client_id: number | null;
 }
 
 export interface UserPreference {
@@ -107,8 +144,6 @@ export interface UserFavorite {
 
 export interface UserExternalAccount {
     id: number;
-    provider: string;
-    external_id: string;
     display_name: string | null;
     metadata: unknown | null;
     created_at: string;
@@ -127,12 +162,36 @@ export interface SyncStatus {
     has_cloud_data: boolean;
 }
 
-const CACHE_KEY = 'userData';
+export interface UserInitData {
+    user: {
+        id: number;
+        username: string;
+        email: string;
+        role: string;
+        created_at: string;
+        updated_at: string;
+        last_login_at: string | null;
+        profile: UserProfile;
+        status: UserStatus;
+    };
+    preferences: UserPreference[];
+    favorites: UserFavorite[];
+    accounts: UserExternalAccount[];
+    friends: {
+        friends: any[];
+        requests: {
+            sent: any[];
+            received: any[];
+            blocked: any[];
+        };
+    };
+}
+
+const CACHE_KEY = "userData";
 const CACHE_EXPIRY_HOURS = 24;
 
-const SYNC_SETTINGS_PREF_KEY = 'collapseloader.settings';
-const SYNC_FAVORITE_TYPE = 'client';
-const SYNC_ACCOUNT_PROVIDER = 'collapseloader';
+const SYNC_SETTINGS_PREF_KEY = "collapseloader.settings";
+const SYNC_FAVORITE_TYPE = "client";
 
 class UserService {
     private getCachedData(): CachedUserData | null {
@@ -140,7 +199,11 @@ class UserService {
             const cached = localStorage.getItem(CACHE_KEY);
             if (!cached) return null;
             const parsedData: any = JSON.parse(cached);
-            if (!parsedData || typeof parsedData !== 'object' || !parsedData.lastUpdated) {
+            if (
+                !parsedData ||
+                typeof parsedData !== "object" ||
+                !parsedData.lastUpdated
+            ) {
                 localStorage.removeItem(CACHE_KEY);
                 return null;
             }
@@ -150,14 +213,15 @@ class UserService {
                 localStorage.removeItem(CACHE_KEY);
                 return null;
             }
-            const hoursDiff = (now.getTime() - cacheTime.getTime()) / (1000 * 60 * 60);
+            const hoursDiff =
+                (now.getTime() - cacheTime.getTime()) / (1000 * 60 * 60);
             if (hoursDiff > CACHE_EXPIRY_HOURS) {
                 localStorage.removeItem(CACHE_KEY);
                 return null;
             }
             return parsedData as CachedUserData;
         } catch (error) {
-            console.error('Error reading cached user data:', error);
+            console.error("Error reading cached user data:", error);
             localStorage.removeItem(CACHE_KEY);
             return null;
         }
@@ -165,38 +229,66 @@ class UserService {
 
     private setCachedData(data: Partial<CachedUserData>): void {
         try {
-            const existing = this.getCachedData() || { profile: null, info: null, lastUpdated: new Date().toISOString() };
-            const updated = { ...existing, ...data, lastUpdated: new Date().toISOString() };
+            const existing = this.getCachedData() || {
+                profile: null,
+                info: null,
+                lastUpdated: new Date().toISOString(),
+            };
+            const updated = {
+                ...existing,
+                ...data,
+                lastUpdated: new Date().toISOString(),
+            };
             localStorage.setItem(CACHE_KEY, JSON.stringify(updated));
         } catch (error) {
-            console.error('Error caching user data:', error);
+            console.error("Error caching user data:", error);
         }
     }
 
+    private stripShowFields(input: any): any {
+        if (input === null || input === undefined) return input;
+        if (Array.isArray(input))
+            return input.map((v) => this.stripShowFields(v));
+        if (typeof input === "object") {
+            const out: any = {};
+            for (const k of Object.keys(input)) {
+                if (k === "show") continue;
+                out[k] = this.stripShowFields((input as any)[k]);
+            }
+            return out;
+        }
+        return input;
+    }
+
     private mapStatus(status: UserStatus | null | undefined): ClientUserStatus {
         const raw = status?.status ?? null;
-        const normalized = (raw || '').toUpperCase();
-        const isOnline = normalized.length > 0 && normalized !== 'OFFLINE' && normalized !== 'INVISIBLE';
+        const normalized = (raw || "").toUpperCase();
+        const isOnline =
+            normalized.length > 0 &&
+            normalized !== "OFFLINE" &&
+            normalized !== "INVISIBLE";
         const updatedAt = status?.updated_at ?? null;
         return {
             is_online: isOnline,
             current_client: status?.client_name ?? null,
             last_seen: isOnline ? null : updatedAt,
             updated_at: updatedAt,
+            started_at: status?.started_at ?? null,
             raw_status: raw,
         };
     }
 
-    private mapFriend(friend: any): Friend {
+    public mapFriend(friend: any): Friend {
         return {
             id: friend.id,
             username: friend.username,
             nickname: friend.nickname ?? null,
+            avatar_url: friend.avatar_url ?? null,
             status: this.mapStatus(friend.status),
         };
     }
 
-    private mapFriendRequest(request: any): FriendRequest {
+    public mapFriendRequest(request: any): FriendRequest {
         return {
             id: request.id,
             requester: this.mapFriend(request.requester),
@@ -207,7 +299,9 @@ class UserService {
         };
     }
 
-    private maxIsoTimestamp(timestamps: Array<string | null | undefined>): string | null {
+    private maxIsoTimestamp(
+        timestamps: Array<string | null | undefined>
+    ): string | null {
         let max: number | null = null;
         let maxIso: string | null = null;
         for (const ts of timestamps) {
@@ -226,74 +320,97 @@ class UserService {
         const cached = this.getCachedData();
         if (cached?.info?.id) return cached.info.id;
         try {
-            const me = await apiClient.get<any>('/users/me');
-            return typeof me?.id === 'number' ? me.id : null;
+            const me = await apiClient.get<any>("/users/me");
+            return typeof me?.id === "number" ? me.id : null;
         } catch {
             return null;
         }
     }
 
-    async updateUserProfile(nickname: string | null): Promise<{ success: boolean; error?: string }> {
+    async updateUserProfile(
+        nickname: string | null,
+        favoriteClientId?: number | null
+    ): Promise<{ success: boolean; error?: string }> {
         try {
-            await apiClient.patch('/users/me/profile', { nickname });
+            const payload: any = { nickname };
+            if (favoriteClientId !== undefined) {
+                payload.favorite_client_id = favoriteClientId;
+            }
+            await apiClient.patch("/users/me/profile", payload);
             await this.refreshCachedUser();
             return { success: true };
         } catch (error: any) {
-            console.error('Failed to update user profile:', error);
-            const errorMessage = error.response?.data?.error || 'Failed to update profile';
+            console.error("Failed to update user profile:", error);
+            const errorMessage =
+                error.response?.data?.error || "Failed to update profile";
             return { success: false, error: errorMessage };
         }
     }
 
-    async uploadAvatar(file: File): Promise<{ success: boolean; profile?: UserProfile; error?: string }> {
+    async uploadAvatar(
+        file: File
+    ): Promise<{ success: boolean; profile?: UserProfile; error?: string }> {
         try {
             const form = new FormData();
-            form.append('avatar', file);
-            await apiClient.post('/users/me/avatar', form);
+            form.append("avatar", file);
+            await apiClient.post("/users/me/avatar", form);
             const profile = await this.refreshCachedUser();
             return { success: true, profile };
         } catch (error: any) {
-            const errorMessage = error.response?.data?.error || 'Failed to upload avatar';
+            const errorMessage =
+                error.response?.data?.error || "Failed to upload avatar";
             return { success: false, error: errorMessage };
         }
     }
 
-    async resetAvatar(): Promise<{ success: boolean; profile?: UserProfile; error?: string }> {
+    async resetAvatar(): Promise<{
+        success: boolean;
+        profile?: UserProfile;
+        error?: string;
+    }> {
         try {
-            await apiClient.post('/users/me/avatar/reset');
+            await apiClient.post("/users/me/avatar/reset");
             const profile = await this.refreshCachedUser();
             return { success: true, profile };
         } catch (error: any) {
-            const errorMessage = error.response?.data?.error || 'Failed to reset avatar';
+            const errorMessage =
+                error.response?.data?.error || "Failed to reset avatar";
             return { success: false, error: errorMessage };
         }
     }
 
     async getUserStatus(): Promise<UserStatus> {
         try {
-            return await apiClient.get('/users/me/status');
+            return await apiClient.get("/users/me/status");
         } catch (error) {
-            console.error('Failed to get user status:', error);
+            console.error("Failed to get user status:", error);
             throw error;
         }
     }
 
-    async changePassword(currentPassword: string, newPassword: string): Promise<{ success: boolean }> {
+    async changePassword(
+        currentPassword: string,
+        newPassword: string
+    ): Promise<{ success: boolean }> {
         try {
-            await apiClient.post('/auth/setPassword', {
+            await apiClient.post("/auth/setPassword", {
                 newPassword: newPassword,
                 currentPassword: currentPassword,
             });
             return { success: true };
         } catch (error) {
-            console.error('Failed to change password:', error);
+            console.error("Failed to change password:", error);
             throw error;
         }
     }
 
-    async initializeUser(): Promise<{ profile: UserProfile; user_info: UserInfo; status: UserStatus }> {
+    async initializeUser(): Promise<{
+        profile: UserProfile;
+        user_info: UserInfo;
+        status: UserStatus;
+    }> {
         try {
-            const data = await apiClient.get<any>('/users/me');
+            const data = await apiClient.get<any>("/users/me");
             const result = {
                 profile: data.profile,
                 user_info: {
@@ -307,16 +424,46 @@ class UserService {
                 },
                 status: data.status,
             };
-            this.setCachedData({ profile: result.profile, info: result.user_info as UserInfo });
+            this.setCachedData({
+                profile: result.profile,
+                info: result.user_info as UserInfo,
+            });
             return result;
         } catch (error) {
-            console.error('Failed to initialize user:', error);
+            console.error("Failed to initialize user:", error);
+            throw error;
+        }
+    }
+
+    async initializeUserFull(): Promise<UserInitData> {
+        try {
+            const data = await apiClient.get<UserInitData>("/users/init");
+            const userInfo = {
+                id: data.user.id,
+                username: data.user.username,
+                email: data.user.email,
+                role: data.user.role,
+                created_at: data.user.created_at,
+                updated_at: data.user.updated_at,
+                last_login_at: data.user.last_login_at ?? null,
+            };
+            this.setCachedData({
+                profile: data.user.profile,
+                info: userInfo as UserInfo,
+            });
+            return data;
+        } catch (error) {
+            console.error("Failed to initialize user (full):", error);
             throw error;
         }
     }
 
-    async getUserProfile(userId: number): Promise<PublicUserProfile> {
-        const publicUser = await apiClient.get<any>(`/users/${userId}`);
+    async getUserProfile(
+        userId: number,
+        include: string[] = []
+    ): Promise<PublicUserProfile> {
+        const query = include.length > 0 ? `?include=${include.join(",")}` : "";
+        const publicUser = await apiClient.get<any>(`/users/${userId}${query}`);
 
         const profile = publicUser.profile || null;
         const base: PublicUserProfile = {
@@ -329,54 +476,89 @@ class UserService {
             avatar_url: profile?.avatar_url ?? null,
             social_links: profile?.social_links ?? [],
             role: profile?.role ?? null,
+            achievements: publicUser.achievements,
+            presets: publicUser.presets,
+            favorite_client_id: profile?.favorite_client_id ?? null,
         };
 
-        const token = localStorage.getItem('authToken');
+        if (publicUser.friendship_status) {
+            return { ...base, friendship_status: publicUser.friendship_status };
+        }
+
+        const token = localStorage.getItem("authToken");
         if (!token) return base;
 
         try {
             const batch = await this.getFriendsBatch();
             const isFriend = batch.friends.some((f) => f.id === userId);
-            if (isFriend) return { ...base, friendship_status: 'friends' };
+            if (isFriend) return { ...base, friendship_status: "friends" };
 
-            const sent = batch.requests.sent.find((r) => r.addressee.id === userId);
+            const sent = batch.requests.sent.find(
+                (r) => r.addressee.id === userId
+            );
             if (sent) {
-                if ((sent.status || '').toString() === 'blocked') return { ...base, friendship_status: 'blocked' };
-                return { ...base, friendship_status: 'request_sent' };
+                if ((sent.status || "").toString() === "blocked")
+                    return { ...base, friendship_status: "blocked" };
+                return { ...base, friendship_status: "request_sent" };
             }
 
-            const received = batch.requests.received.find((r) => r.requester.id === userId);
+            const received = batch.requests.received.find(
+                (r) => r.requester.id === userId
+            );
             if (received) {
-                if ((received.status || '').toString() === 'blocked') return { ...base, friendship_status: 'blocked' };
-                return { ...base, friendship_status: 'request_received' };
+                if ((received.status || "").toString() === "blocked")
+                    return { ...base, friendship_status: "blocked" };
+                return { ...base, friendship_status: "request_received" };
             }
 
             const anyBlocked =
-                batch.requests.sent.some((r) => r.status === 'blocked' && r.addressee.id === userId) ||
-                batch.requests.received.some((r) => r.status === 'blocked' && r.requester.id === userId);
-            return { ...base, friendship_status: anyBlocked ? 'blocked' : null };
+                batch.requests.sent.some(
+                    (r) => r.status === "blocked" && r.addressee.id === userId
+                ) ||
+                batch.requests.received.some(
+                    (r) => r.status === "blocked" && r.requester.id === userId
+                );
+            return {
+                ...base,
+                friendship_status: anyBlocked ? "blocked" : null,
+            };
         } catch {
             return base;
         }
     }
 
     async searchUsers(query: string, limit = 20): Promise<SearchUser[]> {
-        const resp = await apiClient.get<any[]>('/users/search', { params: { q: query, limit } });
+        const resp = await apiClient.get<any[]>("/users/search", {
+            params: { q: query, limit },
+        });
         return (resp || []).map((u: any) => ({
             id: u.id,
             username: u.username,
             nickname: u.nickname ?? null,
-            friendship_status: (u.friendship ?? null) as FriendshipStatus,
+            avatar_url: u.avatar_url ?? null,
+            friendship_status: (u.friendship_status ?? null) as FriendshipStatus,
         }));
     }
 
-    async getFriendsBatch(): Promise<{ friends: Friend[]; requests: FriendRequestsBatch }> {
-        const resp = await apiClient.get<any>('/friends/batch');
+    async getFriendsBatch(): Promise<{
+        friends: Friend[];
+        requests: FriendRequestsBatch;
+    }> {
+        const resp = await apiClient.get<any>("/friends/batch");
 
-        const friends: Friend[] = (resp.friends || []).map((f: any) => this.mapFriend(f));
+        const friends: Friend[] = (resp.friends || []).map((f: any) =>
+            this.mapFriend(f)
+        );
         const requests: FriendRequestsBatch = {
-            sent: (resp.requests?.sent || []).map((r: any) => this.mapFriendRequest(r)),
-            received: (resp.requests?.received || []).map((r: any) => this.mapFriendRequest(r)),
+            sent: (resp.requests?.sent || []).map((r: any) =>
+                this.mapFriendRequest(r)
+            ),
+            received: (resp.requests?.received || []).map((r: any) =>
+                this.mapFriendRequest(r)
+            ),
+            blocked: (resp.requests?.blocked || []).map((r: any) =>
+                this.mapFriendRequest(r)
+            ),
         };
 
         return { friends, requests };
@@ -393,7 +575,9 @@ class UserService {
     }
 
     async sendFriendRequest(userId: number): Promise<FriendRequest> {
-        const resp = await apiClient.post<any>('/friends/requests', { user_id: userId });
+        const resp = await apiClient.post<any>("/friends/requests", {
+            user_id: userId,
+        });
         const batch = await this.getFriendsBatch();
         const created =
             batch.requests.sent.find((r) => r.id === resp?.id) ||
@@ -402,8 +586,11 @@ class UserService {
         return this.mapFriendRequest(resp);
     }
 
-    async respondToFriendRequest(requestId: number, action: 'accept' | 'reject'): Promise<void> {
-        if (action === 'accept') {
+    async respondToFriendRequest(
+        requestId: number,
+        action: "accept" | "reject"
+    ): Promise<void> {
+        if (action === "accept") {
             await apiClient.post(`/friends/requests/${requestId}/accept`);
         } else {
             await apiClient.post(`/friends/requests/${requestId}/decline`);
@@ -415,11 +602,11 @@ class UserService {
     }
 
     async blockUser(userId: number): Promise<void> {
-        await apiClient.post('/friends/block', { user_id: userId });
+        await apiClient.post("/friends/block", { user_id: userId });
     }
 
     async unblockUser(userId: number): Promise<void> {
-        await apiClient.post('/friends/unblock', { user_id: userId });
+        await apiClient.post("/friends/unblock", { user_id: userId });
     }
 
     async getBlockedUsers(): Promise<Friend[]> {
@@ -435,7 +622,6 @@ class UserService {
         };
 
         const consider = (r: FriendRequest) => {
-            if (r.status !== 'blocked') return;
             if (meId && r.requester.id === meId) add(r.addressee);
             else if (meId && r.addressee.id === meId) add(r.requester);
             else {
@@ -444,8 +630,7 @@ class UserService {
             }
         };
 
-        batch.requests.sent.forEach(consider);
-        batch.requests.received.forEach(consider);
+        batch.requests.blocked.forEach(consider);
 
         return blocked;
     }
@@ -455,20 +640,38 @@ class UserService {
     }
 
     async getSocialLinks(): Promise<SocialLink[]> {
-        return await apiClient.get('/users/me/social-links');
+        return await apiClient.get("/users/me/social-links");
     }
 
     async updateSocialLinks(links: SocialLink[]): Promise<SocialLink[]> {
-        return await apiClient.put('/users/me/social-links', { links });
+        return await apiClient.put("/users/me/social-links", { links });
     }
 
     async getPreferences(): Promise<UserPreference[]> {
-        return await apiClient.get('/users/me/preferences');
+        return await apiClient.get("/users/me/preferences");
     }
 
     async setPreference(key: string, value: unknown): Promise<UserPreference> {
         const safeKey = encodeURIComponent(key);
-        return await apiClient.put(`/users/me/preferences/${safeKey}`, { value });
+        let payloadValue: unknown = value;
+        try {
+            if (
+                key === SYNC_SETTINGS_PREF_KEY &&
+                value &&
+                typeof value === "object"
+            ) {
+                payloadValue = this.stripShowFields(value);
+            }
+        } catch (err) {
+            console.warn(
+                "Failed to strip show fields from settings payload:",
+                err
+            );
+        }
+
+        return await apiClient.put(`/users/me/preferences/${safeKey}`, {
+            value: payloadValue,
+        });
     }
 
     async deletePreference(key: string): Promise<void> {
@@ -477,11 +680,13 @@ class UserService {
     }
 
     async getFavorites(): Promise<UserFavorite[]> {
-        return await apiClient.get('/users/me/favorites');
+        return await apiClient.get("/users/me/favorites");
     }
 
-    async addFavorite(favorite: Omit<UserFavorite, 'id' | 'created_at'>): Promise<UserFavorite> {
-        return await apiClient.post('/users/me/favorites', favorite);
+    async addFavorite(
+        favorite: Omit<UserFavorite, "id" | "created_at">
+    ): Promise<UserFavorite> {
+        return await apiClient.post("/users/me/favorites", favorite);
     }
 
     async deleteFavorite(favoriteId: number): Promise<void> {
@@ -489,11 +694,13 @@ class UserService {
     }
 
     async getExternalAccounts(): Promise<UserExternalAccount[]> {
-        return await apiClient.get('/users/me/accounts');
+        return await apiClient.get("/users/me/accounts");
     }
 
-    async addExternalAccount(account: Omit<UserExternalAccount, 'id' | 'created_at' | 'updated_at'>): Promise<UserExternalAccount> {
-        return await apiClient.post('/users/me/accounts', account);
+    async addExternalAccount(
+        account: Omit<UserExternalAccount, "id" | "created_at" | "updated_at">
+    ): Promise<UserExternalAccount> {
+        return await apiClient.post("/users/me/accounts", account);
     }
 
     async deleteExternalAccount(accountId: number): Promise<void> {
@@ -508,7 +715,9 @@ class UserService {
                 this.getExternalAccounts(),
             ]);
 
-            const settingsPref = preferences.find((p) => p.key === SYNC_SETTINGS_PREF_KEY) || null;
+            const settingsPref =
+                preferences.find((p) => p.key === SYNC_SETTINGS_PREF_KEY) ||
+                null;
 
             const lastSync = this.maxIsoTimestamp([
                 settingsPref?.updated_at ?? null,
@@ -518,24 +727,34 @@ class UserService {
 
             return {
                 last_sync_timestamp: lastSync,
-                has_cloud_data: !!settingsPref || favorites.length > 0 || accounts.length > 0,
+                has_cloud_data:
+                    !!settingsPref ||
+                    favorites.length > 0 ||
+                    accounts.length > 0,
             };
         } catch (error) {
-            console.error('Failed to get sync status:', error);
+            console.error("Failed to get sync status:", error);
             return null;
         }
     }
 
     async syncToCloud(syncData: SyncData): Promise<void> {
-        await this.setPreference(SYNC_SETTINGS_PREF_KEY, syncData.settings_data ?? {});
+        await this.setPreference(
+            SYNC_SETTINGS_PREF_KEY,
+            syncData.settings_data ?? {}
+        );
 
         const [remoteFavorites, remoteAccounts] = await Promise.all([
             this.getFavorites(),
             this.getExternalAccounts(),
         ]);
 
-        const localFavoriteRefs = new Set((syncData.favorites_data || []).map((id) => String(id)));
-        const remoteClientFavorites = remoteFavorites.filter((f) => f.type === SYNC_FAVORITE_TYPE);
+        const localFavoriteRefs = new Set(
+            (syncData.favorites_data || []).map((id) => String(id))
+        );
+        const remoteClientFavorites = remoteFavorites.filter(
+            (f) => f.type === SYNC_FAVORITE_TYPE
+        );
 
         await Promise.all(
             remoteClientFavorites
@@ -543,10 +762,16 @@ class UserService {
                 .map((f) => this.deleteFavorite(f.id))
         );
 
-        const remoteFavoriteRefs = new Set(remoteClientFavorites.map((f) => f.reference));
+        const remoteFavoriteRefs = new Set(
+            remoteClientFavorites.map((f) => f.reference)
+        );
         for (const favRef of localFavoriteRefs) {
             if (remoteFavoriteRefs.has(favRef)) continue;
-            await this.addFavorite({ type: SYNC_FAVORITE_TYPE, reference: favRef, metadata: null });
+            await this.addFavorite({
+                type: SYNC_FAVORITE_TYPE,
+                reference: favRef,
+                metadata: null,
+            });
         }
 
         const localAccounts = (syncData.accounts_data || [])
@@ -554,29 +779,70 @@ class UserService {
                 username: acc?.username,
                 tags: acc?.tags,
             }))
-            .filter((acc) => typeof acc.username === 'string' && acc.username.length > 0);
+            .filter(
+                (acc) =>
+                    typeof acc.username === "string" && acc.username.length > 0
+            );
 
-        const localAccountIds = new Set(localAccounts.map((a) => a.username));
-        const remoteManagedAccounts = remoteAccounts.filter((a) => a.provider === SYNC_ACCOUNT_PROVIDER);
+        const localAccountNames = new Set(localAccounts.map((a) => a.username));
 
         await Promise.all(
-            remoteManagedAccounts
-                .filter((a) => !localAccountIds.has(a.external_id))
+            remoteAccounts
+                .filter((a) => a.display_name && !localAccountNames.has(a.display_name))
                 .map((a) => this.deleteExternalAccount(a.id))
         );
 
-        const remoteAccountIds = new Set(remoteManagedAccounts.map((a) => a.external_id));
+        const remoteAccountNames = new Set(
+            remoteAccounts.map((a) => a.display_name).filter(Boolean) as string[]
+        );
         for (const acc of localAccounts) {
-            if (remoteAccountIds.has(acc.username)) continue;
+            if (remoteAccountNames.has(acc.username)) continue;
             await this.addExternalAccount({
-                provider: SYNC_ACCOUNT_PROVIDER,
-                external_id: acc.username,
                 display_name: acc.username,
                 metadata: { tags: acc.tags || [] },
             });
         }
     }
 
+    formatSyncData(
+        preferences: UserPreference[],
+        favorites: UserFavorite[],
+        accounts: UserExternalAccount[]
+    ): SyncData {
+        const settingsPref =
+            preferences.find((p) => p.key === SYNC_SETTINGS_PREF_KEY) || null;
+
+        const favorites_data = (favorites || [])
+            .filter((f) => f.type === SYNC_FAVORITE_TYPE)
+            .map((f) => Number.parseInt(String(f.reference), 10))
+            .filter((n) => Number.isFinite(n));
+
+        const accounts_data = (accounts || [])
+            .map((a) => {
+                const meta: any =
+                    a.metadata && typeof a.metadata === "object"
+                        ? a.metadata
+                        : {};
+                return {
+                    username: a.display_name,
+                    tags: Array.isArray(meta.tags) ? meta.tags : ["cloud-sync"],
+                };
+            });
+
+        const last_sync_timestamp = this.maxIsoTimestamp([
+            settingsPref?.updated_at ?? null,
+            ...favorites.map((f) => f.created_at ?? null),
+            ...accounts.map((a) => a.updated_at ?? null),
+        ]);
+
+        return {
+            settings_data: (settingsPref?.value ?? {}) as any,
+            favorites_data,
+            accounts_data,
+            last_sync_timestamp,
+        };
+    }
+
     async downloadFromCloud(): Promise<SyncData | null> {
         try {
             const [preferences, favorites, accounts] = await Promise.all([
@@ -585,48 +851,20 @@ class UserService {
                 this.getExternalAccounts(),
             ]);
 
-            const settingsPref = preferences.find((p) => p.key === SYNC_SETTINGS_PREF_KEY) || null;
-
-            const favorites_data = (favorites || [])
-                .filter((f) => f.type === SYNC_FAVORITE_TYPE)
-                .map((f) => Number.parseInt(String(f.reference), 10))
-                .filter((n) => Number.isFinite(n));
-
-            const accounts_data = (accounts || [])
-                .filter((a) => a.provider === SYNC_ACCOUNT_PROVIDER)
-                .map((a) => {
-                    const meta: any = a.metadata && typeof a.metadata === 'object' ? a.metadata : {};
-                    return {
-                        username: a.external_id,
-                        tags: Array.isArray(meta.tags) ? meta.tags : ['cloud-sync'],
-                    };
-                });
-
-            const last_sync_timestamp = this.maxIsoTimestamp([
-                settingsPref?.updated_at ?? null,
-                ...favorites.map((f) => f.created_at ?? null),
-                ...accounts.map((a) => a.updated_at ?? null),
-            ]);
-
-            return {
-                settings_data: (settingsPref?.value ?? {}) as any,
-                favorites_data,
-                accounts_data,
-                last_sync_timestamp,
-            };
+            return this.formatSyncData(preferences, favorites, accounts);
         } catch (error) {
-            console.error('Failed to download from cloud:', error);
+            console.error("Failed to download from cloud:", error);
             return null;
         }
     }
 
     clearCache(): void {
         localStorage.removeItem(CACHE_KEY);
-        console.log('User data cache cleared');
+        console.log("User data cache cleared");
     }
 
     private async refreshCachedUser(): Promise<UserProfile | undefined> {
-        const data = await apiClient.get<any>('/users/me');
+        const data = await apiClient.get<any>("/users/me");
         const profile = data.profile as UserProfile;
         const info: UserInfo = {
             id: data.id,
diff --git a/src/services/webSocketService.ts b/src/services/webSocketService.ts
new file mode 100644
index 00000000..3bd3370a
--- /dev/null
+++ b/src/services/webSocketService.ts
@@ -0,0 +1,173 @@
+import { Client } from "@stomp/stompjs";
+import { getApiUrl } from "../config";
+import { updaterService } from "./updaterService";
+import i18n from "../i18n";
+
+class WebSocketService {
+    private client: Client | null = null;
+    private connected: boolean = false;
+
+    private initializeClient() {
+        if (this.client) {
+            return;
+        }
+
+        this.client = new Client({
+            brokerURL: this.getBrokerUrl(),
+            connectHeaders: {
+                Authorization:
+                    `Bearer ${localStorage.getItem("authToken")}` || "",
+            },
+            reconnectDelay: 5000,
+            heartbeatIncoming: 10000,
+            heartbeatOutgoing: 10000,
+            onConnect: () => {
+                this.connected = true;
+                console.log("Connected to WebSocket");
+                this.subscribeToUserAchievements();
+                this.subscribeToFriendNotifications();
+                this.subscribeToCommands();
+                this.subscribeToOnlineCount();
+            },
+            onDisconnect: () => {
+                this.connected = false;
+                console.log("Disconnected from WebSocket");
+            },
+            onStompError: (frame) => {
+                console.error(
+                    "Broker reported error: " + frame.headers["message"]
+                );
+                console.error("Additional details: " + frame.body);
+            },
+            onWebSocketClose: () => {
+                this.connected = false;
+                console.log("WebSocket connection closed");
+            },
+        });
+    }
+
+    private getBrokerUrl(): string {
+        const baseUrl = getApiUrl();
+
+        if (!baseUrl) {
+            throw new Error("API URL is not initialized");
+        }
+
+        const url = new URL(baseUrl);
+
+        url.protocol = url.protocol === "https:" ? "wss:" : "ws:";
+        url.pathname = "/ws";
+
+        return url.toString();
+    }
+
+    public connect() {
+        if (!this.connected) {
+            this.initializeClient();
+            this.client?.activate();
+        }
+    }
+
+    public disconnect() {
+        if (this.connected && this.client) {
+            this.client.deactivate();
+        }
+    }
+
+    private subscribeToUserAchievements() {
+        if (!this.client) {
+            console.error(
+                "Cannot subscribe: WebSocket client is not initialized"
+            );
+            return;
+        }
+
+        this.client.subscribe("/user/queue/achievements", (message) => {
+            if (message.body) {
+                const achievement = JSON.parse(message.body);
+                this.handleAchievementUnlock(achievement);
+            }
+        });
+    }
+
+    private subscribeToFriendNotifications() {
+        if (!this.client) {
+            console.error(
+                "Cannot subscribe: WebSocket client is not initialized"
+            );
+            return;
+        }
+
+        this.client.subscribe("/user/queue/friends", (message) => {
+            if (message.body) {
+                const data = JSON.parse(message.body);
+                this.handleFriendNotification(data);
+            }
+        });
+    }
+
+    private handleFriendNotification(data: any) {
+        let eventType = "";
+        if (data.type === "REQUEST_RECEIVED") {
+            eventType = "friend-request-received";
+        } else if (
+            data.type === "REQUEST_ACCEPTED" ||
+            data.type === "FRIEND_ADDED"
+        ) {
+            eventType = "friend-request-accepted";
+        }
+
+        if (eventType) {
+            const event = new CustomEvent(eventType, { detail: data });
+            window.dispatchEvent(event);
+        }
+    }
+
+    private handleAchievementUnlock(achievement: any) {
+        const event = new CustomEvent("achievement-unlocked", {
+            detail: achievement,
+        });
+        window.dispatchEvent(event);
+    }
+
+    private subscribeToCommands() {
+        if (!this.client) {
+            console.error(
+                "Cannot subscribe: WebSocket client is not initialized"
+            );
+            return;
+        }
+
+        this.client.subscribe("/topic/commands", (message) => {
+            if (message.body) {
+                const data = JSON.parse(message.body);
+                this.handleCommand(data);
+            }
+        });
+    }
+
+    private async handleCommand(data: any) {
+        if (data.command === "CHECK_FOR_UPDATES") {
+            const t = i18n.global.t;
+            await updaterService.checkForUpdates(false, t);
+        }
+    }
+
+    private subscribeToOnlineCount() {
+        if (!this.client) {
+            return;
+        }
+
+        this.client.subscribe("/topic/online-count", (message) => {
+            if (message.body) {
+                const data = JSON.parse(message.body);
+                const event = new CustomEvent("online-count-updated", {
+                    detail: data,
+                });
+                window.dispatchEvent(event);
+            }
+        });
+    }
+}
+
+export const webSocketService = new WebSocketService();
diff --git a/src/types/presets.ts b/src/types/presets.ts
index a001f40b..16089b4c 100644
--- a/src/types/presets.ts
+++ b/src/types/presets.ts
@@ -27,6 +27,9 @@ export interface ThemePreset {
     warningContent?: string;
     error?: string;
     errorContent?: string;
+    backgroundImage?: string;
+    backgroundBlur?: number;
+    backgroundOpacity?: number;
 }
 
 export interface CreatePresetInput {
@@ -34,12 +37,12 @@ export interface CreatePresetInput {
     description?: string;
     customCSS: string;
     enableCustomCSS: boolean;
-    
+
     base100?: string;
     base200?: string;
     base300?: string;
     baseContent?: string;
-    
+
     primary?: string;
     primaryContent?: string;
     secondary?: string;
@@ -56,6 +59,9 @@ export interface CreatePresetInput {
     warningContent?: string;
     error?: string;
     errorContent?: string;
+    backgroundImage?: string;
+    backgroundBlur?: number;
+    backgroundOpacity?: number;
 }
 
 export interface UpdatePresetInput extends CreatePresetInput {
@@ -85,6 +91,9 @@ export interface MarketplaceTheme {
     warningContent?: string;
     error?: string;
     errorContent?: string;
+    backgroundImage?: string;
+    backgroundBlur?: number;
+    backgroundOpacity?: number;
 }
 
 export interface MarketplaceAuthor {
diff --git a/src/types/toast.ts b/src/types/toast.ts
index 82f4254c..cc949cd5 100644
--- a/src/types/toast.ts
+++ b/src/types/toast.ts
@@ -1,5 +1,11 @@
-export type ToastType = 'success' | 'error' | 'info' | 'warning';
-export type ToastPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-center' | 'top-center';
+export type ToastType = "success" | "error" | "info" | "warning";
+export type ToastPosition =
+    | "bottom-right"
+    | "bottom-left"
+    | "top-right"
+    | "top-left"
+    | "bottom-center"
+    | "top-center";
 
 export interface ToastMessage {
     id: number;
diff --git a/src/types/ui.ts b/src/types/ui.ts
index 4af5beb3..00ee7ccd 100644
--- a/src/types/ui.ts
+++ b/src/types/ui.ts
@@ -31,6 +31,8 @@ export interface CustomClient {
     description?: string;
     created_at: string;
     is_installed: boolean;
+    java_path?: string | null;
+    java_args?: string | null;
 }
 
 export interface ClientDetails {
@@ -45,7 +47,6 @@ export interface ClientDetails {
         created_at: string;
         content: string;
     }>;
-
 }
 
 export interface ClientComment {
diff --git a/src/utils/discord.ts b/src/utils/discord.ts
index ed7abced..ae094a6d 100644
--- a/src/utils/discord.ts
+++ b/src/utils/discord.ts
@@ -1,17 +1,20 @@
 export const DISCORD_STATE_KEYS: Record<string, string> = {
-    home: 'discord.states.browsing_clients',
-    custom_clients: 'discord.states.browsing_custom_clients',
-    news: 'discord.states.browsing_news',
-    settings: 'discord.states.configuring_settings',
-    friends: 'discord.states.browsing_friends',
-    theme: 'discord.states.enjoying_visuals',
-    app_logs: 'discord.states.watching_client_behavior',
-    'user-profile': 'discord.states.in_profile',
-    about: 'discord.states.watching_about',
-    login: 'discord.states.logging_in',
+    home: "discord.states.browsing_clients",
+    custom_clients: "discord.states.browsing_custom_clients",
+    news: "discord.states.browsing_news",
+    settings: "discord.states.configuring_settings",
+    friends: "discord.states.browsing_friends",
+    theme: "discord.states.enjoying_visuals",
+    app_logs: "discord.states.watching_client_behavior",
+    "user-profile": "discord.states.in_profile",
+    about: "discord.states.watching_about",
+    login: "discord.states.logging_in",
 };
 
-export const getDiscordState = (key: string, translate: (k: string) => string) => {
+export const getDiscordState = (
+    key: string,
+    translate: (k: string) => string
+) => {
     const stateKey = DISCORD_STATE_KEYS[key] || DISCORD_STATE_KEYS.home;
     return translate(stateKey);
 };
diff --git a/src/utils/events.ts b/src/utils/events.ts
index ced99606..d911e62f 100644
--- a/src/utils/events.ts
+++ b/src/utils/events.ts
@@ -16,7 +16,6 @@ export function isWinterEvent(): boolean {
     return false;
 }
 
-
 export function isHalloweenEvent(): boolean {
     const now = new Date();
     const month = now.getMonth();
@@ -37,18 +36,18 @@ export function getCurrentEvent(): EventInfo | null {
     if (isHalloweenEvent()) {
         return {
             isActive: true,
-            name: 'halloween',
-            emoji: '🎃',
-            theme: 'spooky',
+            name: "halloween",
+            emoji: "🎃",
+            theme: "spooky",
         };
     }
 
     if (isWinterEvent()) {
         return {
             isActive: true,
-            name: 'winter',
-            emoji: '❄️',
-            theme: 'winter',
+            name: "winter",
+            emoji: "❄️",
+            theme: "winter",
         };
     }
 
@@ -59,31 +58,38 @@ export async function applyCursorForEvent(): Promise<void> {
     const event = getCurrentEvent();
 
     try {
-        if (typeof document !== 'undefined') {
+        if (typeof document !== "undefined") {
             const root = document.documentElement;
-            root.classList.remove('winter-event');
-            root.classList.remove('halloween-cursor');
+            root.classList.remove("winter-event");
+            root.classList.remove("halloween-cursor");
 
-            const existing = document.getElementById('halloween-cursor-style');
-            if (existing && existing.parentNode) existing.parentNode.removeChild(existing);
+            const existing = document.getElementById("halloween-cursor-style");
+            if (existing && existing.parentNode)
+                existing.parentNode.removeChild(existing);
         }
-    } catch {
-    }
+    } catch {}
 
-    if (event?.name === 'halloween') {
+    if (event?.name === "halloween") {
         try {
-            if (typeof document !== 'undefined') {
+            if (typeof document !== "undefined") {
                 const active = isHalloweenEvent();
-                const styleId = 'halloween-cursor-style';
+                const styleId = "halloween-cursor-style";
 
-                const pointerUrl = new URL('../assets/images/cursores/bat-pointer.png', import.meta.url).href;
-                const cursorUrl = new URL('../assets/images/cursores/bat-cursor.png', import.meta.url).href;
+                const pointerUrl = new URL(
+                    "../assets/images/cursores/bat-pointer.png",
+                    import.meta.url
+                ).href;
+                const cursorUrl = new URL(
+                    "../assets/images/cursores/bat-cursor.png",
+                    import.meta.url
+                ).href;
 
                 const existing = document.getElementById(styleId);
-                if (existing && existing.parentNode) existing.parentNode.removeChild(existing);
+                if (existing && existing.parentNode)
+                    existing.parentNode.removeChild(existing);
 
                 if (active) {
-                    const styleEl = document.createElement('style');
+                    const styleEl = document.createElement("style");
                     styleEl.id = styleId;
                     styleEl.textContent = `
                     :root.halloween-cursor,
@@ -102,23 +108,25 @@ export async function applyCursorForEvent(): Promise<void> {
                     
                     `.trim();
                     document.head.appendChild(styleEl);
-                    document.documentElement.classList.add('halloween-cursor');
+                    document.documentElement.classList.add("halloween-cursor");
                 } else {
-                    document.documentElement.classList.remove('halloween-cursor');
+                    document.documentElement.classList.remove(
+                        "halloween-cursor"
+                    );
                 }
             }
         } catch (e) {
-            console.error('Failed to apply halloween cursor:', e);
+            console.error("Failed to apply halloween cursor:", e);
         }
     }
 
-    if (event?.name === 'winter') {
+    if (event?.name === "winter") {
         try {
-            if (typeof document !== 'undefined') {
-                document.documentElement.classList.add('winter-event');
+            if (typeof document !== "undefined") {
+                document.documentElement.classList.add("winter-event");
             }
         } catch (e) {
-            console.error('Failed to apply winter UI:', e);
+            console.error("Failed to apply winter UI:", e);
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/utils/isDevelopment.ts b/src/utils/isDevelopment.ts
index e0c7546a..cdd74ed8 100644
--- a/src/utils/isDevelopment.ts
+++ b/src/utils/isDevelopment.ts
@@ -2,10 +2,10 @@ import { invoke } from "@tauri-apps/api/core";
 
 async function tryInvokeIsDevelopment(): Promise<boolean> {
     try {
-        const result = await invoke('is_development');
+        const result = await invoke("is_development");
         return Boolean(result);
     } catch (e) {
-        console.warn('isDevelopment check failed:', e);
+        console.warn("isDevelopment check failed:", e);
         return false;
     }
 }
diff --git a/src/utils/presetPayload.ts b/src/utils/presetPayload.ts
index 172f2c13..2c988198 100644
--- a/src/utils/presetPayload.ts
+++ b/src/utils/presetPayload.ts
@@ -1,4 +1,4 @@
-import type { CreatePresetInput, MarketplaceTheme } from '../types/presets';
+import type { CreatePresetInput, MarketplaceTheme } from "../types/presets";
 
 export function buildPresetCreatePayload(
     name: string,
@@ -8,7 +8,7 @@ export function buildPresetCreatePayload(
     return {
         name,
         description,
-        customCSS: theme.customCSS ?? '',
+        customCSS: theme.customCSS ?? "",
         enableCustomCSS: theme.enableCustomCSS ?? false,
         base100: theme.base100,
         base200: theme.base200,
@@ -30,5 +30,8 @@ export function buildPresetCreatePayload(
         warningContent: theme.warningContent,
         error: theme.error,
         errorContent: theme.errorContent,
+        backgroundImage: theme.backgroundImage,
+        backgroundBlur: theme.backgroundBlur,
+        backgroundOpacity: theme.backgroundOpacity,
     };
 }
diff --git a/src/utils/roleBadge.ts b/src/utils/roleBadge.ts
index ebb34c94..c4b596f8 100644
--- a/src/utils/roleBadge.ts
+++ b/src/utils/roleBadge.ts
@@ -1,15 +1,21 @@
-export function getRoleBadge(role: string | null | undefined, t: (key: string) => string) {
+export function getRoleBadge(
+    role: string | null | undefined,
+    t: (key: string) => string
+) {
     if (!role) return null;
 
     const mapping: Record<string, { class: string; key: string }> = {
-        user: { class: 'badge badge-outline', key: 'roles.user' },
-        tester: { class: 'badge badge-info', key: 'roles.tester' },
-        admin: { class: 'badge badge-error', key: 'roles.admin' },
-        developer: { class: 'badge badge-primary', key: 'roles.developer' },
-        owner: { class: 'badge badge-error', key: 'roles.owner' },
+        user: { class: "badge badge-outline", key: "roles.user" },
+        tester: { class: "badge badge-info", key: "roles.tester" },
+        admin: { class: "badge badge-error", key: "roles.admin" },
+        developer: { class: "badge badge-primary", key: "roles.developer" },
+        owner: { class: "badge badge-error", key: "roles.owner" },
     };
 
-    const info = mapping[role] || { class: 'badge badge-outline', key: `roles.${role}` };
+    const info = mapping[role.toLowerCase()] || {
+        class: "badge badge-outline",
+        key: `roles.${role.toLowerCase()}`,
+    };
     return { text: t(info.key), className: info.class };
 }
 
diff --git a/src/utils/scrollLock.ts b/src/utils/scrollLock.ts
index b0dca86e..924c1d65 100644
--- a/src/utils/scrollLock.ts
+++ b/src/utils/scrollLock.ts
@@ -4,12 +4,12 @@ let originalHtmlOverflow: string | null = null;
 let originalBodyPaddingRight: string | null = null;
 
 const getScrollbarWidth = () => {
-    if (typeof window === 'undefined') return 0;
+    if (typeof window === "undefined") return 0;
     return window.innerWidth - document.documentElement.clientWidth;
 };
 
 export const lockScroll = () => {
-    if (typeof document === 'undefined') return;
+    if (typeof document === "undefined") return;
     if (openCount === 0) {
         originalBodyOverflow = document.body.style.overflow;
         originalHtmlOverflow = document.documentElement.style.overflow;
@@ -17,26 +17,30 @@ export const lockScroll = () => {
 
         const scrollbarWidth = getScrollbarWidth();
         if (scrollbarWidth > 0) {
-            const currentPadding = parseInt(getComputedStyle(document.body).paddingRight || '0', 10) || 0;
+            const currentPadding =
+                parseInt(
+                    getComputedStyle(document.body).paddingRight || "0",
+                    10
+                ) || 0;
             document.body.style.paddingRight = `${currentPadding + scrollbarWidth}px`;
         }
 
-        document.body.style.overflow = 'hidden';
-        document.documentElement.style.overflow = 'hidden';
+        document.body.style.overflow = "hidden";
+        document.documentElement.style.overflow = "hidden";
     }
     openCount++;
 };
 
 export const unlockScroll = () => {
-    if (typeof document === 'undefined') return;
+    if (typeof document === "undefined") return;
     openCount = Math.max(0, openCount - 1);
     if (openCount === 0) {
-        document.body.style.overflow = originalBodyOverflow || '';
-        document.documentElement.style.overflow = originalHtmlOverflow || '';
+        document.body.style.overflow = originalBodyOverflow || "";
+        document.documentElement.style.overflow = originalHtmlOverflow || "";
         if (originalBodyPaddingRight !== null) {
             document.body.style.paddingRight = originalBodyPaddingRight;
         } else {
-            document.body.style.paddingRight = '';
+            document.body.style.paddingRight = "";
         }
     }
 };
diff --git a/src/utils/settings.ts b/src/utils/settings.ts
index 4acf4cbd..79a964bf 100644
--- a/src/utils/settings.ts
+++ b/src/utils/settings.ts
@@ -1,6 +1,6 @@
-import { changeLanguage } from '../i18n';
-import { themeService } from '../services/themeService';
-import { settingsService } from '../services/settingsService';
+import { changeLanguage } from "../i18n";
+import { themeService } from "../services/themeService";
+import { settingsService } from "../services/settingsService";
 
 export interface Setting<T> {
     description: string;
@@ -18,34 +18,40 @@ export const fetchSettings = async (): Promise<AppSettings | null> => {
         await settingsService.loadSettings();
         return settingsService.getSettings() as unknown as AppSettings;
     } catch (err) {
-        console.warn('fetchSettings failed', err);
+        console.warn("fetchSettings failed", err);
         return null;
     }
 };
 
 export const applyLanguageOnStartup = async () => {
     const settings = await fetchSettings();
-    const lang = settings?.language?.value || localStorage.getItem('language') || 'en';
+    const lang =
+        settings?.language?.value || localStorage.getItem("language") || "en";
     try {
         await changeLanguage(lang);
     } catch (err) {
-        console.error('Failed to change language:', err);
+        console.error("Failed to change language:", err);
     }
 };
 
 export const applyThemeOnStartup = async () => {
     const settings = await fetchSettings();
     const themeFromSettings = settings?.theme?.value;
-    const localTheme = localStorage.getItem('theme');
+    const localTheme = localStorage.getItem("theme");
 
     const chosenTheme =
-        themeFromSettings || (localTheme && ['light', 'dark'].includes(localTheme) ? localTheme : 'dark');
+        themeFromSettings ||
+        (localTheme && ["light", "dark"].includes(localTheme)
+            ? localTheme
+            : "dark");
 
-    document.documentElement.setAttribute('data-theme', chosenTheme);
+    document.documentElement.setAttribute("data-theme", chosenTheme);
 
     try {
         themeService.loadSettings();
     } catch (e) {
-        console.error('Failed to load theme settings in service:', e);
+        console.error("Failed to load theme settings in service:", e);
     }
+
+    return chosenTheme;
 };
diff --git a/src/utils/tabs.ts b/src/utils/tabs.ts
index 740c3068..6b3bfe1a 100644
--- a/src/utils/tabs.ts
+++ b/src/utils/tabs.ts
@@ -1,17 +1,18 @@
 export const VALID_TABS = [
-    'home',
-    'custom_clients',
-    'settings',
-    'app_logs',
-    'customization',
-    'about',
-    'account',
-    'login',
-    'register',
-    'friends',
-    'user-profile',
-    'news',
-    'marketplace',
+    "home",
+    "custom_clients",
+    "settings",
+    "app_logs",
+    "customization",
+    "about",
+    "account",
+    "login",
+    "register",
+    "verify",
+    "friends",
+    "user-profile",
+    "news",
+    "marketplace",
 ];
 
-export type TabName = typeof VALID_TABS[number];
+export type TabName = (typeof VALID_TABS)[number];
diff --git a/src/utils/url.ts b/src/utils/url.ts
index 21d3baac..417bd784 100644
--- a/src/utils/url.ts
+++ b/src/utils/url.ts
@@ -1,4 +1,4 @@
-import { getApiUrl } from '../config';
+import { getApiUrl } from "../config";
 
 const ABSOLUTE_URL_REGEX = /^[a-z][a-z0-9+.-]*:/i;
 
@@ -9,7 +9,7 @@ export function resolveApiAssetUrl(url?: string | null): string | undefined {
     const baseUrl = getApiUrl();
     if (!baseUrl) return url;
 
-    if (url.startsWith('/')) {
+    if (url.startsWith("/")) {
         return `${baseUrl}${url}`;
     }
 
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index c19a17ce..5993bc4e 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,15 +1,15 @@
 export function formatDate(dateString: string): string {
     try {
         const date = new Date(dateString);
-        const day = String(date.getDate()).padStart(2, '0');
-        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, "0");
+        const month = String(date.getMonth() + 1).padStart(2, "0");
         const year = date.getFullYear();
-        const hours = String(date.getHours()).padStart(2, '0');
-        const minutes = String(date.getMinutes()).padStart(2, '0');
+        const hours = String(date.getHours()).padStart(2, "0");
+        const minutes = String(date.getMinutes()).padStart(2, "0");
 
         return `${day}/${month}/${year} ${hours}:${minutes}`;
     } catch (e) {
-        console.error('Invalid date string:', dateString, e);
-        return 'N/A';
+        console.error("Invalid date string:", dateString, e);
+        return "N/A";
     }
 }
diff --git a/src/views/About.vue b/src/views/About.vue
index 9d98e7df..ce2af47d 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { invoke } from '@tauri-apps/api/core';
-import { openUrl } from '@tauri-apps/plugin-opener';
-import { onMounted, ref } from 'vue';
-import { useToast } from '../services/toastService';
-import { useI18n } from 'vue-i18n';
-import { UpdateInfo, updaterService } from '../services/updaterService';
-import Logo from '../assets/images/logo.svg';
-import IconGitHub from '../assets/icons/github.svg';
-import IconTelegram from '../assets/icons/telegram.svg';
-import IconDiscord from '../assets/icons/discord.svg';
-import { CircleFadingArrowUp } from 'lucide-vue-next';
+import { invoke } from "@tauri-apps/api/core";
+import { openUrl } from "@tauri-apps/plugin-opener";
+import { onMounted, ref } from "vue";
+import { useToast } from "../services/toastService";
+import { useI18n } from "vue-i18n";
+import { UpdateInfo, updaterService } from "../services/updaterService";
+import Logo from "../assets/images/logo.svg";
+import IconGitHub from "../assets/icons/github.svg";
+import IconTelegram from "../assets/icons/telegram.svg";
+import IconDiscord from "../assets/icons/discord.svg";
+import { CircleFadingArrowUp } from "lucide-vue-next";
+import { achievementService } from "../services/achievementService";
+import { useUser } from "../composables/useUser";
 
 const { t } = useI18n();
 const LogoUrl = String(Logo);
@@ -17,61 +19,90 @@ const IconGitHubUrl = String(IconGitHub);
 const IconTelegramUrl = String(IconTelegram);
 const IconDiscordUrl = String(IconDiscord);
 const { addToast } = useToast();
+const { isAuthenticated } = useUser();
 
-const version = ref('');
-const codename = ref('');
-const commitHash = ref('');
-const branch = ref('');
+const version = ref("");
+const codename = ref("");
+const commitHash = ref("");
+const commitMessage = ref("");
+const branch = ref("");
 const development = ref(false);
 const isCheckingUpdates = ref(false);
+const logoClicks = ref(0);
+
+const handleLogoClick = async () => {
+    logoClicks.value++;
+    if (logoClicks.value === 7) {
+        if (!isAuthenticated.value) {
+            addToast(t("achievements.login_to_unlock"), "warning");
+            logoClicks.value = 0;
+            return;
+        }
+
+        try {
+            await achievementService.unlockAchievement("SECRET_FINDER");
+            addToast(
+                t("achievements.list.SECRET_FINDER.name") +
+                    ": " +
+                    t("achievements.list.SECRET_FINDER.description"),
+                "success"
+            );
+        } catch (error) {
+            console.error("Failed to unlock secret achievement:", error);
+        }
+        logoClicks.value = 0;
+    }
+};
 
 const getVersion = async () => {
     try {
-        const result = await invoke('get_version');
-        const data = typeof result === 'string' ? JSON.parse(result) : result;
-        version.value = data.version || '';
-        codename.value = data.codename || '';
-        commitHash.value = String(data.commitHash).slice(0, 7) || '';
-        branch.value = data.branch || '';
-        development.value = data.development === 'true' || false;
+        const result = await invoke("get_version");
+        const data = typeof result === "string" ? JSON.parse(result) : result;
+        version.value = data.version || "";
+        codename.value = data.codename || "";
+        commitHash.value = String(data.commitHash).slice(0, 7) || "";
+        branch.value = data.branch || "";
+        development.value = data.development === "true" || false;
+        commitMessage.value = data.commitMessage || "";
     } catch (error) {
-        console.error('Failed to get version:', error);
+        console.error("Failed to get version:", error);
     }
 };
 
 const openRepository = async () => {
     try {
-        await openUrl('https://github.com/dest4590/CollapseLoader');
+        await openUrl("https://github.com/dest4590/CollapseLoader");
     } catch (error) {
-        console.error('Failed to open repository:', error);
-        addToast(t('about.open_failed', { platform: 'Github' }), 'error');
+        console.error("Failed to open repository:", error);
+        addToast(t("about.open_failed", { platform: "Github" }), "error");
     }
 };
 
 const openTelegram = async () => {
     try {
-        await openUrl('https://t.me/CollapseLoader');
+        await openUrl("https://t.me/CollapseLoader");
     } catch (error) {
-        console.error('Failed to open telegram:', error);
-        addToast(t('about.open_failed', { platform: 'Telegram' }), 'error');
+        console.error("Failed to open telegram:", error);
+        addToast(t("about.open_failed", { platform: "Telegram" }), "error");
     }
 };
 
 const openDiscord = async () => {
     try {
-        await openUrl('https://collapseloader.org/discord/');
+        await openUrl("https://collapseloader.org/discord/");
     } catch (error) {
-        console.error('Failed to open discord:', error);
-        addToast(t('about.open_failed', { platform: 'Discord' }), 'error');
+        console.error("Failed to open discord:", error);
+        addToast(t("about.open_failed", { platform: "Discord" }), "error");
     }
 };
 
 const checkForUpdates = async () => {
     isCheckingUpdates.value = true;
     try {
-        const updateInfo: UpdateInfo | null = await updaterService.checkForUpdates(false, t);
+        const updateInfo: UpdateInfo | null =
+            await updaterService.checkForUpdates(false, t);
         if (!updateInfo?.available) {
-            addToast(t('updater.no_update'), 'success');
+            addToast(t("updater.no_update"), "success");
         }
     } finally {
         isCheckingUpdates.value = false;
@@ -86,100 +117,176 @@ onMounted(async () => {
 <template>
     <div class="slide-up">
         <div class="flex flex-col items-center mb-4">
-            <img :src="LogoUrl" alt="CollapseLoader Logo" class="w-36 h-36" />
+            <img
+                :src="LogoUrl"
+                alt="CollapseLoader Logo"
+                class="w-36 h-36 cursor-pointer select-none active:scale-95 transition-transform"
+                @click="handleLogoClick"
+            />
 
             <div class="text-center">
-                <h1 class="text-4xl font-bold mb-2">
-                    CollapseLoader (GAMMA)
-                </h1>
-                <div class="tooltip tooltip-bottom hover:underline cursor-pointer" id="codename"
-                    @click="openRepository">
+                <h1 class="text-4xl font-bold mb-2">CollapseLoader (GAMMA)</h1>
+                <div
+                    class="tooltip tooltip-bottom hover:underline cursor-pointer"
+                    id="codename"
+                    @click="openRepository"
+                >
                     <div class="tooltip-content flex flex-col">
                         <span class="text-sm font-semibold text-base-content">{{
                             codename
-                            }}</span>
+                        }}</span>
                         <span class="text-xs text-base-content/50">{{
                             commitHash
-                            }}</span>
+                        }}</span>
                     </div>
-                    <p class="text-base-content/70">{{ version ? `v${version}` : '-' }}</p>
+                    <p class="text-base-content/70">
+                        {{ version ? `v${version}` : "-" }}
+                    </p>
                 </div>
             </div>
         </div>
 
-        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-xl mx-auto mb-5">
-            <button type="button" @click="openRepository"
+        <div
+            class="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-xl mx-auto mb-5"
+        >
+            <button
+                type="button"
+                @click="openRepository"
                 class="social-link-btn btn btn-outline hover:bg-base-300 hover:text-primary border-base-content/20 h-auto py-4 flex flex-col items-center justify-center gap-2"
-                aria-label="Open GitHub repository">
-                <img :src="IconGitHubUrl" class="w-8 h-8 github-icon" alt="GitHub" />
+                aria-label="Open GitHub repository"
+            >
+                <img
+                    :src="IconGitHubUrl"
+                    class="w-8 h-8 github-icon"
+                    alt="GitHub"
+                />
                 <span class="text-sm font-medium">GitHub</span>
             </button>
 
-            <button type="button" @click="openTelegram"
+            <button
+                type="button"
+                @click="openTelegram"
                 class="social-link-btn btn btn-outline hover:bg-base-300 hover:text-info border-base-content/20 h-auto py-4 flex flex-col items-center justify-center gap-2"
-                aria-label="Open Telegram">
-                <img :src="IconTelegramUrl" class="w-8 h-8 telegram-icon" alt="Telegram" />
+                aria-label="Open Telegram"
+            >
+                <img
+                    :src="IconTelegramUrl"
+                    class="w-8 h-8 telegram-icon"
+                    alt="Telegram"
+                />
                 <span class="text-sm font-medium">Telegram</span>
             </button>
 
-            <button type="button" @click="openDiscord"
+            <button
+                type="button"
+                @click="openDiscord"
                 class="social-link-btn btn btn-outline hover:bg-base-300 hover:text-indigo-500 border-base-content/20 h-auto py-4 flex flex-col items-center justify-center gap-2"
-                aria-label="Open Discord">
-                <img :src="IconDiscordUrl" class="w-8 h-8 discord-icon" alt="Discord" />
+                aria-label="Open Discord"
+            >
+                <img
+                    :src="IconDiscordUrl"
+                    class="w-8 h-8 discord-icon"
+                    alt="Discord"
+                />
                 <span class="text-sm font-medium">Discord</span>
             </button>
         </div>
 
         <div class="flex justify-center max-w-xl mx-auto mb-5">
-            <button @click="checkForUpdates" :disabled="isCheckingUpdates" class="btn btn-primary w-full">
-                <span v-if="isCheckingUpdates" class="loading loading-spinner loading-sm"></span>
-                <CircleFadingArrowUp class="w-5 h-5" v-if="!isCheckingUpdates" />
-                {{ isCheckingUpdates ? t('updater.checking_updates') : t('updater.check_for_updates') }}
+            <button
+                @click="checkForUpdates"
+                :disabled="isCheckingUpdates"
+                class="btn btn-primary w-full"
+            >
+                <span
+                    v-if="isCheckingUpdates"
+                    class="loading loading-spinner loading-sm"
+                ></span>
+                <CircleFadingArrowUp
+                    class="w-5 h-5"
+                    v-if="!isCheckingUpdates"
+                />
+                {{
+                    isCheckingUpdates
+                        ? t("updater.checking_updates")
+                        : t("updater.check_for_updates")
+                }}
             </button>
         </div>
 
-        <div class="bg-base-200 rounded-xl border border-base-300 p-6 max-w-xl mx-auto">
+        <div
+            class="bg-base-200 rounded-xl border border-base-300 p-6 max-w-xl mx-auto"
+        >
             <div class="flex flex-col gap-3">
                 <h2 class="text-lg font-semibold text-primary-focus mb-2">
-                    {{ t('about.title') }}
+                    {{ t("about.title") }}
                 </h2>
-                <div class="flex justify-between items-center py-2 border-b border-base-300/50">
+                <div
+                    class="flex justify-between items-center py-2 border-b border-base-300/50"
+                >
                     <span class="text-base-content/80">{{
-                        t('about.version')
-                        }}</span>
+                        t("about.version")
+                    }}</span>
                     <span class="font-medium">{{ version }}</span>
                 </div>
 
-                <div class="flex justify-between items-center py-2 border-b border-base-300/50">
+                <div
+                    class="flex justify-between items-center py-2 border-b border-base-300/50"
+                >
                     <span class="text-base-content/80">{{
-                        t('about.codename')
-                        }}</span>
+                        t("about.codename")
+                    }}</span>
                     <span class="font-medium">{{ codename }}</span>
                 </div>
 
-                <div class="flex justify-between items-center py-2 border-b border-base-300/50">
+                <div
+                    class="flex justify-between items-center py-2 border-b border-base-300/50"
+                >
                     <span class="text-base-content/80">{{
-                        t('about.commit')
-                        }}</span>
+                        t("about.commit")
+                    }}</span>
                     <code class="bg-base-300 px-2 py-1 rounded text-xs">{{
                         commitHash
                     }}</code>
                 </div>
 
-                <div class="flex justify-between items-center py-2 border-b border-base-300/50">
-                    <span class="text-base-content/80">{{ t('about.branch') }}</span>
-                    <span class="font-medium"><code
-                            class="bg-base-300 px-2 py-1 rounded text-xs">{{ branch }}</code></span>
+                <div
+                    class="flex justify-between items-center py-2 border-b border-base-300/50"
+                >
+                    <span class="text-base-content/80">{{
+                        t("about.commit_message")
+                    }}</span>
+                    <span>{{ commitMessage }}</span>
                 </div>
 
-                <div class="flex justify-between items-center py-2 border-b border-base-300/50">
-                    <span class="text-base-content/80">{{ t('about.development') }}</span>
-                    <span class="font-medium"><code
-                            class="bg-base-300 px-2 py-1 rounded text-xs">{{ development }}</code></span>
+                <div
+                    class="flex justify-between items-center py-2 border-b border-base-300/50"
+                >
+                    <span class="text-base-content/80">{{
+                        t("about.branch")
+                    }}</span>
+                    <span class="font-medium"
+                        ><code class="bg-base-300 px-2 py-1 rounded text-xs">{{
+                            branch
+                        }}</code></span
+                    >
+                </div>
+
+                <div
+                    class="flex justify-between items-center py-2 border-b border-base-300/50"
+                >
+                    <span class="text-base-content/80">{{
+                        t("about.development")
+                    }}</span>
+                    <span class="font-medium"
+                        ><code class="bg-base-300 px-2 py-1 rounded text-xs">{{
+                            development
+                        }}</code></span
+                    >
                 </div>
 
                 <p class="text-sm text-base-content/70 mt-4">
-                    {{ t('about.description') }}
+                    {{ t("about.description") }}
                 </p>
             </div>
         </div>
@@ -227,7 +334,7 @@ button:hover {
 }
 
 .social-link-btn::after {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
@@ -244,19 +351,23 @@ button:hover {
     transform: scaleY(1);
 }
 
-html[data-theme='dark'] .github-icon {
-    filter: invert(100%) sepia(15%) saturate(1%) hue-rotate(282deg) brightness(102%) contrast(101%);
+html[data-theme="dark"] .github-icon {
+    filter: invert(100%) sepia(15%) saturate(1%) hue-rotate(282deg)
+        brightness(102%) contrast(101%);
 }
 
-html[data-theme='light'] .github-icon {
-    filter: invert(0%) sepia(15%) saturate(17%) hue-rotate(253deg) brightness(95%) contrast(103%);
+html[data-theme="light"] .github-icon {
+    filter: invert(0%) sepia(15%) saturate(17%) hue-rotate(253deg)
+        brightness(95%) contrast(103%);
 }
 
 .telegram-icon {
-    filter: invert(60%) sepia(24%) saturate(3389%) hue-rotate(169deg) brightness(89%) contrast(94%);
+    filter: invert(60%) sepia(24%) saturate(3389%) hue-rotate(169deg)
+        brightness(89%) contrast(94%);
 }
 
 .discord-icon {
-    filter: invert(39%) sepia(99%) saturate(2691%) hue-rotate(226deg) brightness(97%) contrast(109%);
+    filter: invert(39%) sepia(99%) saturate(2691%) hue-rotate(226deg)
+        brightness(97%) contrast(109%);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/AccountView.vue b/src/views/AccountView.vue
index 66103fd9..6599e2b4 100644
--- a/src/views/AccountView.vue
+++ b/src/views/AccountView.vue
@@ -5,45 +5,99 @@
                 <div class="card shadow-md border border-base-300">
                     <div class="card-body">
                         <div class="flex items-center gap-4 mb-4">
-                            <UserAvatar :name="userInfo.nickname || userInfo.username || 'User'" size="lg"
-                                :is-clickable="true" :src="(useUser().profile.value as any)?.avatar_url || null"
-                                :original-src="(useUser().profile.value as any)?.avatar_url || null"
-                                @click="openAvatarModal" />
+                            <UserAvatar
+                                :name="
+                                    userInfo.nickname ||
+                                    userInfo.username ||
+                                    'User'
+                                "
+                                size="lg"
+                                :is-clickable="true"
+                                :src="
+                                    (useUser().profile.value as any)
+                                        ?.avatar_url || null
+                                "
+                                :original-src="
+                                    (useUser().profile.value as any)
+                                        ?.avatar_url || null
+                                "
+                                @click="openAvatarModal"
+                            />
                             <div class="flex-1">
                                 <div class="flex items-start justify-between">
-                                    <h2 class="text-xl font-semibold text-primary-focus flex items-center gap-2">
-                                        {{ userInfo.nickname || userInfo.username || 'User' }}
-                                        <span v-if="roleBadge" :class="roleBadge.className + ' text-sm'">{{
-                                            roleBadge.text }}</span>
-                                        <button @click="openNicknameModal" class="btn btn-ghost btn-xs p-1 "
-                                            :disabled="isLoadingFromCache">
+                                    <h2
+                                        class="text-xl font-semibold text-primary-focus flex items-center gap-2"
+                                    >
+                                        {{
+                                            userInfo.nickname ||
+                                            userInfo.username ||
+                                            "User"
+                                        }}
+                                        <span
+                                            v-if="roleBadge"
+                                            :class="
+                                                roleBadge.className + ' text-sm'
+                                            "
+                                            >{{ roleBadge.text }}</span
+                                        >
+                                        <button
+                                            @click="openNicknameModal"
+                                            class="btn btn-ghost btn-xs p-1"
+                                            :disabled="isLoadingFromCache"
+                                        >
                                             <EditIcon class="w-3 h-3" />
                                         </button>
                                     </h2>
                                 </div>
 
                                 <p class="text-base-content/70 text-sm mt-1">
-                                    @{{ username }}
+                                    @{{ userInfo.username }}
                                 </p>
 
-                                <p class="text-base-content/60 text-xs mt-1 flex items-center gap-2">
-                                    <button class="btn btn-ghost btn-sm p-0 h-auto min-h-0 font-normal"
-                                        @click="toggleShowEmail">
-                                        {{ showEmail ? (email || t('account.no_email')) : (maskedEmail ||
-                                            t('account.no_email')) }}
+                                <p
+                                    class="text-base-content/60 text-xs mt-1 flex items-center gap-2"
+                                >
+                                    <button
+                                        class="btn btn-ghost btn-sm p-0 h-auto min-h-0 font-normal"
+                                        @click="toggleShowEmail"
+                                    >
+                                        {{
+                                            showEmail
+                                                ? email || t("account.no_email")
+                                                : maskedEmail ||
+                                                  t("account.no_email")
+                                        }}
                                     </button>
-                                    <component :is="showEmail ? EyeOffIcon : EyeIcon"
-                                        class="w-3 h-3 cursor-pointer opacity-50" @click="toggleShowEmail" />
+                                    <component
+                                        :is="showEmail ? EyeOffIcon : EyeIcon"
+                                        class="w-3 h-3 cursor-pointer opacity-50"
+                                        @click="toggleShowEmail"
+                                    />
                                 </p>
 
                                 <div class="flex items-center mt-3 text-sm">
-                                    <div class="badge" :class="invisibleMode ? 'badge-secondary' : 'badge-success'">
-                                        {{ invisibleMode ? t('time.offline') : t('time.online') }}
+                                    <div
+                                        class="badge"
+                                        :class="
+                                            invisibleMode
+                                                ? 'badge-secondary'
+                                                : 'badge-success'
+                                        "
+                                    >
+                                        {{
+                                            invisibleMode
+                                                ? t("time.offline")
+                                                : t("time.online")
+                                        }}
                                     </div>
 
                                     <span>
-                                        <button @click="openSocialLinks" class="btn btn-primary btn-xs ml-3">{{
-                                            t('account.social_links') }}</button>
+                                        <button
+                                            @click="openSocialLinks"
+                                            class="btn btn-primary btn-xs ml-3"
+                                        >
+                                            {{ t("account.social_links") }}
+                                        </button>
                                     </span>
                                 </div>
                             </div>
@@ -52,48 +106,199 @@
                 </div>
             </div>
 
+            <div class="col-span-1 md:col-span-2">
+                <div class="card bg-base-200 shadow-md border border-base-300">
+                    <div class="card-body">
+                        <div class="flex items-center justify-between mb-4">
+                            <h2 class="text-lg font-medium text-primary-focus">
+                                {{ t("achievements.title") }}
+                            </h2>
+                            <span
+                                v-if="achievements.length > 0"
+                                class="text-sm text-base-content/60"
+                            >
+                                {{ unlockedCount }} / {{ achievements.length }}
+                            </span>
+                        </div>
+                        <div
+                            v-if="loadingAchievements"
+                            class="flex justify-center py-4"
+                        >
+                            <span
+                                class="loading loading-spinner loading-md"
+                            ></span>
+                        </div>
+                        <div v-else>
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                <AchievementCard
+                                    v-for="ach in displayedAchievements"
+                                    :key="ach.key"
+                                    :achievement-key="ach.key"
+                                    :icon-name="ach.icon"
+                                    :locked="!isUnlocked(ach.id)"
+                                    :unlocked-at="getUnlockedAt(ach.id)"
+                                    :hidden="ach.hidden"
+                                    :receive-percentage="ach.receivePercentage"
+                                />
+                            </div>
+
+                            <div
+                                v-if="achievements.length > initialDisplayCount"
+                                class="flex justify-center mt-4"
+                            >
+                                <button
+                                    @click="toggleAchievementsExpand"
+                                    class="btn btn-ghost btn-sm"
+                                >
+                                    {{
+                                        isAchievementsExpanded
+                                            ? t("common.show_less")
+                                            : t("common.show_more")
+                                    }}
+                                    <component
+                                        :is="
+                                            isAchievementsExpanded
+                                                ? ChevronUp
+                                                : ChevronDown
+                                        "
+                                        class="w-4 h-4 ml-1"
+                                    />
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-span-1 md:col-span-2">
+                <div class="card bg-base-200 shadow-md border border-base-300">
+                    <div class="card-body">
+                        <h2
+                            class="card-title text-lg font-medium text-primary-focus mb-4"
+                        >
+                            {{ t("account.favorite_client") }}
+                        </h2>
+                        <p class="text-sm text-base-content/70 mb-4">
+                            {{ t("account.favorite_client_description") }}
+                        </p>
+                        <div
+                            v-if="loadingClients"
+                            class="flex justify-center py-4"
+                        >
+                            <span
+                                class="loading loading-spinner loading-md"
+                            ></span>
+                        </div>
+                        <div v-else class="form-control">
+                            <select
+                                v-model="selectedFavoriteClientId"
+                                class="select select-bordered w-full bg-base-100"
+                                @change="handleFavoriteClientChange"
+                                :disabled="
+                                    isLoadingFromCache || updatingFavoriteClient
+                                "
+                            >
+                                <option :value="null">
+                                    {{ t("account.no_favorite_client") }}
+                                </option>
+                                <option
+                                    v-for="client in availableClients"
+                                    :key="client.id"
+                                    :value="client.id"
+                                >
+                                    {{ client.name }}
+                                    {{ formatVersion(client.version) }}
+                                </option>
+                            </select>
+                            <div
+                                v-if="currentFavoriteClient"
+                                class="mt-3 p-3 bg-base-300 rounded-lg"
+                            >
+                                <div class="flex items-center gap-2">
+                                    <span class="text-sm font-medium"
+                                        >{{
+                                            t("account.current_favorite")
+                                        }}:</span
+                                    >
+                                    <span class="badge badge-primary"
+                                        >{{ currentFavoriteClient.name }}
+                                        {{
+                                            formatVersion(
+                                                currentFavoriteClient.version
+                                            )
+                                        }}</span
+                                    >
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <div>
-                <div class="card bg-base-200 shadow-md border border-base-300 h-full">
+                <div
+                    class="card bg-base-200 shadow-md border border-base-300 h-full"
+                >
                     <div class="card-body">
-                        <h2 class="card-title text-lg font-medium text-primary-focus mb-2">
-                            {{ t('account.invisible_mode') }}
+                        <h2
+                            class="card-title text-lg font-medium text-primary-focus mb-2"
+                        >
+                            {{ t("account.invisible_mode") }}
                         </h2>
                         <div class="flex items-center justify-between">
                             <div>
                                 <h3 class="font-medium">
-                                    {{ t('account.invisible_mode') }}
+                                    {{ t("account.invisible_mode") }}
                                 </h3>
                                 <p class="text-sm text-base-content/70">
-                                    {{ t('account.invisible_mode_description') }}
+                                    {{
+                                        t("account.invisible_mode_description")
+                                    }}
                                 </p>
                             </div>
-                            <input type="checkbox" class="checkbox" v-model="invisibleMode"
-                                @change="handleInvisibleModeToggle" :disabled="isLoadingFromCache" />
+                            <input
+                                type="checkbox"
+                                class="checkbox"
+                                v-model="invisibleMode"
+                                @change="handleInvisibleModeToggle"
+                                :disabled="isLoadingFromCache"
+                            />
                         </div>
-                        <div v-if="isLoadingFromCache" class="text-sm text-warning mt-3">
-                            <span>{{ t('account.using_cached_data') }}</span>
+                        <div
+                            v-if="isLoadingFromCache"
+                            class="text-sm text-warning mt-3"
+                        >
+                            <span>{{ t("account.using_cached_data") }}</span>
                         </div>
                     </div>
                 </div>
             </div>
 
             <div>
-                <div class="card bg-base-200 shadow-md border border-base-300 h-full">
+                <div
+                    class="card bg-base-200 shadow-md border border-base-300 h-full"
+                >
                     <div class="card-body">
-                        <h2 class="card-title text-lg font-medium text-primary-focus mb-2">
-                            {{ t('account.streamer_mode') }}
+                        <h2
+                            class="card-title text-lg font-medium text-primary-focus mb-2"
+                        >
+                            {{ t("account.streamer_mode") }}
                         </h2>
                         <div class="flex items-center justify-between">
                             <div>
                                 <h3 class="font-medium">
-                                    {{ t('account.streamer_mode') }}
+                                    {{ t("account.streamer_mode") }}
                                 </h3>
                                 <p class="text-sm text-base-content/70">
-                                    {{ t('account.streamer_mode_description') }}
+                                    {{ t("account.streamer_mode_description") }}
                                 </p>
                             </div>
-                            <input type="checkbox" class="checkbox" v-model="streamerMode"
-                                @change="handleStreamerModeToggle" />
+                            <input
+                                type="checkbox"
+                                class="checkbox"
+                                v-model="streamerMode"
+                                @change="handleStreamerModeToggle"
+                            />
                         </div>
                     </div>
                 </div>
@@ -102,39 +307,70 @@
             <div class="col-span-1 md:col-span-2">
                 <div class="card bg-base-200 shadow-md border border-base-300">
                     <div class="card-body">
-                        <h2 class="card-title text-lg font-medium text-primary-focus mb-4">
-                            {{ t('account.change_password') }}
+                        <h2
+                            class="card-title text-lg font-medium text-primary-focus mb-4"
+                        >
+                            {{ t("account.change_password") }}
                         </h2>
                         <form @submit.prevent="handleChangePassword">
                             <div class="form-control mb-4">
                                 <label class="label mb-2">
-                                    <span class="label-text">{{ t('account.current_password') }}</span>
+                                    <span class="label-text">{{
+                                        t("account.current_password")
+                                    }}</span>
                                 </label>
-                                <input v-model="currentPassword" type="password" autocomplete="current-password"
+                                <input
+                                    v-model="currentPassword"
+                                    type="password"
+                                    autocomplete="current-password"
                                     :placeholder="t('account.current_password')"
-                                    class="input input-bordered w-full bg-base-100" required
-                                    :disabled="isLoadingFromCache" />
+                                    class="input input-bordered w-full bg-base-100"
+                                    required
+                                    :disabled="isLoadingFromCache"
+                                />
                             </div>
                             <div class="form-control mb-4">
                                 <label class="label mb-2">
-                                    <span class="label-text">{{ t('account.new_password') }}</span>
+                                    <span class="label-text">{{
+                                        t("account.new_password")
+                                    }}</span>
                                 </label>
-                                <input v-model="newPassword" type="password" autocomplete="new-password"
+                                <input
+                                    v-model="newPassword"
+                                    type="password"
+                                    autocomplete="new-password"
                                     :placeholder="t('account.new_password')"
-                                    class="input input-bordered w-full bg-base-100" required
-                                    :disabled="isLoadingFromCache" />
+                                    class="input input-bordered w-full bg-base-100"
+                                    required
+                                    :disabled="isLoadingFromCache"
+                                />
                             </div>
                             <div class="form-control mb-4">
                                 <label class="label mb-2">
-                                    <span class="label-text">{{ t('account.confirm_password') }}</span>
+                                    <span class="label-text">{{
+                                        t("account.confirm_password")
+                                    }}</span>
                                 </label>
-                                <input v-model="confirmNewPassword" type="password" autocomplete="new-password"
+                                <input
+                                    v-model="confirmNewPassword"
+                                    type="password"
+                                    autocomplete="new-password"
                                     :placeholder="t('account.confirm_password')"
-                                    class="input input-bordered w-full bg-base-100" required
-                                    :disabled="isLoadingFromCache" />
+                                    class="input input-bordered w-full bg-base-100"
+                                    required
+                                    :disabled="isLoadingFromCache"
+                                />
                             </div>
-                            <button type="submit" class="btn btn-primary w-full" :disabled="isLoadingFromCache">
-                                {{ isLoadingFromCache ? t('account.using_cached_data') : t('account.change_password') }}
+                            <button
+                                type="submit"
+                                class="btn btn-primary w-full"
+                                :disabled="isLoadingFromCache"
+                            >
+                                {{
+                                    isLoadingFromCache
+                                        ? t("account.using_cached_data")
+                                        : t("account.change_password")
+                                }}
                             </button>
                         </form>
                     </div>
@@ -144,14 +380,19 @@
             <div class="col-span-1 md:col-span-2">
                 <div class="card bg-base-200 shadow-md border border-base-300">
                     <div class="card-body">
-                        <h2 class="card-title text-lg font-medium text-primary-focus mb-4">
-                            {{ t('common.logout') }}
+                        <h2
+                            class="card-title text-lg font-medium text-primary-focus mb-4"
+                        >
+                            {{ t("common.logout") }}
                         </h2>
                         <p class="text-base-content/70 mb-4">
-                            {{ t('auth.logout.confirm') }}
+                            {{ t("auth.logout.confirm") }}
                         </p>
-                        <button @click="handleLogout" class="btn btn-error w-full">
-                            {{ t('common.logout') }}
+                        <button
+                            @click="handleLogout"
+                            class="btn btn-error w-full"
+                        >
+                            {{ t("common.logout") }}
                         </button>
                     </div>
                 </div>
@@ -161,33 +402,72 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed, onUnmounted, watch } from 'vue';
-import { useToast } from '../services/toastService';
-import { useModal } from '../services/modalService';
-import { useI18n } from 'vue-i18n';
-import EditNicknameModal from '../components/modals/social/account/EditNicknameModal.vue';
-import SocialLinksModal from '../components/modals/social/account/SocialLinksModal.vue';
-import ChangePasswordConfirmModal from '../components/modals/social/account/ChangePasswordConfirmModal.vue';
-import LogoutConfirmModal from '../components/modals/social/account/LogoutConfirmModal.vue';
-import AvatarUploadModal from '../components/modals/social/account/AvatarUploadModal.vue';
-import UserAvatar from '../components/ui/UserAvatar.vue';
-import { useUser } from '../composables/useUser';
-import { userService } from '../services/userService';
-import { EditIcon, EyeIcon, EyeOffIcon } from 'lucide-vue-next';
-import getRoleBadge from '../utils/roleBadge';
-import { globalUserStatus } from '../composables/useUserStatus';
-import { syncService, SyncServiceState } from '../services/syncService';
+import { ref, onMounted, computed, onUnmounted, watch } from "vue";
+import { useToast } from "../services/toastService";
+import { useModal } from "../services/modalService";
+import { useI18n } from "vue-i18n";
+import EditNicknameModal from "../components/modals/social/account/EditNicknameModal.vue";
+import SocialLinksModal from "../components/modals/social/account/SocialLinksModal.vue";
+import ChangePasswordConfirmModal from "../components/modals/social/account/ChangePasswordConfirmModal.vue";
+import LogoutConfirmModal from "../components/modals/social/account/LogoutConfirmModal.vue";
+import AvatarUploadModal from "../components/modals/social/account/AvatarUploadModal.vue";
+import UserAvatar from "../components/ui/UserAvatar.vue";
+import AchievementCard from "../components/features/profile/AchievementCard.vue";
+import { useUser } from "../composables/useUser";
+import { userService } from "../services/userService";
+import {
+    achievementService,
+    type Achievement,
+    type UserAchievement,
+} from "../services/achievementService";
+import {
+    EditIcon,
+    EyeIcon,
+    EyeOffIcon,
+    ChevronDown,
+    ChevronUp,
+} from "lucide-vue-next";
+import getRoleBadge from "../utils/roleBadge";
+import { globalUserStatus } from "../composables/useUserStatus";
+import { syncService, SyncServiceState } from "../services/syncService";
+import { invoke } from "@tauri-apps/api/core";
+
+interface Client {
+    id: number;
+    name: string;
+    version: string;
+    filename: string;
+    md5_hash: string;
+    main_class: string;
+    show: boolean;
+    working: boolean;
+    insecure: boolean;
+    launches: number;
+    downloads: number;
+    size: number;
+}
 
 const { t } = useI18n();
 const { addToast } = useToast();
 const { showModal, hideModal } = useModal();
 
-const currentPassword = ref('');
-const newPassword = ref('');
-const confirmNewPassword = ref('');
-const nickname = ref('');
+const currentPassword = ref("");
+const newPassword = ref("");
+const confirmNewPassword = ref("");
+const nickname = ref("");
 const showEmail = ref(false);
 
+const achievements = ref<Achievement[]>([]);
+const userAchievements = ref<UserAchievement[]>([]);
+const loadingAchievements = ref(false);
+const isAchievementsExpanded = ref(false);
+const initialDisplayCount = 4;
+
+const availableClients = ref<Client[]>([]);
+const loadingClients = ref(false);
+const selectedFavoriteClientId = ref<number | null>(null);
+const updatingFavoriteClient = ref(false);
+
 const {
     username,
     email,
@@ -196,30 +476,32 @@ const {
     isAuthenticated,
     refreshUserData,
     updateUserProfile: updateGlobalUserProfile,
-    logout
+    logout,
 } = useUser();
 
 const invisibleMode = computed({
     get: () => globalUserStatus.isInvisible.value,
-    set: (_) => { },
+    set: (_) => {},
 });
 
 const streamerMode = computed({
     get: () => globalUserStatus.isStreamer.value,
-    set: (_) => { },
+    set: (_) => {},
 });
 
 const userInfo = computed(() => {
     const nickname = userNickname.value;
     const user = username.value;
     const mail = email.value;
-    const role = (useUser().profile.value && (useUser().profile.value as any).role) || null;
+    const role =
+        (useUser().profile.value && (useUser().profile.value as any).role) ||
+        null;
 
     if (globalUserStatus.isStreamer.value) {
         return {
-            nickname: '??????',
-            username: 'unknown',
-            email: 'unknown@*****.***',
+            nickname: "??????",
+            username: "unknown",
+            email: "unknown@*****.***",
             role: null,
         };
     }
@@ -232,32 +514,158 @@ const userInfo = computed(() => {
     };
 });
 
+const currentFavoriteClient = computed(() => {
+    const profile = useUser().profile.value;
+    if (profile && (profile as any).favorite_client_id) {
+        const clientId = (profile as any).favorite_client_id;
+        return availableClients.value.find((c) => c.id === clientId) || null;
+    }
+    return null;
+});
+
 const roleBadge = computed(() => {
     return getRoleBadge(userInfo.value.role, (k: string) => t(k));
 });
 
 const maskedEmail = computed(() => {
-    const email = userInfo.value.email || '';
-    if (!email) return '';
-    const parts = email.split('@');
-    if (parts.length !== 2) return '*****';
+    const email = userInfo.value.email || "";
+    if (!email) return "";
+    const parts = email.split("@");
+    if (parts.length !== 2) return "*****";
     const local = parts[0];
     const domain = parts[1];
-    const maskedLocal = local.length > 2 ? `${local[0]}***${local.slice(-1)}` : '*'.repeat(Math.max(1, local.length - 1));
-
-    const lastDot = domain.lastIndexOf('.');
-    const maskedDomain = lastDot > 0 ? `*****${domain.slice(lastDot)}` : '*****';
+    const maskedLocal =
+        local.length > 2
+            ? `${local[0]}***${local.slice(-1)}`
+            : "*".repeat(Math.max(1, local.length - 1));
+
+    const lastDot = domain.lastIndexOf(".");
+    const maskedDomain =
+        lastDot > 0 ? `*****${domain.slice(lastDot)}` : "*****";
     return `${maskedLocal}@${maskedDomain}`;
 });
 
+const unlockedCount = computed(() => userAchievements.value.length);
+
+const sortedAchievements = computed(() => {
+    return [...achievements.value].sort((a, b) => {
+        const aUnlocked = isUnlocked(a.id);
+        const bUnlocked = isUnlocked(b.id);
+        if (aUnlocked && !bUnlocked) return -1;
+        if (!aUnlocked && bUnlocked) return 1;
+        return 0;
+    });
+});
+
+const displayedAchievements = computed(() => {
+    const sorted = sortedAchievements.value;
+    if (isAchievementsExpanded.value) return sorted;
+    return sorted.slice(0, initialDisplayCount);
+});
+
+const toggleAchievementsExpand = () => {
+    isAchievementsExpanded.value = !isAchievementsExpanded.value;
+};
+
+const isUnlocked = (achievementId: number) => {
+    return userAchievements.value.some(
+        (ua) => ua.achievement.id === achievementId
+    );
+};
+
+const getUnlockedAt = (achievementId: number) => {
+    const ua = userAchievements.value.find(
+        (ua) => ua.achievement.id === achievementId
+    );
+    return ua ? ua.unlockedAt : null;
+};
+
+const loadAchievements = async () => {
+    const userId = (useUser().info.value as any)?.id;
+    if (!userId) return;
+
+    loadingAchievements.value = true;
+    try {
+        const [all, user] = await Promise.all([
+            achievementService.getAllAchievements(),
+            achievementService.getUserAchievements(userId),
+        ]);
+        achievements.value = all || [];
+        userAchievements.value = user || [];
+    } catch (e) {
+        console.error("Failed to load achievements", e);
+    } finally {
+        loadingAchievements.value = false;
+    }
+};
+
 const toggleShowEmail = () => {
     showEmail.value = !showEmail.value;
 };
 
+const formatVersion = (version: string): string => {
+    if (!version) return "";
+    return version.replace(/^V/, "").replace(/_/g, ".");
+};
+
+const loadClients = async () => {
+    try {
+        loadingClients.value = true;
+        const clients = await invoke<Client[]>("get_clients");
+        availableClients.value = clients.filter((c) => c.show && c.working);
+
+        const profile = useUser().profile.value;
+        if (profile && (profile as any).favorite_client_id) {
+            selectedFavoriteClientId.value = (
+                profile as any
+            ).favorite_client_id;
+        }
+    } catch (error) {
+        console.error("Failed to load clients:", error);
+        addToast(t("errors.clients_load_failed", { error }), "error");
+    } finally {
+        loadingClients.value = false;
+    }
+};
+
+const handleFavoriteClientChange = async () => {
+    try {
+        updatingFavoriteClient.value = true;
+        const result = await userService.updateUserProfile(
+            null,
+            selectedFavoriteClientId.value
+        );
+
+        if (result.success) {
+            await refreshUserData();
+            addToast(t("account.favorite_client_updated"), "success");
+        } else {
+            addToast(
+                result.error || t("account.favorite_client_update_failed"),
+                "error"
+            );
+            // Revert selection on error
+            const profile = useUser().profile.value;
+            if (profile && (profile as any).favorite_client_id) {
+                selectedFavoriteClientId.value = (
+                    profile as any
+                ).favorite_client_id;
+            } else {
+                selectedFavoriteClientId.value = null;
+            }
+        }
+    } catch (error) {
+        console.error("Failed to update favorite client:", error);
+        addToast(t("account.favorite_client_update_failed"), "error");
+    } finally {
+        updatingFavoriteClient.value = false;
+    }
+};
+
 const syncState = ref<SyncServiceState>(syncService.getState());
 let unsubscribeSyncService: (() => void) | null = null;
 
-const emit = defineEmits(['logged-out']);
+const emit = defineEmits(["logged-out"]);
 
 onMounted(async () => {
     unsubscribeSyncService = syncService.subscribe((state) => {
@@ -265,6 +673,8 @@ onMounted(async () => {
     });
 
     await syncService.initializeSyncStatus();
+    await loadAchievements();
+    await loadClients();
 });
 
 watch(
@@ -273,22 +683,36 @@ watch(
         if (isAuthed && !wasAuthed) {
             try {
                 await refreshUserData();
-                nickname.value = userNickname.value || '';
+                nickname.value = userNickname.value || "";
                 await globalUserStatus.fetchCurrentStatus();
             } catch (error) {
-                console.error('Failed to refresh account data after auth change:', error);
+                console.error(
+                    "Failed to refresh account data after auth change:",
+                    error
+                );
             }
             return;
         }
 
         if (!isAuthed && wasAuthed) {
-            nickname.value = '';
+            nickname.value = "";
             showEmail.value = false;
+            achievements.value = [];
+            userAchievements.value = [];
         }
     },
     { immediate: true }
 );
 
+watch(
+    () => (useUser().info.value as any)?.id,
+    (newId) => {
+        if (newId) {
+            loadAchievements();
+        }
+    }
+);
+
 onUnmounted(() => {
     if (unsubscribeSyncService) {
         unsubscribeSyncService();
@@ -300,13 +724,13 @@ const handleStreamerModeToggle = async () => {
         globalUserStatus.setStreamerMode(!streamerMode.value);
         addToast(
             streamerMode.value
-                ? t('account.streamer_enabled')
-                : t('account.streamer_disabled'),
-            'success'
+                ? t("account.streamer_enabled")
+                : t("account.streamer_disabled"),
+            "success"
         );
     } catch (error) {
-        console.error('Failed to toggle streamer mode:', error);
-        addToast(t('account.streamer_failed'), 'error');
+        console.error("Failed to toggle streamer mode:", error);
+        addToast(t("account.streamer_failed"), "error");
     }
 };
 
@@ -316,64 +740,64 @@ const handleInvisibleModeToggle = async () => {
         await globalUserStatus.forceSyncStatus();
         addToast(
             invisibleMode.value
-                ? t('account.invisible_enabled')
-                : t('account.invisible_disabled'),
-            'success'
+                ? t("account.invisible_enabled")
+                : t("account.invisible_disabled"),
+            "success"
         );
     } catch (error) {
-        console.error('Failed to toggle invisible mode:', error);
-        addToast(t('account.invisible_failed'), 'error');
+        console.error("Failed to toggle invisible mode:", error);
+        addToast(t("account.invisible_failed"), "error");
     }
 };
 
 const openNicknameModal = () => {
     showModal(
-        'edit-nickname',
+        "edit-nickname",
         EditNicknameModal,
-        { title: t('account.nickname_label') },
+        { title: t("account.nickname_label") },
         { currentNickname: nickname.value },
         {
-            'nickname-updated': async (newNickname: string) => {
+            "nickname-updated": async (newNickname: string) => {
                 const success = await updateGlobalUserProfile(newNickname);
                 if (success) {
                     nickname.value = newNickname;
-                    addToast(t('account.nickname_update_success'), 'success');
+                    addToast(t("account.nickname_update_success"), "success");
                 } else {
-                    addToast(t('account.nickname_update_failed'), 'error');
+                    addToast(t("account.nickname_update_failed"), "error");
                 }
             },
-            close: () => hideModal('edit-nickname'),
+            close: () => hideModal("edit-nickname"),
         }
     );
 };
 
 const openSocialLinks = () => {
     showModal(
-        'social-links',
+        "social-links",
         SocialLinksModal,
-        { title: t('modals.social_links.title') },
+        { title: t("modals.social_links.title") },
         {},
         {
-            close: () => hideModal('social-links'),
+            close: () => hideModal("social-links"),
         }
     );
 };
 
 const handleChangePassword = async () => {
     if (newPassword.value !== confirmNewPassword.value) {
-        addToast(t('account.password_mismatch'), 'error');
+        addToast(t("account.password_mismatch"), "error");
         return;
     }
 
     if (newPassword.value.length < 8) {
-        addToast(t('account.password_too_short'), 'error');
+        addToast(t("account.password_too_short"), "error");
         return;
     }
 
     showModal(
-        'change-password-confirm',
+        "change-password-confirm",
         ChangePasswordConfirmModal,
-        { title: t('account.change_password_confirm_title') },
+        { title: t("account.change_password_confirm_title") },
         {
             currentPassword: currentPassword.value,
             newPassword: newPassword.value,
@@ -388,55 +812,58 @@ const handleChangePassword = async () => {
                         passwordData.currentPassword,
                         passwordData.newPassword
                     );
-                    addToast(t('account.password_change_success'), 'success');
-                    currentPassword.value = '';
-                    newPassword.value = '';
-                    confirmNewPassword.value = '';
+                    addToast(t("account.password_change_success"), "success");
+                    currentPassword.value = "";
+                    newPassword.value = "";
+                    confirmNewPassword.value = "";
                 } catch (e) {
                     console.log("Failed to change password:", e);
-                    addToast(t('account.password_change_failed'), 'error');
+                    addToast(t("account.password_change_failed"), "error");
                 }
-                hideModal('change-password-confirm');
+                hideModal("change-password-confirm");
             },
-            close: () => hideModal('change-password-confirm'),
+            close: () => hideModal("change-password-confirm"),
         }
     );
 };
 
 const handleLogout = () => {
     showModal(
-        'logout-confirm',
+        "logout-confirm",
         LogoutConfirmModal,
-        { title: t('account.logout_confirm_title') },
+        { title: t("account.logout_confirm_title") },
         {},
         {
             confirm: () => {
                 logout();
-                emit('logged-out');
-                addToast(t('auth.logout.success'), 'success');
-                hideModal('logout-confirm');
+                emit("logged-out");
+                addToast(t("auth.logout.success"), "success");
+                hideModal("logout-confirm");
             },
-            close: () => hideModal('logout-confirm'),
+            close: () => hideModal("logout-confirm"),
         }
     );
 };
 
 const openAvatarModal = () => {
     showModal(
-        'avatar-upload',
+        "avatar-upload",
         AvatarUploadModal,
-        { title: t('account.upload_avatar') },
+        { title: t("account.upload_avatar") },
         { currentUrl: (useUser().profile.value as any)?.avatar_url || null },
         {
             uploaded: async () => {
                 try {
                     await useUser().refreshUserData();
                 } catch {
-                    addToast(t('account.avatar_upload_refresh_failed'), 'warning');
+                    addToast(
+                        t("account.avatar_upload_refresh_failed"),
+                        "warning"
+                    );
                 }
-                hideModal('avatar-upload');
+                hideModal("avatar-upload");
             },
-            close: () => hideModal('avatar-upload'),
+            close: () => hideModal("avatar-upload"),
         }
     );
 };
diff --git a/src/views/AppLogs.vue b/src/views/AppLogs.vue
index 517befd7..1fc029d1 100644
--- a/src/views/AppLogs.vue
+++ b/src/views/AppLogs.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
-import { invoke } from '@tauri-apps/api/core';
-import { useToast } from '../services/toastService';
-import { Copy } from 'lucide-vue-next';
-import { useI18n } from 'vue-i18n';
+import { ref, onMounted, onUnmounted, watch } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+import { useToast } from "../services/toastService";
+import { Copy } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
 
 const appLogs = ref<string[]>([]);
 const logsContainer = ref<HTMLDivElement | null>(null);
@@ -14,13 +14,13 @@ const refreshInterval = ref<number | null>(null);
 
 const fetchAllLogs = async () => {
     try {
-        appLogs.value = await invoke<string[]>('get_app_logs');
+        appLogs.value = await invoke<string[]>("get_app_logs");
         if (autoScroll.value && logsContainer.value) {
             scrollToBottom();
         }
     } catch (err) {
-        console.error('Error fetching app logs:', err);
-        addToast(t('toast.logs.fetch_failed', { error: err }), 'error');
+        console.error("Error fetching app logs:", err);
+        addToast(t("toast.logs.fetch_failed", { error: err }), "error");
     }
 };
 
@@ -37,16 +37,16 @@ const scrollToBottom = () => {
 
 const copyLogs = () => {
     if (appLogs.value.length > 0) {
-        const logsText = appLogs.value.join('\n');
+        const logsText = appLogs.value.join("\n");
         navigator.clipboard
             .writeText(logsText)
             .then(() => {
-                console.log('Logs copied to clipboard');
-                addToast(t('toast.logs.copied_success'), 'success');
+                console.log("Logs copied to clipboard");
+                addToast(t("toast.logs.copied_success"), "success");
             })
             .catch((err) => {
-                console.error('Failed to copy logs:', err);
-                addToast(t('toast.logs.copy_failed', { error: err }), 'error');
+                console.error("Failed to copy logs:", err);
+                addToast(t("toast.logs.copy_failed", { error: err }), "error");
             });
     }
 };
@@ -98,27 +98,39 @@ onUnmounted(() => {
             <div class="flex items-center gap-3">
                 <button @click="copyLogs" class="btn btn-ghost">
                     <Copy class="w-4 h-4" />
-                    {{ $t('appLogs.copyLogs') }}
+                    {{ $t("appLogs.copyLogs") }}
                 </button>
 
                 <label class="flex items-center gap-2 text-sm cursor-pointer">
-                    <input class="toggle toggle-sm" type="checkbox" v-model="autoScroll" />
-                    <span>{{ $t('appLogs.autoScroll') }}</span>
+                    <input
+                        class="toggle toggle-sm"
+                        type="checkbox"
+                        v-model="autoScroll"
+                    />
+                    <span>{{ $t("appLogs.autoScroll") }}</span>
                 </label>
             </div>
         </div>
 
         <div class="card bg-base-200 shadow-md border border-base-300 h-90">
             <div class="card-body p-2 flex flex-col h-full">
-                <div ref="logsContainer"
+                <div
+                    ref="logsContainer"
                     class="flex-1 overflow-y-auto p-4 font-mono text-sm leading-6 whitespace-pre-wrap bg-base-100 rounded-lg h-full"
-                    @scroll="handleScroll">
-                    <div v-if="appLogs.length === 0" class="text-center p-5 text-neutral">
-                        <p>{{ $t('appLogs.noLogs') }}</p>
+                    @scroll="handleScroll"
+                >
+                    <div
+                        v-if="appLogs.length === 0"
+                        class="text-center p-5 text-neutral"
+                    >
+                        <p>{{ $t("appLogs.noLogs") }}</p>
                     </div>
-                    <pre v-else class="whitespace-pre-wrap"><code>{{ appLogs.join('\n') }}</code></pre>
+                    <pre
+                        v-else
+                        class="whitespace-pre-wrap"
+                    ><code>{{ appLogs.join('\n') }}</code></pre>
                 </div>
             </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/views/CustomClients.vue b/src/views/CustomClients.vue
index c87e01e0..4da0c9bb 100644
--- a/src/views/CustomClients.vue
+++ b/src/views/CustomClients.vue
@@ -1,34 +1,45 @@
 <script setup lang="ts">
-import {invoke} from '@tauri-apps/api/core';
-import {computed, onBeforeUnmount, onMounted, ref} from 'vue';
-import {AlertTriangle, Calendar, Edit3, FileText, Play, Plus, Settings, StopCircle, Trash2,} from 'lucide-vue-next';
-import SearchBar from '../components/common/SearchBar.vue';
-import {useToast} from '../services/toastService';
-import {useModal} from '../services/modalService';
-import {useI18n} from 'vue-i18n';
-import {formatDate} from '../utils/utils';
-import type {CustomClient} from '../types/ui';
-import AddCustomClientModal from '../components/modals/clients/AddCustomClientModal.vue';
-import EditCustomClientModal from '../components/modals/clients/EditCustomClientModal.vue';
-import DeleteCustomClientConfirmModal from '../components/modals/clients/DeleteCustomClientConfirmModal.vue';
-import CustomClientDisplaySettingsModal from '../components/modals/clients/CustomClientDisplaySettingsModal.vue';
-import LogViewerModal from '../components/modals/clients/LogViewerModal.vue';
+import { invoke } from "@tauri-apps/api/core";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import {
+    AlertTriangle,
+    Calendar,
+    Edit3,
+    FileText,
+    Play,
+    Plus,
+    Settings,
+    StopCircle,
+    Trash2,
+} from "lucide-vue-next";
+import SearchBar from "../components/common/SearchBar.vue";
+import { useToast } from "../services/toastService";
+import { useModal } from "../services/modalService";
+import { useI18n } from "vue-i18n";
+import { formatDate } from "../utils/utils";
+import type { CustomClient } from "../types/ui";
+import AddCustomClientModal from "../components/modals/clients/AddCustomClientModal.vue";
+import EditCustomClientModal from "../components/modals/clients/EditCustomClientModal.vue";
+import DeleteCustomClientConfirmModal from "../components/modals/clients/DeleteCustomClientConfirmModal.vue";
+import CustomClientDisplaySettingsModal from "../components/modals/clients/CustomClientDisplaySettingsModal.vue";
+import LogViewerModal from "../components/modals/clients/LogViewerModal.vue";
 
 const { t } = useI18n();
 
 const customClients = ref<CustomClient[]>([]);
-const error = ref('');
+const error = ref("");
 const loading = ref(true);
-const searchQuery = ref('');
-const displayMode = ref<'global' | 'separate'>('separate');
+const searchQuery = ref("");
+const displayMode = ref<"global" | "separate">("separate");
 
 const filteredClients = computed(() => {
     if (!searchQuery.value.trim()) return customClients.value;
 
     const query = searchQuery.value.trim().toLowerCase();
-    return customClients.value.filter(client =>
-        (client.name && client.name.toLowerCase().includes(query)) ||
-        (client.version && client.version.toLowerCase().includes(query))
+    return customClients.value.filter(
+        (client) =>
+            (client.name && client.name.toLowerCase().includes(query)) ||
+            (client.version && client.version.toLowerCase().includes(query))
     );
 });
 
@@ -37,15 +48,15 @@ const statusInterval = ref<number | null>(null);
 const { addToast } = useToast();
 const { showModal } = useModal();
 
-
 const loadCustomClients = async () => {
     try {
         loading.value = true;
-        customClients.value = await invoke<CustomClient[]>('get_custom_clients');
-        error.value = '';
+        customClients.value =
+            await invoke<CustomClient[]>("get_custom_clients");
+        error.value = "";
     } catch (err) {
         error.value = `Failed to load custom clients: ${err}`;
-        addToast(`Failed to load custom clients: ${err}`, 'error');
+        addToast(`Failed to load custom clients: ${err}`, "error");
     } finally {
         loading.value = false;
     }
@@ -53,9 +64,11 @@ const loadCustomClients = async () => {
 
 const checkCustomClientRunningStatus = async () => {
     try {
-        runningCustomClients.value = await invoke<number[]>('get_running_custom_client_ids');
+        runningCustomClients.value = await invoke<number[]>(
+            "get_running_custom_client_ids"
+        );
     } catch (err) {
-        console.error('Error checking custom client running status:', err);
+        console.error("Error checking custom client running status:", err);
     }
 };
 
@@ -74,62 +87,81 @@ const handleLaunchClick = async (client: CustomClient) => {
 
 const handleLaunchClient = async (client: CustomClient) => {
     try {
-        const userToken = localStorage.getItem('authToken') || 'null';
+        const userToken = localStorage.getItem("authToken") || "null";
 
-        addToast(t('home.launching', { client: client.name }), 'info', 2000);
+        addToast(t("home.launching", { client: client.name }), "info", 2000);
 
-        await invoke('launch_custom_client', {
-            id: client.id, userToken,
+        await invoke("launch_custom_client", {
+            id: client.id,
+            userToken,
         });
 
         await new Promise((resolve) => setTimeout(resolve, 500));
         await checkCustomClientRunningStatus();
     } catch (err) {
-        addToast(`Failed to launch ${client.name}: ${err}`, 'error');
+        addToast(`Failed to launch ${client.name}: ${err}`, "error");
     }
 };
 
 const stopCustomClient = async (id: number) => {
     try {
-        const client = customClients.value.find(c => c.id === id);
+        const client = customClients.value.find((c) => c.id === id);
         if (client) {
-            addToast(t('home.stopping', { client: client.name }), 'info', 2000);
+            addToast(t("home.stopping", { client: client.name }), "info", 2000);
         }
-        await invoke('stop_custom_client', { id });
+        await invoke("stop_custom_client", { id });
 
         await new Promise((resolve) => setTimeout(resolve, 1000));
         await checkCustomClientRunningStatus();
     } catch (err) {
-        console.error('Error stopping custom client:', err);
-        addToast(`Error stopping client: ${err}`, 'error');
+        console.error("Error stopping custom client:", err);
+        addToast(`Error stopping client: ${err}`, "error");
     }
 };
 
 const handleAddClient = () => {
-    showModal('add-custom-client', AddCustomClientModal, { title: t('modals.add_custom_client') }, {}, {
-        'client-added': () => {
-            addToast(t('modals.client_added'), 'success');
-            loadCustomClients();
+    showModal(
+        "add-custom-client",
+        AddCustomClientModal,
+        { title: t("modals.add_custom_client") },
+        {},
+        {
+            "client-added": () => {
+                addToast(t("modals.client_added"), "success");
+                loadCustomClients();
+            },
         }
-    });
+    );
 };
 
 const handleEditClient = (client: CustomClient) => {
-    showModal('edit-custom-client', EditCustomClientModal, { title: t('modals.edit_custom_client') }, { client }, {
-        'client-edited': () => {
-            addToast(t('modals.client_edited'), 'success');
-            loadCustomClients();
+    showModal(
+        "edit-custom-client",
+        EditCustomClientModal,
+        { title: t("modals.edit_custom_client") },
+        { client },
+        {
+            "client-edited": () => {
+                addToast(t("modals.client_edited"), "success");
+                loadCustomClients();
+            },
         }
-    });
+    );
 };
 
 const handleDeleteClient = (client: CustomClient) => {
-    showModal('delete-custom-client-confirm', DeleteCustomClientConfirmModal, { title: t('modals.delete_custom_client') }, { client }, {
-        'client-deleted': () => {
-            addToast(t('modals.client_deleted'), 'success');
-            loadCustomClients();
+    showModal(
+        "delete-custom-client-confirm",
+        DeleteCustomClientConfirmModal,
+        { title: t("modals.delete_custom_client") },
+        { client },
+        {
+            "client-deleted": () => {
+                addToast(t("modals.client_deleted"), "success");
+                loadCustomClients();
+            },
         }
-    });
+    );
 };
 
 const openLogViewer = (client: CustomClient) => {
@@ -137,38 +169,45 @@ const openLogViewer = (client: CustomClient) => {
         `log-viewer-${client.id}`,
         LogViewerModal,
         {
-            title: t('logs.title', { client: client.name }),
-            contentClass: 'wide',
+            title: t("logs.title", { client: client.name }),
+            contentClass: "wide",
         },
         {
             clientId: client.id,
             clientName: client.name,
         },
         {
-            close: () => { },
+            close: () => {},
         }
     );
 };
 
 const loadDisplayMode = async () => {
     try {
-        const flags = await invoke('get_flags');
+        const flags = await invoke("get_flags");
         const typedFlags = flags as { custom_clients_display?: string };
-        displayMode.value = (typedFlags.custom_clients_display === 'global' || typedFlags.custom_clients_display === 'separate')
-            ? typedFlags.custom_clients_display
-            : 'separate';
+        displayMode.value =
+            typedFlags.custom_clients_display === "global" ||
+            typedFlags.custom_clients_display === "separate"
+                ? typedFlags.custom_clients_display
+                : "separate";
         return typedFlags;
     } catch (err) {
-        console.error('Error loading flags:', err);
-        addToast(`Failed to load flags: ${err}`, 'error');
+        console.error("Error loading flags:", err);
+        addToast(`Failed to load flags: ${err}`, "error");
         return {};
     }
 };
 
 const handleDisplaySettings = () => {
-    showModal('custom-client-display-settings', CustomClientDisplaySettingsModal, { title: t("custom_clients.display_settings") }, {}, {});
-}
-
+    showModal(
+        "custom-client-display-settings",
+        CustomClientDisplaySettingsModal,
+        { title: t("custom_clients.display_settings") },
+        {},
+        {}
+    );
+};
 
 onMounted(async () => {
     await loadCustomClients();
@@ -179,7 +218,10 @@ onMounted(async () => {
         clearInterval(statusInterval.value);
     }
 
-    statusInterval.value = setInterval(checkCustomClientRunningStatus, 5000) as unknown as number;
+    statusInterval.value = setInterval(
+        checkCustomClientRunningStatus,
+        5000
+    ) as unknown as number;
 });
 
 onBeforeUnmount(() => {
@@ -189,7 +231,6 @@ onBeforeUnmount(() => {
     }
 });
 
-
 const handleSearch = (query: string) => {
     searchQuery.value = query;
 };
@@ -200,7 +241,7 @@ const handleSearch = (query: string) => {
         <div class="flex justify-between items-center mb-4">
             <div>
                 <h1 class="text-3xl font-bold text-primary mb-2">
-                    {{ t('navigation.custom_clients') }}
+                    {{ t("navigation.custom_clients") }}
                 </h1>
             </div>
             <div class="flex gap-2">
@@ -208,7 +249,10 @@ const handleSearch = (query: string) => {
                     <Plus class="w-4 h-4" />
                     {{ $t("custom_clients.add") }}
                 </button>
-                <button @click="handleDisplaySettings()" class="btn btn-secondary gap-2">
+                <button
+                    @click="handleDisplaySettings()"
+                    class="btn btn-secondary gap-2"
+                >
                     <Edit3 class="w-4 h-4" />
                     {{ $t("custom_clients.display_settings") }}
                 </button>
@@ -216,7 +260,11 @@ const handleSearch = (query: string) => {
         </div>
 
         <div class="mb-6">
-            <SearchBar @search="handleSearch" :initial-value="searchQuery" placeholder="Search custom clients..." />
+            <SearchBar
+                @search="handleSearch"
+                :initial-value="searchQuery"
+                placeholder="Search custom clients..."
+            />
         </div>
 
         <div v-if="loading" class="flex justify-center items-center py-12">
@@ -232,26 +280,43 @@ const handleSearch = (query: string) => {
             <div class="max-w-md mx-auto">
                 <FileText class="w-16 h-16 text-base-content/30 mx-auto mb-4" />
                 <h3 class="text-xl font-semibold mb-2">
-                    {{ searchQuery ? t('custom_clients.no_results') : t('custom_clients.no_clients_yet') }}
+                    {{
+                        searchQuery
+                            ? t("custom_clients.no_results")
+                            : t("custom_clients.no_clients_yet")
+                    }}
                 </h3>
 
-                <button v-if="!searchQuery" @click="handleAddClient" class="btn btn-primary">
+                <button
+                    v-if="!searchQuery"
+                    @click="handleAddClient"
+                    class="btn btn-primary"
+                >
                     <Plus class="w-4 h-4 mr-2" />
-                    {{ $t('custom_clients.add') }}
+                    {{ $t("custom_clients.add") }}
                 </button>
             </div>
         </div>
 
-        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            <div v-for="client in filteredClients" :key="client.id"
-                class="card bg-base-200 shadow-md border border-base-300 hover:shadow-lg transition-all duration-300">
+        <div
+            v-else
+            class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+        >
+            <div
+                v-for="client in filteredClients"
+                :key="client.id"
+                class="card bg-base-200 shadow-md border border-base-300 hover:shadow-lg transition-all duration-300"
+            >
                 <div class="card-body">
                     <div class="flex justify-between items-start mb-4">
                         <div class="flex-1">
                             <h3 class="card-title text-lg font-semibold mb-1">
                                 {{ client.name }}
-                                <div v-if="isCustomClientRunning(client.id)" class="badge badge-success badge-sm ml-2">
-                                    {{ $t('custom_clients.running') }}
+                                <div
+                                    v-if="isCustomClientRunning(client.id)"
+                                    class="badge badge-success badge-sm ml-2"
+                                >
+                                    {{ $t("custom_clients.running") }}
                                 </div>
                             </h3>
                             <div class="badge badge-outline badge-sm">
@@ -262,17 +327,25 @@ const handleSearch = (query: string) => {
                             <button class="btn btn-ghost btn-sm btn-square">
                                 <Settings class="w-4 h-4" />
                             </button>
-                            <ul class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
+                            <ul
+                                class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"
+                            >
                                 <li>
-                                    <button @click="handleEditClient(client)" class="gap-2">
+                                    <button
+                                        @click="handleEditClient(client)"
+                                        class="gap-2"
+                                    >
                                         <Edit3 class="w-4 h-4" />
-                                        {{ $t('custom_clients.edit') }}
+                                        {{ $t("custom_clients.edit") }}
                                     </button>
                                 </li>
                                 <li>
-                                    <button @click="handleDeleteClient(client)" class="gap-2 text-error">
+                                    <button
+                                        @click="handleDeleteClient(client)"
+                                        class="gap-2 text-error"
+                                    >
                                         <Trash2 class="w-4 h-4" />
-                                        {{ $t('custom_clients.delete') }}
+                                        {{ $t("custom_clients.delete") }}
                                     </button>
                                 </li>
                             </ul>
@@ -280,30 +353,51 @@ const handleSearch = (query: string) => {
                     </div>
 
                     <div class="space-y-3">
-                        <div v-if="client.description" class="text-sm text-base-content/70">
+                        <div
+                            v-if="client.description"
+                            class="text-sm text-base-content/70"
+                        >
                             {{ client.description }}
                         </div>
 
                         <div class="text-sm space-y-1">
                             <div class="flex items-center gap-2">
                                 <Calendar class="w-4 h-4 text-primary" />
-                                <span class="font-medium">{{ $t('custom_clients.added') }}:</span>
+                                <span class="font-medium"
+                                    >{{ $t("custom_clients.added") }}:</span
+                                >
                                 <span>{{ formatDate(client.created_at) }}</span>
                             </div>
                         </div>
 
                         <div class="card-actions justify-end">
-                            <button @click="handleLaunchClick(client)" class="btn btn-sm gap-2"
-                                :class="isCustomClientRunning(client.id) ? 'btn-error' : 'btn-primary'"
-                                :disabled="!client.is_installed">
-                                <StopCircle v-if="isCustomClientRunning(client.id)" class="w-4 h-4" />
+                            <button
+                                @click="handleLaunchClick(client)"
+                                class="btn btn-sm gap-2"
+                                :class="
+                                    isCustomClientRunning(client.id)
+                                        ? 'btn-error'
+                                        : 'btn-primary'
+                                "
+                                :disabled="!client.is_installed"
+                            >
+                                <StopCircle
+                                    v-if="isCustomClientRunning(client.id)"
+                                    class="w-4 h-4"
+                                />
                                 <Play v-else class="w-4 h-4" />
-                                {{ isCustomClientRunning(client.id) ? $t('custom_clients.stop') :
-                                    $t('custom_clients.launch') }}
+                                {{
+                                    isCustomClientRunning(client.id)
+                                        ? $t("custom_clients.stop")
+                                        : $t("custom_clients.launch")
+                                }}
                             </button>
-                            <button @click="openLogViewer(client)" class="btn btn-sm btn-ghost gap-2">
+                            <button
+                                @click="openLogViewer(client)"
+                                class="btn btn-sm btn-ghost gap-2"
+                            >
                                 <FileText class="w-4 h-4" />
-                                {{ $t('logs.view') }}
+                                {{ $t("logs.view") }}
                             </button>
                         </div>
                     </div>
@@ -311,4 +405,4 @@ const handleSearch = (query: string) => {
             </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/views/Customization.vue b/src/views/Customization.vue
index 8de17384..1a4ee307 100644
--- a/src/views/Customization.vue
+++ b/src/views/Customization.vue
@@ -1,53 +1,83 @@
 <template>
     <div class="container mx-auto mt-4">
         <div key="theme" class="grid grid-cols-1 lg:grid-cols-12 gap-8">
-            <div class="card bg-base-200 shadow-md border border-base-300 lg:col-span-4 p-6">
+            <div
+                class="card bg-base-200 shadow-md border border-base-300 lg:col-span-4 p-6"
+            >
                 <h2 class="card-title flex items-center gap-2">
                     <SunMoon class="w-5 h-5 text-primary" />
-                    {{ t('theme.select_theme') }}
+                    {{ t("theme.select_theme") }}
                 </h2>
-                <p class="text-base-content/70 mb-4">{{ t('theme.description') }}</p>
+                <p class="text-base-content/70 mb-4">
+                    {{ t("theme.description") }}
+                </p>
 
                 <div class="flex flex-col gap-4">
-                    <button v-for="theme in themes" :key="theme" @click="changeTheme(theme)"
-                        class="btn border flex items-center justify-between px-6 py-3" :class="{
-                            'border-primary/50 bg-primary/10': selectedTheme === theme,
-                            'border-base-content/10': selectedTheme !== theme
-                        }">
+                    <button
+                        v-for="theme in themes"
+                        :key="theme"
+                        @click="changeTheme(theme)"
+                        class="btn border flex items-center justify-between px-6 py-3"
+                        :class="{
+                            'border-primary/50 bg-primary/10':
+                                selectedTheme === theme,
+                            'border-base-content/10': selectedTheme !== theme,
+                        }"
+                    >
                         <div class="flex items-center gap-2">
-                            <Sun v-if="theme === 'light'" class="w-5 h-5 text-amber-400" />
+                            <Sun
+                                v-if="theme === 'light'"
+                                class="w-5 h-5 text-amber-400"
+                            />
                             <Moon v-else class="w-5 h-5 text-indigo-400" />
-                            <span class="font-medium capitalize">{{ t(`theme.${theme}`) }}</span>
+                            <span class="font-medium capitalize">{{
+                                t(`theme.${theme}`)
+                            }}</span>
                         </div>
-                        <div v-if="selectedTheme === theme" class="badge badge-primary">
-                            {{ t('theme.selected') }}
+                        <div
+                            v-if="selectedTheme === theme"
+                            class="badge badge-primary"
+                        >
+                            {{ t("theme.selected") }}
                         </div>
                     </button>
                 </div>
             </div>
         </div>
 
-        <div class="card bg-base-200 shadow-md border border-base-300 mb-6 mt-6">
+        <div
+            class="card bg-base-200 shadow-md border border-base-300 mb-6 mt-6"
+        >
             <div class="card-body">
-                <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+                <div
+                    class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"
+                >
                     <h1 class="card-title text-2xl flex items-center gap-3">
                         <Save class="w-6 h-6 text-primary" />
-                        {{ t('theme.preset') }}
+                        {{ t("theme.preset") }}
                     </h1>
 
                     <div class="flex flex-wrap items-center gap-2 justify-end">
                         <div class="flex gap-2 flex-wrap">
-                            <button class="btn btn-accent btn-sm flex items-center gap-2"
-                                @click="$emit('change-view', 'marketplace')">
+                            <button
+                                class="btn btn-accent btn-sm flex items-center gap-2"
+                                @click="$emit('change-view', 'marketplace')"
+                            >
                                 <Store class="w-4 h-4" />
-                                <span class="hidden sm:inline">{{ t('marketplace.open_marketplace') }}</span>
+                                <span class="hidden sm:inline">{{
+                                    t("marketplace.open_marketplace")
+                                }}</span>
                             </button>
 
-                            <button class="btn btn-outline btn-sm flex items-center gap-2" @click="resetStyles">
+                            <button
+                                class="btn btn-outline btn-sm flex items-center gap-2"
+                                @click="resetStyles"
+                            >
                                 <RotateCcw class="w-4 h-4" />
-                                <span class="hidden sm:inline">{{ t('theme.reset_button') }}</span>
+                                <span class="hidden sm:inline">{{
+                                    t("theme.reset_button")
+                                }}</span>
                             </button>
-
                         </div>
                     </div>
                 </div>
@@ -65,185 +95,522 @@
                 <div class="card-body p-6">
                     <h2 class="card-title flex items-center gap-2">
                         <Palette class="w-6 h-6 text-primary" />
-                        {{ t('theme.colors') }}
+                        {{ t("theme.colors") }}
                     </h2>
 
                     <div class="mb-8">
-                        <h3 class="text-xl font-semibold mb-4 text-base-content">{{ t('theme.base_colors') }}</h3>
-                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                        <h3
+                            class="text-xl font-semibold mb-4 text-base-content"
+                        >
+                            {{ t("theme.base_colors") }}
+                        </h3>
+                        <div
+                            class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"
+                        >
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{ t('theme.base100')
-                                }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.base100") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="base100"
-                                    @input="handleColorInput('base100', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'base100',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{ t('theme.base200')
-                                }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.base200") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="base200"
-                                    @input="handleColorInput('base200', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'base200',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{ t('theme.base300')
-                                }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.base300") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="base300"
-                                    @input="handleColorInput('base300', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'base300',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{
-                                    t('theme.base_content') }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.base_content") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="baseContent"
-                                    @input="handleColorInput('baseContent', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'baseContent',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                         </div>
                     </div>
 
                     <div class="mb-8">
-                        <h3 class="text-xl font-semibold mb-4 text-base-content">{{
-                            t('theme.primary_secondary_accent') }}</h3>
-                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+                        <h3
+                            class="text-xl font-semibold mb-4 text-base-content"
+                        >
+                            {{ t("theme.primary_secondary_accent") }}
+                        </h3>
+                        <div
+                            class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4"
+                        >
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{
-                                    t('theme.primary') }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.primary") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="primaryColor"
-                                    @input="handleColorInput('primaryColorOverride', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'primaryColorOverride',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{
-                                    t('theme.primary_content') }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.primary_content") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="primaryContent"
-                                    @input="handleColorInput('primaryContent', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'primaryContent',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{ t('theme.secondary')
-                                }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.secondary") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="secondary"
-                                    @input="handleColorInput('secondary', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'secondary',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{
-                                    t('theme.secondary_content') }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.secondary_content") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="secondaryContent"
-                                    @input="handleColorInput('secondaryContent', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'secondaryContent',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{ t('theme.accent')
-                                }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.accent") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="accent"
-                                    @input="handleColorInput('accent', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'accent',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{
-                                    t('theme.accent_content') }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.accent_content") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="accentContent"
-                                    @input="handleColorInput('accentContent', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'accentContent',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                         </div>
                     </div>
 
                     <div>
-                        <h3 class="text-xl font-semibold mb-4 text-base-content">{{ t('theme.semantic_colors') }}
+                        <h3
+                            class="text-xl font-semibold mb-4 text-base-content"
+                        >
+                            {{ t("theme.semantic_colors") }}
                         </h3>
-                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                        <div
+                            class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"
+                        >
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{ t('theme.neutral')
-                                }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.neutral") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="neutral"
-                                    @input="handleColorInput('neutral', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'neutral',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{
-                                    t('theme.neutral_content') }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.neutral_content") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="neutralContent"
-                                    @input="handleColorInput('neutralContent', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'neutralContent',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{ t('theme.info')
-                                }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.info") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="info"
-                                    @input="handleColorInput('info', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'info',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{
-                                    t('theme.info_content') }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.info_content") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="infoContent"
-                                    @input="handleColorInput('infoContent', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'infoContent',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{ t('theme.success')
-                                }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.success") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="success"
-                                    @input="handleColorInput('success', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'success',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{
-                                    t('theme.success_content') }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.success_content") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="successContent"
-                                    @input="handleColorInput('successContent', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'successContent',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{ t('theme.warning')
-                                }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.warning") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="warning"
-                                    @input="handleColorInput('warning', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'warning',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{
-                                    t('theme.warning_content') }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.warning_content") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="warningContent"
-                                    @input="handleColorInput('warningContent', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'warningContent',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{ t('theme.error')
-                                }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.error") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="error"
-                                    @input="handleColorInput('error', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'error',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
                             </div>
                             <div class="form-control">
-                                <label class="label text-sm font-medium text-base-content">{{
-                                    t('theme.error_content') }}</label>
-                                <input type="color"
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{ t("theme.error_content") }}</label
+                                >
+                                <input
+                                    type="color"
                                     class="input input-bordered w-full h-10 p-0 rounded-md border-base-300"
                                     :value="errorContent"
-                                    @input="handleColorInput('errorContent', ($event.target as HTMLInputElement).value)" />
+                                    @input="
+                                        handleColorInput(
+                                            'errorContent',
+                                            ($event.target as HTMLInputElement)
+                                                .value
+                                        )
+                                    "
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="mt-8">
+                        <h3
+                            class="text-xl font-semibold mb-4 text-base-content"
+                        >
+                            {{ t("customization.background_title") }}
+                        </h3>
+                        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
+                            <div class="lg:col-span-12">
+                                <label
+                                    class="label text-sm font-medium text-base-content"
+                                    >{{
+                                        t("customization.background_image")
+                                    }}</label
+                                >
+                                <div class="relative">
+                                    <input
+                                        type="text"
+                                        class="input input-bordered w-full pr-10"
+                                        :value="backgroundImage"
+                                        :placeholder="
+                                            t(
+                                                'customization.background_image_placeholder'
+                                            )
+                                        "
+                                        @input="
+                                            handleBackgroundInput(
+                                                'backgroundImage',
+                                                (
+                                                    $event.target as HTMLInputElement
+                                                ).value
+                                            )
+                                        "
+                                    />
+                                    <button
+                                        v-if="backgroundImage"
+                                        class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-xs btn-ghost"
+                                        @click="
+                                            handleBackgroundInput(
+                                                'backgroundImage',
+                                                ''
+                                            )
+                                        "
+                                    >
+                                        &times;
+                                    </button>
+                                </div>
+                                <p class="text-xs text-base-content/50 mt-1">
+                                    {{
+                                        t("customization.background_image_help")
+                                    }}
+                                </p>
+                            </div>
+
+                            <div class="lg:col-span-6">
+                                <div class="flex justify-between mb-2">
+                                    <label
+                                        class="text-sm font-medium text-base-content"
+                                        >{{
+                                            t("customization.background_blur")
+                                        }}</label
+                                    >
+                                    <span class="text-xs font-mono"
+                                        >{{ backgroundBlur ?? 0 }}px</span
+                                    >
+                                </div>
+                                <input
+                                    type="range"
+                                    min="0"
+                                    max="20"
+                                    step="1"
+                                    class="range range-primary range-sm"
+                                    :value="backgroundBlur ?? 0"
+                                    @input="
+                                        handleBackgroundInput(
+                                            'backgroundBlur',
+                                            Number(
+                                                (
+                                                    $event.target as HTMLInputElement
+                                                ).value
+                                            )
+                                        )
+                                    "
+                                />
+                            </div>
+
+                            <div class="lg:col-span-6">
+                                <div class="flex justify-between mb-2">
+                                    <label
+                                        class="text-sm font-medium text-base-content"
+                                        >{{
+                                            t(
+                                                "customization.background_opacity"
+                                            )
+                                        }}</label
+                                    >
+                                    <span class="text-xs font-mono"
+                                        >{{ backgroundOpacity ?? 100 }}%</span
+                                    >
+                                </div>
+                                <input
+                                    type="range"
+                                    min="0"
+                                    max="100"
+                                    step="1"
+                                    class="range range-primary range-sm"
+                                    :value="backgroundOpacity ?? 100"
+                                    @input="
+                                        handleBackgroundInput(
+                                            'backgroundOpacity',
+                                            Number(
+                                                (
+                                                    $event.target as HTMLInputElement
+                                                ).value
+                                            )
+                                        )
+                                    "
+                                />
                             </div>
                         </div>
                     </div>
@@ -252,100 +619,186 @@
 
             <div class="card bg-base-200 shadow-md border border-base-300 mt-6">
                 <div class="card-body">
-                    <div @click="toggleExpertMode" class="cursor-pointer flex items-center justify-between">
+                    <div
+                        @click="toggleExpertMode"
+                        class="cursor-pointer flex items-center justify-between"
+                    >
                         <h2 class="card-title flex items-center gap-2">
                             <Code class="w-5 h-5 text-primary" />
-                            {{ t('theme.expert_css_title') }}
+                            {{ t("theme.expert_css_title") }}
                         </h2>
                         <button class="btn btn-sm btn-ghost">
-                            <ChevronDown v-if="!showExpertOptions" class="w-5 h-5" />
+                            <ChevronDown
+                                v-if="!showExpertOptions"
+                                class="w-5 h-5"
+                            />
                             <ChevronUp v-else class="w-5 h-5" />
-                            {{ showExpertOptions ? t('theme.hide_expert') : t('theme.show_expert') }}
+                            {{
+                                showExpertOptions
+                                    ? t("theme.hide_expert")
+                                    : t("theme.show_expert")
+                            }}
                         </button>
                     </div>
 
-                    <transition name="expert-fade" @before-enter="expertAnimationActive = true"
-                        @after-leave="expertAnimationActive = false">
+                    <transition
+                        name="expert-fade"
+                        @before-enter="expertAnimationActive = true"
+                        @after-leave="expertAnimationActive = false"
+                    >
                         <div v-if="showExpertOptions" class="mt-4">
-                            <div class="bg-warning/10 border border-warning/20 rounded-lg p-4 mb-4">
+                            <div
+                                class="bg-warning/10 border border-warning/20 rounded-lg p-4 mb-4"
+                            >
                                 <div class="flex items-start gap-2">
-                                    <HelpCircle class="w-5 h-5 text-warning shrink-0 mt-0.5" />
+                                    <HelpCircle
+                                        class="w-5 h-5 text-warning shrink-0 mt-0.5"
+                                    />
                                     <p class="text-sm text-warning">
-                                        {{ t('theme.expert_warning') }}
+                                        {{ t("theme.expert_warning") }}
                                     </p>
                                 </div>
                             </div>
 
                             <div class="flex items-center justify-between mb-2">
                                 <label class="flex items-center gap-2">
-                                    <input type="checkbox" class="checkbox" v-model="enableCustomCSS"
-                                        @change="handleEnableCustomCSS(($event.target as HTMLInputElement)?.checked ?? false)" />
-                                    <span>{{ t('theme.enable_custom_css') }}</span>
+                                    <input
+                                        type="checkbox"
+                                        class="checkbox"
+                                        v-model="enableCustomCSS"
+                                        @change="
+                                            handleEnableCustomCSS(
+                                                (
+                                                    $event.target as HTMLInputElement
+                                                )?.checked ?? false
+                                            )
+                                        "
+                                    />
+                                    <span>{{
+                                        t("theme.enable_custom_css")
+                                    }}</span>
                                 </label>
                             </div>
                             <div class="flex flex-col gap-2 mb-4">
-                                <label class="font-medium mb-1">{{ t('theme.available_classes_label') }}</label>
+                                <label class="font-medium mb-1">{{
+                                    t("theme.available_classes_label")
+                                }}</label>
                                 <div class="flex flex-wrap gap-2">
                                     <span
                                         class="bg-base-300 text-xs px-3 py-1 rounded-full font-mono text-base-content/80 border border-base-200 tooltip tooltip-right cursor-pointer"
-                                        :data-tip="t('theme.tooltip_client_card')" @click="addExample('.client-card')">
+                                        :data-tip="
+                                            t('theme.tooltip_client_card')
+                                        "
+                                        @click="addExample('.client-card')"
+                                    >
                                         client-card
                                     </span>
                                     <span
                                         class="bg-base-300 text-xs px-3 py-1 rounded-full font-mono text-base-content/80 border border-base-200 tooltip tooltip-right cursor-pointer"
-                                        :data-tip="t('theme.tooltip_sidebar_btn')" @click="addExample('.sidebar-btn')">
+                                        :data-tip="
+                                            t('theme.tooltip_sidebar_btn')
+                                        "
+                                        @click="addExample('.sidebar-btn')"
+                                    >
                                         sidebar-btn
                                     </span>
                                     <span
                                         class="bg-base-300 text-xs px-3 py-1 rounded-full font-mono text-base-content/80 border border-base-200 tooltip tooltip-right cursor-pointer"
-                                        :data-tip="t('theme.tooltip_launch_download_btn')"
-                                        @click="addExample('.launch-btn, .download-btn')">
+                                        :data-tip="
+                                            t(
+                                                'theme.tooltip_launch_download_btn'
+                                            )
+                                        "
+                                        @click="
+                                            addExample(
+                                                '.launch-btn, .download-btn'
+                                            )
+                                        "
+                                    >
                                         download-btn | launch-btn
                                     </span>
                                 </div>
                             </div>
 
-                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
+                            <div
+                                class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4"
+                            >
                                 <div>
-                                    <label class="block mb-2 font-medium">{{ t('theme.custom_css_label')
+                                    <label class="block mb-2 font-medium">{{
+                                        t("theme.custom_css_label")
                                     }}</label>
-                                    <VueMonacoEditor v-model:value="customCSS" language="css"
-                                        :theme="selectedTheme === 'dark' ? 'vs-dark' : 'vs'" :options="{
+                                    <VueMonacoEditor
+                                        v-model:value="customCSS"
+                                        language="css"
+                                        :theme="
+                                            selectedTheme === 'dark'
+                                                ? 'vs-dark'
+                                                : 'vs'
+                                        "
+                                        :options="{
                                             readOnly: !enableCustomCSS,
                                             minimap: { enabled: false },
                                             fontSize: 14,
                                             lineNumbers: 'on',
                                             wordWrap: 'on',
                                             automaticLayout: true,
-                                            scrollBeyondLastLine: false
+                                            scrollBeyondLastLine: false,
                                         }"
-                                        style="height: 300px; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.1);" />
+                                        style="
+                                            height: 300px;
+                                            border-radius: 0.5rem;
+                                            border: 1px solid
+                                                rgba(255, 255, 255, 0.1);
+                                        "
+                                    />
                                 </div>
                             </div>
                             <div class="flex gap-2 mt-4">
-                                <button class="btn btn-primary btn-sm flex items-center gap-2" @click="openExportModal">
+                                <button
+                                    class="btn btn-primary btn-sm flex items-center gap-2"
+                                    @click="openExportModal"
+                                >
                                     <ClipboardCopy class="w-4 h-4" />
-                                    {{ t('theme.export_css_btn') }}
+                                    {{ t("theme.export_css_btn") }}
                                 </button>
-                                <button class="btn btn-secondary btn-sm flex items-center gap-2"
-                                    @click="openImportModal">
+                                <button
+                                    class="btn btn-secondary btn-sm flex items-center gap-2"
+                                    @click="openImportModal"
+                                >
                                     <ClipboardPaste class="w-4 h-4" />
-                                    {{ t('theme.import_css_btn') }}
+                                    {{ t("theme.import_css_btn") }}
                                 </button>
                             </div>
                             <div class="mt-6">
-                                <h3 class="font-medium text-sm mb-3">{{ t('theme.css_examples_title') }}</h3>
-                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                                    <div v-for="(example, index) in cssExamples" :key="index"
-                                        class="card shadow-md border border-base-300">
+                                <h3 class="font-medium text-sm mb-3">
+                                    {{ t("theme.css_examples_title") }}
+                                </h3>
+                                <div
+                                    class="grid grid-cols-1 md:grid-cols-3 gap-4"
+                                >
+                                    <div
+                                        v-for="(example, index) in cssExamples"
+                                        :key="index"
+                                        class="card shadow-md border border-base-300"
+                                    >
                                         <div class="card-body p-4">
-                                            <h4 class="card-title text-sm">{{ example.title }}</h4>
+                                            <h4 class="card-title text-sm">
+                                                {{ example.title }}
+                                            </h4>
                                             <pre
-                                                class="text-xs bg-base-300 p-2 rounded overflow-x-auto mt-2"><code>{{ example.code }}</code></pre>
-                                            <button @click="insertExample(example.code)"
-                                                class="btn btn-xs btn-primary mt-2" :disabled="!enableCustomCSS">
-                                                <ClipboardPaste class="w-4 h-4" />
-                                                {{ t('theme.insert_example') }}
+                                                class="text-xs bg-base-300 p-2 rounded overflow-x-auto mt-2"
+                                            ><code>{{ example.code }}</code></pre>
+                                            <button
+                                                @click="
+                                                    insertExample(example.code)
+                                                "
+                                                class="btn btn-xs btn-primary mt-2"
+                                                :disabled="!enableCustomCSS"
+                                            >
+                                                <ClipboardPaste
+                                                    class="w-4 h-4"
+                                                />
+                                                {{ t("theme.insert_example") }}
                                             </button>
                                         </div>
                                     </div>
@@ -360,14 +813,21 @@
 </template>
 
 <script setup lang="ts">
-defineEmits(['change-view']);
-import { ref, onMounted, onUnmounted, watch, toRefs } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { ClipboardCopy, ClipboardPaste, Palette, Save, Store, SunMoon } from 'lucide-vue-next';
-import { useToast } from '../services/toastService';
-import { settingsService } from '../services/settingsService';
-import { themeService } from '../services/themeService';
-import PresetManager from '../components/features/PresetManager.vue';
+defineEmits(["change-view"]);
+import { ref, onMounted, onUnmounted, watch, toRefs } from "vue";
+import { useI18n } from "vue-i18n";
+import {
+    ClipboardCopy,
+    ClipboardPaste,
+    Palette,
+    Save,
+    Store,
+    SunMoon,
+} from "lucide-vue-next";
+import { useToast } from "../services/toastService";
+import { settingsService } from "../services/settingsService";
+import { themeService } from "../services/themeService";
+import PresetManager from "../components/features/PresetManager.vue";
 import {
     Moon,
     Sun,
@@ -376,18 +836,20 @@ import {
     HelpCircle,
     ChevronDown,
     ChevronUp,
-} from 'lucide-vue-next';
-import { VueMonacoEditor } from '@guolao/vue-monaco-editor'
-import ImportExportCssModal from '../components/modals/social/presets/ImportExportCssModal.vue';
-import { useModal } from '../services/modalService';
+} from "lucide-vue-next";
+import { VueMonacoEditor } from "@guolao/vue-monaco-editor";
+import ImportExportCssModal from "../components/modals/social/presets/ImportExportCssModal.vue";
+import { useModal } from "../services/modalService";
 
 const i18n = useI18n();
 const { t } = i18n;
 const { addToast } = useToast();
 const { showModal } = useModal();
 
-const themes = ['dark', 'light'];
-const selectedTheme = ref(document.documentElement.getAttribute('data-theme') || 'dark');
+const themes = ["dark", "light"];
+const selectedTheme = ref(
+    document.documentElement.getAttribute("data-theme") || "dark"
+);
 const showExpertOptions = ref(false);
 const expertAnimationActive = ref(false);
 
@@ -413,21 +875,28 @@ const {
     warning,
     warningContent,
     error,
-    errorContent
+    errorContent,
+    backgroundImage,
+    backgroundBlur,
+    backgroundOpacity,
 } = toRefs(themeService.presetSettings);
 
-watch(themeService.presetSettings, () => {
-    themeService.saveCardSettings();
-}, { deep: true });
+watch(
+    themeService.presetSettings,
+    () => {
+        themeService.saveCardSettings();
+    },
+    { deep: true }
+);
 
 const cssExamples = [
     {
-        title: t('theme.example_1'),
+        title: t("theme.example_1"),
         code: `.client-card {
   backdrop-filter: blur(5px);
   background-color: rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(255, 255, 255, 0.1);
-}`
+}`,
     },
 ];
 
@@ -451,7 +920,7 @@ const _colorRefs: Record<string, any> = {
     warning,
     warningContent,
     error,
-    errorContent
+    errorContent,
 };
 
 const handleColorInput = (settingKey: string, color: string): void => {
@@ -461,21 +930,36 @@ const handleColorInput = (settingKey: string, color: string): void => {
     }
 };
 
+const handleBackgroundInput = (settingKey: string, value: any): void => {
+    const refs: Record<string, any> = {
+        backgroundImage,
+        backgroundBlur,
+        backgroundOpacity,
+    };
+    const r = refs[settingKey];
+    if (r) {
+        if (settingKey === "backgroundImage") {
+            r.value = value && value.trim().length > 0 ? value : null;
+        } else {
+            r.value = value;
+        }
+    }
+};
+
 const changeTheme = async (theme: string) => {
     try {
         selectedTheme.value = theme;
-        document.documentElement.setAttribute('data-theme', theme);
+        document.documentElement.setAttribute("data-theme", theme);
 
-        await settingsService.editSetting('theme', theme, false);
+        await settingsService.editSetting("theme", theme, false);
 
-        addToast(t('theme.change_success'), 'success');
+        addToast(t("theme.change_success"), "success");
     } catch (error) {
-        console.error('Failed to save theme:', error);
-        addToast(t('theme.save_failed', { error }), 'error');
+        console.error("Failed to save theme:", error);
+        addToast(t("theme.save_failed", { error }), "error");
     }
 };
 
-
 const toggleExpertMode = () => {
     expertAnimationActive.value = true;
     showExpertOptions.value = !showExpertOptions.value;
@@ -491,7 +975,7 @@ const handleEnableCustomCSS = (val: boolean) => {
 
 const insertExample = (code: string) => {
     if (!enableCustomCSS.value) {
-        addToast(t('theme.enable_custom_css_first'), 'warning');
+        addToast(t("theme.enable_custom_css_first"), "warning");
         return;
     }
 
@@ -499,12 +983,12 @@ const insertExample = (code: string) => {
         ? `${customCSS.value.trim()}\n\n${code}`
         : code;
 
-    addToast(t('theme.example_inserted'), 'success');
+    addToast(t("theme.example_inserted"), "success");
 };
 
 const addExample = (className: string) => {
     if (!enableCustomCSS.value) {
-        addToast(t('theme.enable_custom_css_first'), 'warning');
+        addToast(t("theme.enable_custom_css_first"), "warning");
         return;
     }
 
@@ -515,10 +999,9 @@ const addExample = (className: string) => {
 };
 
 const handleKeyDown = (event: KeyboardEvent) => {
-    if ((event.ctrlKey || event.metaKey) && event.key === 's') {
+    if ((event.ctrlKey || event.metaKey) && event.key === "s") {
         event.preventDefault();
         themeService.saveCardSettings();
-        addToast(t('common.saved'), 'success');
     }
 };
 
@@ -528,39 +1011,40 @@ const resetStyles = () => {
 
 const openExportModal = async () => {
     showModal(
-        'export-css',
+        "export-css",
         ImportExportCssModal,
-        { title: t('theme.export_css_title') },
-        { mode: 'export', css: customCSS.value },
+        { title: t("theme.export_css_title") },
+        { mode: "export", css: customCSS.value },
         {}
     );
 };
 
 const openImportModal = () => {
     showModal(
-        'import-css',
+        "import-css",
         ImportExportCssModal,
-        { title: t('theme.import_css_title') },
-        { mode: 'import' },
+        { title: t("theme.import_css_title") },
+        { mode: "import" },
         {
             import: (css: string) => {
-                if (/script|@import|url\(|expression|<|>|javascript:/i.test(css)) {
-                    addToast(t('theme.import_invalid'), 'error');
+                if (
+                    /script|@import|url\(|expression|<|>|javascript:/i.test(css)
+                ) {
+                    addToast(t("theme.import_invalid"), "error");
                     return;
                 }
                 customCSS.value = css;
-            }
+            },
         }
     );
 };
 
-
 onMounted(() => {
-    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown);
 });
 
 onUnmounted(() => {
-    document.removeEventListener('keydown', handleKeyDown);
+    document.removeEventListener("keydown", handleKeyDown);
 });
 </script>
 
@@ -590,9 +1074,10 @@ onUnmounted(() => {
 
 .expert-fade-enter-active,
 .expert-fade-leave-active {
-    transition: opacity 0.3s cubic-bezier(.4, 0, .2, 1),
-        transform 0.3s cubic-bezier(.4, 0, .2, 1),
-        max-height 0.3s cubic-bezier(.4, 0, .2, 1);
+    transition:
+        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     overflow: hidden;
     max-height: 2000px;
 }
@@ -605,8 +1090,8 @@ onUnmounted(() => {
 }
 
 textarea.textarea-bordered {
-    font-family: 'Fira Code', 'Menlo', 'Monaco', 'Courier New', monospace;
+    font-family: "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
     line-height: 1.5;
     tab-size: 2;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/FriendsView.vue b/src/views/FriendsView.vue
index 5f71574f..0cd71282 100644
--- a/src/views/FriendsView.vue
+++ b/src/views/FriendsView.vue
@@ -1,117 +1,198 @@
 <template>
-    <div class="header flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-6">
+    <div
+        class="header flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-6"
+    >
         <div class="title-row flex items-center gap-3">
             <h1 class="text-2xl font-semibold text-primary-focus">
-                {{ t('friends.title', { count: friends.length }) }}
+                {{ t("friends.title", { count: friends.length }) }}
             </h1>
         </div>
 
         <div class="controls flex items-center gap-2">
-            <div v-if="blockedUsers.length > 0" class="relative">
-                <button @click.stop="toggleBlockedDropdown()" class="btn btn-outline btn-sm flex items-center gap-2"
-                    aria-haspopup="true" aria-expanded="false">
-                    <Shield class="w-4 h-4" />
-                    <span class="ml-1">{{ t('blockedUsers.title', { count: blockedUsers.length }) }}</span>
-                </button>
-
-                <div ref="blockedDropdown"
-                    class="hidden dropdown-content card card-compact w-72 p-2 shadow bg-base-100 border border-base-300 absolute right-0 mt-2 z-9999"
-                    role="dialog">
-                    <div class="card-body p-2">
-                        <div class="space-y-2 max-h-64 overflow-y-auto">
-                            <div v-for="user in blockedUsers" :key="user.id"
-                                class="flex items-center justify-between p-2 bg-base-200 rounded-lg">
-                                <div class="flex items-center gap-2">
-                                    <div @click="$emit('show-user-profile', user.id)"
-                                        class="avatar-click-area cursor-pointer">
-                                        <UserAvatar :name="getDisplayNickname(user)" size="sm" />
-                                    </div>
-                                    <div>
-                                        <p class="font-medium text-sm">
-                                            {{ getDisplayNickname(user) }}
-                                        </p>
-                                        <p class="text-xs text-base-content/70">
-                                            @{{ getDisplayUsername(user) }}
-                                        </p>
-                                    </div>
-                                </div>
-                                <button @click="unblockUser(user)" class="btn btn-primary btn-xs">
-                                    <UserCheck class="w-3 h-3 mr-1" />
-                                    {{ t('common.unblock') }}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <button @click="showAddFriendModal" class="btn btn-primary btn-sm flex items-center gap-2">
+            <button
+                @click="showAddFriendModal"
+                class="btn btn-primary btn-sm flex items-center gap-2"
+            >
                 <UserPlus class="w-4 h-4" />
-                {{ t('friends.addFriend') }}
+                {{ t("friends.addFriend") }}
             </button>
         </div>
     </div>
 
-    <InlineIRCChat class="mb-6" @show-user-profile="$emit('show-user-profile', $event)" />
-
-    <div v-if="friendRequests.received.length > 0 || friendRequests.sent.length > 0" class="mb-6">
-        <div class="requests-grid grid gap-4 sm:grid-cols-2 items-stretch">
-            <div v-if="friendRequests.received.length > 0" class="requests-panel">
-                <div class="panel-header flex items-center justify-between mb-2">
-                    <h3 class="text-md font-medium text-info">{{ t('friends.receivedRequests') }}</h3>
-                    <span class="text-sm text-base-content/60">{{ friendRequests.received.length }}</span>
+    <InlineIRCChat
+        class="mb-6"
+        @show-user-profile="$emit('show-user-profile', $event)"
+    />
+
+    <div
+        v-if="
+            friendRequests.received.length > 0 ||
+            friendRequests.sent.length > 0 ||
+            blockedUsers.length > 0
+        "
+        class="mb-6"
+    >
+        <div class="grid gap-4 lg:grid-cols-3 items-stretch">
+            <div
+                v-if="friendRequests.received.length > 0"
+                class="requests-panel"
+            >
+                <div
+                    class="panel-header flex items-center justify-between mb-2"
+                >
+                    <h3 class="text-md font-medium text-info">
+                        {{ t("friends.receivedRequests") }}
+                    </h3>
+                    <span class="text-sm text-base-content/60">{{
+                        friendRequests.received.length
+                    }}</span>
                 </div>
-                <div class="requests-list grid gap-2 auto-rows-fr items-stretch">
-                    <FriendRequestCard v-for="request in friendRequests.received" :key="request.id"
+                <div
+                    class="requests-list grid gap-2 auto-rows-fr items-stretch"
+                >
+                    <FriendRequestCard
+                        v-for="request in friendRequests.received"
+                        :key="request.id"
                         :user="request.requester"
-                        :request-id="request.id" type="received" @accept="respondToRequest($event, 'accept')"
+                        :request-id="request.id"
+                        type="received"
+                        @accept="respondToRequest($event, 'accept')"
                         @reject="respondToRequest($event, 'reject')"
-                        @view-profile="$emit('show-user-profile', $event)" />
+                        @report="reportUser"
+                        @view-profile="$emit('show-user-profile', $event)"
+                    />
                 </div>
             </div>
 
             <div v-if="friendRequests.sent.length > 0" class="requests-panel">
-                <h3 class="text-md font-medium text-warning mb-2">{{ t('friends.sentRequests') }}</h3>
-                <div class="requests-list grid gap-2 auto-rows-fr items-stretch">
-                    <FriendRequestCard v-for="request in friendRequests.sent" :key="request.id"
+                <div
+                    class="panel-header flex items-center justify-between mb-2"
+                >
+                    <h3 class="text-md font-medium text-warning">
+                        {{ t("friends.sentRequests") }}
+                    </h3>
+                    <span class="text-sm text-base-content/60">{{
+                        friendRequests.sent.length
+                    }}</span>
+                </div>
+                <div
+                    class="requests-list grid gap-2 auto-rows-fr items-stretch"
+                >
+                    <FriendRequestCard
+                        v-for="request in friendRequests.sent"
+                        :key="request.id"
                         :user="request.addressee"
-                        :request-id="request.id" type="sent" @cancel="cancelRequest"
-                        @view-profile="$emit('show-user-profile', $event)" />
+                        :request-id="request.id"
+                        type="sent"
+                        @cancel="cancelRequest"
+                        @view-profile="$emit('show-user-profile', $event)"
+                    />
+                </div>
+            </div>
+
+            <div v-if="blockedUsers.length > 0" class="requests-panel">
+                <div
+                    class="panel-header flex items-center justify-between mb-2"
+                >
+                    <h3 class="text-md font-medium text-error">
+                        {{
+                            t("blockedUsers.title", { count: "" })
+                                .replace("()", "")
+                                .trim()
+                        }}
+                    </h3>
+                    <span class="text-sm text-base-content/60">{{
+                        blockedUsers.length
+                    }}</span>
+                </div>
+                <div class="requests-list space-y-2">
+                    <div
+                        v-for="user in blockedUsers"
+                        :key="user.id"
+                        class="flex items-center justify-between p-2 bg-base-200/50 rounded-lg border border-base-300/50"
+                    >
+                        <div class="flex items-center gap-2">
+                            <div
+                                @click="$emit('show-user-profile', user.id)"
+                                class="avatar-click-area cursor-pointer"
+                            >
+                                <UserAvatar
+                                    :name="getDisplayNickname(user)"
+                                    size="sm"
+                                />
+                            </div>
+                            <div class="min-w-0">
+                                <p
+                                    class="font-medium text-sm truncate max-w-25"
+                                >
+                                    {{ getDisplayNickname(user) }}
+                                </p>
+                                <p
+                                    class="text-[10px] text-base-content/50 truncate max-w-25"
+                                >
+                                    @{{ getDisplayUsername(user) }}
+                                </p>
+                            </div>
+                        </div>
+                        <button
+                            @click="unblockUser(user)"
+                            class="btn btn-error btn-outline btn-xs gap-1 hover:btn-error"
+                        >
+                            <UserCheck class="w-3 h-3" />
+                            {{ t("common.unblock") }}
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 
     <div>
-        <div v-if="friends.length === 0" class="text-center py-8 text-base-content/70">
+        <div
+            v-if="friends.length === 0"
+            class="text-center py-8 text-base-content/70"
+        >
             <Users class="w-12 h-12 mx-auto mb-3 opacity-50" />
-            <p>{{ t('friends.noFriends') }}</p>
+            <p>{{ t("friends.noFriends") }}</p>
         </div>
 
-	        <div v-else class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
-	            <FriendCard v-for="friend in friends" :key="friend.id" :friend="friend"
-	                @remove-friend="removeFriend" @block-friend="blockFriend"
-	                @view-profile="$emit('show-user-profile', $event)" />
-	        </div>
-	    </div>
+        <div
+            v-else
+            class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+        >
+            <FriendCard
+                v-for="friend in friends"
+                :key="friend.id"
+                :friend="friend"
+                @remove-friend="removeFriend"
+                @block-friend="blockFriend"
+                @view-profile="$emit('show-user-profile', $event)"
+            />
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
-import {onMounted, onUnmounted, ref} from 'vue';
-import {useToast} from '../services/toastService';
-import {useModal} from '../services/modalService';
-import {useI18n} from 'vue-i18n';
-import {type Friend, userService, type UserStatus,} from '../services/userService';
-import {useFriends} from '../composables/useFriends';
-import AddFriendModal from '../components/modals/social/friends/AddFriendModal.vue';
-import BlockUnblockConfirmModal from '../components/modals/social/friends/BlockUnblockConfirmModal.vue';
-import RemoveFriendConfirmModal from '../components/modals/social/friends/RemoveFriendConfirmModal.vue';
-import FriendCard from '../components/features/friends/FriendCard.vue';
-import FriendRequestCard from '../components/features/friends/FriendRequestCard.vue';
-import UserAvatar from '../components/ui/UserAvatar.vue';
-import InlineIRCChat from '../components/features/social/InlineIRCChat.vue';
-import {Shield, UserCheck, UserPlus, Users} from 'lucide-vue-next';
-import {useStreamerMode} from '../composables/useStreamerMode';
+import { onMounted, onUnmounted, ref } from "vue";
+import { useToast } from "../services/toastService";
+import { useModal } from "../services/modalService";
+import { useI18n } from "vue-i18n";
+import {
+    type Friend,
+    userService,
+    type UserStatus,
+} from "../services/userService";
+import { useFriends } from "../composables/useFriends";
+import AddFriendModal from "../components/modals/social/friends/AddFriendModal.vue";
+import BlockUnblockConfirmModal from "../components/modals/social/friends/BlockUnblockConfirmModal.vue";
+import RemoveFriendConfirmModal from "../components/modals/social/friends/RemoveFriendConfirmModal.vue";
+import ReportModal from "../components/modals/common/ReportModal.vue";
+import FriendCard from "../components/features/friends/FriendCard.vue";
+import FriendRequestCard from "../components/features/friends/FriendRequestCard.vue";
+import UserAvatar from "../components/ui/UserAvatar.vue";
+import InlineIRCChat from "../components/features/social/InlineIRCChat.vue";
+import { UserCheck, UserPlus, Users } from "lucide-vue-next";
+import { useStreamerMode } from "../composables/useStreamerMode";
 
 const { t } = useI18n();
 const { addToast } = useToast();
@@ -123,27 +204,21 @@ defineProps<{
 }>();
 
 const emit = defineEmits([
-    'show-user-profile',
-    'logged-out',
-    'logged-in',
-    'registered',
-    'change-view',
-    'back-to-friends',
-    'unreadCountUpdated',
+    "show-user-profile",
+    "logged-out",
+    "logged-in",
+    "registered",
+    "change-view",
+    "back-to-friends",
+    "unreadCountUpdated",
 ]);
 
 const { friends, friendRequests, loadFriendsData, updateFriendStatuses } =
     useFriends();
 const currentUserStatus = ref<UserStatus | null>(null);
 const blockedUsers = ref<Friend[]>([]);
-const blockedDropdown = ref<HTMLElement | null>(null);
 const streamer = useStreamerMode();
 
-const toggleBlockedDropdown = () => {
-    if (!blockedDropdown.value) return;
-    blockedDropdown.value.classList.toggle('hidden');
-};
-
 const getDisplayNickname = (user: Friend) => {
     return streamer.getDisplayName(user.nickname, user.username);
 };
@@ -159,7 +234,7 @@ let statusRefreshInterval: number | null = null;
 let fullDataRefreshInterval: number | null = null;
 
 onMounted(async () => {
-    await loadFriendsAndStatus(true);
+    await loadFriendsAndStatus(false);
 
     statusRefreshInterval = window.setInterval(
         updateStatuses,
@@ -169,6 +244,10 @@ onMounted(async () => {
         loadFriendsAndStatus,
         FULL_DATA_UPDATE_INTERVAL
     );
+
+    window.addEventListener("friend-request-received", handleRefreshEvent);
+    window.addEventListener("friend-request-accepted", handleRefreshEvent);
+    window.addEventListener("friend-request-canceled", handleRefreshEvent);
 });
 
 onUnmounted(() => {
@@ -178,12 +257,19 @@ onUnmounted(() => {
     if (fullDataRefreshInterval) {
         clearInterval(fullDataRefreshInterval);
     }
+    window.removeEventListener("friend-request-received", handleRefreshEvent);
+    window.removeEventListener("friend-request-accepted", handleRefreshEvent);
+    window.removeEventListener("friend-request-canceled", handleRefreshEvent);
 });
 
+const handleRefreshEvent = () => {
+    loadFriendsAndStatus(true);
+};
+
 const loadFriendsAndStatus = async (forceReload = false) => {
     try {
         if (forceReload || friends.value.length === 0) {
-            await loadFriendsData();
+            await loadFriendsData(forceReload);
         } else {
             await updateFriendStatuses();
         }
@@ -192,8 +278,8 @@ const loadFriendsAndStatus = async (forceReload = false) => {
 
         currentUserStatus.value = await userService.getUserStatus();
     } catch (error) {
-        console.error('Failed to load friends data:', error);
-        addToast(t('friends.load_failed'), 'error');
+        console.error("Failed to load friends data:", error);
+        addToast(t("friends.load_failed"), "error");
     }
 };
 
@@ -203,7 +289,7 @@ const updateStatuses = async () => {
 
         currentUserStatus.value = await userService.getUserStatus();
     } catch (error) {
-        console.error('Failed to update friend statuses:', error);
+        console.error("Failed to update friend statuses:", error);
     }
 };
 
@@ -211,140 +297,172 @@ const loadBlockedUsers = async () => {
     try {
         blockedUsers.value = await userService.getBlockedUsers();
     } catch (error) {
-        console.error('Failed to load blocked users:', error);
+        console.error("Failed to load blocked users:", error);
     }
 };
 
 const showAddFriendModal = () => {
     showModal(
-        'add-friend',
+        "add-friend",
         AddFriendModal,
-        { title: t('friends.addFriend') },
+        { title: t("friends.addFriend") },
         {},
         {
-            'friend-added': async () => {
+            "friend-added": async () => {
                 await loadFriendsData();
-                hideModal('add-friend');
+                hideModal("add-friend");
             },
-            'view-profile': (userId: number) => {
-                hideModal('add-friend');
-                emit('show-user-profile', userId);
+            "view-profile": (userId: number) => {
+                hideModal("add-friend");
+                emit("show-user-profile", userId);
             },
-            close: () => hideModal('add-friend'),
+            close: () => hideModal("add-friend"),
         }
     );
 };
 
 const respondToRequest = async (
     requestId: number,
-    action: 'accept' | 'reject'
+    action: "accept" | "reject"
 ) => {
     try {
         await userService.respondToFriendRequest(requestId, action);
         addToast(
-            action === 'accept'
-                ? t('friends.request_accepted')
-                : t('friends.request_rejected'),
-            'success'
+            action === "accept"
+                ? t("friends.request_accepted")
+                : t("friends.request_rejected"),
+            "success"
         );
         await loadFriendsData(true);
     } catch (error) {
         console.error(`Failed to ${action} friend request:`, error);
-        addToast(t('friends.request_failed', { action }), 'error');
+        addToast(t("friends.request_failed", { action }), "error");
     }
 };
 
 const cancelRequest = async (requestId: number) => {
     try {
         await userService.cancelFriendRequest(requestId);
-        addToast(t('friends.request_canceled'), 'success');
+        addToast(t("friends.request_canceled"), "success");
         await loadFriendsData(true);
     } catch (error) {
-        console.error('Failed to cancel friend request:', error);
-        addToast(t('friends.request_failed', { action: 'cancel' }), 'error');
+        console.error("Failed to cancel friend request:", error);
+        addToast(t("friends.request_failed", { action: "cancel" }), "error");
     }
 };
 
 const removeFriend = async (friend: Friend) => {
     showModal(
-        'remove-friend-confirm',
+        "remove-friend-confirm",
         RemoveFriendConfirmModal,
-        { title: t('userProfile.remove_friend') },
+        { title: t("userProfile.remove_friend") },
         { friend: friend },
         {
             confirm: async (confirmedFriend: Friend) => {
                 try {
                     await userService.removeFriend(confirmedFriend.id);
                     addToast(
-                        t('friends.remove_success', {
-                            name: streamer.getDisplayName(confirmedFriend.nickname, confirmedFriend.username),
+                        t("friends.remove_success", {
+                            name: streamer.getDisplayName(
+                                confirmedFriend.nickname,
+                                confirmedFriend.username
+                            ),
                         }),
-                        'success'
+                        "success"
                     );
                     await loadFriendsData(true);
                 } catch (error) {
-                    console.error('Failed to remove friend:', error);
-                    addToast(t('friends.remove_failed'), 'error');
+                    console.error("Failed to remove friend:", error);
+                    addToast(t("friends.remove_failed"), "error");
                 }
-                hideModal('remove-friend-confirm');
+                hideModal("remove-friend-confirm");
             },
-            close: () => hideModal('remove-friend-confirm'),
+            close: () => hideModal("remove-friend-confirm"),
         }
     );
 };
 
 const blockFriend = async (friend: Friend) => {
     showModal(
-        'block-confirm',
+        "block-confirm",
         BlockUnblockConfirmModal,
-        { title: t('userProfile.block_user') },
-        { user: friend, action: 'block' },
+        { title: t("userProfile.block_user") },
+        { user: friend, action: "block" },
         {
             confirm: async (user: Friend) => {
                 try {
                     await userService.blockUser(user.id);
                     addToast(
-                        t('friends.block_success', {
-                            name: streamer.getDisplayName(user.nickname, user.username),
+                        t("friends.block_success", {
+                            name: streamer.getDisplayName(
+                                user.nickname,
+                                user.username
+                            ),
                         }),
-                        'success'
+                        "success"
                     );
-                    await Promise.all([loadFriendsData(true), loadBlockedUsers()]);
+                    await Promise.all([
+                        loadFriendsData(true),
+                        loadBlockedUsers(),
+                    ]);
                 } catch (error) {
-                    console.error('Failed to block user:', error);
-                    addToast(t('friends.block_failed'), 'error');
+                    console.error("Failed to block user:", error);
+                    addToast(t("friends.block_failed"), "error");
                 }
-                hideModal('block-confirm');
+                hideModal("block-confirm");
             },
-            close: () => hideModal('block-confirm'),
+            close: () => hideModal("block-confirm"),
+        }
+    );
+};
+
+const reportUser = (user: Friend) => {
+    showModal(
+        "report-user",
+        ReportModal,
+        {
+            title: t("reports.report_user"),
+        },
+        {
+            userId: user.id,
+            username: user.nickname || user.username,
+        },
+        {
+            success: () => {
+                hideModal("report-user");
+            },
+            close: () => hideModal("report-user"),
         }
     );
 };
 
 const unblockUser = async (user: Friend) => {
     showModal(
-        'unblock-confirm',
+        "unblock-confirm",
         BlockUnblockConfirmModal,
-        { title: t('userProfile.unblock_user') },
-        { user: user, action: 'unblock' },
+        { title: t("userProfile.unblock_user") },
+        { user: user, action: "unblock" },
         {
             confirm: async (confirmedUser: Friend) => {
                 try {
                     await userService.unblockUser(confirmedUser.id);
                     addToast(
-                        t('friends.unblock_success', {
-                            name: streamer.getDisplayName(confirmedUser.nickname, confirmedUser.username),
+                        t("friends.unblock_success", {
+                            name: streamer.getDisplayName(
+                                confirmedUser.nickname,
+                                confirmedUser.username
+                            ),
                         }),
-                        'success'
+                        "success"
                     );
                     await loadBlockedUsers();
                 } catch (error) {
-                    console.error('Failed to unblock user:', error);
-                    addToast(t('friends.unblock_failed'), 'error');
+                    console.error("Failed to unblock user:", error);
+                    addToast(t("friends.unblock_failed"), "error");
                 }
-                hideModal('unblock-confirm');
+                hideModal("unblock-confirm");
             },
-            close: () => hideModal('unblock-confirm'),
+            close: () => hideModal("unblock-confirm"),
         }
     );
 };
@@ -365,10 +483,6 @@ const unblockUser = async (user: Friend) => {
     transform: scale(0.98);
 }
 
-.requests-grid {
-    grid-template-columns: 1fr;
-}
-
 .requests-panel {
     background: var(--b3);
     border: 1px solid var(--b2);
@@ -386,9 +500,9 @@ const unblockUser = async (user: Friend) => {
     padding-bottom: 0.4rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
     .requests-grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
+        grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 }
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 77f5b947..c6fbd75c 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,20 +1,42 @@
 <script setup lang="ts">
-import {invoke} from '@tauri-apps/api/core';
-import {listen} from '@tauri-apps/api/event';
-import {computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch} from 'vue';
-import {Copy, Download, FileText, Folder, Newspaper, RefreshCcw, Star, StopCircle, Trash2, X} from 'lucide-vue-next';
-import SearchBar from '../components/common/SearchBar.vue';
-import ClientCard from '../components/features/clients/ClientCard.vue';
-import FiltersMenu from '../components/common/FiltersMenu.vue';
-import {useToast} from '../services/toastService';
-import {useModal} from '../services/modalService';
-import {syncService} from '../services/syncService';
-import {useI18n} from 'vue-i18n';
-import type {Client, CustomClient, InstallProgress} from '../types/ui';
-import LogViewerModal from '../components/modals/clients/LogViewerModal.vue';
-import InsecureClientWarningModal from '../components/modals/clients/InsecureClientWarningModal.vue';
-import InlineIRCChat from '../components/features/social/InlineIRCChat.vue';
-import {isHalloweenEvent} from '../utils/events';
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import {
+    computed,
+    nextTick,
+    onBeforeUnmount,
+    onMounted,
+    ref,
+    shallowRef,
+    watch,
+} from "vue";
+import {
+    Copy,
+    Download,
+    FileText,
+    Folder,
+    Newspaper,
+    Package,
+    Plus,
+    RefreshCcw,
+    Star,
+    StopCircle,
+    Trash2,
+    X,
+} from "lucide-vue-next";
+import SearchBar from "../components/common/SearchBar.vue";
+import ClientCard from "../components/features/clients/ClientCard.vue";
+import FiltersMenu from "../components/common/FiltersMenu.vue";
+import ModsManagerModal from "../components/modals/clients/ModsManagerModal.vue";
+import { useToast } from "../services/toastService";
+import { useModal } from "../services/modalService";
+import { syncService } from "../services/syncService";
+import { useI18n } from "vue-i18n";
+import type { Client, CustomClient, InstallProgress } from "../types/ui";
+import LogViewerModal from "../components/modals/clients/LogViewerModal.vue";
+import InsecureClientWarningModal from "../components/modals/clients/InsecureClientWarningModal.vue";
+import InlineIRCChat from "../components/features/social/InlineIRCChat.vue";
+import { isHalloweenEvent } from "../utils/events";
 
 interface Account {
     id: string;
@@ -43,20 +65,20 @@ const props = defineProps<{
 }>();
 
 defineEmits<{
-    'logged-out': [];
-    'logged-in': [];
+    "logged-out": [];
+    "logged-in": [];
     registered: [];
-    'change-view': [view: string];
-    'show-user-profile': [userId: number];
-    'back-to-friends': [];
-    'unread-count-updated': [count: number];
+    "change-view": [view: string];
+    "show-user-profile": [userId: number];
+    "back-to-friends": [];
+    "unread-count-updated": [count: number];
 }>();
 
 const clients = shallowRef<Client[]>([]);
 const customClients = shallowRef<CustomClient[]>([]);
-const customClientsDisplayMode = ref<'global' | 'separate'>('separate');
+const customClientsDisplayMode = ref<"global" | "separate">("separate");
 const favoriteClients = shallowRef<number[]>([]);
-const error = ref('');
+const error = ref("");
 const clientsLoaded = ref(false);
 const runningClients = shallowRef<number[]>([]);
 const skipNextRunningCheck = ref<Set<number>>(new Set());
@@ -67,12 +89,12 @@ const { showModal, hideModal } = useModal();
 const statusInterval = ref<number | null>(null);
 const searchBarRef = ref<any>(null);
 
-const HOME_ANIM_KEY = 'homeAnimPlayed';
+const HOME_ANIM_KEY = "homeAnimPlayed";
 const hasAnimatedBefore = ref<boolean>(false);
 try {
-    hasAnimatedBefore.value = sessionStorage.getItem(HOME_ANIM_KEY) === '1';
+    hasAnimatedBefore.value = sessionStorage.getItem(HOME_ANIM_KEY) === "1";
 } catch (e) {
-    console.error('Failed to read sessionStorage:', e);
+    console.error("Failed to read sessionStorage:", e);
     hasAnimatedBefore.value = false;
 }
 if (hasAnimatedBefore.value) {
@@ -81,29 +103,29 @@ if (hasAnimatedBefore.value) {
 
 const playClientSlideAnim = ref(!hasAnimatedBefore.value);
 
-const STAGGER_KEY = 'staggerCardsPlayed';
+const STAGGER_KEY = "staggerCardsPlayed";
 const hasStaggerPlayed = ref<boolean>(false);
 try {
-    hasStaggerPlayed.value = sessionStorage.getItem(STAGGER_KEY) === '1';
+    hasStaggerPlayed.value = sessionStorage.getItem(STAGGER_KEY) === "1";
 } catch (e) {
-    console.error('Failed to read sessionStorage:', e);
+    console.error("Failed to read sessionStorage:", e);
     hasStaggerPlayed.value = false;
 }
 
 const accounts = ref<Account[]>([]);
-const selectedAccountId = ref<string>('');
-const searchQuery = ref('');
+const selectedAccountId = ref<string>("");
+const searchQuery = ref("");
 let searchDebounceTimer: number | null = null;
-const debouncedSearchQuery = ref('');
-const ACTIVE_FILTERS_KEY = 'homeActiveFilters';
-const CLIENT_SORT_KEY = 'homeClientSortKey';
-const CLIENT_SORT_ORDER_KEY = 'homeClientSortOrder';
+const debouncedSearchQuery = ref("");
+const ACTIVE_FILTERS_KEY = "homeActiveFilters";
+const CLIENT_SORT_KEY = "homeClientSortKey";
+const CLIENT_SORT_ORDER_KEY = "homeClientSortOrder";
 
 let initialFilters: Filters = {
     fabric: false,
     vanilla: false,
     forge: false,
-    installed: false
+    installed: false,
 };
 
 try {
@@ -112,73 +134,75 @@ try {
         initialFilters = JSON.parse(stored);
     }
 } catch (e) {
-    console.error('Failed to read active filters from localStorage:', e);
+    console.error("Failed to read active filters from localStorage:", e);
 }
 
 const activeFilters = ref<Filters>(initialFilters);
 const debouncedActiveFilters = ref<Filters>({ ...initialFilters });
 let filterDebounceTimer: number | null = null;
 
-let initialSortKey: 'popularity' | 'name' | 'newest' | 'version' | 'rating' = 'popularity';
+let initialSortKey: "popularity" | "name" | "newest" | "version" | "rating" =
+    "popularity";
 
 try {
     const stored = localStorage.getItem(CLIENT_SORT_KEY);
     if (stored) initialSortKey = stored as any;
 } catch (e) {
-    console.error('Failed to read client sort key from localStorage:', e);
+    console.error("Failed to read client sort key from localStorage:", e);
 }
 
-const clientSortKey = ref<'popularity' | 'name' | 'newest' | 'version' | 'rating'>(initialSortKey);
+const clientSortKey = ref<
+    "popularity" | "name" | "newest" | "version" | "rating"
+>(initialSortKey);
 
-let initialSortOrder: 'asc' | 'desc' = 'desc';
+let initialSortOrder: "asc" | "desc" = "desc";
 try {
     const stored = localStorage.getItem(CLIENT_SORT_ORDER_KEY);
     if (stored) initialSortOrder = stored as any;
 } catch (e) {
-    console.error('Failed to read client sort order from localStorage:', e);
+    console.error("Failed to read client sort order from localStorage:", e);
 }
-const clientSortOrder = ref<'asc' | 'desc'>(initialSortOrder);
+const clientSortOrder = ref<"asc" | "desc">(initialSortOrder);
 
 const clearAllFilters = () => {
-    searchQuery.value = '';
-    debouncedSearchQuery.value = '';
+    searchQuery.value = "";
+    debouncedSearchQuery.value = "";
     activeFilters.value = {
         fabric: false,
         vanilla: false,
         forge: false,
-        installed: false
+        installed: false,
     };
-    clientSortKey.value = 'popularity';
-    clientSortOrder.value = 'desc';
+    clientSortKey.value = "popularity";
+    clientSortOrder.value = "desc";
 };
 
 watch(
-  activeFilters,
-  (val) => {
-      try {
-          localStorage.setItem(ACTIVE_FILTERS_KEY, JSON.stringify(val));
-      } catch (e) {
-          console.error('Failed to save active filters to localStorage:', e);
-      }
-
-      // Debounce filter updates for performance
-      if (filterDebounceTimer !== null) {
-          clearTimeout(filterDebounceTimer);
-      }
-
-      filterDebounceTimer = window.setTimeout(() => {
-          debouncedActiveFilters.value = { ...val };
-          filterDebounceTimer = null;
-      }, 200);
-  },
-  { deep: true, flush: 'post' }
+    activeFilters,
+    (val) => {
+        try {
+            localStorage.setItem(ACTIVE_FILTERS_KEY, JSON.stringify(val));
+        } catch (e) {
+            console.error("Failed to save active filters to localStorage:", e);
+        }
+
+        if (filterDebounceTimer !== null) {
+            clearTimeout(filterDebounceTimer);
+        }
+
+        filterDebounceTimer = window.setTimeout(() => {
+            debouncedActiveFilters.value = { ...val };
+            filterDebounceTimer = null;
+        }, 200);
+    },
+    { deep: true, flush: "post" }
 );
 
 watch(clientSortKey, (val) => {
     try {
         localStorage.setItem(CLIENT_SORT_KEY, val);
     } catch (e) {
-        console.error('Failed to save client sort key to localStorage:', e);
+        console.error("Failed to save client sort key to localStorage:", e);
     }
 });
 
@@ -186,7 +210,7 @@ watch(clientSortOrder, (val) => {
     try {
         localStorage.setItem(CLIENT_SORT_ORDER_KEY, val);
     } catch (e) {
-        console.error('Failed to save client sort order to localStorage:', e);
+        console.error("Failed to save client sort order to localStorage:", e);
     }
 });
 
@@ -199,17 +223,23 @@ const hashVerifyingClients = ref<Set<number>>(new Set());
 const progressTargets = ref<Map<string, number>>(new Map());
 const progressAnimHandles = ref<Map<string, number>>(new Map());
 let lastProgressUpdate = 0;
-const PROGRESS_THROTTLE = 100; // Update at most every 100ms
+const PROGRESS_THROTTLE = 100;
 
 const easeOutQuad = (t: number) => 1 - (1 - t) * (1 - t);
 
-const smoothUpdateProgress = (file: string, targetPercentage: number, action: string) => {
+const smoothUpdateProgress = (
+    file: string,
+    targetPercentage: number,
+    action: string
+) => {
     const current = installationStatus.value.get(file)?.percentage ?? 0;
-    const safeTarget = Math.max(current, Math.min(100, Math.floor(targetPercentage)));
+    const safeTarget = Math.max(
+        current,
+        Math.min(100, Math.floor(targetPercentage))
+    );
 
     progressTargets.value.set(file, safeTarget);
 
-    // Throttle updates
     const now = performance.now();
     if (now - lastProgressUpdate < PROGRESS_THROTTLE && safeTarget < 100) {
         return;
@@ -244,7 +274,11 @@ const smoothUpdateProgress = (file: string, targetPercentage: number, action: st
             progressAnimHandles.value.delete(file);
             window.setTimeout(() => {
                 if ((progressTargets.value.get(file) ?? target) > value) {
-                    smoothUpdateProgress(file, progressTargets.value.get(file) ?? target, action);
+                    smoothUpdateProgress(
+                        file,
+                        progressTargets.value.get(file) ?? target,
+                        action
+                    );
                 }
             }, 10);
             return;
@@ -264,7 +298,7 @@ const contextMenu = ref({
     y: 0,
     client: null as Client | null,
     isAnimating: false,
-    animationClass: '',
+    animationClass: "",
     showAccountsDropdown: false,
 });
 
@@ -321,14 +355,14 @@ const handleLaunchCustomClient = async (client: Client) => {
             return;
         }
 
-        const userToken = localStorage.getItem('authToken') || 'null';
-        addToast(t('home.launching', { client: client.name }), 'info', 2000);
+        const userToken = localStorage.getItem("authToken") || "null";
+        addToast(t("home.launching", { client: client.name }), "info", 2000);
 
         if (!runningClients.value.includes(client.id)) {
             runningClients.value = [...runningClients.value, client.id];
         }
 
-        await invoke('launch_custom_client', {
+        await invoke("launch_custom_client", {
             id: client.id,
             userToken,
         });
@@ -336,8 +370,10 @@ const handleLaunchCustomClient = async (client: Client) => {
         await new Promise((resolve) => setTimeout(resolve, 500));
         await checkRunningStatus();
     } catch (err) {
-        runningClients.value = runningClients.value.filter((i) => i !== client.id);
-        addToast(`Failed to launch ${client.name}: ${err}`, 'error');
+        runningClients.value = runningClients.value.filter(
+            (i) => i !== client.id
+        );
+        addToast(`Failed to launch ${client.name}: ${err}`, "error");
     }
 };
 
@@ -354,9 +390,16 @@ const handleSearch = (query: string) => {
     }, 150);
 };
 
+const getFileBasename = (filename: string): string => {
+    const idx = filename.lastIndexOf("/");
+    return idx >= 0 ? filename.substring(idx + 1) : filename;
+};
+
 const isAnyClientDownloading = computed(() => {
     if (installationStatus.value.size === 0) return false;
-    const filenames = new Set(clients.value.map(c => c.filename));
+    const filenames = new Set(
+        clients.value.map((c) => getFileBasename(c.filename))
+    );
 
     for (const [filename, status] of installationStatus.value.entries()) {
         if (!status.isComplete && filenames.has(filename)) {
@@ -367,12 +410,12 @@ const isAnyClientDownloading = computed(() => {
 });
 
 const customClientsAsClients = computed(() => {
-    return customClients.value.map(customClient => ({
+    return customClients.value.map((customClient) => ({
         id: customClient.id,
         name: customClient.name,
-        version: customClient.version.replace(/^V1_/, '1.').replace(/_/g, '.'),
+        version: customClient.version.replace(/^V1_/, "1.").replace(/_/g, "."),
         filename: customClient.filename,
-        md5_hash: '',
+        md5_hash: "",
         main_class: customClient.main_class,
         show: true,
         working: true,
@@ -382,38 +425,37 @@ const customClientsAsClients = computed(() => {
         size: 0,
         meta: {
             is_new: false,
-            asset_index: '',
+            asset_index: "",
             installed: customClient.is_installed,
             is_custom: true,
-            size: '0',
+            size: "0",
         },
     }));
 });
 
 const allClients = computed<Client[]>(() => {
-    if (customClientsDisplayMode.value === 'global') {
+    if (customClientsDisplayMode.value === "global") {
         return [...customClientsAsClients.value, ...clients.value];
     }
     return clients.value;
 });
 
-// Memoize version parser
 const parseVersion = (v: string): number[] => {
     if (!v) return [];
-    return v.split(/[^0-9]+/).map(s => parseInt(s, 10) || 0);
+    return v.split(/[^0-9]+/).map((s) => parseInt(s, 10) || 0);
 };
 
-// Split filtering and sorting into separate computeds for better caching
 const baseFilteredClients = computed(() => {
     if (allClients.value.length === 0) {
         return [];
     }
 
     const query = debouncedSearchQuery.value.trim();
-    const queryLower = query ? query.toLowerCase() : '';
+    const queryLower = query ? query.toLowerCase() : "";
     const filters = debouncedActiveFilters.value;
 
-    const hasActiveFilters = filters.fabric || filters.vanilla || filters.forge || filters.installed;
+    const hasActiveFilters =
+        filters.fabric || filters.vanilla || filters.forge || filters.installed;
 
     if (!queryLower && !hasActiveFilters) {
         return allClients.value;
@@ -422,28 +464,41 @@ const baseFilteredClients = computed(() => {
     return allClients.value.filter((client) => {
         if (queryLower) {
             const nameMatch = client.name.toLowerCase().includes(queryLower);
-            const versionMatch = client.version.toLowerCase().includes(queryLower);
+            const versionMatch = client.version
+                .toLowerCase()
+                .includes(queryLower);
             if (!nameMatch && !versionMatch) return false;
         }
 
         if (hasActiveFilters) {
-            if (filters.installed && !(client.meta?.installed)) {
+            if (filters.installed && !client.meta?.installed) {
                 return false;
             }
 
             if (filters.fabric || filters.vanilla || filters.forge) {
-                const clientTypeRaw = (client as any).client_type || client.meta?.client_type || '';
+                const clientTypeRaw =
+                    (client as any).client_type ||
+                    client.meta?.client_type ||
+                    "";
                 const clientType = String(clientTypeRaw).toLowerCase();
-                const tags = Array.isArray(client.meta?.tags) ? client.meta.tags : [];
-
-                const isFabric = clientType === 'fabric' || tags.some((t: string) => t.toLowerCase().includes('fabric'));
-                const isForge = clientType === 'forge' || tags.some((t: string) => t.toLowerCase().includes('forge'));
+                const tags = Array.isArray(client.meta?.tags)
+                    ? client.meta.tags
+                    : [];
+
+                const isFabric =
+                    clientType === "fabric" ||
+                    tags.some((t: string) =>
+                        t.toLowerCase().includes("fabric")
+                    );
+                const isForge =
+                    clientType === "forge" ||
+                    tags.some((t: string) => t.toLowerCase().includes("forge"));
                 const isVanilla = !isFabric && !isForge;
 
                 const allowedByType =
-                  (isFabric && filters.fabric) ||
-                  (isForge && filters.forge) ||
-                  (isVanilla && filters.vanilla);
+                    (isFabric && filters.fabric) ||
+                    (isForge && filters.forge) ||
+                    (isVanilla && filters.vanilla);
 
                 if (!allowedByType) return false;
             }
@@ -462,16 +517,16 @@ const sortedClients = computed(() => {
 
     const sortKey = clientSortKey.value;
     const sortOrder = clientSortOrder.value;
-    const sortMultiplier = sortOrder === 'desc' ? -1 : 1;
+    const sortMultiplier = sortOrder === "desc" ? -1 : 1;
 
     const sorted = [...clientsList];
 
-    if (sortKey === 'newest') {
+    if (sortKey === "newest") {
         sorted.sort((a, b) => (a.id - b.id) * sortMultiplier);
-    } else if (sortKey === 'version') {
+    } else if (sortKey === "version") {
         sorted.sort((a, b) => {
-            const av = parseVersion(a.version || '');
-            const bv = parseVersion(b.version || '');
+            const av = parseVersion(a.version || "");
+            const bv = parseVersion(b.version || "");
             const len = Math.max(av.length, bv.length);
 
             for (let i = 0; i < len; i++) {
@@ -484,7 +539,7 @@ const sortedClients = computed(() => {
 
             return b.name.localeCompare(a.name) * sortMultiplier;
         });
-    } else if (sortKey === 'rating') {
+    } else if (sortKey === "rating") {
         sorted.sort((a, b) => {
             const aAvg = (a.rating_avg ?? 0) as number;
             const bAvg = (b.rating_avg ?? 0) as number;
@@ -501,7 +556,7 @@ const sortedClients = computed(() => {
 
             return b.name.localeCompare(a.name) * sortMultiplier;
         });
-    } else if (sortKey === 'popularity') {
+    } else if (sortKey === "popularity") {
         sorted.sort((a, b) => {
             const av = a.launches ?? 0;
             const bv = b.launches ?? 0;
@@ -511,9 +566,7 @@ const sortedClients = computed(() => {
             return b.name.localeCompare(a.name) * sortMultiplier;
         });
     } else {
-        sorted.sort((a, b) =>
-          b.name.localeCompare(a.name) * sortMultiplier
-        );
+        sorted.sort((a, b) => b.name.localeCompare(a.name) * sortMultiplier);
     }
 
     return sorted;
@@ -543,9 +596,9 @@ const filteredClients = computed(() => {
 
 const loadFavorites = async () => {
     try {
-        favoriteClients.value = await invoke<number[]>('get_favorite_clients');
+        favoriteClients.value = await invoke<number[]>("get_favorite_clients");
     } catch (err) {
-        console.error('Error loading favorites:', err);
+        console.error("Error loading favorites:", err);
         favoriteClients.value = [];
     }
 };
@@ -555,25 +608,25 @@ const toggleFavorite = async (client: Client) => {
         const isFavorite = favoriteClients.value.includes(client.id);
 
         if (isFavorite) {
-            await invoke('remove_favorite_client', { clientId: client.id });
+            await invoke("remove_favorite_client", { clientId: client.id });
             favoriteClients.value = favoriteClients.value.filter(
-              (id) => id !== client.id
+                (id) => id !== client.id
             );
-            addToast(t('home.favorite_removed'), 'info');
+            addToast(t("home.favorite_removed"), "info");
         } else {
-            await invoke('add_favorite_client', { clientId: client.id });
+            await invoke("add_favorite_client", { clientId: client.id });
             favoriteClients.value = [...favoriteClients.value, client.id];
-            addToast(t('home.favorite_added'), 'success');
+            addToast(t("home.favorite_added"), "success");
         }
 
-        syncService.uploadToCloud().catch(err => {
-            console.warn('Failed to sync favorites to cloud:', err);
+        syncService.uploadToCloud().catch((err) => {
+            console.warn("Failed to sync favorites to cloud:", err);
         });
 
         hideContextMenu();
     } catch (err) {
-        console.error('Error toggling favorite:', err);
-        addToast(`Error updating favorite: ${err}`, 'error');
+        console.error("Error toggling favorite:", err);
+        addToast(`Error updating favorite: ${err}`, "error");
     }
 };
 
@@ -588,10 +641,10 @@ const prepareForUnmount = () => {
 
 const loadAccounts = async () => {
     try {
-        accounts.value = await invoke<Account[]>('get_accounts');
+        accounts.value = await invoke<Account[]>("get_accounts");
 
         const activeAccount = accounts.value.find(
-          (account) => account.is_active
+            (account) => account.is_active
         );
         if (activeAccount) {
             selectedAccountId.value = activeAccount.id;
@@ -599,30 +652,40 @@ const loadAccounts = async () => {
             selectedAccountId.value = accounts.value[0].id;
         }
     } catch (err) {
-        console.error('Error loading accounts:', err);
-        addToast(t('errors.load_accounts_error', { error: err }), 'error');
+        console.error("Error loading accounts:", err);
+        addToast(t("errors.load_accounts_error", { error: err }), "error");
     }
 };
 
 const getClients = async () => {
     try {
-        error.value = '';
+        error.value = "";
         clientsLoaded.value = false;
-        const response = await invoke<Client[]>('get_clients');
+        const response = await invoke<Client[]>("get_clients");
         if (response && response.length > 0) {
             clients.value = response;
         } else {
             clients.value = [];
             if (response !== null && response.length === 0) {
-                console.log("No clients available from backend, current list: " + response);
-                error.value = t('errors.clients_load_failed');
-                addToast(t('errors.clients_unavailable'), 'error');
+                console.log(
+                    "No clients available from backend, current list: " +
+                        response
+                );
+                error.value = t("errors.clients_load_failed", {
+                    error: "No clients available",
+                });
+                addToast(
+                    t("errors.clients_load_failed", {
+                        error: "No clients available",
+                    }),
+                    "error"
+                );
             }
         }
     } catch (err) {
-        console.error('Error fetching clients:', err);
-        error.value = t('errors.clients_load_failed');
-        addToast(t('errors.clients_load_failed'), 'error');
+        console.error("Error fetching clients:", err);
+        error.value = t("errors.clients_load_failed", { error: err });
+        addToast(t("errors.clients_load_failed", { error: err }), "error");
         clients.value = [];
     } finally {
         clientsLoaded.value = true;
@@ -635,13 +698,16 @@ const downloadClient = async (id: number) => {
         if (client) {
             if (props.isOnline) {
                 addToast(
-                  t('home.starting_download', { name: client.name }),
-                  'info'
+                    t("home.starting_download", { name: client.name }),
+                    "info"
                 );
-                await invoke('increment_client_counter', { id, counterType: 'download' });
+                await invoke("increment_client_counter", {
+                    id,
+                    counterType: "download",
+                });
                 await getClients();
 
-                await invoke('download_client_only', { id });
+                await invoke("download_client_only", { id });
 
                 await new Promise((resolve) => setTimeout(resolve, 1000));
                 await getClients();
@@ -652,34 +718,33 @@ const downloadClient = async (id: number) => {
                         await getClients();
                     }, 2000);
                 }
-
             } else {
-                addToast(t('home.no_internet'), 'error');
+                addToast(t("home.no_internet"), "error");
             }
         }
     } catch (err) {
-        console.error('Error downloading client:', err);
+        console.error("Error downloading client:", err);
         let errorMessage = String(err);
 
         if (
-          errorMessage.includes('Hash verification failed') ||
-          errorMessage.includes('corrupted')
+            errorMessage.includes("Hash verification failed") ||
+            errorMessage.includes("corrupted")
         ) {
-            errorMessage = t('errors.hash_verification_failed', {
-                name: clients.value.find((c) => c.id === id)?.name || 'Client'
+            errorMessage = t("errors.hash_verification_failed", {
+                name: clients.value.find((c) => c.id === id)?.name || "Client",
             });
         } else if (
-          errorMessage.includes('Network read error') ||
-          errorMessage.includes('error decoding response body')
+            errorMessage.includes("Network read error") ||
+            errorMessage.includes("error decoding response body")
         ) {
-            errorMessage = t('errors.download_network_error', { error: err });
-        } else if (errorMessage.includes('timeout')) {
-            errorMessage = t('errors.download_timeout_error', { error: err });
-        } else if (errorMessage.includes('Failed to create file')) {
-            errorMessage = t('errors.download_disk_error', { error: err });
+            errorMessage = t("errors.download_network_error", { error: err });
+        } else if (errorMessage.includes("timeout")) {
+            errorMessage = t("errors.download_timeout_error", { error: err });
+        } else if (errorMessage.includes("Failed to create file")) {
+            errorMessage = t("errors.download_disk_error", { error: err });
         }
 
-        addToast(errorMessage, 'error');
+        addToast(errorMessage, "error");
 
         hashVerifyingClients.value.delete(id);
         await getClients();
@@ -690,27 +755,27 @@ const launchClient = async (id: number) => {
     try {
         const client = clients.value.find((c) => c.id === id);
         if (client && !client.meta.installed) {
-            addToast(t('home.not_installed', { name: client.name }), 'error');
+            addToast(t("home.not_installed", { name: client.name }), "error");
             return;
         }
 
         addToast(
-          t('home.launching', { client: client?.name || 'Client' }),
-          'info',
-          2000
+            t("home.launching", { client: client?.name || "Client" }),
+            "info",
+            2000
         );
 
-        const userToken = localStorage.getItem('authToken') || 'null';
+        const userToken = localStorage.getItem("authToken") || "null";
 
         if (!runningClients.value.includes(id)) {
             runningClients.value = [...runningClients.value, id];
         }
 
-        await invoke('increment_client_counter', { id, counterType: 'launch' });
+        await invoke("increment_client_counter", { id, counterType: "launch" });
         await getClients();
 
         try {
-            await invoke('launch_client', { id, userToken });
+            await invoke("launch_client", { id, userToken });
         } catch (invokeErr) {
             runningClients.value = runningClients.value.filter((i) => i !== id);
             throw invokeErr;
@@ -719,17 +784,17 @@ const launchClient = async (id: number) => {
         await new Promise((resolve) => setTimeout(resolve, 500));
         await checkRunningStatus();
     } catch (err) {
-        console.error('Error launching client:', err);
+        console.error("Error launching client:", err);
         hashVerifyingClients.value.delete(id);
 
         let errorMessage = String(err);
-        if (errorMessage.includes('Hash verification failed')) {
-            errorMessage = t('errors.hash_verification_launch_failed', {
-                name: clients.value.find((c) => c.id === id)?.name || 'Client'
+        if (errorMessage.includes("Hash verification failed")) {
+            errorMessage = t("errors.hash_verification_launch_failed", {
+                name: clients.value.find((c) => c.id === id)?.name || "Client",
             });
         }
 
-        addToast(errorMessage, 'error');
+        addToast(errorMessage, "error");
     }
 };
 
@@ -737,31 +802,31 @@ const stopClient = async (id: number) => {
     try {
         const client = clients.value.find((c) => c.id === id);
         if (client) {
-            addToast(t('home.stopping', { name: client.name }), 'info', 2000);
+            addToast(t("home.stopping", { name: client.name }), "info", 2000);
         }
-        await invoke('stop_client', { id });
+        await invoke("stop_client", { id });
 
         await new Promise((resolve) => setTimeout(resolve, 1000));
         await checkRunningStatus();
     } catch (err) {
-        console.error('Error stopping client:', err);
-        addToast(t('errors.stop_error', { error: err }), 'error');
+        console.error("Error stopping client:", err);
+        addToast(t("errors.stop_error", { error: err }), "error");
     }
 };
 
 const stopCustomClient = async (id: number) => {
     try {
-        const client = customClients.value.find(c => c.id === id);
+        const client = customClients.value.find((c) => c.id === id);
         if (client) {
-            addToast(t('home.stopping', { client: client.name }), 'info', 2000);
+            addToast(t("home.stopping", { client: client.name }), "info", 2000);
         }
-        await invoke('stop_custom_client', { id });
+        await invoke("stop_custom_client", { id });
 
         await new Promise((resolve) => setTimeout(resolve, 1000));
         await checkRunningStatus();
     } catch (err) {
-        console.error('Error stopping custom client:', err);
-        addToast(`Error stopping client: ${err}`, 'error');
+        console.error("Error stopping custom client:", err);
+        addToast(`Error stopping client: ${err}`, "error");
     }
 };
 
@@ -770,29 +835,38 @@ const checkRunningStatus = async () => {
     if (skipNextRunningCheck.value.size > 0) {
         const idsToKeep = Array.from(skipNextRunningCheck.value);
         if (idsToKeep.length > 0) {
-            runningClients.value = Array.from(new Set([...runningClients.value, ...idsToKeep]));
+            runningClients.value = Array.from(
+                new Set([...runningClients.value, ...idsToKeep])
+            );
         }
         skipNextRunningCheck.value.clear();
         return;
     }
     try {
-        const response = await invoke<number[]>('get_running_client_ids');
+        const response = await invoke<number[]>("get_running_client_ids");
         let currentRunning: number[] = response || [];
 
-        if (customClientsDisplayMode.value === 'global') {
+        if (customClientsDisplayMode.value === "global") {
             try {
-                const customResponse = await invoke<number[]>('get_running_custom_client_ids');
+                const customResponse = await invoke<number[]>(
+                    "get_running_custom_client_ids"
+                );
                 if (Array.isArray(customResponse)) {
-                    currentRunning = Array.from(new Set([...currentRunning, ...customResponse]));
+                    currentRunning = Array.from(
+                        new Set([...currentRunning, ...customResponse])
+                    );
                 }
             } catch (err) {
-                console.error('Error checking custom client running status:', err);
+                console.error(
+                    "Error checking custom client running status:",
+                    err
+                );
             }
         }
 
         runningClients.value = currentRunning;
     } catch (err) {
-        console.error('Error checking running status:', err);
+        console.error("Error checking running status:", err);
     }
 };
 
@@ -802,227 +876,255 @@ const isClientRunning = (id: number): boolean => {
 
 const openLogViewer = (client: Client) => {
     showModal(
-      `log-viewer-${client.id}`,
-      LogViewerModal,
-      {
-          title: t('logs.title', { client: client.name }),
-          contentClass: 'wide',
-      },
-      {
-          clientId: client.id,
-          clientName: client.name,
-      },
-      {
-          close: () => hideModal(`log-viewer-${client.id}`),
-      }
+        `log-viewer-${client.id}`,
+        LogViewerModal,
+        {
+            title: t("logs.title", { client: client.name }),
+            contentClass: "wide",
+        },
+        {
+            clientId: client.id,
+            clientName: client.name,
+        },
+        {
+            close: () => hideModal(`log-viewer-${client.id}`),
+        }
     );
 };
 
 const showInsecureClientWarning = (client: Client) => {
     showModal(
-      `insecure-warning-${client.id}`,
-      InsecureClientWarningModal,
-      {
-          title: t('modals.insecure_client_warning.modal_title'),
-      },
-      { client },
-      {
-          proceed: (data: { client: Client; dontShowAgain: boolean }) => {
-              if (data.dontShowAgain) {
-                  warnedInsecureClients.value.add(data.client.id);
-                  saveWarnedInsecureClients();
-              }
-              hideModal(`insecure-warning-${data.client.id}`);
-              launchClient(data.client.id);
-          },
-          cancel: () => {
-              hideModal(`insecure-warning-${client.id}`);
-          },
-          close: () => hideModal(`insecure-warning-${client.id}`),
-      }
+        `insecure-warning-${client.id}`,
+        InsecureClientWarningModal,
+        {
+            title: t("modals.insecure_client_warning.modal_title"),
+        },
+        { client },
+        {
+            proceed: (data: { client: Client; dontShowAgain: boolean }) => {
+                if (data.dontShowAgain) {
+                    warnedInsecureClients.value.add(data.client.id);
+                    saveWarnedInsecureClients();
+                }
+                hideModal(`insecure-warning-${data.client.id}`);
+                launchClient(data.client.id);
+            },
+            cancel: () => {
+                hideModal(`insecure-warning-${client.id}`);
+            },
+            close: () => hideModal(`insecure-warning-${client.id}`),
+        }
     );
 };
 
 const setupEventListeners = async () => {
     eventListeners.value.push(
-      await listen('download-start', (event: any) => {
-          const filename = event.payload as string;
-          installationStatus.value.set(filename, {
-              percentage: 0,
-              action: t('installation.downloading'),
-              isComplete: false,
-          });
-      })
+        await listen("download-start", (event: any) => {
+            const filename = event.payload as string;
+            installationStatus.value.set(filename, {
+                percentage: 0,
+                action: t("installation.downloading"),
+                isComplete: false,
+            });
+        })
     );
 
     eventListeners.value.push(
-      await listen('download-progress', (event: any) => {
-          const data = event.payload as { file: string; percentage: number };
-          smoothUpdateProgress(data.file, data.percentage, t('installation.downloading'));
-          updateClientInstallStatus(data.file);
-      })
+        await listen("download-progress", (event: any) => {
+            const data = event.payload as { file: string; percentage: number };
+            smoothUpdateProgress(
+                data.file,
+                data.percentage,
+                t("installation.downloading")
+            );
+            updateClientInstallStatus(data.file);
+        })
     );
 
     eventListeners.value.push(
-      await listen('download-complete', (event: any) => {
-          const filename = event.payload as string;
-          const handle = progressAnimHandles.value.get(filename);
-          if (handle != null) {
-              window.cancelAnimationFrame(handle);
-              progressAnimHandles.value.delete(filename);
-          }
-          progressTargets.value.delete(filename);
-          installationStatus.value.set(filename, {
-              percentage: 100,
-              action: t('installation.download_complete'),
-              isComplete: true,
-          });
-
-          if (!filename.endsWith('.zip')) {
-              markClientAsInstalled(filename);
-          }
-      })
+        await listen("download-complete", (event: any) => {
+            const filename = event.payload as string;
+            const handle = progressAnimHandles.value.get(filename);
+            if (handle != null) {
+                window.cancelAnimationFrame(handle);
+                progressAnimHandles.value.delete(filename);
+            }
+            progressTargets.value.delete(filename);
+            installationStatus.value.set(filename, {
+                percentage: 100,
+                action: t("installation.download_complete"),
+                isComplete: true,
+            });
+
+            if (!filename.endsWith(".zip")) {
+                markClientAsInstalled(filename);
+            }
+        })
     );
 
     eventListeners.value.push(
-      await listen('unzip-start', (event: any) => {
-          const filename = event.payload as string;
-          installationStatus.value.set(filename, {
-              percentage: 0,
-              action: t('installation.extracting'),
-              isComplete: false,
-          });
-      })
+        await listen("unzip-start", (event: any) => {
+            const filename = event.payload as string;
+            installationStatus.value.set(filename, {
+                percentage: 0,
+                action: t("installation.extracting"),
+                isComplete: false,
+            });
+        })
     );
 
     eventListeners.value.push(
-      await listen('unzip-progress', (event: any) => {
-          const data = event.payload as {
-              file: string;
-              percentage: number;
-              action: string;
-          };
-          smoothUpdateProgress(data.file, data.percentage, t('installation.extracting'));
-          updateClientInstallStatus(data.file);
-      })
+        await listen("unzip-progress", (event: any) => {
+            const data = event.payload as {
+                file: string;
+                percentage: number;
+                action: string;
+            };
+            smoothUpdateProgress(
+                data.file,
+                data.percentage,
+                t("installation.extracting")
+            );
+            updateClientInstallStatus(data.file);
+        })
     );
 
     eventListeners.value.push(
-      await listen('unzip-complete', (event: any) => {
-          const filename = event.payload as string;
-          const handle = progressAnimHandles.value.get(filename);
-          if (handle != null) {
-              window.cancelAnimationFrame(handle);
-              progressAnimHandles.value.delete(filename);
-          }
-          progressTargets.value.delete(filename);
-          installationStatus.value.set(filename, {
-              percentage: 100,
-              action: t('installation.installation_complete'),
-              isComplete: true,
-          });
-
-          markClientAsInstalled(filename);
-      })
+        await listen("unzip-complete", (event: any) => {
+            const filename = event.payload as string;
+            const handle = progressAnimHandles.value.get(filename);
+            if (handle != null) {
+                window.cancelAnimationFrame(handle);
+                progressAnimHandles.value.delete(filename);
+            }
+            progressTargets.value.delete(filename);
+            installationStatus.value.set(filename, {
+                percentage: 100,
+                action: t("installation.installation_complete"),
+                isComplete: true,
+            });
+
+            markClientAsInstalled(filename);
+        })
     );
 
     eventListeners.value.push(
-      await listen('requirements-status', (event: any) => {
-          requirementsInProgress.value = event.payload as boolean;
-      })
+        await listen("requirements-status", (event: any) => {
+            requirementsInProgress.value = event.payload as boolean;
+        })
     );
 
     eventListeners.value.push(
-      await listen('client-needs-reinstall', async (event: any) => {
-          const payload = event.payload as { id: number; name: string };
-          addToast(
-            t('toast.client.crashed_incomplete', { name: payload.name }),
-            'warning',
-            7000
-          );
-
-          try {
-              await invoke('reinstall_client', { id: payload.id });
-              addToast(
-                t('toast.client.reinstall_success', { name: payload.name }),
-                'success'
-              );
-              await getClients();
-          } catch (reinstallError) {
-              addToast(
-                t('toast.client.reinstall_failed', {
-                    name: payload.name,
-                    error: reinstallError,
-                }),
-                'error'
-              );
-          }
-      })
+        await listen("client-needs-reinstall", async (event: any) => {
+            const payload = event.payload as { id: number; name: string };
+            addToast(
+                t("toast.client.crashed_incomplete", { name: payload.name }),
+                "warning",
+                7000
+            );
+
+            try {
+                await invoke("reinstall_client", { id: payload.id });
+                addToast(
+                    t("toast.client.reinstall_success", { name: payload.name }),
+                    "success"
+                );
+                await getClients();
+            } catch (reinstallError) {
+                addToast(
+                    t("toast.client.reinstall_failed", {
+                        name: payload.name,
+                        error: reinstallError,
+                    }),
+                    "error"
+                );
+            }
+        })
     );
 
-    const hashVerificationStartListener = await listen('client-hash-verification-start', (event: any) => {
-        const { id } = event.payload;
-        hashVerifyingClients.value.add(id);
-    });
+    const hashVerificationStartListener = await listen(
+        "client-hash-verification-start",
+        (event: any) => {
+            const { id } = event.payload;
+            hashVerifyingClients.value.add(id);
+        }
+    );
 
-    const hashVerificationDoneListener = await listen('client-hash-verification-done', (event: any) => {
-        const { id } = event.payload;
+    const hashVerificationDoneListener = await listen(
+        "client-hash-verification-done",
+        (event: any) => {
+            const { id } = event.payload;
 
-        hashVerifyingClients.value.delete(id);
-        setTimeout(async () => {
-            if (!runningClients.value.includes(id)) {
-                await checkRunningStatus();
-            }
-        }, 800);
-    });
+            hashVerifyingClients.value.delete(id);
+            setTimeout(async () => {
+                if (!runningClients.value.includes(id)) {
+                    await checkRunningStatus();
+                }
+            }, 800);
+        }
+    );
 
-    const hashVerificationFailedListener = await listen('client-hash-verification-failed', (event: any) => {
-        const { id } = event.payload;
-        hashVerifyingClients.value.add(id);
-    });
+    const hashVerificationFailedListener = await listen(
+        "client-hash-verification-failed",
+        (event: any) => {
+            const { id } = event.payload;
+            hashVerifyingClients.value.add(id);
+        }
+    );
 
-    const redownloadCompleteListener = await listen('client-redownload-complete', async (event: any) => {
-        const { id, name } = event.payload;
-        hashVerifyingClients.value.delete(id);
-        addToast(
-          t('toast.client.redownload_success', { name }),
-          'success'
-        );
+    const redownloadCompleteListener = await listen(
+        "client-redownload-complete",
+        async (event: any) => {
+            const { id, name } = event.payload;
+            hashVerifyingClients.value.delete(id);
+            addToast(t("toast.client.redownload_success", { name }), "success");
 
-        await getClients();
-    });
+            await getClients();
+        }
+    );
 
     eventListeners.value.push(hashVerificationStartListener);
     eventListeners.value.push(hashVerificationDoneListener);
     eventListeners.value.push(hashVerificationFailedListener);
     eventListeners.value.push(redownloadCompleteListener);
 
-    const clientLaunchedListener = await listen('client-launched', (event: any) => {
-        try {
-            const { id } = event.payload as { id: number };
-            skipNextRunningCheck.value.add(id);
-        } catch (e) {
-            console.error('Error handling client-launched event:', e);
+    const clientLaunchedListener = await listen(
+        "client-launched",
+        (event: any) => {
+            try {
+                const { id } = event.payload as { id: number };
+                skipNextRunningCheck.value.add(id);
+            } catch (e) {
+                console.error("Error handling client-launched event:", e);
+            }
         }
-    });
+    );
 
-    const customClientLaunchedListener = await listen('custom-client-launched', (event: any) => {
-        try {
-            const payload = event.payload as any;
-            if (payload && typeof payload.id === 'number') {
-                skipNextRunningCheck.value.add(payload.id);
+    const customClientLaunchedListener = await listen(
+        "custom-client-launched",
+        (event: any) => {
+            try {
+                const payload = event.payload as any;
+                if (payload && typeof payload.id === "number") {
+                    skipNextRunningCheck.value.add(payload.id);
+                }
+            } catch (e) {
+                console.error(
+                    "Error handling custom-client-launched event:",
+                    e
+                );
             }
-        } catch (e) {
-            console.error('Error handling custom-client-launched event:', e);
         }
-    });
+    );
 
     eventListeners.value.push(clientLaunchedListener);
     eventListeners.value.push(customClientLaunchedListener);
 };
 
 const updateClientInstallStatus = (filename: string) => {
-    const client = clients.value.find((c) => c.filename === filename);
+    const client = clients.value.find(
+        (c) => getFileBasename(c.filename) === filename
+    );
     if (client) {
         const status = installationStatus.value.get(filename);
         if (status && status.isComplete) {
@@ -1032,28 +1134,31 @@ const updateClientInstallStatus = (filename: string) => {
 };
 
 const markClientAsInstalled = async (filename: string) => {
-    const client = clients.value.find((c) => c.filename === filename);
+    const client = clients.value.find(
+        (c) => getFileBasename(c.filename) === filename
+    );
     if (client) {
         client.meta.installed = true;
 
         try {
-            await invoke('update_client_installed_status', {
+            await invoke("update_client_installed_status", {
                 id: client.id,
                 installed: true,
             });
         } catch (err) {
-            console.error('Failed to update client installation status:', err);
-            addToast(`Failed to update ${client.name} status: ${err}`, 'error');
+            console.error("Failed to update client installation status:", err);
+            addToast(`Failed to update ${client.name} status: ${err}`, "error");
         }
     }
 };
 
 const isClientInstalling = (client: Client): boolean => {
-    const status = installationStatus.value.get(client.filename);
+    const status = installationStatus.value.get(
+        getFileBasename(client.filename)
+    );
     return !!status && !status.isComplete;
 };
 
-
 const showContextMenu = (event: MouseEvent, client: Client) => {
     event.preventDefault();
 
@@ -1094,56 +1199,75 @@ const showContextMenu = (event: MouseEvent, client: Client) => {
         y: y,
         client: client,
         isAnimating: true,
-        animationClass: 'context-menu-open-animation',
+        animationClass: "context-menu-open-animation",
         showAccountsDropdown: false,
     };
 
     setTimeout(() => {
         contextMenu.value.isAnimating = false;
-        contextMenu.value.animationClass = '';
+        contextMenu.value.animationClass = "";
     }, 150);
 
-    document.addEventListener('click', hideContextMenu);
+    document.addEventListener("click", hideContextMenu);
+};
+
+const launchAnotherInstance = (client: Client) => {
+    if (client.meta.is_custom) {
+        handleLaunchCustomClient(client);
+    } else {
+        launchClient(client.id);
+    }
+    hideContextMenu();
 };
 
 const hideContextMenu = () => {
     if (!contextMenu.value.visible) return;
 
     contextMenu.value.isAnimating = true;
-    contextMenu.value.animationClass = 'context-menu-close-animation';
+    contextMenu.value.animationClass = "context-menu-close-animation";
     setTimeout(() => {
         contextMenu.value.visible = false;
         contextMenu.value.client = null;
         contextMenu.value.isAnimating = false;
-        contextMenu.value.animationClass = '';
+        contextMenu.value.animationClass = "";
         contextMenu.value.showAccountsDropdown = false;
-        document.removeEventListener('click', hideContextMenu);
+        document.removeEventListener("click", hideContextMenu);
     }, 150);
 };
 
 const openClientFolder = async (client: Client) => {
     try {
-        await invoke('open_client_folder', { id: client.id });
-        addToast(t('home.opened_folder', { name: client.name }), 'success');
+        await invoke("open_client_folder", { id: client.id });
+        addToast(t("home.opened_folder", { name: client.name }), "success");
     } catch (err) {
-        console.error('Error opening client folder:', err);
-        addToast(t('errors.folder_error', { error: err }), 'error');
+        console.error("Error opening client folder:", err);
+        addToast(t("errors.folder_error", { error: err }), "error");
     }
     hideContextMenu();
 };
 
+const openModsManager = (client: Client) => {
+    hideContextMenu();
+    showModal(
+        "mods-manager",
+        ModsManagerModal,
+        { title: t("mods.manager_title"), size: "lg" },
+        { client }
+    );
+};
+
 const reinstallClient = async (client: Client) => {
     try {
         if (props.isOnline) {
-            addToast(t('home.reinstalling', { name: client.name }), 'info');
-            await invoke('reinstall_client', { id: client.id });
+            addToast(t("home.reinstalling", { name: client.name }), "info");
+            await invoke("reinstall_client", { id: client.id });
             await getClients();
         } else {
-            addToast(t('home.no_internet_reinstall'), 'error');
+            addToast(t("home.no_internet_reinstall"), "error");
         }
     } catch (err) {
-        console.error('Error reinstalling client:', err);
-        addToast(t('errors.reinstall_error', { error: err }), 'error');
+        console.error("Error reinstalling client:", err);
+        addToast(t("errors.reinstall_error", { error: err }), "error");
     }
     hideContextMenu();
 };
@@ -1151,25 +1275,24 @@ const reinstallClient = async (client: Client) => {
 const copyClientLogs = async (client: Client) => {
     try {
         hideContextMenu();
-        const logs = await invoke<string>('get_latest_client_logs', {
+        const logs = await invoke<string>("get_latest_client_logs", {
             id: client.id,
         });
         await navigator.clipboard.writeText(logs);
-        addToast(t('home.logs_copied', { name: client.name }), 'success');
+        addToast(t("home.logs_copied", { name: client.name }), "success");
     } catch (err) {
-        console.error('Error copying client logs:', err);
-        addToast(t('errors.logs_error', { error: err }), 'error');
+        console.error("Error copying client logs:", err);
+        addToast(t("errors.logs_error", { error: err }), "error");
     }
 };
 
 const deleteClient = async (client: Client) => {
     try {
-        await invoke('delete_client', { id: client.id });
-        await getClients();
-        addToast(t('home.deleted_success', { name: client.name }), 'success');
+        await invoke("delete_client", { id: client.id });
+        addToast(t("home.deleted_success", { name: client.name }), "success");
     } catch (err) {
-        console.error('Error deleting client:', err);
-        addToast(t('errors.delete_error', { error: err }), 'error');
+        console.error("Error deleting client:", err);
+        addToast(t("errors.delete_error", { error: err }), "error");
     }
     hideContextMenu();
 };
@@ -1211,13 +1334,13 @@ const isClientSelected = (clientId: number): boolean => {
 
 const selectedClientsData = computed(() => {
     return clients.value.filter((client) =>
-      selectedClients.value.has(client.id)
+        selectedClients.value.has(client.id)
     );
 });
 
 const canDownloadSelected = computed(() => {
     return selectedClientsData.value.some(
-      (client) => !client.meta.installed && client.working
+        (client) => !client.meta.installed && client.working
     );
 });
 
@@ -1230,41 +1353,46 @@ const canDeleteSelected = computed(() => {
 });
 
 const canStopSelected = computed(() => {
-    return selectedClientsData.value.some((client: Client) => isClientRunning(client.id));
+    return selectedClientsData.value.some((client: Client) =>
+        isClientRunning(client.id)
+    );
 });
 
 const downloadMultipleClients = async () => {
     const selectedData = selectedClientsData.value;
     const validClients = selectedData.filter(
-      (client) => !client.meta.installed && client.working
+        (client) => !client.meta.installed && client.working
     );
 
     if (validClients.length === 0) {
-        addToast(t('home.no_clients_to_download'), 'warning');
+        addToast(t("home.no_clients_to_download"), "warning");
         hideContextMenu();
         return;
     }
 
     if (!props.isOnline) {
-        addToast(t('home.no_internet'), 'error');
+        addToast(t("home.no_internet"), "error");
         hideContextMenu();
         return;
     }
 
     addToast(
-      t('home.downloading_multiple', { count: validClients.length }),
-      'info'
+        t("home.downloading_multiple", { count: validClients.length }),
+        "info"
     );
 
     const downloadPromises = validClients.map(async (client) => {
         try {
-            await invoke('increment_client_counter', { id: client.id, counterType: 'download' });
-            await invoke('download_client_only', { id: client.id });
+            await invoke("increment_client_counter", {
+                id: client.id,
+                counterType: "download",
+            });
+            await invoke("download_client_only", { id: client.id });
         } catch (err) {
             console.error(`Error downloading client ${client.name}:`, err);
             addToast(
-              t('errors.download_error', { error: `${client.name}: ${err}` }),
-              'error'
+                t("errors.download_error", { error: `${client.name}: ${err}` }),
+                "error"
             );
         }
     });
@@ -1277,8 +1405,8 @@ const downloadMultipleClients = async () => {
 
 const stopMultipleClients = async () => {
     const selectedData = selectedClientsData.value;
-    const runningClients = selectedData.filter(
-      (client) => isClientRunning(client.id)
+    const runningClients = selectedData.filter((client) =>
+        isClientRunning(client.id)
     );
 
     if (runningClients.length === 0) {
@@ -1287,8 +1415,8 @@ const stopMultipleClients = async () => {
     }
 
     addToast(
-      t('home.stopping_multiple', { count: runningClients.length }),
-      'info'
+        t("home.stopping_multiple", { count: runningClients.length }),
+        "info"
     );
 
     for (const client of runningClients) {
@@ -1298,16 +1426,16 @@ const stopMultipleClients = async () => {
         } catch (err) {
             console.error(`Error stopping client ${client.name}:`, err);
             addToast(
-              t('errors.stop_error', { error: `${client.name}: ${err}` }),
-              'error'
+                t("errors.stop_error", { error: `${client.name}: ${err}` }),
+                "error"
             );
         }
     }
 
     await checkRunningStatus();
     addToast(
-      t('home.multiple_clients_stopped', { count: runningClients.length }),
-      'success'
+        t("home.multiple_clients_stopped", { count: runningClients.length }),
+        "success"
     );
     hideContextMenu();
     clearSelection();
@@ -1316,37 +1444,37 @@ const stopMultipleClients = async () => {
 const deleteMultipleClients = async () => {
     const selectedData = selectedClientsData.value;
     const installedClients = selectedData.filter(
-      (client) => client.meta.installed
+        (client) => client.meta.installed
     );
 
     if (installedClients.length === 0) {
-        addToast(t('home.no_clients_to_delete'), 'warning');
+        addToast(t("home.no_clients_to_delete"), "warning");
         hideContextMenu();
         return;
     }
 
     addToast(
-      t('home.deleting_multiple', { count: installedClients.length }),
-      'info'
+        t("home.deleting_multiple", { count: installedClients.length }),
+        "info"
     );
 
     for (const client of installedClients) {
         try {
-            await invoke('delete_client', { id: client.id });
+            await invoke("delete_client", { id: client.id });
             await new Promise((resolve) => setTimeout(resolve, 100));
         } catch (err) {
             console.error(`Error deleting client ${client.name}:`, err);
             addToast(
-              t('errors.delete_error', { error: `${client.name}: ${err}` }),
-              'error'
+                t("errors.delete_error", { error: `${client.name}: ${err}` }),
+                "error"
             );
         }
     }
 
     await getClients();
     addToast(
-      t('home.multiple_clients_deleted', { count: installedClients.length }),
-      'success'
+        t("home.multiple_clients_deleted", { count: installedClients.length }),
+        "success"
     );
     hideContextMenu();
     clearSelection();
@@ -1355,64 +1483,66 @@ const deleteMultipleClients = async () => {
 const reinstallMultipleClients = async () => {
     const selectedData = selectedClientsData.value;
     const installedClients = selectedData.filter(
-      (client) => client.meta.installed
+        (client) => client.meta.installed
     );
 
     if (installedClients.length === 0) {
-        addToast(t('home.no_clients_to_reinstall'), 'warning');
+        addToast(t("home.no_clients_to_reinstall"), "warning");
         hideContextMenu();
         return;
     }
 
     if (!props.isOnline) {
-        addToast(t('home.no_internet_reinstall'), 'error');
+        addToast(t("home.no_internet_reinstall"), "error");
         hideContextMenu();
         return;
     }
 
     addToast(
-      t('home.reinstalling_multiple', { count: installedClients.length }),
-      'info'
+        t("home.reinstalling_multiple", { count: installedClients.length }),
+        "info"
     );
 
     for (const client of installedClients) {
         try {
-            await invoke('reinstall_client', { id: client.id });
+            await invoke("reinstall_client", { id: client.id });
             await new Promise((resolve) => setTimeout(resolve, 300));
         } catch (err) {
             console.error(`Error reinstalling client ${client.name}:`, err);
             addToast(
-              t('errors.reinstall_error', {
-                  error: `${client.name}: ${err}`,
-              }),
-              'error'
+                t("errors.reinstall_error", {
+                    error: `${client.name}: ${err}`,
+                }),
+                "error"
             );
         }
     }
 
     await getClients();
     addToast(
-      t('home.multiple_clients_reinstalled', {
-          count: installedClients.length,
-      }),
-      'success'
+        t("home.multiple_clients_reinstalled", {
+            count: installedClients.length,
+        }),
+        "success"
     );
     hideContextMenu();
     clearSelection();
 };
 
 const selectAllClients = () => {
-    selectedClients.value = new Set(filteredClients.value.map((client) => client.id));
+    selectedClients.value = new Set(
+        filteredClients.value.map((client) => client.id)
+    );
 };
 
 const handleKeyDown = (event: KeyboardEvent) => {
-    if ((event.ctrlKey || event.metaKey) && event.key === 'f') {
+    if ((event.ctrlKey || event.metaKey) && event.key === "f") {
         event.preventDefault();
         searchBarRef.value?.focus();
         return;
     }
 
-    if (event.key === 'Control' && expandedClientId.value === null) {
+    if (event.key === "Control" && expandedClientId.value === null) {
         if (isCtrlPressed.value) return;
 
         if (ctrlPressTimer !== null) {
@@ -1426,15 +1556,17 @@ const handleKeyDown = (event: KeyboardEvent) => {
         return;
     }
 
-    if (event.key === 'Escape') {
+    if (event.key === "Escape") {
         clearSelection();
     }
 
     if (
-      event.ctrlKey &&
-      (event.key === 'a' || event.key === 'ф') &&
-      !(event.target as HTMLElement).matches('input, textarea, [contenteditable]') &&
-      expandedClientId.value === null
+        event.ctrlKey &&
+        (event.key === "a" || event.key === "ф") &&
+        !(event.target as HTMLElement).matches(
+            "input, textarea, [contenteditable]"
+        ) &&
+        expandedClientId.value === null
     ) {
         if (!event.repeat) {
             event.preventDefault();
@@ -1444,7 +1576,7 @@ const handleKeyDown = (event: KeyboardEvent) => {
 };
 
 const handleKeyUp = (event: KeyboardEvent) => {
-    if (event.key === 'Control') {
+    if (event.key === "Control") {
         if (ctrlPressTimer !== null) {
             clearTimeout(ctrlPressTimer);
             ctrlPressTimer = null;
@@ -1455,20 +1587,20 @@ const handleKeyUp = (event: KeyboardEvent) => {
 
 const handleDocumentClick = (event: MouseEvent) => {
     const target = event.target as HTMLElement;
-    if (!target.closest('.client-card')) {
+    if (!target.closest(".client-card")) {
         clearSelection();
     }
 };
 
 const loadWarnedInsecureClients = () => {
     try {
-        const stored = localStorage.getItem('warnedInsecureClients');
+        const stored = localStorage.getItem("warnedInsecureClients");
         if (stored) {
             const clientIds = JSON.parse(stored);
             warnedInsecureClients.value = new Set(clientIds);
         }
     } catch (error) {
-        console.error('Failed to load warned insecure clients:', error);
+        console.error("Failed to load warned insecure clients:", error);
         warnedInsecureClients.value = new Set();
     }
 };
@@ -1477,32 +1609,34 @@ const saveWarnedInsecureClients = () => {
     try {
         const clientIds = Array.from(warnedInsecureClients.value);
         localStorage.setItem(
-          'warnedInsecureClients',
-          JSON.stringify(clientIds)
+            "warnedInsecureClients",
+            JSON.stringify(clientIds)
         );
     } catch (error) {
-        console.error('Failed to save warned insecure clients:', error);
+        console.error("Failed to save warned insecure clients:", error);
     }
 };
 
 const loadCustomClients = async () => {
     try {
-        customClients.value = await invoke<CustomClient[]>('get_custom_clients');
+        customClients.value =
+            await invoke<CustomClient[]>("get_custom_clients");
     } catch (err) {
-        console.error('Error loading custom clients:', err);
+        console.error("Error loading custom clients:", err);
     }
 };
 
 const loadCustomClientsDisplayMode = async () => {
     try {
-        const flags = await invoke('get_flags');
+        const flags = await invoke("get_flags");
         const typedFlags = flags as any;
 
-        customClientsDisplayMode.value = typedFlags.custom_clients_display.value;
+        customClientsDisplayMode.value =
+            typedFlags.custom_clients_display.value;
         return typedFlags;
     } catch (err) {
-        console.error('Error loading flags:', err);
-        addToast(`Failed to load flags: ${err}`, 'error');
+        console.error("Error loading flags:", err);
+        addToast(`Failed to load flags: ${err}`, "error");
         return {};
     }
 };
@@ -1527,38 +1661,41 @@ onMounted(async () => {
     setTimeout(() => {
         if (statusInterval.value === null && !isLeaving.value) {
             statusInterval.value = setInterval(
-              checkRunningStatus,
-              5000
+                checkRunningStatus,
+                5000
             ) as unknown as number;
         }
     }, 500);
 
-    document.addEventListener('keydown', handleKeyDown);
-    document.addEventListener('keyup', handleKeyUp);
-    document.addEventListener('click', handleDocumentClick);
-    window.addEventListener('blur', blurHandler);
-    document.addEventListener('visibilitychange', visibilityHandler);
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("keyup", handleKeyUp);
+    document.addEventListener("click", handleDocumentClick);
+    window.addEventListener("blur", blurHandler);
+    document.addEventListener("visibilitychange", visibilityHandler);
 
     if (!hasAnimatedBefore.value) {
         await nextTick();
         viewVisible.value = true;
         if (filteredClients.value.length > 0) {
-            const totalDelay = Math.min(Math.max(0, filteredClients.value.length) * 45 + 500, 2000);
+            const totalDelay = Math.min(
+                Math.max(0, filteredClients.value.length) * 45 + 500,
+                2000
+            );
             setTimeout(() => {
                 playClientSlideAnim.value = false;
                 try {
-                    sessionStorage.setItem(HOME_ANIM_KEY, '1');
+                    sessionStorage.setItem(HOME_ANIM_KEY, "1");
                     hasAnimatedBefore.value = true;
                 } catch (e) {
-                    console.error('Failed to set sessionStorage item:', e);
+                    console.error("Failed to set sessionStorage item:", e);
                 }
             }, totalDelay);
         } else {
             try {
-                sessionStorage.setItem(HOME_ANIM_KEY, '1');
+                sessionStorage.setItem(HOME_ANIM_KEY, "1");
                 hasAnimatedBefore.value = true;
             } catch (e) {
-                console.error('Failed to set sessionStorage item:', e);
+                console.error("Failed to set sessionStorage item:", e);
             }
         }
     }
@@ -1571,22 +1708,19 @@ onMounted(async () => {
             const total = maxIndex * perItemDelay + animDuration + 80;
             setTimeout(() => {
                 try {
-                    sessionStorage.setItem(STAGGER_KEY, '1');
+                    sessionStorage.setItem(STAGGER_KEY, "1");
                     hasStaggerPlayed.value = true;
                 } catch (e) {
-                    console.error('Failed to set stagger session key:', e);
+                    console.error("Failed to set stagger session key:", e);
                 }
             }, total);
         }
     } catch (e) {
-        console.error('Error scheduling stagger flag:', e);
+        console.error("Error scheduling stagger flag:", e);
     }
-
-
 });
 
 onBeforeUnmount(() => {
-
     if (statusInterval.value !== null) {
         clearInterval(statusInterval.value);
         statusInterval.value = null;
@@ -1610,208 +1744,363 @@ onBeforeUnmount(() => {
     hideContextMenu();
     prepareForUnmount();
 
-    document.removeEventListener('keydown', handleKeyDown);
-    document.removeEventListener('keyup', handleKeyUp);
-    document.removeEventListener('click', handleDocumentClick);
-    window.removeEventListener('blur', blurHandler);
-    document.removeEventListener('visibilitychange', visibilityHandler);
+    document.removeEventListener("keydown", handleKeyDown);
+    document.removeEventListener("keyup", handleKeyUp);
+    document.removeEventListener("click", handleDocumentClick);
+    window.removeEventListener("blur", blurHandler);
+    document.removeEventListener("visibilitychange", visibilityHandler);
 
-    progressAnimHandles.value.forEach((handle) => window.cancelAnimationFrame(handle));
+    progressAnimHandles.value.forEach((handle) =>
+        window.cancelAnimationFrame(handle)
+    );
     progressAnimHandles.value.clear();
 });
 </script>
 
 <template>
-    <div :class="['flex items-center gap-2 mb-6 top-menu', viewVisible ? 'home-entered' : 'home-hidden']">
-        <SearchBar ref="searchBarRef" @search="handleSearch" class="flex-1 mr-2 home-search"
-                   :initial-value="searchQuery" :placeholder="t('home.search_placeholder')"/>
-        <FiltersMenu v-model:activeFilters="activeFilters" v-model:clientSortKey="clientSortKey"
-                     v-model:clientSortOrder="clientSortOrder"/>
-        <div v-if="halloweenActive" class="tooltip tooltip-bottom" :data-tip="t('events.halloween.tooltip')">
-            <div class="px-3 py-2 bg-warning/10 border border-warning/30 rounded-lg text-warning">
+    <div
+        :class="[
+            'flex items-center gap-2 mb-6 top-menu',
+            viewVisible ? 'home-entered' : 'home-hidden',
+        ]"
+    >
+        <SearchBar
+            ref="searchBarRef"
+            @search="handleSearch"
+            class="flex-1 mr-2 home-search"
+            :initial-value="searchQuery"
+            :placeholder="t('home.search_placeholder')"
+        />
+        <FiltersMenu
+            v-model:activeFilters="activeFilters"
+            v-model:clientSortKey="clientSortKey"
+            v-model:clientSortOrder="clientSortOrder"
+        />
+        <div
+            v-if="halloweenActive"
+            class="tooltip tooltip-bottom"
+            :data-tip="t('events.halloween.tooltip')"
+        >
+            <div
+                class="px-3 py-2 bg-warning/10 border border-warning/30 rounded-lg text-warning"
+            >
                 <span class="text-xl">🎃</span>
             </div>
         </div>
-        <div class="tooltip tooltip-bottom" :data-tip="t('navigation.custom_clients')">
-            <button @click="$emit('change-view', 'custom_clients')"
-                    class="btn btn-ghost border-base-300 btn-primary gap-2 home-action-btn"
-                    :style="{ border: 'var(--border) solid #0000', transitionDelay: '0.5s' }">
-                <FileText class="w-4 h-4"/>
+        <div
+            class="tooltip tooltip-bottom"
+            :data-tip="t('navigation.custom_clients')"
+        >
+            <button
+                @click="$emit('change-view', 'custom_clients')"
+                class="btn btn-ghost border-base-300 btn-primary gap-2 home-action-btn"
+                :style="{
+                    border: 'var(--border) solid #0000',
+                    transitionDelay: '0.5s',
+                }"
+            >
+                <FileText class="w-4 h-4" />
             </button>
         </div>
         <div class="tooltip tooltip-bottom" :data-tip="t('navigation.news')">
-            <button @click="$emit('change-view', 'news')"
-                    class="btn btn-ghost border-base-300 btn-primary gap-2 relative home-action-btn"
-                    :style="{ border: 'var(--border) solid #0000', transitionDelay: '1s' }">
-                <Newspaper class="w-4 h-4"/>
-                <span v-if="props.unreadNewsCount && props.unreadNewsCount > 0"
-                      class="absolute -top-2 -right-2 bg-primary text-primary-content text-xs font-bold rounded-full min-w-5 h-5 flex items-center justify-center border-2 border-base-100 px-1">
-                    {{ props.unreadNewsCount > 9 ? '9+' : props.unreadNewsCount }}
+            <button
+                @click="$emit('change-view', 'news')"
+                class="btn btn-ghost border-base-300 btn-primary gap-2 relative home-action-btn"
+                :style="{
+                    border: 'var(--border) solid #0000',
+                    transitionDelay: '1s',
+                }"
+            >
+                <Newspaper class="w-4 h-4" />
+                <span
+                    v-if="props.unreadNewsCount && props.unreadNewsCount > 0"
+                    class="absolute -top-2 -right-2 bg-primary text-primary-content text-xs font-bold rounded-full min-w-5 h-5 flex items-center justify-center border-2 border-base-100 px-1"
+                >
+                    {{
+                        props.unreadNewsCount > 9 ? "9+" : props.unreadNewsCount
+                    }}
                 </span>
             </button>
         </div>
     </div>
 
-    <InlineIRCChat class="mb-6" @show-user-profile="$emit('show-user-profile', $event)"/>
-
-    <div v-if="filteredClients.length === 0 && !error && clientsLoaded"
-         class="text-center py-10 text-base-content/70 animate-fadeIn flex flex-col items-center">
-        <div class="text-lg font-semibold mb-2">{{ t('home.no_clients') }}</div>
-        <div class="text-sm mb-4">{{ t('home.adjust_search') }}</div>
+    <InlineIRCChat
+        class="mb-6"
+        @show-user-profile="$emit('show-user-profile', $event)"
+    />
+
+    <div
+        v-if="filteredClients.length === 0 && !error && clientsLoaded"
+        class="text-center py-10 text-base-content/70 animate-fadeIn flex flex-col items-center"
+    >
+        <div class="text-lg font-semibold mb-2">{{ t("home.no_clients") }}</div>
+        <div class="text-sm mb-4">{{ t("home.adjust_search") }}</div>
         <button
-          v-if="searchQuery || activeFilters.fabric || activeFilters.vanilla || activeFilters.forge || activeFilters.installed"
-          @click="clearAllFilters" class="btn btn-sm btn-primary">
-            {{ t('home.clear_filters') }}
+            v-if="
+                searchQuery ||
+                activeFilters.fabric ||
+                activeFilters.vanilla ||
+                activeFilters.forge ||
+                activeFilters.installed
+            "
+            @click="clearAllFilters"
+            class="btn btn-sm btn-primary"
+        >
+            {{ t("home.clear_filters") }}
         </button>
     </div>
 
-    <div v-if="error" class="my-4 text-red-500 animate-fadeIn flex flex-col items-center justify-center h-full">
+    <div
+        v-if="error"
+        class="my-4 text-red-500 animate-fadeIn flex flex-col items-center justify-center h-full"
+    >
         <span>{{ error }}</span>
     </div>
 
-    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 relative overflow-hidden"
-         :class="{ 'multi-select-mode': isCtrlPressed && expandedClientId === null }">
-        <div v-for="(client, idx) in filteredClients" :key="client.id"
-             :class="['client-card-item', { 'slide-in-animate': playClientSlideAnim }]"
-            :style="playClientSlideAnim ? { animationDelay: `${Math.min(idx * 100, 600)}ms` } : {}" v-memo="[
+    <div
+        class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 relative overflow-hidden"
+        :class="{
+            'multi-select-mode': isCtrlPressed && expandedClientId === null,
+        }"
+        :style="{ paddingBottom: selectedClients.size > 0 ? '80px' : '0px' }"
+    >
+        <div
+            v-for="(client, idx) in filteredClients"
+            :key="client.id"
+            :class="[
+                'client-card-item',
+                { 'slide-in-animate': playClientSlideAnim },
+            ]"
+            :style="
+                playClientSlideAnim
+                    ? { animationDelay: `${Math.min(idx * 100, 600)}ms` }
+                    : {}
+            "
+            v-bind="[
                 client.id,
                 isClientRunning(client.id),
                 isClientInstalling(client),
-                installationStatus.get(client.filename)?.percentage,
+                installationStatus.get(getFileBasename(client.filename))
+                    ?.percentage,
                 isClientFavorite(client.id),
                 isClientSelected(client.id),
                 isCtrlPressed,
                 hashVerifyingClients.has(client.id),
-                requirementsInProgress
-            ]">
-            <ClientCard :client="client" :isClientRunning="isClientRunning(client.id)"
-                        :isClientInstalling="isClientInstalling(client)"
-                        :installationStatus="installationStatus.get(client.filename)"
-                        :isRequirementsInProgress="requirementsInProgress"
-                        :isAnyClientDownloading="isAnyClientDownloading"
-                        :isFavorite="isClientFavorite(client.id)" :isSelected="isClientSelected(client.id)"
-                        :isMultiSelectMode="isCtrlPressed && expandedClientId === null"
-                        :isHashVerifying="hashVerifyingClients.has(client.id)" :isAnyCardExpanded="isAnyCardExpanded"
-                        @launch="handleLaunchClick" @download="downloadClient" @open-log-viewer="openLogViewer"
-                        @show-context-menu="showContextMenu" @client-click="handleClientClick"
-                        @expanded-state-changed="handleExpandedStateChanged"
-                        @show-user-profile="$emit('show-user-profile', $event)"/>
+                requirementsInProgress,
+            ]"
+        >
+            <ClientCard
+                :client="client"
+                :isClientRunning="isClientRunning(client.id)"
+                :isClientInstalling="isClientInstalling(client)"
+                :installationStatus="
+                    installationStatus.get(getFileBasename(client.filename))
+                "
+                :isRequirementsInProgress="requirementsInProgress"
+                :isAnyClientDownloading="isAnyClientDownloading"
+                :isFavorite="isClientFavorite(client.id)"
+                :isSelected="isClientSelected(client.id)"
+                :isMultiSelectMode="isCtrlPressed && expandedClientId === null"
+                :isHashVerifying="hashVerifyingClients.has(client.id)"
+                :isAnyCardExpanded="isAnyCardExpanded"
+                @launch="handleLaunchClick"
+                @download="downloadClient"
+                @open-log-viewer="openLogViewer"
+                @show-context-menu="showContextMenu"
+                @client-click="handleClientClick"
+                @expanded-state-changed="handleExpandedStateChanged"
+                @show-user-profile="$emit('show-user-profile', $event)"
+            />
         </div>
     </div>
 
-    <div v-if="contextMenu.visible" :style="{ top: `${contextMenu.y}px`, left: `${contextMenu.x}px` }"
-         class="fixed z-40 menu p-0 bg-base-200 w-56 rounded-box shadow-xl border border-base-300 dropdown-content"
-         :class="contextMenu.animationClass">
-        <h3 v-if="selectedClients.size <= 1"
-            class="font-medium text-sm px-4 py-2 border-b border-base-300 text-base-content/80 bg-base-300/30">
+    <div
+        v-if="contextMenu.visible"
+        :style="{ top: `${contextMenu.y}px`, left: `${contextMenu.x}px` }"
+        class="fixed z-100 menu p-0 bg-base-200 w-56 rounded-box shadow-xl border border-base-300 dropdown-content"
+        :class="contextMenu.animationClass"
+    >
+        <h3
+            v-if="selectedClients.size <= 1"
+            class="font-medium text-sm px-4 py-2 border-b border-base-300 text-base-content/80 bg-base-300/30"
+        >
             {{ contextMenu.client?.name }}
         </h3>
 
-        <h3 v-else class="font-medium text-sm px-4 py-2 border-b border-base-300 text-base-content/80 bg-base-300/30">
+        <h3
+            v-else
+            class="font-medium text-sm px-4 py-2 border-b border-base-300 text-base-content/80 bg-base-300/30"
+        >
             {{
-                t('home.multiple_clients_selected', {
+                t("home.multiple_clients_selected", {
                     count: selectedClients.size,
                 })
             }}
         </h3>
 
         <ul v-if="selectedClients.size <= 1">
+            <li
+                v-if="
+                    contextMenu.client?.client_type?.toLowerCase() ===
+                        'fabric' && contextMenu.client?.meta.installed
+                "
+            >
+                <a
+                    @click="openModsManager(contextMenu.client!)"
+                    class="flex items-center gap-2 text-sm active:bg-primary/30 text-primary font-medium"
+                >
+                    <Package class="w-4 h-4" />
+                    {{ t("mods.manage_mods") }}
+                </a>
+            </li>
             <li>
-                <a @click="toggleFavorite(contextMenu.client!)"
-                   class="flex items-center gap-2 text-sm active:bg-primary/30">
-                    <Star class="w-4 h-4" :class="{
-                        'fill-yellow-400 text-yellow-400': isClientFavorite(
-                            contextMenu.client?.id || 0
-                        ),
-                    }"/>
+                <a
+                    @click="toggleFavorite(contextMenu.client!)"
+                    class="flex items-center gap-2 text-sm active:bg-primary/30"
+                >
+                    <Star
+                        class="w-4 h-4"
+                        :class="{
+                            'fill-yellow-400 text-yellow-400': isClientFavorite(
+                                contextMenu.client?.id || 0
+                            ),
+                        }"
+                    />
                     {{
                         isClientFavorite(contextMenu.client?.id || 0)
-                          ? t('theme.actions.remove_favorite')
-                          : t('theme.actions.add_favorite')
+                            ? t("theme.actions.remove_favorite")
+                            : t("theme.actions.add_favorite")
                     }}
                 </a>
             </li>
+            <li
+                v-if="
+                    contextMenu.client?.meta.installed &&
+                    isClientRunning(contextMenu.client!.id)
+                "
+            >
+                <a
+                    @click="launchAnotherInstance(contextMenu.client!)"
+                    class="flex items-center gap-2 text-sm active:bg-primary/30"
+                >
+                    <Plus class="w-4 h-4" />
+                    {{ t("home.launch_another") }}
+                </a>
+            </li>
             <li v-if="contextMenu.client?.meta.installed">
-                <a @click="reinstallClient(contextMenu.client!)"
-                   class="flex items-center gap-2 text-sm active:bg-primary/30">
-                    <RefreshCcw class="w-4 h-4"/>
-                    {{ t('common.reinstall') }}
+                <a
+                    @click="reinstallClient(contextMenu.client!)"
+                    class="flex items-center gap-2 text-sm active:bg-primary/30"
+                >
+                    <RefreshCcw class="w-4 h-4" />
+                    {{ t("common.reinstall") }}
                 </a>
             </li>
             <li v-if="contextMenu.client?.meta.installed">
-                <a @click="deleteClient(contextMenu.client!)"
-                   class="flex items-center gap-2 text-sm active:bg-primary/30">
-                    <Trash2 class="w-4 h-4"/>
-                    {{ t('common.delete') }}
+                <a
+                    @click="deleteClient(contextMenu.client!)"
+                    class="flex items-center gap-2 text-sm active:bg-primary/30"
+                >
+                    <Trash2 class="w-4 h-4" />
+                    {{ t("common.delete") }}
                 </a>
             </li>
             <li v-if="contextMenu.client?.meta.installed">
-                <a @click="openClientFolder(contextMenu.client!)"
-                   class="flex items-center gap-2 text-sm active:bg-primary/30">
-                    <Folder class="w-4 h-4"/>
-                    {{ t('theme.actions.open_folder') }}
+                <a
+                    @click="openClientFolder(contextMenu.client!)"
+                    class="flex items-center gap-2 text-sm active:bg-primary/30"
+                >
+                    <Folder class="w-4 h-4" />
+                    {{ t("theme.actions.open_folder") }}
                 </a>
             </li>
             <li v-if="contextMenu.client?.meta.installed">
-                <a @click="copyClientLogs(contextMenu.client!)"
-                   class="flex items-center gap-2 text-sm active:bg-primary/30">
-                    <Copy class="w-4 h-4"/>
-                    {{ t('logs.copy_logs') }}
+                <a
+                    @click="copyClientLogs(contextMenu.client!)"
+                    class="flex items-center gap-2 text-sm active:bg-primary/30"
+                >
+                    <Copy class="w-4 h-4" />
+                    {{ t("logs.copy_logs") }}
                 </a>
             </li>
         </ul>
     </div>
 
     <transition name="slide-up-bottom">
-        <div v-if="selectedClients.size > 0"
-             class="fixed bottom-4 left-1/2 transform -translate-x-1/2 w-auto max-w-[calc(100%-2rem)] bg-neutral text-neutral-content px-4 py-3 rounded-lg shadow-xl z-30 flex items-center gap-3 sm:gap-4">
+        <div
+            v-if="selectedClients.size > 0"
+            class="fixed left-1/2 transform -translate-x-1/2 w-auto max-w-[calc(100%-2rem)] bg-neutral text-neutral-content px-4 py-3 rounded-lg shadow-xl z-30 flex items-center gap-3 sm:gap-4"
+            :style="{
+                bottom: `calc(1rem + var(--sidebar-bottom-height, 0px))`,
+            }"
+        >
             <span class="font-medium text-xs sm:text-sm whitespace-nowrap">{{
-                    t('home.selected_clients', {
-                        count: selectedClients.size,
-                    })
-                }}</span>
+                t("home.selected_clients", {
+                    count: selectedClients.size,
+                })
+            }}</span>
 
             <div class="flex items-center gap-1 sm:gap-2">
                 <transition name="button-fade" mode="out-in">
-                    <button v-if="canStopSelected" @click="stopMultipleClients" :title="t('home.stop_selected')"
-                            class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square">
-                        <StopCircle class="w-4 h-4 sm:w-5 sm:h-5"/>
+                    <button
+                        v-if="canStopSelected"
+                        @click="stopMultipleClients"
+                        :title="t('home.stop_selected')"
+                        class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square"
+                    >
+                        <StopCircle class="w-4 h-4 sm:w-5 sm:h-5" />
                     </button>
                 </transition>
 
                 <transition name="button-fade" mode="out-in">
-                    <button v-if="canDownloadSelected" @click="downloadMultipleClients"
-                            :title="t('home.download_selected')"
-                            class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square">
-                        <Download class="w-4 h-4 sm:w-5 sm:h-5"/>
+                    <button
+                        v-if="canDownloadSelected"
+                        @click="downloadMultipleClients"
+                        :title="t('home.download_selected')"
+                        class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square"
+                    >
+                        <Download class="w-4 h-4 sm:w-5 sm:h-5" />
                     </button>
                 </transition>
 
                 <transition name="button-fade" mode="out-in">
-                    <button v-if="canReinstallSelected" @click="reinstallMultipleClients"
-                            :title="t('home.reinstall_selected')"
-                            class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square">
-                        <RefreshCcw class="w-4 h-4 sm:w-5 sm:h-5"/>
+                    <button
+                        v-if="canReinstallSelected"
+                        @click="reinstallMultipleClients"
+                        :title="t('home.reinstall_selected')"
+                        class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square"
+                    >
+                        <RefreshCcw class="w-4 h-4 sm:w-5 sm:h-5" />
                     </button>
                 </transition>
 
                 <transition name="button-fade" mode="out-in">
-                    <button v-if="canDeleteSelected" @click="deleteMultipleClients" :title="t('home.delete_selected')"
-                            class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square">
-                        <Trash2 class="w-4 h-4 sm:w-5 sm:h-5"/>
+                    <button
+                        v-if="canDeleteSelected"
+                        @click="deleteMultipleClients"
+                        :title="t('home.delete_selected')"
+                        class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square"
+                    >
+                        <Trash2 class="w-4 h-4 sm:w-5 sm:h-5" />
                     </button>
                 </transition>
             </div>
 
-            <div v-if="
-                canStopSelected ||
-                canDownloadSelected ||
-                canReinstallSelected ||
-                canDeleteSelected
-            " class="border-l border-neutral-content/30 h-5 sm:h-6 mx-1"></div>
-
-            <button @click="clearSelection" class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square">
-                <X class="w-4 h-4 sm:w-5 sm:h-5"/>
+            <div
+                v-if="
+                    canStopSelected ||
+                    canDownloadSelected ||
+                    canReinstallSelected ||
+                    canDeleteSelected
+                "
+                class="border-l border-neutral-content/30 h-5 sm:h-6 mx-1"
+            ></div>
+
+            <button
+                @click="clearSelection"
+                class="btn btn-sm btn-ghost hover:bg-neutral-focus p-2 aspect-square"
+            >
+                <X class="w-4 h-4 sm:w-5 sm:h-5" />
             </button>
         </div>
     </transition>
@@ -1819,8 +2108,9 @@ onBeforeUnmount(() => {
 
 <style>
 .client-card-item {
-    transition: transform 0.2s ease-out,
-    box-shadow 0.2s ease-out;
+    transition:
+        transform 0.2s ease-out,
+        box-shadow 0.2s ease-out;
     opacity: 1;
 }
 
@@ -1927,8 +2217,9 @@ onBeforeUnmount(() => {
 }
 
 .menu.dropdown-content .relative .absolute {
-    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow:
+        0 10px 25px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
 .menu.dropdown-content .relative .absolute button {
@@ -2007,13 +2298,17 @@ onBeforeUnmount(() => {
 .home-entered {
     opacity: 1;
     transform: translateY(0);
-    transition: opacity 0.5s cubic-bezier(0.2, 0.9, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
+    transition:
+        opacity 0.5s cubic-bezier(0.2, 0.9, 0.2, 1),
+        transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
 }
 
 .home-search {
     opacity: 0;
     transform: translateY(-30px) scale(0.995);
-    transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.6s ease;
+    transition:
+        transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1),
+        opacity 0.6s ease;
 }
 
 .home-entered .home-search {
@@ -2025,7 +2320,9 @@ onBeforeUnmount(() => {
 .home-action-btn {
     opacity: 0;
     transform: translateY(-30px) scale(0.995);
-    transition: transform 0.56s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.56s ease;
+    transition:
+        transform 0.56s cubic-bezier(0.2, 0.9, 0.2, 1),
+        opacity 0.56s ease;
 }
 
 .home-entered .home-action-btn {
@@ -2041,7 +2338,6 @@ onBeforeUnmount(() => {
     transition-delay: 0.16s;
 }
 
-
 .client-card-item {
     opacity: 1;
 }
@@ -2082,7 +2378,9 @@ onBeforeUnmount(() => {
 .client-list-move,
 .client-list-enter-active,
 .client-list-leave-active {
-    transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1), opacity 0.2s ease;
+    transition:
+        transform 0.4s cubic-bezier(0.55, 0, 0.1, 1),
+        opacity 0.2s ease;
 }
 
 .client-list-leave-active {
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 9daeb44b..0ea5a916 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,131 +1,34 @@
 <template>
     <div class="max-w-md mx-auto p-6">
         <h1 class="text-2xl font-semibold mb-6 text-primary-focus">
-            {{ t('auth.login.title') }}
+            {{ t("auth.login.title") }}
         </h1>
-        <form @submit.prevent="handleLogin">
-            <div class="form-control mb-4">
-                <label class="label">
-                    <span class="label-text mb-1">{{ t('common.username') }}</span>
-                </label>
-                <input v-model="username" type="text" :placeholder="t('auth.login.username_placeholder')"
-                    class="input input-bordered w-full bg-base-100" required />
-            </div>
-            <div class="form-control mb-6">
-                <label class="label">
-                    <span class="label-text mb-1">{{ t('common.password') }}</span>
-                </label>
-                <input v-model="password" type="password" :placeholder="t('auth.login.password_placeholder')"
-                    class="input input-bordered w-full bg-base-100" required />
-            </div>
-            <button type="submit" class="btn btn-primary w-full mb-4">
-                {{ t('auth.login.login_button') }}
-            </button>
-            <div class="text-center">
-                <p class="text-sm text-base-content/70">
-                    {{ t('auth.login.register_link') }}
-                    <a @click="$emit('change-view', 'register')"
-                        class="link link-primary hover:underline cursor-pointer">{{ t('common.register') }}</a>
-                </p>
-            </div>
-        </form>
+        <LoginForm
+            @logged-in="$emit('logged-in')"
+            @unverified="handleUnverified"
+        />
+        <div class="text-center mt-6">
+            <p class="text-sm text-base-content/70">
+                {{ t("auth.login.register_link") }}
+                <a
+                    @click="$emit('change-view', 'register')"
+                    class="link link-primary hover:underline cursor-pointer"
+                    >{{ t("common.register") }}</a
+                >
+            </p>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useToast } from '../services/toastService';
-import { userService } from '../services/userService';
-import { useI18n } from 'vue-i18n';
-import { apiPost } from '../services/apiClient';
-import { getApiBaseWithVersion } from '../config';
-import { getCurrentLanguage } from '../i18n';
-import { invoke } from '@tauri-apps/api/core';
+import { useI18n } from "vue-i18n";
+import LoginForm from "../components/layout/forms/LoginForm.vue";
 
 const { t } = useI18n();
-const { addToast } = useToast();
-const emit = defineEmits(['logged-in', 'change-view']);
+const emit = defineEmits(["logged-in", "change-view", "show-verify"]);
 
-const username = ref('');
-const password = ref('');
-
-const extractAuthToken = (payload: any): string | null => {
-    if (!payload) return null;
-    const candidate =
-        payload.token ||
-        payload.auth_token ||
-        payload.access_token ||
-        payload.accessToken ||
-        payload?.tokens?.token ||
-        payload?.tokens?.access_token ||
-        payload?.tokens?.accessToken ||
-        payload?.data?.token ||
-        payload?.data?.auth_token ||
-        payload?.data?.access_token ||
-        payload?.data?.accessToken;
-    return typeof candidate === 'string' && candidate.length > 0 ? candidate : null;
-};
-
-const handleLogin = async () => {
-    try {
-        const response = await apiPost(
-            `${getApiBaseWithVersion()}/auth/login`,
-            {
-                username: username.value,
-                password: password.value,
-            },
-            {
-                headers: {
-                    'Accept-Language': getCurrentLanguage() || 'en',
-                    'Content-Type': 'application/json',
-                },
-            }
-        );
-
-        console.log('Login response:', response);
-
-        const authToken = extractAuthToken(response);
-
-        if (authToken) {
-            localStorage.setItem('authToken', authToken);
-            userService.clearCache();
-            try {
-                await invoke('update_presence', {
-                    details: 'In Menu',
-                    state: 'Browsing clients',
-                });
-            } catch (error) {
-                console.error('Failed to initialize Discord presence:', error);
-            }
-
-            addToast(t('auth.login.success'), 'success');
-            emit('logged-in');
-        } else {
-            console.error('No auth token found in response:', response);
-            addToast(t('auth.login.no_token'), 'error');
-        }
-    } catch (error: any) {
-        console.error('Login failed:', error);
-        console.error('Error response:', error.response);
-
-        if (error.response && error.response.data) {
-            let errorMessage = t('auth.login.login_failed');
-            const errors = error.response.data;
-            if (errors.non_field_errors) {
-                errorMessage = errors.non_field_errors.join(' ');
-            } else if (Array.isArray(errors) && errors.length > 0) {
-                errorMessage = errors.join(' ');
-            } else if (typeof errors === 'string') {
-                errorMessage = errors;
-            } else if (errors.error) {
-                errorMessage = errors.error;
-            } else if (errors.detail) {
-                errorMessage = errors.detail;
-            }
-            addToast(errorMessage, 'error');
-        } else {
-            addToast(t('auth.login.login_failed'), 'error');
-        }
-    }
+const handleUnverified = (data: { email: string }) => {
+    console.log("LoginView: handleUnverified called with:", data);
+    emit("show-verify", data.email);
 };
 </script>
diff --git a/src/views/Marketplace.vue b/src/views/Marketplace.vue
index 72ed8ac6..951cb5a8 100644
--- a/src/views/Marketplace.vue
+++ b/src/views/Marketplace.vue
@@ -1,29 +1,36 @@
 <template>
-  <div class="max-w-6xl mx-auto p-2 md:p-4">
-    <div class="flex items-center mb-4">
-      <button class="btn btn-ghost btn-sm mr-2" @click="goBack">
-        <ArrowLeft class="w-5 h-5" />
-      </button>
-      <h1 class="text-2xl font-bold">{{ t('marketplace.title') }}</h1>
-      <div class="flex gap-2 ml-auto">
-        <button class="btn" @click="openShareLocalModal">{{ t('marketplace.share_local') }}</button>
-        <button class="btn btn-primary" @click="openShareModal">{{ t('marketplace.share_current') }}</button>
-      </div>
-    </div>
+    <div class="max-w-6xl mx-auto p-2 md:p-4">
+        <div class="flex items-center mb-4">
+            <button class="btn btn-ghost btn-sm mr-2" @click="goBack">
+                <ArrowLeft class="w-5 h-5" />
+            </button>
+            <h1 class="text-2xl font-bold">{{ t("marketplace.title") }}</h1>
+            <div class="flex gap-2 ml-auto">
+                <button class="btn" @click="openShareLocalModal">
+                    {{ t("marketplace.share_local") }}
+                </button>
+                <button class="btn btn-primary" @click="openShareModal">
+                    {{ t("marketplace.share_current") }}
+                </button>
+            </div>
+        </div>
 
-    <PresetGallery :key="reloadKey" />
-  </div>
+        <PresetGallery
+            :key="reloadKey"
+            @show-user-profile="(id) => $emit('show-user-profile', id)"
+        />
+    </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import PresetGallery from '../components/presets/PresetGallery.vue';
-import SharePresetModal from '../components/modals/social/presets/SharePresetModal.vue';
-import ShareLocalPresetModal from '../components/modals/social/presets/ShareLocalPresetModal.vue';
-import { useModal } from '../services/modalService';
-import { ArrowLeft } from 'lucide-vue-next';
-import { useRouter } from '../services/router';
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import PresetGallery from "../components/presets/PresetGallery.vue";
+import SharePresetModal from "../components/modals/social/presets/SharePresetModal.vue";
+import ShareLocalPresetModal from "../components/modals/social/presets/ShareLocalPresetModal.vue";
+import { useModal } from "../services/modalService";
+import { ArrowLeft } from "lucide-vue-next";
+import { useRouter } from "../services/router";
 
 const { showModal, hideModal } = useModal();
 const { t } = useI18n();
@@ -32,35 +39,35 @@ const router = useRouter();
 const reloadKey = ref(0);
 
 function goBack() {
-  router.back();
+    router.back();
 }
 function openShareModal() {
-  showModal(
-    'share-preset',
-    SharePresetModal,
-    { title: t('marketplace.share_modal_title') },
-    {},
-    {
-      shared: () => {
-        hideModal('share-preset');
-        reloadKey.value++;
-      },
-    },
-  );
+    showModal(
+        "share-preset",
+        SharePresetModal,
+        { title: t("marketplace.share_modal_title") },
+        {},
+        {
+            shared: () => {
+                hideModal("share-preset");
+                reloadKey.value++;
+            },
+        }
+    );
 }
 
 function openShareLocalModal() {
-  showModal(
-    'share-local-preset',
-    ShareLocalPresetModal,
-    { title: t('marketplace.share_modal_title') },
-    {},
-    {
-      shared: () => {
-        hideModal('share-local-preset');
-        reloadKey.value++;
-      },
-    },
-  );
+    showModal(
+        "share-local-preset",
+        ShareLocalPresetModal,
+        { title: t("marketplace.share_modal_title") },
+        {},
+        {
+            shared: () => {
+                hideModal("share-local-preset");
+                reloadKey.value++;
+            },
+        }
+    );
 }
 </script>
diff --git a/src/views/News.vue b/src/views/News.vue
index 35ef5992..46de1421 100644
--- a/src/views/News.vue
+++ b/src/views/News.vue
@@ -1,83 +1,129 @@
 <template>
     <div class="slide-up">
-        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
+        <div
+            class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6"
+        >
             <h1 class="text-2xl font-semibold text-primary-focus">
-                {{ t('navigation.news') }}
-                <span v-if="unreadCount > 0" class="ml-2 badge badge-primary badge-sm align-middle animate-pulse">
+                {{ t("navigation.news") }}
+                <span
+                    v-if="unreadCount > 0"
+                    class="ml-2 badge badge-primary badge-sm align-middle animate-pulse"
+                >
                     {{ unreadCount }}
                 </span>
             </h1>
             <div class="flex gap-2 items-center">
-                <input v-model="searchQuery" type="text" class="input input-bordered input-sm w-48 bg-base-100"
-                    :placeholder="t('news.search_placeholder')" />
-                <button @click="fetchNews" :disabled="loading" class="btn btn-sm btn-ghost" :title="t('news.refresh')">
+                <input
+                    v-model="searchQuery"
+                    type="text"
+                    class="input input-bordered input-sm w-48 bg-base-100"
+                    :placeholder="t('news.search_placeholder')"
+                />
+                <button
+                    @click="fetchNews"
+                    :disabled="loading"
+                    class="btn btn-sm btn-ghost"
+                    :title="t('news.refresh')"
+                >
                     <RefreshCcw class="w-4 h-4" />
                 </button>
-                <button v-if="unreadCount > 0" @click="markAllNewsAsRead" class="btn btn-primary btn-sm"
-                    :disabled="loading">
-                    {{ t('news.mark_all_read') }}
+                <button
+                    v-if="unreadCount > 0"
+                    @click="markAllNewsAsRead"
+                    class="btn btn-primary btn-sm"
+                    :disabled="loading"
+                >
+                    {{ t("news.mark_all_read") }}
                 </button>
             </div>
         </div>
 
         <div v-if="loading" class="flex justify-center items-center py-12">
             <div class="text-center space-y-3">
-                <span class="loading loading-spinner loading-md text-primary"></span>
-                <p class="text-base-content/70">{{ t('news.loading') }}</p>
+                <span
+                    class="loading loading-spinner loading-md text-primary"
+                ></span>
+                <p class="text-base-content/70">{{ t("news.loading") }}</p>
             </div>
         </div>
 
-        <div v-else-if="error" class="bg-error/10 border border-error/20 rounded-xl p-6">
+        <div
+            v-else-if="error"
+            class="bg-error/10 border border-error/20 rounded-xl p-6"
+        >
             <div class="flex items-center gap-3 mb-3">
                 <div class="text-error text-xl">⚠️</div>
                 <h3 class="text-lg font-semibold text-error">
-                    {{ t('news.error_title') }}
+                    {{ t("news.error_title") }}
                 </h3>
             </div>
             <p class="text-base-content/70 mb-4">{{ error }}</p>
-            <button @click="fetchNews" class="btn btn-primary btn-sm" :disabled="loading">
-                {{ t('news.retry') }}
+            <button
+                @click="fetchNews"
+                class="btn btn-primary btn-sm"
+                :disabled="loading"
+            >
+                {{ t("news.retry") }}
             </button>
         </div>
 
-        <div v-else-if="filteredNews.length === 0" class="bg-base-200 rounded-xl border border-base-300 p-12">
+        <div
+            v-else-if="filteredNews.length === 0"
+            class="bg-base-200 rounded-xl border border-base-300 p-12"
+        >
             <div class="text-center space-y-3">
                 <div class="text-6xl opacity-30">📰</div>
                 <h3 class="text-lg font-semibold text-base-content/80">
-                    {{ t('news.no_news') }}
+                    {{ t("news.no_news") }}
                 </h3>
                 <p class="text-base-content/60">
-                    {{ t('news.no_news_description') }}
+                    {{ t("news.no_news_description") }}
                 </p>
             </div>
         </div>
 
         <div v-else class="space-y-6">
-            <div v-for="(article, index) in filteredNews" :key="article.id"
+            <div
+                v-for="(article, index) in filteredNews"
+                :key="article.id"
+                :ref="(el) => (newsCardRefs[article.id] = el)"
                 class="card bg-base-200 shadow-md border border-base-300 news-card hover:shadow-lg transition-all duration-300"
-                :class="{ 'unread-article': !isNewsRead(article) }" :style="{ 'animation-delay': index * 0.1 + 's' }"
-                @click="markNewsAsRead(article)">
+                :class="{ 'unread-article': !isNewsRead(article) }"
+                :style="{ 'animation-delay': index * 0.1 + 's' }"
+            >
                 <div class="card-body p-6">
                     <div class="flex justify-between items-start mb-4">
                         <div class="flex items-center gap-2">
-                            <h2 class="card-title text-xl font-bold text-primary-focus">
+                            <h2
+                                class="card-title text-xl font-bold text-primary-focus"
+                            >
                                 {{ article.title }}
                             </h2>
-                            <div v-if="!isNewsRead(article)" class="badge badge-sm badge-primary animate-pulse">
-                                {{ t('news.new') }}
+                            <div
+                                v-if="!isNewsRead(article)"
+                                class="badge badge-sm badge-primary animate-pulse"
+                            >
+                                {{ t("news.new") }}
                             </div>
                         </div>
-                        <div class="text-xs text-base-content/60 whitespace-nowrap ml-4">
+                        <div
+                            class="text-xs text-base-content/60 whitespace-nowrap ml-4"
+                        >
                             {{ formatDate(article.created_at) }}
                         </div>
                     </div>
 
-                    <div class="prose prose-sm max-w-none text-base-content/80 news-content"
-                        v-html="renderNewsContent(article.content)"></div>
+                    <div
+                        class="prose prose-sm max-w-none text-base-content/80 news-content"
+                        v-html="renderNewsContent(article.content)"
+                    ></div>
 
-                    <div v-if="article.updated_at !== article.created_at" class="mt-4 pt-4 border-t border-base-300/50">
+                    <div
+                        v-if="article.updated_at !== article.created_at"
+                        class="mt-4 pt-4 border-t border-base-300/50"
+                    >
                         <p class="text-xs text-base-content/50">
-                            {{ t('news.updated_at') }}:
+                            {{ t("news.updated_at") }}:
                             {{ formatDate(article.updated_at) }}
                         </p>
                     </div>
@@ -88,13 +134,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useToast } from '../services/toastService';
-import { apiGet } from '../services/apiClient';
-import { getCurrentLanguage } from '../i18n';
-import { formatDate } from '../utils/utils';
-import { RefreshCcw } from 'lucide-vue-next';
+import {
+    ref,
+    onMounted,
+    watch,
+    computed,
+    onBeforeUnmount,
+    nextTick,
+} from "vue";
+import { useI18n } from "vue-i18n";
+import { useToast } from "../services/toastService";
+import { apiGet } from "../services/apiClient";
+import { getCurrentLanguage } from "../i18n";
+import { formatDate } from "../utils/utils";
+import { RefreshCcw } from "lucide-vue-next";
 
 interface NewsArticle {
     id: number;
@@ -111,13 +164,15 @@ const { addToast } = useToast();
 const news = ref<NewsArticle[]>([]);
 const loading = ref(false);
 const error = ref<string | null>(null);
-const currentLanguage = ref(getCurrentLanguage() || 'en');
-const searchQuery = ref('');
+const currentLanguage = ref(getCurrentLanguage() || "en");
+const searchQuery = ref("");
 const unreadCount = ref(0);
+const newsCardRefs = ref<Record<number, any>>({});
+let observer: IntersectionObserver | null = null;
 
 const emit = defineEmits<{
-    'change-view': [view: string];
-    'unread-count-updated': [count: number];
+    "change-view": [view: string];
+    "unread-count-updated": [count: number];
 }>();
 
 const getNewsUniqueId = (article: NewsArticle): string => {
@@ -126,32 +181,34 @@ const getNewsUniqueId = (article: NewsArticle): string => {
 
 const isNewsRead = (article: NewsArticle): boolean => {
     const uniqueId = getNewsUniqueId(article);
-    const readNews = JSON.parse(localStorage.getItem('readNews') || '[]');
+    const readNews = JSON.parse(localStorage.getItem("readNews") || "[]");
     return readNews.includes(uniqueId);
 };
 
 const markNewsAsRead = (article: NewsArticle) => {
     if (isNewsRead(article)) return;
     const uniqueId = getNewsUniqueId(article);
-    const readNews = JSON.parse(localStorage.getItem('readNews') || '[]');
+    const readNews = JSON.parse(localStorage.getItem("readNews") || "[]");
     if (!readNews.includes(uniqueId)) {
         readNews.push(uniqueId);
-        localStorage.setItem('readNews', JSON.stringify(readNews));
+        localStorage.setItem("readNews", JSON.stringify(readNews));
         updateUnreadCount();
     }
 };
 
 const updateUnreadCount = () => {
-    unreadCount.value = news.value.filter(article => !isNewsRead(article)).length;
-    emit('unread-count-updated', unreadCount.value);
+    unreadCount.value = news.value.filter(
+        (article) => !isNewsRead(article)
+    ).length;
+    emit("unread-count-updated", unreadCount.value);
 };
 
 const markAllNewsAsRead = () => {
     if (news.value && news.value.length > 0) {
-        const readNews = JSON.parse(localStorage.getItem('readNews') || '[]');
+        const readNews = JSON.parse(localStorage.getItem("readNews") || "[]");
         let updated = false;
 
-        news.value.forEach(article => {
+        news.value.forEach((article) => {
             const uniqueId = getNewsUniqueId(article);
             if (!readNews.includes(uniqueId)) {
                 readNews.push(uniqueId);
@@ -160,7 +217,7 @@ const markAllNewsAsRead = () => {
         });
 
         if (updated) {
-            localStorage.setItem('readNews', JSON.stringify(readNews));
+            localStorage.setItem("readNews", JSON.stringify(readNews));
             updateUnreadCount();
         }
     }
@@ -171,10 +228,10 @@ const fetchNews = async () => {
     error.value = null;
 
     try {
-        const response = await apiGet('/news/', {
+        const response = await apiGet("/news/", {
             headers: {
-                'Accept-Language': currentLanguage.value,
-                'Content-Type': 'application/json',
+                "Accept-Language": currentLanguage.value,
+                "Content-Type": "application/json",
             },
         });
 
@@ -182,8 +239,8 @@ const fetchNews = async () => {
 
         let filteredNews: NewsArticle[] = Array.isArray(allNews)
             ? allNews.filter(
-                (article) => article.language === currentLanguage.value
-            )
+                  (article) => article.language === currentLanguage.value
+              )
             : [];
 
         news.value = filteredNews.sort(
@@ -194,47 +251,92 @@ const fetchNews = async () => {
 
         updateUnreadCount();
     } catch (err: any) {
-        console.error('Failed to fetch news:', err);
+        console.error("Failed to fetch news:", err);
 
         if (err.response?.status === 404) {
-            error.value = t('news.not_found');
+            error.value = t("news.not_found");
         } else if (err.response?.status >= 500) {
-            error.value = t('news.server_error');
+            error.value = t("news.server_error");
         } else if (
-            err.code === 'ENOTFOUND' ||
-            err.message?.includes('Network Error')
+            err.code === "ENOTFOUND" ||
+            err.message?.includes("Network Error")
         ) {
-            error.value = t('news.network_error');
+            error.value = t("news.network_error");
         } else {
-            error.value = t('news.fetch_failed', {
-                error: err.message || 'Unknown error',
+            error.value = t("news.fetch_failed", {
+                error: err.message || "Unknown error",
             });
         }
 
-        addToast(t('news.fetch_failed_toast'), 'error');
+        addToast(t("news.fetch_failed_toast"), "error");
     } finally {
         loading.value = false;
     }
-}
+};
 
 const filteredNews = computed(() => {
     if (!searchQuery.value.trim()) return news.value;
     const q = searchQuery.value.toLowerCase();
-    return news.value.filter(article =>
-        article.title.toLowerCase().includes(q) ||
-        article.content.toLowerCase().includes(q)
+    return news.value.filter(
+        (article) =>
+            article.title.toLowerCase().includes(q) ||
+            article.content.toLowerCase().includes(q)
     );
 });
 
+const setupObserver = () => {
+    if (observer) {
+        observer.disconnect();
+    }
+
+    observer = new IntersectionObserver(
+        (entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    const element = entry.target;
+                    const articleId = Object.keys(newsCardRefs.value).find(
+                        (id) => newsCardRefs.value[parseInt(id)] === element
+                    );
+
+                    if (articleId) {
+                        const article = news.value.find(
+                            (a) => a.id === parseInt(articleId)
+                        );
+                        if (article) {
+                            markNewsAsRead(article);
+                        }
+                    }
+                }
+            });
+        },
+        {
+            threshold: 0.5,
+            rootMargin: "0px",
+        }
+    );
+
+    Object.values(newsCardRefs.value).forEach((element) => {
+        if (element) {
+            observer!.observe(element);
+        }
+    });
+};
+
+watch(filteredNews, () => {
+    nextTick(() => {
+        setupObserver();
+    });
+});
+
 const renderNewsContent = (raw: string): string => {
     let safe = raw
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
 
-    safe = safe.replace(/\r\n|\r|\n/g, '<br>');
+    safe = safe.replace(/\r\n|\r|\n/g, "<br>");
 
     safe = safe.replace(
         /(https?:\/\/[^\s<>"']+)/g,
@@ -244,16 +346,25 @@ const renderNewsContent = (raw: string): string => {
     return safe;
 };
 
-watch(() => getCurrentLanguage(), (newLang) => {
-    if (newLang !== currentLanguage.value) {
-        currentLanguage.value = newLang || 'en';
-        fetchNews();
+watch(
+    () => getCurrentLanguage(),
+    (newLang) => {
+        if (newLang !== currentLanguage.value) {
+            currentLanguage.value = newLang || "en";
+            fetchNews();
+        }
     }
-});
+);
 
 onMounted(() => {
     fetchNews();
 });
+
+onBeforeUnmount(() => {
+    if (observer) {
+        observer.disconnect();
+    }
+});
 </script>
 
 <style scoped>
@@ -289,7 +400,7 @@ onMounted(() => {
 }
 
 .unread-article::before {
-    content: '';
+    content: "";
     position: absolute;
     left: -3px;
     top: 0;
@@ -300,7 +411,6 @@ onMounted(() => {
 }
 
 @keyframes pulseGlow {
-
     0%,
     100% {
         opacity: 0.7;
@@ -385,7 +495,7 @@ onMounted(() => {
 .news-content :deep(br) {
     display: block;
     margin: 0.5rem 0;
-    content: '';
+    content: "";
 }
 
 .news-content :deep(h1),
@@ -407,4 +517,4 @@ onMounted(() => {
 .news-content :deep(h6:first-child) {
     margin-top: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/RegisterView.vue b/src/views/RegisterView.vue
index bba72981..85c65408 100644
--- a/src/views/RegisterView.vue
+++ b/src/views/RegisterView.vue
@@ -1,31 +1,38 @@
 <template>
     <div class="max-w-md mx-auto p-6">
         <h1 class="text-2xl font-semibold mb-6 text-primary-focus">
-            {{ t('auth.register.title') }}
+            {{ t("auth.register.title") }}
         </h1>
-        <RegistrationForm @registered="handleRegistered" @logged-in="handleLoggedIn" />
+        <RegistrationForm
+            @registered="handleRegistered"
+            @logged-in="$emit('logged-in')"
+        />
         <div class="text-center mt-4">
             <p class="text-sm text-base-content/70">
-                {{ t('auth.register.login_link') }}
-                <a @click="$emit('change-view', 'login')" class="link link-primary hover:underline cursor-pointer">{{
-                    t('common.login') }}</a>
+                {{ t("auth.register.login_link") }}
+                <a
+                    @click="$emit('change-view', 'login')"
+                    class="link link-primary hover:underline cursor-pointer"
+                    >{{ t("common.login") }}</a
+                >
             </p>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
-import RegistrationForm from '../components/layout/forms/RegistrationForm.vue';
+import { useI18n } from "vue-i18n";
+import RegistrationForm from "../components/layout/forms/RegistrationForm.vue";
 
 const { t } = useI18n();
-const emit = defineEmits(['registered', 'logged-in', 'change-view']);
+const emit = defineEmits([
+    "registered",
+    "logged-in",
+    "change-view",
+    "show-verify",
+]);
 
-const handleRegistered = () => {
-    emit('registered');
-};
-
-const handleLoggedIn = () => {
-    emit('logged-in');
+const handleRegistered = (data: { email: string }) => {
+    emit("show-verify", data.email);
 };
 </script>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 0ffcf1de..70a2860a 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue';
-import { invoke } from '@tauri-apps/api/core';
-import AnimatedSlider from '../components/ui/AnimatedSlider.vue';
+import { ref, onMounted, onUnmounted, watch, computed, nextTick } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+import AnimatedSlider from "../components/ui/AnimatedSlider.vue";
 import {
     RotateCcw,
     Plus,
@@ -27,30 +27,34 @@ import {
     UserIcon,
     LogIn,
     WifiOff,
-} from 'lucide-vue-next';
-import { useToast } from '../services/toastService';
-import type { ToastPosition } from '../types/toast';
-import { syncService, type SyncServiceState } from '../services/syncService';
-import { settingsService } from '../services/settingsService';
-import { globalUserStatus } from '../composables/useUserStatus';
-import { userService, type UserExternalAccount } from '../services/userService';
-import SyncStatus from '../components/common/SyncStatus.vue';
-import AddAccountModal from '../components/modals/social/account/AddAccountModal.vue';
-import EditAccountModal from '../components/modals/social/account/EditAccountModal.vue';
-import ResetConfirmModal from '../components/modals/settings/ResetConfirmModal.vue';
-import TelemetryInfoModal from '../components/modals/clients/TelemetryInfoModal.vue';
-import ChangeRootFolderModal from '../components/modals/settings/ChangeRootFolderModal.vue';
-import DeleteAccountConfirmModal from '../components/modals/social/account/DeleteAccountConfirmModal.vue';
-import SettingCard from '../components/settings/SettingCard.vue';
-import AccountCard from '../components/settings/AccountCard.vue';
+    Minimize2,
+    MousePointer2,
+    Coffee,
+    Terminal,
+} from "lucide-vue-next";
+import { useToast } from "../services/toastService";
+import type { ToastPosition } from "../types/toast";
+import { syncService, type SyncServiceState } from "../services/syncService";
+import { settingsService } from "../services/settingsService";
+import { globalUserStatus } from "../composables/useUserStatus";
+import { userService, type UserExternalAccount } from "../services/userService";
+import SyncStatus from "../components/common/SyncStatus.vue";
+import AddAccountModal from "../components/modals/social/account/AddAccountModal.vue";
+import EditAccountModal from "../components/modals/social/account/EditAccountModal.vue";
+import ResetConfirmModal from "../components/modals/settings/ResetConfirmModal.vue";
+import TelemetryInfoModal from "../components/modals/clients/TelemetryInfoModal.vue";
+import ChangeRootFolderModal from "../components/modals/settings/ChangeRootFolderModal.vue";
+import DeleteAccountConfirmModal from "../components/modals/social/account/DeleteAccountConfirmModal.vue";
+import SettingCard from "../components/settings/SettingCard.vue";
+import AccountCard from "../components/settings/AccountCard.vue";
 import {
     changeLanguage,
     getAvailableLanguages,
     getCurrentLanguage,
-} from '../i18n';
-import { useI18n } from 'vue-i18n';
-import { formatDate } from '../utils/utils';
-import { useModal } from '../services/modalService';
+} from "../i18n";
+import { useI18n } from "vue-i18n";
+import { formatDate } from "../utils/utils";
+import { useModal } from "../services/modalService";
 
 interface Account {
     id: string;
@@ -61,31 +65,29 @@ interface Account {
     is_active: boolean;
 }
 
-
 const settings = settingsService.settings;
 const accounts = ref<Account[]>([]);
 const remoteAccounts = ref<UserExternalAccount[]>([]);
 const remoteAccountsLoading = ref(false);
 const isAccountSyncing = ref(false);
-const ACCOUNT_SYNC_PROVIDER = 'collapseloader';
-const activeTab = ref<'general' | 'sync' | 'accounts'>('general');
+const activeTab = ref<"general" | "sync" | "accounts">("general");
 const loading = ref(true);
 const isRefreshing = ref(false);
 const { addToast, setToastPosition, getToastPosition } = useToast();
 
 const editingAccount = ref<Account | null>(null);
 const accountToDelete = ref<Account | null>(null);
-const searchQuery = ref('');
+const searchQuery = ref("");
 
 const { showModal } = useModal();
 
 const ramOptions = [
-    { mb: 2048, label: '2 GB' },
-    { mb: 4096, label: '4 GB' },
-    { mb: 6144, label: '6 GB' },
-    { mb: 8192, label: '8 GB' },
-    { mb: 16384, label: '16 GB' },
-    { mb: 32768, label: '32 GB' },
+    { mb: 2048, label: "2 GB" },
+    { mb: 4096, label: "4 GB" },
+    { mb: 6144, label: "6 GB" },
+    { mb: 8192, label: "8 GB" },
+    { mb: 16384, label: "16 GB" },
+    { mb: 32768, label: "32 GB" },
 ];
 const ramOptionIndex = ref(0);
 const systemMemory = ref<number | null>(null);
@@ -151,14 +153,13 @@ watch(
     { immediate: true }
 );
 
-
 const loadSettings = async () => {
     try {
         loading.value = true;
         await settingsService.loadSettings();
     } catch (error) {
-        console.error('Failed to load settings:', error);
-        addToast(t('settings.load_settings_failed', { error }), 'error');
+        console.error("Failed to load settings:", error);
+        addToast(t("settings.load_settings_failed", { error }), "error");
     } finally {
         loading.value = false;
     }
@@ -170,7 +171,7 @@ const loadAccounts = async (skipLoading = false) => {
             isRefreshing.value = true;
         }
 
-        const fetchedAccounts = await invoke<Account[]>('get_accounts');
+        const fetchedAccounts = await invoke<Account[]>("get_accounts");
 
         await nextTick();
         accounts.value = fetchedAccounts;
@@ -178,20 +179,20 @@ const loadAccounts = async (skipLoading = false) => {
         if (accounts.value.length === 0) {
             const { username, tags } = generateRandomAccount();
             try {
-                const newAccountId = await invoke<string>('add_account', {
+                const newAccountId = await invoke<string>("add_account", {
                     username,
                     tags,
                 });
 
-                await invoke('set_active_account', { id: newAccountId });
-                accounts.value = await invoke<Account[]>('get_accounts');
+                await invoke("set_active_account", { id: newAccountId });
+                accounts.value = await invoke<Account[]>("get_accounts");
             } catch (error) {
-                console.error('Failed to create default account:', error);
+                console.error("Failed to create default account:", error);
             }
         }
     } catch (error) {
-        console.error('Failed to load accounts:', error);
-        addToast(t('settings.load_accounts_failed', { error }), 'error');
+        console.error("Failed to load accounts:", error);
+        addToast(t("settings.load_accounts_failed", { error }), "error");
     } finally {
         if (!skipLoading) {
             isRefreshing.value = false;
@@ -208,12 +209,10 @@ const loadRemoteAccounts = async () => {
     remoteAccountsLoading.value = true;
     try {
         const fetchedAccounts = await userService.getExternalAccounts();
-        remoteAccounts.value = fetchedAccounts.filter(
-            (account) => account.provider === ACCOUNT_SYNC_PROVIDER
-        );
+        remoteAccounts.value = fetchedAccounts;
     } catch (error) {
-        console.error('Failed to load remote accounts:', error);
-        addToast(t('settings.load_remote_accounts_failed', { error }), 'error');
+        console.error("Failed to load remote accounts:", error);
+        addToast(t("settings.load_remote_accounts_failed", { error }), "error");
     } finally {
         remoteAccountsLoading.value = false;
     }
@@ -221,28 +220,28 @@ const loadRemoteAccounts = async () => {
 
 const syncLocalAccountsToCloud = async () => {
     if (!isAuthenticated.value) {
-        addToast(t('settings.sync_login_required'), 'error');
+        addToast(t("settings.sync_login_required"), "error");
         return;
     }
 
     isAccountSyncing.value = true;
     try {
         const [localAccounts, externalAccounts] = await Promise.all([
-            invoke<Account[]>('get_accounts'),
+            invoke<Account[]>("get_accounts"),
             userService.getExternalAccounts(),
         ]);
 
-        const cloudAccounts = externalAccounts.filter(
-            (account) => account.provider === ACCOUNT_SYNC_PROVIDER
+        const cloudAccounts = externalAccounts;
+        const localUsernames = new Set(
+            localAccounts.map((account) => account.username)
         );
-        const localUsernames = new Set(localAccounts.map((account) => account.username));
         const cloudUsernameMap = new Map(
-            cloudAccounts.map((account) => [account.external_id, account])
+            cloudAccounts.map((account) => [account.display_name, account])
         );
 
         await Promise.allSettled(
             cloudAccounts
-                .filter((account) => !localUsernames.has(account.external_id))
+                .filter((account) => account.display_name && !localUsernames.has(account.display_name))
                 .map((account) => userService.deleteExternalAccount(account.id))
         );
 
@@ -250,14 +249,12 @@ const syncLocalAccountsToCloud = async () => {
             if (!cloudUsernameMap.has(localAccount.username)) {
                 try {
                     await userService.addExternalAccount({
-                        provider: ACCOUNT_SYNC_PROVIDER,
-                        external_id: localAccount.username,
                         display_name: localAccount.username,
                         metadata: { tags: localAccount.tags || [] },
                     });
                 } catch (error) {
                     console.warn(
-                        'Failed to sync local account to Atlas:',
+                        "Failed to sync local account to Atlas:",
                         localAccount.username,
                         error
                     );
@@ -265,11 +262,14 @@ const syncLocalAccountsToCloud = async () => {
             }
         }
 
-        addToast(t('settings.sync_accounts_to_cloud_success'), 'success');
+        addToast(t("settings.sync_accounts_to_cloud_success"), "success");
         await loadRemoteAccounts();
     } catch (error) {
-        console.error('Failed to sync accounts to cloud:', error);
-        addToast(t('settings.sync_accounts_to_cloud_failed', { error }), 'error');
+        console.error("Failed to sync accounts to cloud:", error);
+        addToast(
+            t("settings.sync_accounts_to_cloud_failed", { error }),
+            "error"
+        );
     } finally {
         isAccountSyncing.value = false;
     }
@@ -277,41 +277,44 @@ const syncLocalAccountsToCloud = async () => {
 
 const syncLocalAccountsFromCloud = async () => {
     if (!isAuthenticated.value) {
-        addToast(t('settings.sync_login_required'), 'error');
+        addToast(t("settings.sync_login_required"), "error");
         return;
     }
 
     isAccountSyncing.value = true;
     try {
         const externalAccounts = await userService.getExternalAccounts();
-        const cloudAccounts = externalAccounts.filter(
-            (account) => account.provider === ACCOUNT_SYNC_PROVIDER
-        );
+        const cloudAccounts = externalAccounts;
 
         if (cloudAccounts.length === 0) {
-            addToast(t('settings.remote_accounts_empty'), 'info');
+            addToast(t("settings.remote_accounts_empty"), "info");
             return;
         }
 
-        const localAccountsData = await invoke<Account[]>('get_accounts');
-        const localUsernames = new Set(localAccountsData.map((account) => account.username));
+        const localAccountsData = await invoke<Account[]>("get_accounts");
+        const localUsernames = new Set(
+            localAccountsData.map((account) => account.username)
+        );
 
         for (const cloudAccount of cloudAccounts) {
-            if (!localUsernames.has(cloudAccount.external_id)) {
-                await invoke('add_account', {
-                    username: cloudAccount.external_id,
+            if (cloudAccount.display_name && !localUsernames.has(cloudAccount.display_name)) {
+                await invoke("add_account", {
+                    username: cloudAccount.display_name,
                     tags: Array.isArray((cloudAccount.metadata as any)?.tags)
                         ? (cloudAccount.metadata as any).tags
-                        : ['cloud-sync'],
+                        : ["cloud-sync"],
                 });
             }
         }
 
-        addToast(t('settings.sync_accounts_from_cloud_success'), 'success');
+        addToast(t("settings.sync_accounts_from_cloud_success"), "success");
         await loadAccounts();
     } catch (error) {
-        console.error('Failed to import accounts from cloud:', error);
-        addToast(t('settings.sync_accounts_from_cloud_failed', { error }), 'error');
+        console.error("Failed to import accounts from cloud:", error);
+        addToast(
+            t("settings.sync_accounts_from_cloud_failed", { error }),
+            "error"
+        );
     } finally {
         isAccountSyncing.value = false;
     }
@@ -329,21 +332,21 @@ const loadFlags = async () => {
     try {
         await settingsService.loadFlags();
     } catch (error) {
-        console.error('Failed to load flags:', error);
-        addToast(t('settings.load_flags_failed', { error }), 'error');
+        console.error("Failed to load flags:", error);
+        addToast(t("settings.load_flags_failed", { error }), "error");
     }
 };
 
 const showAddAccountDialog = () => {
     showModal(
-        'add-account',
+        "add-account",
         AddAccountModal,
         {
-            title: t('settings.add_account_title'),
+            title: t("settings.add_account_title"),
         },
         {},
         {
-            'account-added': handleAccountAdded,
+            "account-added": handleAccountAdded,
         }
     );
 };
@@ -351,28 +354,28 @@ const showAddAccountDialog = () => {
 const showEditAccountDialog = (account: Account) => {
     editingAccount.value = account;
     showModal(
-        'edit-account',
+        "edit-account",
         EditAccountModal,
         {
-            title: t('settings.edit_account_title'),
+            title: t("settings.edit_account_title"),
         },
         { account },
         {
-            'account-updated': handleAccountUpdated,
+            "account-updated": handleAccountUpdated,
         }
     );
 };
 
 const showResetConfirmDialog = () => {
     showModal(
-        'reset-confirm',
+        "reset-confirm",
         ResetConfirmModal,
         {
-            title: t('settings.reset_title'),
+            title: t("settings.reset_title"),
         },
         {},
         {
-            'settings-reset': handleSettingsReset,
+            "settings-reset": handleSettingsReset,
         }
     );
 };
@@ -380,24 +383,24 @@ const showResetConfirmDialog = () => {
 const showDeleteConfirmDialog = (account: Account) => {
     accountToDelete.value = account;
     showModal(
-        'delete-confirm',
+        "delete-confirm",
         DeleteAccountConfirmModal,
         {
-            title: t('settings.delete_account_title'),
+            title: t("settings.delete_account_title"),
         },
         { account },
         {
-            'account-deleted': handleAccountDeleted,
+            "account-deleted": handleAccountDeleted,
         }
     );
 };
 
 const showTelemetryModal = () => {
     showModal(
-        'telemetry-info',
+        "telemetry-info",
         TelemetryInfoModal,
         {
-            title: t('settings.telemetry_info_title'),
+            title: t("settings.telemetry_info_title"),
         },
         {},
         {}
@@ -406,9 +409,9 @@ const showTelemetryModal = () => {
 
 const showChangeRootFolderDialog = () => {
     showModal(
-        'change-root-folder',
+        "change-root-folder",
         ChangeRootFolderModal,
-        { title: t('settings.change_root.title') },
+        { title: t("settings.change_root.title") },
         {},
         {}
     );
@@ -444,53 +447,68 @@ const editAccount = (account: Account) => {
 
 const setActiveAccount = async (account: Account) => {
     try {
-        await invoke('set_active_account', { id: account.id });
+        await invoke("set_active_account", { id: account.id });
         await loadAccounts(true);
         addToast(
-            t('settings.account_set_active', { username: account.username }),
-            'success'
+            t("settings.account_set_active", { username: account.username }),
+            "success"
         );
     } catch (error) {
-        console.error('Failed to set active account:', error);
-        addToast(t('settings.account_set_active_failed', { error }), 'error');
+        console.error("Failed to set active account:", error);
+        addToast(t("settings.account_set_active_failed", { error }), "error");
     }
 };
 
-
 const getFormattedLabel = (key: string) => {
-    const words = key.split('_');
+    const words = key.split("_");
 
-    if (key === 'ram') {
-        return 'RAM';
+    if (key === "ram") {
+        return "RAM";
     }
 
     if (key == "irc_chat") {
-        return t('settings.irc_chat');
+        return t("settings.irc_chat");
     }
 
-    if (key === 'hash_verify') {
-        return t('settings.hash_verify');
+    if (key === "hash_verify") {
+        return t("settings.hash_verify");
     }
 
-    if (key === 'sync_client_settings') {
-        return t('settings.sync_client_settings');
+    if (key === "sync_client_settings") {
+        return t("settings.sync_client_settings");
     }
 
-    if (key === 'discord_rpc_enabled') {
-        return 'Discord Rich Presence';
+    if (key === "discord_rpc_enabled") {
+        return "Discord Rich Presence";
     }
 
-    if (key === 'enable_telemetry') {
-        return t('settings.telemetry');
+    if (key === "enable_telemetry") {
+        return t("settings.telemetry");
     }
 
-    if (key === 'dpi_bypass') {
+    if (key === "dpi_bypass") {
         return "DPI Bypass (Zapret by bol-van)";
     }
 
+    if (key === "minimize_to_tray_on_launch") {
+        return t("settings.minimize_to_tray_on_launch");
+    }
+
+    if (key === "close_to_tray") {
+        return t("settings.close_to_tray");
+    }
+
+    if (key === "java_path") {
+        return "Custom Java Path";
+    }
+
+    if (key === "java_args") {
+        return "Custom Java Arguments";
+    }
+
     return words
         .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(' ');
+        .join(" ");
 };
 
 const isFeatureOnline = (key: string) => {
@@ -506,7 +524,7 @@ const isFeatureOnline = (key: string) => {
 const generateRandomAccount = () => {
     const randomDigits = Math.floor(10000 + Math.random() * 90000);
     const username = `Collapse${randomDigits}`;
-    return { username, tags: ['auto-generated'] };
+    return { username, tags: ["auto-generated"] };
 };
 
 const selectedTag = ref<string | null>(null);
@@ -552,9 +570,9 @@ const syncState = ref<SyncServiceState>(syncService.getState());
 let unsubscribeSyncService: (() => void) | null = null;
 
 const handleUploadToCloud = async () => {
-    if (typeof t !== 'function') {
-        console.error('Translation function t is not available');
-        addToast('Sync failed: Translation service not ready', 'error');
+    if (typeof t !== "function") {
+        console.error("Translation function t is not available");
+        addToast("Sync failed: Translation service not ready", "error");
         return;
     }
 
@@ -568,11 +586,11 @@ const handleUploadToCloud = async () => {
 const handleDownloadFromCloud = async () => {
     try {
         await syncService.downloadFromCloud();
-        addToast(t('settings.download_success'), 'success');
+        addToast(t("settings.download_success"), "success");
         await loadSettings();
         await loadAccounts();
     } catch (error) {
-        addToast(t('settings.download_failed', { error }), 'error');
+        addToast(t("settings.download_failed", { error }), "error");
     }
 };
 
@@ -586,8 +604,8 @@ const handleLanguageChange = async (languageCode: string) => {
         currentLanguage.value = languageCode as any;
         await changeLanguage(languageCode);
     } catch (error) {
-        console.error('Failed to change language:', error);
-        addToast(t('settings.language_change_failed', { error }), 'error');
+        console.error("Failed to change language:", error);
+        addToast(t("settings.language_change_failed", { error }), "error");
     }
 };
 
@@ -596,16 +614,16 @@ const getSettingDescription = (key: string) => {
 };
 
 const openDataFolder = async () => {
-    await invoke('open_data_folder');
+    await invoke("open_data_folder");
 };
 
 const resetRequirements = async () => {
     try {
-        await invoke('reset_requirements');
-        addToast(t('settings.reset_requirements_success'), 'success');
+        await invoke("reset_requirements");
+        addToast(t("settings.reset_requirements_success"), "success");
     } catch (error) {
-        console.error('Failed to reset requirements:', error);
-        addToast(t('settings.reset_requirements_failed'), 'error');
+        console.error("Failed to reset requirements:", error);
+        addToast(t("settings.reset_requirements_failed"), "error");
     }
 };
 
@@ -624,10 +642,10 @@ onMounted(async () => {
     }
 
     try {
-        const memoryBytes = await invoke<number>('get_system_memory');
+        const memoryBytes = await invoke<number>("get_system_memory");
         systemMemory.value = Math.floor(memoryBytes / (1024 * 1024));
     } catch (error) {
-        console.error('Failed to get system memory:', error);
+        console.error("Failed to get system memory:", error);
         systemMemory.value = null;
     }
 });
@@ -645,14 +663,14 @@ watch(
         if (newValue === undefined) return;
 
         try {
-            await invoke('set_optional_telemetry', { enabled: newValue });
+            await invoke("set_optional_telemetry", { enabled: newValue });
         } catch (error) {
-            console.error('Failed to update telemetry setting:', error);
+            console.error("Failed to update telemetry setting:", error);
             addToast(
                 newValue
-                    ? t('toast.telemetry.analytics_enable_failed', { error })
-                    : t('toast.telemetry.analytics_disable_failed', { error }),
-                'error'
+                    ? t("toast.telemetry.analytics_enable_failed", { error })
+                    : t("toast.telemetry.analytics_disable_failed", { error }),
+                "error"
             );
 
             if (settings.enable_telemetry) {
@@ -665,290 +683,507 @@ watch(
 const toastPosition = ref<ToastPosition>(getToastPosition());
 
 const toastPositionOptions = [
-    { value: 'bottom-right', label: t('settings.toast_position.bottom_right') },
-    { value: 'bottom-left', label: t('settings.toast_position.bottom_left') },
-    { value: 'top-right', label: t('settings.toast_position.top_right') },
-    { value: 'top-left', label: t('settings.toast_position.top_left') },
+    { value: "bottom-right", label: t("settings.toast_position.bottom_right") },
+    { value: "bottom-left", label: t("settings.toast_position.bottom_left") },
+    { value: "top-right", label: t("settings.toast_position.top_right") },
+    { value: "top-left", label: t("settings.toast_position.top_left") },
     {
-        value: 'bottom-center',
-        label: t('settings.toast_position.bottom_center'),
+        value: "bottom-center",
+        label: t("settings.toast_position.bottom_center"),
     },
-    { value: 'top-center', label: t('settings.toast_position.top_center') },
+    { value: "top-center", label: t("settings.toast_position.top_center") },
 ];
 
 const handleToastPositionChange = (position: ToastPosition) => {
     toastPosition.value = position;
     setToastPosition(position);
 
-    addToast(t('settings.toast_position.preview_message'), 'info', 3000);
+    addToast(t("settings.toast_position.preview_message"), "info", 3000);
 };
 </script>
 <template>
-    <div class="max-w-4xl mx-auto slide-up">
+    <div class="max-w-6xl mx-auto slide-up px-4">
         <div v-if="!loading" class="transition-opacity duration-300">
-            <div role="tablist" class="tabs tabs-boxed mb-5 flex justify-center gap-4">
-                <a @click="activeTab = 'general'" class="tab transition-all duration-300 z-50" :class="{
-                    'tab-active transform scale-105 shadow-md bg-base-300':
-                        activeTab === 'general',
-                    'hover:bg-base-300': activeTab !== 'general',
-                }">
+            <div
+                role="tablist"
+                class="tabs tabs-boxed mb-4 flex justify-center gap-2"
+            >
+                <a
+                    @click="activeTab = 'general'"
+                    class="tab transition-all duration-300 z-50"
+                    :class="{
+                        'tab-active transform scale-105 shadow-md bg-base-300':
+                            activeTab === 'general',
+                        'hover:bg-base-300': activeTab !== 'general',
+                    }"
+                >
                     <SettingsIcon class="w-4 h-4 mr-2" />
-                    {{ t('settings.general') }}
+                    {{ t("settings.general") }}
                 </a>
-                <a @click="activeTab = 'sync'" class="tab transition-all duration-300" :class="{
-                    'tab-active transform scale-105 shadow-md bg-base-300':
-                        activeTab === 'sync',
-                    'hover:bg-base-300': activeTab !== 'sync',
-                }">
+                <a
+                    @click="activeTab = 'sync'"
+                    class="tab transition-all duration-300"
+                    :class="{
+                        'tab-active transform scale-105 shadow-md bg-base-300':
+                            activeTab === 'sync',
+                        'hover:bg-base-300': activeTab !== 'sync',
+                    }"
+                >
                     <Cloud class="w-4 h-4 mr-2" />
-                    {{ t('settings.sync') }}
+                    {{ t("settings.sync") }}
                 </a>
-                <a @click="activeTab = 'accounts'" class="tab transition-all duration-300" :class="{
-                    'tab-active transform scale-105 shadow-md bg-base-300':
-                        activeTab === 'accounts',
-                    'hover:bg-base-300': activeTab !== 'accounts',
-                }">
+                <a
+                    @click="activeTab = 'accounts'"
+                    class="tab transition-all duration-300"
+                    :class="{
+                        'tab-active transform scale-105 shadow-md bg-base-300':
+                            activeTab === 'accounts',
+                        'hover:bg-base-300': activeTab !== 'accounts',
+                    }"
+                >
                     <User class="w-4 h-4 mr-2" />
-                    {{ t('settings.accounts') }}
+                    {{ t("settings.accounts") }}
                 </a>
             </div>
             <transition name="tab-switch" mode="out-in">
-                <div v-if="activeTab === 'general'" key="general" class="space-y-6">
-                    <div v-for="([key, field], index) in filteredSettingsEntries" :key="key">
-                        <SettingCard :field="field" :delay="index * 0.05" :description="getSettingDescription(key)"
-                            :layout="(key === 'ram' || (typeof field.value !== 'boolean' && key !== 'language')) ? 'col' : 'row'">
-                            <template #title>
-                                <MemoryStick v-if="key === 'ram'" class="w-5 h-5 text-primary" />
-                                <Languages v-if="key === 'language'" class="w-5 h-5 text-primary" />
-                                <img src="@/assets/icons/discord.svg" v-if="key === 'discord_rpc_enabled'"
-                                    class="w-5 h-5 discord-icon" />
-                                <ChartNoAxesCombined v-if="key === 'optional_telemetry'" class="w-5 h-5 text-primary" />
-                                <Waypoints v-if="key === 'cordshare'" class="w-5 h-5 text-primary" />
-                                <MessagesSquare v-if="key === 'irc_chat'" class="w-5 h-5 text-primary" />
-                                <BadgeCheck v-if="key === 'hash_verify'" class="w-5 h-5 text-primary" />
-                                <FileText v-if="key === 'custom_clients_display'" class="w-5 h-5 text-primary" />
-                                <FolderSync v-if="key === 'sync_client_settings'" class="w-5 h-5 text-primary" />
-                                <CloudCog v-if="key === 'dpi_bypass'" class="w-5 h-5 text-primary" />
-                                {{ getFormattedLabel(key) }}
-                                <div v-if="key === 'optional_telemetry'" class="tooltip tooltip-top"
-                                    :data-tip="$t('settings.telemetry_info_title')">
-                                    <Info class="w-5 h-5 text-primary cursor-pointer" @click="showTelemetryModal" />
-                                </div>
-                            </template>
+                <div
+                    v-if="activeTab === 'general'"
+                    key="general"
+                    class="space-y-4"
+                >
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
+                        <div
+                            v-for="(
+                                [key, field], index
+                            ) in filteredSettingsEntries"
+                            :key="key"
+                            class="h-full flex w-full"
+                        >
+                            <SettingCard
+                                :field="field"
+                                :delay="index * 0.05"
+                                :description="getSettingDescription(key)"
+                                :layout="
+                                    key === 'ram' ||
+                                    (typeof field.value !== 'boolean' &&
+                                        key !== 'language')
+                                        ? 'col'
+                                        : 'row'
+                                "
+                            >
+                                <template #title>
+                                    <MemoryStick
+                                        v-if="key === 'ram'"
+                                        class="w-5 h-5 text-primary"
+                                    />
+                                    <Languages
+                                        v-if="key === 'language'"
+                                        class="w-5 h-5 text-primary"
+                                    />
+                                    <img
+                                        src="@/assets/icons/discord.svg"
+                                        v-if="key === 'discord_rpc_enabled'"
+                                        class="w-5 h-5 discord-icon"
+                                    />
+                                    <ChartNoAxesCombined
+                                        v-if="key === 'optional_telemetry'"
+                                        class="w-5 h-5 text-primary"
+                                    />
+                                    <Waypoints
+                                        v-if="key === 'cordshare'"
+                                        class="w-5 h-5 text-primary"
+                                    />
+                                    <MessagesSquare
+                                        v-if="key === 'irc_chat'"
+                                        class="w-5 h-5 text-primary"
+                                    />
+                                    <BadgeCheck
+                                        v-if="key === 'hash_verify'"
+                                        class="w-5 h-5 text-primary"
+                                    />
+                                    <FileText
+                                        v-if="key === 'custom_clients_display'"
+                                        class="w-5 h-5 text-primary"
+                                    />
+                                    <FolderSync
+                                        v-if="key === 'sync_client_settings'"
+                                        class="w-5 h-5 text-primary"
+                                    />
+                                    <CloudCog
+                                        v-if="key === 'dpi_bypass'"
+                                        class="w-5 h-5 text-primary"
+                                    />
+                                    <Minimize2
+                                        v-if="
+                                            key === 'minimize_to_tray_on_launch'
+                                        "
+                                        class="w-5 h-5 text-primary"
+                                    />
+                                    <MousePointer2
+                                        v-if="key === 'close_to_tray'"
+                                        class="w-5 h-5 text-primary"
+                                    />
+                                    <Coffee
+                                        v-if="key === 'java_path'"
+                                        class="w-5 h-5 text-primary"
+                                    />
+                                    <Terminal
+                                        v-if="key === 'java_args'"
+                                        class="w-5 h-5 text-primary"
+                                    />
+                                    {{ getFormattedLabel(key) }}
+                                    <div
+                                        v-if="key === 'optional_telemetry'"
+                                        class="tooltip tooltip-top"
+                                        :data-tip="
+                                            $t('settings.telemetry_info_title')
+                                        "
+                                    >
+                                        <Info
+                                            class="w-5 h-5 text-primary cursor-pointer"
+                                            @click="showTelemetryModal"
+                                        />
+                                    </div>
+                                </template>
 
-                            <div v-if="key === 'ram'" class="space-y-3 w-full">
-                                <div class="flex items-center gap-2">
-                                    <AnimatedSlider v-model="ramOptionIndex" :min="0" :max="ramOptions.length - 1"
-                                        @update:modelValue="handleSliderChange" class="grow" />
-                                    <div class="flex items-center gap-2 rounded-md p-2 bg-base-200/50">
-                                        <input v-if="settings.ram" v-model.number="settings.ram.value" type="number"
-                                            min="512" step="512"
-                                            class="input input-ghost input-xs text-right p-0 h-6 w-12 font-mono" />
-                                        <span class="text-xs opacity-50">MB</span>
+                                <div
+                                    v-if="key === 'ram'"
+                                    class="space-y-3 w-full"
+                                >
+                                    <div class="flex items-center gap-2">
+                                        <AnimatedSlider
+                                            v-model="ramOptionIndex"
+                                            :min="0"
+                                            :max="ramOptions.length - 1"
+                                            @update:modelValue="
+                                                handleSliderChange
+                                            "
+                                            class="grow"
+                                        />
+                                        <div
+                                            class="flex items-center gap-2 rounded-md p-2 bg-base-200/50"
+                                        >
+                                            <input
+                                                v-if="settings.ram"
+                                                v-model.number="
+                                                    settings.ram.value
+                                                "
+                                                type="number"
+                                                min="512"
+                                                step="512"
+                                                class="input input-ghost input-xs text-right p-0 h-6 w-12 font-mono"
+                                            />
+                                            <span class="text-xs opacity-50"
+                                                >MB</span
+                                            >
+                                        </div>
+                                    </div>
+                                    <div
+                                        v-if="showRamWarning"
+                                        class="alert alert-warning alert-dash mt-2 py-2 text-sm"
+                                    >
+                                        <span>{{
+                                            t("settings.ram.warning", {
+                                                selectedRamMb,
+                                            })
+                                        }}</span>
                                     </div>
                                 </div>
-                                <div v-if="showRamWarning" class="alert alert-warning alert-dash mt-2 py-2 text-sm">
-                                    <span>{{ t('settings.ram.warning', { selectedRamMb }) }}</span>
-                                </div>
-                            </div>
-
-                            <div v-else-if="key === 'language'">
-                                <select :value="currentLanguage" @change="
-                                    handleLanguageChange(
-                                        ($event.target as HTMLSelectElement)
-                                            .value
-                                    )
-                                    " class="select select-bordered select-sm w-48 bg-base-100">
-                                    <option v-for="lang in availableLanguages" :key="lang.code" :value="lang.code">
-                                        {{ lang.nativeName }} ({{ lang.name }})
-                                    </option>
-                                </select>
-                            </div>
 
-                            <div v-else-if="typeof field.value === 'boolean'">
-                                <input type="checkbox" v-if="!isFeatureOnline(key) || isAuthenticated"
-                                    v-model="field.value" class="toggle toggle-primary toggle-sm" />
+                                <div v-else-if="key === 'language'">
+                                    <select
+                                        :value="currentLanguage"
+                                        @change="
+                                            handleLanguageChange(
+                                                (
+                                                    $event.target as HTMLSelectElement
+                                                ).value
+                                            )
+                                        "
+                                        class="select select-bordered select-sm w-48 bg-base-100"
+                                    >
+                                        <option
+                                            v-for="lang in availableLanguages"
+                                            :key="lang.code"
+                                            :value="lang.code"
+                                        >
+                                            {{ lang.nativeName }} ({{
+                                                lang.name
+                                            }})
+                                        </option>
+                                    </select>
+                                </div>
 
-                                <div v-else class="tooltip tooltip-left" :data-tip="$t('settings.login_required')">
-                                    <input type="checkbox" :checked="false"
-                                        class="toggle toggle-primary toggle-sm pointer-events-none opacity-50"
-                                        tabindex="-1" />
+                                <div
+                                    v-else-if="typeof field.value === 'boolean'"
+                                >
+                                    <input
+                                        type="checkbox"
+                                        v-if="
+                                            !isFeatureOnline(key) ||
+                                            isAuthenticated
+                                        "
+                                        v-model="field.value"
+                                        class="toggle toggle-primary toggle-sm"
+                                    />
+
+                                    <div
+                                        v-else
+                                        class="tooltip tooltip-left"
+                                        :data-tip="
+                                            $t('settings.login_required')
+                                        "
+                                    >
+                                        <input
+                                            type="checkbox"
+                                            :checked="false"
+                                            class="toggle toggle-primary toggle-sm pointer-events-none opacity-50"
+                                            tabindex="-1"
+                                        />
+                                    </div>
                                 </div>
-                            </div>
 
-                            <div v-else class="w-full">
-                                <input v-model="field.value" class="input input-bordered w-full bg-base-100" :type="typeof field.value === 'number'
-                                    ? 'number'
-                                    : 'text'
-                                    " />
-                            </div>
-                        </SettingCard>
+                                <div v-else class="w-full">
+                                    <input
+                                        v-model="field.value"
+                                        class="input input-bordered w-full bg-base-100"
+                                        :type="
+                                            typeof field.value === 'number'
+                                                ? 'number'
+                                                : 'text'
+                                        "
+                                    />
+                                </div>
+                            </SettingCard>
+                        </div>
                     </div>
-                    <SettingCard :delay="filteredSettingsEntries.length * 0.05" layout="row"
-                        :description="$t('settings.toast_position.description')">
+                    <SettingCard
+                        :delay="filteredSettingsEntries.length * 0.05"
+                        layout="row"
+                        :description="$t('settings.toast_position.description')"
+                    >
                         <template #title>
                             <Info class="w-5 h-5 text-primary" />
-                            {{ $t('settings.toast_position.title') }}
+                            {{ $t("settings.toast_position.title") }}
                         </template>
                         <div>
-                            <select v-model="toastPosition" @change="handleToastPositionChange(toastPosition)"
-                                class="select select-bordered select-sm w-48 bg-base-100">
-                                <option v-for="option in toastPositionOptions" :key="option.value"
-                                    :value="option.value">
+                            <select
+                                v-model="toastPosition"
+                                @change="
+                                    handleToastPositionChange(toastPosition)
+                                "
+                                class="select select-bordered select-sm w-48 bg-base-100"
+                            >
+                                <option
+                                    v-for="option in toastPositionOptions"
+                                    :key="option.value"
+                                    :value="option.value"
+                                >
                                     {{ option.label }}
                                 </option>
                             </select>
                         </div>
                     </SettingCard>
-                    <div class="card bg-base-200 shadow-md border border-base-300">
-                        <div class="card-body p-4">
+                    <div
+                        class="card bg-base-200 shadow-md border border-base-300"
+                    >
+                        <div class="card-body p-3">
                             <h2
-                                class="card-title text-lg font-semibold text-primary-focus mb-4 flex items-center gap-2">
+                                class="card-title text-sm font-semibold text-primary-focus mb-2 flex items-center gap-2"
+                            >
                                 <SettingsIcon class="w-5 h-5" />
-                                {{ $t('settings.actions') }}
+                                {{ $t("settings.actions") }}
                             </h2>
-                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                 <button
                                     class="btn btn-neutral btn-sm w-full sm:w-auto flex items-center gap-2 hover:btn-primary-focus transition-all duration-200"
-                                    @click="openDataFolder">
+                                    @click="openDataFolder"
+                                >
                                     <Folder class="w-4 h-4" />
-                                    {{ $t('settings.open_data') }}
+                                    {{ $t("settings.open_data") }}
                                 </button>
                                 <button
                                     class="btn btn-neutral btn-sm w-full sm:w-auto flex items-center gap-2 hover:btn-primary-focus transition-all duration-200"
-                                    @click="showChangeRootFolderDialog">
+                                    @click="showChangeRootFolderDialog"
+                                >
                                     <Folder class="w-4 h-4" />
-                                    {{ $t('settings.change_root.action') }}
+                                    {{ $t("settings.change_root.action") }}
                                 </button>
                                 <button
                                     class="btn btn-neutral btn-sm w-full sm:w-auto flex items-center gap-2 hover:btn-secondary-focus transition-all duration-200"
-                                    @click="resetRequirements">
+                                    @click="resetRequirements"
+                                >
                                     <RotateCcw class="w-4 h-4" />
-                                    {{ $t('settings.reset_requirements') }}
+                                    {{ $t("settings.reset_requirements") }}
                                 </button>
 
                                 <button
                                     class="btn btn-neutral btn-sm w-full sm:w-auto flex items-center gap-2 hover:btn-error-focus transition-all duration-200"
-                                    @click="resetSettings">
+                                    @click="resetSettings"
+                                >
                                     <RotateCcw class="w-4 h-4 text-warning" />
-                                    {{ $t('settings.reset_settings') }}
+                                    {{ $t("settings.reset_settings") }}
                                 </button>
                             </div>
                         </div>
                     </div>
                 </div>
 
-                <div v-else-if="activeTab === 'sync'" key="sync" class="space-y-6">
-                    <div class="card bg-base-200 shadow-md border border-base-300">
-                        <div class="card-body p-4">
+                <div
+                    v-else-if="activeTab === 'sync'"
+                    key="sync"
+                    class="space-y-3"
+                >
+                    <div
+                        class="card bg-base-200 shadow-md border border-base-300"
+                    >
+                        <div class="card-body p-3">
                             <h2
-                                class="card-title text-lg font-semibold text-primary-focus mb-4 flex items-center gap-2">
+                                class="card-title text-base font-semibold text-primary-focus mb-2 flex items-center gap-2"
+                            >
                                 <Cloud class="w-5 h-5" />
-                                {{ t('settings.sync_status') }}
+                                {{ t("settings.sync_status") }}
                             </h2>
                             <SyncStatus />
                         </div>
                     </div>
 
-                    <div class="card bg-base-200 shadow-md border border-base-300">
+                    <div
+                        class="card bg-base-200 shadow-md border border-base-300"
+                    >
                         <div class="card-body p-4">
                             <h2
-                                class="card-title text-lg font-semibold text-primary-focus mb-4 flex items-center gap-2">
+                                class="card-title text-lg font-semibold text-primary-focus mb-4 flex items-center gap-2"
+                            >
                                 <SettingsIcon class="w-5 h-5" />
-                                {{ t('settings.sync_controls') }}
+                                {{ t("settings.sync_controls") }}
                             </h2>
 
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <div class="p-4 border border-base-300 rounded-lg hover:bg-base-100 transition-colors">
-                                    <div class="flex items-center gap-3 mb-3">
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+                                <div
+                                    class="p-3 border border-base-300 rounded-lg hover:bg-base-100 transition-colors"
+                                >
+                                    <div class="flex items-center gap-2 mb-2">
                                         <Upload class="w-5 h-5 text-primary" />
                                         <h3 class="font-semibold">
-                                            {{ t('settings.upload_title') }}
+                                            {{ t("settings.upload_title") }}
                                         </h3>
                                     </div>
-                                    <p class="text-sm text-base-content/70 mb-3">
-                                        {{ t('settings.upload_description') }}
+                                    <p
+                                        class="text-sm text-base-content/70 mb-2"
+                                    >
+                                        {{ t("settings.upload_description") }}
                                     </p>
-                                    <button @click="handleUploadToCloud" class="btn btn-primary btn-sm w-full"
-                                        :disabled="syncState.isSyncing ||
+                                    <button
+                                        @click="handleUploadToCloud"
+                                        class="btn btn-primary btn-sm w-full"
+                                        :disabled="
+                                            syncState.isSyncing ||
                                             !syncState.isOnline ||
                                             !isAuthenticated
-                                            ">
+                                        "
+                                    >
                                         <Upload class="w-4 h-4 mr-2" />
                                         {{
                                             syncState.isSyncing
-                                                ? t('settings.syncing')
-                                                : t('settings.upload_button')
+                                                ? t("settings.syncing")
+                                                : t("settings.upload_button")
                                         }}
                                     </button>
                                 </div>
 
-                                <div class="p-4 border border-base-300 rounded-lg hover:bg-base-100 transition-colors">
-                                    <div class="flex items-center gap-3 mb-3">
+                                <div
+                                    class="p-3 border border-base-300 rounded-lg hover:bg-base-100 transition-colors"
+                                >
+                                    <div class="flex items-center gap-2 mb-2">
                                         <Download class="w-5 h-5" />
                                         <h3 class="font-semibold">
-                                            {{ t('settings.download_title') }}
+                                            {{ t("settings.download_title") }}
                                         </h3>
                                     </div>
-                                    <p class="text-sm text-base-content/70 mb-3">
-                                        {{ t('settings.download_description') }}
+                                    <p
+                                        class="text-sm text-base-content/70 mb-3"
+                                    >
+                                        {{ t("settings.download_description") }}
                                     </p>
-                                    <button @click="handleDownloadFromCloud" class="btn btn-primary btn-sm w-full"
-                                        :disabled="syncState.isSyncing ||
+                                    <button
+                                        @click="handleDownloadFromCloud"
+                                        class="btn btn-primary btn-sm w-full"
+                                        :disabled="
+                                            syncState.isSyncing ||
                                             !syncState.isOnline ||
                                             !syncState.hasCloudData ||
                                             !isAuthenticated
-                                            ">
+                                        "
+                                    >
                                         <Download class="w-4 h-4 mr-2" />
                                         {{
                                             syncState.isSyncing
-                                                ? t('settings.syncing')
-                                                : t('settings.download_button')
+                                                ? t("settings.syncing")
+                                                : t("settings.download_button")
                                         }}
                                     </button>
                                 </div>
                             </div>
 
-                            <div class="mt-6 p-4 border border-base-300 rounded-lg">
+                            <div
+                                class="mt-3 p-3 border border-base-300 rounded-lg"
+                            >
                                 <div class="flex items-center justify-between">
                                     <div>
-                                        <h3 class="font-semibold mb-1">
-                                            {{ t('settings.auto_sync') }}
+                                        <h3 class="font-semibold text-sm mb-1">
+                                            {{ t("settings.auto_sync") }}
                                         </h3>
                                         <p class="text-sm text-base-content/70">
                                             {{
                                                 t(
-                                                    'settings.auto_sync_description'
+                                                    "settings.auto_sync_description"
                                                 )
                                             }}
                                         </p>
                                     </div>
-                                    <input type="checkbox" :checked="syncState.autoSyncEnabled" @change="toggleAutoSync"
-                                        class="toggle toggle-primary" :disabled="!isAuthenticated" />
+                                    <input
+                                        type="checkbox"
+                                        :checked="syncState.autoSyncEnabled"
+                                        @change="toggleAutoSync"
+                                        class="toggle toggle-primary"
+                                        :disabled="!isAuthenticated"
+                                    />
                                 </div>
                             </div>
 
-                            <div v-if="!isAuthenticated" class="mt-4 alert alert-warning">
+                            <div
+                                v-if="!isAuthenticated"
+                                class="mt-2 alert alert-warning py-2"
+                            >
                                 <div class="flex items-center gap-2">
                                     <LogIn class="w-4 h-4" />
-                                    <span>{{ t('settings.sync_login_required') }}</span>
+                                    <span>{{
+                                        t("settings.sync_login_required")
+                                    }}</span>
                                 </div>
                             </div>
 
-                            <div v-if="!syncState.isOnline" class="mt-4 alert alert-warning">
+                            <div
+                                v-if="!syncState.isOnline"
+                                class="mt-2 alert alert-warning py-2"
+                            >
                                 <div class="flex items-center gap-2">
                                     <WifiOff class="w-4 h-4" />
                                     <span>{{
-                                        t('settings.offline_warning')
+                                        t("settings.offline_warning")
                                     }}</span>
                                 </div>
                             </div>
 
-                            <div v-else-if="!syncState.hasCloudData" class="mt-4 alert alert-info">
+                            <div
+                                v-else-if="!syncState.hasCloudData"
+                                class="mt-2 alert alert-info py-2"
+                            >
                                 <div class="flex items-center gap-2">
                                     <Cloud class="w-4 h-4" />
                                     <span>{{
-                                        t('settings.no_cloud_data')
+                                        t("settings.no_cloud_data")
                                     }}</span>
                                 </div>
                             </div>
@@ -956,126 +1191,237 @@ const handleToastPositionChange = (position: ToastPosition) => {
                     </div>
                 </div>
 
-                <div v-else key="accounts" class="space-y-6 overflow-x-hidden">
-                    <div class="card bg-base-200 shadow-md border border-base-300">
-                        <div class="card-body p-4">
+                <div v-else key="accounts" class="space-y-3 overflow-x-hidden">
                     <div
-                        class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
-                        <div>
-                            <h2
-                                class="card-title text-lg font-semibold text-primary-focus flex items-center gap-2">
-                                <User class="w-5 h-5" />
-                                {{ t('settings.accounts_management') }}
-                            </h2>
-                            <p class="text-sm text-base-content/70 mt-1">
-                                {{ t('settings.accounts_description') }}
-                            </p>
-                        </div>
-                        <button @click="showAddAccountDialog" class="btn btn-primary btn-sm">
-                            <Plus class="w-4 h-4 mr-2" />
-                            {{ t('settings.add_account') }}
-                        </button>
-                    </div>
-
-                    <div class="card bg-base-200 shadow-md border border-base-300 mb-6">
-                        <div class="card-body p-4 space-y-4">
-                            <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+                        class="card bg-base-200 shadow-md border border-base-300"
+                    >
+                        <div class="card-body p-3">
+                            <div
+                                class="flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-3"
+                            >
                                 <div>
-                                    <h3 class="font-semibold text-lg flex items-center gap-2">
-                                        <FolderSync class="w-5 h-5 text-primary" />
-                                        {{ t('settings.local_account_sync') }}
-                                    </h3>
-                                    <p class="text-sm text-base-content/70 mt-1">
-                                        {{ t('settings.local_account_sync_description') }}
-                                    </p>
-                                </div>
-                                <div class="flex flex-wrap gap-2">
-                                    <button
-                                        class="btn btn-outline btn-sm flex items-center gap-2"
-                                        @click="syncLocalAccountsFromCloud"
-                                        :disabled="isAccountSyncing || !isAuthenticated || remoteAccountsLoading"
+                                    <h2
+                                        class="card-title text-base font-semibold text-primary-focus flex items-center gap-2"
                                     >
-                                        <Download class="w-4 h-4" />
-                                        {{ t('settings.sync_accounts_from_cloud_button') }}
-                                    </button>
-                                    <button
-                                        class="btn btn-primary btn-sm flex items-center gap-2"
-                                        @click="syncLocalAccountsToCloud"
-                                        :disabled="isAccountSyncing || !isAuthenticated || remoteAccountsLoading"
+                                        <User class="w-5 h-5" />
+                                        {{ t("settings.accounts_management") }}
+                                    </h2>
+                                    <p
+                                        class="text-sm text-base-content/70 mt-1"
                                     >
-                                        <Upload class="w-4 h-4" />
-                                        {{ t('settings.sync_accounts_to_cloud_button') }}
-                                    </button>
+                                        {{ t("settings.accounts_description") }}
+                                    </p>
                                 </div>
-                            </div>
-                            <div class="text-sm text-base-content/70 flex items-center gap-2">
-                                <Cloud class="w-4 h-4 text-primary" />
-                                <span>
-                                    <span v-if="isAccountSyncing">{{ t('settings.syncing') }}</span>
-                                    <span v-else-if="remoteAccountsLoading">
-                                        {{ t('settings.remote_accounts_loading') }}
-                                    </span>
-                                    <span v-else-if="remoteAccounts.length > 0">
-                                        {{
-                                            t('settings.remote_accounts_present', {
-                                                count: remoteAccounts.length,
-                                            })
-                                        }}
-                                    </span>
-                                    <span v-else>
-                                        {{ t('settings.remote_accounts_empty') }}
-                                    </span>
-                                </span>
-                            </div>
-                            <ul
-                                v-if="remoteAccounts.length > 0 && !remoteAccountsLoading"
-                                class="text-sm text-base-content/70 space-y-1 pl-3 list-disc"
-                            >
-                                <li
-                                    v-for="account in remoteAccounts.slice(0, 3)"
-                                    :key="account.id"
+                                <button
+                                    @click="showAddAccountDialog"
+                                    class="btn btn-primary btn-sm"
                                 >
-                                    <span class="font-semibold">{{ account.display_name || account.external_id }}</span>
-                                    <span class="text-xs text-base-content/50 ml-1">
-                                        ({{ account.external_id }})
-                                    </span>
-                                </li>
-                                <li v-if="remoteAccounts.length > 3" class="text-xs text-base-content/50">
-                                    {{ t('settings.remote_accounts_more', { count: remoteAccounts.length - 3 }) }}
-                                </li>
-                            </ul>
+                                    <Plus class="w-4 h-4 mr-2" />
+                                    {{ t("settings.add_account") }}
+                                </button>
+                            </div>
+
                             <div
-                                v-if="!isAuthenticated"
-                                class="alert alert-warning alert-sm rounded-md border border-base-300 p-3 text-sm flex items-center gap-2"
+                                class="card bg-base-200 shadow-md border border-base-300 mb-3"
                             >
-                                <LogIn class="w-4 h-4" />
-                                {{ t('settings.sync_login_required') }}
+                                <div class="card-body p-3 space-y-3">
+                                    <div
+                                        class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between"
+                                    >
+                                        <div>
+                                            <h3
+                                                class="font-semibold text-sm flex items-center gap-2"
+                                            >
+                                                <FolderSync
+                                                    class="w-5 h-5 text-primary"
+                                                />
+                                                {{
+                                                    t(
+                                                        "settings.local_account_sync"
+                                                    )
+                                                }}
+                                            </h3>
+                                            <p
+                                                class="text-sm text-base-content/70 mt-1"
+                                            >
+                                                {{
+                                                    t(
+                                                        "settings.local_account_sync_description"
+                                                    )
+                                                }}
+                                            </p>
+                                        </div>
+                                        <div class="flex flex-wrap gap-2">
+                                            <button
+                                                class="btn btn-outline btn-sm flex items-center gap-2"
+                                                @click="
+                                                    syncLocalAccountsFromCloud
+                                                "
+                                                :disabled="
+                                                    isAccountSyncing ||
+                                                    !isAuthenticated ||
+                                                    remoteAccountsLoading
+                                                "
+                                            >
+                                                <Download class="w-4 h-4" />
+                                                {{
+                                                    t(
+                                                        "settings.sync_accounts_from_cloud_button"
+                                                    )
+                                                }}
+                                            </button>
+                                            <button
+                                                class="btn btn-primary btn-sm flex items-center gap-2"
+                                                @click="
+                                                    syncLocalAccountsToCloud
+                                                "
+                                                :disabled="
+                                                    isAccountSyncing ||
+                                                    !isAuthenticated ||
+                                                    remoteAccountsLoading
+                                                "
+                                            >
+                                                <Upload class="w-4 h-4" />
+                                                {{
+                                                    t(
+                                                        "settings.sync_accounts_to_cloud_button"
+                                                    )
+                                                }}
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div
+                                        class="text-sm text-base-content/70 flex items-center gap-2"
+                                    >
+                                        <Cloud class="w-4 h-4 text-primary" />
+                                        <span>
+                                            <span v-if="isAccountSyncing">{{
+                                                t("settings.syncing")
+                                            }}</span>
+                                            <span
+                                                v-else-if="
+                                                    remoteAccountsLoading
+                                                "
+                                            >
+                                                {{
+                                                    t(
+                                                        "settings.remote_accounts_loading"
+                                                    )
+                                                }}
+                                            </span>
+                                            <span
+                                                v-else-if="
+                                                    remoteAccounts.length > 0
+                                                "
+                                            >
+                                                {{
+                                                    t(
+                                                        "settings.remote_accounts_present",
+                                                        {
+                                                            count: remoteAccounts.length,
+                                                        }
+                                                    )
+                                                }}
+                                            </span>
+                                            <span v-else>
+                                                {{
+                                                    t(
+                                                        "settings.remote_accounts_empty"
+                                                    )
+                                                }}
+                                            </span>
+                                        </span>
+                                    </div>
+                                    <ul
+                                        v-if="
+                                            remoteAccounts.length > 0 &&
+                                            !remoteAccountsLoading
+                                        "
+                                        class="text-sm text-base-content/70 space-y-1 pl-3 list-disc"
+                                    >
+                                        <li
+                                            v-for="account in remoteAccounts.slice(
+                                                0,
+                                                3
+                                            )"
+                                            :key="account.id"
+                                        >
+                                            <span class="font-semibold">{{
+                                                account.display_name
+                                            }}</span>
+                                        </li>
+                                        <li
+                                            v-if="remoteAccounts.length > 3"
+                                            class="text-xs text-base-content/50"
+                                        >
+                                            {{
+                                                t(
+                                                    "settings.remote_accounts_more",
+                                                    {
+                                                        count:
+                                                            remoteAccounts.length -
+                                                            3,
+                                                    }
+                                                )
+                                            }}
+                                        </li>
+                                    </ul>
+                                    <div
+                                        v-if="!isAuthenticated"
+                                        class="alert alert-warning alert-sm rounded-md border border-base-300 p-3 text-sm flex items-center gap-2"
+                                    >
+                                        <LogIn class="w-4 h-4" />
+                                        {{ t("settings.sync_login_required") }}
+                                    </div>
+                                </div>
                             </div>
-                        </div>
-                    </div>
 
-                    <div class="flex flex-col sm:flex-row gap-4 mb-6">
-                        <div class="relative flex-1">
-                            <input v-model="searchQuery" type="text"
-                                        :placeholder="t('settings.search_accounts')"
-                                        class="input input-bordered input-sm w-full pl-10" />
-                                    <Search class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 z-50" />
+                            <div class="flex flex-col sm:flex-row gap-3 mb-3">
+                                <div class="relative flex-1">
+                                    <input
+                                        v-model="searchQuery"
+                                        type="text"
+                                        :placeholder="
+                                            t('settings.search_accounts')
+                                        "
+                                        class="input input-bordered input-sm w-full pl-10"
+                                    />
+                                    <Search
+                                        class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 z-50"
+                                    />
                                 </div>
-                                <div class="flex flex-wrap gap-2" v-if="uniqueTags.length > 0">
-                                    <button v-for="tag in uniqueTags" :key="tag" @click="selectTag(tag)"
-                                        class="btn btn-sm" :class="{
+                                <div
+                                    class="flex flex-wrap gap-2"
+                                    v-if="uniqueTags.length > 0"
+                                >
+                                    <button
+                                        v-for="tag in uniqueTags"
+                                        :key="tag"
+                                        @click="selectTag(tag)"
+                                        class="btn btn-sm"
+                                        :class="{
                                             'btn-primary': selectedTag === tag,
-                                            'btn-ghost bg-base-300': selectedTag !== tag,
-                                        }">
+                                            'btn-ghost bg-base-300':
+                                                selectedTag !== tag,
+                                        }"
+                                    >
                                         {{ tag }}
                                     </button>
                                 </div>
                             </div>
 
-                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 overflow-hidden">
-                                <AccountCard v-for="account in filteredAccounts" :key="account.id" :account="account"
-                                    :formatDate="formatDate" @set-active="setActiveAccount" @edit-account="editAccount"
-                                    @delete-account="deleteAccount">
+                            <div
+                                class="grid grid-cols-1 lg:grid-cols-2 gap-3 overflow-hidden"
+                            >
+                                <AccountCard
+                                    v-for="account in filteredAccounts"
+                                    :key="account.id"
+                                    :account="account"
+                                    :formatDate="formatDate"
+                                    @set-active="setActiveAccount"
+                                    @edit-account="editAccount"
+                                    @delete-account="deleteAccount"
+                                >
                                     <template #user-icon>
                                         <User class="w-4 h-4" />
                                     </template>
@@ -1088,8 +1434,10 @@ const handleToastPositionChange = (position: ToastPosition) => {
                                 </AccountCard>
                             </div>
 
-                            <div v-if="filteredAccounts.length === 0"
-                                class="text-center py-10 text-base-content/60 flex flex-col items-center">
+                            <div
+                                v-if="filteredAccounts.length === 0"
+                                class="text-center py-10 text-base-content/60 flex flex-col items-center"
+                            >
                                 <div class="text-5xl mb-3 opacity-30">
                                     <User v-if="accounts.length > 0" />
                                     <div v-else>
@@ -1097,12 +1445,20 @@ const handleToastPositionChange = (position: ToastPosition) => {
                                     </div>
                                 </div>
                                 <h3 class="text-lg font-semibold mb-2">
-                                    {{ accounts.length === 0 ? t('settings.no_accounts_title') :
-                                        t('settings.no_matching_accounts') }}
+                                    {{
+                                        accounts.length === 0
+                                            ? t("settings.no_accounts_title")
+                                            : t("settings.no_matching_accounts")
+                                    }}
                                 </h3>
                                 <p class="text-sm">
-                                    {{ accounts.length === 0 ? t('settings.no_accounts_description') :
-                                        t('settings.try_different_search') }}
+                                    {{
+                                        accounts.length === 0
+                                            ? t(
+                                                  "settings.no_accounts_description"
+                                              )
+                                            : t("settings.try_different_search")
+                                    }}
                                 </p>
                             </div>
                         </div>
@@ -1139,7 +1495,7 @@ const handleToastPositionChange = (position: ToastPosition) => {
 }
 
 .tabs .tab,
-.tabs .tab>* {
+.tabs .tab > * {
     border-radius: var(--radius-box, 0.5rem) !important;
 }
 
@@ -1200,11 +1556,11 @@ const handleToastPositionChange = (position: ToastPosition) => {
     }
 }
 
-html[data-theme='dark'] .discord-icon {
+html[data-theme="dark"] .discord-icon {
     filter: invert(100%);
 }
 
-html[data-theme='light'] .discord-icon {
+html[data-theme="light"] .discord-icon {
     filter: invert(0%);
 }
 </style>
diff --git a/src/views/UserProfileView.vue b/src/views/UserProfileView.vue
index 88de7f4f..bc7ec624 100644
--- a/src/views/UserProfileView.vue
+++ b/src/views/UserProfileView.vue
@@ -4,96 +4,210 @@
             <div class="alert alert-error max-w-md mx-auto">
                 <span>{{ error }}</span>
             </div>
-            <button @click="$emit('change-view', 'friends')" class="btn btn-primary mt-4">
-                {{ t('userProfile.back_to_friends') }}
+            <button
+                @click="$emit('change-view', 'friends')"
+                class="btn btn-primary mt-4"
+            >
+                {{ t("userProfile.back_to_friends") }}
             </button>
         </div>
 
         <div v-else-if="userProfile" class="grid gap-6">
             <div class="card shadow-md border border-base-300">
                 <div class="card-body">
-                    <div class="flex flex-col md:flex-row md:items-center gap-6">
-                        <UserAvatar :name="displayNickname" size="xl" :show-status="false"
+                    <div
+                        class="flex flex-col md:flex-row md:items-center gap-6"
+                    >
+                        <UserAvatar
+                            :name="displayNickname"
+                            size="xl"
+                            :show-status="false"
                             :is-online="userProfile.status.is_online"
-                            :is-clickable="!isOwnProfile && !!(userProfile.avatar_url)"
-                            :src="userProfile.avatar_url || null" :original-src="userProfile.avatar_url || null"
-                            @click="onAvatarClick" />
+                            :is-clickable="
+                                !isOwnProfile && !!userProfile.avatar_url
+                            "
+                            :src="userProfile.avatar_url || null"
+                            :original-src="userProfile.avatar_url || null"
+                            @click="onAvatarClick"
+                        />
                         <div class="flex-1">
-                            <h1 class="text-2xl font-bold text-primary-focus flex items-center gap-2">
-                                {{ streamer.getDisplayName(userProfile.nickname, userProfile.username) }}
-                                <span v-if="roleBadge && !streamer.enabled.value"
-                                    :class="roleBadge.className + ' text-sm'">{{ roleBadge.text
-                                    }}</span>
+                            <h1
+                                class="text-2xl font-bold text-primary-focus flex items-center gap-2"
+                            >
+                                {{
+                                    streamer.getDisplayName(
+                                        userProfile.nickname,
+                                        userProfile.username
+                                    )
+                                }}
+                                <span
+                                    v-if="roleBadge && !streamer.enabled.value"
+                                    :class="roleBadge.className + ' text-sm'"
+                                    >{{ roleBadge.text }}</span
+                                >
                             </h1>
                             <p class="text-lg text-base-content/70">
-                                @{{ streamer.getDisplayUsername(userProfile.username) }}
+                                @{{
+                                    streamer.getDisplayUsername(
+                                        userProfile.username
+                                    )
+                                }}
                             </p>
 
                             <div>
-                                <div v-if="userProfile.status.current_client" class="flex items-center gap-2">
+                                <div
+                                    v-if="userProfile.status.current_client"
+                                    class="flex items-center gap-2"
+                                >
                                     <Gamepad2 class="w-4 h-4 text-primary" />
-                                    <span class="text-primary">{{ t('userProfile.playing') }}
+                                    <span class="text-primary"
+                                        >{{ t("userProfile.playing") }}
                                         {{
                                             userProfile.status.current_client
+                                        }}</span
+                                    >
 
-                                        }}</span>
-                                    <span v-if="userProfile.status.client_version" class="text-base-content/50 text-sm">
+                                    <span
+                                        v-if="userProfile.status.client_version"
+                                        class="text-base-content/50 text-sm"
+                                    >
                                         ({{
                                             userProfile.status.client_version
                                         }})
                                     </span>
+                                    <span
+                                        v-if="playtimeDuration"
+                                        class="badge badge-sm bg-base-300/50 border-none text-base-content/70 ml-2 py-0 px-2 text-[10px] h-4 flex items-center gap-1"
+                                    >
+                                        <Clock class="w-2.5 h-2.5" />
+                                        {{ playtimeDuration }}
+                                    </span>
                                 </div>
-                                <div v-else-if="userProfile.status.is_online" class="flex items-center gap-2">
-                                    <div class="w-3 h-3 bg-success rounded-full"></div>
+                                <div
+                                    v-else-if="userProfile.status.is_online"
+                                    class="flex items-center gap-2"
+                                >
+                                    <div
+                                        class="w-3 h-3 bg-success rounded-full"
+                                    ></div>
                                     <span class="text-success font-medium">{{
-                                        t('userProfile.online')
+                                        t("userProfile.online")
                                     }}</span>
                                 </div>
-                                <div v-else-if="userProfile.status.last_seen" class="flex items-center gap-2">
-                                    <div class="w-3 h-3 bg-base-content/30 rounded-full"></div>
-                                    <span class="text-base-content/70">{{ t('userProfile.last_seen') }}
+                                <div
+                                    v-else-if="userProfile.status.last_seen"
+                                    class="flex items-center gap-2"
+                                >
+                                    <div
+                                        class="w-3 h-3 bg-base-content/30 rounded-full"
+                                    ></div>
+                                    <span class="text-base-content/70"
+                                        >{{ t("userProfile.last_seen") }}
                                         {{
                                             formatLastSeen(
                                                 userProfile.status.last_seen
                                             )
-                                        }}</span>
+                                        }}</span
+                                    >
                                 </div>
                                 <div v-else class="flex items-center gap-2">
-                                    <div class="w-3 h-3 bg-base-content/30 rounded-full"></div>
+                                    <div
+                                        class="w-3 h-3 bg-base-content/30 rounded-full"
+                                    ></div>
                                     <span class="text-base-content/70">{{
-                                        t('userProfile.offline')
+                                        t("userProfile.offline")
                                     }}</span>
                                 </div>
                             </div>
 
-                            <div v-if="!globalUserStatus.isStreamer.value && userProfile.social_links && userProfile.social_links.length > 0"
-                                class="mt-2 flex items-center gap-3 flex-wrap">
-                                <template v-for="link in userProfile.social_links" :key="`${link.platform}:${link.url}`">
-                                    <a v-if="link.platform.toLowerCase() !== 'discord'" :href="platformHref(link.platform, link.url)"
-                                        target="_blank" rel="noreferrer" class="group inline-flex items-center">
-                                        <TelegramIcon :size="20" class="w-5 h-5 text-primary"
-                                            v-if="link.platform.toLowerCase() === 'telegram'" />
-                                        <YoutubeIcon :size="20" class="w-5 h-5 text-primary"
-                                            v-else-if="link.platform.toLowerCase() === 'youtube'" />
-                                        <GithubIcon :size="20" class="w-5 h-5 text-primary"
-                                            v-else-if="link.platform.toLowerCase() === 'github'" />
+                            <div
+                                v-if="
+                                    !globalUserStatus.isStreamer.value &&
+                                    userProfile.social_links &&
+                                    userProfile.social_links.length > 0
+                                "
+                                class="mt-2 flex items-center gap-3 flex-wrap"
+                            >
+                                <template
+                                    v-for="link in userProfile.social_links"
+                                    :key="`${link.platform}:${link.url}`"
+                                >
+                                    <a
+                                        v-if="
+                                            link.platform.toLowerCase() !==
+                                            'discord'
+                                        "
+                                        :href="
+                                            platformHref(
+                                                link.platform,
+                                                link.url
+                                            )
+                                        "
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        class="group inline-flex items-center"
+                                    >
+                                        <TelegramIcon
+                                            :size="20"
+                                            class="w-5 h-5 text-primary"
+                                            v-if="
+                                                link.platform.toLowerCase() ===
+                                                'telegram'
+                                            "
+                                        />
+                                        <YoutubeIcon
+                                            :size="20"
+                                            class="w-5 h-5 text-primary"
+                                            v-else-if="
+                                                link.platform.toLowerCase() ===
+                                                'youtube'
+                                            "
+                                        />
+                                        <GithubIcon
+                                            :size="20"
+                                            class="w-5 h-5 text-primary"
+                                            v-else-if="
+                                                link.platform.toLowerCase() ===
+                                                'github'
+                                            "
+                                        />
                                         <span
-                                            class="inline-block ml-0 group-hover:ml-2 text-sm text-primary opacity-0 group-hover:opacity-100 transition-all duration-200 max-w-0 group-hover:max-w-xs overflow-hidden whitespace-nowrap">
-                                            {{ platformLabel(link.platform) }} — {{ displayHref(link.platform, link.url)
+                                            class="inline-block ml-0 group-hover:ml-2 text-sm text-primary opacity-0 group-hover:opacity-100 transition-all duration-200 max-w-0 group-hover:max-w-xs overflow-hidden whitespace-nowrap"
+                                        >
+                                            {{ platformLabel(link.platform) }} —
+                                            {{
+                                                displayHref(
+                                                    link.platform,
+                                                    link.url
+                                                )
                                             }}
                                         </span>
                                     </a>
-                                    <button v-else @click.stop="copySocialHandle(link)" type="button"
+                                    <button
+                                        v-else
+                                        @click.stop="copySocialHandle(link)"
+                                        type="button"
                                         class="group inline-flex items-center cursor-pointer"
-                                        :title="t('userProfile.copy_username')">
-                                        <DiscordIcon :size="20" class="w-5 h-5 text-primary" />
+                                        :title="t('userProfile.copy_username')"
+                                    >
+                                        <DiscordIcon
+                                            :size="20"
+                                            class="w-5 h-5 text-primary"
+                                        />
                                         <span
-                                            class="inline-block ml-0 group-hover:ml-2 text-sm text-primary opacity-0 group-hover:opacity-100 transition-all duration-200 max-w-0 group-hover:max-w-xs overflow-hidden whitespace-nowrap">
-                                            {{ platformLabel(link.platform) }} — {{ displayHandle(link.platform,
-                                                link.url) }}
+                                            class="inline-block ml-0 group-hover:ml-2 text-sm text-primary opacity-0 group-hover:opacity-100 transition-all duration-200 max-w-0 group-hover:max-w-xs overflow-hidden whitespace-nowrap"
+                                        >
+                                            {{ platformLabel(link.platform) }} —
+                                            {{
+                                                displayHandle(
+                                                    link.platform,
+                                                    link.url
+                                                )
+                                            }}
                                         </span>
                                         <Copy
-                                            class="w-0 h-4 ml-0 text-primary opacity-0 group-hover:w-4 group-hover:ml-2 group-hover:opacity-100 transition-all duration-200 overflow-hidden" />
+                                            class="w-0 h-4 ml-0 text-primary opacity-0 group-hover:w-4 group-hover:ml-2 group-hover:opacity-100 transition-all duration-200 overflow-hidden"
+                                        />
                                     </button>
                                 </template>
                             </div>
@@ -105,35 +219,87 @@
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div class="card bg-base-200 shadow-md border border-base-300">
                     <div class="card-body">
-                        <h2 class="card-title text-lg font-medium text-primary-focus mb-4">
-                            {{ t('userProfile.profile_information') }}
+                        <h2
+                            class="card-title text-lg font-medium text-primary-focus mb-4"
+                        >
+                            {{ t("userProfile.profile_information") }}
                         </h2>
                         <div class="space-y-3">
-                            <div class="flex justify-between items-center" v-if="!globalUserStatus.isStreamer.value">
+                            <div
+                                class="flex justify-between items-center"
+                                v-if="!globalUserStatus.isStreamer.value"
+                            >
                                 <span class="text-base-content/70">ID:</span>
-                                <span class="font-medium">#{{ userProfile.id }}</span>
+                                <span class="font-medium"
+                                    >#{{ userProfile.id }}</span
+                                >
                             </div>
 
                             <div class="flex justify-between items-center">
-                                <span class="text-base-content/70">{{ t('userProfile.username') }}:</span>
+                                <span class="text-base-content/70"
+                                    >{{ t("userProfile.username") }}:</span
+                                >
                                 <div class="flex items-center">
-                                    <button @click="copyUsername" class="btn btn-ghost btn-xs"
-                                        v-if="!globalUserStatus.isStreamer.value"
-                                        :title="t('userProfile.copy_username')">
+                                    <button
+                                        @click="copyUsername"
+                                        class="btn btn-ghost btn-xs"
+                                        v-if="
+                                            !globalUserStatus.isStreamer.value
+                                        "
+                                        :title="t('userProfile.copy_username')"
+                                    >
                                         <Copy class="w-4 h-4" />
                                     </button>
-                                    <span class="font-medium">{{ displayUsername }}</span>
+                                    <span class="font-medium">{{
+                                        displayUsername
+                                    }}</span>
                                 </div>
                             </div>
 
-                            <div v-if="userProfile.nickname" class="flex justify-between items-center">
-                                <span class="text-base-content/70">{{ t('userProfile.nickname') }}:</span>
-                                <span class="font-medium">{{ displayNickname }}</span>
+                            <div
+                                v-if="userProfile.nickname"
+                                class="flex justify-between items-center"
+                            >
+                                <span class="text-base-content/70"
+                                    >{{ t("userProfile.nickname") }}:</span
+                                >
+                                <span class="font-medium">{{
+                                    displayNickname
+                                }}</span>
                             </div>
 
-                            <div v-if="userProfile.member_since && !globalUserStatus.isStreamer.value" class="flex justify-between items-center">
-                                <span class="text-base-content/70">{{ t('userProfile.member_since') }}:</span>
-                                <span class="font-medium">{{ formatDate(userProfile.member_since) }}</span>
+                            <div
+                                v-if="
+                                    userProfile.member_since &&
+                                    !globalUserStatus.isStreamer.value
+                                "
+                                class="flex justify-between items-center"
+                            >
+                                <span class="text-base-content/70"
+                                    >{{ t("userProfile.member_since") }}:</span
+                                >
+                                <span class="font-medium">{{
+                                    formatDate(userProfile.member_since)
+                                }}</span>
+                            </div>
+
+                            <div
+                                v-if="favoriteClientDisplay"
+                                class="flex justify-between items-center"
+                            >
+                                <span class="text-base-content/70"
+                                    >{{
+                                        t("userProfile.favorite_client")
+                                    }}:</span
+                                >
+                                <span class="badge badge-primary">
+                                    {{ favoriteClientDisplay.name }}
+                                    {{
+                                        formatVersion(
+                                            favoriteClientDisplay.version
+                                        )
+                                    }}
+                                </span>
                             </div>
                         </div>
                     </div>
@@ -141,108 +307,268 @@
 
                 <div class="card bg-base-200 shadow-md border border-base-300">
                     <div class="card-body">
-                        <h2 class="card-title text-lg font-medium text-primary-focus mb-4">
-                            {{ t('userProfile.actions') }}
+                        <h2
+                            class="card-title text-lg font-medium text-primary-focus mb-4"
+                        >
+                            {{ t("userProfile.actions") }}
                         </h2>
 
-                        <div v-if="userProfile.friendship_status === 'friends'" class="space-y-3 mt-auto">
+                        <div
+                            v-if="userProfile.friendship_status === 'friends'"
+                            class="space-y-3 mt-auto"
+                        >
                             <div class="alert alert-success">
                                 <UserCheck class="w-5 h-5" />
-                                <span>{{ t('userProfile.friends_with', { name: displayNickname, }) }}</span>
+                                <span>{{
+                                    t("userProfile.friends_with", {
+                                        name: displayNickname,
+                                    })
+                                }}</span>
                             </div>
-                            <button @click="handleBlockUser" class="btn btn-error btn-outline w-full">
+                            <button
+                                @click="handleBlockUser"
+                                class="btn btn-error btn-outline w-full"
+                            >
                                 <Ban class="w-4 h-4 mr-2" />
-                                {{ t('userProfile.block_user') }}
+                                {{ t("userProfile.block_user") }}
                             </button>
-                            <button @click="handleRemoveFriend" class="btn btn-error btn-outline w-full">
+                            <button
+                                @click="handleRemoveFriend"
+                                class="btn btn-error btn-outline w-full"
+                            >
                                 <UserMinus class="w-4 h-4 mr-2" />
-                                {{ t('userProfile.remove_friend') }}
+                                {{ t("userProfile.remove_friend") }}
                             </button>
                         </div>
 
-                        <div v-else-if="userProfile.friendship_status === 'request_sent'" class="space-y-3">
+                        <div
+                            v-else-if="
+                                userProfile.friendship_status === 'request_sent'
+                            "
+                            class="space-y-3"
+                        >
                             <div class="alert alert-warning">
                                 <Clock class="w-5 h-5" />
-                                <span>{{ t('userProfile.friend_request_sent', { name: displayNickname, }) }}</span>
+                                <span>{{
+                                    t("userProfile.friend_request_sent", {
+                                        name: displayNickname,
+                                    })
+                                }}</span>
                             </div>
-                            <button @click="handleCancelFriendRequest" class="btn btn-error btn-outline w-full"
-                                :disabled="sendingRequest">
+                            <button
+                                @click="handleCancelFriendRequest"
+                                class="btn btn-error btn-outline w-full"
+                                :disabled="sendingRequest"
+                            >
                                 <X class="w-4 h-4 mr-2" />
-                                {{ sendingRequest ? t('userProfile.canceling') : t('userProfile.cancel_friend_request')
+                                {{
+                                    sendingRequest
+                                        ? t("userProfile.canceling")
+                                        : t("userProfile.cancel_friend_request")
                                 }}
                             </button>
                         </div>
 
-                        <div v-else-if="userProfile.friendship_status === 'request_received'" class="space-y-3">
+                        <div
+                            v-else-if="
+                                userProfile.friendship_status ===
+                                'request_received'
+                            "
+                            class="space-y-3"
+                        >
                             <div class="alert alert-info">
                                 <UserPlus class="w-5 h-5" />
-                                <span>{{ t('userProfile.friend_request_received', { name: displayNickname, }) }}</span>
+                                <span>{{
+                                    t("userProfile.friend_request_received", {
+                                        name: displayNickname,
+                                    })
+                                }}</span>
                             </div>
                             <div class="flex gap-3">
-                                <button @click="handleRespondToRequest('accept')" class="btn btn-success flex-1">
+                                <button
+                                    @click="handleRespondToRequest('accept')"
+                                    class="btn btn-success flex-1"
+                                >
                                     <Check class="w-4 h-4 mr-2" />
-                                    {{ t('userProfile.accept') }}
+                                    {{ t("userProfile.accept") }}
                                 </button>
-                                <button @click="handleRespondToRequest('reject')"
-                                    class="btn btn-error btn-outline flex-1">
+                                <button
+                                    @click="handleRespondToRequest('reject')"
+                                    class="btn btn-error btn-outline flex-1"
+                                >
                                     <X class="w-4 h-4 mr-2" />
-                                    {{ t('userProfile.decline') }}
+                                    {{ t("userProfile.decline") }}
                                 </button>
                             </div>
                         </div>
 
-                        <div v-else-if="userProfile.friendship_status === 'blocked'" class="alert alert-error">
+                        <div
+                            v-else-if="
+                                userProfile.friendship_status === 'blocked'
+                            "
+                            class="alert alert-error"
+                        >
                             <Ban class="w-5 h-5" />
-                            <span>{{ t('userProfile.user_blocked') }}</span>
+                            <span>{{ t("userProfile.user_blocked") }}</span>
                         </div>
 
                         <div v-else>
                             <div class="space-y-3">
-                                <button @click="handleSendFriendRequest" class="btn btn-primary w-full"
-                                    :disabled="sendingRequest">
+                                <button
+                                    @click="handleSendFriendRequest"
+                                    class="btn btn-primary w-full"
+                                    :disabled="sendingRequest"
+                                >
                                     <UserPlus class="w-4 h-4 mr-2" />
-                                    {{ sendingRequest ? t('userProfile.sending') : t('userProfile.send_friend_request')
+                                    {{
+                                        sendingRequest
+                                            ? t("userProfile.sending")
+                                            : t(
+                                                  "userProfile.send_friend_request"
+                                              )
                                     }}
                                 </button>
-                                <button @click="handleBlockUser" class="btn btn-error btn-outline w-full"
-                                    :disabled="sendingRequest">
+                                <button
+                                    @click="handleBlockUser"
+                                    class="btn btn-error btn-outline w-full"
+                                    :disabled="sendingRequest"
+                                >
                                     <Ban class="w-4 h-4 mr-2" />
-                                    {{ t('userProfile.block_user') }}
+                                    {{ t("userProfile.block_user") }}
                                 </button>
                             </div>
                         </div>
+
+                        <div
+                            v-if="!isOwnProfile"
+                            class="mt-4 pt-4 border-t border-base-300"
+                        >
+                            <button
+                                @click="handleReportUser"
+                                class="btn btn-ghost btn-outline btn-error btn-sm w-full"
+                            >
+                                <Flag class="w-4 h-4 mr-2" />
+                                {{ t("reports.report_user") }}
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
 
             <div class="text-center">
-                <button @click="$emit('change-view', 'friends')" class="btn btn-outline">
+                <button
+                    @click="$emit('change-view', 'friends')"
+                    class="btn btn-outline"
+                >
                     <ArrowLeft class="w-4 h-4 mr-2" />
-                    {{ t('userProfile.back_to_friends') }}
+                    {{ t("userProfile.back_to_friends") }}
                 </button>
             </div>
+
+            <div class="mt-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h2 class="text-lg font-semibold text-primary-focus">
+                        {{ t("achievements.title") }}
+                    </h2>
+                    <span
+                        v-if="achievements.length > 0"
+                        class="text-sm text-base-content/60"
+                    >
+                        {{ unlockedCount }} / {{ achievements.length }}
+                    </span>
+                </div>
+
+                <div
+                    v-if="loadingAchievements"
+                    class="flex justify-center py-4"
+                >
+                    <span class="loading loading-spinner loading-md"></span>
+                </div>
+
+                <div v-else>
+                    <div
+                        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
+                    >
+                        <AchievementCard
+                            v-for="ach in displayedAchievements"
+                            :key="ach.key"
+                            :achievement-key="ach.key"
+                            :icon-name="ach.icon"
+                            :locked="!isUnlocked(ach.id)"
+                            :unlocked-at="getUnlockedAt(ach.id)"
+                            :hidden="ach.hidden"
+                        />
+                    </div>
+
+                    <div
+                        v-if="achievements.length > initialDisplayCount"
+                        class="flex justify-center mt-4"
+                    >
+                        <button
+                            @click="toggleAchievementsExpand"
+                            class="btn btn-ghost btn-sm"
+                        >
+                            {{
+                                isAchievementsExpanded
+                                    ? t("common.show_less")
+                                    : t("common.show_more")
+                            }}
+                            <component
+                                :is="
+                                    isAchievementsExpanded
+                                        ? ChevronUp
+                                        : ChevronDown
+                                "
+                                class="w-4 h-4 ml-1"
+                            />
+                        </button>
+                    </div>
+                </div>
+            </div>
             <div class="mt-6" v-if="!globalUserStatus.isStreamer.value">
                 <div class="flex items-center justify-between mb-4">
-                    <h2 class="text-lg font-semibold text-primary-focus">{{ t('userProfile.presets_title') }}</h2>
-                    <span class="text-sm text-base-content/60">{{ presetsCountLabel }}</span>
+                    <h2 class="text-lg font-semibold text-primary-focus">
+                        {{ t("userProfile.presets_title") }}
+                    </h2>
+                    <span class="text-sm text-base-content/60">{{
+                        presetsCountLabel
+                    }}</span>
                 </div>
 
                 <div class="card">
                     <div class="card-body">
                         <template v-if="presetsLoading">
-                            <div class="flex items-center gap-2 text-base-content/70">
-                                <span class="loading loading-spinner loading-sm"></span>
-                                <span>{{ t('common.loading') }}</span>
+                            <div
+                                class="flex items-center gap-2 text-base-content/70"
+                            >
+                                <span
+                                    class="loading loading-spinner loading-sm"
+                                ></span>
+                                <span>{{ t("common.loading") }}</span>
                             </div>
                         </template>
                         <template v-else>
                             <div v-if="presets && presets.length">
-                                <PresetGallery :key="`presets-${userProfile.id}`" :owner-id="userProfile.id" />
+                                <PresetGallery
+                                    :key="`presets-${userProfile.id}`"
+                                    :owner-id="userProfile.id"
+                                    :initial-presets="presets"
+                                />
                             </div>
-                            <div v-else class="text-center py-8 text-base-content/70">
-                                <p class="mb-3">{{ t('userProfile.no_presets') }}</p>
-                                <button v-if="isOwnProfile" @click="$emit('change-view', 'presets')"
-                                    class="btn btn-primary">{{ t('userProfile.create_preset') }}</button>
+                            <div
+                                v-else
+                                class="text-center py-8 text-base-content/70"
+                            >
+                                <p class="mb-3">
+                                    {{ t("userProfile.no_presets") }}
+                                </p>
+                                <button
+                                    v-if="isOwnProfile"
+                                    @click="$emit('change-view', 'presets')"
+                                    class="btn btn-primary"
+                                >
+                                    {{ t("userProfile.create_preset") }}
+                                </button>
                             </div>
                         </template>
                     </div>
@@ -250,7 +576,7 @@
             </div>
             <div class="mt-6" v-else>
                 <div class="alert alert-info">
-                    <span>{{ t('userProfile.presets_hidden_streamer') }}</span>
+                    <span>{{ t("userProfile.presets_hidden_streamer") }}</span>
                 </div>
             </div>
         </div>
@@ -258,20 +584,22 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue';
-import { useToast } from '../services/toastService';
-import { useModal } from '../services/modalService';
-import { userService, type PublicUserProfile } from '../services/userService';
-import { useFriends } from '../composables/useFriends';
-import BlockUnblockConfirmModal from '../components/modals/social/friends/BlockUnblockConfirmModal.vue';
-import RemoveFriendConfirmModal from '../components/modals/social/friends/RemoveFriendConfirmModal.vue';
-import UserAvatar from '../components/ui/UserAvatar.vue';
-import FullscreenAvatarModal from '../components/modals/common/FullscreenAvatarModal.vue';
-import PresetGallery from '../components/presets/PresetGallery.vue';
-import DiscordIcon from '../components/ui/icons/DiscordIcon.vue';
-import TelegramIcon from '../components/ui/icons/TelegramIcon.vue';
-import YoutubeIcon from '../components/ui/icons/YoutubeIcon.vue';
-import GithubIcon from '../components/ui/icons/GithubIcon.vue';
+import { ref, onMounted, onUnmounted, computed, watch } from "vue";
+import { useToast } from "../services/toastService";
+import { useModal } from "../services/modalService";
+import { userService, type PublicUserProfile } from "../services/userService";
+import { useFriends } from "../composables/useFriends";
+import BlockUnblockConfirmModal from "../components/modals/social/friends/BlockUnblockConfirmModal.vue";
+import RemoveFriendConfirmModal from "../components/modals/social/friends/RemoveFriendConfirmModal.vue";
+import ReportModal from "../components/modals/common/ReportModal.vue";
+import UserAvatar from "../components/ui/UserAvatar.vue";
+import FullscreenAvatarModal from "../components/modals/common/FullscreenAvatarModal.vue";
+import PresetGallery from "../components/presets/PresetGallery.vue";
+import AchievementCard from "../components/features/profile/AchievementCard.vue";
+import DiscordIcon from "../components/ui/icons/DiscordIcon.vue";
+import TelegramIcon from "../components/ui/icons/TelegramIcon.vue";
+import YoutubeIcon from "../components/ui/icons/YoutubeIcon.vue";
+import GithubIcon from "../components/ui/icons/GithubIcon.vue";
 import {
     Gamepad2,
     Clock,
@@ -281,24 +609,47 @@ import {
     Check,
     X,
     Ban,
+    Flag,
     ArrowLeft,
     Copy,
-} from 'lucide-vue-next';
-import { useI18n } from 'vue-i18n';
-import { globalUserStatus } from '../composables/useUserStatus';
-import { useStreamerMode } from '../composables/useStreamerMode';
-import getRoleBadge from '../utils/roleBadge';
-import { formatDate } from '../utils/utils';
-import { resolveApiAssetUrl } from '../utils/url';
-import { marketplaceService } from '../services/marketplaceService';
-import { useUser } from '../composables/useUser';
+    ChevronDown,
+    ChevronUp,
+} from "lucide-vue-next";
+import { globalUserStatus } from "../composables/useUserStatus";
+import { invoke } from "@tauri-apps/api/core";
+
+interface Client {
+    id: number;
+    name: string;
+    version: string;
+    filename: string;
+    md5_hash: string;
+    main_class: string;
+    show: boolean;
+    working: boolean;
+    insecure: boolean;
+    launches: number;
+    downloads: number;
+    size: number;
+}
+import { useStreamerMode } from "../composables/useStreamerMode";
+import getRoleBadge from "../utils/roleBadge";
+import { resolveApiAssetUrl } from "../utils/url";
+import { marketplaceService } from "../services/marketplaceService";
+import { useUser } from "../composables/useUser";
+import {
+    achievementService,
+    type Achievement,
+    type UserAchievement,
+} from "../services/achievementService";
+import { useI18n } from "vue-i18n";
 
 interface Props {
     userId?: number;
 }
 
 const props = defineProps<Props>();
-defineEmits(['change-view']);
+defineEmits(["change-view"]);
 
 const { t } = useI18n();
 const { addToast } = useToast();
@@ -312,26 +663,91 @@ const sendingRequest = ref(false);
 
 const presets = ref<any[] | null>(null);
 const presetsLoading = ref(false);
+const achievements = ref<Achievement[]>([]);
+const userAchievements = ref<UserAchievement[]>([]);
+const loadingAchievements = ref(false);
+const isAchievementsExpanded = ref(false);
+const initialDisplayCount = 4;
+const availableClients = ref<Client[]>([]);
 
 const { username } = useUser();
 
 const isOwnProfile = computed(() => {
-    return !!userProfile.value && username.value && userProfile.value.username === username.value;
+    return (
+        !!userProfile.value &&
+        username.value &&
+        userProfile.value.username === username.value
+    );
+});
+
+const playtimeDuration = ref("");
+let playtimeInterval: any = null;
+
+const updatePlaytime = () => {
+    if (!userProfile.value?.status?.started_at) {
+        playtimeDuration.value = "";
+        return;
+    }
+    const start = new Date(userProfile.value.status.started_at).getTime();
+    const now = new Date().getTime();
+    const diff = Math.max(0, now - start);
+
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+
+    if (hours > 0) {
+        playtimeDuration.value = `${hours}h ${minutes}m`;
+    } else {
+        playtimeDuration.value = `${minutes}m`;
+    }
+};
+
+watch(
+    () => userProfile.value?.status?.started_at,
+    (newVal) => {
+        if (newVal) {
+            updatePlaytime();
+            if (!playtimeInterval) {
+                playtimeInterval = setInterval(updatePlaytime, 60000);
+            }
+        } else {
+            if (playtimeInterval) {
+                clearInterval(playtimeInterval);
+                playtimeInterval = null;
+            }
+            playtimeDuration.value = "";
+        }
+    },
+    { immediate: true }
+);
+
+onUnmounted(() => {
+    if (playtimeInterval) clearInterval(playtimeInterval);
 });
 
 const presetsCountLabel = computed(() => {
-    if (presetsLoading.value) return t('common.loading');
+    if (presetsLoading.value) return t("common.loading");
     const count = presets.value ? presets.value.length : 0;
-    return `${count} ${t('userProfile.presets')}`;
+    return `${count} ${t("userProfile.presets")}`;
 });
 
 const displayNickname = computed(() => {
-    if (!userProfile.value) return '';
-    return streamer.getDisplayName(userProfile.value.nickname, userProfile.value.username);
+    if (globalUserStatus.isStreamer.value) {
+        return "??????";
+    }
+    return userProfile.value?.nickname || userProfile.value?.username || "User";
+});
+
+const favoriteClientDisplay = computed(() => {
+    if (userProfile.value && (userProfile.value as any).favorite_client_id) {
+        const clientId = (userProfile.value as any).favorite_client_id;
+        return availableClients.value.find((c) => c.id === clientId) || null;
+    }
+    return null;
 });
 
 const displayUsername = computed(() => {
-    if (!userProfile.value) return '';
+    if (!userProfile.value) return "";
     return streamer.getDisplayUsername(userProfile.value.username);
 });
 
@@ -340,9 +756,61 @@ const roleBadge = computed(() => {
     return getRoleBadge((userProfile.value as any).role, (k: string) => t(k));
 });
 
+const unlockedCount = computed(() => userAchievements.value.length);
+
+const sortedAchievements = computed(() => {
+    return [...achievements.value].sort((a, b) => {
+        const aUnlocked = isUnlocked(a.id);
+        const bUnlocked = isUnlocked(b.id);
+        if (aUnlocked && !bUnlocked) return -1;
+        if (!aUnlocked && bUnlocked) return 1;
+        return 0;
+    });
+});
+
+const isUnlocked = (achievementId: number) => {
+    return userAchievements.value.some(
+        (ua) => ua.achievement.id === achievementId
+    );
+};
+
+const getUnlockedAt = (achievementId: number) => {
+    const ua = userAchievements.value.find(
+        (ua) => ua.achievement.id === achievementId
+    );
+    return ua ? ua.unlockedAt : null;
+};
+
+const loadAchievements = async () => {
+    if (!props.userId) return;
+    loadingAchievements.value = true;
+    try {
+        const [all, user] = await Promise.all([
+            achievementService.getAllAchievements(),
+            achievementService.getUserAchievements(props.userId),
+        ]);
+        achievements.value = all || [];
+        userAchievements.value = user || [];
+    } catch (e) {
+        console.error("Failed to load achievements", e);
+    } finally {
+        loadingAchievements.value = false;
+    }
+};
+
+const displayedAchievements = computed(() => {
+    const sorted = sortedAchievements.value;
+    if (isAchievementsExpanded.value) return sorted;
+    return sorted.slice(0, initialDisplayCount);
+});
+
+const toggleAchievementsExpand = () => {
+    isAchievementsExpanded.value = !isAchievementsExpanded.value;
+};
+
 const loadUserProfile = async () => {
     if (!props.userId) {
-        error.value = t('userProfile.no_user_id');
+        error.value = t("userProfile.no_user_id");
         loading.value = false;
         return;
     }
@@ -350,15 +818,30 @@ const loadUserProfile = async () => {
     try {
         loading.value = true;
         error.value = null;
-        userProfile.value = await userService.getUserProfile(props.userId);
+        userProfile.value = await userService.getUserProfile(props.userId, [
+            "presets",
+            "achievements",
+        ]);
+
+        if (userProfile.value.presets) {
+            presets.value = userProfile.value.presets;
+        }
+
+        if (userProfile.value.achievements) {
+            userAchievements.value = userProfile.value.achievements;
+            if (achievements.value.length === 0) {
+                achievements.value =
+                    await achievementService.getAllAchievements();
+            }
+        }
     } catch (err: any) {
-        console.error('Failed to load user profile:', err);
+        console.error("Failed to load user profile:", err);
         if (err.response?.status === 404) {
-            error.value = t('userProfile.user_not_found');
+            error.value = t("userProfile.user_not_found");
         } else if (err.response?.status === 401) {
-            error.value = t('userProfile.login_required');
+            error.value = t("userProfile.login_required");
         } else {
-            error.value = t('userProfile.profile_load_failed');
+            error.value = t("userProfile.profile_load_failed");
         }
     } finally {
         loading.value = false;
@@ -371,15 +854,17 @@ const loadUserPresets = async () => {
         return;
     }
 
-        presetsLoading.value = true;
-        try {
-            presets.value = await marketplaceService.listPresets({ owner: props.userId });
-        } catch (e) {
-            console.error('Failed to load user presets count:', e);
-            presets.value = [];
-        } finally {
-            presetsLoading.value = false;
-        }
+    presetsLoading.value = true;
+    try {
+        presets.value = await marketplaceService.listPresets({
+            owner: props.userId,
+        });
+    } catch (e) {
+        console.error("Failed to load user presets count:", e);
+        presets.value = [];
+    } finally {
+        presetsLoading.value = false;
+    }
 };
 
 const handleSendFriendRequest = async () => {
@@ -389,53 +874,80 @@ const handleSendFriendRequest = async () => {
     try {
         await userService.sendFriendRequest(userProfile.value.id);
         addToast(
-            t('userProfile.friend_request_sent_success', {
+            t("userProfile.friend_request_sent_success", {
                 name: userProfile.value.nickname || userProfile.value.username,
             }),
-            'success'
+            "success"
         );
-        userProfile.value.friendship_status = 'request_sent';
+        userProfile.value.friendship_status = "request_sent";
     } catch (error) {
-        console.error('Failed to send friend request:', error);
-        addToast(t('userProfile.friend_request_failed', {error: error}), 'error');
+        console.error("Failed to send friend request:", error);
+        addToast(
+            t("userProfile.friend_request_failed", { error: error }),
+            "error"
+        );
     } finally {
         sendingRequest.value = false;
     }
 };
 
+const formatDate = (dateString: string) => {
+    if (!dateString) return "";
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+    });
+};
+
+const formatVersion = (version: string): string => {
+    if (!version) return "";
+    return version.replace(/^V/, "").replace(/_/g, ".");
+};
+
+const loadClients = async () => {
+    try {
+        const clients = await invoke<Client[]>("get_clients");
+        availableClients.value = clients.filter((c) => c.show && c.working);
+    } catch (error) {
+        console.error("Failed to load clients:", error);
+    }
+};
+
 const handleRemoveFriend = async () => {
     if (!userProfile.value) return;
 
     showModal(
-        'remove-friend-confirm',
+        "remove-friend-confirm",
         RemoveFriendConfirmModal,
-        { title: t('userProfile.remove_friend') },
+        { title: t("userProfile.remove_friend") },
         { friend: userProfile.value },
         {
             confirm: async (confirmedFriend: any) => {
                 try {
                     await userService.removeFriend(confirmedFriend.id);
                     addToast(
-                        t('userProfile.friend_removed_success', {
+                        t("userProfile.friend_removed_success", {
                             name:
                                 confirmedFriend.nickname ||
                                 confirmedFriend.username,
                         }),
-                        'success'
+                        "success"
                     );
                     userProfile.value!.friendship_status = null;
                 } catch (error) {
-                    console.error('Failed to remove friend:', error);
-                    addToast(t('userProfile.friend_remove_failed'), 'error');
+                    console.error("Failed to remove friend:", error);
+                    addToast(t("userProfile.friend_remove_failed"), "error");
                 }
-                hideModal('remove-friend-confirm');
+                hideModal("remove-friend-confirm");
             },
-            close: () => hideModal('remove-friend-confirm'),
+            close: () => hideModal("remove-friend-confirm"),
         }
     );
 };
 
-const handleRespondToRequest = async (action: 'accept' | 'reject') => {
+const handleRespondToRequest = async (action: "accept" | "reject") => {
     if (!userProfile.value) return;
 
     try {
@@ -445,7 +957,7 @@ const handleRespondToRequest = async (action: 'accept' | 'reject') => {
         );
 
         if (!request) {
-            addToast(t('userProfile.friend_request_not_found'), 'error');
+            addToast(t("userProfile.friend_request_not_found"), "error");
             return;
         }
 
@@ -453,22 +965,22 @@ const handleRespondToRequest = async (action: 'accept' | 'reject') => {
         try {
             const { loadFriendsData } = useFriends();
             await loadFriendsData(true);
-        } catch { }
+        } catch {}
         addToast(
-            t('userProfile.friend_request_responded', { action }),
-            'success'
+            t("userProfile.friend_request_responded", { action }),
+            "success"
         );
 
-        if (action === 'accept') {
-            userProfile.value.friendship_status = 'friends';
+        if (action === "accept") {
+            userProfile.value.friendship_status = "friends";
         } else {
             userProfile.value.friendship_status = null;
         }
     } catch (error) {
         console.error(`Failed to ${action} friend request:`, error);
         addToast(
-            t('userProfile.friend_request_respond_failed', { action }),
-            'error'
+            t("userProfile.friend_request_respond_failed", { action }),
+            "error"
         );
     }
 };
@@ -477,28 +989,45 @@ const handleBlockUser = async () => {
     if (!userProfile.value) return;
 
     showModal(
-        'block-confirm',
+        "block-confirm",
         BlockUnblockConfirmModal,
-        { title: t('userProfile.block_user') },
-        { user: userProfile.value, action: 'block' },
+        { title: t("userProfile.block_user") },
+        { user: userProfile.value, action: "block" },
         {
             confirm: async (user: any) => {
                 try {
                     await userService.blockUser(user.id);
                     addToast(
-                        t('userProfile.user_blocked_success', {
+                        t("userProfile.user_blocked_success", {
                             name: user.nickname || user.username,
                         }),
-                        'success'
+                        "success"
                     );
-                    userProfile.value!.friendship_status = 'blocked';
+                    userProfile.value!.friendship_status = "blocked";
                 } catch (error) {
-                    console.error('Failed to block user:', error);
-                    addToast(t('userProfile.user_block_failed'), 'error');
+                    console.error("Failed to block user:", error);
+                    addToast(t("userProfile.user_block_failed"), "error");
                 }
-                hideModal('block-confirm');
+                hideModal("block-confirm");
             },
-            close: () => hideModal('block-confirm'),
+            close: () => hideModal("block-confirm"),
+        }
+    );
+};
+
+const handleReportUser = () => {
+    if (!userProfile.value) return;
+
+    showModal(
+        "report-user",
+        ReportModal,
+        { title: t("reports.report_user") },
+        {
+            userId: userProfile.value.id,
+            username: userProfile.value.nickname || userProfile.value.username,
+        },
+        {
+            close: () => hideModal("report-user"),
         }
     );
 };
@@ -514,16 +1043,16 @@ const handleCancelFriendRequest = async () => {
         );
 
         if (!request) {
-            addToast(t('userProfile.friend_request_not_found'), 'error');
+            addToast(t("userProfile.friend_request_not_found"), "error");
             return;
         }
 
         await userService.cancelFriendRequest(request.id);
-        addToast(t('userProfile.friend_request_canceled'), 'success');
+        addToast(t("userProfile.friend_request_canceled"), "success");
         userProfile.value.friendship_status = null;
     } catch (error) {
-        console.error('Failed to cancel friend request:', error);
-        addToast(t('userProfile.friend_request_cancel_failed'), 'error');
+        console.error("Failed to cancel friend request:", error);
+        addToast(t("userProfile.friend_request_cancel_failed"), "error");
     } finally {
         sendingRequest.value = false;
     }
@@ -537,62 +1066,61 @@ const formatLastSeen = (lastSeen: string): string => {
     const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
     const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
 
-    if (diffMins < 1) return t('userProfile.just_now');
+    if (diffMins < 1) return t("userProfile.just_now");
     if (diffMins < 60)
-        return t('userProfile.minutes_ago', {
+        return t("userProfile.minutes_ago", {
             count: diffMins,
-            s: diffMins === 1 ? 'у' : '',
+            s: diffMins === 1 ? "у" : "",
         });
     if (diffHours < 24)
-        return t('userProfile.hours_ago', {
+        return t("userProfile.hours_ago", {
             count: diffHours,
-            s: diffHours === 1 ? '' : 'ов',
+            s: diffHours === 1 ? "" : "ов",
         });
     if (diffDays < 7)
-        return t('userProfile.days_ago', {
+        return t("userProfile.days_ago", {
             count: diffDays,
-            s: diffDays === 1 ? 'ень' : 'я',
+            s: diffDays === 1 ? "ень" : "я",
         });
 
     return date.toLocaleDateString();
 };
 
-
 const platformLabel = (key: string) => {
     const map: Record<string, string> = {
-        discord: 'Discord',
-        telegram: 'Telegram',
-        github: 'GitHub',
-        youtube: 'YouTube',
+        discord: "Discord",
+        telegram: "Telegram",
+        github: "GitHub",
+        youtube: "YouTube",
     };
-    const normalized = (key || '').toLowerCase();
+    const normalized = (key || "").toLowerCase();
     return map[normalized] || key;
 };
 
 const platformHref = (platform: string, handle: string) => {
-    if (!handle) return '#';
-    const h = handle.startsWith('@') ? handle.substring(1) : handle;
-    switch ((platform || '').toLowerCase()) {
-        case 'github':
+    if (!handle) return "#";
+    const h = handle.startsWith("@") ? handle.substring(1) : handle;
+    switch ((platform || "").toLowerCase()) {
+        case "github":
             return `https://github.com/${h}`;
-        case 'telegram':
+        case "telegram":
             return `https://t.me/${h}`;
-        case 'youtube':
+        case "youtube":
             return `https://www.youtube.com/@${h}`;
         default:
-            return '#';
+            return "#";
     }
 };
 
 const displayHref = (platform: string, handle: string) => {
-    if (!handle) return '';
-    const h = handle.startsWith('@') ? handle.substring(1) : handle;
-    switch ((platform || '').toLowerCase()) {
-        case 'github':
+    if (!handle) return "";
+    const h = handle.startsWith("@") ? handle.substring(1) : handle;
+    switch ((platform || "").toLowerCase()) {
+        case "github":
             return `github.com/${h}`;
-        case 'telegram':
+        case "telegram":
             return `t.me/${h}`;
-        case 'youtube':
+        case "youtube":
             return handle;
         default:
             return handle;
@@ -600,61 +1128,69 @@ const displayHref = (platform: string, handle: string) => {
 };
 
 const displayHandle = (_platform: string, handle: string) => {
-    if (!handle) return '';
-    return handle.startsWith('@') ? handle : `@${handle}`;
+    if (!handle) return "";
+    return handle.startsWith("@") ? handle : `@${handle}`;
 };
 
 const copySocialHandle = async (link: any) => {
     try {
         if (!link || !link.url) {
-            addToast(t('userProfile.copy_failed'), 'error');
+            addToast(t("userProfile.copy_failed"), "error");
             return;
         }
-        const raw = link.url.startsWith('@') ? link.url.substring(1) : link.url;
+        const raw = link.url.startsWith("@") ? link.url.substring(1) : link.url;
         await navigator.clipboard.writeText(raw);
         addToast(
-            t('userProfile.copied_username', { name: displayHandle(link.platform, link.url) }) || `${displayHandle(link.platform, link.url)} copied`,
-            'success'
+            t("userProfile.copied_username", {
+                name: displayHandle(link.platform, link.url),
+            }) || `${displayHandle(link.platform, link.url)} copied`,
+            "success"
         );
     } catch (err) {
-        console.error('Failed to copy social handle:', err);
-        addToast(t('userProfile.copy_failed'), 'error');
+        console.error("Failed to copy social handle:", err);
+        addToast(t("userProfile.copy_failed"), "error");
     }
 };
 
 const copyUsername = async () => {
     try {
         if (!userProfile.value) {
-            addToast(t('userProfile.copy_failed'), 'error');
+            addToast(t("userProfile.copy_failed"), "error");
             return;
         }
         await navigator.clipboard.writeText(userProfile.value.username);
         addToast(
-            t('userProfile.copied_username', { name: userProfile.value.username }),
-            'success'
+            t("userProfile.copied_username", {
+                name: userProfile.value.username,
+            }),
+            "success"
         );
     } catch (err) {
-        console.error('Failed to copy username:', err);
-        addToast(t('userProfile.copy_failed'), 'error');
+        console.error("Failed to copy username:", err);
+        addToast(t("userProfile.copy_failed"), "error");
     }
 };
 
 const onAvatarClick = () => {
-    const resolvedAvatarUrl = resolveApiAssetUrl(userProfile.value?.avatar_url || null);
+    const resolvedAvatarUrl = resolveApiAssetUrl(
+        userProfile.value?.avatar_url || null
+    );
     if (!resolvedAvatarUrl) return;
     showModal(
-        'avatar-fullscreen',
+        "avatar-fullscreen",
         FullscreenAvatarModal,
-        { contentClass: 'full' },
+        { contentClass: "full" },
         { src: resolvedAvatarUrl, alt: displayNickname.value },
         {
-            close: () => hideModal('avatar-fullscreen'),
+            close: () => hideModal("avatar-fullscreen"),
         }
     );
 };
 
 onMounted(async () => {
     await loadUserProfile();
-    await loadUserPresets();
+    if (!userProfile.value?.presets) await loadUserPresets();
+    if (!userProfile.value?.achievements) await loadAchievements();
+    await loadClients();
 });
 </script>
diff --git a/src/views/VerifyEmailView.vue b/src/views/VerifyEmailView.vue
new file mode 100644
index 00000000..74b8887c
--- /dev/null
+++ b/src/views/VerifyEmailView.vue
@@ -0,0 +1,149 @@
+<template>
+    <div class="flex items-center justify-center min-h-screen p-6">
+        <div class="w-full max-w-md space-y-8">
+            <div class="text-center space-y-4">
+                <div class="flex justify-center">
+                    <div class="p-4 bg-primary/10 rounded-full">
+                        <Mail class="w-12 h-12 text-primary" />
+                    </div>
+                </div>
+                <h1 class="text-3xl font-bold">
+                    {{ t("auth.register.verification_required") }}
+                </h1>
+                <p class="text-base-content/70">
+                    {{ t("auth.register.check_email", { email: email }) }}
+                </p>
+            </div>
+
+            <div class="space-y-6">
+                <div>
+                    <label class="block text-sm font-medium mb-2">{{
+                        t("auth.verify.code_label")
+                    }}</label>
+                    <input
+                        v-model="verificationCode"
+                        type="text"
+                        :placeholder="t('auth.verify.code_placeholder')"
+                        class="input input-lg input-bordered w-full text-center text-2xl tracking-widest font-mono"
+                        maxlength="6"
+                        :disabled="isVerifying"
+                        @keyup.enter="handleVerify"
+                    />
+                    <p class="text-sm text-base-content/50 mt-2">
+                        Enter the 6-digit code sent to your email
+                    </p>
+                </div>
+
+                <div class="space-y-3">
+                    <button
+                        @click="handleVerify"
+                        class="btn btn-primary btn-lg w-full"
+                        :disabled="isVerifying || verificationCode.length < 6"
+                    >
+                        <span
+                            v-if="isVerifying"
+                            class="loading loading-spinner"
+                        ></span>
+                        {{ t("auth.verify.verify_button") }}
+                    </button>
+
+                    <button
+                        @click="handleResend"
+                        class="btn btn-ghost w-full"
+                        :disabled="isResending"
+                    >
+                        <span
+                            v-if="isResending"
+                            class="loading loading-spinner"
+                        ></span>
+                        {{ t("common.send_again") }}
+                    </button>
+
+                    <div class="pt-4 border-t border-base-content/10">
+                        <button
+                            @click="$emit('change-view', 'login')"
+                            class="btn btn-ghost btn-sm w-full"
+                        >
+                            {{ t("common.back_to_login") }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { Mail } from "lucide-vue-next";
+import { apiPost, apiGet } from "../services/apiClient";
+import { getApiBaseWithVersion } from "../config";
+import { useToast } from "../services/toastService";
+
+const props = defineProps<{
+    email: string;
+    code?: string;
+}>();
+
+const emit = defineEmits(["verified", "change-view"]);
+const { t } = useI18n();
+const { addToast } = useToast();
+
+const verificationCode = ref(props.code || "");
+const isVerifying = ref(false);
+const isResending = ref(false);
+
+watch(
+    () => props.code,
+    (newCode) => {
+        if (newCode) {
+            verificationCode.value = newCode;
+            if (newCode.length === 6) {
+                handleVerify();
+            }
+        }
+    }
+);
+
+const handleVerify = async () => {
+    if (!verificationCode.value || verificationCode.value.length < 6) return;
+
+    try {
+        isVerifying.value = true;
+        const response = await apiGet(
+            `${getApiBaseWithVersion()}/auth/verify?token=${encodeURIComponent(verificationCode.value)}`
+        );
+        addToast(t("auth.verify.success"), "success");
+
+        if (response.token) {
+            emit("verified", response.token);
+        } else {
+            emit("verified");
+        }
+    } catch (e) {
+        console.error("Verification failed", e);
+        addToast(t("auth.verify.error"), "error");
+    } finally {
+        isVerifying.value = false;
+    }
+};
+
+const handleResend = async () => {
+    try {
+        isResending.value = true;
+        await apiPost(
+            `${getApiBaseWithVersion()}/auth/resend-verification?email=${encodeURIComponent(props.email)}`
+        );
+        addToast(t("common.verification_sent"), "success");
+    } catch (e) {
+        console.error("Resend failed", e);
+    } finally {
+        isResending.value = false;
+    }
+};
+
+onMounted(async () => {
+    await handleResend();
+});
+</script>
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index fc812394..899b0bc9 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
 declare module "*.vue" {
-  import type { DefineComponent } from "vue";
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
+    import type { DefineComponent } from "vue";
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
 }
diff --git a/vite.config.ts b/vite.config.ts
index c7fd6063..2c6bba4e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +1,25 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import tailwindcss from '@tailwindcss/vite'
-import path from 'path'
+import path from 'path';
 
-const host = process.env.TAURI_DEV_HOST;
+const host: string | undefined = process.env.TAURI_DEV_HOST;
 
+interface HmrConfig {
+  protocol: string;
+  host: string | undefined;
+  port: number;
+}
+
+interface ServerConfig {
+  port: number;
+  strictPort: boolean;
+  host: string | boolean;
+  hmr: HmrConfig | undefined;
+  watch: {
+    ignored: string[];
+  };
+}
 export default defineConfig(async () => ({
   plugins: [vue(), tailwindcss()],
 
@@ -14,27 +29,16 @@ export default defineConfig(async () => ({
     },
   },
 
-  vue: {
-    template: {
-      compilerOptions: {
-        isCustomElement: (tag) => tag === 'lottie-player',
-      },
-    },
-  },
-
   build: {
     rollupOptions: {
-      onwarn(warning, warn) {
-        if (warning.code === 'EVAL' && warning.id?.includes('lottie-web')) {
-          return;
-        }
+      onwarn(warning: any, warn: (warning: any) => void): void {
         if (warning.code === 'EMPTY_BUNDLE') {
           return;
         }
         warn(warning);
       },
       output: {
-        manualChunks(id) {
+        manualChunks(id: string): string | undefined {
           if (id.includes('node_modules')) {
             if (id.includes('monaco-editor')) {
               return 'vendor-monaco';
@@ -48,7 +52,7 @@ export default defineConfig(async () => ({
             if (id.includes('lucide-vue-next')) {
               return 'vendor-icons';
             }
-            if (id.includes('lottie') || id.includes('gsap') || id.includes('axios')) {
+            if (id.includes('gsap') || id.includes('axios')) {
               return 'vendor-utils';
             }
           }
@@ -73,5 +77,5 @@ export default defineConfig(async () => ({
     watch: {
       ignored: ["**/src-tauri/**"],
     },
-  }
+  } as ServerConfig
 }));