diff --git a/pkg/services/factors.go b/pkg/services/factors.go
index 15b066c..21f538a 100644
--- a/pkg/services/factors.go
+++ b/pkg/services/factors.go
@@ -1,9 +1,10 @@
 package services
 
 import (
+	"fmt"
+
 	"code.smartsheep.studio/hydrogen/identity/pkg/database"
 	"code.smartsheep.studio/hydrogen/identity/pkg/models"
-	"fmt"
 	"github.com/google/uuid"
 	"github.com/spf13/viper"
 )
@@ -51,7 +52,7 @@ func GetFactorCode(factor models.AuthFactor) (bool, error) {
 			return true, err
 		}
 
-		factor.Secret = uuid.NewString()[:8]
+		factor.Secret = uuid.NewString()[:6]
 		if err := database.C.Save(&factor).Error; err != nil {
 			return true, err
 		}
diff --git a/pkg/views/src/components/Copyright.vue b/pkg/views/src/components/Copyright.vue
new file mode 100644
index 0000000..f3f6baa
--- /dev/null
+++ b/pkg/views/src/components/Copyright.vue
@@ -0,0 +1,6 @@
+<template>
+  <div class="text-xs text-center opacity-80">
+    <p>Copyright © {{ new Date().getFullYear() }} Solsynth</p>
+    <p>Powered by <a class="underline" href="#">Hydrogen.Identity</a></p>
+  </div>
+</template>
diff --git a/pkg/views/src/components/auth/AccountLocator.vue b/pkg/views/src/components/auth/AccountLocator.vue
new file mode 100644
index 0000000..0e6be6c
--- /dev/null
+++ b/pkg/views/src/components/auth/AccountLocator.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="flex items-center">
+    <v-form class="flex-grow-1" @submit.prevent="submit">
+      <v-text-field label="Account ID" variant="solo" density="comfortable" :loading="props.loading" v-model="probe" />
+
+      <v-expand-transition>
+        <v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
+          Something went wrong... {{ error }}
+        </v-alert>
+      </v-expand-transition>
+
+      <div class="flex justify-end">
+        <v-btn
+          type="submit"
+          variant="text"
+          color="primary"
+          class="justify-self-end"
+          append-icon="mdi-arrow-right"
+          :disabled="props.loading"
+        >
+          Next
+        </v-btn>
+      </div>
+    </v-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { request } from "@/scripts/request"
+
+const probe = ref("")
+
+const error = ref<string | null>(null)
+
+const props = defineProps<{ loading?: boolean }>()
+const emits = defineEmits(["swap", "update:loading", "update:factors", "update:challenge"])
+
+async function submit() {
+  if (!probe) return
+
+  emits("update:loading", true)
+  const res = await request("/api/auth", {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ id: probe.value }),
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    const data = await res.json()
+    emits("update:factors", data["factors"])
+    emits("update:challenge", data["challenge"])
+    emits("swap", "pick")
+    error.value = null
+  }
+  emits("update:loading", false)
+}
+</script>
diff --git a/pkg/views/src/components/auth/FactorApplicator.vue b/pkg/views/src/components/auth/FactorApplicator.vue
new file mode 100644
index 0000000..4571c5a
--- /dev/null
+++ b/pkg/views/src/components/auth/FactorApplicator.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="flex items-center">
+    <v-form class="flex-grow-1" @submit.prevent="submit">
+      <div v-if="inputType === 'one-time-password'" class="text-center">
+        <p class="text-xs opacity-90">Check your inbox!</p>
+        <v-otp-input class="pt-0" variant="solo" density="compact" :length="6" v-model="password" :loading="loading" />
+      </div>
+      <v-text-field
+        v-else
+        label="Password"
+        type="password"
+        variant="solo"
+        density="comfortable"
+        :loading="loading"
+        v-model="password"
+      />
+
+      <v-expand-transition>
+        <v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
+          Something went wrong... {{ error }}
+        </v-alert>
+      </v-expand-transition>
+
+      <div class="flex justify-end">
+        <v-btn
+          type="submit"
+          variant="text"
+          color="primary"
+          class="justify-self-end"
+          append-icon="mdi-arrow-right"
+          :disabled="loading"
+        >
+          Next
+        </v-btn>
+      </div>
+    </v-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { request } from "@/scripts/request"
+import { useUserinfo } from "@/stores/userinfo"
+import { computed, ref } from "vue"
+import { useRoute, useRouter } from "vue-router"
+
+const password = ref("")
+
+const error = ref<string | null>(null)
+
+const props = defineProps<{ loading?: boolean; currentFactor?: any; challenge?: any }>()
+const emits = defineEmits(["swap", "update:challenge"])
+
+const route = useRoute()
+const router = useRouter()
+
+const { readProfiles } = useUserinfo()
+
+async function submit() {
+  const res = await request(`/api/auth`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      challenge_id: props.challenge?.id,
+      factor_id: props.currentFactor?.id,
+      secret: password.value,
+    }),
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    const data = await res.json()
+    if (data["is_finished"]) {
+      await getToken(data["session"]["grant_token"])
+      await readProfiles()
+      callback()
+    } else {
+      emits("swap", "pick")
+      emits("update:challenge", data["challenge"])
+      error.value = null
+    }
+  }
+}
+
+async function getToken(tk: string) {
+  const res = await request("/api/auth/token", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      code: tk,
+      grant_type: "grant_token",
+    }),
+  })
+  if (res.status !== 200) {
+    const err = await res.text()
+    error.value = err
+    throw new Error(err)
+  } else {
+    error.value = null
+  }
+}
+
+function callback() {
+  if (route.query["closable"]) {
+    window.close()
+  } else if (route.query["redirect_uri"]) {
+    window.open((route.query["redirect_uri"] as string) ?? "/", "_self")
+  } else {
+    router.push({ name: "dashboard" })
+  }
+}
+
+const inputType = computed(() => {
+  switch (props.currentFactor?.type) {
+    case 0:
+      return "text"
+    case 1:
+      return "one-time-password"
+  }
+})
+</script>
diff --git a/pkg/views/src/components/auth/FactorPicker.vue b/pkg/views/src/components/auth/FactorPicker.vue
new file mode 100644
index 0000000..730a5c5
--- /dev/null
+++ b/pkg/views/src/components/auth/FactorPicker.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="flex items-center">
+    <div class="flex-grow-1">
+      <v-card class="mb-3">
+        <v-list density="compact" color="primary">
+          <v-list-item
+            v-for="item in props.factors ?? []"
+            :prepend-icon="getFactorType(item)?.icon"
+            :title="getFactorType(item)?.label"
+            :active="focus === item.id"
+            :disabled="getFactorAvailable(item)"
+            @click="focus = item.id"
+          />
+        </v-list>
+      </v-card>
+
+      <v-expand-transition>
+        <v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
+          Something went wrong... {{ error }}
+        </v-alert>
+      </v-expand-transition>
+
+      <div class="flex justify-end">
+        <v-btn variant="text" color="primary" class="justify-self-end" append-icon="mdi-arrow-right" @click="submit">
+          Next
+        </v-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { request } from "@/scripts/request"
+
+const focus = ref<number | null>(null)
+
+const error = ref<string | null>(null)
+
+const props = defineProps<{ factors?: any[]; challenge?: any }>()
+const emits = defineEmits(["swap", "update:loading", "update:currentFactor"])
+
+async function submit() {
+  if (!focus) return
+
+  emits("update:loading", true)
+  const res = await request(`/api/auth/factors/${focus.value}`, {
+    method: "POST",
+  })
+  if (res.status !== 200 && res.status !== 204) {
+    error.value = await res.text()
+  } else {
+    const item = props.factors?.find((item: any) => item.id === focus.value)
+    emits("update:currentFactor", item)
+    emits("swap", "applicator")
+    error.value = null
+  }
+  emits("update:loading", false)
+}
+
+function getFactorType(item: any) {
+  switch (item.type) {
+    case 0:
+      return { icon: "mdi-form-textbox-password", label: "Password Validation" }
+    case 1:
+      return { icon: "mdi-email-fast", label: "Email One Time Password" }
+  }
+}
+
+function getFactorAvailable(factor: any) {
+  const blacklist: number[] = props.challenge?.blacklist_factors ?? []
+  return blacklist.includes(factor.id)
+}
+</script>
diff --git a/pkg/views/src/router/index.ts b/pkg/views/src/router/index.ts
index 994d293..d78ea4a 100644
--- a/pkg/views/src/router/index.ts
+++ b/pkg/views/src/router/index.ts
@@ -7,8 +7,17 @@ const router = createRouter({
     {
       path: "/",
       component: MasterLayout,
-      children: [{ path: "/", name: "dashboard", component: () => import("@/views/dashboard.vue") }],
+      children: [
+        { path: "/", name: "dashboard", component: () => import("@/views/dashboard.vue") },
+      ],
     },
+    {
+      path: "/auth",
+      children: [
+        { path: "sign-in", name: "auth.sign-in", component: () => import("@/views/auth/sign-in.vue") },
+        // { path: "sign-up", name: "auth.sign-up", component: () => import("@/views/auth/sign-up.vue") },
+      ]
+    }
   ],
 })
 
diff --git a/pkg/views/src/views/auth/sign-in.vue b/pkg/views/src/views/auth/sign-in.vue
new file mode 100644
index 0000000..81b30f0
--- /dev/null
+++ b/pkg/views/src/views/auth/sign-in.vue
@@ -0,0 +1,69 @@
+<template>
+  <v-container class="h-screen flex flex-col gap-3 items-center justify-center">
+    <v-card class="w-full max-w-[720px]" :loading="loading">
+      <v-card-text class="card-grid pa-9">
+        <div>
+          <v-avatar color="accent" icon="mdi-login-variant" size="large" class="card-rounded mb-2" />
+          <h1 class="text-2xl">Sign in</h1>
+          <p>Through sign in to access the entire Solar Network.</p>
+        </div>
+
+        <v-window :model-value="panel" class="pa-2 mx-[-0.5rem]">
+          <v-window-item v-for="k in Object.keys(panels)" :value="k">
+            <component
+              :is="panels[k]"
+              @swap="(val: string) => (panel = val)"
+              v-model:loading="loading"
+              v-model:factors="factors"
+              v-model:currentFactor="currentFactor"
+              v-model:challenge="challenge"
+            />
+          </v-window-item>
+        </v-window>
+      </v-card-text>
+    </v-card>
+
+    <copyright />
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { ref, type Component } from "vue"
+import Copyright from "@/components/Copyright.vue"
+import AccountLocator from "@/components/auth/AccountLocator.vue"
+import FactorPicker from "@/components/auth/FactorPicker.vue"
+import FactorApplicator from "@/components/auth/FactorApplicator.vue"
+
+const loading = ref(false)
+
+const factors = ref<any>(null)
+const currentFactor = ref<any>(null)
+const challenge = ref<any>(null)
+
+const panel = ref("locate")
+
+const panels: { [id: string]: Component } = {
+  locate: AccountLocator,
+  pick: FactorPicker,
+  applicator: FactorApplicator,
+}
+</script>
+
+<style scoped>
+.card-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  .card-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.card-rounded {
+  border-radius: 8px;
+}
+</style>
+@/components/Copyright.vue