diff --git a/package-lock.json b/package-lock.json
index c8ecdc8..bccd21a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@heroicons/vue": "^2.0.18",
         "firebase": "^10.5.0",
+        "jspdf": "^2.5.1",
         "sweetalert2": "^11.7.32",
         "vue": "^3.3.4",
         "vue-router": "^4.2.5"
@@ -244,6 +245,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
+      "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -1401,6 +1413,12 @@
       "integrity": "sha512-ehPtgRgaULsFG8x0NeYJvmyH1hmlfsNLujHe9dQEia/7MAJYdzMSi19JtchUHjmBA6XC/75dK55mzZH+RyieSg==",
       "dev": true
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.2.tgz",
+      "integrity": "sha512-sM4HyDVlDFl4goOXPF+g9nNHJFZQGot+HgySjM4cRjqXzjdatcEvYrtG4Ia8XumR9T6k8G2tW9B7hnUj51Uf0A==",
+      "optional": true
+    },
     "node_modules/@types/semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.4.tgz",
@@ -1950,6 +1968,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.16",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
@@ -1993,6 +2022,15 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/big-integer": {
       "version": "1.6.51",
       "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
@@ -2083,6 +2121,17 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/bundle-name": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-3.0.0.tgz",
@@ -2136,6 +2185,31 @@
         }
       ]
     },
+    "node_modules/canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/canvg/node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "optional": true
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2241,6 +2315,17 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/core-js": {
+      "version": "3.33.2",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.33.2.tgz",
+      "integrity": "sha512-XeBzWI6QL3nJQiHmdzbAOiMYqjrb7hwU7A39Qhvd/POSa/t9E1AeZyEZx3fNvp/vtM8zXwhoL0FsiS0hD0pruQ==",
+      "hasInstallScript": true,
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -2255,6 +2340,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2383,6 +2477,12 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dompurify": {
+      "version": "2.4.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.7.tgz",
+      "integrity": "sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==",
+      "optional": true
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.564",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.564.tgz",
@@ -2764,6 +2864,11 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -3034,6 +3139,19 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/http-parser-js": {
       "version": "0.5.8",
       "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
@@ -3312,6 +3430,23 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/jspdf": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
+      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "dependencies": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.4.8"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -3866,6 +4001,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -4131,6 +4272,15 @@
         }
       ]
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -4182,6 +4332,11 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -4226,6 +4381,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -4515,6 +4679,15 @@
       "integrity": "sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==",
       "dev": true
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.6.0.tgz",
+      "integrity": "sha512-8S1aIA+UoF6erJYnglGPug6MaHYGo1Ot7h5fuXx4fUPvcvQfcdw2o/ppCse63+eZf8PPidSu4v1JnmEVtEDnpg==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -4635,6 +4808,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/sweetalert2": {
       "version": "11.7.32",
       "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.7.32.tgz",
@@ -4697,6 +4879,15 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -4867,6 +5058,15 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -5320,6 +5520,14 @@
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
       "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw=="
     },
+    "@babel/runtime": {
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
+      "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
+      "requires": {
+        "regenerator-runtime": "^0.14.0"
+      }
+    },
     "@esbuild/android-arm": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -6140,6 +6348,12 @@
       "integrity": "sha512-ehPtgRgaULsFG8x0NeYJvmyH1hmlfsNLujHe9dQEia/7MAJYdzMSi19JtchUHjmBA6XC/75dK55mzZH+RyieSg==",
       "dev": true
     },
+    "@types/raf": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.2.tgz",
+      "integrity": "sha512-sM4HyDVlDFl4goOXPF+g9nNHJFZQGot+HgySjM4cRjqXzjdatcEvYrtG4Ia8XumR9T6k8G2tW9B7hnUj51Uf0A==",
+      "optional": true
+    },
     "@types/semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.4.tgz",
@@ -6535,6 +6749,11 @@
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
       "dev": true
     },
+    "atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
+    },
     "autoprefixer": {
       "version": "10.4.16",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
@@ -6555,6 +6774,12 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "optional": true
+    },
     "big-integer": {
       "version": "1.6.51",
       "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
@@ -6613,6 +6838,11 @@
         "update-browserslist-db": "^1.0.13"
       }
     },
+    "btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
+    },
     "bundle-name": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-3.0.0.tgz",
@@ -6640,6 +6870,30 @@
       "integrity": "sha512-N0ttd6TrFfuqKNi+pMgWJTb9qrdJu4JSpgPFLe/lrD19ugC6fZgF0pUewRowDwzdDnb9V41mFcdlYgl/PyKf4A==",
       "dev": true
     },
+    "canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+          "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+          "optional": true
+        }
+      }
+    },
     "chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -6718,6 +6972,12 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "core-js": {
+      "version": "3.33.2",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.33.2.tgz",
+      "integrity": "sha512-XeBzWI6QL3nJQiHmdzbAOiMYqjrb7hwU7A39Qhvd/POSa/t9E1AeZyEZx3fNvp/vtM8zXwhoL0FsiS0hD0pruQ==",
+      "optional": true
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -6729,6 +6989,15 @@
         "which": "^2.0.1"
       }
     },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "optional": true,
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -6819,6 +7088,12 @@
         "esutils": "^2.0.2"
       }
     },
+    "dompurify": {
+      "version": "2.4.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.7.tgz",
+      "integrity": "sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==",
+      "optional": true
+    },
     "electron-to-chromium": {
       "version": "1.4.564",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.564.tgz",
@@ -7102,6 +7377,11 @@
         "websocket-driver": ">=0.5.1"
       }
     },
+    "fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -7298,6 +7578,16 @@
         "lru-cache": "^10.0.1"
       }
     },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "optional": true,
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
     "http-parser-js": {
       "version": "0.5.8",
       "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
@@ -7497,6 +7787,21 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "jspdf": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
+      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "fflate": "^0.4.8",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -7889,6 +8194,12 @@
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
       "dev": true
     },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "optional": true
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -8035,6 +8346,15 @@
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -8073,6 +8393,11 @@
         "picomatch": "^2.2.1"
       }
     },
+    "regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -8101,6 +8426,12 @@
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
       "dev": true
     },
+    "rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -8293,6 +8624,12 @@
       "integrity": "sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==",
       "dev": true
     },
+    "stackblur-canvas": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.6.0.tgz",
+      "integrity": "sha512-8S1aIA+UoF6erJYnglGPug6MaHYGo1Ot7h5fuXx4fUPvcvQfcdw2o/ppCse63+eZf8PPidSu4v1JnmEVtEDnpg==",
+      "optional": true
+    },
     "string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -8375,6 +8712,12 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true
+    },
     "sweetalert2": {
       "version": "11.7.32",
       "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.7.32.tgz",
@@ -8420,6 +8763,15 @@
         "sucrase": "^3.32.0"
       }
     },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "optional": true,
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -8534,6 +8886,15 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "optional": true,
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
diff --git a/package.json b/package.json
index 0fa9066..385e1c7 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@heroicons/vue": "^2.0.18",
     "firebase": "^10.5.0",
+    "jspdf": "^2.5.1",
     "sweetalert2": "^11.7.32",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"
diff --git a/src/base.css b/src/base.css
index e5b34c6..eb84030 100644
--- a/src/base.css
+++ b/src/base.css
@@ -4,7 +4,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
-* {
+*{
     font-family: 'Poppins', sans-serif;
 }
diff --git a/src/layout/UserLayout.vue b/src/layout/UserLayout.vue
new file mode 100644
index 0000000..ef1c658
--- /dev/null
+++ b/src/layout/UserLayout.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+
+import router from "@/router";
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <header>
+      <div>
+        <h1 class="text-xl ml-10 mt-4  w-fit px-2 rounded-lg border-gradient-l bg-gradient-to-r from-red-400 to-orange-300 cursor-pointer hover:animate-bounce hover:transition-all " @click="router.push('/')">Test Forge</h1>
+      </div>
+    </header>
+    <RouterView />
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index d98b0a8..2389dcb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,18 +3,35 @@ import { createRouter, createWebHistory } from 'vue-router'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
+
     {
-      path: '/home',
-      name: 'home',
-      component: () => import('../views/HomeView.vue')
+      path: '/',
+      name: 'layout',
+      component: () => import('../layout/UserLayout.vue'),
+      children: [
+        {
+          path: '/',
+          name: 'home',
+          component: () => import('../views/HomeView.vue')
+        },
+        {
+          path: '/login',
+          name: 'login',
+          component: () => import('../views/Auth/LoginPage.vue')
+        },
+        {
+            path: '/asistente',
+            name: 'asistente',
+            component: () => import('../views/AsisstantView.vue')
+        },
+        {
+            path: '/base-de-datos',
+            name: 'base-de-datos',
+            component: () => import('../views/DataBaseView.vue')
+        }
+      ]
     },
 
-  {
-    path: '/',
-    name: 'login',
-    component: () => import('../views/Auth/LoginPage.vue')
-  },
-
   ]
 })
 
diff --git a/src/views/AsisstantView.vue b/src/views/AsisstantView.vue
new file mode 100644
index 0000000..bfbac9d
--- /dev/null
+++ b/src/views/AsisstantView.vue
@@ -0,0 +1,387 @@
+<script setup lang="ts">
+import {
+  ChevronRightIcon,
+  BuildingLibraryIcon,
+  UserCircleIcon,
+  DocumentTextIcon
+} from '@heroicons/vue/24/outline'
+import { onBeforeMount, onMounted, ref } from 'vue'
+import jsPDF from 'jspdf'
+
+const step = ref(1)
+const showQuestionsBlock = ref(false)
+const isMounted = ref(false)
+const examen = ref({
+  name: '',
+  school: '',
+  teacher: '',
+  subject: '',
+  selectedQuestionType: 'abierta',
+  questions: [
+    {
+      type: '',
+      question: '',
+      options: [
+        {
+          option: '',
+          isCorrect: false
+        }
+      ]
+    }
+  ]
+})
+
+//Agregar preguntas
+const addQuestion = () => {
+  examen.value.questions.push({
+    type: examen.value.selectedQuestionType,
+    question: '',
+    options:
+      examen.value.selectedQuestionType === 'abierta'
+        ? []
+        : [
+            {
+              option: '',
+              isCorrect: false
+            }
+          ]
+  })
+  showQuestionsBlock.value = true
+}
+
+const getInciso = (index: number) => {
+  const letras = 'abcdefghijklmnopqrstuvwxyz' // Puedes agregar más letras según tus necesidades
+  if (index < letras.length) {
+    return letras[index] + ')' // Devuelve letras minúsculas como incisos (a), (b), (c), ...
+  } else {
+    return index - letras.length + 1 + ')' // Utiliza números para más opciones (1), (2), (3), ...
+  }
+}
+
+const downloadPDF = () => {
+  const doc = new jsPDF()
+
+  doc.setFontSize(16)
+  doc.text(examen.value.name, 10, 10)
+
+  let y = 30
+  doc.setFontSize(12)
+
+  doc.text(`Escuela: ${examen.value.school}`, 10, y)
+  y += 10
+  doc.text(`Docente: ${examen.value.teacher}`, 10, y)
+  y += 10
+  doc.text(`Materia: ${examen.value.subject}`, 10, y)
+
+  y += 20
+  doc.setFontSize(12)
+  doc.text('Instrucciones', 10, y)
+
+  const instructions = [
+    `1. Este examen consta de ${examen.value.questions.length} preguntas.`,
+    '2. No se permite el uso de dispositivos electrónicos.',
+    '3. Tiempo máximo: 60 minutos.'
+  ]
+
+  y += 10
+  doc.setFontSize(10)
+  instructions.forEach((instruction) => {
+    y += 10
+    doc.text(instruction, 15, y)
+  })
+
+  // Agrega las preguntas y opciones al PDF
+  examen.value.questions.forEach((question, index) => {
+    y += 20
+    doc.setFontSize(12)
+    doc.text(`Pregunta ${index + 1}: ${question.question}`, 10, y)
+
+    if (question.options.length > 0) {
+      y += 10
+      doc.setFontSize(10)
+      question.options.forEach((option, optionIndex) => {
+        y += 10
+        doc.text(`- ${option.option}`, 15, y)
+      })
+    }
+  })
+
+  // Agrega el espacio para calificación y firmas
+  y += 20
+  doc.setFontSize(10)
+  doc.text('Calificación: ________ / 10', 10, y)
+  y += 10
+  doc.text('Firma del Estudiante: __________________________', 10, y)
+  y += 10
+  doc.text('Firma del Profesor: ___________________________', 10, y)
+
+  // Guarda y descarga el PDF
+  doc.save('ExamenTestForge.pdf')
+}
+
+//Opciones preguntas cerradas
+const addOption = (question: { options: Array<{ option: string; isCorrect: boolean }> }) => {
+  question.options.push({
+    option: '',
+    isCorrect: false
+  })
+}
+
+//Eliminar Opcion de respuesta
+const removeOption = (
+  question: {
+    options: Array<{ option: string; isCorrect: boolean }>
+  },
+  optionIndex: number
+) => {
+  question.options.splice(optionIndex, 1)
+}
+
+//Eliminar preguntas agregadas
+const removeQuestion = (index: number) => {
+  examen.value.questions.splice(index, 1)
+}
+
+//Descargar en PDF el examen
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-10 z-10 justify-center items-center absolute w-screen h-screen bg-black/80"
+    v-if="isMounted == false"
+  >
+    <div class="flex flex-col items-center">
+      <h1 class="text-4xl text-center w-fit px-10 py-4 rounded-t-3xl text-white bg-blue-500">
+        Asistente
+      </h1>
+      <div class="bg-blue-500 rounded-xl p-2 z-[1]">
+        <p class="text-center text-white text-xl">
+          Te guiaremos paso a paso para que puedas crear un examen con tus propias preguntas
+        </p>
+      </div>
+    </div>
+    <div class="text-white flex flex-col gap-8 directions">
+      <p class="flex flex-col">
+        1. Escribe el nombre de tu examen 📄
+        <span class="ml-10">💭Recomendamos aqui pongas el tema del cual se tratara</span>
+      </p>
+      <p class="flex flex-col">
+        2. Datos de identificación 🪪
+        <span class="ml-10 flex flex-col"
+          >💭Podras poner tu escuela o dependencia<br />
+          💭El nombre del maestro <br />
+          💭La materia
+        </span>
+      </p>
+      <p class="flex flex-col">
+        3. Agregar tus preguntas ➕<span class="ml-10 flex flex-col">
+          💭 Agrega cuantas preguntas quieras *No te preocupes tu examen solo tendra la cantidad que
+          desees* <br />
+          💭Elige el tipo de pregunta que quieres
+        </span>
+      </p>
+      <p class="flex flex-col">4. Visualiza tu examen 👁️</p>
+      <p class="flex flex-col">
+        5. Si todo esta correcto ✅ ¡Descargalo en PDF ya listo para imprimir!
+      </p>
+    </div>
+    <button class="px-32 rounded-xl py-2 bg-blue-500 text-white" @click="isMounted = true">
+      Ok! <span class="animate-pulse">👍</span>
+    </button>
+  </div>
+  <div>
+    <div class="bg-black w-32 rounded-r-2xl text-6xl text-white flex justify-center mt-10">
+      {{ step }}
+    </div>
+
+    <div class="flex flex-col m-20" v-show="step == 1">
+      <p class="text-6xl mb-8">Escribe el nombre de tu examen 📄</p>
+      <input
+        type="text"
+        class="h-32 text-6xl text-blue-500 rounded-xl border-2 p-4"
+        v-model="examen.name"
+      />
+    </div>
+
+    <div v-show="step == 2" class="flex flex-col mx-20 my-10">
+      <p class="text-6xl mb-8 text-center -mt-14">Datos de identificación📄</p>
+      <p class="text-center mb-4">
+        Tal y como lo escribas en los campos es como aparecera en tu examen
+      </p>
+      <label class="text-xl flex items-center gap-2"
+        ><BuildingLibraryIcon class="w-5 stroke-gray-400" /> Escuela</label
+      >
+      <input
+        type="text"
+        class="border-2 h-10 mt-2 rounded-lg p-4 text-blue-500"
+        v-model="examen.school"
+        placeholder='"Esc. Sec. #1 "Benito Juarez""'
+      />
+
+      <label class="text-xl mt-12 flex items-center gap-2"
+        ><UserCircleIcon class="w-5 stroke-gray-400" /> Docente</label
+      >
+      <input
+        type="text"
+        class="border-2 h-10 mt-2 rounded-lg p-4 text-blue-500"
+        v-model="examen.teacher"
+        placeholder="Lic. Juan Antonio P."
+      />
+
+      <label class="text-xl mt-12 flex items-center gap-2"
+        ><DocumentTextIcon class="w-5 stroke-gray-400" /> Materia</label
+      >
+      <input
+        type="text"
+        class="border-2 h-10 mt-2 rounded-lg p-4 text-blue-500"
+        v-model="examen.subject"
+        placeholder="Matematicas"
+      />
+    </div>
+
+    <div v-show="step == 3" class="flex flex-col mx-20 my-10">
+      <p class="text-6xl mb-8 text-center -mt-14">Agrega tus preguntas ➕</p>
+      <div class="flex flex-col justify-center items-center space-y-4">
+        <button class="bg-pink-500 text-white px-3 py-2 rounded-md" @click="addQuestion">
+          Agregar Pregunta
+        </button>
+        <div class="flex items-center space-x-2">
+          <p class="text-blue-500">Selecciona el tipo de pregunta:</p>
+          <select
+            v-model="examen.selectedQuestionType"
+            class="text-blue-500 border border-blue-500 rounded p-2"
+          >
+            <option value="abierta">Abierta</option>
+            <option value="cerrada">Cerrada</option>
+          </select>
+        </div>
+      </div>
+
+      <div v-if="showQuestionsBlock">
+        <div v-for="(question, index) in examen.questions" :key="index">
+          <div class="flex justify-between items-center">
+            <p class="text-2xl">Pregunta {{ index + 1 }}:</p>
+            <button class="text-red-500" @click="removeQuestion(index)">Eliminar</button>
+          </div>
+          <input
+            type="text"
+            class="h-32 text-6xl text-blue-500 rounded-xl border-2 p-4"
+            v-model="question.question"
+          />
+          <div v-if="examen.selectedQuestionType === 'cerrada'">
+            <div class="mt-4">
+              <p>Opciones:</p>
+              <div v-for="(option, optionIndex) in question.options" :key="optionIndex">
+                <input
+                  type="text"
+                  class="h-12 text-4xl text-blue-500 rounded-lg border-2 p-2"
+                  v-model="option.option"
+                />
+                <button class="text-red-500" @click="removeOption(question, optionIndex)">
+                  Eliminar Opción
+                </button>
+              </div>
+              <button
+                class="bg-pink-500 text-white px-3 py-2 rounded-md"
+                @click="addOption(question)"
+              >
+                Agregar Opción
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-show="step == 4" class="flex flex-col mx-20 my-10">
+      <p class="text-6xl mb-8 text-center -mt-14">Visualiza tu examen 👁️</p>
+      <div class="text-center mb-4">
+        <h1 class="text-4xl font-bold">Examen Tipo A1</h1>
+      </div>
+
+      <div class="border p-4 mb-8">
+        <h2 class="text-2xl font-bold mb-2">{{ examen.name }}</h2>
+        <p class="text-1xl">Escuela: {{ examen.school }}</p>
+        <p class="text-1xl">Docente: {{ examen.teacher }}</p>
+        <p class="text-1xl">Materia: {{ examen.subject }}</p>
+        <p class="text-1xl">Fecha:_________</p>
+      </div>
+
+      <div class="border p-4 mb-4">
+        <h2 class="text-2xl font-bold mb-2">Instrucciones</h2>
+        <p class="text-1xl">1. Este examen consta de {{ examen.questions.length }} preguntas.</p>
+        <p class="text-1xl">2. No se permite el uso de dispositivos electrónicos.</p>
+        <p class="text-1xl mb-4">3. Tiempo máximo: 60 minutos.</p>
+
+        <div v-for="(question, index) in examen.questions" :key="index">
+          <h3 class="text-2xl font-bold">Pregunta {{ index + 1 }}</h3>
+          <p class="text-1x1">{{ question.question }}</p>
+          <div
+            v-for="(option, optionIndex) in question.options"
+            :key="optionIndex"
+            class="text-1xl"
+          >
+            {{ getInciso(optionIndex) }} {{ option.option }}{{ option.option }}
+          </div>
+        </div>
+
+        <p class="text-1xl mb-4">Calificación: ________ / 10</p>
+        <p class="text-1xl mb-4">Firma del Estudiante: __________________________</p>
+        <p class="text-1xl mb-4">Firma del Profesor: ___________________________</p>
+      </div>
+    </div>
+
+    <div v-show="step == 5" class="flex flex-col mx-20 my-10">
+      <p class="text-6xl mb-8 text-center -mt-14">Descargar el examen en PDF 📥</p>
+      <p class="text-center mb-4">
+        Si todo esta en orden ¡Descargalo en PDF ya listo para imprimir!
+      </p>
+      <div class="text-center mb-4">
+        <button class="bg-blue-500 text-white p-2 px-4 rounded-md" @click="downloadPDF">
+          Descargar PDF
+        </button>
+      </div>
+    </div>
+
+    <div
+      :class="{
+        'flex justify-end': step == 1,
+        'flex justify-between': step != 1
+      }"
+    >
+      <button
+        @click="step--"
+        class="w-20 self-end flex justify-center rounded-3xl bg-gradient-to-r from-blue-500 to-blue-600 mx-10"
+        v-if="step != 1"
+      >
+        <ChevronRightIcon class="w-10 stroke-white rotate-180" />
+      </button>
+      <button
+        @click="step++"
+        class="w-20 self-end flex justify-center rounded-3xl bg-gradient-to-r from-blue-500 to-blue-600 mx-10"
+      >
+        <ChevronRightIcon class="w-10 stroke-white" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.gradient-text-blue {
+  background-clip: text;
+  color: transparent;
+  background-image: linear-gradient(
+    to right,
+    #70a6ff,
+    #4a8be8
+  ); /* Personaliza los colores del gradiente */
+}
+
+.directions > p > span {
+  font-weight: normal;
+  margin-top: 3px;
+}
+.directions > p {
+  font-weight: bold;
+}
+</style>
diff --git a/src/views/Auth/LoginPage.vue b/src/views/Auth/LoginPage.vue
index 80b47d9..d6a5c65 100644
--- a/src/views/Auth/LoginPage.vue
+++ b/src/views/Auth/LoginPage.vue
@@ -5,11 +5,10 @@ import { useRoute, useRouter } from 'vue-router'
 const email = ref('')
 const password = ref('')
 const error = ref('')
-
 const router = useRouter()
 
 const login = () => {
-  if (email.value === 'aleOrozco@uanl.edu' && password.value === '123') {
+  if (email.value === 'alejandraOP@uanl.edu' && password.value === '123m_') {
     router.push({ name: 'home' })
   } else {
     if (!email.value || !password.value) {
diff --git a/src/views/DataBaseView.vue b/src/views/DataBaseView.vue
new file mode 100644
index 0000000..64e2908
--- /dev/null
+++ b/src/views/DataBaseView.vue
@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import {
+  ChevronRightIcon,
+  BuildingLibraryIcon,
+  UserCircleIcon,
+  DocumentTextIcon
+} from '@heroicons/vue/24/outline'
+import { computed, onBeforeMount, onMounted, reactive, ref, watch } from 'vue'
+import { db } from '../services/firebase'
+import { collection, query, where, getDocs } from 'firebase/firestore'
+
+const step = ref(1)
+
+const isMounted = ref(false)
+const examen = reactive({
+  name: '',
+  school: '',
+  teacher: '',
+  subject: '',
+  theme: ''
+})
+const materias = ref(['Español', 'Matematicas', 'Ciencias Naturales', 'Fisica'])
+
+const themes = ref<Array<string>>([])
+
+async function getThemes() {
+  const qs = await getDocs(query(collection(db, examen.subject)))
+  // query(db, collection(db, "themes"), where("subject", "==", examen.subject));
+  qs.forEach((doc) => {
+    themes.value.push(doc.data().Tema)
+  })
+}
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-10 z-10 justify-center items-center absolute w-screen h-screen bg-black/80"
+    v-if="isMounted == false"
+  >
+    <div class="flex flex-col items-center">
+      <h1 class="text-4xl text-center w-fit px-10 py-4 rounded-t-3xl text-white bg-pink-500">
+        Asistente
+      </h1>
+      <div class="bg-pink-500 rounded-xl p-2 z-[1]">
+        <p class="text-center text-white text-xl">
+          Te guiaremos paso a paso para que puedas crear un examen con tus propias preguntas
+        </p>
+      </div>
+    </div>
+    <div class="text-white flex flex-col gap-8 directions">
+      <p class="flex flex-col">
+        1. Escribe el nombre de tu examen 📄
+        <span class="ml-10">💭Recomendamos aqui pongas el tema del cual se tratara</span>
+      </p>
+      <p class="flex flex-col">
+        2. Datos de identificación 🪪
+        <span class="ml-10 flex flex-col"
+          >💭Podras poner tu escuela o dependencia<br />
+          💭El nombre del maestro <br />
+          💭La materia
+        </span>
+      </p>
+      <p class="flex flex-col">
+        3. Selecciona el tema ➕
+        <span class="ml-10 flex flex-col">
+          💭 Elige entre nuestros temas disponibles los cuales tendran una gran cantidad de
+          preguntas</span
+        >
+      </p>
+      <p class="flex flex-col">4. Visualiza tu examen 👁️</p>
+      <p class="flex flex-col">
+        5. Si todo esta correcto ✅ ¡Descargalo en PDF ya listo para imprimir!
+      </p>
+    </div>
+    <button class="px-32 rounded-xl py-2 bg-pink-500 text-white" @click="isMounted = true">
+      Ok! <span class="animate-pulse">👍</span>
+    </button>
+  </div>
+  <div>
+    <div class="bg-black w-32 rounded-r-2xl text-6xl text-white flex justify-center mt-10">
+      {{ step }}
+    </div>
+    <div class="flex flex-col m-20" v-show="step == 1">
+      <p class="text-6xl mb-8">Escribe el nombre de tu examen 📄</p>
+      <input
+        type="text"
+        class="h-32 text-6xl text-pink-500 rounded-xl border-2 p-4"
+        v-model="examen.name"
+        @keypress.enter="step++"
+      />
+    </div>
+    <div v-show="step == 2" class="flex flex-col mx-20 my-10">
+      <p class="text-6xl mb-8 text-center -mt-14">Datos de identificación📄</p>
+      <p class="text-center mb-4">
+        Tal y como lo escribas en los campos es como aparecera en tu examen
+      </p>
+      <label class="text-xl flex items-center gap-2"
+        ><BuildingLibraryIcon class="w-5 stroke-gray-400" /> Escuela</label
+      >
+      <input
+        type="text"
+        class="border-2 h-10 mt-2 rounded-lg p-4 text-pink-500"
+        v-model="examen.school"
+        placeholder='"Esc. Sec. #1 "Benito Juarez""'
+      />
+
+      <label class="text-xl mt-12 flex items-center gap-2"
+        ><UserCircleIcon class="w-5 stroke-gray-400" /> Docente</label
+      >
+      <input
+        type="text"
+        class="border-2 h-10 mt-2 rounded-lg p-4 text-pink-500"
+        v-model="examen.teacher"
+        placeholder="Lic. Juan Antonio P."
+      />
+    </div>
+
+    <div v-if="step == 3">
+      <p class="text-6xl mb-8 text-center -mt-14">Selecciona el tema ➕</p>
+      <div class="flex gap-10 justify-center">
+        <div v-for="(subject, index) in materias" :key="index">
+          <button
+            :class="{
+              'bg-pink-500 text-white': examen.subject == subject,
+              'flex gap-2 px-3 border-2 border-pink-600 py-1 rounded-xl mt-10': true
+            }"
+            @click="examen.subject = subject"
+          >
+            {{ subject }}
+          </button>
+        </div>
+      </div>
+      <div class="flex">
+        <button class="flex gap-2 px-3 border-2 border-pink-600 py-1 rounded-xl my-10">
+          {{ themes }}
+        </button>
+      </div>
+    </div>
+    <div
+      :class="{
+        'flex justify-end items-end': step == 1,
+        'flex justify-between ': step != 1
+      }"
+    >
+      <button
+        @click="step--"
+        class="w-20 self-end flex justify-center rounded-3xl bg-gradient-to-r from-pink-500 to-pink-600 mx-10"
+        v-if="step != 1"
+      >
+        <ChevronRightIcon class="w-10 stroke-white rotate-180" />
+      </button>
+      <button
+        @click="step++"
+        class="w-20 self-end flex justify-center rounded-3xl bg-gradient-to-r from-pink-500 to-pink-600 mx-10"
+      >
+        <ChevronRightIcon class="w-10 stroke-white" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.gradient-text-blue {
+  background-clip: text;
+  color: transparent;
+  background-image: linear-gradient(
+    to right,
+    #70a6ff,
+    #4a8be8
+  ); /* Personaliza los colores del gradiente */
+}
+
+.directions > p > span {
+  font-weight: normal;
+  margin-top: 3px;
+}
+.directions > p {
+  font-weight: bold;
+}
+</style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f04c1c5..74c0ac4 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,22 +1,226 @@
 <script setup lang="ts">
-import { HomeIcon } from '@heroicons/vue/24/outline'
-import { db } from '../services/firebase.js'
-import { collection, getDocs, query, where, addDoc } from 'firebase/firestore'
-import { onMounted } from 'vue'
-
-async function createColl() {
-  const docRef = await addDoc(collection(db, 'users'), {
-    first: 'Ada',
-    last: 'Lovelace',
-    born: 1815
-  })
-  console.log('Document written with ID: ', docRef.id)
+import {
+  ChatBubbleLeftRightIcon,
+  BeakerIcon,
+  CircleStackIcon,
+  BookOpenIcon,
+  ArrowUpRightIcon
+} from '@heroicons/vue/24/outline'
+import { CheckCircleIcon } from '@heroicons/vue/24/solid'
+import { ref } from 'vue'
+import router from '@/router'
+
+const flip = ref([false, false, false, false])
+
+function flipCard(index: number) {
+  flip.value[index] = !flip.value[index]
 }
 </script>
 
 <template>
-  <main>
-    <button @click="createColl">Create</button>
-    <h1 class="text-4xl flex gap-10"><HomeIcon class="w-10 h-20" /> Home</h1>
-  </main>
+  <div>
+    <div class="flex flex-col gap-10 mx-8">
+      <div class="flex flex-col gap-8">
+        <p class="text-4xl md:text-5xl mt-8 font-normal">Opciones para crear exámenes ✨</p>
+        <p class="text-lg font-light">
+          Toca una de nuestras opciones para descubrir cómo funciona👇🏼
+        </p>
+      </div>
+      <!--      AZUL-->
+      <div class="flex gap-12 flex-wrap justify-between">
+        <div
+          :class="{
+            'bg-gradient-to-b from-blue-200 rounded-xl cursor-pointer hover:scale-[110%] hover:transition-all':
+              flip[1] == false,
+            'bg-blue-200 rounded-xl cursor-pointer transform rotate-y-180 transition-all':
+              flip[1] == true
+          }"
+          @click="flipCard([1])"
+        >
+          <div class="w-[18rem] h-[28rem] relative flip-card">
+            <div class="flip-card-inner">
+              <div class="flip-card-front" v-show="flip[1] == false">
+                <div class="flex flex-col justify-between h-full">
+                  <ChatBubbleLeftRightIcon
+                    class="stroke-[0.5] stroke-blue-500 w-60 self-center mt-10"
+                  />
+                  <p class="text-2xl text-blue-500 mx-5 my-5">01.<br />Asistente</p>
+                </div>
+              </div>
+              <div class="flip-card-back" v-show="flip[1] == true">
+                <div class="flex flex-col justify-between h-full">
+                  <div class="flex items-center justify-around">
+                    <p class="text-xl text-blue-500 mt-20">01.<br />Asistente</p>
+                    <ChatBubbleLeftRightIcon class="stroke-[0.5] stroke-blue-500 w-24" />
+                  </div>
+                  <div class="flex flex-col w-full">
+                    <p class="text-md text-white font-bold mx-5 my-5">
+                      El asistente te guiará en la creación de tu examen,
+                      <span class="text-blue-600">paso a paso</span>.
+                    </p>
+                    <ul class="text-sm ml-3 text-white">
+                      <li>
+                        <CheckCircleIcon class="w-3 fill-blue-600" /> Escribe tus propias preguntas
+                      </li>
+                      <li>
+                        <CheckCircleIcon class="w-3 fill-blue-600" />Elige el tipo de pregunta
+                      </li>
+                      <li><CheckCircleIcon class="w-3 fill-blue-600" />Genera tu examen</li>
+                      <li><CheckCircleIcon class="w-3 fill-blue-600" />Descarga en PDF</li>
+                    </ul>
+                  </div>
+                  <button
+                    @click="router.push('/asistente')"
+                    class="flex rounded-3xl items-center mx-10 justify-center gap-4 mt-9 p-3 bg-blue-500 text-white hover:bg-white hover:text-blue-600 start-as-btn"
+                  >
+                    Comenzar
+                    <ArrowUpRightIcon
+                      class="w-7 rounded-xl stroke-white stroke-2 h-7 border-white border p-0.5"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!--        ROSA-->
+        <div
+          :class="{
+            'bg-gradient-to-b from-pink-200 rounded-xl cursor-pointer hover:scale-[110%] hover:transition-all':
+              flip[2] == false,
+            'bg-pink-200 rounded-xl cursor-pointer transform rotate-y-180 transition-all':
+              flip[2] == true
+          }"
+          @click="flipCard([2])"
+        >
+          <div class="w-[18rem] h-[28rem] relative flip-card">
+            <div class="flip-card-inner">
+              <div class="flip-card-front" v-show="flip[2] == false">
+                <div class="flex flex-col justify-between h-full">
+                  <CircleStackIcon class="stroke-[0.5] stroke-pink-500 w-60 self-center mt-10" />
+                  <p class="text-2xl text-pink-500 mx-5 my-5">02.<br />Base de datos</p>
+                </div>
+              </div>
+              <div class="flip-card-back" v-show="flip[2] == true">
+                <div class="flex flex-col justify-between h-full">
+                  <div class="flex items-center justify-around">
+                    <p class="text-xl text-pink-500 mt-20">02.<br />Base de datos</p>
+                    <CircleStackIcon class="stroke-[0.5] stroke-pink-500 w-24" />
+                  </div>
+                  <div class="flex flex-col w-full">
+                    <p class="text-md text-white font-bold mx-5 my-5">
+                      Utiliza nuestra base de datos con mas de
+                      <span class="text-pink-500">1,000 preguntas</span> de diferentes temas
+                    </p>
+                    <ul class="text-sm ml-3 text-white">
+                      <li><CheckCircleIcon class="w-3 fill-pink-600" />Selecciona un tema</li>
+                      <li>
+                        <CheckCircleIcon class="w-3 fill-pink-600" />Selecciona el tipo de preguntas
+                      </li>
+                      <li><CheckCircleIcon class="w-3 fill-pink-600" />Genera tu examen</li>
+                      <li><CheckCircleIcon class="w-3 fill-pink-600" />Descarga en PDF</li>
+                    </ul>
+                  </div>
+                  <button
+                    @click="router.push('/base-de-datos')"
+                    class="flex rounded-3xl items-center mx-10 justify-center gap-4 mt-9 p-3 bg-pink-500 text-white hover:bg-white hover:text-pink-600 start hover:stroke-pink-500 start-bd-btn"
+                  >
+                    Comenzar
+                    <ArrowUpRightIcon
+                      class="w-7 rounded-xl stroke-white stroke-2 h-7 border-white border p-0.5"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- MORADO-->
+        <div
+          :class="{
+            'bg-gradient-to-b from-purple-200 rounded-xl cursor-pointer hover:scale-[110%] hover:transition-all':
+              flip[3] == false,
+            'bg-purple-200 rounded-xl cursor-pointer transform rotate-y-180 transition-all':
+              flip[3] == true
+          }"
+          @click="flipCard([3])"
+        >
+          <div class="w-[18rem] h-[28rem] relative flip-card">
+            <div class="flip-card-inner">
+              <div class="flip-card-front" v-show="flip[3] == false">
+                <div class="flex flex-col justify-between h-full">
+                  <BeakerIcon class="stroke-[0.5] stroke-purple-500 w-60 self-center mt-10" />
+                  <p class="text-2xl text-purple-500 mx-5 my-5">03.<br />Inteligencia artificial</p>
+                </div>
+              </div>
+              <div class="flip-card-back" v-show="flip[3] == true">
+                <div class="flex flex-col justify-between h-full">
+                  <div class="flex items-center justify-around">
+                    <p class="text-lg text-purple-500 mt-20">03.<br />Inteligencia artificial</p>
+                    <BeakerIcon class="stroke-[0.5] stroke-purple-500 w-20" />
+                  </div>
+                  <div class="flex flex-col w-full">
+                    <p class="text-md text-white font-bold mx-5 my-5">
+                      Escribe el tema que deseas y la <span class="text-purple-400">IA</span> crea
+                      un examen por ti
+                    </p>
+                    <ul class="text-sm ml-3 text-white">
+                      <li><CheckCircleIcon class="w-3 fill-purple-600" />Selecciona un tema</li>
+                      <li>
+                        <CheckCircleIcon class="w-3 fill-purple-600" />Selecciona el tipo de
+                        preguntas
+                      </li>
+                      <li><CheckCircleIcon class="w-3 fill-purple-600" />Genera tu examen</li>
+                      <li><CheckCircleIcon class="w-3 fill-purple-600" />Descarga en PDF</li>
+                    </ul>
+                  </div>
+                  <button
+                    @click="router.push('/base-de-datos')"
+                    class="flex rounded-3xl items-center mx-10 justify-center gap-4 mt-9 p-3 bg-purple-500 text-white hover:bg-white hover:text-purple-600 start hover:stroke-pink-500 start-ia-btn"
+                  >
+                    Comenzar
+                    <ArrowUpRightIcon
+                      class="w-7 rounded-xl stroke-white stroke-2 h-7 border-white border p-0.5"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="bg-gradient-to-b from-gray-400 rounded-xl w-[18rem] h-[28rem] flex flex-col justify-between"
+        >
+          <BookOpenIcon class="stroke-[0.5] stroke-gray-500 w-60 self-center mt-10" />
+          <p class="text-2xl text-gray-500 mx-5 my-5">04.<br />Plantillas</p>
+          <p class="bg-red-500 absolute bottom-40 right-28 p-2 rounded-lg text-white">
+            PROXIMAMENTE
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+li {
+  display: flex;
+  gap: 10px;
+}
+
+.start-bd-btn:hover > svg {
+  stroke: #f472b6;
+  border-color: #f472b6;
+}
+
+.start-ia-btn:hover > svg {
+  stroke: #a855fa;
+  border-color: #a855fa;
+}
+
+.start-as-btn:hover > svg {
+  stroke: #3b82f6;
+  border-color: #3b82f6;
+}
+</style>