diff --git a/examples/apps/auth-sample/src/components/EmbeddedSignerRecovery/AccountRecovery.tsx b/examples/apps/auth-sample/src/components/EmbeddedSignerRecovery/AccountRecovery.tsx
index d6e9929..be9e823 100644
--- a/examples/apps/auth-sample/src/components/EmbeddedSignerRecovery/AccountRecovery.tsx
+++ b/examples/apps/auth-sample/src/components/EmbeddedSignerRecovery/AccountRecovery.tsx
@@ -2,6 +2,7 @@ import {useState} from 'react';
 import {useOpenfort} from '../../hooks/useOpenfort';
 import Loading from '../Loading';
 import { Button } from '../ui/button';
+import { polygonAmoy } from 'viem/chains';
 
 const AccountRecovery: React.FC = () => {
   const {handleRecovery} = useOpenfort();
@@ -33,7 +34,7 @@ const AccountRecovery: React.FC = () => {
                     ) as HTMLInputElement
                   ).value;
                   setLoadingPwd(true);
-                  await handleRecovery('password', password);
+                  await handleRecovery({method: 'password', password, chainId: polygonAmoy.id});
                   setLoadingPwd(false);
                 }}
               >
@@ -56,7 +57,7 @@ const AccountRecovery: React.FC = () => {
                 className="bg-white text-black p-2.5 border border-gray-200 rounded-lg w-full hover:bg-gray-100"
                 onClick={async () => {
                   setLoadingAut(true);
-                  await handleRecovery('automatic');
+                  await handleRecovery({method:'automatic', chainId: polygonAmoy.id});
                   setLoadingAut(false);
                 }}
               >
diff --git a/examples/apps/auth-sample/src/hooks/useOpenfort.tsx b/examples/apps/auth-sample/src/hooks/useOpenfort.tsx
index bcfeb1c..8b20655 100644
--- a/examples/apps/auth-sample/src/hooks/useOpenfort.tsx
+++ b/examples/apps/auth-sample/src/hooks/useOpenfort.tsx
@@ -26,10 +26,15 @@ import { Chain, createPublicClient, http } from 'viem';
 interface ContextType {
   state: EmbeddedState;
   getEvmProvider: () => Provider;
-  handleRecovery: (
-    method: 'password' | 'automatic',
-    pin?: string
-  ) => Promise<void>;
+  handleRecovery: ({
+    method,
+    password,
+    chainId
+}:{
+  method: 'password' | 'automatic',
+  chainId:number
+  password?: string,
+}) => Promise<void>;
   auth: (accessToken: string) => Promise<AuthPlayerResponse>;
   setWalletRecovery: (
     recoveryMethod: RecoveryMethod,
@@ -211,9 +216,8 @@ export const OpenfortProvider: React.FC<React.PropsWithChildren<unknown>> = ({
   );
 
   const handleRecovery = useCallback(
-    async (method: 'password' | 'automatic', pin?: string) => {
+    async ({method, password, chainId}:{method: 'password' | 'automatic', password?: string, chainId: number}) => {
       try {
-        const chainId = Number(process.env.NEXT_PUBLIC_CHAIN_ID);
         const shieldAuth: ShieldAuthentication = {
           auth: ShieldAuthType.OPENFORT,
           token: openfort.getAccessToken()!,
@@ -222,10 +226,10 @@ export const OpenfortProvider: React.FC<React.PropsWithChildren<unknown>> = ({
         if (method === 'automatic') {
           await openfort.configureEmbeddedSigner(chainId, shieldAuth);
         } else if (method === 'password') {
-          if (!pin || pin.length < 4) {
+          if (!password || password.length < 4) {
             throw new Error('Password recovery must be at least 4 characters');
           }
-          await openfort.configureEmbeddedSigner(chainId, shieldAuth, pin);
+          await openfort.configureEmbeddedSigner(chainId, shieldAuth, password);
         }
       } catch (err) {
         console.error('Error handling recovery with Openfort:', err);
diff --git a/examples/apps/auth-sample/src/pages/index.tsx b/examples/apps/auth-sample/src/pages/index.tsx
index 735918b..2e04d97 100644
--- a/examples/apps/auth-sample/src/pages/index.tsx
+++ b/examples/apps/auth-sample/src/pages/index.tsx
@@ -24,7 +24,7 @@ import { Wallet } from 'lucide-react';
 import AccountActions from '@/components/AccountActions/AccountActions';
 
 const HomePage: NextPage = () => {
-  const {state} = useOpenfort();
+  const {state, handleRecovery} = useOpenfort();
   const [user, setUser] = useState<AuthPlayerResponse | null>(null);
   const router = useRouter();
   const [message, setMessage] = useState<string>('');
@@ -48,12 +48,6 @@ const HomePage: NextPage = () => {
     if (!user) fetchUser();
   }, [openfort]);
 
-  useEffect(() => {
-    if (textareaRef.current) {
-      textareaRef.current.scrollTop = textareaRef.current.scrollHeight;
-    }
-  }, [message]);
-
   const linkedAccount = useMemo(() => {
     const linkedAccount = user?.linkedAccounts?.find(
       (account: any) => account.provider === 'email'
@@ -71,7 +65,7 @@ const HomePage: NextPage = () => {
     return (
       <AuthLayout title="Set up your embedded signer" subtitle={<div></div>}>
         <div>
-          <p className="text-gray-400 mb-2">
+          <p className="text-gray-400 mb-4">
             Welcome, {user?.player?.name ?? user?.id}!
           </p>
           <div className="absolute top-2 right-2">
@@ -97,10 +91,22 @@ const HomePage: NextPage = () => {
     <>
       <header className="sticky top-0 z-50 bg-white border-b">
         <div className="flex justify-between items-center p-4">
-          <Link href="/" aria-label="Home">
-            <Logo className="h-8 w-auto" />
-          </Link>
-          <LogoutButton />
+          <div className='flex items-center space-x-4'>
+            <Link href="/" aria-label="Home">
+              <Logo className="h-8 w-auto md:flex hidden" />
+            </Link>
+            <span className='text-gray-300 md:flex hidden'>-</span>
+            <p className='font-mono text-orange-600 font-medium pt-2'>
+              Embedded Smart Wallet
+            </p>
+          </div>
+          <a 
+            className='h-9 px-4 py-2 bg-primary text-primary-foreground shadow hover:bg-primary/90 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50'
+            target="_blank"
+            href='https://dashboard.openfort.xyz/auth/register'
+            >
+              {'Get started with Openfort ->'}
+          </a>
         </div>
       </header>
       <main className="h-screen flex">
@@ -109,14 +115,23 @@ const HomePage: NextPage = () => {
             <Wallet className="h-5 w-5" />
             <h2 className="font-semibold">Console</h2>
           </div>
-          <div className="block h-full w-full">
+          <div className="flex-1 w-full">
             <textarea
               ref={textareaRef}
-              className="no-scrollbar h-full w-full rounded-lg border-0 bg-gray-100 p-4 font-mono text-xs text-black"
+              className="no-scrollbar h-full w-full border-0 bg-gray-100 p-4 font-mono text-xs text-black"
               value={message}
               readOnly
             />
           </div>
+          <div className="p-6 mb-14 border-t bg-white">
+            <p className="text-sm text-gray-600 mb-4">
+              Openfort gives you modular components so you can customize your product for your users.
+              <a href="https://www.openfort.xyz/docs/guides/getting-started/integration" className="text-blue-600 hover:underline">Learn more</a>.
+            </p>
+            <div className="flex gap-3">
+              <LogoutButton/>
+            </div>
+          </div>
         </div>
         <div className="w-full my-4">
           <div className="mx-auto flex w-full max-w-2xl flex-col px-4 sm:px-6">
diff --git a/examples/apps/auth-sample/src/pages/login.tsx b/examples/apps/auth-sample/src/pages/login.tsx
index 75d4bde..9d0277c 100644
--- a/examples/apps/auth-sample/src/pages/login.tsx
+++ b/examples/apps/auth-sample/src/pages/login.tsx
@@ -12,6 +12,7 @@ import {
   OAuthProvider,
 } from '@openfort/openfort-js';
 import { Button } from '@/components/ui/button';
+import Loading from '@/components/Loading';
 
 function LoginPage() {
   const router = useRouter();
@@ -147,8 +148,8 @@ function LoginPage() {
               </Button>
             </div>
           </div>
-          <Button type="submit" className="w-full">
-            Sign in to account
+          <Button disabled={status?.type === "loading"} type="submit" className="w-full">
+            {status?.type === "loading" ? <Loading /> : "Sign in to account"}
           </Button>
         </form>
         <div className="mt-6">
diff --git a/sdk/src/openfort.ts b/sdk/src/openfort.ts
index 0a7bbec..d3ee37a 100644
--- a/sdk/src/openfort.ts
+++ b/sdk/src/openfort.ts
@@ -192,7 +192,9 @@ export class Openfort {
     delete types.EIP712Domain;
 
     const account = Account.fromStorage(this.storage);
-    if (account && account.type === AccountType.UPGRADEABLE_V5) {
+    if (account && [AccountType.UPGRADEABLE_V5,
+      AccountType.UPGRADEABLE_V6,
+      AccountType.ZKSYNC_UPGRADEABLE_V1].includes(account.type as AccountType)) {
       const updatedDomain: TypedDataDomain = {
         name: 'Openfort',
         version: '0.5',