diff --git a/web/.prettierrc b/web/.prettierrc
new file mode 100644
index 0000000..0e23fe3
--- /dev/null
+++ b/web/.prettierrc
@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": false
+}
\ No newline at end of file
diff --git a/web/bun.lock b/web/bun.lock
index 0ef3739..4a80686 100644
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -13,6 +13,9 @@
         "vue": "^3.5.16",
         "vue-router": "^4.5.1",
       },
+      "devDependencies": {
+        "prettier": "^3.5.3",
+      },
     },
   },
   "packages": {
@@ -1310,6 +1313,8 @@
 
     "precinct": ["precinct@12.2.0", "", { "dependencies": { "@dependents/detective-less": "^5.0.1", "commander": "^12.1.0", "detective-amd": "^6.0.1", "detective-cjs": "^6.0.1", "detective-es6": "^5.0.1", "detective-postcss": "^7.0.1", "detective-sass": "^6.0.1", "detective-scss": "^5.0.1", "detective-stylus": "^5.0.1", "detective-typescript": "^14.0.0", "detective-vue2": "^2.2.0", "module-definition": "^6.0.1", "node-source-walk": "^7.0.1", "postcss": "^8.5.1", "typescript": "^5.7.3" }, "bin": { "precinct": "bin/cli.js" } }, "sha512-NFBMuwIfaJ4SocE9YXPU/n4AcNSoFMVFjP72nvl3cx69j/ke61/hPOWFREVxLkFhhEGnA8ZuVfTqJBa+PK3b5w=="],
 
+    "prettier": ["prettier@3.5.3", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw=="],
+
     "pretty-bytes": ["pretty-bytes@6.1.1", "", {}, "sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ=="],
 
     "process": ["process@0.11.10", "", {}, "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="],
diff --git a/web/package.json b/web/package.json
index e29faaf..bed92e6 100644
--- a/web/package.json
+++ b/web/package.json
@@ -18,5 +18,8 @@
         "valibot": "^1.1.0",
         "vue": "^3.5.16",
         "vue-router": "^4.5.1"
+    },
+    "devDependencies": {
+        "prettier": "^3.5.3"
     }
 }
diff --git a/web/pages/token.vue b/web/pages/token.vue
index 71a369b..3d8b06c 100644
--- a/web/pages/token.vue
+++ b/web/pages/token.vue
@@ -14,44 +14,62 @@
                 />
             </UFormField>
 
-            <UButton type="submit" size="xl"> Submit </UButton>
+            <UButton type="submit" size="xl"> Submit</UButton>
         </UForm>
     </main>
 </template>
 
 <script lang="ts" setup>
-import * as v from "valibot";
-import type { FormSubmitEvent } from "@nuxt/ui";
+import * as v from "valibot"
+import type { FormSubmitEvent } from "@nuxt/ui"
 
-const token = useToken();
+const token = useToken()
 
 const schema = v.object({
     token: v.pipe(v.string(), v.nonEmpty("Please enter your token")),
-});
-type Schema = v.InferOutput<typeof schema>;
+})
+type Schema = v.InferOutput<typeof schema>
 
 const state = reactive({
     token: "",
-});
-const toast = useToast();
+})
+const toast = useToast()
 
 async function onSubmit(event: FormSubmitEvent<Schema>) {
-    const token = event.data.token;
-    const res = await $fetch("https://door.svitan.dev/open", {
+    const received = event.data.token
+    await $fetch("https://door.svitan.dev/open", {
         method: "GET",
         headers: {
-            Authorization: `Bearer ${token}`,
+            Authorization: `Bearer ${received}`,
         },
-    });
-
-    console.log(token);
-    console.log(res);
-    toast.add({ title: "Token saved", color: "success" });
+        async onRequestError({ error }) {
+            toast.add({
+                title: "Error occurred",
+                description: error.message,
+                color: "error",
+            })
+        },
+        async onResponse({ response }) {
+            if (response.status === 200) {
+                toast.add({ title: "Token saved", color: "success" })
+                token.value = received
+                navigateTo("/")
+            } else if (response.status === 401) {
+                toast.add({ title: "Token not valid", color: "error" })
+            } else {
+                toast.add({
+                    title: "Error occurred",
+                    description: await response.text(),
+                    color: "error",
+                })
+            }
+        },
+    })
 }
 
 onMounted(() => {
     if (token.value) {
-        return navigateTo("/");
+        return navigateTo("/")
     }
-});
+})
 </script>