diff --git a/src/utils/QrCodePix.ts b/src/utils/QrCodePix.ts
index c1d46d6..e91962c 100644
--- a/src/utils/QrCodePix.ts
+++ b/src/utils/QrCodePix.ts
@@ -1,80 +1,87 @@
-import qrcode from 'qrcode';
-import type {QRCodeToDataURLOptions} from 'qrcode';
-import { crc16ccitt } from 'crc';
+import qrcode from "qrcode";
+import type { QRCodeToDataURLOptions } from "qrcode";
+import { crc16ccitt } from "crc";
 
 interface PixParams {
-    pixKey: string;
-    merchantCity: string;
-    merchantName: string;
-    value?: number;
-    transactionId?: string;
-    message?: string;
-    cep?: string;
-    currency?: number;
-    countryCode?: string;
+  pixKey: string;
+  merchantCity: string;
+  merchantName: string;
+  value?: number;
+  transactionId?: string;
+  message?: string;
+  cep?: string;
+  currency?: number;
+  countryCode?: string;
 }
 
 const Pix = ({
-    pixKey,
-    merchantCity,
-    merchantName,
-    value,
-    message,
-    cep,
-    transactionId = '',
-    currency = 986,
-    countryCode = 'BR',
+  pixKey,
+  merchantCity,
+  merchantName,
+  value,
+  message,
+  cep,
+  transactionId = "",
+  currency = 986,
+  countryCode = "BR",
 }: PixParams) => {
-    const payloadKeyString = generatePixKey(pixKey, message);
+  const payloadKeyString = generatePixKey(pixKey, message);
 
-    const payload: string[] = [
-        formatEMV('00', '01'), //Payload Format Indicator
-        formatEMV('26', payloadKeyString), // Merchant Account Information
-        formatEMV('52', '0000'), //Merchant Category Code
-        formatEMV('53', String(currency)), // Transaction Currency
-    ];
+  const payload: string[] = [
+    formatEMV("00", "01"), //Payload Format Indicator
+    formatEMV("26", payloadKeyString), // Merchant Account Information
+    formatEMV("52", "0000"), //Merchant Category Code
+    formatEMV("53", String(currency)), // Transaction Currency
+  ];
 
-    if (String(value) === '0') {
-        value = undefined;
-    }
-    if (value) {
-        payload.push(formatEMV('54', value.toFixed(2)));
-    }
+  if (String(value) === "0") {
+    value = undefined;
+  }
+  if (value) {
+    payload.push(formatEMV("54", value.toFixed(2)));
+  }
 
-    payload.push(formatEMV('58', countryCode.toUpperCase())); // Country Code
-    payload.push(formatEMV('59', merchantName)); // Merchant merchantName
-    payload.push(formatEMV('60', merchantCity)); // Merchant merchantCity
+  payload.push(formatEMV("58", countryCode.toUpperCase())); // Country Code
+  payload.push(formatEMV("59", merchantName)); // Merchant merchantName
+  payload.push(formatEMV("60", merchantCity)); // Merchant merchantCity
 
-    if (cep) {
-        payload.push(formatEMV('61', cep)); // Postal Code
-    }
+  if (cep) {
+    payload.push(formatEMV("61", cep)); // Postal Code
+  }
 
-    payload.push(formatEMV('62', formatEMV('05', transactionId))); // Additional Data Field Template
+  payload.push(formatEMV("62", formatEMV("05", transactionId))); // Additional Data Field Template
 
-    payload.push('6304');
+  payload.push("6304");
 
-    const stringPayload = payload.join('');
-    const crcResult = crc16ccitt(stringPayload).toString(16).toUpperCase().padStart(4, '0');
+  const stringPayload = payload.join("");
+  const crcResult = crc16ccitt(stringPayload)
+    .toString(16)
+    .toUpperCase()
+    .padStart(4, "0");
 
-    const payloadPIX = `${stringPayload}${crcResult}`;
+  const payloadPIX = `${stringPayload}${crcResult}`;
 
-    return {
-        payload: (): string => payloadPIX,
-        base64QrCode: (options?: QRCodeToDataURLOptions): Promise<string> => qrcode.toDataURL(payloadPIX, options),
-    };
-}
+  return {
+    payload: (): string => payloadPIX,
+    base64QrCode: (options?: QRCodeToDataURLOptions): Promise<string> =>
+      qrcode.toDataURL(payloadPIX, options),
+  };
+};
 
 const generatePixKey = (pixKey: string, message?: string): string => {
-    const payload: string[] = [formatEMV('00', 'BR.GOV.BCB.PIX'), formatEMV('01', pixKey)];
-    if (message) {
-        payload.push(formatEMV('02', message));
-    }
-    return payload.join('');
-}
+  const payload: string[] = [
+    formatEMV("00", "BR.GOV.BCB.PIX"),
+    formatEMV("01", pixKey),
+  ];
+  if (message) {
+    payload.push(formatEMV("02", message));
+  }
+  return payload.join("");
+};
 
-const formatEMV = (id: string, param: string): string  => {
-    const len = param.length.toString().padStart(2, '0');
-    return `${id}${len}${param}`;
-}
+const formatEMV = (id: string, param: string): string => {
+  const len = param.length.toString().padStart(2, "0");
+  return `${id}${len}${param}`;
+};
 
-export {type PixParams, Pix };
\ No newline at end of file
+export { type PixParams, Pix };
diff --git a/src/views/QrCodeForm.vue b/src/views/QrCodeForm.vue
index a202727..7ff0571 100644
--- a/src/views/QrCodeForm.vue
+++ b/src/views/QrCodeForm.vue
@@ -12,31 +12,35 @@ const PixModel = ref({
   qrCodePayload: "",
 });
 
-const qrCode = ref<string>("")
-const qrCodePayload = ref<string>("")
-const toggleModal=  ref<boolean>(false);
+const qrCode = ref<string>("");
+const qrCodePayload = ref<string>("");
+const toggleModal = ref<boolean>(false);
 
 const errors = ref({
   pixRequiredError: false,
   nameRequiredError: false,
-  cityRequiredError: false
+  cityRequiredError: false,
 });
 
 const submit = () => {
-  errors.value['pixRequiredError'] = PixModel.value['pixKey'] == '' ;
-  errors.value['nameRequiredError'] = PixModel.value['name'] == '';
-  errors.value['cityRequiredError'] = PixModel.value['city'] == '';
+  errors.value["pixRequiredError"] = PixModel.value["pixKey"] == "";
+  errors.value["nameRequiredError"] = PixModel.value["name"] == "";
+  errors.value["cityRequiredError"] = PixModel.value["city"] == "";
 
-  if(errors.value['pixRequiredError'] || errors.value['nameRequiredError'] || errors.value['cityRequiredError'])
+  if (
+    errors.value["pixRequiredError"] ||
+    errors.value["nameRequiredError"] ||
+    errors.value["cityRequiredError"]
+  )
     return;
 
   const pix = Pix({
-    pixKey: PixModel.value['pixKey'],
-    merchantName: PixModel.value['name'],
-    merchantCity: PixModel.value['city'],
-    transactionId: PixModel.value['transactionId'],
-    message: PixModel.value['message'],
-    value: PixModel.value['value'],
+    pixKey: PixModel.value["pixKey"],
+    merchantName: PixModel.value["name"],
+    merchantCity: PixModel.value["city"],
+    transactionId: PixModel.value["transactionId"],
+    message: PixModel.value["message"],
+    value: PixModel.value["value"],
   });
 
   pix.base64QrCode().then((code) => {
@@ -46,107 +50,168 @@ const submit = () => {
   qrCodePayload.value = pix.payload();
 
   toggleModal.value = true;
-}
+};
 </script>
 
 <template>
   <div class="container">
-    <h2 class="text-center font-bold text-emerald-50 text-2xl">PixModel QR Code</h2>
+    <h2 class="text-center font-bold text-emerald-50 text-2xl">
+      PixModel QR Code
+    </h2>
     <form>
-      <div class="grid gap-4 grid-cols-1  p-2">
+      <div class="grid gap-4 grid-cols-1 p-2">
         <div class="col-div">
           <div class="mb-2">
             <label for="pixKey" class="form-label">Chave PIX</label>
-            <span v-if="errors['pixRequiredError']" class="required-error">(Esse campo é obrigatório)</span>
+            <span v-if="errors['pixRequiredError']" class="required-error"
+              >(Esse campo é obrigatório)</span
+            >
           </div>
-          <input type="text" name="pixKey" id="pixKey" class="form-input" v-model="PixModel['pixKey']"/>
+          <input
+            type="text"
+            name="pixKey"
+            id="pixKey"
+            class="form-input"
+            v-model="PixModel['pixKey']"
+          />
         </div>
         <div class="col-div">
           <div class="mb-2">
             <label for="name" class="form-label">Nome do beneficiário</label>
-            <span v-if="errors['nameRequiredError']" class="required-error">(Esse campo é obrigatório)</span>
+            <span v-if="errors['nameRequiredError']" class="required-error"
+              >(Esse campo é obrigatório)</span
+            >
           </div>
-          <input type="text" name="name" id="name" class="form-input" v-model="PixModel['name']"/>
+          <input
+            type="text"
+            name="name"
+            id="name"
+            class="form-input"
+            v-model="PixModel['name']"
+          />
         </div>
         <div class="col-div">
           <div class="mb-2">
             <label for="city" class="form-label">Cidade do beneficiário</label>
-            <span v-if="errors['cityRequiredError']" class="required-error">(Esse campo é obrigatório)</span>
+            <span v-if="errors['cityRequiredError']" class="required-error"
+              >(Esse campo é obrigatório)</span
+            >
           </div>
-          <input type="text" name="city" id="city" class="form-input" v-model="PixModel['city']"/>
+          <input
+            type="text"
+            name="city"
+            id="city"
+            class="form-input"
+            v-model="PixModel['city']"
+          />
         </div>
         <div class="col-div">
-          <label for="value" class="form-label">Valor de transferência (Opcional)</label>
-          <input type="number" name="value" id="value" class="form-input" v-model="PixModel['value']"/>
+          <label for="value" class="form-label"
+            >Valor de transferência (Opcional)</label
+          >
+          <input
+            type="number"
+            name="value"
+            id="value"
+            class="form-input"
+            v-model="PixModel['value']"
+          />
         </div>
         <div class="col-div">
-          <label for="code" class="form-label">Código da transferência (Opcional)</label>
-          <input type="text" name="code" id="code" class="form-input" v-model="PixModel['transactionId']"/>
+          <label for="code" class="form-label"
+            >Código da transferência (Opcional)</label
+          >
+          <input
+            type="text"
+            name="code"
+            id="code"
+            class="form-input"
+            v-model="PixModel['transactionId']"
+          />
         </div>
         <div class="col-div">
           <label for="message" class="form-label">Mensagem (Opcional)</label>
-          <input type="text" name="message" id="message" class="form-input" v-model="PixModel['message']"/>
+          <input
+            type="text"
+            name="message"
+            id="message"
+            class="form-input"
+            v-model="PixModel['message']"
+          />
         </div>
-        <button type="button" class="button" @click="submit">Gerar QR code</button>
+        <button type="button" class="button" @click="submit">
+          Gerar QR code
+        </button>
       </div>
     </form>
 
-    <div 
+    <div
       v-if="toggleModal"
       class="fixed overflow-x-hidden overflow-y-auto inset-0 flex justify-center items-center z-50"
     >
       <div class="relative mx-auto w-auto max-w-2xl">
-        <div class="bg-white w-[500px] p-2 rounded shadow-2xl flex flex-col justify-center items-center gap-2">
+        <div
+          class="bg-white w-[500px] p-2 rounded shadow-2xl flex flex-col justify-center items-center gap-2"
+        >
           <img v-if="qrCode != ''" :src="qrCode" alt="QR code image" />
           <div>
             <span class="text-black font-semibold mr-1">Chave PixModel:</span>
-            <span class="text-gray-700">{{PixModel['pixKey']}}</span>
+            <span class="text-gray-700">{{ PixModel["pixKey"] }}</span>
           </div>
           <div>
-            <span class="text-black font-semibold mr-1">Nome do Beneficiário:</span>
-            <span class="text-gray-700">{{PixModel['name']}}</span>
+            <span class="text-black font-semibold mr-1"
+              >Nome do Beneficiário:</span
+            >
+            <span class="text-gray-700">{{ PixModel["name"] }}</span>
           </div>
           <div v-if="PixModel['value'] != 0">
-            <span class="text-black font-semibold mr-1">Valor da transferência:</span>
-            <span class="text-gray-700">{{PixModel['value']}}</span>
+            <span class="text-black font-semibold mr-1"
+              >Valor da transferência:</span
+            >
+            <span class="text-gray-700">{{ PixModel["value"] }}</span>
           </div>
-          <div class="flex flex-col w-auto break-all justify-center items-center">
+          <div
+            class="flex flex-col w-auto break-all justify-center items-center"
+          >
             <span class="text-black font-semibold mb-2">Código QR Code:</span>
-            <span class="text-gray-700">{{qrCodePayload}}</span>
+            <span class="text-gray-700">{{ qrCodePayload }}</span>
           </div>
-          <button type="button" class="button" @click="toggleModal=false">Fechar</button>
+          <button type="button" class="button" @click="toggleModal = false">
+            Fechar
+          </button>
         </div>
       </div>
     </div>
-    <div v-if="toggleModal"
+    <div
+      v-if="toggleModal"
       class="fixed z-40 inset-0 opacity-25 bg-black"
     ></div>
   </div>
 </template>
 
 <style>
-.container{
+.container {
   background-color: var(--color-background-indigo);
-  @apply rounded-md p-2 mt-8
+  @apply rounded-md p-2 mt-8;
 }
 
-.col-div{
-  @apply flex flex-col
+.col-div {
+  @apply flex flex-col;
 }
 
-.form-input{
+.form-input {
   @apply rounded-lg border border-gray-200 p-2 text-black;
 }
 
-.form-label{
+.form-label {
   @apply font-semibold tracking-wide text-emerald-50;
 }
 
-.button{
-  @apply rounded-lg w-full border border-emerald-900 text-white py-2 bg-emerald-600 hover:bg-emerald-500
+.button {
+  @apply rounded-lg w-full border border-emerald-900 text-white py-2 bg-emerald-600 hover:bg-emerald-500;
 }
 
-.required-error{
-  @apply ml-2 text-red-500
+.required-error {
+  @apply ml-2 text-red-500;
 }
-</style>
\ No newline at end of file
+</style>