diff --git a/web/bun.lock b/web/bun.lock
index f57b774..0ef3739 100644
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -9,6 +9,7 @@
         "@nuxtjs/tailwindcss": "7.0.0-beta.0",
         "nuxt": "^3.17.5",
         "typescript": "^5.6.3",
+        "valibot": "^1.1.0",
         "vue": "^3.5.16",
         "vue-router": "^4.5.1",
       },
@@ -1585,6 +1586,8 @@
 
     "uuid": ["uuid@11.1.0", "", { "bin": { "uuid": "dist/esm/bin/uuid" } }, "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A=="],
 
+    "valibot": ["valibot@1.1.0", "", { "peerDependencies": { "typescript": ">=5" }, "optionalPeers": ["typescript"] }, "sha512-Nk8lX30Qhu+9txPYTwM0cFlWLdPFsFr6LblzqIySfbZph9+BFsAHsNvHOymEviUepeIW6KFHzpX8TKhbptBXXw=="],
+
     "validate-npm-package-license": ["validate-npm-package-license@3.0.4", "", { "dependencies": { "spdx-correct": "^3.0.0", "spdx-expression-parse": "^3.0.0" } }, "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew=="],
 
     "vaul-vue": ["vaul-vue@0.4.1", "", { "dependencies": { "@vueuse/core": "^10.8.0", "reka-ui": "^2.0.0", "vue": "^3.4.5" } }, "sha512-A6jOWOZX5yvyo1qMn7IveoWN91mJI5L3BUKsIwkg6qrTGgHs1Sb1JF/vyLJgnbN1rH4OOOxFbtqL9A46bOyGUQ=="],
diff --git a/web/pages/index.vue b/web/pages/index.vue
index c7d1ac7..44cd9e5 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -6,8 +6,12 @@
 </template>
 
 <script lang="ts" setup>
-const res = await useFetch("https://door.svitan.dev/", {
-  method: "GET",
-  retry: 2,
+const token = useCookie("token")
+
+onMounted(() => {
+    if (!token.value) {
+        return navigateTo("/token")
+    }
+    console.log(token.value)
 })
 </script>
diff --git a/web/pages/token.vue b/web/pages/token.vue
index a7e7d5a..d362161 100644
--- a/web/pages/token.vue
+++ b/web/pages/token.vue
@@ -1,3 +1,42 @@
 <template>
-  <main>where token?</main>
+    <main class="flex items-center justify-center min-w-screen min-h-screen">
+        <UForm :schema="schema" :state="state" @submit="onSubmit" class="flex flex-col items-end justify-center gap-y-2">
+            <UFormField label="Token" name="token" size="xl" required>
+                <UInput v-model="state.token" placeholder="Your token..." size="xl"/>
+            </UFormField>
+
+            <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"
+
+const schema = v.object({
+    token: v.pipe(v.string(), v.nonEmpty("Please enter your token"))
+})
+type Schema = v.InferOutput<typeof schema>
+
+const state = reactive({
+    token: ""
+})
+const toast = useToast()
+
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+    const token = event.data.token
+    const res = await $fetch("https://door.svitan.dev/open", {
+        method: "GET",
+        headers: {
+            Authorization: token
+        }
+    })
+
+    console.log(token)
+    console.log(res)
+    toast.add({ title: "Token saved", color: "success"  })
+}
+</script>