diff --git a/projects/TokenizeRWATemplate-frontend/src/Layout.tsx b/projects/TokenizeRWATemplate-frontend/src/Layout.tsx
index af83e8e..51ec351 100644
--- a/projects/TokenizeRWATemplate-frontend/src/Layout.tsx
+++ b/projects/TokenizeRWATemplate-frontend/src/Layout.tsx
@@ -2,143 +2,83 @@ import { useState } from 'react'
 import { NavLink, Outlet } from 'react-router-dom'
 import ConnectWallet from './components/ConnectWallet'
 import ThemeToggle from './components/ThemeToggle'
-import Web3AuthButton from './components/Web3AuthButton'
 import { useUnifiedWallet } from './hooks/useUnifiedWallet'
 
-/**
- * Main Layout Component
- * Wraps the entire app with navigation, footer, and wallet connection modal
- * Now with unified wallet support - shows mutual exclusion between Web3Auth and traditional wallets
- */
 export default function Layout() {
   const [openWalletModal, setOpenWalletModal] = useState(false)
-  const { walletType } = useUnifiedWallet()
+  const { isConnected, activeAddress, userInfo } = useUnifiedWallet()
 
   const toggleWalletModal = () => setOpenWalletModal(!openWalletModal)
 
-  // Determine button states based on which wallet is active
-  const isWeb3AuthActive = walletType === 'web3auth'
-  const isTraditionalActive = walletType === 'traditional'
+  // Helper to format address: "ZBC...WXYZ"
+  const displayAddress =
+    isConnected && activeAddress ? `${activeAddress.toString().slice(0, 4)}...${activeAddress.toString().slice(-4)}` : 'Sign in'
 
   return (
     <div className="min-h-screen flex flex-col bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100">
       {/* Navbar */}
       <nav className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 sticky top-0 z-50 shadow-sm">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
-          <NavLink
-            to="/"
-            className="text-2xl font-bold text-slate-900 dark:text-white hover:text-teal-600 dark:hover:text-teal-400 transition"
-          >
+          <NavLink to="/" className="text-2xl font-bold text-slate-900 dark:text-white hover:text-teal-600 transition">
             TokenizeRWA
           </NavLink>
 
-          <div className="hidden sm:flex items-center gap-6">
-            <NavLink
-              to="/"
-              className={({ isActive }) =>
-                `text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100 font-medium transition ${isActive ? 'text-slate-900 dark:text-slate-100 border-b-2 border-teal-600' : ''}`
-              }
-            >
-              Home
-            </NavLink>
-            <NavLink
-              to="/tokenize"
-              className={({ isActive }) =>
-                `text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100 font-medium transition ${isActive ? 'text-slate-900 dark:text-slate-100 border-b-2 border-teal-600' : ''}`
-              }
-            >
-              Tokenize
-            </NavLink>
+          {/* Desktop Navigation */}
+          <div className="hidden sm:flex items-center gap-8">
+            {['Home', 'Tokenize'].map((item) => (
+              <NavLink
+                key={item}
+                to={item === 'Home' ? '/' : `/${item.toLowerCase()}`}
+                className={({ isActive }) =>
+                  `text-sm font-semibold transition ${isActive ? 'text-teal-600' : 'text-slate-500 hover:text-slate-900 dark:hover:text-white'}`
+                }
+              >
+                {item}
+              </NavLink>
+            ))}
           </div>
 
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-4">
             <ThemeToggle />
 
-            {/* Web3Auth Button - disabled if traditional wallet is active */}
-            <div className={isTraditionalActive ? 'opacity-50 pointer-events-none' : ''}>
-              <Web3AuthButton />
-            </div>
-
-            {/* Traditional Wallet Button - disabled if Web3Auth is active */}
+            {/* ONE Button to Rule Them All */}
             <button
               onClick={toggleWalletModal}
-              disabled={isWeb3AuthActive}
-              className={`px-4 py-2 rounded-lg font-medium transition text-sm shadow-sm ${
-                isWeb3AuthActive
-                  ? 'bg-gray-300 text-gray-500 cursor-not-allowed dark:bg-slate-700 dark:text-slate-500'
-                  : isTraditionalActive
-                    ? 'bg-teal-600 text-white hover:bg-teal-700'
-                    : 'bg-teal-600 text-white hover:bg-teal-700'
+              className={`flex items-center gap-2 px-5 py-2 rounded-xl font-bold text-sm transition shadow-sm border ${
+                isConnected
+                  ? 'bg-slate-50 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200'
+                  : 'bg-teal-600 border-teal-600 text-white hover:bg-teal-700'
               }`}
-              title={isWeb3AuthActive ? 'Using Web3Auth - disconnect to use traditional wallet' : undefined}
             >
-              {isWeb3AuthActive
-                ? 'Using Web3Auth'
-                : isTraditionalActive
-                  ? 'Wallet Connected'
-                  : 'Connect Wallet'}
+              {isConnected && <span className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse" />}
+              {displayAddress}
             </button>
           </div>
         </div>
       </nav>
 
-      {/* Main */}
       <main className="flex-1">
         <Outlet />
       </main>
 
-      {/* Footer */}
-      <footer className="bg-slate-900 dark:bg-slate-950 text-slate-300 dark:text-slate-400 border-t border-slate-800 dark:border-slate-800">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-          <div className="grid gap-8 md:grid-cols-3">
-            <div>
-              <div className="text-xl font-bold text-white">TokenizeRWA</div>
-              <p className="mt-3 text-sm leading-relaxed">
-                A lightweight proof-of-concept template for tokenizing real-world assets on Algorand.
-              </p>
-            </div>
-
-            <div>
-              <div className="font-semibold text-white mb-4">Resources</div>
-              <ul className="space-y-2 text-sm">
-                <li>
-                  <NavLink to="/tokenize" className="hover:text-white transition">
-                    Tokenize an Asset
-                  </NavLink>
-                </li>
-                <li>
-                  <a
-                    className="hover:text-white transition"
-                    href="https://dev.algorand.co/concepts/assets/overview/"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    ASA Documentation →
-                  </a>
-                </li>
-                <li>
-                  <a className="hover:text-white transition" href="https://lora.algokit.io/testnet" target="_blank" rel="noreferrer">
-                    Lora Explorer →
-                  </a>
-                </li>
-              </ul>
-            </div>
-
-            <div>
-              <div className="font-semibold text-white mb-4">About</div>
-              <p className="text-sm leading-relaxed">
-                A POC template for founders. For production, add compliance workflows, identity verification, and audit logs.
-              </p>
-            </div>
+      {/* Footer (Simplified) */}
+      <footer className="bg-slate-900 text-slate-400 py-12 px-6 border-t border-slate-800">
+        <div className="max-w-7xl mx-auto grid gap-8 md:grid-cols-3">
+          <div>
+            <div className="text-xl font-bold text-white mb-3">TokenizeRWA</div>
+            <p className="text-sm">POC template for tokenizing real-world assets on Algorand.</p>
           </div>
-
-          <div className="mt-12 pt-8 border-t border-gray-800 text-xs text-gray-400 flex flex-col sm:flex-row gap-2 sm:justify-between">
-            <span>© {new Date().getFullYear()} TokenizeRWA. All rights reserved.</span>
-            <span>Built with AlgoKit + Algorand</span>
+          <div className="text-sm">
+            <span className="text-white font-bold block mb-2">Connect</span>
+            <a href="https://lora.algokit.io" target="_blank" className="hover:text-teal-400 transition">
+              Lora Explorer →
+            </a>
           </div>
+          <div className="text-xs">© {new Date().getFullYear()} TokenizeRWA. All rights reserved.</div>
         </div>
       </footer>
 
+      {/* The Unified Modal */}
       <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
     </div>
   )
diff --git a/projects/TokenizeRWATemplate-frontend/src/components/ConnectWallet.tsx b/projects/TokenizeRWATemplate-frontend/src/components/ConnectWallet.tsx
index 4d55d40..c405ccd 100644
--- a/projects/TokenizeRWATemplate-frontend/src/components/ConnectWallet.tsx
+++ b/projects/TokenizeRWATemplate-frontend/src/components/ConnectWallet.tsx
@@ -1,5 +1,6 @@
-import { useWallet, Wallet, WalletId } from '@txnlab/use-wallet-react'
-import { useEffect, useRef } from 'react'
+import { WalletId } from '@txnlab/use-wallet-react'
+import { useEffect, useRef, useState } from 'react'
+import { SocialLoginProvider, useUnifiedWallet } from '../hooks/useUnifiedWallet'
 import Account from './Account'
 
 interface ConnectWalletInterface {
@@ -7,154 +8,157 @@ interface ConnectWalletInterface {
   closeModal: () => void
 }
 
-/**
- * ConnectWallet Modal Component
- * Displays wallet connection options (Pera, Defly, Lute, KMD for LocalNet)
- * Also shows connected wallet details and network information when logged in
- */
 const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
-  const { wallets, activeAddress } = useWallet()
+  const { isConnected, walletType, userInfo, traditionalWallets, connectGoogle, connectFacebook, connectGithub, disconnect } =
+    useUnifiedWallet()
+
+  const [connectingProvider, setConnectingProvider] = useState<SocialLoginProvider | null>(null)
   const dialogRef = useRef<HTMLDialogElement>(null)
 
-  // Manage native dialog element's open/close state
+  const handleSocialLogin = async (provider: SocialLoginProvider, connectFn: () => Promise<void>) => {
+    try {
+      setConnectingProvider(provider)
+      await connectFn()
+      closeModal()
+    } catch (error) {
+      throw new Error(`Failed to connect with ${provider}: ${error}`)
+    }
+  }
+
+  const socialOptions: { id: SocialLoginProvider; label: string; icon: string; action: () => Promise<void> }[] = [
+    {
+      id: 'google',
+      label: 'Continue with Google',
+      icon: 'https://www.gstatic.com/images/branding/product/1x/gsa_512dp.png',
+      action: connectGoogle,
+    },
+    {
+      id: 'facebook',
+      label: 'Continue with Facebook',
+      icon: 'https://www.facebook.com/images/fb_icon_325x325.png',
+      action: connectFacebook,
+    },
+    {
+      id: 'github',
+      label: 'Continue with GitHub',
+      icon: 'https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png',
+      action: connectGithub,
+    },
+  ]
+
+  const formatSocialProvider = (provider?: string) => {
+    const normalized = provider?.toLowerCase()
+    switch (normalized) {
+      case 'google':
+        return 'Google'
+      case 'facebook':
+        return 'Facebook'
+      case 'github':
+        return 'GitHub'
+      default:
+        return 'Social Login'
+    }
+  }
+
   useEffect(() => {
     const dialog = dialogRef.current
     if (!dialog) return
-
-    if (openModal) {
-      dialog.showModal()
-    } else {
-      dialog.close()
-    }
+    openModal ? dialog.showModal() : dialog.close()
   }, [openModal])
 
-  const getActiveWallet = () => {
-    if (!wallets) return null
-    return wallets.find((w) => w.isActive)
-  }
-
-  const getWalletDisplayName = (wallet: Wallet) => {
-    if (wallet.id === WalletId.KMD) return 'LocalNet Wallet'
-    return wallet.metadata.name
-  }
-
-  const isKmd = (wallet: Wallet) => wallet.id === WalletId.KMD
-
-  const activeWallet = getActiveWallet()
-
   return (
     <dialog
       ref={dialogRef}
-      id="connect_wallet_modal"
-      className="fixed inset-0 w-full max-w-lg mx-auto my-auto rounded-2xl bg-white dark:bg-slate-800 shadow-2xl border border-gray-200 dark:border-slate-700 overflow-hidden"
-      onClick={(e) => {
-        // Close when clicking the backdrop
-        if (e.target === dialogRef.current) {
-          closeModal()
-        }
-      }}
+      className="fixed inset-0 w-full max-w-md mx-auto my-auto rounded-3xl bg-white dark:bg-slate-900 shadow-2xl border-none p-0 backdrop:bg-gray-900/50 backdrop:backdrop-blur-sm"
+      onClick={(e) => e.target === dialogRef.current && closeModal()}
     >
-      <div className="p-6 sm:p-7">
-        <div className="flex items-center justify-between mb-5">
-          <h3 className="text-xl font-semibold text-gray-900 dark:text-slate-100">Select wallet provider</h3>
-          <button
-            className="text-gray-400 dark:text-slate-500 hover:text-gray-600 dark:hover:text-slate-300 transition text-sm"
-            onClick={closeModal}
-            aria-label="Close wallet modal"
-          >
-            ✕
+      <div className="p-8">
+        <div className="flex items-center justify-between mb-6">
+          <h3 className="text-2xl font-bold text-gray-900 dark:text-white">{isConnected ? 'Account' : 'Sign in'}</h3>
+          <button onClick={closeModal} className="p-2 hover:bg-gray-100 dark:hover:bg-slate-800 rounded-full transition">
+            <span className="text-xl text-gray-500">✕</span>
           </button>
         </div>
 
-        <p className="text-sm text-gray-500 dark:text-slate-400 mb-4">
-          Choose the wallet you want to connect. Supported: Pera, Defly, LocalNet (KMD), and others.
-        </p>
-
-        <div className="space-y-4">
-          {activeAddress && (
-            <>
-              <div className="rounded-xl border border-gray-100 dark:border-slate-700 bg-gray-50 dark:bg-slate-700 p-4">
+        <div className="space-y-6">
+          {isConnected ? (
+            /* --- CONNECTED STATE --- */
+            <div className="space-y-4">
+              <div className="bg-slate-50 dark:bg-slate-800 rounded-2xl p-4 border border-slate-100 dark:border-slate-700">
                 <Account />
-              </div>
 
-              {/* Wallet Info */}
-              <div className="space-y-3 bg-white dark:bg-slate-700 border border-gray-200 dark:border-slate-600 rounded-xl p-4">
-                {activeWallet && (
-                  <div>
-                    <p className="text-xs text-gray-500 dark:text-slate-400 font-medium mb-1">Connected Wallet</p>
-                    <p className="text-sm font-semibold text-gray-900 dark:text-slate-100">{getWalletDisplayName(activeWallet)}</p>
+                {walletType === 'web3auth' && userInfo && (
+                  <div className="mt-3 pt-3 border-t border-slate-200 dark:border-slate-700 flex items-center gap-3">
+                    {userInfo.profileImage && (
+                      <img src={userInfo.profileImage} alt="Profile" className="w-8 h-8 rounded-full border border-white" />
+                    )}
+                    <div className="overflow-hidden">
+                      <p className="text-[10px] uppercase tracking-wider text-gray-500 font-bold">
+                        Connected via {formatSocialProvider(userInfo.typeOfLogin)}
+                      </p>
+                      <p className="text-sm font-medium dark:text-slate-200 truncate">{userInfo.email || userInfo.name}</p>
+                    </div>
                   </div>
                 )}
               </div>
 
-              <div className="h-px bg-gray-200 dark:bg-slate-600" />
-            </>
-          )}
-
-          {!activeAddress &&
-            wallets?.map((wallet) => (
               <button
-                data-test-id={`${wallet.id}-connect`}
-                className={`
-                  w-full flex items-center gap-4 px-4 py-3 rounded-xl bg-white dark:bg-slate-700 border border-gray-200 dark:border-slate-600
-                  hover:border-indigo-200 dark:hover:border-indigo-500 hover:bg-indigo-50/50 dark:hover:bg-slate-600 transition
-                  focus:outline-none focus:ring-2 focus:ring-indigo-200 dark:focus:ring-indigo-500
-                `}
-                key={`provider-${wallet.id}`}
-                onClick={() => {
-                  // Close modal before initiating wallet connection
-                  closeModal()
-                  wallet.connect()
-                }}
+                onClick={disconnect} // Use the unified disconnect method
+                className="w-full py-3 bg-red-50 text-red-600 hover:bg-red-100 dark:bg-red-900/20 dark:text-red-400 font-semibold rounded-xl transition"
               >
-                {!isKmd(wallet) && (
-                  <img
-                    alt={`wallet_icon_${wallet.id}`}
-                    src={wallet.metadata.icon}
-                    className="w-9 h-9 object-contain rounded-md border border-gray-100 dark:border-slate-600 bg-white dark:bg-slate-700"
-                  />
-                )}
-                <span className="font-medium text-sm text-left flex-1 text-gray-900 dark:text-slate-100">
-                  {isKmd(wallet) ? 'LocalNet Wallet' : wallet.metadata.name}
-                </span>
-                {wallet.isActive && <span className="text-sm text-emerald-500">✓</span>}
+                Disconnect
               </button>
-            ))}
-        </div>
+            </div>
+          ) : (
+            /* --- DISCONNECTED STATE --- */
+            <>
+              <div className="space-y-3">
+                <p className="text-xs font-bold uppercase tracking-wider text-gray-400 px-1">Social Login</p>
+                {socialOptions.map((option) => (
+                  <button
+                    key={option.id}
+                    onClick={() => handleSocialLogin(option.id, option.action)}
+                    disabled={!!connectingProvider}
+                    className="w-full flex items-center justify-center gap-3 px-4 py-3.5 rounded-xl border border-gray-200 dark:border-slate-700 hover:bg-gray-50 dark:hover:bg-slate-800 transition shadow-sm font-medium text-gray-700 dark:text-slate-200 disabled:opacity-50"
+                  >
+                    <img src={option.icon} className="w-5 h-5" alt={option.label} />
+                    {connectingProvider === option.id ? 'Connecting...' : option.label}
+                  </button>
+                ))}
+              </div>
 
-        <div className="mt-6 flex gap-3">
-          <button
-            data-test-id="close-wallet-modal"
-            className="w-full sm:w-auto px-4 py-2.5 rounded-lg border border-gray-200 dark:border-slate-600 bg-gray-50 dark:bg-slate-700 text-gray-700 dark:text-slate-300 text-sm hover:bg-gray-100 dark:hover:bg-slate-600 transition"
-            onClick={() => {
-              closeModal()
-            }}
-          >
-            Close
-          </button>
+              <div className="relative">
+                <div className="absolute inset-0 flex items-center">
+                  <div className="w-full border-t border-gray-100 dark:border-slate-800"></div>
+                </div>
+                <div className="relative flex justify-center text-xs uppercase">
+                  <span className="bg-white dark:bg-slate-900 px-2 text-gray-400">Or use a wallet</span>
+                </div>
+              </div>
 
-          {activeAddress && (
-            <button
-              className="w-full sm:w-auto px-4 py-2.5 rounded-lg bg-red-500 hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700 text-white text-sm transition"
-              data-test-id="logout"
-              onClick={async () => {
-                if (wallets) {
-                  const wallet = wallets.find((w) => w.isActive)
-                  if (wallet) {
-                    await wallet.disconnect()
-                  } else {
-                    localStorage.removeItem('@txnlab/use-wallet:v3')
-                    window.location.reload()
-                  }
-                }
-              }}
-            >
-              Logout
-            </button>
+              <div className="grid grid-cols-1 gap-3">
+                {traditionalWallets?.map((wallet) => (
+                  <button
+                    key={wallet.id}
+                    className="flex items-center gap-4 p-4 rounded-xl border border-gray-100 dark:border-slate-800 hover:border-indigo-500 dark:hover:border-indigo-500 hover:bg-indigo-50/30 transition group"
+                    onClick={() => {
+                      closeModal()
+                      wallet.connect()
+                    }}
+                  >
+                    <img src={wallet.metadata.icon} alt={wallet.id} className="w-10 h-10 rounded-lg group-hover:scale-110 transition" />
+                    <span className="font-semibold text-gray-800 dark:text-slate-200">
+                      {wallet.id === WalletId.KMD ? 'LocalNet' : wallet.metadata.name}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            </>
           )}
         </div>
       </div>
     </dialog>
   )
 }
+
 export default ConnectWallet
diff --git a/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthButton.tsx b/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthButton.tsx
index 12a26f4..0d8a0e4 100644
--- a/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthButton.tsx
+++ b/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthButton.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { AiOutlineLoading3Quarters } from 'react-icons/ai'
-import { FaGoogle, FaCopy, FaCheck } from 'react-icons/fa'
+import { FaCheck, FaCopy, FaGoogle } from 'react-icons/fa'
 import { useWeb3Auth } from './Web3AuthProvider'
 
 /**
@@ -46,12 +46,12 @@ export function Web3AuthButton() {
     // Handle if address is an object (like from algosdk with publicKey property)
     if (typeof algorandAccount.address === 'object' && algorandAccount.address !== null) {
       // If it has a toString method, use it
-      if ('toString' in algorandAccount.address && typeof algorandAccount.address.toString === 'function') {
-        return algorandAccount.address.toString()
+      if ('toString' in algorandAccount.address && typeof algorandAccount.address === 'function') {
+        return algorandAccount.address
       }
       // If it has an addr property (algosdk Account object)
       if ('addr' in algorandAccount.address) {
-        return String(algorandAccount.address.addr)
+        return String(algorandAccount.address)
       }
       return ''
     }
@@ -59,14 +59,6 @@ export function Web3AuthButton() {
     return String(algorandAccount.address)
   }
 
-  // Ellipsize long addresses for better UI
-  const ellipseAddress = (address: string = '', startChars = 6, endChars = 4): string => {
-    if (!address || address.length <= startChars + endChars) {
-      return address
-    }
-    return `${address.slice(0, startChars)}...${address.slice(-endChars)}`
-  }
-
   // Handle login with error feedback
   const handleLogin = async () => {
     try {
@@ -149,7 +141,7 @@ export function Web3AuthButton() {
         <button
           onClick={() => setIsDropdownOpen(!isDropdownOpen)}
           className="btn btn-sm btn-ghost gap-2 hover:bg-base-200"
-          title={`Connected: ${address}`}
+          title={`Connected: ${address} ${userInfo?.email}`}
         >
           <div className="flex items-center gap-2">
             {/* Profile picture - always show first letter of address */}
@@ -164,7 +156,7 @@ export function Web3AuthButton() {
                 {firstLetter}
               </div>
             )}
-            <span className="font-mono text-sm font-medium">{ellipseAddress(address)}</span>
+            <span className="font-mono text-sm font-medium">{address}</span>
             <svg
               className={`w-4 h-4 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`}
               fill="none"
@@ -184,23 +176,15 @@ export function Web3AuthButton() {
                 <li className="menu-title px-3 py-2">
                   <div className="flex items-center gap-3">
                     {userInfo.profileImage ? (
-                      <img
-                        src={userInfo.profileImage}
-                        alt="Profile"
-                        className="w-10 h-10 rounded-full object-cover ring-2 ring-primary"
-                      />
+                      <img src={userInfo.profileImage} alt="Profile" className="w-10 h-10 rounded-full object-cover ring-2 ring-primary" />
                     ) : (
                       <div className="w-10 h-10 rounded-full bg-primary text-primary-content flex items-center justify-center text-lg font-bold">
                         {firstLetter}
                       </div>
                     )}
                     <div className="flex flex-col">
-                      {userInfo.name && (
-                        <span className="font-semibold text-base-content">{userInfo.name}</span>
-                      )}
-                      {userInfo.email && (
-                        <span className="text-xs text-base-content/70 break-all">{userInfo.email}</span>
-                      )}
+                      {userInfo.name && <span className="font-semibold text-base-content">{userInfo.name}</span>}
+                      {userInfo.email && <span className="text-xs text-base-content/70 break-all">{userInfo.email}</span>}
                     </div>
                   </div>
                 </li>
@@ -213,17 +197,12 @@ export function Web3AuthButton() {
               <span className="text-xs uppercase">Algorand Address</span>
             </li>
             <li>
-              <div className="bg-base-200 rounded-lg p-2 font-mono text-xs break-all cursor-default hover:bg-base-200">
-                {address}
-              </div>
+              <div className="bg-base-200 rounded-lg p-2 font-mono text-xs break-all cursor-default hover:bg-base-200">{address}</div>
             </li>
 
             {/* Copy Address Button */}
             <li>
-              <button
-                onClick={handleCopyAddress}
-                className="text-sm gap-2"
-              >
+              <button onClick={handleCopyAddress} className="text-sm gap-2">
                 {copied ? (
                   <>
                     <FaCheck className="text-success" />
@@ -242,11 +221,7 @@ export function Web3AuthButton() {
 
             {/* Disconnect Button */}
             <li>
-              <button
-                onClick={handleLogout}
-                disabled={isLoading}
-                className="text-sm text-error hover:bg-error/10 gap-2"
-              >
+              <button onClick={handleLogout} disabled={isLoading} className="text-sm text-error hover:bg-error/10 gap-2">
                 {isLoading ? (
                   <>
                     <AiOutlineLoading3Quarters className="animate-spin" />
@@ -255,7 +230,12 @@ export function Web3AuthButton() {
                 ) : (
                   <>
                     <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                      />
                     </svg>
                     <span>Disconnect</span>
                   </>
diff --git a/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthProvider.tsx b/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthProvider.tsx
index 0e7e2a2..3339510 100644
--- a/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthProvider.tsx
+++ b/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthProvider.tsx
@@ -13,7 +13,11 @@ interface Web3AuthContextType {
   web3AuthInstance: Web3Auth | null
   algorandAccount: AlgorandAccountFromWeb3Auth | null
   userInfo: Web3AuthUserInfo | null
-  login: () => Promise<void>
+  /**
+   * login handles both modal and direct social login.
+   * Passing arguments bypasses the Web3Auth modal.
+   */
+  login: (adapter?: string, provider?: string) => Promise<void>
   logout: () => Promise<void>
   refreshUserInfo: () => Promise<void>
 }
@@ -31,6 +35,7 @@ export function Web3AuthProvider({ children }: { children: ReactNode }) {
   const [algorandAccount, setAlgorandAccount] = useState<AlgorandAccountFromWeb3Auth | null>(null)
   const [userInfo, setUserInfo] = useState<Web3AuthUserInfo | null>(null)
 
+  // Initialization logic
   useEffect(() => {
     const initializeWeb3Auth = async () => {
       try {
@@ -38,7 +43,6 @@ export function Web3AuthProvider({ children }: { children: ReactNode }) {
         setError(null)
 
         const web3auth = await initWeb3Auth()
-
         setWeb3AuthInstance(web3auth)
 
         if (web3auth.status === 'connected' && web3auth.provider) {
@@ -49,19 +53,17 @@ export function Web3AuthProvider({ children }: { children: ReactNode }) {
             const account = await getAlgorandAccount(web3auth.provider)
             setAlgorandAccount(account)
           } catch (err) {
+            console.error('🎯 Account derivation error:', err)
             setError('Failed to derive Algorand account. Please reconnect.')
           }
 
           try {
             const userInformation = await getWeb3AuthUserInfo()
-            if (userInformation) {
-              setUserInfo(userInformation)
-            }
+            if (userInformation) setUserInfo(userInformation)
           } catch (err) {
             console.error('🎯 Failed to fetch user info:', err)
           }
         }
-
         setIsInitialized(true)
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : 'Failed to initialize Web3Auth'
@@ -76,25 +78,32 @@ export function Web3AuthProvider({ children }: { children: ReactNode }) {
     initializeWeb3Auth()
   }, [])
 
-  const login = async () => {
-
+  /**
+   * Unified Login Function
+   * @param adapter - (Optional) e.g., WALLET_ADAPTERS.AUTH
+   * @param loginProvider - (Optional) e.g., 'google'
+   */
+  const login = async (adapter?: string, loginProvider?: string) => {
     if (!web3AuthInstance) {
-      console.error('🎯 LOGIN: Web3Auth not initialized')
       setError('Web3Auth not initialized')
       return
     }
 
-    if (!isInitialized) {
-      console.error('🎯 LOGIN: Web3Auth still initializing')
-      setError('Web3Auth is still initializing, please try again')
-      return
-    }
-
     try {
       setIsLoading(true)
       setError(null)
 
-      const web3authProvider = await web3AuthInstance.connect()
+      let web3authProvider: IProvider | null
+
+      // Check if we are triggering a specific social login (bypasses modal)
+      if (adapter && loginProvider) {
+        web3authProvider = await web3AuthInstance.connectTo(adapter, {
+          loginProvider: loginProvider,
+        })
+      } else {
+        // Fallback to showing the default Web3Auth Modal
+        web3authProvider = await web3AuthInstance.connect()
+      }
 
       if (!web3authProvider) {
         throw new Error('Failed to connect Web3Auth provider')
@@ -103,23 +112,12 @@ export function Web3AuthProvider({ children }: { children: ReactNode }) {
       setProvider(web3authProvider)
       setIsConnected(true)
 
-      try {
-        const account = await getAlgorandAccount(web3authProvider)
-        setAlgorandAccount(account)
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : 'Failed to derive Algorand account'
-        setError(errorMessage)
-      }
-
-      try {
-        const userInformation = await getWeb3AuthUserInfo()
-        if (userInformation) {
-          setUserInfo(userInformation)
-        }
-      } catch (err) {
-        console.error('🎯 LOGIN: Failed to fetch user info:', err)
-      }
+      // Post-connection: Derive Algorand Address and Fetch Profile
+      const account = await getAlgorandAccount(web3authProvider)
+      setAlgorandAccount(account)
 
+      const userInformation = await getWeb3AuthUserInfo()
+      if (userInformation) setUserInfo(userInformation)
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Login failed'
       console.error('🎯 LOGIN: Error:', err)
@@ -143,16 +141,9 @@ export function Web3AuthProvider({ children }: { children: ReactNode }) {
       setIsConnected(false)
       setAlgorandAccount(null)
       setUserInfo(null)
-
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Logout failed'
       console.error('🎯 LOGOUT: Error:', err)
-      setError(errorMessage)
-
-      setProvider(null)
-      setIsConnected(false)
-      setAlgorandAccount(null)
-      setUserInfo(null)
+      setError(err instanceof Error ? err.message : 'Logout failed')
     } finally {
       setIsLoading(false)
     }
@@ -161,9 +152,7 @@ export function Web3AuthProvider({ children }: { children: ReactNode }) {
   const refreshUserInfo = async () => {
     try {
       const userInformation = await getWeb3AuthUserInfo()
-      if (userInformation) {
-        setUserInfo(userInformation)
-      }
+      if (userInformation) setUserInfo(userInformation)
     } catch (err) {
       console.error('🎯 REFRESH: Failed:', err)
     }
@@ -188,10 +177,8 @@ export function Web3AuthProvider({ children }: { children: ReactNode }) {
 
 export function useWeb3Auth(): Web3AuthContextType {
   const context = useContext(Web3AuthContext)
-
   if (context === undefined) {
     throw new Error('useWeb3Auth must be used within a Web3AuthProvider')
   }
-
   return context
 }
diff --git a/projects/TokenizeRWATemplate-frontend/src/hooks/useUnifiedWallet.ts b/projects/TokenizeRWATemplate-frontend/src/hooks/useUnifiedWallet.ts
index 2128502..55075b3 100644
--- a/projects/TokenizeRWATemplate-frontend/src/hooks/useUnifiedWallet.ts
+++ b/projects/TokenizeRWATemplate-frontend/src/hooks/useUnifiedWallet.ts
@@ -1,219 +1,47 @@
-/**
- * Unified Wallet Hook
- *
- * Combines Web3Auth (Google OAuth) and traditional wallet (Pera/Defly/etc) into ONE interface.
- * Provides a single source of truth for activeAddress and signer across the entire app.
- *
- * Features:
- * - Returns ONE activeAddress (from either Web3Auth OR traditional wallet)
- * - Returns ONE signer (compatible with AlgorandClient)
- * - Indicates which wallet type is active
- * - Handles mutual exclusion (only one can be active at a time)
- *
- * Usage:
- * ```typescript
- * const { activeAddress, signer, walletType, isConnected } = useUnifiedWallet()
- *
- * // walletType will be: 'web3auth' | 'traditional' | null
- * // signer works with: algorand.send.assetCreate({ sender: activeAddress, signer, ... })
- * ```
- */
-
 import { useWallet } from '@txnlab/use-wallet-react'
 import { useMemo } from 'react'
 import { useWeb3Auth } from '../components/Web3AuthProvider'
 import { createWeb3AuthSigner } from '../utils/web3auth/web3authIntegration'
+import { WALLET_ADAPTERS } from '@web3auth/base'
 
-export type WalletType = 'web3auth' | 'traditional' | null
+export type SocialLoginProvider = 'google' | 'facebook' | 'github'
 
-export interface UnifiedWalletState {
-  /** The active Algorand address (from either Web3Auth or traditional wallet) */
-  activeAddress: string | null
-
-  /** Transaction signer compatible with AlgorandClient */
-  signer: any | null
-
-  /** Which wallet system is currently active */
-  walletType: WalletType
-
-  /** Whether any wallet is connected */
-  isConnected: boolean
-
-  /** Loading state (either wallet system initializing/connecting) */
-  isLoading: boolean
-
-  /** Error from either wallet system */
-  error: string | null
-
-  /** Original Web3Auth data (for accessing userInfo, etc) */
-  web3auth: {
-    algorandAccount: ReturnType<typeof useWeb3Auth>['algorandAccount']
-    userInfo: ReturnType<typeof useWeb3Auth>['userInfo']
-    login: ReturnType<typeof useWeb3Auth>['login']
-    logout: ReturnType<typeof useWeb3Auth>['logout']
-  }
-
-  /** Original traditional wallet data (for accessing wallet-specific features) */
-  traditional: {
-    wallets: ReturnType<typeof useWallet>['wallets']
-    activeWallet: ReturnType<typeof useWallet>['activeWallet']
-  }
-}
-
-/**
- * useUnifiedWallet Hook
- *
- * Combines Web3Auth and traditional wallet into a single interface.
- * Priority: Web3Auth takes precedence if both are somehow connected.
- *
- * @returns UnifiedWalletState with activeAddress, signer, and wallet metadata
- *
- * @example
- * ```typescript
- * // In TokenizeAsset.tsx:
- * const { activeAddress, signer, walletType } = useUnifiedWallet()
- *
- * if (!activeAddress) {
- *   return <p>Please connect a wallet</p>
- * }
- *
- * // Use signer with AlgorandClient - works with BOTH wallet types!
- * const result = await algorand.send.assetCreate({
- *   sender: activeAddress,
- *   signer: signer,
- *   total: BigInt(1000000),
- *   decimals: 6,
- *   assetName: 'My Token',
- *   unitName: 'MYT',
- * })
- * ```
- */
-export function useUnifiedWallet(): UnifiedWalletState {
-  // Get both wallet systems
-  const web3auth = useWeb3Auth()
+export function useUnifiedWallet() {
+  const { isConnected, algorandAccount, userInfo, login, logout, isLoading } = useWeb3Auth()
   const traditional = useWallet()
 
-  // Compute unified state
-  const state = useMemo<UnifiedWalletState>(() => {
-    // Priority 1: Web3Auth (if connected)
-    if (web3auth.isConnected && web3auth.algorandAccount) {
-      return {
-        activeAddress: web3auth.algorandAccount.address,
-        signer: createWeb3AuthSigner(web3auth.algorandAccount),
-        walletType: 'web3auth',
-        isConnected: true,
-        isLoading: web3auth.isLoading,
-        error: web3auth.error,
-        web3auth: {
-          algorandAccount: web3auth.algorandAccount,
-          userInfo: web3auth.userInfo,
-          login: web3auth.login,
-          logout: web3auth.logout,
-        },
-        traditional: {
-          wallets: traditional.wallets,
-          activeWallet: traditional.activeWallet,
-        },
-      }
+  return useMemo(() => {
+    // Determine which source is actually providing an account
+    const isWeb3AuthActive = isConnected && !!algorandAccount
+    const isTraditionalActive = !!traditional.activeAddress
+
+    const activeAddress = isWeb3AuthActive ? algorandAccount!.address : traditional.activeAddress || null
+
+    const connectWithSocial = async (provider: SocialLoginProvider) => {
+      await login(WALLET_ADAPTERS.AUTH, provider)
     }
 
-    // Priority 2: Traditional wallet (Pera/Defly/etc)
-    if (traditional.activeAddress) {
-      return {
-        activeAddress: traditional.activeAddress,
-        signer: traditional.transactionSigner,
-        walletType: 'traditional',
-        isConnected: true,
-        isLoading: false,
-        error: null,
-        web3auth: {
-          algorandAccount: null,
-          userInfo: null,
-          login: web3auth.login,
-          logout: web3auth.logout,
-        },
-        traditional: {
-          wallets: traditional.wallets,
-          activeWallet: traditional.activeWallet,
-        },
-      }
-    }
-
-    // No wallet connected
     return {
-      activeAddress: null,
-      signer: null,
-      walletType: null,
-      isConnected: false,
-      isLoading: web3auth.isLoading,
-      error: web3auth.error,
-      web3auth: {
-        algorandAccount: null,
-        userInfo: null,
-        login: web3auth.login,
-        logout: web3auth.logout,
-      },
-      traditional: {
-        wallets: traditional.wallets,
-        activeWallet: traditional.activeWallet,
+      activeAddress,
+      isConnected: !!activeAddress,
+      walletType: isWeb3AuthActive ? 'web3auth' : isTraditionalActive ? 'traditional' : null,
+      isLoading,
+
+      // Connection Methods
+      connectSocial: connectWithSocial,
+      connectGoogle: async () => connectWithSocial('google'),
+      connectFacebook: async () => connectWithSocial('facebook'),
+      connectGithub: async () => connectWithSocial('github'),
+
+      disconnect: async () => {
+        if (isWeb3AuthActive) await logout()
+        if (isTraditionalActive) await traditional.activeWallet?.disconnect()
       },
+
+      // Metadata
+      userInfo,
+      traditionalWallets: traditional.wallets,
+      signer: isWeb3AuthActive ? createWeb3AuthSigner(algorandAccount) : traditional.transactionSigner,
     }
-  }, [
-    web3auth.isConnected,
-    web3auth.algorandAccount,
-    web3auth.isLoading,
-    web3auth.error,
-    web3auth.userInfo,
-    web3auth.login,
-    web3auth.logout,
-    traditional.activeAddress,
-    traditional.transactionSigner,
-    traditional.wallets,
-    traditional.activeWallet,
-  ])
-
-  return state
-}
-
-/**
- * Helper hook: Get just the address (most common use case)
- *
- * @example
- * ```typescript
- * const address = useActiveAddress()
- * if (!address) return <ConnectButton />
- * ```
- */
-export function useActiveAddress(): string | null {
-  const { activeAddress } = useUnifiedWallet()
-  return activeAddress
-}
-
-/**
- * Helper hook: Check if any wallet is connected
- *
- * @example
- * ```typescript
- * const isConnected = useIsWalletConnected()
- * ```
- */
-export function useIsWalletConnected(): boolean {
-  const { isConnected } = useUnifiedWallet()
-  return isConnected
-}
-
-/**
- * Helper hook: Get wallet type
- *
- * @example
- * ```typescript
- * const walletType = useWalletType()
- * if (walletType === 'web3auth') {
- *   // Show Google profile info
- * }
- * ```
- */
-export function useWalletType(): WalletType {
-  const { walletType } = useUnifiedWallet()
-  return walletType
+  }, [isConnected, algorandAccount, userInfo, traditional, isLoading])
 }
diff --git a/projects/TokenizeRWATemplate-frontend/src/utils/web3auth/web3authConfig.ts b/projects/TokenizeRWATemplate-frontend/src/utils/web3auth/web3authConfig.ts
index f696887..38dc99b 100644
--- a/projects/TokenizeRWATemplate-frontend/src/utils/web3auth/web3authConfig.ts
+++ b/projects/TokenizeRWATemplate-frontend/src/utils/web3auth/web3authConfig.ts
@@ -45,7 +45,7 @@ export async function initWeb3Auth(): Promise<Web3Auth> {
           primary: '#000000',
         },
         mode: 'light' as const,
-        loginMethodsOrder: ['google', 'github', 'twitter'],
+        loginMethodsOrder: ['google', 'facebook', 'github', 'twitter'],
         defaultLanguage: 'en',
       },
     }
@@ -78,6 +78,7 @@ export interface Web3AuthUserInfo {
   email?: string
   name?: string
   profileImage?: string
+  typeOfLogin?: string
   [key: string]: unknown
 }