Add French and Spanish languages to dropdown selectors (#1435)

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

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

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

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

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

* New translations strings.xml (Spanish)
Update translations from Crowdin [ci skip]

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

* New translations infoplist.strings (Spanish)
Update translations from Crowdin [ci skip]

* New translations strings.xml (Spanish)
Update translations from Crowdin [ci skip]

* New translations localizable.strings (Spanish)
Update translations from Crowdin [ci skip]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

* New translations localizable.strings (Spanish)
Update translations from Crowdin [ci skip]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.env.example

@@ -26,6 +26,9 @@ HTTPS_PORT=443
 SMTP_PORT=25
 SMTP_TLS_PORT=587
 
+# Whether to force redirect all HTTP traffic (80) to HTTPS (443). Defaults to true.
+FORCE_HTTPS_REDIRECT=true
+
 # ===========================================
 # EMAIL SERVER CONFIGURATION
 # ===========================================
@@ -34,11 +37,19 @@ SMTP_TLS_PORT=587
 # 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).
+# Set the private email domains below that the server should accept incoming mail for (comma separated values).
 # Example: PRIVATE_EMAIL_DOMAINS=example.com,example2.org
 # To disable the private email domains feature, keep this empty.
 PRIVATE_EMAIL_DOMAINS=
 
+# Set private email domains that should be hidden from UI components (comma separated values).
+# These domains will still function as private email domains for receiving email and claims,
+# but will not appear in domain selection dropdowns or settings. This is useful for deprecating
+# legacy domains while maintaining backwards compatibility.
+# Example: HIDDEN_PRIVATE_EMAIL_DOMAINS=old-domain.com,deprecated.org
+# Note: Domains listed here should ALSO be included in PRIVATE_EMAIL_DOMAINS above.
+HIDDEN_PRIVATE_EMAIL_DOMAINS=
+
 # 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.

.github/FUNDING.yml

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

.github/actions/build-android-app/action.yml

@@ -44,6 +44,18 @@ runs:
     - name: Setup Android SDK
       uses: android-actions/setup-android@v3
 
+    - name: Configure Gradle JVM memory for CI
+      run: |
+        mkdir -p android
+        cat >> android/gradle.properties <<EOF
+        org.gradle.jvmargs=-Xmx4096m -XX:MaxMetaspaceSize=1024m -XX:+HeapDumpOnOutOfMemoryError
+        org.gradle.daemon.performance.disable-logging=true
+        org.gradle.daemon=true
+        org.gradle.caching=true
+        EOF
+      shell: bash
+      working-directory: apps/mobile-app
+
     - name: Build JS bundle (Expo)
       run: |
         mkdir -p build

.github/workflows/docker-build.yml

@@ -109,8 +109,8 @@ jobs:
           echo "🔧 Testing admin password reset flow..."
 
           # Run the reset password script with auto-confirm
-          echo "Running reset-admin-password.sh script..."
-          password_output=$(docker exec aliasvault-test reset-admin-password.sh -y 2>&1)
+          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"
 
@@ -174,10 +174,10 @@ jobs:
       - name: Check local docker-compose.yml for :latest tags
         run: |
           # Check for explicit version tags instead of :latest
-          if grep -E "ghcr\.io/lanedirt/aliasvault-[^:]+:[0-9]+\.[0-9]+\.[0-9]+" docker-compose.yml; then
+          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/lanedirt/aliasvault-[^:]+:[0-9]+\.[0-9]+\.[0-9]+" docker-compose.yml
+            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."

.github/workflows/dotnet-e2e-tests.yml

@@ -24,6 +24,7 @@ jobs:
           dotnet-version: 9.0.x
 
       - name: Install dependencies
+        working-directory: apps/server
         run: dotnet workload install wasm-tools
 
       - name: Build
@@ -67,6 +68,7 @@ jobs:
           dotnet-version: 9.0.x
 
       - name: Install dependencies
+        working-directory: apps/server
         run: dotnet workload install wasm-tools
 
       - name: Build
@@ -86,3 +88,54 @@ jobs:
           timeout_minutes: 60
           max_attempts: 3
           command: cd apps/server && dotnet test Tests/AliasVault.E2ETests --no-build --verbosity normal --filter "FullyQualifiedName~.E2ETests.Tests.Client.Shard${{ matrix.shard }}."
+
+  browser-extension-tests:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup .NET
+        uses: actions/setup-dotnet@v4
+        with:
+          dotnet-version: 9.0.x
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        working-directory: apps/server
+        run: dotnet workload install wasm-tools
+
+      - name: Build server
+        working-directory: apps/server
+        run: dotnet build
+
+      - name: Build browser extension
+        working-directory: apps/browser-extension
+        run: |
+          npm install
+          npm run build:chrome
+
+      - name: Start dev database
+        run: ./install.sh configure-dev-db start
+
+      - name: Ensure browsers are installed
+        working-directory: apps/server
+        run: pwsh Tests/AliasVault.E2ETests/bin/Debug/net9.0/playwright.ps1 install --with-deps
+
+      - name: Run ExtensionTests with retry
+        uses: nick-fields/retry@v3
+        with:
+          timeout_minutes: 60
+          max_attempts: 3
+          command: cd apps/server && dotnet test Tests/AliasVault.E2ETests --no-build --verbosity normal --filter "Category=ExtensionTests"
+
+      - name: Upload Test Results
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: extension-test-results
+          path: TestResults-Extension.xml

.github/workflows/dotnet-integration-tests.yml

@@ -24,6 +24,7 @@ jobs:
           dotnet-version: 9.0.x
 
     - name: Install dependencies
+      working-directory: apps/server
       run: dotnet workload install wasm-tools
 
     - name: Build

.github/workflows/dotnet-unit-tests.yml

@@ -23,6 +23,7 @@ jobs:
           dotnet-version: 9.0.x
 
     - name: Install dependencies
+      working-directory: apps/server
       run: dotnet workload install wasm-tools
 
     - name: Restore dependencies

.github/workflows/release.yml

@@ -26,10 +26,6 @@ on:
         default: true
         type: boolean
 
-env:
-  REGISTRY: ghcr.io
-  IMAGE_NAME: ${{ github.repository }}
-
 jobs:
   upload-install-script:
     runs-on: ubuntu-latest
@@ -127,123 +123,253 @@ 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 for multi-container images
-        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' }}
+            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: Generate tags for containers
-        id: tags
-        run: |
-          # Transform base tags to include suffixes for each container
-          TAGS="${{ steps.meta.outputs.tags }}"
+      - 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
 
-          # Generate tags for each container by replacing the base image name with suffixed versions
-          echo "postgres=$(echo "$TAGS" | sed "s|${{ env.REPO_LOWER }}|${{ env.REPO_LOWER }}-postgres|g" | tr '\n' ',')" >> $GITHUB_OUTPUT
-          echo "api=$(echo "$TAGS" | sed "s|${{ env.REPO_LOWER }}|${{ env.REPO_LOWER }}-api|g" | tr '\n' ',')" >> $GITHUB_OUTPUT
-          echo "client=$(echo "$TAGS" | sed "s|${{ env.REPO_LOWER }}|${{ env.REPO_LOWER }}-client|g" | tr '\n' ',')" >> $GITHUB_OUTPUT
-          echo "admin=$(echo "$TAGS" | sed "s|${{ env.REPO_LOWER }}|${{ env.REPO_LOWER }}-admin|g" | tr '\n' ',')" >> $GITHUB_OUTPUT
-          echo "reverse-proxy=$(echo "$TAGS" | sed "s|${{ env.REPO_LOWER }}|${{ env.REPO_LOWER }}-reverse-proxy|g" | tr '\n' ',')" >> $GITHUB_OUTPUT
-          echo "smtp=$(echo "$TAGS" | sed "s|${{ env.REPO_LOWER }}|${{ env.REPO_LOWER }}-smtp|g" | tr '\n' ',')" >> $GITHUB_OUTPUT
-          echo "task-runner=$(echo "$TAGS" | sed "s|${{ env.REPO_LOWER }}|${{ env.REPO_LOWER }}-task-runner|g" | tr '\n' ',')" >> $GITHUB_OUTPUT
-          echo "installcli=$(echo "$TAGS" | sed "s|${{ env.REPO_LOWER }}|${{ env.REPO_LOWER }}-installcli|g" | tr '\n' ',')" >> $GITHUB_OUTPUT
 
       - 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: ${{ steps.tags.outputs.postgres }}
-          labels: ${{ steps.meta.outputs.labels }}
+          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: ${{ steps.tags.outputs.api }}
-          labels: ${{ steps.meta.outputs.labels }}
+          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: ${{ steps.tags.outputs.client }}
-          labels: ${{ steps.meta.outputs.labels }}
+          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: ${{ steps.tags.outputs.admin }}
-          labels: ${{ steps.meta.outputs.labels }}
+          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: ${{ steps.tags.outputs.reverse-proxy }}
-          labels: ${{ steps.meta.outputs.labels }}
+          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: ${{ steps.tags.outputs.smtp }}
-          labels: ${{ steps.meta.outputs.labels }}
+          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: ${{ steps.tags.outputs.task-runner }}
-          labels: ${{ steps.meta.outputs.labels }}
+          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: ${{ steps.tags.outputs.installcli }}
-          labels: ${{ steps.meta.outputs.labels }}
+          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
@@ -262,10 +388,6 @@ 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 GitHub Container Registry
         uses: docker/login-action@v3
         with:
@@ -282,25 +404,35 @@ jobs:
       - 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/${{ env.REPO_LOWER }}
+            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' }}
+            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@v5
+        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 }}
+          labels: ${{ steps.meta.outputs.labels }}
+          annotations: ${{ steps.meta.outputs.annotations }}

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

@@ -1,80 +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]
-
-# Cancel in-progress jobs when new commits are pushed
-concurrency:
-    group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref_name }}
-    cancel-in-progress: true
-
-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/**,**/*.sql"
-                  } 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/**,**/*.sql"
-                  }
-                  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

@@ -404,6 +404,7 @@ certificates/**/*.crt
 certificates/**/*.key
 certificates/**/*.pfx
 certificates/**/*.pem
+certificates/**/.hostname_marker
 certificates/letsencrypt/**
 
 # Secrets
@@ -430,3 +431,6 @@ temp
 
 # Android keystore file (for publishing to Google Play)
 *.keystore
+
+# Safari extension build files
+apps/browser-extension/safari-xcode/AliasVault/build

.vscode/AliasVault.code-workspace

@@ -23,5 +23,8 @@
 			"path": "../shared"
 		}
 	],
-	"settings": {}
+	"settings": {
+		"java.configuration.updateBuildConfiguration": "disabled",
+		"i18n-ally.keystyle": "nested"
+	}
 }

.vscode/tasks.json

@@ -199,7 +199,7 @@
         {
             "label": "Build and watch Docs",
             "type": "shell",
-            "command": "docker compose up",
+            "command": "docker compose -f docker-compose.dev.yml build && docker compose -f docker-compose.dev.yml up",
             "problemMatcher": [],
             "group": {
                 "kind": "build",

ARCHITECTURE.md

@@ -0,0 +1,167 @@
+# ARCHITECTURE.md
+This document provides a high-level overview of the AliasVault architecture, focusing on the encryption algorithms used to ensure the security of user data.
+
+## Overview
+AliasVault implements zero-knowledge encryption using a combination of encryption algorithms to protect the privacy of its users.
+
+The basic premise is that the master password chosen by the user upon registration forms the basis for all encryption and decryption operations. This master password is never transmitted over the network and only resides on the client.
+
+### What is Zero-Knowledge Encrypted
+- **Vault Data**: Your entire vault (passwords, usernames, notes, passkeys, email addresses, etc.) is fully encrypted client-side before being sent to the server. The server cannot decrypt any vault contents.
+- **Email Contents**: When emails are received by the server, their contents are immediately encrypted with your public key (from your vault) before being saved. Only you can decrypt and read these emails with your private key.
+
+This ensures that even if the AliasVault servers are compromised, vault contents and email messages remain secure and unreadable.
+
+## Encryption algorithms
+The following encryption algorithms and standards are used by AliasVault:
+
+### Core Vault Encryption
+- [Argon2id](#argon2id) - Key derivation from master password
+- [SRP](#srp) - Secure authentication protocol
+- [AES-GCM](#aes-gcm) - Vault data encryption
+
+### Additional Features
+- [RSA-OAEP](#rsa-oaep) - Email encryption
+- [Passkeys (WebAuthn)](#passkeys-webauthn) - Passwordless authentication
+- [Login with Mobile](#login-with-mobile) - Unlock vault in web app / browser extension via mobile app
+
+Below is a detailed explanation of each encryption algorithm and standard.
+
+For more information about how these algorithms are specifically used in AliasVault, see the [Architecture Documentation](https://docs.aliasvault.net/architecture) section on the documentation site.
+
+### Argon2id
+To derive a key from the master password, AliasVault uses the Argon2id key derivation function. Argon2id is a memory-hard
+key derivation function which allows for controlling the execution time, memory required and degree of parallelism.
+This makes it resilient against brute-force attacks and makes it one of the best choices for deriving keys from passwords.
+
+AliasVault uses Argon2id with the following default parameters:
+- Degree of parallelism: 1
+- Memory size: 19456 KB
+- Iterations: 2
+
+More information about Argon2id can be found on the [Argon2](https://en.wikipedia.org/wiki/Argon2) Wikipedia page.
+
+### SRP
+The Secure Remote Password (SRP) protocol is used for authenticating a user with the AliasVault server during login.
+The SRP protocol is a password-authenticated key exchange protocol (PAKE). This means that the client and server can
+authenticate each other using a password, without sending the password itself over the network.
+
+With the use of SRP the master password never leaves the client. The client sends a verifier to the server,
+which is a value derived from the master password. The server uses this verifier to authenticate the client without
+having ever seen the actual master password.
+
+For more information see the [SRP protocol](https://en.wikipedia.org/wiki/Secure_Remote_Password_protocol) information on Wikipedia.
+
+### AES-256-GCM
+All user's vault data is fully encrypted on the client using the AES-256-GCM encryption algorithm, which stands for
+*Advanced Encryption Standard with 256-bit key in Galois/Counter Mode*. The key for encryption is derived from the
+master password by using the Argon2Id algorithm. AliasVault implements AES-GCM with the following specifications:
+
+- Key Size: 256 bits
+- Uses the Web Crypto API's SubtleCrypto interface for secure cryptographic operations
+- Generates a random 12-byte (96-bit) IV (initialization vector) for each encryption operation
+- Performs all encryption/decryption operations entirely in the browser
+
+#### The encryption process works as follows:
+- A unique IV is generated for each encryption operation
+- The users vault data is encrypted using AES-GCM with the derived key and IV
+- The IV is prepended to the ciphertext
+
+More information about AES-GCM can be found on the [AES-GCM](https://en.wikipedia.org/wiki/Galois/Counter_Mode) Wikipedia page.
+
+### RSA-OAEP
+To secure email communications, AliasVault uses RSA-OAEP (RSA with Optimal Asymmetric Encryption Padding). This asymmetric
+encryption system allows AliasVault to store emails on the server in encrypted state which can only be read by the
+intended recipient. AliasVault implements RSA-OAEP with the following specifications:
+- Algorithm: RSA-OAEP with SHA-256 hash
+- Key Size: 2048-bit modulus
+- Key Format: JWK (JSON Web Key)
+- Padding: OAEP (Optimal Asymmetric Encryption Padding)
+
+#### Email Security Flow
+1. Key Generation: When a user creates a vault, a RSA key pair is generated:
+   - A private key that remains in the encrypted user's vault and is never transmitted
+   - A public key that is sent to the server
+
+2. Email Reception Process: When an email arrives at the AliasVault email server:
+   - The server generates a random 256-bit symmetric encryption key to encrypt the email contents
+   - The symmetric encryption key is encrypted using the recipient's asymmetric public key
+   - The encrypted email contents together with the encrypted symmetric encryption key are stored in the server's database
+   - The original email content is never stored or logged
+
+3. Email Retrieval Process:
+   - When a user accesses their emails, the encrypted content is retrieved from the server
+   - The client-side application decrypts the symmetric encryption key using the user's private key that is stored in their vault
+   - The decrypted symmetric encryption key is used to decrypt the email contents
+   - Decryption occurs entirely in the browser, maintaining end-to-end encryption
+
+This implementation ensures that:
+- Emails are encrypted and secure at rest in the server database
+- Only the intended recipient that holds the private key can decrypt and read their emails
+- Even if the server is compromised, email contents remain encrypted and unreadable
+
+More information about RSA-OAEP can be found on the [RSA-OAEP](https://en.wikipedia.org/wiki/Optimal_asymmetric_encryption_padding) Wikipedia page.
+
+### Passkeys (WebAuthn)
+AliasVault includes a virtual passkey authenticator that is fully compatible with the WebAuthn Level 2 specification. This enables users to securely store and use passkeys across their devices through the encrypted vault, providing a seamless and secure alternative to traditional password authentication.
+
+#### Implementation Details
+AliasVault implements passkey functionality across all supported platforms:
+- **Browser Extension**: Virtual authenticator using the Web Crypto API
+- **iOS**: Native Swift implementation using CryptoKit
+- **Android**: Native Kotlin implementation using AndroidKeyStore
+
+All implementations follow the WebAuthn Level 2 specification and use:
+- ES256 (ECDSA P-256) for key pair generation
+- CBOR/COSE encoding for attestation objects
+- Proper authenticator data with WebAuthn flags (UP, UV, BE, BS, AT)
+- AliasVault AAGUID (Authenticator Attestation GUID): `a11a5faa-9f32-4b8c-8c5d-2f7d13e8c942`
+- Self-attestation (packed format) or none attestation
+- Sign count always 0 for syncable passkeys
+- BE/BS flags indicating backup-eligible and backed-up status
+
+#### Key Features
+1. **Zero-Knowledge Passkey Storage**: Passkey private keys are stored as encrypted entries in the user's vault alongside passwords and other credentials. The server never has access to the unencrypted private keys.
+
+2. **Cross-Platform Sync**: Passkeys automatically sync across all devices where the user's vault is accessible, enabling seamless authentication on any platform (browser extension, iOS app, or Android app).
+
+3. **PRF Extension Support**: Implements the hmac-secret (PRF) extension, allowing relying parties to derive additional secrets from passkeys for encryption keys or other cryptographic operations. Currently supported on browser extension and iOS; Android support is pending due to limited Android API support.
+
+4. **Standards Compliance**: Full adherence to WebAuthn Level 2 specification ensures compatibility with all WebAuthn-compliant relying parties and services.
+
+#### Security Benefits
+- Private keys remain encrypted in the vault at all times
+- All passkey operations (key generation, signing) occur on the client device
+- Passkeys benefit from the same zero-knowledge architecture as passwords
+- Cross-device sync provides convenience without compromising security
+- Eliminates phishing risks through cryptographic domain binding
+
+More information about WebAuthn can be found on the [WebAuthn specification](https://www.w3.org/TR/webauthn-2/) page.
+
+### Login with Mobile
+AliasVault provides a secure "Login with Mobile" feature that allows users to unlock their vault on web browsers or browser extensions by scanning a QR code with their authenticated mobile app. This convenient authentication method maintains zero-knowledge security through hybrid encryption.
+
+#### Implementation Details
+The mobile login system combines RSA-2048 asymmetric encryption with AES-256-GCM symmetric encryption:
+
+1. **Initiation**: Browser/extension client generates an RSA-2048 key pair locally and sends the public key to the server, which returns a unique request ID displayed as a QR code.
+
+2. **Authorization**: Mobile app scans the QR code, encrypts the user's vault decryption key with the RSA public key, and sends it to the server.
+
+3. **Retrieval**: Browser client polls the server for completion. When ready, the server:
+   - Generates fresh JWT tokens for the session
+   - Creates a random AES-256 symmetric key
+   - Encrypts tokens and username with the symmetric key
+   - Encrypts the symmetric key with the client's RSA public key
+   - Returns encrypted data and immediately purges it from the database
+
+4. **Decryption**: Client uses its RSA private key to decrypt the symmetric key, then uses the symmetric key to decrypt tokens and username, and the RSA private key to decrypt the vault decryption key.
+
+#### Security Properties
+- **Zero-Knowledge**: Server never accesses the vault decryption key in plaintext
+- **One-Time Use**: Requests cannot be retrieved twice; data is immediately cleared after retrieval
+- **Automatic Expiration**: Unfulfilled requests expire after 2 minutes client-side (3 minutes server-side); fulfilled but unretrieved requests auto-delete within 24 hours
+- **MITM Protection**: Only the client with the RSA private key can decrypt the response
+- **Limited Attack Surface**: Short timeout window minimizes QR code interception risks
+
+More information about the mobile login flow can be found in the [Architecture Documentation](https://docs.aliasvault.net/architecture/#6-login-with-mobile).

CONTRIBUTING.md

@@ -28,11 +28,22 @@ Help grow the AliasVault community by:
 
 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).
+### UI Translations
 
-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.
+AliasVault UI 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).
 
-Your translation contributions will help make AliasVault more accessible to privacy-conscious users around the world!
+You can also get in contact via [Discord](https://discord.gg/DsaXMTEtpF) to chat, or 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.
+
+### Identity Generator Translations
+
+In AliasVault, when creating a new credential AliasVault automatically generates realistic alias identities including: first names, last names and birthdates. For this AliasVault uses dictionaries of possible names per language. You can help to enable AliasVault to generate proper identities in your language too.
+
+**How to help:**
+- Create lists of common first names (male and female)
+- Create a list of common last names (surnames)
+- Optionally: Decade-specific names for more authentic generations
+
+Read the specific instructions on how to contribute here: [Identity Generator Translations](https://docs.aliasvault.net/contributing/identity-generator.html).
 
 ## 3. Contributing to the Documentation
 

README.md

@@ -1,9 +1,8 @@
 # <img src="https://github.com/user-attachments/assets/933c8b45-a190-4df6-913e-b7c64ad9938b" width="35" alt="AliasVault"> AliasVault
 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)
 
@@ -66,33 +65,31 @@ AliasVault is available on:
 [<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)
 
-- 64-bit Linux VM (Ubuntu/AlmaLinux) or Raspberry Pi, with root access
-- Minimum: 1 vCPU, 1GB RAM, 16GB disk
-- Docker ≥ 20.10 and Docker Compose ≥ 2.0
+- **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
@@ -105,7 +102,7 @@ AliasVault takes security seriously and implements various measures to protect y
 - Zero-knowledge architecture ensures the server never has access to your unencrypted data
 
 For detailed information about our encryption implementation and security architecture, see the following documents:
-- [SECURITY.md](SECURITY.md)
+- [ARCHITECTURE.md](ARCHITECTURE.md)
 - [Security Architecture Diagram](https://docs.aliasvault.net/architecture)
 
 ## Features & Roadmap
@@ -129,16 +126,17 @@ Core features that are being worked on:
 - [x] Android native app
 - [x] Editing in browser extension
 - [x] Multi-language support across all client applications
+- [x] Passkeys
 - [ ] Data model and usability improvements (more flexible aliases and credential types, folder support, bulk selecting etc.)
-- [ ] Support for FIDO2/WebAuthn hardware keys and passkeys
+- [ ] Support for FIDO2/WebAuthn hardware keys
 - [ ] 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!
+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>

SECURITY.md

@@ -1,95 +0,0 @@
-# SECURITY.md
-This document describes the encryption algorithms used by AliasVault in order to keep its user data secure.
-
-## Overview
-AliasVault features a [zero-knowledge architecture](https://en.wikipedia.org/wiki/Zero-knowledge_service) and uses a combination of encryption algorithms to protect the data of its users.
-
-The basic premise is that the master password chosen by the user upon registration forms the basis for all encryption
-and decryption operations. This master password is never transmitted over the network and only resides on the client.
-All data is encrypted at rest and in transit. This ensures that even if the AliasVault servers are compromised,
-the user's data remains secure.
-
-## Encryption algorithms
-The following encryption algorithms are used by AliasVault:
-
-- [Argon2id](#argon2id)
-- [SRP](#srp)
-- [AES-GCM](#aes-gcm)
-- [RSA-OAEP](#rsa-oaep)
-
-Below is a detailed explanation of each encryption algorithm.
-
-For more information about how these algorithms are specifically used in AliasVault, see the [Architecture Documentation](https://docs.aliasvault.net/architecture) section on the documentation site.
-
-### Argon2id
-To derive a key from the master password, AliasVault uses the Argon2id key derivation function. Argon2id is a memory-hard
-key derivation function which allows for controlling the execution time, memory required and degree of parallelism.
-This makes it resilient against brute-force attacks and makes it one of the best choices for deriving keys from passwords.
-
-AliasVault uses Argon2id with the following default parameters:
-- Degree of parallelism: 1
-- Memory size: 19456 KB
-- Iterations: 2
-
-More information about Argon2id can be found on the [Argon2](https://en.wikipedia.org/wiki/Argon2) Wikipedia page.
-
-### SRP
-The Secure Remote Password (SRP) protocol is used for authenticating a user with the AliasVault server during login.
-The SRP protocol is a password-authenticated key exchange protocol (PAKE). This means that the client and server can
-authenticate each other using a password, without sending the password itself over the network.
-
-With the use of SRP the master password never leaves the client. The client sends a verifier to the server,
-which is a value derived from the master password. The server uses this verifier to authenticate the client without
-having ever seen the actual master password.
-
-For more information see the [SRP protocol](https://en.wikipedia.org/wiki/Secure_Remote_Password_protocol) information on Wikipedia.
-
-### AES-256-GCM
-All user's vault data is fully encrypted on the client using the AES-256-GCM encryption algorithm, which stands for
-*Advanced Encryption Standard with 256-bit key in Galois/Counter Mode*. The key for encryption is derived from the
-master password by using the Argon2Id algorithm. AliasVault implements AES-GCM with the following specifications:
-
-- Key Size: 256 bits
-- Uses the Web Crypto API's SubtleCrypto interface for secure cryptographic operations
-- Generates a random 12-byte (96-bit) IV (initialization vector) for each encryption operation
-- Performs all encryption/decryption operations entirely in the browser
-
-#### The encryption process works as follows:
-- A unique IV is generated for each encryption operation
-- The users vault data is encrypted using AES-GCM with the derived key and IV
-- The IV is prepended to the ciphertext
-
-More information about AES-GCM can be found on the [AES-GCM](https://en.wikipedia.org/wiki/Galois/Counter_Mode) Wikipedia page.
-
-### RSA-OAEP
-To secure email communications, AliasVault uses RSA-OAEP (RSA with Optimal Asymmetric Encryption Padding). This asymmetric
-encryption system allows AliasVault to store emails on the server in encrypted state which can only be read by the
-intended recipient. AliasVault implements RSA-OAEP with the following specifications:
-- Algorithm: RSA-OAEP with SHA-256 hash
-- Key Size: 2048-bit modulus
-- Key Format: JWK (JSON Web Key)
-- Padding: OAEP (Optimal Asymmetric Encryption Padding)
-
-#### Email Security Flow
-1. Key Generation: When a user creates a vault, a RSA key pair is generated:
-   - A private key that remains in the encrypted user's vault and is never transmitted
-   - A public key that is sent to the server
-
-2. Email Reception Process: When an email arrives at the AliasVault email server:
-   - The server generates a random 256-bit symmetric encryption key to encrypt the email contents
-   - The symmetric encryption key is encrypted using the recipient's asymmetric public key
-   - The encrypted email contents together with the encrypted symmetric encryption key are stored in the server's database
-   - The original email content is never stored or logged
-
-3. Email Retrieval Process:
-   - When a user accesses their emails, the encrypted content is retrieved from the server
-   - The client-side application decrypts the symmetric encryption key using the user's private key that is stored in their vault
-   - The decrypted symmetric encryption key is used to decrypt the email contents
-   - Decryption occurs entirely in the browser, maintaining end-to-end encryption
-
-This implementation ensures that:
-- Emails are encrypted and secure at rest in the server database
-- Only the intended recipient that holds the private key can decrypt and read their emails
-- Even if the server is compromised, email contents remain encrypted and unreadable
-
-More information about RSA-OAEP can be found on the [RSA-OAEP](https://en.wikipedia.org/wiki/Optimal_asymmetric_encryption_padding) Wikipedia page.

SECURITY.txt

@@ -0,0 +1,17 @@
+Contact: mailto:security@support.aliasvault.net
+Expires: 2026-09-16T12:00:00.000Z
+Preferred-Languages: en
+Canonical: https://raw.githubusercontent.com/aliasvault/aliasvault/main/SECURITY.txt
+
+# Security Policy for AliasVault
+#
+# We take security seriously and appreciate responsible disclosure of vulnerabilities.
+# Please report security issues to the email above rather than opening public issues.
+#
+# Include the following information in your report:
+# - Description of the vulnerability
+# - Steps to reproduce
+# - Potential impact
+# - Suggested remediation (if any)
+#
+# We will acknowledge receipt within 48 hours and provide updates as we investigate.

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/.version/major.txt

@@ -0,0 +1 @@
+0

apps/.version/minor.txt

@@ -0,0 +1 @@
+26

apps/.version/patch.txt

@@ -0,0 +1 @@
+0

apps/.version/suffix.txt

@@ -0,0 +1 @@
+-alpha

apps/.version/version.txt

@@ -0,0 +1 @@
+0.26.0-alpha

apps/browser-extension/.gitignore

@@ -17,8 +17,6 @@ stats-*.json
 web-ext.config.ts
 
 # Editor directories and files
-.vscode/*
-!.vscode/extensions.json
 .idea
 .DS_Store
 *.suo

apps/browser-extension/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "i18n-ally.localesPaths": [
+        "src/i18n",
+        "src/i18n/locales"
+    ],
+    "i18n-ally.keystyle": "nested",
+}

apps/browser-extension/package.json

@@ -2,7 +2,7 @@
   "name": "aliasvault-browser-extension",
   "description": "AliasVault Browser Extension",
   "private": true,
-  "version": "0.22.0",
+  "version": "0.26.0",
   "type": "module",
   "scripts": {
     "dev:chrome": "wxt -b chrome",
@@ -32,6 +32,7 @@
     "globals": "^16.0.0",
     "i18next": "^25.3.1",
     "otpauth": "^9.3.6",
+    "qrcode": "^1.5.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.57.0",
@@ -47,6 +48,7 @@
     "@types/chrome": "^0.0.280",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^22.13.10",
+    "@types/qrcode": "^1.5.6",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@types/sql.js": "^1.4.9",
@@ -67,6 +69,6 @@
     "tailwindcss": "^3.4.17",
     "typescript": "^5.6.3",
     "vite-plugin-static-copy": "^2.3.2",
-    "wxt": "^0.20.6"
+    "wxt": "^0.20.11"
   }
 }

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

@@ -25,6 +25,10 @@
 		CE0CAFE02D81A9F8006174AB /* icon in Resources */ = {isa = PBXBuildFile; fileRef = CE0CAFD82D81A9F8006174AB /* icon */; };
 		CE0CAFE12D81A9F8006174AB /* assets in Resources */ = {isa = PBXBuildFile; fileRef = CE0CAFD92D81A9F8006174AB /* assets */; };
 		CE0CAFE22D81A9F8006174AB /* src in Resources */ = {isa = PBXBuildFile; fileRef = CE0CAFDA2D81A9F8006174AB /* src */; };
+		CE0E5BB02E7D8BA600515C80 /* AliasVault.icon in Resources */ = {isa = PBXBuildFile; fileRef = CE0E5BAF2E7D8BA600515C80 /* AliasVault.icon */; };
+		CEA194E42EB6221B00EAB23B /* webauthn.js in Resources */ = {isa = PBXBuildFile; fileRef = CEA194E32EB6221B00EAB23B /* webauthn.js */; };
+		CEA194E72EB6248D00EAB23B /* offscreen.html in Resources */ = {isa = PBXBuildFile; fileRef = CEA194E52EB6248D00EAB23B /* offscreen.html */; };
+		CEA194E82EB6248D00EAB23B /* offscreen.js in Resources */ = {isa = PBXBuildFile; fileRef = CEA194E62EB6248D00EAB23B /* offscreen.js */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -76,6 +80,10 @@
 		CE0CAFD82D81A9F8006174AB /* icon */ = {isa = PBXFileReference; lastKnownFileType = folder; name = icon; path = "../../../dist/safari-mv2/icon"; sourceTree = "<group>"; };
 		CE0CAFD92D81A9F8006174AB /* assets */ = {isa = PBXFileReference; lastKnownFileType = folder; name = assets; path = "../../../dist/safari-mv2/assets"; sourceTree = "<group>"; };
 		CE0CAFDA2D81A9F8006174AB /* src */ = {isa = PBXFileReference; lastKnownFileType = folder; name = src; path = "../../../dist/safari-mv2/src"; sourceTree = "<group>"; };
+		CE0E5BAF2E7D8BA600515C80 /* AliasVault.icon */ = {isa = PBXFileReference; lastKnownFileType = folder.iconcomposer.icon; path = AliasVault.icon; sourceTree = "<group>"; };
+		CEA194E32EB6221B00EAB23B /* webauthn.js */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.javascript; name = webauthn.js; path = "/Users/user/Projects/AliasVault/apps/browser-extension/dist/safari-mv2/webauthn.js"; sourceTree = "<absolute>"; };
+		CEA194E52EB6248D00EAB23B /* offscreen.html */ = {isa = PBXFileReference; lastKnownFileType = text.html; name = offscreen.html; path = "/Users/user/Projects/AliasVault/apps/browser-extension/dist/safari-mv2/offscreen.html"; sourceTree = "<absolute>"; };
+		CEA194E62EB6248D00EAB23B /* offscreen.js */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.javascript; name = offscreen.js; path = "/Users/user/Projects/AliasVault/apps/browser-extension/dist/safari-mv2/offscreen.js"; sourceTree = "<absolute>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -117,6 +125,7 @@
 		CE0CAFA52D81A9F7006174AB /* AliasVault */ = {
 			isa = PBXGroup;
 			children = (
+				CE0E5BAF2E7D8BA600515C80 /* AliasVault.icon */,
 				CE0CAFA62D81A9F7006174AB /* AppDelegate.swift */,
 				CE0CAFB22D81A9F7006174AB /* ViewController.swift */,
 				CE0CAFB42D81A9F7006174AB /* Main.storyboard */,
@@ -154,6 +163,9 @@
 		CE0CAFD22D81A9F8006174AB /* Resources */ = {
 			isa = PBXGroup;
 			children = (
+				CEA194E52EB6248D00EAB23B /* offscreen.html */,
+				CEA194E62EB6248D00EAB23B /* offscreen.js */,
+				CEA194E32EB6221B00EAB23B /* webauthn.js */,
 				CE0CAFD32D81A9F8006174AB /* background.js */,
 				CE0CAFD42D81A9F8006174AB /* popup.html */,
 				CE0CAFD52D81A9F8006174AB /* chunks */,
@@ -248,6 +260,7 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				CE0E5BB02E7D8BA600515C80 /* AliasVault.icon in Resources */,
 				CE0CAFAD2D81A9F7006174AB /* Icon.png in Resources */,
 				CE0CAFB12D81A9F7006174AB /* Script.js in Resources */,
 				CE0CAFAB2D81A9F7006174AB /* Base in Resources */,
@@ -262,8 +275,11 @@
 			buildActionMask = 2147483647;
 			files = (
 				CE0CAFDD2D81A9F8006174AB /* chunks in Resources */,
+				CEA194E42EB6221B00EAB23B /* webauthn.js in Resources */,
 				CE0CAFE02D81A9F8006174AB /* icon in Resources */,
 				CE0CAFE12D81A9F8006174AB /* assets in Resources */,
+				CEA194E72EB6248D00EAB23B /* offscreen.html in Resources */,
+				CEA194E82EB6248D00EAB23B /* offscreen.js in Resources */,
 				CE0CAFE22D81A9F8006174AB /* src in Resources */,
 				CE0CAFDB2D81A9F8006174AB /* background.js in Resources */,
 				CE0CAFDF2D81A9F8006174AB /* manifest.json in Resources */,
@@ -447,7 +463,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 220001;
+				CURRENT_PROJECT_VERSION = 2600100;
 				DEVELOPMENT_TEAM = 8PHW4HN3F7;
 				ENABLE_HARDENED_RUNTIME = YES;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -460,7 +476,7 @@
 					"@executable_path/../../../../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 10.14;
-				MARKETING_VERSION = 0.22.0;
+				MARKETING_VERSION = 0.26.0;
 				OTHER_LDFLAGS = (
 					"-framework",
 					SafariServices,
@@ -479,7 +495,7 @@
 			buildSettings = {
 				CODE_SIGN_ENTITLEMENTS = "AliasVault Extension/AliasVault_Extension.entitlements";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 220001;
+				CURRENT_PROJECT_VERSION = 2600100;
 				DEVELOPMENT_TEAM = 8PHW4HN3F7;
 				ENABLE_HARDENED_RUNTIME = YES;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -492,7 +508,7 @@
 					"@executable_path/../../../../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 10.14;
-				MARKETING_VERSION = 0.22.0;
+				MARKETING_VERSION = 0.26.0;
 				OTHER_LDFLAGS = (
 					"-framework",
 					SafariServices,
@@ -509,13 +525,14 @@
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
-				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				ASSETCATALOG_COMPILER_APPICON_NAME = AliasVault;
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
 				CODE_SIGN_ENTITLEMENTS = AliasVault/AliasVault.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
+				"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
 				COMBINE_HIDPI_IMAGES = YES;
-				CURRENT_PROJECT_VERSION = 220001;
+				CURRENT_PROJECT_VERSION = 2600100;
 				DEVELOPMENT_TEAM = 8PHW4HN3F7;
 				ENABLE_HARDENED_RUNTIME = YES;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -530,7 +547,7 @@
 					"@executable_path/../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 10.14;
-				MARKETING_VERSION = 0.22.0;
+				MARKETING_VERSION = 0.26.0;
 				OTHER_LDFLAGS = (
 					"-framework",
 					SafariServices,
@@ -549,12 +566,12 @@
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
-				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				ASSETCATALOG_COMPILER_APPICON_NAME = AliasVault;
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
 				CODE_SIGN_ENTITLEMENTS = AliasVault/AliasVault.entitlements;
 				CODE_SIGN_STYLE = Automatic;
 				COMBINE_HIDPI_IMAGES = YES;
-				CURRENT_PROJECT_VERSION = 220001;
+				CURRENT_PROJECT_VERSION = 2600100;
 				DEVELOPMENT_TEAM = 8PHW4HN3F7;
 				ENABLE_HARDENED_RUNTIME = YES;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -569,7 +586,7 @@
 					"@executable_path/../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 10.14;
-				MARKETING_VERSION = 0.22.0;
+				MARKETING_VERSION = 0.26.0;
 				OTHER_LDFLAGS = (
 					"-framework",
 					SafariServices,

apps/browser-extension/safari-xcode/AliasVault/AliasVault/AliasVault.icon/icon.json

@@ -0,0 +1,33 @@
+{
+  "fill" : "automatic",
+  "groups" : [
+    {
+      "layers" : [
+        {
+          "blend-mode" : "overlay",
+          "fill" : {
+            "automatic-gradient" : "display-p3:0.90471,0.76358,0.48553,1.00000"
+          },
+          "glass" : true,
+          "hidden" : false,
+          "image-name" : "icon-1024.png",
+          "name" : "icon-1024"
+        }
+      ],
+      "shadow" : {
+        "kind" : "neutral",
+        "opacity" : 0.5
+      },
+      "translucency" : {
+        "enabled" : true,
+        "value" : 0.5
+      }
+    }
+  ],
+  "supported-platforms" : {
+    "circles" : [
+      "watchOS"
+    ],
+    "squares" : "shared"
+  }
+}

apps/browser-extension/safari-xcode/AliasVault/AliasVault/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -1,68 +0,0 @@
-{
-  "images" : [
-    {
-      "size" : "16x16",
-      "idiom" : "mac",
-      "filename" : "mac-icon-16@1x.png",
-      "scale" : "1x"
-    },
-    {
-      "size" : "16x16",
-      "idiom" : "mac",
-      "filename" : "mac-icon-16@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "32x32",
-      "idiom" : "mac",
-      "filename" : "mac-icon-32@1x.png",
-      "scale" : "1x"
-    },
-    {
-      "size" : "32x32",
-      "idiom" : "mac",
-      "filename" : "mac-icon-32@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "128x128",
-      "idiom" : "mac",
-      "filename" : "mac-icon-128@1x.png",
-      "scale" : "1x"
-    },
-    {
-      "size" : "128x128",
-      "idiom" : "mac",
-      "filename" : "mac-icon-128@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "256x256",
-      "idiom" : "mac",
-      "filename" : "mac-icon-256@1x.png",
-      "scale" : "1x"
-    },
-    {
-      "size" : "256x256",
-      "idiom" : "mac",
-      "filename" : "mac-icon-256@2x.png",
-      "scale" : "2x"
-    },
-    {
-      "size" : "512x512",
-      "idiom" : "mac",
-      "filename" : "mac-icon-512@1x.png",
-      "scale" : "1x"
-    },
-    {
-      "size" : "512x512",
-      "idiom" : "mac",
-      "filename" : "mac-icon-512@2x.png",
-      "scale" : "2x"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}

apps/browser-extension/safari-xcode/AliasVault/build-and-submit.sh

@@ -0,0 +1,192 @@
+#!/usr/bin/env bash
+
+BUNDLE_ID="net.aliasvault.safari.extension"
+
+# Build settings
+SCHEME="AliasVault"
+PROJECT="AliasVault.xcodeproj"
+CONFIG="Release"
+ARCHIVE_PATH="$PWD/build/${SCHEME}.xcarchive"
+EXPORT_DIR="$PWD/build/export"
+EXPORT_PLIST="$PWD/exportOptions.plist"
+
+# Put the fastlane API key in the home directory
+API_KEY_PATH="$HOME/APPSTORE_CONNECT_FASTLANE.json"
+
+# ------------------------------------------
+
+if [ ! -f "$API_KEY_PATH" ]; then
+  echo "❌ API key file '$API_KEY_PATH' does not exist. Please provide the App Store Connect API key at this path."
+  exit 1
+fi
+
+# ------------------------------------------
+# Shared function to extract version info
+# ------------------------------------------
+extract_version_info() {
+  local pkg_path="$1"
+
+  # For .pkg files, we need to expand and find the Info.plist
+  local temp_dir=$(mktemp -d -t aliasvault-pkg-extract)
+  trap "rm -rf '$temp_dir'" EXIT
+
+  # Expand the pkg to find the app bundle
+  pkgutil --expand "$pkg_path" "$temp_dir/expanded" 2>/dev/null
+
+  # Find the payload and extract it
+  local payload=$(find "$temp_dir/expanded" -name "Payload" | head -n 1)
+
+  if [ -n "$payload" ]; then
+    mkdir -p "$temp_dir/contents"
+    cd "$temp_dir/contents"
+    cat "$payload" | gunzip -dc | cpio -i 2>/dev/null
+
+    # Find Info.plist in the extracted contents
+    local info_plist=$(find "$temp_dir/contents" -name "Info.plist" -path "*/Contents/Info.plist" | head -n 1)
+
+    if [ -n "$info_plist" ]; then
+      # Read version and build from the plist
+      VERSION=$(/usr/libexec/PlistBuddy -c "Print :CFBundleShortVersionString" "$info_plist" 2>/dev/null)
+      BUILD=$(/usr/libexec/PlistBuddy -c "Print :CFBundleVersion" "$info_plist" 2>/dev/null)
+
+      if [ -n "$VERSION" ] && [ -n "$BUILD" ]; then
+        return 0
+      fi
+    fi
+  fi
+
+  # Fallback: try to read from the archive directly if it's in a known location
+  local archive_plist="$ARCHIVE_PATH/Info.plist"
+  if [ -f "$archive_plist" ]; then
+    VERSION=$(/usr/libexec/PlistBuddy -c "Print :ApplicationProperties:CFBundleShortVersionString" "$archive_plist" 2>/dev/null)
+    BUILD=$(/usr/libexec/PlistBuddy -c "Print :ApplicationProperties:CFBundleVersion" "$archive_plist" 2>/dev/null)
+
+    if [ -n "$VERSION" ] && [ -n "$BUILD" ]; then
+      return 0
+    fi
+  fi
+
+  echo "❌ Could not extract version info from package"
+  exit 1
+}
+
+# ------------------------------------------
+# Ask if user wants to build or use existing
+# ------------------------------------------
+
+echo ""
+echo "What do you want to do?"
+echo "  1) Build and submit to App Store"
+echo "  2) Build only"
+echo "  3) Submit existing PKG to App Store"
+echo ""
+read -p "Enter choice (1, 2, or 3): " -r CHOICE
+echo ""
+
+# ------------------------------------------
+# Build PKG (for options 1 and 2)
+# ------------------------------------------
+
+if [[ $CHOICE == "1" || $CHOICE == "2" ]]; then
+  echo "Building browser extension..."
+  cd ../..
+  npm run build:safari
+  cd safari-xcode/AliasVault
+
+  echo "Building PKG..."
+
+  # Clean + archive
+  xcodebuild \
+    -project "$PROJECT" \
+    -scheme "$SCHEME" \
+    -configuration "$CONFIG" \
+    -archivePath "$ARCHIVE_PATH" \
+    clean archive \
+    -allowProvisioningUpdates
+
+  # Export .pkg
+  rm -rf "$EXPORT_DIR"
+  if ! xcodebuild -exportArchive \
+    -archivePath "$ARCHIVE_PATH" \
+    -exportOptionsPlist "$EXPORT_PLIST" \
+    -exportPath "$EXPORT_DIR" \
+    -allowProvisioningUpdates; then
+    echo "❌ Failed to export archive to PKG"
+    exit 1
+  fi
+
+  PKG_PATH=$(ls "$EXPORT_DIR"/*.pkg 2>/dev/null)
+
+  if [ -z "$PKG_PATH" ]; then
+    echo "❌ No PKG file found in $EXPORT_DIR after export"
+    echo "Contents of export directory:"
+    ls -la "$EXPORT_DIR"
+    exit 1
+  fi
+
+  # Extract version info from newly built PKG
+  extract_version_info "$PKG_PATH"
+  echo "PKG built at: $PKG_PATH"
+  echo "  Version: $VERSION"
+  echo "  Build:   $BUILD"
+  echo ""
+
+  # Exit if build-only
+  if [[ $CHOICE == "2" ]]; then
+    echo "✅ Build complete. Exiting."
+    exit 0
+  fi
+fi
+
+# ------------------------------------------
+# Submit to App Store (for options 1 and 3)
+# ------------------------------------------
+
+if [[ $CHOICE == "3" ]]; then
+  # Use existing PKG
+  PKG_PATH="$EXPORT_DIR/AliasVault.pkg"
+
+  if [ ! -f "$PKG_PATH" ]; then
+    echo "❌ PKG file not found at: $PKG_PATH"
+    exit 1
+  fi
+
+  # Extract version info from existing PKG
+  extract_version_info "$PKG_PATH"
+  echo "Using existing PKG: $PKG_PATH"
+  echo "  Version: $VERSION"
+  echo "  Build:   $BUILD"
+  echo ""
+fi
+
+if [[ $CHOICE != "1" && $CHOICE != "3" ]]; then
+  echo "❌ Invalid choice. Please enter 1, 2, or 3."
+  exit 1
+fi
+
+echo ""
+echo "================================================"
+echo "Submitting to App Store:"
+echo "  PKG Path: $PKG_PATH"
+echo "  Version: $VERSION"
+echo "  Build:   $BUILD"
+echo "================================================"
+echo ""
+
+# Validate PKG_PATH is set and file exists
+if [ -z "$PKG_PATH" ] || [ ! -f "$PKG_PATH" ]; then
+    echo "❌ Error: PKG file not found at: $PKG_PATH"
+    exit 1
+fi
+
+read -p "Are you sure you want to push this to App Store? (y/n): " -r
+echo ""
+
+if [[ ! $REPLY =~ ^([Yy]([Ee][Ss])?|[Yy])$ ]]; then
+    echo "❌ Submission cancelled"
+    exit 1
+fi
+
+echo "✅ Proceeding with upload..."
+
+fastlane deliver --pkg "$PKG_PATH" --skip_screenshots --skip_metadata --api_key_path "$API_KEY_PATH" --run_precheck_before_submit false

apps/browser-extension/safari-xcode/AliasVault/exportOptions.plist

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+  <key>method</key>
+  <string>app-store-connect</string>
+  <key>signingStyle</key>
+  <string>automatic</string>
+  <key>destination</key>
+  <string>export</string>
+  <key>stripSwiftSymbols</key>
+  <true/>
+  <key>compileBitcode</key>
+  <true/>
+  <key>manageAppVersionAndBuildNumber</key>
+  <false/>
+</dict>
+</plist>

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

@@ -1,13 +1,18 @@
+/**
+ * Background script entry point - handles messages from the content script
+ */
+
 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, handleGetDefaultIdentitySettings, handleGetEncryptionKey, handleGetEncryptionKeyDerivationParams, handleGetPasswordSettings, handleGetPersistedFormValues, handleGetVault, handlePersistFormValues, handleStoreEncryptionKey, handleStoreEncryptionKeyDerivationParams, handleStoreVault, handleSyncVault, handleUploadVault } from '@/entrypoints/background/VaultMessageHandler';
+import { handleGetWebAuthnSettings, handleWebAuthnCreate, handleWebAuthnGet, handlePasskeyPopupResponse, handleGetRequestData } from '@/entrypoints/background/PasskeyHandler';
+import { handleOpenPopup, handlePopupWithCredential, handleOpenPopupCreateCredential, handleToggleContextMenu } from '@/entrypoints/background/PopupMessageHandler';
+import { handleCheckAuthStatus, handleClearPersistedFormValues, handleClearVault, handleCreateIdentity, handleGetCredentials, handleGetFilteredCredentials, handleGetSearchCredentials, 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 { EncryptionKeyDerivationParams } from "@/utils/dist/shared/models/metadata";
 
 import { defineBackground, storage, browser } from '#imports';
 
@@ -23,6 +28,8 @@ export default defineBackground({
     onMessage('GET_ENCRYPTION_KEY_DERIVATION_PARAMS', () => handleGetEncryptionKeyDerivationParams());
     onMessage('GET_VAULT', () => handleGetVault());
     onMessage('GET_CREDENTIALS', () => handleGetCredentials());
+    onMessage('GET_FILTERED_CREDENTIALS', ({ data }) => handleGetFilteredCredentials(data as { currentUrl: string, pageTitle: string, matchingMode?: string }));
+    onMessage('GET_SEARCH_CREDENTIALS', ({ data }) => handleGetSearchCredentials(data as { searchTerm: string }));
 
     onMessage('GET_DEFAULT_EMAIL_DOMAIN', () => handleGetDefaultEmailDomain());
     onMessage('GET_DEFAULT_IDENTITY_SETTINGS', () => handleGetDefaultIdentitySettings());
@@ -35,11 +42,11 @@ export default defineBackground({
     onMessage('CREATE_IDENTITY', ({ data }) => handleCreateIdentity(data));
     onMessage('UPLOAD_VAULT', ({ data }) => handleUploadVault(data));
     onMessage('SYNC_VAULT', () => handleSyncVault());
-
     onMessage('CLEAR_VAULT', () => handleClearVault());
 
     onMessage('OPEN_POPUP', () => handleOpenPopup());
     onMessage('OPEN_POPUP_WITH_CREDENTIAL', ({ data }) => handlePopupWithCredential(data));
+    onMessage('OPEN_POPUP_CREATE_CREDENTIAL', ({ data }) => handleOpenPopupCreateCredential(data));
     onMessage('TOGGLE_CONTEXT_MENU', ({ data }) => handleToggleContextMenu(data));
 
     onMessage('PERSIST_FORM_VALUES', ({ data }) => handlePersistFormValues(data));
@@ -61,6 +68,13 @@ export default defineBackground({
     // Handle clipboard copied from context menu
     onMessage('CLIPBOARD_COPIED_FROM_CONTEXT', () => handleClipboardCopied());
 
+    // Passkey/WebAuthn management messages
+    onMessage('GET_WEBAUTHN_SETTINGS', ({ data }) => handleGetWebAuthnSettings(data));
+    onMessage('WEBAUTHN_CREATE', ({ data }) => handleWebAuthnCreate(data));
+    onMessage('WEBAUTHN_GET', ({ data }) => handleWebAuthnGet(data));
+    onMessage('PASSKEY_POPUP_RESPONSE', ({ data }) => handlePasskeyPopupResponse(data));
+    onMessage('GET_REQUEST_DATA', ({ data }) => handleGetRequestData(data));
+
     // Setup context menus
     const isContextMenuEnabled = await storage.getItem(GLOBAL_CONTEXT_MENU_ENABLED_KEY) ?? true;
     if (isContextMenuEnabled) {

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

@@ -108,6 +108,4 @@ async function extendAutoLockTimer(): Promise<void> {
       console.error('[AUTO_LOCK] Error locking vault:', error);
     }
   }, timeout * 1000);
-
-  console.info(`[AUTO_LOCK] Timer extended (popup heartbeat)`);
 }

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

@@ -0,0 +1,314 @@
+/**
+ * PasskeyHandler - Handles passkey popup management in background
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { handleGetEncryptionKey } from '@/entrypoints/background/VaultMessageHandler';
+
+import {
+  PASSKEY_PROVIDER_ENABLED_KEY,
+  PASSKEY_DISABLED_SITES_KEY
+} from '@/utils/Constants';
+import { extractDomain, extractRootDomain } from '@/utils/credentialMatcher/CredentialMatcher';
+import { EncryptionUtility } from '@/utils/EncryptionUtility';
+import { PasskeyHelper } from '@/utils/passkey/PasskeyHelper';
+import type {
+  PasskeyPopupResponse,
+  WebAuthnCreateRequest,
+  WebAuthnGetRequest,
+  PendingPasskeyRequest,
+  PendingPasskeyCreateRequest,
+  PendingPasskeyGetRequest,
+  WebAuthnSettingsResponse,
+  WebAuthnCreationPayload,
+  WebAuthnPublicKeyGetPayload
+} from '@/utils/passkey/types';
+import { SqliteClient } from '@/utils/SqliteClient';
+
+import { browser, storage } from '#imports';
+
+// Pending popup requests
+const pendingRequests = new Map<string, {
+  resolve: (value: any) => void;
+  reject: (error: any) => void;
+  /**
+   * Store window ID in order to close the popup window from background script later.
+   */
+  windowId?: number;
+}>();
+
+// Store request data temporarily (to avoid URL length limits)
+const pendingRequestData = new Map<string, PendingPasskeyRequest>();
+
+/**
+ * Handle WebAuthn settings request
+ */
+export async function handleGetWebAuthnSettings(data: any): Promise<WebAuthnSettingsResponse> {
+  // Check if passkey provider is enabled in settings (default to true if not set)
+  const globalEnabled = await storage.getItem(PASSKEY_PROVIDER_ENABLED_KEY);
+  if (globalEnabled === false) {
+    return { enabled: false };
+  }
+
+  // If hostname is provided, check if it's disabled for that site
+  const { hostname } = data || {};
+  if (hostname) {
+    // Extract base domain for matching
+    const baseDomain = extractRootDomain(extractDomain(hostname));
+
+    // Check disabled sites
+    const disabledSites = await storage.getItem(PASSKEY_DISABLED_SITES_KEY) as string[] ?? [];
+    if (disabledSites.includes(baseDomain)) {
+      return { enabled: false };
+    }
+  }
+
+  return { enabled: true };
+}
+
+/**
+ * Handle WebAuthn create (registration) request
+ */
+export async function handleWebAuthnCreate(data: any): Promise<any> {
+  const { publicKey, origin } = data as WebAuthnCreateRequest;
+  const requestId = Math.random().toString(36).substr(2, 9);
+
+  // Store request data temporarily (to avoid URL length limits)
+  const requestData: PendingPasskeyCreateRequest = {
+    type: 'create',
+    requestId,
+    origin,
+    publicKey: publicKey as WebAuthnCreationPayload
+  };
+  pendingRequestData.set(requestId, requestData);
+
+  // Create popup using main popup with hash navigation - only pass requestId
+  const popupUrl = browser.runtime.getURL('/popup.html') + '#/passkeys/create?' + new URLSearchParams({
+    requestId
+  }).toString();
+
+  try {
+    const popup = await browser.windows.create({
+      url: popupUrl,
+      type: 'popup',
+      width: 450,
+      height: 600,
+      focused: true
+    });
+
+    // Wait for response from popup
+    return new Promise((resolve, reject) => {
+      pendingRequests.set(requestId, { resolve, reject, windowId: popup.id });
+
+      // Clean up if popup is closed without response
+      const checkClosed = setInterval(async () => {
+        try {
+          if (popup.id) {
+            const _window = await browser.windows.get(popup.id);
+            // Window still exists, continue waiting
+          }
+        } catch {
+          // Window no longer exists
+          clearInterval(checkClosed);
+          if (pendingRequests.has(requestId)) {
+            pendingRequests.delete(requestId);
+            pendingRequestData.delete(requestId);
+            resolve({ cancelled: true });
+          }
+        }
+      }, 1000);
+    });
+  } catch {
+    return { error: 'Failed to create popup window' };
+  }
+}
+
+/**
+ * Handle WebAuthn get (authentication) request
+ * Note: Passkey retrieval is now handled in the popup via SqliteClient
+ */
+export async function handleWebAuthnGet(data: any): Promise<any> {
+  const { publicKey, origin, isAutomaticRequest } = data as WebAuthnGetRequest;
+  const requestId = Math.random().toString(36).substr(2, 9);
+
+  /*
+   * If this is an automatic request (within 2 seconds of page load), check if we have matching credentials
+   * before opening the popup. This prevents AliasVault from blocking other password managers when we
+   * don't have the passkey they need.
+   */
+  if (isAutomaticRequest) {
+    try {
+      // Check if we have any matching passkeys in storage
+      const hasMatchingPasskeys = await checkForMatchingPasskeys(publicKey, origin);
+
+      if (!hasMatchingPasskeys) {
+        // No matching passkeys - don't intercept, let other password managers handle it
+        return { fallback: true };
+      }
+    } catch (error) {
+      console.error('Error checking for matching passkeys:', error);
+      // On error, fall back to showing the popup (better UX than silently failing)
+    }
+  }
+
+  // Store request data temporarily (to avoid URL length limits)
+  const requestData: PendingPasskeyGetRequest = {
+    type: 'get',
+    requestId,
+    origin,
+    publicKey: publicKey as WebAuthnPublicKeyGetPayload,
+    passkeys: [] // Will be populated by the popup from vault
+  };
+  pendingRequestData.set(requestId, requestData);
+
+  // Create popup using main popup with hash navigation - only pass requestId
+  const popupUrl = browser.runtime.getURL('/popup.html') + '#/passkeys/authenticate?' + new URLSearchParams({
+    requestId
+  }).toString();
+
+  try {
+    const popup = await browser.windows.create({
+      url: popupUrl,
+      type: 'popup',
+      width: 450,
+      height: 600,
+      focused: true
+    });
+
+    // Wait for response from popup
+    return new Promise((resolve, reject) => {
+      pendingRequests.set(requestId, { resolve, reject, windowId: popup.id });
+
+      // Clean up if popup is closed without response
+      const checkClosed = setInterval(async () => {
+        try {
+          if (popup.id) {
+            const _window = await browser.windows.get(popup.id);
+            // Window still exists, continue waiting
+          }
+        } catch {
+          // Window no longer exists
+          clearInterval(checkClosed);
+          if (pendingRequests.has(requestId)) {
+            pendingRequests.delete(requestId);
+            pendingRequestData.delete(requestId);
+            resolve({ cancelled: true });
+          }
+        }
+      }, 1000);
+    });
+  } catch {
+    return { error: 'Failed to create popup window' };
+  }
+}
+
+/**
+ * Check if we have any matching passkeys for the given request.
+ * This is used to determine if we should intercept automatic passkey requests.
+ */
+async function checkForMatchingPasskeys(publicKey: any, origin: string): Promise<boolean> {
+  try {
+    // Check if vault is unlocked
+    const encryptedVault = await storage.getItem('session:encryptedVault') as string;
+    const encryptionKey = await handleGetEncryptionKey();
+
+    if (!encryptedVault || !encryptionKey) {
+      /*
+       * Vault is locked - we can't check for passkeys
+       * In this case, we return false to avoid intercepting
+       */
+      return false;
+    }
+
+    // Decrypt and load the vault
+    const decryptedVault = await EncryptionUtility.symmetricDecrypt(
+      encryptedVault,
+      encryptionKey
+    );
+    const sqliteClient = new SqliteClient();
+    await sqliteClient.initializeFromBase64(decryptedVault);
+
+    // Get the rpId from the request or derive from origin
+    const rpId = publicKey.rpId || new URL(origin).hostname;
+
+    // Get passkeys for this rpId
+    const passkeys = sqliteClient.getPasskeysByRpId(rpId);
+
+    // If allowCredentials is specified, filter by those specific credentials
+    if (publicKey.allowCredentials && publicKey.allowCredentials.length > 0) {
+      // Convert the RP's base64url credential IDs to GUIDs for comparison
+      const allowedGuids = new Set(
+        publicKey.allowCredentials.map((c: any) => {
+          try {
+            return PasskeyHelper.base64urlToGuid(c.id);
+          } catch (e) {
+            console.warn('Failed to convert credential ID to GUID:', c.id, e);
+            return null;
+          }
+        }).filter((id: string | null): id is string => id !== null)
+      );
+
+      // Check if we have any of the allowed credentials
+      const matchingPasskeys = passkeys.filter(pk => allowedGuids.has(pk.Id));
+      return matchingPasskeys.length > 0;
+    }
+
+    // No allowCredentials specified - just check if we have any passkeys for this rpId
+    return passkeys.length > 0;
+  } catch (error) {
+    console.error('Error in checkForMatchingPasskeys:', error);
+    // On error, return false to avoid intercepting
+    return false;
+  }
+}
+
+/**
+ * Handle response from passkey popup
+ */
+export async function handlePasskeyPopupResponse(data: any): Promise<{ success: boolean }> {
+  const { requestId, credential, fallback, cancelled } = data as PasskeyPopupResponse;
+  const request = pendingRequests.get(requestId);
+
+  if (!request) {
+    return { success: false };
+  }
+
+  /**
+   * Close the popup window from background script to ensure it always works.
+   * Calling window.close() from the popup does not work in all browsers.
+   */
+  if (request.windowId) {
+    try {
+      await browser.windows.remove(request.windowId);
+    } catch (error) {
+      // Window might already be closed, ignore error
+      console.debug('Failed to close popup window:', error);
+    }
+  }
+
+  // Clean up both maps
+  pendingRequests.delete(requestId);
+  pendingRequestData.delete(requestId);
+
+  if (cancelled) {
+    request.resolve({ cancelled: true });
+  } else if (fallback) {
+    request.resolve({ fallback: true });
+  } else if (credential) {
+    request.resolve({ credential });
+  } else {
+    request.resolve({ cancelled: true });
+  }
+
+  return { success: true };
+}
+
+/**
+ * Get request data by request ID
+ */
+export async function handleGetRequestData(data: any): Promise<PendingPasskeyRequest | null> {
+  const { requestId } = data as { requestId: string };
+  const requestData = pendingRequestData.get(requestId);
+  return requestData || null;
+}
+

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

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { setupContextMenus } from '@/entrypoints/background/ContextMenu';
 
+import { SKIP_FORM_RESTORE_KEY } from '@/utils/Constants';
 import { BoolResponse } from '@/utils/types/messaging/BoolResponse';
 
 import { browser } from '#imports';
@@ -37,6 +38,53 @@ export function handlePopupWithCredential(message: any) : Promise<BoolResponse>
   })();
 }
 
+/**
+ * Handle opening the popup on create credential page with prefilled service name.
+ */
+export function handleOpenPopupCreateCredential(message: any) : Promise<BoolResponse> {
+  return (async () : Promise<BoolResponse> => {
+    const serviceName = encodeURIComponent(message.serviceName || '');
+
+    // Use the URL passed from the content script (current page URL)
+    let serviceUrl = '';
+    if (message.currentUrl) {
+      try {
+        const url = new URL(message.currentUrl);
+        // Only include http/https URLs
+        if (url.protocol === 'http:' || url.protocol === 'https:') {
+          serviceUrl = encodeURIComponent(url.origin + url.pathname);
+        }
+      } catch (error) {
+        console.error('Error parsing current URL:', error);
+      }
+    }
+
+    // Set a localStorage flag to skip restoring previously persisted form values as we want to start fresh with this explicit create credential request.
+    await browser.storage.local.set({ [SKIP_FORM_RESTORE_KEY]: true });
+
+    const urlParams = new URLSearchParams();
+    urlParams.set('expanded', 'true');
+    if (serviceName) {
+      urlParams.set('serviceName', serviceName);
+    }
+    if (serviceUrl) {
+      urlParams.set('serviceUrl', serviceUrl);
+    }
+    if (message.currentUrl) {
+      urlParams.set('currentUrl', message.currentUrl);
+    }
+
+    browser.windows.create({
+      url: browser.runtime.getURL(`/popup.html?${urlParams.toString()}#/credentials/add`),
+      type: 'popup',
+      width: 400,
+      height: 600,
+      focused: true
+    });
+    return { success: true };
+  })();
+}
+
 /**
  * Handle toggling the context menu.
  */

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

@@ -5,6 +5,7 @@ import type { EncryptionKeyDerivationParams } from '@/utils/dist/shared/models/m
 import type { Vault, VaultResponse, VaultPostResponse } from '@/utils/dist/shared/models/webapi';
 import { EncryptionUtility } from '@/utils/EncryptionUtility';
 import { SqliteClient } from '@/utils/SqliteClient';
+import { VaultVersionIncompatibleError } from '@/utils/types/errors/VaultVersionIncompatibleError';
 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';
@@ -17,6 +18,21 @@ import { WebApiService } from '@/utils/WebApiService';
 
 import { t } from '@/i18n/StandaloneI18n';
 
+/**
+ * Cache for the SqliteClient to avoid repeated decryption and initialization.
+ * The cached instance is the single source of truth for the in-memory vault.
+ *
+ * Cache Strategy:
+ * - Local mutations (createCredential, etc.): Work directly on cachedSqliteClient, no cache clearing
+ * - New vault from remote (login, sync): Clear cache by setting both to null
+ * - Logout/clear vault: Clear cache by setting both to null
+ *
+ * The cache is cleared by setting cachedSqliteClient and cachedVaultBlob to null directly
+ * in the functions that receive new vault data from external sources.
+ */
+let cachedSqliteClient: SqliteClient | null = null;
+let cachedVaultBlob: string | null = null;
+
 /**
  * Check if the user is logged in and if the vault is locked, and also check for pending migrations.
  */
@@ -24,9 +40,10 @@ export async function handleCheckAuthStatus() : Promise<{ isLoggedIn: boolean, i
   const username = await storage.getItem('local:username');
   const accessToken = await storage.getItem('local:accessToken');
   const vaultData = await storage.getItem('session:encryptedVault');
+  const encryptionKey = await handleGetEncryptionKey();
 
   const isLoggedIn = username !== null && accessToken !== null;
-  const isVaultLocked = isLoggedIn && vaultData === null;
+  const isVaultLocked = isLoggedIn && (vaultData === null || encryptionKey === null);
 
   // If vault is locked, we can't check for pending migrations
   if (isVaultLocked) {
@@ -56,7 +73,17 @@ export async function handleCheckAuthStatus() : Promise<{ isLoggedIn: boolean, i
       hasPendingMigrations
     };
   } catch (error) {
-    console.error('Error checking pending migrations:', error);
+    // If it's a version incompatibility error, we need to handle it specially
+    if (error instanceof VaultVersionIncompatibleError) {
+      // Return the error so the UI can handle it appropriately (logout user)
+      return {
+        isLoggedIn,
+        isVaultLocked,
+        hasPendingMigrations: false,
+        error: error.message
+      };
+    }
+
     return {
       isLoggedIn,
       isVaultLocked,
@@ -78,6 +105,10 @@ export async function handleStoreVault(
     // Store new encrypted vault in session storage.
     await storage.setItem('session:encryptedVault', vaultRequest.vaultBlob);
 
+    // Clear cached client since we received a new vault blob from external source
+    cachedSqliteClient = null;
+    cachedVaultBlob = null;
+
     /*
      * For all other values, check if they have a value and store them in session storage if they do.
      * Some updates, e.g. when mutating local database, these values will not be set.
@@ -91,6 +122,10 @@ export async function handleStoreVault(
       await storage.setItem('session:privateEmailDomains', vaultRequest.privateEmailDomainList);
     }
 
+    if (vaultRequest.hiddenPrivateEmailDomainList) {
+      await storage.setItem('session:hiddenPrivateEmailDomains', vaultRequest.hiddenPrivateEmailDomainList);
+    }
+
     if (vaultRequest.vaultRevisionNumber) {
       await storage.setItem('session:vaultRevisionNumber', vaultRequest.vaultRevisionNumber);
     }
@@ -98,7 +133,7 @@ export async function handleStoreVault(
     return { success: true };
   } catch (error) {
     console.error('Failed to store vault:', error);
-    return { success: false, error: await t('common.errors.failedToStoreVault') };
+    return { success: false, error: await t('common.errors.unknownError') };
   }
 }
 
@@ -113,7 +148,7 @@ export async function handleStoreEncryptionKey(
     return { success: true };
   } catch (error) {
     console.error('Failed to store encryption key:', error);
-    return { success: false, error: await t('common.errors.failedToStoreEncryptionKey') };
+    return { success: false, error: await t('common.errors.unknownErrorTryAgain') };
   }
 }
 
@@ -128,7 +163,7 @@ export async function handleStoreEncryptionKeyDerivationParams(
     return { success: true };
   } catch (error) {
     console.error('Failed to store encryption key derivation params:', error);
-    return { success: false, error: await t('common.errors.failedToStoreEncryptionParams') };
+    return { success: false, error: await t('common.errors.unknownErrorTryAgain') };
   }
 }
 
@@ -137,7 +172,7 @@ export async function handleStoreEncryptionKeyDerivationParams(
  */
 export async function handleSyncVault(
 ) : Promise<messageBoolResponse> {
-  const webApi = new WebApiService(() => {});
+  const webApi = new WebApiService();
   const statusResponse = await webApi.getStatus();
   const statusError = webApi.validateStatusResponse(statusResponse);
   if (statusError !== null) {
@@ -154,8 +189,13 @@ export async function handleSyncVault(
       { key: 'session:encryptedVault', value: vaultResponse.vault.blob },
       { key: 'session:publicEmailDomains', value: vaultResponse.vault.publicEmailDomainList },
       { key: 'session:privateEmailDomains', value: vaultResponse.vault.privateEmailDomainList },
+      { key: 'session:hiddenPrivateEmailDomains', value: vaultResponse.vault.hiddenPrivateEmailDomainList },
       { key: 'session:vaultRevisionNumber', value: vaultResponse.vault.currentRevisionNumber }
     ]);
+
+    // Clear cached client since we received a new vault blob from server
+    cachedSqliteClient = null;
+    cachedVaultBlob = null;
   }
 
   return { success: true };
@@ -172,6 +212,7 @@ export async function handleGetVault(
     const encryptedVault = await storage.getItem('session:encryptedVault') as string;
     const publicEmailDomains = await storage.getItem('session:publicEmailDomains') as string[];
     const privateEmailDomains = await storage.getItem('session:privateEmailDomains') as string[];
+    const hiddenPrivateEmailDomains = await storage.getItem('session:hiddenPrivateEmailDomains') as string[] ?? [];
     const vaultRevisionNumber = await storage.getItem('session:vaultRevisionNumber') as number;
 
     if (!encryptedVault) {
@@ -194,11 +235,12 @@ export async function handleGetVault(
       vault: decryptedVault,
       publicEmailDomains: publicEmailDomains ?? [],
       privateEmailDomains: privateEmailDomains ?? [],
+      hiddenPrivateEmailDomains: hiddenPrivateEmailDomains ?? [],
       vaultRevisionNumber: vaultRevisionNumber ?? 0
     };
   } catch (error) {
     console.error('Failed to get vault:', error);
-    return { success: false, error: await t('common.errors.failedToRetrieveData') };
+    return { success: false, error: await t('common.errors.unknownError') };
   }
 }
 
@@ -215,9 +257,14 @@ export function handleClearVault(
     'session:encryptionKeyDerivationParams',
     'session:publicEmailDomains',
     'session:privateEmailDomains',
+    'session:hiddenPrivateEmailDomains',
     'session:vaultRevisionNumber'
   ]);
 
+  // Clear cached client since vault was cleared
+  cachedSqliteClient = null;
+  cachedVaultBlob = null;
+
   return { success: true };
 }
 
@@ -238,7 +285,101 @@ export async function handleGetCredentials(
     return { success: true, credentials: credentials };
   } catch (error) {
     console.error('Error getting credentials:', error);
-    return { success: false, error: await t('common.errors.failedToRetrieveData') };
+    return { success: false, error: await t('common.errors.unknownError') };
+  }
+}
+
+/**
+ * Get credentials filtered by URL and page title for autofill performance optimization.
+ * Filters credentials in the background script before sending to reduce message payload size.
+ * Critical for large vaults (1000+ credentials) to avoid multi-second delays.
+ *
+ * @param message - Filtering parameters: currentUrl, pageTitle, matchingMode
+ */
+export async function handleGetFilteredCredentials(
+  message: { currentUrl: string, pageTitle: string, matchingMode?: string }
+) : Promise<messageCredentialsResponse> {
+  const encryptionKey = await handleGetEncryptionKey();
+
+  if (!encryptionKey) {
+    return { success: false, error: await t('common.errors.vaultIsLocked') };
+  }
+
+  try {
+    const sqliteClient = await createVaultSqliteClient();
+    const allCredentials = sqliteClient.getAllCredentials();
+
+    const { filterCredentials, AutofillMatchingMode } = await import('@/utils/credentialMatcher/CredentialMatcher');
+
+    // Parse matching mode from string
+    let matchingMode = AutofillMatchingMode.DEFAULT;
+    if (message.matchingMode) {
+      matchingMode = message.matchingMode as typeof AutofillMatchingMode[keyof typeof AutofillMatchingMode];
+    }
+
+    // Filter credentials in background to reduce payload size (~95% reduction)
+    const filteredCredentials = filterCredentials(
+      allCredentials,
+      message.currentUrl,
+      message.pageTitle,
+      matchingMode
+    );
+
+    return { success: true, credentials: filteredCredentials };
+  } catch (error) {
+    console.error('Error getting filtered credentials:', error);
+    return { success: false, error: await t('common.errors.unknownError') };
+  }
+}
+
+/**
+ * Get credentials filtered by text search query.
+ * Searches across entire vault (service name, username, email, URL) and returns matches.
+ *
+ * @param message - Search parameters: searchTerm
+ */
+export async function handleGetSearchCredentials(
+  message: { searchTerm: string }
+) : Promise<messageCredentialsResponse> {
+  const encryptionKey = await handleGetEncryptionKey();
+
+  if (!encryptionKey) {
+    return { success: false, error: await t('common.errors.vaultIsLocked') };
+  }
+
+  try {
+    const sqliteClient = await createVaultSqliteClient();
+    const allCredentials = sqliteClient.getAllCredentials();
+
+    // If search term is empty, return empty array
+    if (!message.searchTerm || message.searchTerm.trim() === '') {
+      return { success: true, credentials: [] };
+    }
+
+    const searchTerm = message.searchTerm.toLowerCase().trim();
+
+    // Filter credentials by search term across multiple fields
+    const searchResults = allCredentials.filter(cred => {
+      const searchableFields = [
+        cred.ServiceName?.toLowerCase(),
+        cred.Username?.toLowerCase(),
+        cred.Alias?.Email?.toLowerCase(),
+        cred.ServiceUrl?.toLowerCase()
+      ];
+      return searchableFields.some(field => field?.includes(searchTerm));
+    }).sort((a, b) => {
+      // Sort by service name, then username
+      const serviceNameComparison = (a.ServiceName ?? '').localeCompare(b.ServiceName ?? '');
+      if (serviceNameComparison !== 0) {
+        return serviceNameComparison;
+      }
+      return (a.Username ?? '').localeCompare(b.Username ?? '');
+    });
+
+    return { success: true, credentials: searchResults };
+  } catch (error) {
+    console.error('Error searching credentials:', error);
+    return { success: false, error: await t('common.errors.unknownError') };
   }
 }
 
@@ -299,28 +440,26 @@ export async function getEmailAddressesForVault(
 export function handleGetDefaultEmailDomain(): Promise<stringResponse> {
   return (async (): Promise<stringResponse> => {
     try {
-      const privateEmailDomains = await storage.getItem('session:privateEmailDomains') as string[];
-      const publicEmailDomains = await storage.getItem('session:publicEmailDomains') as string[];
-
       const sqliteClient = await createVaultSqliteClient();
-      const defaultEmailDomain = sqliteClient.getDefaultEmailDomain(privateEmailDomains, publicEmailDomains);
+      const defaultEmailDomain = await sqliteClient.getDefaultEmailDomain();
 
       return { success: true, value: defaultEmailDomain ?? undefined };
     } catch (error) {
       console.error('Error getting default email domain:', error);
-      return { success: false, error: await t('common.errors.failedToRetrieveData') };
+      return { success: false, error: await t('common.errors.unknownError') };
     }
   })();
 }
 
 /**
  * Get the default identity settings.
+ * Returns the effective language (with smart UI language matching if no explicit override is set).
  */
 export async function handleGetDefaultIdentitySettings(
 ) : Promise<IdentitySettingsResponse> {
   try {
     const sqliteClient = await createVaultSqliteClient();
-    const language = sqliteClient.getDefaultIdentityLanguage();
+    const language = await sqliteClient.getEffectiveIdentityLanguage();
     const gender = sqliteClient.getDefaultIdentityGender();
 
     return {
@@ -332,7 +471,7 @@ export async function handleGetDefaultIdentitySettings(
     };
   } catch (error) {
     console.error('Error getting default identity settings:', error);
-    return { success: false, error: await t('common.errors.failedToRetrieveData') };
+    return { success: false, error: await t('common.errors.unknownError') };
   }
 }
 
@@ -348,7 +487,7 @@ export async function handleGetPasswordSettings(
     return { success: true, settings: passwordSettings };
   } catch (error) {
     console.error('Error getting password settings:', error);
-    return { success: false, error: await t('common.errors.failedToRetrieveData') };
+    return { success: false, error: await t('common.errors.unknownError') };
   }
 }
 
@@ -385,18 +524,16 @@ export async function handleUploadVault(
   message: any
 ) : Promise<messageVaultUploadResponse> {
   try {
-    // Store the new vault blob in session storage.
+    // Persist the current updated vault blob in session storage.
     await storage.setItem('session:encryptedVault', message.vaultBlob);
 
-    // Create new sqlite client which will use the new vault blob.
-    const sqliteClient = await createVaultSqliteClient();
-
     // Upload the new vault to the server.
+    const sqliteClient = await createVaultSqliteClient();
     const response = await uploadNewVaultToServer(sqliteClient);
     return { success: true, status: response.status, newRevisionNumber: response.newRevisionNumber };
   } catch (error) {
     console.error('Failed to upload vault:', error);
-    return { success: false, error: await t('common.errors.failedToUploadVault') };
+    return { success: false, error: await t('common.errors.unknownError') };
   }
 }
 
@@ -466,10 +603,17 @@ async function uploadNewVaultToServer(sqliteClient: SqliteClient) : Promise<Vaul
     encryptionKey
   );
 
+  // Update storage with the newly encrypted vault (serialized from current in-memory state)
   await storage.setItems([
     { key: 'session:encryptedVault', value: encryptedVault }
   ]);
 
+  /*
+   * Update cached vault blob to match the new encrypted version
+   * This prevents unnecessary cache invalidation since the in-memory sqliteClient is already up to date
+   */
+  cachedVaultBlob = encryptedVault;
+
   // Get metadata from storage
   const vaultRevisionNumber = await storage.getItem('session:vaultRevisionNumber') as number;
 
@@ -483,23 +627,21 @@ async function uploadNewVaultToServer(sqliteClient: SqliteClient) : Promise<Vaul
     credentialsCount: sqliteClient.getAllCredentials().length,
     currentRevisionNumber: vaultRevisionNumber,
     emailAddressList: emailAddresses,
-    privateEmailDomainList: [], // Empty on purpose, API will not use this for vault updates.
-    publicEmailDomainList: [], // Empty on purpose, API will not use this for vault updates.
-    encryptionPublicKey: '', // Empty on purpose, only required if new public/private key pair is generated.
-    client: '', // Empty on purpose, API will not use this for vault updates.
     updatedAt: new Date().toISOString(),
     username: username,
-    version: sqliteClient.getDatabaseVersion().version
+    version: (await sqliteClient.getDatabaseVersion()).version,
+    // TODO: add public RSA encryption key to payload when implementing vault creation from browser extension. Currently only web app does this.
+    encryptionPublicKey: '',
   };
 
-  const webApi = new WebApiService(() => {});
+  const webApi = new WebApiService();
   const response = await webApi.post<Vault, VaultPostResponse>('Vault', newVault);
 
   // Check if response is successful (.status === 0)
   if (response.status === 0) {
     await storage.setItem('session:vaultRevisionNumber', response.newRevisionNumber);
   } else {
-    throw new Error(await t('common.errors.failedToUploadVault'));
+    throw new Error(await t('common.errors.unknownError'));
   }
 
   return response;
@@ -507,6 +649,7 @@ async function uploadNewVaultToServer(sqliteClient: SqliteClient) : Promise<Vaul
 
 /**
  * Create a new sqlite client for the stored vault.
+ * Uses a cache to avoid repeated decryption and initialization for read operations.
  */
 async function createVaultSqliteClient() : Promise<SqliteClient> {
   const encryptedVault = await storage.getItem('session:encryptedVault') as string;
@@ -515,15 +658,24 @@ async function createVaultSqliteClient() : Promise<SqliteClient> {
     throw new Error(await t('common.errors.unknownError'));
   }
 
-  // Decrypt the vault.
+  // Check if we have a valid cached client
+  if (cachedSqliteClient && cachedVaultBlob === encryptedVault) {
+    return cachedSqliteClient;
+  }
+
+  // Decrypt the vault
   const decryptedVault = await EncryptionUtility.symmetricDecrypt(
     encryptedVault,
     encryptionKey
   );
 
-  // Initialize the SQLite client with the decrypted vault.
+  // Initialize the SQLite client with the decrypted vault
   const sqliteClient = new SqliteClient();
   await sqliteClient.initializeFromBase64(decryptedVault);
 
+  // Cache the client and vault blob
+  cachedSqliteClient = sqliteClient;
+  cachedVaultBlob = encryptedVault;
+
   return sqliteClient;
 }

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

@@ -1,8 +1,13 @@
+/**
+ * Content script entry point - handles autofill UI and WebAuthn passkey interception
+ */
+
 import '@/entrypoints/contentScript/style.css';
 import { onMessage } from "webext-bridge/content-script";
 
 import { injectIcon, popupDebounceTimeHasPassed, validateInputField } from '@/entrypoints/contentScript/Form';
 import { isAutoShowPopupEnabled, openAutofillPopup, removeExistingPopup, createUpgradeRequiredPopup } from '@/entrypoints/contentScript/Popup';
+import { initializeWebAuthnInterceptor } from '@/entrypoints/contentScript/WebAuthnInterceptor';
 
 import { FormDetector } from '@/utils/formDetector/FormDetector';
 import { BoolResponse as messageBoolResponse } from '@/utils/types/messaging/BoolResponse';
@@ -26,6 +31,9 @@ export default defineContentScript({
       return;
     }
 
+    // Initialize WebAuthn interceptor for passkey support
+    await initializeWebAuthnInterceptor(ctx);
+
     // Wait for 750ms to give the host page time to load and to increase the chance that the body is available and ready.
     await new Promise(resolve => setTimeout(resolve, 750));
 

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

@@ -1,212 +0,0 @@
-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;
-}
-
-/**
- * Extract domain from URL, handling both full URLs and partial domains
- * @param url - URL or domain string
- * @returns Normalized domain without protocol or www
- */
-function extractDomain(url: string): string {
-  if (!url) {
-    return '';
-  }
-
-  // Remove protocol if present
-  let domain = url.toLowerCase().trim();
-  domain = domain.replace(/^https?:\/\//, '');
-
-  // 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 || 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;
-    }
-
-    // Check for subdomain/partial match (priority 2)
-    if (enableSubdomainMatch && domainsMatch(currentDomain, credDomain)) {
-      filtered.push({ ...cred, priority: 2 });
-      return;
-    }
-  });
-
-  // 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()
-  );
-
-  return uniqueCredentials.slice(0, 3);
-}

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

@@ -1,14 +1,14 @@
 import { sendMessage } from 'webext-bridge/content-script';
 
-import { filterCredentials, AutofillMatchingMode } from '@/entrypoints/contentScript/Filter';
 import { fillCredential } from '@/entrypoints/contentScript/Form';
 
-import { DISABLED_SITES_KEY, TEMPORARY_DISABLED_SITES_KEY, GLOBAL_AUTOFILL_POPUP_ENABLED_KEY, VAULT_LOCKED_DISMISS_UNTIL_KEY, LAST_CUSTOM_EMAIL_KEY, LAST_CUSTOM_USERNAME_KEY, AUTOFILL_MATCHING_MODE_KEY } from '@/utils/Constants';
+import { DISABLED_SITES_KEY, TEMPORARY_DISABLED_SITES_KEY, GLOBAL_AUTOFILL_POPUP_ENABLED_KEY, VAULT_LOCKED_DISMISS_UNTIL_KEY, AUTOFILL_MATCHING_MODE_KEY, CUSTOM_EMAIL_HISTORY_KEY, CUSTOM_USERNAME_HISTORY_KEY } from '@/utils/Constants';
+import { AutofillMatchingMode } from '@/utils/credentialMatcher/CredentialMatcher';
 import { CreateIdentityGenerator } from '@/utils/dist/shared/identity-generator';
 import type { Credential } from '@/utils/dist/shared/models/vault';
 import { CreatePasswordGenerator, PasswordGenerator, PasswordSettings } from '@/utils/dist/shared/password-generator';
-import { FormDetector } from '@/utils/formDetector/FormDetector';
 import { ClickValidator } from '@/utils/security/ClickValidator';
+import { ServiceDetectionUtility } from '@/utils/serviceDetection/ServiceDetectionUtility';
 import { SqliteClient } from '@/utils/SqliteClient';
 import { CredentialsResponse } from '@/utils/types/messaging/CredentialsResponse';
 import { IdentitySettingsResponse } from '@/utils/types/messaging/IdentitySettingsResponse';
@@ -49,7 +49,14 @@ export function openAutofillPopup(input: HTMLInputElement, container: HTMLElemen
   document.addEventListener('keydown', handleEnterKey);
 
   (async () : Promise<void> => {
-    const response = await sendMessage('GET_CREDENTIALS', { }, 'background') as CredentialsResponse;
+    // Load autofill matching mode setting to send to background for filtering
+    const matchingMode = await storage.getItem(AUTOFILL_MATCHING_MODE_KEY) as AutofillMatchingMode ?? AutofillMatchingMode.DEFAULT;
+
+    const response = await sendMessage('GET_FILTERED_CREDENTIALS', {
+      currentUrl: window.location.href,
+      pageTitle: document.title,
+      matchingMode: matchingMode
+    }, 'background') as CredentialsResponse;
 
     if (response.success) {
       await createAutofillPopup(input, response.credentials, container);
@@ -182,22 +189,12 @@ export async function createAutofillPopup(input: HTMLInputElement, credentials:
   credentialList.className = 'av-credential-list';
   popup.appendChild(credentialList);
 
-  // Add initial credentials
+  // Add initial credentials (already filtered by background script for performance)
   if (!credentials) {
     credentials = [];
   }
 
-  // Load autofill matching mode setting
-  const matchingMode = await storage.getItem(AUTOFILL_MATCHING_MODE_KEY) as AutofillMatchingMode ?? AutofillMatchingMode.DEFAULT;
-
-  const filteredCredentials = filterCredentials(
-    credentials,
-    window.location.href,
-    document.title,
-    matchingMode
-  );
-
-  updatePopupContent(filteredCredentials, credentialList, input, rootContainer, noMatchesText);
+  updatePopupContent(credentials, credentialList, input, rootContainer, noMatchesText);
 
   // Add divider
   const divider = document.createElement('div');
@@ -227,8 +224,8 @@ export async function createAutofillPopup(input: HTMLInputElement, credentials:
     e.stopPropagation();
     e.stopImmediatePropagation();
 
-    const suggestedNames = FormDetector.getSuggestedServiceName(document, window.location);
-    const result = await createAliasCreationPopup(suggestedNames, rootContainer);
+    const serviceInfo = ServiceDetectionUtility.getServiceInfo(document, window.location);
+    const result = await createAliasCreationPopup(serviceInfo.suggestedNames, rootContainer);
 
     if (!result) {
       // User cancelled
@@ -549,62 +546,41 @@ export async function createVaultLockedPopup(input: HTMLInputElement, rootContai
 }
 
 /**
- * Handle popup search input by filtering credentials based on the search term.
+ * Handle popup search input - searches entire vault when user types.
+ * When empty, shows the initially URL-filtered credentials.
+ * When user types, searches ALL credentials in vault (not just the pre-filtered set).
+ *
+ * @param searchInput - The search input element
+ * @param initialCredentials - The initially URL-filtered credentials to show when search is empty
+ * @param rootContainer - The root container element
+ * @param searchTimeout - Timeout for debouncing search
+ * @param credentialList - The credential list element to update
+ * @param input - The input field that triggered the popup
+ * @param noMatchesText - Text to show when no matches found
  */
-async function handleSearchInput(searchInput: HTMLInputElement, credentials: Credential[], rootContainer: HTMLElement, searchTimeout: NodeJS.Timeout | null, credentialList: HTMLElement | null, input: HTMLInputElement, noMatchesText?: string) : Promise<void> {
+async function handleSearchInput(searchInput: HTMLInputElement, initialCredentials: Credential[], rootContainer: HTMLElement, searchTimeout: NodeJS.Timeout | null, credentialList: HTMLElement | null, input: HTMLInputElement, noMatchesText?: string) : Promise<void> {
   if (searchTimeout) {
     clearTimeout(searchTimeout);
   }
-  const searchTerm = searchInput.value.toLowerCase();
 
-  // Ensure we have unique credentials
-  const uniqueCredentials = Array.from(new Map(credentials.map(cred => [cred.Id, cred])).values());
-  let filteredCredentials;
+  const searchTerm = searchInput.value.trim();
 
   if (searchTerm === '') {
-    // Load autofill matching mode setting
-    const matchingMode = await storage.getItem(AUTOFILL_MATCHING_MODE_KEY) as AutofillMatchingMode ?? AutofillMatchingMode.DEFAULT;
-
-    // If search is empty, use original URL-based filtering
-    filteredCredentials = filterCredentials(
-      uniqueCredentials,
-      window.location.href,
-      document.title,
-      matchingMode
-    ).sort((a, b) => {
-      // First compare by service name
-      const serviceNameComparison = (a.ServiceName ?? '').localeCompare(b.ServiceName ?? '');
-      if (serviceNameComparison !== 0) {
-        return serviceNameComparison;
-      }
-
-      // If service names are equal, compare by username/nickname
-      return (a.Username ?? '').localeCompare(b.Username ?? '');
-    });
+    // If search is empty, show the initially URL-filtered credentials
+    updatePopupContent(initialCredentials, credentialList, input, rootContainer, noMatchesText);
   } else {
-    // Otherwise filter based on search term
-    filteredCredentials = uniqueCredentials.filter(cred => {
-      const searchableFields = [
-        cred.ServiceName?.toLowerCase(),
-        cred.Username?.toLowerCase(),
-        cred.Alias?.Email?.toLowerCase(),
-        cred.ServiceUrl?.toLowerCase()
-      ];
-      return searchableFields.some(field => field?.includes(searchTerm));
-    }).sort((a, b) => {
-      // First compare by service name
-      const serviceNameComparison = (a.ServiceName ?? '').localeCompare(b.ServiceName ?? '');
-      if (serviceNameComparison !== 0) {
-        return serviceNameComparison;
-      }
+    // Search in full vault with search term
+    const response = await sendMessage('GET_SEARCH_CREDENTIALS', {
+      searchTerm: searchTerm
+    }, 'background') as CredentialsResponse;
 
-      // If service names are equal, compare by username/nickname
-      return (a.Username ?? '').localeCompare(b.Username ?? '');
-    });
+    if (response.success && response.credentials) {
+      updatePopupContent(response.credentials, credentialList, input, rootContainer, noMatchesText);
+    } else {
+      // On error, fallback to showing initial filtered credentials
+      updatePopupContent(initialCredentials, credentialList, input, rootContainer, noMatchesText);
+    }
   }
-
-  // Update popup content with filtered results
-  updatePopupContent(filteredCredentials, credentialList, input, rootContainer, noMatchesText);
 }
 
 /**
@@ -633,10 +609,44 @@ function createCredentialList(credentials: Credential[], input: HTMLInputElement
       const credTextContainer = document.createElement('div');
       credTextContainer.className = 'av-credential-text';
 
-      // Service name (primary text)
+      // Service name (primary text) with passkey indicator
       const serviceName = document.createElement('div');
       serviceName.className = 'av-service-name';
-      serviceName.textContent = cred.ServiceName;
+
+      // Create a flex container for service name and passkey icon
+      const serviceNameContainer = document.createElement('div');
+      serviceNameContainer.style.display = 'flex';
+      serviceNameContainer.style.alignItems = 'center';
+      serviceNameContainer.style.gap = '4px';
+
+      const serviceNameText = document.createElement('span');
+      serviceNameText.textContent = cred.ServiceName;
+      serviceNameContainer.appendChild(serviceNameText);
+
+      // Add passkey indicator if credential has a passkey
+      if (cred.HasPasskey) {
+        const passkeyIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        passkeyIcon.setAttribute('class', 'av-passkey-icon');
+        passkeyIcon.setAttribute('viewBox', '0 0 24 24');
+        passkeyIcon.setAttribute('fill', 'none');
+        passkeyIcon.setAttribute('stroke', 'currentColor');
+        passkeyIcon.setAttribute('stroke-width', '2');
+        passkeyIcon.setAttribute('stroke-linecap', 'round');
+        passkeyIcon.setAttribute('stroke-linejoin', 'round');
+        passkeyIcon.setAttribute('aria-label', 'Has passkey');
+        passkeyIcon.style.width = '14px';
+        passkeyIcon.style.height = '14px';
+        passkeyIcon.style.flexShrink = '0';
+        passkeyIcon.style.opacity = '0.7';
+
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('d', 'M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4');
+
+        passkeyIcon.appendChild(path);
+        serviceNameContainer.appendChild(passkeyIcon);
+      }
+
+      serviceName.appendChild(serviceNameContainer);
 
       // Details container (secondary text)
       const detailsContainer = document.createElement('div');
@@ -762,9 +772,9 @@ export async function createAliasCreationPopup(suggestedNames: string[], rootCon
   // Close existing popup
   removeExistingPopup(rootContainer);
 
-  // Load last used values
-  const lastEmail = await storage.getItem(LAST_CUSTOM_EMAIL_KEY) as string ?? '';
-  const lastUsername = await storage.getItem(LAST_CUSTOM_USERNAME_KEY) as string ?? '';
+  // Load history
+  const emailHistory = await storage.getItem(CUSTOM_EMAIL_HISTORY_KEY) as string[] ?? [];
+  const usernameHistory = await storage.getItem(CUSTOM_USERNAME_HISTORY_KEY) as string[] ?? [];
 
   return new Promise((resolve) => {
     (async (): Promise<void> => {
@@ -829,11 +839,20 @@ export async function createAliasCreationPopup(suggestedNames: string[], rootCon
             ${randomIdentityIcon}
             <h3 class="av-create-popup-title">${randomIdentityTitle}</h3>
           </div>
-          <button class="av-create-popup-mode-dropdown">
-            <svg class="av-icon" viewBox="0 0 24 24">
-              <path d="M6 9l6 6 6-6"/>
-            </svg>
-          </button>
+          <div class="av-create-popup-header-buttons">
+            <button class="av-create-popup-mode-dropdown">
+              <svg class="av-icon" viewBox="0 0 24 24">
+                <path d="M6 9l6 6 6-6"/>
+              </svg>
+            </button>
+            <button class="av-create-popup-popout" title="Open in main popup">
+              <svg class="av-icon" viewBox="0 0 24 24">
+                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+                <polyline points="15 3 21 3 21 9"></polyline>
+                <line x1="10" y1="14" x2="21" y2="3"></line>
+              </svg>
+            </button>
+          </div>
         </div>
       </div>
 
@@ -888,8 +907,8 @@ export async function createAliasCreationPopup(suggestedNames: string[], rootCon
             id="custom-email"
             class="av-create-popup-input"
             placeholder="${enterEmailAddressText}"
-            data-default-value="${lastEmail}"
           >
+          <div class="av-field-suggestions" id="email-suggestions"></div>
         </div>
         <div class="av-create-popup-field-group">
           <label for="custom-username">${usernameText}</label>
@@ -898,8 +917,8 @@ export async function createAliasCreationPopup(suggestedNames: string[], rootCon
             id="custom-username"
             class="av-create-popup-input"
             placeholder="${enterUsernameText}"
-            data-default-value="${lastUsername}"
           >
+          <div class="av-field-suggestions" id="username-suggestions"></div>
         </div>
         <div class="av-create-popup-field-group">
           <label>${passwordText}</label>
@@ -960,6 +979,7 @@ export async function createAliasCreationPopup(suggestedNames: string[], rootCon
       const customMode = popup.querySelector('.av-create-popup-custom-mode') as HTMLElement;
       const dropdownMenu = popup.querySelector('.av-create-popup-mode-dropdown-menu') as HTMLElement;
       const titleContainer = popup.querySelector('.av-create-popup-title-container') as HTMLElement;
+      const popoutBtn = popup.querySelector('.av-create-popup-popout') as HTMLButtonElement;
       const cancelBtn = popup.querySelector('#cancel-btn') as HTMLButtonElement;
       const customCancelBtn = popup.querySelector('#custom-cancel-btn') as HTMLButtonElement;
       const saveBtn = popup.querySelector('#save-btn') as HTMLButtonElement;
@@ -970,41 +990,154 @@ export async function createAliasCreationPopup(suggestedNames: string[], rootCon
       const passwordPreview = popup.querySelector('#password-preview') as HTMLInputElement;
       const regenerateBtn = popup.querySelector('#regenerate-password') as HTMLButtonElement;
       const toggleVisibilityBtn = popup.querySelector('#toggle-password-visibility') as HTMLButtonElement;
+      const emailSuggestions = popup.querySelector('#email-suggestions') as HTMLElement;
+      const usernameSuggestions = popup.querySelector('#username-suggestions') as HTMLElement;
 
       /**
-       * Setup default value for input with placeholder styling.
+       * Update history with new value (max 2 unique entries)
        */
-      const setupDefaultValue = (input: HTMLInputElement) : void => {
-        const defaultValue = input.dataset.defaultValue;
-        if (defaultValue) {
-          input.value = defaultValue;
-          input.classList.add('av-create-popup-input-default');
+      const updateHistory = async (value: string, historyKey: typeof CUSTOM_EMAIL_HISTORY_KEY | typeof CUSTOM_USERNAME_HISTORY_KEY, maxItems: number = 2): Promise<string[]> => {
+        const history = await storage.getItem(historyKey) as string[] ?? [];
+
+        // Remove the value if it already exists
+        const filteredHistory = history.filter((item: string) => item !== value);
+
+        // Add the new value at the beginning
+        if (value.trim()) {
+          filteredHistory.unshift(value);
         }
+
+        // Keep only the first maxItems
+        const updatedHistory = filteredHistory.slice(0, maxItems);
+
+        // Save the updated history
+        await storage.setItem(historyKey, updatedHistory);
+
+        return updatedHistory;
       };
 
-      setupDefaultValue(customEmail);
-      setupDefaultValue(customUsername);
+      /**
+       * Remove item from history
+       */
+      const removeFromHistory = async (value: string, historyKey: typeof CUSTOM_EMAIL_HISTORY_KEY | typeof CUSTOM_USERNAME_HISTORY_KEY): Promise<string[]> => {
+        const history = await storage.getItem(historyKey) as string[] ?? [];
+        const updatedHistory = history.filter((item: string) => item !== value);
+        await storage.setItem(historyKey, updatedHistory);
+        return updatedHistory;
+      };
 
-      // Handle input changes
-      customEmail.addEventListener('input', () => {
-        const value = customEmail.value.trim();
-        if (value || value === '') {
-          customEmail.classList.remove('av-create-popup-input-default');
-          storage.setItem(LAST_CUSTOM_EMAIL_KEY, value);
+      /**
+       * Format suggestions HTML as pill-style buttons
+       */
+      const formatSuggestionsHtml = async (history: string[], currentValue: string): Promise<string> => {
+        // Filter out the current value from history and limit to 2 items
+        const filteredHistory = history
+          .filter(item => item.toLowerCase() !== currentValue.toLowerCase())
+          .slice(0, 2);
+
+        if (filteredHistory.length === 0) {
+          return '';
+        }
+
+        // Build HTML with pill-style buttons
+        return filteredHistory.map(item =>
+          `<span class="av-suggestion-pill">
+            <span class="av-suggestion-pill-text" data-value="${item}">${item}</span>
+            <span class="av-suggestion-pill-delete" data-value="${item}" title="Remove">×</span>
+          </span>`
+        ).join(' ');
+      };
+
+      /**
+       * Update suggestions display
+       */
+      const updateSuggestions = async (input: HTMLInputElement, suggestionsContainer: HTMLElement, history: string[]): Promise<void> => {
+        const currentValue = input.value.trim();
+        const html = await formatSuggestionsHtml(history, currentValue);
+        suggestionsContainer.innerHTML = html;
+        suggestionsContainer.style.display = html ? 'flex' : 'none';
+      };
+
+      // Initial display of suggestions
+      await updateSuggestions(customEmail, emailSuggestions, emailHistory);
+      await updateSuggestions(customUsername, usernameSuggestions, usernameHistory);
+
+      // Handle popout button click
+      popoutBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const serviceName = inputServiceName.value.trim();
+        const encodedServiceInfo = ServiceDetectionUtility.getEncodedServiceInfo(document, window.location);
+        sendMessage('OPEN_POPUP_CREATE_CREDENTIAL', {
+          serviceName: serviceName || encodedServiceInfo.serviceName,
+          currentUrl: encodedServiceInfo.currentUrl
+        }, 'background');
+        closePopup(null);
+      });
+
+      // Handle email input
+      customEmail.addEventListener('input', async () => {
+        await updateSuggestions(customEmail, emailSuggestions, emailHistory);
+      });
+
+      // Handle username input
+      customUsername.addEventListener('input', async () => {
+        await updateSuggestions(customUsername, usernameSuggestions, usernameHistory);
+      });
+
+      // Handle suggestion clicks for email
+      emailSuggestions.addEventListener('click', async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const target = e.target as HTMLElement;
+
+        // Check if delete button was clicked
+        if (target.classList.contains('av-suggestion-pill-delete')) {
+          const value = target.dataset.value;
+          if (value) {
+            const updatedHistory = await removeFromHistory(value, CUSTOM_EMAIL_HISTORY_KEY);
+            emailHistory.splice(0, emailHistory.length, ...updatedHistory);
+            await updateSuggestions(customEmail, emailSuggestions, emailHistory);
+          }
         } else {
-          customEmail.classList.add('av-create-popup-input-default');
-          storage.setItem(LAST_CUSTOM_EMAIL_KEY, '');
+          // Check if pill or pill text was clicked
+          let pillElement = target.closest('.av-suggestion-pill') as HTMLElement;
+          if (pillElement) {
+            const textElement = pillElement.querySelector('.av-suggestion-pill-text') as HTMLElement;
+            const value = textElement?.dataset.value;
+            if (value) {
+              customEmail.value = value;
+              await updateSuggestions(customEmail, emailSuggestions, emailHistory);
+            }
+          }
         }
       });
 
-      customUsername.addEventListener('input', () => {
-        const value = customUsername.value.trim();
-        if (value || value === '') {
-          customUsername.classList.remove('av-create-popup-input-default');
-          storage.setItem(LAST_CUSTOM_USERNAME_KEY, value);
+      // Handle suggestion clicks for username
+      usernameSuggestions.addEventListener('click', async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const target = e.target as HTMLElement;
+
+        // Check if delete button was clicked
+        if (target.classList.contains('av-suggestion-pill-delete')) {
+          const value = target.dataset.value;
+          if (value) {
+            const updatedHistory = await removeFromHistory(value, CUSTOM_USERNAME_HISTORY_KEY);
+            usernameHistory.splice(0, usernameHistory.length, ...updatedHistory);
+            await updateSuggestions(customUsername, usernameSuggestions, usernameHistory);
+          }
         } else {
-          customUsername.classList.add('av-create-popup-input-default');
-          storage.setItem(LAST_CUSTOM_USERNAME_KEY, '');
+          // Check if pill or pill text was clicked
+          let pillElement = target.closest('.av-suggestion-pill') as HTMLElement;
+          if (pillElement) {
+            const textElement = pillElement.querySelector('.av-suggestion-pill-text') as HTMLElement;
+            const value = textElement?.dataset.value;
+            if (value) {
+              customUsername.value = value;
+              await updateSuggestions(customUsername, usernameSuggestions, usernameHistory);
+            }
+          }
         }
       });
 
@@ -1372,12 +1505,8 @@ export async function createAliasCreationPopup(suggestedNames: string[], rootCon
         if (serviceName) {
           const email = customEmail.value.trim();
           const username = customUsername.value.trim();
-          const hasDefaultEmail = customEmail.classList.contains('av-create-popup-input-default');
-          const hasDefaultUsername = customUsername.classList.contains('av-create-popup-input-default');
-
-          // If using default values, use the dataset values
-          const finalEmail = hasDefaultEmail ? customEmail.dataset.defaultValue : email;
-          const finalUsername = hasDefaultUsername ? customUsername.dataset.defaultValue : username;
+          const finalEmail = email;
+          const finalUsername = username;
 
           if (!finalEmail && !finalUsername) {
           // Add error styling to fields
@@ -1424,6 +1553,14 @@ export async function createAliasCreationPopup(suggestedNames: string[], rootCon
             return;
           }
 
+          // Update history when saving
+          if (finalEmail) {
+            await updateHistory(finalEmail, CUSTOM_EMAIL_HISTORY_KEY);
+          }
+          if (finalUsername) {
+            await updateHistory(finalUsername, CUSTOM_USERNAME_HISTORY_KEY);
+          }
+
           closePopup({
             serviceName,
             isCustomCredential: true,

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

@@ -0,0 +1,271 @@
+/**
+ * WebAuthn Interceptor - Handles communication between page and extension
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { sendMessage } from 'webext-bridge/content-script';
+
+import type { WebAuthnSettingsResponse } from '@/utils/passkey/types';
+
+import { browser } from '#imports';
+
+// Firefox-specific global function for cloning objects into page context
+declare function cloneInto<T>(obj: T, targetScope: any): T;
+
+let interceptorInitialized = false;
+
+/**
+ * Track last cancelled request to prevent rapid-fire popups.
+ * This is used to track the last time a WebAuthn request was cancelled.
+ * Some websites try to automatically re-trigger a WebAuthn request after a cancellation.
+ * which results in a jarring UX for the user.
+ * This cooldown prevents rapid-fire popups by waiting for a short period after a cancellation.
+ */
+let lastCancelledTimestamp = 0;
+const CANCEL_COOLDOWN_MS = 500; // 500ms cooldown after a recent cancellation
+
+/**
+ * Track when the page finished loading to detect automatic vs user-initiated requests.
+ * Some websites (like Nintendo, Amazon) automatically trigger passkey requests on page load.
+ * We should filter these if no matching credentials exist.
+ */
+let pageLoadTime = 0;
+const AUTO_REQUEST_THRESHOLD_MS = 1000; // Requests within 1 second of page load are considered "automatic"
+
+/**
+ * Check if page is ready for WebAuthn interactions.
+ * Safari and other browsers can trigger WebAuthn requests during URL autocomplete
+ * or page prefetch, which creates popups before the user actually navigates to the page.
+ * We check if the document is visible and interactive to prevent these spurious requests.
+ */
+function isPageReadyForWebAuthn(): boolean {
+  // If page is hidden (prefetch/background tab), block the request
+  if (document.hidden || document.visibilityState === 'hidden') {
+    return false;
+  }
+
+  // If document is still loading (not even interactive), block the request
+  if (document.readyState === 'loading') {
+    return false;
+  }
+
+  // Page is visible and at least interactive - allow the request
+  return true;
+}
+
+/**
+ * Initialize the WebAuthn interceptor
+ */
+export async function initializeWebAuthnInterceptor(_ctx: any): Promise<void> {
+  if (interceptorInitialized) {
+    return;
+  }
+
+  // Track page load time for detecting automatic requests
+  pageLoadTime = Date.now();
+
+  // Listen for WebAuthn create events from the page
+  window.addEventListener('aliasvault:webauthn:create', async (event: any) => {
+    const { requestId, publicKey, origin } = event.detail;
+
+    /**
+     * Helper to dispatch event with Firefox compatibility
+     * Firefox has strict cross-context security, so we serialize to JSON and back
+     */
+    const dispatchResponse = (detail: any): void => {
+      let eventDetail: any;
+
+      /*
+       * For Firefox, we need to ensure the detail is accessible in the page context
+       * cloneInto is a global function in Firefox content scripts
+       */
+      if (typeof cloneInto !== 'undefined') {
+        // Firefox: serialize and clone into page context
+        const serialized = JSON.parse(JSON.stringify(detail));
+        eventDetail = cloneInto(serialized, (window as any).wrappedJSObject || window);
+      } else {
+        // Chrome/Edge: direct assignment works
+        eventDetail = detail;
+      }
+
+      window.dispatchEvent(new CustomEvent('aliasvault:webauthn:create:response', {
+        detail: eventDetail
+      }));
+    };
+
+    try {
+      /**
+       * Note: We don't block create (registration) requests based on page readiness.
+       * Registration is always user-initiated (button click), so it's never spurious.
+       */
+
+      // Check if we're in cooldown period after a recent cancellation
+      const now = Date.now();
+      if (lastCancelledTimestamp > 0 && (now - lastCancelledTimestamp) < CANCEL_COOLDOWN_MS) {
+        // Silently fall back to native implementation during cooldown
+        dispatchResponse({
+          requestId,
+          fallback: true
+        });
+        return;
+      }
+
+      // Check if passkey provider is enabled
+      const enabled = await isWebAuthnInterceptionEnabled();
+      if (!enabled) {
+        // If disabled, signal fallback to native browser implementation
+        dispatchResponse({
+          requestId,
+          fallback: true
+        });
+        return;
+      }
+
+      // Send to background script to handle
+      const result = await sendMessage('WEBAUTHN_CREATE', {
+        publicKey,
+        origin
+      }, 'background');
+
+      // Track if user cancelled to enable cooldown
+      if (result && typeof result === 'object' && (result as any).cancelled) {
+        lastCancelledTimestamp = Date.now();
+      }
+
+      // Send response back to page
+      dispatchResponse({
+        requestId,
+        ...(typeof result === 'object' && result !== null ? result : {})
+      });
+    } catch (error: any) {
+      dispatchResponse({
+        requestId,
+        error: error.message
+      });
+    }
+  });
+
+  // Listen for WebAuthn get events from the page
+  window.addEventListener('aliasvault:webauthn:get', async (event: any) => {
+    const { requestId, publicKey, origin } = event.detail;
+
+    /**
+     * Helper to dispatch event with Firefox compatibility
+     * Firefox has strict cross-context security, so we serialize to JSON and back
+     */
+    const dispatchResponse = (detail: any): void => {
+      let eventDetail: any;
+
+      /*
+       * For Firefox, we need to ensure the detail is accessible in the page context
+       * cloneInto is a global function in Firefox content scripts
+       */
+      if (typeof cloneInto !== 'undefined') {
+        // Firefox: serialize and clone into page context
+        const serialized = JSON.parse(JSON.stringify(detail));
+        eventDetail = cloneInto(serialized, (window as any).wrappedJSObject || window);
+      } else {
+        // Chrome/Edge: direct assignment works
+        eventDetail = detail;
+      }
+
+      window.dispatchEvent(new CustomEvent('aliasvault:webauthn:get:response', {
+        detail: eventDetail
+      }));
+    };
+
+    try {
+      // Block requests if page isn't ready (prevents prefetch/autocomplete popups)
+      if (!isPageReadyForWebAuthn()) {
+        dispatchResponse({
+          requestId,
+          fallback: true
+        });
+        return;
+      }
+
+      // Check if we're in cooldown period after a recent cancellation
+      const now = Date.now();
+      if (lastCancelledTimestamp > 0 && (now - lastCancelledTimestamp) < CANCEL_COOLDOWN_MS) {
+        // Silently fall back to native implementation during cooldown
+        dispatchResponse({
+          requestId,
+          fallback: true
+        });
+        return;
+      }
+
+      // Check if passkey provider is enabled
+      const enabled = await isWebAuthnInterceptionEnabled();
+      if (!enabled) {
+        // If disabled, signal fallback to native browser implementation
+        dispatchResponse({
+          requestId,
+          fallback: true
+        });
+        return;
+      }
+
+      // Detect if this is an automatic request (within 2 seconds of page load)
+      const isAutomaticRequest = (Date.now() - pageLoadTime) < AUTO_REQUEST_THRESHOLD_MS;
+
+      // Send to background script to handle
+      const result = await sendMessage('WEBAUTHN_GET', {
+        publicKey,
+        origin,
+        isAutomaticRequest
+      }, 'background');
+
+      // Track if user cancelled to enable cooldown
+      if (result && typeof result === 'object' && (result as any).cancelled) {
+        lastCancelledTimestamp = Date.now();
+      }
+
+      // Send response back to page
+      dispatchResponse({
+        requestId,
+        ...(typeof result === 'object' && result !== null ? result : {})
+      });
+    } catch (error: any) {
+      dispatchResponse({
+        requestId,
+        error: error.message
+      });
+    }
+  });
+
+  // Inject the page script
+  const script = document.createElement('script');
+  script.src = browser.runtime.getURL('/webauthn.js');
+  script.async = true;
+  (document.head || document.documentElement).appendChild(script);
+  /**
+   * onload
+   */
+  script.onload = () : void => {
+    script.remove();
+  };
+  /**
+   * onerror
+   */
+  script.onerror = () : void => {
+    // Ignore
+  };
+
+  interceptorInitialized = true;
+}
+
+/**
+ * Check if WebAuthn interception is enabled for the current site
+ */
+export async function isWebAuthnInterceptionEnabled(): Promise<boolean> {
+  try {
+    const response = await sendMessage('GET_WEBAUTHN_SETTINGS', {
+      hostname: window.location.hostname
+    }, 'background') as unknown as WebAuthnSettingsResponse;
+    return response.enabled ?? false;
+  } catch {
+    return false;
+  }
+}

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

@@ -539,6 +539,62 @@ body {
   box-shadow: 0 0 0 1px #ef4444 !important;
 }
 
+/* Field Suggestions - Pill Style */
+.av-field-suggestions {
+  margin-top: 8px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.av-suggestion-pill {
+  display: inline-flex;
+  align-items: center;
+  background: #4b5563;
+  border: 1px solid #6b7280;
+  border-radius: 16px;
+  padding: 4px 8px 4px 12px;
+  font-size: 13px;
+  color: #e5e7eb;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+.av-suggestion-pill:hover {
+  background: #6b7280;
+  border-color: #9ca3af;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.av-suggestion-pill-text {
+  display: inline-block;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.av-suggestion-pill-delete {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 6px;
+  padding: 0 2px;
+  color: #9ca3af;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: color 0.2s;
+  border-left: 1px solid #6b7280;
+  padding-left: 6px;
+}
+
+.av-suggestion-pill-delete:hover {
+  color: #ef4444;
+}
+
 .av-create-popup-error-text {
   color: #ef4444;
   font-size: 0.875rem;
@@ -728,28 +784,41 @@ body {
 .av-create-popup-title-container {
   display: flex;
   align-items: center;
-  gap: 8px;
   flex: 1;
-  justify-content: center;
   cursor: pointer;
   padding: 4px 8px;
   border-radius: 4px;
   transition: background-color 0.2s;
+  position: relative;
 }
 
 .av-create-popup-title-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 8px;
   color: #d68338;
+  pointer-events: none;
 }
 
+.av-create-popup-header-buttons {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+
+
 .av-create-popup-title-wrapper .av-icon {
   width: 20px;
   height: 20px;
   stroke-width: 1.5;
   stroke-linecap: round;
   stroke-linejoin: round;
+  pointer-events: auto;
 }
 
 .av-create-popup-title-wrapper .av-create-popup-title {
@@ -757,6 +826,7 @@ body {
   font-size: 18px;
   font-weight: 600;
   color: #f8f9fa;
+  pointer-events: auto;
 }
 
 .av-create-popup-title-container:hover {
@@ -785,6 +855,34 @@ body {
   height: 16px;
 }
 
+.av-create-popup-popout {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: #9ca3af;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.av-create-popup-popout:hover {
+  background-color: #4b5563;
+  color: #d68338;
+}
+
+.av-create-popup-popout .av-icon {
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 .av-create-popup-mode-dropdown-menu {
   position: absolute;
   left: 50%;

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

@@ -1,39 +1,55 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { HashRouter as Router, Routes, Route } from 'react-router-dom';
+import { HashRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
 import { sendMessage } from 'webext-bridge/popup';
 
-import { ClipboardCountdownBar } from '@/entrypoints/popup/components/ClipboardCountdownBar';
-import BottomNav from '@/entrypoints/popup/components/Layout/BottomNav';
+import DefaultLayout from '@/entrypoints/popup/components/Layout/DefaultLayout';
 import Header from '@/entrypoints/popup/components/Layout/Header';
+import PasskeyLayout from '@/entrypoints/popup/components/Layout/PasskeyLayout';
 import LoadingSpinner from '@/entrypoints/popup/components/LoadingSpinner';
-import { useAuth } from '@/entrypoints/popup/context/AuthContext';
+import { useApp } from '@/entrypoints/popup/context/AppContext';
 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 AuthSettings from '@/entrypoints/popup/pages/auth/AuthSettings';
+import Login from '@/entrypoints/popup/pages/auth/Login';
+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 Login from '@/entrypoints/popup/pages/Login';
-import Logout from '@/entrypoints/popup/pages/Logout';
+import PasskeyAuthenticate from '@/entrypoints/popup/pages/passkeys/PasskeyAuthenticate';
+import PasskeyCreate from '@/entrypoints/popup/pages/passkeys/PasskeyCreate';
 import Reinitialize from '@/entrypoints/popup/pages/Reinitialize';
-import Settings from '@/entrypoints/popup/pages/Settings';
 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 Unlock from '@/entrypoints/popup/pages/Unlock';
-import UnlockSuccess from '@/entrypoints/popup/pages/UnlockSuccess';
-import Upgrade from '@/entrypoints/popup/pages/Upgrade';
+import PasskeySettings from '@/entrypoints/popup/pages/settings/PasskeySettings';
+import Settings from '@/entrypoints/popup/pages/settings/Settings';
+import VaultUnlockSettings from '@/entrypoints/popup/pages/settings/VaultUnlockSettings';
 
 import { useMinDurationLoading } from '@/hooks/useMinDurationLoading';
 
 import '@/entrypoints/popup/style.css';
+import { clearPendingRedirectUrl } from './hooks/useVaultLockRedirect';
+
+/**
+ * Available layout types for different page contexts.
+ */
+enum LayoutType {
+  /** Default layout with header, footer navigation, and full UI */
+  DEFAULT = 'default',
+  /** Minimal layout for passkey operations - logo only, no footer */
+  PASSKEY = 'passkey',
+  /** Auth layout for login/unlock pages - no footer menu */
+  AUTH = 'auth',
+}
 
 /**
  * Route configuration.
@@ -43,6 +59,107 @@ type RouteConfig = {
   element: React.ReactNode;
   showBackButton?: boolean;
   title?: string;
+  /** Layout type to use for this route. Defaults to LayoutType.DEFAULT if not specified. */
+  layout?: LayoutType;
+};
+
+/**
+ * AppContent - Wrapper component that switches between different layout types
+ */
+const AppContent: React.FC<{
+  routes: RouteConfig[];
+  isLoading: boolean;
+  message: string | null;
+  headerButtons: React.ReactNode;
+}> = ({ routes, isLoading, message, headerButtons }) => {
+  const location = useLocation();
+
+  // Find the current route configuration
+  const currentRoute = routes.find(route => {
+    const pattern = route.path.replace(/:\w+/g, '[^/]+');
+    const regex = new RegExp(`^${pattern}$`);
+    return regex.test(location.pathname);
+  });
+
+  // Get layout type, defaulting to DEFAULT if not specified
+  const layoutType = currentRoute?.layout ?? LayoutType.DEFAULT;
+
+  // Common loading overlay
+  const loadingOverlay = isLoading && (
+    <div className="fixed inset-0 bg-white dark:bg-gray-900 z-50 flex items-center justify-center">
+      <LoadingSpinner />
+    </div>
+  );
+
+  // Common routes component
+  const routesComponent = (
+    <Routes>
+      {routes.map((route) => (
+        <Route
+          key={route.path}
+          path={route.path}
+          element={route.element}
+        />
+      ))}
+    </Routes>
+  );
+
+  // Render based on layout type
+  switch (layoutType) {
+    case LayoutType.PASSKEY:
+      // Passkey layout - minimal UI with just logo header
+      return (
+        <PasskeyLayout>
+          {loadingOverlay}
+          {message && (
+            <p className="mb-4 text-red-500 dark:text-red-400 text-sm">{message}</p>
+          )}
+          {routesComponent}
+        </PasskeyLayout>
+      );
+
+    case LayoutType.AUTH:
+      // Auth layout - header only, no footer menu for login/unlock pages
+      return (
+        <div className="min-h-screen min-w-[350px] bg-white dark:bg-gray-900 flex flex-col max-h-[600px]">
+          {loadingOverlay}
+          <Header
+            routes={routes}
+            rightButtons={headerButtons}
+          />
+          <main
+            className="flex-1 overflow-y-auto bg-gray-100 dark:bg-gray-900"
+            style={{
+              paddingTop: '64px',
+              height: '100%',
+            }}
+          >
+            {message && (
+              <div className="px-4 pt-0">
+                <p className="text-red-500 dark:text-red-400 text-sm">{message}</p>
+              </div>
+            )}
+            {routesComponent}
+          </main>
+        </div>
+      );
+
+    case LayoutType.DEFAULT:
+    default:
+      // Default layout with full header, footer, navigation
+      return (
+        <>
+          {loadingOverlay}
+          <DefaultLayout
+            routes={routes}
+            headerButtons={headerButtons}
+            message={message}
+          >
+            {routesComponent}
+          </DefaultLayout>
+        </>
+      );
+  }
 };
 
 /**
@@ -50,7 +167,7 @@ type RouteConfig = {
  */
 const App: React.FC = () => {
   const { t } = useTranslation();
-  const authContext = useAuth();
+  const app = useApp();
   const { isInitialLoading } = useLoading();
   const [isLoading, setIsLoading] = useMinDurationLoading(true, 150);
   const [message, setMessage] = useState<string | null>(null);
@@ -60,8 +177,8 @@ const App: React.FC = () => {
   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: '/login', element: <Login />, showBackButton: false, layout: LayoutType.AUTH },
+    { path: '/unlock', element: <Unlock />, showBackButton: false, layout: LayoutType.AUTH },
     { path: '/unlock-success', element: <UnlockSuccess />, showBackButton: false },
     { path: '/upgrade', element: <Upgrade />, showBackButton: false },
     { path: '/auth-settings', element: <AuthSettings />, showBackButton: true, title: t('settings.title') },
@@ -69,15 +186,18 @@ const App: React.FC = () => {
     { 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: '/passkeys/create', element: <PasskeyCreate />, layout: LayoutType.PASSKEY },
+    { path: '/passkeys/authenticate', element: <PasskeyAuthenticate />, layout: LayoutType.PASSKEY },
     { path: '/emails', element: <EmailsList />, showBackButton: false },
     { path: '/emails/:id', element: <EmailDetails />, showBackButton: true, title: t('emails.title') },
     { path: '/settings', element: <Settings />, showBackButton: false },
+    { path: '/settings/unlock-method', element: <VaultUnlockSettings />, showBackButton: true, title: t('settings.unlockMethod.title') },
     { 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 },
+    { path: '/settings/passkeys', element: <PasskeySettings />, showBackButton: true, title: t('settings.passkeySettings') },
   ], [t]);
 
   useEffect(() => {
@@ -109,57 +229,36 @@ const App: React.FC = () => {
     };
   }, []);
 
+  /**
+   * On initial load, clear any stale pending redirect URL if popup was not opened with a specific hash path.
+   */
+  useEffect(() => {
+    const hasHashPath = window.location.hash && window.location.hash !== '#/' && window.location.hash !== '#';
+    if (!hasHashPath) {
+      clearPendingRedirectUrl();
+    }
+  }, []);
+
   /**
    * Print global message if it exists.
    */
   useEffect(() => {
-    if (authContext.globalMessage) {
-      setMessage(authContext.globalMessage);
+    if (app.globalMessage) {
+      setMessage(app.globalMessage);
     } else {
       setMessage(null);
     }
-  }, [authContext, authContext.globalMessage]);
+  }, [app, app.globalMessage]);
 
   return (
     <Router>
       <NavigationProvider>
-        <div className="min-h-screen min-w-[350px] bg-white dark:bg-gray-900 flex flex-col max-h-[600px]">
-          {isLoading && (
-            <div className="fixed inset-0 bg-white dark:bg-gray-900 z-50 flex items-center justify-center">
-              <LoadingSpinner />
-            </div>
-          )}
-
-          <ClipboardCountdownBar />
-          <Header
-            routes={routes}
-            rightButtons={headerButtons}
-          />
-
-          <main
-            className="flex-1 overflow-y-auto bg-gray-100 dark:bg-gray-900"
-            style={{
-              paddingTop: '64px',
-              height: 'calc(100% - 120px)',
-            }}
-          >
-            <div className="p-4 mb-16">
-              {message && (
-                <p className="text-red-500 mb-4">{message}</p>
-              )}
-              <Routes>
-                {routes.map((route) => (
-                  <Route
-                    key={route.path}
-                    path={route.path}
-                    element={route.element}
-                  />
-                ))}
-              </Routes>
-            </div>
-          </main>
-          <BottomNav />
-        </div>
+        <AppContent
+          routes={routes}
+          isLoading={isLoading}
+          message={message}
+          headerButtons={headerButtons}
+        />
       </NavigationProvider>
     </Router>
   );

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

@@ -0,0 +1,31 @@
+import React from 'react';
+
+type AlertVariant = 'info' | 'warning' | 'error' | 'success';
+
+interface IAlertProps {
+  variant: AlertVariant;
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Reusable alert component with consistent styling
+ */
+const Alert: React.FC<IAlertProps> = ({ variant, children, className = '' }) => {
+  const variantStyles = {
+    info: 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200',
+    warning: 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-200',
+    error: 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-800 dark:text-red-200',
+    success: 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-800 dark:text-green-200'
+  };
+
+  return (
+    <div className={`p-3 border rounded-lg ${variantStyles[variant]} ${className}`}>
+      <p className="text-sm">
+        {children}
+      </p>
+    </div>
+  );
+};
+
+export default Alert;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+
+export type AlertType = 'error' | 'success' | 'warning' | 'info';
+
+interface IAlertMessageProps {
+  type: AlertType;
+  message: string;
+  className?: string;
+}
+
+/**
+ * Alert message component for displaying error, success, warning, or info messages.
+ * @param props - The component props.
+ * @param props.type - The type of alert (error, success, warning, info).
+ * @param props.message - The message to display.
+ * @param props.className - Optional additional CSS classes.
+ * @returns The rendered alert message component.
+ */
+const AlertMessage: React.FC<IAlertMessageProps> = ({ type, message, className = '' }) => {
+  /**
+   * Get the appropriate CSS classes based on alert type.
+   * @returns CSS class string.
+   */
+  const getAlertClasses = (): string => {
+    const baseClasses = 'p-3 border rounded-md text-sm';
+
+    switch (type) {
+      case 'error':
+        return `${baseClasses} bg-red-100 dark:bg-red-900/30 border-red-300 dark:border-red-700 text-red-800 dark:text-red-300`;
+      case 'success':
+        return `${baseClasses} bg-green-100 dark:bg-green-900/30 border-green-300 dark:border-green-700 text-green-800 dark:text-green-300`;
+      case 'warning':
+        return `${baseClasses} bg-yellow-100 dark:bg-yellow-900/30 border-yellow-300 dark:border-yellow-700 text-yellow-800 dark:text-yellow-300`;
+      case 'info':
+        return `${baseClasses} bg-blue-100 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700 text-blue-800 dark:text-blue-300`;
+      default:
+        return baseClasses;
+    }
+  };
+
+  return (
+    <div className={`${getAlertClasses()} ${className}`}>
+      {message}
+    </div>
+  );
+};
+
+export default AlertMessage;

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

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 type ButtonProps = {
   onClick?: () => void;
+  id?: string;
   children: React.ReactNode;
   type?: 'button' | 'submit' | 'reset';
   variant?: 'primary' | 'secondary';
@@ -10,12 +11,13 @@ type ButtonProps = {
 /**
  * Button component
  */
-const Button: React.FC<ButtonProps> = ({
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
   onClick,
+  id,
   children,
   type = 'button',
   variant = 'primary'
-}) => {
+}, ref) => {
   const colorClasses = {
     primary: 'bg-primary-500 hover:bg-primary-600',
     secondary: 'bg-gray-500 hover:bg-gray-600'
@@ -23,13 +25,17 @@ const Button: React.FC<ButtonProps> = ({
 
   return (
     <button
+      ref={ref}
       className={`${colorClasses[variant]} text-white font-medium rounded-lg px-4 py-2 text-sm w-full`}
       onClick={onClick}
       type={type}
+      id={id}
     >
       {children}
     </button>
   );
-};
+});
+
+Button.displayName = 'Button';
 
 export default Button;

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

@@ -1,54 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { FormInputCopyToClipboard } from '@/entrypoints/popup/components/FormInputCopyToClipboard';
-
-import type { Credential } from '@/utils/dist/shared/models/vault';
-
-type LoginCredentialsBlockProps = {
-  credential: Credential;
-}
-
-/**
- * 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();
-
-  if (!email && !username && !password) {
-    return null;
-  }
-
-  return (
-    <div className="space-y-2">
-      <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{t('common.loginCredentials')}</h2>
-      {email && (
-        <FormInputCopyToClipboard
-          id="email"
-          label={t('common.email')}
-          value={email}
-        />
-      )}
-      {username && (
-        <FormInputCopyToClipboard
-          id="username"
-          label={t('common.username')}
-          value={username}
-        />
-      )}
-      {password && (
-        <FormInputCopyToClipboard
-          id="password"
-          label={t('common.password')}
-          value={password}
-          type="password"
-        />
-      )}
-    </div>
-  );
-};
-
-export default LoginCredentialsBlock;

apps/browser-extension/src/entrypoints/popup/components/Credentials/CredentialCard.tsx

@@ -69,8 +69,38 @@ const CredentialCard: React.FC<CredentialCardProps> = ({ credential }) => {
             target.src = '/assets/images/service-placeholder.webp';
           }}
         />
-        <div className="text-left">
-          <p className="font-medium text-gray-900 dark:text-white">{getCredentialServiceName(credential)}</p>
+        <div className="text-left flex-1">
+          <div className="flex items-center gap-1.5">
+            <p className="font-medium text-gray-900 dark:text-white">{getCredentialServiceName(credential)}</p>
+            {credential.HasPasskey && (
+              <svg
+                className="w-3.5 h-3.5 text-gray-500 dark:text-gray-400"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-label="Has passkey"
+              >
+                <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
+              </svg>
+            )}
+            {credential.HasAttachment && (
+              <svg
+                className="w-3.5 h-3.5 text-gray-500 dark:text-gray-400"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-label="Has attachments"
+              >
+                <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
+              </svg>
+            )}
+          </div>
           <p className="text-sm text-gray-600 dark:text-gray-400">{getDisplayText(credential)}</p>
         </div>
       </button>

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { FormInputCopyToClipboard } from '@/entrypoints/popup/components/FormInputCopyToClipboard';
+import { FormInputCopyToClipboard } from '@/entrypoints/popup/components/Forms/FormInputCopyToClipboard';
 
 import { IdentityHelperUtils } from '@/utils/dist/shared/identity-generator';
 import type { Credential } from '@/utils/dist/shared/models/vault';

apps/browser-extension/src/entrypoints/popup/components/Credentials/Details/EmailBlock.tsx

@@ -27,7 +27,7 @@ const EmailBlock: React.FC<EmailBlockProps> = ({ email }) => {
     const privateDomains = vaultMetadata?.privateEmailDomains ?? [];
 
     return [...publicDomains, ...privateDomains].some(supportedDomain =>
-      domain === supportedDomain || domain.endsWith(`.${supportedDomain}`)
+      domain === supportedDomain.toLowerCase()
     );
   };
 

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

@@ -31,7 +31,7 @@ const HeaderBlock: React.FC<HeaderBlockProps> = ({ credential }) => (
               {credential.ServiceUrl}
             </a>
           ) : (
-            <span className="break-all">{credential.ServiceUrl}</span>
+            <span className="text-gray-500 dark:text-gray-300 break-all">{credential.ServiceUrl}</span>
           )
         )}
       </div>

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FormInputCopyToClipboard } from '@/entrypoints/popup/components/Forms/FormInputCopyToClipboard';
+
+import type { Credential } from '@/utils/dist/shared/models/vault';
+
+type LoginCredentialsBlockProps = {
+  credential: Credential;
+}
+
+/**
+ * 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();
+
+  if (!email && !username && !password && !credential.HasPasskey) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2">
+      <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{t('common.loginCredentials')}</h2>
+      {email && (
+        <FormInputCopyToClipboard
+          id="email"
+          label={t('common.email')}
+          value={email}
+        />
+      )}
+      {username && (
+        <FormInputCopyToClipboard
+          id="username"
+          label={t('common.username')}
+          value={username}
+        />
+      )}
+      {credential.HasPasskey && (
+        <div className="p-3 rounded bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700">
+          <div className="flex items-start gap-2">
+            <svg
+              className="w-5 h-5 text-gray-600 dark:text-gray-400 mt-0.5 flex-shrink-0"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
+            </svg>
+            <div className="flex-1">
+              <div className="mb-1">
+                <span className="text-sm font-medium text-gray-900 dark:text-white">{t('passkeys.passkey')}</span>
+              </div>
+              <div className="space-y-1 mb-2">
+                {credential.PasskeyRpId && (
+                  <div>
+                    <span className="text-xs text-gray-500 dark:text-gray-400">{t('passkeys.site')}: </span>
+                    <span className="text-sm text-gray-900 dark:text-white">{credential.PasskeyRpId}</span>
+                  </div>
+                )}
+                {credential.PasskeyDisplayName && (
+                  <div>
+                    <span className="text-xs text-gray-500 dark:text-gray-400">{t('passkeys.displayName')}: </span>
+                    <span className="text-sm text-gray-900 dark:text-white">{credential.PasskeyDisplayName}</span>
+                  </div>
+                )}
+              </div>
+              <p className="text-xs text-gray-600 dark:text-gray-400">
+                {t('passkeys.helpText')}
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+      {password && (
+        <FormInputCopyToClipboard
+          id="password"
+          label={t('common.password')}
+          value={password}
+          type="password"
+        />
+      )}
+    </div>
+  );
+};
+
+export default LoginCredentialsBlock;

apps/browser-extension/src/entrypoints/popup/components/Credentials/Details/TotpEditor.tsx

@@ -0,0 +1,317 @@
+import  * as OTPAuth from 'otpauth';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { TotpCode } from '@/utils/dist/shared/models/vault';
+
+type TotpFormData = {
+  name: string;
+  secretKey: string;
+}
+
+type TotpEditorState = {
+  isAddFormVisible: boolean;
+  formData: TotpFormData;
+}
+
+type TotpEditorProps = {
+  totpCodes: TotpCode[];
+  onTotpCodesChange: (totpCodes: TotpCode[]) => void;
+  originalTotpCodeIds: string[];
+  isAddFormVisible: boolean;
+  formData: TotpFormData;
+  onStateChange: (state: TotpEditorState) => void;
+}
+
+/**
+ * Component for editing TOTP codes for a credential.
+ */
+const TotpEditor: React.FC<TotpEditorProps> = ({
+  totpCodes,
+  onTotpCodesChange,
+  originalTotpCodeIds,
+  isAddFormVisible,
+  formData,
+  onStateChange
+}) => {
+  const { t } = useTranslation();
+  const [formError, setFormError] = useState<string | null>(null);
+
+  /**
+   * Sanitizes the secret key by extracting it from a TOTP URI if needed
+   */
+  const sanitizeSecretKey = (secretKeyInput: string, nameInput: string): { secretKey: string, name: string } => {
+    let secretKey = secretKeyInput.trim();
+    let name = nameInput.trim();
+
+    // Check if it's a TOTP URI
+    if (secretKey.toLowerCase().startsWith('otpauth://totp/')) {
+      try {
+        const uri = OTPAuth.URI.parse(secretKey);
+        if (uri instanceof OTPAuth.TOTP) {
+          secretKey = uri.secret.base32;
+          // If name is empty, use the label from the URI
+          if (!name && uri.label) {
+            name = uri.label;
+          }
+        }
+      } catch {
+        throw new Error(t('totp.errors.invalidSecretKey'));
+      }
+    }
+
+    // Remove spaces from the secret key
+    secretKey = secretKey.replace(/\s/g, '');
+
+    // Validate the secret key format (base32)
+    if (!/^[A-Z2-7]+=*$/i.test(secretKey)) {
+      throw new Error(t('totp.errors.invalidSecretKey'));
+    }
+
+    return { secretKey, name: name || 'Authenticator' };
+  };
+
+  /**
+   * Shows the add form
+   */
+  const showAddForm = (): void => {
+    onStateChange({
+      isAddFormVisible: true,
+      formData: { name: '', secretKey: '' }
+    });
+    setFormError(null);
+  };
+
+  /**
+   * Hides the add form
+   */
+  const hideAddForm = (): void => {
+    onStateChange({
+      isAddFormVisible: false,
+      formData: { name: '', secretKey: '' }
+    });
+    setFormError(null);
+  };
+
+  /**
+   * Updates form data
+   */
+  const updateFormData = (updates: Partial<TotpFormData>): void => {
+    onStateChange({
+      isAddFormVisible,
+      formData: { ...formData, ...updates }
+    });
+  };
+
+  /**
+   * Handles adding a new TOTP code
+   */
+  const handleAddTotpCode = (e?: React.MouseEvent | React.KeyboardEvent): void => {
+    e?.preventDefault();
+    setFormError(null);
+
+    // Validate required fields
+    if (!formData.secretKey) {
+      setFormError(t('credentials.validation.required'));
+      return;
+    }
+
+    try {
+      // Sanitize the secret key
+      const { secretKey, name } = sanitizeSecretKey(formData.secretKey, formData.name);
+
+      // Create new TOTP code
+      const newTotpCode: TotpCode = {
+        Id: crypto.randomUUID().toUpperCase(),
+        Name: name,
+        SecretKey: secretKey,
+        CredentialId: '' // Will be set when saving the credential
+      };
+
+      // Add to the list
+      const updatedTotpCodes = [...totpCodes, newTotpCode];
+      onTotpCodesChange(updatedTotpCodes);
+
+      // Hide the form
+      hideAddForm();
+    } catch (error) {
+      if (error instanceof Error) {
+        setFormError(error.message);
+      } else {
+        setFormError(t('common.errors.unknownErrorTryAgain'));
+      }
+    }
+  };
+
+  /**
+   * Initiates the delete process for a TOTP code
+   */
+  const deleteTotpCode = (totpToDelete: TotpCode): void => {
+    // Check if this TOTP code was part of the original set
+    const wasOriginal = originalTotpCodeIds.includes(totpToDelete.Id);
+
+    let updatedTotpCodes: TotpCode[];
+    if (wasOriginal) {
+      // Mark as deleted (soft delete for syncing)
+      updatedTotpCodes = totpCodes.map(tc =>
+        tc.Id === totpToDelete.Id
+          ? { ...tc, IsDeleted: true }
+          : tc
+      );
+    } else {
+      // Hard delete (remove from array)
+      updatedTotpCodes = totpCodes.filter(tc => tc.Id !== totpToDelete.Id);
+    }
+
+    onTotpCodesChange(updatedTotpCodes);
+  };
+
+  // Filter out deleted TOTP codes for display
+  const activeTotpCodes = totpCodes.filter(tc => !tc.IsDeleted);
+  const hasActiveTotpCodes = activeTotpCodes.length > 0;
+
+  return (
+    <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+          {t('common.twoFactorAuthentication')}
+        </h2>
+        {hasActiveTotpCodes && !isAddFormVisible && (
+          <button
+            type="button"
+            onClick={showAddForm}
+            className="w-8 h-8 flex items-center justify-center text-primary-700 hover:text-white border border-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-600 dark:focus:ring-primary-800"
+            title={t('totp.addCode')}
+          >
+            <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="12" y1="5" x2="12" y2="19"></line>
+              <line x1="5" y1="12" x2="19" y2="12"></line>
+            </svg>
+          </button>
+        )}
+      </div>
+
+      {!hasActiveTotpCodes && !isAddFormVisible && (
+        <button
+          type="button"
+          onClick={showAddForm}
+          className="w-full py-1.5 px-4 flex items-center justify-center gap-2 text-primary-700 hover:text-white border border-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-600 dark:focus:ring-primary-800"
+        >
+          <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <line x1="12" y1="5" x2="12" y2="19"></line>
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+          </svg>
+          <span>{t('totp.addCode')}</span>
+        </button>
+      )}
+
+      {isAddFormVisible && (
+        <div className="p-4 mb-4 bg-gray-50 border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600">
+          <div className="flex justify-between items-center mb-4">
+            <h4 className="text-lg font-medium text-gray-900 dark:text-white">
+              {t('totp.addCode')}
+            </h4>
+            <button
+              type="button"
+              onClick={hideAddForm}
+              className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+            >
+              <svg className="w-3 h-3" fill="none" viewBox="0 0 14 14">
+                <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+              </svg>
+            </button>
+          </div>
+
+          <p className="mb-4 text-sm text-gray-500 dark:text-gray-400">
+            {t('totp.instructions')}
+          </p>
+
+          {formError && (
+            <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-900/20 dark:border-red-800">
+              <p className="text-sm text-red-800 dark:text-red-200">{formError}</p>
+            </div>
+          )}
+
+          <div className="mb-4">
+            <label htmlFor="totp-name" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+              {t('totp.nameOptional')}
+            </label>
+            <input
+              id="totp-name"
+              type="text"
+              value={formData.name}
+              onChange={(e) => updateFormData({ name: e.target.value })}
+              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
+            />
+          </div>
+
+          <div className="mb-4">
+            <label htmlFor="totp-secret" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+              {t('totp.secretKey')}
+            </label>
+            <input
+              id="totp-secret"
+              type="text"
+              value={formData.secretKey}
+              onChange={(e) => updateFormData({ secretKey: e.target.value })}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  handleAddTotpCode(e);
+                }
+              }}
+              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
+            />
+          </div>
+
+          <div className="flex justify-end">
+            <button
+              type="button"
+              onClick={(e) => handleAddTotpCode(e)}
+              className="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+            >
+              {t('common.save')}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {hasActiveTotpCodes && (
+        <div className="grid grid-cols-1 gap-4 mt-4">
+          {activeTotpCodes.map(totpCode => (
+            <div
+              key={totpCode.Id}
+              className="p-2 ps-3 pe-3 bg-gray-50 border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600"
+            >
+              <div className="flex justify-between items-center gap-2">
+                <div className="flex items-center flex-1">
+                  <h4 className="text-sm font-medium text-gray-900 dark:text-white">
+                    {totpCode.Name}
+                  </h4>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="flex flex-col items-end">
+                    <div className="text-sm text-gray-500 dark:text-gray-400">
+                      {t('totp.saveToViewCode')}
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => deleteTotpCode(totpCode)}
+                    className="text-red-600 hover:text-red-800 dark:text-red-500 dark:hover:text-red-400"
+                  >
+                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd"></path>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TotpEditor;

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

@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 type HelpModalProps = {
-  titleKey: string;
-  contentKey: string;
+  title: string;
+  content: string;
   className?: string;
 }
 
@@ -11,7 +11,7 @@ type HelpModalProps = {
  * 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 HelpModal: React.FC<HelpModalProps> = ({ title, content, className = '' }) => {
   const { t } = useTranslation();
   const [showModal, setShowModal] = useState(false);
 
@@ -39,11 +39,11 @@ const HelpModal: React.FC<HelpModalProps> = ({ titleKey, contentKey, className =
       </button>
 
       {showModal && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+        <div className="fixed inset-0 bg-black bg-opacity-70 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)}
+                {title}
               </h3>
               <button
                 onClick={() => setShowModal(false)}
@@ -66,7 +66,7 @@ const HelpModal: React.FC<HelpModalProps> = ({ titleKey, contentKey, className =
               </button>
             </div>
             <p className="text-sm text-gray-600 dark:text-gray-300">
-              {t(contentKey)}
+              {content}
             </p>
             <button
               onClick={() => setShowModal(false)}

apps/browser-extension/src/entrypoints/popup/components/Dialogs/MobileUnlockModal.tsx

@@ -0,0 +1,244 @@
+import QRCode from 'qrcode';
+import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { MobileLoginErrorCode } from '@/entrypoints/popup/types/MobileLoginErrorCode';
+import { MobileLoginUtility } from '@/entrypoints/popup/utils/MobileLoginUtility';
+
+import type { MobileLoginResult } from '@/utils/types/messaging/MobileLoginResult';
+import type { WebApiService } from '@/utils/WebApiService';
+
+interface IMobileUnlockModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: (result: MobileLoginResult) => Promise<void>;
+  webApi: WebApiService;
+  mode?: 'login' | 'unlock';
+}
+
+/**
+ * Modal component for mobile login/unlock via QR code scanning.
+ */
+const MobileUnlockModal: React.FC<IMobileUnlockModalProps> = ({
+  isOpen,
+  onClose,
+  onSuccess,
+  webApi,
+  mode = 'login'
+}) => {
+  const { t } = useTranslation();
+  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);
+  const [error, setError] = useState<MobileLoginErrorCode | null>(null);
+  const [timeRemaining, setTimeRemaining] = useState<number>(120); // 2 minutes in seconds
+  const mobileLoginRef = useRef<MobileLoginUtility | null>(null);
+  const countdownIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  /**
+   * Get translated error message for error code.
+   */
+  const getErrorMessage = (errorCode: MobileLoginErrorCode): string => {
+    switch (errorCode) {
+      case MobileLoginErrorCode.TIMEOUT:
+        return t('auth.errors.mobileLoginRequestExpired');
+      case MobileLoginErrorCode.GENERIC:
+      default:
+        return t('common.errors.unknownError');
+    }
+  };
+
+  // Countdown timer effect
+  useEffect(() => {
+    if (qrCodeUrl && timeRemaining > 0 && isOpen) {
+      countdownIntervalRef.current = setInterval(() => {
+        setTimeRemaining(prev => {
+          if (prev <= 1) {
+            if (countdownIntervalRef.current) {
+              clearInterval(countdownIntervalRef.current);
+            }
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+
+      return (): void => {
+        if (countdownIntervalRef.current) {
+          clearInterval(countdownIntervalRef.current);
+        }
+      };
+    }
+  }, [qrCodeUrl, timeRemaining, isOpen]);
+
+  // Initialize mobile login when modal opens
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    /**
+     * Initialize mobile login on modal open.
+     */
+    const initiateMobileLogin = async (): Promise<void> => {
+      try {
+        setError(null);
+        setQrCodeUrl(null);
+        setTimeRemaining(120);
+
+        // Initialize mobile login utility
+        if (!mobileLoginRef.current) {
+          mobileLoginRef.current = new MobileLoginUtility(webApi);
+        }
+
+        // Initiate mobile login and get QR code data
+        const requestId = await mobileLoginRef.current.initiate();
+
+        // Generate QR code with AliasVault prefix for mobile login
+        const qrData = `aliasvault://open/mobile-unlock/${requestId}`;
+        const qrDataUrl = await QRCode.toDataURL(qrData, {
+          width: 256,
+          margin: 2,
+        });
+
+        setQrCodeUrl(qrDataUrl);
+
+        // Start polling for response
+        await mobileLoginRef.current.startPolling(
+          async (result: MobileLoginResult) => {
+            try {
+              // Call success callback (parent handles loading state)
+              await onSuccess(result);
+              // Close modal after successful processing
+              handleClose();
+            } catch {
+              // Show error if success handler fails and hide QR code
+              setQrCodeUrl(null);
+              setError(MobileLoginErrorCode.GENERIC);
+            }
+          },
+          (errorCode) => {
+            // Hide QR code when error occurs
+            setQrCodeUrl(null);
+            setError(errorCode);
+          }
+        );
+      } catch (err) {
+        // err is a MobileLoginErrorCode thrown by initiate()
+        if (typeof err === 'string' && Object.values(MobileLoginErrorCode).includes(err as MobileLoginErrorCode)) {
+          setError(err as MobileLoginErrorCode);
+        } else {
+          setError(MobileLoginErrorCode.GENERIC);
+        }
+      }
+    };
+
+    initiateMobileLogin();
+
+    // Cleanup on unmount or when modal closes
+    return (): void => {
+      if (mobileLoginRef.current) {
+        mobileLoginRef.current.cleanup();
+      }
+      if (countdownIntervalRef.current) {
+        clearInterval(countdownIntervalRef.current);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  /**
+   * Handle modal close.
+   */
+  const handleClose = (): void => {
+    if (mobileLoginRef.current) {
+      mobileLoginRef.current.cleanup();
+    }
+    if (countdownIntervalRef.current) {
+      clearInterval(countdownIntervalRef.current);
+    }
+    setQrCodeUrl(null);
+    setError(null);
+    setTimeRemaining(120);
+    onClose();
+  };
+
+  /**
+   * Format time remaining as MM:SS.
+   */
+  const formatTime = (seconds: number): string => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const title = mode === 'unlock' ? t('auth.unlockWithMobile') : t('auth.loginWithMobile');
+  const description = t('auth.scanQrCode');
+
+  return (
+    <div className="fixed inset-0 z-50 overflow-y-auto">
+      {/* Backdrop */}
+      <div className="fixed inset-0 bg-black bg-opacity-80 transition-opacity" onClick={handleClose} />
+
+      {/* 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-6 pb-6 pt-5 text-left shadow-xl transition-all w-full max-w-md">
+          {/* Close button */}
+          <button
+            type="button"
+            className="absolute right-4 top-4 text-gray-400 hover:text-gray-500 focus:outline-none"
+            onClick={handleClose}
+          >
+            <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>
+          </button>
+
+          {/* Content */}
+          <div className="mt-3">
+            <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
+              {title}
+            </h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+              {description}
+            </p>
+
+            {error && (
+              <div className="mb-4 p-3 bg-red-100 dark:bg-red-900/30 border border-red-400 dark:border-red-700 rounded text-red-700 dark:text-red-400 text-sm">
+                {getErrorMessage(error)}
+              </div>
+            )}
+
+            {qrCodeUrl && (
+              <div className="flex flex-col items-center mb-4">
+                <img src={qrCodeUrl} alt="QR Code" className="border-4 border-gray-200 dark:border-gray-600 rounded mb-3" />
+                <div className="text-gray-700 dark:text-gray-300 text-sm font-medium">
+                  {formatTime(timeRemaining)}
+                </div>
+              </div>
+            )}
+
+            {!qrCodeUrl && !error && (
+              <div className="flex justify-center py-8">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
+              </div>
+            )}
+
+            <button
+              type="button"
+              onClick={handleClose}
+              className="mt-4 w-full inline-flex 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"
+            >
+              {t('common.cancel')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MobileUnlockModal;

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

@@ -37,7 +37,7 @@ const Modal: React.FC<IModalProps> = ({
   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={onClose} />
+      <div className="fixed inset-0 bg-black bg-opacity-80 transition-opacity" onClick={onClose} />
 
       {/* Modal */}
       <div className="fixed inset-0 flex items-center justify-center p-4">

apps/browser-extension/src/entrypoints/popup/components/Dialogs/PasskeyBypassDialog.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Button from '../Button';
+
+type PasskeyBypassDialogProps = {
+  origin: string;
+  onChoice: (choice: 'once' | 'always') => void;
+  onCancel: () => void;
+};
+
+/**
+ * Dialog for choosing how to bypass AliasVault passkey provider
+ */
+const PasskeyBypassDialog: React.FC<PasskeyBypassDialogProps> = ({
+  origin,
+  onChoice,
+  onCancel
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+          {t('passkeys.bypass.title')}
+        </h2>
+
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">
+          {t('passkeys.bypass.description', { origin })}
+        </p>
+
+        <div className="space-y-3">
+          <Button
+            variant="primary"
+            onClick={() => onChoice('once')}
+          >
+            {t('passkeys.bypass.thisTimeOnly')}
+          </Button>
+
+          <Button
+            variant="secondary"
+            onClick={() => onChoice('always')}
+          >
+            {t('passkeys.bypass.alwaysForSite')}
+          </Button>
+
+          <Button
+            variant="secondary"
+            onClick={onCancel}
+          >
+            {t('common.cancel')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PasskeyBypassDialog;

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

@@ -57,7 +57,7 @@ export const EmailPreview: React.FC<EmailPreviewProps> = ({ email }) => {
   const isPublicDomain = async (emailAddress: string): Promise<boolean> => {
     // Get metadata from storage
     const publicEmailDomains = await storage.getItem('session:publicEmailDomains') as string[] ?? [];
-    return publicEmailDomains.some(domain => emailAddress.toLowerCase().endsWith(domain));
+    return publicEmailDomains.some(domain => emailAddress.toLowerCase().endsWith(`@${domain.toLowerCase()}`));
   };
 
   /**
@@ -66,7 +66,7 @@ export const EmailPreview: React.FC<EmailPreviewProps> = ({ email }) => {
   const isPrivateDomain = async (emailAddress: string): Promise<boolean> => {
     // Get metadata from storage
     const privateEmailDomains = await storage.getItem('session:privateEmailDomains') as string[] ?? [];
-    return privateEmailDomains.some(domain => emailAddress.toLowerCase().endsWith(domain));
+    return privateEmailDomains.some(domain => emailAddress.toLowerCase().endsWith(`@${domain.toLowerCase()}`));
   };
 
   useEffect(() => {
@@ -213,7 +213,7 @@ export const EmailPreview: React.FC<EmailPreviewProps> = ({ email }) => {
   }
   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">{t('common.recentEmails')}</h2>
           <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />

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

@@ -45,18 +45,18 @@ const EmailDomainField: React.FC<EmailDomainFieldProps> = ({
   const [selectedDomain, setSelectedDomain] = useState('');
   const [isPopupVisible, setIsPopupVisible] = useState(false);
   const [privateEmailDomains, setPrivateEmailDomains] = useState<string[]>([]);
+  const [hiddenPrivateEmailDomains, setHiddenPrivateEmailDomains] = useState<string[]>([]);
   const popupRef = useRef<HTMLDivElement>(null);
 
   // Get private email domains from vault metadata
   useEffect(() => {
     /**
-     * Load private email domains from vault metadata.
+     * Load private email domains from vault metadata, excluding hidden ones.
      */
     const loadDomains = async (): Promise<void> => {
       const metadata = await dbContext.getVaultMetadata();
-      if (metadata?.privateEmailDomains) {
-        setPrivateEmailDomains(metadata.privateEmailDomains);
-      }
+      setPrivateEmailDomains(metadata?.privateEmailDomains ?? []);
+      setHiddenPrivateEmailDomains(metadata?.hiddenPrivateEmailDomains ?? []);
     };
     loadDomains();
   }, [dbContext]);
@@ -84,13 +84,14 @@ const EmailDomainField: React.FC<EmailDomainFieldProps> = ({
       setLocalPart(local);
       setSelectedDomain(domain);
 
-      // Check if it's a custom domain
+      // Check if it's a custom domain (including hidden private domains as known domains)
       const isKnownDomain = PUBLIC_EMAIL_DOMAINS.includes(domain) ||
-                           privateEmailDomains.includes(domain);
+                           privateEmailDomains.includes(domain) ||
+                           hiddenPrivateEmailDomains.includes(domain);
       setIsCustomDomain(!isKnownDomain);
     } else {
       setLocalPart(value);
-      setIsCustomDomain(false);
+      // Don't reset isCustomDomain here - preserve the current mode
 
       // Set default domain if not already set
       if (!selectedDomain && !value.includes('@')) {
@@ -101,12 +102,20 @@ const EmailDomainField: React.FC<EmailDomainFieldProps> = ({
         }
       }
     }
-  }, [value, privateEmailDomains, showPrivateDomains, selectedDomain]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, privateEmailDomains, hiddenPrivateEmailDomains, showPrivateDomains]);
 
   // Handle local part changes
   const handleLocalPartChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const newLocalPart = e.target.value;
 
+    // If in custom domain mode, always pass through the full value
+    if (isCustomDomain) {
+      onChange(newLocalPart);
+      // Stay in custom domain mode - don't auto-switch back
+      return;
+    }
+
     // Check if new value contains '@' symbol, if so, switch to custom domain mode
     if (newLocalPart.includes('@')) {
       setIsCustomDomain(true);
@@ -115,10 +124,11 @@ const EmailDomainField: React.FC<EmailDomainFieldProps> = ({
     }
 
     setLocalPart(newLocalPart);
-    if (!isCustomDomain && selectedDomain) {
+    // If the local part is empty, treat the whole field as empty
+    if (!newLocalPart || newLocalPart.trim() === '') {
+      onChange('');
+    } else if (selectedDomain) {
       onChange(`${newLocalPart}@${selectedDomain}`);
-    } else {
-      onChange(newLocalPart);
     }
   }, [isCustomDomain, selectedDomain, onChange]);
 
@@ -126,7 +136,12 @@ const EmailDomainField: React.FC<EmailDomainFieldProps> = ({
   const selectDomain = useCallback((domain: string) => {
     setSelectedDomain(domain);
     const cleanLocalPart = localPart.includes('@') ? localPart.split('@')[0] : localPart;
-    onChange(`${cleanLocalPart}@${domain}`);
+    // If the local part is empty, treat the whole field as empty
+    if (!cleanLocalPart || cleanLocalPart.trim() === '') {
+      onChange('');
+    } else {
+      onChange(`${cleanLocalPart}@${domain}`);
+    }
     setIsCustomDomain(false);
     setIsPopupVisible(false);
   }, [localPart, onChange]);
@@ -136,13 +151,30 @@ const EmailDomainField: React.FC<EmailDomainFieldProps> = ({
     const newIsCustom = !isCustomDomain;
     setIsCustomDomain(newIsCustom);
 
-    if (!newIsCustom && !value.includes('@')) {
-      // Switching to domain chooser mode, add default domain
+    if (newIsCustom) {
+      /*
+       * Switching to custom domain mode
+       * If we have a domain-based value, extract just the local part
+       */
+      if (value && value.includes('@')) {
+        const [local] = value.split('@');
+        onChange(local);
+        setLocalPart(local);
+      }
+    } else {
+      // Switching to domain chooser mode
       const defaultDomain = showPrivateDomains && privateEmailDomains[0]
         ? privateEmailDomains[0]
         : PUBLIC_EMAIL_DOMAINS[0];
-      onChange(`${localPart}@${defaultDomain}`);
       setSelectedDomain(defaultDomain);
+
+      // Only add domain if we have a local part
+      if (localPart && localPart.trim()) {
+        onChange(`${localPart}@${defaultDomain}`);
+      } else if (value && !value.includes('@')) {
+        // If we have a value without @, add the domain
+        onChange(`${value}@${defaultDomain}`);
+      }
     }
   }, [isCustomDomain, value, localPart, showPrivateDomains, privateEmailDomains, onChange]);
 
@@ -167,7 +199,7 @@ const EmailDomainField: React.FC<EmailDomainFieldProps> = ({
 
   return (
     <div className="space-y-2">
-      <label htmlFor={id} className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+      <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>
@@ -177,7 +209,7 @@ const EmailDomainField: React.FC<EmailDomainFieldProps> = ({
           <input
             type="text"
             id={id}
-            className={`flex-1 min-w-0 px-3 py-2 border ${
+            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'
@@ -209,26 +241,28 @@ const EmailDomainField: React.FC<EmailDomainFieldProps> = ({
               {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-xs text-gray-500 dark:text-gray-400">({t('credentials.privateEmailAliasVaultServer')})</span>
+                    {t('credentials.privateEmailTitle')} <span className="text-gray-500 dark:text-gray-400">({t('credentials.privateEmailAliasVaultServer')})</span>
                   </h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
+                  <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>
-                    ))}
+                    {privateEmailDomains
+                      .filter((domain) => !hiddenPrivateEmailDomains.includes(domain))
+                      .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>
               )}

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

@@ -109,7 +109,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(({
     }
   };
 
-  const inputClasses = `mt-1 block w-full rounded-md ${
+  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`;
 

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

@@ -82,7 +82,7 @@ export const FormInputCopyToClipboard: React.FC<FormInputCopyToClipboardProps> =
     try {
       await navigator.clipboard.writeText(value);
       clipboardService.setCopied(id);
-      
+
       // Notify background script that clipboard was copied
       await sendMessage('CLIPBOARD_COPIED', { value }, 'background');
 
@@ -111,7 +111,7 @@ 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 ? (

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

@@ -1,11 +1,12 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import PasswordConfigDialog from '@/entrypoints/popup/components/Dialogs/PasswordConfigDialog';
+import { useDb } from '@/entrypoints/popup/context/DbContext';
+
 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;
@@ -15,7 +16,6 @@ interface IPasswordFieldProps {
   error?: string;
   showPassword?: boolean;
   onShowPasswordChange?: (show: boolean) => void;
-  initialSettings: PasswordSettings;
 }
 
 /**
@@ -29,13 +29,14 @@ const PasswordField: React.FC<IPasswordFieldProps> = ({
   placeholder,
   error,
   showPassword: controlledShowPassword,
-  onShowPasswordChange,
-  initialSettings
+  onShowPasswordChange
 }) => {
   const { t } = useTranslation();
+  const dbContext = useDb();
   const [internalShowPassword, setInternalShowPassword] = useState(false);
   const [showConfigDialog, setShowConfigDialog] = useState(false);
-  const [currentSettings, setCurrentSettings] = useState<PasswordSettings>(initialSettings);
+  const [currentSettings, setCurrentSettings] = useState<PasswordSettings | null>(null);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   // Use controlled or uncontrolled showPassword state
   const showPassword = controlledShowPassword !== undefined ? controlledShowPassword : internalShowPassword;
@@ -51,11 +52,24 @@ const PasswordField: React.FC<IPasswordFieldProps> = ({
     }
   }, [controlledShowPassword, onShowPasswordChange]);
 
-  // Initialize settings only once when component mounts
+  // Load password settings from database
   useEffect(() => {
-    setCurrentSettings({ ...initialSettings });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // Only run on mount to avoid resetting user changes
+    /**
+     * Load password settings from the database.
+     */
+    const loadSettings = async (): Promise<void> => {
+      try {
+        if (dbContext.sqliteClient) {
+          const settings = dbContext.sqliteClient.getPasswordSettings();
+          setCurrentSettings(settings);
+          setIsLoaded(true);
+        }
+      } catch (error) {
+        console.error('Error loading password settings:', error);
+      }
+    };
+    void loadSettings();
+  }, [dbContext.sqliteClient]);
 
   const generatePassword = useCallback((settings: PasswordSettings) => {
     try {
@@ -69,6 +83,9 @@ const PasswordField: React.FC<IPasswordFieldProps> = ({
   }, [onChange, setShowPassword]);
 
   const handleLengthChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!currentSettings) {
+      return;
+    }
     const length = parseInt(e.target.value, 10);
     const newSettings = { ...currentSettings, Length: length };
     setCurrentSettings(newSettings);
@@ -78,6 +95,9 @@ const PasswordField: React.FC<IPasswordFieldProps> = ({
   }, [currentSettings, generatePassword]);
 
   const handleRegeneratePassword = useCallback(() => {
+    if (!currentSettings) {
+      return;
+    }
     generatePassword(currentSettings);
   }, [generatePassword, currentSettings]);
 
@@ -98,6 +118,18 @@ const PasswordField: React.FC<IPasswordFieldProps> = ({
     setShowConfigDialog(true);
   }, []);
 
+  // Don't render until settings are loaded
+  if (!currentSettings || !isLoaded) {
+    return (
+      <div className="space-y-2">
+        <label htmlFor={id} className="block text-sm font-medium text-gray-900 dark:text-white">
+          {label}
+        </label>
+        <div className="animate-pulse bg-gray-200 dark:bg-gray-700 h-10 rounded-lg"></div>
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-2">
       {/* Label */}
@@ -114,7 +146,7 @@ const PasswordField: React.FC<IPasswordFieldProps> = ({
             value={value}
             onChange={(e) => onChange(e.target.value)}
             placeholder={placeholder}
-            className="outline-0 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"
+            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">

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

@@ -49,7 +49,7 @@ const UsernameField: React.FC<IUsernameFieldProps> = ({
             value={value}
             onChange={handleInputChange}
             placeholder={placeholder}
-            className="outline-0 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"
+            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">

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

@@ -9,7 +9,9 @@ export enum HeaderIconType {
   EXTERNAL_LINK = 'external_link',
   SAVE = 'save',
   PLUS = 'plus',
-  TAB = 'tab'
+  TAB = 'tab',
+  EYE = 'eye',
+  EYE_OFF = 'eye_off'
 }
 
 type HeaderIconProps = {
@@ -131,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>
     ),
@@ -179,6 +169,44 @@ export const HeaderIcon: React.FC<HeaderIconProps> = ({ type, className = 'w-5 h
           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/Layout/BottomNav.tsx

@@ -34,7 +34,7 @@ const BottomNav: React.FC = () => {
   };
 
   // Auth pages that don't show bottom navigation but still show header
-  const authPages = ['/login', '/auth-settings', '/unlock', '/unlock-success', '/upgrade'];
+  const authPages = ['/', '/login', '/auth-settings', '/unlock', '/unlock-success', '/upgrade'];
   const isAuthPage = authPages.includes(location.pathname);
 
   if (isAuthPage) {
@@ -62,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">{t('menu.credentials')}</span>
+          <span className="text-sm mt-1">{t('menu.credentials')}</span>
         </button>
         <button
           onClick={() => handleTabChange('emails')}
@@ -73,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">{t('menu.emails')}</span>
+          <span className="text-sm mt-1">{t('menu.emails')}</span>
         </button>
         <button
           onClick={() => handleTabChange('settings')}
@@ -85,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">{t('menu.settings')}</span>
+          <span className="text-sm mt-1">{t('menu.settings')}</span>
         </button>
       </div>
     </div>

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
+
+import { ClipboardCountdownBar } from '@/entrypoints/popup/components/ClipboardCountdownBar';
+import BottomNav from '@/entrypoints/popup/components/Layout/BottomNav';
+import Header from '@/entrypoints/popup/components/Layout/Header';
+
+/**
+ * Route configuration type.
+ */
+type RouteConfig = {
+  path: string;
+  element: React.ReactNode;
+  showBackButton?: boolean;
+  title?: string;
+};
+
+/**
+ * DefaultLayout props.
+ */
+type DefaultLayoutProps = {
+  routes: RouteConfig[];
+  headerButtons: React.ReactNode;
+  message?: string | null;
+  children?: React.ReactNode;
+};
+
+/**
+ * DefaultLayout - Standard layout with full header, footer navigation, and complete UI.
+ * This is the main layout used for most pages in the extension.
+ */
+const DefaultLayout: React.FC<DefaultLayoutProps> = ({ routes, headerButtons, message, children }) => {
+  return (
+    <div className="min-h-screen min-w-[350px] bg-white dark:bg-gray-900 flex flex-col max-h-[600px]">
+      <ClipboardCountdownBar />
+
+      <Header
+        routes={routes}
+        rightButtons={headerButtons}
+      />
+
+      <main
+        className="flex-1 overflow-y-auto bg-gray-100 dark:bg-gray-900"
+        style={{
+          paddingTop: '64px',
+          height: 'calc(100% - 120px)',
+        }}
+      >
+        <div className="px-4 pb-4 pt-2 mb-16">
+          {message && (
+            <p className="text-red-500 mb-4">{message}</p>
+          )}
+          {children || (
+            <Routes>
+              {routes.map((route) => (
+                <Route
+                  key={route.path}
+                  path={route.path}
+                  element={route.element}
+                />
+              ))}
+            </Routes>
+          )}
+        </div>
+      </main>
+
+      <BottomNav />
+    </div>
+  );
+};
+
+export default DefaultLayout;

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

@@ -2,7 +2,8 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useLocation } from 'react-router-dom';
 
-import { useAuth } from '@/entrypoints/popup/context/AuthContext';
+import Logo from '@/entrypoints/popup/components/Logo';
+import { useApp } from '@/entrypoints/popup/context/AppContext';
 
 /**
  * Header props.
@@ -24,7 +25,7 @@ const Header: React.FC<HeaderProps> = ({
   rightButtons
 }) => {
   const { t } = useTranslation();
-  const authContext = useAuth();
+  const app = useApp();
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -53,7 +54,7 @@ const Header: React.FC<HeaderProps> = ({
     }
 
     // If logged in, navigate to credentials.
-    if (authContext.isLoggedIn) {
+    if (app.isLoggedIn) {
       navigate('/credentials');
     } else {
       // If not logged in, navigate to index.
@@ -87,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">{t('common.appName')}</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>
@@ -100,7 +105,7 @@ const Header: React.FC<HeaderProps> = ({
         <div className="flex-grow" />
 
         <div className="flex items-center gap-2">
-          {!authContext.isLoggedIn ? (
+          {!app.isLoggedIn ? (
             <>
               {rightButtons}
               <button

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

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import Logo from '@/entrypoints/popup/components/Logo';
+
+/**
+ * PasskeyLayout - Minimal layout for passkey create/authenticate pages.
+ * Shows only the AliasVault logo header, no navigation, no footer.
+ */
+const PasskeyLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <div className="min-h-screen min-w-[350px] bg-white dark:bg-gray-900 flex flex-col max-h-[600px]">
+      {/* Minimal header with just logo */}
+      <header className="fixed z-30 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+        <div className="flex items-center justify-center h-16 px-4">
+          <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] font-normal">BETA</span>
+          )}
+        </div>
+      </header>
+
+      {/* Main content without footer padding */}
+      <main
+        className="flex-1 overflow-y-auto bg-gray-100 dark:bg-gray-900"
+        style={{
+          paddingTop: '64px',
+        }}
+      >
+        <div className="p-4">
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default PasskeyLayout;

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

@@ -27,7 +27,7 @@ const LoginServerInfo: React.FC = () => {
   };
 
   return (
-    <div className="text-xs text-gray-600 dark:text-gray-400 mb-4">
+    <div className="text-sm text-gray-600 dark:text-gray-400 mb-4">
       ({t('auth.connectingTo')}{' '}
       <button
         onClick={handleClick}

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/Unlock/UsernameAvatar.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAuth } from '@/entrypoints/popup/context/AuthContext';
+
+/**
+ * Username avatar component that shows the avatar and username.
+ * Displays centered above the unlock form.
+ */
+const UsernameAvatar: React.FC = () => {
+  const { t } = useTranslation();
+  const { username } = useAuth();
+
+  return (
+    <div className="flex flex-col items-center mb-6">
+      <div className="w-12 h-12 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center mb-3">
+        <span className="text-primary-600 dark:text-primary-400 text-2xl font-medium">
+          {username?.[0]?.toUpperCase() || '?'}
+        </span>
+      </div>
+      <p className="font-medium text-gray-900 dark:text-white text-base">
+        {username}
+      </p>
+      <p className="text-sm text-gray-500 dark:text-gray-400">
+        {t('auth.loggedIn')}
+      </p>
+    </div>
+  );
+};
+
+export default UsernameAvatar;

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

@@ -0,0 +1,120 @@
+import React, { createContext, useContext, useMemo, useCallback, useEffect, useState, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAuth } from '@/entrypoints/popup/context/AuthContext';
+import { useWebApi } from '@/entrypoints/popup/context/WebApiContext';
+
+import { logoutEventEmitter } from '@/events/LogoutEventEmitter';
+
+type AppContextType = {
+  isLoggedIn: boolean;
+  isInitialized: boolean;
+  username: string | null;
+  logout: (errorMessage?: string) => Promise<void>;
+  initializeAuth: () => Promise<boolean>;
+  setAuthTokens: (username: string, accessToken: string, refreshToken: string) => Promise<void>;
+  globalMessage: string | null;
+  clearGlobalMessage: () => void;
+}
+
+const AppContext = createContext<AppContextType | undefined>(undefined);
+
+/**
+ * AppProvider that coordinates between auth, db, and webApi contexts.
+ */
+export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const auth = useAuth();
+  const webApi = useWebApi();
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const isLoggingOutRef = useRef(false);
+  const { t } = useTranslation();
+
+  /**
+   * Logout the user by revoking tokens and clearing the auth tokens from storage.
+   * Prevents recursive logout calls by tracking logout state.
+   */
+  const logout = useCallback(async (errorMessage?: string): Promise<void> => {
+    if (isLoggingOutRef.current) {
+      return;
+    }
+
+    try {
+      isLoggingOutRef.current = true;
+      await webApi.revokeTokens();
+      await auth.clearAuth(errorMessage);
+    } catch (error) {
+      console.error('Error during logout:', error);
+    } finally {
+      isLoggingOutRef.current = false;
+      setIsLoggedIn(false);
+    }
+  }, [auth, webApi]);
+
+  /**
+   * Initialize the authentication state.
+   *
+   * @returns boolean indicating whether the user is logged in.
+   */
+  const initializeAuth = useCallback(async () : Promise<boolean> => {
+    const isLoggedIn = await auth.initializeAuth();
+    setIsLoggedIn(isLoggedIn);
+    return isLoggedIn;
+  }, [auth]);
+
+  /**
+   * Subscribe to logout events from WebApiService.
+   */
+  useEffect(() => {
+    const unsubscribe = logoutEventEmitter.subscribe(async (errorKey: string) => {
+      await logout(t(errorKey));
+    });
+
+    return unsubscribe;
+  }, [logout, t]);
+
+  /**
+   * Check for tokens in browser local storage on initial load when this context is mounted.
+   */
+  useEffect(() => {
+    initializeAuth();
+  }, [initializeAuth]);
+
+  const contextValue = useMemo(() => ({
+    // Pass through auth state
+    isInitialized: auth.isInitialized,
+    username: auth.username,
+    globalMessage: auth.globalMessage,
+    // Wrap auth methods
+    logout,
+    initializeAuth,
+    setAuthTokens: auth.setAuthTokens,
+    clearGlobalMessage: auth.clearGlobalMessage,
+    isLoggedIn: isLoggedIn,
+  }), [
+    auth.isInitialized,
+    auth.username,
+    auth.globalMessage,
+    auth.setAuthTokens,
+    auth.clearGlobalMessage,
+    logout,
+    initializeAuth,
+    isLoggedIn,
+  ]);
+
+  return (
+    <AppContext.Provider value={contextValue}>
+      {children}
+    </AppContext.Provider>
+  );
+};
+
+/**
+ * Hook to use the AppContext.
+ */
+export const useApp = (): AppContextType => {
+  const context = useContext(AppContext);
+  if (context === undefined) {
+    throw new Error('useApp must be used within an AppProvider');
+  }
+  return context;
+};

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

@@ -1,20 +1,19 @@
-import React, { createContext, useContext, useState, useEffect, useMemo, useCallback } from 'react';
+import React, { createContext, useContext, useState, useMemo, useCallback } from 'react';
 import { sendMessage } from 'webext-bridge/popup';
 
 import { useDb } from '@/entrypoints/popup/context/DbContext';
 
 import { VAULT_LOCKED_DISMISS_UNTIL_KEY } from '@/utils/Constants';
+import { removeAndDisablePin } from '@/utils/PinUnlockService';
 
 import { storage } from '#imports';
 
 type AuthContextType = {
-  isLoggedIn: boolean;
   isInitialized: boolean;
   username: string | null;
-  initializeAuth: () => Promise<{ isLoggedIn: boolean }>;
+  initializeAuth: () => Promise<boolean>;
   setAuthTokens: (username: string, accessToken: string, refreshToken: string) => Promise<void>;
-  login: () => Promise<void>;
-  logout: (errorMessage?: string) => Promise<void>;
+  clearAuth: (errorMessage?: string) => Promise<void>;
   globalMessage: string | null;
   clearGlobalMessage: () => void;
 }
@@ -28,7 +27,6 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined);
  * AuthProvider to provide the authentication state to the app that components can use.
  */
 export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
   const [username, setUsername] = useState<string | null>(null);
   const [globalMessage, setGlobalMessage] = useState<string | null>(null);
@@ -37,30 +35,20 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
   /**
    * Initialize the authentication state.
    *
-   * @returns object containing whether the user is logged in.
+   * @returns boolean indicating whether the user is logged in.
    */
-  const initializeAuth = useCallback(async () : Promise<{ isLoggedIn: boolean }> => {
-    let isLoggedIn = false;
-
+  const initializeAuth = useCallback(async () : Promise<boolean> => {
     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;
+    setIsInitialized(true);
     if (accessToken && refreshToken && username) {
       setUsername(username);
-      setIsLoggedIn(true);
-      isLoggedIn = true;
+      return true;
     }
-    setIsInitialized(true);
 
-    return { isLoggedIn };
-  }, [setUsername, setIsLoggedIn]);
-
-  /**
-   * Check for tokens in browser local storage on initial load when this context is mounted.
-   */
-  useEffect(() => {
-    initializeAuth();
-  }, [initializeAuth]);
+    return false;
+  }, [setUsername]);
 
   /**
    * Set auth tokens in browser local storage as part of the login process. After db is initialized, the login method should be called as well.
@@ -70,34 +58,36 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     await storage.setItem('local:accessToken', accessToken);
     await storage.setItem('local:refreshToken', refreshToken);
 
+    // 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);
+
     setUsername(username);
   }, []);
 
   /**
-   * Set logged in status to true which refreshes the app.
+   * Clear authentication data and tokens from storage.
+   * This is called by AppContext after revoking tokens on the server.
    */
-  const login = useCallback(async () : Promise<void> => {
-    setIsLoggedIn(true);
-
-    // 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);
-  }, []);
-
-  /**
-   * Logout the user and clear the auth tokens from chrome storage.
-   */
-  const logout = useCallback(async (errorMessage?: string) : Promise<void> => {
+  const clearAuth = useCallback(async (errorMessage?: string) : Promise<void> => {
+    // Clear vault from background worker and remove local storage tokens.
     await sendMessage('CLEAR_VAULT', {}, 'background');
     await storage.removeItems(['local:username', 'local:accessToken', 'local:refreshToken']);
     dbContext?.clearDatabase();
 
+    // Clear PIN unlock data (if any)
+    try {
+      await removeAndDisablePin();
+    } catch (error) {
+      console.error('Failed to remove PIN data:', error);
+      // Non-fatal error - continue with logout
+    }
+
     // Set local storage global message that will be shown on the login page.
     if (errorMessage) {
       setGlobalMessage(errorMessage);
     }
 
     setUsername(null);
-    setIsLoggedIn(false);
   }, [dbContext]);
 
   /**
@@ -108,16 +98,14 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
   }, []);
 
   const contextValue = useMemo(() => ({
-    isLoggedIn,
     isInitialized,
     username,
     initializeAuth,
     setAuthTokens,
-    login,
-    logout,
+    clearAuth,
     globalMessage,
     clearGlobalMessage,
-  }), [isLoggedIn, isInitialized, username, initializeAuth, globalMessage, setAuthTokens, login, logout, clearGlobalMessage]);
+  }), [isInitialized, username, initializeAuth, globalMessage, setAuthTokens, clearAuth, clearGlobalMessage]);
 
   return (
     <AuthContext.Provider value={contextValue}>

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

@@ -8,6 +8,8 @@ import SqliteClient from '@/utils/SqliteClient';
 import { StoreVaultRequest } from '@/utils/types/messaging/StoreVaultRequest';
 import type { VaultResponse as messageVaultResponse } from '@/utils/types/messaging/VaultResponse';
 
+import { storage } from '#imports';
+
 type DbContextType = {
   sqliteClient: SqliteClient | null;
   dbInitialized: boolean;
@@ -42,11 +44,6 @@ export const DbProvider: React.FC<{ children: React.ReactNode }> = ({ children }
    */
   const [dbAvailable, setDbAvailable] = useState(false);
 
-  /**
-   * Vault revision.
-   */
-  const [vaultMetadata, setVaultMetadata] = useState<VaultMetadata | null>(null);
-
   const initializeDatabase = useCallback(async (vaultResponse: VaultResponse, derivedKey: string) => {
     // Attempt to decrypt the blob.
     const decryptedBlob = await EncryptionUtility.symmetricDecrypt(
@@ -61,19 +58,15 @@ export const DbProvider: React.FC<{ children: React.ReactNode }> = ({ children }
     setSqliteClient(client);
     setDbInitialized(true);
     setDbAvailable(true);
-    setVaultMetadata({
-      publicEmailDomains: vaultResponse.vault.publicEmailDomainList,
-      privateEmailDomains: vaultResponse.vault.privateEmailDomainList,
-      vaultRevisionNumber: vaultResponse.vault.currentRevisionNumber,
-    });
 
     /**
-     * Store encrypted vault in background worker.
+     * Store encrypted vault and metadata in background worker (session storage).
      */
     const request: StoreVaultRequest = {
       vaultBlob: vaultResponse.vault.blob,
       publicEmailDomainList: vaultResponse.vault.publicEmailDomainList,
       privateEmailDomainList: vaultResponse.vault.privateEmailDomainList,
+      hiddenPrivateEmailDomainList: vaultResponse.vault.hiddenPrivateEmailDomainList,
       vaultRevisionNumber: vaultResponse.vault.currentRevisionNumber,
     };
 
@@ -92,12 +85,7 @@ export const DbProvider: React.FC<{ children: React.ReactNode }> = ({ children }
         setSqliteClient(client);
         setDbInitialized(true);
         setDbAvailable(true);
-
-        setVaultMetadata({
-          publicEmailDomains: response.publicEmailDomains ?? [],
-          privateEmailDomains: response.privateEmailDomains ?? [],
-          vaultRevisionNumber: response.vaultRevisionNumber ?? 0,
-        });
+        // Metadata is already stored in session storage by background worker
       } else {
         setDbInitialized(true);
         setDbAvailable(false);
@@ -110,22 +98,37 @@ export const DbProvider: React.FC<{ children: React.ReactNode }> = ({ children }
   }, []);
 
   /**
-   * Get the vault metadata.
+   * Get the vault metadata from session storage.
    */
   const getVaultMetadata = useCallback(async () : Promise<VaultMetadata | null> => {
-    return vaultMetadata;
-  }, [vaultMetadata]);
+    try {
+      const publicEmailDomains = await storage.getItem('session:publicEmailDomains') as string[] | null;
+      const privateEmailDomains = await storage.getItem('session:privateEmailDomains') as string[] | null;
+      const hiddenPrivateEmailDomains = await storage.getItem('session:hiddenPrivateEmailDomains') as string[] | null;
+      const vaultRevisionNumber = await storage.getItem('session:vaultRevisionNumber') as number | null;
+
+      if (!publicEmailDomains && !privateEmailDomains) {
+        return null;
+      }
+
+      return {
+        publicEmailDomains: publicEmailDomains ?? [],
+        privateEmailDomains: privateEmailDomains ?? [],
+        hiddenPrivateEmailDomains: hiddenPrivateEmailDomains ?? [],
+        vaultRevisionNumber: vaultRevisionNumber ?? 0,
+      };
+    } catch (error) {
+      console.error('Error getting vault metadata from session storage:', error);
+      return null;
+    }
+  }, []);
 
   /**
-   * Set the current vault revision number.
+   * Set the current vault revision number in session storage.
    */
   const setCurrentVaultRevisionNumber = useCallback(async (revisionNumber: number) => {
-    setVaultMetadata({
-      publicEmailDomains: vaultMetadata?.publicEmailDomains ?? [],
-      privateEmailDomains: vaultMetadata?.privateEmailDomains ?? [],
-      vaultRevisionNumber: revisionNumber,
-    });
-  }, [vaultMetadata]);
+    await storage.setItem('session:vaultRevisionNumber', revisionNumber);
+  }, []);
 
   /**
    * Check if there are pending migrations.

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

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useEffect, useMemo, useCallback } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
-import { useAuth } from '@/entrypoints/popup/context/AuthContext';
+import { useApp } from '@/entrypoints/popup/context/AppContext';
 import { useDb } from '@/entrypoints/popup/context/DbContext';
 
 import { storage } from '#imports';
@@ -29,21 +29,32 @@ const NavigationContext = createContext<NavigationContextType | undefined>(undef
  */
 export const NavigationProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const location = useLocation();
+  const navigate = useNavigate();
 
   // Auth and DB state
-  const { isInitialized: authInitialized, isLoggedIn } = useAuth();
-  const { dbInitialized, dbAvailable, upgradeRequired } = useDb();
+  const { isInitialized: authInitialized, isLoggedIn } = useApp();
+  const { dbInitialized, dbAvailable } = useDb();
 
   // Derived state
   const isFullyInitialized = authInitialized && dbInitialized;
-  const requiresAuth = isFullyInitialized && (!isLoggedIn || (!dbAvailable && !upgradeRequired));
+  const requiresAuth = isFullyInitialized && (!isLoggedIn || !dbAvailable);
 
   /**
    * 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 = ['/', '/reinitialize', '/login', '/unlock', '/unlock-success', '/auth-settings', '/upgrade', '/logout'];
+    // Pages that are not allowed to be stored as these are auth conditional pages or dedicated popup pages.
+    const notAllowedPaths = [
+      '/',
+      '/reinitialize',
+      '/login',
+      '/unlock',
+      '/unlock-success',
+      '/auth-settings',
+      '/upgrade',
+      '/passkeys/create',
+      '/passkeys/authenticate'
+    ];
 
     // Only store the page if we're fully initialized and don't need auth
     if (isFullyInitialized && !requiresAuth && !notAllowedPaths.includes(location.pathname)) {
@@ -51,9 +62,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,
@@ -76,6 +93,15 @@ export const NavigationProvider: React.FC<{ children: React.ReactNode }> = ({ ch
     }
   }, [location.pathname, location.search, location.hash, isFullyInitialized, storeCurrentPage]);
 
+  // Listen on isloggedin state to redirect to login page if not logged in
+  useEffect(() => {
+    if (isFullyInitialized && !isLoggedIn) {
+      navigate('/login', { replace: true });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFullyInitialized, isLoggedIn]);
+
+  // Return the context value
   const contextValue = useMemo(() => ({
     storeCurrentPage,
     isFullyInitialized,

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

@@ -1,7 +1,5 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 
-import { useAuth } from '@/entrypoints/popup/context/AuthContext';
-
 import { WebApiService } from '@/utils/WebApiService';
 
 const WebApiContext = createContext<WebApiService | null>(null);
@@ -10,24 +8,15 @@ const WebApiContext = createContext<WebApiService | null>(null);
  * WebApiProvider to provide the WebApiService to the app that components can use.
  */
 export const WebApiProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const { logout } = useAuth();
   const [webApiService, setWebApiService] = useState<WebApiService | null>(null);
 
   /**
    * Initialize WebApiService
    */
   useEffect(() : void => {
-    const service = new WebApiService(
-      (statusError: string | null) => {
-        if (statusError) {
-          logout(statusError);
-        } else {
-          logout();
-        }
-      }
-    );
+    const service = new WebApiService();
     setWebApiService(service);
-  }, [logout]);
+  }, []);
 
   if (!webApiService) {
     return null;

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

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { useDb } from '@/entrypoints/popup/context/DbContext';
+
+import { PENDING_REDIRECT_URL_KEY } from '@/utils/Constants';
+
+import { storage } from '#imports';
+
+/**
+ * Hook to handle vault lock redirects.
+ * Automatically redirects to unlock page if vault is locked,
+ * preserving the current URL for restoration after unlock.
+ */
+export function useVaultLockRedirect(options: { enabled?: boolean } = {}): { isLocked: boolean } {
+  const { enabled = true } = options;
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { dbInitialized, dbAvailable } = useDb();
+
+  useEffect(() => {
+    if (!enabled || !dbInitialized) {
+      return;
+    }
+
+    // Check if vault is locked
+    if (!dbAvailable) {
+      // Store the full current URL (pathname + search) for restoration after unlock
+      const currentUrl = `${location.pathname}${location.search}`;
+      storage.setItem(PENDING_REDIRECT_URL_KEY, currentUrl);
+
+      // Navigate to unlock without redirect in URL - we use storage instead
+      navigate('/unlock');
+    }
+  }, [enabled, dbInitialized, dbAvailable, location, navigate]);
+
+  return {
+    isLocked: dbInitialized && !dbAvailable
+  };
+}
+
+/**
+ * Get and clear the pending redirect URL from storage.
+ * Used by Reinitialize page to restore user's intended destination after unlock.
+ *
+ * @returns The pending redirect URL, or null if none exists
+ */
+export async function consumePendingRedirectUrl(): Promise<string | null> {
+  const url = await storage.getItem<string>(PENDING_REDIRECT_URL_KEY);
+  if (url) {
+    await storage.removeItem(PENDING_REDIRECT_URL_KEY);
+  }
+  return url;
+}
+
+/**
+ * Clear the pending redirect URL from storage.
+ * Used when popup is opened without a specific hash path to clear stale redirects.
+ */
+export async function clearPendingRedirectUrl(): Promise<void> {
+  await storage.removeItem(PENDING_REDIRECT_URL_KEY);
+}

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

@@ -43,55 +43,52 @@ export function useVaultMutate() : {
 
     setSyncStatus(t('common.uploadingVaultToServer'));
 
-    try {
-      // Upload the updated vault to the server.
-      const base64Vault = dbContext.sqliteClient!.exportToBase64();
+    // Upload the updated vault to the server.
+    const base64Vault = dbContext.sqliteClient!.exportToBase64();
 
-      // Get encryption key from background worker
-      const encryptionKey = await sendMessage('GET_ENCRYPTION_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,
-        encryptionKey
-      );
+    // Encrypt the vault.
+    const encryptedVaultBlob = await EncryptionUtility.symmetricEncrypt(
+      base64Vault,
+      encryptionKey
+    );
 
-      const request: UploadVaultRequest = {
-        vaultBlob: encryptedVaultBlob,
-      };
+    const request: UploadVaultRequest = {
+      vaultBlob: encryptedVaultBlob,
+    };
 
-      const response = await sendMessage('UPLOAD_VAULT', request, 'background') as messageVaultUploadResponse;
+    const response = await sendMessage('UPLOAD_VAULT', request, 'background') as messageVaultUploadResponse;
 
-      /*
-       * If we get here, it means we have a valid connection to the server.
-       * TODO: offline mode is not implemented for browser extension yet.
-       * authContext.setOfflineMode(false);
-       */
+    /*
+     * If we get here, it means we have a valid connection to the server.
+     * TODO: offline mode is not implemented for browser extension yet.
+     * authContext.setOfflineMode(false);
+     */
 
-      if (response.status === 0 && response.newRevisionNumber) {
-        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. Please try again by re-opening the app.');
-      }
-    } catch (error) {
-      // Check if it's a network error
-      if (error instanceof Error && (error.message.includes('network') || error.message.includes('timeout'))) {
-        /*
-         * Network error, mark as offline and track pending changes
-         * TODO: offline mode is not implemented for browser extension yet.
-         * authContext.setOfflineMode(true);
-         */
-        options.onError?.(new Error('Network error'));
-        return;
-      }
-      throw error;
+    if (response.status === 0 && response.newRevisionNumber) {
+      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(t('common.errors.unknownError'));
+    } else {
+      throw new Error(t('common.errors.unknownError'));
     }
+
+    // Check if it's a network error
+    /*
+     * if (error instanceof Error && (error.message.includes('network') || error.message.includes('timeout'))) {
+     *
+     * // Network error, mark as offline and track pending changes - TODO: offline mode is not implemented for browser extension yet.
+     * // authContext.setOfflineMode(true);
+     *options.onError?.(new Error('Network error'));
+     *return;
+     *}
+     */
   }, [dbContext, t]);
 
   /**
@@ -130,28 +127,12 @@ export function useVaultMutate() : {
          * Handle error during vault sync.
          */
         onError: (error) => {
-          /**
-           *Toast.show({
-           *type: 'error',
-           *text1: 'Failed to sync vault',
-           *text2: error,
-           *position: 'bottom'
-           *});
-           */
           options.onError?.(new Error(error));
         }
       });
     } catch (error) {
       console.error('Error during vault mutation:', error);
-      /*
-       * Toast.show({
-       *type: 'error',
-       *text1: 'Operation failed',
-       *text2: error instanceof Error ? error.message : 'Unknown error',
-       *position: 'bottom'
-       *});
-       */
-      options.onError?.(error instanceof Error ? error : new Error('Unknown error'));
+      options.onError?.(error instanceof Error ? error : new Error(t('common.errors.unknownError')));
     } finally {
       setIsLoading(false);
       setSyncStatus('');

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

@@ -2,12 +2,13 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { sendMessage } from 'webext-bridge/popup';
 
-import { useAuth } from '@/entrypoints/popup/context/AuthContext';
+import { useApp } from '@/entrypoints/popup/context/AppContext';
 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';
+import { VaultVersionIncompatibleError } from '@/utils/types/errors/VaultVersionIncompatibleError';
 
 /**
  * Utility function to ensure a minimum time has elapsed for an operation
@@ -49,7 +50,7 @@ export const useVaultSync = () : {
   syncVault: (options?: VaultSyncOptions) => Promise<boolean>;
 } => {
   const { t } = useTranslation();
-  const authContext = useAuth();
+  const app = useApp();
   const dbContext = useDb();
   const webApi = useWebApi();
 
@@ -60,7 +61,7 @@ export const useVaultSync = () : {
     const enableDelay = initialSync;
 
     try {
-      const { isLoggedIn } = await authContext.initializeAuth();
+      const isLoggedIn = await app.initializeAuth();
 
       if (!isLoggedIn) {
         // Not authenticated, return false immediately
@@ -73,7 +74,9 @@ export const useVaultSync = () : {
 
       // Check if server is actually available, 0.0.0 indicates connection error which triggers offline mode.
       if (statusResponse.serverVersion === '0.0.0') {
-        // Offline mode is not implemented for browser extension yet, let it fail below due to the validateStatusResponse check.
+        // Offline mode is not implemented for browser extension yet, so logout the user.
+        onError?.(t('common.errors.serverNotAvailable'));
+        return false;
       }
 
       const statusError = webApi.validateStatusResponse(statusResponse);
@@ -91,7 +94,7 @@ export const useVaultSync = () : {
          * 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'));
+        await app.logout(t('common.errors.passwordChanged'));
         return false;
       }
 
@@ -109,24 +112,6 @@ export const useVaultSync = () : {
         onStatus?.(t('common.syncingUpdatedVault'));
         const vaultResponseJson = await withMinimumDelay(() => webApi.get<VaultResponse>('Vault'), 1000, enableDelay);
 
-        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')) {
-            await webApi.logout(vaultError);
-            onError?.(vaultError);
-            return false;
-          }
-
-          /*
-           *  TODO: browser extension does not support offline mode yet.
-           *  For other errors, go into offline mode
-           * authContext.setOfflineMode(true);
-           */
-
-          return false;
-        }
-
         try {
           // Get encryption key from background worker
           const encryptionKey = await sendMessage('GET_ENCRYPTION_KEY', {}, 'background') as string;
@@ -142,9 +127,8 @@ export const useVaultSync = () : {
           return true;
         } 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);
+          if (error instanceof VaultVersionIncompatibleError) {
+            await app.logout(error.message);
             return false;
           }
           // Vault could not be decrypted, throw an error
@@ -165,9 +149,8 @@ export const useVaultSync = () : {
       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);
+      if (err instanceof VaultVersionIncompatibleError) {
+        await app.logout(errorMessage);
         return false;
       }
 
@@ -185,7 +168,7 @@ export const useVaultSync = () : {
       onError?.(errorMessage);
       return false;
     }
-  }, [authContext, dbContext, webApi, t]);
+  }, [app, dbContext, webApi, t]);
 
   return { syncVault };
 };

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

@@ -1,6 +1,7 @@
 import ReactDOM from 'react-dom/client';
 
 import App from '@/entrypoints/popup/App';
+import { AppProvider } from '@/entrypoints/popup/context/AppContext';
 import { AuthProvider } from '@/entrypoints/popup/context/AuthContext';
 import { DbProvider } from '@/entrypoints/popup/context/DbContext';
 import { HeaderButtonsProvider } from '@/entrypoints/popup/context/HeaderButtonsContext';
@@ -17,17 +18,19 @@ 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>
+      <WebApiProvider>
+        <AuthProvider>
+          <AppProvider>
+            <LoadingProvider>
+              <HeaderButtonsProvider>
+                <ThemeProvider>
+                  <App />
+                </ThemeProvider>
+              </HeaderButtonsProvider>
+            </LoadingProvider>
+          </AppProvider>
+        </AuthProvider>
+      </WebApiProvider>
     </DbProvider>
   );
 };

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

@@ -1,209 +0,0 @@
-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';
-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 { useVaultSync } from '@/entrypoints/popup/hooks/useVaultSync';
-import { PopoutUtility } from '@/entrypoints/popup/utils/PopoutUtility';
-
-import type { Credential } from '@/utils/dist/shared/models/vault';
-
-import { useMinDurationLoading } from '@/hooks/useMinDurationLoading';
-
-/**
- * Credentials list page.
- */
-const CredentialsList: React.FC = () => {
-  const { t } = useTranslation();
-  const dbContext = useDb();
-  const webApi = useWebApi();
-  const navigate = useNavigate();
-  const { syncVault } = useVaultSync();
-  const { setHeaderButtons } = useHeaderButtons();
-  const [credentials, setCredentials] = useState<Credential[]>([]);
-  const [searchTerm, setSearchTerm] = useState('');
-  const { setIsInitialLoading } = useLoading();
-
-  /**
-   * Loading state with minimum duration for more fluid UX.
-   */
-  const [isLoading, setIsLoading] = useMinDurationLoading(true, 100);
-
-  /**
-   * Handle add new credential.
-   */
-  const handleAddCredential = useCallback(() : void => {
-    navigate('/credentials/add');
-  }, [navigate]);
-
-  /**
-   * Retrieve latest vault and refresh the credentials list.
-   */
-  const onRefresh = useCallback(async () : Promise<void> => {
-    if (!dbContext?.sqliteClient) {
-      return;
-    }
-
-    try {
-      // Sync vault and load credentials
-      await syncVault({
-        /**
-         * On success.
-         */
-        onSuccess: async (_hasNewVault) => {
-          // Credentials list is refreshed automatically when the (new) sqlite client is available via useEffect hook below.
-        },
-        /**
-         * On offline.
-         */
-        _onOffline: () => {
-          // Not implemented for browser extension yet.
-        },
-        /**
-         * On error.
-         */
-        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, navigate]);
-
-  /**
-   * Get latest vault from server and refresh the credentials list.
-   */
-  const syncVaultAndRefresh = useCallback(async () : Promise<void> => {
-    setIsLoading(true);
-    await onRefresh();
-    setIsLoading(false);
-  }, [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"
-          iconType={HeaderIconType.PLUS}
-        />
-      </div>
-    );
-
-    setHeaderButtons(headerButtonsJSX);
-    return () => setHeaderButtons(null);
-  }, [setHeaderButtons, handleAddCredential]);
-
-  /**
-   * Load credentials list on mount and on sqlite client change.
-   */
-  useEffect(() => {
-    /**
-     * Refresh credentials list when a (new) sqlite client is available.
-     */
-    const refreshCredentials = async () : Promise<void> => {
-      if (dbContext?.sqliteClient) {
-        setIsLoading(true);
-        const results = dbContext.sqliteClient?.getAllCredentials() ?? [];
-        setCredentials(results);
-        setIsLoading(false);
-        setIsInitialLoading(false);
-      }
-    };
-
-    refreshCredentials();
-  }, [dbContext?.sqliteClient, setIsLoading, setIsInitialLoading]);
-
-  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 = [
-      credential.ServiceName?.toLowerCase(),
-      credential.Username?.toLowerCase(),
-      credential.Alias?.Email?.toLowerCase(),
-      credential.ServiceUrl?.toLowerCase(),
-      credential.Notes?.toLowerCase(),
-    ];
-    return searchableFields.some(field => field?.includes(searchLower));
-  });
-
-  if (isLoading) {
-    return (
-      <div className="flex justify-center items-center p-8">
-        <LoadingSpinner />
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <div className="flex justify-between items-center mb-4">
-        <h2 className="text-gray-900 dark:text-white text-xl">{t('credentials.title')}</h2>
-        <ReloadButton onClick={syncVaultAndRefresh} />
-      </div>
-
-      {credentials.length > 0 ? (
-        <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">
-            {t('credentials.welcomeTitle')}
-          </p>
-          <p className="text-sm">
-            {t('credentials.welcomeDescription')}
-          </p>
-        </div>
-      ) : (
-        <ul className="space-y-2">
-          {filteredCredentials.map(cred => (
-            <CredentialCard key={cred.Id} credential={cred} />
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-};
-
-export default CredentialsList;

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

@@ -1,33 +0,0 @@
-import React, { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { useAuth } from '@/entrypoints/popup/context/AuthContext';
-import { useWebApi } from '@/entrypoints/popup/context/WebApiContext';
-
-/**
- * Logout page.
- */
-const Logout: React.FC = () => {
-  const authContext = useAuth();
-  const webApi = useWebApi();
-  const navigate = useNavigate();
-  /**
-   * Logout and navigate to home page.
-   */
-  useEffect(() => {
-    /**
-     * Perform logout via async method to ensure logout is completed before navigating to home page.
-     */
-    const performLogout = async () : Promise<void> => {
-      await webApi.logout();
-      navigate('/login');
-    };
-
-    performLogout();
-  }, [authContext, navigate, webApi]);
-
-  // Return null since this is just a functional component that handles logout.
-  return null;
-};
-
-export default Logout;