diff --git a/web-app-vue/package-lock.json b/web-app-vue/package-lock.json
index 6f7ae9f..8fd5e13 100644
--- a/web-app-vue/package-lock.json
+++ b/web-app-vue/package-lock.json
@@ -10,8 +10,10 @@
       "dependencies": {
         "jwt-decode": "^3.1.2",
         "pinia": "^2.0.32",
+        "vite-plugin-vuetify": "^1.0.2",
         "vue": "^3.3.4",
-        "vue-router": "^4.2.4"
+        "vue-router": "^4.2.4",
+        "vuetify": "^3.3.15"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.2.0",
@@ -21,7 +23,7 @@
         "eslint": "^8.34.0",
         "eslint-plugin-vue": "^9.9.0",
         "jsdom": "^21.1.0",
-        "prettier": "^2.8.4",
+        "prettier": "^2.8.8",
         "vite": "^4.1.4",
         "vite-plugin-vue-devtools": "^1.0.0-rc.3",
         "vitest": "^0.29.1"
@@ -1112,7 +1114,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1128,7 +1129,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1144,7 +1144,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1160,7 +1159,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -1176,7 +1174,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -1192,7 +1189,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -1208,7 +1204,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -1224,7 +1219,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1240,7 +1234,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1256,7 +1249,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1272,7 +1264,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1288,7 +1279,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1304,7 +1294,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1320,7 +1309,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1336,7 +1324,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1352,7 +1339,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1368,7 +1354,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -1384,7 +1369,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -1400,7 +1384,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -1416,7 +1399,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1432,7 +1414,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1448,7 +1429,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1740,7 +1720,7 @@
       "version": "18.16.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.0.tgz",
       "integrity": "sha512-BsAaKhB+7X+H4GnSjGhJG9Qi8Tw+inU9nJDwmD5CgOmBLEI6ArdhikpLX7DjbjDRDTbqZzU2LSQNZg8WGPiSZQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@vite-plugin-vue-devtools/core": {
       "version": "1.0.0-rc.3",
@@ -2006,6 +1986,19 @@
         "vue": "^3.0.1"
       }
     },
+    "node_modules/@vuetify/loader-shared": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.7.1.tgz",
+      "integrity": "sha512-kLUvuAed6RCvkeeTNJzuy14pqnkur8lTuner7v7pNE/kVhPR97TuyXwBSBMR1cJeiLiOfu6SF5XlCYbXByEx1g==",
+      "dependencies": {
+        "find-cache-dir": "^3.3.2",
+        "upath": "^2.0.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0",
+        "vuetify": "^3.0.0-beta.4"
+      }
+    },
     "node_modules/@webfansplz/vuedoc-parser": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/@webfansplz/vuedoc-parser/-/vuedoc-parser-0.0.4.tgz",
@@ -2449,6 +2442,11 @@
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true
     },
+    "node_modules/commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg=="
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2549,7 +2547,6 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -2789,7 +2786,6 @@
       "version": "0.17.18",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.18.tgz",
       "integrity": "sha512-z1lix43jBs6UKjcZVKOw2xx69ffE2aG0PygLL5qJ9OS/gy0Ewd1gW/PUQIOIQGXBHWNywSc0floSKoMFF8aK2w==",
-      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -3267,6 +3263,22 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/find-cache-dir": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+      "dependencies": {
+        "commondir": "^1.0.1",
+        "make-dir": "^3.0.2",
+        "pkg-dir": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -3349,7 +3361,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -4134,6 +4145,28 @@
         "node": ">=12"
       }
     },
+    "node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -4209,8 +4242,7 @@
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/nanoid": {
       "version": "3.3.6",
@@ -4400,6 +4432,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -4428,7 +4468,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4514,6 +4553,65 @@
         }
       }
     },
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/pkg-types": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.2.tgz",
@@ -4944,7 +5042,6 @@
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.0.tgz",
       "integrity": "sha512-ANPhVcyeHvYdQMUyCbczy33nbLzI7RzrBje4uvNiTDJGIMtlKoOStmympwr9OtS1LZxiDmE2wvxHyVhoLtf1KQ==",
-      "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -5565,6 +5662,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/upath": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
+      "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
+      "engines": {
+        "node": ">=4",
+        "yarn": "*"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
@@ -5624,7 +5730,6 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.1.tgz",
       "integrity": "sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==",
-      "dev": true,
       "dependencies": {
         "esbuild": "^0.17.5",
         "postcss": "^8.4.21",
@@ -5774,6 +5879,23 @@
         "vite": "^3.0.0-0 || ^4.0.0-0"
       }
     },
+    "node_modules/vite-plugin-vuetify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-1.0.2.tgz",
+      "integrity": "sha512-MubIcKD33O8wtgQXlbEXE7ccTEpHZ8nPpe77y9Wy3my2MWw/PgehP9VqTp92BLqr0R1dSL970Lynvisx3UxBFw==",
+      "dependencies": {
+        "@vuetify/loader-shared": "^1.7.1",
+        "debug": "^4.3.3",
+        "upath": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "vite": "^2.7.0 || ^3.0.0 || ^4.0.0",
+        "vuetify": "^3.0.0-beta.4"
+      }
+    },
     "node_modules/vitest": {
       "version": "0.29.8",
       "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.29.8.tgz",
@@ -5979,6 +6101,39 @@
         "he": "^1.2.0"
       }
     },
+    "node_modules/vuetify": {
+      "version": "3.3.15",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.15.tgz",
+      "integrity": "sha512-n7GYBO31k8vA9UfvRwLNyBlkq1WoN3IJ9wNnIBFeV4axleSjFAzzR4WUw7rgj6Ba3q6N2hxXoyxJM21tseQTfQ==",
+      "engines": {
+        "node": "^12.20 || >=14.13"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/johnleider"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.7",
+        "vite-plugin-vuetify": "^1.0.0-alpha.12",
+        "vue": "^3.2.0",
+        "vue-i18n": "^9.0.0",
+        "webpack-plugin-vuetify": "^2.0.0-alpha.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        },
+        "vite-plugin-vuetify": {
+          "optional": true
+        },
+        "vue-i18n": {
+          "optional": true
+        },
+        "webpack-plugin-vuetify": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
diff --git a/web-app-vue/package.json b/web-app-vue/package.json
index 9c498ea..dba87f4 100644
--- a/web-app-vue/package.json
+++ b/web-app-vue/package.json
@@ -13,8 +13,10 @@
   "dependencies": {
     "jwt-decode": "^3.1.2",
     "pinia": "^2.0.32",
+    "vite-plugin-vuetify": "^1.0.2",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.2.4",
+    "vuetify": "^3.3.15"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
@@ -24,7 +26,7 @@
     "eslint": "^8.34.0",
     "eslint-plugin-vue": "^9.9.0",
     "jsdom": "^21.1.0",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.8",
     "vite": "^4.1.4",
     "vite-plugin-vue-devtools": "^1.0.0-rc.3",
     "vitest": "^0.29.1"
diff --git a/web-app-vue/src/App.vue b/web-app-vue/src/App.vue
index 853dc4d..75f03e9 100644
--- a/web-app-vue/src/App.vue
+++ b/web-app-vue/src/App.vue
@@ -3,7 +3,11 @@
 </script>
 
 <template>
-  <router-view></router-view>
+  <v-layout class="rounded rounded-md">
+    <v-main class="d-flex align-center justify-center" style="min-height: 300px;">
+      <router-view></router-view>
+    </v-main>
+  </v-layout>
 </template>
 
 <style scoped>
diff --git a/web-app-vue/src/components/usuario/card-login.vue b/web-app-vue/src/components/usuario/card-login.vue
index 0093157..e8935a8 100644
--- a/web-app-vue/src/components/usuario/card-login.vue
+++ b/web-app-vue/src/components/usuario/card-login.vue
@@ -1,51 +1,66 @@
 <template>
-  <form @submit.prevent.stop="doLogin">
-    <label v-if="createMode">Nome</label>
-    <input v-if="createMode" v-model="nome" required />
-    <label>Email</label>
-    <input type="email" v-model="email" required />
-    <label>Senha</label>
-    <input type="password" v-model="senha" required />
-    <hr>
-    <button v-if="!createMode" type="submit">Login</button>
-    <button type="button" aria-roledescription="create-mode" @click="createMode = !createMode">{{createMode ? "Cancelar" : "Criar conta"}}</button>
-    <button v-if="createMode" type="submit">Criar</button>
-  </form>
+  <v-card :title="createMode ? 'Criar conta' : 'Login'">
+    <v-form v-model="valid" @submit.prevent.stop="doLogin" class="auth-form">
+      <v-text-field :rules=[requiredRule] v-if="createMode" v-model="nome" label="Nome" required></v-text-field>
+      <v-text-field :rules=[requiredRule] v-model="email" label="Email" required type="email"></v-text-field>
+      <v-text-field :rules=[requiredRule] v-model="senha" label="Senha" required type="password"></v-text-field>
+      <hr />
+      <v-btn v-if="!createMode" type="submit">Login</v-btn>
+      <v-btn type="button" @click="createMode = !createMode">
+        {{ createMode ? 'Cancelar' : 'Criar conta' }}
+      </v-btn>
+      <v-btn v-if="createMode" type="submit">Criar</v-btn>
+    </v-form>
+  </v-card>
 </template>
 <script setup>
-import { ref } from "vue";
-import { useUserStore } from "@/stores/userStore";
-
-const nome = ref("");
-const email = ref("");
-const senha = ref("");
-const createMode = ref(false);
+import { ref } from 'vue'
+import { useUserStore } from '@/stores/userStore'
+import { router } from "@/routes/router";
 
+const nome = ref('')
+const email = ref('')
+const senha = ref('')
+const createMode = ref(false)
+const valid = ref(false)
 const uState = useUserStore()
 
+const requiredRule = value => {
+  if(value) return true
+  return "Required field"
+}
+
 const doLogin = async () => {
+  if(!valid.value) return
   try {
-    if(createMode.value) {
+    if (createMode.value) {
       await uState.doCreateUser({
-        nome: nome.value, email: email.value, senha: senha.value
+        nome: nome.value,
+        email: email.value,
+        senha: senha.value
       })
     }
-    const result = await uState.doLogin({ email: email.value, senha: senha.value });
+    const result = await uState.doLogin({ email: email.value, senha: senha.value })
     // TODO guardar informação do usuário logado
     uState.setToken(result.token)
+    await router.push("/")
   } catch (e) {
-    console.log(e);
-    alert("Algo deu errado");
+    console.log(e)
+    alert('Algo deu errado')
   }
-};
+}
 </script>
 <style scoped>
-form {
-    display: flex;
-    flex-direction: column;
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+  padding: 1em;
 }
 
-label, input, button {
-    margin: 0.5em;
+label,
+input,
+button {
+  margin: 0.5em;
 }
 </style>
diff --git a/web-app-vue/src/main.js b/web-app-vue/src/main.js
index ca4208f..2d69a30 100644
--- a/web-app-vue/src/main.js
+++ b/web-app-vue/src/main.js
@@ -1,15 +1,29 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import { md3 } from 'vuetify/blueprints'
+
 import { router } from './routes/router'
 
 import App from './App.vue'
 
 import './assets/main.css'
 
-const app = createApp(App)
+const vuetify = createVuetify({
+  blueprint: md3,
+  defaults: {
+    global: {
+      variant: 'outlined'
+    }
+  }
+})
+
+export const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
+app.use(vuetify)
 
 app.mount('#app')
diff --git a/web-app-vue/src/pages/auth-page.vue b/web-app-vue/src/pages/auth-page.vue
index 0c8db4c..965b5c0 100644
--- a/web-app-vue/src/pages/auth-page.vue
+++ b/web-app-vue/src/pages/auth-page.vue
@@ -1,9 +1,9 @@
 <script setup>
-
+import CardLogin from "@/components/usuario/card-login.vue";
 </script>
 
 <template>
-<h1>Auth</h1>
+  <card-login></card-login>
 </template>
 
 <style scoped>
diff --git a/web-app-vue/src/routes/router.js b/web-app-vue/src/routes/router.js
index 6c7de45..cb8c908 100644
--- a/web-app-vue/src/routes/router.js
+++ b/web-app-vue/src/routes/router.js
@@ -1,4 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
+import {useUserStore} from '@/stores/userStore'
 import AuthPage from '@/pages/auth-page.vue'
 import NovaMovimentacaoPage from '@/pages/nova-movimentacao-page.vue'
 import CategoriasPage from '@/pages/categorias-page.vue'
@@ -22,13 +23,13 @@ const routes = [
 
 export const router = createRouter({
   routes,
-  history: createWebHashHistory()
+  history: createWebHashHistory(),
 })
 
-const isAuthenticated = false // TODO check token
 
 router.beforeEach(async (to) => {
-  if (!isAuthenticated && to.path !== '/auth') {
+  const userStore = useUserStore()
+  if (!userStore.isLogged() && to.path !== '/auth') {
     return { path: '/auth' }
   }
 })
diff --git a/web-app-vue/src/stores/userStore.js b/web-app-vue/src/stores/userStore.js
index dcd2e52..c8c2d1d 100644
--- a/web-app-vue/src/stores/userStore.js
+++ b/web-app-vue/src/stores/userStore.js
@@ -33,5 +33,7 @@ export const useUserStore = defineStore("user-store", () => {
     logout();
   };
 
-  return { store, userData, setToken, doLogin, doCreateUser, logout, deleteAccount };
+  const isLogged = () => store.token != null
+
+  return { store, userData, setToken, doLogin, doCreateUser, logout, deleteAccount, isLogged };
 });
diff --git a/web-app-vue/vite.config.js b/web-app-vue/vite.config.js
index 1eac5f3..a270254 100644
--- a/web-app-vue/vite.config.js
+++ b/web-app-vue/vite.config.js
@@ -3,11 +3,12 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import VueDevtools from 'vite-plugin-vue-devtools'
+import vuetify from "vite-plugin-vuetify";
 
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), VueDevtools()],
+  plugins: [vue(), VueDevtools(), vuetify()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))