Bump version to 0.23.1 (#1227)

* New translations start.en.resx (French)
Update translations from Crowdin [ci skip]

* New translations start.en.resx (Spanish)
Update translations from Crowdin [ci skip]

* New translations start.en.resx (Catalan)
Update translations from Crowdin [ci skip]

* New translations start.en.resx (German)
Update translations from Crowdin [ci skip]

* New translations start.en.resx (Finnish)
Update translations from Crowdin [ci skip]

* New translations start.en.resx (Hebrew)
Update translations from Crowdin [ci skip]

* New translations start.en.resx (Italian)
Update translations from Crowdin [ci skip]

* New translations start.en.resx (Dutch)
Update translations from Crowdin [ci skip]

* New translations start.en.resx (Russian)
Update translations from Crowdin [ci skip]

* New translations start.en.resx (Swedish)
Update translations from Crowdin [ci skip]

* New translations start.en.resx (Turkish)
Update translations from Crowdin [ci skip]

* New translations start.en.resx (Ukrainian)
Update translations from Crowdin [ci skip]

* New translations start.en.resx (Chinese Simplified)
Update translations from Crowdin [ci skip]

* New translations start.en.resx (Dutch)
Update translations from Crowdin [ci skip]

.env.example

@@ -14,91 +14,63 @@
 # Docker containers to apply the changes.
 # ----------------------------------------------------------------------------
 
-# Set the ports that your AliasVault will be accessible at.
-# These are the default ports that will be used by the `reverse-proxy` and `smtp` containers.
-# You can change these to any other ports that are available on your system.
+# ===========================================
+# NETWORK PORTS
+# ===========================================
+
+# Configure the network ports used by AliasVault by the `reverse-proxy` and `smtp` containers.
+# You can change these if the defaults are already in use on your system.
+# Requires a restart before taking effect.
 HTTP_PORT=80
 HTTPS_PORT=443
 SMTP_PORT=25
 SMTP_TLS_PORT=587
 
-# Set the hostname that your AliasVault will be accessible at.
-# E.g. `aliasvault.mydomain.com` or if you're running it on your local machine, choose `localhost`.
-HOSTNAME=
+# Whether to force redirect all HTTP traffic (80) to HTTPS (443). Defaults to true.
+FORCE_HTTPS_REDIRECT=true
 
-# Set a random 32 character string for the JWT key.
-# This can be generated using the following command:
-# $ openssl rand -base64 32
-JWT_KEY=
+# ===========================================
+# EMAIL SERVER CONFIGURATION
+# ===========================================
 
-# Set the password for the data protection certificate.
-# This can be generated using the following command:
-# $ openssl rand -base64 32
-DATA_PROTECTION_CERT_PASS=
-
-# ----------------------------------------------------------------------------
-# Database configuration
-# ----------------------------------------------------------------------------
-# These are the credentials that are used by the PostgreSQL container
-# on startup to create the database and user, and for the application to
-# connect to the database.
-POSTGRES_DB=aliasvault
-POSTGRES_USER=aliasvault
-
-# Set the password for the database user.
-# This can be generated using the following command:
-# $ openssl rand -base64 32
-POSTGRES_PASSWORD=
-
-# Note: in order to change the password for an existing installation
-# refer to https://docs.aliasvault.net/misc/dev/database-operations.html
-
-# ----------------------------------------------------------------------------
-# Admin user configuration
-# ----------------------------------------------------------------------------
-# Set the password for the admin user. This is an encrypted hash that needs
-# to be generated using the `aliasvault-cli` tool. This allows you to login
-# to the admin panel at https://your-hostname/admin.
-#
-# For example:
-# docker run --rm ghcr.io/lanedirt/aliasvault-installcli:latest hash-password "my-password"
-#
-# Then copy the output and paste it into the ADMIN_PASSWORD_HASH variable below.
-# When changing the hash, update the ADMIN_PASSWORD_GENERATED variable to the current date and time
-# and then restart the AliasVault docker containers to apply the changes.
-ADMIN_PASSWORD_HASH=
-
-# Set the date and time the admin password was last generated. When changing the
-# admin password hash manually, make sure to increase this value so the system
-# knows that the password has been changed and should be overwritten with the new hash.
-ADMIN_PASSWORD_GENERATED=2024-01-01T00:00:00Z
-
-# ----------------------------------------------------------------------------
-# Email server configuration for email aliases
-# ----------------------------------------------------------------------------
 # In order to use AliasVault's private email domains feature, you need to configure
 # your DNS. Please refer to the full documentation for more instructions on DNS:
 # https://docs.aliasvault.net/installation/install.html#3-email-server-setup
 #
 # Set the private email domains below that are allowed to be used (comma separated values).
 # Example: PRIVATE_EMAIL_DOMAINS=example.com,example2.org
-# To disable the private email domains feature, set this to "DISABLED.TLD"
-PRIVATE_EMAIL_DOMAINS=DISABLED.TLD
+# To disable the private email domains feature, keep this empty.
+PRIVATE_EMAIL_DOMAINS=
 
-# Set whether TLS is enabled for SMTP.
+# Enable TLS for SMTP.
+# ⚠️ Requires valid TLS certificates on your mail server (not provided by the AliasVault installer).
+# If set to true without proper certificates, the SMTP service will fail to start.
+# For self-hosted setups, we recommend keeping this **false** unless you're sure how to configure it.
+# Note: Disabling TLS does **not** impact email deliverability.
 SMTP_TLS_ENABLED=false
 
-# ----------------------------------------------------------------------------
+# ===========================================
 # Let's Encrypt configuration
-# ----------------------------------------------------------------------------
+# ===========================================
 # Set whether Let's Encrypt is enabled. This is only supported through
-# the install.sh script.
+# the install.sh script and should be set to false for manual installations.
 LETSENCRYPT_ENABLED=false
 
-# ----------------------------------------------------------------------------
+# Set the hostname that your AliasVault will be accessible at in order for LetsEncrypt
+# to do its validation. This value is only required when LETSENCRYPT_ENABLED
+# is set to true.
+# Example: `aliasvault.mydomain.net`.
+HOSTNAME=
+
+# ===========================================
 # Optional configuration settings
-# ----------------------------------------------------------------------------
+# ===========================================
+# Enable or disable ability for new users to create an account via the web interface.
+# Note: make sure you have created your (own) accounts before setting this to false.
 PUBLIC_REGISTRATION_ENABLED=true
+
+# Whether to enable IP logging for auth attempts. When set to true the last octet is
+# always still anonymized, e.g. "127.0.0.1" becomes "127.0.0.xxx".
 IP_LOGGING_ENABLED=true
 
 # Set the support email address which is shown to users in the main web app.

.github/FUNDING.yml

@@ -1,2 +1,3 @@
 # These are supported funding model platforms
 buy_me_a_coffee: lanedirt
+open_collective: aliasvault

.github/workflows/browser-extension-build.yml

@@ -35,6 +35,7 @@ jobs:
             "apps/browser-extension/src/utils/dist/shared/identity-generator"
             "apps/browser-extension/src/utils/dist/shared/password-generator"
             "apps/browser-extension/src/utils/dist/shared/models"
+            "apps/browser-extension/src/utils/dist/shared/vault-sql"
           )
 
           for dir in "${TARGET_DIRS[@]}"; do

.github/workflows/docker-build.yml

@@ -1,4 +1,4 @@
-name: Docker Pull and Build
+name: Docker Build Tests
 
 on:
   push:
@@ -11,125 +11,153 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  docker-compose-pull:
-    name: Docker Compose Pull Test
+  docker-all-in-one-build:
+    name: Docker All-in-One Build Test
     runs-on: ubuntu-latest
 
-    services:
-      docker:
-        image: docker:26.0.0
-        options: --privileged
-
     steps:
-      - name: Get repository and branch information
-        id: repo-info
+      - uses: actions/checkout@v2
+
+      - name: Build all-in-one Docker image
         run: |
-          if [ "${{ github.event_name }}" = "pull_request" ] && [ "${{ github.event.pull_request.head.repo.fork }}" = "true" ]; then
-            echo "REPO_FULL_NAME=lanedirt/AliasVault" >> $GITHUB_ENV
-            echo "BRANCH_NAME=main" >> $GITHUB_ENV
-          else
-            echo "REPO_FULL_NAME=${GITHUB_REPOSITORY}" >> $GITHUB_ENV
-            echo "BRANCH_NAME=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_ENV
+          docker build -f dockerfiles/all-in-one/Dockerfile -t aliasvault-allinone:test .
+          echo "✅ All-in-one Docker image built successfully"
+
+      - name: Run all-in-one container
+        run: |
+          docker run -d \
+            --name aliasvault-test \
+            -p 8080:80 \
+            -p 8443:443 \
+            -p 2525:25 \
+            -p 2587:587 \
+            -v "$(pwd)/database:/database" \
+            -v "$(pwd)/certificates:/certificates" \
+            -v "$(pwd)/logs:/logs" \
+            -v "$(pwd)/secrets:/secrets" \
+            aliasvault-allinone:test
+
+      - name: Wait for services to be ready
+        run: |
+          echo "Waiting for services to initialize..."
+          for i in {1..60}; do
+            if docker exec aliasvault-test curl -f http://localhost:3001/api 2>/dev/null; then
+              echo "✅ API service is ready"
+              break
+            fi
+            echo "Waiting for services... ($i/60)"
+            sleep 5
+          done
+
+      - name: Check container logs if needed
+        if: failure()
+        run: docker logs aliasvault-test
+
+      - name: Test root endpoint
+        uses: nick-fields/retry@v3
+        with:
+          timeout_minutes: 2
+          max_attempts: 3
+          command: |
+            http_code=$(curl -k -s -o /dev/null -w "%{http_code}" https://localhost:8443/)
+            if [ "$http_code" -ne 200 ]; then
+              echo "❌ Root endpoint (/) failed with HTTP $http_code"
+              docker logs aliasvault-test
+              exit 1
+            fi
+            echo "✅ Root endpoint (/) returned HTTP 200"
+
+      - name: Test API endpoint
+        uses: nick-fields/retry@v3
+        with:
+          timeout_minutes: 2
+          max_attempts: 3
+          command: |
+            http_code=$(curl -k -s -o /dev/null -w "%{http_code}" https://localhost:8443/api)
+            if [ "$http_code" -ne 200 ]; then
+              echo "❌ API endpoint (/api) failed with HTTP $http_code"
+              docker logs aliasvault-test
+              exit 1
+            fi
+            echo "✅ API endpoint (/api) returned HTTP 200"
+
+      - name: Test Admin endpoint
+        uses: nick-fields/retry@v3
+        with:
+          timeout_minutes: 2
+          max_attempts: 3
+          command: |
+            http_code=$(curl -k -s -o /dev/null -w "%{http_code}" https://localhost:8443/admin/user/login)
+            if [ "$http_code" -ne 200 ]; then
+              echo "❌ Admin endpoint (/admin) failed with HTTP $http_code"
+              docker logs aliasvault-test
+              exit 1
+            fi
+            echo "✅ Admin endpoint (/admin) returned HTTP 200"
+
+      - name: Verify admin password hash file does not exist initially
+        run: |
+          if [ -f "./secrets/admin_password_hash" ]; then
+            echo "❌ Admin password hash file should not exist initially"
+            cat ./secrets/admin_password_hash
+            exit 1
           fi
+          echo "✅ Admin password hash file correctly does not exist initially"
 
-      - name: Download install script from current branch
+      - name: Test admin password reset flow
         run: |
-          INSTALL_SCRIPT_URL="https://raw.githubusercontent.com/$REPO_FULL_NAME/$BRANCH_NAME/install.sh"
-          echo "Downloading install script from: $INSTALL_SCRIPT_URL"
-          curl -f -o install.sh "$INSTALL_SCRIPT_URL"
+          echo "🔧 Testing admin password reset flow..."
 
-      - name: Create .env file with custom SMTP port
-        run: echo "SMTP_PORT=2525" > .env
+          # Run the reset password script with auto-confirm
+          echo "Running reset-admin-password command..."
+          password_output=$(docker exec aliasvault-test aliasvault reset-admin-password -y 2>&1)
+          echo "Script output:"
+          echo "$password_output"
 
-      - name: Set permissions and run install.sh (install)
-        id: install_script
-        run: |
-          chmod +x install.sh
-          {
-            ./install.sh install --verbose
-            exit_code=$?
-            if [ $exit_code -eq 2 ]; then
-              echo "skip_remaining=true" >> $GITHUB_OUTPUT
-              true
-            elif [ $exit_code -ne 0 ]; then
-              false
-            fi
-          } || {
-            if [ $exit_code -eq 2 ]; then
-              echo "skip_remaining=true" >> $GITHUB_OUTPUT
-              true
-            else
-              exit $exit_code
-            fi
-          }
+          # Extract the generated password from the output
+          generated_password=$(echo "$password_output" | grep -E "^Password: " | sed 's/Password: //')
+          if [ -z "$generated_password" ]; then
+            echo "❌ Failed to extract generated password from script output"
+            echo "Full output was:"
+            echo "$password_output"
+            exit 1
+          fi
+          echo "✅ Generated password extracted: $generated_password"
 
-      - name: Run docker compose up
-        if: ${{ !steps.install_script.outputs.skip_remaining }}
-        run: docker compose -f docker-compose.yml up -d
+          # Verify that the admin_password_hash file now exists in the container
+          if ! docker exec aliasvault-test test -f /secrets/admin_password_hash; then
+            echo "❌ Admin password hash file was not created in container"
+            docker exec aliasvault-test ls -la /secrets/
+            exit 1
+          fi
+          echo "✅ Admin password hash file created in container"
 
-      - name: Wait for services
-        if: ${{ !steps.install_script.outputs.skip_remaining }}
-        run: sleep 10
+          # Verify that the admin_password_hash file exists locally (mounted volume)
+          if [ ! -f "./secrets/admin_password_hash" ]; then
+            echo "❌ Admin password hash file not found in local secrets folder"
+            ls -la ./secrets/
+            exit 1
+          fi
+          echo "✅ Admin password hash file exists in local secrets folder"
 
-      - name: Test WASM App
-        if: ${{ !steps.install_script.outputs.skip_remaining }}
-        uses: nick-fields/retry@v3
-        with:
-          timeout_minutes: 2
-          max_attempts: 3
-          command: |
-            http_code=$(curl -k -s -o /dev/null -w "%{http_code}" https://localhost:443)
-            if [ "$http_code" -ne 200 ]; then
-              echo "WASM app failed with $http_code"
-              exit 1
-            fi
-
-      - name: Test WebApi
-        if: ${{ !steps.install_script.outputs.skip_remaining }}
-        uses: nick-fields/retry@v3
-        with:
-          timeout_minutes: 2
-          max_attempts: 3
-          command: |
-            http_code=$(curl -k -s -o /dev/null -w "%{http_code}" https://localhost:443/api)
-            if [ "$http_code" -ne 200 ]; then
-              echo "WebApi failed with $http_code"
-              exit 1
-            fi
-
-      - name: Test Admin App
-        if: ${{ !steps.install_script.outputs.skip_remaining }}
-        uses: nick-fields/retry@v3
-        with:
-          timeout_minutes: 2
-          max_attempts: 3
-          command: |
-            http_code=$(curl -k -s -o /dev/null -w "%{http_code}" https://localhost:443/admin/user/login)
-            if [ "$http_code" -ne 200 ]; then
-              echo "Admin app failed with $http_code"
-              exit 1
-            fi
-
-      - name: Test SMTP
-        if: ${{ !steps.install_script.outputs.skip_remaining }}
+      - name: Test SMTP port
         uses: nick-fields/retry@v3
         with:
           timeout_minutes: 2
           max_attempts: 3
           command: |
             if ! nc -zv localhost 2525 2>&1 | grep -q 'succeeded'; then
-              echo "SMTP failed"
+              echo "❌ SMTP port 2525 is not accessible"
+              docker logs aliasvault-test
               exit 1
             fi
+            echo "✅ SMTP port 2525 is accessible"
 
-      - name: Test reset-admin-password output
-        if: ${{ !steps.install_script.outputs.skip_remaining }}
+      - name: Cleanup
+        if: always()
         run: |
-          output=$(./install.sh reset-admin-password)
-          if ! echo "$output" | grep -E '.*New admin password: [A-Za-z0-9+/=]{8,}.*'; then
-            echo "Invalid reset-admin-password output"
-            exit 1
-          fi
+          docker stop aliasvault-test || true
+          docker rm aliasvault-test || true
 
   docker-compose-build:
     name: Docker Compose Build Test
@@ -143,6 +171,21 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
+      - name: Check local docker-compose.yml for :latest tags
+        run: |
+          # Check for explicit version tags instead of :latest
+          if grep -E "ghcr\.io/aliasvault/[^:]+:[0-9]+\.[0-9]+\.[0-9]+" docker-compose.yml; then
+            echo "❌ Error: docker-compose.yml contains explicit version tags instead of :latest"
+            echo "Found the following explicit versions:"
+            grep -E "ghcr\.io/aliasvault/[^:]+:[0-9]+\.[0-9]+\.[0-9]+" docker-compose.yml
+            echo ""
+            echo "All AliasVault images in docker-compose.yml must use ':latest' tags, not explicit versions."
+            echo "Please update docker-compose.yml to use ':latest' for all AliasVault images."
+            exit 1
+          fi
+
+          echo "✅ docker-compose.yml correctly uses :latest tags for all AliasVault images"
+
       - name: Create .env file with custom SMTP port
         run: echo "SMTP_PORT=2525" > .env
 
@@ -197,9 +240,10 @@ jobs:
             fi
 
       - name: Test reset-admin-password output
+        if: ${{ !steps.install_script.outputs.skip_remaining }}
         run: |
-          output=$(./install.sh reset-admin-password)
-          if ! echo "$output" | grep -E '.*New admin password: [A-Za-z0-9+/=]{8,}.*'; then
+          output=$(./install.sh reset-admin-password | sed 's/\x1b\[[0-9;]*m//g')
+          if ! echo "$output" | grep -Eq '^\s*Password: [A-Za-z0-9+/=]{8,}'; then
             echo "Invalid reset-admin-password output"
             exit 1
           fi

.github/workflows/mobile-app-build.yml

@@ -56,6 +56,7 @@ jobs:
             "utils/dist/shared/identity-generator"
             "utils/dist/shared/password-generator"
             "utils/dist/shared/models"
+            "utils/dist/shared/vault-sql"
           )
 
           for dir in "${TARGET_DIRS[@]}"; do

.github/workflows/release.yml

@@ -4,10 +4,27 @@ on:
   release:
     types: [published]
   workflow_dispatch:
-
-env:
-  REGISTRY: ghcr.io
-  IMAGE_NAME: ${{ github.repository }}
+    inputs:
+      build_browser_extensions:
+        description: 'Build browser extensions'
+        required: false
+        default: true
+        type: boolean
+      build_mobile_apps:
+        description: 'Build mobile apps'
+        required: false
+        default: true
+        type: boolean
+      build_multi_container:
+        description: 'Build and push multi-container images'
+        required: false
+        default: true
+        type: boolean
+      build_all_in_one:
+        description: 'Build and push all-in-one image'
+        required: false
+        default: true
+        type: boolean
 
 jobs:
   upload-install-script:
@@ -19,12 +36,14 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Upload install.sh to release
+        if: github.event_name == 'release'
         uses: softprops/action-gh-release@v2
         with:
           files: install.sh
           token: ${{ secrets.GITHUB_TOKEN }}
 
   build-chrome-extension:
+    if: github.event_name == 'release' || inputs.build_browser_extensions
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -34,11 +53,12 @@ jobs:
         uses: ./.github/actions/build-browser-extension
         with:
           browser: chrome
-          upload_to_release: true
+          upload_to_release: ${{ github.event_name == 'release' }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
   build-firefox-extension:
+    if: github.event_name == 'release' || inputs.build_browser_extensions
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -48,11 +68,12 @@ jobs:
         uses: ./.github/actions/build-browser-extension
         with:
           browser: firefox
-          upload_to_release: true
+          upload_to_release: ${{ github.event_name == 'release' }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
   build-edge-extension:
+    if: github.event_name == 'release' || inputs.build_browser_extensions
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -62,11 +83,12 @@ jobs:
         uses: ./.github/actions/build-browser-extension
         with:
           browser: edge
-          upload_to_release: true
+          upload_to_release: ${{ github.event_name == 'release' }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
   build-android-release:
+    if: github.event_name == 'release' || inputs.build_mobile_apps
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -76,7 +98,7 @@ jobs:
         uses: ./.github/actions/build-android-app
         with:
           signed: true
-          upload_to_release: true
+          upload_to_release: ${{ github.event_name == 'release' }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           ANDROID_KEYSTORE_BASE64: ${{ secrets.ANDROID_KEYSTORE_BASE64 }}
@@ -84,7 +106,8 @@ jobs:
           ANDROID_KEYSTORE_PASSWORD: ${{ secrets.ANDROID_KEYSTORE_PASSWORD }}
           ANDROID_KEY_PASSWORD: ${{ secrets.ANDROID_KEY_PASSWORD }}
 
-  build-and-push-docker:
+  build-and-push-docker-multi-container:
+    if: github.event_name == 'release' || inputs.build_multi_container
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -100,91 +123,316 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
 
-      - name: Convert repository name to lowercase
-        run: |
-          echo "REPO_LOWER=${GITHUB_REPOSITORY,,}" >>${GITHUB_ENV}
-
-      - name: Log in to the Container registry
+      - name: Log in to GitHub Container Registry
         uses: docker/login-action@v3
         with:
-          registry: ${{ env.REGISTRY }}
+          registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Extract metadata
-        id: meta
+      - name: Extract metadata for Postgres image
+        id: postgres-meta
         uses: docker/metadata-action@v5
+        env:
+          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
         with:
-          images: ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}
+          images: ghcr.io/aliasvault/postgres
+          tags: |
+            type=raw,value=latest,enable=${{ github.event_name == 'release' && github.event.release.prerelease == false }}
+            type=semver,pattern={{version}},enable=${{ github.event_name == 'release' || github.ref_type == 'tag' }}
+            type=ref,event=tag,enable=${{ github.ref_type == 'tag' }}
+            type=ref,event=branch,enable=${{ github.ref_type == 'branch' }}
+            type=raw,value={{branch}}-{{sha}},enable=${{ github.ref_type == 'branch' }}
+          labels: |
+            org.opencontainers.image.title=AliasVault PostgreSQL
+            org.opencontainers.image.description=PostgreSQL database for AliasVault. Part of multi-container setup and can be deployed via install.sh (see docs.aliasvault.net)
+          annotations: |
+            org.opencontainers.image.description=PostgreSQL database for AliasVault. Part of multi-container setup and can be deployed via install.sh (see docs.aliasvault.net)
+
+      - name: Extract metadata for API image
+        id: api-meta
+        uses: docker/metadata-action@v5
+        env:
+          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
+        with:
+          images: ghcr.io/aliasvault/api
+          tags: |
+            type=raw,value=latest,enable=${{ github.event_name == 'release' && github.event.release.prerelease == false }}
+            type=semver,pattern={{version}},enable=${{ github.event_name == 'release' || github.ref_type == 'tag' }}
+            type=ref,event=tag,enable=${{ github.ref_type == 'tag' }}
+            type=ref,event=branch,enable=${{ github.ref_type == 'branch' }}
+            type=raw,value={{branch}}-{{sha}},enable=${{ github.ref_type == 'branch' }}
+          labels: |
+            org.opencontainers.image.title=AliasVault API
+            org.opencontainers.image.description=REST API backend for AliasVault. Part of multi-container setup and can be deployed via install.sh (see docs.aliasvault.net)
+          annotations: |
+            org.opencontainers.image.description=REST API backend for AliasVault. Part of multi-container setup and can be deployed via install.sh (see docs.aliasvault.net)
+
+      - name: Extract metadata for Client image
+        id: client-meta
+        uses: docker/metadata-action@v5
+        env:
+          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
+        with:
+          images: ghcr.io/aliasvault/client
+          tags: |
+            type=raw,value=latest,enable=${{ github.event_name == 'release' && github.event.release.prerelease == false }}
+            type=semver,pattern={{version}},enable=${{ github.event_name == 'release' || github.ref_type == 'tag' }}
+            type=ref,event=tag,enable=${{ github.ref_type == 'tag' }}
+            type=ref,event=branch,enable=${{ github.ref_type == 'branch' }}
+            type=raw,value={{branch}}-{{sha}},enable=${{ github.ref_type == 'branch' }}
+          labels: |
+            org.opencontainers.image.title=AliasVault Client
+            org.opencontainers.image.description=Blazor WebAssembly client UI for AliasVault. Part of multi-container setup and can be deployed via install.sh (see docs.aliasvault.net)
+          annotations: |
+            org.opencontainers.image.description=Blazor WebAssembly client UI for AliasVault. Part of multi-container setup and can be deployed via install.sh (see docs.aliasvault.net)
+
+      - name: Extract metadata for Admin image
+        id: admin-meta
+        uses: docker/metadata-action@v5
+        env:
+          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
+        with:
+          images: ghcr.io/aliasvault/admin
+          tags: |
+            type=raw,value=latest,enable=${{ github.event_name == 'release' && github.event.release.prerelease == false }}
+            type=semver,pattern={{version}},enable=${{ github.event_name == 'release' || github.ref_type == 'tag' }}
+            type=ref,event=tag,enable=${{ github.ref_type == 'tag' }}
+            type=ref,event=branch,enable=${{ github.ref_type == 'branch' }}
+            type=raw,value={{branch}}-{{sha}},enable=${{ github.ref_type == 'branch' }}
+          labels: |
+            org.opencontainers.image.title=AliasVault Admin
+            org.opencontainers.image.description=Admin portal for AliasVault. Part of multi-container setup and can be deployed via install.sh (see docs.aliasvault.net)
+          annotations: |
+            org.opencontainers.image.description=Admin portal for AliasVault. Part of multi-container setup and can be deployed via install.sh (see docs.aliasvault.net)
+
+      - name: Extract metadata for Reverse Proxy image
+        id: reverse-proxy-meta
+        uses: docker/metadata-action@v5
+        env:
+          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
+        with:
+          images: ghcr.io/aliasvault/reverse-proxy
+          tags: |
+            type=raw,value=latest,enable=${{ github.event_name == 'release' && github.event.release.prerelease == false }}
+            type=semver,pattern={{version}},enable=${{ github.event_name == 'release' || github.ref_type == 'tag' }}
+            type=ref,event=tag,enable=${{ github.ref_type == 'tag' }}
+            type=ref,event=branch,enable=${{ github.ref_type == 'branch' }}
+            type=raw,value={{branch}}-{{sha}},enable=${{ github.ref_type == 'branch' }}
+          labels: |
+            org.opencontainers.image.title=AliasVault Reverse Proxy
+            org.opencontainers.image.description=Nginx reverse proxy for AliasVault. Part of multi-container setup and can be deployed via install.sh (see docs.aliasvault.net)
+          annotations: |
+            org.opencontainers.image.description=Nginx reverse proxy for AliasVault. Part of multi-container setup and can be deployed via install.sh (see docs.aliasvault.net)
+
+      - name: Extract metadata for SMTP image
+        id: smtp-meta
+        uses: docker/metadata-action@v5
+        env:
+          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
+        with:
+          images: ghcr.io/aliasvault/smtp
+          tags: |
+            type=raw,value=latest,enable=${{ github.event_name == 'release' && github.event.release.prerelease == false }}
+            type=semver,pattern={{version}},enable=${{ github.event_name == 'release' || github.ref_type == 'tag' }}
+            type=ref,event=tag,enable=${{ github.ref_type == 'tag' }}
+            type=ref,event=branch,enable=${{ github.ref_type == 'branch' }}
+            type=raw,value={{branch}}-{{sha}},enable=${{ github.ref_type == 'branch' }}
+          labels: |
+            org.opencontainers.image.title=AliasVault SMTP Service
+            org.opencontainers.image.description=SMTP service for AliasVault. Part of multi-container setup and can be deployed via install.sh (see docs.aliasvault.net)
+          annotations: |
+            org.opencontainers.image.description=SMTP service for AliasVault. Part of multi-container setup and can be deployed via install.sh (see docs.aliasvault.net)
+
+      - name: Extract metadata for TaskRunner image
+        id: task-runner-meta
+        uses: docker/metadata-action@v5
+        env:
+          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
+        with:
+          images: ghcr.io/aliasvault/task-runner
+          tags: |
+            type=raw,value=latest,enable=${{ github.event_name == 'release' && github.event.release.prerelease == false }}
+            type=semver,pattern={{version}},enable=${{ github.event_name == 'release' || github.ref_type == 'tag' }}
+            type=ref,event=tag,enable=${{ github.ref_type == 'tag' }}
+            type=ref,event=branch,enable=${{ github.ref_type == 'branch' }}
+            type=raw,value={{branch}}-{{sha}},enable=${{ github.ref_type == 'branch' }}
+          labels: |
+            org.opencontainers.image.title=AliasVault TaskRunner
+            org.opencontainers.image.description=Background task runner for AliasVault. Part of multi-container setup and can be deployed via install.sh (see docs.aliasvault.net)
+          annotations: |
+            org.opencontainers.image.description=Background task runner for AliasVault. Part of multi-container setup and can be deployed via install.sh (see docs.aliasvault.net)
+
+      - name: Extract metadata for InstallCLI image
+        id: installcli-meta
+        uses: docker/metadata-action@v5
+        env:
+          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
+        with:
+          images: ghcr.io/aliasvault/installcli
+          tags: |
+            type=raw,value=latest,enable=${{ github.event_name == 'release' && github.event.release.prerelease == false }}
+            type=semver,pattern={{version}},enable=${{ github.event_name == 'release' || github.ref_type == 'tag' }}
+            type=ref,event=tag,enable=${{ github.ref_type == 'tag' }}
+            type=ref,event=branch,enable=${{ github.ref_type == 'branch' }}
+            type=raw,value={{branch}}-{{sha}},enable=${{ github.ref_type == 'branch' }}
+          labels: |
+            org.opencontainers.image.title=AliasVault Install CLI
+            org.opencontainers.image.description=Installation and configuration CLI for AliasVault. Used by install.sh for setup and configuration, not deployed as part of the application stack
+          annotations: |
+            org.opencontainers.image.description=Installation and configuration CLI for AliasVault. Used by install.sh for setup and configuration, not deployed as part of the application stack
+
 
       - name: Build and push Postgres image
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: apps/server/Databases/AliasServerDb/Dockerfile
           platforms: linux/amd64,linux/arm64/v8
           push: true
-          tags: ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-postgres:latest,${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-postgres:${{ github.ref_name }}
+          tags: ${{ steps.postgres-meta.outputs.tags }}
+          labels: ${{ steps.postgres-meta.outputs.labels }}
+          annotations: ${{ steps.postgres-meta.outputs.annotations }}
 
       - name: Build and push API image
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: apps/server/AliasVault.Api/Dockerfile
           platforms: linux/amd64,linux/arm64/v8
           push: true
-          tags: ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-api:latest,${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-api:${{ github.ref_name }}
+          tags: ${{ steps.api-meta.outputs.tags }}
+          labels: ${{ steps.api-meta.outputs.labels }}
+          annotations: ${{ steps.api-meta.outputs.annotations }}
 
       - name: Build and push Client image
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: apps/server/AliasVault.Client/Dockerfile
           platforms: linux/amd64,linux/arm64/v8
           push: true
-          tags: ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-client:latest,${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-client:${{ github.ref_name }}
+          tags: ${{ steps.client-meta.outputs.tags }}
+          labels: ${{ steps.client-meta.outputs.labels }}
+          annotations: ${{ steps.client-meta.outputs.annotations }}
 
       - name: Build and push Admin image
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: apps/server/AliasVault.Admin/Dockerfile
           platforms: linux/amd64,linux/arm64/v8
           push: true
-          tags: ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-admin:latest,${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-admin:${{ github.ref_name }}
+          tags: ${{ steps.admin-meta.outputs.tags }}
+          labels: ${{ steps.admin-meta.outputs.labels }}
+          annotations: ${{ steps.admin-meta.outputs.annotations }}
 
       - name: Build and push Reverse Proxy image
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: apps/server/Dockerfile
           platforms: linux/amd64,linux/arm64/v8
           push: true
-          tags: ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-reverse-proxy:latest,${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-reverse-proxy:${{ github.ref_name }}
+          tags: ${{ steps.reverse-proxy-meta.outputs.tags }}
+          labels: ${{ steps.reverse-proxy-meta.outputs.labels }}
+          annotations: ${{ steps.reverse-proxy-meta.outputs.annotations }}
 
       - name: Build and push SMTP image
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: apps/server/Services/AliasVault.SmtpService/Dockerfile
           platforms: linux/amd64,linux/arm64/v8
           push: true
-          tags: ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-smtp:latest,${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-smtp:${{ github.ref_name }}
+          tags: ${{ steps.smtp-meta.outputs.tags }}
+          labels: ${{ steps.smtp-meta.outputs.labels }}
+          annotations: ${{ steps.smtp-meta.outputs.annotations }}
 
       - name: Build and push TaskRunner image
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: apps/server/Services/AliasVault.TaskRunner/Dockerfile
           platforms: linux/amd64,linux/arm64/v8
           push: true
-          tags: ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-task-runner:latest,${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-task-runner:${{ github.ref_name }}
+          tags: ${{ steps.task-runner-meta.outputs.tags }}
+          labels: ${{ steps.task-runner-meta.outputs.labels }}
+          annotations: ${{ steps.task-runner-meta.outputs.annotations }}
 
       - name: Build and push InstallCli image
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: apps/server/Utilities/AliasVault.InstallCli/Dockerfile
           platforms: linux/amd64,linux/arm64/v8
           push: true
-          tags: ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-installcli:latest,${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-installcli:${{ github.ref_name }}
+          tags: ${{ steps.installcli-meta.outputs.tags }}
+          labels: ${{ steps.installcli-meta.outputs.labels }}
+          annotations: ${{ steps.installcli-meta.outputs.annotations }}
+
+  build-and-push-docker-all-in-one:
+    if: github.event_name == 'release' || inputs.build_all_in_one
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Extract metadata for all-in-one image
+        id: meta
+        uses: docker/metadata-action@v5
+        env:
+          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
+        with:
+          images: |
+            ghcr.io/aliasvault/aliasvault
+            aliasvault/aliasvault
+          tags: |
+            # For release events with latest tag (only for non-prerelease)
+            type=raw,value=latest,enable=${{ github.event_name == 'release' && github.event.release.prerelease == false }}
+            # semver tags for releases (works for prerelease and normal release)
+            type=semver,pattern={{version}},enable=${{ github.event_name == 'release' || github.ref_type == 'tag' }}
+            # For tags, use tag name
+            type=ref,event=tag,enable=${{ github.ref_type == 'tag' }}
+            # For branches, use branch name and branch name + short SHA for uniqueness
+            type=ref,event=branch,enable=${{ github.ref_type == 'branch' }}
+            type=raw,value={{branch}}-{{sha}},enable=${{ github.ref_type == 'branch' }}
+          labels: |
+            org.opencontainers.image.title=AliasVault All-in-One
+            org.opencontainers.image.description=Self-contained AliasVault server including web app, with all services bundled using s6-overlay. Single container solution for easy deployment (see docs.aliasvault.net).
+          annotations: |
+            org.opencontainers.image.description=Self-contained AliasVault server including web app, with all services bundled using s6-overlay. Single container solution for easy deployment (see docs.aliasvault.net).
+
+      - name: Build and push all-in-one image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: dockerfiles/all-in-one/Dockerfile
+          platforms: linux/amd64,linux/arm64/v8
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          annotations: ${{ steps.meta.outputs.annotations }}

.github/workflows/sonarcloud-code-analysis.yml

@@ -1,75 +0,0 @@
-# This workflow will perform a SonarCloud code analysis on every push to the main branch or
-# when a pull request is opened, synchronized, or reopened. The "pull_request_target" event is
-# used to ensure that the analysis is done on the source branch of the pull request which has
-# access to the SonarCloud token secret.
-name: SonarCloud code analysis
-on:
-    push:
-        branches:
-            - main
-    pull_request_target:
-        types: [opened, synchronize, reopened]
-
-jobs:
-    build:
-        name: Build and analyze
-        runs-on: windows-latest
-        steps:
-            - name: Setup .NET
-              uses: actions/setup-dotnet@v3
-              with:
-                  dotnet-version: '9.0.x'
-
-            - name: Install WASM workload
-              run: dotnet workload install wasm-tools
-
-            - name: Set up JDK 17
-              uses: actions/setup-java@v3
-              with:
-                  java-version: 17
-                  distribution: 'zulu'
-
-            - name: Checkout code of PR branch
-              uses: actions/checkout@v3
-              with:
-                ref: ${{ github.event.pull_request.head.sha }}
-                fetch-depth: 0
-
-            - name: Cache SonarCloud packages
-              uses: actions/cache@v3
-              with:
-                  path: ~\sonar\cache
-                  key: ${{ runner.os }}-sonar
-                  restore-keys: ${{ runner.os }}-sonar
-
-            - name: Cache SonarCloud scanner
-              id: cache-sonar-scanner
-              uses: actions/cache@v3
-              with:
-                  path: .\.sonar\scanner
-                  key: ${{ runner.os }}-sonar-scanner
-                  restore-keys: ${{ runner.os }}-sonar-scanner
-
-            - name: Install SonarCloud scanner
-              if: steps.cache-sonar-scanner.outputs.cache-hit != 'true'
-              shell: powershell
-              run: |
-                  New-Item -Path .\.sonar\scanner -ItemType Directory
-                  dotnet tool update dotnet-sonarscanner --tool-path .\.sonar\scanner
-
-            - name: Build and analyze
-              working-directory: apps/server
-              env:
-                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-                  SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
-              shell: powershell
-              run: |
-                  $scanner = "${{ github.workspace }}\.sonar\scanner\dotnet-sonarscanner"
-                  if ('${{ github.event_name }}' -eq 'pull_request_target') {
-                      & $scanner begin /k:"lanedirt_AliasVault" /o:"lanedirt" /d:sonar.token="${{ secrets.SONAR_TOKEN }}" /d:sonar.pullrequest.key=${{ github.event.pull_request.number }} /d:sonar.host.url="https://sonarcloud.io" /d:sonar.cs.opencover.reportsPaths="**/coverage.opencover.xml" /d:sonar.coverage.exclusions="**Tests*.cs" /d:sonar.exclusions="**/__tests__/test-forms/*.html,**/dist/shared/**"
-                  } else {
-                      & $scanner begin /k:"lanedirt_AliasVault" /o:"lanedirt" /d:sonar.token="${{ secrets.SONAR_TOKEN }}" /d:sonar.host.url="https://sonarcloud.io" /d:sonar.cs.opencover.reportsPaths="**/coverage.opencover.xml" /d:sonar.coverage.exclusions="**Tests*.cs" /d:sonar.exclusions="**/__tests__/test-forms/*.html,**/dist/shared/**"
-                  }
-                  dotnet build
-                  dotnet test -c Release /p:CollectCoverage=true /p:CoverletOutput=coverage /p:CoverletOutputFormat=opencover --filter 'FullyQualifiedName!~AliasVault.E2ETests'
-                  & $scanner end /d:sonar.token="${{ secrets.SONAR_TOKEN }}"

.gitignore

@@ -378,6 +378,10 @@ FodyWeavers.xsd
 # Codebuddy Rider plugin
 .codebuddy
 
+# Claude Code
+.claude
+CLAUDE.md
+
 # -------------------
 # AliasVault specifics
 # -------------------
@@ -400,8 +404,12 @@ certificates/**/*.crt
 certificates/**/*.key
 certificates/**/*.pfx
 certificates/**/*.pem
+certificates/**/.hostname_marker
 certificates/letsencrypt/**
 
+# Secrets
+secrets/**
+
 # Docs
 docs/_site
 docs/vendor
@@ -413,6 +421,7 @@ database/postgres-dev
 
 # Temp files
 temp
+*.zip
 
 # Don't check in .js.map or .mjs.map files. These are generated by the build process in the shared
 # libraries and copied to the application so they can be used for debugging, but we don't need

.vscode/tasks.json

@@ -43,6 +43,34 @@
                 "cwd": "${workspaceFolder}/apps/server/AliasVault.Admin"
             }
         },
+        {
+            "label": "Build and watch SMTP Service",
+            "type": "shell",
+            "command": "dotnet watch",
+            "args": [],
+            "problemMatcher": [],
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
+            "options": {
+                "cwd": "${workspaceFolder}/apps/server/Services/AliasVault.SmtpService"
+            }
+        },
+        {
+            "label": "Build and watch TaskRunner",
+            "type": "shell",
+            "command": "dotnet watch",
+            "args": [],
+            "problemMatcher": [],
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
+            "options": {
+                "cwd": "${workspaceFolder}/apps/server/Services/AliasVault.TaskRunner"
+            }
+        },
         {
             "label": "Build and watch Client CSS",
             "type": "shell",
@@ -171,7 +199,7 @@
         {
             "label": "Build and watch Docs",
             "type": "shell",
-            "command": "docker compose up",
+            "command": "docker compose build && docker compose up",
             "problemMatcher": [],
             "group": {
                 "kind": "build",

CONTRIBUTING.md

@@ -1,26 +1,74 @@
-# Contributing to the source code
-We welcome contributions to AliasVault. Please read the guidelines on the official AliasVault docs website on how to get your local development environment setup and the general contribution guidelines:
+# Contributing to AliasVault
+
+Thanks for your interest in contributing to the AliasVault project! There are a lot of ways to help out.
+
+## Table of Contents
+
+1. [Help spread the word](#1-help-spread-the-word)
+2. [Contributing to Translations](#2-contributing-to-translations)
+3. [Contributing to the Documentation](#3-contributing-to-the-documentation)
+4. [Contributing to the Main Codebase](#4-contributing-to-the-main-codebase)
+   - [4.1 Get in contact](#41-get-in-contact)
+   - [4.2 Set up your local development environment](#42-set-up-your-local-development-environment)
+5. [License and Contributions](#5-license-and-contributions)
+
+---
+
+## 1. Help spread the word
+
+Help grow the AliasVault community by:
+
+- Answering questions and helping users in our [Discord](https://discord.gg/DsaXMTEtpF)
+- Reporting bugs and suggesting improvements
+- Sharing on social media and writing about your experience
+- Creating tutorials and documentation
+- Spreading the word about privacy and self-hosting
+
+## 2. Contributing to Translations
+
+Help make AliasVault accessible to users worldwide by contributing translations! AliasVault is currently available in English and Dutch, but we're looking for volunteers to help translate it into other languages such as German, French, Spanish, Ukrainian, Italian, and more.
+
+AliasVault translations are managed through [Crowdin](https://crowdin.com/), an online translation platform. If you’d like to help translate AliasVault into your native language, please [request access to the Crowdin project](https://crowdin.com/project/aliasvault).
+
+If you're willing to help, we also encourage you to get in contact via [Discord](https://discord.gg/DsaXMTEtpF) to chat (quickest), or contact us via email at [contact@support.aliasvault.net](mailto:contact@support.aliasvault.net) to discuss the language(s) you are willing to contribute to, and so we can answer any technical questions you might have.
+
+Your translation contributions will help make AliasVault more accessible to privacy-conscious users around the world!
+
+## 3. Contributing to the Documentation
+
+The docs are built using Jekyll and automatically deploy to GitHub Pages via GitHub Actions. You can build the docs locally by running `docker compose up` in the `./docs` folder.
+
+The docs site is based on the open-source template called Just The Docs. Find more information about how this template works in the [official docs](https://just-the-docs.github.io/just-the-docs/).
+
+To make changes to the AliasVault documentation please make a PR that directly edits the `docs` markdown files in this repository.
+
+## 4. Contributing to the Main Codebase
+
+### 4.1 Get in contact
+If you're planning to work on a new feature or improvement for AliasVault, we strongly encourage you to get in touch with us first. This ensures that your proposed changes align with the project's direction and increases the likelihood of your work being accepted into the official repository. You can reach us through:
+
+- Opening an issue on GitHub to discuss your proposed changes
+- Reaching out via Discord or email
+- Contacting the maintainers directly
+
+### 4.2 Set up your local development environment
+You can find instructions on how to get your local development environment setup for the different parts of the AliasVault codebase here:
 
 https://docs.aliasvault.net/misc/dev/
 
 > Tip: if the URL above is not available, the raw doc pages can also be found in the `docs` folder in this repository.
 
-## Contributing to the documentation
-The docs are built using Jekyll and automatically deploy to GitHub Pages via GitHub Actions. You can build the docs locally by running `docker compose up` in the `./docs` folder.
+If you run into any issues, feel free to join our [Discord](https://discord.gg/DsaXMTEtpF) to chat with the maintainers and author.
 
-The docs site is based on the open-source template called Just The Docs. Find more information about how this template works in the [official docs](https://just-the-docs.github.io/just-the-docs/).
+## 5. License and Contributions
 
+AliasVault is licensed under the GNU Affero General Public License v3.0 (AGPLv3). By submitting code, documentation, or other contributions to this project, you agree that:
 
-To make changes to the AliasVault documentation please make a PR that directly edits the `docs` markdown files in this repository.
+1. Your contribution will be licensed under the same AGPLv3 license as the project
+2. You have the legal right to grant this license (e.g., you are the author, or have permission)
+3. You understand that your contribution will be made public under the AGPLv3 terms
+4. You are not expected to provide support or warranties for your contribution
 
-## Contributor License Agreement (CLA)
-Thank you for your interest in contributing to AliasVault (“Project”).
+✅ There is no Contributor License Agreement (CLA) required. We believe in a balanced open source model where all contributors are treated equally under the terms of the AGPLv3.
 
-By submitting code, documentation, or other contributions to this Project, you agree to the following:
-
-1. You are legally entitled to grant this license (e.g., you are the author, or have permission).
-2. You grant the Project maintainers a perpetual, worldwide, non-exclusive, royalty-free license to use, modify, distribute, and sublicense your contribution as part of the Project and any derivative works.
-3. You understand that your contribution will be made public and licensed under the same terms as the Project (e.g., AGPLv3), or any later version the maintainers may release.
-4. You are not expected to provide support or warranties for your contribution.
-
-> All contributors must accept the CLA as a condition of contributing. By opening a pull request, you agree to these terms. We may enforce this automatically via GitHub if needed.
+> By opening a pull request, you agree to these terms. Your contributions will be published under the AGPLv3 license.

README.md

@@ -1,19 +1,21 @@
 # <img src="https://github.com/user-attachments/assets/933c8b45-a190-4df6-913e-b7c64ad9938b" width="35" alt="AliasVault"> AliasVault
-The privacy-first password & email alias manager. Fully end-to-end encrypted, with built-in alias generation and email server — giving you full control over your online identity and safeguarding your privacy.
+AliasVault is a privacy-first password and email alias manager. Create unique identities, strong passwords, and random email aliases for every website you use. Fully end-to-end encrypted, with a built-in email server and zero third-party dependencies.
 
-[<img src="https://img.shields.io/github/v/release/lanedirt/AliasVault?include_prereleases&logo=github&label=Release">](https://github.com/lanedirt/AliasVault/releases)
-[![.NET E2E Tests (with Sharding)](https://github.com/lanedirt/AliasVault/actions/workflows/dotnet-e2e-tests.yml/badge.svg)](https://github.com/lanedirt/AliasVault/actions/workflows/dotnet-e2e-tests.yml)
-[<img src="https://img.shields.io/sonar/quality_gate/lanedirt_AliasVault?server=https%3A%2F%2Fsonarcloud.io&label=Sonarcloud&logo=sonarcloud">](https://sonarcloud.io/summary/new_code?id=lanedirt_AliasVault)
+[<img src="https://img.shields.io/github/v/release/aliasvault/aliasvault?include_prereleases&logo=github&label=Release">](https://github.com/aliasvault/aliasvault/releases)
+[![.NET E2E Tests (with Sharding)](https://github.com/aliasvault/aliasvault/actions/workflows/dotnet-e2e-tests.yml/badge.svg)](https://github.com/aliasvault/aliasvault/actions/workflows/dotnet-e2e-tests.yml)
+[<img src="https://badges.crowdin.net/aliasvault/localized.svg">](https://crowdin.com/project/aliasvault)
 [<img alt="Discord" src="https://img.shields.io/discord/1309300619026235422?logo=discord&logoColor=%237289da&label=Discord&color=%237289da">](https://discord.gg/DsaXMTEtpF)
 
 <a href="https://app.aliasvault.net">Try the cloud version 🔥</a> | <a href="https://aliasvault.net?utm_source=gh-readme">Website </a> | <a href="https://docs.aliasvault.net?utm_source=gh-readme">Documentation </a> | <a href="#self-hosting">Self-host instructions</a>
 
+**⭐ Star us on GitHub, it motivates us a lot!**
+
+If you enjoy using AliasVault, please also consider leaving a review on our apps or browser extensions, and share it with your friends or colleagues. Your support helps others discover a privacy-first alternative to traditional & closed-source password managers.
+
 ## About
-AliasVault helps protect your privacy online by generating a unique password, identity, and email alias for every service you use. Everything is end-to-end encrypted and under your control — whether in the cloud or self-hosted.
+Built on 15 years of experience, AliasVault is independent, open-source, self-hostable and community-driven. It’s the response to a web that tracks everything: a way to take back control of your digital privacy and help you stay secure online.
 
-Built on 15 years of experience, AliasVault is open-source, self-hostable and community-driven. It’s the response to a web that tracks everything: a way to take back control of your digital privacy and help you stay secure online.
-
-– Leendert de Borst (@lanedirt), Creator of AliasVault
+– Leendert de Borst ([@lanedirt](https://github.com/lanedirt)), Creator of AliasVault
 
 ## Screenshots
 
@@ -47,40 +49,47 @@ Built on 15 years of experience, AliasVault is open-source, self-hostable and co
 ## Cloud-hosted
 Use the official cloud version of AliasVault at [app.aliasvault.net](https://app.aliasvault.net). This fully supported platform is always up to date with our latest release.
 
-AliasVault is available on: [Web](https://app.aliasvault.net) | [iOS](https://apps.apple.com/app/id6745490915) | [Android](https://play.google.com/store/apps/details?id=net.aliasvault.app) | [Chrome](https://chromewebstore.google.com/detail/aliasvault/bmoggiinmnodjphdjnmpcnlleamkfedj) | [Firefox](https://addons.mozilla.org/en-US/firefox/addon/aliasvault/) | [Edge](https://microsoftedge.microsoft.com/addons/detail/aliasvault/kabaanafahnjkfkplbnllebdmppdemfo) | [Safari](https://apps.apple.com/app/id6743163173)
+AliasVault is available on:
+- [Web (universal)](https://app.aliasvault.net)
+- [Chrome](https://chromewebstore.google.com/detail/aliasvault/bmoggiinmnodjphdjnmpcnlleamkfedj)
+- [Firefox](https://addons.mozilla.org/en-US/firefox/addon/aliasvault/)
+- [Edge](https://microsoftedge.microsoft.com/addons/detail/aliasvault/kabaanafahnjkfkplbnllebdmppdemfo)
+- [Safari](https://apps.apple.com/app/id6743163173)
+
+<p>
+  <a href="https://apps.apple.com/app/id6745490915" style="display: inline-block; margin-right: 20px;"><img src="https://github.com/user-attachments/assets/bad09b85-2635-4e3e-b154-9f348b88f6d6" style="height: 40px;margin-right:10px;"  alt="Download on the App Store"></a>
+  <a href="https://play.google.com/store/apps/details?id=net.aliasvault.app" style="display: inline-block;"><img src="https://github.com/user-attachments/assets/b28979c9-f4b8-4090-8735-e384a7fdaa47" style="height: 40px;" alt="Get it on Google Play"></a>
+      <a href="https://f-droid.org/packages/net.aliasvault.app" style="display: inline-block;"><img src="https://github.com/user-attachments/assets/0fb25df1-0ea2-46a6-bfee-a9d70f22a02a" style="height: 40px;" alt="Get it on F-Droid"></a>
+</p>
 
 [<img width="700" alt="Screenshot of AliasVault" src="docs/assets/img/screenshot.png">](https://app.aliasvault.net)
 
 ## Self-hosting
-For full control over your own data you can self-host and install AliasVault on your own servers.
+> [!NOTE]
+> **Requirements:** 1 vCPU, 1GB RAM, 16GB disk, Docker ≥ 20.10, 64-bit Linux
 
-### Install using install script
+AliasVault can be self-hosted on your own servers using two different installation methods. Both use Docker, but they differ in how much is automated versus how much you manage yourself.
 
-This method uses pre-built Docker images and works on minimal hardware specifications:
+- **Option 1: Install Script** - Managed solution with automatic SSL (recommended for VPS/cloud)
 
-- Linux VM with root access (Ubuntu/AlmaLinux recommended) or Raspberry Pi
-- 1 vCPU
-- 1GB RAM
-- 16GB disk space
-- Docker installed
+- **Option 2: Docker Compose** - Single container with manual setup for use with existing SSL infrastructure (NAS, homelab)
 
+### Quick Start (Install Script)
 ```bash
-# Download install script from latest stable release
-curl -L -o install.sh https://github.com/lanedirt/AliasVault/releases/latest/download/install.sh
+# Download and run install script
+curl -L -o install.sh https://github.com/aliasvault/aliasvault/releases/latest/download/install.sh
 
 # Make install script executable and run it. This will create the .env file, pull the Docker images, and start the AliasVault containers.
 chmod +x install.sh
+
 ./install.sh install
 ```
 
-The install script will output the URL where the app is available. By default this is:
-- Client: https://localhost
-- Admin portal: https://localhost/admin
+For other installation methods and more detailed steps, please read the [full installation guide](https://docs.aliasvault.net/installation) in the official docs.
 
-> Note: If you want to change the default AliasVault ports you can do so in the `.env` file.
-
-## Technical documentation
+## Documentation
 For more information about the installation process, manual setup instructions and other topics, please see the official documentation website:
+
 - [Documentation website (docs.aliasvault.net) 📚](https://docs.aliasvault.net)
 
 ## Security Architecture
@@ -115,17 +124,18 @@ Core features that are being worked on:
 - [x] Import passwords from traditional password managers
 - [x] iOS native app
 - [x] Android native app
-- [ ] Data model and usability improvements (more flexible aliases and credential types, folder support, editing in browser extension, bulk selecting etc.)
+- [x] Editing in browser extension
+- [x] Multi-language support across all client applications
+- [ ] Data model and usability improvements (more flexible aliases and credential types, folder support, bulk selecting etc.)
 - [ ] Support for FIDO2/WebAuthn hardware keys and passkeys
 - [ ] Adding support for family/team sharing (organization features)
 
-👉 [View the full AliasVault roadmap here](https://github.com/lanedirt/AliasVault/issues/731)
+👉 [View the full AliasVault roadmap here](https://github.com/aliasvault/aliasvault/issues/731)
 
 ### Got feedback or ideas?
-Feel free to open an issue or join our [Discord](https://discord.gg/DsaXMTEtpF)! Contributions are warmly welcomed—whether in feature development, testing, or spreading the word. Get in touch on Discord if you're interested in contributing.
+Feel free to open an issue or discussion on GitHub. We warmly welcome all contributions: whether it’s translating, testing, helping to build features, sharing feedback - or helping spread the word about AliasVault. Every bit of support helps the project grow, so don’t hesitate to jump in and [say hi to us on Discord](https://discord.gg/DsaXMTEtpF)!
 
 ### Support the mission
-Your donation helps me dedicate more time and resources to improving AliasVault, making the internet safer for everyone!
-
-<a href="https://www.buymeacoffee.com/lanedirt" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
+AliasVault is open-source and community-driven. If you like what we’re building, consider supporting us through [Open Collective](https://opencollective.com/aliasvault) or through:
 
+<a href="https://www.buymeacoffee.com/lanedirt" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 50px !important;" ></a>

SonarLint.xml

@@ -1,13 +0,0 @@
-<SonarLint>
-    <Rules>
-        <Rule>
-            <Key>S1135</Key>
-            <Parameters>
-                <Parameter>
-                    <Name>sonarlint.rule.enabled</Name>
-                    <Value>false</Value>
-                </Parameter>
-            </Parameters>
-        </Rule>
-    </Rules>
-</SonarLint>

apps/browser-extension/package-lock.json

@@ -1,22 +1,24 @@
 {
   "name": "aliasvault-browser-extension",
-  "version": "0.18.1",
+  "version": "0.22.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "aliasvault-browser-extension",
-      "version": "0.18.1",
+      "version": "0.22.0",
       "hasInstallScript": true,
       "dependencies": {
         "@hookform/resolvers": "^5.1.1",
         "argon2-browser": "^1.18.0",
         "buffer": "^6.0.3",
         "globals": "^16.0.0",
+        "i18next": "^25.3.1",
         "otpauth": "^9.3.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-hook-form": "^7.57.0",
+        "react-i18next": "^15.6.0",
         "react-router-dom": "^7.5.2",
         "secure-remote-password": "github:LinusU/secure-remote-password#73e5f732b6ca0cdbdc19da1a0c5f48cdbad2cbf0",
         "sql.js": "^1.12.0",
@@ -47,7 +49,7 @@
         "postcss": "^8.5.1",
         "tailwindcss": "^3.4.17",
         "typescript": "^5.6.3",
-        "vite-plugin-static-copy": "^2.2.0",
+        "vite-plugin-static-copy": "^2.3.2",
         "wxt": "^0.20.6"
       }
     },
@@ -7014,6 +7016,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.0.0.tgz",
@@ -7079,6 +7090,46 @@
         "node": ">= 14"
       }
     },
+    "node_modules/i18next": {
+      "version": "25.3.1",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.3.1.tgz",
+      "integrity": "sha512-S4CPAx8LfMOnURnnJa8jFWvur+UX/LWcl6+61p9VV7SK2m0445JeBJ6tLD0D5SR0H29G4PYfWkEhivKG5p4RDg==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/i18next/node_modules/@babel/runtime": {
+      "version": "7.27.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
+      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -10790,6 +10841,41 @@
         "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "15.6.0",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.6.0.tgz",
+      "integrity": "sha512-W135dB0rDfiFmbMipC17nOhGdttO5mzH8BivY+2ybsQBbXvxWIwl3cmeH3T9d+YPBSJu/ouyJKFJTtkK7rJofw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0",
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-i18next/node_modules/@babel/runtime": {
+      "version": "7.27.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
+      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -12676,7 +12762,7 @@
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -12978,9 +13064,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.3.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
-      "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
+      "version": "6.3.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.6.tgz",
+      "integrity": "sha512-0msEVHJEScQbhkbVTb/4iHZdJ6SXp/AvxL2sjwYQFfBqleHtnCqv1J3sa9zbWz/6kW1m9Tfzn92vW+kZ1WV6QA==",
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
@@ -13074,9 +13160,9 @@
       }
     },
     "node_modules/vite-plugin-static-copy": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-2.3.1.tgz",
-      "integrity": "sha512-EfsPcBm3ewg3UMG8RJaC0ADq6/qnUZnokXx4By4+2cAcipjT9i0Y0owIJGqmZI7d6nxk4qB1q5aXOwNuSyPdyA==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-2.3.2.tgz",
+      "integrity": "sha512-iwrrf+JupY4b9stBttRWzGHzZbeMjAHBhkrn67MNACXJVjEMRpCI10Q3AkxdBkl45IHaTfw/CNVevzQhP7yTwg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13189,6 +13275,15 @@
         }
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",

apps/browser-extension/package.json

@@ -2,7 +2,7 @@
   "name": "aliasvault-browser-extension",
   "description": "AliasVault Browser Extension",
   "private": true,
-  "version": "0.19.2",
+  "version": "0.23.1",
   "type": "module",
   "scripts": {
     "dev:chrome": "wxt -b chrome",
@@ -30,10 +30,12 @@
     "argon2-browser": "^1.18.0",
     "buffer": "^6.0.3",
     "globals": "^16.0.0",
+    "i18next": "^25.3.1",
     "otpauth": "^9.3.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.57.0",
+    "react-i18next": "^15.6.0",
     "react-router-dom": "^7.5.2",
     "secure-remote-password": "github:LinusU/secure-remote-password#73e5f732b6ca0cdbdc19da1a0c5f48cdbad2cbf0",
     "sql.js": "^1.12.0",
@@ -64,7 +66,7 @@
     "postcss": "^8.5.1",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.6.3",
-    "vite-plugin-static-copy": "^2.2.0",
+    "vite-plugin-static-copy": "^2.3.2",
     "wxt": "^0.20.6"
   }
 }

apps/browser-extension/public/assets/images/logo.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg enable-background="new 0 0 500 500" version="1.1" viewBox="0 0 500 500" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
-<path d="m459.87 294.95c0.016205 5.4005 0.03241 10.801-0.35022 16.873-1.111 6.3392-1.1941 12.173-2.6351 17.649-10.922 41.508-36.731 69.481-77.351 83.408-7.2157 2.4739-14.972 3.3702-22.479 4.995-23.629 0.042205-47.257 0.11453-70.886 0.12027-46.762 0.011322-93.523-0.01416-140.95-0.43411-8.59-2.0024-16.766-2.8352-24.398-5.3326-21.595-7.0666-39.523-19.656-53.708-37.552-10.227-12.903-17.579-27.17-21.28-43.221-1.475-6.3967-2.4711-12.904-3.6852-19.361-0.051849-5.747-0.1037-11.494 0.26915-17.886 4.159-42.973 27.68-71.638 63.562-92.153 0-0.70761-0.001961-1.6988 3.12e-4 -2.69 0.022484-9.8293-1.3071-19.894 0.35664-29.438 3.2391-18.579 11.08-35.272 23.763-49.773 12.098-13.832 26.457-23.989 43.609-30.029 7.813-2.7512 16.14-4.0417 24.234-5.9948 7.392-0.025734 14.784-0.05146 22.835 0.32253 4.1959 0.95392 7.7946 1.2538 11.258 2.1053 17.16 4.2192 32.287 12.176 45.469 24.104 2.2558 2.0411 4.372 6.6241 9.621 3.868 16.839-8.8419 34.718-11.597 53.603-8.594 16.791 2.6699 31.602 9.4308 44.236 20.636 11.531 10.227 19.84 22.841 25.393 37.236 6.3436 16.445 10.389 33.163 6.0798 49.389 7.9587 8.9321 15.807 16.704 22.421 25.414 9.162 12.065 15.33 25.746 18.144 40.776 0.97046 5.1848 1.9111 10.375 2.8654 15.563m-71.597 71.012c5.5615-5.2284 12.002-9.7986 16.508-15.817 10.474-13.992 14.333-29.916 11.288-47.446-2.2496-12.95-8.1973-24.076-17.243-33.063-12.746-12.663-28.865-18.614-46.786-18.569-69.912 0.17712-139.82 0.56831-209.74 0.96176-15.922 0.089599-29.168 7.4209-39.685 18.296-14.45 14.944-20.408 33.343-16.655 54.368 2.2763 12.754 8.2167 23.748 17.158 32.66 13.299 13.255 30.097 18.653 48.728 18.651 59.321-0.005188 118.64 0.042358 177.96-0.046601 9.5912-0.014374 19.181-0.86588 28.773-0.88855 10.649-0.025146 19.978-3.825 29.687-9.1074z" fill="#EEC170"/>
-<path d="m162.77 293c15.654 4.3883 20.627 22.967 10.304 34.98-5.3104 6.1795-14.817 8.3208-24.278 5.0472-7.0723-2.4471-12.332-10.362-12.876-17.933-1.0451-14.542 11.089-23.176 21.705-23.046 1.5794 0.019287 3.1517 0.61566 5.1461 0.95184z" fill="#EEC170"/>
-<path d="m227.18 293.64c7.8499 2.3973 11.938 8.2143 13.524 15.077 1.8591 8.0439-0.44817 15.706-7.1588 21.121-6.7633 5.4572-14.417 6.8794-22.578 3.1483-8.2972-3.7933-12.836-10.849-12.736-19.438 0.1687-14.497 14.13-25.368 28.948-19.908z" fill="#EEC170"/>
-<path d="m261.57 319.07c-2.495-14.418 4.6853-22.603 14.596-26.108 9.8945-3.4995 23.181 3.4303 26.267 13.779 4.6504 15.591-7.1651 29.064-21.665 28.161-8.5254-0.53088-17.202-6.5094-19.198-15.831z" fill="#EEC170"/>
-<path d="m336.91 333.41c-9.0175-4.2491-15.337-14.349-13.829-21.682 3.0825-14.989 13.341-20.304 23.018-19.585 10.653 0.79141 17.93 7.407 19.765 17.547 1.9588 10.824-4.1171 19.939-13.494 23.703-5.272 2.1162-10.091 1.5086-15.46 0.017883z" fill="#EEC170"/>
-</svg>

apps/browser-extension/public/offscreen.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>AliasVault Offscreen Document</title>
+  <!-- The offscreen.html is used for clipboard clearing. It is a hidden document that runs in a hidden context with access to clipboard operations. -->
+</head>
+<body>
+  <textarea id="text"></textarea>
+  <script src="offscreen.js"></script>
+</body>
+</html>

apps/browser-extension/public/offscreen.js

@@ -0,0 +1,37 @@
+/**
+ * Offscreen document for clipboard operations.
+ * This document runs in a hidden context with access to clipboard operations.
+ */
+
+// Listen for messages from the service worker
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === 'CLEAR_CLIPBOARD') {
+    clearClipboard()
+      .then(() => {
+        sendResponse({ success: true, message: 'Clipboard cleared successfully' });
+      })
+      .catch((error) => {
+        console.error('[OFFSCREEN] Failed to clear clipboard:', error);
+        sendResponse({ success: false, message: error.message });
+      });
+    // Return true to indicate we'll send response asynchronously
+    return true;
+  }
+});
+
+const textEl = document.querySelector('#text');
+
+/**
+ * Clear the clipboard by writing a space using execCommand.
+ */
+async function clearClipboard() {
+  try {
+    // Use execCommand to clear clipboard
+    textEl.value = '\n';
+    textEl.select();
+    document.execCommand('copy');
+  } catch (error) {
+    console.error('[OFFSCREEN] Error clearing clipboard:', error);
+    throw error;
+  }
+}

apps/browser-extension/safari-xcode/AliasVault/AliasVault.xcodeproj/project.pbxproj

@@ -447,7 +447,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 21;
+				CURRENT_PROJECT_VERSION = 230000;
 				DEVELOPMENT_TEAM = 8PHW4HN3F7;
 				ENABLE_HARDENED_RUNTIME = YES;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -460,7 +460,7 @@
 					"@executable_path/../../../../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 10.14;
-				MARKETING_VERSION = 0.19.2;
+				MARKETING_VERSION = 0.23.1;
 				OTHER_LDFLAGS = (
 					"-framework",
 					SafariServices,
@@ -479,7 +479,7 @@
 			buildSettings = {
 				CODE_SIGN_ENTITLEMENTS = "AliasVault Extension/AliasVault_Extension.entitlements";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 21;
+				CURRENT_PROJECT_VERSION = 230000;
 				DEVELOPMENT_TEAM = 8PHW4HN3F7;
 				ENABLE_HARDENED_RUNTIME = YES;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -492,7 +492,7 @@
 					"@executable_path/../../../../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 10.14;
-				MARKETING_VERSION = 0.19.2;
+				MARKETING_VERSION = 0.23.1;
 				OTHER_LDFLAGS = (
 					"-framework",
 					SafariServices,
@@ -515,7 +515,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
 				COMBINE_HIDPI_IMAGES = YES;
-				CURRENT_PROJECT_VERSION = 21;
+				CURRENT_PROJECT_VERSION = 230000;
 				DEVELOPMENT_TEAM = 8PHW4HN3F7;
 				ENABLE_HARDENED_RUNTIME = YES;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -530,7 +530,7 @@
 					"@executable_path/../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 10.14;
-				MARKETING_VERSION = 0.19.2;
+				MARKETING_VERSION = 0.23.1;
 				OTHER_LDFLAGS = (
 					"-framework",
 					SafariServices,
@@ -554,7 +554,7 @@
 				CODE_SIGN_ENTITLEMENTS = AliasVault/AliasVault.entitlements;
 				CODE_SIGN_STYLE = Automatic;
 				COMBINE_HIDPI_IMAGES = YES;
-				CURRENT_PROJECT_VERSION = 21;
+				CURRENT_PROJECT_VERSION = 230000;
 				DEVELOPMENT_TEAM = 8PHW4HN3F7;
 				ENABLE_HARDENED_RUNTIME = YES;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -569,7 +569,7 @@
 					"@executable_path/../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 10.14;
-				MARKETING_VERSION = 0.19.2;
+				MARKETING_VERSION = 0.23.1;
 				OTHER_LDFLAGS = (
 					"-framework",
 					SafariServices,

apps/browser-extension/src/assets/tailwind.css

@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-@media (max-width: 400px) {
+@media (max-width: 380px) {
     html, body {
       width: 350px;
       max-width: 350px;

apps/browser-extension/src/entrypoints/background.ts

@@ -1,10 +1,13 @@
 import { onMessage, sendMessage } from "webext-bridge/background";
 
+import { handleResetAutoLockTimer, handlePopupHeartbeat, handleSetAutoLockTimeout } from '@/entrypoints/background/AutolockTimeoutHandler';
+import { handleClipboardCopied, handleCancelClipboardClear, handleGetClipboardClearTimeout, handleSetClipboardClearTimeout, handleGetClipboardCountdownState } from '@/entrypoints/background/ClipboardClearHandler';
 import { setupContextMenus } from '@/entrypoints/background/ContextMenu';
 import { handleOpenPopup, handlePopupWithCredential, handleToggleContextMenu } from '@/entrypoints/background/PopupMessageHandler';
-import { handleCheckAuthStatus, handleClearPersistedFormValues, handleClearVault, handleCreateIdentity, handleGetCredentials, handleGetDefaultEmailDomain, handleGetDefaultIdentityLanguage, handleGetDerivedKey, handleGetPasswordSettings, handleGetPersistedFormValues, handleGetVault, handlePersistFormValues, handleStoreVault, handleSyncVault, handleUploadVault } from '@/entrypoints/background/VaultMessageHandler';
+import { handleCheckAuthStatus, handleClearPersistedFormValues, handleClearVault, handleCreateIdentity, handleGetCredentials, handleGetDefaultEmailDomain, handleGetDefaultIdentitySettings, handleGetEncryptionKey, handleGetEncryptionKeyDerivationParams, handleGetPasswordSettings, handleGetPersistedFormValues, handleGetVault, handlePersistFormValues, handleStoreEncryptionKey, handleStoreEncryptionKeyDerivationParams, handleStoreVault, handleSyncVault, handleUploadVault } from '@/entrypoints/background/VaultMessageHandler';
 
 import { GLOBAL_CONTEXT_MENU_ENABLED_KEY } from '@/utils/Constants';
+import type { EncryptionKeyDerivationParams } from '@/utils/dist/shared/models/metadata';
 
 import { defineBackground, storage, browser } from '#imports';
 
@@ -15,17 +18,26 @@ export default defineBackground({
   async main() {
     // Listen for messages using webext-bridge
     onMessage('CHECK_AUTH_STATUS', () => handleCheckAuthStatus());
+
+    onMessage('GET_ENCRYPTION_KEY', () => handleGetEncryptionKey());
+    onMessage('GET_ENCRYPTION_KEY_DERIVATION_PARAMS', () => handleGetEncryptionKeyDerivationParams());
+    onMessage('GET_VAULT', () => handleGetVault());
+    onMessage('GET_CREDENTIALS', () => handleGetCredentials());
+
+    onMessage('GET_DEFAULT_EMAIL_DOMAIN', () => handleGetDefaultEmailDomain());
+    onMessage('GET_DEFAULT_IDENTITY_SETTINGS', () => handleGetDefaultIdentitySettings());
+    onMessage('GET_PASSWORD_SETTINGS', () => handleGetPasswordSettings());
+
     onMessage('STORE_VAULT', ({ data }) => handleStoreVault(data));
+    onMessage('STORE_ENCRYPTION_KEY', ({ data }) => handleStoreEncryptionKey(data as string));
+    onMessage('STORE_ENCRYPTION_KEY_DERIVATION_PARAMS', ({ data }) => handleStoreEncryptionKeyDerivationParams(data as EncryptionKeyDerivationParams));
+
+    onMessage('CREATE_IDENTITY', ({ data }) => handleCreateIdentity(data));
     onMessage('UPLOAD_VAULT', ({ data }) => handleUploadVault(data));
     onMessage('SYNC_VAULT', () => handleSyncVault());
-    onMessage('GET_VAULT', () => handleGetVault());
+
     onMessage('CLEAR_VAULT', () => handleClearVault());
-    onMessage('GET_CREDENTIALS', () => handleGetCredentials());
-    onMessage('CREATE_IDENTITY', ({ data }) => handleCreateIdentity(data));
-    onMessage('GET_DEFAULT_EMAIL_DOMAIN', () => handleGetDefaultEmailDomain());
-    onMessage('GET_DEFAULT_IDENTITY_LANGUAGE', () => handleGetDefaultIdentityLanguage());
-    onMessage('GET_PASSWORD_SETTINGS', () => handleGetPasswordSettings());
-    onMessage('GET_DERIVED_KEY', () => handleGetDerivedKey());
+
     onMessage('OPEN_POPUP', () => handleOpenPopup());
     onMessage('OPEN_POPUP_WITH_CREDENTIAL', ({ data }) => handlePopupWithCredential(data));
     onMessage('TOGGLE_CONTEXT_MENU', ({ data }) => handleToggleContextMenu(data));
@@ -34,10 +46,25 @@ export default defineBackground({
     onMessage('GET_PERSISTED_FORM_VALUES', () => handleGetPersistedFormValues());
     onMessage('CLEAR_PERSISTED_FORM_VALUES', () => handleClearPersistedFormValues());
 
+    // Clipboard management messages
+    onMessage('CLIPBOARD_COPIED', () => handleClipboardCopied());
+    onMessage('CANCEL_CLIPBOARD_CLEAR', () => handleCancelClipboardClear());
+    onMessage('GET_CLIPBOARD_CLEAR_TIMEOUT', () => handleGetClipboardClearTimeout());
+    onMessage('SET_CLIPBOARD_CLEAR_TIMEOUT', ({ data }) => handleSetClipboardClearTimeout(data as number));
+    onMessage('GET_CLIPBOARD_COUNTDOWN_STATE', () => handleGetClipboardCountdownState());
+
+    // Auto-lock management messages
+    onMessage('RESET_AUTO_LOCK_TIMER', () => handleResetAutoLockTimer());
+    onMessage('SET_AUTO_LOCK_TIMEOUT', ({ data }) => handleSetAutoLockTimeout(data as number));
+    onMessage('POPUP_HEARTBEAT', () => handlePopupHeartbeat());
+
+    // Handle clipboard copied from context menu
+    onMessage('CLIPBOARD_COPIED_FROM_CONTEXT', () => handleClipboardCopied());
+
     // Setup context menus
     const isContextMenuEnabled = await storage.getItem(GLOBAL_CONTEXT_MENU_ENABLED_KEY) ?? true;
     if (isContextMenuEnabled) {
-      setupContextMenus();
+      await setupContextMenus();
     }
 
     // Listen for custom commands
@@ -77,4 +104,4 @@ function getActiveElementIdentifier() : string {
     return target.id || target.name || '';
   }
   return '';
-}
+}

apps/browser-extension/src/entrypoints/background/AutolockTimeoutHandler.ts

@@ -0,0 +1,111 @@
+import { storage } from 'wxt/utils/storage';
+
+import { handleClearVault } from '@/entrypoints/background/VaultMessageHandler';
+
+import { AUTO_LOCK_TIMEOUT_KEY } from '@/utils/Constants';
+
+let autoLockTimer: NodeJS.Timeout | null = null;
+
+/**
+ * Reset the auto-lock timer.
+ */
+export function handleResetAutoLockTimer(): void {
+  resetAutoLockTimer();
+}
+
+/**
+ * Handle popup heartbeat - extend auto-lock timer.
+ */
+export function handlePopupHeartbeat(): void {
+  extendAutoLockTimer();
+}
+
+/**
+ * Set the auto-lock timeout setting.
+ */
+export async function handleSetAutoLockTimeout(timeout: number): Promise<boolean> {
+  await storage.setItem(AUTO_LOCK_TIMEOUT_KEY, timeout);
+  resetAutoLockTimer();
+  return true;
+}
+
+/**
+ * Reset the auto-lock timer based on current settings.
+ */
+async function resetAutoLockTimer(): Promise<void> {
+  // Clear existing timer
+  if (autoLockTimer) {
+    clearTimeout(autoLockTimer);
+    autoLockTimer = null;
+  }
+
+  // Get timeout setting
+  const timeout = await storage.getItem(AUTO_LOCK_TIMEOUT_KEY) as number ?? 0;
+
+  // Don't set timer if timeout is 0 (disabled) or if vault is already locked
+  if (timeout === 0) {
+    return;
+  }
+
+  // Check if vault is unlocked before setting timer
+  const encryptionKey = await storage.getItem('session:encryptionKey') as string | null;
+
+  if (!encryptionKey) {
+    // Vault is already locked, don't start timer
+    return;
+  }
+
+  // Set new timer
+  autoLockTimer = setTimeout(async () => {
+    try {
+      // Lock the vault using the existing handler
+      handleClearVault();
+
+      console.info('[AUTO_LOCK] Vault locked due to inactivity');
+      autoLockTimer = null;
+    } catch (error) {
+      console.error('[AUTO_LOCK] Error locking vault:', error);
+    }
+  }, timeout * 1000);
+}
+
+/**
+ * Extend the auto-lock timer by the full timeout period.
+ * This is called by popup heartbeats to prevent locking while popup is active.
+ */
+async function extendAutoLockTimer(): Promise<void> {
+  // Get timeout setting
+  const timeout = await storage.getItem(AUTO_LOCK_TIMEOUT_KEY) as number ?? 0;
+
+  // Don't extend timer if timeout is 0 (disabled)
+  if (timeout === 0) {
+    return;
+  }
+
+  // Check if vault is unlocked
+  const encryptionKey = await storage.getItem('session:encryptionKey') as string | null;
+
+  if (!encryptionKey) {
+    // Vault is already locked, don't extend timer
+    return;
+  }
+
+  // Clear existing timer and start a new one
+  if (autoLockTimer) {
+    clearTimeout(autoLockTimer);
+    autoLockTimer = null;
+  }
+
+  // Set new timer
+  autoLockTimer = setTimeout(async () => {
+    try {
+      // Lock the vault using the existing handler
+      handleClearVault();
+
+      console.info('[AUTO_LOCK] Vault locked due to inactivity');
+      autoLockTimer = null;
+    } catch (error) {
+      console.error('[AUTO_LOCK] Error locking vault:', error);
+    }
+  }, timeout * 1000);
+}

apps/browser-extension/src/entrypoints/background/ClipboardClearHandler.ts

@@ -0,0 +1,219 @@
+import { sendMessage } from 'webext-bridge/background';
+import { storage } from 'wxt/utils/storage';
+
+import { CLIPBOARD_CLEAR_TIMEOUT_KEY } from '@/utils/Constants';
+
+let clipboardClearTimer: NodeJS.Timeout | null = null;
+let countdownInterval: NodeJS.Timeout | null = null;
+let remainingTime = 0;
+let currentCountdownId = 0;
+let totalCountdownTime = 0;
+let countdownStartTime = 0;
+let offscreenDocumentCreated = false;
+
+/**
+ * Create offscreen document if it doesn't exist.
+ */
+async function createOffscreenDocument(): Promise<void> {
+  if (offscreenDocumentCreated) {
+    return;
+  }
+
+  try {
+    // Check if chrome.offscreen API is available (Chrome 109+)
+    if (!chrome.offscreen) {
+      console.warn('[CLIPBOARD] Offscreen API not available, falling back to direct clipboard access');
+      return;
+    }
+
+    // Check if offscreen document already exists
+    if (chrome.runtime.getContexts) {
+      const existingContexts = await chrome.runtime.getContexts({
+        contextTypes: ['OFFSCREEN_DOCUMENT'],
+        documentUrls: [chrome.runtime.getURL('offscreen.html')]
+      });
+
+      if (existingContexts.length > 0) {
+        offscreenDocumentCreated = true;
+        return;
+      }
+    }
+
+    // Create offscreen document
+    await chrome.offscreen.createDocument({
+      url: 'offscreen.html',
+      reasons: [chrome.offscreen.Reason.CLIPBOARD],
+      justification: 'Clear clipboard after timeout for security'
+    });
+
+    offscreenDocumentCreated = true;
+  } catch (error) {
+    console.error('[CLIPBOARD] Failed to create offscreen document:', error);
+    offscreenDocumentCreated = false;
+  }
+}
+
+/**
+ * Clear clipboard using offscreen document or fallback method.
+ */
+async function clearClipboardContent(): Promise<void> {
+  if (import.meta.env.CHROME || import.meta.env.EDGE) {
+    /*
+     * Chrome and Edge use mv3 and do not have direct access to clipboard
+     * so we use an offscreen document to clear the clipboard.
+     */
+    await createOffscreenDocument();
+
+    // Send message to offscreen document to clear clipboard
+    const response = await chrome.runtime.sendMessage({ type: 'CLEAR_CLIPBOARD' });
+
+    if (response?.success) {
+      console.info('[CLIPBOARD] Clipboard cleared via offscreen document');
+    } else {
+      throw new Error(response?.message || 'Failed to clear clipboard via offscreen');
+    }
+  } else {
+    // Firefox and Safari use mv2 and can use direct clipboard access.
+    await navigator.clipboard.writeText('');
+  }
+}
+
+/**
+ * Handle clipboard copied event - starts countdown and timer to clear clipboard.
+ */
+export async function handleClipboardCopied() : Promise<void> {
+  const timeout = await storage.getItem(CLIPBOARD_CLEAR_TIMEOUT_KEY) as number ?? 10;
+
+  // Clear any existing timer
+  if (clipboardClearTimer) {
+    clearTimeout(clipboardClearTimer);
+    clipboardClearTimer = null;
+  }
+  if (countdownInterval) {
+    clearInterval(countdownInterval);
+    countdownInterval = null;
+  }
+
+  // Don't set timer if timeout is 0 (disabled)
+  if (timeout === 0) {
+    return;
+  }
+
+  // Generate new countdown ID
+  currentCountdownId = Date.now();
+  const thisCountdownId = currentCountdownId;
+  countdownStartTime = Date.now();
+  totalCountdownTime = timeout;
+
+  remainingTime = timeout;
+
+  // Send initial countdown immediately with ID
+  sendMessage('CLIPBOARD_COUNTDOWN', { remaining: remainingTime, total: timeout, id: thisCountdownId }, 'popup').catch(() => {});
+
+  // Send countdown updates to popup every 100ms for smooth animation
+  let elapsed = 0;
+  countdownInterval = setInterval(() => {
+    // Check if this countdown is still active
+    if (thisCountdownId !== currentCountdownId) {
+      if (countdownInterval) {
+        clearInterval(countdownInterval);
+      }
+      return;
+    }
+
+    elapsed += 0.1;
+    remainingTime = Math.max(0, timeout - elapsed);
+    sendMessage('CLIPBOARD_COUNTDOWN', { remaining: remainingTime, total: timeout, id: thisCountdownId }, 'popup').catch(() => {});
+
+    if (elapsed >= timeout && countdownInterval) {
+      clearInterval(countdownInterval);
+      countdownInterval = null;
+    }
+  }, 100);
+
+  // Set timer to clear clipboard
+  clipboardClearTimer = setTimeout(async () => {
+    try {
+      // Clear clipboard using offscreen document or fallback
+      await clearClipboardContent();
+
+      // Clean up regardless of success/failure
+      clipboardClearTimer = null;
+      if (countdownInterval) {
+        clearInterval(countdownInterval);
+        countdownInterval = null;
+      }
+
+      // Reset countdown tracking
+      currentCountdownId = 0;
+      countdownStartTime = 0;
+      totalCountdownTime = 0;
+
+      sendMessage('CLIPBOARD_CLEARED', {}, 'popup').catch(() => {});
+    } catch (error) {
+      console.error('[CLIPBOARD] Error during clipboard clear:', error);
+
+      // Clean up even on error
+      clipboardClearTimer = null;
+      if (countdownInterval) {
+        clearInterval(countdownInterval);
+        countdownInterval = null;
+      }
+      currentCountdownId = 0;
+      countdownStartTime = 0;
+      totalCountdownTime = 0;
+      sendMessage('CLIPBOARD_CLEARED', {}, 'popup').catch(() => {});
+    }
+  }, timeout * 1000);
+}
+
+/**
+ * Cancel clipboard clear countdown and timer.
+ */
+export function handleCancelClipboardClear(): void {
+  if (clipboardClearTimer) {
+    clearTimeout(clipboardClearTimer);
+    clipboardClearTimer = null;
+  }
+  if (countdownInterval) {
+    clearInterval(countdownInterval);
+    countdownInterval = null;
+  }
+  sendMessage('CLIPBOARD_COUNTDOWN_CANCELLED', {}, 'popup').catch(() => {});
+}
+
+/**
+ * Get the clipboard clear timeout setting.
+ */
+export async function handleGetClipboardClearTimeout(): Promise<number> {
+  const timeout = await storage.getItem(CLIPBOARD_CLEAR_TIMEOUT_KEY) as number ?? 10;
+  return timeout;
+}
+
+/**
+ * Set the clipboard clear timeout setting.
+ */
+export async function handleSetClipboardClearTimeout(data: number): Promise<boolean> {
+  await storage.setItem(CLIPBOARD_CLEAR_TIMEOUT_KEY, data);
+  return true;
+}
+
+/**
+ * Get the current clipboard countdown state.
+ */
+export function handleGetClipboardCountdownState(): { remaining: number; total: number; id: number } | null {
+  // Calculate actual remaining time based on elapsed time
+  if (currentCountdownId && countdownStartTime && totalCountdownTime) {
+    const elapsed = (Date.now() - countdownStartTime) / 1000;
+    const actualRemaining = Math.max(0, totalCountdownTime - elapsed);
+
+    if (actualRemaining > 0) {
+      return {
+        remaining: actualRemaining,
+        total: totalCountdownTime,
+        id: currentCountdownId
+      };
+    }
+  }
+  return null;
+}

apps/browser-extension/src/entrypoints/background/ContextMenu.ts

@@ -3,12 +3,14 @@ import { sendMessage } from 'webext-bridge/background';
 
 import { PasswordGenerator } from '@/utils/dist/shared/password-generator';
 
+import { t } from '@/i18n/StandaloneI18n';
+
 import { browser } from "#imports";
 
 /**
  * Setup the context menus.
  */
-export function setupContextMenus() : void {
+export async function setupContextMenus() : Promise<void> {
   // Create root menu
   browser.contextMenus.create({
     id: "aliasvault-root",
@@ -20,7 +22,7 @@ export function setupContextMenus() : void {
   browser.contextMenus.create({
     id: "aliasvault-activate-form",
     parentId: "aliasvault-root",
-    title: "Autofill with AliasVault",
+    title: await t('content.autofillWithAliasVault'),
     contexts: ["editable"],
   });
 
@@ -36,7 +38,7 @@ export function setupContextMenus() : void {
   browser.contextMenus.create({
     id: "aliasvault-generate-password",
     parentId: "aliasvault-root",
-    title: "Generate random password (copy to clipboard)",
+    title: await t('content.generateRandomPassword'),
     contexts: ["all"]
   });
 
@@ -56,15 +58,16 @@ export function handleContextMenuClick(info: Browser.contextMenus.OnClickData, t
 
     // Use browser.scripting to write password to clipboard from active tab
     if (tab?.id) {
-      browser.scripting.executeScript({
-        target: { tabId: tab.id },
-        func: copyPasswordToClipboard,
-        args: [password]
+      // Get confirm text translation.
+      t('content.passwordCopiedToClipboard').then((message) => {
+        browser.scripting.executeScript({
+          target: { tabId: tab.id },
+          func: copyPasswordToClipboard,
+          args: [message, password]
+        });
       });
     }
-  }
-
-  if (info.menuItemId === "aliasvault-activate-form" && tab?.id) {
+  } else if (info.menuItemId === "aliasvault-activate-form" && tab?.id) {
     // First get the active element's identifier
     browser.scripting.executeScript({
       target: { tabId: tab.id },
@@ -82,9 +85,9 @@ export function handleContextMenuClick(info: Browser.contextMenus.OnClickData, t
 /**
  * Copy provided password to clipboard.
  */
-function copyPasswordToClipboard(generatedPassword: string) : void {
+function copyPasswordToClipboard(message: string, generatedPassword: string) : void {
   navigator.clipboard.writeText(generatedPassword).then(() => {
-    showToast('Password copied to clipboard');
+    showToast(message);
   });
 
   /**

apps/browser-extension/src/entrypoints/background/PopupMessageHandler.ts

@@ -45,7 +45,7 @@ export function handleToggleContextMenu(message: any) : Promise<BoolResponse> {
     if (!message.enabled) {
       browser.contextMenus.removeAll();
     } else {
-      setupContextMenus();
+      await setupContextMenus();
     }
     return { success: true };
   })();

apps/browser-extension/src/entrypoints/background/VaultMessageHandler.ts

@@ -1,11 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { storage } from 'wxt/utils/storage';
 
+import type { EncryptionKeyDerivationParams } from '@/utils/dist/shared/models/metadata';
 import type { Vault, VaultResponse, VaultPostResponse } from '@/utils/dist/shared/models/webapi';
 import { EncryptionUtility } from '@/utils/EncryptionUtility';
 import { SqliteClient } from '@/utils/SqliteClient';
 import { BoolResponse as messageBoolResponse } from '@/utils/types/messaging/BoolResponse';
 import { CredentialsResponse as messageCredentialsResponse } from '@/utils/types/messaging/CredentialsResponse';
+import { IdentitySettingsResponse } from '@/utils/types/messaging/IdentitySettingsResponse';
 import { PasswordSettingsResponse as messagePasswordSettingsResponse } from '@/utils/types/messaging/PasswordSettingsResponse';
 import { StoreVaultRequest } from '@/utils/types/messaging/StoreVaultRequest';
 import { StringResponse as stringResponse } from '@/utils/types/messaging/StringResponse';
@@ -13,10 +15,12 @@ import { VaultResponse as messageVaultResponse } from '@/utils/types/messaging/V
 import { VaultUploadResponse as messageVaultUploadResponse } from '@/utils/types/messaging/VaultUploadResponse';
 import { WebApiService } from '@/utils/WebApiService';
 
+import { t } from '@/i18n/StandaloneI18n';
+
 /**
- * Check if the user is logged in and if the vault is locked.
+ * Check if the user is logged in and if the vault is locked, and also check for pending migrations.
  */
-export async function handleCheckAuthStatus() : Promise<{ isLoggedIn: boolean, isVaultLocked: boolean }> {
+export async function handleCheckAuthStatus() : Promise<{ isLoggedIn: boolean, isVaultLocked: boolean, hasPendingMigrations: boolean, error?: string }> {
   const username = await storage.getItem('local:username');
   const accessToken = await storage.getItem('local:accessToken');
   const vaultData = await storage.getItem('session:encryptedVault');
@@ -24,10 +28,42 @@ export async function handleCheckAuthStatus() : Promise<{ isLoggedIn: boolean, i
   const isLoggedIn = username !== null && accessToken !== null;
   const isVaultLocked = isLoggedIn && vaultData === null;
 
-  return {
-    isLoggedIn,
-    isVaultLocked
-  };
+  // If vault is locked, we can't check for pending migrations
+  if (isVaultLocked) {
+    return {
+      isLoggedIn,
+      isVaultLocked,
+      hasPendingMigrations: false
+    };
+  }
+
+  // If not logged in, no need to check migrations
+  if (!isLoggedIn) {
+    return {
+      isLoggedIn,
+      isVaultLocked,
+      hasPendingMigrations: false
+    };
+  }
+
+  // Vault is unlocked, check for pending migrations
+  try {
+    const sqliteClient = await createVaultSqliteClient();
+    const hasPendingMigrations = await sqliteClient.hasPendingMigrations();
+    return {
+      isLoggedIn,
+      isVaultLocked,
+      hasPendingMigrations
+    };
+  } catch (error) {
+    console.error('Error checking pending migrations:', error);
+    return {
+      isLoggedIn,
+      isVaultLocked,
+      hasPendingMigrations: false,
+      error: error instanceof Error ? error.message : await t('common.errors.unknownError')
+    };
+  }
 }
 
 /**
@@ -47,11 +83,6 @@ export async function handleStoreVault(
      * Some updates, e.g. when mutating local database, these values will not be set.
      */
 
-    // Store derived key in session storage (if it has a value)
-    if (vaultRequest.derivedKey) {
-      await storage.setItem('session:derivedKey', vaultRequest.derivedKey);
-    }
-
     if (vaultRequest.publicEmailDomainList) {
       await storage.setItem('session:publicEmailDomains', vaultRequest.publicEmailDomainList);
     }
@@ -67,7 +98,37 @@ export async function handleStoreVault(
     return { success: true };
   } catch (error) {
     console.error('Failed to store vault:', error);
-    return { success: false, error: 'Failed to store vault' };
+    return { success: false, error: await t('common.errors.failedToStoreVault') };
+  }
+}
+
+/**
+ * Store the encryption key (derived key) in browser storage.
+ */
+export async function handleStoreEncryptionKey(
+  encryptionKey: string,
+) : Promise<messageBoolResponse> {
+  try {
+    await storage.setItem('session:encryptionKey', encryptionKey);
+    return { success: true };
+  } catch (error) {
+    console.error('Failed to store encryption key:', error);
+    return { success: false, error: await t('common.errors.failedToStoreEncryptionKey') };
+  }
+}
+
+/**
+ * Store the encryption key derivation parameters in browser storage.
+ */
+export async function handleStoreEncryptionKeyDerivationParams(
+  params: EncryptionKeyDerivationParams,
+) : Promise<messageBoolResponse> {
+  try {
+    await storage.setItem('session:encryptionKeyDerivationParams', params);
+    return { success: true };
+  } catch (error) {
+    console.error('Failed to store encryption key derivation params:', error);
+    return { success: false, error: await t('common.errors.failedToStoreEncryptionParams') };
   }
 }
 
@@ -80,7 +141,7 @@ export async function handleSyncVault(
   const statusResponse = await webApi.getStatus();
   const statusError = webApi.validateStatusResponse(statusResponse);
   if (statusError !== null) {
-    return { success: false, error: statusError };
+    return { success: false, error: await t('common.errors.' + statusError) };
   }
 
   const vaultRevisionNumber = await storage.getItem('session:vaultRevisionNumber') as number;
@@ -106,20 +167,26 @@ export async function handleSyncVault(
 export async function handleGetVault(
 ) : Promise<messageVaultResponse> {
   try {
+    const encryptionKey = await handleGetEncryptionKey();
+
     const encryptedVault = await storage.getItem('session:encryptedVault') as string;
-    const derivedKey = await storage.getItem('session:derivedKey') as string;
     const publicEmailDomains = await storage.getItem('session:publicEmailDomains') as string[];
     const privateEmailDomains = await storage.getItem('session:privateEmailDomains') as string[];
     const vaultRevisionNumber = await storage.getItem('session:vaultRevisionNumber') as number;
 
     if (!encryptedVault) {
       console.error('Vault not available');
-      return { success: false, error: 'Vault not available' };
+      return { success: false, error: await t('common.errors.vaultNotAvailable') };
+    }
+
+    if (!encryptionKey) {
+      console.error('Encryption key not available');
+      return { success: false, error: await t('common.errors.vaultIsLocked') };
     }
 
     const decryptedVault = await EncryptionUtility.symmetricDecrypt(
       encryptedVault,
-      derivedKey
+      encryptionKey
     );
 
     return {
@@ -131,7 +198,7 @@ export async function handleGetVault(
     };
   } catch (error) {
     console.error('Failed to get vault:', error);
-    return { success: false, error: 'Failed to get vault' };
+    return { success: false, error: await t('common.errors.failedToRetrieveData') };
   }
 }
 
@@ -142,7 +209,10 @@ export function handleClearVault(
 ) : messageBoolResponse {
   storage.removeItems([
     'session:encryptedVault',
+    'session:encryptionKey',
+    // TODO: the derivedKey clear can be removed some period of time after 0.22.0 is released.
     'session:derivedKey',
+    'session:encryptionKeyDerivationParams',
     'session:publicEmailDomains',
     'session:privateEmailDomains',
     'session:vaultRevisionNumber'
@@ -156,10 +226,10 @@ export function handleClearVault(
  */
 export async function handleGetCredentials(
 ) : Promise<messageCredentialsResponse> {
-  const derivedKey = await storage.getItem('session:derivedKey') as string;
+  const encryptionKey = await handleGetEncryptionKey();
 
-  if (!derivedKey) {
-    return { success: false, error: 'Vault is locked' };
+  if (!encryptionKey) {
+    return { success: false, error: await t('common.errors.vaultIsLocked') };
   }
 
   try {
@@ -168,7 +238,7 @@ export async function handleGetCredentials(
     return { success: true, credentials: credentials };
   } catch (error) {
     console.error('Error getting credentials:', error);
-    return { success: false, error: 'Failed to get credentials' };
+    return { success: false, error: await t('common.errors.failedToRetrieveData') };
   }
 }
 
@@ -178,17 +248,17 @@ export async function handleGetCredentials(
 export async function handleCreateIdentity(
   message: any,
 ) : Promise<messageBoolResponse> {
-  const derivedKey = await storage.getItem('session:derivedKey') as string;
+  const encryptionKey = await handleGetEncryptionKey();
 
-  if (!derivedKey) {
-    return { success: false, error: 'Vault is locked' };
+  if (!encryptionKey) {
+    return { success: false, error: await t('common.errors.vaultIsLocked') };
   }
 
   try {
     const sqliteClient = await createVaultSqliteClient();
 
     // Add the new credential to the vault/database.
-    sqliteClient.createCredential(message.credential);
+    await sqliteClient.createCredential(message.credential, message.attachments || []);
 
     // Upload the new vault to the server.
     await uploadNewVaultToServer(sqliteClient);
@@ -196,7 +266,7 @@ export async function handleCreateIdentity(
     return { success: true };
   } catch (error) {
     console.error('Failed to create identity:', error);
-    return { success: false, error: 'Failed to create identity' };
+    return { success: false, error: await t('common.errors.unknownError') };
   }
 }
 
@@ -238,24 +308,31 @@ export function handleGetDefaultEmailDomain(): Promise<stringResponse> {
       return { success: true, value: defaultEmailDomain ?? undefined };
     } catch (error) {
       console.error('Error getting default email domain:', error);
-      return { success: false, error: 'Failed to get default email domain' };
+      return { success: false, error: await t('common.errors.failedToRetrieveData') };
     }
   })();
 }
 
 /**
- * Get the default identity language.
+ * Get the default identity settings.
  */
-export async function handleGetDefaultIdentityLanguage(
-) : Promise<stringResponse> {
+export async function handleGetDefaultIdentitySettings(
+) : Promise<IdentitySettingsResponse> {
   try {
     const sqliteClient = await createVaultSqliteClient();
-    const settingValue = sqliteClient.getDefaultIdentityLanguage();
+    const language = sqliteClient.getDefaultIdentityLanguage();
+    const gender = sqliteClient.getDefaultIdentityGender();
 
-    return { success: true, value: settingValue };
+    return {
+      success: true,
+      settings: {
+        language,
+        gender
+      }
+    };
   } catch (error) {
-    console.error('Error getting default identity language:', error);
-    return { success: false, error: 'Failed to get default identity language' };
+    console.error('Error getting default identity settings:', error);
+    return { success: false, error: await t('common.errors.failedToRetrieveData') };
   }
 }
 
@@ -271,17 +348,34 @@ export async function handleGetPasswordSettings(
     return { success: true, settings: passwordSettings };
   } catch (error) {
     console.error('Error getting password settings:', error);
-    return { success: false, error: 'Failed to get password settings' };
+    return { success: false, error: await t('common.errors.failedToRetrieveData') };
   }
 }
 
 /**
- * Get the derived key for the encrypted vault.
+ * Get the encryption key for the encrypted vault.
  */
-export async function handleGetDerivedKey(
-) : Promise<string> {
-  const derivedKey = await storage.getItem('session:derivedKey') as string;
-  return derivedKey;
+export async function handleGetEncryptionKey(
+) : Promise<string | null> {
+  // Try the current key name first (since 0.22.0)
+  let encryptionKey = await storage.getItem('session:encryptionKey') as string | null;
+
+  // Fall back to the legacy key name if not found
+  if (!encryptionKey) {
+    // TODO: this check can be removed some period of time after 0.22.0 is released.
+    encryptionKey = await storage.getItem('session:derivedKey') as string | null;
+  }
+
+  return encryptionKey;
+}
+
+/**
+ * Get the encryption key derivation parameters for password change detection and offline mode.
+ */
+export async function handleGetEncryptionKeyDerivationParams(
+) : Promise<EncryptionKeyDerivationParams | null> {
+  const params = await storage.getItem('session:encryptionKeyDerivationParams') as EncryptionKeyDerivationParams | null;
+  return params;
 }
 
 /**
@@ -302,7 +396,7 @@ export async function handleUploadVault(
     return { success: true, status: response.status, newRevisionNumber: response.newRevisionNumber };
   } catch (error) {
     console.error('Failed to upload vault:', error);
-    return { success: false, error: 'Failed to upload vault' };
+    return { success: false, error: await t('common.errors.failedToUploadVault') };
   }
 }
 
@@ -311,16 +405,16 @@ export async function handleUploadVault(
  * Data is encrypted using the derived key for additional security.
  */
 export async function handlePersistFormValues(data: any): Promise<void> {
-  const derivedKey = await storage.getItem('session:derivedKey') as string;
-  if (!derivedKey) {
-    throw new Error('No derived key available for encryption');
+  const encryptionKey = await handleGetEncryptionKey();
+  if (!encryptionKey) {
+    throw new Error(await t('common.errors.unknownError'));
   }
 
   // Always stringify the data properly
   const serializedData = JSON.stringify(data);
   const encryptedData = await EncryptionUtility.symmetricEncrypt(
     serializedData,
-    derivedKey
+    encryptionKey
   );
   await storage.setItem('session:persistedFormValues', encryptedData);
 }
@@ -330,17 +424,17 @@ export async function handlePersistFormValues(data: any): Promise<void> {
  * Data is decrypted using the derived key.
  */
 export async function handleGetPersistedFormValues(): Promise<any | null> {
-  const derivedKey = await storage.getItem('session:derivedKey') as string;
+  const encryptionKey = await handleGetEncryptionKey();
   const encryptedData = await storage.getItem('session:persistedFormValues') as string | null;
 
-  if (!encryptedData || !derivedKey) {
+  if (!encryptedData || !encryptionKey) {
     return null;
   }
 
   try {
     const decryptedData = await EncryptionUtility.symmetricDecrypt(
       encryptedData,
-      derivedKey
+      encryptionKey
     );
     return JSON.parse(decryptedData);
   } catch (error) {
@@ -361,11 +455,15 @@ export async function handleClearPersistedFormValues(): Promise<void> {
  */
 async function uploadNewVaultToServer(sqliteClient: SqliteClient) : Promise<VaultPostResponse> {
   const updatedVaultData = sqliteClient.exportToBase64();
-  const derivedKey = await storage.getItem('session:derivedKey') as string;
+  const encryptionKey = await handleGetEncryptionKey();
+
+  if (!encryptionKey) {
+    throw new Error(await t('common.errors.vaultIsLocked'));
+  }
 
   const encryptedVault = await EncryptionUtility.symmetricEncrypt(
     updatedVaultData,
-    derivedKey
+    encryptionKey
   );
 
   await storage.setItems([
@@ -391,7 +489,7 @@ async function uploadNewVaultToServer(sqliteClient: SqliteClient) : Promise<Vaul
     client: '', // Empty on purpose, API will not use this for vault updates.
     updatedAt: new Date().toISOString(),
     username: username,
-    version: sqliteClient.getDatabaseVersion() ?? '0.0.0'
+    version: sqliteClient.getDatabaseVersion().version
   };
 
   const webApi = new WebApiService(() => {});
@@ -401,7 +499,7 @@ async function uploadNewVaultToServer(sqliteClient: SqliteClient) : Promise<Vaul
   if (response.status === 0) {
     await storage.setItem('session:vaultRevisionNumber', response.newRevisionNumber);
   } else {
-    throw new Error('Failed to upload new vault to server');
+    throw new Error(await t('common.errors.failedToUploadVault'));
   }
 
   return response;
@@ -412,15 +510,15 @@ async function uploadNewVaultToServer(sqliteClient: SqliteClient) : Promise<Vaul
  */
 async function createVaultSqliteClient() : Promise<SqliteClient> {
   const encryptedVault = await storage.getItem('session:encryptedVault') as string;
-  const derivedKey = await storage.getItem('session:derivedKey') as string;
-  if (!encryptedVault || !derivedKey) {
-    throw new Error('No vault or derived key found');
+  const encryptionKey = await handleGetEncryptionKey();
+  if (!encryptedVault || !encryptionKey) {
+    throw new Error(await t('common.errors.unknownError'));
   }
 
   // Decrypt the vault.
   const decryptedVault = await EncryptionUtility.symmetricDecrypt(
     encryptedVault,
-    derivedKey
+    encryptionKey
   );
 
   // Initialize the SQLite client with the decrypted vault.

apps/browser-extension/src/entrypoints/content.ts

@@ -2,13 +2,14 @@ import '@/entrypoints/contentScript/style.css';
 import { onMessage } from "webext-bridge/content-script";
 
 import { injectIcon, popupDebounceTimeHasPassed, validateInputField } from '@/entrypoints/contentScript/Form';
-import { isAutoShowPopupEnabled, openAutofillPopup, removeExistingPopup } from '@/entrypoints/contentScript/Popup';
+import { isAutoShowPopupEnabled, openAutofillPopup, removeExistingPopup, createUpgradeRequiredPopup } from '@/entrypoints/contentScript/Popup';
 
 import { FormDetector } from '@/utils/formDetector/FormDetector';
 import { BoolResponse as messageBoolResponse } from '@/utils/types/messaging/BoolResponse';
 
-import { defineContentScript } from '#imports';
-import { createShadowRootUi } from '#imports';
+import { t } from '@/i18n/StandaloneI18n';
+
+import { defineContentScript, createShadowRootUi } from '#imports';
 
 export default defineContentScript({
   matches: ['<all_urls>'],
@@ -33,6 +34,7 @@ export default defineContentScript({
       name: 'aliasvault-ui',
       position: 'inline',
       anchor: 'body',
+      mode: 'closed',
       /**
        * Handle mount.
        */
@@ -69,7 +71,7 @@ export default defineContentScript({
 
               // Only show popup if debounce time has passed
               if (popupDebounceTimeHasPassed()) {
-                openAutofillPopup(inputElement, container);
+                await showPopupWithAuthCheck(inputElement, container);
               }
             }
           }
@@ -132,6 +134,48 @@ export default defineContentScript({
 
           if (canShowPopup) {
             injectIcon(inputElement, container);
+            await showPopupWithAuthCheck(inputElement, container);
+          }
+        }
+
+        /**
+         * Show popup with auth check.
+         */
+        async function showPopupWithAuthCheck(inputElement: HTMLInputElement, container: HTMLElement) : Promise<void> {
+          try {
+            // Check auth status and pending migrations in a single call
+            const { sendMessage } = await import('webext-bridge/content-script');
+            const authStatus = await sendMessage('CHECK_AUTH_STATUS', {}, 'background') as {
+              isLoggedIn: boolean,
+              isVaultLocked: boolean,
+              hasPendingMigrations: boolean,
+              error?: string
+            };
+
+            if (authStatus.isVaultLocked) {
+              // Vault is locked, show vault locked popup
+              const { createVaultLockedPopup } = await import('@/entrypoints/contentScript/Popup');
+              createVaultLockedPopup(inputElement, container);
+              return;
+            }
+
+            if (authStatus.hasPendingMigrations) {
+              // Show upgrade required popup
+              await createUpgradeRequiredPopup(inputElement, container, await t('content.vaultUpgradeRequired'));
+              return;
+            }
+
+            if (authStatus.error) {
+              // Show upgrade required popup for version-related errors
+              await createUpgradeRequiredPopup(inputElement, container, authStatus.error);
+              return;
+            }
+
+            // No upgrade required, show normal autofill popup
+            openAutofillPopup(inputElement, container);
+          } catch (error) {
+            console.error('Error checking vault status:', error);
+            // Fall back to normal autofill popup if check fails
             openAutofillPopup(inputElement, container);
           }
         }

apps/browser-extension/src/entrypoints/contentScript/Filter.ts

@@ -1,108 +1,212 @@
 import type { Credential } from '@/utils/dist/shared/models/vault';
 import { CombinedStopWords } from '@/utils/formDetector/FieldPatterns';
 
+export enum AutofillMatchingMode {
+  DEFAULT = 'default',
+  URL_EXACT = 'url_exact',
+  URL_SUBDOMAIN = 'url_subdomain'
+}
+
 type CredentialWithPriority = Credential & {
   priority: number;
 }
 
 /**
- * Filter credentials based on current URL and page context to determine which credentials to show
- * in the autofill popup. Credentials are sorted by priority:
- * 1. Exact URL match (highest priority)
- * 2. Base URL match AND page title word match
- * 3. Base URL match only
- * 4. Page title word match only (lowest priority)
+ * Extract domain from URL, handling both full URLs and partial domains
+ * @param url - URL or domain string
+ * @returns Normalized domain without protocol or www
  */
-export function filterCredentials(credentials: Credential[], currentUrl: string, pageTitle: string): Credential[] {
-  const urlObject = new URL(currentUrl);
-  const baseUrl = `${urlObject.protocol}//${urlObject.hostname}`;
-  const filtered: CredentialWithPriority[] = [];
-
-  const sanitizedCurrentUrl = currentUrl.toLowerCase().replace('www.', '');
-
-  // 1. Exact URL match (priority 1)
-  credentials.forEach(cred => {
-    if (!cred.ServiceUrl || cred.ServiceUrl.length === 0) {
-      return;
-    }
-
-    const sanitizedCredUrl = cred.ServiceUrl.toLowerCase().replace('www.', '');
-
-    if (sanitizedCurrentUrl.startsWith(sanitizedCredUrl)) {
-      filtered.push({ ...cred, priority: 1 });
-    }
-  });
-
-  // If we have one or more exact matches, do not continue to other matches
-  if (filtered.length > 0) {
-    return filtered;
+function extractDomain(url: string): string {
+  if (!url) {
+    return '';
   }
 
-  // Prepare page title words for matching
-  const titleWords = pageTitle.length > 0
-    ? pageTitle.toLowerCase()
-      .split(/\s+/)
-      .filter(word =>
-        word.length > 3 &&
-          !CombinedStopWords.has(word.toLowerCase())
-      )
-    : [];
+  // Remove protocol if present
+  let domain = url.toLowerCase().trim();
+  domain = domain.replace(/^https?:\/\//, '');
 
-  // Check for base URL matches and page title matches
+  // Remove www. prefix
+  domain = domain.replace(/^www\./, '');
+
+  // Remove path, query, and fragment
+  domain = domain.split('/')[0];
+  domain = domain.split('?')[0];
+  domain = domain.split('#')[0];
+
+  return domain;
+}
+
+/**
+ * Check if two domains match, supporting partial matches
+ * @param domain1 - First domain
+ * @param domain2 - Second domain
+ * @returns True if domains match (including partial matches)
+ */
+function domainsMatch(domain1: string, domain2: string): boolean {
+  if (!domain1 || !domain2) {
+    return false;
+  }
+
+  const d1 = extractDomain(domain1);
+  const d2 = extractDomain(domain2);
+
+  // Exact match
+  if (d1 === d2) {
+    return true;
+  }
+
+  // Check if one domain contains the other (for subdomain matching)
+  if (d1.includes(d2) || d2.includes(d1)) {
+    return true;
+  }
+
+  // Extract root domains for comparison
+  const d1Parts = d1.split('.');
+  const d2Parts = d2.split('.');
+
+  // Get the last 2 parts (domain.tld) for comparison
+  const d1Root = d1Parts.slice(-2).join('.');
+  const d2Root = d2Parts.slice(-2).join('.');
+
+  return d1Root === d2Root;
+}
+
+/**
+ * Extract meaningful words from text, removing punctuation and filtering stop words
+ * @param text - Text to extract words from
+ * @returns Array of filtered words
+ */
+function extractWords(text: string): string[] {
+  if (!text || text.length === 0) {
+    return [];
+  }
+
+  return text.toLowerCase()
+    // Replace common separators and punctuation with spaces
+    .replace(/[|,;:\-–—/\\()[\]{}'"`~!@#$%^&*+=<>?]/g, ' ')
+    // Split on whitespace and filter
+    .split(/\s+/)
+    .filter(word =>
+      word.length > 3 &&
+      !CombinedStopWords.has(word)
+    );
+}
+
+/**
+ * Filter credentials based on current URL and page context with anti-phishing protection.
+ *
+ * **Security Note**: When searching with a URL, text search fallback only applies to
+ * credentials with no service URL defined. This prevents phishing attacks where a
+ * malicious site might match credentials intended for the legitimate site.
+ *
+ * Credentials are sorted by priority:
+ * 1. Exact domain match (priority 1 - highest)
+ * 2. Partial/subdomain match (priority 2)
+ * 3. Service name fallback match (priority 5 - lowest, only for credentials without URLs)
+ */
+export function filterCredentials(credentials: Credential[], currentUrl: string, pageTitle: string, matchingMode: AutofillMatchingMode = AutofillMatchingMode.DEFAULT): Credential[] {
+  const filtered: CredentialWithPriority[] = [];
+  const currentDomain = extractDomain(currentUrl);
+
+  // Determine feature flags based on matching mode
+  let enableExactMatch = false;
+  let enableSubdomainMatch = false;
+  let enableServiceNameFallback = false;
+
+  switch (matchingMode) {
+    case AutofillMatchingMode.URL_EXACT:
+      enableExactMatch = true;
+      enableSubdomainMatch = false;
+      enableServiceNameFallback = false;
+      break;
+
+    case AutofillMatchingMode.URL_SUBDOMAIN:
+      enableExactMatch = true;
+      enableSubdomainMatch = true;
+      enableServiceNameFallback = false;
+      break;
+
+    case AutofillMatchingMode.DEFAULT:
+      enableExactMatch = true;
+      enableSubdomainMatch = true;
+      enableServiceNameFallback = true;
+      break;
+  }
+
+  // Process credentials with service URLs
   credentials.forEach(cred => {
-    if (!cred.ServiceUrl || filtered.some(f => f.Id === cred.Id)) {
+    if (!cred.ServiceUrl || cred.ServiceUrl.length === 0) {
+      return; // Handle these in service name fallback
+    }
+
+    const credDomain = extractDomain(cred.ServiceUrl);
+
+    // Check for exact match (priority 1)
+    if (enableExactMatch && currentDomain === credDomain) {
+      filtered.push({ ...cred, priority: 1 });
       return;
     }
 
-    let hasBaseUrlMatch = false;
-    let hasTitleMatch = false;
-
-    // Check base URL match
-    try {
-      const credUrlObject = new URL(cred.ServiceUrl);
-      const currentUrlObject = new URL(baseUrl);
-
-      const credDomainParts = credUrlObject.hostname.toLowerCase().split('.');
-      const currentDomainParts = currentUrlObject.hostname.toLowerCase().split('.');
-
-      const credRootDomain = credDomainParts.slice(-2).join('.');
-      const currentRootDomain = currentDomainParts.slice(-2).join('.');
-
-      if (credUrlObject.protocol === currentUrlObject.protocol &&
-          credRootDomain === currentRootDomain) {
-        hasBaseUrlMatch = true;
-      }
-    } catch {
-      // Invalid URL, skip
-    }
-
-    // Check page title match
-    if (titleWords.length > 0) {
-      const credNameWords = cred.ServiceName.toLowerCase()
-        .split(/\s+/)
-        .filter(word => word.length > 3 && !CombinedStopWords.has(word));
-      hasTitleMatch = titleWords.some(word =>
-        credNameWords.some(credWord => credWord.includes(word))
-      );
-    }
-
-    // Assign priority based on matches
-    if (hasBaseUrlMatch && hasTitleMatch) {
+    // Check for subdomain/partial match (priority 2)
+    if (enableSubdomainMatch && domainsMatch(currentDomain, credDomain)) {
       filtered.push({ ...cred, priority: 2 });
-    } else if (hasBaseUrlMatch) {
-      filtered.push({ ...cred, priority: 3 });
-    } else if (hasTitleMatch) {
-      filtered.push({ ...cred, priority: 4 });
+      return;
     }
   });
 
-  // Sort by priority and then take unique credentials
+  // Service name fallback for credentials without URLs (priority 5)
+  if (enableServiceNameFallback) {
+    /*
+     * SECURITY: Service name matching only applies to credentials with no service URL.
+     * This prevents phishing attacks where a malicious site might match credentials
+     * intended for a legitimate site.
+     */
+
+    // Extract words from page title
+    const titleWords = extractWords(pageTitle);
+
+    if (titleWords.length > 0) {
+      credentials.forEach(cred => {
+        // CRITICAL: Only check credentials that have NO service URL defined
+        if (cred.ServiceUrl && cred.ServiceUrl.length > 0) {
+          return;
+        }
+
+        // Skip if already in filtered list
+        if (filtered.some(f => f.Id === cred.Id)) {
+          return;
+        }
+
+        // Check page title match with service name
+        if (cred.ServiceName) {
+          const credNameWords = extractWords(cred.ServiceName);
+
+          /*
+           * Match only complete words, not substrings
+           * For example: "Express" should match "My Express Account" but not "AliExpress"
+           */
+          const hasTitleMatch = titleWords.some(titleWord =>
+            credNameWords.some(credWord =>
+              titleWord === credWord // Exact word match only
+            )
+          );
+
+          if (hasTitleMatch) {
+            filtered.push({ ...cred, priority: 5 });
+          }
+        }
+      });
+    }
+  }
+
+  // Sort by priority and return unique credentials (max 3)
   const uniqueCredentials = Array.from(
-    new Map(filtered
-      .sort((a, b) => a.priority - b.priority)
-      .map(cred => [cred.Id, cred]))
-      .values()
+    new Map(
+      filtered
+        .sort((a, b) => a.priority - b.priority)
+        .map(cred => [cred.Id, cred])
+    ).values()
   );
-  // Show max 3 results
+
   return uniqueCredentials.slice(0, 3);
 }

apps/browser-extension/src/entrypoints/contentScript/Form.ts

@@ -1,8 +1,11 @@
+import { sendMessage } from 'webext-bridge/content-script';
+
 import { openAutofillPopup } from '@/entrypoints/contentScript/Popup';
 
 import type { Credential } from '@/utils/dist/shared/models/vault';
 import { FormDetector } from '@/utils/formDetector/FormDetector';
 import { FormFiller } from '@/utils/formDetector/FormFiller';
+import { ClickValidator } from '@/utils/security/ClickValidator';
 
 /**
  * Global timestamp to track popup debounce time.
@@ -12,6 +15,11 @@ import { FormFiller } from '@/utils/formDetector/FormFiller';
  */
 let popupDebounceTime = 0;
 
+/**
+ * ClickValidator instance for form security validation
+ */
+const clickValidator = ClickValidator.getInstance();
+
 /**
  * Check if popup can be shown based on debounce time.
  */
@@ -32,6 +40,8 @@ export function hidePopupFor(ms: number) : void {
 
 /**
  * Validates if an element is a supported input field that can be processed for autofill.
+ * This function supports regular input elements, custom elements with type attributes,
+ * and custom web components that may contain shadow DOM.
  * @param element The element to validate
  * @returns An object containing validation result and the element cast as HTMLInputElement if valid
  */
@@ -42,14 +52,30 @@ export function validateInputField(element: Element | null): { isValid: boolean;
 
   const textInputTypes = ['text', 'email', 'tel', 'password', 'search', 'url', 'number'];
   const elementType = element.getAttribute('type');
-  const isInputElement = element.tagName.toLowerCase() === 'input';
+  const tagName = element.tagName.toLowerCase();
+  const isInputElement = tagName === 'input';
+
+  // Check if element has shadow DOM with input elements
+  const elementWithShadow = element as HTMLElement & { shadowRoot?: ShadowRoot };
+  const hasShadowDOMInput = elementWithShadow.shadowRoot &&
+    elementWithShadow.shadowRoot.querySelector('input, textarea');
+
+  // Check if it's a custom element that might be an input
+  const isLikelyCustomInputElement = tagName.includes('-') && (
+    tagName.includes('input') ||
+    tagName.includes('field') ||
+    tagName.includes('text') ||
+    hasShadowDOMInput
+  );
 
   // Check if it's a valid input field we should process
   const isValid = (
     // Case 1: It's an input element (with either explicit type or defaulting to "text")
     (isInputElement && (!elementType || textInputTypes.includes(elementType?.toLowerCase() ?? ''))) ||
     // Case 2: Non-input element but has valid type attribute
-    (!isInputElement && elementType && textInputTypes.includes(elementType.toLowerCase()))
+    (!isInputElement && elementType && textInputTypes.includes(elementType.toLowerCase())) ||
+    // Case 3: It's a custom element that likely contains an input
+    (isLikelyCustomInputElement)
   ) as boolean;
 
   return {
@@ -64,10 +90,15 @@ export function validateInputField(element: Element | null): { isValid: boolean;
  * @param credential - The credential to fill.
  * @param input - The input element that triggered the popup. Required when filling credentials to know which form to fill.
  */
-export function fillCredential(credential: Credential, input: HTMLInputElement) : void {
+export async function fillCredential(credential: Credential, input: HTMLInputElement): Promise<void> {
   // Set debounce time to 300ms to prevent the popup from being shown again within 300ms because of autofill events.
   hidePopupFor(300);
 
+  // Reset auto-lock timer when autofilling
+  sendMessage('RESET_AUTO_LOCK_TIMER', {}, 'background').catch(() => {
+    // Ignore errors as background script might not be ready
+  });
+
   const formDetector = new FormDetector(document, input);
   const form = formDetector.getForm();
 
@@ -77,7 +108,7 @@ export function fillCredential(credential: Credential, input: HTMLInputElement)
   }
 
   const formFiller = new FormFiller(form, triggerInputEvents);
-  formFiller.fillFields(credential);
+  await formFiller.fillFields(credential);
 }
 
 /**
@@ -98,7 +129,7 @@ function findActualInput(element: HTMLElement): HTMLInputElement {
     return element as HTMLInputElement;
   }
 
-  // Try to find a visible child input
+  // Try to find a visible child input in regular DOM
   const childInput = element.querySelector('input');
   if (childInput) {
     const style = window.getComputedStyle(childInput);
@@ -107,6 +138,17 @@ function findActualInput(element: HTMLElement): HTMLInputElement {
     }
   }
 
+  // Try to find input in shadow DOM if element has shadowRoot
+  if (element.shadowRoot) {
+    const shadowInput = element.shadowRoot.querySelector('input');
+    if (shadowInput) {
+      const style = window.getComputedStyle(shadowInput);
+      if (style.display !== 'none' && style.visibility !== 'hidden') {
+        return shadowInput as HTMLInputElement;
+      }
+    }
+  }
+
   // Fallback to the provided element if no child input found
   return element as HTMLInputElement;
 }
@@ -179,9 +221,16 @@ export function injectIcon(input: HTMLInputElement, container: HTMLElement): voi
   window.addEventListener('resize', updateIconPosition);
 
   // Add click event to trigger the autofill popup and refocus the input
-  icon.addEventListener('click', (e: MouseEvent) => {
+  icon.addEventListener('click', async (e: MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
+
+    // Validate the click for security
+    if (!await clickValidator.validateClick(e)) {
+      console.warn('[AliasVault Security] Blocked autofill popup opening due to security validation failure');
+      return;
+    }
+
     setTimeout(() => actualInput.focus(), 0);
     openAutofillPopup(actualInput, container);
   });

apps/browser-extension/src/entrypoints/contentScript/__tests__/Filter.test.ts

@@ -0,0 +1,347 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+
+import type { Credential } from '@/utils/dist/shared/models/vault';
+
+import { filterCredentials } from '../Filter';
+
+describe('Filter - Credential URL Matching', () => {
+  let testCredentials: Credential[];
+
+  beforeEach(() => {
+    // Create test credentials using shared test data structure
+    testCredentials = createSharedTestCredentials();
+  });
+
+  // [#1] - Exact URL match
+  it('should match exact URL', () => {
+    const matches = filterCredentials(
+      testCredentials,
+      'www.coolblue.nl',
+      ''
+    );
+
+    expect(matches).toHaveLength(1);
+    expect(matches[0].ServiceName).toBe('Coolblue');
+  });
+
+  // [#2] - Base URL with path match
+  it('should match base URL with path', () => {
+    const matches = filterCredentials(
+      testCredentials,
+      'https://gmail.com/signin',
+      ''
+    );
+
+    expect(matches).toHaveLength(1);
+    expect(matches[0].ServiceName).toBe('Gmail');
+  });
+
+  // [#3] - Root domain with subdomain match
+  it('should match root domain with subdomain', () => {
+    const matches = filterCredentials(
+      testCredentials,
+      'https://mail.google.com',
+      ''
+    );
+
+    expect(matches).toHaveLength(1);
+    expect(matches[0].ServiceName).toBe('Google');
+  });
+
+  // [#4] - No matches for non-existent domain
+  it('should return empty array for no matches', () => {
+    const matches = filterCredentials(
+      testCredentials,
+      'https://nonexistent.com',
+      ''
+    );
+
+    expect(matches).toHaveLength(0);
+  });
+
+  // [#5] - Partial URL stored matches full URL search
+  it('should match partial URL with full URL - dumpert.nl case', () => {
+    // Test case: stored URL is "dumpert.nl", search with full URL
+    const matches = filterCredentials(
+      testCredentials,
+      'https://www.dumpert.nl',
+      ''
+    );
+
+    expect(matches).toHaveLength(1);
+    expect(matches[0].ServiceName).toBe('Dumpert');
+  });
+
+  // [#6] - Full URL stored matches partial URL search
+  it('should match full URL with partial URL', () => {
+    const matches = filterCredentials(
+      testCredentials,
+      'coolblue.nl',
+      ''
+    );
+
+    expect(matches).toHaveLength(1);
+    expect(matches[0].ServiceName).toBe('Coolblue');
+  });
+
+  // [#7] - Protocol variations (http/https/none) match
+  it('should handle protocol variations correctly', () => {
+    // Test that http and https variations match
+    const httpsMatches = filterCredentials(
+      testCredentials,
+      'https://github.com',
+      ''
+    );
+    const httpMatches = filterCredentials(
+      testCredentials,
+      'http://github.com',
+      ''
+    );
+    const noProtocolMatches = filterCredentials(
+      testCredentials,
+      'https://github.com',  // Converting no-protocol to https for test
+      ''
+    );
+
+    expect(httpsMatches).toHaveLength(1);
+    expect(httpMatches).toHaveLength(1);
+    expect(noProtocolMatches).toHaveLength(1);
+    expect(httpsMatches[0].ServiceName).toBe('GitHub');
+    expect(httpMatches[0].ServiceName).toBe('GitHub');
+    expect(noProtocolMatches[0].ServiceName).toBe('GitHub');
+  });
+
+  // [#8] - WWW prefix variations match
+  it('should handle www variations correctly', () => {
+    // Test that www variations match
+    const withWww = filterCredentials(
+      testCredentials,
+      'https://www.dumpert.nl',
+      ''
+    );
+    const withoutWww = filterCredentials(
+      testCredentials,
+      'https://dumpert.nl',
+      ''
+    );
+
+    expect(withWww).toHaveLength(1);
+    expect(withoutWww).toHaveLength(1);
+    expect(withWww[0].ServiceName).toBe('Dumpert');
+    expect(withoutWww[0].ServiceName).toBe('Dumpert');
+  });
+
+  // [#9] - Subdomain matching
+  it('should handle subdomain matching', () => {
+    // Test subdomain matching
+    const appSubdomain = filterCredentials(
+      testCredentials,
+      'https://app.example.com',
+      ''
+    );
+    const wwwSubdomain = filterCredentials(
+      testCredentials,
+      'https://www.example.com',
+      ''
+    );
+    const noSubdomain = filterCredentials(
+      testCredentials,
+      'https://example.com',
+      ''
+    );
+
+    expect(appSubdomain).toHaveLength(1);
+    expect(appSubdomain[0].ServiceName).toBe('Subdomain Example');
+    expect(wwwSubdomain).toHaveLength(1);
+    expect(wwwSubdomain[0].ServiceName).toBe('Subdomain Example');
+    expect(noSubdomain).toHaveLength(1);
+    expect(noSubdomain[0].ServiceName).toBe('Subdomain Example');
+  });
+
+  // [#10] - Paths and query strings ignored
+  it('should ignore paths and query strings', () => {
+    // Test that paths and query strings are ignored
+    const withPath = filterCredentials(
+      testCredentials,
+      'https://github.com/user/repo',
+      ''
+    );
+    const withQuery = filterCredentials(
+      testCredentials,
+      'https://stackoverflow.com/questions?tab=newest',
+      ''
+    );
+    const withFragment = filterCredentials(
+      testCredentials,
+      'https://gmail.com#inbox',
+      ''
+    );
+
+    expect(withPath).toHaveLength(1);
+    expect(withPath[0].ServiceName).toBe('GitHub');
+    expect(withQuery).toHaveLength(1);
+    expect(withQuery[0].ServiceName).toBe('Stack Overflow');
+    expect(withFragment).toHaveLength(1);
+    expect(withFragment[0].ServiceName).toBe('Gmail');
+  });
+
+  // [#11] - Complex URL variations
+  it('should handle complex URL variations', () => {
+    // Test complex URL matching scenario
+    const complexUrl = filterCredentials(
+      testCredentials,
+      'https://www.coolblue.nl/product/12345?ref=google',
+      ''
+    );
+
+    expect(complexUrl).toHaveLength(1);
+    expect(complexUrl[0].ServiceName).toBe('Coolblue');
+  });
+
+  // [#12] - Priority ordering
+  it('should handle priority ordering', () => {
+    const matches = filterCredentials(
+      testCredentials,
+      'coolblue.nl',
+      ''
+    );
+
+    expect(matches).toHaveLength(1);
+    expect(matches[0].ServiceName).toBe('Coolblue');
+  });
+
+  // [#13] - Title-only matching
+  it('should match title only', () => {
+    const matches = filterCredentials(
+      testCredentials,
+      'https://nomatch.com',
+      'newyorktimes'
+    );
+
+    expect(matches).toHaveLength(1);
+    expect(matches[0].ServiceName).toBe('Title Only newyorktimes');
+  });
+
+  /* [#14] - Domain name part matching */
+  it('should handle domain name part matching', () => {
+    const matches = filterCredentials(
+      testCredentials,
+      'https://coolblue.be',
+      ''
+    );
+
+    expect(matches).toHaveLength(0);
+  });
+
+  // [#15] - Package name matching
+  it('should handle package name matching', () => {
+    const matches = filterCredentials(
+      testCredentials,
+      'com.coolblue.app',
+      ''
+    );
+
+    expect(matches).toHaveLength(1);
+    expect(matches[0].ServiceName).toBe('Coolblue App');
+  });
+
+  // [#16] - Invalid URL handling
+  it('should handle invalid URL', () => {
+    const matches = filterCredentials(
+      testCredentials,
+      'not a url',
+      ''
+    );
+
+    expect(matches).toHaveLength(0);
+  });
+
+  // [#17] - Anti-phishing protection
+  it('should handle anti-phishing protection', () => {
+    const matches = filterCredentials(
+      testCredentials,
+      'https://secure-bankk.com',
+      ''
+    );
+
+    expect(matches).toHaveLength(0);
+  });
+
+  // [#18] - Ensure only full words are matched
+  it('should not match on string part of word', () => {
+    const matches = filterCredentials(
+      testCredentials,
+      '',
+      'Express Yourself App | Description'
+    );
+
+    // The string above should not match "AliExpress" service name
+    expect(matches).toHaveLength(0);
+  });
+
+  // [#19] - Ensure separators and punctuation are stripped for matching
+  it('should match service names when separated by commas and other punctuation', () => {
+    const matches = filterCredentials(
+      testCredentials,
+      'https://nomatch.com',
+      'Reddit, social media platform'
+    );
+
+    // Should match "Reddit" even though it's followed by a comma and description
+    expect(matches).toHaveLength(1);
+    expect(matches[0].ServiceName).toBe('Reddit');
+  });
+
+  /**
+   * Creates the shared test credential dataset used across all platforms.
+   * Note: when making changes to this list, make sure to update the corresponding list for iOS and Android tests as well.
+   */
+  function createSharedTestCredentials(): Credential[] {
+    return [
+      createTestCredential('Gmail', 'https://gmail.com', 'user@gmail.com'),
+      createTestCredential('Google', 'https://google.com', 'user@google.com'),
+      createTestCredential('Coolblue', 'https://www.coolblue.nl', 'user@coolblue.nl'),
+      createTestCredential('Amazon', 'https://amazon.com', 'user@amazon.com'),
+      createTestCredential('Coolblue App', 'com.coolblue.app', 'user@coolblue.nl'),
+      createTestCredential('Dumpert', 'dumpert.nl', 'user@dumpert.nl'),
+      createTestCredential('GitHub', 'github.com', 'user@github.com'),
+      createTestCredential('Stack Overflow', 'https://stackoverflow.com', 'user@stackoverflow.com'),
+      createTestCredential('Subdomain Example', 'https://app.example.com', 'user@example.com'),
+      createTestCredential('Title Only newyorktimes', '', ''),
+      createTestCredential('Bank Account', 'https://secure-bank.com', 'user@bank.com'),
+      createTestCredential('AliExpress', 'https://aliexpress.com', 'user@aliexpress.com'),
+      createTestCredential('Reddit', '', 'user@reddit.com'),
+    ];
+  }
+
+  /**
+   * Helper function to create test credentials with standardized structure.
+   * @param serviceName - The name of the service
+   * @param serviceUrl - The URL of the service
+   * @param username - The username for the service
+   * @returns A test credential matching the platform's Credential type
+   */
+  function createTestCredential(
+    serviceName: string,
+    serviceUrl: string,
+    username: string
+  ): Credential {
+    return {
+      Id: Math.random().toString(),
+      ServiceName: serviceName,
+      ServiceUrl: serviceUrl,
+      Username: username,
+      Password: 'password123',
+      Notes: '',
+      Logo: new Uint8Array(),
+      Alias: {
+        FirstName: '',
+        LastName: '',
+        NickName: '',
+        BirthDate: '',
+        Gender: undefined,
+        Email: username
+      }
+    };
+  }
+});

apps/browser-extension/src/entrypoints/contentScript/style.css

@@ -222,7 +222,7 @@ body {
 
 /* Search Input */
 .av-search-input {
-  flex: 2;
+  flex: 1;
   border-radius: 4px;
   background: #374151;
   color: #e5e7eb;
@@ -231,12 +231,13 @@ body {
   border: 1px solid #4b5563;
   outline: none;
   line-height: 1;
-  text-align: center;
-  min-width: 0px;
+  padding: 8px 12px;
+  padding-right: 0;
 }
 
 .av-search-input::placeholder {
   color: #bdbebe;
+  opacity: 1;
 }
 
 .av-search-input:focus {
@@ -299,6 +300,71 @@ body {
   border: 1px solid #6f6f6f;
 }
 
+/* Upgrade Required Popup */
+.av-upgrade-required {
+  padding: 12px 16px;
+  position: relative;
+}
+
+.av-upgrade-required:hover {
+  background-color: #374151;
+}
+
+.av-upgrade-required-container {
+  display: flex;
+  align-items: center;
+  padding-right: 32px;
+  width: 100%;
+  transition: background-color 0.2s ease;
+  border-radius: 4px;
+}
+
+.av-upgrade-required-message {
+  color: #d1d5db;
+  font-size: 14px;
+  flex-grow: 1;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+.av-upgrade-required-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  padding-right: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #f59e0b;
+  border-radius: 4px;
+  margin-left: 8px;
+}
+
+.av-upgrade-required-close {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 4px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  border: 1px solid #6f6f6f;
+}
+
+.av-icon-upgrade {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 /* Create Name Popup */
 .av-create-popup-overlay {
   position: fixed;
@@ -832,4 +898,288 @@ body {
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
+}
+
+/* Password Configuration Styles */
+.av-password-length-container {
+  margin-top: 12px;
+  padding-top: 8px;
+}
+
+.av-password-length-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.av-password-length-header label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #9ca3af;
+  margin: 0;
+}
+
+.av-password-length-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.av-password-length-value {
+  font-size: 0.875rem;
+  color: #e5e7eb;
+  font-family: 'Courier New', monospace;
+  min-width: 24px;
+  text-align: center;
+}
+
+.av-password-config-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #9ca3af;
+  transition: color 0.2s ease, background-color 0.2s ease;
+}
+
+.av-password-config-btn:hover {
+  color: #e5e7eb;
+  background-color: rgba(75, 85, 99, 0.3);
+}
+
+.av-password-config-btn .av-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.av-password-length-slider {
+  width: 100%;
+  height: 8px;
+  background: #374151;
+  border-radius: 4px;
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+}
+
+.av-password-length-slider::-webkit-slider-thumb {
+  appearance: none;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: #d68338;
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.av-password-length-slider::-moz-range-thumb {
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: #d68338;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* Password Config Dialog */
+.av-password-config-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 2147483647;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.av-password-config-dialog {
+  background: #1f2937;
+  border: 1px solid #374151;
+  border-radius: 8px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  width: 400px;
+  max-width: 90vw;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+.av-password-config-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #374151;
+}
+
+.av-password-config-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #f8f9fa;
+}
+
+.av-password-config-close {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: #9ca3af;
+  border-radius: 4px;
+  transition: color 0.2s ease, background-color 0.2s ease;
+}
+
+.av-password-config-close:hover {
+  color: #e5e7eb;
+  background-color: #374151;
+}
+
+.av-password-config-close .av-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.av-password-config-content {
+  padding: 20px;
+}
+
+.av-password-preview-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.av-password-config-preview {
+  flex: 1;
+  padding: 10px 12px;
+  border: 1px solid #374151;
+  border-radius: 6px;
+  background: #374151;
+  color: #f8f9fa;
+  font-size: 14px;
+  font-family: 'Courier New', monospace;
+  outline: none;
+}
+
+.av-password-config-refresh {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  background: #374151;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  color: #e5e7eb;
+  transition: background-color 0.2s ease;
+}
+
+.av-password-config-refresh:hover {
+  background-color: #4b5563;
+}
+
+.av-password-config-refresh .av-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.av-password-config-options {
+  margin-bottom: 20px;
+}
+
+.av-password-config-toggles {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.av-password-config-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  background: #374151;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  color: #9ca3af;
+  transition: all 0.2s ease;
+  font-family: 'Courier New', monospace;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.av-password-config-toggle:hover {
+  background-color: #4b5563;
+}
+
+.av-password-config-toggle.active {
+  background-color: #d68338;
+  color: white;
+}
+
+.av-password-config-toggle.active:hover {
+  background-color: #c97731;
+}
+
+.av-password-config-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.av-password-config-checkbox label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #e5e7eb;
+  margin: 0;
+}
+
+.av-password-config-checkbox input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  accent-color: #d68338;
+  cursor: pointer;
+}
+
+.av-password-config-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.av-password-config-use {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 16px;
+  background: #6b7280;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background-color 0.2s ease;
+}
+
+.av-password-config-use:hover {
+  background-color: #4b5563;
+}
+
+.av-password-config-use .av-icon {
+  width: 16px;
+  height: 16px;
 }

apps/browser-extension/src/entrypoints/popup/App.tsx

@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { HashRouter as Router, Routes, Route } from 'react-router-dom';
+import { sendMessage } from 'webext-bridge/popup';
 
-import GlobalStateChangeHandler from '@/entrypoints/popup/components/GlobalStateChangeHandler';
+import { ClipboardCountdownBar } from '@/entrypoints/popup/components/ClipboardCountdownBar';
 import BottomNav from '@/entrypoints/popup/components/Layout/BottomNav';
 import Header from '@/entrypoints/popup/components/Layout/Header';
 import LoadingSpinner from '@/entrypoints/popup/components/LoadingSpinner';
@@ -9,18 +11,25 @@ import { useAuth } from '@/entrypoints/popup/context/AuthContext';
 import { useHeaderButtons } from '@/entrypoints/popup/context/HeaderButtonsContext';
 import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
 import { NavigationProvider } from '@/entrypoints/popup/context/NavigationContext';
-import AuthSettings from '@/entrypoints/popup/pages/AuthSettings';
-import CredentialAddEdit from '@/entrypoints/popup/pages/CredentialAddEdit';
-import CredentialDetails from '@/entrypoints/popup/pages/CredentialDetails';
-import CredentialsList from '@/entrypoints/popup/pages/CredentialsList';
-import EmailDetails from '@/entrypoints/popup/pages/EmailDetails';
-import EmailsList from '@/entrypoints/popup/pages/EmailsList';
-import Home from '@/entrypoints/popup/pages/Home';
-import Login from '@/entrypoints/popup/pages/Login';
-import Logout from '@/entrypoints/popup/pages/Logout';
-import Settings from '@/entrypoints/popup/pages/Settings';
-import Unlock from '@/entrypoints/popup/pages/Unlock';
-import UnlockSuccess from '@/entrypoints/popup/pages/UnlockSuccess';
+import AuthSettings from '@/entrypoints/popup/pages/auth/AuthSettings';
+import Login from '@/entrypoints/popup/pages/auth/Login';
+import Logout from '@/entrypoints/popup/pages/auth/Logout';
+import Unlock from '@/entrypoints/popup/pages/auth/Unlock';
+import UnlockSuccess from '@/entrypoints/popup/pages/auth/UnlockSuccess';
+import Upgrade from '@/entrypoints/popup/pages/auth/Upgrade';
+import CredentialAddEdit from '@/entrypoints/popup/pages/credentials/CredentialAddEdit';
+import CredentialDetails from '@/entrypoints/popup/pages/credentials/CredentialDetails';
+import CredentialsList from '@/entrypoints/popup/pages/credentials/CredentialsList';
+import EmailDetails from '@/entrypoints/popup/pages/emails/EmailDetails';
+import EmailsList from '@/entrypoints/popup/pages/emails/EmailsList';
+import Index from '@/entrypoints/popup/pages/Index';
+import Reinitialize from '@/entrypoints/popup/pages/Reinitialize';
+import AutofillSettings from '@/entrypoints/popup/pages/settings/AutofillSettings';
+import AutoLockSettings from '@/entrypoints/popup/pages/settings/AutoLockSettings';
+import ClipboardSettings from '@/entrypoints/popup/pages/settings/ClipboardSettings';
+import ContextMenuSettings from '@/entrypoints/popup/pages/settings/ContextMenuSettings';
+import LanguageSettings from '@/entrypoints/popup/pages/settings/LanguageSettings';
+import Settings from '@/entrypoints/popup/pages/settings/Settings';
 
 import { useMinDurationLoading } from '@/hooks/useMinDurationLoading';
 
@@ -40,28 +49,36 @@ type RouteConfig = {
  * App component.
  */
 const App: React.FC = () => {
+  const { t } = useTranslation();
   const authContext = useAuth();
   const { isInitialLoading } = useLoading();
   const [isLoading, setIsLoading] = useMinDurationLoading(true, 150);
   const [message, setMessage] = useState<string | null>(null);
   const { headerButtons } = useHeaderButtons();
 
-  // Add these route configurations
-  const routes: RouteConfig[] = [
-    { path: '/', element: <Home />, showBackButton: false },
+  // Move routes definition to useMemo to prevent recreation on every render
+  const routes: RouteConfig[] = React.useMemo(() => [
+    { path: '/', element: <Index />, showBackButton: false },
+    { path: '/reinitialize', element: <Reinitialize />, showBackButton: false },
     { path: '/login', element: <Login />, showBackButton: false },
     { path: '/unlock', element: <Unlock />, showBackButton: false },
-    { path: '/unlock-success', element: <UnlockSuccess onClose={() => window.location.search = ''} />, showBackButton: false },
-    { path: '/auth-settings', element: <AuthSettings />, showBackButton: true, title: 'Settings' },
+    { path: '/unlock-success', element: <UnlockSuccess />, showBackButton: false },
+    { path: '/upgrade', element: <Upgrade />, showBackButton: false },
+    { path: '/auth-settings', element: <AuthSettings />, showBackButton: true, title: t('settings.title') },
     { path: '/credentials', element: <CredentialsList />, showBackButton: false },
-    { path: '/credentials/add', element: <CredentialAddEdit />, showBackButton: true, title: 'Add credential' },
-    { path: '/credentials/:id', element: <CredentialDetails />, showBackButton: true, title: 'Credential details' },
-    { path: '/credentials/:id/edit', element: <CredentialAddEdit />, showBackButton: true, title: 'Edit credential' },
+    { path: '/credentials/add', element: <CredentialAddEdit />, showBackButton: true, title: t('credentials.addCredential') },
+    { path: '/credentials/:id', element: <CredentialDetails />, showBackButton: true, title: t('credentials.credentialDetails') },
+    { path: '/credentials/:id/edit', element: <CredentialAddEdit />, showBackButton: true, title: t('credentials.editCredential') },
     { path: '/emails', element: <EmailsList />, showBackButton: false },
-    { path: '/emails/:id', element: <EmailDetails />, showBackButton: true, title: 'Email details' },
+    { path: '/emails/:id', element: <EmailDetails />, showBackButton: true, title: t('emails.title') },
     { path: '/settings', element: <Settings />, showBackButton: false },
+    { path: '/settings/autofill', element: <AutofillSettings />, showBackButton: true, title: t('settings.autofillSettings') },
+    { path: '/settings/context-menu', element: <ContextMenuSettings />, showBackButton: true, title: t('settings.contextMenuSettings') },
+    { path: '/settings/clipboard', element: <ClipboardSettings />, showBackButton: true, title: t('settings.clipboardSettings') },
+    { path: '/settings/language', element: <LanguageSettings />, showBackButton: true, title: t('settings.language') },
+    { path: '/settings/auto-lock', element: <AutoLockSettings />, showBackButton: true, title: t('settings.autoLockTimeout') },
     { path: '/logout', element: <Logout />, showBackButton: false },
-  ];
+  ], [t]);
 
   useEffect(() => {
     if (!isInitialLoading) {
@@ -69,6 +86,29 @@ const App: React.FC = () => {
     }
   }, [isInitialLoading, setIsLoading]);
 
+  /**
+   * Send heartbeat to background every 5 seconds while popup is open.
+   * This extends the auto-lock timer to prevent vault locking while popup is active.
+   */
+  useEffect(() => {
+    // Send initial heartbeat
+    sendMessage('POPUP_HEARTBEAT', {}, 'background').catch(() => {
+      // Ignore errors as background script might not be ready
+    });
+
+    // Set up heartbeat interval
+    const heartbeatInterval = setInterval(() => {
+      sendMessage('POPUP_HEARTBEAT', {}, 'background').catch(() => {
+        // Ignore errors as background script might not be ready
+      });
+    }, 5000); // Send heartbeat every 5 seconds
+
+    // Cleanup: clear interval when popup closes
+    return () : void => {
+      clearInterval(heartbeatInterval);
+    };
+  }, []);
+
   /**
    * Print global message if it exists.
    */
@@ -90,7 +130,7 @@ const App: React.FC = () => {
             </div>
           )}
 
-          <GlobalStateChangeHandler />
+          <ClipboardCountdownBar />
           <Header
             routes={routes}
             rightButtons={headerButtons}

apps/browser-extension/src/entrypoints/popup/components/ClipboardCountdownBar.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { onMessage, sendMessage } from 'webext-bridge/popup';
+
+/**
+ * Clipboard countdown bar component.
+ */
+export const ClipboardCountdownBar: React.FC = () => {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+  const animationRef = useRef<HTMLDivElement>(null);
+  const currentCountdownIdRef = useRef<number>(0);
+
+  /**
+   * Starts the countdown animation.
+   */
+  const startAnimation = (remaining: number, total: number) : void => {
+    // Use a small delay to ensure the component is fully rendered
+    setTimeout(() => {
+      if (animationRef.current) {
+        // Calculate the starting percentage based on remaining time
+        const percentage = (remaining / total) * 100;
+
+        // Reset any existing animation
+        animationRef.current.style.transition = 'none';
+        animationRef.current.style.width = `${percentage}%`;
+
+        // Force browser to flush styles
+        void animationRef.current.offsetHeight;
+
+        // Start animation from current position to 0
+        requestAnimationFrame(() => {
+          if (animationRef.current) {
+            animationRef.current.style.transition = `width ${remaining}s linear`;
+            animationRef.current.style.width = '0%';
+          }
+        });
+      }
+    }, 10);
+  };
+
+  useEffect(() => {
+    // Request current countdown state on mount
+    sendMessage('GET_CLIPBOARD_COUNTDOWN_STATE', {}, 'background').then((state) => {
+      const countdownState = state as { remaining: number; total: number; id: number } | null;
+      if (countdownState && countdownState.remaining > 0) {
+        currentCountdownIdRef.current = countdownState.id;
+        setIsVisible(true);
+        startAnimation(countdownState.remaining, countdownState.total);
+      }
+    }).catch(() => {
+      // No active countdown
+    });
+    // Listen for countdown updates from background script
+    const unsubscribe = onMessage('CLIPBOARD_COUNTDOWN', ({ data }) => {
+      const { remaining, total, id } = data as { remaining: number; total: number; id: number };
+      setIsVisible(remaining > 0);
+
+      // Check if this is a new countdown (different ID)
+      const isNewCountdown = id !== currentCountdownIdRef.current;
+
+      // Start animation when new countdown begins
+      if (isNewCountdown && remaining > 0) {
+        currentCountdownIdRef.current = id;
+        startAnimation(remaining, total);
+      }
+    });
+
+    // Listen for clipboard cleared message
+    const unsubscribeClear = onMessage('CLIPBOARD_CLEARED', () => {
+      setIsVisible(false);
+      currentCountdownIdRef.current = 0;
+      if (animationRef.current) {
+        animationRef.current.style.transition = 'none';
+        animationRef.current.style.width = '0%';
+      }
+    });
+
+    // Listen for countdown cancelled message
+    const unsubscribeCancel = onMessage('CLIPBOARD_COUNTDOWN_CANCELLED', () => {
+      setIsVisible(false);
+      currentCountdownIdRef.current = 0;
+      if (animationRef.current) {
+        animationRef.current.style.transition = 'none';
+        animationRef.current.style.width = '0%';
+      }
+    });
+
+    return () : void => {
+      // Clean up listeners
+      unsubscribe();
+      unsubscribeClear();
+      unsubscribeCancel();
+    };
+  }, []);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div className="fixed top-0 left-0 right-0 z-50 h-1 bg-gray-200 dark:bg-gray-700">
+      <div
+        ref={animationRef}
+        className="h-full bg-orange-500"
+        style={{ width: '100%', transition: 'none' }}
+      />
+    </div>
+  );
+};

apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/AliasBlock.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { FormInputCopyToClipboard } from '@/entrypoints/popup/components/FormInputCopyToClipboard';
 
@@ -13,6 +14,7 @@ type AliasBlockProps = {
  * Render the alias block.
  */
 const AliasBlock: React.FC<AliasBlockProps> = ({ credential }) => {
+  const { t } = useTranslation();
   const hasFirstName = Boolean(credential.Alias?.FirstName?.trim());
   const hasLastName = Boolean(credential.Alias?.LastName?.trim());
   const hasNickName = Boolean(credential.Alias?.NickName?.trim());
@@ -24,39 +26,39 @@ const AliasBlock: React.FC<AliasBlockProps> = ({ credential }) => {
 
   return (
     <div className="space-y-2">
-      <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">Alias</h2>
+      <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{t('common.alias')}</h2>
       {(hasFirstName || hasLastName) && (
         <FormInputCopyToClipboard
           id="fullName"
-          label="Full Name"
+          label={t('common.fullName')}
           value={[credential.Alias?.FirstName, credential.Alias?.LastName].filter(Boolean).join(' ')}
         />
       )}
       {hasFirstName && (
         <FormInputCopyToClipboard
           id="firstName"
-          label="First Name"
+          label={t('common.firstName')}
           value={credential.Alias?.FirstName ?? ''}
         />
       )}
       {hasLastName && (
         <FormInputCopyToClipboard
           id="lastName"
-          label="Last Name"
+          label={t('common.lastName')}
           value={credential.Alias?.LastName ?? ''}
         />
       )}
       {hasBirthDate && (
         <FormInputCopyToClipboard
           id="birthDate"
-          label="Birth Date"
+          label={t('common.birthDate')}
           value={IdentityHelperUtils.normalizeBirthDateForDisplay(credential.Alias?.BirthDate)}
         />
       )}
       {hasNickName && (
         <FormInputCopyToClipboard
           id="nickName"
-          label="Nickname"
+          label={t('common.nickname')}
           value={credential.Alias?.NickName ?? ''}
         />
       )}

apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/AttachmentBlock.tsx

@@ -0,0 +1,120 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useDb } from '@/entrypoints/popup/context/DbContext';
+
+import type { Attachment } from '@/utils/dist/shared/models/vault';
+
+type AttachmentBlockProps = {
+  credentialId: string;
+}
+
+/**
+ * This component shows attachments for a credential.
+ */
+const AttachmentBlock: React.FC<AttachmentBlockProps> = ({ credentialId }) => {
+  const { t } = useTranslation();
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [loading, setLoading] = useState(true);
+  const dbContext = useDb();
+
+  /**
+   * Downloads an attachment file.
+   */
+  const downloadAttachment = (attachment: Attachment): void => {
+    try {
+      // Convert Uint8Array or number[] to Uint8Array
+      const byteArray = attachment.Blob instanceof Uint8Array
+        ? attachment.Blob
+        : new Uint8Array(attachment.Blob);
+
+      // Create blob and download
+      const blob = new Blob([byteArray as BlobPart]);
+      const url = URL.createObjectURL(blob);
+
+      // Create temporary download link
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = attachment.Filename;
+      document.body.appendChild(a);
+      a.click();
+
+      // Cleanup
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Error downloading attachment:', error);
+    }
+  };
+
+  useEffect(() => {
+    /**
+     * Loads the attachments for the credential.
+     */
+    const loadAttachments = async (): Promise<void> => {
+      if (!dbContext?.sqliteClient) {
+        return;
+      }
+
+      try {
+        const attachmentList = dbContext.sqliteClient.getAttachmentsForCredential(credentialId);
+        setAttachments(attachmentList);
+      } catch (error) {
+        console.error('Error loading attachments:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadAttachments();
+  }, [credentialId, dbContext?.sqliteClient]);
+
+  if (loading) {
+    return (
+      <div className="text-gray-500 dark:text-gray-400 mb-4">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('common.attachments')}</h2>
+        {t('common.loadingAttachments')}
+      </div>
+    );
+  }
+
+  if (attachments.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="mb-4">
+      <div className="space-y-2">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{t('common.attachments')}</h2>
+        <div className="grid grid-cols-1 gap-2">
+          {attachments.map(attachment => (
+            <button
+              key={attachment.Id}
+              className="w-full text-left p-2 ps-3 pe-3 rounded bg-white dark:bg-gray-800 shadow hover:shadow-md transition-all border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
+              onClick={() => downloadAttachment(attachment)}
+              aria-label={`Download ${attachment.Filename}`}
+            >
+              <div className="flex justify-between items-center gap-2">
+                <div className="flex items-center flex-1">
+                  <div className="flex flex-col">
+                    <h4 className="text-sm font-medium text-gray-900 dark:text-white">{attachment.Filename}</h4>
+                    <span className="text-xs text-gray-500 dark:text-gray-400">
+                      {new Date(attachment.CreatedAt).toLocaleDateString()}
+                    </span>
+                  </div>
+                </div>
+                <div className="flex items-center">
+                  <svg className="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5m0 0l5-5m-5 5V4" />
+                  </svg>
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AttachmentBlock;

apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/AttachmentUploader.tsx

@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { Attachment } from '@/utils/dist/shared/models/vault';
+
+type AttachmentUploaderProps = {
+  attachments: Attachment[];
+  onAttachmentsChange: (attachments: Attachment[]) => void;
+}
+
+/**
+ * This component allows uploading and managing attachments for a credential.
+ */
+const AttachmentUploader: React.FC<AttachmentUploaderProps> = ({
+  attachments,
+  onAttachmentsChange
+}) => {
+  const { t } = useTranslation();
+  const [statusMessage, setStatusMessage] = useState<string>('');
+
+  /**
+   * Handles file selection and upload.
+   */
+  const handleFileSelection = async (event: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
+    const files = event.target.files;
+    if (!files || files.length === 0) {
+      return;
+    }
+
+    setStatusMessage('Uploading...');
+
+    try {
+      const newAttachments = [...attachments];
+
+      for (const file of Array.from(files)) {
+        const arrayBuffer = await file.arrayBuffer();
+        const byteArray = new Uint8Array(arrayBuffer);
+
+        const attachment: Attachment = {
+          Id: crypto.randomUUID(),
+          Filename: file.name,
+          Blob: byteArray,
+          CredentialId: '', // Will be set when saving credential
+          CreatedAt: new Date().toISOString(),
+          UpdatedAt: new Date().toISOString(),
+          IsDeleted: false,
+        };
+
+        newAttachments.push(attachment);
+      }
+
+      onAttachmentsChange(newAttachments);
+      setStatusMessage('Files uploaded successfully.');
+
+      // Clear status message after 3 seconds
+      setTimeout(() => setStatusMessage(''), 3000);
+    } catch (error) {
+      console.error('Error uploading files:', error);
+      setStatusMessage('Error uploading files.');
+      setTimeout(() => setStatusMessage(''), 3000);
+    }
+
+    // Reset file input
+    event.target.value = '';
+  };
+
+  /**
+   * Deletes an attachment.
+   */
+  const deleteAttachment = (attachmentToDelete: Attachment): void => {
+    try {
+      const updatedAttachments = [...attachments];
+
+      // Remove attachment from array
+      const index = updatedAttachments.findIndex(a => a.Id === attachmentToDelete.Id);
+      if (index !== -1) {
+        updatedAttachments.splice(index, 1);
+      }
+
+      onAttachmentsChange(updatedAttachments);
+      setStatusMessage('Attachment deleted successfully.');
+      setTimeout(() => setStatusMessage(''), 3000);
+    } catch (error) {
+      console.error('Error deleting attachment:', error);
+      setStatusMessage('Error deleting attachment.');
+      setTimeout(() => setStatusMessage(''), 3000);
+    }
+  };
+
+  const activeAttachments = attachments.filter(a => !a.IsDeleted);
+
+  return (
+    <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
+      <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">{t('common.attachments')}</h2>
+
+      <div className="space-y-4">
+        <div>
+          <input
+            type="file"
+            multiple
+            onChange={handleFileSelection}
+            className="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+          />
+          {statusMessage && (
+            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">{statusMessage}</p>
+          )}
+        </div>
+
+        {activeAttachments.length > 0 && (
+          <div>
+            <h4 className="mb-2 text-md font-medium text-gray-900 dark:text-white">Current attachments:</h4>
+            <div className="space-y-2">
+              {activeAttachments.map(attachment => (
+                <div
+                  key={attachment.Id}
+                  className="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700 rounded border border-gray-200 dark:border-gray-600"
+                >
+                  <div className="flex flex-col">
+                    <span className="text-sm font-medium text-gray-900 dark:text-white">
+                      {attachment.Filename}
+                    </span>
+                    <span className="text-xs text-gray-500 dark:text-gray-400">
+                      {new Date(attachment.CreatedAt).toLocaleDateString()}
+                    </span>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => deleteAttachment(attachment)}
+                    className="text-red-500 hover:text-red-700 focus:outline-none"
+                    aria-label={`Delete ${attachment.Filename}`}
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AttachmentUploader;

apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/HeaderBlock.tsx

@@ -21,14 +21,18 @@ const HeaderBlock: React.FC<HeaderBlockProps> = ({ credential }) => (
       <div>
         <h1 className="text-lg font-bold text-gray-900 dark:text-white">{credential.ServiceName}</h1>
         {credential.ServiceUrl && (
-          <a
-            href={credential.ServiceUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 break-all"
-          >
-            {credential.ServiceUrl}
-          </a>
+          /^https?:\/\//i.test(credential.ServiceUrl) ? (
+            <a
+              href={credential.ServiceUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 break-all"
+            >
+              {credential.ServiceUrl}
+            </a>
+          ) : (
+            <span className="break-all">{credential.ServiceUrl}</span>
+          )
         )}
       </div>
     </div>

apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/LoginCredentialsBlock.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { FormInputCopyToClipboard } from '@/entrypoints/popup/components/FormInputCopyToClipboard';
 
@@ -12,6 +13,7 @@ type LoginCredentialsBlockProps = {
  * Render the login credentials block.
  */
 const LoginCredentialsBlock: React.FC<LoginCredentialsBlockProps> = ({ credential }) => {
+  const { t } = useTranslation();
   const email = credential.Alias?.Email?.trim();
   const username = credential.Username?.trim();
   const password = credential.Password?.trim();
@@ -22,25 +24,25 @@ const LoginCredentialsBlock: React.FC<LoginCredentialsBlockProps> = ({ credentia
 
   return (
     <div className="space-y-2">
-      <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">Login credentials</h2>
+      <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{t('common.loginCredentials')}</h2>
       {email && (
         <FormInputCopyToClipboard
           id="email"
-          label="Email"
+          label={t('common.email')}
           value={email}
         />
       )}
       {username && (
         <FormInputCopyToClipboard
           id="username"
-          label="Username"
+          label={t('common.username')}
           value={username}
         />
       )}
       {password && (
         <FormInputCopyToClipboard
           id="password"
-          label="Password"
+          label={t('common.password')}
           value={password}
           type="password"
         />

apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/NotesBlock.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 type NotesBlockProps = {
   notes: string | undefined;
@@ -20,6 +21,7 @@ const convertUrlsToLinks = (text: string): string => {
  * Render the notes block.
  */
 const NotesBlock: React.FC<NotesBlockProps> = ({ notes }) => {
+  const { t } = useTranslation();
   if (!notes) {
     return null;
   }
@@ -28,7 +30,7 @@ const NotesBlock: React.FC<NotesBlockProps> = ({ notes }) => {
 
   return (
     <div>
-      <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">Notes</h2>
+      <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{t('common.notes')}</h2>
       <div className="p-4 bg-gray-50 rounded-lg dark:bg-gray-700">
         <p
           className="text-gray-900 dark:text-gray-100 whitespace-pre-wrap"

apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/TotpBlock.tsx

@@ -1,5 +1,7 @@
 import  * as OTPAuth from 'otpauth';
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { sendMessage } from 'webext-bridge/popup';
 
 import { useDb } from '@/entrypoints/popup/context/DbContext';
 
@@ -13,6 +15,7 @@ type TotpBlockProps = {
  * This component shows TOTP codes for a credential.
  */
 const TotpBlock: React.FC<TotpBlockProps> = ({ credentialId }) => {
+  const { t } = useTranslation();
   const [totpCodes, setTotpCodes] = useState<TotpCode[]>([]);
   const [loading, setLoading] = useState(true);
   const [currentCodes, setCurrentCodes] = useState<Record<string, string>>({});
@@ -66,6 +69,9 @@ const TotpBlock: React.FC<TotpBlockProps> = ({ credentialId }) => {
     try {
       await navigator.clipboard.writeText(code);
       setCopiedId(id);
+      
+      // Notify background script that clipboard was copied
+      await sendMessage('CLIPBOARD_COPIED', { value: code }, 'background');
 
       // Reset copied state after 2 seconds
       setTimeout(() => {
@@ -138,8 +144,8 @@ const TotpBlock: React.FC<TotpBlockProps> = ({ credentialId }) => {
   if (loading) {
     return (
       <div className="text-gray-500 dark:text-gray-400 mb-4">
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Two-factor authentication</h2>
-        Loading TOTP codes...
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('common.twoFactorAuthentication')}</h2>
+        {t('common.loadingTotpCodes')}
       </div>
     );
   }
@@ -151,7 +157,7 @@ const TotpBlock: React.FC<TotpBlockProps> = ({ credentialId }) => {
   return (
     <div className="mb-4">
       <div className="space-y-2">
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Two-factor authentication</h2>
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{t('common.twoFactorAuthentication')}</h2>
         <div className="grid grid-cols-1 gap-2">
           {totpCodes.map(totpCode => (
             <button
@@ -171,7 +177,7 @@ const TotpBlock: React.FC<TotpBlockProps> = ({ credentialId }) => {
                     </span>
                     <div className="text-xs">
                       {copiedId === totpCode.Id ? (
-                        <span className="text-green-600 dark:text-green-400">Copied!</span>
+                        <span className="text-green-600 dark:text-green-400">{t('common.copied')}</span>
                       ) : (
                         <span className="text-gray-500 dark:text-gray-400">{getRemainingSeconds()}s</span>
                       )}

apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/index.tsx

@@ -1,4 +1,5 @@
 import AliasBlock from './AliasBlock';
+import AttachmentBlock from './AttachmentBlock';
 import EmailBlock from './EmailBlock';
 import HeaderBlock from './HeaderBlock';
 import LoginCredentialsBlock from './LoginCredentialsBlock';
@@ -11,5 +12,6 @@ export {
   TotpBlock,
   LoginCredentialsBlock,
   AliasBlock,
-  NotesBlock
+  NotesBlock,
+  AttachmentBlock
 };

apps/browser-extension/src/entrypoints/popup/components/EmailDomainField.tsx

@@ -0,0 +1,286 @@
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useDb } from '@/entrypoints/popup/context/DbContext';
+
+type EmailDomainFieldProps = {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  error?: string;
+  required?: boolean;
+}
+
+// Hardcoded public email domains (same as in AliasVault.Client)
+const PUBLIC_EMAIL_DOMAINS = [
+  'spamok.com',
+  'solarflarecorp.com',
+  'spamok.nl',
+  '3060.nl',
+  'landmail.nl',
+  'asdasd.nl',
+  'spamok.de',
+  'spamok.com.ua',
+  'spamok.es',
+  'spamok.fr',
+];
+
+/**
+ * Email domain field component with domain chooser functionality.
+ * Allows users to select from private/public domains or enter custom email addresses.
+ */
+const EmailDomainField: React.FC<EmailDomainFieldProps> = ({
+  id,
+  label,
+  value,
+  onChange,
+  error,
+  required = false
+}) => {
+  const { t } = useTranslation();
+  const dbContext = useDb();
+  const [isCustomDomain, setIsCustomDomain] = useState(false);
+  const [localPart, setLocalPart] = useState('');
+  const [selectedDomain, setSelectedDomain] = useState('');
+  const [isPopupVisible, setIsPopupVisible] = useState(false);
+  const [privateEmailDomains, setPrivateEmailDomains] = useState<string[]>([]);
+  const popupRef = useRef<HTMLDivElement>(null);
+
+  // Get private email domains from vault metadata
+  useEffect(() => {
+    /**
+     * Load private email domains from vault metadata.
+     */
+    const loadDomains = async (): Promise<void> => {
+      const metadata = await dbContext.getVaultMetadata();
+      if (metadata?.privateEmailDomains) {
+        setPrivateEmailDomains(metadata.privateEmailDomains);
+      }
+    };
+    loadDomains();
+  }, [dbContext]);
+
+  // Check if private domains are available and valid
+  const showPrivateDomains = useMemo(() => {
+    return privateEmailDomains.length > 0 &&
+           !(privateEmailDomains.length === 1 && (privateEmailDomains[0] === 'DISABLED.TLD' || privateEmailDomains[0] === ''));
+  }, [privateEmailDomains]);
+
+  // Initialize state from value prop
+  useEffect(() => {
+    if (!value) {
+      // Set default domain
+      if (showPrivateDomains && privateEmailDomains[0]) {
+        setSelectedDomain(privateEmailDomains[0]);
+      } else if (PUBLIC_EMAIL_DOMAINS[0]) {
+        setSelectedDomain(PUBLIC_EMAIL_DOMAINS[0]);
+      }
+      return;
+    }
+
+    if (value.includes('@')) {
+      const [local, domain] = value.split('@');
+      setLocalPart(local);
+      setSelectedDomain(domain);
+
+      // Check if it's a custom domain
+      const isKnownDomain = PUBLIC_EMAIL_DOMAINS.includes(domain) ||
+                           privateEmailDomains.includes(domain);
+      setIsCustomDomain(!isKnownDomain);
+    } else {
+      setLocalPart(value);
+      setIsCustomDomain(false);
+
+      // Set default domain if not already set
+      if (!selectedDomain && !value.includes('@')) {
+        if (showPrivateDomains && privateEmailDomains[0]) {
+          setSelectedDomain(privateEmailDomains[0]);
+        } else if (PUBLIC_EMAIL_DOMAINS[0]) {
+          setSelectedDomain(PUBLIC_EMAIL_DOMAINS[0]);
+        }
+      }
+    }
+  }, [value, privateEmailDomains, showPrivateDomains, selectedDomain]);
+
+  // Handle local part changes
+  const handleLocalPartChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const newLocalPart = e.target.value;
+
+    // Check if new value contains '@' symbol, if so, switch to custom domain mode
+    if (newLocalPart.includes('@')) {
+      setIsCustomDomain(true);
+      onChange(newLocalPart);
+      return;
+    }
+
+    setLocalPart(newLocalPart);
+    if (!isCustomDomain && selectedDomain) {
+      onChange(`${newLocalPart}@${selectedDomain}`);
+    } else {
+      onChange(newLocalPart);
+    }
+  }, [isCustomDomain, selectedDomain, onChange]);
+
+  // Select a domain from the popup
+  const selectDomain = useCallback((domain: string) => {
+    setSelectedDomain(domain);
+    const cleanLocalPart = localPart.includes('@') ? localPart.split('@')[0] : localPart;
+    onChange(`${cleanLocalPart}@${domain}`);
+    setIsCustomDomain(false);
+    setIsPopupVisible(false);
+  }, [localPart, onChange]);
+
+  // Toggle between custom domain and domain chooser
+  const toggleCustomDomain = useCallback(() => {
+    const newIsCustom = !isCustomDomain;
+    setIsCustomDomain(newIsCustom);
+
+    if (!newIsCustom && !value.includes('@')) {
+      // Switching to domain chooser mode, add default domain
+      const defaultDomain = showPrivateDomains && privateEmailDomains[0]
+        ? privateEmailDomains[0]
+        : PUBLIC_EMAIL_DOMAINS[0];
+      onChange(`${localPart}@${defaultDomain}`);
+      setSelectedDomain(defaultDomain);
+    }
+  }, [isCustomDomain, value, localPart, showPrivateDomains, privateEmailDomains, onChange]);
+
+  // Handle clicks outside the popup
+  useEffect(() => {
+    /**
+     * Handle clicks outside the popup to close it.
+     */
+    const handleClickOutside = (event: MouseEvent): void => {
+      if (popupRef.current && !popupRef.current.contains(event.target as Node)) {
+        setIsPopupVisible(false);
+      }
+    };
+
+    if (isPopupVisible) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return (): void => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [isPopupVisible]);
+
+  return (
+    <div className="space-y-2">
+      <label htmlFor={id} className="block font-medium text-gray-700 dark:text-gray-300">
+        {label}
+        {required && <span className="text-red-500 ml-1">*</span>}
+      </label>
+
+      <div className="relative w-full">
+        <div className="flex w-full">
+          <input
+            type="text"
+            id={id}
+            className={`flex-1 min-w-0 px-3 py-2 border text-sm ${
+              error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
+            } ${
+              !isCustomDomain ? 'rounded-l-md' : 'rounded-md'
+            } focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white`}
+            value={isCustomDomain ? value : localPart}
+            onChange={handleLocalPartChange}
+            placeholder={isCustomDomain ? t('credentials.enterFullEmail') : t('credentials.enterEmailPrefix')}
+          />
+
+          {!isCustomDomain && (
+            <button
+              type="button"
+              onClick={() => setIsPopupVisible(!isPopupVisible)}
+              className="inline-flex items-center px-2 py-2 border border-l-0 border-gray-300 dark:border-gray-600 rounded-r-md bg-gray-50 dark:bg-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-500 cursor-pointer text-sm truncate max-w-[120px]"
+            >
+              <span className="text-gray-500 dark:text-gray-400">@</span>
+              <span className="truncate ml-0.5">{selectedDomain}</span>
+            </button>
+          )}
+        </div>
+
+        {/* Domain selection popup */}
+        {isPopupVisible && !isCustomDomain && (
+          <div
+            ref={popupRef}
+            className="absolute z-50 mt-2 w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 max-h-96 overflow-y-auto"
+          >
+            <div className="p-4">
+              {showPrivateDomains && (
+                <div className="mb-4">
+                  <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                    {t('credentials.privateEmailTitle')} <span className="text-gray-500 dark:text-gray-400">({t('credentials.privateEmailAliasVaultServer')})</span>
+                  </h4>
+                  <p className="text-gray-500 dark:text-gray-400 mb-3">
+                    {t('credentials.privateEmailDescription')}
+                  </p>
+                  <div className="flex flex-wrap gap-2">
+                    {privateEmailDomains.map((domain) => (
+                      <button
+                        key={domain}
+                        type="button"
+                        onClick={() => selectDomain(domain)}
+                        className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
+                          selectedDomain === domain
+                            ? 'bg-primary-600 text-white hover:bg-primary-700'
+                            : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600'
+                        }`}
+                      >
+                        {domain}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              <div className={showPrivateDomains ? 'border-t border-gray-200 dark:border-gray-600 pt-4' : ''}>
+                <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                  {t('credentials.publicEmailTitle')}
+                </h4>
+                <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
+                  {t('credentials.publicEmailDescription')}
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  {PUBLIC_EMAIL_DOMAINS.map((domain) => (
+                    <button
+                      key={domain}
+                      type="button"
+                      onClick={() => selectDomain(domain)}
+                      className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
+                        selectedDomain === domain
+                          ? 'bg-primary-600 text-white hover:bg-primary-700'
+                          : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600'
+                      }`}
+                    >
+                      {domain}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Toggle custom domain button */}
+      <div>
+        <button
+          type="button"
+          onClick={toggleCustomDomain}
+          className="text-sm text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300"
+        >
+          {isCustomDomain
+            ? t('credentials.useDomainChooser')
+            : t('credentials.enterCustomDomain')}
+        </button>
+      </div>
+
+      {/* Error message */}
+      {error && (
+        <p className="text-sm text-red-500 mt-1">{error}</p>
+      )}
+    </div>
+  );
+};
+
+export default EmailDomainField;

apps/browser-extension/src/entrypoints/popup/components/EmailPreview.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 import { useDb } from '@/entrypoints/popup/context/DbContext';
@@ -18,15 +19,38 @@ type EmailPreviewProps = {
  * This component shows a preview of the latest emails in the inbox.
  */
 export const EmailPreview: React.FC<EmailPreviewProps> = ({ email }) => {
+  const { t } = useTranslation();
   const [emails, setEmails] = useState<MailboxEmail[]>([]);
+  const [displayedEmails, setDisplayedEmails] = useState<MailboxEmail[]>([]);
   const [loading, setLoading] = useState(true);
   const [lastEmailId, setLastEmailId] = useState<number>(0);
   const [isSpamOk, setIsSpamOk] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [isSupportedDomain, setIsSupportedDomain] = useState(false);
+  const [displayedCount, setDisplayedCount] = useState(2);
   const webApi = useWebApi();
   const dbContext = useDb();
 
+  const emailsPerLoad = 3;
+  const canLoadMore = displayedCount < emails.length;
+
+  /**
+   * Updates the displayed emails based on the current count.
+   */
+  const updateDisplayedEmails = (allEmails: MailboxEmail[], count: number) : void => {
+    const displayed = allEmails.slice(0, count);
+    setDisplayedEmails(displayed);
+  };
+
+  /**
+   * Loads more emails.
+   */
+  const loadMoreEmails = (): void => {
+    const newCount = Math.min(displayedCount + emailsPerLoad, emails.length);
+    setDisplayedCount(newCount);
+    updateDisplayedEmails(emails, newCount);
+  };
+
   /**
    * Checks if the email is a public domain.
    */
@@ -74,23 +98,30 @@ export const EmailPreview: React.FC<EmailPreviewProps> = ({ email }) => {
           });
 
           if (!response.ok) {
-            setError('An error occurred while loading emails. Please try again later.');
+            setError(t('emails.errors.emailLoadError'));
             return;
           }
 
           const data = await response.json();
 
-          // Only show the latest 2 emails to save space in UI
-          const latestMails = data?.mails
+          // Store all emails, sorted by date
+          const allMails = data?.mails
             ?.toSorted((a: MailboxEmail, b: MailboxEmail) =>
-              new Date(b.dateSystem).getTime() - new Date(a.dateSystem).getTime())
-            ?.slice(0, 2) ?? [];
+              new Date(b.dateSystem).getTime() - new Date(a.dateSystem).getTime()) ?? [];
 
-          if (loading && latestMails.length > 0) {
-            setLastEmailId(latestMails[0].id);
+          if (loading && allMails.length > 0) {
+            setLastEmailId(allMails[0].id);
           }
 
-          setEmails(latestMails);
+          // Only update emails if they actually changed to preserve displayedCount
+          setEmails(prevEmails => {
+            const emailsChanged = JSON.stringify(prevEmails.map(e => e.id)) !== JSON.stringify(allMails.map(e => e.id));
+            if (emailsChanged) {
+              updateDisplayedEmails(allMails, displayedCount);
+              return allMails;
+            }
+            return prevEmails;
+          });
         } else if (isPrivate) {
           // For private domains, use existing encrypted email logic
           try {
@@ -102,15 +133,14 @@ export const EmailPreview: React.FC<EmailPreviewProps> = ({ email }) => {
             try {
               const data = response as { mails: MailboxEmail[] };
 
-              // Only show the latest 2 emails to save space in UI
-              const latestMails = data.mails
-                .toSorted((a, b) => new Date(b.dateSystem).getTime() - new Date(a.dateSystem).getTime())
-                .slice(0, 2);
+              // Store all emails, sorted by date
+              const allMails = data.mails
+                .toSorted((a, b) => new Date(b.dateSystem).getTime() - new Date(a.dateSystem).getTime());
 
-              if (latestMails) {
+              if (allMails) {
                 // Loop through all emails and decrypt them locally
                 const decryptedEmails: MailboxEmail[] = await EncryptionUtility.decryptEmailList(
-                  latestMails,
+                  allMails,
                   dbContext.sqliteClient!.getAllEncryptionKeys()
                 );
 
@@ -118,30 +148,30 @@ export const EmailPreview: React.FC<EmailPreviewProps> = ({ email }) => {
                   setLastEmailId(decryptedEmails[0].id);
                 }
 
-                setEmails(decryptedEmails);
+                // Only update emails if they actually changed to preserve displayedCount
+                setEmails(prevEmails => {
+                  const emailsChanged = JSON.stringify(prevEmails.map(e => e.id)) !== JSON.stringify(decryptedEmails.map(e => e.id));
+                  if (emailsChanged) {
+                    updateDisplayedEmails(decryptedEmails, displayedCount);
+                    return decryptedEmails;
+                  }
+                  return prevEmails;
+                });
               }
             } catch {
               // Try to parse as error response instead
               const apiErrorResponse = response as ApiErrorResponse;
-
-              if (apiErrorResponse?.code === 'CLAIM_DOES_NOT_MATCH_USER') {
-                setError('The current chosen email address is already in use. Please change the email address by editing this credential.');
-              } else if (apiErrorResponse?.code === 'CLAIM_DOES_NOT_EXIST') {
-                setError('An error occurred while trying to load the emails. Please try to edit and save the credential entry to synchronize the database, then try again.');
-              } else {
-                setError('An error occurred while loading emails. Please try again later.');
-              }
-
+              setError(t('emails.apiErrors.' + apiErrorResponse?.code));
               return;
             }
           } catch {
-            setError('An error occurred while loading emails. Please try again later.');
+            setError(t('emails.errors.emailLoadError'));
             return;
           }
         }
       } catch (err) {
         console.error('Error loading emails:', err);
-        setError('An unexpected error occurred while loading emails. Please try again later.');
+        setError(t('emails.errors.emailUnexpectedError'));
       }
       setLoading(false);
     };
@@ -150,7 +180,7 @@ export const EmailPreview: React.FC<EmailPreviewProps> = ({ email }) => {
     // Set up auto-refresh interval
     const interval = setInterval(loadEmails, 2000);
     return () : void => clearInterval(interval);
-  }, [email, loading, webApi, dbContext]);
+  }, [email, loading, webApi, dbContext, t, displayedCount]);
 
   // Don't render anything if the domain is not supported
   if (!isSupportedDomain) {
@@ -161,7 +191,7 @@ export const EmailPreview: React.FC<EmailPreviewProps> = ({ email }) => {
     return (
       <div className="text-gray-500 dark:text-gray-400 mb-4">
         <div className="flex items-center gap-2 mb-2">
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Recent emails</h2>
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">{t('common.recentEmails')}</h2>
         </div>
         <div className="p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded">
           <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
@@ -174,21 +204,21 @@ export const EmailPreview: React.FC<EmailPreviewProps> = ({ email }) => {
     return (
       <div className="text-gray-500 dark:text-gray-400 mb-4">
         <div className="flex items-center gap-2 mb-2">
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Recent emails</h2>
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">{t('common.recentEmails')}</h2>
           <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
         </div>
-        Loading emails...
+        {t('common.loadingEmails')}
       </div>
     );
   }
   if (emails.length === 0) {
     return (
-      <div className="text-gray-500 dark:text-gray-400 mb-4">
+      <div className="text-gray-500 dark:text-gray-400 mb-4 text-sm">
         <div className="flex items-center gap-2 mb-2">
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Recent emails</h2>
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">{t('common.recentEmails')}</h2>
           <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
         </div>
-        No emails received yet.
+        {t('emails.noEmails')}
       </div>
     );
   }
@@ -196,11 +226,11 @@ export const EmailPreview: React.FC<EmailPreviewProps> = ({ email }) => {
   return (
     <div className="space-y-2 mb-4">
       <div className="flex items-center gap-2 mb-2">
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Recent emails</h2>
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white">{t('common.recentEmails')}</h2>
         <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
       </div>
 
-      {emails.map((mail) => (
+      {displayedEmails.map((mail) => (
         isSpamOk ? (
           <a
             key={mail.id}
@@ -239,6 +269,18 @@ export const EmailPreview: React.FC<EmailPreviewProps> = ({ email }) => {
           </Link>
         )
       ))}
+
+      {canLoadMore && (
+        <button
+          onClick={loadMoreEmails}
+          className="w-full mt-2 py-1 px-3 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-md transition-colors duration-200 text-sm text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 flex items-center justify-center gap-1"
+        >
+          <span>{t('common.loadMore')}</span>
+          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+      )}
     </div>
   );
 };

apps/browser-extension/src/entrypoints/popup/components/FormInput.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 /**
  * Button configuration for form input.
@@ -36,6 +37,13 @@ const Icon: React.FC<{ name: string }> = ({ name }) => {
           <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
         </>
       );
+    case 'settings':
+      return (
+        <>
+          <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+          <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+        </>
+      );
     default:
       return null;
   }
@@ -78,6 +86,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(({
   showPassword: controlledShowPassword,
   onShowPasswordChange
 }, ref) => {
+  const { t } = useTranslation();
   const [internalShowPassword, setInternalShowPassword] = React.useState(false);
 
   /**
@@ -100,8 +109,8 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(({
     }
   };
 
-  const inputClasses = `mt-1 block w-full rounded-md ${
-    error ? 'border-red-500' : 'border-gray-300 dark:border-gray-700'
+  const inputClasses = `mt-1 block text-sm w-full rounded-md ${
+    error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
   } text-gray-900 sm:text-sm rounded-lg shadow-sm border focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 py-2 px-3`;
 
   // Add password visibility button if type is password
@@ -112,7 +121,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(({
        * Toggle password visibility.
        */
       onClick: (): void => setShowPassword(!showPassword),
-      title: showPassword ? 'Hide password' : 'Show password'
+      title: showPassword ? t('common.hidePassword') : t('common.showPassword')
     }]
     : buttons;
 

apps/browser-extension/src/entrypoints/popup/components/FormInputCopyToClipboard.tsx

@@ -1,4 +1,6 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { sendMessage } from 'webext-bridge/popup';
 
 import { ClipboardCopyService } from '@/entrypoints/popup/utils/ClipboardCopyService';
 
@@ -60,6 +62,7 @@ export const FormInputCopyToClipboard: React.FC<FormInputCopyToClipboardProps> =
   value,
   type = 'text'
 }) => {
+  const { t } = useTranslation();
   const [showPassword, setShowPassword] = useState(false);
   const [copied, setCopied] = useState(false);
 
@@ -80,6 +83,9 @@ export const FormInputCopyToClipboard: React.FC<FormInputCopyToClipboardProps> =
       await navigator.clipboard.writeText(value);
       clipboardService.setCopied(id);
 
+      // Notify background script that clipboard was copied
+      await sendMessage('CLIPBOARD_COPIED', { value }, 'background');
+
       // Reset copied state after 2 seconds
       setTimeout(() => {
         if (clipboardService.getCopiedId() === id) {
@@ -105,14 +111,14 @@ export const FormInputCopyToClipboard: React.FC<FormInputCopyToClipboardProps> =
           onClick={copyToClipboard}
           className={`w-full px-3 py-2.5 bg-white border ${
             copied ? 'border-green-500 border-2' : 'border-gray-300'
-          } text-gray-900 sm:text-sm rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400`}
+          } text-gray-900 text-sm rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400`}
         />
         <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-2">
           {copied ? (
             <button
               type="button"
               className="p-1 text-green-500 dark:text-green-400 transition-colors duration-200"
-              title="Copied!"
+              title={t('common.copied')}
             >
               <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                 <Icon name="check" />
@@ -123,7 +129,7 @@ export const FormInputCopyToClipboard: React.FC<FormInputCopyToClipboardProps> =
               type="button"
               onClick={copyToClipboard}
               className="p-1 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors duration-200"
-              title="Copy to clipboard"
+              title={t('common.copyToClipboard')}
             >
               <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                 <Icon name="copy" />
@@ -135,7 +141,7 @@ export const FormInputCopyToClipboard: React.FC<FormInputCopyToClipboardProps> =
               type="button"
               onClick={() => setShowPassword(!showPassword)}
               className="p-1 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors duration-200"
-              title={showPassword ? 'Hide password' : 'Show password'}
+              title={showPassword ? t('common.hidePassword') : t('common.showPassword')}
             >
               <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                 <Icon name={showPassword ? 'visibility-off' : 'visibility'} />

apps/browser-extension/src/entrypoints/popup/components/GlobalStateChangeHandler.tsx

@@ -1,41 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { useAuth } from '@/entrypoints/popup/context/AuthContext';
-
-/**
- * Global state change handler component which listens for global state changes and e.g. redirects user to login
- * page if login state changes.
- */
-const GlobalStateChangeHandler: React.FC = () => {
-  const authContext = useAuth();
-  const navigate = useNavigate();
-  const lastLoginState = useRef(authContext.isLoggedIn);
-  const initialRender = useRef(true);
-
-  /**
-   * Listen for auth logged in changes and redirect to home page if logged in state changes to handle logins and logouts.
-   */
-  useEffect(() => {
-    // Only navigate when auth state is different from the last state we acted on.
-    if (lastLoginState.current !== authContext.isLoggedIn) {
-      lastLoginState.current = authContext.isLoggedIn;
-
-      /**
-       * Skip the first auth state change to avoid redirecting when popup opens for the first time
-       * which already causes the auth state to change from false to true.
-       */
-      if (initialRender.current) {
-        initialRender.current = false;
-        return;
-      }
-
-      // Redirect to home page if logged in state changes.
-      navigate('/');
-    }
-  }, [authContext.isLoggedIn]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  return null;
-};
-
-export default GlobalStateChangeHandler;

apps/browser-extension/src/entrypoints/popup/components/HelpModal.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type HelpModalProps = {
+  titleKey: string;
+  contentKey: string;
+  className?: string;
+}
+
+/**
+ * Reusable help modal component with a question mark icon button.
+ * Shows a modal popup with help information when clicked.
+ */
+const HelpModal: React.FC<HelpModalProps> = ({ titleKey, contentKey, className = '' }) => {
+  const { t } = useTranslation();
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <>
+      <button
+        onClick={() => setShowModal(true)}
+        className={`${className}`}
+        type="button"
+        aria-label="Help"
+      >
+        <svg
+          className="w-4 h-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-help"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </button>
+
+      {showModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-sm w-full">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                {t(titleKey)}
+              </h3>
+              <button
+                onClick={() => setShowModal(false)}
+                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                aria-label={t('common.close')}
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            </div>
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              {t(contentKey)}
+            </p>
+            <button
+              onClick={() => setShowModal(false)}
+              className="mt-4 w-full px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-md transition-colors"
+            >
+              {t('common.close')}
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default HelpModal;

apps/browser-extension/src/entrypoints/popup/components/Icons/HeaderIcons.tsx

@@ -8,7 +8,10 @@ export enum HeaderIconType {
   RELOAD = 'reload',
   EXTERNAL_LINK = 'external_link',
   SAVE = 'save',
-  PLUS = 'plus'
+  PLUS = 'plus',
+  TAB = 'tab',
+  EYE = 'eye',
+  EYE_OFF = 'eye_off'
 }
 
 type HeaderIconProps = {
@@ -130,19 +133,7 @@ export const HeaderIcon: React.FC<HeaderIconProps> = ({ type, className = 'w-5 h
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={2}
-          d="M17 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V7l-4-4z"
-        />
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M7 3v5h10"
-        />
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M12 12a2 2 0 100 4 2 2 0 000-4z"
+          d="M5 13l4 4L19 7"
         />
       </svg>
     ),
@@ -156,6 +147,66 @@ export const HeaderIcon: React.FC<HeaderIconProps> = ({ type, className = 'w-5 h
       >
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
       </svg>
+    ),
+    [HeaderIconType.TAB]: (
+      <svg
+        className={className}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z"
+        />
+      </svg>
+    ),
+    [HeaderIconType.EYE]: (
+      <svg
+        className={className}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+        />
+      </svg>
+    ),
+    [HeaderIconType.EYE_OFF]: (
+      <svg
+        className={className}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+        />
+      </svg>
     )
   };
 

apps/browser-extension/src/entrypoints/popup/components/LanguageSwitcher.tsx

@@ -0,0 +1,131 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { AVAILABLE_LANGUAGES, getLanguageConfig, ILanguageConfig } from '../../../i18n/config';
+
+import { storage } from '#imports';
+
+type LanguageSwitcherProps = {
+  variant?: 'dropdown' | 'buttons';
+  size?: 'sm' | 'md';
+};
+
+/**
+ * Language switcher component that allows users to switch between supported languages
+ * @param props - Component props including variant and size
+ * @returns JSX element for the language switcher
+ */
+const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
+  variant = 'dropdown',
+  size = 'md'
+}): React.JSX.Element => {
+  const { i18n } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const currentLanguage = getLanguageConfig(i18n.language) || AVAILABLE_LANGUAGES[0];
+
+  // Close dropdown when clicking outside
+  useEffect((): (() => void) => {
+    /**
+     * Handle clicks outside the dropdown to close it
+     * @param event - Mouse event
+     */
+    const handleClickOutside = (event: MouseEvent): void => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  /**
+   * Change the application language
+   * @param lng - Language code to switch to
+   */
+  const changeLanguage = async (lng: string): Promise<void> => {
+    await i18n.changeLanguage(lng);
+    await storage.setItem('local:language', lng);
+
+    setIsOpen(false);
+
+    // Force immediate re-render by dispatching the event that react-i18next listens to
+    i18n.emit('languageChanged', lng);
+  };
+
+  if (variant === 'buttons') {
+    return (
+      <div className="flex space-x-2">
+        {AVAILABLE_LANGUAGES.map((lang: ILanguageConfig) => (
+          <button
+            key={lang.code}
+            onClick={() => changeLanguage(lang.code)}
+            className={`flex items-center space-x-1 px-2 py-1 text-xs rounded transition-colors ${
+              i18n.language === lang.code
+                ? 'bg-primary-500 text-white'
+                : 'bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-500'
+            }`}
+            title={lang.nativeName}
+          >
+            <span className="text-sm">{lang.flag}</span>
+            <span>{lang.code.toUpperCase()}</span>
+          </button>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`w-full flex items-center justify-between px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors ${
+          size === 'sm' ? 'text-sm' : 'text-base'
+        }`}
+      >
+        <div className="flex items-center space-x-2">
+          <span className="text-lg">{currentLanguage.flag}</span>
+          <span>{currentLanguage.nativeName}</span>
+        </div>
+        <svg
+          className={`w-4 h-4 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full left-0 mt-1 w-full bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg z-50">
+          {AVAILABLE_LANGUAGES.map((lang: ILanguageConfig) => (
+            <button
+              key={lang.code}
+              onClick={() => changeLanguage(lang.code)}
+              className={`w-full flex items-center justify-between px-3 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors first:rounded-t-lg last:rounded-b-lg ${
+                size === 'sm' ? 'text-sm' : 'text-base'
+              }`}
+            >
+              <div className="flex items-center space-x-2">
+                <span className="text-lg">{lang.flag}</span>
+                <span className="text-gray-700 dark:text-gray-200">{lang.nativeName}</span>
+              </div>
+              {i18n.language === lang.code && (
+                <svg className="w-4 h-4 text-primary-500" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="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" clipRule="evenodd" />
+                </svg>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LanguageSwitcher;

apps/browser-extension/src/entrypoints/popup/components/Layout/BottomNav.tsx

@@ -1,17 +1,14 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useNavigate, useLocation } from 'react-router-dom';
 
-import { useAuth } from '@/entrypoints/popup/context/AuthContext';
-import { useDb } from '@/entrypoints/popup/context/DbContext';
-
 type TabName = 'credentials' | 'emails' | 'settings';
 
 /**
  * Bottom nav component.
  */
 const BottomNav: React.FC = () => {
-  const authContext = useAuth();
-  const dbContext = useDb();
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const location = useLocation();
   const [currentTab, setCurrentTab] = useState<TabName>('credentials');
@@ -36,7 +33,11 @@ const BottomNav: React.FC = () => {
     navigate(`/${tab}`);
   };
 
-  if (!authContext.isLoggedIn || !dbContext.dbAvailable) {
+  // Auth pages that don't show bottom navigation but still show header
+  const authPages = ['/login', '/auth-settings', '/unlock', '/unlock-success', '/upgrade'];
+  const isAuthPage = authPages.includes(location.pathname);
+
+  if (isAuthPage) {
     return null;
   }
 
@@ -61,7 +62,7 @@ const BottomNav: React.FC = () => {
           <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
           </svg>
-          <span className="text-xs mt-1">Credentials</span>
+          <span className="text-sm mt-1">{t('menu.credentials')}</span>
         </button>
         <button
           onClick={() => handleTabChange('emails')}
@@ -72,7 +73,7 @@ const BottomNav: React.FC = () => {
           <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
           </svg>
-          <span className="text-xs mt-1">Emails</span>
+          <span className="text-sm mt-1">{t('menu.emails')}</span>
         </button>
         <button
           onClick={() => handleTabChange('settings')}
@@ -84,7 +85,7 @@ const BottomNav: React.FC = () => {
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
           </svg>
-          <span className="text-xs mt-1">Settings</span>
+          <span className="text-sm mt-1">{t('menu.settings')}</span>
         </button>
       </div>
     </div>

apps/browser-extension/src/entrypoints/popup/components/Layout/Header.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useNavigate, useLocation } from 'react-router-dom';
 
+import Logo from '@/entrypoints/popup/components/Logo';
 import { useAuth } from '@/entrypoints/popup/context/AuthContext';
 
 /**
@@ -22,6 +24,7 @@ const Header: React.FC<HeaderProps> = ({
   routes = [],
   rightButtons
 }) => {
+  const { t } = useTranslation();
   const authContext = useAuth();
   const navigate = useNavigate();
   const location = useLocation();
@@ -45,6 +48,11 @@ const Header: React.FC<HeaderProps> = ({
    * Handle logo click.
    */
   const logoClick = () : void => {
+    // Don't navigate if on upgrade page or login page
+    if (location.pathname === '/upgrade' || location.pathname === '/login' || location.pathname === '/unlock') {
+      return;
+    }
+
     // If logged in, navigate to credentials.
     if (authContext.isLoggedIn) {
       navigate('/credentials');
@@ -80,11 +88,15 @@ const Header: React.FC<HeaderProps> = ({
               onClick={() => logoClick()}
               className="flex items-center hover:opacity-80 transition-opacity"
             >
-              <img src="/assets/images/logo.svg" alt="AliasVault" className="h-8 w-8 mr-2" />
-              <h1 className="text-gray-900 dark:text-white text-xl font-bold">AliasVault</h1>
+              <Logo
+                width={125}
+                height={40}
+                showText={true}
+                className="text-gray-900 dark:text-white"
+              />
               {/* Hide beta badge on Safari as it's not allowed to show non-production badges */}
               {!import.meta.env.SAFARI && (
-                <span className="text-primary-500 text-[10px] ml-1 font-normal">BETA</span>
+                <span className="text-primary-500 text-[10px] font-normal">BETA</span>
               )}
             </button>
           </div>
@@ -94,16 +106,19 @@ const Header: React.FC<HeaderProps> = ({
 
         <div className="flex items-center gap-2">
           {!authContext.isLoggedIn ? (
-            <button
-              id="settings"
-              onClick={(handleSettings)}
-              className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
-            >
-              <span className="sr-only">Settings</span>
-              <svg className="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                <path fillRule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd" />
-              </svg>
-            </button>
+            <>
+              {rightButtons}
+              <button
+                id="settings"
+                onClick={(handleSettings)}
+                className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
+              >
+                <span className="sr-only">{t('common.settings')}</span>
+                <svg className="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                  <path fillRule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd" />
+                </svg>
+              </button>
+            </>
           ) : (
             rightButtons
           )}

apps/browser-extension/src/entrypoints/popup/components/Layout/UserMenu.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { useAuth } from '@/entrypoints/popup/context/AuthContext';
-
-/**
- * User menu component.
- */
-const UserMenu: React.FC = () => {
-  const authContext = useAuth();
-  const navigate = useNavigate();
-
-  /**
-   * Handle logout.
-   */
-  const handleLogout = async () : Promise<void> => {
-    await authContext.logout();
-    navigate('/');
-  };
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
-        <div className="flex items-center space-x-3">
-          <div className="flex-shrink-0">
-            <div className="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
-              <span className="text-primary-600 dark:text-primary-400 text-lg font-medium">
-                {authContext.username?.[0]?.toUpperCase() || '?'}
-              </span>
-            </div>
-          </div>
-          <div>
-            <p className="text-sm font-medium text-gray-900 dark:text-white">
-              {authContext.username}
-            </p>
-            <p className="text-xs text-gray-500 dark:text-gray-400">
-              Logged in
-            </p>
-          </div>
-        </div>
-        <button
-          onClick={handleLogout}
-          className="px-4 py-2 text-sm font-medium text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
-        >
-          Logout
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default UserMenu;

apps/browser-extension/src/entrypoints/popup/components/LoginServerInfo.tsx

@@ -1,30 +1,23 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
-import { AppInfo } from '@/utils/AppInfo';
-
-import { storage } from '#imports';
+import { useApiUrl } from '@/entrypoints/popup/utils/ApiUrlUtility';
 
 /**
  * Component for displaying the login server information.
  */
 const LoginServerInfo: React.FC = () => {
-  const [baseUrl, setBaseUrl] = useState<string>('');
+  const { loadApiUrl, getDisplayUrl } = useApiUrl();
   const navigate = useNavigate();
+  const { t } = useTranslation();
 
   useEffect(() => {
     /**
      * Loads the base URL for the login server.
      */
-    const loadApiUrl = async () : Promise<void> => {
-      const apiUrl = await storage.getItem('local:apiUrl') as string;
-      setBaseUrl(apiUrl ?? AppInfo.DEFAULT_API_URL);
-    };
     loadApiUrl();
-  }, []);
-
-  const isDefaultServer = !baseUrl || baseUrl === AppInfo.DEFAULT_API_URL;
-  const displayUrl = isDefaultServer ? 'aliasvault.net' : new URL(baseUrl).hostname;
+  }, [loadApiUrl]);
 
   /**
    * Handles the click event for the login server information.
@@ -34,14 +27,14 @@ const LoginServerInfo: React.FC = () => {
   };
 
   return (
-    <div className="text-xs text-gray-600 dark:text-gray-400 mb-4">
-      (Connecting to{' '}
+    <div className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+      ({t('auth.connectingTo')}{' '}
       <button
         onClick={handleClick}
         type="button"
         className="text-orange-500 hover:text-orange-600 dark:text-orange-400 dark:hover:text-orange-500 underline"
       >
-        {displayUrl}
+        {getDisplayUrl()}
       </button>)
     </div>
   );

apps/browser-extension/src/entrypoints/popup/components/Logo.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+type LogoProps = {
+  className?: string;
+  width?: number;
+  height?: number;
+  showText?: boolean;
+  color?: string;
+}
+
+/**
+ * Logo component.
+ */
+const Logo: React.FC<LogoProps> = ({
+  className = '',
+  width = 200,
+  height = 50,
+  showText = true,
+  color = 'currentColor'
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlSpace="preserve"
+      version="1.1"
+      viewBox="0 0 2000 500"
+      width={width}
+      height={height}
+      className={className}
+    >
+      {/* Logo mark */}
+      <path
+        d="m459.87 294.95c0.016205 5.4005 0.03241 10.801-0.35022 16.873-1.111 6.3392-1.1941 12.173-2.6351 17.649-10.922 41.508-36.731 69.481-77.351 83.408-7.2157 2.4739-14.972 3.3702-22.479 4.995-23.629 0.042205-47.257 0.11453-70.886 0.12027-46.762 0.011322-93.523-0.01416-140.95-0.43411-8.59-2.0024-16.766-2.8352-24.398-5.3326-21.595-7.0666-39.523-19.656-53.708-37.552-10.227-12.903-17.579-27.17-21.28-43.221-1.475-6.3967-2.4711-12.904-3.6852-19.361-0.051849-5.747-0.1037-11.494 0.26915-17.886 4.159-42.973 27.68-71.638 63.562-92.153 0-0.70761-0.001961-1.6988 3.12e-4 -2.69 0.022484-9.8293-1.3071-19.894 0.35664-29.438 3.2391-18.579 11.08-35.272 23.763-49.773 12.098-13.832 26.457-23.989 43.609-30.029 7.813-2.7512 16.14-4.0417 24.234-5.9948 7.392-0.025734 14.784-0.05146 22.835 0.32253 4.1959 0.95392 7.7946 1.2538 11.258 2.1053 17.16 4.2192 32.287 12.176 45.469 24.104 2.2558 2.0411 4.372 6.6241 9.621 3.868 16.839-8.8419 34.718-11.597 53.603-8.594 16.791 2.6699 31.602 9.4308 44.236 20.636 11.531 10.227 19.84 22.841 25.393 37.236 6.3436 16.445 10.389 33.163 6.0798 49.389 7.9587 8.9321 15.807 16.704 22.421 25.414 9.162 12.065 15.33 25.746 18.144 40.776 0.97046 5.1848 1.9111 10.375 2.8654 15.563m-71.597 71.012c5.5615-5.2284 12.002-9.7986 16.508-15.817 10.474-13.992 14.333-29.916 11.288-47.446-2.2496-12.95-8.1973-24.076-17.243-33.063-12.746-12.663-28.865-18.614-46.786-18.569-69.912 0.17712-139.82 0.56831-209.74 0.96176-15.922 0.089599-29.168 7.4209-39.685 18.296-14.45 14.944-20.408 33.343-16.655 54.368 2.2763 12.754 8.2167 23.748 17.158 32.66 13.299 13.255 30.097 18.653 48.728 18.651 59.321-0.005188 118.64 0.042358 177.96-0.046601 9.5912-0.014374 19.181-0.86588 28.773-0.88855 10.649-0.025146 19.978-3.825 29.687-9.1074z"
+        fill="#EEC170"
+      />
+      <path
+        d="m162.77 293c15.654 4.3883 20.627 22.967 10.304 34.98-5.3104 6.1795-14.817 8.3208-24.278 5.0472-7.0723-2.4471-12.332-10.362-12.876-17.933-1.0451-14.542 11.089-23.176 21.705-23.046 1.5794 0.019287 3.1517 0.61566 5.1461 0.95184z"
+        fill="#EEC170"
+      />
+      <path
+        d="m227.18 293.64c7.8499 2.3973 11.938 8.2143 13.524 15.077 1.8591 8.0439-0.44817 15.706-7.1588 21.121-6.7633 5.4572-14.417 6.8794-22.578 3.1483-8.2972-3.7933-12.836-10.849-12.736-19.438 0.1687-14.497 14.13-25.368 28.948-19.908z"
+        fill="#EEC170"
+      />
+      <path
+        d="m261.57 319.07c-2.495-14.418 4.6853-22.603 14.596-26.108 9.8945-3.4995 23.181 3.4303 26.267 13.779 4.6504 15.591-7.1651 29.064-21.665 28.161-8.5254-0.53088-17.202-6.5094-19.198-15.831z"
+        fill="#EEC170"
+      />
+      <path
+        d="m336.91 333.41c-9.0175-4.2491-15.337-14.349-13.829-21.682 3.0825-14.989 13.341-20.304 23.018-19.585 10.653 0.79141 17.93 7.407 19.765 17.547 1.9588 10.824-4.1171 19.939-13.494 23.703-5.272 2.1162-10.091 1.5086-15.46 0.017883z"
+        fill="#EEC170"
+      />
+
+      {/* Wordmark - only show if showText is true */}
+      {showText && (
+        <text
+          x="550"
+          y="355"
+          fontFamily="Arial, Helvetica, sans-serif"
+          fontWeight="700"
+          fontSize="290"
+          letterSpacing="-7"
+          fill={color}
+        >
+          AliasVault
+        </text>
+      )}
+    </svg>
+  );
+};
+
+export default Logo;

apps/browser-extension/src/entrypoints/popup/components/Modal.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 interface IModalProps {
   isOpen: boolean;
@@ -20,10 +21,11 @@ const Modal: React.FC<IModalProps> = ({
   onConfirm,
   title,
   message,
-  confirmText = 'Confirm',
-  cancelText = 'Cancel',
+  confirmText = '',
+  cancelText = '',
   variant = 'default'
 }) => {
+  const { t } = useTranslation();
   if (!isOpen) {
     return null;
   }
@@ -46,7 +48,7 @@ const Modal: React.FC<IModalProps> = ({
             className="absolute right-4 top-4 text-gray-400 hover:text-gray-500 focus:outline-none"
             onClick={onClose}
           >
-            <span className="sr-only">Close</span>
+            <span className="sr-only">{t('common.close')}</span>
             <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>
@@ -75,20 +77,24 @@ const Modal: React.FC<IModalProps> = ({
 
           {/* Actions */}
           <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-            <button
-              type="button"
-              className={`inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 sm:ml-3 sm:w-auto ${confirmButtonClass}`}
-              onClick={onConfirm}
-            >
-              {confirmText}
-            </button>
-            <button
-              type="button"
-              className="mt-3 inline-flex w-full justify-center rounded-md bg-white dark:bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-200 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:mt-0 sm:w-auto"
-              onClick={onClose}
-            >
-              {cancelText}
-            </button>
+            {confirmText && (
+              <button
+                type="button"
+                className={`inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 sm:ml-3 sm:w-auto ${confirmButtonClass}`}
+                onClick={onConfirm}
+              >
+                {confirmText}
+              </button>
+            )}
+            {cancelText && (
+              <button
+                type="button"
+                className="mt-3 inline-flex w-full justify-center rounded-md bg-white dark:bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-200 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:mt-0 sm:w-auto"
+                onClick={onClose}
+              >
+                {cancelText}
+              </button>
+            )}
           </div>
         </div>
       </div>

apps/browser-extension/src/entrypoints/popup/components/PasswordConfigDialog.tsx

@@ -0,0 +1,218 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { PasswordSettings } from '@/utils/dist/shared/models/vault';
+import { CreatePasswordGenerator } from '@/utils/dist/shared/password-generator';
+
+interface IPasswordConfigDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (password: string) => void;
+  onSettingsChange?: (settings: PasswordSettings) => void;
+  initialSettings: PasswordSettings;
+}
+
+/**
+ * Password configuration dialog component.
+ */
+const PasswordConfigDialog: React.FC<IPasswordConfigDialogProps> = ({
+  isOpen,
+  onClose,
+  onSave,
+  onSettingsChange,
+  initialSettings
+}) => {
+  const { t } = useTranslation();
+  const [settings, setSettings] = useState<PasswordSettings>(initialSettings);
+  const [previewPassword, setPreviewPassword] = useState<string>('');
+
+  const generatePreview = useCallback((currentSettings: PasswordSettings) => {
+    try {
+      const passwordGenerator = CreatePasswordGenerator(currentSettings);
+      const password = passwordGenerator.generateRandomPassword();
+      setPreviewPassword(password);
+    } catch (error) {
+      console.error('Error generating preview password:', error);
+      setPreviewPassword('');
+    }
+  }, []);
+
+  // Initialize settings when dialog opens
+  useEffect(() => {
+    if (isOpen) {
+      setSettings({ ...initialSettings });
+      generatePreview({ ...initialSettings });
+    }
+  }, [isOpen, initialSettings, generatePreview]);
+
+  const handleSettingChange = useCallback((key: keyof PasswordSettings, value: boolean | number) => {
+    const newSettings = { ...settings, [key]: value };
+    setSettings(newSettings);
+    generatePreview(newSettings);
+    onSettingsChange?.(newSettings);
+  }, [settings, generatePreview, onSettingsChange]);
+
+  const handleRefreshPreview = useCallback(() => {
+    generatePreview(settings);
+  }, [settings, generatePreview]);
+
+  const handleSave = useCallback(() => {
+    onSave(previewPassword);
+    onClose();
+  }, [previewPassword, onSave, onClose]);
+
+  const handleCancel = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 overflow-y-auto">
+      {/* Backdrop */}
+      <div className="fixed inset-0 bg-black bg-opacity-60 transition-opacity" onClick={handleCancel} />
+
+      {/* Modal */}
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <div className="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all w-full max-w-lg">
+          {/* Close button */}
+          <button
+            type="button"
+            className="absolute right-4 top-4 text-gray-400 hover:text-gray-500 focus:outline-none"
+            onClick={handleCancel}
+          >
+            <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+
+          {/* Modal content */}
+          <div className="sm:flex sm:items-start">
+            <div className="w-full mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+              <h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-white mb-4">
+                {t('credentials.changePasswordComplexity')}
+              </h3>
+
+              <div className="space-y-4">
+                {/* Password Preview */}
+                <div className="mt-4">
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="text"
+                      value={previewPassword}
+                      readOnly
+                      className="flex-1 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white font-mono"
+                    />
+                    <button
+                      type="button"
+                      onClick={handleRefreshPreview}
+                      className="px-3 py-2 text-sm text-gray-500 dark:text-white bg-gray-200 hover:bg-gray-300 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800"
+                      title={t('credentials.generateNewPreview')}
+                    >
+                      <svg className="w-4 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+
+                {/* Character Type Toggle Buttons */}
+                <div className="space-y-3">
+                  <div className="grid grid-cols-2 gap-2">
+                    {/* Lowercase Toggle */}
+                    <button
+                      type="button"
+                      onClick={() => handleSettingChange('UseLowercase', !settings.UseLowercase)}
+                      className={`flex items-center justify-center px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                        settings.UseLowercase
+                          ? 'bg-primary-600 text-white hover:bg-primary-700'
+                          : 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
+                      }`}
+                      title={t('credentials.includeLowercase')}
+                    >
+                      <span className="font-mono text-base">a-z</span>
+                    </button>
+
+                    {/* Uppercase Toggle */}
+                    <button
+                      type="button"
+                      onClick={() => handleSettingChange('UseUppercase', !settings.UseUppercase)}
+                      className={`flex items-center justify-center px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                        settings.UseUppercase
+                          ? 'bg-primary-600 text-white hover:bg-primary-700'
+                          : 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
+                      }`}
+                      title={t('credentials.includeUppercase')}
+                    >
+                      <span className="font-mono text-base">A-Z</span>
+                    </button>
+
+                    {/* Numbers Toggle */}
+                    <button
+                      type="button"
+                      onClick={() => handleSettingChange('UseNumbers', !settings.UseNumbers)}
+                      className={`flex items-center justify-center px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                        settings.UseNumbers
+                          ? 'bg-primary-600 text-white hover:bg-primary-700'
+                          : 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
+                      }`}
+                      title={t('credentials.includeNumbers')}
+                    >
+                      <span className="font-mono text-base">0-9</span>
+                    </button>
+
+                    {/* Special Characters Toggle */}
+                    <button
+                      type="button"
+                      onClick={() => handleSettingChange('UseSpecialChars', !settings.UseSpecialChars)}
+                      className={`flex items-center justify-center px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                        settings.UseSpecialChars
+                          ? 'bg-primary-600 text-white hover:bg-primary-700'
+                          : 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
+                      }`}
+                      title={t('credentials.includeSpecialChars')}
+                    >
+                      <span className="font-mono text-base">!@#</span>
+                    </button>
+                  </div>
+
+                  {/* Avoid Ambiguous Characters - Checkbox */}
+                  <div className="flex items-center">
+                    <input
+                      id="use-non-ambiguous"
+                      type="checkbox"
+                      checked={settings.UseNonAmbiguousChars}
+                      onChange={(e) => handleSettingChange('UseNonAmbiguousChars', e.target.checked)}
+                      className="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600"
+                    />
+                    <label htmlFor="use-non-ambiguous" className="ml-2 text-sm text-gray-700 dark:text-gray-300">
+                      {t('credentials.avoidAmbiguousChars')}
+                    </label>
+                  </div>
+                </div>
+              </div>
+
+              {/* Action buttons */}
+              <div className="mt-5 sm:mt-6 sm:flex sm:flex-row-reverse">
+                <button
+                  type="button"
+                  className="inline-flex w-full justify-center items-center gap-1 rounded-md bg-gray-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 sm:ml-3 sm:w-auto"
+                  onClick={handleSave}
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" />
+                  </svg>
+                  {t('common.use')}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PasswordConfigDialog;

apps/browser-extension/src/entrypoints/popup/components/PasswordField.tsx

@@ -0,0 +1,205 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { PasswordSettings } from '@/utils/dist/shared/models/vault';
+import { CreatePasswordGenerator } from '@/utils/dist/shared/password-generator';
+
+import PasswordConfigDialog from './PasswordConfigDialog';
+
+interface IPasswordFieldProps {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  error?: string;
+  showPassword?: boolean;
+  onShowPasswordChange?: (show: boolean) => void;
+  initialSettings: PasswordSettings;
+}
+
+/**
+ * Password field component with inline length slider and advanced configuration.
+ */
+const PasswordField: React.FC<IPasswordFieldProps> = ({
+  id,
+  label,
+  value,
+  onChange,
+  placeholder,
+  error,
+  showPassword: controlledShowPassword,
+  onShowPasswordChange,
+  initialSettings
+}) => {
+  const { t } = useTranslation();
+  const [internalShowPassword, setInternalShowPassword] = useState(false);
+  const [showConfigDialog, setShowConfigDialog] = useState(false);
+  const [currentSettings, setCurrentSettings] = useState<PasswordSettings>(initialSettings);
+
+  // Use controlled or uncontrolled showPassword state
+  const showPassword = controlledShowPassword !== undefined ? controlledShowPassword : internalShowPassword;
+
+  /**
+   * Set the showPassword state.
+   */
+  const setShowPassword = useCallback((show: boolean): void => {
+    if (controlledShowPassword !== undefined) {
+      onShowPasswordChange?.(show);
+    } else {
+      setInternalShowPassword(show);
+    }
+  }, [controlledShowPassword, onShowPasswordChange]);
+
+  // Initialize settings only once when component mounts
+  useEffect(() => {
+    setCurrentSettings({ ...initialSettings });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Only run on mount to avoid resetting user changes
+
+  const generatePassword = useCallback((settings: PasswordSettings) => {
+    try {
+      const passwordGenerator = CreatePasswordGenerator(settings);
+      const password = passwordGenerator.generateRandomPassword();
+      onChange(password);
+      setShowPassword(true);
+    } catch (error) {
+      console.error('Error generating password:', error);
+    }
+  }, [onChange, setShowPassword]);
+
+  const handleLengthChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const length = parseInt(e.target.value, 10);
+    const newSettings = { ...currentSettings, Length: length };
+    setCurrentSettings(newSettings);
+
+    // Always generate password when length changes
+    generatePassword(newSettings);
+  }, [currentSettings, generatePassword]);
+
+  const handleRegeneratePassword = useCallback(() => {
+    generatePassword(currentSettings);
+  }, [generatePassword, currentSettings]);
+
+  const handleConfiguredPassword = useCallback((password: string) => {
+    onChange(password);
+    setShowPassword(true);
+  }, [onChange, setShowPassword]);
+
+  const handleAdvancedSettingsChange = useCallback((newSettings: PasswordSettings) => {
+    setCurrentSettings(newSettings);
+  }, []);
+
+  const togglePasswordVisibility = useCallback(() => {
+    setShowPassword(!showPassword);
+  }, [showPassword, setShowPassword]);
+
+  const openConfigDialog = useCallback(() => {
+    setShowConfigDialog(true);
+  }, []);
+
+  return (
+    <div className="space-y-2">
+      {/* Label */}
+      <label htmlFor={id} className="block text-sm font-medium text-gray-900 dark:text-white">
+        {label}
+      </label>
+
+      {/* Password Input with Buttons */}
+      <div className="flex">
+        <div className="relative flex-grow">
+          <input
+            type={showPassword ? 'text' : 'password'}
+            id={id}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+            className="outline-0 text-sm shadow-sm border border-gray-300 bg-gray-50 text-gray-900 sm:text-sm rounded-l-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+          />
+        </div>
+        <div className="flex">
+          {/* Show/Hide Password Button */}
+          <button
+            type="button"
+            onClick={togglePasswordVisibility}
+            className="px-3 text-gray-500 dark:text-white bg-gray-200 hover:bg-gray-300 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium text-sm dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800"
+            title={showPassword ? t('common.hidePassword') : t('common.showPassword')}
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              {showPassword ? (
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+              ) : (
+                <>
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                </>
+              )}
+            </svg>
+          </button>
+
+          {/* Generate Password Button */}
+          <button
+            type="button"
+            onClick={handleRegeneratePassword}
+            className="px-3 text-gray-500 dark:text-white bg-gray-200 hover:bg-gray-300 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-r-lg text-sm border-l border-gray-300 dark:border-gray-700 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800"
+            title={t('credentials.generateRandomPassword')}
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Inline Password Length Slider */}
+      <div className="pt-2">
+        <div className="flex items-center justify-between mb-2">
+          <label htmlFor={`${id}-length`} className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            {t('credentials.passwordLength')}
+          </label>
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-gray-600 dark:text-gray-400 font-mono">
+              {currentSettings.Length}
+            </span>
+            <button
+              type="button"
+              onClick={openConfigDialog}
+              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+              title={t('credentials.changePasswordComplexity')}
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <input
+          type="range"
+          id={`${id}-length`}
+          min="8"
+          max="64"
+          value={currentSettings.Length}
+          onChange={handleLengthChange}
+          className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+        />
+      </div>
+
+      {/* Error Message */}
+      {error && (
+        <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+      )}
+
+      {/* Advanced Configuration Dialog */}
+      <PasswordConfigDialog
+        isOpen={showConfigDialog}
+        onClose={() => setShowConfigDialog(false)}
+        onSave={handleConfiguredPassword}
+        onSettingsChange={handleAdvancedSettingsChange}
+        initialSettings={currentSettings}
+      />
+    </div>
+  );
+};
+
+export default PasswordField;

apps/browser-extension/src/entrypoints/popup/components/UsernameField.tsx

@@ -0,0 +1,78 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface IUsernameFieldProps {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  error?: string;
+  onRegenerate: () => void;
+}
+
+/**
+ * Username field component with regenerate functionality.
+ */
+const UsernameField: React.FC<IUsernameFieldProps> = ({
+  id,
+  label,
+  value,
+  onChange,
+  placeholder,
+  error,
+  onRegenerate
+}) => {
+  const { t } = useTranslation();
+
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value);
+  }, [onChange]);
+
+  const handleRegenerate = useCallback(() => {
+    onRegenerate();
+  }, [onRegenerate]);
+
+  return (
+    <div className="space-y-2">
+      {/* Label */}
+      <label htmlFor={id} className="block text-sm font-medium text-gray-900 dark:text-white">
+        {label}
+      </label>
+
+      {/* Username Input with Button */}
+      <div className="flex">
+        <div className="relative flex-grow">
+          <input
+            type="text"
+            id={id}
+            value={value}
+            onChange={handleInputChange}
+            placeholder={placeholder}
+            className="outline-0 text-sm shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-l-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+          />
+        </div>
+        <div className="flex">
+          {/* Generate Username Button */}
+          <button
+            type="button"
+            onClick={handleRegenerate}
+            className="px-3 text-gray-500 dark:text-white bg-gray-200 hover:bg-gray-300 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-r-lg text-sm dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800"
+            title={t('credentials.generateRandomUsername')}
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Error Message */}
+      {error && (
+        <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+      )}
+    </div>
+  );
+};
+
+export default UsernameField;

apps/browser-extension/src/entrypoints/popup/context/AuthContext.tsx

@@ -40,17 +40,20 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
    * @returns object containing whether the user is logged in.
    */
   const initializeAuth = useCallback(async () : Promise<{ isLoggedIn: boolean }> => {
+    let isLoggedIn = false;
+
     const accessToken = await storage.getItem('local:accessToken') as string;
     const refreshToken = await storage.getItem('local:refreshToken') as string;
     const username = await storage.getItem('local:username') as string;
     if (accessToken && refreshToken && username) {
       setUsername(username);
       setIsLoggedIn(true);
+      isLoggedIn = true;
     }
     setIsInitialized(true);
 
     return { isLoggedIn };
-  }, [setUsername, setIsLoggedIn, isLoggedIn]);
+  }, [setUsername, setIsLoggedIn]);
 
   /**
    * Check for tokens in browser local storage on initial load when this context is mounted.

apps/browser-extension/src/entrypoints/popup/context/DbContext.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react';
 import { sendMessage } from 'webext-bridge/popup';
 
-import type { VaultMetadata } from '@/utils/dist/shared/models/metadata';
+import type { EncryptionKeyDerivationParams, VaultMetadata } from '@/utils/dist/shared/models/metadata';
 import type { VaultResponse } from '@/utils/dist/shared/models/webapi';
 import EncryptionUtility from '@/utils/EncryptionUtility';
 import SqliteClient from '@/utils/SqliteClient';
@@ -12,10 +12,13 @@ type DbContextType = {
   sqliteClient: SqliteClient | null;
   dbInitialized: boolean;
   dbAvailable: boolean;
-  initializeDatabase: (vaultResponse: VaultResponse, derivedKey: string) => Promise<void>;
+  initializeDatabase: (vaultResponse: VaultResponse, derivedKey: string) => Promise<SqliteClient>;
+  storeEncryptionKey: (derivedKey: string) => Promise<void>;
+  storeEncryptionKeyDerivationParams: (params: EncryptionKeyDerivationParams) => Promise<void>;
   clearDatabase: () => void;
   getVaultMetadata: () => Promise<VaultMetadata | null>;
   setCurrentVaultRevisionNumber: (revisionNumber: number) => Promise<void>;
+  hasPendingMigrations: () => Promise<boolean>;
 }
 
 const DbContext = createContext<DbContextType | undefined>(undefined);
@@ -69,13 +72,14 @@ export const DbProvider: React.FC<{ children: React.ReactNode }> = ({ children }
      */
     const request: StoreVaultRequest = {
       vaultBlob: vaultResponse.vault.blob,
-      derivedKey: derivedKey,
       publicEmailDomainList: vaultResponse.vault.publicEmailDomainList,
       privateEmailDomainList: vaultResponse.vault.privateEmailDomainList,
       vaultRevisionNumber: vaultResponse.vault.currentRevisionNumber,
     };
 
     await sendMessage('STORE_VAULT', request, 'background');
+
+    return client;
   }, []);
 
   const checkStoredVault = useCallback(async () => {
@@ -88,6 +92,7 @@ export const DbProvider: React.FC<{ children: React.ReactNode }> = ({ children }
         setSqliteClient(client);
         setDbInitialized(true);
         setDbAvailable(true);
+
         setVaultMetadata({
           publicEmailDomains: response.publicEmailDomains ?? [],
           privateEmailDomains: response.privateEmailDomains ?? [],
@@ -122,6 +127,16 @@ export const DbProvider: React.FC<{ children: React.ReactNode }> = ({ children }
     });
   }, [vaultMetadata]);
 
+  /**
+   * Check if there are pending migrations.
+   */
+  const hasPendingMigrations = useCallback(async () => {
+    if (!sqliteClient) {
+      return false;
+    }
+    return await sqliteClient.hasPendingMigrations();
+  }, [sqliteClient]);
+
   /**
    * Check if database is initialized and try to retrieve vault from background
    */
@@ -131,12 +146,27 @@ export const DbProvider: React.FC<{ children: React.ReactNode }> = ({ children }
     }
   }, [dbInitialized, checkStoredVault]);
 
+  /**
+   * Store encryption key in background worker.
+   */
+  const storeEncryptionKey = useCallback(async (encryptionKey: string) : Promise<void> => {
+    await sendMessage('STORE_ENCRYPTION_KEY', encryptionKey, 'background');
+  }, []);
+
+  /**
+   * Store encryption key derivation params in background worker.
+   */
+  const storeEncryptionKeyDerivationParams = useCallback(async (params: EncryptionKeyDerivationParams) : Promise<void> => {
+    await sendMessage('STORE_ENCRYPTION_KEY_DERIVATION_PARAMS', params, 'background');
+  }, []);
+
   /**
    * Clear database and remove from background worker, called when logging out.
    */
   const clearDatabase = useCallback(() : void => {
     setSqliteClient(null);
     setDbInitialized(false);
+    setDbAvailable(false);
     sendMessage('CLEAR_VAULT', {}, 'background');
   }, []);
 
@@ -145,10 +175,13 @@ export const DbProvider: React.FC<{ children: React.ReactNode }> = ({ children }
     dbInitialized,
     dbAvailable,
     initializeDatabase,
+    storeEncryptionKey,
+    storeEncryptionKeyDerivationParams,
     clearDatabase,
     getVaultMetadata,
     setCurrentVaultRevisionNumber,
-  }), [sqliteClient, dbInitialized, dbAvailable, initializeDatabase, clearDatabase, getVaultMetadata, setCurrentVaultRevisionNumber]);
+    hasPendingMigrations,
+  }), [sqliteClient, dbInitialized, dbAvailable, initializeDatabase, storeEncryptionKey, storeEncryptionKeyDerivationParams, clearDatabase, getVaultMetadata, setCurrentVaultRevisionNumber, hasPendingMigrations]);
 
   return (
     <DbContext.Provider value={contextValue}>

apps/browser-extension/src/entrypoints/popup/context/NavigationContext.tsx

@@ -1,17 +1,14 @@
-import React, { createContext, useContext, useEffect, useState, useMemo, useCallback } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { sendMessage } from 'webext-bridge/popup';
+import React, { createContext, useContext, useEffect, useMemo, useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import { useAuth } from '@/entrypoints/popup/context/AuthContext';
 import { useDb } from '@/entrypoints/popup/context/DbContext';
-import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
 
 import { storage } from '#imports';
 
 const LAST_VISITED_PAGE_KEY = 'session:lastVisitedPage';
 const LAST_VISITED_TIME_KEY = 'session:lastVisitedTime';
 const NAVIGATION_HISTORY_KEY = 'session:navigationHistory';
-const PAGE_MEMORY_DURATION = 120 * 1000; // 2 minutes in milliseconds
 
 type NavigationHistoryEntry = {
   pathname: string;
@@ -21,7 +18,6 @@ type NavigationHistoryEntry = {
 
 type NavigationContextType = {
   storeCurrentPage: () => Promise<void>;
-  restoreLastPage: () => Promise<void>;
   isFullyInitialized: boolean;
   requiresAuth: boolean;
 };
@@ -29,30 +25,25 @@ type NavigationContextType = {
 const NavigationContext = createContext<NavigationContextType | undefined>(undefined);
 
 /**
- * Navigation provider component that handles storing and restoring the last visited page,
- * as well as managing initialization and auth state redirects.
+ * Navigation provider component that handles storing the last visited page.
  */
 export const NavigationProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const location = useLocation();
-  const navigate = useNavigate();
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [isInlineUnlockMode, setIsInlineUnlockMode] = useState(false);
-  const { setIsInitialLoading } = useLoading();
 
   // Auth and DB state
   const { isInitialized: authInitialized, isLoggedIn } = useAuth();
-  const { dbInitialized, dbAvailable } = useDb();
+  const { dbInitialized, dbAvailable, upgradeRequired } = useDb();
 
   // Derived state
   const isFullyInitialized = authInitialized && dbInitialized;
-  const requiresAuth = isFullyInitialized && (!isLoggedIn || !dbAvailable || isInlineUnlockMode);
+  const requiresAuth = isFullyInitialized && (!isLoggedIn || (!dbAvailable && !upgradeRequired));
 
   /**
    * Store the current page path, timestamp, and navigation history in storage.
    */
   const storeCurrentPage = useCallback(async (): Promise<void> => {
     // Pages that are not allowed to be stored as these are auth conditional pages.
-    const notAllowedPaths = ['/', '/login', '/unlock', '/unlock-success', '/auth-settings'];
+    const notAllowedPaths = ['/', '/reinitialize', '/login', '/unlock', '/unlock-success', '/auth-settings', '/upgrade', '/logout'];
 
     // Only store the page if we're fully initialized and don't need auth
     if (isFullyInitialized && !requiresAuth && !notAllowedPaths.includes(location.pathname)) {
@@ -60,9 +51,15 @@ export const NavigationProvider: React.FC<{ children: React.ReactNode }> = ({ ch
       const segments = location.pathname.split('/').filter(Boolean);
       const historyEntries: NavigationHistoryEntry[] = [];
 
+      // Build history entries for each segment
       let currentPath = '';
-      for (const segment of segments) {
-        currentPath += '/' + segment;
+      for (let i = 0; i < segments.length; i++) {
+        currentPath += '/' + segments[i];
+        
+        /*
+         * For settings subpages, include both /settings and the subpage
+         * For email details, include both /emails and the specific email
+         */
         historyEntries.push({
           pathname: currentPath,
           search: location.search,
@@ -78,102 +75,18 @@ export const NavigationProvider: React.FC<{ children: React.ReactNode }> = ({ ch
     }
   }, [location, isFullyInitialized, requiresAuth]);
 
-  /**
-   * Restore the last visited page and navigation history if it was visited within the memory duration.
-   */
-  const restoreLastPage = useCallback(async (): Promise<void> => {
-    // Only restore if we're fully initialized and don't need auth
-    if (!isFullyInitialized || requiresAuth) {
-      return;
-    }
-
-    const [lastPage, lastVisitTime, savedHistory] = await Promise.all([
-      storage.getItem(LAST_VISITED_PAGE_KEY) as Promise<string>,
-      storage.getItem(LAST_VISITED_TIME_KEY) as Promise<number>,
-      storage.getItem(NAVIGATION_HISTORY_KEY) as Promise<NavigationHistoryEntry[]>,
-    ]);
-
-    if (lastPage && lastVisitTime) {
-      const timeSinceLastVisit = Date.now() - lastVisitTime;
-      if (timeSinceLastVisit <= PAGE_MEMORY_DURATION) {
-        // Restore the navigation history
-        if (savedHistory?.length) {
-          // First navigate to credentials page as the base
-          navigate('/credentials', { replace: true });
-
-          // Then restore the history stack
-          for (const entry of savedHistory) {
-            navigate(entry.pathname + entry.search + entry.hash);
-          }
-          return;
-        }
-
-        // Fallback to simple navigation if no history
-        navigate('/credentials', { replace: true });
-        navigate(lastPage, { replace: true });
-        return;
-      }
-    }
-
-    // Duration has expired, clear all stored navigation data
-    await Promise.all([
-      storage.removeItem(LAST_VISITED_PAGE_KEY),
-      storage.removeItem(LAST_VISITED_TIME_KEY),
-      storage.removeItem(NAVIGATION_HISTORY_KEY),
-      sendMessage('CLEAR_PERSISTED_FORM_VALUES', null, 'background'),
-    ]);
-
-    // Navigate to the credentials page as default entry page.
-    navigate('/credentials', { replace: true });
-  }, [navigate, isFullyInitialized, requiresAuth]);
-
-  // Handle initialization and auth state changes
-  useEffect(() => {
-    // Check for inline unlock mode
-    const urlParams = new URLSearchParams(window.location.search);
-    const inlineUnlock = urlParams.get('mode') === 'inline_unlock';
-    setIsInlineUnlockMode(inlineUnlock);
-
-    if (isFullyInitialized) {
-      setIsInitialLoading(false);
-
-      if (requiresAuth) {
-        const allowedPaths = ['/login', '/unlock', '/unlock-success', '/auth-settings'];
-        if (allowedPaths.includes(location.pathname)) {
-          // Do not override the navigation if the current path is in the allowed paths.
-          return;
-        }
-
-        // Determine which auth page to show
-        if (!isLoggedIn) {
-          navigate('/login', { replace: true });
-        } else if (!dbAvailable) {
-          navigate('/unlock', { replace: true });
-        } else if (inlineUnlock) {
-          navigate('/unlock-success', { replace: true });
-        }
-      } else if (!isInitialized) {
-        // First initialization, try to restore last page or go to credentials
-        restoreLastPage().then(() => {
-          setIsInitialized(true);
-        });
-      }
-    }
-  }, [isFullyInitialized, requiresAuth, isLoggedIn, dbAvailable, isInitialized, navigate, restoreLastPage, setIsInitialLoading, location.pathname]);
-
   // Store the current page whenever it changes
   useEffect(() => {
-    if (isInitialized) {
+    if (isFullyInitialized) {
       storeCurrentPage();
     }
-  }, [location.pathname, location.search, location.hash, isInitialized, storeCurrentPage]);
+  }, [location.pathname, location.search, location.hash, isFullyInitialized, storeCurrentPage]);
 
   const contextValue = useMemo(() => ({
     storeCurrentPage,
-    restoreLastPage,
     isFullyInitialized,
     requiresAuth
-  }), [storeCurrentPage, restoreLastPage, isFullyInitialized, requiresAuth]);
+  }), [storeCurrentPage, isFullyInitialized, requiresAuth]);
 
   return (
     <NavigationContext.Provider value={contextValue}>

apps/browser-extension/src/entrypoints/popup/hooks/useVaultMutate.ts

@@ -1,4 +1,5 @@
 import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { sendMessage } from 'webext-bridge/popup';
 
 import { useDb } from '@/entrypoints/popup/context/DbContext';
@@ -11,6 +12,7 @@ import { VaultUploadResponse as messageVaultUploadResponse } from '@/utils/types
 type VaultMutationOptions = {
   onSuccess?: () => void;
   onError?: (error: Error) => void;
+  skipSyncCheck?: boolean;
 }
 
 /**
@@ -21,8 +23,9 @@ export function useVaultMutate() : {
   isLoading: boolean;
   syncStatus: string;
   } {
+  const { t } = useTranslation();
   const [isLoading, setIsLoading] = useState(false);
-  const [syncStatus, setSyncStatus] = useState('Syncing vault');
+  const [syncStatus, setSyncStatus] = useState(t('common.syncingVault'));
   const dbContext = useDb();
   const { syncVault } = useVaultSync();
 
@@ -33,24 +36,24 @@ export function useVaultMutate() : {
     operation: () => Promise<void>,
     options: VaultMutationOptions
   ) : Promise<void> => {
-    setSyncStatus('Saving changes to vault');
+    setSyncStatus(t('common.savingChangesToVault'));
 
     // Execute the provided operation (e.g. create/update/delete credential)
     await operation();
 
-    setSyncStatus('Uploading vault to server');
+    setSyncStatus(t('common.uploadingVaultToServer'));
 
     try {
       // Upload the updated vault to the server.
       const base64Vault = dbContext.sqliteClient!.exportToBase64();
 
-      // Get derived key from background worker
-      const derivedKey = await sendMessage('GET_DERIVED_KEY', {}, 'background') as string;
+      // Get encryption key from background worker
+      const encryptionKey = await sendMessage('GET_ENCRYPTION_KEY', {}, 'background') as string;
 
       // Encrypt the vault.
       const encryptedVaultBlob = await EncryptionUtility.symmetricEncrypt(
         base64Vault,
-        derivedKey
+        encryptionKey
       );
 
       const request: UploadVaultRequest = {
@@ -69,9 +72,12 @@ export function useVaultMutate() : {
         await dbContext.setCurrentVaultRevisionNumber(response.newRevisionNumber);
         options.onSuccess?.();
       } else if (response.status === 1) {
+        // Note: vault merge is no longer allowed by the API as of 0.20.0, updates with the same revision number are rejected. So this check can be removed later.
         throw new Error('Vault merge required. Please login via the web app to merge the multiple pending updates to your vault.');
+      } else if (response.status === 2) {
+        throw new Error('Your vault is outdated. Please login on the AliasVault website and follow the steps.');
       } else {
-        throw new Error('Failed to upload vault to server');
+        throw new Error('Failed to upload vault to server. Please try again by re-opening the app.');
       }
     } catch (error) {
       // Check if it's a network error
@@ -86,7 +92,7 @@ export function useVaultMutate() : {
       }
       throw error;
     }
-  }, [dbContext]);
+  }, [dbContext, t]);
 
   /**
    * Hook to execute a vault mutation which uploads a new encrypted vault to the server
@@ -97,7 +103,14 @@ export function useVaultMutate() : {
   ) => {
     try {
       setIsLoading(true);
-      setSyncStatus('Checking for vault updates');
+      setSyncStatus(t('common.checkingVaultUpdates'));
+
+      // Skip sync check if requested (e.g., during upgrade operations)
+      if (options.skipSyncCheck) {
+        setSyncStatus(t('common.executingOperation'));
+        await executeMutateOperation(operation, options);
+        return;
+      }
 
       await syncVault({
         /**
@@ -143,7 +156,7 @@ export function useVaultMutate() : {
       setIsLoading(false);
       setSyncStatus('');
     }
-  }, [syncVault, executeMutateOperation]);
+  }, [syncVault, executeMutateOperation, t]);
 
   return {
     executeVaultMutation,

apps/browser-extension/src/entrypoints/popup/hooks/useVaultSync.ts

@@ -1,10 +1,12 @@
 import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { sendMessage } from 'webext-bridge/popup';
 
 import { useAuth } from '@/entrypoints/popup/context/AuthContext';
 import { useDb } from '@/entrypoints/popup/context/DbContext';
 import { useWebApi } from '@/entrypoints/popup/context/WebApiContext';
 
+import type { EncryptionKeyDerivationParams } from '@/utils/dist/shared/models/metadata';
 import type { VaultResponse } from '@/utils/dist/shared/models/webapi';
 
 /**
@@ -37,6 +39,7 @@ type VaultSyncOptions = {
   onError?: (error: string) => void;
   onStatus?: (message: string) => void;
   _onOffline?: () => void;
+  onUpgradeRequired?: () => void;
 }
 
 /**
@@ -45,12 +48,13 @@ type VaultSyncOptions = {
 export const useVaultSync = () : {
   syncVault: (options?: VaultSyncOptions) => Promise<boolean>;
 } => {
+  const { t } = useTranslation();
   const authContext = useAuth();
   const dbContext = useDb();
   const webApi = useWebApi();
 
   const syncVault = useCallback(async (options: VaultSyncOptions = {}) => {
-    const { initialSync = false, onSuccess, onError, onStatus, _onOffline } = options;
+    const { initialSync = false, onSuccess, onError, onStatus, _onOffline, onUpgradeRequired } = options;
 
     // For the initial sync, we add an artifical delay to various steps which makes it feel more fluid.
     const enableDelay = initialSync;
@@ -64,7 +68,7 @@ export const useVaultSync = () : {
       }
 
       // Check app status and vault revision
-      onStatus?.('Checking vault updates');
+      onStatus?.(t('common.checkingVaultUpdates'));
       const statusResponse = await withMinimumDelay(() => webApi.getStatus(), 300, enableDelay);
 
       // Check if server is actually available, 0.0.0 indicates connection error which triggers offline mode.
@@ -74,7 +78,20 @@ export const useVaultSync = () : {
 
       const statusError = webApi.validateStatusResponse(statusResponse);
       if (statusError) {
-        onError?.(statusError);
+        onError?.(t('common.errors.' + statusError));
+        return false;
+      }
+
+      // Check if the SRP salt has changed compared to locally stored encryption key derivation params
+      const storedEncryptionParams = await sendMessage('GET_ENCRYPTION_KEY_DERIVATION_PARAMS', {}, 'background') as EncryptionKeyDerivationParams | null;
+      if (storedEncryptionParams && statusResponse.srpSalt && statusResponse.srpSalt !== storedEncryptionParams.salt) {
+        /**
+         * Server SRP salt has changed compared to locally stored value, which means the user has changed
+         * their password since the last time they logged in. This means that the local encryption key is no
+         * longer valid and the user needs to re-authenticate. We trigger a logout but do not revoke tokens
+         * as these were already revoked by the server upon password change.
+         */
+        await webApi.logout(t('common.errors.passwordChanged'));
         return false;
       }
 
@@ -89,10 +106,10 @@ export const useVaultSync = () : {
       const vaultRevisionNumber = vaultMetadata?.vaultRevisionNumber ?? 0;
 
       if (statusResponse.vaultRevision > vaultRevisionNumber) {
-        onStatus?.('Syncing updated vault');
+        onStatus?.(t('common.syncingUpdatedVault'));
         const vaultResponseJson = await withMinimumDelay(() => webApi.get<VaultResponse>('Vault'), 1000, enableDelay);
 
-        const vaultError = webApi.validateVaultResponse(vaultResponseJson as VaultResponse);
+        const vaultError = webApi.validateVaultResponse(vaultResponseJson as VaultResponse, t);
         if (vaultError) {
           // Only logout if it's an authentication error, not a network error
           if (vaultError.includes('authentication') || vaultError.includes('unauthorized')) {
@@ -111,23 +128,49 @@ export const useVaultSync = () : {
         }
 
         try {
-          // Get derived key from background worker
-          const passwordHashBase64 = await sendMessage('GET_DERIVED_KEY', {}, 'background') as string;
-          await dbContext.initializeDatabase(vaultResponseJson as VaultResponse, passwordHashBase64);
+          // Get encryption key from background worker
+          const encryptionKey = await sendMessage('GET_ENCRYPTION_KEY', {}, 'background') as string;
+          const sqliteClient = await dbContext.initializeDatabase(vaultResponseJson as VaultResponse, encryptionKey);
+
+          // Check if the current vault version is known and up to date, if not known trigger an exception, if not up to date redirect to the upgrade page.
+          if (await sqliteClient.hasPendingMigrations()) {
+            onUpgradeRequired?.();
+            return false;
+          }
+
           onSuccess?.(true);
           return true;
-        } catch {
+        } catch (error) {
+          // Check if it's a version-related error (app needs to be updated)
+          if (error instanceof Error && error.message.includes('This browser extension is outdated')) {
+            await webApi.logout(error.message);
+            onError?.(error.message);
+            return false;
+          }
           // Vault could not be decrypted, throw an error
-          throw new Error('Vault could not be decrypted, if problem persists please logout and login again.');
+          throw new Error('Vault could not be decrypted, if the problem persists please logout and login again.');
         }
       }
 
+      // Check if the vault is up to date, if not, redirect to the upgrade page.
+      if (await dbContext.hasPendingMigrations()) {
+        onUpgradeRequired?.();
+        return false;
+      }
+
       await withMinimumDelay(() => Promise.resolve(onSuccess?.(false)), 300, enableDelay);
       return false;
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Unknown error during vault sync';
       console.error('Vault sync error:', err);
 
+      // Check if it's a version-related error (app needs to be updated)
+      if (errorMessage.includes('This browser extension is outdated')) {
+        await webApi.logout(errorMessage);
+        onError?.(errorMessage);
+        return false;
+      }
+
       /*
        * Check if it's a network error
        * TODO: browser extension does not support offline mode yet.
@@ -142,7 +185,7 @@ export const useVaultSync = () : {
       onError?.(errorMessage);
       return false;
     }
-  }, [authContext, dbContext, webApi]);
+  }, [authContext, dbContext, webApi, t]);
 
   return { syncVault };
 };

apps/browser-extension/src/entrypoints/popup/index.html

@@ -4,6 +4,11 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>AliasVault</title>
+  <link rel="icon" type="image/png" sizes="16x16" href="/icon/16.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="/icon/32.png" />
+  <link rel="icon" type="image/png" sizes="48x48" href="/icon/48.png" />
+  <link rel="icon" type="image/png" sizes="192x192" href="/icon/192.png" />
+  <link rel="apple-touch-icon" sizes="192x192" href="/icon/192.png" />
   <link href="~/assets/tailwind.css" rel="stylesheet" />
   <meta name="manifest.type" content="browser_action" />
 </head>

apps/browser-extension/src/entrypoints/popup/main.tsx

@@ -8,19 +8,33 @@ import { LoadingProvider } from '@/entrypoints/popup/context/LoadingContext';
 import { ThemeProvider } from '@/entrypoints/popup/context/ThemeContext';
 import { WebApiProvider } from '@/entrypoints/popup/context/WebApiContext';
 
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-root.render(
-  <DbProvider>
-    <AuthProvider>
-      <WebApiProvider>
-        <LoadingProvider>
-          <HeaderButtonsProvider>
-            <ThemeProvider>
-              <App />
-            </ThemeProvider>
-          </HeaderButtonsProvider>
-        </LoadingProvider>
-      </WebApiProvider>
-    </AuthProvider>
-  </DbProvider>
-);
+import i18n from '@/i18n/i18n';
+
+/**
+ * Renders the main application.
+ */
+const renderApp = (): void => {
+  const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+  root.render(
+    <DbProvider>
+      <AuthProvider>
+        <WebApiProvider>
+          <LoadingProvider>
+            <HeaderButtonsProvider>
+              <ThemeProvider>
+                <App />
+              </ThemeProvider>
+            </HeaderButtonsProvider>
+          </LoadingProvider>
+        </WebApiProvider>
+      </AuthProvider>
+    </DbProvider>
+  );
+};
+
+// Wait for i18n to be ready before rendering React. Not waiting can cause issues on some browsers, Firefox on Windows specifically.
+if (i18n.isInitialized) {
+  renderApp();
+} else {
+  i18n.on('initialized', renderApp);
+}

apps/browser-extension/src/entrypoints/popup/pages/Index.tsx

@@ -14,7 +14,7 @@ const Home: React.FC = () => {
     return null;
   }
 
-  return <Navigate to="/credentials" replace />;
+  return <Navigate to="/reinitialize" replace />;
 };
 
 export default Home;

apps/browser-extension/src/entrypoints/popup/pages/Reinitialize.tsx

@@ -0,0 +1,148 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { sendMessage } from 'webext-bridge/popup';
+
+import { useAuth } from '@/entrypoints/popup/context/AuthContext';
+import { useDb } from '@/entrypoints/popup/context/DbContext';
+import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
+import { useVaultSync } from '@/entrypoints/popup/hooks/useVaultSync';
+
+import { storage } from '#imports';
+
+const LAST_VISITED_PAGE_KEY = 'session:lastVisitedPage';
+const LAST_VISITED_TIME_KEY = 'session:lastVisitedTime';
+const NAVIGATION_HISTORY_KEY = 'session:navigationHistory';
+const PAGE_MEMORY_DURATION = 120 * 1000; // 2 minutes in milliseconds
+
+type NavigationHistoryEntry = {
+  pathname: string;
+  search: string;
+  hash: string;
+};
+
+/**
+ * Initialize component that handles initial application setup, authentication checks,
+ * vault synchronization, and state restoration.
+ */
+const Reinitialize: React.FC = () => {
+  const navigate = useNavigate();
+  const { setIsInitialLoading } = useLoading();
+  const { syncVault } = useVaultSync();
+  const hasInitialized = useRef(false);
+
+  // Auth and DB state
+  const { isInitialized: authInitialized, isLoggedIn } = useAuth();
+  const { dbInitialized, dbAvailable } = useDb();
+
+  // Derived state
+  const isFullyInitialized = authInitialized && dbInitialized;
+  const requiresAuth = isFullyInitialized && (!isLoggedIn || !dbAvailable);
+
+  /**
+   * Restore the last visited page and navigation history if it was visited within the memory duration.
+   */
+  const restoreLastPage = useCallback(async (): Promise<void> => {
+    const [lastPage, lastVisitTime, savedHistory] = await Promise.all([
+      storage.getItem(LAST_VISITED_PAGE_KEY) as Promise<string>,
+      storage.getItem(LAST_VISITED_TIME_KEY) as Promise<number>,
+      storage.getItem(NAVIGATION_HISTORY_KEY) as Promise<NavigationHistoryEntry[]>,
+    ]);
+
+    if (lastPage && lastVisitTime) {
+      const timeSinceLastVisit = Date.now() - lastVisitTime;
+      if (timeSinceLastVisit <= PAGE_MEMORY_DURATION) {
+        // For nested routes, build up the navigation history properly
+        if (savedHistory?.length > 1) {
+          // Navigate to the base route first
+          navigate(savedHistory[0].pathname, { replace: true });
+          // Then navigate to the final destination
+          navigate(lastPage, { replace: false });
+        } else {
+          // Simple navigation for non-nested routes
+          navigate(lastPage, { replace: true });
+        }
+        return;
+      }
+    }
+
+    // Duration has expired, clear all stored navigation data
+    await Promise.all([
+      storage.removeItem(LAST_VISITED_PAGE_KEY),
+      storage.removeItem(LAST_VISITED_TIME_KEY),
+      storage.removeItem(NAVIGATION_HISTORY_KEY),
+      sendMessage('CLEAR_PERSISTED_FORM_VALUES', null, 'background'),
+    ]);
+
+    // Navigate to the credentials page as default entry page
+    navigate('/credentials', { replace: true });
+  }, [navigate]);
+
+  useEffect(() => {
+    // Check for inline unlock mode
+    const urlParams = new URLSearchParams(window.location.search);
+    const inlineUnlock = urlParams.get('mode') === 'inline_unlock';
+
+    if (isFullyInitialized) {
+      // Prevent multiple vault syncs (only run sync once)
+      const shouldRunSync = !hasInitialized.current;
+
+      if (requiresAuth) {
+        setIsInitialLoading(false);
+
+        // Determine which auth page to show
+        if (!isLoggedIn) {
+          navigate('/login', { replace: true });
+        } else if (!dbAvailable) {
+          navigate('/unlock', { replace: true });
+        }
+      } else if (shouldRunSync) {
+        // Only perform vault sync once during initialization
+        hasInitialized.current = true;
+
+        // Perform vault sync and restore state
+        syncVault({
+          initialSync: false,
+          /**
+           * Handle successful vault sync.
+           */
+          onSuccess: async () => {
+            // After successful sync, try to restore last page or go to credentials
+            if (inlineUnlock) {
+              setIsInitialLoading(false);
+              navigate('/unlock-success', { replace: true });
+            } else {
+              await restoreLastPage();
+            }
+          },
+          /**
+           * Handle vault sync error.
+           * @param error Error message
+           */
+          onError: (error) => {
+            console.error('Vault sync error during initialization:', error);
+            // Even if sync fails, continue with initialization
+            restoreLastPage().then(() => {
+              setIsInitialLoading(false);
+            });
+          },
+          /**
+           * Handle upgrade required.
+           */
+          onUpgradeRequired: () => {
+            navigate('/upgrade', { replace: true });
+            setIsInitialLoading(false);
+          }
+        });
+      } else {
+        // User is logged in and db is available, navigate to appropriate page
+        setIsInitialLoading(false);
+        restoreLastPage();
+      }
+    }
+  }, [isFullyInitialized, requiresAuth, isLoggedIn, dbAvailable, navigate, setIsInitialLoading, syncVault, restoreLastPage]);
+
+  // This component doesn't render anything visible - it just handles initialization
+  return null;
+};
+
+export default Reinitialize;

apps/browser-extension/src/entrypoints/popup/pages/Settings.tsx

@@ -1,445 +0,0 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import { sendMessage } from 'webext-bridge/popup';
-
-import HeaderButton from '@/entrypoints/popup/components/HeaderButton';
-import { HeaderIconType } from '@/entrypoints/popup/components/Icons/HeaderIcons';
-import { useAuth } from '@/entrypoints/popup/context/AuthContext';
-import { useHeaderButtons } from '@/entrypoints/popup/context/HeaderButtonsContext';
-import { useTheme } from '@/entrypoints/popup/context/ThemeContext';
-
-import { AppInfo } from '@/utils/AppInfo';
-import { DISABLED_SITES_KEY, GLOBAL_AUTOFILL_POPUP_ENABLED_KEY, GLOBAL_CONTEXT_MENU_ENABLED_KEY, TEMPORARY_DISABLED_SITES_KEY } from '@/utils/Constants';
-
-import { useLoading } from '../context/LoadingContext';
-
-import { storage, browser } from "#imports";
-
-/**
- * Popup settings type.
- */
-type PopupSettings = {
-  disabledUrls: string[];
-  temporaryDisabledUrls: Record<string, number>;
-  currentUrl: string;
-  isEnabled: boolean;
-  isGloballyEnabled: boolean;
-  isContextMenuEnabled: boolean;
-}
-
-/**
- * Settings page component.
- */
-const Settings: React.FC = () => {
-  const { theme, setTheme } = useTheme();
-  const authContext = useAuth();
-  const { setHeaderButtons } = useHeaderButtons();
-  const { setIsInitialLoading } = useLoading();
-  const [settings, setSettings] = useState<PopupSettings>({
-    disabledUrls: [],
-    temporaryDisabledUrls: {},
-    currentUrl: '',
-    isEnabled: true,
-    isGloballyEnabled: true,
-    isContextMenuEnabled: true
-  });
-
-  /**
-   * Get current tab in browser.
-   */
-  const getCurrentTab = async (): Promise<browser.Tabs.Tab> => {
-    const queryOptions = { active: true, currentWindow: true };
-    const [tab] = await browser.tabs.query(queryOptions);
-    return tab;
-  };
-
-  /**
-   * Open the client tab.
-   */
-  const openClientTab = async () : Promise<void> => {
-    const settingClientUrl = await storage.getItem('local:clientUrl') as string;
-    let clientUrl = AppInfo.DEFAULT_CLIENT_URL;
-    if (settingClientUrl && settingClientUrl.length > 0) {
-      clientUrl = settingClientUrl;
-    }
-
-    window.open(clientUrl, '_blank');
-  };
-
-  // Set header buttons on mount and clear on unmount
-  useEffect((): (() => void) => {
-    const headerButtonsJSX = (
-      <div className="flex items-center gap-2">
-        <HeaderButton
-          onClick={openClientTab}
-          title="Open web app"
-          iconType={HeaderIconType.EXTERNAL_LINK}
-        />
-      </div>
-    );
-
-    setHeaderButtons(headerButtonsJSX);
-    return () => setHeaderButtons(null);
-  }, [setHeaderButtons]);
-
-  /**
-   * Load settings.
-   */
-  const loadSettings = useCallback(async () : Promise<void> => {
-    const tab = await getCurrentTab();
-    const currentUrl = new URL(tab.url ?? '').hostname;
-
-    // Load settings local storage.
-    const disabledUrls = await storage.getItem(DISABLED_SITES_KEY) as string[] ?? [];
-    const temporaryDisabledUrls = await storage.getItem(TEMPORARY_DISABLED_SITES_KEY) as Record<string, number> ?? {};
-    const isGloballyEnabled = await storage.getItem(GLOBAL_AUTOFILL_POPUP_ENABLED_KEY) !== false; // Default to true if not set
-    const isContextMenuEnabled = await storage.getItem(GLOBAL_CONTEXT_MENU_ENABLED_KEY) !== false; // Default to true if not set
-
-    // Clean up expired temporary disables
-    const now = Date.now();
-    const cleanedTemporaryDisabledUrls = Object.fromEntries(
-      Object.entries(temporaryDisabledUrls).filter(([_, expiry]) => expiry > now)
-    );
-
-    if (Object.keys(cleanedTemporaryDisabledUrls).length !== Object.keys(temporaryDisabledUrls).length) {
-      await storage.setItem(TEMPORARY_DISABLED_SITES_KEY, cleanedTemporaryDisabledUrls);
-    }
-
-    setSettings({
-      disabledUrls,
-      temporaryDisabledUrls: cleanedTemporaryDisabledUrls,
-      currentUrl,
-      isEnabled: !disabledUrls.includes(currentUrl) && !(currentUrl in cleanedTemporaryDisabledUrls),
-      isGloballyEnabled,
-      isContextMenuEnabled
-    });
-    setIsInitialLoading(false);
-  }, [setIsInitialLoading]);
-
-  useEffect(() => {
-    loadSettings();
-  }, [loadSettings]);
-
-  /**
-   * Toggle current site.
-   */
-  const toggleCurrentSite = async () : Promise<void> => {
-    const { currentUrl, disabledUrls, temporaryDisabledUrls, isEnabled } = settings;
-
-    let newDisabledUrls = [...disabledUrls];
-    let newTemporaryDisabledUrls = { ...temporaryDisabledUrls };
-
-    if (isEnabled) {
-      // When disabling, add to permanent disabled list
-      if (!newDisabledUrls.includes(currentUrl)) {
-        newDisabledUrls.push(currentUrl);
-      }
-      // Also remove from temporary disabled list if present
-      delete newTemporaryDisabledUrls[currentUrl];
-    } else {
-      // When enabling, remove from both permanent and temporary disabled lists
-      newDisabledUrls = newDisabledUrls.filter(url => url !== currentUrl);
-      delete newTemporaryDisabledUrls[currentUrl];
-    }
-
-    await storage.setItem(DISABLED_SITES_KEY, newDisabledUrls);
-    await storage.setItem(TEMPORARY_DISABLED_SITES_KEY, newTemporaryDisabledUrls);
-
-    setSettings(prev => ({
-      ...prev,
-      disabledUrls: newDisabledUrls,
-      temporaryDisabledUrls: newTemporaryDisabledUrls,
-      isEnabled: !isEnabled
-    }));
-  };
-
-  /**
-   * Reset settings.
-   */
-  const resetSettings = async () : Promise<void> => {
-    await storage.setItem(DISABLED_SITES_KEY, []);
-    await storage.setItem(TEMPORARY_DISABLED_SITES_KEY, {});
-
-    setSettings(prev => ({
-      ...prev,
-      disabledUrls: [],
-      temporaryDisabledUrls: {},
-      isEnabled: true
-    }));
-  };
-
-  /**
-   * Toggle global popup.
-   */
-  const toggleGlobalPopup = async () : Promise<void> => {
-    const newGloballyEnabled = !settings.isGloballyEnabled;
-
-    await storage.setItem(GLOBAL_AUTOFILL_POPUP_ENABLED_KEY, newGloballyEnabled);
-
-    setSettings(prev => ({
-      ...prev,
-      isGloballyEnabled: newGloballyEnabled
-    }));
-  };
-
-  /**
-   * Toggle context menu.
-   */
-  const toggleContextMenu = async () : Promise<void> => {
-    const newContextMenuEnabled = !settings.isContextMenuEnabled;
-
-    await storage.setItem(GLOBAL_CONTEXT_MENU_ENABLED_KEY, newContextMenuEnabled);
-    await sendMessage('TOGGLE_CONTEXT_MENU', { enabled: newContextMenuEnabled }, 'background');
-
-    setSettings(prev => ({
-      ...prev,
-      isContextMenuEnabled: newContextMenuEnabled
-    }));
-  };
-
-  /**
-   * Set theme preference.
-   */
-  const setThemePreference = async (newTheme: 'system' | 'light' | 'dark') : Promise<void> => {
-    // Use the ThemeContext to apply the theme
-    setTheme(newTheme);
-
-    // Update local state
-    setSettings(prev => ({
-      ...prev,
-      theme: newTheme
-    }));
-  };
-
-  /**
-   * Open keyboard shortcuts configuration page.
-   */
-  const openKeyboardShortcuts = async (): Promise<void> => {
-    // Detect browser type using user agent
-    const userAgent = navigator.userAgent.toLowerCase();
-    const isFirefox = userAgent.includes('firefox');
-    const isSafari = userAgent.includes('safari') && !userAgent.includes('chrome');
-
-    if (isFirefox) {
-      await browser.tabs.create({ url: 'about:addons' });
-    } else if (isSafari) {
-      await browser.tabs.create({ url: 'safari-extension://shortcuts' });
-    } else {
-      // Chrome and other Chromium-based browsers
-      await browser.tabs.create({ url: 'chrome://extensions/shortcuts' });
-    }
-  };
-
-  /**
-   * Handle logout.
-   */
-  const handleLogout = async () : Promise<void> => {
-    await authContext.logout();
-  };
-
-  return (
-    <div className="space-y-6">
-      <div className="flex justify-between items-center mb-4">
-        <h2 className="text-gray-900 dark:text-white text-xl">Settings</h2>
-      </div>
-
-      {/* User Menu Section */}
-      <section>
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
-          <div className="p-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center space-x-3">
-                <div className="flex-shrink-0">
-                  <div className="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
-                    <span className="text-primary-600 dark:text-primary-400 text-lg font-medium">
-                      {authContext.username?.[0]?.toUpperCase() || '?'}
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  <p className="text-sm font-medium text-gray-900 dark:text-white">
-                    {authContext.username}
-                  </p>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">
-                    Logged in
-                  </p>
-                </div>
-              </div>
-              <button
-                onClick={handleLogout}
-                className="px-4 py-2 text-sm font-medium text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
-              >
-                Logout
-              </button>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Global Settings Section */}
-      <section>
-        <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-3">Global Settings</h3>
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
-          <div className="p-4 space-y-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm font-medium text-gray-900 dark:text-white">Autofill popup</p>
-                <p className={`text-sm mt-1 ${settings.isGloballyEnabled ? 'text-gray-600 dark:text-gray-400' : 'text-red-600 dark:text-red-400'}`}>
-                  {settings.isGloballyEnabled ? 'Active on all sites (unless disabled below)' : 'Disabled on all sites'}
-                </p>
-              </div>
-              <button
-                onClick={toggleGlobalPopup}
-                className={`px-4 py-2 rounded-md transition-colors ${
-                  settings.isGloballyEnabled
-                    ? 'bg-green-500 hover:bg-green-600 text-white'
-                    : 'bg-red-500 hover:bg-red-600 text-white'
-                }`}
-              >
-                {settings.isGloballyEnabled ? 'Enabled' : 'Disabled'}
-              </button>
-            </div>
-
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm font-medium text-gray-900 dark:text-white">Right-click context menu</p>
-                <p className={`text-sm mt-1 ${settings.isContextMenuEnabled ? 'text-gray-600 dark:text-gray-400' : 'text-red-600 dark:text-red-400'}`}>
-                  {settings.isContextMenuEnabled ? 'Enabled' : 'Disabled'}
-                </p>
-              </div>
-              <button
-                onClick={toggleContextMenu}
-                className={`px-4 py-2 rounded-md transition-colors ${
-                  settings.isContextMenuEnabled
-                    ? 'bg-green-500 hover:bg-green-600 text-white'
-                    : 'bg-red-500 hover:bg-red-600 text-white'
-                }`}
-              >
-                {settings.isContextMenuEnabled ? 'Enabled' : 'Disabled'}
-              </button>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Site-Specific Settings Section */}
-      {settings.isGloballyEnabled && (
-        <section>
-          <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-3">Site-Specific Settings</h3>
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
-            <div className="p-4">
-              <div className="flex items-center justify-between">
-                <div>
-                  <p className="text-sm font-medium text-gray-900 dark:text-white">Autofill popup on: {settings.currentUrl}</p>
-                  <p className={`text-sm mt-1 ${settings.isEnabled ? 'text-gray-600 dark:text-gray-400' : 'text-red-600 dark:text-red-400'}`}>
-                    {settings.isEnabled ? 'Enabled for this site' : 'Disabled for this site'}
-                  </p>
-                  {!settings.isEnabled && settings.temporaryDisabledUrls[settings.currentUrl] && (
-                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                      Temporarily disabled until {new Date(settings.temporaryDisabledUrls[settings.currentUrl]).toLocaleTimeString()}
-                    </p>
-                  )}
-                </div>
-                {settings.isGloballyEnabled && (
-                  <button
-                    onClick={toggleCurrentSite}
-                    className={`px-4 py-2 rounded-md transition-colors ${
-                      settings.isEnabled
-                        ? 'bg-green-500 hover:bg-green-600 text-white'
-                        : 'bg-red-500 hover:bg-red-600 text-white'
-                    }`}
-                  >
-                    {settings.isEnabled ? 'Enabled' : 'Disabled'}
-                  </button>
-                )}
-              </div>
-
-              <div className="mt-4">
-                <button
-                  onClick={resetSettings}
-                  className="w-full px-4 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md text-gray-700 dark:text-gray-300 transition-colors text-sm"
-                >
-                  Reset all site-specific settings
-                </button>
-              </div>
-            </div>
-          </div>
-        </section>
-      )}
-
-      {/* Appearance Settings Section */}
-      <section>
-        <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-3">Appearance</h3>
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
-          <div className="p-4">
-            <div>
-              <p className="text-sm font-medium text-gray-900 dark:text-white mb-2">Theme</p>
-              <div className="flex flex-col space-y-2">
-                <label className="flex items-center">
-                  <input
-                    type="radio"
-                    name="theme"
-                    value="system"
-                    checked={theme === 'system'}
-                    onChange={() => setThemePreference('system')}
-                    className="mr-2"
-                  />
-                  <span className="text-sm text-gray-700 dark:text-gray-300">Use default</span>
-                </label>
-                <label className="flex items-center">
-                  <input
-                    type="radio"
-                    name="theme"
-                    value="light"
-                    checked={theme === 'light'}
-                    onChange={() => setThemePreference('light')}
-                    className="mr-2"
-                  />
-                  <span className="text-sm text-gray-700 dark:text-gray-300">Light</span>
-                </label>
-                <label className="flex items-center">
-                  <input
-                    type="radio"
-                    name="theme"
-                    value="dark"
-                    checked={theme === 'dark'}
-                    onChange={() => setThemePreference('dark')}
-                    className="mr-2"
-                  />
-                  <span className="text-sm text-gray-700 dark:text-gray-300">Dark</span>
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Keyboard Shortcuts Section */}
-      {import.meta.env.CHROME && (
-        <section>
-          <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-3">Keyboard Shortcuts</h3>
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
-            <div className="p-4">
-              <div className="flex items-center justify-between">
-                <div>
-                  <p className="text-sm font-medium text-gray-900 dark:text-white">Configure keyboard shortcuts</p>
-                </div>
-                <button
-                  onClick={openKeyboardShortcuts}
-                  className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors"
-                >
-                  Configure
-                </button>
-              </div>
-            </div>
-          </div>
-        </section>
-      )}
-
-      <div className="text-center text-gray-400 dark:text-gray-600">
-        Version: {AppInfo.VERSION}
-      </div>
-    </div>
-  );
-};
-
-export default Settings;

apps/browser-extension/src/entrypoints/popup/pages/Unlock.tsx

@@ -1,145 +0,0 @@
-import { Buffer } from 'buffer';
-
-import React, { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import Button from '@/entrypoints/popup/components/Button';
-import { useAuth } from '@/entrypoints/popup/context/AuthContext';
-import { useDb } from '@/entrypoints/popup/context/DbContext';
-import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
-import { useWebApi } from '@/entrypoints/popup/context/WebApiContext';
-import SrpUtility from '@/entrypoints/popup/utils/SrpUtility';
-
-import { VAULT_LOCKED_DISMISS_UNTIL_KEY } from '@/utils/Constants';
-import type { VaultResponse } from '@/utils/dist/shared/models/webapi';
-import EncryptionUtility from '@/utils/EncryptionUtility';
-
-import { storage } from '#imports';
-
-/**
- * Unlock page
- */
-const Unlock: React.FC = () => {
-  const authContext = useAuth();
-  const dbContext = useDb();
-  const navigate = useNavigate();
-
-  const webApi = useWebApi();
-  const srpUtil = new SrpUtility(webApi);
-
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const { showLoading, hideLoading, setIsInitialLoading } = useLoading();
-
-  useEffect(() => {
-    /**
-     * Make status call to API which acts as health check.
-     */
-    const checkStatus = async () : Promise<void> => {
-      const statusResponse = await webApi.getStatus();
-      const statusError = webApi.validateStatusResponse(statusResponse);
-      if (statusError !== null) {
-        await webApi.logout(statusError);
-      }
-      setIsInitialLoading(false);
-    };
-
-    checkStatus();
-  }, [webApi, authContext, setIsInitialLoading]);
-
-  /**
-   * Handle submit
-   */
-  const handleSubmit = async (e: React.FormEvent) : Promise<void> => {
-    e.preventDefault();
-    setError(null);
-    showLoading();
-
-    try {
-      // 1. Initiate login to get salt and server ephemeral
-      const loginResponse = await srpUtil.initiateLogin(authContext.username!);
-
-      // Derive key from password using user's encryption settings
-      const passwordHash = await EncryptionUtility.deriveKeyFromPassword(
-        password,
-        loginResponse.salt,
-        loginResponse.encryptionType,
-        loginResponse.encryptionSettings
-      );
-
-      // Make API call to get latest vault
-      const vaultResponseJson = await webApi.get<VaultResponse>('Vault');
-
-      const vaultError = webApi.validateVaultResponse(vaultResponseJson);
-      if (vaultError) {
-        setError(vaultError);
-        hideLoading();
-        return;
-      }
-
-      // Get the derived key as base64 string required for decryption.
-      const passwordHashBase64 = Buffer.from(passwordHash).toString('base64');
-
-      // Initialize the SQLite context with the new vault data.
-      await dbContext.initializeDatabase(vaultResponseJson, passwordHashBase64);
-
-      // Clear dismiss until (which can be enabled after user has dimissed vault is locked popup) to ensure popup is shown.
-      await storage.setItem(VAULT_LOCKED_DISMISS_UNTIL_KEY, 0);
-    } catch (err) {
-      setError('Failed to unlock vault. Please check your password and try again.');
-      console.error('Unlock error:', err);
-    } finally {
-      hideLoading();
-    }
-  };
-
-  /**
-   * Handle logout
-   */
-  const handleLogout = () : void => {
-    navigate('/logout', { replace: true });
-  };
-
-  return (
-    <div className="max-w-md">
-      <form onSubmit={handleSubmit} className="bg-white dark:bg-gray-700 w-full shadow-md rounded px-8 pt-6 pb-8 mb-4">
-        <h2 className="text-2xl font-bold text-gray-900 dark:text-white break-all overflow-hidden mb-4">{authContext.username}</h2>
-
-        <p className="text-base text-gray-500 dark:text-gray-200 mb-6">
-          Enter your master password to unlock your vault.
-        </p>
-
-        {error && (
-          <div className="mb-4 text-red-500 dark:text-red-400 text-sm">
-            {error}
-          </div>
-        )}
-
-        <div className="mb-6">
-          <label className="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2" htmlFor="password">
-            Password
-          </label>
-          <input
-            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-800 dark:border-gray-600 mb-3 leading-tight focus:outline-none focus:shadow-outline"
-            id="password"
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            placeholder="Enter your password"
-            required
-          />
-        </div>
-
-        <Button type="submit">
-          Unlock
-        </Button>
-
-        <div className="text-sm font-medium text-gray-500 dark:text-gray-200 mt-6">
-          Switch accounts? <button onClick={handleLogout} className="text-primary-700 hover:underline dark:text-primary-500">Log out</button>
-        </div>
-      </form>
-    </div>
-  );
-};
-
-export default Unlock;

apps/browser-extension/src/entrypoints/popup/pages/UnlockSuccess.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-
-/**
- * Unlock success component shown when the vault is successfully unlocked in a separate popup
- * asking the user if they want to close the popup.
- */
-const UnlockSuccess: React.FC<{
-    onClose: () => void;
-}> = ({ onClose }) => (
-  <div className="flex flex-col items-center justify-center p-6 text-center">
-    <div className="mb-4 text-green-600 dark:text-green-400">
-      <svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </svg>
-    </div>
-    <h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
-    Your vault is successfully unlocked
-    </h2>
-    <p className="mb-6 text-gray-600 dark:text-gray-400">
-    You can now use autofill in login forms in your browser.
-    </p>
-    <div className="space-y-3 w-full">
-      <button
-        onClick={() => window.close()}
-        className="w-full px-4 py-2 text-white bg-primary-600 rounded hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
-      >
-        Close this popup
-      </button>
-      <button
-        onClick={() => {
-          // Remove mode=inline from URL before closing
-          const url = new URL(window.location.href);
-          url.searchParams.delete('mode');
-          window.history.replaceState({}, '', url);
-          onClose();
-        }}
-        className="w-full px-4 py-2 text-gray-700 bg-gray-100 rounded hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
-      >
-        Browse vault contents
-      </button>
-    </div>
-  </div>
-);
-
-export default UnlockSuccess;

apps/browser-extension/src/entrypoints/popup/pages/auth/AuthSettings.tsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
 
+import LanguageSwitcher from '@/entrypoints/popup/components/LanguageSwitcher';
 import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
 
 import { AppInfo } from '@/utils/AppInfo';
@@ -19,10 +21,13 @@ const DEFAULT_OPTIONS: ApiOption[] = [
 ];
 
 // Validation schema for URLs
-const urlSchema = Yup.object().shape({
+/**
+ * Creates a URL validation schema with localized error messages.
+ */
+const createUrlSchema = (t: (key: string) => string): Yup.ObjectSchema<{apiUrl: string; clientUrl: string}> => Yup.object().shape({
   apiUrl: Yup.string()
-    .required('API URL is required')
-    .test('is-valid-api-url', 'Please enter a valid API URL', (value: string | undefined) => {
+    .required(t('validation.apiUrlRequired'))
+    .test('is-valid-api-url', t('settings.validation.apiUrlInvalid'), (value: string | undefined) => {
       if (!value) {
         return true; // Allow empty for non-custom option
       }
@@ -34,8 +39,8 @@ const urlSchema = Yup.object().shape({
       }
     }),
   clientUrl: Yup.string()
-    .required('Client URL is required')
-    .test('is-valid-client-url', 'Please enter a valid client URL', (value: string | undefined) => {
+    .required(t('validation.clientUrlRequired'))
+    .test('is-valid-client-url', t('settings.validation.clientUrlInvalid'), (value: string | undefined) => {
       if (!value) {
         return true; // Allow empty for non-custom option
       }
@@ -52,6 +57,7 @@ const urlSchema = Yup.object().shape({
  * Auth settings page only shown when user is not logged in.
  */
 const AuthSettings: React.FC = () => {
+  const { t } = useTranslation();
   const [selectedOption, setSelectedOption] = useState<string>('');
   const [customUrl, setCustomUrl] = useState<string>('');
   const [customClientUrl, setCustomClientUrl] = useState<string>('');
@@ -59,6 +65,8 @@ const AuthSettings: React.FC = () => {
   const [errors, setErrors] = useState<{ apiUrl?: string; clientUrl?: string }>({});
   const { setIsInitialLoading } = useLoading();
 
+  const urlSchema = createUrlSchema(t);
+
   useEffect(() => {
     /**
      * Load the stored settings from the storage.
@@ -165,9 +173,17 @@ const AuthSettings: React.FC = () => {
 
   return (
     <div className="p-4">
+      {/* Language Settings Section */}
       <div className="mb-6">
-        <label htmlFor="api-connection" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
-          API Connection
+        <div className="flex flex-col gap-2">
+          <p className="font-medium text-gray-900 dark:text-white">{t('common.language')}</p>
+          <LanguageSwitcher variant="dropdown" size="sm" />
+        </div>
+      </div>
+
+      <div className="mb-6">
+        <label htmlFor="api-connection" className="block font-medium text-gray-700 dark:text-gray-200 mb-2">
+          {t('settings.serverUrl')}
         </label>
         <select
           value={selectedOption}
@@ -185,7 +201,7 @@ const AuthSettings: React.FC = () => {
       {selectedOption === 'custom' && (
         <>
           <div className="mb-6">
-            <label htmlFor="custom-client-url" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+            <label htmlFor="custom-client-url" className="block font-medium text-gray-700 dark:text-gray-200 mb-2">
               Custom client URL
             </label>
             <input
@@ -201,7 +217,7 @@ const AuthSettings: React.FC = () => {
             )}
           </div>
           <div className="mb-6">
-            <label htmlFor="custom-api-url" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+            <label htmlFor="custom-api-url" className="block font-medium text-gray-700 dark:text-gray-200 mb-2">
               Custom API URL
             </label>
             <input
@@ -222,7 +238,7 @@ const AuthSettings: React.FC = () => {
       {/* Autofill Popup Settings Section */}
       <div className="mb-6">
         <div className="flex flex-col gap-2">
-          <p className="text-sm font-medium text-gray-900 dark:text-white">Autofill popup</p>
+          <p className="font-medium text-gray-900 dark:text-white">{t('settings.autofillEnabled')}</p>
           <button
             onClick={toggleGlobalPopup}
             className={`px-4 py-2 rounded-md transition-colors ${
@@ -231,13 +247,13 @@ const AuthSettings: React.FC = () => {
                 : 'bg-red-200 text-red-800 hover:bg-red-300 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50'
             }`}
           >
-            {isGloballyEnabled ? 'Enabled' : 'Disabled'}
+            {isGloballyEnabled ? t('common.enabled', 'Enabled') : t('common.disabled', 'Disabled')}
           </button>
         </div>
       </div>
 
       <div className="text-center text-gray-400 dark:text-gray-600">
-        Version: {AppInfo.VERSION}
+        {t('settings.version')}: {AppInfo.VERSION}
       </div>
     </div>
   );

apps/browser-extension/src/entrypoints/popup/pages/auth/Login.tsx

@@ -1,13 +1,20 @@
 import { Buffer } from 'buffer';
 
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 import Button from '@/entrypoints/popup/components/Button';
+import HeaderButton from '@/entrypoints/popup/components/HeaderButton';
+import { HeaderIcon, HeaderIconType } from '@/entrypoints/popup/components/Icons/HeaderIcons';
 import LoginServerInfo from '@/entrypoints/popup/components/LoginServerInfo';
 import { useAuth } from '@/entrypoints/popup/context/AuthContext';
 import { useDb } from '@/entrypoints/popup/context/DbContext';
+import { useHeaderButtons } from '@/entrypoints/popup/context/HeaderButtonsContext';
 import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
 import { useWebApi } from '@/entrypoints/popup/context/WebApiContext';
+import ConversionUtility from '@/entrypoints/popup/utils/ConversionUtility';
+import { PopoutUtility } from '@/entrypoints/popup/utils/PopoutUtility';
 import SrpUtility from '@/entrypoints/popup/utils/SrpUtility';
 
 import { AppInfo } from '@/utils/AppInfo';
@@ -15,22 +22,24 @@ import type { VaultResponse, LoginResponse } from '@/utils/dist/shared/models/we
 import EncryptionUtility from '@/utils/EncryptionUtility';
 import { ApiAuthError } from '@/utils/types/errors/ApiAuthError';
 
-import ConversionUtility from '../utils/ConversionUtility';
-
 import { storage } from '#imports';
 
 /**
  * Login page
  */
 const Login: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
   const authContext = useAuth();
   const dbContext = useDb();
+  const { setHeaderButtons } = useHeaderButtons();
   const [credentials, setCredentials] = useState({
     username: '',
     password: '',
   });
   const { showLoading, hideLoading, setIsInitialLoading } = useLoading();
   const [rememberMe, setRememberMe] = useState(true);
+  const [showPassword, setShowPassword] = useState(false);
   const [loginResponse, setLoginResponse] = useState<LoginResponse | null>(null);
   const [passwordHashString, setPasswordHashString] = useState<string | null>(null);
   const [passwordHashBase64, setPasswordHashBase64] = useState<string | null>(null);
@@ -41,6 +50,66 @@ const Login: React.FC = () => {
   const webApi = useWebApi();
   const srpUtil = new SrpUtility(webApi);
 
+  /**
+   * Handle successful authentication by storing tokens and initializing the database
+   */
+  const handleSuccessfulAuth = async (
+    username: string,
+    token: string,
+    refreshToken: string,
+    passwordHashBase64: string,
+    loginResponse: LoginResponse
+  ) : Promise<void> => {
+    // Try to get latest vault manually providing auth token.
+    const vaultResponseJson = await webApi.authFetch<VaultResponse>('Vault', { method: 'GET', headers: {
+      'Authorization': `Bearer ${token}`
+    } });
+
+    const vaultError = webApi.validateVaultResponse(vaultResponseJson, t);
+    if (vaultError) {
+      setError(vaultError);
+      hideLoading();
+      return;
+    }
+
+    // All is good. Store auth info which is required to make requests to the web API.
+    await authContext.setAuthTokens(username, token, refreshToken);
+
+    // Store the encryption key and derivation params separately
+    await dbContext.storeEncryptionKey(passwordHashBase64);
+    await dbContext.storeEncryptionKeyDerivationParams({
+      salt: loginResponse.salt,
+      encryptionType: loginResponse.encryptionType,
+      encryptionSettings: loginResponse.encryptionSettings
+    });
+
+    // Initialize the SQLite context with the new vault data.
+    const sqliteClient = await dbContext.initializeDatabase(vaultResponseJson, passwordHashBase64);
+
+    // Set logged in status to true which refreshes the app.
+    await authContext.login();
+
+    // If there are pending migrations, redirect to the upgrade page.
+    try {
+      if (await sqliteClient.hasPendingMigrations()) {
+        navigate('/upgrade', { replace: true });
+        hideLoading();
+        return;
+      }
+    } catch (err) {
+      await authContext.logout();
+      setError(err instanceof Error ? err.message : t('auth.errors.migrationError'));
+      hideLoading();
+      return;
+    }
+
+    // Navigate to reinitialize page which will take care of the proper redirect.
+    navigate('/reinitialize', { replace: true });
+
+    // Show app.
+    hideLoading();
+  };
+
   useEffect(() => {
     /**
      * Load the client URL from the storage.
@@ -58,6 +127,25 @@ const Login: React.FC = () => {
     loadClientUrl();
   }, [setIsInitialLoading]);
 
+  // Set header buttons on mount and clear on unmount
+  useEffect((): (() => void) => {
+    const headerButtonsJSX = !PopoutUtility.isPopup() ? (
+      <>
+        <HeaderButton
+          onClick={() => PopoutUtility.openInNewPopup()}
+          title="Open in new window"
+          iconType={HeaderIconType.EXPAND}
+        />
+      </>
+    ) : null;
+
+    setHeaderButtons(headerButtonsJSX);
+
+    return () => {
+      setHeaderButtons(null);
+    };
+  }, [setHeaderButtons]);
+
   /**
    * Handle submit
    */
@@ -112,38 +200,23 @@ const Login: React.FC = () => {
 
       // Check if token was returned.
       if (!validationResponse.token) {
-        throw new Error('Login failed -- no token returned');
+        throw new Error(t('auth.errors.noToken'));
       }
 
-      // Try to get latest vault manually providing auth token.
-      const vaultResponseJson = await webApi.authFetch<VaultResponse>('Vault', { method: 'GET', headers: {
-        'Authorization': `Bearer ${validationResponse.token.token}`
-      } });
-
-      const vaultError = webApi.validateVaultResponse(vaultResponseJson);
-      if (vaultError) {
-        setError(vaultError);
-        hideLoading();
-        return;
-      }
-
-      // All is good. Store auth info which is required to make requests to the web API.
-      await authContext.setAuthTokens(ConversionUtility.normalizeUsername(credentials.username), validationResponse.token.token, validationResponse.token.refreshToken);
-
-      // Initialize the SQLite context with the new vault data.
-      await dbContext.initializeDatabase(vaultResponseJson, passwordHashBase64);
-
-      // Set logged in status to true which refreshes the app.
-      await authContext.login();
-
-      // Show app.
-      hideLoading();
+      // Handle successful authentication
+      await handleSuccessfulAuth(
+        ConversionUtility.normalizeUsername(credentials.username),
+        validationResponse.token.token,
+        validationResponse.token.refreshToken,
+        passwordHashBase64,
+        loginResponse
+      );
     } catch (err) {
       // Show API authentication errors as-is.
       if (err instanceof ApiAuthError) {
-        setError(err.message);
+        setError(t('common.apiErrors.' + err.message));
       } else {
-        setError('Could not reach AliasVault server. Please try again later or contact support if the problem persists.');
+        setError(t('auth.errors.serverError'));
       }
       hideLoading();
     }
@@ -160,13 +233,13 @@ const Login: React.FC = () => {
       showLoading();
 
       if (!passwordHashString || !passwordHashBase64 || !loginResponse) {
-        throw new Error('Required login data not found');
+        throw new Error(t('auth.errors.loginDataMissing'));
       }
 
       // Validate that 2FA code is a 6-digit number
       const code = twoFactorCode.trim();
       if (!/^\d{6}$/.test(code)) {
-        throw new ApiAuthError('Please enter a valid 6-digit authentication code.');
+        throw new Error(t('auth.errors.invalidCode'));
       }
 
       const validationResponse = await srpUtil.validateLogin2Fa(
@@ -179,29 +252,17 @@ const Login: React.FC = () => {
 
       // Check if token was returned.
       if (!validationResponse.token) {
-        throw new Error('Login failed -- no token returned');
+        throw new Error(t('auth.errors.noToken'));
       }
 
-      // Try to get latest vault manually providing auth token.
-      const vaultResponseJson = await webApi.authFetch<VaultResponse>('Vault', { method: 'GET', headers: {
-        'Authorization': `Bearer ${validationResponse.token.token}`
-      } });
-
-      const vaultError = webApi.validateVaultResponse(vaultResponseJson);
-      if (vaultError) {
-        setError(vaultError);
-        hideLoading();
-        return;
-      }
-
-      // All is good. Store auth info which is required to make requests to the web API.
-      await authContext.setAuthTokens(ConversionUtility.normalizeUsername(credentials.username), validationResponse.token.token, validationResponse.token.refreshToken);
-
-      // Initialize the SQLite context with the new vault data.
-      await dbContext.initializeDatabase(vaultResponseJson, passwordHashBase64);
-
-      // Set logged in status to true which refreshes the app.
-      await authContext.login();
+      // Handle successful authentication
+      await handleSuccessfulAuth(
+        ConversionUtility.normalizeUsername(credentials.username),
+        validationResponse.token.token,
+        validationResponse.token.refreshToken,
+        passwordHashBase64,
+        loginResponse
+      );
 
       // Reset 2FA state and login response as it's no longer needed
       setTwoFactorRequired(false);
@@ -209,14 +270,13 @@ const Login: React.FC = () => {
       setPasswordHashString(null);
       setPasswordHashBase64(null);
       setLoginResponse(null);
-      hideLoading();
     } catch (err) {
       // Show API authentication errors as-is.
       console.error('2FA error:', err);
       if (err instanceof ApiAuthError) {
-        setError(err.message);
+        setError(t('common.apiErrors.' + err.message));
       } else {
-        setError('Could not reach AliasVault server. Please try again later or contact support if the problem persists.');
+        setError(t('auth.errors.serverError'));
       }
       hideLoading();
     }
@@ -235,7 +295,7 @@ const Login: React.FC = () => {
 
   if (twoFactorRequired) {
     return (
-      <div className="max-w-md">
+      <div>
         <form onSubmit={handleTwoFactorSubmit} className="bg-white dark:bg-gray-700 w-full shadow-md rounded px-8 pt-6 pb-8 mb-4">
           {error && (
             <div className="mb-4 text-red-500 dark:text-red-400 text-sm">
@@ -244,10 +304,10 @@ const Login: React.FC = () => {
           )}
           <div className="mb-6">
             <p className="text-gray-700 dark:text-gray-200 mb-4">
-              Please enter the authentication code from your authenticator app.
+              {t('auth.twoFactorTitle')}
             </p>
             <label className="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2" htmlFor="twoFactorCode">
-              Authentication Code
+              {t('auth.authCode')}
             </label>
             <input
               className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-800 dark:border-gray-600 leading-tight focus:outline-none focus:shadow-outline"
@@ -255,13 +315,13 @@ const Login: React.FC = () => {
               type="text"
               value={twoFactorCode}
               onChange={(e) => setTwoFactorCode(e.target.value)}
-              placeholder="Enter 6-digit code"
+              placeholder={t('auth.authCodePlaceholder')}
               required
             />
           </div>
           <div className="flex flex-col w-full space-y-2">
             <Button type="submit">
-              Verify
+              {t('auth.verify')}
             </Button>
             <Button
               type="button"
@@ -280,11 +340,11 @@ const Login: React.FC = () => {
               }}
               variant="secondary"
             >
-              Cancel
+              {t('auth.cancel')}
             </Button>
           </div>
           <p className="text-xs text-gray-500 dark:text-gray-400 mt-4 text-center">
-            Note: if you don&apos;t have access to your authenticator device, you can reset your 2FA with a recovery code by logging in via the website.
+            {t('auth.twoFactorNote')}
           </p>
         </form>
       </div>
@@ -292,44 +352,54 @@ const Login: React.FC = () => {
   }
 
   return (
-    <div className="max-w-md">
+    <div>
       <form onSubmit={handleSubmit} className="bg-white dark:bg-gray-700 w-full shadow-md rounded px-8 pt-6 pb-8 mb-4">
         {error && (
           <div className="mb-4 text-red-500 dark:text-red-400 text-sm">
             {error}
           </div>
         )}
-        <h2 className="text-xl font-bold dark:text-gray-200">Log in to AliasVault</h2>
+        <h2 className="text-xl font-bold dark:text-gray-200">{t('auth.loginTitle')}</h2>
         <LoginServerInfo />
         <div className="mb-4">
-          <label className="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2" htmlFor="username">
-            Username or email
+          <label className="block text-gray-700 dark:text-gray-200 font-bold mb-2" htmlFor="username">
+            {t('auth.username')}
           </label>
           <input
-            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-800 dark:border-gray-600 leading-tight focus:outline-none focus:shadow-outline"
+            className="shadow text-sm appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-800 dark:border-gray-600 leading-tight focus:outline-none focus:shadow-outline"
             id="username"
             type="text"
             name="username"
-            placeholder="name / name@company.com"
+            placeholder={t('auth.usernamePlaceholder')}
             value={credentials.username}
             onChange={handleChange}
             required
           />
         </div>
         <div className="mb-4">
-          <label className="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2" htmlFor="password">
-            Password
+          <label className="block text-gray-700 dark:text-gray-200 font-bold mb-2" htmlFor="password">
+            {t('auth.password')}
           </label>
-          <input
-            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-800 dark:border-gray-600 mb-3 leading-tight focus:outline-none focus:shadow-outline"
-            id="password"
-            type="password"
-            name="password"
-            placeholder="Enter your password"
-            value={credentials.password}
-            onChange={handleChange}
-            required
-          />
+          <div className="relative">
+            <input
+              className="shadow text-sm appearance-none border rounded w-full py-2 px-3 pr-10 text-gray-700 dark:text-gray-200 dark:bg-gray-800 dark:border-gray-600 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+              id="password"
+              type={showPassword ? "text" : "password"}
+              name="password"
+              placeholder={t('auth.passwordPlaceholder')}
+              value={credentials.password}
+              onChange={handleChange}
+              required
+            />
+            <button
+              type="button"
+              className="absolute right-2 top-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+              onClick={() => setShowPassword(!showPassword)}
+              tabIndex={-1}
+            >
+              <HeaderIcon type={showPassword ? HeaderIconType.EYE_OFF : HeaderIconType.EYE} className="w-5 h-5 text-gray-400 dark:text-gray-500" />
+            </button>
+          </div>
         </div>
         <div className="mb-6">
           <label className="flex items-center">
@@ -339,24 +409,24 @@ const Login: React.FC = () => {
               onChange={(e) => setRememberMe(e.target.checked)}
               className="mr-2"
             />
-            <span className="text-sm text-gray-700 dark:text-gray-200">Remember me</span>
+            <span className="text-sm text-gray-700 dark:text-gray-200">{t('auth.rememberMe')}</span>
           </label>
         </div>
         <div className="flex w-full">
           <Button type="submit">
-            Login
+            {t('auth.loginButton')}
           </Button>
         </div>
       </form>
-      <div className="text-center text-sm text-gray-600 dark:text-gray-400">
-        No account yet?{' '}
+      <div className="text-center text-gray-600 dark:text-gray-400">
+        {t('auth.noAccount')}{' '}
         <a
           href={clientUrl ?? ''}
           target="_blank"
           rel="noopener noreferrer"
           className="text-orange-500 hover:text-orange-600 dark:text-orange-400 dark:hover:text-orange-500"
         >
-          Create new vault
+          {t('auth.createVault')}
         </a>
       </div>
     </div>

apps/browser-extension/src/entrypoints/popup/pages/auth/Logout.tsx

@@ -20,7 +20,7 @@ const Logout: React.FC = () => {
      */
     const performLogout = async () : Promise<void> => {
       await webApi.logout();
-      navigate('/');
+      navigate('/login');
     };
 
     performLogout();

apps/browser-extension/src/entrypoints/popup/pages/auth/Unlock.tsx

@@ -0,0 +1,206 @@
+import { Buffer } from 'buffer';
+
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+import Button from '@/entrypoints/popup/components/Button';
+import HeaderButton from '@/entrypoints/popup/components/HeaderButton';
+import { HeaderIcon, HeaderIconType } from '@/entrypoints/popup/components/Icons/HeaderIcons';
+import { useAuth } from '@/entrypoints/popup/context/AuthContext';
+import { useDb } from '@/entrypoints/popup/context/DbContext';
+import { useHeaderButtons } from '@/entrypoints/popup/context/HeaderButtonsContext';
+import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
+import { useWebApi } from '@/entrypoints/popup/context/WebApiContext';
+import { PopoutUtility } from '@/entrypoints/popup/utils/PopoutUtility';
+import SrpUtility from '@/entrypoints/popup/utils/SrpUtility';
+
+import { VAULT_LOCKED_DISMISS_UNTIL_KEY } from '@/utils/Constants';
+import type { VaultResponse } from '@/utils/dist/shared/models/webapi';
+import EncryptionUtility from '@/utils/EncryptionUtility';
+
+import { storage } from '#imports';
+
+/**
+ * Unlock page
+ */
+const Unlock: React.FC = () => {
+  const { t } = useTranslation();
+  const authContext = useAuth();
+  const dbContext = useDb();
+  const navigate = useNavigate();
+  const { setHeaderButtons } = useHeaderButtons();
+
+  const webApi = useWebApi();
+  const srpUtil = new SrpUtility(webApi);
+
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { showLoading, hideLoading, setIsInitialLoading } = useLoading();
+
+  useEffect(() => {
+    /**
+     * Make status call to API which acts as health check.
+     */
+    const checkStatus = async () : Promise<void> => {
+      const statusResponse = await webApi.getStatus();
+      const statusError = webApi.validateStatusResponse(statusResponse);
+      if (statusError !== null) {
+        await webApi.logout(t('common.errors.' + statusError));
+        navigate('/logout');
+      }
+      setIsInitialLoading(false);
+    };
+
+    checkStatus();
+  }, [webApi, authContext, setIsInitialLoading, navigate, t]);
+
+  // Set header buttons on mount and clear on unmount
+  useEffect((): (() => void) => {
+    const headerButtonsJSX = !PopoutUtility.isPopup() ? (
+      <HeaderButton
+        onClick={() => PopoutUtility.openInNewPopup()}
+        title={t('common.openInNewWindow')}
+        iconType={HeaderIconType.EXPAND}
+      />
+    ) : null;
+
+    setHeaderButtons(headerButtonsJSX);
+
+    return () => {
+      setHeaderButtons(null);
+    };
+  }, [setHeaderButtons, t]);
+
+  /**
+   * Handle submit
+   */
+  const handleSubmit = async (e: React.FormEvent) : Promise<void> => {
+    e.preventDefault();
+    setError(null);
+    showLoading();
+
+    try {
+      // 1. Initiate login to get salt and server ephemeral
+      const loginResponse = await srpUtil.initiateLogin(authContext.username!);
+
+      // Derive key from password using user's encryption settings
+      const passwordHash = await EncryptionUtility.deriveKeyFromPassword(
+        password,
+        loginResponse.salt,
+        loginResponse.encryptionType,
+        loginResponse.encryptionSettings
+      );
+
+      // Make API call to get latest vault
+      const vaultResponseJson = await webApi.get<VaultResponse>('Vault');
+
+      const vaultError = webApi.validateVaultResponse(vaultResponseJson, t);
+      if (vaultError) {
+        setError(t('common.apiErrors.' + vaultError));
+        hideLoading();
+        return;
+      }
+
+      // Get the derived key as base64 string required for decryption.
+      const passwordHashBase64 = Buffer.from(passwordHash).toString('base64');
+
+      // Store the encryption key in session storage.
+      await dbContext.storeEncryptionKey(passwordHashBase64);
+
+      // Initialize the SQLite context with the new vault data.
+      await dbContext.initializeDatabase(vaultResponseJson, passwordHashBase64);
+
+      // Clear dismiss until (which can be enabled after user has dimissed vault is locked popup) to ensure popup is shown.
+      await storage.setItem(VAULT_LOCKED_DISMISS_UNTIL_KEY, 0);
+
+      // Redirect to reinitialize page
+      navigate('/reinitialize', { replace: true });
+    } catch (err) {
+      setError(t('auth.errors.wrongPassword'));
+      console.error('Unlock error:', err);
+    } finally {
+      hideLoading();
+    }
+  };
+
+  /**
+   * Handle logout
+   */
+  const handleLogout = () : void => {
+    navigate('/logout', { replace: true });
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit} className="bg-white dark:bg-gray-700 w-full shadow-md rounded px-8 pt-6 pb-8 mb-4">
+        {/* User Avatar and Username Section */}
+        <div className="flex items-center space-x-3 mb-6">
+          <div className="flex-shrink-0">
+            <div className="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
+              <span className="text-primary-600 dark:text-primary-400 text-lg font-medium">
+                {authContext.username?.[0]?.toUpperCase() || '?'}
+              </span>
+            </div>
+          </div>
+          <div>
+            <p className="font-medium text-gray-900 dark:text-white">
+              {authContext.username}
+            </p>
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              {t('auth.loggedIn')}
+            </p>
+          </div>
+        </div>
+
+        {/* Instruction Title */}
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+          {t('auth.unlockTitle')}
+        </h2>
+
+        {error && (
+          <div className="mb-4 text-red-500 dark:text-red-400">
+            {error}
+          </div>
+        )}
+
+        <div className="mb-2">
+          <label className="block text-gray-700 dark:text-gray-200 font-bold mb-2" htmlFor="password">
+            {t('auth.masterPassword')}
+          </label>
+          <div className="relative">
+            <input
+              className="shadow appearance-none border rounded w-full py-2 px-3 pr-10 text-gray-700 dark:text-gray-200 dark:bg-gray-800 dark:border-gray-600 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+              id="password"
+              type={showPassword ? "text" : "password"}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder={t('auth.passwordPlaceholder')}
+              required
+              autoFocus
+            />
+            <button
+              type="button"
+              className="absolute right-2 top-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+              onClick={() => setShowPassword(!showPassword)}
+              tabIndex={-1}
+            >
+              <HeaderIcon type={showPassword ? HeaderIconType.EYE_OFF : HeaderIconType.EYE} className="w-5 h-5 text-gray-400 dark:text-gray-500" />
+            </button>
+          </div>
+        </div>
+
+        <Button type="submit">
+          {t('auth.unlockVault')}
+        </Button>
+
+        <div className="font-medium text-gray-500 dark:text-gray-200 mt-6">
+          {t('auth.switchAccounts')} <button onClick={handleLogout} className="text-primary-700 hover:underline dark:text-primary-500">{t('auth.logout')}</button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default Unlock;

apps/browser-extension/src/entrypoints/popup/pages/auth/UnlockSuccess.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * Unlock success component shown when the vault is successfully unlocked in a separate popup
+ * asking the user if they want to close the popup.
+ */
+const UnlockSuccess: React.FC = () => {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  /**
+   * Handle browsing vault contents - navigate to credentials page and reset mode parameter
+   */
+  const handleBrowseVaultContents = (): void => {
+    // Remove mode=inline from URL before navigating
+    const url = new URL(window.location.href);
+    url.searchParams.delete('mode');
+    window.history.replaceState({}, '', url);
+
+    // Navigate to credentials page
+    navigate('/credentials');
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center p-6 text-center">
+      <div className="mb-4 text-green-600 dark:text-green-400">
+        <svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      </div>
+      <h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
+        {t('auth.unlockSuccessTitle')}
+      </h2>
+      <p className="mb-6 text-gray-600 dark:text-gray-400">
+        {t('auth.unlockSuccessDescription')}
+      </p>
+      <div className="space-y-3 w-full">
+        <button
+          onClick={() => window.close()}
+          className="w-full px-4 py-2 text-white bg-primary-600 rounded hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
+        >
+          {t('auth.closePopup')}
+        </button>
+        <button
+          onClick={handleBrowseVaultContents}
+          className="w-full px-4 py-2 text-gray-700 bg-gray-100 rounded hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+        >
+          {t('auth.browseVault')}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default UnlockSuccess;

apps/browser-extension/src/entrypoints/popup/pages/auth/Upgrade.tsx

@@ -0,0 +1,333 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+import Button from '@/entrypoints/popup/components/Button';
+import HeaderButton from '@/entrypoints/popup/components/HeaderButton';
+import { HeaderIconType } from '@/entrypoints/popup/components/Icons/HeaderIcons';
+import LoadingSpinner from '@/entrypoints/popup/components/LoadingSpinner';
+import Modal from '@/entrypoints/popup/components/Modal';
+import { useAuth } from '@/entrypoints/popup/context/AuthContext';
+import { useDb } from '@/entrypoints/popup/context/DbContext';
+import { useHeaderButtons } from '@/entrypoints/popup/context/HeaderButtonsContext';
+import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
+import { useWebApi } from '@/entrypoints/popup/context/WebApiContext';
+import { useVaultMutate } from '@/entrypoints/popup/hooks/useVaultMutate';
+import { useVaultSync } from '@/entrypoints/popup/hooks/useVaultSync';
+import { PopoutUtility } from '@/entrypoints/popup/utils/PopoutUtility';
+
+import type { VaultVersion } from '@/utils/dist/shared/vault-sql';
+import { VaultSqlGenerator } from '@/utils/dist/shared/vault-sql';
+
+/**
+ * Upgrade page for handling vault version upgrades.
+ */
+const Upgrade: React.FC = () => {
+  const { t } = useTranslation();
+  const { username } = useAuth();
+  const dbContext = useDb();
+  const { sqliteClient } = dbContext;
+  const { setHeaderButtons } = useHeaderButtons();
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentVersion, setCurrentVersion] = useState<VaultVersion | null>(null);
+  const [latestVersion, setLatestVersion] = useState<VaultVersion | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [showSelfHostedWarning, setShowSelfHostedWarning] = useState(false);
+  const [showVersionInfo, setShowVersionInfo] = useState(false);
+  const { setIsInitialLoading } = useLoading();
+  const webApi = useWebApi();
+  const { executeVaultMutation, isLoading: isVaultMutationLoading, syncStatus } = useVaultMutate();
+  const { syncVault } = useVaultSync();
+  const navigate = useNavigate();
+
+  // Set header buttons on mount and clear on unmount
+  useEffect((): (() => void) => {
+    const headerButtonsJSX = !PopoutUtility.isPopup() ? (
+      <>
+        <HeaderButton
+          onClick={() => PopoutUtility.openInNewPopup()}
+          title={t('common.openInNewWindow')}
+          iconType={HeaderIconType.EXPAND}
+        />
+      </>
+    ) : null;
+
+    setHeaderButtons(headerButtonsJSX);
+
+    return () => {
+      setHeaderButtons(null);
+    };
+  }, [setHeaderButtons, t]);
+
+  /**
+   * Load version information from the database.
+   */
+  const loadVersionInfo = useCallback(async () => {
+    try {
+      if (sqliteClient) {
+        const current = sqliteClient.getDatabaseVersion();
+        const latest = await sqliteClient.getLatestDatabaseVersion();
+        setCurrentVersion(current);
+        setLatestVersion(latest);
+      }
+      setIsInitialLoading(false);
+    } catch (error) {
+      console.error('Failed to load version information:', error);
+      setError(t('upgrade.alerts.unableToGetVersionInfo'));
+    }
+  }, [sqliteClient, setIsInitialLoading, t]);
+
+  useEffect(() => {
+    loadVersionInfo();
+  }, [loadVersionInfo]);
+
+  /**
+   * Handle the vault upgrade.
+   */
+  const handleUpgrade = async (): Promise<void> => {
+    if (!sqliteClient || !currentVersion || !latestVersion) {
+      setError(t('upgrade.alerts.unableToGetVersionInfo'));
+      return;
+    }
+
+    // Check if this is a self-hosted instance and show warning if needed
+    if (await webApi.isSelfHosted()) {
+      setShowSelfHostedWarning(true);
+      return;
+    }
+
+    await performUpgrade();
+  };
+
+  /**
+   * Perform the actual vault upgrade.
+   */
+  const performUpgrade = async (): Promise<void> => {
+    if (!sqliteClient || !currentVersion || !latestVersion) {
+      setError(t('upgrade.alerts.unableToGetVersionInfo'));
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // Get upgrade SQL commands from vault-sql shared library
+      const vaultSqlGenerator = new VaultSqlGenerator();
+      const upgradeResult = vaultSqlGenerator.getUpgradeVaultSql(currentVersion.revision, latestVersion.revision);
+
+      if (!upgradeResult.success) {
+        throw new Error(upgradeResult.error ?? t('upgrade.alerts.upgradeFailed'));
+      }
+
+      if (upgradeResult.sqlCommands.length === 0) {
+        // No upgrade needed, vault is already up to date
+        await handleUpgradeSuccess();
+        return;
+      }
+
+      // Use the useVaultMutate hook to handle the upgrade and vault upload
+      await executeVaultMutation(async () => {
+        // Begin transaction
+        sqliteClient.beginTransaction();
+
+        // Execute each SQL command
+        for (let i = 0; i < upgradeResult.sqlCommands.length; i++) {
+          const sqlCommand = upgradeResult.sqlCommands[i];
+
+          try {
+            sqliteClient.executeRaw(sqlCommand);
+          } catch (error) {
+            console.error(`Error executing SQL command ${i + 1}:`, sqlCommand, error);
+            sqliteClient.rollbackTransaction();
+            throw new Error(t('upgrade.alerts.failedToApplyMigration', { current: i + 1, total: upgradeResult.sqlCommands.length }));
+          }
+        }
+
+        // Commit transaction
+        sqliteClient.commitTransaction();
+      }, {
+        skipSyncCheck: true, // Skip sync check during upgrade to prevent loop
+        /**
+         * Handle successful upgrade completion.
+         */
+        onSuccess: () => {
+          void handleUpgradeSuccess();
+        },
+        /**
+         * Handle upgrade error.
+         */
+        onError: (error: Error) => {
+          console.error('Upgrade failed:', error);
+          setError(error.message);
+        }
+      });
+      console.debug('executeVaultMutation done?');
+    } catch (error) {
+      console.error('Upgrade failed:', error);
+      setError(error instanceof Error ? error.message : t('upgrade.alerts.unknownErrorDuringUpgrade'));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /**
+   * Handle successful upgrade completion.
+   */
+  const handleUpgradeSuccess = async (): Promise<void> => {
+    try {
+      // Sync vault to ensure we have the latest data
+      await syncVault({
+        /**
+         * Handle successful sync completion.
+         */
+        onSuccess: () => {
+          // Navigate to credentials page
+          navigate('/credentials');
+        },
+        /**
+         * Handle sync error.
+         * @param error Error message
+         */
+        onError: (error: string) => {
+          console.error('Sync error after upgrade:', error);
+          // Still navigate to credentials even if sync fails
+          navigate('/credentials');
+        }
+      });
+    } catch (error) {
+      console.error('Error during post-upgrade sync:', error);
+      // Navigate to credentials even if sync fails
+      navigate('/credentials');
+    }
+  };
+
+  /**
+   * Handle the logout.
+   */
+  const handleLogout = async (): Promise<void> => {
+    navigate('/logout');
+  };
+
+  /**
+   * Show version description dialog.
+   */
+  const showVersionDialog = (): void => {
+    setShowVersionInfo(true);
+  };
+
+  return (
+    <div>
+      {/* Full loading screen overlay */}
+      {(isLoading || isVaultMutationLoading) && (
+        <div className="fixed inset-0 flex flex-col justify-center items-center bg-white dark:bg-gray-900 bg-opacity-90 dark:bg-opacity-90 z-50">
+          <LoadingSpinner />
+          <div className="text-sm text-gray-500 mt-2">
+            {syncStatus || t('upgrade.upgrading')}
+          </div>
+        </div>
+      )}
+
+      {/* Self-hosted warning modal */}
+      <Modal
+        isOpen={showSelfHostedWarning}
+        onClose={() => setShowSelfHostedWarning(false)}
+        onConfirm={() => {
+          setShowSelfHostedWarning(false);
+          void performUpgrade();
+        }}
+        title={t('upgrade.alerts.selfHostedServer')}
+        message={t('upgrade.alerts.selfHostedWarning')}
+        confirmText={t('upgrade.alerts.continueUpgrade')}
+        cancelText={t('common.cancel')}
+      />
+
+      {/* Version info modal */}
+      <Modal
+        isOpen={showVersionInfo}
+        onClose={() => setShowVersionInfo(false)}
+        onConfirm={() => setShowVersionInfo(false)}
+        title={t('upgrade.whatsNew')}
+        message={`${t('upgrade.whatsNewDescription')}\n\n${latestVersion?.description ?? t('upgrade.noDescriptionAvailable')}`}
+      />
+
+      <form className="w-full px-2 pt-2 pb-2 mb-4">
+        {error && (
+          <div className="mb-4 text-red-500 dark:text-red-400">
+            {error}
+          </div>
+        )}
+
+        {/* User display section like settings page */}
+        <div className="flex items-center space-x-3 mb-4">
+          <div className="flex-shrink-0">
+            <div className="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
+              <span className="text-primary-600 dark:text-primary-400 text-lg font-medium">
+                {username?.[0]?.toUpperCase() || '?'}
+              </span>
+            </div>
+          </div>
+          <div>
+            <p className="font-medium text-gray-900 dark:text-white">
+              {username}
+            </p>
+          </div>
+        </div>
+
+        <h2 className="text-xl font-bold dark:text-gray-200 mb-4">{t('upgrade.title')}</h2>
+
+        <div className="mb-6">
+          <p className="text-gray-700 dark:text-gray-200 mb-4">
+            {t('upgrade.subtitle')}
+          </p>
+          <div className="bg-gray-50 dark:bg-gray-800 rounded p-4 mb-4">
+            <div className="flex items-center justify-between mb-2">
+              <span className="font-medium text-gray-700 dark:text-gray-200">{t('upgrade.versionInformation')}</span>
+              <button
+                type="button"
+                onClick={showVersionDialog}
+                className="bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold hover:bg-gray-300 dark:hover:bg-gray-500"
+                title={t('upgrade.whatsNew')}
+              >
+                ?
+              </button>
+            </div>
+            <div className="space-y-2">
+              <div className="flex justify-between items-center">
+                <span className="text-sm text-gray-600 dark:text-gray-400">{t('upgrade.yourVault')}</span>
+                <span className="text-sm font-bold text-orange-600 dark:text-orange-400">
+                  {currentVersion?.releaseVersion ?? '...'}
+                </span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-sm text-gray-600 dark:text-gray-400">{t('upgrade.newVersion')}</span>
+                <span className="text-sm font-bold text-green-600 dark:text-green-400">
+                  {latestVersion?.releaseVersion ?? '...'}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col w-full space-y-2">
+          <Button
+            type="button"
+            onClick={handleUpgrade}
+          >
+            {isLoading || isVaultMutationLoading ? (syncStatus || t('upgrade.upgrading')) : t('upgrade.upgrade')}
+          </Button>
+          <button
+            type="button"
+            onClick={handleLogout}
+            className="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 text-sm font-medium py-2"
+            disabled={isLoading || isVaultMutationLoading}
+          >
+            {t('upgrade.logout')}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default Upgrade;

apps/browser-extension/src/entrypoints/popup/pages/credentials/CredentialAddEdit.tsx

@@ -1,28 +1,32 @@
 import { Buffer } from 'buffer';
 
 import { yupResolver } from '@hookform/resolvers/yup';
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 import { sendMessage } from 'webext-bridge/popup';
 import * as Yup from 'yup';
 
+import AttachmentUploader from '@/entrypoints/popup/components/CredentialDetails/AttachmentUploader';
+import EmailDomainField from '@/entrypoints/popup/components/EmailDomainField';
 import { FormInput } from '@/entrypoints/popup/components/FormInput';
 import HeaderButton from '@/entrypoints/popup/components/HeaderButton';
 import { HeaderIconType } from '@/entrypoints/popup/components/Icons/HeaderIcons';
+import LoadingSpinner from '@/entrypoints/popup/components/LoadingSpinner';
 import Modal from '@/entrypoints/popup/components/Modal';
+import PasswordField from '@/entrypoints/popup/components/PasswordField';
+import UsernameField from '@/entrypoints/popup/components/UsernameField';
 import { useDb } from '@/entrypoints/popup/context/DbContext';
 import { useHeaderButtons } from '@/entrypoints/popup/context/HeaderButtonsContext';
+import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
 import { useWebApi } from '@/entrypoints/popup/context/WebApiContext';
 import { useVaultMutate } from '@/entrypoints/popup/hooks/useVaultMutate';
 
 import { IdentityHelperUtils, CreateIdentityGenerator, CreateUsernameEmailGenerator, Identity, Gender } from '@/utils/dist/shared/identity-generator';
-import type { Credential } from '@/utils/dist/shared/models/vault';
+import type { Attachment, Credential } from '@/utils/dist/shared/models/vault';
 import { CreatePasswordGenerator } from '@/utils/dist/shared/password-generator';
 
-import LoadingSpinner from '../components/LoadingSpinner';
-import { useLoading } from '../context/LoadingContext';
-
 type CredentialMode = 'random' | 'manual';
 
 // Persisted form data type used for JSON serialization.
@@ -32,52 +36,58 @@ type PersistedFormData = {
   formValues: Omit<Credential, 'Logo'> & { Logo?: string | null };
 }
 
-/**
- * Validation schema for the credential form.
- */
-const credentialSchema = Yup.object().shape({
-  Id: Yup.string(),
-  ServiceName: Yup.string().required('Service name is required'),
-  ServiceUrl: Yup.string().url('Invalid URL format').nullable().optional(),
-  Alias: Yup.object().shape({
-    FirstName: Yup.string().nullable().optional(),
-    LastName: Yup.string().nullable().optional(),
-    NickName: Yup.string().nullable().optional(),
-    BirthDate: Yup.string()
-      .nullable()
-      .optional()
-      .test(
-        'is-valid-date-format',
-        'Date must be in YYYY-MM-DD format',
-        value => {
-          if (!value) {
-            return true;
-          }
-          return /^\d{4}-\d{2}-\d{2}$/.test(value);
-        },
-      ),
-    Gender: Yup.string().nullable().optional(),
-    Email: Yup.string().email('Invalid email format').nullable().optional()
-  }),
-  Username: Yup.string().nullable().optional(),
-  Password: Yup.string().nullable().optional(),
-  Notes: Yup.string().nullable().optional()
-});
-
 /**
  * Add or edit credential page.
  */
 const CredentialAddEdit: React.FC = () => {
+  const { t } = useTranslation();
   const { id } = useParams();
   const navigate = useNavigate();
   const dbContext = useDb();
+  // If we received an ID, we're in edit mode
+  const isEditMode = id !== undefined && id.length > 0;
+
+  /**
+   * Validation schema for the credential form with translatable messages.
+   */
+  const credentialSchema = useMemo(() => Yup.object().shape({
+    Id: Yup.string(),
+    ServiceName: Yup.string().required(t('credentials.validation.serviceNameRequired')),
+    ServiceUrl: Yup.string().nullable().optional(),
+    Alias: Yup.object().shape({
+      FirstName: Yup.string().nullable().optional(),
+      LastName: Yup.string().nullable().optional(),
+      NickName: Yup.string().nullable().optional(),
+      BirthDate: Yup.string()
+        .nullable()
+        .optional()
+        .test(
+          'is-valid-date-format',
+          t('credentials.validation.invalidDateFormat'),
+          value => {
+            if (!value) {
+              return true;
+            }
+            return /^\d{4}-\d{2}-\d{2}$/.test(value);
+          },
+        ),
+      Gender: Yup.string().nullable().optional(),
+      Email: Yup.string().email(t('credentials.validation.invalidEmail')).nullable().optional()
+    }),
+    Username: Yup.string().nullable().optional(),
+    Password: Yup.string().nullable().optional(),
+    Notes: Yup.string().nullable().optional()
+  }), [t]);
+
   const { executeVaultMutation, isLoading, syncStatus } = useVaultMutate();
   const [mode, setMode] = useState<CredentialMode>('random');
   const { setHeaderButtons } = useHeaderButtons();
   const { setIsInitialLoading } = useLoading();
   const [localLoading, setLocalLoading] = useState(true);
-  const [showPassword, setShowPassword] = useState(false);
+  const [showPassword, setShowPassword] = useState(!isEditMode);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [originalAttachmentIds, setOriginalAttachmentIds] = useState<string[]>([]);
   const webApi = useWebApi();
 
   const serviceNameRef = useRef<HTMLInputElement>(null);
@@ -89,7 +99,7 @@ const CredentialAddEdit: React.FC = () => {
       Username: "",
       Password: "",
       ServiceName: "",
-      ServiceUrl: "",
+      ServiceUrl: "https://",
       Notes: "",
       Alias: {
         FirstName: "",
@@ -141,9 +151,6 @@ const CredentialAddEdit: React.FC = () => {
     return (): void => subscription.unsubscribe();
   }, [watch, persistFormValues]);
 
-  // If we received an ID, we're in edit mode
-  const isEditMode = id !== undefined && id.length > 0;
-
   /**
    * Loads persisted form values from storage. This is used to keep track of form changes
    * and restore them when the page is reloaded. The browser extension popup will close
@@ -223,7 +230,15 @@ const CredentialAddEdit: React.FC = () => {
       setIsInitialLoading(false);
 
       // Load persisted form values if they exist.
-      loadPersistedValues();
+      loadPersistedValues().then(() => {
+        // Generate default password if no persisted password exists
+        if (!watch('Password')) {
+          const passwordSettings = dbContext.sqliteClient!.getPasswordSettings();
+          const passwordGenerator = CreatePasswordGenerator(passwordSettings);
+          const defaultPassword = passwordGenerator.generateRandomPassword();
+          setValue('Password', defaultPassword);
+        }
+      });
       return;
     }
 
@@ -238,6 +253,11 @@ const CredentialAddEdit: React.FC = () => {
           setValue(key as keyof Credential, value);
         });
 
+        // Load attachments for this credential
+        const credentialAttachments = dbContext.sqliteClient.getAttachmentsForCredential(id);
+        setAttachments(credentialAttachments);
+        setOriginalAttachmentIds(credentialAttachments.map(a => a.Id));
+
         setMode('manual');
         setIsInitialLoading(false);
 
@@ -251,7 +271,7 @@ const CredentialAddEdit: React.FC = () => {
       console.error('Error loading credential:', err);
       setIsInitialLoading(false);
     }
-  }, [dbContext.sqliteClient, id, navigate, setIsInitialLoading, setValue, loadPersistedValues]);
+  }, [dbContext.sqliteClient, id, navigate, setIsInitialLoading, setValue, loadPersistedValues, watch]);
 
   /**
    * Handle the delete button click.
@@ -297,7 +317,11 @@ const CredentialAddEdit: React.FC = () => {
   const generateRandomAlias = useCallback(async () => {
     const { identityGenerator, passwordGenerator } = await initializeGenerators();
 
-    const identity = identityGenerator.generateRandomIdentity();
+    // Get gender preference from database
+    const genderPreference = dbContext.sqliteClient!.getDefaultIdentityGender();
+
+    // Generate identity with gender preference
+    const identity = identityGenerator.generateRandomIdentity(genderPreference);
     const password = passwordGenerator.generateRandomPassword();
 
     const metadata = await dbContext.getVaultMetadata();
@@ -364,16 +388,9 @@ const CredentialAddEdit: React.FC = () => {
     }
   }, [setValue, watch]);
 
-  const generateRandomPassword = useCallback(async () => {
-    try {
-      const { passwordGenerator } = await initializeGenerators();
-      const password = passwordGenerator.generateRandomPassword();
-      setValue('Password', password);
-      setShowPassword(true);
-    } catch (error) {
-      console.error('Error generating random password:', error);
-    }
-  }, [initializeGenerators, setValue]);
+  const initialPasswordSettings = useMemo(() => {
+    return dbContext.sqliteClient?.getPasswordSettings();
+  }, [dbContext.sqliteClient]);
 
   /**
    * Handle form submission.
@@ -385,6 +402,11 @@ const CredentialAddEdit: React.FC = () => {
       birthdate = IdentityHelperUtils.normalizeBirthDateForDb(birthdate);
     }
 
+    // Clean up empty protocol-only URLs
+    if (data.ServiceUrl === 'http://' || data.ServiceUrl === 'https://') {
+      data.ServiceUrl = '';
+    }
+
     // If we're creating a new credential and mode is random, generate random values here
     if (!isEditMode && mode === 'random') {
       // Generate random values now and then read them from the form fields to manually assign to the credentialToSave object
@@ -397,6 +419,9 @@ const CredentialAddEdit: React.FC = () => {
       data.Alias.BirthDate = birthdate;
       data.Alias.Gender = watch('Alias.Gender');
       data.Alias.Email = watch('Alias.Email');
+      // Clean up ServiceUrl for random mode too
+      const serviceUrl = watch('ServiceUrl');
+      data.ServiceUrl = (serviceUrl === 'http://' || serviceUrl === 'https://') ? '' : serviceUrl;
     }
 
     // Extract favicon from service URL if the credential has one
@@ -423,9 +448,9 @@ const CredentialAddEdit: React.FC = () => {
       setLocalLoading(false);
 
       if (isEditMode) {
-        await dbContext.sqliteClient!.updateCredentialById(data);
+        await dbContext.sqliteClient!.updateCredentialById(data, originalAttachmentIds, attachments);
       } else {
-        const credentialId = await dbContext.sqliteClient!.createCredential(data);
+        const credentialId = await dbContext.sqliteClient!.createCredential(data, attachments);
         data.Id = credentialId.toString();
       }
     }, {
@@ -444,7 +469,7 @@ const CredentialAddEdit: React.FC = () => {
         }
       },
     });
-  }, [isEditMode, dbContext.sqliteClient, executeVaultMutation, navigate, mode, watch, generateRandomAlias, webApi, clearPersistedValues]);
+  }, [isEditMode, dbContext.sqliteClient, executeVaultMutation, navigate, mode, watch, generateRandomAlias, webApi, clearPersistedValues, originalAttachmentIds, attachments]);
 
   // Set header buttons on mount and clear on unmount
   useEffect((): (() => void) => {
@@ -454,14 +479,14 @@ const CredentialAddEdit: React.FC = () => {
         {isEditMode && (
           <HeaderButton
             onClick={() => setShowDeleteModal(true)}
-            title="Delete credential"
+            title={t('credentials.deleteCredential')}
             iconType={HeaderIconType.DELETE}
             variant="danger"
           />
         )}
         <HeaderButton
           onClick={handleSubmit(onSubmit)}
-          title="Save credential"
+          title={t('credentials.saveCredential')}
           iconType={HeaderIconType.SAVE}
         />
       </div>
@@ -469,7 +494,7 @@ const CredentialAddEdit: React.FC = () => {
 
     setHeaderButtons(headerButtonsJSX);
     return () => {};
-  }, [setHeaderButtons, handleSubmit, onSubmit, isEditMode]);
+  }, [setHeaderButtons, handleSubmit, onSubmit, isEditMode, t]);
 
   // Clear header buttons on unmount
   useEffect((): (() => void) => {
@@ -477,7 +502,7 @@ const CredentialAddEdit: React.FC = () => {
   }, [setHeaderButtons]);
 
   if (isEditMode && !watch('ServiceName')) {
-    return <div>Loading...</div>;
+    return <div>{t('common.loading')}</div>;
   }
 
   return (
@@ -499,9 +524,10 @@ const CredentialAddEdit: React.FC = () => {
           setShowDeleteModal(false);
           void handleDelete();
         }}
-        title="Delete Credential"
-        message="Are you sure you want to delete this credential? This action cannot be undone."
-        confirmText="Delete"
+        title={t('credentials.deleteCredentialTitle')}
+        message={t('credentials.deleteCredentialConfirm')}
+        confirmText={t('common.delete')}
+        cancelText={t('common.cancel')}
         variant="danger"
       />
 
@@ -510,8 +536,8 @@ const CredentialAddEdit: React.FC = () => {
           <button
             type="button"
             onClick={() => setMode('random')}
-            className={`flex-1 py-2 px-4 rounded flex items-center justify-center gap-2 ${
-              mode === 'random' ? 'bg-primary-500 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
+            className={`flex-1 py-2 text-sm px-4 rounded flex items-center justify-center gap-2 ${
+              mode === 'random' ? 'bg-primary-500 text-white font-medium' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
             }`}
           >
             <svg className='w-5 h-5' viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
@@ -522,31 +548,31 @@ const CredentialAddEdit: React.FC = () => {
               <circle cx="8" cy="16" r="1"/>
               <circle cx="16" cy="16" r="1"/>
             </svg>
-            Random Alias
+            {t('credentials.randomAlias')}
           </button>
           <button
             type="button"
             onClick={() => setMode('manual')}
-            className={`flex-1 py-2 px-4 rounded flex items-center justify-center gap-2 ${
-              mode === 'manual' ? 'bg-primary-500 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
+            className={`flex-1 py-2 text-sm px-4 rounded flex items-center justify-center gap-2 ${
+              mode === 'manual' ? 'bg-primary-500 text-white font-medium' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
             }`}
           >
             <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
               <circle cx="12" cy="7" r="4"/>
               <path d="M5.5 20a6.5 6.5 0 0 1 13 0"/>
             </svg>
-            Manual
+            {t('credentials.manual')}
           </button>
         </div>
       )}
 
       <div className="space-y-4">
         <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
-          <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Service</h2>
+          <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">{t('credentials.service')}</h2>
           <div className="space-y-4">
             <FormInput
               id="serviceName"
-              label="Service Name"
+              label={t('credentials.serviceName')}
               ref={serviceNameRef}
               value={watch('ServiceName') ?? ''}
               onChange={(value) => setValue('ServiceName', value)}
@@ -555,7 +581,7 @@ const CredentialAddEdit: React.FC = () => {
             />
             <FormInput
               id="serviceUrl"
-              label="Service URL"
+              label={t('credentials.serviceUrl')}
               value={watch('ServiceUrl') ?? ''}
               onChange={(value) => setValue('ServiceUrl', value)}
               error={errors.ServiceUrl?.message}
@@ -566,91 +592,88 @@ const CredentialAddEdit: React.FC = () => {
         {(mode === 'manual' || isEditMode) && (
           <>
             <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
-              <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Login Credentials</h2>
+              <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">{t('credentials.loginCredentials')}</h2>
               <div className="space-y-4">
-                <FormInput
+                <EmailDomainField
+                  id="email"
+                  label={t('common.email')}
+                  value={watch('Alias.Email') ?? ''}
+                  onChange={(value: string) => setValue('Alias.Email', value)}
+                  error={errors.Alias?.Email?.message}
+                />
+                <UsernameField
                   id="username"
-                  label="Username"
+                  label={t('common.username')}
                   value={watch('Username') ?? ''}
                   onChange={(value) => setValue('Username', value)}
                   error={errors.Username?.message}
-                  buttons={[
-                    {
-                      icon: 'refresh',
-                      onClick: generateRandomUsername,
-                      title: 'Generate random username'
-                    }
-                  ]}
-                />
-                <FormInput
-                  id="password"
-                  label="Password"
-                  type="password"
-                  value={watch('Password') ?? ''}
-                  onChange={(value) => setValue('Password', value)}
-                  error={errors.Password?.message}
-                  showPassword={showPassword}
-                  onShowPasswordChange={setShowPassword}
-                  buttons={[
-                    {
-                      icon: 'refresh',
-                      onClick: generateRandomPassword,
-                      title: 'Generate random password'
-                    }
-                  ]}
-                />
-                <button
-                  type="button"
-                  onClick={handleGenerateRandomAlias}
-                  className="w-full bg-primary-500 text-white py-2 px-4 rounded hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
-                >
-                  Generate Random Alias
-                </button>
-                <FormInput
-                  id="email"
-                  label="Email"
-                  value={watch('Alias.Email') ?? ''}
-                  onChange={(value) => setValue('Alias.Email', value)}
-                  error={errors.Alias?.Email?.message}
+                  onRegenerate={generateRandomUsername}
                 />
+                {initialPasswordSettings && (
+                  <PasswordField
+                    id="password"
+                    label={t('common.password')}
+                    value={watch('Password') ?? ''}
+                    onChange={(value) => setValue('Password', value)}
+                    error={errors.Password?.message}
+                    showPassword={showPassword}
+                    onShowPasswordChange={setShowPassword}
+                    initialSettings={initialPasswordSettings}
+                  />
+                )}
               </div>
             </div>
 
             <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
-              <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Alias</h2>
+              <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">{t('credentials.alias')}</h2>
               <div className="space-y-4">
+                <button
+                  type="button"
+                  onClick={handleGenerateRandomAlias}
+                  className="w-full text-sm bg-primary-500 text-white py-2 px-4 rounded hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 flex items-center justify-center gap-2"
+                >
+                  <svg className='w-5 h-5 inline-block' viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                    <circle cx="8" cy="8" r="1"/>
+                    <circle cx="16" cy="8" r="1"/>
+                    <circle cx="12" cy="12" r="1"/>
+                    <circle cx="8" cy="16" r="1"/>
+                    <circle cx="16" cy="16" r="1"/>
+                  </svg>
+                  <span>{t('credentials.generateRandomAlias')}</span>
+                </button>
                 <FormInput
                   id="firstName"
-                  label="First Name"
+                  label={t('credentials.firstName')}
                   value={watch('Alias.FirstName') ?? ''}
                   onChange={(value) => setValue('Alias.FirstName', value)}
                   error={errors.Alias?.FirstName?.message}
                 />
                 <FormInput
                   id="lastName"
-                  label="Last Name"
+                  label={t('credentials.lastName')}
                   value={watch('Alias.LastName') ?? ''}
                   onChange={(value) => setValue('Alias.LastName', value)}
                   error={errors.Alias?.LastName?.message}
                 />
                 <FormInput
                   id="nickName"
-                  label="Nick Name"
+                  label={t('credentials.nickName')}
                   value={watch('Alias.NickName') ?? ''}
                   onChange={(value) => setValue('Alias.NickName', value)}
                   error={errors.Alias?.NickName?.message}
                 />
                 <FormInput
                   id="gender"
-                  label="Gender"
+                  label={t('credentials.gender')}
                   value={watch('Alias.Gender') ?? ''}
                   onChange={(value) => setValue('Alias.Gender', value)}
                   error={errors.Alias?.Gender?.message}
                 />
                 <FormInput
                   id="birthDate"
-                  label="Birth Date"
-                  placeholder="YYYY-MM-DD"
+                  label={t('credentials.birthDate')}
+                  placeholder={t('credentials.birthDatePlaceholder')}
                   value={watch('Alias.BirthDate') ?? ''}
                   onChange={(value) => setValue('Alias.BirthDate', value)}
                   error={errors.Alias?.BirthDate?.message}
@@ -659,11 +682,11 @@ const CredentialAddEdit: React.FC = () => {
             </div>
 
             <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
-              <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Metadata</h2>
+              <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">{t('credentials.metadata')}</h2>
               <div className="space-y-4">
                 <FormInput
                   id="notes"
-                  label="Notes"
+                  label={t('credentials.notes')}
                   value={watch('Notes') ?? ''}
                   onChange={(value) => setValue('Notes', value)}
                   multiline
@@ -672,6 +695,12 @@ const CredentialAddEdit: React.FC = () => {
                 />
               </div>
             </div>
+
+            <AttachmentUploader
+              attachments={attachments}
+              onAttachmentsChange={setAttachments}
+              originalAttachmentIds={originalAttachmentIds}
+            />
           </>
         )}
       </div>

apps/browser-extension/src/entrypoints/popup/pages/credentials/CredentialDetails.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import {
@@ -7,13 +8,15 @@ import {
   TotpBlock,
   LoginCredentialsBlock,
   AliasBlock,
-  NotesBlock
+  NotesBlock,
+  AttachmentBlock
 } from '@/entrypoints/popup/components/CredentialDetails';
 import HeaderButton from '@/entrypoints/popup/components/HeaderButton';
 import { HeaderIconType } from '@/entrypoints/popup/components/Icons/HeaderIcons';
 import { useDb } from '@/entrypoints/popup/context/DbContext';
 import { useHeaderButtons } from '@/entrypoints/popup/context/HeaderButtonsContext';
 import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
+import { PopoutUtility } from '@/entrypoints/popup/utils/PopoutUtility';
 
 import type { Credential } from '@/utils/dist/shared/models/vault';
 
@@ -21,6 +24,7 @@ import type { Credential } from '@/utils/dist/shared/models/vault';
  * Credential details page.
  */
 const CredentialDetails: React.FC = (): React.ReactElement => {
+  const { t } = useTranslation();
   const { id } = useParams();
   const navigate = useNavigate();
   const dbContext = useDb();
@@ -28,30 +32,11 @@ const CredentialDetails: React.FC = (): React.ReactElement => {
   const { setIsInitialLoading } = useLoading();
   const { setHeaderButtons } = useHeaderButtons();
 
-  /**
-   * Check if the current page is an expanded popup.
-   */
-  const isPopup = (): boolean => {
-    const urlParams = new URLSearchParams(window.location.search);
-    return urlParams.get('expanded') === 'true';
-  };
-
   /**
    * Open the credential details in a new expanded popup.
    */
   const openInNewPopup = useCallback((): void => {
-    const width = 800;
-    const height = 1000;
-    const left = window.screen.width / 2 - width / 2;
-    const top = window.screen.height / 2 - height / 2;
-
-    window.open(
-      `popup.html?expanded=true#/credentials/${id}`,
-      'CredentialDetails',
-      `width=${width},height=${height},left=${left},top=${top},popup=true`
-    );
-
-    window.close();
+    PopoutUtility.openInNewPopup(`/credentials/${id}`);
   }, [id]);
 
   /**
@@ -62,7 +47,7 @@ const CredentialDetails: React.FC = (): React.ReactElement => {
   }, [id, navigate]);
 
   useEffect(() => {
-    if (isPopup()) {
+    if (PopoutUtility.isPopup()) {
       window.history.replaceState({}, '', `popup.html#/credentials`);
       window.history.pushState({}, '', `popup.html#/credentials/${id}`);
     }
@@ -89,21 +74,23 @@ const CredentialDetails: React.FC = (): React.ReactElement => {
   useEffect((): (() => void) => {
     const headerButtonsJSX = (
       <div className="flex items-center gap-2">
-        <HeaderButton
-          onClick={openInNewPopup}
-          title="Open in new window"
-          iconType={HeaderIconType.EXPAND}
-        />
+        {!PopoutUtility.isPopup() && (
+          <HeaderButton
+            onClick={openInNewPopup}
+            title={t('common.openInNewWindow')}
+            iconType={HeaderIconType.EXPAND}
+          />
+        )}
         <HeaderButton
           onClick={handleEdit}
-          title="Edit credential"
+          title={t('credentials.editCredential')}
           iconType={HeaderIconType.EDIT}
         />
       </div>
     );
     setHeaderButtons(headerButtonsJSX);
     return () => {};
-  }, [setHeaderButtons, handleEdit, openInNewPopup]);
+  }, [setHeaderButtons, handleEdit, openInNewPopup, t]);
 
   // Clear header buttons on unmount
   useEffect((): (() => void) => {
@@ -111,7 +98,7 @@ const CredentialDetails: React.FC = (): React.ReactElement => {
   }, [setHeaderButtons]);
 
   if (!credential) {
-    return <div>Loading...</div>;
+    return <div>{t('common.loading')}</div>;
   }
 
   return (
@@ -128,6 +115,7 @@ const CredentialDetails: React.FC = (): React.ReactElement => {
       <LoginCredentialsBlock credential={credential} />
       <AliasBlock credential={credential} />
       <NotesBlock notes={credential.Notes} />
+      <AttachmentBlock credentialId={credential.Id} />
     </div>
   );
 };

apps/browser-extension/src/entrypoints/popup/pages/credentials/CredentialsList.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 import CredentialCard from '@/entrypoints/popup/components/CredentialCard';
@@ -11,6 +12,7 @@ import { useHeaderButtons } from '@/entrypoints/popup/context/HeaderButtonsConte
 import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
 import { useWebApi } from '@/entrypoints/popup/context/WebApiContext';
 import { useVaultSync } from '@/entrypoints/popup/hooks/useVaultSync';
+import { PopoutUtility } from '@/entrypoints/popup/utils/PopoutUtility';
 
 import type { Credential } from '@/utils/dist/shared/models/vault';
 
@@ -20,6 +22,7 @@ import { useMinDurationLoading } from '@/hooks/useMinDurationLoading';
  * Credentials list page.
  */
 const CredentialsList: React.FC = () => {
+  const { t } = useTranslation();
   const dbContext = useDb();
   const webApi = useWebApi();
   const navigate = useNavigate();
@@ -70,13 +73,15 @@ const CredentialsList: React.FC = () => {
         onError: async (error) => {
           console.error('Error syncing vault:', error);
           await webApi.logout('Error while syncing vault, please re-authenticate.');
+          navigate('/logout');
         },
       });
     } catch (err) {
       console.error('Error refreshing credentials:', err);
       await webApi.logout('Error while syncing vault, please re-authenticate.');
+      navigate('/logout');
     }
-  }, [dbContext, webApi, syncVault]);
+  }, [dbContext, webApi, syncVault, navigate]);
 
   /**
    * Get latest vault from server and refresh the credentials list.
@@ -85,13 +90,19 @@ const CredentialsList: React.FC = () => {
     setIsLoading(true);
     await onRefresh();
     setIsLoading(false);
-    setIsInitialLoading(false);
-  }, [onRefresh, setIsLoading, setIsInitialLoading]);
+  }, [onRefresh, setIsLoading]);
 
   // Set header buttons on mount and clear on unmount
   useEffect((): (() => void) => {
     const headerButtonsJSX = (
       <div className="flex items-center gap-2">
+        {!PopoutUtility.isPopup() && (
+          <HeaderButton
+            onClick={() => PopoutUtility.openInNewPopup()}
+            title="Open in new window"
+            iconType={HeaderIconType.EXPAND}
+          />
+        )}
         <HeaderButton
           onClick={handleAddCredential}
           title="Add new credential"
@@ -117,25 +128,30 @@ const CredentialsList: React.FC = () => {
         const results = dbContext.sqliteClient?.getAllCredentials() ?? [];
         setCredentials(results);
         setIsLoading(false);
+        setIsInitialLoading(false);
       }
     };
 
     refreshCredentials();
-  }, [dbContext?.sqliteClient, setIsLoading]);
+  }, [dbContext?.sqliteClient, setIsLoading, setIsInitialLoading]);
 
-  // Call syncVaultAndRefresh when the page first mounts
-  useEffect(() => {
-    syncVaultAndRefresh();
-  }, [syncVaultAndRefresh]);
-
-  // Add this function to filter credentials
-  const filteredCredentials = credentials.filter(cred => {
+  const filteredCredentials = credentials.filter(credential => {
     const searchLower = searchTerm.toLowerCase();
+
+    /**
+     * We filter credentials by searching in the following fields:
+     * - Service name
+     * - Username
+     * - Alias email
+     * - Service URL
+     * - Notes
+     */
     const searchableFields = [
-      cred.ServiceName?.toLowerCase(),
-      cred.Username?.toLowerCase(),
-      cred.Alias?.Email?.toLowerCase(),
-      cred.ServiceUrl?.toLowerCase()
+      credential.ServiceName?.toLowerCase(),
+      credential.Username?.toLowerCase(),
+      credential.Alias?.Email?.toLowerCase(),
+      credential.ServiceUrl?.toLowerCase(),
+      credential.Notes?.toLowerCase(),
     ];
     return searchableFields.some(field => field?.includes(searchLower));
   });
@@ -151,33 +167,32 @@ const CredentialsList: React.FC = () => {
   return (
     <div>
       <div className="flex justify-between items-center mb-4">
-        <h2 className="text-gray-900 dark:text-white text-xl">Credentials</h2>
+        <h2 className="text-gray-900 dark:text-white text-xl">{t('credentials.title')}</h2>
         <ReloadButton onClick={syncVaultAndRefresh} />
       </div>
 
       {credentials.length > 0 ? (
-        <input
-          type="text"
-          placeholder="Search credentials..."
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          autoFocus
-          className="w-full p-2 mb-4 border dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-blue-500 focus:border-blue-500"
-        />
+        <div className="mb-4">
+          <input
+            type="text"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            placeholder={`${t('content.searchVault')}`}
+            autoFocus
+            className="w-full p-2 border dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500"
+          />
+        </div>
       ) : (
         <></>
       )}
 
       {credentials.length === 0 ? (
         <div className="text-gray-500 dark:text-gray-400 space-y-2 mb-10">
-          <p className="text-sm">
-            Welcome to AliasVault!
+          <p>
+            {t('credentials.welcomeTitle')}
           </p>
-          <p className="text-sm">
-            To use the AliasVault browser extension: navigate to a website and use the AliasVault autofill popup to create a new credential.
-          </p>
-          <p className="text-sm">
-            If you want to create manual identities, open the full AliasVault app via the popout icon in the top right corner.
+          <p>
+            {t('credentials.welcomeDescription')}
           </p>
         </div>
       ) : (

apps/browser-extension/src/entrypoints/popup/pages/emails/EmailDetails.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useParams, useNavigate } from 'react-router-dom';
 
 import LoadingSpinner from '@/entrypoints/popup/components/LoadingSpinner';
@@ -8,19 +9,21 @@ import { useHeaderButtons } from '@/entrypoints/popup/context/HeaderButtonsConte
 import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
 import { useWebApi } from '@/entrypoints/popup/context/WebApiContext';
 import ConversionUtility from '@/entrypoints/popup/utils/ConversionUtility';
+import { PopoutUtility } from '@/entrypoints/popup/utils/PopoutUtility';
 
 import type { EmailAttachment, Email } from '@/utils/dist/shared/models/webapi';
 import EncryptionUtility from '@/utils/EncryptionUtility';
 
 import { useMinDurationLoading } from '@/hooks/useMinDurationLoading';
 
-import HeaderButton from '../components/HeaderButton';
-import { HeaderIconType } from '../components/Icons/HeaderIcons';
+import HeaderButton from '../../components/HeaderButton';
+import { HeaderIconType } from '../../components/Icons/HeaderIcons';
 
 /**
  * Email details page.
  */
 const EmailDetails: React.FC = (): React.ReactElement => {
+  const { t } = useTranslation();
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const dbContext = useDb();
@@ -29,13 +32,14 @@ const EmailDetails: React.FC = (): React.ReactElement => {
   const [email, setEmail] = useState<Email | null>(null);
   const [isLoading, setIsLoading] = useMinDurationLoading(true, 150);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showMetadata, setShowMetadata] = useState(false);
   const { setIsInitialLoading } = useLoading();
   const { setHeaderButtons } = useHeaderButtons();
   const [headerButtonsConfigured, setHeaderButtonsConfigured] = useState(false);
 
   useEffect(() => {
     // For popup windows, ensure we have proper history state for navigation
-    if (isPopup()) {
+    if (PopoutUtility.isPopup()) {
       // Clear existing history and create fresh entries
       window.history.replaceState({}, '', `popup.html#/emails`);
       window.history.pushState({}, '', `popup.html#/emails/${id}`);
@@ -76,7 +80,7 @@ const EmailDetails: React.FC = (): React.ReactElement => {
   const handleDelete = useCallback(async () : Promise<void> => {
     try {
       await webApi.delete(`Email/${id}`);
-      if (isPopup()) {
+      if (PopoutUtility.isPopup()) {
         window.close();
       } else {
         navigate('/emails');
@@ -87,30 +91,10 @@ const EmailDetails: React.FC = (): React.ReactElement => {
   }, [id, webApi, navigate]);
 
   /**
-   * Check if the current page is an expanded popup.
-   */
-  const isPopup = () : boolean => {
-    const urlParams = new URLSearchParams(window.location.search);
-    return urlParams.get('expanded') === 'true';
-  };
-
-  /**
-   * Open the credential details in a new expanded popup.
+   * Open the email details in a new expanded popup.
    */
   const openInNewPopup = useCallback((): void => {
-    const width = 800;
-    const height = 1000;
-    const left = window.screen.width / 2 - width / 2;
-    const top = window.screen.height / 2 - height / 2;
-
-    window.open(
-      `popup.html?expanded=true#/emails/${id}`,
-      'EmailDetails',
-      `width=${width},height=${height},left=${left},top=${top},popup=true`
-    );
-
-    // Close the current tab
-    window.close();
+    PopoutUtility.openInNewPopup(`/emails/${id}`);
   }, [id]);
 
   /**
@@ -165,14 +149,16 @@ const EmailDetails: React.FC = (): React.ReactElement => {
     if (!headerButtonsConfigured) {
       const headerButtonsJSX = (
         <div className="flex items-center gap-2">
-          <HeaderButton
-            onClick={openInNewPopup}
-            title="Open in new window"
-            iconType={HeaderIconType.EXPAND}
-          />
+          {!PopoutUtility.isPopup() && (
+            <HeaderButton
+              onClick={openInNewPopup}
+              title={t('common.openInNewWindow')}
+              iconType={HeaderIconType.EXPAND}
+            />
+          )}
           <HeaderButton
             onClick={() => setShowDeleteModal(true)}
-            title="Delete email"
+            title={t('emails.deleteEmail')}
             iconType={HeaderIconType.DELETE}
             variant="danger"
           />
@@ -183,7 +169,7 @@ const EmailDetails: React.FC = (): React.ReactElement => {
       setHeaderButtonsConfigured(true);
     }
     return () => {};
-  }, [setHeaderButtons, headerButtonsConfigured, openInNewPopup]);
+  }, [setHeaderButtons, headerButtonsConfigured, openInNewPopup, t]);
 
   // Clear header buttons on unmount
   useEffect((): (() => void) => {
@@ -199,11 +185,11 @@ const EmailDetails: React.FC = (): React.ReactElement => {
   }
 
   if (error) {
-    return <div className="text-red-500">Error: {error}</div>;
+    return <div className="text-red-500">{t('common.error')} {error}</div>;
   }
 
   if (!email) {
-    return <div className="text-gray-500">Email not found</div>;
+    return <div className="text-gray-500">{t('emails.emailNotFound')}</div>;
   }
 
   return (
@@ -215,35 +201,59 @@ const EmailDetails: React.FC = (): React.ReactElement => {
           setShowDeleteModal(false);
           void handleDelete();
         }}
-        title="Delete Email"
-        message="Are you sure you want to delete this email? This action cannot be undone."
-        confirmText="Delete"
+        title={t('emails.deleteEmailTitle')}
+        message={t('emails.deleteEmailConfirm')}
+        confirmText={t('common.delete')}
+        cancelText={t('common.cancel')}
         variant="danger"
       />
 
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md">
+      <div>
         {/* Header */}
-        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
-          <div className="flex justify-between items-start mb-4">
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">{email.subject}</h1>
-          </div>
-          <div className="space-y-1 text-sm text-gray-600 dark:text-gray-400">
-            <p>From: {email.fromDisplay} ({email.fromLocal}@{email.fromDomain})</p>
-            <p>To: {email.toLocal}@{email.toDomain}</p>
-            <p>Date: {new Date(email.dateSystem).toLocaleString()}</p>
+        <div>
+          <div className="flex justify-between items-start">
+            <div className="flex items-center gap-2">
+              <h1 className="text-lg font-bold text-gray-900 dark:text-white">{email.subject}</h1>
+              <button
+                onClick={() => setShowMetadata(!showMetadata)}
+                className="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                title={showMetadata ? t('common.hideDetails') : t('common.showDetails')}
+              >
+                <svg
+                  className={`w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform ${showMetadata ? 'rotate-180' : ''}`}
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
+          {showMetadata && (
+            <div className="space-y-1 text-sm text-gray-600 dark:text-gray-400 mt-2">
+              <p><span className="font-bold">{t('emails.from')}</span> <span title={email.fromLocal + "@" + email.fromDomain}>{email.fromDisplay}</span></p>
+              <p><span className="font-bold">{t('emails.to')}</span> <span title={email.toLocal + "@" + email.toDomain}>{email.toLocal}@{email.toDomain}</span></p>
+              <p><span className="font-bold">{t('emails.date')}</span> {new Date(email.dateSystem).toLocaleString()}</p>
+            </div>
+          )}
         </div>
 
         {/* Email Body */}
-        <div className="bg-white">
+        <div className="bg-white mt-4">
           {email.messageHtml ? (
             <iframe
               srcDoc={ConversionUtility.convertAnchorTagsToOpenInNewTab(email.messageHtml)}
               className="w-full min-h-[500px] border-0"
-              title="Email content"
+              title={t('emails.emailContent')}
             />
           ) : (
-            <pre className="whitespace-pre-wrap text-gray-700 dark:text-gray-300">
+            <pre className="whitespace-pre-wrap text-gray-800 p-3">
               {email.messagePlain}
             </pre>
           )}
@@ -253,7 +263,7 @@ const EmailDetails: React.FC = (): React.ReactElement => {
         {email.attachments && email.attachments.length > 0 && (
           <div className="p-6 border-t border-gray-200 dark:border-gray-700">
             <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">
-              Attachments
+              {t('emails.attachments')}
             </h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
               {email.attachments.map((attachment) => (

apps/browser-extension/src/entrypoints/popup/pages/emails/EmailsList.tsx

@@ -1,11 +1,16 @@
 import React, { useEffect, useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
+import HeaderButton from '@/entrypoints/popup/components/HeaderButton';
+import { HeaderIconType } from '@/entrypoints/popup/components/Icons/HeaderIcons';
 import LoadingSpinner from '@/entrypoints/popup/components/LoadingSpinner';
 import ReloadButton from '@/entrypoints/popup/components/ReloadButton';
 import { useDb } from '@/entrypoints/popup/context/DbContext';
+import { useHeaderButtons } from '@/entrypoints/popup/context/HeaderButtonsContext';
 import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
 import { useWebApi } from '@/entrypoints/popup/context/WebApiContext';
+import { PopoutUtility } from '@/entrypoints/popup/utils/PopoutUtility';
 
 import type { MailboxBulkRequest, MailboxBulkResponse, MailboxEmail } from '@/utils/dist/shared/models/webapi';
 import EncryptionUtility from '@/utils/EncryptionUtility';
@@ -16,8 +21,10 @@ import { useMinDurationLoading } from '@/hooks/useMinDurationLoading';
  * Emails list page.
  */
 const EmailsList: React.FC = () => {
+  const { t } = useTranslation();
   const dbContext = useDb();
   const webApi = useWebApi();
+  const { setHeaderButtons } = useHeaderButtons();
   const [error, setError] = useState<string | null>(null);
   const [emails, setEmails] = useState<MailboxEmail[]>([]);
   const { setIsInitialLoading } = useLoading();
@@ -59,20 +66,37 @@ const EmailsList: React.FC = () => {
         setEmails(decryptedEmails);
       } catch (error) {
         console.error(error);
-        throw new Error('Failed to load emails');
+        throw new Error(t('emails.errors.emailLoadError'));
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'An error occurred');
+      setError(err instanceof Error ? err.message : t('common.errors.unknownError'));
     } finally {
       setIsLoading(false);
       setIsInitialLoading(false);
     }
-  }, [dbContext?.sqliteClient, webApi, setIsLoading, setIsInitialLoading]);
+  }, [dbContext?.sqliteClient, webApi, setIsLoading, setIsInitialLoading, t]);
 
   useEffect(() => {
     loadEmails();
   }, [loadEmails]);
 
+  // Set header buttons on mount and clear on unmount
+  useEffect((): (() => void) => {
+    const headerButtonsJSX = !PopoutUtility.isPopup() ? (
+      <HeaderButton
+        onClick={() => PopoutUtility.openInNewPopup()}
+        title={t('common.openInNewWindow')}
+        iconType={HeaderIconType.EXPAND}
+      />
+    ) : null;
+
+    setHeaderButtons(headerButtonsJSX);
+
+    return () => {
+      setHeaderButtons(null);
+    };
+  }, [setHeaderButtons, t]);
+
   /**
    * Formats the date display for emails
    */
@@ -82,18 +106,26 @@ const EmailsList: React.FC = () => {
     const secondsAgo = Math.floor((now.getTime() - emailDate.getTime()) / 1000);
 
     if (secondsAgo < 60) {
-      return 'just now';
+      return t('emails.dateFormat.justNow');
     } else if (secondsAgo < 3600) {
       // Less than 1 hour ago
       const minutes = Math.floor(secondsAgo / 60);
-      return `${minutes} ${minutes === 1 ? 'min' : 'mins'} ago`;
+      if (minutes === 1) {
+        return t('emails.dateFormat.minutesAgo_single', { count: minutes });
+      } else {
+        return t('emails.dateFormat.minutesAgo_plural', { count: minutes });
+      }
     } else if (secondsAgo < 86400) {
       // Less than 24 hours ago
       const hours = Math.floor(secondsAgo / 3600);
-      return `${hours} ${hours === 1 ? 'hr' : 'hrs'} ago`;
+      if (hours === 1) {
+        return t('emails.dateFormat.hoursAgo_single', { count: hours });
+      } else {
+        return t('emails.dateFormat.hoursAgo_plural', { count: hours });
+      }
     } else if (secondsAgo < 172800) {
       // Less than 48 hours ago
-      return 'yesterday';
+      return t('emails.dateFormat.yesterday');
     } else {
       // Older than 48 hours
       return emailDate.toLocaleDateString('en-GB', {
@@ -112,19 +144,19 @@ const EmailsList: React.FC = () => {
   }
 
   if (error) {
-    return <div className="text-red-500">Error: {error}</div>;
+    return <div className="text-red-500">{t('common.error')}: {error}</div>;
   }
 
   if (emails.length === 0) {
     return (
       <div>
         <div className="flex justify-between items-center mb-4">
-          <h2 className="text-gray-900 dark:text-white text-xl">Emails</h2>
+          <h2 className="text-gray-900 dark:text-white text-xl">{t('emails.title')}</h2>
           <ReloadButton onClick={loadEmails} />
         </div>
         <div className="text-gray-500 dark:text-gray-400 space-y-2">
           <p className="text-sm">
-            You have not received any emails at your private email addresses yet. When you receive a new email, it will appear here.
+            {t('emails.noEmailsDescription')}
           </p>
         </div>
       </div>
@@ -134,7 +166,7 @@ const EmailsList: React.FC = () => {
   return (
     <div>
       <div className="flex justify-between items-center mb-4">
-        <h2 className="text-gray-900 dark:text-white text-xl">Emails</h2>
+        <h2 className="text-gray-900 dark:text-white text-xl">{t('emails.title')}</h2>
         <ReloadButton onClick={loadEmails} />
       </div>
       <div className="space-y-2">
@@ -145,14 +177,14 @@ const EmailsList: React.FC = () => {
             className="block p-4 bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
           >
             <div className="flex justify-between items-start mb-2">
-              <div className="text-sm text-gray-900 dark:text-white mb-1 font-bold">
+              <div className="text-gray-900 dark:text-white mb-1 font-bold">
                 {email.subject}
               </div>
               <div className="text-sm text-gray-500 dark:text-gray-400">
                 {formatEmailDate(email.dateSystem)}
               </div>
             </div>
-            <div className="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">
+            <div className="text-gray-600 text-sm dark:text-gray-300 line-clamp-2">
               {email.messagePreview}
             </div>
           </Link>

apps/browser-extension/src/entrypoints/popup/pages/settings/AutoLockSettings.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { sendMessage } from 'webext-bridge/popup';
+
+import HelpModal from '@/entrypoints/popup/components/HelpModal';
+import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
+
+import { AUTO_LOCK_TIMEOUT_KEY } from '@/utils/Constants';
+
+import { storage } from "#imports";
+
+/**
+ * Auto-lock settings page component.
+ */
+const AutoLockSettings: React.FC = () => {
+  const { t } = useTranslation();
+  const { setIsInitialLoading } = useLoading();
+  const [autoLockTimeout, setAutoLockTimeout] = useState<number>(0);
+
+  useEffect(() => {
+    /**
+     * Load auto-lock settings.
+     */
+    const loadSettings = async () : Promise<void> => {
+      // Load auto-lock timeout
+      const autoLockTimeoutValue = await storage.getItem(AUTO_LOCK_TIMEOUT_KEY) as number ?? 0;
+      setAutoLockTimeout(autoLockTimeoutValue);
+      setIsInitialLoading(false);
+    };
+
+    loadSettings();
+  }, [setIsInitialLoading]);
+
+  /**
+   * Set auto-lock timeout.
+   */
+  const setAutoLockTimeoutSetting = async (timeout: number) : Promise<void> => {
+    await storage.setItem(AUTO_LOCK_TIMEOUT_KEY, timeout);
+    await sendMessage('SET_AUTO_LOCK_TIMEOUT', timeout, 'background');
+    setAutoLockTimeout(timeout);
+  };
+
+  return (
+    <div className="space-y-6">
+      <section>
+        <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-3">{t('settings.autoLockTimeout')}</h3>
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+          <div className="p-4">
+            <div>
+              <div className="flex items-center mb-2">
+                <p className="font-medium text-gray-900 dark:text-white">{t('settings.autoLockTimeout')}</p>
+                <HelpModal
+                  titleKey="settings.autoLockTimeout"
+                  contentKey="settings.autoLockTimeoutHelp"
+                  className="ml-2"
+                />
+              </div>
+              <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">{t('settings.autoLockTimeoutDescription')}</p>
+              <select
+                value={autoLockTimeout}
+                onChange={(e) => setAutoLockTimeoutSetting(Number(e.target.value))}
+                className="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md text-gray-900 dark:text-white focus:ring-primary-500 focus:border-primary-500"
+              >
+                <option value="0">{t('settings.autoLockNever')}</option>
+                <option value="15">{t('settings.autoLock15Seconds')}</option>
+                <option value="60">{t('settings.autoLock1Minute')}</option>
+                <option value="300">{t('settings.autoLock5Minutes')}</option>
+                <option value="900">{t('settings.autoLock15Minutes')}</option>
+                <option value="1800">{t('settings.autoLock30Minutes')}</option>
+                <option value="3600">{t('settings.autoLock1Hour')}</option>
+                <option value="14400">{t('settings.autoLock4Hours')}</option>
+                <option value="28800">{t('settings.autoLock8Hours')}</option>
+                <option value="86400">{t('settings.autoLock24Hours')}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default AutoLockSettings;

apps/browser-extension/src/entrypoints/popup/pages/settings/AutofillSettings.tsx

@@ -0,0 +1,260 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { AutofillMatchingMode } from '@/entrypoints/contentScript/Filter';
+import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
+
+import { 
+  DISABLED_SITES_KEY, 
+  GLOBAL_AUTOFILL_POPUP_ENABLED_KEY, 
+  TEMPORARY_DISABLED_SITES_KEY,
+  AUTOFILL_MATCHING_MODE_KEY 
+} from '@/utils/Constants';
+
+import { storage, browser } from "#imports";
+
+/**
+ * Autofill settings type.
+ */
+type AutofillSettingsType = {
+  disabledUrls: string[];
+  temporaryDisabledUrls: Record<string, number>;
+  currentUrl: string;
+  isEnabled: boolean;
+  isGloballyEnabled: boolean;
+}
+
+/**
+ * Autofill settings page component.
+ */
+const AutofillSettings: React.FC = () => {
+  const { t } = useTranslation();
+  const { setIsInitialLoading } = useLoading();
+  const [settings, setSettings] = useState<AutofillSettingsType>({
+    disabledUrls: [],
+    temporaryDisabledUrls: {},
+    currentUrl: '',
+    isEnabled: true,
+    isGloballyEnabled: true
+  });
+  const [autofillMatchingMode, setAutofillMatchingMode] = useState<AutofillMatchingMode>(AutofillMatchingMode.DEFAULT);
+
+  /**
+   * Get current tab in browser.
+   */
+  const getCurrentTab = async () : Promise<chrome.tabs.Tab> => {
+    const queryOptions = { active: true, currentWindow: true };
+    const [tab] = await browser.tabs.query(queryOptions);
+    return tab;
+  };
+
+  /**
+   * Load settings.
+   */
+  const loadSettings = useCallback(async () : Promise<void> => {
+    const tab = await getCurrentTab();
+    const currentUrl = new URL(tab.url ?? '').hostname;
+
+    // Load settings local storage.
+    const disabledUrls = await storage.getItem(DISABLED_SITES_KEY) as string[] ?? [];
+    const temporaryDisabledUrls = await storage.getItem(TEMPORARY_DISABLED_SITES_KEY) as Record<string, number> ?? {};
+    const isGloballyEnabled = await storage.getItem(GLOBAL_AUTOFILL_POPUP_ENABLED_KEY) !== false; // Default to true if not set
+
+    // Clean up expired temporary disables
+    const now = Date.now();
+    const cleanedTemporaryDisabledUrls = Object.fromEntries(
+      Object.entries(temporaryDisabledUrls).filter(([_, expiry]) => expiry > now)
+    );
+
+    if (Object.keys(cleanedTemporaryDisabledUrls).length !== Object.keys(temporaryDisabledUrls).length) {
+      await storage.setItem(TEMPORARY_DISABLED_SITES_KEY, cleanedTemporaryDisabledUrls);
+    }
+
+    // Load autofill matching mode
+    const matchingModeValue = await storage.getItem(AUTOFILL_MATCHING_MODE_KEY) as AutofillMatchingMode ?? AutofillMatchingMode.DEFAULT;
+    setAutofillMatchingMode(matchingModeValue);
+
+    setSettings({
+      disabledUrls,
+      temporaryDisabledUrls: cleanedTemporaryDisabledUrls,
+      currentUrl,
+      isEnabled: !disabledUrls.includes(currentUrl) && !(currentUrl in cleanedTemporaryDisabledUrls),
+      isGloballyEnabled
+    });
+    setIsInitialLoading(false);
+  }, [setIsInitialLoading]);
+
+  useEffect(() => {
+    loadSettings();
+  }, [loadSettings]);
+
+  /**
+   * Toggle current site.
+   */
+  const toggleCurrentSite = async () : Promise<void> => {
+    const { currentUrl, disabledUrls, temporaryDisabledUrls, isEnabled } = settings;
+
+    let newDisabledUrls = [...disabledUrls];
+    let newTemporaryDisabledUrls = { ...temporaryDisabledUrls };
+
+    if (isEnabled) {
+      // When disabling, add to permanent disabled list
+      if (!newDisabledUrls.includes(currentUrl)) {
+        newDisabledUrls.push(currentUrl);
+      }
+      // Also remove from temporary disabled list if present
+      delete newTemporaryDisabledUrls[currentUrl];
+    } else {
+      // When enabling, remove from both permanent and temporary disabled lists
+      newDisabledUrls = newDisabledUrls.filter(url => url !== currentUrl);
+      delete newTemporaryDisabledUrls[currentUrl];
+    }
+
+    await storage.setItem(DISABLED_SITES_KEY, newDisabledUrls);
+    await storage.setItem(TEMPORARY_DISABLED_SITES_KEY, newTemporaryDisabledUrls);
+
+    setSettings(prev => ({
+      ...prev,
+      disabledUrls: newDisabledUrls,
+      temporaryDisabledUrls: newTemporaryDisabledUrls,
+      isEnabled: !isEnabled
+    }));
+  };
+
+  /**
+   * Reset settings.
+   */
+  const resetSettings = async () : Promise<void> => {
+    await storage.setItem(DISABLED_SITES_KEY, []);
+    await storage.setItem(TEMPORARY_DISABLED_SITES_KEY, {});
+
+    setSettings(prev => ({
+      ...prev,
+      disabledUrls: [],
+      temporaryDisabledUrls: {},
+      isEnabled: true
+    }));
+  };
+
+  /**
+   * Toggle global popup.
+   */
+  const toggleGlobalPopup = async () : Promise<void> => {
+    const newGloballyEnabled = !settings.isGloballyEnabled;
+
+    await storage.setItem(GLOBAL_AUTOFILL_POPUP_ENABLED_KEY, newGloballyEnabled);
+
+    setSettings(prev => ({
+      ...prev,
+      isGloballyEnabled: newGloballyEnabled
+    }));
+  };
+
+  /**
+   * Set autofill matching mode.
+   */
+  const setAutofillMatchingModeSetting = async (mode: AutofillMatchingMode) : Promise<void> => {
+    await storage.setItem(AUTOFILL_MATCHING_MODE_KEY, mode);
+    setAutofillMatchingMode(mode);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Global Settings Section */}
+      <section>
+        <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-3">{t('settings.globalSettings')}</h3>
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+          <div className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="font-medium text-gray-900 dark:text-white">{t('settings.autofillPopup')}</p>
+                <p className={`text-sm mt-1 ${settings.isGloballyEnabled ? 'text-gray-600 dark:text-gray-400' : 'text-red-600 dark:text-red-400'}`}>
+                  {settings.isGloballyEnabled ? t('settings.activeOnAllSites') : t('settings.disabledOnAllSites')}
+                </p>
+              </div>
+              <button
+                onClick={toggleGlobalPopup}
+                className={`px-4 py-2 rounded-md transition-colors ${
+                  settings.isGloballyEnabled
+                    ? 'bg-green-500 hover:bg-green-600 text-white'
+                    : 'bg-red-500 hover:bg-red-600 text-white'
+                }`}
+              >
+                {settings.isGloballyEnabled ? t('settings.enabled') : t('settings.disabled')}
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Site-Specific Settings Section */}
+      {settings.isGloballyEnabled && (
+        <section>
+          <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-3">{t('settings.siteSpecificSettings')}</h3>
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+            <div className="p-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="font-medium text-gray-900 dark:text-white">{t('settings.autofillPopupOn')}{settings.currentUrl}</p>
+                  <p className={`text-sm mt-1 ${settings.isEnabled ? 'text-gray-600 dark:text-gray-400' : 'text-red-600 dark:text-red-400'}`}>
+                    {settings.isEnabled ? t('settings.enabledForThisSite') : t('settings.disabledForThisSite')}
+                  </p>
+                  {!settings.isEnabled && settings.temporaryDisabledUrls[settings.currentUrl] && (
+                    <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                      {t('settings.temporarilyDisabledUntil')}{new Date(settings.temporaryDisabledUrls[settings.currentUrl]).toLocaleTimeString()}
+                    </p>
+                  )}
+                </div>
+                {settings.isGloballyEnabled && (
+                  <button
+                    onClick={toggleCurrentSite}
+                    className={`px-4 py-2 ml-1 rounded-md transition-colors ${
+                      settings.isEnabled
+                        ? 'bg-green-500 hover:bg-green-600 text-white'
+                        : 'bg-red-500 hover:bg-red-600 text-white'
+                    }`}
+                  >
+                    {settings.isEnabled ? t('settings.enabled') : t('settings.disabled')}
+                  </button>
+                )}
+              </div>
+
+              <div className="mt-4">
+                <button
+                  onClick={resetSettings}
+                  className="w-full px-4 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md text-gray-700 dark:text-gray-300 transition-colors text-sm"
+                >
+                  {t('settings.resetAllSiteSettings')}
+                </button>
+              </div>
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* Autofill Matching Settings Section */}
+      <section>
+        <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-3">{t('settings.autofillMatching')}</h3>
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+          <div className="p-4">
+            <div>
+              <p className="font-medium text-gray-900 dark:text-white mb-2">{t('settings.autofillMatchingMode')}</p>
+              <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">{t('settings.autofillMatchingModeDescription')}</p>
+              <select
+                value={autofillMatchingMode}
+                onChange={(e) => setAutofillMatchingModeSetting(e.target.value as AutofillMatchingMode)}
+                className="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md text-gray-900 dark:text-white focus:ring-primary-500 focus:border-primary-500"
+              >
+                <option value={AutofillMatchingMode.DEFAULT}>{t('settings.autofillMatchingDefault')}</option>
+                <option value={AutofillMatchingMode.URL_SUBDOMAIN}>{t('settings.autofillMatchingUrlSubdomain')}</option>
+                <option value={AutofillMatchingMode.URL_EXACT}>{t('settings.autofillMatchingUrlExact')}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default AutofillSettings;

apps/browser-extension/src/entrypoints/popup/pages/settings/ClipboardSettings.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { sendMessage } from 'webext-bridge/popup';
+
+import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
+
+import { CLIPBOARD_CLEAR_TIMEOUT_KEY } from '@/utils/Constants';
+
+import { storage } from "#imports";
+
+/**
+ * Clipboard settings page component.
+ */
+const ClipboardSettings: React.FC = () => {
+  const { t } = useTranslation();
+  const { setIsInitialLoading } = useLoading();
+  const [clipboardTimeout, setClipboardTimeout] = useState<number>(10);
+
+  useEffect(() => {
+    /**
+     * Load clipboard settings.
+     */
+    const loadSettings = async () : Promise<void> => {
+      // Load clipboard clear timeout
+      const timeout = await storage.getItem(CLIPBOARD_CLEAR_TIMEOUT_KEY) as number ?? 10;
+      setClipboardTimeout(timeout);
+      setIsInitialLoading(false);
+    };
+
+    loadSettings();
+  }, [setIsInitialLoading]);
+
+  /**
+   * Set clipboard clear timeout.
+   */
+  const setClipboardClearTimeout = async (timeout: number) : Promise<void> => {
+    await storage.setItem(CLIPBOARD_CLEAR_TIMEOUT_KEY, timeout);
+    await sendMessage('SET_CLIPBOARD_CLEAR_TIMEOUT', timeout, 'background');
+    setClipboardTimeout(timeout);
+  };
+
+  return (
+    <div className="space-y-6">
+      <section>
+        <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-3">{t('settings.clipboardSettings')}</h3>
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+          <div className="p-4">
+            <div>
+              <p className="font-medium text-gray-900 dark:text-white mb-2">{t('settings.clipboardClearTimeout')}</p>
+              <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">{t('settings.clipboardClearTimeoutDescription')}</p>
+              <select
+                value={clipboardTimeout}
+                onChange={(e) => setClipboardClearTimeout(Number(e.target.value))}
+                className="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md text-gray-900 dark:text-white focus:ring-primary-500 focus:border-primary-500"
+              >
+                <option value="0">{t('settings.clipboardClearDisabled')}</option>
+                <option value="5">{t('settings.clipboardClear5Seconds')}</option>
+                <option value="10">{t('settings.clipboardClear10Seconds')}</option>
+                <option value="15">{t('settings.clipboardClear15Seconds')}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default ClipboardSettings;

apps/browser-extension/src/entrypoints/popup/pages/settings/ContextMenuSettings.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { sendMessage } from 'webext-bridge/popup';
+
+import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
+
+import { GLOBAL_CONTEXT_MENU_ENABLED_KEY } from '@/utils/Constants';
+
+import { storage } from "#imports";
+
+/**
+ * Context menu settings page component.
+ */
+const ContextMenuSettings: React.FC = () => {
+  const { t } = useTranslation();
+  const { setIsInitialLoading } = useLoading();
+  const [isContextMenuEnabled, setIsContextMenuEnabled] = useState<boolean>(true);
+
+  /**
+   * Load settings.
+   */
+  const loadSettings = useCallback(async () : Promise<void> => {
+    const isEnabled = await storage.getItem(GLOBAL_CONTEXT_MENU_ENABLED_KEY) !== false; // Default to true if not set
+    setIsContextMenuEnabled(isEnabled);
+    setIsInitialLoading(false);
+  }, [setIsInitialLoading]);
+
+  useEffect(() => {
+    loadSettings();
+  }, [loadSettings]);
+
+  /**
+   * Toggle context menu.
+   */
+  const toggleContextMenu = async () : Promise<void> => {
+    const newContextMenuEnabled = !isContextMenuEnabled;
+
+    await storage.setItem(GLOBAL_CONTEXT_MENU_ENABLED_KEY, newContextMenuEnabled);
+    await sendMessage('TOGGLE_CONTEXT_MENU', { enabled: newContextMenuEnabled }, 'background');
+
+    setIsContextMenuEnabled(newContextMenuEnabled);
+  };
+
+  return (
+    <div className="space-y-6">
+      <section>
+        <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-3">{t('settings.contextMenu')}</h3>
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+          <div className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="font-medium text-gray-900 dark:text-white">{t('settings.rightClickContextMenu')}</p>
+                <p className={`text-sm mt-1 ${isContextMenuEnabled ? 'text-gray-600 dark:text-gray-400' : 'text-red-600 dark:text-red-400'}`}>
+                  {isContextMenuEnabled ? t('settings.contextMenuEnabled') : t('settings.contextMenuDisabled')}
+                </p>
+                <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
+                  {t('settings.contextMenuDescription')}
+                </p>
+              </div>
+              <button
+                onClick={toggleContextMenu}
+                className={`px-4 py-2 rounded-md transition-colors ${
+                  isContextMenuEnabled
+                    ? 'bg-green-500 hover:bg-green-600 text-white'
+                    : 'bg-red-500 hover:bg-red-600 text-white'
+                }`}
+              >
+                {isContextMenuEnabled ? t('settings.enabled') : t('settings.disabled')}
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default ContextMenuSettings;

apps/browser-extension/src/entrypoints/popup/pages/settings/LanguageSettings.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import LanguageSwitcher from '@/entrypoints/popup/components/LanguageSwitcher';
+import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
+
+/**
+ * Language settings page component.
+ */
+const LanguageSettings: React.FC = () => {
+  const { t } = useTranslation();
+  const { setIsInitialLoading } = useLoading();
+
+  useEffect(() => {
+    // Mark initial loading as complete
+    setIsInitialLoading(false);
+  }, [setIsInitialLoading]);
+
+  return (
+    <div className="space-y-6">
+      <section>
+        <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-3">{t('settings.language')}</h3>
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+          <div className="p-4">
+            <div>
+              <p className="font-medium text-gray-900 dark:text-white mb-3">{t('settings.selectLanguage')}</p>
+              <LanguageSwitcher variant="dropdown" size="sm" />
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default LanguageSettings;

apps/browser-extension/src/entrypoints/popup/pages/settings/Settings.tsx

@@ -0,0 +1,447 @@
+import React, { useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+import HeaderButton from '@/entrypoints/popup/components/HeaderButton';
+import { HeaderIconType } from '@/entrypoints/popup/components/Icons/HeaderIcons';
+import { useAuth } from '@/entrypoints/popup/context/AuthContext';
+import { useHeaderButtons } from '@/entrypoints/popup/context/HeaderButtonsContext';
+import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
+import { useTheme } from '@/entrypoints/popup/context/ThemeContext';
+import { useApiUrl } from '@/entrypoints/popup/utils/ApiUrlUtility';
+import { PopoutUtility } from '@/entrypoints/popup/utils/PopoutUtility';
+
+import { AppInfo } from '@/utils/AppInfo';
+
+import { browser } from "#imports";
+
+/**
+ * Settings page component.
+ */
+const Settings: React.FC = () => {
+  const { t } = useTranslation();
+  const { theme, setTheme } = useTheme();
+  const authContext = useAuth();
+  const { setHeaderButtons } = useHeaderButtons();
+  const { setIsInitialLoading } = useLoading();
+  const { loadApiUrl, getDisplayUrl } = useApiUrl();
+  const navigate = useNavigate();
+
+  /**
+   * Open the client tab.
+   */
+  const openClientTab = async () : Promise<void> => {
+    const settingClientUrl = await browser.storage.local.get('clientUrl');
+    let clientUrl = AppInfo.DEFAULT_CLIENT_URL;
+    if (settingClientUrl?.clientUrl && settingClientUrl.clientUrl.length > 0) {
+      clientUrl = settingClientUrl.clientUrl;
+    }
+
+    window.open(clientUrl, '_blank');
+  };
+
+  // Set header buttons on mount and clear on unmount
+  useEffect((): (() => void) => {
+    const headerButtonsJSX = (
+      <div className="flex items-center gap-2">
+        {!PopoutUtility.isPopup() && (
+          <>
+            <HeaderButton
+              onClick={() => PopoutUtility.openInNewPopup()}
+              title={t('settings.openInNewWindow')}
+              iconType={HeaderIconType.EXPAND}
+            />
+          </>
+        )}
+        <HeaderButton
+          onClick={openClientTab}
+          title={t('settings.openWebApp')}
+          iconType={HeaderIconType.EXTERNAL_LINK}
+        />
+      </div>
+    );
+
+    setHeaderButtons(headerButtonsJSX);
+    return () => setHeaderButtons(null);
+  }, [setHeaderButtons, t]);
+
+  /**
+   * Load settings.
+   */
+  const loadSettings = useCallback(async () : Promise<void> => {
+    // Load API URL
+    await loadApiUrl();
+    setIsInitialLoading(false);
+  }, [setIsInitialLoading, loadApiUrl]);
+
+  useEffect(() => {
+    loadSettings();
+  }, [loadSettings]);
+
+  /**
+   * Set theme preference.
+   */
+  const setThemePreference = async (newTheme: 'system' | 'light' | 'dark') : Promise<void> => {
+    // Use the ThemeContext to apply the theme
+    setTheme(newTheme);
+  };
+
+  /**
+   * Open keyboard shortcuts configuration page.
+   */
+  const openKeyboardShortcuts = async (): Promise<void> => {
+    // Detect browser type using user agent
+    const userAgent = navigator.userAgent.toLowerCase();
+    const isFirefox = userAgent.includes('firefox');
+    const isSafari = userAgent.includes('safari') && !userAgent.includes('chrome');
+
+    if (isFirefox) {
+      await browser.tabs.create({ url: 'about:addons' });
+    } else if (isSafari) {
+      await browser.tabs.create({ url: 'safari-extension://shortcuts' });
+    } else {
+      // Chrome and other Chromium-based browsers
+      await browser.tabs.create({ url: 'chrome://extensions/shortcuts' });
+    }
+  };
+
+  /**
+   * Handle logout.
+   */
+  const handleLogout = async () : Promise<void> => {
+    navigate('/logout', { replace: true });
+  };
+
+  /**
+   * Navigate to autofill settings.
+   */
+  const navigateToAutofillSettings = () : void => {
+    navigate('/settings/autofill');
+  };
+
+  /**
+   * Navigate to clipboard settings.
+   */
+  const navigateToClipboardSettings = () : void => {
+    navigate('/settings/clipboard');
+  };
+
+  /**
+   * Navigate to language settings.
+   */
+  const navigateToLanguageSettings = () : void => {
+    navigate('/settings/language');
+  };
+
+  /**
+   * Navigate to auto-lock settings.
+   */
+  const navigateToAutoLockSettings = () : void => {
+    navigate('/settings/auto-lock');
+  };
+
+  /**
+   * Navigate to context menu settings.
+   */
+  const navigateToContextMenuSettings = () : void => {
+    navigate('/settings/context-menu');
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-gray-900 dark:text-white text-xl">{t('settings.title')}</h2>
+      </div>
+
+      {/* User Menu Section */}
+      <section>
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+          <div className="p-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-3">
+                <div className="flex-shrink-0">
+                  <div className="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
+                    <span className="text-primary-600 dark:text-primary-400 text-lg font-medium">
+                      {authContext.username?.[0]?.toUpperCase() || '?'}
+                    </span>
+                  </div>
+                </div>
+                <div>
+                  <p className="text font-medium text-gray-900 dark:text-white">
+                    {authContext.username}
+                  </p>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">
+                    {t('settings.loggedIn')}
+                  </p>
+                </div>
+              </div>
+              <button
+                onClick={handleLogout}
+                title={t('settings.logout')}
+                className="p-2 bg-red-100 hover:bg-red-200 dark:bg-red-900/30 dark:hover:bg-red-900/50 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 rounded-md transition-colors"
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  viewBox="0 0 24 24"
+                  aria-label={t('settings.logout')}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Settings Navigation Section */}
+      <section>
+        <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-3">{t('settings.preferences')}</h3>
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+          <div className="divide-y divide-gray-200 dark:divide-gray-700">
+            {/* Autofill Settings */}
+            <button
+              onClick={navigateToAutofillSettings}
+              className="w-full px-4 py-3 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+            >
+              <div className="flex items-center">
+                <svg
+                  className="w-5 h-5 mr-3 text-gray-600 dark:text-gray-400"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                  />
+                </svg>
+                <span className="text-gray-900 dark:text-white">{t('settings.autofillSettings')}</span>
+              </div>
+              <svg
+                className="w-4 h-4 text-gray-400"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+
+            {/* Context Menu Settings */}
+            <button
+              onClick={navigateToContextMenuSettings}
+              className="w-full px-4 py-3 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+            >
+              <div className="flex items-center">
+                <svg
+                  className="w-5 h-5 mr-3 text-gray-600 dark:text-gray-400"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M4 6h16M4 12h16m-7 6h7"
+                  />
+                </svg>
+                <span className="text-gray-900 dark:text-white">{t('settings.contextMenuSettings')}</span>
+              </div>
+              <svg
+                className="w-4 h-4 text-gray-400"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+
+            {/* Auto-lock Settings */}
+            <button
+              onClick={navigateToAutoLockSettings}
+              className="w-full px-4 py-3 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+            >
+              <div className="flex items-center">
+                <svg
+                  className="w-5 h-5 mr-3 text-gray-600 dark:text-gray-400"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+                  />
+                </svg>
+                <span className="text-gray-900 dark:text-white">{t('settings.autoLockTimeout')}</span>
+              </div>
+              <svg
+                className="w-4 h-4 text-gray-400"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+
+            {/* Clipboard Settings */}
+            <button
+              onClick={navigateToClipboardSettings}
+              className="w-full px-4 py-3 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+            >
+              <div className="flex items-center">
+                <svg
+                  className="w-5 h-5 mr-3 text-gray-600 dark:text-gray-400"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"
+                  />
+                </svg>
+                <span className="text-gray-900 dark:text-white">{t('settings.clipboardSettings')}</span>
+              </div>
+              <svg
+                className="w-4 h-4 text-gray-400"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+
+            {/* Language Settings */}
+            <button
+              onClick={navigateToLanguageSettings}
+              className="w-full px-4 py-3 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+            >
+              <div className="flex items-center">
+                <svg
+                  className="w-5 h-5 mr-3 text-gray-600 dark:text-gray-400"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"
+                  />
+                </svg>
+                <span className="text-gray-900 dark:text-white">{t('settings.language')}</span>
+              </div>
+              <svg
+                className="w-4 h-4 text-gray-400"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* Appearance Settings Section */}
+      <section>
+        <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-3">{t('settings.appearance')}</h3>
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+          <div className="p-4">
+            <div>
+              <p className="font-medium text-gray-900 dark:text-white mb-2">{t('settings.theme')}</p>
+              <div className="flex flex-col space-y-2">
+                <label className="flex items-center">
+                  <input
+                    type="radio"
+                    name="theme"
+                    value="system"
+                    checked={theme === 'system'}
+                    onChange={() => setThemePreference('system')}
+                    className="mr-2"
+                  />
+                  <span className="text-sm text-gray-700 dark:text-gray-300">{t('settings.useDefault')}</span>
+                </label>
+                <label className="flex items-center">
+                  <input
+                    type="radio"
+                    name="theme"
+                    value="light"
+                    checked={theme === 'light'}
+                    onChange={() => setThemePreference('light')}
+                    className="mr-2"
+                  />
+                  <span className="text-sm text-gray-700 dark:text-gray-300">{t('settings.light')}</span>
+                </label>
+                <label className="flex items-center">
+                  <input
+                    type="radio"
+                    name="theme"
+                    value="dark"
+                    checked={theme === 'dark'}
+                    onChange={() => setThemePreference('dark')}
+                    className="mr-2"
+                  />
+                  <span className="text-sm text-gray-700 dark:text-gray-300">{t('settings.dark')}</span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Keyboard Shortcuts Section */}
+      {import.meta.env.CHROME && (
+        <section>
+          <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-3">{t('settings.keyboardShortcuts')}</h3>
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+            <div className="p-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="font-medium text-gray-900 dark:text-white">{t('settings.configureKeyboardShortcuts')}</p>
+                </div>
+                <button
+                  onClick={openKeyboardShortcuts}
+                  className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors"
+                >
+                  {t('settings.configure')}
+                </button>
+              </div>
+            </div>
+          </div>
+        </section>
+      )}
+
+      <div className="text-center text-gray-400 dark:text-gray-600">
+        {t('settings.versionPrefix')}{AppInfo.VERSION} ({getDisplayUrl()})
+      </div>
+    </div>
+  );
+};
+
+export default Settings;

apps/browser-extension/src/entrypoints/popup/style.css

@@ -1,3 +1,7 @@
-body {
-  font-size: 75%;
+html {
+  font-size: 14px;
+}
+
+body {
+  font-size: 100%;
 }

apps/browser-extension/src/entrypoints/popup/utils/ApiUrlUtility.ts

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+
+import { AppInfo } from '@/utils/AppInfo';
+
+import { storage } from '#imports';
+
+/**
+ * Hook to manage API URL state and display logic.
+ * @returns Object containing apiUrl state and utility functions
+ */
+export const useApiUrl = (): {
+  apiUrl: string;
+  setApiUrl: (url: string) => void;
+  loadApiUrl: () => Promise<void>;
+  getDisplayUrl: () => string;
+} => {
+  const [apiUrl, setApiUrl] = useState<string>(AppInfo.DEFAULT_API_URL);
+
+  /**
+   * Load the API URL from storage.
+   */
+  const loadApiUrl = async (): Promise<void> => {
+    const storedUrl = await storage.getItem('local:apiUrl') as string;
+    if (storedUrl && storedUrl.length > 0) {
+      setApiUrl(storedUrl);
+    } else {
+      setApiUrl(AppInfo.DEFAULT_API_URL);
+    }
+  };
+
+  /**
+   * Get the display URL for UI presentation.
+   * @returns Formatted display URL
+   */
+  const getDisplayUrl = (): string => {
+    const cleanUrl = apiUrl.replace('https://', '').replace('http://', '').replace(':443', '').replace('/api', '');
+    return cleanUrl === 'app.aliasvault.net' ? 'aliasvault.net' : cleanUrl;
+  };
+
+  return {
+    apiUrl,
+    setApiUrl,
+    loadApiUrl,
+    getDisplayUrl,
+  };
+};

apps/browser-extension/src/entrypoints/popup/utils/PopoutUtility.ts

@@ -0,0 +1,44 @@
+/**
+ * Utility class for handling popup window operations
+ */
+export class PopoutUtility {
+  /**
+   * Check if the current page is an expanded popup.
+   * Uses both URL parameter detection and window width as fallback.
+   */
+  public static isPopup(): boolean {
+    // Primary method: Check URL parameter
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('expanded') === 'true') {
+      return true;
+    }
+
+    /**
+     * Fallback method: Check window width (popout windows are 800px wide)
+     * Regular popup extension windows are typically narrower (around 375-400px)
+     */
+    return window.innerWidth > 390;
+  }
+
+  /**
+   * Open the current page in a new expanded popup window.
+   * @param path - The path to open in the popup (defaults to current path)
+   */
+  public static openInNewPopup(path?: string): void {
+    const width = 800;
+    const height = 1000;
+    const left = window.screen.width / 2 - width / 2;
+    const top = window.screen.height / 2 - height / 2;
+
+    const currentPath = path || window.location.hash.replace('#', '');
+    const popupUrl = `popup.html?expanded=true#${currentPath}`;
+
+    window.open(
+      popupUrl,
+      'AliasVaultPopup',
+      `width=${width},height=${height},left=${left},top=${top},popup=true`
+    );
+
+    window.close();
+  }
+}

apps/browser-extension/src/i18n/StandaloneI18n.ts

@@ -0,0 +1,78 @@
+/**
+ * Standalone i18n for non-React contexts.
+ * This is used to translate strings in non-React contexts, such as the background and content scripts.
+ */
+
+import {
+  DEFAULT_LANGUAGE,
+  LANGUAGE_CODES,
+  loadTranslations,
+  getNestedValue
+} from './config';
+
+import { storage } from '#imports';
+
+/**
+ * Get current language from storage
+ */
+export async function getCurrentLanguage(): Promise<string> {
+  try {
+    // Use extension storage API exclusively (reliable across all contexts)
+    const langFromStorage = await storage.getItem('local:language') as string;
+    if (langFromStorage && LANGUAGE_CODES.includes(langFromStorage)) {
+      return langFromStorage;
+    }
+
+    // If no language is set in storage, detect browser language and save it
+    const browserLang = navigator.language.split('-')[0];
+    const detectedLanguage = LANGUAGE_CODES.includes(browserLang) ? browserLang : DEFAULT_LANGUAGE;
+
+    // Save the detected language to storage for future use
+    await storage.setItem('local:language', detectedLanguage);
+
+    return detectedLanguage;
+  } catch (error) {
+    console.error('Failed to get current language:', error);
+    return DEFAULT_LANGUAGE;
+  }
+}
+
+/**
+ * Translation function for non-React contexts
+ *
+ * @param key - Translation key (supports nested keys like 'auth.loginButton' or 'common.errors.networkError')
+ * @param fallback - Fallback text if translation is not found
+ * @returns Promise<string> - Translated text
+ */
+export async function t(
+  key: string,
+  fallback?: string
+): Promise<string> {
+  try {
+    const language = await getCurrentLanguage();
+    const translations = await loadTranslations(language);
+
+    // Support nested keys like 'auth.loginButton' or 'common.errors.networkError'
+    const value = getNestedValue(translations, key);
+
+    if (value && typeof value === 'string') {
+      return value;
+    }
+
+    // If translation not found and we're not using English, try English fallback
+    if (language !== DEFAULT_LANGUAGE) {
+      const englishTranslations = await loadTranslations(DEFAULT_LANGUAGE);
+      const englishValue = getNestedValue(englishTranslations, key);
+
+      if (englishValue && typeof englishValue === 'string') {
+        return englishValue;
+      }
+    }
+
+    // Return fallback or key if no translation found
+    return fallback || key;
+  } catch (error) {
+    console.error('Translation error:', error);
+    return fallback || key;
+  }
+}

apps/browser-extension/src/i18n/config.ts

@@ -0,0 +1,198 @@
+/**
+ * Central configuration for i18n languages
+ * Add new languages here to make them available throughout the application
+ */
+
+import deTranslations from './locales/de.json';
+import enTranslations from './locales/en.json';
+import fiTranslations from './locales/fi.json';
+import itTranslations from './locales/it.json';
+import nlTranslations from './locales/nl.json';
+import zhTranslations from './locales/zh.json';
+
+/**
+ * Create a map of all available languages and their resources for i18n.
+ * When adding a new language, add the translation JSON file to the locales folder and add the language to the map here.
+ */
+export const LANGUAGE_RESOURCES = {
+  de: {
+    translation: deTranslations
+  },
+  en: {
+    translation: enTranslations
+  },
+  fi: {
+    translation: fiTranslations
+  },
+  it: {
+    translation: itTranslations
+  },
+  nl: {
+    translation: nlTranslations
+  },
+  zh: {
+    translation: zhTranslations
+  },
+};
+
+/**
+ * List of all available languages with their code, name, native name and flag.
+ * When adding a new language, add the language to the map here.
+ */
+export const AVAILABLE_LANGUAGES: ILanguageConfig[] = [
+  {
+    code: 'de',
+    name: 'German',
+    nativeName: 'Deutsch',
+    flag: '🇩🇪'
+  },
+  {
+    code: 'en',
+    name: 'English',
+    nativeName: 'English',
+    flag: '🇺🇸'
+  },
+  {
+    code: 'fi',
+    name: 'Finnish',
+    nativeName: 'Suomi',
+    flag: '🇫🇮'
+  },
+  {
+    code: 'it',
+    name: 'Italian',
+    nativeName: 'Italiano',
+    flag: '🇮🇹'
+  },
+  {
+    code: 'nl',
+    name: 'Dutch',
+    nativeName: 'Nederlands',
+    flag: '🇳🇱'
+  },
+  {
+    code: 'zh',
+    name: 'Chinese',
+    nativeName: '简体中文',
+    flag: '🇨🇳'
+  },
+  /*
+   * {
+   * code: 'de',
+   * name: 'German',
+   * nativeName: 'Deutsch',
+   * flag: '🇩🇪'
+   * },
+   * {
+   *   code: 'es',
+   *   name: 'Spanish',
+   *   nativeName: 'Español',
+   *   flag: '🇪🇸'
+   * },
+   * {
+   *   code: 'fr',
+   *   name: 'French',
+   *   nativeName: 'Français',
+   *   flag: '🇫🇷'
+   * },
+   * {
+   *   code: 'uk',
+   *   name: 'Ukrainian',
+   *   nativeName: 'Українська',
+   *   flag: '🇺🇦'
+   * }
+   */
+];
+
+/**
+ * Default language that is used when no language is set in the browser or when a localized string is not found for the current language.
+ */
+export const DEFAULT_LANGUAGE = 'en';
+
+export const LANGUAGE_CODES = AVAILABLE_LANGUAGES.map(lang => lang.code);
+
+export interface ILanguageConfig {
+    code: string;
+    name: string;
+    nativeName: string;
+    flag?: string;
+  }
+
+/**
+ * Type for content translations
+ */
+export type ContentTranslations = {
+  [key: string]: string | ContentTranslations;
+};
+
+/**
+ * Cache for loaded translations to avoid repeated file reads
+ */
+const translationCache = new Map<string, ContentTranslations>();
+
+/**
+ * Load translations for a specific language
+ */
+export async function loadTranslations(language: string): Promise<ContentTranslations> {
+  const cacheKey = `all:${language}`;
+
+  // Check cache first
+  if (translationCache.has(cacheKey)) {
+    return translationCache.get(cacheKey)!;
+  }
+
+  // Get translations from pre-loaded resources
+  if (LANGUAGE_RESOURCES[language as keyof typeof LANGUAGE_RESOURCES]) {
+    const translationData = LANGUAGE_RESOURCES[language as keyof typeof LANGUAGE_RESOURCES].translation;
+    translationCache.set(cacheKey, translationData);
+    return translationData;
+  }
+
+  // Fallback to English if available
+  if (language !== DEFAULT_LANGUAGE && LANGUAGE_RESOURCES[DEFAULT_LANGUAGE]) {
+    console.warn(`Translations not found for ${language}, falling back to ${DEFAULT_LANGUAGE}`);
+    const fallbackData = LANGUAGE_RESOURCES[DEFAULT_LANGUAGE].translation;
+    translationCache.set(cacheKey, fallbackData);
+    return fallbackData;
+  }
+
+  // Return empty object as last resort
+  console.warn(`No translations found for ${language} and no fallback available`);
+  return {};
+}
+
+/**
+ * Load all available translations for i18next
+ */
+export async function loadAllTranslations(): Promise<Record<string, { translation: ContentTranslations }>> {
+  const resources: Record<string, { translation: ContentTranslations }> = {};
+
+  for (const language of AVAILABLE_LANGUAGES) {
+    try {
+      const translations = await loadTranslations(language.code);
+      resources[language.code] = { translation: translations };
+    } catch (error) {
+      console.warn(`Failed to load translations for ${language.code}:`, error);
+    }
+  }
+
+  return resources;
+}
+
+/**
+ * Get language config by code
+ */
+export function getLanguageConfig(code: string): ILanguageConfig | undefined {
+  return AVAILABLE_LANGUAGES.find(lang => lang.code === code);
+}
+
+/**
+ * Get nested value from object using dot notation
+ */
+export function getNestedValue(obj: Record<string, unknown>, path: string): unknown {
+  return path.split('.').reduce((current: unknown, key: string) => {
+    return current && typeof current === 'object' && current !== null && key in current
+      ? (current as Record<string, unknown>)[key]
+      : undefined;
+  }, obj);
+}

apps/browser-extension/src/i18n/i18n.ts

@@ -0,0 +1,62 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import {
+  DEFAULT_LANGUAGE,
+  LANGUAGE_CODES,
+  LANGUAGE_RESOURCES
+} from './config';
+
+import { storage } from '#imports';
+
+// Detect browser language
+/**
+ * Detect the user's preferred language from localStorage or browser settings
+ */
+const detectLanguage = async (): Promise<string> => {
+  // Check localStorage first
+  const stored = await storage.getItem('local:language') as string;
+  if (stored && LANGUAGE_CODES.includes(stored)) {
+    return stored;
+  }
+
+  // Fall back to browser language
+  const browserLang = navigator.language.split('-')[0];
+  return LANGUAGE_CODES.includes(browserLang) ? browserLang : DEFAULT_LANGUAGE;
+};
+
+/**
+ * Initialize i18n with async language detection
+ */
+const initI18n = async (): Promise<void> => {
+  const language = await detectLanguage();
+
+  await i18n
+    .use(initReactI18next)
+    .init({
+      resources: LANGUAGE_RESOURCES,
+      lng: language,
+      fallbackLng: DEFAULT_LANGUAGE,
+
+      debug: false, // Set to true for development debugging
+
+      interpolation: {
+        escapeValue: false // React already escapes
+      },
+
+      react: {
+        useSuspense: false, // Important for browser extensions
+        bindI18n: 'languageChanged loaded', // Bind to language change and loaded events
+        bindI18nStore: '' // Don't bind to resource store changes
+      }
+    });
+};
+
+// Initialize immediately and handle potential errors
+initI18n().catch((error) => {
+  console.error('Failed to initialize i18n:', error);
+  // Even if initialization fails, emit initialized event to prevent app from hanging
+  i18n.emit('initialized');
+});
+
+export default i18n;

apps/browser-extension/src/i18n/locales/ca.json

@@ -0,0 +1,392 @@
+{
+  "auth": {
+    "loginTitle": "Log in to AliasVault",
+    "username": "Username or email",
+    "usernamePlaceholder": "name / name@company.com",
+    "password": "Contrasenya",
+    "passwordPlaceholder": "Enter your password",
+    "rememberMe": "Remember me",
+    "loginButton": "Login",
+    "noAccount": "No account yet?",
+    "createVault": "Create new vault",
+    "twoFactorTitle": "Please enter the authentication code from your authenticator app.",
+    "authCode": "Codi d'autenticació",
+    "authCodePlaceholder": "Introduïu el codi de 6 dígits",
+    "verify": "Verifica",
+    "cancel": "Cancel",
+    "twoFactorNote": "Note: if you don't have access to your authenticator device, you can reset your 2FA with a recovery code by logging in via the website.",
+    "masterPassword": "Contrasenya Mestra",
+    "unlockVault": "Unlock Vault",
+    "unlockTitle": "Unlock Your Vault",
+    "unlockDescription": "Enter your master password to unlock your vault.",
+    "logout": "Tanca la sessió",
+    "logoutConfirm": "Are you sure you want to logout?",
+    "sessionExpired": "Your session has expired. Please log in again.",
+    "unlockSuccess": "Vault unlocked successfully!",
+    "unlockSuccessTitle": "Your vault is successfully unlocked",
+    "unlockSuccessDescription": "You can now use autofill in login forms in your browser.",
+    "closePopup": "Close this popup",
+    "browseVault": "Browse vault contents",
+    "connectingTo": "Connectant a",
+    "switchAccounts": "Switch accounts?",
+    "loggedIn": "Logged in",
+    "errors": {
+      "invalidCode": "Please enter a valid 6-digit authentication code.",
+      "serverError": "Could not reach AliasVault server. Please try again later or contact support if the problem persists.",
+      "noToken": "Login failed -- no token returned",
+      "migrationError": "An error occurred while checking for pending migrations.",
+      "wrongPassword": "Incorrect password. Please try again.",
+      "accountLocked": "Account temporarily locked due to too many failed attempts.",
+      "networkError": "Network error. Please check your connection and try again.",
+      "loginDataMissing": "Login session expired. Please try again."
+    }
+  },
+  "menu": {
+    "credentials": "Credentials",
+    "emails": "Emails",
+    "settings": "Settings"
+  },
+  "common": {
+    "appName": "AliasVault",
+    "loading": "S'està carregant...",
+    "error": "Error",
+    "success": "Success",
+    "cancel": "Cancel",
+    "use": "Utilitza",
+    "delete": "Suprimeix",
+    "close": "Tanca",
+    "copied": "Copied!",
+    "openInNewWindow": "Open in new window",
+    "language": "Language",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "showPassword": "Mostra la contrasenya",
+    "hidePassword": "Amaga la contrasenya",
+    "copyToClipboard": "Copy to clipboard",
+    "loadingEmails": "Loading emails...",
+    "loadingTotpCodes": "Loading TOTP codes...",
+    "attachments": "Attachments",
+    "loadingAttachments": "Loading attachments...",
+    "settings": "Settings",
+    "recentEmails": "Recent emails",
+    "loginCredentials": "Login credentials",
+    "twoFactorAuthentication": "Two-factor authentication",
+    "alias": "Alias",
+    "notes": "Notes",
+    "fullName": "Full Name",
+    "firstName": "First Name",
+    "lastName": "Last Name",
+    "birthDate": "Birth Date",
+    "nickname": "Nickname",
+    "email": "Email",
+    "username": "Username",
+    "password": "Password",
+    "syncingVault": "Syncing vault",
+    "savingChangesToVault": "Saving changes to vault",
+    "uploadingVaultToServer": "Uploading vault to server",
+    "checkingVaultUpdates": "Checking for vault updates",
+    "syncingUpdatedVault": "Syncing updated vault",
+    "executingOperation": "Executing operation...",
+    "loadMore": "Load more",
+    "errors": {
+      "VaultOutdated": "Your vault is outdated. Please login on the AliasVault website and follow the steps.",
+      "serverNotAvailable": "The AliasVault server is not available. Please try again later or contact support if the problem persists.",
+      "clientVersionNotSupported": "This version of the AliasVault browser extension is not supported by the server anymore. Please update your browser extension to the latest version.",
+      "serverVersionNotSupported": "The AliasVault server needs to be updated to a newer version in order to use this browser extension. Please contact support if you need help.",
+      "unknownError": "An unknown error occurred",
+      "failedToStoreVault": "Failed to store vault",
+      "vaultNotAvailable": "Vault not available",
+      "failedToRetrieveData": "Failed to retrieve data",
+      "vaultIsLocked": "Vault is locked",
+      "failedToUploadVault": "Failed to upload vault",
+      "passwordChanged": "Your password has changed since the last time you logged in. Please login again for security reasons."
+    },
+    "apiErrors": {
+      "UNKNOWN_ERROR": "An unknown error occurred. Please try again.",
+      "ACCOUNT_LOCKED": "Account temporarily locked due to too many failed attempts. Please try again later.",
+      "ACCOUNT_BLOCKED": "Your account has been disabled. If you believe this is a mistake, please contact support.",
+      "USER_NOT_FOUND": "Invalid username or password. Please try again.",
+      "INVALID_AUTHENTICATOR_CODE": "Invalid authenticator code. Please try again.",
+      "INVALID_RECOVERY_CODE": "Invalid recovery code. Please try again.",
+      "REFRESH_TOKEN_REQUIRED": "Refresh token is required.",
+      "INVALID_REFRESH_TOKEN": "Invalid refresh token.",
+      "REFRESH_TOKEN_REVOKED_SUCCESSFULLY": "Refresh token revoked successfully.",
+      "PUBLIC_REGISTRATION_DISABLED": "New account registration is currently disabled on this server. Please contact the administrator.",
+      "USERNAME_REQUIRED": "Username is required.",
+      "USERNAME_ALREADY_IN_USE": "Username is already in use.",
+      "USERNAME_AVAILABLE": "Username is available.",
+      "USERNAME_MISMATCH": "Username does not match the current user.",
+      "PASSWORD_MISMATCH": "The provided password does not match your current password.",
+      "ACCOUNT_SUCCESSFULLY_DELETED": "Account successfully deleted.",
+      "USERNAME_EMPTY_OR_WHITESPACE": "Username cannot be empty or whitespace.",
+      "USERNAME_TOO_SHORT": "Username too short: must be at least 3 characters long.",
+      "USERNAME_TOO_LONG": "Username too long: cannot be longer than 40 characters.",
+      "USERNAME_INVALID_EMAIL": "Invalid email address.",
+      "USERNAME_INVALID_CHARACTERS": "Username is invalid, can only contain letters or digits.",
+      "VAULT_NOT_UP_TO_DATE": "Your vault is not up-to-date. Please synchronize your vault and try again.",
+      "INTERNAL_SERVER_ERROR": "Internal server error.",
+      "VAULT_ERROR": "The local vault is not up-to-date. Please synchronize your vault by refreshing the page and try again."
+    }
+  },
+  "content": {
+    "or": "or",
+    "new": "New",
+    "cancel": "Cancel",
+    "search": "Search",
+    "vaultLocked": "AliasVault is locked.",
+    "creatingNewAlias": "Creating new alias...",
+    "noMatchesFound": "No matches found",
+    "searchVault": "Search vault...",
+    "serviceName": "Service name",
+    "email": "Email",
+    "username": "Username",
+    "password": "Password",
+    "enterServiceName": "Enter service name",
+    "enterEmailAddress": "Enter email address",
+    "enterUsername": "Enter username",
+    "hideFor1Hour": "Hide for 1 hour (current site)",
+    "hidePermanently": "Hide permanently (current site)",
+    "createRandomAlias": "Create random alias",
+    "createUsernamePassword": "Create username/password",
+    "randomAlias": "Random alias",
+    "usernamePassword": "Username/password",
+    "createAndSaveAlias": "Create and save alias",
+    "createAndSaveCredential": "Create and save credential",
+    "randomIdentityDescription": "Generate a random identity with a random email address accessible in AliasVault.",
+    "randomIdentityDescriptionDropdown": "Random identity with random email",
+    "manualCredentialDescription": "Specify your own email address and username.",
+    "manualCredentialDescriptionDropdown": "Manual username and password",
+    "failedToCreateIdentity": "Failed to create identity. Please try again.",
+    "enterEmailAndOrUsername": "Enter email and/or username",
+    "autofillWithAliasVault": "Autofill with AliasVault",
+    "generateRandomPassword": "Generate random password (copy to clipboard)",
+    "generateNewPassword": "Generate new password",
+    "togglePasswordVisibility": "Toggle password visibility",
+    "passwordCopiedToClipboard": "Password copied to clipboard",
+    "enterEmailAndOrUsernameError": "Enter email and/or username",
+    "openAliasVaultToUpgrade": "Open AliasVault to upgrade",
+    "vaultUpgradeRequired": "Vault upgrade required.",
+    "dismissPopup": "Dismiss popup"
+  },
+  "credentials": {
+    "title": "Credentials",
+    "addCredential": "Add Credential",
+    "editCredential": "Edit Credential",
+    "deleteCredential": "Delete Credential",
+    "credentialDetails": "Credential Details",
+    "serviceName": "Service Name",
+    "serviceNamePlaceholder": "e.g., Gmail, Facebook, Bank",
+    "website": "Website",
+    "websitePlaceholder": "https://example.com",
+    "username": "Username",
+    "usernamePlaceholder": "Enter username",
+    "password": "Password",
+    "passwordPlaceholder": "Enter password",
+    "generatePassword": "Generate Password",
+    "copyPassword": "Copy Password",
+    "showPassword": "Show Password",
+    "hidePassword": "Hide Password",
+    "notes": "Notes",
+    "notesPlaceholder": "Additional notes...",
+    "totp": "Two-Factor Authentication",
+    "totpCode": "TOTP Code",
+    "copyTotp": "Copy TOTP",
+    "totpSecret": "TOTP Secret",
+    "totpSecretPlaceholder": "Enter TOTP secret key",
+    "noCredentials": "No credentials found",
+    "noCredentialsDescription": "Add your first credential to get started",
+    "searchPlaceholder": "Search credentials...",
+    "welcomeTitle": "Welcome to AliasVault!",
+    "welcomeDescription": "To use the AliasVault browser extension: navigate to a website and use the AliasVault autofill popup to create a new credential.",
+    "createdAt": "Created",
+    "updatedAt": "Last updated",
+    "autofill": "Autofill",
+    "fillForm": "Fill Form",
+    "deleteConfirm": "Are you sure you want to delete this credential?",
+    "saveSuccess": "Credential saved successfully",
+    "tags": "Tags",
+    "addTag": "Add Tag",
+    "removeTag": "Remove Tag",
+    "folder": "Folder",
+    "selectFolder": "Select Folder",
+    "createFolder": "Create Folder",
+    "saveCredential": "Save credential",
+    "deleteCredentialTitle": "Delete Credential",
+    "deleteCredentialConfirm": "Are you sure you want to delete this credential? This action cannot be undone.",
+    "randomAlias": "Random Alias",
+    "manual": "Manual",
+    "service": "Service",
+    "serviceUrl": "Service URL",
+    "loginCredentials": "Login Credentials",
+    "generateRandomUsername": "Generate random username",
+    "generateRandomPassword": "Generate random password",
+    "changePasswordComplexity": "Change password complexity",
+    "passwordLength": "Password length",
+    "includeLowercase": "Include lowercase letters",
+    "includeUppercase": "Include uppercase letters",
+    "includeNumbers": "Include numbers",
+    "includeSpecialChars": "Include special characters",
+    "avoidAmbiguousChars": "Avoid ambiguous characters (o, 0, etc.)",
+    "generateNewPreview": "Generate new preview",
+    "generateRandomAlias": "Generate Random Alias",
+    "alias": "Alias",
+    "firstName": "First Name",
+    "lastName": "Last Name",
+    "nickName": "Nick Name",
+    "gender": "Gender",
+    "birthDate": "Birth Date",
+    "birthDatePlaceholder": "YYYY-MM-DD",
+    "metadata": "Metadata",
+    "validation": {
+      "required": "This field is required",
+      "serviceNameRequired": "Service name is required",
+      "invalidEmail": "Invalid email format",
+      "invalidDateFormat": "Date must be in YYYY-MM-DD format"
+    },
+    "privateEmailTitle": "Private Email",
+    "privateEmailAliasVaultServer": "AliasVault server",
+    "privateEmailDescription": "E2E encrypted, fully private.",
+    "publicEmailTitle": "Public Temp Email Providers",
+    "publicEmailDescription": "Anonymous but limited privacy. Email content is readable by anyone that knows the address.",
+    "useDomainChooser": "Use domain chooser",
+    "enterCustomDomain": "Enter custom domain",
+    "enterFullEmail": "Enter full email address",
+    "enterEmailPrefix": "Enter email prefix"
+  },
+  "emails": {
+    "title": "Emails",
+    "deleteEmailTitle": "Delete Email",
+    "deleteEmailConfirm": "Are you sure you want to permanently delete this email?",
+    "from": "From",
+    "to": "To",
+    "date": "Date",
+    "emailContent": "Email content",
+    "attachments": "Attachments",
+    "emailNotFound": "Email not found",
+    "noEmails": "No emails found",
+    "noEmailsDescription": "You have not received any emails at your private email addresses yet. When you receive a new email, it will appear here.",
+    "dateFormat": {
+      "justNow": "just now",
+      "minutesAgo_single": "{{count}} min ago",
+      "minutesAgo_plural": "{{count}} mins ago",
+      "hoursAgo_single": "{{count}} hr ago",
+      "hoursAgo_plural": "{{count}} hrs ago",
+      "yesterday": "yesterday"
+    },
+    "errors": {
+      "emailLoadError": "An error occurred while loading emails. Please try again later.",
+      "emailUnexpectedError": "An unexpected error occurred while loading emails. Please try again later."
+    },
+    "apiErrors": {
+      "CLAIM_DOES_NOT_MATCH_USER": "The current chosen email address is already in use. Please change the email address by editing this credential.",
+      "CLAIM_DOES_NOT_EXIST": "An error occurred while trying to load the emails. Please try to edit and save the credential entry to synchronize the database, then try again."
+    }
+  },
+  "settings": {
+    "title": "Settings",
+    "serverUrl": "Server URL",
+    "language": "Language",
+    "autofillEnabled": "Enable Autofill",
+    "version": "Version",
+    "openInNewWindow": "Open in new window",
+    "openWebApp": "Open web app",
+    "loggedIn": "Logged in",
+    "logout": "Logout",
+    "globalSettings": "Global Settings",
+    "autofillPopup": "Autofill popup",
+    "activeOnAllSites": "Active on all sites (unless disabled below)",
+    "disabledOnAllSites": "Disabled on all sites",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "rightClickContextMenu": "Right-click context menu",
+    "autofillMatching": "Autofill Matching",
+    "autofillMatchingMode": "Autofill matching mode",
+    "autofillMatchingModeDescription": "Determines which credentials are considered a match and shown as suggestions in the autofill popup for a given website.",
+    "autofillMatchingDefault": "URL + subdomain + name wildcard",
+    "autofillMatchingUrlSubdomain": "URL + subdomain",
+    "autofillMatchingUrlExact": "Exact URL domain only",
+    "siteSpecificSettings": "Site-Specific Settings",
+    "autofillPopupOn": "Autofill popup on: ",
+    "enabledForThisSite": "Enabled for this site",
+    "disabledForThisSite": "Disabled for this site",
+    "temporarilyDisabledUntil": "Temporarily disabled until ",
+    "resetAllSiteSettings": "Reset all site-specific settings",
+    "appearance": "Appearance",
+    "theme": "Theme",
+    "useDefault": "Use default",
+    "light": "Light",
+    "dark": "Dark",
+    "keyboardShortcuts": "Keyboard Shortcuts",
+    "configureKeyboardShortcuts": "Configure keyboard shortcuts",
+    "configure": "Configure",
+    "security": "Security",
+    "clipboardClearTimeout": "Clear clipboard after copying",
+    "clipboardClearTimeoutDescription": "Automatically clear the clipboard after copying sensitive data",
+    "clipboardClearDisabled": "Never clear",
+    "clipboardClear5Seconds": "Clear after 5 seconds",
+    "clipboardClear10Seconds": "Clear after 10 seconds",
+    "clipboardClear15Seconds": "Clear after 15 seconds",
+    "autoLockTimeout": "Auto-lock Timeout",
+    "autoLockTimeoutDescription": "Automatically lock the vault after a period of inactivity",
+    "autoLockTimeoutHelp": "The vault will only lock after the specified period of inactivity (no autofill usage or extension popup opened). The vault will always lock when the browser is closed, regardless of this setting.",
+    "autoLockNever": "Never",
+    "autoLock15Seconds": "15 seconds",
+    "autoLock1Minute": "1 minute",
+    "autoLock5Minutes": "5 minutes",
+    "autoLock15Minutes": "15 minutes",
+    "autoLock30Minutes": "30 minutes",
+    "autoLock1Hour": "1 hour",
+    "autoLock4Hours": "4 hours",
+    "autoLock8Hours": "8 hours",
+    "autoLock24Hours": "24 hours",
+    "versionPrefix": "Version ",
+    "preferences": "Preferences",
+    "autofillSettings": "Autofill Settings",
+    "clipboardSettings": "Clipboard Settings",
+    "contextMenuSettings": "Context Menu Settings",
+    "contextMenu": "Context Menu",
+    "contextMenuEnabled": "Context menu is enabled",
+    "contextMenuDisabled": "Context menu is disabled",
+    "contextMenuDescription": "Right-click on input fields to access AliasVault options",
+    "selectLanguage": "Select Language",
+    "validation": {
+      "apiUrlRequired": "API URL is required",
+      "apiUrlInvalid": "Please enter a valid API URL",
+      "clientUrlRequired": "Client URL is required",
+      "clientUrlInvalid": "Please enter a valid client URL"
+    }
+  },
+  "upgrade": {
+    "title": "Upgrade Vault",
+    "subtitle": "AliasVault has updated and your vault needs to be upgraded. This should only take a few seconds.",
+    "versionInformation": "Version Information",
+    "yourVault": "Your vault:",
+    "newVersion": "New version:",
+    "upgrade": "Upgrade Vault",
+    "upgrading": "Upgrading...",
+    "logout": "Logout",
+    "whatsNew": "What's New",
+    "whatsNewDescription": "An upgrade is required to support the following changes:",
+    "noDescriptionAvailable": "No description available for this version.",
+    "okay": "Ok",
+    "status": {
+      "preparingUpgrade": "Preparing upgrade...",
+      "vaultAlreadyUpToDate": "Vault is already up to date",
+      "startingDatabaseTransaction": "Starting database transaction...",
+      "applyingDatabaseMigrations": "Applying database migrations...",
+      "applyingMigration": "Applying migration {{current}} of {{total}}...",
+      "committingChanges": "Committing changes..."
+    },
+    "alerts": {
+      "error": "Error",
+      "unableToGetVersionInfo": "Unable to get version information. Please try again.",
+      "selfHostedServer": "Self-Hosted Server",
+      "selfHostedWarning": "If you're using a self-hosted server, make sure to also update your self-hosted instance as otherwise logging in to the web client will stop working.",
+      "cancel": "Cancel",
+      "continueUpgrade": "Continue Upgrade",
+      "upgradeFailed": "Upgrade Failed",
+      "failedToApplyMigration": "Failed to apply migration ({{current}} of {{total}})",
+      "unknownErrorDuringUpgrade": "An unknown error occurred during the upgrade. Please try again."
+    }
+  }
+}

apps/browser-extension/src/i18n/locales/de.json

@@ -0,0 +1,392 @@
+{
+  "auth": {
+    "loginTitle": "Bei AliasVault anmelden",
+    "username": "Benutzername oder E-Mail-Adresse",
+    "usernamePlaceholder": "Name / name@unternehmen.com",
+    "password": "Passwort",
+    "passwordPlaceholder": "Gib Dein Passwort ein",
+    "rememberMe": "Angemeldet bleiben",
+    "loginButton": "Anmelden",
+    "noAccount": "Noch kein Konto?",
+    "createVault": "Neuen Tresor erstellen",
+    "twoFactorTitle": "Bitte gib den Sicherheits-Code aus Deiner Authentifizierungs-App ein.",
+    "authCode": "Sicherheits-Code",
+    "authCodePlaceholder": "Gib den 6-stelligen Sicherheits-Code ein.",
+    "verify": "Bestätige",
+    "cancel": "Abbrechen",
+    "twoFactorNote": "Hinweis: Wenn Du keinen Zugriff auf Dein Authentifizierungsgerät hast, kannst Du Deine Zwei-Faktor-Authentifizierung (2FA) mit einem Wiederherstellungscode zurücksetzen, indem Du Dich über die Website anmeldest.",
+    "masterPassword": "Master-Passwort",
+    "unlockVault": "Tresor entsperren",
+    "unlockTitle": "Entsperre Deinen Tresor",
+    "unlockDescription": "Bitte gib Dein Master-Passwort zum Entsperren des Tresors ein.",
+    "logout": "Abmelden",
+    "logoutConfirm": "Bist Du sicher, dass Du Dich abmelden möchtest?",
+    "sessionExpired": "Deine Sitzung ist abgelaufen. Bitte melde Dich erneut an.",
+    "unlockSuccess": "Tresor erfolgreich entsperrt!",
+    "unlockSuccessTitle": "Ihr Tresor wurde erfolgreich entsperrt",
+    "unlockSuccessDescription": "Du kannst jetzt die Autofill-Funktion in Anmeldeformularen in Deinem Browser nutzen.",
+    "closePopup": "Popup schließen",
+    "browseVault": "Tresor durchsuchen",
+    "connectingTo": "Verbinde zu",
+    "switchAccounts": "Konto wechseln?",
+    "loggedIn": "Angemeldet",
+    "errors": {
+      "invalidCode": "Bitte gib einen gültigen 6-stelligen Sicherheits-Code ein.",
+      "serverError": "Der AliasVault-Server konnte nicht erreicht werden. Bitte versuche es später noch einmal oder kontaktiere den Support, falls das Problem weiterhin besteht.",
+      "noToken": "Anmeldung fehlgeschlagen -- es wurde kein Token zurückgegeben",
+      "migrationError": "Beim Prüfen auf ausstehende Migrationen ist ein Fehler aufgetreten.",
+      "wrongPassword": "Falsches Passwort. Bitte versuche es erneut.",
+      "accountLocked": "Das Konto wurde wegen zu vieler fehlgeschlagener Anmeldeversuche vorübergehend gesperrt.",
+      "networkError": "Netzwerkfehler. Bitte überprüfe Deine Verbindung und versuche es erneut.",
+      "loginDataMissing": "Deine Anmelde-Sitzung ist abgelaufen. Bitte versuche es erneut."
+    }
+  },
+  "menu": {
+    "credentials": "Zugangsdaten",
+    "emails": "E-Mails",
+    "settings": "Einstellungen"
+  },
+  "common": {
+    "appName": "AliasVault",
+    "loading": "Laden...",
+    "error": "Fehler",
+    "success": "Aktion erfolgreich",
+    "cancel": "Abbrechen",
+    "use": "Benutzen",
+    "delete": "Löschen",
+    "close": "Schließen",
+    "copied": "Kopiert!",
+    "openInNewWindow": "In neuem Fenster öffnen",
+    "language": "Sprache",
+    "enabled": "Aktiviert",
+    "disabled": "Deaktiviert",
+    "showPassword": "Passwort anzeigen",
+    "hidePassword": "Passwort verbergen",
+    "copyToClipboard": "In die Zwischenablage kopieren",
+    "loadingEmails": "E-Mails werden geladen...",
+    "loadingTotpCodes": "TOTP-Codes werden geladen...",
+    "attachments": "Anhänge",
+    "loadingAttachments": "Anhänge werden geladen...",
+    "settings": "Einstellungen",
+    "recentEmails": "Neueste E-Mails",
+    "loginCredentials": "Zugangsdaten",
+    "twoFactorAuthentication": "Zwei-Faktor-Authentifizierung",
+    "alias": "Alias",
+    "notes": "Notizen",
+    "fullName": "Vor- und Nachname",
+    "firstName": "Vorname",
+    "lastName": "Nachname",
+    "birthDate": "Geburtsdatum",
+    "nickname": "Spitzname",
+    "email": "E-Mail-Adresse",
+    "username": "Benutzername",
+    "password": "Passwort",
+    "syncingVault": "Tresor wird synchronisiert",
+    "savingChangesToVault": "Änderungen werden gespeichert",
+    "uploadingVaultToServer": "Tresor wird auf den Server hochgeladen",
+    "checkingVaultUpdates": "Prüfe auf Tresor-Updates",
+    "syncingUpdatedVault": "Aktualisierter Tresor wird synchronisiert",
+    "executingOperation": "Vorgang wird ausgeführt...",
+    "loadMore": "Mehr laden",
+    "errors": {
+      "VaultOutdated": "Dein Tresor ist veraltet. Bitte melde Dich auf der AliasVault-Webseite an und folge den Anweisungen.",
+      "serverNotAvailable": "Der AliasVault-Server konnte nicht erreicht werden. Bitte versuche es später noch einmal oder kontaktiere den Support, falls das Problem weiterhin besteht.",
+      "clientVersionNotSupported": "Diese Version der AliasVault-Browser-Erweiterung wird vom Server nicht mehr unterstützt. Bitte aktualisiere Deine Browser-Erweiterung auf die neueste Version.",
+      "serverVersionNotSupported": "Der AliasVault-Server muss auf eine neuere Version aktualisiert werden, um diese Browser-Erweiterung nutzen zu können. Bitte kontaktiere den Support, falls Du Hilfe benötigst.",
+      "unknownError": "Ein unbekannter Fehler ist aufgetreten",
+      "failedToStoreVault": "Fehler beim Speichern des Tresors",
+      "vaultNotAvailable": "Tresor nicht verfügbar",
+      "failedToRetrieveData": "Abruf der Daten fehlgeschlagen",
+      "vaultIsLocked": "Der Tresor ist gesperrt.",
+      "failedToUploadVault": "Das Hochladen des Tresors ist fehlgeschlagen",
+      "passwordChanged": "Dein Passwort hat sich seit Deiner letzten Anmeldung geändert. Bitte melden Dich aus Sicherheitsgründen erneut an."
+    },
+    "apiErrors": {
+      "UNKNOWN_ERROR": "Ein unbekannter Fehler ist aufgetreten. Bitte versuche es erneut.",
+      "ACCOUNT_LOCKED": "Das Konto wurde wegen zu vieler fehlgeschlagener Anmeldeversuche vorübergehend gesperrt. Bitte versuche es später erneut.",
+      "ACCOUNT_BLOCKED": "Dein Konto wurde deaktiviert. Wenn Du glaubst, dass dies ein Fehler ist, kontaktiere bitte den Support.",
+      "USER_NOT_FOUND": "Ungültiger Benutzername oder Passwort. Bitte versuche es erneut.",
+      "INVALID_AUTHENTICATOR_CODE": "Ungültiger Sicherheits-Code. Bitte versuche es erneut.",
+      "INVALID_RECOVERY_CODE": "Ungültiger Wiederherstellungscode. Bitte versuche es erneut.",
+      "REFRESH_TOKEN_REQUIRED": "Aktualisierungstoken ist erforderlich.",
+      "INVALID_REFRESH_TOKEN": "Ungültiger Aktualisierungstoken.",
+      "REFRESH_TOKEN_REVOKED_SUCCESSFULLY": "Aktualisierungstoken wurde erfolgreich widerrufen.",
+      "PUBLIC_REGISTRATION_DISABLED": "Die Registrierung eines neuen Kontos ist auf diesem Server derzeit deaktiviert. Bitte kontaktiere den Administrator.",
+      "USERNAME_REQUIRED": "Der Benutzername ist erforderlich.",
+      "USERNAME_ALREADY_IN_USE": "Benutzername ist bereits vergeben.",
+      "USERNAME_AVAILABLE": "Der Benutzername ist verfügbar.",
+      "USERNAME_MISMATCH": "Der Benutzername stimmt nicht mit dem aktuellen Benutzer überein.",
+      "PASSWORD_MISMATCH": "Das angegebene Passwort stimmt nicht mit Deinem aktuellen Passwort überein.",
+      "ACCOUNT_SUCCESSFULLY_DELETED": "Konto erfolgreich gelöscht.",
+      "USERNAME_EMPTY_OR_WHITESPACE": "Der Benutzername darf nicht leer sein.",
+      "USERNAME_TOO_SHORT": "Der Benutzername ist zu kurz. Er muss mindestens 3 Zeichen lang sein.",
+      "USERNAME_TOO_LONG": "Der Benutzername ist zu lang. Er darf höchstens 40 Zeichen lang sein.",
+      "USERNAME_INVALID_EMAIL": "Ungültige E-Mail-Adresse.",
+      "USERNAME_INVALID_CHARACTERS": "Der Benutzername ist ungültig. Er darf nur aus Buchstaben oder Ziffern bestehen.",
+      "VAULT_NOT_UP_TO_DATE": "Dein Tresor ist nicht aktuell. Bitte synchronisiere Deinen Tresor und versuche es erneut.",
+      "INTERNAL_SERVER_ERROR": "Internal server error.",
+      "VAULT_ERROR": "Der lokale Tresor ist nicht aktuell. Bitte synchronisiere Deinen Tresor, indem Du die Seite aktualisierst, und versuche es erneut."
+    }
+  },
+  "content": {
+    "or": "oder",
+    "new": "Neu",
+    "cancel": "Abbrechen",
+    "search": "Suche",
+    "vaultLocked": "AliasVault ist gesperrt.",
+    "creatingNewAlias": "Neuen Alias erstellen...",
+    "noMatchesFound": "Keine Treffer gefunden",
+    "searchVault": "Tresor durchsuchen...",
+    "serviceName": "Name des Dienstes",
+    "email": "E-Mail-Adresse",
+    "username": "Benutzername",
+    "password": "Passwort",
+    "enterServiceName": "Name des Dienstes eingeben",
+    "enterEmailAddress": "E-Mail-Adresse eingeben",
+    "enterUsername": "Benutzername eingeben",
+    "hideFor1Hour": "Für 1 Stunde ausblenden (aktuelle Seite)",
+    "hidePermanently": "Dauerhaft ausblenden (aktuelle Seite)",
+    "createRandomAlias": "Zufälligen Alias generieren",
+    "createUsernamePassword": "Benutzername/Passwort erstellen",
+    "randomAlias": "Zufälliger Alias",
+    "usernamePassword": "Benutzername/Passwort",
+    "createAndSaveAlias": "Alias erstellen und speichern",
+    "createAndSaveCredential": "Zugang erstellen und speichern",
+    "randomIdentityDescription": "Generiere eine zufällige Identität mit einer zufälligen E-Mail-Adresse von AliasVault.",
+    "randomIdentityDescriptionDropdown": "Zufällige Identität mit zufälliger E-Mail-Adresse",
+    "manualCredentialDescription": "Gebe Deine eigene E-Mail-Adresse und Benutzernamen an.",
+    "manualCredentialDescriptionDropdown": "Manueller Benutzername und Passwort",
+    "failedToCreateIdentity": "Das Erstellen der Identität ist fehlgeschlagen. Bitte versuche es erneut.",
+    "enterEmailAndOrUsername": "E-Mail-Adresse und/oder Benutzername eingeben",
+    "autofillWithAliasVault": "Autofill mit AliasVault",
+    "generateRandomPassword": "Zufälliges Passwort erzeugen (wird in die Zwischenablage kopiert)",
+    "generateNewPassword": "Neues Passwort erzeugen",
+    "togglePasswordVisibility": "Passwort ein-/ausblenden",
+    "passwordCopiedToClipboard": "Passwort in die Zwischenablage kopiert",
+    "enterEmailAndOrUsernameError": "E-Mail-Adresse und/oder Benutzername eingeben",
+    "openAliasVaultToUpgrade": "Zum Aktualisieren AliasVault öffnen ",
+    "vaultUpgradeRequired": "Aktualisierung des Tresors erforderlich.",
+    "dismissPopup": "Popup schliessen"
+  },
+  "credentials": {
+    "title": "Zugangsdaten",
+    "addCredential": "Zugang hinzufügen",
+    "editCredential": "Zugang bearbeiten",
+    "deleteCredential": "Zugang löschen",
+    "credentialDetails": "Details zum Zugang",
+    "serviceName": "Name des Dienstes",
+    "serviceNamePlaceholder": "z. B. Gmail, Facebook, Bank",
+    "website": "Webseite",
+    "websitePlaceholder": "https://example.com",
+    "username": "Benutzername",
+    "usernamePlaceholder": "Benutzername eingeben",
+    "password": "Passwort",
+    "passwordPlaceholder": "Passwort eingeben",
+    "generatePassword": "Passwort generieren",
+    "copyPassword": "Passwort kopieren",
+    "showPassword": "Passwort anzeigen",
+    "hidePassword": "Passwort verbergen",
+    "notes": "Notizen",
+    "notesPlaceholder": "Zusätzliche Notizen...",
+    "totp": "Zwei-Faktor-Authentifizierung",
+    "totpCode": "TOTP-Code",
+    "copyTotp": "TOTP kopieren",
+    "totpSecret": "TOTP-Geheimcode",
+    "totpSecretPlaceholder": "TOTP-Geheimcode eingeben",
+    "noCredentials": "Keine Zugangsdaten gefunden",
+    "noCredentialsDescription": "Erstelle Deinen ersten Zugang, um loszulegen",
+    "searchPlaceholder": "Zugangsdaten suchen...",
+    "welcomeTitle": "Willkommen bei AliasVault!",
+    "welcomeDescription": "Du möchtest die AliasVault-Browser-Erweiterung verwenden? Navigiere zu einer Website und verwende das AliasVault-Popup-Fenster um einen neuen Zugang zu erstellen.",
+    "createdAt": "Erstellt",
+    "updatedAt": "Zuletzt aktualisiert",
+    "autofill": "Autofill",
+    "fillForm": "Formular ausfüllen",
+    "deleteConfirm": "Bist Du sicher, dass Du diesen Zugang löschen möchtest?",
+    "saveSuccess": "Zugang erfolgreich gespeichert.",
+    "tags": "Schlagwörter",
+    "addTag": "Schlagwort hinzufügen",
+    "removeTag": "Schlagwort entfernen",
+    "folder": "Ordner",
+    "selectFolder": "Ordner auswählen",
+    "createFolder": "Ordner erstellen",
+    "saveCredential": "Zugang speichern",
+    "deleteCredentialTitle": "Zugang löschen",
+    "deleteCredentialConfirm": "Bist Du sicher, dass Du diesen Zugang löschen möchtest? Diese Aktion kann nicht rückgängig gemacht werden.",
+    "randomAlias": "Zufälliger Alias",
+    "manual": "Manuell",
+    "service": "Dienst",
+    "serviceUrl": "URL des Dienstes",
+    "loginCredentials": "Zugangsdaten",
+    "generateRandomUsername": "Zufälligen Benutzernamen generieren",
+    "generateRandomPassword": "Zufälliges Passwort generieren",
+    "changePasswordComplexity": "Komplexität des Passworts ändern",
+    "passwordLength": "Passwortlänge",
+    "includeLowercase": "Kleinbuchstaben (a-z)",
+    "includeUppercase": "Großbuchstaben (A-Z)",
+    "includeNumbers": "Ziffern (0-9)",
+    "includeSpecialChars": "Sonderzeichen (!@#$%^&*)",
+    "avoidAmbiguousChars": "Mehrdeutige Zeichen (1, l, I, 0, O, etc.) vermeiden",
+    "generateNewPreview": "Neue Vorschau erstellen",
+    "generateRandomAlias": "Zufälligen Alias generieren",
+    "alias": "Alias",
+    "firstName": "Vorname",
+    "lastName": "Nachname",
+    "nickName": "Spitzname",
+    "gender": "Geschlecht",
+    "birthDate": "Geburtsdatum",
+    "birthDatePlaceholder": "JJJJ-MM-TT",
+    "metadata": "Metadaten",
+    "validation": {
+      "required": "Dieses Feld ist ein Pflichtfeld",
+      "serviceNameRequired": "Name des Dienstes ist erforderlich",
+      "invalidEmail": "Ungültiges E-Mail-Format",
+      "invalidDateFormat": "Bitte gib das Datum im Format JJJJ-MM-TT ein."
+    },
+    "privateEmailTitle": "Private E-Mail-Adresse",
+    "privateEmailAliasVaultServer": "AliasVault-Server",
+    "privateEmailDescription": "Ende-zu-Ende verschlüsselt, vollständig privat.",
+    "publicEmailTitle": "Öffentliche Temp-E-Mail-Anbieter",
+    "publicEmailDescription": "Anonyme, aber beschränkte Privatsphäre. E-Mail-Inhalt ist für jeden lesbar, der die Adresse kennt.",
+    "useDomainChooser": "Domain-Auswahl verwenden",
+    "enterCustomDomain": "Eigene Domain eingeben",
+    "enterFullEmail": "Vollständige E-Mail-Adresse eingeben",
+    "enterEmailPrefix": "E-Mail-Präfix eingeben"
+  },
+  "emails": {
+    "title": "E-Mails",
+    "deleteEmailTitle": "E-Mail löschen",
+    "deleteEmailConfirm": "Bist Du sicher, dass Du diese E-Mail unwiderruflich löschen möchtest?",
+    "from": "Von",
+    "to": "An",
+    "date": "Datum",
+    "emailContent": "Inhalt der E-Mail",
+    "attachments": "Anhänge",
+    "emailNotFound": "E-Mail nicht gefunden",
+    "noEmails": "Keine E-Mails gefunden",
+    "noEmailsDescription": "Du hast bisher keine E-Mails an Deine privaten E-Mail-Adressen erhalten. Neue E-Mails werden hier angezeigt, sobald sie eintreffen.",
+    "dateFormat": {
+      "justNow": "gerade eben",
+      "minutesAgo_single": "vor {{count}} Minute",
+      "minutesAgo_plural": "vor {{count}} Minuten",
+      "hoursAgo_single": "vor {{count}} Stunde",
+      "hoursAgo_plural": "vor {{count}} Stunden",
+      "yesterday": "gestern"
+    },
+    "errors": {
+      "emailLoadError": "Beim Laden der E-Mails ist ein Fehler aufgetreten. Bitte versuche es später erneut.",
+      "emailUnexpectedError": "Beim Laden der E-Mails ist ein unerwarteter Fehler aufgetreten. Bitte versuche es später erneut."
+    },
+    "apiErrors": {
+      "CLAIM_DOES_NOT_MATCH_USER": "Die aktuell gewählte E-Mail-Adresse wird bereits verwendet. Bitte ändere die E-Mail-Adresse, indem Du diese Zugangsdaten bearbeitest.",
+      "CLAIM_DOES_NOT_EXIST": "Beim Laden der E-Mails ist ein Fehler aufgetreten. Bitte bearbeite und speichere den Eintrag, um die Datenbank zu synchronisieren, und versuche es dann erneut."
+    }
+  },
+  "settings": {
+    "title": "Einstellungen",
+    "serverUrl": "URL des Servers",
+    "language": "Sprache",
+    "autofillEnabled": "Autofill aktivieren",
+    "version": "Version",
+    "openInNewWindow": "In neuem Fenster öffnen",
+    "openWebApp": "Web-App öffnen",
+    "loggedIn": "Angemeldet",
+    "logout": "Abmelden",
+    "globalSettings": "Allgemeine Einstellungen",
+    "autofillPopup": "Autofill-Popup",
+    "activeOnAllSites": "Auf allen Seiten aktiv (sofern nicht unten deaktiviert)",
+    "disabledOnAllSites": "Auf allen Seiten deaktiviert",
+    "enabled": "Aktiviert",
+    "disabled": "Deaktiviert",
+    "rightClickContextMenu": "Kontextmenü mit Rechtsklick",
+    "autofillMatching": "Autofill-Übereinstimmung",
+    "autofillMatchingMode": "Autofill-Übereinstimmungs-Modus",
+    "autofillMatchingModeDescription": "Legt fest, welche Zugangsdaten als Übereinstimmung angesehen werden und wird als Vorschlag im Autofill-Popup für eine bestimmte Website angezeigt.",
+    "autofillMatchingDefault": "URL + Subdomain + Wildcard-Name",
+    "autofillMatchingUrlSubdomain": "URL + Subdomain",
+    "autofillMatchingUrlExact": "Nur exakte URL-Domain",
+    "siteSpecificSettings": "Seitenspezifische Einstellungen",
+    "autofillPopupOn": "Autofill-Popup auf: ",
+    "enabledForThisSite": "Für diese Seite aktiviert",
+    "disabledForThisSite": "Für diese Seite deaktivieren",
+    "temporarilyDisabledUntil": "Vorübergehend deaktiviert bis ",
+    "resetAllSiteSettings": "Alle seitenspezifischen Einstellungen zurücksetzen",
+    "appearance": "Erscheinungsbild",
+    "theme": "Thema",
+    "useDefault": "Standard verwenden",
+    "light": "Hell",
+    "dark": "Dunkel",
+    "keyboardShortcuts": "Tastaturkürzel",
+    "configureKeyboardShortcuts": "Tastaturkürzel konfigurieren",
+    "configure": "Konfigurieren",
+    "security": "Sicherheit",
+    "clipboardClearTimeout": "Zwischenablage nach dem Kopieren automatisch löschen",
+    "clipboardClearTimeoutDescription": "Zwischenablage nach dem Kopieren sensibler Daten automatisch löschen",
+    "clipboardClearDisabled": "Niemals löschen",
+    "clipboardClear5Seconds": "Nach 5 Sekunden löschen",
+    "clipboardClear10Seconds": "Nach 10 Sekunden löschen",
+    "clipboardClear15Seconds": "Nach 15 Sekunden löschen",
+    "autoLockTimeout": "Sperr-Timeout",
+    "autoLockTimeoutDescription": "Tresor bei Inaktivität automatisch sperren",
+    "autoLockTimeoutHelp": "Der Tresor wird erst nach dem angegebenen Zeitraum der Inaktivität gesperrt (keine Nutzung von Autofill oder Öffnen des Erweiterungs-Popups). Der Tresor wird immer gesperrt, wenn der Browser geschlossen wird, unabhängig von dieser Einstellung.",
+    "autoLockNever": "Niemals",
+    "autoLock15Seconds": "15 Sekunden",
+    "autoLock1Minute": "1 Minute",
+    "autoLock5Minutes": "5 Minuten",
+    "autoLock15Minutes": "15 Minuten",
+    "autoLock30Minutes": "30 Minuten",
+    "autoLock1Hour": "1 Stunde",
+    "autoLock4Hours": "4 Stunden",
+    "autoLock8Hours": "8 Stunden",
+    "autoLock24Hours": "24 Stunden",
+    "versionPrefix": "Version ",
+    "preferences": "Einstellungen",
+    "autofillSettings": "Autofill-Einstellungen",
+    "clipboardSettings": "Zwischenablage-Einstellungen",
+    "contextMenuSettings": "Kontextmenü-Einstellungen",
+    "contextMenu": "Kontextmenü",
+    "contextMenuEnabled": "Kontextmenü ist aktiviert",
+    "contextMenuDisabled": "Kontextmenü ist deaktiviert",
+    "contextMenuDescription": "Rechtsklicke auf Eingabefelder, um auf AliasVault-Optionen zuzugreifen",
+    "selectLanguage": "Sprache auswählen",
+    "validation": {
+      "apiUrlRequired": "API-URL ist erforderlich",
+      "apiUrlInvalid": "Bitte gib eine gültige API-URL ein",
+      "clientUrlRequired": "Client-URL ist erforderlich",
+      "clientUrlInvalid": "Bitte gib eine gültige Client-URL ein"
+    }
+  },
+  "upgrade": {
+    "title": "Tresor aktualisieren",
+    "subtitle": "AliasVault wurde aktualisiert. Dadurch muss auch Dein Tresor aktualisiert werden. Dies sollte nur wenige Sekunden dauern.",
+    "versionInformation": "Versionsinformationen",
+    "yourVault": "Dein Tresor:",
+    "newVersion": "Neue Version:",
+    "upgrade": "Tresor aktualisieren",
+    "upgrading": "Aktualisieren...",
+    "logout": "Abmelden",
+    "whatsNew": "Neu in dieser Version",
+    "whatsNewDescription": "Eine Aktualisierung ist erforderlich, um die folgenden Änderungen zu unterstützen:",
+    "noDescriptionAvailable": "Für diese Version ist keine Beschreibung vorhanden.",
+    "okay": "OK",
+    "status": {
+      "preparingUpgrade": "Aktualisierung wird vorbereitet...",
+      "vaultAlreadyUpToDate": "Tresor ist bereits aktualisiert",
+      "startingDatabaseTransaction": "Datenbanktransaktion wird gestartet...",
+      "applyingDatabaseMigrations": "Datenbankmigration wird durchgeführt...",
+      "applyingMigration": "Führe Migration {{current}} von {{total}} durch...",
+      "committingChanges": "Änderungen werden übernommen..."
+    },
+    "alerts": {
+      "error": "Fehler",
+      "unableToGetVersionInfo": "Versionsinformationen konnten nicht abgerufen werden. Bitte versuche es erneut.",
+      "selfHostedServer": "Selbstgehosteter Server",
+      "selfHostedWarning": "Nutzt Du einen selbst gehosteten Server, musst Du Deine Instanz ebenfalls updaten. Andernfalls kannst Du Dich im Web-Client nicht mehr anmelden.",
+      "cancel": "Abbrechen",
+      "continueUpgrade": "Aktualisierung fortsetzen",
+      "upgradeFailed": "Aktualisierung fehlgeschlagen",
+      "failedToApplyMigration": "Migration fehlgeschlagen ({{current}} von {{total}})",
+      "unknownErrorDuringUpgrade": "Bei der Aktualisierung ist ein unbekannter Fehler aufgetreten. Bitte versuche es erneut."
+    }
+  }
+}

apps/browser-extension/src/i18n/locales/en.json

@@ -0,0 +1,392 @@
+{
+  "auth": {
+    "loginTitle": "Log in to AliasVault",
+    "username": "Username or email",
+    "usernamePlaceholder": "name / name@company.com",
+    "password": "Password",
+    "passwordPlaceholder": "Enter your password",
+    "rememberMe": "Remember me",
+    "loginButton": "Login",
+    "noAccount": "No account yet?",
+    "createVault": "Create new vault",
+    "twoFactorTitle": "Please enter the authentication code from your authenticator app.",
+    "authCode": "Authentication Code",
+    "authCodePlaceholder": "Enter 6-digit code",
+    "verify": "Verify",
+    "cancel": "Cancel",
+    "twoFactorNote": "Note: if you don't have access to your authenticator device, you can reset your 2FA with a recovery code by logging in via the website.",
+    "masterPassword": "Master Password",
+    "unlockVault": "Unlock Vault",
+    "unlockTitle": "Unlock Your Vault",
+    "unlockDescription": "Enter your master password to unlock your vault.",
+    "logout": "Logout",
+    "logoutConfirm": "Are you sure you want to logout?",
+    "sessionExpired": "Your session has expired. Please log in again.",
+    "unlockSuccess": "Vault unlocked successfully!",
+    "unlockSuccessTitle": "Your vault is successfully unlocked",
+    "unlockSuccessDescription": "You can now use autofill in login forms in your browser.",
+    "closePopup": "Close this popup",
+    "browseVault": "Browse vault contents",
+    "connectingTo": "Connecting to",
+    "switchAccounts": "Switch accounts?",
+    "loggedIn": "Logged in",
+    "errors": {
+      "invalidCode": "Please enter a valid 6-digit authentication code.",
+      "serverError": "Could not reach AliasVault server. Please try again later or contact support if the problem persists.",
+      "noToken": "Login failed -- no token returned",
+      "migrationError": "An error occurred while checking for pending migrations.",
+      "wrongPassword": "Incorrect password. Please try again.",
+      "accountLocked": "Account temporarily locked due to too many failed attempts.",
+      "networkError": "Network error. Please check your connection and try again.",
+      "loginDataMissing": "Login session expired. Please try again."
+    }
+  },
+  "menu": {
+    "credentials": "Credentials",
+    "emails": "Emails",
+    "settings": "Settings"
+  },
+  "common": {
+    "appName": "AliasVault",
+    "loading": "Loading...",
+    "error": "Error",
+    "success": "Success",
+    "cancel": "Cancel",
+    "use": "Use",
+    "delete": "Delete",
+    "close": "Close",
+    "copied": "Copied!",
+    "openInNewWindow": "Open in new window",
+    "language": "Language",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "showPassword": "Show password",
+    "hidePassword": "Hide password",
+    "copyToClipboard": "Copy to clipboard",
+    "loadingEmails": "Loading emails...",
+    "loadingTotpCodes": "Loading TOTP codes...",
+    "attachments": "Attachments",
+    "loadingAttachments": "Loading attachments...",
+    "settings": "Settings",
+    "recentEmails": "Recent emails",
+    "loginCredentials": "Login credentials",
+    "twoFactorAuthentication": "Two-factor authentication",
+    "alias": "Alias",
+    "notes": "Notes",
+    "fullName": "Full Name",
+    "firstName": "First Name",
+    "lastName": "Last Name",
+    "birthDate": "Birth Date",
+    "nickname": "Nickname",
+    "email": "Email",
+    "username": "Username",
+    "password": "Password",
+    "syncingVault": "Syncing vault",
+    "savingChangesToVault": "Saving changes to vault",
+    "uploadingVaultToServer": "Uploading vault to server",
+    "checkingVaultUpdates": "Checking for vault updates",
+    "syncingUpdatedVault": "Syncing updated vault",
+    "executingOperation": "Executing operation...",
+    "loadMore": "Load more",
+    "errors": {
+      "VaultOutdated": "Your vault is outdated. Please login on the AliasVault website and follow the steps.",
+      "serverNotAvailable": "The AliasVault server is not available. Please try again later or contact support if the problem persists.",
+      "clientVersionNotSupported": "This version of the AliasVault browser extension is not supported by the server anymore. Please update your browser extension to the latest version.",
+      "serverVersionNotSupported": "The AliasVault server needs to be updated to a newer version in order to use this browser extension. Please contact support if you need help.",
+      "unknownError": "An unknown error occurred",
+      "failedToStoreVault": "Failed to store vault",
+      "vaultNotAvailable": "Vault not available",
+      "failedToRetrieveData": "Failed to retrieve data",
+      "vaultIsLocked": "Vault is locked",
+      "failedToUploadVault": "Failed to upload vault",
+      "passwordChanged": "Your password has changed since the last time you logged in. Please login again for security reasons."
+    },
+    "apiErrors": {
+      "UNKNOWN_ERROR": "An unknown error occurred. Please try again.",
+      "ACCOUNT_LOCKED": "Account temporarily locked due to too many failed attempts. Please try again later.",
+      "ACCOUNT_BLOCKED": "Your account has been disabled. If you believe this is a mistake, please contact support.",
+      "USER_NOT_FOUND": "Invalid username or password. Please try again.",
+      "INVALID_AUTHENTICATOR_CODE": "Invalid authenticator code. Please try again.",
+      "INVALID_RECOVERY_CODE": "Invalid recovery code. Please try again.",
+      "REFRESH_TOKEN_REQUIRED": "Refresh token is required.",
+      "INVALID_REFRESH_TOKEN": "Invalid refresh token.",
+      "REFRESH_TOKEN_REVOKED_SUCCESSFULLY": "Refresh token revoked successfully.",
+      "PUBLIC_REGISTRATION_DISABLED": "New account registration is currently disabled on this server. Please contact the administrator.",
+      "USERNAME_REQUIRED": "Username is required.",
+      "USERNAME_ALREADY_IN_USE": "Username is already in use.",
+      "USERNAME_AVAILABLE": "Username is available.",
+      "USERNAME_MISMATCH": "Username does not match the current user.",
+      "PASSWORD_MISMATCH": "The provided password does not match your current password.",
+      "ACCOUNT_SUCCESSFULLY_DELETED": "Account successfully deleted.",
+      "USERNAME_EMPTY_OR_WHITESPACE": "Username cannot be empty or whitespace.",
+      "USERNAME_TOO_SHORT": "Username too short: must be at least 3 characters long.",
+      "USERNAME_TOO_LONG": "Username too long: cannot be longer than 40 characters.",
+      "USERNAME_INVALID_EMAIL": "Invalid email address.",
+      "USERNAME_INVALID_CHARACTERS": "Username is invalid, can only contain letters or digits.",
+      "VAULT_NOT_UP_TO_DATE": "Your vault is not up-to-date. Please synchronize your vault and try again.",
+      "INTERNAL_SERVER_ERROR": "Internal server error.",
+      "VAULT_ERROR": "The local vault is not up-to-date. Please synchronize your vault by refreshing the page and try again."
+    }
+  },
+  "content": {
+    "or": "or",
+    "new": "New",
+    "cancel": "Cancel",
+    "search": "Search",
+    "vaultLocked": "AliasVault is locked.",
+    "creatingNewAlias": "Creating new alias...",
+    "noMatchesFound": "No matches found",
+    "searchVault": "Search vault...",
+    "serviceName": "Service name",
+    "email": "Email",
+    "username": "Username",
+    "password": "Password",
+    "enterServiceName": "Enter service name",
+    "enterEmailAddress": "Enter email address",
+    "enterUsername": "Enter username",
+    "hideFor1Hour": "Hide for 1 hour (current site)",
+    "hidePermanently": "Hide permanently (current site)",
+    "createRandomAlias": "Create random alias",
+    "createUsernamePassword": "Create username/password",
+    "randomAlias": "Random alias",
+    "usernamePassword": "Username/password",
+    "createAndSaveAlias": "Create and save alias",
+    "createAndSaveCredential": "Create and save credential",
+    "randomIdentityDescription": "Generate a random identity with a random email address accessible in AliasVault.",
+    "randomIdentityDescriptionDropdown": "Random identity with random email",
+    "manualCredentialDescription": "Specify your own email address and username.",
+    "manualCredentialDescriptionDropdown": "Manual username and password",
+    "failedToCreateIdentity": "Failed to create identity. Please try again.",
+    "enterEmailAndOrUsername": "Enter email and/or username",
+    "autofillWithAliasVault": "Autofill with AliasVault",
+    "generateRandomPassword": "Generate random password (copy to clipboard)",
+    "generateNewPassword": "Generate new password",
+    "togglePasswordVisibility": "Toggle password visibility",
+    "passwordCopiedToClipboard": "Password copied to clipboard",
+    "enterEmailAndOrUsernameError": "Enter email and/or username",
+    "openAliasVaultToUpgrade": "Open AliasVault to upgrade",
+    "vaultUpgradeRequired": "Vault upgrade required.",
+    "dismissPopup": "Dismiss popup"
+  },
+  "credentials": {
+    "title": "Credentials",
+    "addCredential": "Add Credential",
+    "editCredential": "Edit Credential",
+    "deleteCredential": "Delete Credential",
+    "credentialDetails": "Credential Details",
+    "serviceName": "Service Name",
+    "serviceNamePlaceholder": "e.g., Gmail, Facebook, Bank",
+    "website": "Website",
+    "websitePlaceholder": "https://example.com",
+    "username": "Username",
+    "usernamePlaceholder": "Enter username",
+    "password": "Password",
+    "passwordPlaceholder": "Enter password",
+    "generatePassword": "Generate Password",
+    "copyPassword": "Copy Password",
+    "showPassword": "Show Password",
+    "hidePassword": "Hide Password",
+    "notes": "Notes",
+    "notesPlaceholder": "Additional notes...",
+    "totp": "Two-Factor Authentication",
+    "totpCode": "TOTP Code",
+    "copyTotp": "Copy TOTP",
+    "totpSecret": "TOTP Secret",
+    "totpSecretPlaceholder": "Enter TOTP secret key",
+    "noCredentials": "No credentials found",
+    "noCredentialsDescription": "Add your first credential to get started",
+    "searchPlaceholder": "Search credentials...",
+    "welcomeTitle": "Welcome to AliasVault!",
+    "welcomeDescription": "To use the AliasVault browser extension: navigate to a website and use the AliasVault autofill popup to create a new credential.",
+    "createdAt": "Created",
+    "updatedAt": "Last updated",
+    "autofill": "Autofill",
+    "fillForm": "Fill Form",
+    "deleteConfirm": "Are you sure you want to delete this credential?",
+    "saveSuccess": "Credential saved successfully",
+    "tags": "Tags",
+    "addTag": "Add Tag",
+    "removeTag": "Remove Tag",
+    "folder": "Folder",
+    "selectFolder": "Select Folder",
+    "createFolder": "Create Folder",
+    "saveCredential": "Save credential",
+    "deleteCredentialTitle": "Delete Credential",
+    "deleteCredentialConfirm": "Are you sure you want to delete this credential? This action cannot be undone.",
+    "randomAlias": "Random Alias",
+    "manual": "Manual",
+    "service": "Service",
+    "serviceUrl": "Service URL",
+    "loginCredentials": "Login Credentials",
+    "generateRandomUsername": "Generate random username",
+    "generateRandomPassword": "Generate random password",
+    "changePasswordComplexity": "Change password complexity",
+    "passwordLength": "Password length",
+    "includeLowercase": "Include lowercase letters",
+    "includeUppercase": "Include uppercase letters",
+    "includeNumbers": "Include numbers",
+    "includeSpecialChars": "Include special characters",
+    "avoidAmbiguousChars": "Avoid ambiguous characters (o, 0, etc.)",
+    "generateNewPreview": "Generate new preview",
+    "generateRandomAlias": "Generate Random Alias",
+    "alias": "Alias",
+    "firstName": "First Name",
+    "lastName": "Last Name",
+    "nickName": "Nick Name",
+    "gender": "Gender",
+    "birthDate": "Birth Date",
+    "birthDatePlaceholder": "YYYY-MM-DD",
+    "metadata": "Metadata",
+    "validation": {
+      "required": "This field is required",
+      "serviceNameRequired": "Service name is required",
+      "invalidEmail": "Invalid email format",
+      "invalidDateFormat": "Date must be in YYYY-MM-DD format"
+    },
+    "privateEmailTitle": "Private Email",
+    "privateEmailAliasVaultServer": "AliasVault server",
+    "privateEmailDescription": "E2E encrypted, fully private.",
+    "publicEmailTitle": "Public Temp Email Providers",
+    "publicEmailDescription": "Anonymous but limited privacy. Email content is readable by anyone that knows the address.",
+    "useDomainChooser": "Use domain chooser",
+    "enterCustomDomain": "Enter custom domain",
+    "enterFullEmail": "Enter full email address",
+    "enterEmailPrefix": "Enter email prefix"
+  },
+  "emails": {
+    "title": "Emails",
+    "deleteEmailTitle": "Delete Email",
+    "deleteEmailConfirm": "Are you sure you want to permanently delete this email?",
+    "from": "From",
+    "to": "To",
+    "date": "Date",
+    "emailContent": "Email content",
+    "attachments": "Attachments",
+    "emailNotFound": "Email not found",
+    "noEmails": "No emails found",
+    "noEmailsDescription": "You have not received any emails at your private email addresses yet. When you receive a new email, it will appear here.",
+    "dateFormat": {
+      "justNow": "just now",
+      "minutesAgo_single": "{{count}} min ago",
+      "minutesAgo_plural": "{{count}} mins ago",
+      "hoursAgo_single": "{{count}} hr ago",
+      "hoursAgo_plural": "{{count}} hrs ago",
+      "yesterday": "yesterday"
+    },
+    "errors": {
+      "emailLoadError": "An error occurred while loading emails. Please try again later.",
+      "emailUnexpectedError": "An unexpected error occurred while loading emails. Please try again later."
+    },
+    "apiErrors": {
+      "CLAIM_DOES_NOT_MATCH_USER": "The current chosen email address is already in use. Please change the email address by editing this credential.",
+      "CLAIM_DOES_NOT_EXIST": "An error occurred while trying to load the emails. Please try to edit and save the credential entry to synchronize the database, then try again."
+    }
+  },
+  "settings": {
+    "title": "Settings",
+    "serverUrl": "Server URL",
+    "language": "Language",
+    "autofillEnabled": "Enable Autofill",
+    "version": "Version",
+    "openInNewWindow": "Open in new window",
+    "openWebApp": "Open web app",
+    "loggedIn": "Logged in",
+    "logout": "Logout",
+    "globalSettings": "Global Settings",
+    "autofillPopup": "Autofill popup",
+    "activeOnAllSites": "Active on all sites (unless disabled below)",
+    "disabledOnAllSites": "Disabled on all sites",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "rightClickContextMenu": "Right-click context menu",
+    "autofillMatching": "Autofill Matching",
+    "autofillMatchingMode": "Autofill matching mode",
+    "autofillMatchingModeDescription": "Determines which credentials are considered a match and shown as suggestions in the autofill popup for a given website.",
+    "autofillMatchingDefault": "URL + subdomain + name wildcard",
+    "autofillMatchingUrlSubdomain": "URL + subdomain",
+    "autofillMatchingUrlExact": "Exact URL domain only",
+    "siteSpecificSettings": "Site-Specific Settings",
+    "autofillPopupOn": "Autofill popup on: ",
+    "enabledForThisSite": "Enabled for this site",
+    "disabledForThisSite": "Disabled for this site",
+    "temporarilyDisabledUntil": "Temporarily disabled until ",
+    "resetAllSiteSettings": "Reset all site-specific settings",
+    "appearance": "Appearance",
+    "theme": "Theme",
+    "useDefault": "Use default",
+    "light": "Light",
+    "dark": "Dark",
+    "keyboardShortcuts": "Keyboard Shortcuts",
+    "configureKeyboardShortcuts": "Configure keyboard shortcuts",
+    "configure": "Configure",
+    "security": "Security",
+    "clipboardClearTimeout": "Clear clipboard after copying",
+    "clipboardClearTimeoutDescription": "Automatically clear the clipboard after copying sensitive data",
+    "clipboardClearDisabled": "Never clear",
+    "clipboardClear5Seconds": "Clear after 5 seconds",
+    "clipboardClear10Seconds": "Clear after 10 seconds",
+    "clipboardClear15Seconds": "Clear after 15 seconds",
+    "autoLockTimeout": "Auto-lock Timeout",
+    "autoLockTimeoutDescription": "Automatically lock the vault after a period of inactivity",
+    "autoLockTimeoutHelp": "The vault will only lock after the specified period of inactivity (no autofill usage or extension popup opened). The vault will always lock when the browser is closed, regardless of this setting.",
+    "autoLockNever": "Never",
+    "autoLock15Seconds": "15 seconds",
+    "autoLock1Minute": "1 minute",
+    "autoLock5Minutes": "5 minutes",
+    "autoLock15Minutes": "15 minutes",
+    "autoLock30Minutes": "30 minutes",
+    "autoLock1Hour": "1 hour",
+    "autoLock4Hours": "4 hours",
+    "autoLock8Hours": "8 hours",
+    "autoLock24Hours": "24 hours",
+    "versionPrefix": "Version ",
+    "preferences": "Preferences",
+    "autofillSettings": "Autofill Settings",
+    "clipboardSettings": "Clipboard Settings",
+    "contextMenuSettings": "Context Menu Settings",
+    "contextMenu": "Context Menu",
+    "contextMenuEnabled": "Context menu is enabled",
+    "contextMenuDisabled": "Context menu is disabled",
+    "contextMenuDescription": "Right-click on input fields to access AliasVault options",
+    "selectLanguage": "Select Language",
+    "validation": {
+      "apiUrlRequired": "API URL is required",
+      "apiUrlInvalid": "Please enter a valid API URL",
+      "clientUrlRequired": "Client URL is required",
+      "clientUrlInvalid": "Please enter a valid client URL"
+    }
+  },
+  "upgrade": {
+    "title": "Upgrade Vault",
+    "subtitle": "AliasVault has updated and your vault needs to be upgraded. This should only take a few seconds.",
+    "versionInformation": "Version Information",
+    "yourVault": "Your vault:",
+    "newVersion": "New version:",
+    "upgrade": "Upgrade Vault",
+    "upgrading": "Upgrading...",
+    "logout": "Logout",
+    "whatsNew": "What's New",
+    "whatsNewDescription": "An upgrade is required to support the following changes:",
+    "noDescriptionAvailable": "No description available for this version.",
+    "okay": "Ok",
+    "status": {
+      "preparingUpgrade": "Preparing upgrade...",
+      "vaultAlreadyUpToDate": "Vault is already up to date",
+      "startingDatabaseTransaction": "Starting database transaction...",
+      "applyingDatabaseMigrations": "Applying database migrations...",
+      "applyingMigration": "Applying migration {{current}} of {{total}}...",
+      "committingChanges": "Committing changes..."
+    },
+    "alerts": {
+      "error": "Error",
+      "unableToGetVersionInfo": "Unable to get version information. Please try again.",
+      "selfHostedServer": "Self-Hosted Server",
+      "selfHostedWarning": "If you're using a self-hosted server, make sure to also update your self-hosted instance as otherwise logging in to the web client will stop working.",
+      "cancel": "Cancel",
+      "continueUpgrade": "Continue Upgrade",
+      "upgradeFailed": "Upgrade Failed",
+      "failedToApplyMigration": "Failed to apply migration ({{current}} of {{total}})",
+      "unknownErrorDuringUpgrade": "An unknown error occurred during the upgrade. Please try again."
+    }
+  }
+}

apps/browser-extension/src/i18n/locales/es.json

@@ -0,0 +1,392 @@
+{
+  "auth": {
+    "loginTitle": "Log in to AliasVault",
+    "username": "Username or email",
+    "usernamePlaceholder": "name / name@company.com",
+    "password": "Contraseña",
+    "passwordPlaceholder": "Enter your password",
+    "rememberMe": "Remember me",
+    "loginButton": "Iniciar sesión",
+    "noAccount": "No account yet?",
+    "createVault": "Create new vault",
+    "twoFactorTitle": "Please enter the authentication code from your authenticator app.",
+    "authCode": "Authentication Code",
+    "authCodePlaceholder": "Enter 6-digit code",
+    "verify": "Verify",
+    "cancel": "Cancel",
+    "twoFactorNote": "Note: if you don't have access to your authenticator device, you can reset your 2FA with a recovery code by logging in via the website.",
+    "masterPassword": "Contraseña maestra",
+    "unlockVault": "Unlock Vault",
+    "unlockTitle": "Unlock Your Vault",
+    "unlockDescription": "Enter your master password to unlock your vault.",
+    "logout": "Logout",
+    "logoutConfirm": "Are you sure you want to logout?",
+    "sessionExpired": "Your session has expired. Please log in again.",
+    "unlockSuccess": "Vault unlocked successfully!",
+    "unlockSuccessTitle": "Your vault is successfully unlocked",
+    "unlockSuccessDescription": "You can now use autofill in login forms in your browser.",
+    "closePopup": "Close this popup",
+    "browseVault": "Browse vault contents",
+    "connectingTo": "Connecting to",
+    "switchAccounts": "Switch accounts?",
+    "loggedIn": "Logged in",
+    "errors": {
+      "invalidCode": "Please enter a valid 6-digit authentication code.",
+      "serverError": "Could not reach AliasVault server. Please try again later or contact support if the problem persists.",
+      "noToken": "Login failed -- no token returned",
+      "migrationError": "An error occurred while checking for pending migrations.",
+      "wrongPassword": "Incorrect password. Please try again.",
+      "accountLocked": "Account temporarily locked due to too many failed attempts.",
+      "networkError": "Network error. Please check your connection and try again.",
+      "loginDataMissing": "Login session expired. Please try again."
+    }
+  },
+  "menu": {
+    "credentials": "Credentials",
+    "emails": "Emails",
+    "settings": "Settings"
+  },
+  "common": {
+    "appName": "AliasVault",
+    "loading": "Loading...",
+    "error": "Error",
+    "success": "Success",
+    "cancel": "Cancel",
+    "use": "Use",
+    "delete": "Delete",
+    "close": "Close",
+    "copied": "Copied!",
+    "openInNewWindow": "Open in new window",
+    "language": "Language",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "showPassword": "Show password",
+    "hidePassword": "Hide password",
+    "copyToClipboard": "Copy to clipboard",
+    "loadingEmails": "Loading emails...",
+    "loadingTotpCodes": "Loading TOTP codes...",
+    "attachments": "Attachments",
+    "loadingAttachments": "Loading attachments...",
+    "settings": "Settings",
+    "recentEmails": "Recent emails",
+    "loginCredentials": "Login credentials",
+    "twoFactorAuthentication": "Two-factor authentication",
+    "alias": "Alias",
+    "notes": "Notes",
+    "fullName": "Full Name",
+    "firstName": "First Name",
+    "lastName": "Last Name",
+    "birthDate": "Birth Date",
+    "nickname": "Nickname",
+    "email": "Email",
+    "username": "Username",
+    "password": "Password",
+    "syncingVault": "Syncing vault",
+    "savingChangesToVault": "Saving changes to vault",
+    "uploadingVaultToServer": "Uploading vault to server",
+    "checkingVaultUpdates": "Checking for vault updates",
+    "syncingUpdatedVault": "Syncing updated vault",
+    "executingOperation": "Executing operation...",
+    "loadMore": "Load more",
+    "errors": {
+      "VaultOutdated": "Your vault is outdated. Please login on the AliasVault website and follow the steps.",
+      "serverNotAvailable": "The AliasVault server is not available. Please try again later or contact support if the problem persists.",
+      "clientVersionNotSupported": "This version of the AliasVault browser extension is not supported by the server anymore. Please update your browser extension to the latest version.",
+      "serverVersionNotSupported": "The AliasVault server needs to be updated to a newer version in order to use this browser extension. Please contact support if you need help.",
+      "unknownError": "An unknown error occurred",
+      "failedToStoreVault": "Failed to store vault",
+      "vaultNotAvailable": "Vault not available",
+      "failedToRetrieveData": "Failed to retrieve data",
+      "vaultIsLocked": "Vault is locked",
+      "failedToUploadVault": "Failed to upload vault",
+      "passwordChanged": "Your password has changed since the last time you logged in. Please login again for security reasons."
+    },
+    "apiErrors": {
+      "UNKNOWN_ERROR": "An unknown error occurred. Please try again.",
+      "ACCOUNT_LOCKED": "Account temporarily locked due to too many failed attempts. Please try again later.",
+      "ACCOUNT_BLOCKED": "Your account has been disabled. If you believe this is a mistake, please contact support.",
+      "USER_NOT_FOUND": "Invalid username or password. Please try again.",
+      "INVALID_AUTHENTICATOR_CODE": "Invalid authenticator code. Please try again.",
+      "INVALID_RECOVERY_CODE": "Invalid recovery code. Please try again.",
+      "REFRESH_TOKEN_REQUIRED": "Refresh token is required.",
+      "INVALID_REFRESH_TOKEN": "Invalid refresh token.",
+      "REFRESH_TOKEN_REVOKED_SUCCESSFULLY": "Refresh token revoked successfully.",
+      "PUBLIC_REGISTRATION_DISABLED": "New account registration is currently disabled on this server. Please contact the administrator.",
+      "USERNAME_REQUIRED": "Username is required.",
+      "USERNAME_ALREADY_IN_USE": "Username is already in use.",
+      "USERNAME_AVAILABLE": "Username is available.",
+      "USERNAME_MISMATCH": "Username does not match the current user.",
+      "PASSWORD_MISMATCH": "The provided password does not match your current password.",
+      "ACCOUNT_SUCCESSFULLY_DELETED": "Account successfully deleted.",
+      "USERNAME_EMPTY_OR_WHITESPACE": "Username cannot be empty or whitespace.",
+      "USERNAME_TOO_SHORT": "Username too short: must be at least 3 characters long.",
+      "USERNAME_TOO_LONG": "Username too long: cannot be longer than 40 characters.",
+      "USERNAME_INVALID_EMAIL": "Invalid email address.",
+      "USERNAME_INVALID_CHARACTERS": "Username is invalid, can only contain letters or digits.",
+      "VAULT_NOT_UP_TO_DATE": "Your vault is not up-to-date. Please synchronize your vault and try again.",
+      "INTERNAL_SERVER_ERROR": "Internal server error.",
+      "VAULT_ERROR": "The local vault is not up-to-date. Please synchronize your vault by refreshing the page and try again."
+    }
+  },
+  "content": {
+    "or": "or",
+    "new": "New",
+    "cancel": "Cancel",
+    "search": "Search",
+    "vaultLocked": "AliasVault is locked.",
+    "creatingNewAlias": "Creating new alias...",
+    "noMatchesFound": "No matches found",
+    "searchVault": "Search vault...",
+    "serviceName": "Service name",
+    "email": "Email",
+    "username": "Username",
+    "password": "Password",
+    "enterServiceName": "Enter service name",
+    "enterEmailAddress": "Enter email address",
+    "enterUsername": "Enter username",
+    "hideFor1Hour": "Hide for 1 hour (current site)",
+    "hidePermanently": "Hide permanently (current site)",
+    "createRandomAlias": "Create random alias",
+    "createUsernamePassword": "Create username/password",
+    "randomAlias": "Random alias",
+    "usernamePassword": "Username/password",
+    "createAndSaveAlias": "Create and save alias",
+    "createAndSaveCredential": "Create and save credential",
+    "randomIdentityDescription": "Generate a random identity with a random email address accessible in AliasVault.",
+    "randomIdentityDescriptionDropdown": "Random identity with random email",
+    "manualCredentialDescription": "Specify your own email address and username.",
+    "manualCredentialDescriptionDropdown": "Manual username and password",
+    "failedToCreateIdentity": "Failed to create identity. Please try again.",
+    "enterEmailAndOrUsername": "Enter email and/or username",
+    "autofillWithAliasVault": "Autofill with AliasVault",
+    "generateRandomPassword": "Generate random password (copy to clipboard)",
+    "generateNewPassword": "Generate new password",
+    "togglePasswordVisibility": "Toggle password visibility",
+    "passwordCopiedToClipboard": "Password copied to clipboard",
+    "enterEmailAndOrUsernameError": "Enter email and/or username",
+    "openAliasVaultToUpgrade": "Open AliasVault to upgrade",
+    "vaultUpgradeRequired": "Vault upgrade required.",
+    "dismissPopup": "Dismiss popup"
+  },
+  "credentials": {
+    "title": "Credentials",
+    "addCredential": "Add Credential",
+    "editCredential": "Edit Credential",
+    "deleteCredential": "Delete Credential",
+    "credentialDetails": "Credential Details",
+    "serviceName": "Service Name",
+    "serviceNamePlaceholder": "e.g., Gmail, Facebook, Bank",
+    "website": "Website",
+    "websitePlaceholder": "https://example.com",
+    "username": "Username",
+    "usernamePlaceholder": "Enter username",
+    "password": "Password",
+    "passwordPlaceholder": "Enter password",
+    "generatePassword": "Generate Password",
+    "copyPassword": "Copy Password",
+    "showPassword": "Show Password",
+    "hidePassword": "Hide Password",
+    "notes": "Notes",
+    "notesPlaceholder": "Additional notes...",
+    "totp": "Two-Factor Authentication",
+    "totpCode": "TOTP Code",
+    "copyTotp": "Copy TOTP",
+    "totpSecret": "TOTP Secret",
+    "totpSecretPlaceholder": "Enter TOTP secret key",
+    "noCredentials": "No credentials found",
+    "noCredentialsDescription": "Add your first credential to get started",
+    "searchPlaceholder": "Search credentials...",
+    "welcomeTitle": "Welcome to AliasVault!",
+    "welcomeDescription": "To use the AliasVault browser extension: navigate to a website and use the AliasVault autofill popup to create a new credential.",
+    "createdAt": "Created",
+    "updatedAt": "Last updated",
+    "autofill": "Autofill",
+    "fillForm": "Fill Form",
+    "deleteConfirm": "Are you sure you want to delete this credential?",
+    "saveSuccess": "Credential saved successfully",
+    "tags": "Tags",
+    "addTag": "Add Tag",
+    "removeTag": "Remove Tag",
+    "folder": "Folder",
+    "selectFolder": "Select Folder",
+    "createFolder": "Create Folder",
+    "saveCredential": "Save credential",
+    "deleteCredentialTitle": "Delete Credential",
+    "deleteCredentialConfirm": "Are you sure you want to delete this credential? This action cannot be undone.",
+    "randomAlias": "Random Alias",
+    "manual": "Manual",
+    "service": "Service",
+    "serviceUrl": "Service URL",
+    "loginCredentials": "Login Credentials",
+    "generateRandomUsername": "Generate random username",
+    "generateRandomPassword": "Generate random password",
+    "changePasswordComplexity": "Change password complexity",
+    "passwordLength": "Password length",
+    "includeLowercase": "Include lowercase letters",
+    "includeUppercase": "Include uppercase letters",
+    "includeNumbers": "Include numbers",
+    "includeSpecialChars": "Include special characters",
+    "avoidAmbiguousChars": "Avoid ambiguous characters (o, 0, etc.)",
+    "generateNewPreview": "Generate new preview",
+    "generateRandomAlias": "Generate Random Alias",
+    "alias": "Alias",
+    "firstName": "First Name",
+    "lastName": "Last Name",
+    "nickName": "Nick Name",
+    "gender": "Gender",
+    "birthDate": "Birth Date",
+    "birthDatePlaceholder": "YYYY-MM-DD",
+    "metadata": "Metadata",
+    "validation": {
+      "required": "This field is required",
+      "serviceNameRequired": "Service name is required",
+      "invalidEmail": "Invalid email format",
+      "invalidDateFormat": "Date must be in YYYY-MM-DD format"
+    },
+    "privateEmailTitle": "Private Email",
+    "privateEmailAliasVaultServer": "AliasVault server",
+    "privateEmailDescription": "E2E encrypted, fully private.",
+    "publicEmailTitle": "Public Temp Email Providers",
+    "publicEmailDescription": "Anonymous but limited privacy. Email content is readable by anyone that knows the address.",
+    "useDomainChooser": "Use domain chooser",
+    "enterCustomDomain": "Enter custom domain",
+    "enterFullEmail": "Enter full email address",
+    "enterEmailPrefix": "Enter email prefix"
+  },
+  "emails": {
+    "title": "Emails",
+    "deleteEmailTitle": "Delete Email",
+    "deleteEmailConfirm": "Are you sure you want to permanently delete this email?",
+    "from": "From",
+    "to": "To",
+    "date": "Date",
+    "emailContent": "Email content",
+    "attachments": "Attachments",
+    "emailNotFound": "Email not found",
+    "noEmails": "No emails found",
+    "noEmailsDescription": "You have not received any emails at your private email addresses yet. When you receive a new email, it will appear here.",
+    "dateFormat": {
+      "justNow": "just now",
+      "minutesAgo_single": "{{count}} min ago",
+      "minutesAgo_plural": "{{count}} mins ago",
+      "hoursAgo_single": "{{count}} hr ago",
+      "hoursAgo_plural": "{{count}} hrs ago",
+      "yesterday": "yesterday"
+    },
+    "errors": {
+      "emailLoadError": "An error occurred while loading emails. Please try again later.",
+      "emailUnexpectedError": "An unexpected error occurred while loading emails. Please try again later."
+    },
+    "apiErrors": {
+      "CLAIM_DOES_NOT_MATCH_USER": "The current chosen email address is already in use. Please change the email address by editing this credential.",
+      "CLAIM_DOES_NOT_EXIST": "An error occurred while trying to load the emails. Please try to edit and save the credential entry to synchronize the database, then try again."
+    }
+  },
+  "settings": {
+    "title": "Settings",
+    "serverUrl": "Server URL",
+    "language": "Language",
+    "autofillEnabled": "Enable Autofill",
+    "version": "Version",
+    "openInNewWindow": "Open in new window",
+    "openWebApp": "Open web app",
+    "loggedIn": "Logged in",
+    "logout": "Logout",
+    "globalSettings": "Global Settings",
+    "autofillPopup": "Autofill popup",
+    "activeOnAllSites": "Active on all sites (unless disabled below)",
+    "disabledOnAllSites": "Disabled on all sites",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "rightClickContextMenu": "Right-click context menu",
+    "autofillMatching": "Autofill Matching",
+    "autofillMatchingMode": "Autofill matching mode",
+    "autofillMatchingModeDescription": "Determines which credentials are considered a match and shown as suggestions in the autofill popup for a given website.",
+    "autofillMatchingDefault": "URL + subdomain + name wildcard",
+    "autofillMatchingUrlSubdomain": "URL + subdomain",
+    "autofillMatchingUrlExact": "Exact URL domain only",
+    "siteSpecificSettings": "Site-Specific Settings",
+    "autofillPopupOn": "Autofill popup on: ",
+    "enabledForThisSite": "Enabled for this site",
+    "disabledForThisSite": "Disabled for this site",
+    "temporarilyDisabledUntil": "Temporarily disabled until ",
+    "resetAllSiteSettings": "Reset all site-specific settings",
+    "appearance": "Appearance",
+    "theme": "Theme",
+    "useDefault": "Use default",
+    "light": "Light",
+    "dark": "Dark",
+    "keyboardShortcuts": "Keyboard Shortcuts",
+    "configureKeyboardShortcuts": "Configure keyboard shortcuts",
+    "configure": "Configure",
+    "security": "Security",
+    "clipboardClearTimeout": "Clear clipboard after copying",
+    "clipboardClearTimeoutDescription": "Automatically clear the clipboard after copying sensitive data",
+    "clipboardClearDisabled": "Never clear",
+    "clipboardClear5Seconds": "Clear after 5 seconds",
+    "clipboardClear10Seconds": "Clear after 10 seconds",
+    "clipboardClear15Seconds": "Clear after 15 seconds",
+    "autoLockTimeout": "Auto-lock Timeout",
+    "autoLockTimeoutDescription": "Automatically lock the vault after a period of inactivity",
+    "autoLockTimeoutHelp": "The vault will only lock after the specified period of inactivity (no autofill usage or extension popup opened). The vault will always lock when the browser is closed, regardless of this setting.",
+    "autoLockNever": "Never",
+    "autoLock15Seconds": "15 seconds",
+    "autoLock1Minute": "1 minute",
+    "autoLock5Minutes": "5 minutes",
+    "autoLock15Minutes": "15 minutes",
+    "autoLock30Minutes": "30 minutes",
+    "autoLock1Hour": "1 hour",
+    "autoLock4Hours": "4 hours",
+    "autoLock8Hours": "8 hours",
+    "autoLock24Hours": "24 hours",
+    "versionPrefix": "Version ",
+    "preferences": "Preferences",
+    "autofillSettings": "Autofill Settings",
+    "clipboardSettings": "Clipboard Settings",
+    "contextMenuSettings": "Context Menu Settings",
+    "contextMenu": "Context Menu",
+    "contextMenuEnabled": "Context menu is enabled",
+    "contextMenuDisabled": "Context menu is disabled",
+    "contextMenuDescription": "Right-click on input fields to access AliasVault options",
+    "selectLanguage": "Select Language",
+    "validation": {
+      "apiUrlRequired": "API URL is required",
+      "apiUrlInvalid": "Please enter a valid API URL",
+      "clientUrlRequired": "Client URL is required",
+      "clientUrlInvalid": "Please enter a valid client URL"
+    }
+  },
+  "upgrade": {
+    "title": "Upgrade Vault",
+    "subtitle": "AliasVault has updated and your vault needs to be upgraded. This should only take a few seconds.",
+    "versionInformation": "Version Information",
+    "yourVault": "Your vault:",
+    "newVersion": "New version:",
+    "upgrade": "Upgrade Vault",
+    "upgrading": "Upgrading...",
+    "logout": "Logout",
+    "whatsNew": "What's New",
+    "whatsNewDescription": "An upgrade is required to support the following changes:",
+    "noDescriptionAvailable": "No description available for this version.",
+    "okay": "Ok",
+    "status": {
+      "preparingUpgrade": "Preparing upgrade...",
+      "vaultAlreadyUpToDate": "Vault is already up to date",
+      "startingDatabaseTransaction": "Starting database transaction...",
+      "applyingDatabaseMigrations": "Applying database migrations...",
+      "applyingMigration": "Applying migration {{current}} of {{total}}...",
+      "committingChanges": "Committing changes..."
+    },
+    "alerts": {
+      "error": "Error",
+      "unableToGetVersionInfo": "Unable to get version information. Please try again.",
+      "selfHostedServer": "Self-Hosted Server",
+      "selfHostedWarning": "If you're using a self-hosted server, make sure to also update your self-hosted instance as otherwise logging in to the web client will stop working.",
+      "cancel": "Cancel",
+      "continueUpgrade": "Continue Upgrade",
+      "upgradeFailed": "Upgrade Failed",
+      "failedToApplyMigration": "Failed to apply migration ({{current}} of {{total}})",
+      "unknownErrorDuringUpgrade": "An unknown error occurred during the upgrade. Please try again."
+    }
+  }
+}

apps/browser-extension/src/i18n/locales/fi.json

@@ -0,0 +1,392 @@
+{
+  "auth": {
+    "loginTitle": "Kirjaudu sisään AliasVaultiin",
+    "username": "Käyttäjänimi tai sähköposti",
+    "usernamePlaceholder": "nimi / nimi@yritys.fi",
+    "password": "Salasana",
+    "passwordPlaceholder": "Syötä salasanasi",
+    "rememberMe": "Muista minut",
+    "loginButton": "Kirjaudu",
+    "noAccount": "Eikö sinulla ole vielä tiliä?",
+    "createVault": "Luo uusi holvi",
+    "twoFactorTitle": "Ole hyvä ja syötä tunnistautumiskoodi tunnistautumissovelluksestasi.",
+    "authCode": "Tunnistautumiskoodi",
+    "authCodePlaceholder": "Syötä 6-numeroinen koodi",
+    "verify": "Vahvista",
+    "cancel": "Peruuta",
+    "twoFactorNote": "Huomautus: jos sinulla ei ole pääsyä tunnistautumislaitteeseen, voit palauttaa 2FA:n palautuskoodilla kirjautumalla sisään sivuston kautta.",
+    "masterPassword": "Pääsalasana",
+    "unlockVault": "Avaa holvi",
+    "unlockTitle": "Avaa Holvisi",
+    "unlockDescription": "Syötä pääsalasanasi avataksesi holvisi lukituksen.",
+    "logout": "Kirjaudu ulos",
+    "logoutConfirm": "Oletko varma, että haluat kirjautua ulos?",
+    "sessionExpired": "Istuntosi on vanhentunut. Ole hyvä ja kirjaudu uudelleen.",
+    "unlockSuccess": "Holvi avattu onnistuneesti!",
+    "unlockSuccessTitle": "Holvisi lukitus on onnistuneesti avattu",
+    "unlockSuccessDescription": "Voit nyt käyttää selaimessasi olevia kirjautumislomakkeita automaattisesti.",
+    "closePopup": "Sulje tämä ponnahdusikkuna",
+    "browseVault": "Selaa holvin sisältöä",
+    "connectingTo": "Yhdistetään palvelimeen",
+    "switchAccounts": "Vaihdetaanko tiliä?",
+    "loggedIn": "Kirjautuneena",
+    "errors": {
+      "invalidCode": "Anna kelvollinen 6-numeroinen tunnistautumiskoodi.",
+      "serverError": "AliasVault-palvelimeen ei saatu yhteyttä. Yritä myöhemmin uudelleen tai ota yhteyttä tukeen, jos ongelma jatkuu.",
+      "noToken": "Kirjautuminen epäonnistui -- tunnusta ei palautettu",
+      "migrationError": "Tapahtui virhe tarkistettaessa odottavia siirtoja.",
+      "wrongPassword": "Virheellinen salasana. Yritä uudelleen.",
+      "accountLocked": "Tili on tilapäisesti lukittu liian monen epäonnistuneen yrityksen vuoksi. Yritä myöhemmin uudelleen.",
+      "networkError": "Verkkovirhe: tarkista yhteytesi ja yritä uudelleen.",
+      "loginDataMissing": "Kirjautumisistunto on vanhentunut. Yritä uudelleen."
+    }
+  },
+  "menu": {
+    "credentials": "Käyttäjätunnukset",
+    "emails": "Sähköpostit",
+    "settings": "Asetukset"
+  },
+  "common": {
+    "appName": "AliasVault",
+    "loading": "Ladataan...",
+    "error": "Virhe",
+    "success": "Onnistui",
+    "cancel": "Peruuta",
+    "use": "Käytä",
+    "delete": "Poista",
+    "close": "Sulje",
+    "copied": "Kopioitu!",
+    "openInNewWindow": "Avaa uudessa ikkunassa",
+    "language": "Kieli",
+    "enabled": "Käytössä",
+    "disabled": "Pois käytöstä",
+    "showPassword": "Näytä salasana",
+    "hidePassword": "Piilota salasana",
+    "copyToClipboard": "Kopioi leikepöydälle",
+    "loadingEmails": "Ladataan sähköposteja...",
+    "loadingTotpCodes": "Ladataan TOTP-koodeja...",
+    "attachments": "Liitteet",
+    "loadingAttachments": "Ladataan liitteitä...",
+    "settings": "Asetukset",
+    "recentEmails": "Viimeisimmät sähköpostit",
+    "loginCredentials": "Sisäänkirjautumistiedot",
+    "twoFactorAuthentication": "Kaksivaiheinen tunnistautuminen",
+    "alias": "Alias",
+    "notes": "Muistiinpanot",
+    "fullName": "Koko nimi",
+    "firstName": "Etunimi",
+    "lastName": "Sukunimi",
+    "birthDate": "Syntymäpäivä",
+    "nickname": "Lempinimi",
+    "email": "Sähköposti",
+    "username": "Käyttäjänimi",
+    "password": "Salasana",
+    "syncingVault": "Synkronoidaan holvia",
+    "savingChangesToVault": "Tallennetaan muutoksia holviin",
+    "uploadingVaultToServer": "Lähetetään holvi palvelimelle",
+    "checkingVaultUpdates": "Tarkistetaan holvin päivityksiä",
+    "syncingUpdatedVault": "Synkronoidaan päivitettyä holvia",
+    "executingOperation": "Suoritetaan toimintoa...",
+    "loadMore": "Lataa lisää",
+    "errors": {
+      "VaultOutdated": "Holvisi on vanhentunut. Kirjaudu AliasVaultin kotisivulle ja noudata ohjeita.",
+      "serverNotAvailable": "AliasVault-palvelin ei ole käytettävissä. Yritä myöhemmin uudelleen tai ota yhteyttä tukeen, jos ongelma jatkuu.",
+      "clientVersionNotSupported": "Palvelin ei enää tue tätä AliasVault-selainlaajennuksen versiota. Ole hyvä ja päivitä selaimen laajennus uusimpaan versioon.",
+      "serverVersionNotSupported": "AliasVault-palvelin on päivitettävä uudempaan versioon, jotta voit käyttää tätä selainlaajennusta. Ota yhteyttä tukeen, jos tarvitset apua.",
+      "unknownError": "Tapahtui tuntematon virhe",
+      "failedToStoreVault": "Holvin tallentaminen epäonnistui",
+      "vaultNotAvailable": "Holvi ei ole käytettävissä",
+      "failedToRetrieveData": "Tietojen nouto epäonnistui",
+      "vaultIsLocked": "Holvi on lukittu",
+      "failedToUploadVault": "Holvin lataaminen epäonnistui",
+      "passwordChanged": "Salasanasi on muuttunut edellisen kirjautumisen jälkeen. Ole hyvä ja kirjaudu uudelleen turvallisuussyistä."
+    },
+    "apiErrors": {
+      "UNKNOWN_ERROR": "Tapahtui tuntematon virhe. Yritä uudelleen.",
+      "ACCOUNT_LOCKED": "Tili on tilapäisesti lukittu liian monen epäonnistuneen yrityksen vuoksi. Yritä myöhemmin uudelleen.",
+      "ACCOUNT_BLOCKED": "Tilisi on poistettu käytöstä. Jos uskot, että tämä on virhe, ota yhteyttä tukeen.",
+      "USER_NOT_FOUND": "Virheellinen käyttäjänimi tai salasana. Yritä uudelleen.",
+      "INVALID_AUTHENTICATOR_CODE": "Virheellinen tunnistautumiskoodi. Yritä uudelleen.",
+      "INVALID_RECOVERY_CODE": "Virheellinen palautuskoodi. Yritä uudelleen.",
+      "REFRESH_TOKEN_REQUIRED": "Päivitysavain vaaditaan.",
+      "INVALID_REFRESH_TOKEN": "Virheellinen päivitysavain.",
+      "REFRESH_TOKEN_REVOKED_SUCCESSFULLY": "Päivitysavain peruutettu onnistuneesti.",
+      "PUBLIC_REGISTRATION_DISABLED": "Uuden tilin rekisteröinti on poistettu käytöstä tällä palvelimella. Ota yhteyttä järjestelmänvalvojaan.",
+      "USERNAME_REQUIRED": "Käyttäjänimi vaaditaan.",
+      "USERNAME_ALREADY_IN_USE": "Käyttäjätunnus on jo käytössä",
+      "USERNAME_AVAILABLE": "Käyttäjänimi on saatavilla.",
+      "USERNAME_MISMATCH": "Käyttäjänimi ei vastaa nykyistä käyttäjää.",
+      "PASSWORD_MISMATCH": "Annettu salasana ei vastaa nykyistä salasanaasi.",
+      "ACCOUNT_SUCCESSFULLY_DELETED": "Käyttäjätili onnistuneesti poistettu,.",
+      "USERNAME_EMPTY_OR_WHITESPACE": "Käyttäjätunnus ei voi olla tyhjä.",
+      "USERNAME_TOO_SHORT": "Käyttäjätunnus on liian lyhyt: sen on oltava vähintään 3 merkkiä pitkä.",
+      "USERNAME_TOO_LONG": "Käyttäjätunnus on liian pitkä: se voi olla enintään 40 merkkiä.",
+      "USERNAME_INVALID_EMAIL": "Virheellinen sähköpostiosoite.",
+      "USERNAME_INVALID_CHARACTERS": "Käyttäjätunnus on virheellinen, voi sisältää vain kirjaimia tai numeroita.",
+      "VAULT_NOT_UP_TO_DATE": "Holvisi ei ole ajan tasalla. Synkronoi holvisi ja yritä uudelleen.",
+      "INTERNAL_SERVER_ERROR": "Sisäinen palvelinvirhe.",
+      "VAULT_ERROR": "Paikallinen holvi ei ole ajan tasalla. Synkronoi holvisi päivittämällä sivu ja yritä uudelleen."
+    }
+  },
+  "content": {
+    "or": "tai",
+    "new": "Uusi",
+    "cancel": "Peruuta",
+    "search": "Etsi",
+    "vaultLocked": "AliasVault on lukittu.",
+    "creatingNewAlias": "Luodaan uutta aliasta...",
+    "noMatchesFound": "Hakutuloksia ei löytynyt",
+    "searchVault": "Etsi holvi...",
+    "serviceName": "Palvelun nimi",
+    "email": "Sähköposti",
+    "username": "Käyttäjänimi",
+    "password": "Salasana",
+    "enterServiceName": "Syötä palvelun nimi",
+    "enterEmailAddress": "Syötä sähköpostiosoite",
+    "enterUsername": "Syötä käyttäjänimi",
+    "hideFor1Hour": "Piilota 1 tunniksi (nykyinen sivusto)",
+    "hidePermanently": "Piilota pysyvästi (nykyinen sivu)",
+    "createRandomAlias": "Luo sattumanvarainen alias",
+    "createUsernamePassword": "Luo käyttäjänimi/salasana",
+    "randomAlias": "Sattumanvarainen alias",
+    "usernamePassword": "Käyttäjänimi/Salasana",
+    "createAndSaveAlias": "Luo ja tallenna alias",
+    "createAndSaveCredential": "Luo ja tallenna käyttäjätunnus",
+    "randomIdentityDescription": "Luo satunnainen identiteetti, jolla on satunnainen sähköpostiosoite, johon on pääsy AliasVaultissa.",
+    "randomIdentityDescriptionDropdown": "Satunnainen identiteetti satunnaisella sähköpostiosoitteella",
+    "manualCredentialDescription": "Määritä oma sähköpostiosoitteesi ja käyttäjänimesi.",
+    "manualCredentialDescriptionDropdown": "Manuaalinen käyttäjänimi ja salasana",
+    "failedToCreateIdentity": "Henkilöllisyyden luonti epäonnistui. Yritä uudelleen.",
+    "enterEmailAndOrUsername": "Syötä sähköpostiosoite ja/tai käyttäjänimi",
+    "autofillWithAliasVault": "Automaattinen täyttö AliasVaultilla",
+    "generateRandomPassword": "Luo sattumanvarainen salasana (kopioi leikepöydälle)",
+    "generateNewPassword": "Luo uusi salasana",
+    "togglePasswordVisibility": "Vaihda salasanan näkyvyyttä",
+    "passwordCopiedToClipboard": "Salasana kopioitu leikepöydälle",
+    "enterEmailAndOrUsernameError": "Syötä sähköpostiosoite ja/tai käyttäjänimi",
+    "openAliasVaultToUpgrade": "Avaa AliasVault päivittääksesi",
+    "vaultUpgradeRequired": "Holvin päivitys vaaditaan.",
+    "dismissPopup": "Hylkää ponnahdusikkuna"
+  },
+  "credentials": {
+    "title": "Käyttäjätunnukset",
+    "addCredential": "Lisää käyttäjätunnus",
+    "editCredential": "Muokkaa käyttäjätunnusta",
+    "deleteCredential": "Poista käyttäjätunnus",
+    "credentialDetails": "Käyttäjätunnuksen tiedot",
+    "serviceName": "Palvelun nimi",
+    "serviceNamePlaceholder": "esim. Gmail, Facebook, Pankki",
+    "website": "Verkkosivusto",
+    "websitePlaceholder": "https://esimerkki.fi",
+    "username": "Käyttäjänimi",
+    "usernamePlaceholder": "Syötä käyttäjänimi",
+    "password": "Salasana",
+    "passwordPlaceholder": "Syötä salasana",
+    "generatePassword": "Luo salasana",
+    "copyPassword": "Kopioi salasana",
+    "showPassword": "Näytä salasana",
+    "hidePassword": "Piilota salasana",
+    "notes": "Muistiinpanot",
+    "notesPlaceholder": "Muut huomautukset...",
+    "totp": "Kaksivaiheinen tunnistautuminen",
+    "totpCode": "TOTP koodi",
+    "copyTotp": "Kopioi TOTP-koodi",
+    "totpSecret": "TOTP Salaus",
+    "totpSecretPlaceholder": "Syötä TOTP salainen avain",
+    "noCredentials": "Käyttäjätunnuksia ei löytynyt",
+    "noCredentialsDescription": "Lisää ensimmäinen käyttäjätunnuksesi aloittaaksesi",
+    "searchPlaceholder": "Etsi käyttäjätunnuksia...",
+    "welcomeTitle": "Tervetuloa AliasVaultiin!",
+    "welcomeDescription": "Käyttääksesi AliasVault-selainlaajennusta: Siirry sivustolle ja käytä AliasVaultin automaattisen täytön ponnahdusikkunaa luodaksesi uuden käyttäjätunnuksen.",
+    "createdAt": "Luotu",
+    "updatedAt": "Viimeksi päivitetty",
+    "autofill": "Automaattinen täyttö",
+    "fillForm": "Täytä lomake",
+    "deleteConfirm": "Oletko varma, että haluat poistaa tämän käyttäjätunnuksen?",
+    "saveSuccess": "Käyttäjätunnus tallennettu onnistuneesti.",
+    "tags": "Tunnisteet",
+    "addTag": "Lisää tunniste",
+    "removeTag": "Poista tunniste",
+    "folder": "Kansio",
+    "selectFolder": "Valitse kansio",
+    "createFolder": "Luo kansio",
+    "saveCredential": "Tallenna käyttäjätunnus",
+    "deleteCredentialTitle": "Poista käyttäjätunnus",
+    "deleteCredentialConfirm": "Oletko varma, että haluat poistaa tämän tunnuksen? Tätä toimintoa ei voi perua.",
+    "randomAlias": "Sattumanvarainen Alias",
+    "manual": "Käyttöopas",
+    "service": "Palvelu",
+    "serviceUrl": "Palvelun URL-osoite",
+    "loginCredentials": "Sisäänkirjautumistiedot",
+    "generateRandomUsername": "Luo sattumanvarainen käyttäjätunnus",
+    "generateRandomPassword": "Luo sattumanvarainen salasana",
+    "changePasswordComplexity": "Muuta salasanan monimutkaisuutta",
+    "passwordLength": "Salasanan pituus",
+    "includeLowercase": "Sisällytä pienet kirjaimet",
+    "includeUppercase": "Sisällytä isot kirjaimet",
+    "includeNumbers": "Sisällytä numerot",
+    "includeSpecialChars": "Sisällytä erikoismerkit",
+    "avoidAmbiguousChars": "Vältä epäselviä merkkejä (o, 0 jne.)",
+    "generateNewPreview": "Luo uusi esikatselu",
+    "generateRandomAlias": "Luo sattumanvarainen alias",
+    "alias": "Alias",
+    "firstName": "Etunimi",
+    "lastName": "Sukunimi",
+    "nickName": "Lempinimi",
+    "gender": "Sukupuoli",
+    "birthDate": "Syntymäpäivä",
+    "birthDatePlaceholder": "VVVV-KK-PP.",
+    "metadata": "Metatiedot",
+    "validation": {
+      "required": "Tämä kenttä on pakollinen.",
+      "serviceNameRequired": "Palvelun nimi on pakollinen",
+      "invalidEmail": "Virheellinen sähköpostiosoitteen muoto",
+      "invalidDateFormat": "Päivämäärän on oltava muodossa VVVV-KK-PP."
+    },
+    "privateEmailTitle": "Yksityinen sähköposti",
+    "privateEmailAliasVaultServer": "AliasVault-palvelin",
+    "privateEmailDescription": "E2E salattu, täysin yksityinen.",
+    "publicEmailTitle": "Julkiset väliaikaisen sähköpostiosoitteen tarjoajat",
+    "publicEmailDescription": "Anonyymi mutta rajoitettu yksityisyys. Käytettävissä kaikille, jotka tuntevat osoitteen.",
+    "useDomainChooser": "Käytä verkkotunnuksen valintaa",
+    "enterCustomDomain": "Anna oma verkkotunnus",
+    "enterFullEmail": "Syötä täysi sähköpostiosoite",
+    "enterEmailPrefix": "Syötä sähköpostin etuliite"
+  },
+  "emails": {
+    "title": "Sähköpostit",
+    "deleteEmailTitle": "Poista sähköposti",
+    "deleteEmailConfirm": "Oletko varma, että haluat poistaa tämän kuvan pysyvästi?",
+    "from": "Lähettäjä",
+    "to": "Vastaanottaja",
+    "date": "Päivämäärä",
+    "emailContent": "Sähköpostin sisältö",
+    "attachments": "Liitteet",
+    "emailNotFound": "Sähköpostia ei löytynyt",
+    "noEmails": "Sähköposteja ei löytynyt",
+    "noEmailsDescription": "Et ole vielä vastaanottanut sähköposteja yksityisissä sähköpostiosoitteissasi. Kun saat uuden sähköpostiviestin, se näkyy täällä.",
+    "dateFormat": {
+      "justNow": "juuri nyt",
+      "minutesAgo_single": "{{count}} min sitten",
+      "minutesAgo_plural": "{{count}} minuuttia sitten",
+      "hoursAgo_single": "{{count}} h sitten",
+      "hoursAgo_plural": "{{count}} tuntia sitten",
+      "yesterday": "eilen"
+    },
+    "errors": {
+      "emailLoadError": "Sähköpostien lataamisessa tapahtui virhe. Yritä myöhemmin uudelleen.",
+      "emailUnexpectedError": "Odottamaton virhe sähköpostien latauksen aikana. Yritä myöhemmin uudelleen."
+    },
+    "apiErrors": {
+      "CLAIM_DOES_NOT_MATCH_USER": "Nykyinen valittu sähköpostiosoite on jo käytössä. Ole hyvä ja vaihda sähköpostiosoite muokkaamalla tätä tunnusta.",
+      "CLAIM_DOES_NOT_EXIST": "Tapahtui virhe ladattaessa sähköposteja. Yritä muokata ja tallentaa tunnistetiedot synkronoidaksesi tietokannan, ja yritä sitten uudelleen."
+    }
+  },
+  "settings": {
+    "title": "Asetukset",
+    "serverUrl": "Palvelimen URL-osoite",
+    "language": "Kieli",
+    "autofillEnabled": "Ota automaattitäyttö käyttöön",
+    "version": "Versio",
+    "openInNewWindow": "Avaa uudessa ikkunassa",
+    "openWebApp": "Avaa verkkosovellus",
+    "loggedIn": "Kirjautuneena",
+    "logout": "Kirjaudu ulos",
+    "globalSettings": "Yleiset asetukset",
+    "autofillPopup": "Automaattisen täytön ponnahdusikkuna",
+    "activeOnAllSites": "Aktiivinen kaikilla sivustoilla (paitsi jos pois päältä alla)",
+    "disabledOnAllSites": "Poistettu käytöstä kaikilla sivustoilla",
+    "enabled": "Käytössä",
+    "disabled": "Pois käytöstä",
+    "rightClickContextMenu": "Oikea-klikkauksen kontekstivalikko",
+    "autofillMatching": "Autofill osuma",
+    "autofillMatchingMode": "Autofill osumat käytössä",
+    "autofillMatchingModeDescription": "Määrittää mitkä käyttäjätunnukset katsotaan osumaksi ja näytetään automaattisen täytön ponnahdusikkunan ehdotuksina tietylle sivustolle.",
+    "autofillMatchingDefault": "URL + alitoimialue + nimi jokerimerkki",
+    "autofillMatchingUrlSubdomain": "URL + alitoimialue",
+    "autofillMatchingUrlExact": "Tarkka URL-verkkotunnus vain",
+    "siteSpecificSettings": "Sivukohtaiset asetukset",
+    "autofillPopupOn": "Automaattisen täytön ponnahdusikkuna päällä: ",
+    "enabledForThisSite": "Käytössä tällä sivustolla",
+    "disabledForThisSite": "Ei käytössä tällä sivustolla",
+    "temporarilyDisabledUntil": "Tilapäisesti pois päältä ",
+    "resetAllSiteSettings": "Nollaa kaikki sivustokohtaiset asetukset",
+    "appearance": "Ulkoasu",
+    "theme": "Teema",
+    "useDefault": "Käytä oletusta",
+    "light": "Vaalea",
+    "dark": "Tumma",
+    "keyboardShortcuts": "Pikanäppäimet",
+    "configureKeyboardShortcuts": "Määritä pikanäppäimet",
+    "configure": "Määritä",
+    "security": "Tietoturva",
+    "clipboardClearTimeout": "Tyhjennä leikepöytä kopioinnin jälkeen",
+    "clipboardClearTimeoutDescription": "Tyhjennä leikepöytä automaattisesti arkaluonteisten tietojen kopioinnin jälkeen",
+    "clipboardClearDisabled": "Älä tyhjennä koskaan",
+    "clipboardClear5Seconds": "Tyhjennä 5 sekunnin jälkeen",
+    "clipboardClear10Seconds": "Tyhjennä 10 sekunnin jälkeen",
+    "clipboardClear15Seconds": "Tyhjennä 15 sekunnin jälkeen",
+    "autoLockTimeout": "Automaattisen lukituksen aikakatkaisu",
+    "autoLockTimeoutDescription": "Lukitse holvi automaattisesti käyttämättä jäämisen jälkeen",
+    "autoLockTimeoutHelp": "Holvi lukittuu vain määritellyn käyttöajan jälkeen (ei automaattisen täytön käyttöä tai laajennuksen ponnahdusikkunaa auki). Holvi lukittuu aina, kun selain on suljettu, tästä asetuksesta riippumatta.",
+    "autoLockNever": "Ei koskaan",
+    "autoLock15Seconds": "15 sekuntia",
+    "autoLock1Minute": "1 minuutti",
+    "autoLock5Minutes": "5 minuuttia",
+    "autoLock15Minutes": "15 minuuttia",
+    "autoLock30Minutes": "30 minuuttia",
+    "autoLock1Hour": "1 tunti",
+    "autoLock4Hours": "4 tuntia",
+    "autoLock8Hours": "8 tuntia",
+    "autoLock24Hours": "24 tuntia",
+    "versionPrefix": "Versio",
+    "preferences": "Määritykset",
+    "autofillSettings": "Automaatisen täytön asetukset",
+    "clipboardSettings": "Leikepöydän asetukset",
+    "contextMenuSettings": "Sisältövalikon asetukset",
+    "contextMenu": "Sisältövalikko",
+    "contextMenuEnabled": "Sisältövalikko käytössä",
+    "contextMenuDisabled": "Sisältövalikko pois käytöstä",
+    "contextMenuDescription": "Napsauta syöttökenttiä hiiren kakkospainikkeella päästäksesi käsiksi AliasVaultin valintoihin",
+    "selectLanguage": "Valitse kieli",
+    "validation": {
+      "apiUrlRequired": "API URL-osoite vaaditaan",
+      "apiUrlInvalid": "Anna kelvollinen API URL-osoite",
+      "clientUrlRequired": "Asiakkaan URL-osoite vaaditaan",
+      "clientUrlInvalid": "Anna kelvollinen asiakkaan URL-osoite"
+    }
+  },
+  "upgrade": {
+    "title": "Päivitä holvi",
+    "subtitle": "AliasVault on päivitetty ja holvisi on päivitettävä. Tämän pitäisi kestää vain muutama sekunti.",
+    "versionInformation": "Versiotiedot",
+    "yourVault": "Sinun holvisi:",
+    "newVersion": "Uusi versio:",
+    "upgrade": "Päivitä Holvi",
+    "upgrading": "Päivitetään...",
+    "logout": "Kirjaudu ulos",
+    "whatsNew": "Mitä uutta?",
+    "whatsNewDescription": "Päivitys on tarpeen, jotta voidaan tukea seuraavia muutoksia:",
+    "noDescriptionAvailable": "Kuvausta ei ole saatavilla tälle versiolle.",
+    "okay": "Ok",
+    "status": {
+      "preparingUpgrade": "Valmistellaan päivityksiä...",
+      "vaultAlreadyUpToDate": "Holvi on jo ajan tasalla",
+      "startingDatabaseTransaction": "Aloitetaan tietokannan siirtoa...",
+      "applyingDatabaseMigrations": "Toteutetaan tietokannan siirtoja...",
+      "applyingMigration": "Siirretään tietoja: {{current}} / {{total}}...",
+      "committingChanges": "Suoritetaan muutoksia..."
+    },
+    "alerts": {
+      "error": "Virhe",
+      "unableToGetVersionInfo": "Versiotietoja ei löytynyt. Yritä uudelleen.",
+      "selfHostedServer": "Itsehallinnoitu palvelin",
+      "selfHostedWarning": "Jos käytät itsehallintoitua palvelina, varmista myös että päivität itsehallinnoidun palvelimesi, jos muutoin kirjautuminen web-asiakkaan kautta lakkaa toimimasta.",
+      "cancel": "Peruuta",
+      "continueUpgrade": "Jatka päivitystä",
+      "upgradeFailed": "Päivitys epäonnistui",
+      "failedToApplyMigration": "Tietojen siirto epäonnistui {{current}} / {{total}} ",
+      "unknownErrorDuringUpgrade": "Päivityksen aikana tapahtui tuntematon virhe. Yritä uudelleen."
+    }
+  }
+}

apps/browser-extension/src/i18n/locales/fr.json

@@ -0,0 +1,392 @@
+{
+  "auth": {
+    "loginTitle": "Se connecter à AliasVault",
+    "username": "Nom d'utilisateur ou email",
+    "usernamePlaceholder": "nom / nom@entreprise.com",
+    "password": "Mot de passe",
+    "passwordPlaceholder": "Saisissez votre mot de passe",
+    "rememberMe": "Se souvenir de moi",
+    "loginButton": "Se connecter",
+    "noAccount": "Pas de compte?",
+    "createVault": "Créer un nouveau coffre",
+    "twoFactorTitle": "Veuillez entrer le code d'authentification de votre application d'authentification.",
+    "authCode": "Code d'authentification",
+    "authCodePlaceholder": "Saisissez le code à 6 chiffres",
+    "verify": "Vérifier",
+    "cancel": "Annuler",
+    "twoFactorNote": "Remarque : si vous n'avez pas accès à votre appareil d'authentification, vous pouvez réinitialiser votre authentification à double facteur avec un code de récupération en vous connectant via le site web.",
+    "masterPassword": "Mot de passe principal",
+    "unlockVault": "Déverrouiller le coffre",
+    "unlockTitle": "Déverrouiller votre coffre",
+    "unlockDescription": "Entrez votre mot de passe principal pour déverrouiller votre coffre-fort.",
+    "logout": "Se déconnecter",
+    "logoutConfirm": "Êtes-vous sûr de vouloir vous déconnecter ?",
+    "sessionExpired": "Votre session a expiré. Veuillez vous reconnecter.",
+    "unlockSuccess": "Parcourir le contenu du coffre",
+    "unlockSuccessTitle": "Votre coffre a été déverrouillé avec succès",
+    "unlockSuccessDescription": "Vous pouvez maintenant utiliser le remplissage automatique des formulaires de connexion dans votre navigateur.",
+    "closePopup": "Fermer cette popup",
+    "browseVault": "Parcourir le contenu du coffre",
+    "connectingTo": "Connexion à",
+    "switchAccounts": "Changer de compte ?",
+    "loggedIn": "Connecté(e)",
+    "errors": {
+      "invalidCode": "Veuillez entrer un code d'authentification valide à 6 chiffres.",
+      "serverError": "Impossible d'accéder au serveur AliasVault. Veuillez réessayer plus tard ou contacter le support si le problème persiste.",
+      "noToken": "Échec de la connexion -- aucun jeton retourné",
+      "migrationError": "Une erreur s'est produite lors de la vérification des migrations en attente.",
+      "wrongPassword": "Mot de passe incorrect, veuillez réessayer.",
+      "accountLocked": "Compte temporairement verrouillé en raison d'un trop grand nombre de tentatives échouées.",
+      "networkError": "Erreur réseau. Vérifiez votre connexion et réessayez.",
+      "loginDataMissing": "La session a expiré. Veuillez réessayer."
+    }
+  },
+  "menu": {
+    "credentials": "Identifiants",
+    "emails": "Emails",
+    "settings": "Réglages"
+  },
+  "common": {
+    "appName": "AliasVault",
+    "loading": "Chargement...",
+    "error": "Erreur",
+    "success": "Succès",
+    "cancel": "Annuler",
+    "use": "Utiliser",
+    "delete": "Supprimer",
+    "close": "Fermer",
+    "copied": "Copié !",
+    "openInNewWindow": "Ouvrir dans une nouvelle fenêtre",
+    "language": "Language",
+    "enabled": "Activé",
+    "disabled": "Désactivé",
+    "showPassword": "Afficher le mot de passe",
+    "hidePassword": "Cacher le mot de passe",
+    "copyToClipboard": "Copier dans le presse-papiers",
+    "loadingEmails": "Chargement des emails...",
+    "loadingTotpCodes": "Chargement des codes TOTP...",
+    "attachments": "Pièces jointes",
+    "loadingAttachments": "Chargement des pièces jointes...",
+    "settings": "Réglages",
+    "recentEmails": "Emails récents",
+    "loginCredentials": "Identifiants de connexion",
+    "twoFactorAuthentication": "Authentification à double facteur",
+    "alias": "Alias",
+    "notes": "Notes",
+    "fullName": "Nom complet",
+    "firstName": "Prénom",
+    "lastName": "Nom",
+    "birthDate": "Date de naissance",
+    "nickname": "Surnom",
+    "email": "Email",
+    "username": "Nom d'utilisateur",
+    "password": "Mot de passe",
+    "syncingVault": "Synchronisation du coffre",
+    "savingChangesToVault": "Enregistrement des modifications dans le coffre",
+    "uploadingVaultToServer": "Envoi du coffre vers le serveur",
+    "checkingVaultUpdates": "Vérification des mises à jour du coffre",
+    "syncingUpdatedVault": "Synchronisation du coffre mis à jour",
+    "executingOperation": "Exécution de l'opération...",
+    "loadMore": "Voir plus",
+    "errors": {
+      "VaultOutdated": "Votre coffre est obsolète. Veuillez vous connecter sur le site AliasVault et suivre les étapes.",
+      "serverNotAvailable": "Le serveur d'AliasVault n'est pas disponible. Veuillez réessayer plus tard ou contacter le support si le problème persiste.",
+      "clientVersionNotSupported": "Cette version de l'extension de navigateur AliasVault n'est plus prise en charge par le serveur. Veuillez mettre à jour votre extension de navigateur à la dernière version.",
+      "serverVersionNotSupported": "Le serveur d'AliasVault doit être mis à jour vers une version plus récente afin d'utiliser cette extension de navigateur. Veuillez contacter le support si vous avez besoin d'aide.",
+      "unknownError": "Une erreur inconnue s'est produite",
+      "failedToStoreVault": "Échec du stockage du coffre",
+      "vaultNotAvailable": "Coffre non disponible",
+      "failedToRetrieveData": "Échec de la récupération des données",
+      "vaultIsLocked": "Le coffre est verrouillé",
+      "failedToUploadVault": "Échec du téléchargement du coffre",
+      "passwordChanged": "Votre mot de passe a changé depuis la dernière fois que vous vous êtes connecté. Veuillez vous reconnecter pour des raisons de sécurité."
+    },
+    "apiErrors": {
+      "UNKNOWN_ERROR": "Une erreur inconnue s'est produite. Merci de réessayer.",
+      "ACCOUNT_LOCKED": "Compte temporairement verrouillé en raison d'un trop grand nombre de tentatives infructueuses. Veuillez réessayer plus tard.",
+      "ACCOUNT_BLOCKED": "Votre compte a été désactivé. Si vous pensez que c'est une erreur, veuillez contacter le support.",
+      "USER_NOT_FOUND": "Nom d'utilisateur ou mot de passe invalide. Veuillez réessayer.",
+      "INVALID_AUTHENTICATOR_CODE": "Code d'authentification invalide. Veuillez réessayer.",
+      "INVALID_RECOVERY_CODE": "Code de récupération invalide. Veuillez réessayer.",
+      "REFRESH_TOKEN_REQUIRED": "Un jeton d'actualisation est requis.",
+      "INVALID_REFRESH_TOKEN": "Jeton d'actualisation invalide.",
+      "REFRESH_TOKEN_REVOKED_SUCCESSFULLY": "Le jeton d'actualisation a été révoqué.",
+      "PUBLIC_REGISTRATION_DISABLED": "L'enregistrement d'un nouveau compte est actuellement désactivé sur ce serveur. Veuillez contacter l'administrateur.",
+      "USERNAME_REQUIRED": "Nom d’utilisateur requis.",
+      "USERNAME_ALREADY_IN_USE": "Nom d'utilisateur déjà utilisé.",
+      "USERNAME_AVAILABLE": "Ce nom d'utilisateur est disponible.",
+      "USERNAME_MISMATCH": "Le nom d'utilisateur ne correspond pas à l'utilisateur actuel.",
+      "PASSWORD_MISMATCH": "Le mot de passe indiqué ne correspond pas à votre mot de passe actuel.",
+      "ACCOUNT_SUCCESSFULLY_DELETED": "Compte supprimé avec succès.",
+      "USERNAME_EMPTY_OR_WHITESPACE": "Le nom d'utilisateur ne peut pas être vide ou contenir un espace.",
+      "USERNAME_TOO_SHORT": "Le nom d'utilisateur est trop court : il doit comporter au moins 3 caractères.",
+      "USERNAME_TOO_LONG": "Le nom d'utilisateur est trop long : il ne peut pas contenir plus de 40 caractères.",
+      "USERNAME_INVALID_EMAIL": "Adresse e-mail invalide.",
+      "USERNAME_INVALID_CHARACTERS": "Le nom d'utilisateur n'est pas valide, il ne peut contenir que des lettres ou des chiffres.",
+      "VAULT_NOT_UP_TO_DATE": "Votre coffre n'est pas à jour. Veuillez synchroniser votre coffre et réessayer.",
+      "INTERNAL_SERVER_ERROR": "Erreur interne du serveur.",
+      "VAULT_ERROR": "Le coffre local n'est pas à jour. Veuillez synchroniser votre coffre en rafraîchissant la page et réessayez."
+    }
+  },
+  "content": {
+    "or": "ou",
+    "new": "Nouveautés",
+    "cancel": "Annuler",
+    "search": "Rechercher",
+    "vaultLocked": "AliasVault est verrouillé.",
+    "creatingNewAlias": "Création de nouveaux alias...",
+    "noMatchesFound": "Aucun résultat trouvé",
+    "searchVault": "Rechercher dans le coffre...",
+    "serviceName": "Nom du service",
+    "email": "Email",
+    "username": "Nom d'utilisateur",
+    "password": "Mot de passe",
+    "enterServiceName": "Entrez le nom du service",
+    "enterEmailAddress": "Entrer l'adresse email",
+    "enterUsername": "Entrez le nom d'utilisateur",
+    "hideFor1Hour": "Cacher pendant 1 heure (site actuel)",
+    "hidePermanently": "Masquer définitivement (site actuel)",
+    "createRandomAlias": "Créer un alias aléatoire",
+    "createUsernamePassword": "Créer un nom d'utilisateur/mot de passe",
+    "randomAlias": "Alias aléatoire",
+    "usernamePassword": "Nom d’utilisateur / mot de passe",
+    "createAndSaveAlias": "Créer et enregistrer l'alias",
+    "createAndSaveCredential": "Créer et enregistrer les identifiants",
+    "randomIdentityDescription": "Générer une identité aléatoire avec une adresse email aléatoire accessible dans AliasVault.",
+    "randomIdentityDescriptionDropdown": "Identité aléatoire avec email aléatoire",
+    "manualCredentialDescription": "Spécifiez votre propre adresse email et nom d'utilisateur.",
+    "manualCredentialDescriptionDropdown": "Identifiant et mot de passe manuels",
+    "failedToCreateIdentity": "Échec de la création de l'identité. Veuillez réessayer.",
+    "enterEmailAndOrUsername": "Entrez l'adresse email et/ou le nom d'utilisateur",
+    "autofillWithAliasVault": "Remplissage automatique avec AliasVault",
+    "generateRandomPassword": "Générer un mot de passe aléatoire (copier dans le presse-papier)",
+    "generateNewPassword": "Générer un nouveau mot de passe",
+    "togglePasswordVisibility": "Afficher ou masquer le mot de passe",
+    "passwordCopiedToClipboard": "Mot de passe copié dans le presse-papiers",
+    "enterEmailAndOrUsernameError": "Entrez l'adresse email et/ou le nom d'utilisateur",
+    "openAliasVaultToUpgrade": "Ouvrez AliasVault pour améliorer",
+    "vaultUpgradeRequired": "Mise à niveau du coffre requise.",
+    "dismissPopup": "Fermer"
+  },
+  "credentials": {
+    "title": "Identifiants",
+    "addCredential": "Ajouter des identifiants",
+    "editCredential": "Modifier les identifiants",
+    "deleteCredential": "Supprimer les identifiants",
+    "credentialDetails": "Informations sur les identifiants",
+    "serviceName": "Nom du service",
+    "serviceNamePlaceholder": "ex: Gmail, Facebook, Banque",
+    "website": "Site Internet",
+    "websitePlaceholder": "https://example.com",
+    "username": "Nom d'utilisateur",
+    "usernamePlaceholder": "Entrez le nom d'utilisateur",
+    "password": "Mot de passe",
+    "passwordPlaceholder": "Saisir le mot de passe",
+    "generatePassword": "Générer le mot de passe",
+    "copyPassword": "Copier le mot de passe",
+    "showPassword": "Afficher le mot de passe",
+    "hidePassword": "Masquer le mot de passe",
+    "notes": "Notes",
+    "notesPlaceholder": "Notes supplémentaires...",
+    "totp": "Authentification à deux facteurs",
+    "totpCode": "Mot de passe à usage unique",
+    "copyTotp": "Copier le mot de passe à usage unique",
+    "totpSecret": "Mot de passe à usage unique secret",
+    "totpSecretPlaceholder": "Entrez le mot de passe à usage unique",
+    "noCredentials": "Aucun identifiant trouvé",
+    "noCredentialsDescription": "Ajoutez vos premiers identifiants pour commencer",
+    "searchPlaceholder": "Rechercher des identifiants...",
+    "welcomeTitle": "Bienvenue dans AliasVault !",
+    "welcomeDescription": "Pour utiliser l'extension de navigateur AliasVault : accédez à un site web et utilisez la fenêtre de saisie automatique AliasVault pour créer un nouvel identifiant.",
+    "createdAt": "Créé",
+    "updatedAt": "Dernière mise à jour",
+    "autofill": "Remplissage automatique",
+    "fillForm": "Remplir le formulaire",
+    "deleteConfirm": "Êtes-vous sûr de vouloir supprimer cet identifiant ?",
+    "saveSuccess": "Identifiants enregistrés avec succès",
+    "tags": "Mots-clés",
+    "addTag": "Ajouter un mot-clé",
+    "removeTag": "Supprimer un mot-clé",
+    "folder": "Dossier",
+    "selectFolder": "Sélectionner un dossier",
+    "createFolder": "Nouveau dossier",
+    "saveCredential": "Enregistrer les identifiants",
+    "deleteCredentialTitle": "Supprimer les identifiants",
+    "deleteCredentialConfirm": "Êtes-vous sûr de vouloir supprimer ces identifiants ? Cette action est irréversible.",
+    "randomAlias": "Alias aléatoire",
+    "manual": "Manuel",
+    "service": "Service",
+    "serviceUrl": "URL de service",
+    "loginCredentials": "Identifiants de connexion",
+    "generateRandomUsername": "Générer un nom d'utilisateur aléatoire",
+    "generateRandomPassword": "Générer un mot de passe aléatoire",
+    "changePasswordComplexity": "Changer la complexité du mot de passe",
+    "passwordLength": "Longueur du mot de passe",
+    "includeLowercase": "Inclure les lettres minuscules",
+    "includeUppercase": "Inclure les lettres majuscules",
+    "includeNumbers": "Inclure des chiffres",
+    "includeSpecialChars": "Inclure des caractères spéciaux",
+    "avoidAmbiguousChars": "Éviter les caractères ambigus (o, 0, etc.)",
+    "generateNewPreview": "Générer un nouvel aperçu",
+    "generateRandomAlias": "Créer un alias aléatoire",
+    "alias": "Alias",
+    "firstName": "Prénom",
+    "lastName": "Nom",
+    "nickName": "Surnom",
+    "gender": "Genre",
+    "birthDate": "Date de naissance",
+    "birthDatePlaceholder": "AAAA-MM-JJ",
+    "metadata": "Métadonnées",
+    "validation": {
+      "required": "Ce champ est obligatoire",
+      "serviceNameRequired": "Le nom du service est requis",
+      "invalidEmail": "Format de courriel non valide",
+      "invalidDateFormat": "La date doit être au format AAAA-MM-JJ"
+    },
+    "privateEmailTitle": "Email privé",
+    "privateEmailAliasVaultServer": "Serveur AliasVault",
+    "privateEmailDescription": "Chiffrement bout en bout, entièrement privé.",
+    "publicEmailTitle": "Fournisseurs d'email public temporaires",
+    "publicEmailDescription": "Anonyme mais confidentialité limitée. Le contenu de l'email est lisible par toute personne qui connaît l'adresse.",
+    "useDomainChooser": "Utiliser le sélecteur de domaine",
+    "enterCustomDomain": "Entrez le domaine personnalisé",
+    "enterFullEmail": "Entrez l'adresse email complète",
+    "enterEmailPrefix": "Entrez le préfixe de l'email"
+  },
+  "emails": {
+    "title": "Emails",
+    "deleteEmailTitle": "Supprimer l'email",
+    "deleteEmailConfirm": "Êtes-vous sûr de vouloir supprimer définitivement cet email ?",
+    "from": "De",
+    "to": "À",
+    "date": "Date",
+    "emailContent": "Contenu de l'email",
+    "attachments": "Pièces jointes",
+    "emailNotFound": "Email introuvable",
+    "noEmails": "Aucun email trouvé",
+    "noEmailsDescription": "Vous n'avez pas encore reçu d'emails dans vos adresses email privées. Quand vous recevez un nouvel email, il apparaîtra ici.",
+    "dateFormat": {
+      "justNow": "maintenant",
+      "minutesAgo_single": "Il y a {{count}} minute",
+      "minutesAgo_plural": "Il y a {{count}} minutes",
+      "hoursAgo_single": "Il y a {{count}} heure",
+      "hoursAgo_plural": "Il y a {{count}} heures",
+      "yesterday": "hier"
+    },
+    "errors": {
+      "emailLoadError": "Une erreur s'est produite lors du chargement des emails. Veuillez réessayer plus tard.",
+      "emailUnexpectedError": "Une erreur inattendue s'est produite lors du chargement des emails. Veuillez réessayer plus tard."
+    },
+    "apiErrors": {
+      "CLAIM_DOES_NOT_MATCH_USER": "L'adresse email actuelle est déjà utilisée. Veuillez modifier l'adresse email en modifiant cet identifiant.",
+      "CLAIM_DOES_NOT_EXIST": "Une erreur s'est produite en essayant de charger les emails. Veuillez essayer de modifier et enregistrer les informations d'identification pour synchroniser la base de données, puis réessayez."
+    }
+  },
+  "settings": {
+    "title": "Réglages",
+    "serverUrl": "URL du serveur",
+    "language": "Langue",
+    "autofillEnabled": "Activer le remplissage automatique",
+    "version": "Version",
+    "openInNewWindow": "Ouvrir dans une nouvelle fenêtre",
+    "openWebApp": "Ouvrir l’application web",
+    "loggedIn": "Connecté(e)",
+    "logout": "Se déconnecter",
+    "globalSettings": "Paramètres généraux",
+    "autofillPopup": "Remplissage automatique de la popup",
+    "activeOnAllSites": "Activé sur tous les sites (sauf si désactivé ci-dessous)",
+    "disabledOnAllSites": "Désactivé sur tous les sites",
+    "enabled": "Activé",
+    "disabled": "Désactivé",
+    "rightClickContextMenu": "Clic-droit sur le menu contextuel",
+    "autofillMatching": "Correspondance de remplissage automatique",
+    "autofillMatchingMode": "Remplir automatiquement le mode correspondant",
+    "autofillMatchingModeDescription": "Détermine quels identifiants sont considérés comme une correspondance et sont affichés comme des suggestions dans la fenêtre de saisie automatique pour un site web donné.",
+    "autofillMatchingDefault": "URL + sous-domaine + nom générique",
+    "autofillMatchingUrlSubdomain": "URL + sous-domaine",
+    "autofillMatchingUrlExact": "Domaine d'URL exact uniquement",
+    "siteSpecificSettings": "Paramètres spécifiques au site",
+    "autofillPopupOn": "Popup de saisie automatique sur:  ",
+    "enabledForThisSite": "Activé pour ce site",
+    "disabledForThisSite": "Désactivé pour ce site",
+    "temporarilyDisabledUntil": "Temporairement désactivé jusqu'au ",
+    "resetAllSiteSettings": "Réinitialiser tous les paramètres spécifiques au site",
+    "appearance": "Apparence",
+    "theme": "Thème",
+    "useDefault": "Utiliser par défaut",
+    "light": "Clair",
+    "dark": "Sombre",
+    "keyboardShortcuts": "Raccourcis clavier",
+    "configureKeyboardShortcuts": "Configurer les raccourcis clavier",
+    "configure": "Configurer",
+    "security": "Sécurité",
+    "clipboardClearTimeout": "Effacer le presse-papiers après copie",
+    "clipboardClearTimeoutDescription": "Effacer automatiquement le presse-papiers après copie des données sensibles",
+    "clipboardClearDisabled": "Ne jamais effacer",
+    "clipboardClear5Seconds": "Effacer après 5 secondes",
+    "clipboardClear10Seconds": "Effacer après 10 secondes",
+    "clipboardClear15Seconds": "Effacer après 15 secondes",
+    "autoLockTimeout": "Délai de verrouillage automatique",
+    "autoLockTimeoutDescription": "Verrouiller automatiquement le coffre après une période d'inactivité",
+    "autoLockTimeoutHelp": "Le coffre ne se verrouille qu'après la période d'inactivité spécifiée (aucune fenêtre pop-up de saisie automatique ou d'extension). Le coffre sera toujours verrouillé lorsque le navigateur sera fermé, quel que soit ce paramètre.",
+    "autoLockNever": "Jamais",
+    "autoLock15Seconds": "15 secondes",
+    "autoLock1Minute": "1 minute",
+    "autoLock5Minutes": "5 minutes",
+    "autoLock15Minutes": "15 minutes",
+    "autoLock30Minutes": "30 minutes",
+    "autoLock1Hour": "1 heure",
+    "autoLock4Hours": "4 heures",
+    "autoLock8Hours": "8 heures",
+    "autoLock24Hours": "24 heures",
+    "versionPrefix": "Version ",
+    "preferences": "Préférences",
+    "autofillSettings": "Paramètres du remplissage automatique",
+    "clipboardSettings": "Paramètres du presse-papiers",
+    "contextMenuSettings": "Paramètres du menu contextuel",
+    "contextMenu": "Menu contextuel",
+    "contextMenuEnabled": "Le menu contextuel est activé",
+    "contextMenuDisabled": "Le menu contextuel est désactivé",
+    "contextMenuDescription": "Faites un clic droit sur les champs de saisie pour accéder aux options d'AliasVault",
+    "selectLanguage": "Sélectionner une langue",
+    "validation": {
+      "apiUrlRequired": "L'URL de l'API est requise",
+      "apiUrlInvalid": "Veuillez entrer une URL d'API valide",
+      "clientUrlRequired": "L'URL du client est requise",
+      "clientUrlInvalid": "Veuillez entrer une URL de client valide"
+    }
+  },
+  "upgrade": {
+    "title": "Mettre à niveau le coffre",
+    "subtitle": "AliasVault a mis à jour et votre coffre doit être mis à niveau. Cela ne devrait prendre que quelques secondes.",
+    "versionInformation": "Informations de version",
+    "yourVault": "Votre coffre :",
+    "newVersion": "Nouvelle version :",
+    "upgrade": "Mettre le coffre à niveau",
+    "upgrading": "Mise à niveau...",
+    "logout": "Se déconnecter",
+    "whatsNew": "Nouveautés",
+    "whatsNewDescription": "Une mise à niveau est nécessaire pour prendre en charge les modifications suivantes :",
+    "noDescriptionAvailable": "Aucune description disponible pour cette version.",
+    "okay": "Ok",
+    "status": {
+      "preparingUpgrade": "Préparation de la mise à niveau...",
+      "vaultAlreadyUpToDate": "Le coffre est déjà à jour",
+      "startingDatabaseTransaction": "Démarrage de la transaction de la base de données...",
+      "applyingDatabaseMigrations": "Application des migrations de base de données...",
+      "applyingMigration": "Application de la migration {{current}} sur {{total}}...",
+      "committingChanges": "Validation des modifications..."
+    },
+    "alerts": {
+      "error": "Erreur",
+      "unableToGetVersionInfo": "Impossible d'obtenir les informations de version. Veuillez réessayer.",
+      "selfHostedServer": "Serveur auto-hébergé",
+      "selfHostedWarning": "Si vous utilisez un serveur auto-hébergé, assurez-vous également de mettre à jour votre instance auto-hébergée, sinon la connexion au client web cessera de fonctionner.",
+      "cancel": "Annuler",
+      "continueUpgrade": "Continuer la mise à jour",
+      "upgradeFailed": "Échec de la mise à niveau",
+      "failedToApplyMigration": "Impossible d'appliquer la migration ({{current}} sur {{total}})",
+      "unknownErrorDuringUpgrade": "Une erreur inconnue s'est produite pendant la mise à niveau. Veuillez réessayer."
+    }
+  }
+}