diff --git a/package.json b/package.json
index 8df0c94..3c6fec5 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,8 @@
     "vue3-otp-input": "^0.4.1"
   },
   "devDependencies": {
+    "chromedriver": "^123.0.0",
+    "selenium-webdriver": "^4.18.1",
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^17.6.7",
     "@playwright/test": "^1.31.1",
diff --git a/selenium/banking/login-password.js b/selenium/banking/login-password.js
new file mode 100644
index 0000000..3df29a8
--- /dev/null
+++ b/selenium/banking/login-password.js
@@ -0,0 +1,49 @@
+import { Builder, By, Browser, until } from "selenium-webdriver";
+
+const email = "erwan.dano@transmitsecurity.com";
+const password = "mlkjmlkj";
+
+async function example() {
+  let driver = await new Builder().forBrowser(Browser.CHROME).build();
+  try {
+    // Navigate to URL
+    await driver.get("http://localhost:4000");
+
+    // Find the element with ID 'login-button' and click it
+    await driver.findElement(By.id("email")).click();
+
+    // Add more actions here
+  } finally {
+    // Close the browser after finishing
+    await driver.quit();
+  }
+}
+
+async function loginAction() {
+  let driver = await new Builder().forBrowser(Browser.CHROME).build();
+  try {
+    // Navigate to the login page
+    await driver.get("http://localhost:4000/login");
+
+    // Find the email input by ID and enter the email address
+    const emailInput = await driver.wait(
+      until.elementLocated(By.id("email")),
+      5000
+    );
+
+    await emailInput.sendKeys(email);
+
+    // Find the password input by ID and enter the password
+    await driver.findElement(By.id("password")).sendKeys(password);
+
+    // Find the submit button by ID and click it
+    await driver.findElement(By.id("passwordLoginSubmit")).click();
+  } catch (error) {
+    console.error(`An error occurred: ${error}`);
+  } finally {
+    // Uncomment the next line if you want the browser to close automatically
+    // await driver.quit();
+  }
+}
+
+loginAction();
diff --git a/selenium/banking/transaction.js b/selenium/banking/transaction.js
new file mode 100644
index 0000000..04a3971
--- /dev/null
+++ b/selenium/banking/transaction.js
@@ -0,0 +1,64 @@
+import { Builder, By, Browser, until } from "selenium-webdriver";
+
+const email = "erwan.dano@transmitsecurity.com";
+const password = "mlkjmlkj";
+
+async function loginAction() {
+  let driver = await new Builder().forBrowser(Browser.CHROME).build();
+  try {
+    // Navigate to the login page
+    await driver.get("http://localhost:4000/login");
+
+    // Find the email input by ID and enter the email address
+    const emailInput = await driver.wait(
+      until.elementLocated(By.id("email")),
+      5000
+    );
+
+    await emailInput.sendKeys(email);
+
+    // Find the password input by ID and enter the password
+    await driver.findElement(By.id("password")).sendKeys(password);
+
+    // Find the submit button by ID and click it
+    await driver.findElement(By.id("passwordLoginSubmit")).click();
+
+    // Wait
+    const transferButton = await driver.wait(
+      until.elementLocated(By.id("bankTransfer")),
+      5000
+    );
+    transferButton.click();
+
+    await driver.sleep(1000); // Pause for 1000 milliseconds (1 second)
+    await driver.findElement(By.css("#accountSelection > input")).click();
+
+    await driver.sleep(1200);
+    await driver.findElement(By.css("#\\34 0021194485 .uppercase")).click();
+
+    await driver.sleep(800);
+    await driver.findElement(By.css("#selectBeneficiary > input")).click();
+
+    await driver.sleep(1200);
+    await driver.findElement(By.id("Aeklys")).click();
+
+    await driver.sleep(900);
+    await driver.findElement(By.id("transferAmount")).click();
+
+    await driver.sleep(500);
+    await driver.findElement(By.id("transferAmount")).sendKeys("400");
+
+    await driver.sleep(1200);
+    await driver.findElement(By.id("validateForm")).click();
+
+    await driver.sleep(2000);
+    await driver.findElement(By.id("validateTransfer")).click();
+  } catch (error) {
+    console.error(`An error occurred: ${error}`);
+  } finally {
+    // Uncomment the next line if you want the browser to close automatically
+    // await driver.quit();
+  }
+}
+
+loginAction();
diff --git a/src/components/bank/AccountSelection.vue b/src/components/bank/AccountSelection.vue
index de04b8b..09d2e2b 100644
--- a/src/components/bank/AccountSelection.vue
+++ b/src/components/bank/AccountSelection.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import SelectAccountSummary from './SelectAccountSummary.vue'
-import type { Account } from '@/helpers/account'
+import { ref } from "vue";
+import SelectAccountSummary from "./SelectAccountSummary.vue";
+import type { Account } from "@/helpers/account";
 
 const props = defineProps<{
-  accounts: Account[]
-}>()
+  accounts: Account[];
+}>();
 
-const emits = defineEmits(['accountSelected'])
-const open = ref(false)
-const selectedAccount = ref<Account | null>(null)
+const emits = defineEmits(["accountSelected"]);
+const open = ref(false);
+const selectedAccount = ref<Account | null>(null);
 function selectAccount(account: Account) {
-  selectedAccount.value = account
-  open.value = false
-  emits('accountSelected', account)
+  selectedAccount.value = account;
+  open.value = false;
+  emits("accountSelected", account);
 }
 </script>
 
@@ -23,15 +23,22 @@ function selectAccount(account: Account) {
   >
     <input type="checkbox" v-model="open" />
     <div class="collapse-title font-medium">
-      <div v-if="selectedAccount === null">{{ $t('bank.transfer.selectSendingAccount') }}</div>
+      <div v-if="selectedAccount === null">
+        {{ $t("bank.transfer.selectSendingAccount") }}
+      </div>
       <div v-else>
-        <select-account-summary class="hover:cursor-pointer px-4 py-2" :account="selectedAccount" />
+        <select-account-summary
+          :id="selectedAccount.number"
+          class="hover:cursor-pointer px-4 py-2"
+          :account="selectedAccount"
+        />
       </div>
     </div>
     <div class="collapse-content px-0">
       <hr />
       <div v-for="account in props.accounts" v-bind:key="account.number">
         <select-account-summary
+          :id="account.number"
           @click="selectAccount(account)"
           class="hover:bg-base-200/50 hover:cursor-pointer px-4 py-2"
           :account="account"
diff --git a/src/components/bank/BankAccountSummary.vue b/src/components/bank/BankAccountSummary.vue
index ac397b6..9bf3bba 100644
--- a/src/components/bank/BankAccountSummary.vue
+++ b/src/components/bank/BankAccountSummary.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { CurrencyEuroIcon, EllipsisVerticalIcon } from '@heroicons/vue/24/outline'
+import {
+  CurrencyEuroIcon,
+  EllipsisVerticalIcon,
+} from "@heroicons/vue/24/outline";
 
 const props = defineProps<{
-  accountName: string
-  accountNumber: string
-  accountBalance: number
-}>()
+  accountName: string;
+  accountNumber: string;
+  accountBalance: number;
+}>();
 </script>
 <template>
   <div class="flex justify-between">
@@ -18,7 +21,7 @@ const props = defineProps<{
     </div>
     <div class="flex items-center">
       <div class="text-primary font-bold">
-        {{ $n(props.accountBalance, 'currency') }}
+        {{ $n(props.accountBalance, "currency") }}
       </div>
       <ellipsis-vertical-icon class="h-6 w-6" />
     </div>
diff --git a/src/components/bank/BankActionButton.vue b/src/components/bank/BankActionButton.vue
index 048fd1e..f573ed0 100644
--- a/src/components/bank/BankActionButton.vue
+++ b/src/components/bank/BankActionButton.vue
@@ -4,32 +4,32 @@ import {
   CreditCardIcon,
   PencilSquareIcon,
   ArrowsRightLeftIcon,
-} from '@heroicons/vue/24/outline'
-import { computed } from 'vue'
+} from "@heroicons/vue/24/outline";
+import { computed } from "vue";
 
 const props = defineProps<{
-  text: string
-  icon: 'Transfer' | 'Card' | 'Iban' | 'Document'
-}>()
+  text: string;
+  icon: "Transfer" | "Card" | "Iban" | "Document";
+}>();
 
 const componentToLoad = computed(() => {
   switch (props.icon) {
-    case 'Transfer':
-      return ArrowsRightLeftIcon
+    case "Transfer":
+      return ArrowsRightLeftIcon;
 
-    case 'Card':
-      return CreditCardIcon
+    case "Card":
+      return CreditCardIcon;
 
-    case 'Iban':
-      return PencilSquareIcon
+    case "Iban":
+      return PencilSquareIcon;
 
-    case 'Document':
-      return DocumentTextIcon
+    case "Document":
+      return DocumentTextIcon;
 
     default:
-      return CreditCardIcon
+      return CreditCardIcon;
   }
-})
+});
 </script>
 
 <template>
diff --git a/src/components/bank/BankHomeLoggedIn.vue b/src/components/bank/BankHomeLoggedIn.vue
index c6dd468..7fec1be 100644
--- a/src/components/bank/BankHomeLoggedIn.vue
+++ b/src/components/bank/BankHomeLoggedIn.vue
@@ -1,43 +1,53 @@
 <script setup lang="ts">
-import { EnvelopeIcon, EllipsisVerticalIcon, CurrencyEuroIcon } from '@heroicons/vue/24/outline'
-import BankActionButton from './BankActionButton.vue'
-import BankAccountSummary from './BankAccountSummary.vue'
-import { computed } from 'vue'
-import { userSessionStore } from '@/store/userSession'
+import {
+  EnvelopeIcon,
+  EllipsisVerticalIcon,
+  CurrencyEuroIcon,
+} from "@heroicons/vue/24/outline";
+import BankActionButton from "./BankActionButton.vue";
+import BankAccountSummary from "./BankAccountSummary.vue";
+import { computed } from "vue";
+import { userSessionStore } from "@/store/userSession";
 
-const sessionStore = userSessionStore()
+const sessionStore = userSessionStore();
 const lastLogin = computed(() => {
-  const d = new Date()
-  return d.toLocaleDateString()
-})
+  const d = new Date();
+  return d.toLocaleDateString();
+});
 
 const transactionDate1 = computed(() => {
-  const d = new Date()
-  return d.toLocaleDateString()
-})
+  const d = new Date();
+  return d.toLocaleDateString();
+});
 
 const transactionDate2 = computed(() => {
-  const d = new Date()
-  d.setDate(d.getDate() - 1)
-  return d.toLocaleDateString()
-})
+  const d = new Date();
+  d.setDate(d.getDate() - 1);
+  return d.toLocaleDateString();
+});
 
 const transactionDate3 = computed(() => {
-  const d = new Date()
-  d.setDate(d.getDate() - 2)
-  return d.toLocaleDateString()
-})
+  const d = new Date();
+  d.setDate(d.getDate() - 2);
+  return d.toLocaleDateString();
+});
 </script>
 
 <template>
   <div class="h-full w-full">
     <div class="grid grid-cols-1 md:grid-cols-2">
-      <div class="col-span-1 flex flex-col bg-secondary-focus text-primary-content px-10 py-12">
+      <div
+        class="col-span-1 flex flex-col bg-secondary-focus text-primary-content px-10 py-12"
+      >
         <div class="flex justify-between">
           <div class="flex flex-col text-primary-content">
-            <div class="font-bold text-lg tracking-wider">{{ $t('bank.greeting') }}</div>
-            <div class="font-bold text-lg tracking-wider">{{ sessionStore.fullName }}</div>
-            <div class="text-xs">{{ $t('bank.lastLogin') }} {{}}</div>
+            <div class="font-bold text-lg tracking-wider">
+              {{ $t("bank.greeting") }}
+            </div>
+            <div class="font-bold text-lg tracking-wider">
+              {{ sessionStore.fullName }}
+            </div>
+            <div class="text-xs">{{ $t("bank.lastLogin") }} {{}}</div>
           </div>
           <div>
             <button class="flex items-center gap-x-4">
@@ -45,7 +55,7 @@ const transactionDate3 = computed(() => {
                 <envelope-icon class="h-5 w-5 text-primary-content" />
                 <span class="badge badge-xs badge-accent indicator-item"></span>
               </div>
-              <div class="underline text-xs">{{ $t('bank.unread') }}</div>
+              <div class="underline text-xs">{{ $t("bank.unread") }}</div>
             </button>
           </div>
         </div>
@@ -55,35 +65,41 @@ const transactionDate3 = computed(() => {
               <div class="flex items-center gap-8">
                 <div><currency-euro-icon class="h-6 w-6" /></div>
                 <div class="flex flex-col">
-                  <div class="tracking-wide uppercase">{{ $t('bank.myMainAccount') }}</div>
-                  <div class="text-2xl tracking-widest">{{ $n(6425.78, 'currency') }}</div>
+                  <div class="tracking-wide uppercase">
+                    {{ $t("bank.myMainAccount") }}
+                  </div>
+                  <div class="text-2xl tracking-widest">
+                    {{ $n(6425.78, "currency") }}
+                  </div>
                 </div>
               </div>
               <button><ellipsis-vertical-icon class="h-6 w-6" /></button>
             </div>
           </div>
           <div class="card-body bg-base-100 rounded-b-md text-base-content">
-            <h2 class="card-title text-lg font-normal">{{ $t('bank.myTransactions') }}</h2>
+            <h2 class="card-title text-lg font-normal">
+              {{ $t("bank.myTransactions") }}
+            </h2>
             <div class="overflow-x-auto w-full">
               <table class="table w-full">
                 <tbody>
                   <!-- row 1 -->
                   <tr>
                     <td>{{ transactionDate1 }}</td>
-                    <td>{{ $t('bank.transaction1') }}</td>
-                    <td class="text-right">-{{ $n(307.17, 'currency') }}</td>
+                    <td>{{ $t("bank.transaction1") }}</td>
+                    <td class="text-right">-{{ $n(307.17, "currency") }}</td>
                   </tr>
                   <!-- row 2 -->
                   <tr>
                     <td>{{ transactionDate2 }}</td>
-                    <td>{{ $t('bank.transaction2') }}</td>
-                    <td class="text-right">-{{ $n(28.99, 'currency') }}</td>
+                    <td>{{ $t("bank.transaction2") }}</td>
+                    <td class="text-right">-{{ $n(28.99, "currency") }}</td>
                   </tr>
                   <!-- row 3 -->
                   <tr>
                     <td>{{ transactionDate3 }}</td>
-                    <td>{{ $t('bank.transaction3') }}</td>
-                    <td class="text-right">-{{ $n(17.49, 'currency') }}</td>
+                    <td>{{ $t("bank.transaction3") }}</td>
+                    <td class="text-right">-{{ $n(17.49, "currency") }}</td>
                   </tr>
                 </tbody>
               </table>
@@ -94,28 +110,34 @@ const transactionDate3 = computed(() => {
       <div class="col-span-1 flex justify-center pt-4 px-4">
         <div class="flex flex-col">
           <div class="grid grid-cols-4 divide-x divide-solid my-8">
-            <router-link :to="{ name: 'BankTransferSelect' }"
-              ><bank-action-button icon="Transfer" text="Transfer money"
+            <router-link id="bankTransfer" :to="{ name: 'BankTransferSelect' }"
+              ><bank-action-button
+                icon="Transfer"
+                :text="$t('bank.transfer.transferMoney')"
             /></router-link>
-            <bank-action-button icon="Iban" text="IBAN" />
-            <bank-action-button icon="Card" text="Manage cards" />
-            <bank-action-button icon="Document" text="Access documents" />
+            <bank-action-button icon="Iban" :text="$t('bank.transfer.iban')" />
+            <bank-action-button icon="Card" :text="$t('bank.manageCards')" />
+            <bank-action-button
+              icon="Document"
+              :text="$t('bank.accessDocuments')"
+            />
           </div>
           <div
             class="grid grid-cols-4 divide-x divide-solid my-8 bg-secondary-focus py-4 px-8 text-primary-content rounded-box"
           >
-            <a class="text-center link">{{ $t('bank.contact') }}</a>
-            <a class="text-center link">{{ $t('bank.insurances') }}</a>
-            <a class="text-center link">{{ $t('bank.simulator') }}</a>
-            <a class="text-center link">{{ $t('bank.support') }}</a>
+            <a class="text-center link">{{ $t("bank.contact") }}</a>
+            <a class="text-center link">{{ $t("bank.insurances") }}</a>
+            <a class="text-center link">{{ $t("bank.simulator") }}</a>
+            <a class="text-center link">{{ $t("bank.support") }}</a>
           </div>
           <!-- Accounts -->
           <div class="my-10">
-            <h2 class="text-2xl font-extrabold">{{ $t('bank.myAccounts') }}</h2>
+            <h2 class="text-2xl font-extrabold">{{ $t("bank.myAccounts") }}</h2>
             <div class="card bg-base-100 shadow-xl">
               <div class="card-body">
                 <h2 class="card-title text-base-content/70 text-lg">
-                  {{ sessionStore.fullName }}, Camille Dupont
+                  {{ sessionStore.fullName }},
+                  {{ $t("bank.jointAccountSecondPersonFullName") }}
                 </h2>
                 <bank-account-summary
                   :account-balance="381.59"
@@ -127,11 +149,11 @@ const transactionDate3 = computed(() => {
           </div>
           <!-- Savings -->
           <div class="my-10">
-            <h2 class="text-2xl font-extrabold">{{ $t('bank.mySavings') }}</h2>
+            <h2 class="text-2xl font-extrabold">{{ $t("bank.mySavings") }}</h2>
             <div class="card bg-base-100 shadow-xl">
               <div class="card-body">
                 <h2 class="card-title text-base-content/70 text-lg">
-                  {{ $t('bank.mainSavingsAccount') }}
+                  {{ $t("bank.mainSavingsAccount") }}
                 </h2>
                 <bank-account-summary
                   :account-balance="4504.33"
@@ -140,7 +162,7 @@ const transactionDate3 = computed(() => {
                 />
                 <hr class="mt-4" />
                 <h2 class="card-title text-base-content/70 text-lg mt-4">
-                  {{ $t('bank.secondarySavingsAccount') }}
+                  {{ $t("bank.secondarySavingsAccount") }}
                 </h2>
                 <bank-account-summary
                   :account-balance="7285.14"
diff --git a/src/components/bank/BankTransferSelection.vue b/src/components/bank/BankTransferSelection.vue
new file mode 100644
index 0000000..7eca009
--- /dev/null
+++ b/src/components/bank/BankTransferSelection.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import AccountSelection from './AccountSelection.vue'
+import BeneficiarySelection from './BeneficiarySelection.vue'
+import FooterSection from '@/components/FooterSection.vue'
+import type { Account } from '@/helpers/account'
+import { PlusCircleIcon } from '@heroicons/vue/24/solid'
+import Datepicker from '@vuepic/vue-datepicker'
+import { ref } from 'vue'
+import { userSessionStore } from '@/store/userSession'
+
+import '@vuepic/vue-datepicker/dist/main.css'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const sessionStore = userSessionStore()
+const { t } = useI18n()
+
+const sendingAccounts: Account[] = [
+  {
+    holder: sessionStore.fullName || '',
+    balance: 6425.78,
+    name: t('bank.depositAccount'),
+    number: '40021194485',
+  },
+  {
+    holder: `${sessionStore.fullName}, Camille Dupont`,
+    balance: 381.59,
+    name: t('bank.depositAccount'),
+    number: '40021194490',
+  },
+]
+const transferDate = ref<Date>(new Date())
+const amount = ref(0)
+const beneficiaryAccounts = ['Aeklys', 'Martin', 'Jeremy Duwez', 'Nina']
+
+const selectedAccount = ref<Account | null>(null)
+function selectAccount(account: Account) {
+  selectedAccount.value = account
+}
+
+const selectedBeneficiary = ref('')
+function selectBeneficiary(beneficiary: string) {
+  selectedBeneficiary.value = beneficiary
+}
+
+function validateTransfer() {
+  if (selectedAccount.value !== null) {
+    sessionStore.bankData.transfer.selectedAccount = selectedAccount.value
+  }
+  sessionStore.bankData.transfer.amount = amount.value
+  sessionStore.bankData.transfer.date = transferDate.value
+
+  sessionStore.bankData.transfer.beneficiaryAccount = selectedBeneficiary.value
+  router.push({ name: 'BankTransferValidate' })
+}
+</script>
+<template>
+  <div class="min-h-screen">
+    <div class="grid grid-cols-1 md:grid-cols-2">
+      <div class="col-span-1 flex justify-center pt-4 md:order-last overflow-y-scroll max-h-screen">
+        <div class="flex flex-col flex-1 px-10">
+          <h2 class="font-bold text-3xl pb-4">{{ $t('bank.transfer.transferMoney') }}</h2>
+          <div class="mt-8">
+            <h3 class="font-medium mb-2">{{ $t('bank.transfer.accountToDebit') }}</h3>
+            <account-selection
+              id="accountSelection"
+              :accounts="sendingAccounts"
+              class="mt-4"
+              @account-selected="selectAccount"
+            />
+          </div>
+
+          <div class="mt-12">
+            <div class="flex justify-between">
+              <h3 class="font-medium mb-2 flex justify-between">
+                {{ $t('bank.transfer.accountToCredit') }}
+              </h3>
+              <div class="link flex items-center text-primary gap-x-2">
+                <plus-circle-icon class="w-8 h-8" /> {{ $t('bank.addABeneficiary') }}
+              </div>
+            </div>
+            <beneficiary-selection
+              id="selectBeneficiary"
+              :beneficiaries="beneficiaryAccounts"
+              @select-beneficiary="selectBeneficiary"
+              class="mt-4"
+            />
+          </div>
+
+          <form
+            id="transferForm"
+            @submit.prevent="validateTransfer"
+            class="grid grid-cols-1 mb-10 md:mb-0 md:grid-cols-2 md:gap-x-4 my-12"
+          >
+            <label class="form-control w-full">
+              <div class="label">
+                <span class="label-text">{{ $t('bank.amount') }}</span>
+              </div>
+              <input
+                id="transferAmount"
+                type="number"
+                min="0"
+                step="0.01"
+                :placeholder="$t('bank.transfer.transferAmount')"
+                v-model="amount"
+                class="input input-bordered w-full"
+              />
+            </label>
+            <label class="form-control w-full">
+              <div class="label">
+                <span class="label-text">{{ $t('bank.transfer.transferDate') }}</span>
+              </div>
+              <Datepicker
+                :enable-time-picker="false"
+                format="dd/MM/yyyy"
+                v-model="transferDate"
+                input-class-name="input input-bordered w-full"
+              />
+            </label>
+            <button id="validateForm" class="btn btn-primary md:col-span-2 mt-8" type="submit">
+              {{ $t('global.next') }}
+            </button>
+          </form>
+        </div>
+      </div>
+      <div class="col-span-1 flex flex-col">
+        <div class="relative">
+          <img
+            src="@/assets/family.jpg"
+            alt="hero"
+            class="h-[36rem] sm:h-[50rem] w-full object-cover"
+          />
+          <div class="absolute flex w-full flex-col top-0">
+            <div class="flex flex-col items-center mt-4">
+              <div class="card bg-base-100 shadow-xl w-10/12">
+                <div class="card-body">
+                  <h2 class="card-title">{{ $t('bank.transfer.immediateTransferAd.title') }}</h2>
+                  <p class="text-justify">
+                    {{ $t('bank.transfer.immediateTransferAd.content') }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="absolute flex w-full flex-col bottom-1/4 text-xs md:text-base">
+            <div class="flex flex-col items-center mt-10">
+              <div class="card bg-primary shadow-xl w-10/12">
+                <div class="card-body text-primary-content">
+                  <h2 class="card-title">{{ $t('bank.transfer.passkeysAd.title') }}</h2>
+                  <p class="text-justify">
+                    {{ $t('bank.transfer.passkeysAd.content1') }}
+                  </p>
+                  <p>{{ $t('bank.transfer.passkeysAd.content2') }}</p>
+                  <div class="card-actions">
+                    <button
+                      class="btn btn-outline bg-primary-content text-primary border-none text-xs md:text-base"
+                    >
+                      {{ $t('bank.transfer.passkeysAd.learnMore') }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="relative">
+          <img
+            src="@/assets/community.jpg"
+            alt="hero"
+            class="h-[12rem] sm:h-[20rem] w-full object-cover"
+          />
+        </div>
+      </div>
+    </div>
+
+    <footer-section />
+  </div>
+</template>
diff --git a/src/components/bank/BankTransferValidation.vue b/src/components/bank/BankTransferValidation.vue
new file mode 100644
index 0000000..c1f47d7
--- /dev/null
+++ b/src/components/bank/BankTransferValidation.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import SelectAccountSummary from './SelectAccountSummary.vue'
+import FooterSection from '@/components/FooterSection.vue'
+import { computed, ref } from 'vue'
+import { userSessionStore } from '@/store/userSession'
+import { useI18n } from 'vue-i18n'
+import '@vuepic/vue-datepicker/dist/main.css'
+import { useRouter } from 'vue-router'
+import { Action, reportAction } from '@/helpers/risk'
+
+const router = useRouter()
+const sessionStore = userSessionStore()
+const transfer = sessionStore.bankData.transfer
+const i18n = useI18n()
+console.log(transfer.amount)
+
+const amount = computed(() => {
+  return i18n.n(transfer.amount, 'currency')
+})
+
+function validateTransfer() {
+  reportAction(Action.TRANSACTION)
+  router.push({ name: 'home' })
+}
+</script>
+<template>
+  <div class="min-h-screen">
+    <div class="grid grid-cols-1 md:grid-cols-2">
+      <div class="col-span-1 flex justify-center pt-4 md:order-last overflow-y-scroll max-h-screen">
+        <div class="flex flex-col flex-1 px-10">
+          <h2 class="font-bold text-3xl pb-4">Summary</h2>
+          <div class="mt-8">
+            <h3 class="font-medium mb-2">Account to debit</h3>
+            <select-account-summary
+              class="px-4 py-2 rounded-box border box-border"
+              :account="transfer.selectedAccount"
+            />
+          </div>
+
+          <div class="mt-12">
+            <div class="flex justify-between">
+              <h3 class="font-medium mb-2 flex justify-between">Account to credit</h3>
+            </div>
+            <div class="px-4 py-2 rounded-box border box-border">
+              {{ transfer.beneficiaryAccount }}
+            </div>
+          </div>
+
+          <div class="mt-12">
+            <div class="flex justify-between">
+              <h3 class="font-medium mb-2 flex justify-between">Amount</h3>
+            </div>
+            <div class="px-4 py-2 rounded-box border box-border">
+              {{ amount }}
+            </div>
+          </div>
+
+          <div class="mt-12">
+            <div class="flex justify-between">
+              <h3 class="font-medium mb-2 flex justify-between">Transfer date</h3>
+            </div>
+            <div class="px-4 py-2 rounded-box border box-border">
+              {{ transfer.date.toDateString() }}
+            </div>
+          </div>
+
+          <div class="flex justify-between items-center mt-12">
+            <router-link to="/" class="link link-primary">Cancel</router-link>
+            <div class="flex gap-x-4">
+              <router-link
+                :to="{ name: 'BankTransferSelect' }"
+                class="btn btn-ghost border border-primary"
+              >
+                Edit
+              </router-link>
+              <button id="validateTransfer" @click="validateTransfer" class="btn btn-primary">
+                Confirm
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-span-1 flex flex-col">
+        <div class="relative">
+          <img
+            src="@/assets/family.jpg"
+            alt="hero"
+            class="h-[36rem] sm:h-[50rem] w-full object-cover"
+          />
+          <div class="absolute flex w-full flex-col top-0">
+            <div class="flex flex-col items-center mt-4">
+              <div class="card bg-base-100 shadow-xl w-10/12">
+                <div class="card-body">
+                  <h2 class="card-title">Your transfer in less than 10 seconds</h2>
+                  <p class="text-justify">
+                    Need to send money to friends or family quickly? Find in your beneficiaries who
+                    is eligible to instant payment and send them money in less than 10 seconds.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="absolute flex w-full flex-col bottom-1/4 text-xs md:text-base">
+            <div class="flex flex-col items-center mt-10">
+              <div class="card bg-primary shadow-xl w-10/12">
+                <div class="card-body text-primary-content">
+                  <h2 class="card-title">More security with Passkeys</h2>
+                  <p class="text-justify">
+                    Passkeys offer the convenience of fast and easy authentication, and provides a
+                    <b>security stronger than a password</b> combined with an SMS code.
+                  </p>
+                  <p>Even better, with passkeys, <b>no application is required.</b></p>
+                  <div class="card-actions">
+                    <button
+                      class="btn btn-outline bg-primary-content text-primary border-none text-xs md:text-base"
+                    >
+                      Learn more about passkeys
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="relative">
+          <img
+            src="@/assets/community.jpg"
+            alt="hero"
+            class="h-[12rem] sm:h-[20rem] w-full object-cover"
+          />
+        </div>
+      </div>
+    </div>
+    <footer-section />
+  </div>
+</template>
diff --git a/src/components/bank/BeneficiarySelection copy.vue b/src/components/bank/BeneficiarySelection copy.vue
new file mode 100644
index 0000000..c21c3ad
--- /dev/null
+++ b/src/components/bank/BeneficiarySelection copy.vue	
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  beneficiaries: string[]
+}>()
+
+const emits = defineEmits(['selectBeneficiary'])
+const open = ref(false)
+const selectedBeneficiary = ref<string | null>(null)
+function selectBeneficiary(beneficiary: string) {
+  selectedBeneficiary.value = beneficiary
+  open.value = false
+  emits('selectBeneficiary', beneficiary)
+}
+</script>
+
+<template>
+  <div
+    class="collapse collapse-arrow rounded-box border border-base-200 bg-base-100 shadow-md py-2 px-0"
+  >
+    <input type="checkbox" v-model="open" />
+    <div class="collapse-title font-medium">
+      <div v-if="selectedBeneficiary === null">
+        {{ $t('bank.transfer.selectReceivingAccount') }}
+      </div>
+      <div v-else class="text-primary">
+        {{ selectedBeneficiary }}
+      </div>
+    </div>
+    <div class="collapse-content px-0">
+      <hr />
+      <div v-for="beneficiary in props.beneficiaries" v-bind:key="beneficiary">
+        <div
+          :id="beneficiary"
+          class="px-4 hover:cursor-pointer hover:bg-base-200 text-primary py-4"
+          @click="selectBeneficiary(beneficiary)"
+        >
+          {{ beneficiary }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/bank/SelectAccountSummary.vue b/src/components/bank/SelectAccountSummary.vue
index cf740d0..05ea218 100644
--- a/src/components/bank/SelectAccountSummary.vue
+++ b/src/components/bank/SelectAccountSummary.vue
@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import { BanknotesIcon } from '@heroicons/vue/24/outline'
-import type { Account } from '@/helpers/account'
+import { BanknotesIcon } from "@heroicons/vue/24/outline";
+import type { Account } from "@/helpers/account";
 
 const props = defineProps<{
-  account: Account
-}>()
+  account: Account;
+}>();
 </script>
 <template>
   <div class="flex justify-between">
     <div class="flex items-center gap-4">
       <div><banknotes-icon class="h-6 w-6" /></div>
       <div class="flex flex-col">
-        <div class="uppercase tracking-wider text-primary">{{ props.account.holder }}</div>
+        <div class="uppercase tracking-wider text-primary">
+          {{ props.account.holder }}
+        </div>
         <div class="text-xs flex gap-4">
           <span class="font-bold">{{ props.account.name }}</span>
           <span class="font-light">n° {{ props.account.number }}</span>
@@ -20,7 +22,7 @@ const props = defineProps<{
     </div>
     <div class="flex items-center">
       <div class="text-primary font-bold">
-        {{ $n(props.account.balance, 'currency') }}
+        {{ $n(props.account.balance, "currency") }}
       </div>
     </div>
   </div>
diff --git a/src/components/inputs/PasswordInput.vue b/src/components/inputs/PasswordInput.vue
index 902b5f9..6864fb0 100644
--- a/src/components/inputs/PasswordInput.vue
+++ b/src/components/inputs/PasswordInput.vue
@@ -6,34 +6,35 @@
  *
  * An eye icon also provides a way for the user to see or hide the password
  */
-import { ref, toRefs } from 'vue'
-import type { BaseValidation } from '@vuelidate/core'
-import { useInputValidation } from '@/composables/baseInput'
-import { EyeIcon, EyeSlashIcon as EyeOffIcon } from '@heroicons/vue/24/outline'
+import { ref, toRefs } from "vue";
+import type { BaseValidation } from "@vuelidate/core";
+import { useInputValidation } from "@/composables/baseInput";
+import { EyeIcon, EyeSlashIcon as EyeOffIcon } from "@heroicons/vue/24/outline";
 
 const props = withDefaults(
   defineProps<{
-    label: string
-    modelValue: string
-    validation: BaseValidation
-    displayValidMessage?: boolean
-    displayInvalidMessage?: boolean
-    validMessage?: string
-    responsive?: boolean
-    placeholder?: string
-    autofocus?: boolean
-    autocomplete?: string
+    label: string;
+    id?: string;
+    modelValue: string;
+    validation: BaseValidation;
+    displayValidMessage?: boolean;
+    displayInvalidMessage?: boolean;
+    validMessage?: string;
+    responsive?: boolean;
+    placeholder?: string;
+    autofocus?: boolean;
+    autocomplete?: string;
   }>(),
   {
     displayValidMessage: false,
     displayInvalidMessage: true,
     responsive: false,
-    validMessage: '',
-    placeholder: '',
+    validMessage: "",
+    placeholder: "",
     autofocus: false,
-    autocomplete: '',
-  },
-)
+    autocomplete: "",
+  }
+);
 
 const {
   label,
@@ -43,16 +44,17 @@ const {
   validation,
   responsive,
   placeholder,
-} = toRefs(props)
-const show = ref(false)
-const inputId = label?.value?.trim().replace(/\s/g, '_')
+} = toRefs(props);
+const show = ref(false);
+const inputId = props.id ? props.id : label?.value?.trim().replace(/\s/g, "_");
 
-const { labelClass, inputClass, messageClass, validationMessage } = useInputValidation({
-  validation: validation.value,
-  displayInvalidMessage: displayInvalidMessage.value,
-  displayValidMessage: displayValidMessage.value,
-  validMessage: validMessage.value,
-})
+const { labelClass, inputClass, messageClass, validationMessage } =
+  useInputValidation({
+    validation: validation.value,
+    displayInvalidMessage: displayInvalidMessage.value,
+    displayValidMessage: displayValidMessage.value,
+    validMessage: validMessage.value,
+  });
 </script>
 <template>
   <div
@@ -83,7 +85,12 @@ const { labelClass, inputClass, messageClass, validationMessage } = useInputVali
 
           <input
             class="input input-bordered input-light w-full text-base-content"
-            @input="$emit('update:modelValue', ($event?.target as HTMLInputElement).value)"
+            @input="
+              $emit(
+                'update:modelValue',
+                ($event?.target as HTMLInputElement).value
+              )
+            "
             :value="modelValue"
             :class="inputClass"
             :type="show ? 'text' : 'password'"
diff --git a/src/components/inputs/UserInput.vue b/src/components/inputs/UserInput.vue
index 69868ec..ec6f5e1 100644
--- a/src/components/inputs/UserInput.vue
+++ b/src/components/inputs/UserInput.vue
@@ -6,12 +6,12 @@
  *
  * @displayName UserInput
  */
-import { ref, toRefs } from 'vue'
-import type { BaseValidation } from '@vuelidate/core'
-import { useInputValidation } from '@/composables/baseInput'
-import type { SizeType } from '@/composables/baseInput'
-import { CheckIcon } from '@heroicons/vue/24/outline'
-import { ExclamationCircleIcon } from '@heroicons/vue/24/solid'
+import { ref, toRefs } from "vue";
+import type { BaseValidation } from "@vuelidate/core";
+import { useInputValidation } from "@/composables/baseInput";
+import type { SizeType } from "@/composables/baseInput";
+import { CheckIcon } from "@heroicons/vue/24/outline";
+import { ExclamationCircleIcon } from "@heroicons/vue/24/solid";
 
 const props = withDefaults(
   defineProps<{
@@ -19,105 +19,109 @@ const props = withDefaults(
      * The description of the input
      * displayed above the input
      */
-    label: string
+    label: string;
+    /**
+     * The id of the input, derived from the label by default
+     */
+    id?: string;
     /**
      * The type of the input
      * as described in the HTML specs
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types}
      */
-    inputType?: string
+    inputType?: string;
     /**
      * The granularity that the input
      * must adhere to
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step}
      */
-    step?: string
+    step?: string;
     /**
      * The reactive data to store and display
      * in the input
      */
-    modelValue: string
+    modelValue: string;
     /**
      * The validation result
      */
-    validation: BaseValidation
+    validation: BaseValidation;
     /**
      * Indicates if the input is required
      */
-    required?: boolean
+    required?: boolean;
     /**
      * The placeholder displayed when the
      * input is empty
      */
-    placeholder?: string
+    placeholder?: string;
     /**
      * Display a message under the input
      * when the input is valid
      */
-    displayValidMessage?: boolean
+    displayValidMessage?: boolean;
     /**
      * Display a message under the input
      * when the input is invalid
      */
-    displayInvalidMessage?: boolean
+    displayInvalidMessage?: boolean;
     /**
      * Message to be displayed when
      * the input is valid
      */
-    validMessage?: string
+    validMessage?: string;
     /**
      * Thickness of the input, from xs to lg
      */
-    size?: SizeType
+    size?: SizeType;
     /**
      * Display the update button
      */
-    displayUpdateOption?: boolean
+    displayUpdateOption?: boolean;
     /**
      * Display the verified badge
      */
-    displayVerifiedBadge?: boolean
+    displayVerifiedBadge?: boolean;
     /**
      * Indicate if this data is verified
      */
-    verified?: boolean
+    verified?: boolean;
     /**
      * Route name to verify the data
      * as defined in routes/index.ts
      */
-    verifyRouteName?: string
+    verifyRouteName?: string;
     /**
      * Indicate if the update function is still loading
      */
-    loading?: boolean
+    loading?: boolean;
     /**
      * Indicate if this input will be automatically focused
      */
-    autofocus?: boolean
+    autofocus?: boolean;
     /**
      * Value of the autocomplete
      */
-    autocomplete?: string
+    autocomplete?: string;
   }>(),
   {
-    inputType: 'text',
+    inputType: "text",
     required: false,
-    placeholder: '',
+    placeholder: "",
     showValidation: false,
     displayValidMessage: false,
     displayInvalidMessage: true,
     responsive: false,
-    validMessage: '',
-    size: 'md',
+    validMessage: "",
+    size: "md",
     displayUpdateOption: false,
     displayVerifiedBadge: false,
     verified: false,
-    verifyLink: '',
+    verifyLink: "",
     loading: false,
     autofocus: false,
-    autocomplete: '',
-  },
-)
+    autocomplete: "",
+  }
+);
 
 const {
   label,
@@ -128,28 +132,37 @@ const {
   displayUpdateOption,
   verifyLink: verifyRouteName,
   loading,
-} = toRefs(props)
-const inputId = label?.value?.trim().replace(/\s/g, '_')
+} = toRefs(props);
 
-const emits = defineEmits(['updateData', 'update:modelValue'])
+/**
+ * The input ID is derived from the label if not provided in the props
+ */
+const inputId = props.id ? props.id : label?.value?.trim().replace(/\s/g, "_");
 
-const { labelClass, inputClass, messageClass, validationMessage } = useInputValidation({
-  validation: validation.value,
-  displayInvalidMessage: displayInvalidMessage.value,
-  displayValidMessage: displayValidMessage.value,
-  validMessage: validMessage.value,
-})
+const emits = defineEmits(["updateData", "update:modelValue"]);
+
+const { labelClass, inputClass, messageClass, validationMessage } =
+  useInputValidation({
+    validation: validation.value,
+    displayInvalidMessage: displayInvalidMessage.value,
+    displayValidMessage: displayValidMessage.value,
+    validMessage: validMessage.value,
+  });
 </script>
 <template>
   <div class="form-control">
     <!-- label -->
-    <label :class="labelClass" class="label flex justify-start gap-x-4" :for="inputId">
+    <label
+      :class="labelClass"
+      class="label flex justify-start gap-x-4"
+      :for="inputId"
+    >
       <span class="label-text">{{ label }}</span>
       <!-- Verified badge -->
       <div v-if="displayVerifiedBadge">
         <div v-if="verified" class="badge badge-xs badge-info bg-info/20 gap-2">
           <CheckIcon class="h-3 w-3 text-info-content" />
-          {{ $t('components.account.accountInfoItem.verified') }}
+          {{ $t("components.account.accountInfoItem.verified") }}
         </div>
         <router-link
           :to="{ name: verifyRouteName }"
@@ -157,7 +170,9 @@ const { labelClass, inputClass, messageClass, validationMessage } = useInputVali
           class="text-warning pr-1 text-xs flex items-center w-max underline"
         >
           <ExclamationCircleIcon class="h-3 w-3 text-warning/70" />
-          <span>{{ $t('components.account.accountInfoItem.notVerified') }}</span>
+          <span>{{
+            $t("components.account.accountInfoItem.notVerified")
+          }}</span>
         </router-link>
       </div>
     </label>
@@ -167,7 +182,9 @@ const { labelClass, inputClass, messageClass, validationMessage } = useInputVali
       <input
         :autocomplete="autocomplete"
         class="input input-bordered w-full text-base-content input-light flex-grow"
-        @input="$emit('update:modelValue', ($event?.target as HTMLInputElement).value)"
+        @input="
+          $emit('update:modelValue', ($event?.target as HTMLInputElement).value)
+        "
         :value="modelValue"
         :class="`${inputClass} input-${size}`"
         :type="inputType"
@@ -190,8 +207,8 @@ const { labelClass, inputClass, messageClass, validationMessage } = useInputVali
           class="btn-disabled btn loading loading-spinner text-primary-content absolute top-0 flex justify-center items-center w-full h-full bg-primary opacity-80"
         ></div>
         <!-- Button text -->
-        <span v-if="!verified"> {{ $t('global.verify') }}</span>
-        <span v-else>{{ $t('global.update') }}</span>
+        <span v-if="!verified"> {{ $t("global.verify") }}</span>
+        <span v-else>{{ $t("global.update") }}</span>
       </div>
     </div>
     <!-- validation or error message | is hidden if not configured to display -->
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 4e39581..a33bb93 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -4,141 +4,152 @@
  * and a password input providing a way for a user
  * to either login or signup with a password.
  */
-import { type Ref, ref, computed, onMounted } from 'vue'
-import useVuelidate from '@vuelidate/core'
-import UserInput from '@/components/inputs/UserInput.vue'
-import { useToast } from 'vue-toastification'
-import PasswordInput from '@/components/inputs/PasswordInput.vue'
-import { useI18n } from 'vue-i18n'
-import { emailRule, loginPasswordRule } from '@/helpers/validationRules'
-import { onBeforeRouteLeave, useRouter } from 'vue-router'
-import { AuthenticationApi } from '@transmitsecurity-dev/ts-demo-client-lib'
-import { loadSession } from '@/helpers/session'
-import { userSessionStore } from '@/store/userSession'
-import { handleError } from '@/helpers/errors'
-import FaceIdIcon from '@/components/icons/FaceIdIcon.vue'
-import TouchIdIcon from '@/components/icons/TouchIdIcon.vue'
-import { Action, reportAction } from '@/helpers/risk'
-import FooterSection from '@/components/FooterSection.vue'
+import { type Ref, ref, computed, onMounted } from "vue";
+import useVuelidate from "@vuelidate/core";
+import UserInput from "@/components/inputs/UserInput.vue";
+import { useToast } from "vue-toastification";
+import PasswordInput from "@/components/inputs/PasswordInput.vue";
+import { useI18n } from "vue-i18n";
+import { emailRule, loginPasswordRule } from "@/helpers/validationRules";
+import { onBeforeRouteLeave, useRouter } from "vue-router";
+import { AuthenticationApi } from "@transmitsecurity-dev/ts-demo-client-lib";
+import { loadSession } from "@/helpers/session";
+import { userSessionStore } from "@/store/userSession";
+import { handleError } from "@/helpers/errors";
+import FaceIdIcon from "@/components/icons/FaceIdIcon.vue";
+import TouchIdIcon from "@/components/icons/TouchIdIcon.vue";
+import { Action, reportAction } from "@/helpers/risk";
+import FooterSection from "@/components/FooterSection.vue";
 
-const { t } = useI18n()
-const email: Ref<string> = ref('')
-const password: Ref<string> = ref('')
-const toast = useToast()
-const loading = ref(false)
+const { t } = useI18n();
+const email: Ref<string> = ref("");
+const password: Ref<string> = ref("");
+const toast = useToast();
+const loading = ref(false);
 
-const router = useRouter()
-defineEmits(['resetPassword', 'onLoginSuccess', 'onLoginError'])
-const userSession = userSessionStore()
+const router = useRouter();
+defineEmits(["resetPassword", "onLoginSuccess", "onLoginError"]);
+const userSession = userSessionStore();
 
 /**
  * Server APIs
  */
-const authApi = new AuthenticationApi(undefined, import.meta.env.VITE_BACKEND_URL)
+const authApi = new AuthenticationApi(
+  undefined,
+  import.meta.env.VITE_BACKEND_URL
+);
 
 onMounted(() => {
   if (userSession.tsPlatformLoaded) {
-    initializeWebauthn()
+    initializeWebauthn();
   } else {
     // The ts platform SDK is not loaded yet, we need to wait
     // for it to be loaded and then initialize webauthn
-    document.addEventListener('tsPlatformLoaded', function (e) {
-      initializeWebauthn()
-    })
+    document.addEventListener("tsPlatformLoaded", function (e) {
+      initializeWebauthn();
+    });
   }
-})
+});
 
 onBeforeRouteLeave(async () => {
   // Abord any conditional mediation started when the user leaves the login page
-  await window.tsPlatform.webauthn.authenticate.autofill.abort()
-})
+  await window.tsPlatform.webauthn.authenticate.autofill.abort();
+});
 
 async function initializeWebauthn() {
-  console.log('Verifying if webauthn is supported')
-  window.tsPlatform.webauthn.isPlatformAuthenticatorSupported().then((supported: boolean) => {
-    userSession.setWebAuthnSupported(supported)
-    console.log(`Webauthn is ${supported ? '' : 'not'} supported`)
-  })
+  console.log("Verifying if webauthn is supported");
+  window.tsPlatform.webauthn
+    .isPlatformAuthenticatorSupported()
+    .then((supported: boolean) => {
+      userSession.setWebAuthnSupported(supported);
+      console.log(`Webauthn is ${supported ? "" : "not"} supported`);
+    });
 
-  console.log('Verifying if autofill is supported')
-  const autofillSupported = window.tsPlatform.webauthn.isAutofillSupported()
+  console.log("Verifying if autofill is supported");
+  const autofillSupported = window.tsPlatform.webauthn.isAutofillSupported();
   if (autofillSupported) {
-    console.log('Initializing conditional UI')
+    console.log("Initializing conditional UI");
     // First, abort any conditional mediation started when the user leaves the login page
-    await window.tsPlatform.webauthn.authenticate.autofill.abort()
+    await window.tsPlatform.webauthn.authenticate.autofill.abort();
     // Then activate a new conditional mediation
     await window.tsPlatform.webauthn.authenticate.autofill.activate({
       onSuccess: loginWebauthnAutofill,
       onError: onWebauthnAutofillError,
-    })
+    });
   } else {
-    console.log('Autofill not supported')
+    console.log("Autofill not supported");
   }
 }
 
 async function loginPassword() {
-  const isFormCorrect = (await v$.value.email.$validate()) && (await v$.value.password.$validate())
-  console.log(`formCorrect ${isFormCorrect}`)
+  const isFormCorrect =
+    (await v$.value.email.$validate()) && (await v$.value.password.$validate());
+  console.log(`formCorrect ${isFormCorrect}`);
   if (isFormCorrect) {
     // Authenticate with a password
-    loading.value = true
+    loading.value = true;
     try {
       // WEBINAR ACTION - Report the login action
-      reportAction(Action.LOGIN)
+      reportAction(Action.LOGIN);
       const response = await authApi.authenticatePassword({
         email: email.value,
         password: password.value,
-      })
+      });
       if (response.status == 200) {
-        console.log(response.data)
-        await loadSession()
-        router.push({ name: 'home' })
+        console.log(response.data);
+        await loadSession();
+        router.push({ name: "home" });
       } else {
-        toast.error(response.statusText)
+        toast.error(response.statusText);
       }
     } catch (error) {
-      handleError(error)
+      handleError(error);
     } finally {
-      loading.value = false
+      loading.value = false;
     }
   } else {
-    toast.error(t('toast.error.invalidForm'))
+    toast.error(t("toast.error.invalidForm"));
   }
 }
 
 async function loginWebauthn() {
   try {
     // Abort autofill login
-    await window.tsPlatform.webauthn.authenticate.autofill.abort()
+    await window.tsPlatform.webauthn.authenticate.autofill.abort();
     // Proceed to traditional login
     // WEBINAR ACTION - Report the login action
-    reportAction(Action.LOGIN)
-    const webauthnEncodedResult = await window.tsPlatform.webauthn.authenticate.modal(email.value)
-    const response = await authApi.authenticateWebauthn({ webauthnEncodedResult })
-    console.log(response)
-    console.log(response.data)
-    await loadSession()
-    router.push({ name: 'home' })
+    reportAction(Action.LOGIN);
+    const webauthnEncodedResult =
+      await window.tsPlatform.webauthn.authenticate.modal(email.value);
+    const response = await authApi.authenticateWebauthn({
+      webauthnEncodedResult,
+    });
+    console.log(response);
+    console.log(response.data);
+    await loadSession();
+    router.push({ name: "home" });
   } catch (error) {
     // handleError(error)
   } finally {
-    loading.value = false
+    loading.value = false;
   }
 }
 
 async function loginWebauthnAutofill(webauthnEncodedResult: string) {
   try {
     // WEBINAR ACTION - Report the login action
-    reportAction(Action.LOGIN)
-    const response = await authApi.authenticateWebauthn({ webauthnEncodedResult })
-    console.log(response)
-    console.log(response.data)
-    await loadSession()
-    router.push({ name: 'home' })
+    reportAction(Action.LOGIN);
+    const response = await authApi.authenticateWebauthn({
+      webauthnEncodedResult,
+    });
+    console.log(response);
+    console.log(response.data);
+    await loadSession();
+    router.push({ name: "home" });
   } catch (error) {
     // handleError(error)
   } finally {
-    loading.value = false
+    loading.value = false;
   }
 }
 
@@ -149,30 +160,32 @@ async function onWebauthnAutofillError(error: any) {
 const validationRules = {
   email: emailRule(),
   password: loginPasswordRule(),
-}
+};
 
 const v$ = useVuelidate(validationRules, {
   email: email,
   password,
-})
+});
 
 const errorFound = computed(() => {
-  return v$.value.$errors && v$.value.$errors.length > 0
-})
+  return v$.value.$errors && v$.value.$errors.length > 0;
+});
 
 const errorMessage = computed(() => {
   if (errorFound.value) {
-    return v$.value.$errors[0].$message.toString()
+    return v$.value.$errors[0].$message.toString();
   } else {
-    return 'Hidden error message'
+    return "Hidden error message";
   }
-})
+});
 </script>
 <template>
   <div class="flex flex-grow flex-col px-6 py-12 lg:px-8 bg-base-200">
     <div class="flex flex-col items-center sm:mx-auto sm:w-full sm:max-w-sm">
-      <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-base-content">
-        {{ $t('authentication.signInToYourAccount') }}
+      <h2
+        class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-base-content"
+      >
+        {{ $t("authentication.signInToYourAccount") }}
       </h2>
     </div>
 
@@ -194,18 +207,25 @@ const errorMessage = computed(() => {
             class="btn btn-block btn-primary"
             :class="loading ? 'loading loading-spinner btn-disabled' : ''"
           >
-            {{ $t('authentication.login') }}
+            {{ $t("authentication.login") }}
           </button>
         </form>
         <div
           class="flex items-center my-4 before:flex-1 before:border-t before:border-base-300 before:mt-0.5 after:flex-1 after:border-t after:border-base-300 after:mt-0.5"
         >
-          <p class="text-center font-semibold mx-4 mb-0">{{ $t('authentication.or') }}</p>
+          <p class="text-center font-semibold mx-4 mb-0">
+            {{ $t("authentication.or") }}
+          </p>
         </div>
-        <form @submit.prevent="loginPassword" class="flex flex-col gap-y-4 w-full" novalidate>
+        <form
+          @submit.prevent="loginPassword"
+          class="flex flex-col gap-y-4 w-full"
+          novalidate
+        >
           <div class="flex-col flex gap-y-4">
             <user-input
               :label="$t('userData.email')"
+              id="email"
               v-model="email"
               :validation="v$.email"
               input-type="email"
@@ -216,6 +236,7 @@ const errorMessage = computed(() => {
             />
             <password-input
               :label="$t('authentication.password')"
+              id="password"
               v-model="password"
               :validation="v$.password"
               :display-invalid-message="false"
@@ -233,12 +254,12 @@ const errorMessage = computed(() => {
               class="btn btn-block btn-primary"
               :class="loading ? 'loading loading-spinner btn-disabled' : ''"
             >
-              {{ $t('authentication.login') }}
+              {{ $t("authentication.login") }}
             </button>
 
             <div class="flex justify-center">
               <a class="link link-hover" @click="$emit('resetPassword')">
-                {{ $t('password.forgotPassword') }}
+                {{ $t("password.forgotPassword") }}
               </a>
             </div>
           </div>
@@ -248,9 +269,9 @@ const errorMessage = computed(() => {
 
     <div class="mt-5 text-center">
       <p class="text-sm">
-        {{ $t('authentication.dontHaveAccount') }}
+        {{ $t("authentication.dontHaveAccount") }}
         <router-link :to="{ name: 'signup' }" class="link text-accent">
-          {{ $t('authentication.signup') }}
+          {{ $t("authentication.signup") }}
         </router-link>
       </p>
     </div>