diff --git a/openapi.yaml b/openapi.yaml
index 504cfe3f..c92578f3 100644
--- a/openapi.yaml
+++ b/openapi.yaml
@@ -80,8 +80,363 @@ tags:
       description: Department goals management
     - name: Subusers
       description: Subuser registration and setup
+    - name: Bird
+      description: Voice Calls via Bird
 
 paths:
+  # Bird Voice Calls
+  /bird/voice/calls:
+    post:
+      tags:
+        - Bird
+      summary: Create/place a voice call via Bird
+      operationId: birdCreateVoiceCall
+      parameters:
+        - in: query
+          name: workspaceId
+          schema:
+            type: string
+          required: true
+          description: Bird Workspace identifier
+        - in: query
+          name: channelId
+          schema:
+            type: string
+          required: true
+          description: Bird Channel identifier
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              additionalProperties: true
+              properties:
+                to:
+                  type: string
+                  description: E.164 phone number of the callee
+                  example: "+4511122233"
+                from:
+                  type: string
+                  description: E.164 phone number of the caller (sender)
+                  example: "+4599988877"
+      responses:
+        '200':
+          description: Call created
+          content:
+            application/json:
+              schema:
+                type: object
+                additionalProperties: true
+    get:
+      tags:
+        - Bird
+      summary: List voice calls
+      operationId: birdListVoiceCalls
+      parameters:
+        - in: query
+          name: workspaceId
+          schema:
+            type: string
+          required: true
+          description: Bird Workspace identifier
+        - in: query
+          name: channelId
+          schema:
+            type: string
+          required: true
+          description: Bird Channel identifier
+        - in: query
+          name: page
+          schema:
+            type: integer
+          required: false
+      responses:
+        '200':
+          description: A list of calls
+          content:
+            application/json:
+              schema:
+                type: object
+                additionalProperties: true
+
+  /bird/voice/calls/{id}:
+    get:
+      tags:
+        - Bird
+      summary: Get a voice call by ID
+      operationId: birdGetVoiceCall
+      parameters:
+        - in: query
+          name: workspaceId
+          schema:
+            type: string
+          required: true
+          description: Bird Workspace identifier
+        - in: query
+          name: channelId
+          schema:
+            type: string
+          required: true
+          description: Bird Channel identifier
+        - in: path
+          name: id
+          required: true
+          schema:
+            type: string
+      responses:
+        '200':
+          description: Call details
+          content:
+            application/json:
+              schema:
+                type: object
+                additionalProperties: true
+
+  /bird/voice/calls/{id}/hangup:
+    post:
+      tags:
+        - Bird
+      summary: Hang up a voice call by ID
+      operationId: birdHangupVoiceCall
+      parameters:
+        - in: query
+          name: workspaceId
+          schema:
+            type: string
+          required: true
+          description: Bird Workspace identifier
+        - in: query
+          name: channelId
+          schema:
+            type: string
+          required: true
+          description: Bird Channel identifier
+        - in: path
+          name: id
+          required: true
+          schema:
+            type: string
+      responses:
+        '200':
+          description: Hangup requested
+          content:
+            application/json:
+              schema:
+                type: object
+                additionalProperties: true
+
+  # Bird Numbers
+  /bird/numbers:
+    get:
+      tags:
+        - Bird
+      summary: List your numbers
+      operationId: birdListNumbers
+      parameters:
+        - in: query
+          name: page
+          required: false
+          schema:
+            type: integer
+        - in: query
+          name: limit
+          required: false
+          schema:
+            type: integer
+      responses:
+        '200':
+          description: A list of numbers
+          content:
+            application/json:
+              schema:
+                type: object
+                additionalProperties: true
+
+  # Bird Voice Flash Calling
+  /bird/voice/flash-calls:
+    post:
+      tags:
+        - Bird
+      summary: Create/place a flash call via Bird
+      operationId: birdCreateFlashCall
+      parameters:
+        - in: query
+          name: workspaceId
+          schema:
+            type: string
+          required: true
+          description: Bird Workspace identifier
+        - in: query
+          name: channelId
+          schema:
+            type: string
+          required: true
+          description: Bird Channel identifier
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              additionalProperties: true
+      responses:
+        '200':
+          description: Flash call created
+          content:
+            application/json:
+              schema:
+                type: object
+                additionalProperties: true
+    get:
+      tags:
+        - Bird
+      summary: List flash calls
+      operationId: birdListFlashCalls
+      parameters:
+        - in: query
+          name: workspaceId
+          schema:
+            type: string
+          required: true
+          description: Bird Workspace identifier
+        - in: query
+          name: channelId
+          schema:
+            type: string
+          required: true
+          description: Bird Channel identifier
+        - in: query
+          name: page
+          schema:
+            type: integer
+          required: false
+      responses:
+        '200':
+          description: A list of flash calls
+          content:
+            application/json:
+              schema:
+                type: object
+                additionalProperties: true
+
+  /bird/voice/flash-calls/{id}:
+    get:
+      tags:
+        - Bird
+      summary: Get a flash call by ID
+      operationId: birdGetFlashCall
+      parameters:
+        - in: query
+          name: workspaceId
+          schema:
+            type: string
+          required: true
+          description: Bird Workspace identifier
+        - in: query
+          name: channelId
+          schema:
+            type: string
+          required: true
+          description: Bird Channel identifier
+        - in: path
+          name: id
+          required: true
+          schema:
+            type: string
+      responses:
+        '200':
+          description: Flash call details
+          content:
+            application/json:
+              schema:
+                type: object
+                additionalProperties: true
+    post:
+      tags:
+        - Bird
+      summary: Complete/end a flash call by ID
+      description: Posts a completion/update payload to the flash call resource to finalize verification.
+      operationId: birdEndFlashCall
+      parameters:
+        - in: query
+          name: workspaceId
+          schema:
+            type: string
+          required: true
+          description: Bird Workspace identifier
+        - in: query
+          name: channelId
+          schema:
+            type: string
+          required: true
+          description: Bird Channel identifier
+        - in: path
+          name: id
+          required: true
+          schema:
+            type: string
+      requestBody:
+        required: false
+        content:
+          application/json:
+            schema:
+              type: object
+              additionalProperties: true
+      responses:
+        '200':
+          description: Flash call completed
+          content:
+            application/json:
+              schema:
+                type: object
+                additionalProperties: true
+
+  /bird/voice/flash-calls/end:
+    post:
+      tags:
+        - Bird
+      summary: Complete/end a flash call using from/to numbers
+      description: Ends an ongoing flash call by specifying the originating and destination numbers.
+      operationId: birdEndFlashCallByNumbers
+      parameters:
+        - in: query
+          name: workspaceId
+          schema:
+            type: string
+          required: true
+          description: Bird Workspace identifier
+        - in: query
+          name: channelId
+          schema:
+            type: string
+          required: true
+          description: Bird Channel identifier
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              additionalProperties: true
+              properties:
+                from:
+                  type: string
+                  description: E.164 formatted caller number
+                  example: "+4599988877"
+                to:
+                  type: string
+                  description: E.164 formatted callee number
+                  example: "+4511122233"
+      responses:
+        '200':
+          description: Flash call completed (by numbers)
+          content:
+            application/json:
+              schema:
+                type: object
+                additionalProperties: true
+
   # Subusers (public registration + setup)
   /subusers:
     get:
@@ -158,6 +513,9 @@ paths:
                       type: string
                       format: date-time
                       nullable: true
+                    two_factor_enabled:
+                      type: boolean
+                      description: Indicates if 2FA is enabled for this account
                     permissions:
                       type: array
                       description: Aggregated permission keys granted for the caller's customer
@@ -476,12 +834,24 @@ paths:
           content:
             application/json:
               schema:
-                type: object
-                properties:
-                  session:
-                    type: string
-                    description: Newly generated subuser session token
-                    example: "2f7a8c0e-9b1d-4c6a-91a9-1a2b3c4d5e6f"
+                oneOf:
+                  - type: object
+                    required: [session]
+                    properties:
+                      session:
+                        type: string
+                        description: Newly generated subuser session token
+                        example: "2f7a8c0e-9b1d-4c6a-91a9-1a2b3c4d5e6f"
+                  - type: object
+                    required: [2fa_required, 2fa_token]
+                    properties:
+                      2fa_required:
+                        type: boolean
+                        example: true
+                      2fa_token:
+                        type: string
+                        description: Temporary 2FA verification token
+                        example: "557a3e7b1a2b..."
         '400': { $ref: '#/components/responses/BadRequest' }
         '404': { $ref: '#/components/responses/NotFound' }
         '500': { $ref: '#/components/responses/InternalServerError' }
@@ -685,12 +1055,24 @@ paths:
           content:
             application/json:
               schema:
-                type: object
-                properties:
-                  token:
-                    type: string
-                    description: Bearer authentication token
-                    example: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
+                oneOf:
+                  - type: object
+                    required: [token]
+                    properties:
+                      token:
+                        type: string
+                        description: Bearer authentication token
+                        example: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
+                  - type: object
+                    required: [2fa_required, 2fa_token]
+                    properties:
+                      2fa_required:
+                        type: boolean
+                        example: true
+                      2fa_token:
+                        type: string
+                        description: Temporary 2FA verification token
+                        example: "557a3e7b1a2b..."
         '400':
           $ref: '#/components/responses/BadRequest'
         '401':
@@ -728,11 +1110,22 @@ paths:
           content:
             application/json:
               schema:
-                type: object
-                properties:
-                  token:
-                    type: string
-                    description: Bearer authentication token
+                oneOf:
+                  - type: object
+                    required: [token]
+                    properties:
+                      token:
+                        type: string
+                        description: Bearer authentication token
+                  - type: object
+                    required: [2fa_required, 2fa_token]
+                    properties:
+                      2fa_required:
+                        type: boolean
+                        example: true
+                      2fa_token:
+                        type: string
+                        description: Temporary 2FA verification token
         '400':
           $ref: '#/components/responses/BadRequest'
         '401':
@@ -772,7 +1165,134 @@ paths:
           content:
             application/json:
               schema:
-                $ref: '#/components/schemas/User'
+                allOf:
+                  - $ref: '#/components/schemas/User'
+                  - type: object
+                    properties:
+                      two_factor_enabled:
+                        type: boolean
+                        description: Indicates if 2FA is enabled for this account
+        '400':
+          $ref: '#/components/responses/BadRequest'
+        '401':
+          $ref: '#/components/responses/Unauthorized'
+
+  /auth/2fa/setup:
+    post:
+      tags:
+        - Authentication
+      summary: Generate 2FA secret
+      description: Generate a new TOTP secret for the authenticated user/subuser
+      operationId: setup2fa
+      responses:
+        '200':
+          description: 2FA secret generated successfully
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  secret:
+                    type: string
+                    description: The base32 encoded TOTP secret
+                  qr_code_url:
+                    type: string
+                    description: An otpauth URL for generating a QR code
+        '401':
+          $ref: '#/components/responses/Unauthorized'
+
+  /auth/2fa/enable:
+    post:
+      tags:
+        - Authentication
+      summary: Enable 2FA
+      description: Verify a code and enable 2FA for the authenticated user/subuser
+      operationId: enable2fa
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required: [code]
+              properties:
+                code:
+                  type: string
+                  description: The 6-digit TOTP code
+      responses:
+        '200':
+          description: 2FA enabled successfully
+        '400':
+          $ref: '#/components/responses/BadRequest'
+        '401':
+          $ref: '#/components/responses/Unauthorized'
+
+  /auth/2fa/disable:
+    post:
+      tags:
+        - Authentication
+      summary: Disable 2FA
+      description: Verify a code and disable 2FA for the authenticated user/subuser
+      operationId: disable2fa
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required: [code]
+              properties:
+                code:
+                  type: string
+                  description: The 6-digit TOTP code
+      responses:
+        '200':
+          description: 2FA disabled successfully
+        '400':
+          $ref: '#/components/responses/BadRequest'
+        '401':
+          $ref: '#/components/responses/Unauthorized'
+
+  /auth/2fa/verify:
+    post:
+      tags:
+        - Authentication
+      summary: Verify 2FA code during login
+      description: Complete the login process by verifying the 2FA code
+      operationId: verify2fa
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required: [2fa_token, code]
+              properties:
+                2fa_token:
+                  type: string
+                  description: The temporary 2FA verification token
+                code:
+                  type: string
+                  description: The 6-digit TOTP code
+      responses:
+        '200':
+          description: Login successful
+          content:
+            application/json:
+              schema:
+                oneOf:
+                  - type: object
+                    required: [token]
+                    properties:
+                      token:
+                        type: string
+                        description: Bearer authentication token (for users/employees)
+                  - type: object
+                    required: [session]
+                    properties:
+                      session:
+                        type: string
+                        description: Session token (for subusers)
         '400':
           $ref: '#/components/responses/BadRequest'
         '401':
@@ -6693,6 +7213,9 @@ components:
           type: string
           format: date-time
           nullable: true
+        two_factor_enabled:
+          type: boolean
+          description: Indicates if 2FA is enabled for this account
 
     PermissionNode:
       type: object
diff --git a/src/components/forms/auth/LoginForm.vue b/src/components/forms/auth/LoginForm.vue
index 28b0e3fa..9023b817 100644
--- a/src/components/forms/auth/LoginForm.vue
+++ b/src/components/forms/auth/LoginForm.vue
@@ -1,12 +1,24 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 import {API_URL} from "@/config.js";
 import { parseError, errors, clearErrors, addError, getError } from "@/components/request/HandleGlobalError.vue";
 import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { isPasskeySupported, authenticateWithPasskey } from "@/services/PasskeyAuthService.js";
+
+const { t } = useI18n();
+
+// Passkey support
+const passkeySupported = ref(false);
+const isPasskeyLoading = ref(false);
+
+onMounted(() => {
+  passkeySupported.value = isPasskeySupported();
+});
 
 const customer_number = ref();
 const password = ref('');
@@ -42,6 +54,25 @@ const doNothing = () => {
   // Do nothing
 };
 
+// Passkey login
+const loginWithPasskey = async () => {
+  isPasskeyLoading.value = true;
+  try {
+    const result = await authenticateWithPasskey('user');
+    if (result.token) {
+      localStorage.setItem('token', result.token);
+      successMessage.value = "Du er nu logget ind!";
+      setTimeout(() => {
+        router.go(0);
+      }, 500);
+    }
+  } catch (e) {
+    addError('auth', e.message || t('passkeys.login_failed'));
+  } finally {
+    isPasskeyLoading.value = false;
+  }
+};
+
 const reCAPTCHA_data = ref({
   enabled: false,
   site_key: '',
@@ -106,6 +137,24 @@ SessionUser.auth.reCAPTCHA.preCheck.get().then((response) => {
     <router-link :to="{name: 'password-reset'}" class="" id="forgot-password-button">{{ $t('auth.forgot_password') }}</router-link>
     <LoadButtonWhileAwait :loadFunction="login" class="submit" id="login-button">{{ $t('auth.login') }}</LoadButtonWhileAwait>
     <router-link :to="{name: 'loginqr'}" class="submit">{{ $t('auth.login_with_qr_code') }}</router-link>
+    
+    <!-- Passkey login button -->
+    <button 
+      v-if="passkeySupported"
+      type="button" 
+      class="submit passkey-btn" 
+      @click="loginWithPasskey"
+      :disabled="isPasskeyLoading"
+      id="passkey-login-button"
+    >
+      <span class="icon" v-if="!isPasskeyLoading">
+        <i class="fas fa-fingerprint"></i>
+      </span>
+      <span class="icon" v-else>
+        <i class="fas fa-spinner fa-spin"></i>
+      </span>
+      <span>{{ $t('passkeys.login_with_passkey') }}</span>
+    </button>
   </form>
 </template>
 <style scoped>
diff --git a/src/components/forms/auth/SubuserLoginForm.vue b/src/components/forms/auth/SubuserLoginForm.vue
index a9f9790e..8db9c821 100644
--- a/src/components/forms/auth/SubuserLoginForm.vue
+++ b/src/components/forms/auth/SubuserLoginForm.vue
@@ -1,12 +1,21 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { parseError, getError } from "@/components/request/HandleGlobalError.vue";
+import { parseError, getError, addError } from "@/components/request/HandleGlobalError.vue";
 import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { isPasskeySupported, authenticateWithPasskey } from "@/services/PasskeyAuthService.js";
 
 const { t } = useI18n();
 
+// Passkey support
+const passkeySupported = ref(false);
+const isPasskeyLoading = ref(false);
+
+onMounted(() => {
+  passkeySupported.value = isPasskeySupported();
+});
+
 // Login method selection
 const loginMethod = ref('phone'); // 'phone' or 'username'
 
@@ -43,6 +52,23 @@ const login = async () => {
 const doNothing = () => {
   // Prevent form submission
 };
+
+// Passkey login
+const loginWithPasskey = async () => {
+  isPasskeyLoading.value = true;
+  try {
+    const result = await authenticateWithPasskey('subuser');
+    if (result.token) {
+      localStorage.setItem('token', result.token);
+      // Reload the page to update the UI
+      window.location.reload();
+    }
+  } catch (e) {
+    addError('auth', e.message || t('passkeys.login_failed'));
+  } finally {
+    isPasskeyLoading.value = false;
+  }
+};
 </script>
 
 <template>
@@ -114,6 +140,24 @@ const doNothing = () => {
     <LoadButtonWhileAwait :loadFunction="login" class="submit" id="subuser-login-button">
       {{ t('auth.login') }}
     </LoadButtonWhileAwait>
+
+    <!-- Passkey login button -->
+    <button 
+      v-if="passkeySupported"
+      type="button" 
+      class="submit passkey-btn" 
+      @click="loginWithPasskey"
+      :disabled="isPasskeyLoading"
+      id="subuser-passkey-login-button"
+    >
+      <span class="icon" v-if="!isPasskeyLoading">
+        <i class="fas fa-fingerprint"></i>
+      </span>
+      <span class="icon" v-else>
+        <i class="fas fa-spinner fa-spin"></i>
+      </span>
+      <span>{{ t('passkeys.login_with_passkey') }}</span>
+    </button>
     
     <router-link :to="{name: 'login'}" class="link">{{ t('auth.login_as_customer') }}</router-link>
   </form>
diff --git a/src/i18n/locales/da.json b/src/i18n/locales/da.json
index a8db831a..5008ac27 100644
--- a/src/i18n/locales/da.json
+++ b/src/i18n/locales/da.json
@@ -3148,6 +3148,7 @@
     "actions": "Actions",
     "bookings": {
       "actions": "Actions",
+      "booking": "Booking",
       "booking_cancelled": "The booking has been cancelled",
       "booking_id_incorrect": "The booking ID is incorrect",
       "booking_id_required": "You must enter the booking ID to complete the wash without wash certificate",
@@ -3818,5 +3819,35 @@
       "subtitle": "Her kan du håndtere XLVask integrationen",
       "title": "XLVask administration"
     }
+  },
+  "passkeys": {
+    "title": "Adgangsnøgler",
+    "description": "Brug adgangsnøgler til at logge sikkert ind med biometri som Face ID, Touch ID eller din enheds PIN-kode.",
+    "add_passkey": "Tilføj adgangsnøgle",
+    "rename_passkey": "Omdøb adgangsnøgle",
+    "delete_passkey": "Slet adgangsnøgle",
+    "no_passkeys": "Du har ikke tilføjet nogen adgangsnøgler endnu. Tilføj en for at aktivere login uden adgangskode.",
+    "name_label": "Adgangsnøgle navn",
+    "name_placeholder": "f.eks. Min iPhone, Arbejdslaptop",
+    "name_required": "Indtast venligst et navn til din adgangsnøgle",
+    "unnamed": "Unavngivet adgangsnøgle",
+    "created": "Oprettet",
+    "rename": "Omdøb",
+    "delete": "Slet",
+    "cancel": "Annuller",
+    "success": "Succes",
+    "error": "Fejl",
+    "added_successfully": "Adgangsnøgle er tilføjet.",
+    "renamed_successfully": "Adgangsnøgle er omdøbt.",
+    "deleted_successfully": "Adgangsnøgle er slettet.",
+    "delete_confirm": "Er du sikker på, at du vil slette adgangsnøglen \"{name}\"? Dette kan ikke fortrydes.",
+    "registration_failed": "Kunne ikke registrere adgangsnøgle. Prøv venligst igen.",
+    "registration_cancelled": "Registrering af adgangsnøgle blev annulleret.",
+    "rename_failed": "Kunne ikke omdøbe adgangsnøgle. Prøv venligst igen.",
+    "delete_failed": "Kunne ikke slette adgangsnøgle. Prøv venligst igen.",
+    "not_supported": "Adgangsnøgler understøttes ikke på denne enhed.",
+    "not_supported_browser": "Din browser understøtter ikke adgangsnøgler. Prøv venligst at bruge en moderne browser som Chrome, Safari, Firefox eller Edge.",
+    "login_with_passkey": "Log ind med adgangsnøgle",
+    "login_failed": "Kunne ikke logge ind med adgangsnøgle. Prøv venligst igen."
   }
 }
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index 50b3c3a7..e9d1c147 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -3136,6 +3136,7 @@
     "actions": "Actions",
     "bookings": {
       "actions": "Actions",
+      "booking": "Buchung",
       "booking_cancelled": "The booking has been cancelled",
       "booking_id_incorrect": "The booking ID is incorrect",
       "booking_id_required": "You must enter the booking ID to complete the wash without wash certificate",
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 7a62a769..49557fc2 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -3143,6 +3143,7 @@
     "actions": "Actions",
     "bookings": {
       "actions": "Actions",
+      "booking": "Booking",
       "booking_cancelled": "The booking has been cancelled",
       "booking_id_incorrect": "The booking ID is incorrect",
       "booking_id_required": "You must enter the booking ID to complete the wash without wash certificate",
@@ -3813,5 +3814,35 @@
       "subtitle": "Her kan du håndtere XLVask integrationen",
       "title": "XLVask administration"
     }
+  },
+  "passkeys": {
+    "title": "Passkeys",
+    "description": "Use passkeys to sign in securely with biometrics like Face ID, Touch ID, or your device PIN.",
+    "add_passkey": "Add Passkey",
+    "rename_passkey": "Rename Passkey",
+    "delete_passkey": "Delete Passkey",
+    "no_passkeys": "You haven't added any passkeys yet. Add one to enable passwordless sign-in.",
+    "name_label": "Passkey Name",
+    "name_placeholder": "e.g., My iPhone, Work Laptop",
+    "name_required": "Please enter a name for your passkey",
+    "unnamed": "Unnamed passkey",
+    "created": "Created",
+    "rename": "Rename",
+    "delete": "Delete",
+    "cancel": "Cancel",
+    "success": "Success",
+    "error": "Error",
+    "added_successfully": "Passkey has been added successfully.",
+    "renamed_successfully": "Passkey has been renamed successfully.",
+    "deleted_successfully": "Passkey has been deleted successfully.",
+    "delete_confirm": "Are you sure you want to delete the passkey \"{name}\"? This cannot be undone.",
+    "registration_failed": "Failed to register passkey. Please try again.",
+    "registration_cancelled": "Passkey registration was cancelled.",
+    "rename_failed": "Failed to rename passkey. Please try again.",
+    "delete_failed": "Failed to delete passkey. Please try again.",
+    "not_supported": "Passkeys are not supported on this device.",
+    "not_supported_browser": "Your browser doesn't support passkeys. Please try using a modern browser like Chrome, Safari, Firefox, or Edge.",
+    "login_with_passkey": "Sign in with Passkey",
+    "login_failed": "Failed to sign in with passkey. Please try again."
   }
 }
diff --git a/src/i18n/locales/no.json b/src/i18n/locales/no.json
index 7b3720c2..73d281aa 100644
--- a/src/i18n/locales/no.json
+++ b/src/i18n/locales/no.json
@@ -3136,6 +3136,7 @@
     "actions": "Actions",
     "bookings": {
       "actions": "Actions",
+      "booking": "Booking",
       "booking_cancelled": "The booking has been cancelled",
       "booking_id_incorrect": "The booking ID is incorrect",
       "booking_id_required": "You must enter the booking ID to complete the wash without wash certificate",
@@ -3806,5 +3807,35 @@
       "subtitle": "Her kan du håndtere XLVask integrationen",
       "title": "XLVask administration"
     }
+  },
+  "passkeys": {
+    "title": "Passnøkler",
+    "description": "Bruk passnøkler for å logge inn sikkert med biometri som Face ID, Touch ID eller enhetens PIN-kode.",
+    "add_passkey": "Legg til passnøkkel",
+    "rename_passkey": "Gi nytt navn til passnøkkel",
+    "delete_passkey": "Slett passnøkkel",
+    "no_passkeys": "Du har ikke lagt til noen passnøkler ennå. Legg til en for å aktivere passordløs pålogging.",
+    "name_label": "Passnøkkel navn",
+    "name_placeholder": "f.eks. Min iPhone, Jobb-laptop",
+    "name_required": "Vennligst skriv inn et navn for passnøkkelen din",
+    "unnamed": "Navnløs passnøkkel",
+    "created": "Opprettet",
+    "rename": "Gi nytt navn",
+    "delete": "Slett",
+    "cancel": "Avbryt",
+    "success": "Suksess",
+    "error": "Feil",
+    "added_successfully": "Passnøkkel er lagt til.",
+    "renamed_successfully": "Passnøkkel har fått nytt navn.",
+    "deleted_successfully": "Passnøkkel er slettet.",
+    "delete_confirm": "Er du sikker på at du vil slette passnøkkelen \"{name}\"? Dette kan ikke angres.",
+    "registration_failed": "Kunne ikke registrere passnøkkel. Vennligst prøv igjen.",
+    "registration_cancelled": "Registrering av passnøkkel ble avbrutt.",
+    "rename_failed": "Kunne ikke gi nytt navn til passnøkkel. Vennligst prøv igjen.",
+    "delete_failed": "Kunne ikke slette passnøkkel. Vennligst prøv igjen.",
+    "not_supported": "Passnøkler støttes ikke på denne enheten.",
+    "not_supported_browser": "Nettleseren din støtter ikke passnøkler. Vennligst prøv en moderne nettleser som Chrome, Safari, Firefox eller Edge.",
+    "login_with_passkey": "Logg inn med passnøkkel",
+    "login_failed": "Kunne ikke logge inn med passnøkkel. Vennligst prøv igjen."
   }
 }
diff --git a/src/i18n/locales/sv.json b/src/i18n/locales/sv.json
index cc95e281..96c9247d 100644
--- a/src/i18n/locales/sv.json
+++ b/src/i18n/locales/sv.json
@@ -3143,6 +3143,7 @@
     "actions": "Actions",
     "bookings": {
       "actions": "Actions",
+      "booking": "Bokning",
       "booking_cancelled": "The booking has been cancelled",
       "booking_id_incorrect": "The booking ID is incorrect",
       "booking_id_required": "You must enter the booking ID to complete the wash without wash certificate",
@@ -3813,5 +3814,35 @@
       "subtitle": "Her kan du håndtere XLVask integrationen",
       "title": "XLVask administration"
     }
+  },
+  "passkeys": {
+    "title": "Lösennycklar",
+    "description": "Använd lösennycklar för att logga in säkert med biometri som Face ID, Touch ID eller enhetens PIN-kod.",
+    "add_passkey": "Lägg till lösennyckel",
+    "rename_passkey": "Byt namn på lösennyckel",
+    "delete_passkey": "Ta bort lösennyckel",
+    "no_passkeys": "Du har inte lagt till några lösennycklar ännu. Lägg till en för att aktivera lösenordsfri inloggning.",
+    "name_label": "Lösennyckelsnamn",
+    "name_placeholder": "t.ex. Min iPhone, Jobbdator",
+    "name_required": "Ange ett namn för din lösennyckel",
+    "unnamed": "Namnlös lösennyckel",
+    "created": "Skapad",
+    "rename": "Byt namn",
+    "delete": "Ta bort",
+    "cancel": "Avbryt",
+    "success": "Lyckades",
+    "error": "Fel",
+    "added_successfully": "Lösennyckel har lagts till.",
+    "renamed_successfully": "Lösennyckel har bytt namn.",
+    "deleted_successfully": "Lösennyckel har tagits bort.",
+    "delete_confirm": "Är du säker på att du vill ta bort lösennyckeln \"{name}\"? Detta kan inte ångras.",
+    "registration_failed": "Kunde inte registrera lösennyckel. Försök igen.",
+    "registration_cancelled": "Registrering av lösennyckel avbröts.",
+    "rename_failed": "Kunde inte byta namn på lösennyckel. Försök igen.",
+    "delete_failed": "Kunde inte ta bort lösennyckel. Försök igen.",
+    "not_supported": "Lösennycklar stöds inte på denna enhet.",
+    "not_supported_browser": "Din webbläsare stöder inte lösennycklar. Prova en modern webbläsare som Chrome, Safari, Firefox eller Edge.",
+    "login_with_passkey": "Logga in med lösennyckel",
+    "login_failed": "Kunde inte logga in med lösennyckel. Försök igen."
   }
 }
diff --git a/src/services/PasskeyAuthService.js b/src/services/PasskeyAuthService.js
new file mode 100644
index 00000000..ce1da187
--- /dev/null
+++ b/src/services/PasskeyAuthService.js
@@ -0,0 +1,172 @@
+/**
+ * Passkey Authentication Service
+ * 
+ * Handles WebAuthn passkey authentication for users and subusers.
+ * Uses the WebAuthn API for passwordless authentication.
+ */
+
+import axios from 'axios';
+import { API_URL } from '@/config.js';
+
+/**
+ * Check if WebAuthn is supported in the current browser
+ * @returns {boolean}
+ */
+export const isPasskeySupported = () => {
+  return window.PublicKeyCredential !== undefined;
+};
+
+/**
+ * Convert an ArrayBuffer to Base64URL string
+ * @param {ArrayBuffer} buffer 
+ * @returns {string}
+ */
+const arrayBufferToBase64URL = (buffer) => {
+  const bytes = new Uint8Array(buffer);
+  let str = '';
+  for (const byte of bytes) {
+    str += String.fromCharCode(byte);
+  }
+  return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+};
+
+/**
+ * Convert a Base64URL string to ArrayBuffer
+ * @param {string} base64url 
+ * @returns {ArrayBuffer}
+ */
+const base64URLToArrayBuffer = (base64url) => {
+  const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
+  const paddedBase64 = base64 + '='.repeat((4 - base64.length % 4) % 4);
+  const binary = atob(paddedBase64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes.buffer;
+};
+
+/**
+ * Request authentication challenge from server
+ * @param {string} userType - 'user' or 'subuser'
+ * @returns {Promise<Object>} Challenge options from server
+ */
+const getAuthenticationChallenge = async (userType = 'user') => {
+  const endpoint = userType === 'subuser' 
+    ? '/auth/passkey/challenge/subuser'
+    : '/auth/passkey/challenge';
+    
+  const response = await axios.post(API_URL + endpoint);
+  return response.data.data;
+};
+
+/**
+ * Send authentication assertion to server for verification
+ * @param {Object} assertion - The WebAuthn assertion
+ * @param {string} userType - 'user' or 'subuser'
+ * @returns {Promise<Object>} Authentication response with token
+ */
+const verifyAuthentication = async (assertion, userType = 'user') => {
+  const endpoint = userType === 'subuser' 
+    ? '/auth/passkey/verify/subuser'
+    : '/auth/passkey/verify';
+    
+  const response = await axios.post(API_URL + endpoint, assertion);
+  return response.data.data;
+};
+
+/**
+ * Authenticate using a passkey
+ * @param {string} userType - 'user' or 'subuser'
+ * @returns {Promise<{token: string}>} Authentication result with token
+ * @throws {Error} If authentication fails
+ */
+export const authenticateWithPasskey = async (userType = 'user') => {
+  if (!isPasskeySupported()) {
+    throw new Error('Passkeys are not supported on this device');
+  }
+
+  try {
+    // Get challenge from server
+    const challengeOptions = await getAuthenticationChallenge(userType);
+    
+    // Prepare credential request options
+    const publicKeyCredentialRequestOptions = {
+      challenge: base64URLToArrayBuffer(challengeOptions.challenge),
+      timeout: 60000,
+      userVerification: 'preferred',
+      rpId: window.location.hostname,
+    };
+
+    // Add allowCredentials if provided by server
+    if (challengeOptions.allowCredentials && challengeOptions.allowCredentials.length > 0) {
+      publicKeyCredentialRequestOptions.allowCredentials = challengeOptions.allowCredentials.map(cred => ({
+        id: base64URLToArrayBuffer(cred.id),
+        type: 'public-key',
+        transports: cred.transports || ['internal', 'hybrid'],
+      }));
+    }
+
+    // Request credential from authenticator
+    const credential = await navigator.credentials.get({
+      publicKey: publicKeyCredentialRequestOptions,
+    });
+
+    if (!credential) {
+      throw new Error('No credential returned from authenticator');
+    }
+
+    // Prepare assertion for server verification
+    const assertion = {
+      credential_id: arrayBufferToBase64URL(credential.rawId),
+      authenticator_data: arrayBufferToBase64URL(credential.response.authenticatorData),
+      client_data_json: arrayBufferToBase64URL(credential.response.clientDataJSON),
+      signature: arrayBufferToBase64URL(credential.response.signature),
+      user_handle: credential.response.userHandle 
+        ? arrayBufferToBase64URL(credential.response.userHandle) 
+        : null,
+    };
+
+    // Send assertion to server for verification
+    const result = await verifyAuthentication(assertion, userType);
+    
+    return result;
+  } catch (error) {
+    // Handle specific WebAuthn errors
+    if (error.name === 'NotAllowedError') {
+      throw new Error('Authentication was cancelled or not allowed');
+    } else if (error.name === 'SecurityError') {
+      throw new Error('Security error during authentication');
+    } else if (error.name === 'NotSupportedError') {
+      throw new Error('Passkey not supported');
+    }
+    
+    // Re-throw other errors
+    throw error;
+  }
+};
+
+/**
+ * Check if the user has any registered passkeys
+ * This is a convenience method to conditionally show passkey login options
+ * Note: This requires the user to be authenticated first
+ * @returns {Promise<boolean>}
+ */
+export const hasRegisteredPasskeys = async () => {
+  try {
+    const response = await axios.get(API_URL + '/account/security/passkeys', {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem('token')}`,
+      },
+    });
+    return response.data.data && response.data.data.length > 0;
+  } catch {
+    return false;
+  }
+};
+
+export default {
+  isPasskeySupported,
+  authenticateWithPasskey,
+  hasRegisteredPasskeys,
+};
diff --git a/src/views/dashboards/UserDashboard.vue b/src/views/dashboards/UserDashboard.vue
index fb7fb28d..89d3f8ca 100644
--- a/src/views/dashboards/UserDashboard.vue
+++ b/src/views/dashboards/UserDashboard.vue
@@ -232,7 +232,7 @@ const isPermissionsLoading = computed(() => {
           </template>
           <template #footer>
             <div class="card-footer-item">
-              <router-link to="/user/vehicles" class="button is-link is-fullwidth" :class="classes.button">
+              <router-link to="/user/vehicles" class="button is-link is-fullwidth" :class="classes.button" id="add-vehicle-button">
                 {{ $t('user_home.create_vehicle') }}
               </router-link>
             </div>
@@ -258,7 +258,7 @@ const isPermissionsLoading = computed(() => {
           </template>
           <template #footer>
             <div class="card-footer-item">
-              <router-link to="/user/orders" class="button is-link is-fullwidth" :class="classes.button">
+              <router-link to="/user/orders" class="button is-link is-fullwidth" :class="classes.button" id="download-certificates-button">
                 {{ $t('user_home.download_certificates') }}
               </router-link>
             </div>
@@ -284,7 +284,7 @@ const isPermissionsLoading = computed(() => {
           </template>
           <template #footer>
             <div class="card-footer-item">
-              <router-link to="/user/invoices" class="button is-link is-fullwidth" :class="classes.button">
+              <router-link to="/user/invoices" class="button is-link is-fullwidth" :class="classes.button" id="download-invoices-button">
                 {{ $t('user_home.download_invoices') }}
               </router-link>
             </div>
diff --git a/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectVehicles.vue b/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectVehicles.vue
index de681f85..407163fa 100644
--- a/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectVehicles.vue
+++ b/src/views/dashboards/departmentDashboard/modules/time-bookings/book/mobile/elements/TimeBookingsElementSelectVehicles.vue
@@ -30,9 +30,9 @@ const emits = defineEmits([
   'setInputFocus'
 ]);
 
-// Generate a unique ID for each input field
-const reg1InputId = ref(`reg1-input-${Math.random().toString(36).substr(2, 9)}`);
-const reg2InputId = ref(`reg2-input-${Math.random().toString(36).substr(2, 9)}`);
+// Stable IDs for each input field (for testing)
+const reg1InputId = ref('reg1-input');
+const reg2InputId = ref('reg2-input');
 
 const onClickSelectReg1 = () => {
   emits('update:isReg1Input', true);
@@ -105,7 +105,7 @@ watch(() => props.reg1, (newValue) => {
   </div>
   <div class="field has-addons">
     <div class="control is-expanded has-icons-left" :class="{ 'is-fixed-half': !hideTypeSelect }">
-      <button class="button has-icons-left is-fullwidth default-button" @click="onClickSelectReg1"
+      <button id="reg1-button" class="button has-icons-left is-fullwidth default-button" @click="onClickSelectReg1"
               :class="{ 'is-link': reg1 !== '' }" v-show="!isReg1Input">
             <span>
               {{ reg1 === '' ? $t('time_bookings.add_reg_number') : reg1 }}
@@ -134,9 +134,9 @@ watch(() => props.reg1, (newValue) => {
     </div>
     <div class="control is-expanded has-icons-left has-icons-right is-fixed-half" v-show="!hideTypeSelect">
       <div class="select is-fullwidth has-icons-right has-icons-left">
-        <select v-model="reg1TypeVmodel" :disabled="reg1 === ''">
+        <select id="reg1-type-select" v-model="reg1TypeVmodel" :disabled="reg1 === ''">
           <option :value="null" disabled>{{ $t('time_bookings.select_vehicle_type') }}</option>
-          <option v-for="type in availableVehicleTypes" :key="type.id" :value="type" :disabled="reg2Type != null && type.id === reg2Type.id">
+          <option v-for="type in availableVehicleTypes" :key="type.id" :value="type" :disabled="reg2Type != null && type.id === reg2Type.id" :id="`reg1-type-option-${type.id}`">
             {{ type.name }}
           </option>
         </select>
@@ -148,7 +148,7 @@ watch(() => props.reg1, (newValue) => {
   </div>
   <div class="field has-addons" v-show="reg1 !== ''">
     <div class="control has-icons-left is-expanded" :class="{ 'is-fixed-half': !hideTypeSelect }">
-      <button class="button has-icons-left is-fullwidth default-button" @click="onClickSelectReg2"
+      <button id="reg2-button" class="button has-icons-left is-fullwidth default-button" @click="onClickSelectReg2"
               :class="{ 'is-link': reg2 !== '' }" v-show="!isReg2Input">
             <span>
               {{ reg2 === '' ? $t('time_bookings.add_reg_number') : reg2 }}
@@ -175,9 +175,9 @@ watch(() => props.reg1, (newValue) => {
     </div>
     <div class="control is-expanded has-icons-left is-fixed-half" v-show="!hideTypeSelect">
       <div class="select is-fullwidth has-icons-right has-icons-left">
-        <select v-model="reg2TypeVmodel" :disabled="reg2 === ''">
+        <select id="reg2-type-select" v-model="reg2TypeVmodel" :disabled="reg2 === ''">
           <option :value="null" disabled>{{ $t('time_bookings.select_vehicle_type') }}</option>
-          <option v-for="type in availableVehicleTypes" :key="type.id" :value="type" :disabled="reg1Type != null && type.id === reg1Type.id">
+          <option v-for="type in availableVehicleTypes" :key="type.id" :value="type" :disabled="reg1Type != null && type.id === reg1Type.id" :id="`reg2-type-option-${type.id}`">
             {{ type.name }}
           </option>
         </select>
diff --git a/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue b/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue
index ccec12e1..4971e413 100644
--- a/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue
+++ b/src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue
@@ -1324,7 +1324,7 @@ watch(customerNumber, (newVal) => {
                   </ul>
                 </span>
                 <div class="buttons">
-                  <button class="button is-fullwidth is-primary" @click="openSummary" :disabled="missingFields.length > 0">
+                  <button id="go-to-confirmation-button" class="button is-fullwidth is-primary" @click="openSummary" :disabled="missingFields.length > 0">
                     {{ $t('user_dashboard.bookings.book.go_to_confirmation') }}
                   </button>
                   <Cancel class="is-fullwidth" />
@@ -2024,8 +2024,8 @@ watch(customerNumber, (newVal) => {
       <div class="booking-summary-header">
         <p id="booking-summary-title" class="title is-5 mb-0">{{ $t('user_dashboard.bookings.book.confirm_booking') }}</p>
         <div class="buttons">
-          <button class="button" @click="onSummaryBack">{{ $t('user_dashboard.bookings.book.back') }}</button>
-          <button class="button is-primary" @click="onSummaryConfirm">{{ $t('user_dashboard.bookings.book.confirm_booking') }}</button>
+          <button id="summary-back-button" class="button" @click="onSummaryBack">{{ $t('user_dashboard.bookings.book.back') }}</button>
+          <button id="confirm-booking-button" class="button is-primary" @click="onSummaryConfirm">{{ $t('user_dashboard.bookings.book.confirm_booking') }}</button>
         </div>
       </div>
       <div class="booking-summary-body">
diff --git a/src/views/dashboards/userDashboard/profile/UserProfile.vue b/src/views/dashboards/userDashboard/profile/UserProfile.vue
index ed27b4d1..890e0a17 100644
--- a/src/views/dashboards/userDashboard/profile/UserProfile.vue
+++ b/src/views/dashboards/userDashboard/profile/UserProfile.vue
@@ -10,6 +10,8 @@ import { useI18n } from 'vue-i18n';
 import Swal from "sweetalert2";
 import MicrosoftAuthenticationBox
   from "@/views/dashboards/userDashboard/profile/displays/MicrosoftAuthentication/MicrosoftAuthenticationBox.vue";
+import PasskeyManagement
+  from "@/views/dashboards/userDashboard/profile/displays/Passkeys/PasskeyManagement.vue";
 import ShowErrorField from "@/components/global/ShowErrorField.vue";
 import SubuserGrantSelector from "@/components/session/subuser/SubuserGrantSelector.vue";
 import { parseError, removeError, addError } from "@/components/request/HandleGlobalError.vue";
@@ -627,6 +629,16 @@ const onClickSaveWashCertificateEmail = async () => {
           </span>
           </button>
         </div>
+        <!-- Passkeys -->
+        <hr class="my-4"/>
+        <h4 class="title is-6">
+          <span class="icon">
+            <i class="fas fa-fingerprint"></i>
+          </span>
+          <span>{{ $t('passkeys.title') }}</span>
+        </h4>
+        <p class="subtitle is-7 has-text-grey">{{ $t('passkeys.description') }}</p>
+        <PasskeyManagement />
       </ConfigurationCategory>
       <!-- Subuser - Profile Information -->
       <ConfigurationCategory
@@ -727,6 +739,16 @@ const onClickSaveWashCertificateEmail = async () => {
             <span class="ml-2">{{ $t('user_dashboard.profile.security.logout') }}</span>
           </span>
         </button>
+        <!-- Passkeys for subusers -->
+        <hr class="my-4"/>
+        <h4 class="title is-6">
+          <span class="icon">
+            <i class="fas fa-fingerprint"></i>
+          </span>
+          <span>{{ $t('passkeys.title') }}</span>
+        </h4>
+        <p class="subtitle is-7 has-text-grey">{{ $t('passkeys.description') }}</p>
+        <PasskeyManagement />
       </ConfigurationCategory>
       <!-- Subuser - Grant selection -->
       <ConfigurationCategory
diff --git a/src/views/dashboards/userDashboard/profile/displays/Passkeys/PasskeyManagement.vue b/src/views/dashboards/userDashboard/profile/displays/Passkeys/PasskeyManagement.vue
new file mode 100644
index 00000000..048013ad
--- /dev/null
+++ b/src/views/dashboards/userDashboard/profile/displays/Passkeys/PasskeyManagement.vue
@@ -0,0 +1,411 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import Swal from "sweetalert2";
+
+const { t } = useI18n();
+const passkeys = ref([]);
+const isLoading = ref(false);
+const isSupported = ref(false);
+
+// Check if WebAuthn is supported
+onMounted(() => {
+  isSupported.value = window.PublicKeyCredential !== undefined;
+  if (isSupported.value) {
+    loadPasskeys();
+  }
+});
+
+/**
+ * Load passkeys from the server
+ */
+const loadPasskeys = async () => {
+  isLoading.value = true;
+  try {
+    const response = await SessionUser.request('/account/security/passkeys', 'GET');
+    passkeys.value = response.data || [];
+  } catch (error) {
+    console.error('Failed to load passkeys:', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+/**
+ * Convert an ArrayBuffer to Base64URL string
+ */
+const arrayBufferToBase64URL = (buffer) => {
+  const bytes = new Uint8Array(buffer);
+  let str = '';
+  for (const byte of bytes) {
+    str += String.fromCharCode(byte);
+  }
+  return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+};
+
+/**
+ * Convert a Base64URL string to ArrayBuffer
+ */
+const base64URLToArrayBuffer = (base64url) => {
+  const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
+  const paddedBase64 = base64 + '='.repeat((4 - base64.length % 4) % 4);
+  const binary = atob(paddedBase64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes.buffer;
+};
+
+/**
+ * Register a new passkey
+ */
+const registerPasskey = async () => {
+  if (!isSupported.value) {
+    await Swal.fire({
+      title: t('passkeys.error'),
+      text: t('passkeys.not_supported'),
+      icon: 'error',
+    });
+    return;
+  }
+
+  // Ask for passkey name
+  const nameResult = await Swal.fire({
+    title: t('passkeys.add_passkey'),
+    input: 'text',
+    inputLabel: t('passkeys.name_label'),
+    inputPlaceholder: t('passkeys.name_placeholder'),
+    showCancelButton: true,
+    inputValidator: (value) => {
+      if (!value) {
+        return t('passkeys.name_required');
+      }
+    },
+  });
+
+  if (!nameResult.isConfirmed) {
+    return;
+  }
+
+  const passkeyName = nameResult.value;
+  isLoading.value = true;
+
+  try {
+    // Generate a random challenge (in production, this should come from the server)
+    const challenge = new Uint8Array(32);
+    crypto.getRandomValues(challenge);
+
+    // Get user ID from session - all SessionUser properties are refs, need .value
+    const userId = SessionUser.user.id?.value || SessionUser.subuser?.id?.value || Date.now();
+    const userName = SessionUser.user.email?.value || SessionUser.subuser?.username?.value || 'user';
+    const displayName = SessionUser.user.display_name?.value || SessionUser.subuser?.name?.value || userName;
+
+    // Create credential options
+    const publicKeyCredentialCreationOptions = {
+      challenge: challenge,
+      rp: {
+        name: "Pleno",
+        id: window.location.hostname,
+      },
+      user: {
+        id: new TextEncoder().encode(String(userId)),
+        name: userName,
+        displayName: displayName,
+      },
+      pubKeyCredParams: [
+        { alg: -7, type: "public-key" },   // ES256
+        { alg: -257, type: "public-key" }, // RS256
+      ],
+      authenticatorSelection: {
+        authenticatorAttachment: "platform",
+        userVerification: "preferred",
+        residentKey: "preferred",
+      },
+      timeout: 60000,
+      attestation: "none",
+    };
+
+    // Create the credential
+    const credential = await navigator.credentials.create({
+      publicKey: publicKeyCredentialCreationOptions,
+    });
+
+    if (!credential) {
+      throw new Error('Failed to create credential');
+    }
+
+    // Extract and encode the credential data
+    const credentialId = arrayBufferToBase64URL(credential.rawId);
+    const attestationObject = new Uint8Array(credential.response.attestationObject);
+    const clientDataJSON = new Uint8Array(credential.response.clientDataJSON);
+    
+    // Get transports if available
+    const transports = credential.response.getTransports ? credential.response.getTransports() : ['internal'];
+
+    // Determine the algorithm from the credential
+    const algorithm = 'ES256'; // Default, as most platform authenticators use ES256
+
+    // Send to server
+    const response = await SessionUser.request('/account/security/passkeys', 'POST', {
+      credential_id: credentialId,
+      public_key: arrayBufferToBase64URL(attestationObject),
+      algorithm: algorithm,
+      transports: transports,
+      name: passkeyName,
+    });
+
+    if (response.status === 200) {
+      await Swal.fire({
+        title: t('passkeys.success'),
+        text: t('passkeys.added_successfully'),
+        icon: 'success',
+      });
+      await loadPasskeys();
+    }
+  } catch (error) {
+    console.error('Failed to register passkey:', error);
+    let errorMessage = t('passkeys.registration_failed');
+    
+    if (error.name === 'NotAllowedError') {
+      errorMessage = t('passkeys.registration_cancelled');
+    } else if (error.name === 'NotSupportedError') {
+      errorMessage = t('passkeys.not_supported');
+    }
+    
+    await Swal.fire({
+      title: t('passkeys.error'),
+      text: errorMessage,
+      icon: 'error',
+    });
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+/**
+ * Rename a passkey
+ */
+const renamePasskey = async (passkey) => {
+  const result = await Swal.fire({
+    title: t('passkeys.rename_passkey'),
+    input: 'text',
+    inputLabel: t('passkeys.name_label'),
+    inputValue: passkey.name || '',
+    inputPlaceholder: t('passkeys.name_placeholder'),
+    showCancelButton: true,
+    inputValidator: (value) => {
+      if (!value) {
+        return t('passkeys.name_required');
+      }
+    },
+  });
+
+  if (!result.isConfirmed) {
+    return;
+  }
+
+  isLoading.value = true;
+  try {
+    await SessionUser.request(`/account/security/passkeys/${passkey.id}`, 'PATCH', {
+      name: result.value,
+    });
+    await Swal.fire({
+      title: t('passkeys.success'),
+      text: t('passkeys.renamed_successfully'),
+      icon: 'success',
+    });
+    await loadPasskeys();
+  } catch (error) {
+    console.error('Failed to rename passkey:', error);
+    await Swal.fire({
+      title: t('passkeys.error'),
+      text: t('passkeys.rename_failed'),
+      icon: 'error',
+    });
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+/**
+ * Delete a passkey
+ */
+const deletePasskey = async (passkey) => {
+  const result = await Swal.fire({
+    title: t('passkeys.delete_passkey'),
+    text: t('passkeys.delete_confirm', { name: passkey.name || t('passkeys.unnamed') }),
+    icon: 'warning',
+    showCancelButton: true,
+    confirmButtonColor: '#d33',
+    confirmButtonText: t('passkeys.delete'),
+    cancelButtonText: t('passkeys.cancel'),
+  });
+
+  if (!result.isConfirmed) {
+    return;
+  }
+
+  isLoading.value = true;
+  try {
+    await SessionUser.request(`/account/security/passkeys/${passkey.id}`, 'DELETE');
+    await Swal.fire({
+      title: t('passkeys.success'),
+      text: t('passkeys.deleted_successfully'),
+      icon: 'success',
+    });
+    await loadPasskeys();
+  } catch (error) {
+    console.error('Failed to delete passkey:', error);
+    await Swal.fire({
+      title: t('passkeys.error'),
+      text: t('passkeys.delete_failed'),
+      icon: 'error',
+    });
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+/**
+ * Format date for display
+ */
+const formatDate = (dateString) => {
+  if (!dateString) return '-';
+  const date = new Date(dateString);
+  return date.toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+};
+
+/**
+ * Get transport icon
+ */
+const getTransportIcon = (transport) => {
+  const icons = {
+    'internal': 'fas fa-fingerprint',
+    'usb': 'fas fa-usb',
+    'nfc': 'fas fa-wifi',
+    'ble': 'fab fa-bluetooth',
+    'hybrid': 'fas fa-mobile-alt',
+  };
+  return icons[transport] || 'fas fa-key';
+};
+</script>
+
+<template>
+  <div class="passkey-management">
+    <!-- Not supported message -->
+    <div v-if="!isSupported" class="notification is-warning">
+      <span class="icon">
+        <i class="fas fa-exclamation-triangle"></i>
+      </span>
+      <span>{{ $t('passkeys.not_supported_browser') }}</span>
+    </div>
+
+    <!-- Loading state -->
+    <div v-else-if="isLoading" class="has-text-centered py-4">
+      <span class="icon is-large">
+        <i class="fas fa-spinner fa-pulse fa-2x"></i>
+      </span>
+    </div>
+
+    <template v-else>
+      <!-- Passkeys list -->
+      <div v-if="passkeys.length > 0" class="passkeys-list">
+        <div v-for="passkey in passkeys" :key="passkey.id" class="passkey-item box mb-3">
+          <div class="level is-mobile">
+            <div class="level-left">
+              <div class="level-item">
+                <span class="icon is-medium has-text-primary">
+                  <i :class="passkey.transports?.length ? getTransportIcon(passkey.transports[0]) : 'fas fa-key'"></i>
+                </span>
+              </div>
+              <div class="level-item">
+                <div>
+                  <p class="has-text-weight-semibold">
+                    {{ passkey.name || $t('passkeys.unnamed') }}
+                  </p>
+                  <p class="is-size-7 has-text-grey">
+                    {{ $t('passkeys.created') }}: {{ formatDate(passkey.created_at) }}
+                  </p>
+                  <p v-if="passkey.transports?.length" class="is-size-7 has-text-grey">
+                    <span v-for="(transport, index) in passkey.transports" :key="transport">
+                      <span class="icon is-small">
+                        <i :class="getTransportIcon(transport)"></i>
+                      </span>
+                      <span class="mr-2">{{ transport }}</span>
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="level-right">
+              <div class="level-item">
+                <div class="buttons">
+                  <button 
+                    class="button is-small is-info is-outlined" 
+                    @click="renamePasskey(passkey)"
+                    :title="$t('passkeys.rename')"
+                  >
+                    <span class="icon">
+                      <i class="fas fa-edit"></i>
+                    </span>
+                  </button>
+                  <button 
+                    class="button is-small is-danger is-outlined" 
+                    @click="deletePasskey(passkey)"
+                    :title="$t('passkeys.delete')"
+                  >
+                    <span class="icon">
+                      <i class="fas fa-trash"></i>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Empty state -->
+      <div v-else class="notification is-info is-light">
+        <span class="icon">
+          <i class="fas fa-info-circle"></i>
+        </span>
+        <span>{{ $t('passkeys.no_passkeys') }}</span>
+      </div>
+
+      <!-- Add passkey button -->
+      <button 
+        class="button is-primary mt-3" 
+        @click="registerPasskey"
+        :disabled="isLoading"
+      >
+        <span class="icon">
+          <i class="fas fa-plus"></i>
+        </span>
+        <span>{{ $t('passkeys.add_passkey') }}</span>
+      </button>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.passkey-management {
+  margin-top: 1rem;
+}
+
+.passkey-item {
+  padding: 1rem;
+}
+
+.passkeys-list .box:last-child {
+  margin-bottom: 0 !important;
+}
+</style>