diff --git a/.github/ci.yml b/.github/ci.yml
index 85705a49..e13f579f 100644
--- a/.github/ci.yml
+++ b/.github/ci.yml
@@ -1,4 +1,5 @@
 # https://github.com/joshnuss/testing-with-sveltekit/blob/master/.github/workflows/ci.yml
+# https://davetayls.me/blog/2023-06-12-deploying-a-monorepo-to-vercel-with-github-actions
 name: CI
 
 on:
diff --git a/apps/console/src/lib/components/layout/header.svelte b/apps/console/src/lib/components/layout/header.svelte
index 0cdef412..dd96c044 100644
--- a/apps/console/src/lib/components/layout/header.svelte
+++ b/apps/console/src/lib/components/layout/header.svelte
@@ -6,7 +6,7 @@ import LangSwitch from '$lib/components/layout/lang-switch.svelte';
 // import LoadingIndicatorSpinner from '$lib/components/layout/loading-indicator-spinner.svelte';
 import LoadingIndicatorBar from '$lib/components/layout/loading-indicator-bar.svelte';
 import { storeTheme } from '$lib/stores';
-import { elevated, isAuthenticated, user } from '$lib/stores/user';
+import { getNhostClient } from '$lib/stores/nhost';
 import type { DrawerSettings, ModalSettings } from '@skeletonlabs/skeleton';
 import { AppBar, LightSwitch, getDrawerStore, getModalStore, popup } from '@skeletonlabs/skeleton';
 import { LogoIcon } from '@spectacular/skeleton/components/logos';
@@ -29,6 +29,7 @@ const drawerStore = getDrawerStore();
 // Local
 let isOsMac = false;
 const modalStore = getModalStore();
+const { elevated, isAuthenticated, user } = getNhostClient();
 
 // Set Search Keyboard Shortcut
 if (browser) {
diff --git a/apps/console/src/lib/components/layout/wait-for-auth.svelte b/apps/console/src/lib/components/layout/wait-for-auth.svelte
index bda94a71..7a4bc4d5 100644
--- a/apps/console/src/lib/components/layout/wait-for-auth.svelte
+++ b/apps/console/src/lib/components/layout/wait-for-auth.svelte
@@ -3,7 +3,9 @@
  * Ensure that Auth is initialized before rendering the app.
  * Otherwise all authorized graphql queries will get errors.
  */
-import { isAuthenticated } from '$lib/stores/user';
+import { getNhostClient } from '$lib/stores/nhost';
+
+const { isAuthenticated } = getNhostClient();
 </script>
 
 {#if $isAuthenticated}
diff --git a/apps/console/src/lib/components/magic-spell-textarea/magic-spell-textarea.svelte b/apps/console/src/lib/components/magic-spell-textarea/magic-spell-textarea.svelte
index c691d48b..110e81cc 100644
--- a/apps/console/src/lib/components/magic-spell-textarea/magic-spell-textarea.svelte
+++ b/apps/console/src/lib/components/magic-spell-textarea/magic-spell-textarea.svelte
@@ -60,6 +60,7 @@ onMount(() => {
 >
   <textarea use:autosize={{useJs: true}}
     {...$$props}
+    class="textarea"
     disabled={$isLoading}
     value={$isLoading && $completion.length > 0 ? $completion.trim() : value}
     on:change={handleChange}
diff --git a/apps/console/src/lib/graphql/client.ts b/apps/console/src/lib/graphql/client.ts
index 3ef96c5e..82f4cfe7 100644
--- a/apps/console/src/lib/graphql/client.ts
+++ b/apps/console/src/lib/graphql/client.ts
@@ -1,17 +1,13 @@
 import { browser } from '$app/environment';
 import { invalidateAll } from '$app/navigation';
 import { env } from '$env/dynamic/public';
-import { HoudiniClient } from '$houdini';
-import type { ClientPlugin } from '$houdini';
+import { type ClientPlugin, HoudiniClient, getClientSession } from '$houdini';
 import { subscription } from '$houdini/plugins';
-import { accessToken as $accessToken } from '$lib/stores/user';
 import { Logger, hasErrorMessage, hasErrorTypes, isErrorType } from '@spectacular/utils';
 import { error, redirect } from '@sveltejs/kit';
 import { createClient as createWSClient } from 'graphql-ws';
-import { get } from 'svelte/store';
 
 const url = env.PUBLIC_GRAPHQL_ENDPOINT;
-
 const log = new Logger(browser ? 'houdini.browser.client' : 'houdini.server.client');
 
 // in order to verify that we send metadata, we need something that will log the metadata after
@@ -47,14 +43,14 @@ export default new HoudiniClient({
     if (session) {
       log.debug('session...', { session });
     }
+    // use client-side AT if avaiable !!!
     let accessToken = session?.accessToken;
     const backendToken = metadata?.backendToken;
     const useRole = metadata?.useRole;
     const adminSecret = metadata?.adminSecret;
 
-    // use client-side AT !!!
-    if (browser) {
-      accessToken = get($accessToken) ?? undefined;
+    if (browser && getClientSession()?.accessToken) {
+      accessToken = getClientSession().accessToken;
     }
 
     return {
diff --git a/apps/console/src/lib/nhost.ts b/apps/console/src/lib/nhost.ts
index fbe17555..67a4eb26 100644
--- a/apps/console/src/lib/nhost.ts
+++ b/apps/console/src/lib/nhost.ts
@@ -1,6 +1,6 @@
 import { goto } from '$app/navigation';
 import { SearchSecurityKeysStore } from '$houdini';
-import { nhost, user } from '$lib/stores/user';
+import { getNhostClient } from '$lib/stores/nhost';
 import { Logger } from '@spectacular/utils';
 
 /**
@@ -11,6 +11,7 @@ import { Logger } from '@spectacular/utils';
 const log = new Logger('nhost.auth.brower');
 
 export async function signUp(email: string, password: string, displayName: string) {
+  const nhost = getNhostClient();
   const { session, error } = await nhost.auth.signUp({
     email,
     password,
@@ -23,24 +24,24 @@ export async function signUp(email: string, password: string, displayName: strin
     throw error;
   }
   if (session) {
-    // user.set(nhost.auth.getUser());
     goto('/dashboard');
   }
 }
 
 export async function signIn(email: string, password: string): Promise<void> {
+  const nhost = getNhostClient();
   const { session, error } = await nhost.auth.signIn({ email, password });
   if (error) {
     log.error(error);
     throw error;
   }
   if (session) {
-    // user.set(nhost.auth.getUser());
     goto('/dashboard');
   }
 }
 
 export async function signOut() {
+  const nhost = getNhostClient();
   const { error } = await nhost.auth.signOut();
   if (error) {
     log.error(error);
@@ -49,11 +50,13 @@ export async function signOut() {
 }
 
 export async function isAuthenticated(): Promise<boolean> {
+  const nhost = getNhostClient();
   return await nhost.auth.isAuthenticatedAsync();
 }
 
 const skQuery = new SearchSecurityKeysStore().artifact.raw;
 export async function hasSecurityKey(userId: string) {
+  const nhost = getNhostClient();
   const { data, error } = await nhost.graphql.request(skQuery, { userId });
   if (error) {
     log.error({ error });
diff --git a/apps/console/src/lib/server/middleware/refresh-token.ts b/apps/console/src/lib/server/middleware/refresh-token.ts
new file mode 100644
index 00000000..671817e7
--- /dev/null
+++ b/apps/console/src/lib/server/middleware/refresh-token.ts
@@ -0,0 +1,11 @@
+import { Logger } from '@spectacular/utils';
+import type { Handle } from '@sveltejs/kit';
+
+const log = new Logger('server:middleware:refreshToken');
+
+export const refreshToken: Handle = async ({ event, resolve }) => {
+  // TODO: extract refreshToken login from auth hook
+  //  https://github.com/Critteros/JavaFlavors/blob/main/web/src/lib/server/hooks/tokenRefresh.ts
+  const response = await resolve(event);
+  return response;
+};
diff --git a/apps/console/src/lib/stores/loading.ts b/apps/console/src/lib/stores/loading.ts
index c74f8daa..3f0bfd90 100644
--- a/apps/console/src/lib/stores/loading.ts
+++ b/apps/console/src/lib/stores/loading.ts
@@ -17,7 +17,6 @@ export class LoadingState {
   constructor() {
     onDestroy(() => {
       this.#log.debug('onDestroy called');
-      // TODO Unsubscribe all listeners??
       this.reset();
     });
   }
diff --git a/apps/console/src/lib/stores/nhost.ts b/apps/console/src/lib/stores/nhost.ts
new file mode 100644
index 00000000..1a9f9256
--- /dev/null
+++ b/apps/console/src/lib/stores/nhost.ts
@@ -0,0 +1,149 @@
+import { browser } from '$app/environment';
+import { env } from '$env/dynamic/public';
+import { PUBLIC_NHOST_REGION, PUBLIC_NHOST_SUBDOMAIN } from '$env/static/public';
+import { extractSession, getClientSession, setClientSession } from '$houdini';
+import { NHOST_SESSION_KEY } from '$lib/constants';
+import { hasSecurityKey } from '$lib/nhost';
+import { NhostClient, type NhostClientConstructorParams } from '@nhost/nhost-js';
+import type { User } from '@nhost/nhost-js';
+import { Logger } from '@spectacular/utils';
+import Cookies from 'js-cookie';
+import { getContext, onDestroy, setContext } from 'svelte';
+import { type Readable, type Writable, derived, get, readable, readonly, writable } from 'svelte/store';
+
+export class SvelteKitNhostClient extends NhostClient {
+  #log = new Logger('auth.store.client');
+
+  #user = writable<User | null>(null);
+  /**
+   *  Readable: updates every time the authentication status changes from signed-in to signed-out.
+   */
+  readonly isAuthenticated: Readable<boolean>;
+  /**
+   *  Readable: updates every time the access or refresh token is changed.
+   */
+  readonly accessToken: Readable<string | null>;
+
+  /**
+   * Readable: updates when `accessToken` changed.
+   * e.g., when `nhost.auth.elevateEmailSecurityKey(emmail)` is called or `accessToken` refeshed.
+   */
+  readonly elevated: Readable<boolean | null>;
+
+  constructor(params: NhostClientConstructorParams) {
+    super({
+      ...params,
+      start: browser,
+      autoSignIn: browser,
+      autoRefreshToken: browser,
+      clientStorageType: 'cookie',
+    });
+
+    this.isAuthenticated = readable<boolean>(false, (set) => {
+      if (browser) {
+        set(this.auth.isAuthenticated());
+        this.auth.onAuthStateChanged((event, session) => {
+          this.#log.debug(`The auth state has changed. State is now ${event} with session:`, { session });
+          switch (event) {
+            case 'SIGNED_IN':
+              set(true);
+              this.#user.set(session?.user || null);
+              break;
+            case 'SIGNED_OUT':
+              set(false);
+              this.#user.set(null);
+              Cookies.remove(NHOST_SESSION_KEY);
+              break;
+          }
+        });
+        return () => this.#log.debug('no more subscribers for isAuthenticated');
+      }
+    });
+
+    this.accessToken = readable<string | null>(null, (set) => {
+      if (browser) {
+        set(this.auth.getAccessToken() ?? null);
+        this.auth.onTokenChanged((session) => {
+          this.#log.debug('The access token refreshed:', { session });
+          const accessToken = session?.accessToken;
+          set(accessToken ?? null);
+          // set fresh accessToken into HoudiniClient's session (client-side only)
+          setClientSession({ accessToken });
+          // save session as cookie everytime token is refreshed or user signin via WebAuthN.
+          // Cookie will be removed when browser closed or user explicitly SIGNED_OUT.
+          Cookies.set(NHOST_SESSION_KEY, btoa(JSON.stringify(session)), {
+            path: '/',
+            sameSite: 'strict',
+            secure: true,
+          });
+        });
+        return () => this.#log.debug('no more subscribers for accessToken');
+      }
+    });
+
+    this.elevated = derived(
+      [this.accessToken, this.#user],
+      ([$at, $user]) => {
+        return $at && $user ? this.auth.getHasuraClaim('x-hasura-auth-elevated') === $user.id : false;
+      },
+      false,
+    );
+
+    onDestroy(() => {
+      // Do cleanup ???
+      this.#log.debug('onDestroy called');
+    });
+  }
+
+  get user() {
+    return readonly(this.#user);
+  }
+
+  async isAuthenticatedAsync(): Promise<boolean> {
+    return await this.auth.isAuthenticatedAsync();
+  }
+
+  /**
+   * elevate if neededelevateEmailSecurityKey
+   * @returns error
+   */
+  async elevate() {
+    const $elevated = get(this.elevated);
+    const $user = get(this.#user);
+    if (!$elevated && $user?.id && (await hasSecurityKey($user.id))) {
+      const { error } = await this.auth.elevateEmailSecurityKey($user?.email as string);
+      if (error) return error;
+    }
+    return null;
+  }
+}
+
+// this is important if u are gonna have any SSR
+// https://www.youtube.com/watch?v=EyDV5XLfagg
+// https://kit.svelte.dev/docs/state-management
+
+const NHOST_CLIENT_KEY = Symbol('NHOST_CLIENT');
+
+/**
+ * We should not have exported state like this, to prevent:
+ * Session state shared between different users when rendered on server(SSR), but don't worry,
+ * This custom `nhost` object will not have sensitive data on server-side,
+ * as we carefully check if this code is running in the browser, then only set session data.
+ */
+// export let nhost: SvelteKitNhostClient;
+
+export const setNhostClient = () => {
+  const nhost = new SvelteKitNhostClient({
+    // subdomain: PUBLIC_NHOST_SUBDOMAIN || 'local',
+    // region: PUBLIC_NHOST_REGION,
+    authUrl: env.PUBLIC_NHOST_AUTH_URL,
+    graphqlUrl: env.PUBLIC_NHOST_GRAPHQL_URL,
+    storageUrl: env.PUBLIC_NHOST_STORAGE_URL,
+    functionsUrl: env.PUBLIC_NHOST_FUNCTIONS_URL,
+  });
+  return setContext(NHOST_CLIENT_KEY, nhost);
+};
+
+export const getNhostClient = () => {
+  return getContext<ReturnType<typeof setNhostClient>>(NHOST_CLIENT_KEY);
+};
diff --git a/apps/console/src/routes/(app)/+layout.svelte b/apps/console/src/routes/(app)/+layout.svelte
index 2d7194aa..bcdfa66c 100644
--- a/apps/console/src/routes/(app)/+layout.svelte
+++ b/apps/console/src/routes/(app)/+layout.svelte
@@ -3,17 +3,18 @@
 import { goto } from '$app/navigation';
 import { page } from '$app/stores';
 import WaitForAuth from '$lib/components/layout/wait-for-auth.svelte';
-import { isAuthenticated, nhost } from '$lib/stores/user';
+import { getNhostClient } from '$lib/stores/nhost';
 import { onMount } from 'svelte';
 
 export let data;
+const nhost = getNhostClient();
 
 /**
  * Ensure that Auth is initialized before rendering the app.
  * Otherwise all authorized graphql queries will get errors.
  */
 onMount(async () => {
-  if (!(await nhost.auth.isAuthenticated())) {
+  if (!nhost.auth.isAuthenticated()) {
     goto(`/signin?redirectTo=${$page.url.pathname}`);
   }
 });
diff --git a/apps/console/src/routes/(app)/policies/+page.ts b/apps/console/src/routes/(app)/policies/+page.ts
index 3507bec2..1f1e7e2f 100644
--- a/apps/console/src/routes/(app)/policies/+page.ts
+++ b/apps/console/src/routes/(app)/policies/+page.ts
@@ -13,7 +13,7 @@ export const load = async (event) => {
   const form = await superValidate(url, zod(schema));
 
   if (!form.valid) return { status: 400, form }; // return fail(400, { form }); // FIXME
-  await sleep(5000);
+  await sleep(1000);
 
   const {
     data: { limit, offset, subjectType, subjectId },
diff --git a/apps/console/src/routes/(app)/profile/+page.ts b/apps/console/src/routes/(app)/profile/+page.ts
index baac8364..6cacf66c 100644
--- a/apps/console/src/routes/(app)/profile/+page.ts
+++ b/apps/console/src/routes/(app)/profile/+page.ts
@@ -1,14 +1,13 @@
 import { load_GetUser } from '$houdini';
-import { user } from '$lib/stores/user';
 import { Logger } from '@spectacular/utils';
 import { error } from '@sveltejs/kit';
-import { get } from 'svelte/store';
 import type { PageLoad, GetUserVariables as Variables } from './$houdini';
 
 const log = new Logger('user.profile.browser');
 
 // export const _GetUserVariables: Variables = async (event) => {
-//   const userId = get(user)?.id;
+// const { user } = nhost;
+// const userId = get(user)?.id;
 //   if (!userId) {
 //     log.error('not authenticated');
 //     throw error(400, 'not authenticated');
@@ -20,7 +19,8 @@ const log = new Logger('user.profile.browser');
  * TODO: is this going to be a blocking call?
  */
 export const load: PageLoad = async (event) => {
-  const userId = get(user)?.id;
+  const { session } = await event.parent();
+  const userId = session?.user.id;
   if (!userId) {
     log.error('not authenticated');
     throw error(400, 'not authenticated');
diff --git a/apps/console/src/routes/(app)/profile/components/change-email.svelte b/apps/console/src/routes/(app)/profile/components/change-email.svelte
index fd2103d2..0f98348d 100644
--- a/apps/console/src/routes/(app)/profile/components/change-email.svelte
+++ b/apps/console/src/routes/(app)/profile/components/change-email.svelte
@@ -2,7 +2,7 @@
 import { handleMessage } from '$lib/components/layout/toast-manager';
 import { type ChangeEmail, changeEmailSchema } from '$lib/schema/user';
 import { getLoadingState } from '$lib/stores/loading';
-import { nhost } from '$lib/stores/user';
+import { getNhostClient } from '$lib/stores/nhost';
 import { getToastStore } from '@skeletonlabs/skeleton';
 import { DebugShell } from '@spectacular/skeleton';
 import { Button } from '@spectacular/skeleton/components/button';
@@ -17,6 +17,7 @@ export let initialData: ChangeEmail;
 const log = new Logger('profile:password:browser');
 const toastStore = getToastStore();
 const loadingState = getLoadingState();
+const { nhost } = getNhostClient();
 
 const form = superForm(defaults(initialData, zod(changeEmailSchema)), {
   SPA: true,
diff --git a/apps/console/src/routes/(app)/profile/components/change-password.svelte b/apps/console/src/routes/(app)/profile/components/change-password.svelte
index 232b1649..c7dda4f2 100644
--- a/apps/console/src/routes/(app)/profile/components/change-password.svelte
+++ b/apps/console/src/routes/(app)/profile/components/change-password.svelte
@@ -2,7 +2,7 @@
 import { handleMessage } from '$lib/components/layout/toast-manager';
 import { changePasswordSchema } from '$lib/schema/user';
 import { getLoadingState } from '$lib/stores/loading';
-import { nhost } from '$lib/stores/user';
+import { getNhostClient } from '$lib/stores/nhost';
 import { getToastStore } from '@skeletonlabs/skeleton';
 import { DebugShell } from '@spectacular/skeleton';
 import { Alerts } from '@spectacular/skeleton/components/form';
@@ -15,6 +15,7 @@ import { zod, zodClient } from 'sveltekit-superforms/adapters';
 const log = new Logger('profile:password:browser');
 const toastStore = getToastStore();
 const loadingState = getLoadingState();
+const { nhost } = getNhostClient();
 
 const form = superForm(defaults(zod(changePasswordSchema)), {
   SPA: true,
diff --git a/apps/console/src/routes/(app)/profile/components/elevate.svelte b/apps/console/src/routes/(app)/profile/components/elevate.svelte
index 63247d1e..241d4cc9 100644
--- a/apps/console/src/routes/(app)/profile/components/elevate.svelte
+++ b/apps/console/src/routes/(app)/profile/components/elevate.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { handleMessage } from '$lib/components/layout/toast-manager';
-import { elevate } from '$lib/stores/user';
+import { getNhostClient } from '$lib/stores/nhost';
 import { getToastStore } from '@skeletonlabs/skeleton';
 import { Alerts } from '@spectacular/skeleton/components/form';
 
@@ -8,6 +8,7 @@ import { Alerts } from '@spectacular/skeleton/components/form';
 let message: App.Superforms.Message | undefined;
 let errors: string[] = [];
 const toastStore = getToastStore();
+const { elevate } = getNhostClient();
 
 async function handleElevate() {
   const error = await elevate();
diff --git a/apps/console/src/routes/(app)/profile/components/security-key-form.svelte b/apps/console/src/routes/(app)/profile/components/security-key-form.svelte
index 07b8f48e..90bc3dbb 100644
--- a/apps/console/src/routes/(app)/profile/components/security-key-form.svelte
+++ b/apps/console/src/routes/(app)/profile/components/security-key-form.svelte
@@ -4,7 +4,7 @@ import * as m from '$i18n/messages';
 import { handleMessage } from '$lib/components/layout/toast-manager';
 import { webAuthnSchema } from '$lib/schema/user';
 import { getLoadingState } from '$lib/stores/loading';
-import { elevate, nhost } from '$lib/stores/user';
+import { getNhostClient } from '$lib/stores/nhost';
 import { getToastStore } from '@skeletonlabs/skeleton';
 import { DebugShell } from '@spectacular/skeleton';
 import { Alerts } from '@spectacular/skeleton/components/form';
@@ -19,6 +19,8 @@ import { zod } from 'sveltekit-superforms/adapters';
 const log = new Logger('profile:keys:browser');
 const toastStore = getToastStore();
 const loadingState = getLoadingState();
+const nhost = getNhostClient();
+const { elevate } = nhost;
 
 const form = superForm(defaults(zod(webAuthnSchema)), {
   SPA: true,
diff --git a/apps/console/src/routes/(app)/profile/components/security-key.svelte b/apps/console/src/routes/(app)/profile/components/security-key.svelte
index ac8727c2..0e1c8039 100644
--- a/apps/console/src/routes/(app)/profile/components/security-key.svelte
+++ b/apps/console/src/routes/(app)/profile/components/security-key.svelte
@@ -3,7 +3,7 @@ import { invalidateAll } from '$app/navigation';
 import type { SecurityKeyFields } from '$houdini';
 import { PendingValue, RemoveSecurityKeyStore, cache, fragment, graphql } from '$houdini';
 import { handleMessage } from '$lib/components/layout/toast-manager';
-import { elevate } from '$lib/stores/user';
+import { getNhostClient } from '$lib/stores/nhost';
 import { getToastStore } from '@skeletonlabs/skeleton';
 import { Logger } from '@spectacular/utils';
 import { GraphQLError } from 'graphql';
@@ -40,6 +40,7 @@ const handleDelete = async () => {
   isDeleting = true;
 
   // check if elevate is needed
+  const { elevate } = getNhostClient();
   const error = await elevate();
   if (error) {
     errors.push(error.message);
diff --git a/apps/console/src/routes/(auth)/reset/+page.server.ts b/apps/console/src/routes/(auth)/reset/+page.server.ts
index 51234af6..e48aae9b 100644
--- a/apps/console/src/routes/(auth)/reset/+page.server.ts
+++ b/apps/console/src/routes/(auth)/reset/+page.server.ts
@@ -3,13 +3,32 @@ import { resetPasswordSchema } from '$lib/schema/user';
 import { limiter } from '$lib/server/limiter/limiter';
 import { Logger, sleep } from '@spectacular/utils';
 import { fail } from '@sveltejs/kit';
+import { redirect as redirectWithFlash } from 'sveltekit-flash-message/server';
 import { message, setError, superValidate } from 'sveltekit-superforms';
 import { zod } from 'sveltekit-superforms/adapters';
 
 const log = new Logger('auth:reset:server');
 
+export const load = async (event) => {
+  const {
+    locals: { nhost },
+  } = event;
+  /**
+   * Preflight prevents direct posting. If preflight option for the
+   * cookie limiter is true and this function isn't called before posting,
+   * request will be limited.
+   *
+   * Remember to await, so the cookie will be set before returning!
+   */
+  await limiter.cookieLimiter?.preflight(event);
+
+  const isAuthenticated = nhost.auth.isAuthenticated();
+  if (isAuthenticated) redirectWithFlash(302, i18n.resolveRoute('/dashboard'));
+};
+
 export const actions = {
   default: async (event) => {
+    log.debug('in reset action');
     const {
       request,
       cookies,
diff --git a/apps/console/src/routes/(auth)/reset/+page.svelte b/apps/console/src/routes/(auth)/reset/+page.svelte
index 6000f873..e16853db 100644
--- a/apps/console/src/routes/(auth)/reset/+page.svelte
+++ b/apps/console/src/routes/(auth)/reset/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-import { page } from '$app/stores';
 import * as m from '$i18n/messages';
 import { handleMessage } from '$lib/components/layout/toast-manager';
 import { resetPasswordSchema } from '$lib/schema/user';
@@ -8,42 +7,62 @@ import { getToastStore } from '@skeletonlabs/skeleton';
 // import { ConicGradient } from '@skeletonlabs/skeleton';
 // import type { ConicStop } from '@skeletonlabs/skeleton';
 import { DebugShell } from '@spectacular/skeleton/components';
+import { Alerts } from '@spectacular/skeleton/components/form';
 import { Logger } from '@spectacular/utils';
-import { AlertTriangle, Loader, MoreHorizontal } from 'lucide-svelte';
-import { fade } from 'svelte/transition';
-import SuperDebug, { superForm } from 'sveltekit-superforms';
-import { zodClient } from 'sveltekit-superforms/adapters';
+import * as Form from 'formsnap';
+import { Loader, MoreHorizontal } from 'lucide-svelte';
+import SuperDebug, { defaults, superForm } from 'sveltekit-superforms';
+import { zod, zodClient } from 'sveltekit-superforms/adapters';
 
 export let data;
 const log = new Logger('auth:reset:browser');
-const toastStore = getToastStore();
+// Variables
 const loadingState = getLoadingState();
+const toastStore = getToastStore();
 
-const { form, delayed, timeout, enhance, errors, constraints, message, tainted, posted, submitting, capture, restore } =
-  superForm(data.form, {
-    dataType: 'json',
-    taintedMessage: null,
-    syncFlashMessage: false,
-    delayMs: 100,
-    timeoutMs: 4000,
-    validators: zodClient(resetPasswordSchema),
-    onError({ result }) {
-      // TODO:
-      // message.set(result.error.message)
-      log.error('reset password error:', { result });
-    },
-    onUpdated({ form }) {
-      if (form.message) {
-        handleMessage(form.message, toastStore);
-      }
-    },
-  });
+const form = superForm(defaults(zod(resetPasswordSchema)), {
+  dataType: 'json',
+  taintedMessage: null,
+  clearOnSubmit: 'errors-and-message',
+  syncFlashMessage: false,
+  delayMs: 100,
+  timeoutMs: 4000,
+  validators: zodClient(resetPasswordSchema),
+  onUpdated({ form }) {
+    if (form.message) {
+      handleMessage(form.message, toastStore);
+    }
+  },
+  onError({ result }) {
+    // TODO:
+    // setError(form, '', result.error.message);
+    log.error('reset password error:', { result });
+  },
+});
+
+const {
+  form: formData,
+  errors,
+  message,
+  submitting,
+  constraints,
+  delayed,
+  timeout,
+  tainted,
+  posted,
+  allErrors,
+  capture,
+  restore,
+  enhance,
+} = form;
 
 export const snapshot = { capture, restore };
 
+// Functions
+
 // Reactivity
 $: loadingState.setFormLoading($delayed);
-
+$: valid = $allErrors.length === 0;
 // const conicStops: ConicStop[] = [
 //   { color: 'transparent', start: 0, end: 25 },
 //   { color: 'rgb(var(--color-primary-900))', start: 75, end: 100 }
@@ -56,69 +75,38 @@ $: loadingState.setFormLoading($delayed);
 </svelte:head>
 
 <h3 class="h3 pt-5">{m.auth_messages_reset_password_healding()}</h3>
-<small class="text-gray-500">{m.auth_messages_reset_password_subheading()}</small>
+<small class="text-gray-500"
+  >{m.auth_messages_reset_password_subheading()}</small
+>
 
 <!-- Form Level Errors / Messages -->
-{#if $message}
-  <aside
-    class="alert mt-6"
-    class:variant-filled-success={$message.type == 'success'}
-    class:variant-filled-error={$message.type == 'error'}
-    class:variant-filled-warning={$message.type == 'warning'}
-    transition:fade|local={{ duration: 200 }}
-  >
-    <!-- Icon -->
-    <!-- <AlertTriangle /> -->
-    <!-- Message -->
-    <div class="alert-message">
-      {#if $message}
-        <p class="font-medium">{$message.message}</p>
-      {/if}
-    </div>
-    <!-- Actions -->
-    <!-- <div class="alert-actions">
-			<button class="btn-icon variant-filled"><X /></button>
-		</div> -->
-  </aside>
-{/if}
-{#if $errors._errors}
-  <aside class="alert mt-6" class:variant-filled-error={$page.status >= 400} transition:fade|local={{ duration: 200 }}>
-    <div class="alert-message">
-      <h3 class="h3">{m.auth_labels_reset_password_problem()}</h3>
-      <ul class="list">
-        {#each $errors._errors as error}
-          <li>
-            <span><AlertTriangle /></span>
-            <span class="flex-auto">{error}</span>
-          </li>
-        {/each}
-      </ul>
-    </div>
-  </aside>
-{/if}
-
+<Alerts errors={$errors._errors} message={$message} />
+<!-- Reset password Form -->
 <form method="POST" use:enhance>
   <div class="mt-6">
-    <label class="label">
-      <span class="sr-only">{m.auth_forms_email_label()}</span>
-      <input
-        name="email"
-        type="email"
-        class="input"
-        autocomplete="email"
-        placeholder={m.auth_forms_email_placeholder()}
-        data-invalid={$errors.email}
-        bind:value={$form.email}
-        class:input-error={$errors.email}
-        {...$constraints.email}
-      />
-      {#if $errors.email}
-        <small>{$errors.email}</small>
-      {/if}
-    </label>
+    <Form.Field {form} name="email">
+      <Form.Control let:attrs>
+        <Form.Label class="label sr-only"
+          >{m.auth_forms_email_label()}</Form.Label
+        >
+        <input
+          type="email"
+          autocomplete="email"
+          class="input mt-1 data-[fs-error]:input-error"
+          placeholder={m.auth_forms_email_placeholder()}
+          {...attrs}
+          bind:value={$formData.email}
+        />
+      </Form.Control>
+      <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+    </Form.Field>
   </div>
   <div class="mt-6">
-    <button type="submit" class="variant-filled-primary btn w-full">
+    <button
+      type="submit"
+      class="variant-filled-primary btn w-full"
+      disabled={!$tainted || !valid || $submitting}
+    >
       {#if $timeout}
         <MoreHorizontal class="animate-ping" />
       {:else if $delayed}
@@ -131,6 +119,7 @@ $: loadingState.setFormLoading($delayed);
   </div>
 </form>
 
+<!-- Debug -->
 <DebugShell>
   <SuperDebug
     label="Miscellaneous"
@@ -144,7 +133,7 @@ $: loadingState.setFormLoading($delayed);
     }}
   />
   <br />
-  <SuperDebug label="Form" data={$form} />
+  <SuperDebug label="Form" data={$formData} />
   <br />
   <SuperDebug label="Tainted" status={false} data={$tainted} />
   <br />
diff --git a/apps/console/src/routes/(auth)/reset/+page.ts b/apps/console/src/routes/(auth)/reset/+page.ts
deleted file mode 100644
index e4a0ad7e..00000000
--- a/apps/console/src/routes/(auth)/reset/+page.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { i18n } from '$lib/i18n';
-import { resetPasswordSchema } from '$lib/schema/user';
-import { isAuthenticated } from '$lib/stores/user';
-import { redirect } from '@sveltejs/kit';
-import { get } from 'svelte/store';
-import { superValidate } from 'sveltekit-superforms';
-import { zod } from 'sveltekit-superforms/adapters';
-
-export const load = async (event) => {
-  if (get(isAuthenticated)) redirect(302, i18n.resolveRoute('/dashboard'));
-  const form = await superValidate(zod(resetPasswordSchema));
-  return { form };
-};
diff --git a/apps/console/src/routes/(auth)/signin/+page.svelte b/apps/console/src/routes/(auth)/signin/+page.svelte
index b37e1fb8..c73835a8 100644
--- a/apps/console/src/routes/(auth)/signin/+page.svelte
+++ b/apps/console/src/routes/(auth)/signin/+page.svelte
@@ -1,378 +1,19 @@
 <script lang="ts">
-import { goto } from '$app/navigation';
-import { page } from '$app/stores';
-import * as m from '$i18n/messages';
-import { handleMessage } from '$lib/components/layout/toast-manager';
-import { NHOST_SESSION_KEY } from '$lib/constants.js';
-import { pwSchema, pwlSchema } from '$lib/schema/user';
-import { getLoadingState } from '$lib/stores/loading';
-import { nhost } from '$lib/stores/user';
-import { getToastStore } from '@skeletonlabs/skeleton';
-import { DebugShell } from '@spectacular/skeleton/components';
-import { Icon } from '@spectacular/skeleton/components/icons';
-import { Logger } from '@spectacular/utils';
-// import { SiGithub } from "@icons-pack/svelte-simple-icons";
-import { AlertTriangle, Fingerprint, Github, Loader, Mail, MoreHorizontal } from 'lucide-svelte';
-import { fade } from 'svelte/transition';
-import SuperDebug, { setError, setMessage, superForm } from 'sveltekit-superforms';
-import { zodClient } from 'sveltekit-superforms/adapters';
-import type { PageData } from './$types.js';
+import Divider from './components/divider.svelte';
+import PasswordSigninForm from './components/password.svelte';
+import PasswordlessSigninForm from './components/passwordless.svelte';
+import SocialSigninForm from './components/social.svelte';
 
-export let data: PageData;
-const log = new Logger('auth:signin:browser');
-const toastStore = getToastStore();
-const loadingState = getLoadingState();
-
-const {
-  form: pwForm,
-  delayed: pwDelayed,
-  timeout: pwTimeout,
-  enhance: pwEnhance,
-  errors: pwErrors,
-  constraints: pwConstraints,
-  message: pwMessage,
-  tainted: pwTainted,
-  posted: pwPosted,
-  submitting: pwSubmitting,
-  formId: pwFormId,
-  capture,
-  restore,
-} = superForm(data.pwForm, {
-  id: 'password-form',
-  dataType: 'json',
-  taintedMessage: null,
-  syncFlashMessage: false,
-  delayMs: 100,
-  timeoutMs: 4000,
-  validators: zodClient(pwSchema),
-  onError({ result }) {
-    // TODO:
-    // message.set(result.error.message)
-    log.error('signin password error:', { result });
-  },
-  onUpdated({ form }) {
-    if (form.message) {
-      handleMessage(form.message, toastStore);
-    }
-  },
-});
-
-export const snapshot = { capture, restore };
-
-const {
-  form: pwlForm,
-  delayed: pwlDelayed,
-  timeout: pwlTimeout,
-  enhance: pwlEnhance,
-  errors: pwlErrors,
-  constraints: pwlConstraints,
-  message: pwlMessage,
-  tainted: pwlTainted,
-  posted: pwlPosted,
-  submitting: pwlSubmitting,
-  formId: pwlFormId,
-} = superForm(data.pwlForm, {
-  id: 'passwordless-form',
-  dataType: 'json',
-  taintedMessage: null,
-  syncFlashMessage: false,
-  clearOnSubmit: 'errors-and-message',
-  delayMs: 100,
-  timeoutMs: 4000,
-  validators: zodClient(pwlSchema),
-  onError({ result }) {
-    // TODO:
-    // message.set(result.error.message)
-    log.error('signin passwordless error:', { result });
-  },
-  onUpdated({ form }) {
-    if (form.message) {
-      handleMessage(form.message, toastStore);
-    }
-  },
-});
-
-async function waSignin() {
-  if ($pwlErrors.email) {
-    handleMessage({ type: 'error', message: 'Invalid email' } as const, toastStore);
-  } else {
-    const { session, error: signInError } = await nhost.auth.signIn({ email: $pwlForm.email, securityKey: true });
-    if (session) {
-      goto('/dashboard');
-      handleMessage({ type: 'success', message: 'Signin sucessfull 😎' } as const, toastStore);
-    } else {
-      log.error(signInError);
-      handleMessage({ type: 'error', message: `Signin failed: ${signInError?.message}` } as const, toastStore);
-    }
-  }
-}
-// Reactivity
-$: loadingState.setFormLoading($pwDelayed);
-$: loadingState.setFormLoading($pwlDelayed);
-
-$pwForm.redirectTo = $page.url.searchParams.get('redirectTo') ?? $pwForm.redirectTo;
-$pwlForm.redirectTo = $page.url.searchParams.get('redirectTo') ?? $pwlForm.redirectTo;
+export let data;
 </script>
 
 <svelte:head>
   <title>Datablocks | Signin</title>
-  <meta name="description" content="Login Account" />
+  <meta name="description" content="Signin Form" />
 </svelte:head>
 
-<!-- Form Level Errors / Messages -->
-{#if $pwMessage}
-  <aside
-    class="alert mt-6"
-    class:variant-filled-success={$pwMessage.type == 'success'}
-    class:variant-filled-error={$pwMessage.type == 'error'}
-    class:variant-filled-warning={$pwMessage.type == 'warning'}
-    transition:fade|local={{ duration: 200 }}
-  >
-    <!-- Icon -->
-    <!-- <AlertTriangle /> -->
-    <!-- Message -->
-    <div class="alert-message">
-      {#if $pwMessage}
-        <p class="font-medium">{$pwMessage.message}</p>
-      {/if}
-    </div>
-    <!-- Actions -->
-    <!-- <div class="alert-actions">
-			<button class="btn-icon variant-filled"><X /></button>
-		</div> -->
-  </aside>
-{/if}
-{#if $pwErrors._errors}
-  <aside class="alert mt-6" class:variant-filled-error={$page.status >= 400} transition:fade|local={{ duration: 200 }}>
-    <div class="alert-message">
-      <ul class="list">
-        {#each $pwErrors._errors as error}
-          <li>
-            <span><AlertTriangle /></span>
-            <span class="flex-auto">{error}</span>
-          </li>
-        {/each}
-      </ul>
-    </div>
-  </aside>
-{/if}
-
-<!-- Form Level Errors / Messages for Passwordless -->
-{#if $pwlMessage}
-  <aside
-    class="alert mt-6"
-    class:variant-filled-success={$pwlMessage.type == 'success'}
-    class:variant-filled-error={$pwlMessage.type == 'error'}
-    class:variant-filled-warning={$pwlMessage.type == 'warning'}
-    transition:fade|local={{ duration: 200 }}
-  >
-    <div class="alert-message">
-      {#if $pwlMessage}
-        <p class="font-medium">{$pwlMessage.message}</p>
-      {/if}
-    </div>
-  </aside>
-{/if}
-{#if $pwlErrors._errors}
-  <aside class="alert mt-6" class:variant-filled-error={$page.status >= 400} transition:fade|local={{ duration: 200 }}>
-    <div class="alert-message">
-      <ul class="list">
-        {#each $pwlErrors._errors as error}
-          <li>
-            <span><AlertTriangle /></span>
-            <span class="flex-auto">{error}</span>
-          </li>
-        {/each}
-      </ul>
-    </div>
-  </aside>
-{/if}
-
-<!-- Signin with email/password -->
-<form method="POST" action="/signin?/password" use:pwEnhance>
-  <input type="hidden" name="__superform_id" bind:value={$pwFormId} />
-  <div class="mt-6">
-    <label class="label">
-      <span class="sr-only">{m.auth_forms_email_label()}</span>
-      <input
-        name="email"
-        type="email"
-        class="input"
-        autocomplete="email"
-        placeholder={m.auth_forms_email_placeholder()}
-        data-invalid={$pwErrors.email}
-        bind:value={$pwForm.email}
-        class:input-error={$pwErrors.email}
-        {...$pwConstraints.email}
-      />
-      {#if $pwErrors.email}
-        <small>{$pwErrors.email}</small>
-      {/if}
-    </label>
-  </div>
-
-  <div class="mt-6">
-    <label class="label">
-      <span class="sr-only">{m.auth_forms_password_label()}</span>
-      <input
-        name="password"
-        type="password"
-        class="input"
-        placeholder={m.auth_forms_password_placeholder()}
-        data-invalid={$pwErrors.password}
-        bind:value={$pwForm.password}
-        class:input-error={$pwErrors.password}
-        {...$pwConstraints.password}
-      />
-      {#if $pwErrors.password}
-        <small>{$pwErrors.password}</small>
-      {/if}
-    </label>
-  </div>
-  <div class="mt-6">
-    <button type="submit" class="variant-filled-primary btn w-full">
-      {#if $pwTimeout}
-        <MoreHorizontal class="animate-ping" />
-      {:else if $pwDelayed}
-        <Loader class="animate-spin" />
-      {:else}
-        {m.auth_labels_signin()}
-      {/if}
-    </button>
-  </div>
-</form>
-
-<div class="mt-5 flex flex-row items-center justify-center">
-  <a href="/reset" class="anchor font-semibold">{m.auth_labels_forgot_password()}</a>
-</div>
-
-<!-- Divider -->
-<div class="my-8 flex items-center">
-  <div class="grow border-b border-slate-400"></div>
-  <span class="shrink px-1 pb-1 text-xs uppercase text-gray-500">Or</span>
-  <div class="grow border-b border-slate-400"></div>
-</div>
-
-<!-- Signin with email : Magic Link Passwordless Authentication -->
-<form method="POST" use:pwlEnhance>
-  <input type="hidden" name="__superform_id" bind:value={$pwlFormId} />
-  <div class="mt-6">
-    <label class="label">
-      <span class="sr-only">{m.auth_forms_email_label()}</span>
-      <input
-        name="email"
-        type="email"
-        class="input"
-        autocomplete="email"
-        placeholder={m.auth_forms_email_placeholder()}
-        data-invalid={$pwlErrors.email}
-        bind:value={$pwlForm.email}
-        class:input-error={$pwlErrors.email}
-        {...$pwlConstraints.email}
-      />
-      {#if $pwlErrors.email}
-        <small>{$pwlErrors.email}</small>
-      {/if}
-    </label>
-  </div>
-  <div class="mt-6 flex justify-between">
-    <button type="submit" formaction="/signin?/passwordless" class="variant-filled-primary btn">
-      {#if $pwlTimeout}
-        <MoreHorizontal class="animate-ping" />
-      {:else if $pwlDelayed}
-        <Loader class="animate-spin" />
-      {:else}
-        {m.auth_labels_signin_with_email()} <Mail class="pl-2" />
-      {/if}
-    </button>
-    <button type="button" formaction="/signin?/webauthn" on:click|preventDefault={waSignin} class="variant-filled-primary btn">
-        {m.auth_labels_signin_with_webauthn()} <Fingerprint class="pl-2"/>
-    </button>
-  </div>
-</form>
-
-<!-- Divider -->
-<div class="my-8 flex items-center">
-  <div class="grow border-b border-slate-400"></div>
-  <span class="shrink px-1 pb-1 text-xs uppercase text-gray-500">Or continue with</span>
-  <div class="grow border-b border-slate-400"></div>
-</div>
-
-<!-- Signin with social -->
-<form method="POST">
-  <div class="flex flex-row justify-evenly">
-    <button type="submit" formaction="/signin?/google" class="variant-filled-warning btn-icon"
-      ><Icon name="google" /></button
-    >
-    <button type="submit" formaction="/signin?/github" class="variant-filled-secondary btn-icon"><Github /></button>
-    <button type="submit" formaction="/signin?/azuread" class="variant-filled-error btn-icon"
-      ><Icon name="microsoft" /></button
-    >
-  </div>
-</form>
-
-<!--
-<div class="flex flex-col md:flex-row justify-evenly space-x-1 space-y-4">
-	<button type="button" class="btn variant-filled-warning">
-		<span><Icon name="google" /></span>
-		<span>Google</span>
-	</button>
-	<button type="button" class="btn variant-filled-success">
-		<span><Github /></span>
-		<span>GitHub</span>
-	</button>
-	<button type="button" class="btn variant-filled-error">
-		<span><Icon name="microsoft" /></span>
-		<span>AzureAD</span>
-	</button>
-		<button type="button" class="btn variant-filled-error">
-		<span><Icon name="microsoft" /></span>
-		<span>PingID</span>
-	</button>
-</div>
--->
-
-<DebugShell>
-  <SuperDebug
-    label="Password Miscellaneous"
-    status={false}
-    data={{
-      message: $pwMessage,
-      submitting: $pwSubmitting,
-      delayed: $pwDelayed,
-      timeout: $pwTimeout,
-      posted: $pwPosted,
-    }}
-  />
-  <br />
-  <SuperDebug label="Password Form" data={$pwForm} />
-  <br />
-  <SuperDebug label="Tainted" status={false} data={$pwTainted} />
-  <br />
-  <SuperDebug label="Errors" status={false} data={$pwErrors} />
-  <br />
-  <SuperDebug label="Constraints" status={false} data={$pwConstraints} />
-  <!-- <br />
- 	<SuperDebug label="$page data" status={false} data={$page} /> -->
-  <br />
-  <SuperDebug
-    label="Passwordless Miscellaneous"
-    status={false}
-    data={{
-      message: $pwlMessage,
-      submitting: $pwlSubmitting,
-      delayed: $pwlDelayed,
-      timeout: $pwlTimeout,
-      posted: $pwlPosted,
-    }}
-  />
-  <br />
-  <SuperDebug label="Passwordless Form" data={$pwlForm} />
-  <br />
-  <SuperDebug label="Passwordless Tainted" status={false} data={$pwlTainted} />
-  <br />
-  <SuperDebug label="Passwordless Errors" status={false} data={$pwlErrors} />
-  <br />
-  <SuperDebug label="Passwordless Constraints" status={false} data={$pwlConstraints} />
-   <SuperDebug label="$page data" status={false} data={$page} />
-</DebugShell>
+<PasswordSigninForm />
+<Divider>Or</Divider>
+<PasswordlessSigninForm />
+<Divider>Or continue with</Divider>
+<SocialSigninForm />
diff --git a/apps/console/src/routes/(auth)/signin/+page.ts b/apps/console/src/routes/(auth)/signin/+page.ts
deleted file mode 100644
index d98f4e0d..00000000
--- a/apps/console/src/routes/(auth)/signin/+page.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { i18n } from '$lib/i18n';
-import { pwSchema, pwlSchema } from '$lib/schema/user';
-import { isAuthenticated } from '$lib/stores/user';
-import { redirect } from '@sveltejs/kit';
-import { get } from 'svelte/store';
-import { superValidate } from 'sveltekit-superforms';
-import { zod } from 'sveltekit-superforms/adapters';
-
-export const load = async (event) => {
-  if (get(isAuthenticated)) redirect(302, i18n.resolveRoute('/dashboard'));
-  const pwForm = await superValidate(zod(pwSchema));
-  const pwlForm = await superValidate(zod(pwlSchema));
-  return { pwForm, pwlForm };
-};
diff --git a/apps/console/src/routes/(auth)/signin/components/divider.svelte b/apps/console/src/routes/(auth)/signin/components/divider.svelte
new file mode 100644
index 00000000..b75e2c53
--- /dev/null
+++ b/apps/console/src/routes/(auth)/signin/components/divider.svelte
@@ -0,0 +1,6 @@
+<!-- Divider -->
+<div class="my-8 flex items-center">
+  <div class="grow border-b border-slate-400"></div>
+  <span class="shrink px-1 pb-1 text-xs uppercase text-gray-500"> <slot>/</slot></span>
+  <div class="grow border-b border-slate-400"></div>
+</div>
diff --git a/apps/console/src/routes/(auth)/signin/components/password.svelte b/apps/console/src/routes/(auth)/signin/components/password.svelte
new file mode 100644
index 00000000..5762ca75
--- /dev/null
+++ b/apps/console/src/routes/(auth)/signin/components/password.svelte
@@ -0,0 +1,139 @@
+<script lang="ts">
+import { page } from '$app/stores';
+import * as m from '$i18n/messages';
+import { handleMessage } from '$lib/components/layout/toast-manager';
+import { pwSchema } from '$lib/schema/user';
+import { getLoadingState } from '$lib/stores/loading';
+import { getToastStore } from '@skeletonlabs/skeleton';
+import { DebugShell } from '@spectacular/skeleton';
+import { Alerts } from '@spectacular/skeleton/components/form';
+import { Logger } from '@spectacular/utils';
+import * as Form from 'formsnap';
+import { Loader, MoreHorizontal } from 'lucide-svelte';
+import SuperDebug, { defaults, superForm } from 'sveltekit-superforms';
+import { zod, zodClient } from 'sveltekit-superforms/adapters';
+
+const log = new Logger('auth:signin:password:browser');
+// Variables
+const loadingState = getLoadingState();
+const toastStore = getToastStore();
+
+const form = superForm(defaults(zod(pwSchema)), {
+  dataType: 'json',
+  taintedMessage: null,
+  clearOnSubmit: 'errors-and-message',
+  syncFlashMessage: false,
+  delayMs: 100,
+  timeoutMs: 4000,
+  validators: zodClient(pwSchema),
+  onUpdated({ form }) {
+    if (form.message) {
+      handleMessage(form.message, toastStore);
+    }
+  },
+  onError({ result }) {
+    // TODO:
+    // setError(form, '', result.error.message);
+    log.error('signin error:', { result });
+  },
+});
+
+const {
+  form: formData,
+  errors,
+  message,
+  submitting,
+  constraints,
+  delayed,
+  timeout,
+  tainted,
+  posted,
+  allErrors,
+  capture,
+  restore,
+  enhance,
+} = form;
+
+export const snapshot = { capture, restore };
+
+// Functions
+
+// Reactivity
+$: loadingState.setFormLoading($delayed);
+$: valid = $allErrors.length === 0;
+$formData.redirectTo = $page.url.searchParams.get('redirectTo') ?? $formData.redirectTo;
+</script>
+
+<!-- Form Level Errors / Messages -->
+<Alerts errors={$errors._errors} message={$message} />
+ <!-- Signin with email/password Form -->
+<form method="POST" action="/signin?/password" use:enhance>
+  <div class="mt-6">
+    <Form.Field {form} name="email">
+      <Form.Control let:attrs>
+        <Form.Label class="label sr-only">{m.auth_forms_email_label()}</Form.Label>
+        <input
+          type="email"
+          autocomplete="email"
+          class="input mt-1 data-[fs-error]:input-error"
+          placeholder={m.auth_forms_email_placeholder()}
+          {...attrs}
+          bind:value={$formData.email}
+        />
+      </Form.Control>
+      <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+    </Form.Field>
+  </div>
+  <div class="mt-6">
+    <Form.Field {form} name="password">
+      <Form.Control let:attrs>
+        <Form.Label class="label sr-only">{m.auth_forms_password_label()}</Form.Label>
+        <input
+          type="password"
+          class="input mt-1 data-[fs-error]:input-error"
+          placeholder={m.auth_forms_password_placeholder()}
+          {...attrs}
+          bind:value={$formData.password}
+        />
+      </Form.Control>
+      <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+    </Form.Field>
+  </div>
+  <div class="mt-6">
+    <button
+      type="submit"
+      class="variant-filled-primary btn w-full"
+      disabled={!$tainted || !valid || $submitting}
+    >
+      {#if $timeout}
+        <MoreHorizontal class="animate-ping" />
+      {:else if $delayed}
+        <Loader class="animate-spin" />
+      {:else}
+        {m.auth_labels_signin()}
+      {/if}
+    </button>
+  </div>
+</form>
+
+<div class="mt-5 flex flex-row items-center justify-center">
+  <a href="/reset" class="anchor font-semibold">{m.auth_labels_forgot_password()}</a>
+</div>
+
+<!-- Debug -->
+<DebugShell>
+  <SuperDebug
+    data={{
+      message: $message,
+      submitting: $submitting,
+      delayed: $delayed,
+      timeout: $timeout,
+      posted: $posted,
+      formData: $formData,
+      errors: $errors,
+      constraints: $constraints,
+    }}
+    theme="vscode"
+    --sd-code-date="lightgreen"
+  />
+</DebugShell>
diff --git a/apps/console/src/routes/(auth)/signin/components/passwordless.svelte b/apps/console/src/routes/(auth)/signin/components/passwordless.svelte
new file mode 100644
index 00000000..0a5381db
--- /dev/null
+++ b/apps/console/src/routes/(auth)/signin/components/passwordless.svelte
@@ -0,0 +1,144 @@
+<script lang="ts">
+import { page } from '$app/stores';
+import * as m from '$i18n/messages';
+import { handleMessage } from '$lib/components/layout/toast-manager';
+import { pwlSchema } from '$lib/schema/user';
+import { getLoadingState } from '$lib/stores/loading';
+import { getNhostClient } from '$lib/stores/nhost';
+import { getToastStore } from '@skeletonlabs/skeleton';
+import { DebugShell } from '@spectacular/skeleton';
+import { Alerts } from '@spectacular/skeleton/components/form';
+import { Logger } from '@spectacular/utils';
+import * as Form from 'formsnap';
+import { Fingerprint, Loader, Mail, MoreHorizontal } from 'lucide-svelte';
+import SuperDebug, { defaults, superForm } from 'sveltekit-superforms';
+import { zod, zodClient } from 'sveltekit-superforms/adapters';
+
+const log = new Logger('auth:signin:passwordless:browser');
+// Variables
+const loadingState = getLoadingState();
+const toastStore = getToastStore();
+const nhost = getNhostClient();
+
+const form = superForm(defaults(zod(pwlSchema)), {
+  dataType: 'json',
+  taintedMessage: null,
+  clearOnSubmit: 'errors-and-message',
+  syncFlashMessage: false,
+  delayMs: 100,
+  timeoutMs: 4000,
+  validators: zodClient(pwlSchema),
+  onUpdated({ form }) {
+    if (form.message) {
+      handleMessage(form.message, toastStore);
+    }
+  },
+  onError({ result }) {
+    // TODO:
+    // setError(form, '', result.error.message);
+    log.error('signin error:', { result });
+  },
+});
+
+const {
+  form: formData,
+  errors,
+  message,
+  submitting,
+  constraints,
+  delayed,
+  timeout,
+  tainted,
+  posted,
+  allErrors,
+  capture,
+  restore,
+  enhance,
+} = form;
+
+export const snapshot = { capture, restore };
+
+// Functions
+async function waSignin() {
+  if ($errors.email) {
+    handleMessage({ type: 'error', message: 'Invalid email' } as const, toastStore);
+  } else {
+    const { session, error: signInError } = await nhost.auth.signIn({ email: $formData.email, securityKey: true });
+    if (session) {
+      goto('/dashboard');
+      handleMessage({ type: 'success', message: 'Signin sucessfull 😎' } as const, toastStore);
+    } else {
+      log.error(signInError);
+      handleMessage({ type: 'error', message: `Signin failed: ${signInError?.message}` } as const, toastStore);
+    }
+  }
+}
+
+// Reactivity
+$: loadingState.setFormLoading($delayed);
+$: valid = $allErrors.length === 0;
+$formData.redirectTo = $page.url.searchParams.get('redirectTo') ?? $formData.redirectTo;
+</script>
+
+<!-- Form Level Errors / Messages -->
+<Alerts errors={$errors._errors} message={$message} />
+<!-- Signin with email : Magic Link or Security Key Form -->
+<form method="POST" use:enhance>
+  <div class="mt-6">
+    <Form.Field {form} name="email">
+      <Form.Control let:attrs>
+        <Form.Label class="label sr-only">{m.auth_forms_email_label()}</Form.Label>
+        <input
+          type="email"
+          autocomplete="email"
+          class="input data-[fs-error]:input-error"
+          placeholder={m.auth_forms_email_placeholder()}
+          {...attrs}
+          bind:value={$formData.email}
+        />
+      </Form.Control>
+      <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+    </Form.Field>
+  </div>
+  <div class="mt-6 flex justify-between">
+    <button
+      type="submit"
+      formaction="/signin?/passwordless"
+      class="variant-filled-primary btn"
+      disabled={!$tainted || !valid || $submitting}
+    >
+      {#if $timeout}
+        <MoreHorizontal class="animate-ping" />
+      {:else if $delayed}
+        <Loader class="animate-spin" />
+      {:else}
+        {m.auth_labels_signin_with_email()} <Mail class="pl-2" />
+      {/if}
+    </button>
+    <button
+      type="button"
+      formaction="/signin?/webauthn"
+      class="variant-filled-primary btn"
+      disabled={!$tainted || !valid || $submitting}
+      on:click|preventDefault={waSignin} >
+        {m.auth_labels_signin_with_webauthn()} <Fingerprint class="pl-2"/>
+    </button>
+  </div>
+</form>
+<!-- Debug -->
+<DebugShell>
+  <SuperDebug
+    data={{
+      message: $message,
+      submitting: $submitting,
+      delayed: $delayed,
+      timeout: $timeout,
+      posted: $posted,
+      formData: $formData,
+      errors: $errors,
+      constraints: $constraints,
+    }}
+    theme="vscode"
+    --sd-code-date="lightgreen"
+  />
+</DebugShell>
diff --git a/apps/console/src/routes/(auth)/signin/components/social.svelte b/apps/console/src/routes/(auth)/signin/components/social.svelte
new file mode 100644
index 00000000..ac026409
--- /dev/null
+++ b/apps/console/src/routes/(auth)/signin/components/social.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+import { Icon } from '@spectacular/skeleton/components/icons';
+import { Github } from 'lucide-svelte';
+</script>
+
+<!-- Signin with social -->
+<form method="POST">
+  <div class="flex flex-row justify-evenly">
+    <button type="submit" formaction="/signin?/google" class="variant-filled-warning btn-icon"
+      ><Icon name="google" /></button
+    >
+    <button type="submit" formaction="/signin?/github" class="variant-filled-secondary btn-icon"><Github /></button>
+    <button type="submit" formaction="/signin?/azuread" class="variant-filled-error btn-icon"
+      ><Icon name="microsoft" /></button
+    >
+  </div>
+</form>
+
+
+
+
+
+
+<!--
+<div class="flex flex-col md:flex-row justify-evenly space-x-1 space-y-4">
+	<button type="button" class="btn variant-filled-warning">
+		<span><Icon name="google" /></span>
+		<span>Google</span>
+	</button>
+	<button type="button" class="btn variant-filled-success">
+		<span><Github /></span>
+		<span>GitHub</span>
+	</button>
+	<button type="button" class="btn variant-filled-error">
+		<span><Icon name="microsoft" /></span>
+		<span>AzureAD</span>
+	</button>
+		<button type="button" class="btn variant-filled-error">
+		<span><Icon name="microsoft" /></span>
+		<span>PingID</span>
+	</button>
+</div>
+-->
diff --git a/apps/console/src/routes/(auth)/signup/+page.server.ts b/apps/console/src/routes/(auth)/signup/+page.server.ts
index a1b25886..36757a99 100644
--- a/apps/console/src/routes/(auth)/signup/+page.server.ts
+++ b/apps/console/src/routes/(auth)/signup/+page.server.ts
@@ -26,8 +26,6 @@ export const load = async (event) => {
 
   const isAuthenticated = nhost.auth.isAuthenticated();
   if (isAuthenticated) redirectWithFlash(302, i18n.resolveRoute('/dashboard'));
-  // const form = await superValidate(zod(signUpSchema));
-  // return { form };
 };
 
 export const actions = {
diff --git a/apps/console/src/routes/(auth)/signup/+page.svelte b/apps/console/src/routes/(auth)/signup/+page.svelte
index a1506728..1078fdf6 100644
--- a/apps/console/src/routes/(auth)/signup/+page.svelte
+++ b/apps/console/src/routes/(auth)/signup/+page.svelte
@@ -7,11 +7,12 @@ import { signUpSchema } from '$lib/schema/user';
 import { getLoadingState } from '$lib/stores/loading';
 import { getToastStore } from '@skeletonlabs/skeleton';
 import { DebugShell } from '@spectacular/skeleton/components';
+import { Alerts } from '@spectacular/skeleton/components/form';
 import { Logger } from '@spectacular/utils';
-import { AlertTriangle, Loader, MoreHorizontal } from 'lucide-svelte';
-import { fade } from 'svelte/transition';
-import SuperDebug, { superForm } from 'sveltekit-superforms';
-import { zodClient } from 'sveltekit-superforms/adapters';
+import * as Form from 'formsnap';
+import { Loader, MoreHorizontal } from 'lucide-svelte';
+import SuperDebug, { defaults, superForm } from 'sveltekit-superforms';
+import { zod, zodClient } from 'sveltekit-superforms/adapters';
 import type { PageData } from './$houdini';
 
 const log = new Logger('auth:signup:browser');
@@ -19,40 +20,57 @@ const log = new Logger('auth:signup:browser');
 export let data: PageData;
 
 // Variables
-const toastStore = getToastStore();
 const loadingState = getLoadingState();
+const toastStore = getToastStore();
 
-const { form, delayed, timeout, enhance, errors, constraints, message, tainted, posted, submitting, capture, restore } =
-  superForm(data.form, {
-    dataType: 'json',
-    taintedMessage: null,
-    syncFlashMessage: false,
-    clearOnSubmit: 'errors-and-message',
-    delayMs: 150,
-    timeoutMs: 4000,
-    validators: zodClient(signUpSchema),
-    onError({ result }) {
-      // TODO:
-      // message.set(result.error.message)
-      log.error('signup error:', { result });
-    },
-    onUpdated({ form }) {
-      if (form.message) {
-        handleMessage(form.message, toastStore);
-      }
-    },
-  });
+const form = superForm(defaults(zod(signUpSchema)), {
+  dataType: 'json',
+  taintedMessage: null,
+  clearOnSubmit: 'errors-and-message',
+  syncFlashMessage: false,
+  delayMs: 100,
+  timeoutMs: 4000,
+  validators: zodClient(signUpSchema),
+  onUpdated({ form }) {
+    if (form.message) {
+      handleMessage(form.message, toastStore);
+    }
+  },
+  onError({ result }) {
+    // TODO:
+    // setError(form, '', result.error.message);
+    log.error('signup error:', { result });
+  },
+});
+
+const {
+  form: formData,
+  errors,
+  message,
+  submitting,
+  constraints,
+  delayed,
+  timeout,
+  tainted,
+  posted,
+  allErrors,
+  capture,
+  restore,
+  enhance,
+} = form;
 
 export const snapshot = { capture, restore };
 
+// Functions
+
 // Reactivity
 $: ({ ListOrganizations } = data);
 $: organizations = $ListOrganizations.data?.organizations.map((x) => x.organization) ?? [PUBLIC_DEFAULT_ORGANIZATION];
 
 // Used in apps/console/src/lib/components/layout/page-load-spinner.svelte
 $: loadingState.setFormLoading($delayed);
-
-$form.redirectTo = $page.url.searchParams.get('redirectTo') ?? $form.redirectTo;
+$: valid = $allErrors.length === 0;
+$formData.redirectTo = $page.url.searchParams.get('redirectTo') ?? $formData.redirectTo;
 </script>
 
 <svelte:head>
@@ -61,183 +79,149 @@ $form.redirectTo = $page.url.searchParams.get('redirectTo') ?? $form.redirectTo;
 </svelte:head>
 
 <!-- Form Level Errors / Messages -->
-{#if $message}
-  <aside
-    class="alert mt-6"
-    class:variant-filled-success={$message.type == 'success'}
-    class:variant-filled-error={$message.type == 'error'}
-    class:variant-filled-warning={$message.type == 'warning'}
-    transition:fade|local={{ duration: 200 }}
-  >
-    <!-- Icon -->
-    <!-- <AlertTriangle /> -->
-    <!-- Message -->
-    <div class="alert-message">
-      {#if $message}
-        <p class="font-medium">{$message.message}</p>
-      {/if}
-    </div>
-    <!-- Actions -->
-    <!-- <div class="alert-actions">
-			<button class="btn-icon variant-filled"><X /></button>
-		</div> -->
-  </aside>
-{/if}
-{#if $errors._errors}
-  <aside class="alert mt-6" class:variant-filled-error={$page.status >= 400} transition:fade|local={{ duration: 200 }}>
-    <div class="alert-message">
-      <ul class="list">
-        {#each $errors._errors as error}
-          <li>
-            <span><AlertTriangle /></span>
-            <span class="flex-auto">{error}</span>
-          </li>
-        {/each}
-      </ul>
-    </div>
-  </aside>
-{/if}
-
+<Alerts errors={$errors._errors} message={$message} />
+<!-- Signup Form -->
 <form method="POST" use:enhance>
   <div class="mt-6">
-    <label class="label">
-      <span class="sr-only">{m.auth_forms_first_organization_label()}</span>
-      <select
-        name="organization"
-        class="select"
-        placeholder={m.auth_forms_first_organization_placeholder()}
-        data-invalid={$errors.organization}
-        class:input-error={$errors.organization}
-        bind:value={$form.organization}
-        {...$constraints.organization}
-      >
-        <option value="">Select Organization</option>
-        {#each organizations as org}
-          <option value={org}>{org}</option>
-        {/each}
-      </select>
-      {#if $errors.organization}
-        <small>{$errors.organization}</small>
-      {/if}
-    </label>
+    <Form.Field {form} name="organization">
+      <Form.Control let:attrs>
+        <Form.Label class="label sr-only"
+          >{m.auth_forms_first_organization_label()}</Form.Label
+        >
+        <select
+          class="select data-[fs-error]:input-error"
+          placeholder={m.auth_forms_first_organization_placeholder()}
+          {...attrs}
+          bind:value={$formData.organization}
+        >
+          <option value="">Select Organization</option>
+          {#each organizations as org}
+            <option value={org}>{org}</option>
+          {/each}
+        </select>
+      </Form.Control>
+      <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+    </Form.Field>
   </div>
   <div class="mt-6">
-    <label class="label">
-      <span class="sr-only">{m.auth_forms_first_name_label()}</span>
-      <input
-        name="firstName"
-        type="text"
-        class="input"
-        autocomplete="given-name"
-        placeholder={m.auth_forms_first_name_placeholder()}
-        data-invalid={$errors.firstName}
-        bind:value={$form.firstName}
-        class:input-error={$errors.firstName}
-        {...$constraints.firstName}
-      />
-      {#if $errors.firstName}
-        <small>{$errors.firstName}</small>
-      {/if}
-    </label>
+    <Form.Field {form} name="firstName">
+      <Form.Control let:attrs>
+        <Form.Label class="label sr-only"
+          >{m.auth_forms_first_name_label()}</Form.Label
+        >
+        <input
+          type="text"
+          autocomplete="given-name"
+          class="input data-[fs-error]:input-error"
+          placeholder={m.auth_forms_first_name_placeholder()}
+          {...attrs}
+          bind:value={$formData.email}
+        />
+      </Form.Control>
+      <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+    </Form.Field>
   </div>
   <div class="mt-6">
-    <label class="label">
-      <span class="sr-only">{m.auth_forms_last_name_label()}</span>
-      <input
-        name="lastName"
-        type="text"
-        class="input"
-        autocomplete="family-name"
-        placeholder={m.auth_forms_last_name_placeholder()}
-        data-invalid={$errors.lastName}
-        bind:value={$form.lastName}
-        class:input-error={$errors.lastName}
-        {...$constraints.lastName}
-      />
-      {#if $errors.lastName}
-        <small>{$errors.lastName}</small>
-      {/if}
-    </label>
+    <Form.Field {form} name="lastName">
+      <Form.Control let:attrs>
+        <Form.Label class="label sr-only"
+          >{m.auth_forms_last_name_label()}</Form.Label
+        >
+        <input
+          type="text"
+          autocomplete="family-name"
+          class="input data-[fs-error]:input-error"
+          placeholder={m.auth_forms_last_name_placeholder()}
+          {...attrs}
+          bind:value={$formData.lastName}
+        />
+      </Form.Control>
+      <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+    </Form.Field>
   </div>
   <div class="mt-6">
-    <label class="label">
-      <span class="sr-only">{m.auth_forms_email_label()}</span>
-      <input
-        name="email"
-        type="email"
-        class="input"
-        autocomplete="email"
-        placeholder={m.auth_forms_email_placeholder()}
-        data-invalid={$errors.email}
-        bind:value={$form.email}
-        class:input-error={$errors.email}
-        {...$constraints.email}
-      />
-      {#if $errors.email}
-        <small>{$errors.email}</small>
-      {/if}
-    </label>
+    <Form.Field {form} name="email">
+      <Form.Control let:attrs>
+        <Form.Label class="label sr-only"
+          >{m.auth_forms_email_label()}</Form.Label
+        >
+        <input
+          type="email"
+          autocomplete="email"
+          class="input data-[fs-error]:input-error"
+          placeholder={m.auth_forms_email_placeholder()}
+          {...attrs}
+          bind:value={$formData.email}
+        />
+      </Form.Control>
+      <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+    </Form.Field>
   </div>
   <div class="mt-6">
-    <label class="label">
-      <span class="sr-only">{m.auth_forms_password_label()}</span>
-      <input
-        name="password"
-        type="password"
-        class="input"
-        placeholder={m.auth_forms_password_placeholder()}
-        data-invalid={$errors.password}
-        bind:value={$form.password}
-        class:input-error={$errors.password}
-        {...$constraints.password}
-      />
-      {#if $errors.password}
-        <small>{$errors.password}</small>
-      {/if}
-    </label>
+    <Form.Field {form} name="password">
+      <Form.Control let:attrs>
+        <Form.Label class="label sr-only"
+          >{m.auth_forms_password_label()}</Form.Label
+        >
+        <input
+          type="password"
+          class="input data-[fs-error]:input-error"
+          placeholder={m.auth_forms_password_placeholder()}
+          {...attrs}
+          bind:value={$formData.email}
+        />
+      </Form.Control>
+      <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+    </Form.Field>
   </div>
   <div class="mt-6">
-    <label class="label">
-      <span class="sr-only">{m.auth_forms_confirm_password_label()}</span>
-      <input
-        name="confirmPassword"
-        type="password"
-        class="input"
-        placeholder={m.auth_forms_confirm_password_placeholder()}
-        data-invalid={$errors.confirmPassword}
-        bind:value={$form.confirmPassword}
-        class:input-error={$errors.password}
-        {...$constraints.confirmPassword}
-      />
-      {#if $errors.confirmPassword}
-        <small>{$errors.confirmPassword}</small>
-      {/if}
-    </label>
+    <Form.Field {form} name="confirmPassword">
+      <Form.Control let:attrs>
+        <Form.Label class="label sr-only"
+          >{m.auth_forms_confirm_password_label()}</Form.Label
+        >
+        <input
+          type="password"
+          class="input data-[fs-error]:input-error"
+          placeholder={m.auth_forms_confirm_password_placeholder()}
+          {...attrs}
+          bind:value={$formData.email}
+        />
+      </Form.Control>
+      <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+    </Form.Field>
   </div>
   <div class="mt-6">
-    <label for="terms" class="label">
-      <input
-        name="terms"
-        type="checkbox"
-        class="checkbox"
-        data-invalid={$errors.terms}
-        bind:checked={$form.terms}
-        class:input-error={$errors.terms}
-        {...$constraints.terms}
-      />
-      <span class="ml-2">
-        I accept the
-        <a href="/terms" class="text-primaryHover underline">terms</a>
-        and
-        <a href="/privacy" class="text-primaryHover underline">privacy policy</a>
-        {#if $errors.terms}
-          <small class="text-error-500">{$errors.terms}</small>
-        {/if}
-      </span>
-    </label>
+    <Form.Field {form} name="terms">
+      <Form.Control let:attrs>
+        <Form.Label class="label sr-only"></Form.Label>
+        <input
+          type="checkbox"
+          class="checkbox data-[fs-error]:input-error"
+          {...attrs}
+          bind:value={$formData.terms}
+        />
+        <span class="ml-2">
+          I accept the
+          <a href="/terms" class="text-primaryHover underline">terms</a>
+          and
+          <a href="/privacy" class="text-primaryHover underline"
+            >privacy policy</a
+          >
+          {#if $errors.terms}
+            <small class="text-error-500">{$errors.terms}</small>
+          {/if}
+        </span>
+      </Form.Control>
+      <Form.FieldErrors class="data-[fs-error]:text-error-500" />
+    </Form.Field>
   </div>
   <div class="mt-6">
-    <button type="submit" disabled={!$form.terms} class="variant-filled-primary btn w-full">
+    <button
+      type="submit"
+      class="variant-filled-primary btn w-full"
+      disabled={!$tainted || !valid || $submitting}
+    >
       {#if $timeout}
         <MoreHorizontal class="animate-ping" />
       {:else if $delayed}
@@ -248,7 +232,7 @@ $form.redirectTo = $page.url.searchParams.get('redirectTo') ?? $form.redirectTo;
     </button>
   </div>
 </form>
-
+<!-- Debug -->
 <DebugShell>
   <SuperDebug
     label="Miscellaneous"
@@ -262,7 +246,7 @@ $form.redirectTo = $page.url.searchParams.get('redirectTo') ?? $form.redirectTo;
     }}
   />
   <br />
-  <SuperDebug label="Form" data={$form} />
+  <SuperDebug label="Form" data={$formData} />
   <br />
   <SuperDebug label="Tainted" status={false} data={$tainted} />
   <br />
diff --git a/apps/console/src/routes/(auth)/signup/+page.ts b/apps/console/src/routes/(auth)/signup/+page.ts
deleted file mode 100644
index e5ddb145..00000000
--- a/apps/console/src/routes/(auth)/signup/+page.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { i18n } from '$lib/i18n';
-import { signUpSchema } from '$lib/schema/user';
-import { isAuthenticated } from '$lib/stores/user';
-import { redirect } from '@sveltejs/kit';
-import { get } from 'svelte/store';
-import { superValidate } from 'sveltekit-superforms';
-import { zod } from 'sveltekit-superforms/adapters';
-
-export async function _houdini_beforeLoad() {
-  if (get(isAuthenticated)) redirect(302, i18n.resolveRoute('/dashboard'));
-  const form = await superValidate(zod(signUpSchema));
-  return { form };
-}
diff --git a/apps/console/src/routes/(home)/about/+page.svelte b/apps/console/src/routes/(home)/about/+page.svelte
index ace43e59..ab4e9518 100644
--- a/apps/console/src/routes/(home)/about/+page.svelte
+++ b/apps/console/src/routes/(home)/about/+page.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
-import { isAuthenticated, user } from '$lib/stores/user';
+import { getNhostClient } from '$lib/stores/nhost';
 import { Debug } from '@spectacular/skeleton/components';
+
+const { isAuthenticated, user } = getNhostClient();
 </script>
 
 <svelte:head>
diff --git a/apps/console/src/routes/(home)/contact/+page.svelte b/apps/console/src/routes/(home)/contact/+page.svelte
index 7d584b0f..f2256766 100644
--- a/apps/console/src/routes/(home)/contact/+page.svelte
+++ b/apps/console/src/routes/(home)/contact/+page.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
-import { accessToken, user } from '$lib/stores/user';
+import { getNhostClient } from '$lib/stores/nhost';
 import { Debug } from '@spectacular/skeleton/components';
+
+const { user, accessToken } = getNhostClient();
 </script>
 
 <svelte:head>
diff --git a/apps/console/src/routes/+layout.svelte b/apps/console/src/routes/+layout.svelte
index 4e63d428..5b23e275 100644
--- a/apps/console/src/routes/+layout.svelte
+++ b/apps/console/src/routes/+layout.svelte
@@ -12,7 +12,6 @@ import { i18n } from '$lib/i18n';
 import Search from '$lib/modals/search.svelte';
 import { scroll, storeTheme, storeVercelProductionMode } from '$lib/stores';
 import { setLoadingState } from '$lib/stores/loading';
-import { nhost } from '$lib/stores/user';
 import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 import { ParaglideJS } from '@inlang/paraglide-js-adapter-sveltekit';
 import { Modal, initializeStores, prefersReducedMotionStore, storePopup } from '@skeletonlabs/skeleton';
@@ -25,6 +24,7 @@ import { mountVercelToolbar } from '@vercel/toolbar/vite';
 import { type ComponentEvents, onMount } from 'svelte';
 import { setupViewTransition } from 'sveltekit-view-transition';
 import '../app.pcss';
+import { setNhostClient } from '$lib/stores/nhost';
 
 const log = new Logger('layout:root:browser');
 
@@ -38,14 +38,19 @@ storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
 initializeStores();
 // initialize LoadingState
 setLoadingState();
+// initialize nhost client
+// TODO: initialize different clients for server-side and client-side
+const nhost = setNhostClient();
 
 // Handle Vercel Production Mode
 storeVercelProductionMode.set(data.vercelEnv === 'production');
 // Init Vercel Analytics
 // if ($storeVercelProductionMode) import('@vercel/analytics').then((mod) => mod.inject());
 inject({ mode: dev ? 'development' : 'production' });
-// initialize Vercel Toolbar
-onMount(() => mountVercelToolbar());
+// initialize Vercel Toolbar in dev
+if (dev) {
+  onMount(() => mountVercelToolbar());
+}
 
 // Registered list of Components for Modals
 const modalComponentRegistry: Record<string, ModalComponent> = {
diff --git a/docs/awesome-sveltekit.md b/docs/awesome-sveltekit.md
index fe2b6702..8a941fd9 100644
--- a/docs/awesome-sveltekit.md
+++ b/docs/awesome-sveltekit.md
@@ -152,6 +152,7 @@ Awesome **SvelteKit** Links
 - [game-chronicle](https://github.com/ItsCentric/game-chronicle) - Use Superforms, shadcn-svelte, formsnap, tauri  for native app
 - [climbing_noteboo](https://github.com/diericx/climbing_notebook) - Use skeleton, Superforms, sveltekit-flash-message
 - [Vercel Toolbar and Feature Flags SvelteKit Starter](https://github.com/vercel/examples/tree/main/toolbar/toolbar-feature-flags-sveltekit), [Demo](https://toolbar-feature-flags-sveltekit.vercel.app/)
+- [JavaFlavors](https://github.com/Critteros/JavaFlavors/tree/main/web) - use `houdini` and `setClientSession()`, drizzle, superforms, shadcn-svelte
 
 ## Deployment
 
diff --git a/docs/vercel.md b/docs/vercel.md
index e3b60f53..609cf441 100644
--- a/docs/vercel.md
+++ b/docs/vercel.md
@@ -2,7 +2,7 @@
 
 ![Vercel Monorepo](./images/monorepo.avif 'Title')
 
-<p style="text-align: center;">The architecture of a monorepo deployed to Vercel</p>
+The architecture of a monorepo deployed to Vercel
 
 ## Prerequisites
 
@@ -43,7 +43,7 @@ Follow [SvelteKit on Vercel](https://vercel.com/docs/frameworks/sveltekit)
 
 ```shell
 # You can link your entire repo to all you Vercel projects in one command.
-vc link --repo
+vercel link --repo
 #
 vercel env ls
 vercel env ls --environment production
@@ -54,6 +54,16 @@ vercel env add API_TOKEN --sensitive
 vercel env rm API_TOKEN
 ```
 
+### Link
+
+Using Monorepos with Vercel CLI
+> [!NOTE]
+> If you're working in a monorepo using the Git Integration, you can link multiple projects at once using `vc link --repo`
+
+```shell
+vercel link --repo --yes --token $VERCEL_TOKEN
+```
+
 ## Build
 
 **Incremental Static Regeneration (ISR)** is a modern web development strategy that allows developers to create and update static pages on-demand, after the initial build.
@@ -62,7 +72,7 @@ vercel env rm API_TOKEN
 
 ![Vercel Request Times](./images/vercel-request-times.avif 'Title')
 
-<p style="text-align: center;">The result of ISR, for the end-user, feels as fast as static-site generation, served on Vercel's Edge Network.</p>
+The result of ISR, for the end-user, feels as fast as static-site generation, served on Vercel's Edge Network.
 
 ## Deploy
 
@@ -94,3 +104,4 @@ Vercel provides a set of [System Environment Variables](https://vercel.com/docs/
 - Quick Tip: [Deploy only modified Vercel projects in a Turborepo monorepo](https://www.joostschuur.com/blog/quick-tip-deploy-only-modified-vercel-projects-in-a-turborepo-monorepo)
 - [Intelligent ignored builds using Turborepo](https://vercel.com/changelog/intelligent-ignored-builds-using-turborepo)
 - [New features for SvelteKit: Optimize your application with ease](https://vercel.com/blog/feature-complete-sveltekit)
+- [Deploying a Monorepo to Vercel with Github Actions p1](https://davetayls.me/blog/2023-06-12-deploying-a-monorepo-to-vercel-with-github-actions)