fix: mobile UI improvements and web3Enable for WalletConnect signing

- Compact stat cards on mobile (Dashboard, Referral, P2P)
- Hide unnecessary sections on mobile (Recent Activity, NFTs, Score Calculation, Liquidity Pools, Recent Swaps)
- Fix back arrow overlapping title on all pages
- Swap Settings and Governance nav positions for better mobile dropdown
- Add back arrow to Presale page
- Add web3Enable before all web3FromAddress calls for WalletConnect compatibility
- Fix citizenship authentication signing with WalletConnect

shared/lib/citizenship-workflow.ts

@@ -4,7 +4,7 @@
 // Handles citizenship verification, status checks, and workflow logic
 
 import type { ApiPromise } from '@pezkuwi/api';
-import { web3FromAddress as web3FromAddressOriginal } from '@pezkuwi/extension-dapp';
+import { web3Enable, web3FromAddress as web3FromAddressOriginal } from '@pezkuwi/extension-dapp';
 import type { InjectedAccountWithMeta } from '@pezkuwi/extension-inject/types';
 
 import type { Signer } from '@pezkuwi/api/types';
@@ -30,7 +30,8 @@ interface InjectedExtension {
 // Use real extension in browser, throw error in unsupported environments
 const web3FromAddress = async (address: string): Promise<InjectedExtension> => {
   // Check if we're in a browser environment with extension support
-  if (typeof window !== 'undefined' && (window as any).injectedWeb3) {
+  if (typeof window !== 'undefined') {
+    await web3Enable('PezkuwiChain');
     return web3FromAddressOriginal(address) as Promise<InjectedExtension>;
   }
   throw new Error('Pezkuwi Wallet extension not available. Please install the extension.');

web/src/components/AddLiquidityModal.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { X, Plus, Info, AlertCircle } from 'lucide-react';
-import { web3FromAddress } from '@pezkuwi/extension-dapp';
+import { web3Enable, web3FromAddress } from '@pezkuwi/extension-dapp';
 import { usePezkuwi } from '@/contexts/PezkuwiContext';
 import { useWallet } from '@/contexts/WalletContext';
 import { Button } from '@/components/ui/button';
@@ -358,6 +358,7 @@ export const AddLiquidityModal: React.FC<AddLiquidityModalProps> = ({
       }
 
       // Get the signer from the extension
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
 
       // Convert amounts to proper decimals

web/src/components/AppLayout.tsx

@@ -178,35 +178,14 @@ const AppLayout: React.FC = () => {
               <Users className="w-4 h-4 sm:w-5 sm:h-5 text-cyan-400" />
               {t('nav.beCitizen')}
             </button>
-            {/* Governance (dropdown) */}
-            <div className="relative">
-              <button
-                onClick={() => setOpenMenu(openMenu === 'governance' ? null : 'governance')}
-                className="w-full flex flex-col items-center gap-0.5 sm:gap-1 p-1.5 sm:p-2 rounded-xl bg-gray-900/70 border border-green-500/40 text-[10px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white"
-              >
-                <FileEdit className="w-4 h-4 sm:w-5 sm:h-5 text-green-400" />
-                <span className="flex items-center gap-0.5">{t('nav.governance')} <ChevronDown className="w-3 h-3" /></span>
-              </button>
-              {openMenu === 'governance' && (
-                <div className="absolute left-0 top-full mt-1 w-48 bg-gray-900 border border-gray-700 rounded-lg shadow-lg z-50">
-                  <button onClick={() => { setShowProposalWizard(true); setOpenMenu(null); }} className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2 rounded-t-lg">
-                    <FileEdit className="w-4 h-4" /> {t('governance.proposals')}
-                  </button>
-                  <button onClick={() => { setShowDelegation(true); setOpenMenu(null); }} className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2">
-                    <Users2 className="w-4 h-4" /> {t('governance.delegation')}
-                  </button>
-                  <button onClick={() => { setShowForum(true); setOpenMenu(null); }} className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2">
-                    <MessageSquare className="w-4 h-4" /> {t('nav.forum')}
-                  </button>
-                  <button onClick={() => { setShowTreasury(true); setTreasuryTab('overview'); setOpenMenu(null); }} className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2">
-                    <PiggyBank className="w-4 h-4" /> {t('nav.treasury')}
-                  </button>
-                  <button onClick={() => { setShowModeration(true); setOpenMenu(null); }} className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2 rounded-b-lg">
-                    <ShieldCheck className="w-4 h-4" /> {t('nav.moderation')}
-                  </button>
-                </div>
-              )}
-            </div>
+            {/* Settings */}
+            <button
+              onClick={() => { setOpenMenu(null); navigate('/profile/settings'); }}
+              className="flex flex-col items-center gap-0.5 sm:gap-1 p-1.5 sm:p-2 rounded-xl bg-gray-900/70 border border-gray-500/40 text-[10px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white"
+            >
+              <Settings className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400" />
+              {t('nav.settings')}
+            </button>
             {/* Trading (dropdown) */}
             <div className="relative">
               <button
@@ -244,14 +223,35 @@ const AppLayout: React.FC = () => {
               <Award className="w-4 h-4 sm:w-5 sm:h-5 text-yellow-400" />
               {t('nav.education')}
             </button>
-            {/* Settings */}
-            <button
-              onClick={() => { setOpenMenu(null); navigate('/profile/settings'); }}
-              className="flex flex-col items-center gap-0.5 sm:gap-1 p-1.5 sm:p-2 rounded-xl bg-gray-900/70 border border-gray-500/40 text-[10px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white"
-            >
-              <Settings className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400" />
-              {t('nav.settings')}
-            </button>
+            {/* Governance (dropdown) */}
+            <div className="relative">
+              <button
+                onClick={() => setOpenMenu(openMenu === 'governance' ? null : 'governance')}
+                className="w-full flex flex-col items-center gap-0.5 sm:gap-1 p-1.5 sm:p-2 rounded-xl bg-gray-900/70 border border-green-500/40 text-[10px] sm:text-xs font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer text-gray-300 hover:text-white"
+              >
+                <FileEdit className="w-4 h-4 sm:w-5 sm:h-5 text-green-400" />
+                <span className="flex items-center gap-0.5">{t('nav.governance')} <ChevronDown className="w-3 h-3" /></span>
+              </button>
+              {openMenu === 'governance' && (
+                <div className="absolute left-0 top-full mt-1 w-48 bg-gray-900 border border-gray-700 rounded-lg shadow-lg z-50">
+                  <button onClick={() => { setShowProposalWizard(true); setOpenMenu(null); }} className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2 rounded-t-lg">
+                    <FileEdit className="w-4 h-4" /> {t('governance.proposals')}
+                  </button>
+                  <button onClick={() => { setShowDelegation(true); setOpenMenu(null); }} className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2">
+                    <Users2 className="w-4 h-4" /> {t('governance.delegation')}
+                  </button>
+                  <button onClick={() => { setShowForum(true); setOpenMenu(null); }} className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2">
+                    <MessageSquare className="w-4 h-4" /> {t('nav.forum')}
+                  </button>
+                  <button onClick={() => { setShowTreasury(true); setTreasuryTab('overview'); setOpenMenu(null); }} className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2">
+                    <PiggyBank className="w-4 h-4" /> {t('nav.treasury')}
+                  </button>
+                  <button onClick={() => { setShowModeration(true); setOpenMenu(null); }} className="w-full text-left px-4 py-2 text-gray-300 hover:bg-gray-800 hover:text-white flex items-center gap-2 rounded-b-lg">
+                    <ShieldCheck className="w-4 h-4" /> {t('nav.moderation')}
+                  </button>
+                </div>
+              )}
+            </div>
             {/* Logout */}
             <button
               onClick={async () => { setOpenMenu(null); await signOut(); navigate('/login'); }}

web/src/components/LPStakeModal.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { X, Lock, AlertCircle, Loader2, Clock } from 'lucide-react';
-import { web3FromAddress } from '@pezkuwi/extension-dapp';
+import { web3Enable, web3FromAddress } from '@pezkuwi/extension-dapp';
 import { usePezkuwi } from '@/contexts/PezkuwiContext';
 import { Button } from '@/components/ui/button';
 import { Alert, AlertDescription } from '@/components/ui/alert';
@@ -85,6 +85,7 @@ export const LPStakeModal: React.FC<LPStakeModalProps> = ({
 
     try {
       const amountBN = BigInt(Math.floor(amount * 1e12));
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
 
       const tx = assetHubApi.tx.assetRewards.stake(poolId, amountBN.toString());

web/src/components/LPStakingModal.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { X, Lock, Unlock, Gift, AlertCircle, Loader2, Info } from 'lucide-react';
-import { web3FromAddress } from '@pezkuwi/extension-dapp';
+import { web3Enable, web3FromAddress } from '@pezkuwi/extension-dapp';
 import { usePezkuwi } from '@/contexts/PezkuwiContext';
 import { Button } from '@/components/ui/button';
 import { Alert, AlertDescription } from '@/components/ui/alert';
@@ -143,6 +143,7 @@ export const LPStakingModal: React.FC<LPStakingModalProps> = ({ isOpen, onClose
       if (!pool) throw new Error('Pool not found');
 
       const amountBN = BigInt(Math.floor(parseFloat(stakeAmount) * 1e12));
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
 
       const tx = assetHubApi.tx.assetRewards.stake(selectedPool, amountBN.toString());
@@ -189,6 +190,7 @@ export const LPStakingModal: React.FC<LPStakingModalProps> = ({ isOpen, onClose
       if (!pool) throw new Error('Pool not found');
 
       const amountBN = BigInt(Math.floor(parseFloat(unstakeAmount) * 1e12));
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
 
       const tx = assetHubApi.tx.assetRewards.unstake(selectedPool, amountBN.toString());
@@ -231,6 +233,7 @@ export const LPStakingModal: React.FC<LPStakingModalProps> = ({ isOpen, onClose
     setSuccess(null);
 
     try {
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
       const tx = assetHubApi.tx.assetRewards.harvestRewards(selectedPool);
 

web/src/components/RemoveLiquidityModal.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { X, Minus, AlertCircle, Info } from 'lucide-react';
-import { web3FromAddress } from '@pezkuwi/extension-dapp';
+import { web3Enable, web3FromAddress } from '@pezkuwi/extension-dapp';
 import { usePezkuwi } from '@/contexts/PezkuwiContext';
 import { useWallet } from '@/contexts/WalletContext';
 import { Button } from '@/components/ui/button';
@@ -160,6 +160,7 @@ export const RemoveLiquidityModal: React.FC<RemoveLiquidityModalProps> = ({
 
     try {
       // Get the signer from the extension
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
 
       // Get decimals for each asset

web/src/components/TokenSwap.tsx

@@ -584,7 +584,8 @@ const TokenSwap = () => {
       });
 
       // Get signer from extension
-      const { web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      const { web3Enable, web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
 
       // Build transaction based on token types
@@ -1134,7 +1135,7 @@ const TokenSwap = () => {
           </div>
         </Card>
 
-        <Card className="p-6">
+        <Card className="p-6 hidden md:block">
           <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
             <TrendingUp className="h-5 w-5" />
             {t('tokenSwap.liquidityPools')}
@@ -1165,7 +1166,7 @@ const TokenSwap = () => {
         </Card>
       </div>
 
-      <div>
+      <div className="hidden md:block">
         <Card className="p-6">
           <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
             <Clock className="h-5 w-5" />

web/src/components/TransferModal.tsx

@@ -130,7 +130,8 @@ export const TransferModal: React.FC<TransferModalProps> = ({ isOpen, onClose, s
 
     try {
       // Import web3FromAddress to get the injector
-      const { web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      const { web3Enable, web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
 
       // Convert amount to smallest unit

web/src/components/USDTBridge.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { X, ArrowDown, ArrowUp, AlertCircle, Info, Clock, CheckCircle2 } from 'lucide-react';
-import { web3FromAddress } from '@pezkuwi/extension-dapp';
+import { web3Enable, web3FromAddress } from '@pezkuwi/extension-dapp';
 import { usePezkuwi } from '@/contexts/PezkuwiContext';
 import { useWallet } from '@/contexts/WalletContext';
 import { Button } from '@/components/ui/button';
@@ -114,6 +114,7 @@ export const USDTBridge: React.FC<USDTBridgeProps> = ({
     setSuccess(null);
 
     try {
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
 
       // Burn wUSDT

web/src/components/XCMTeleportModal.tsx

@@ -157,7 +157,8 @@ export const XCMTeleportModal: React.FC<XCMTeleportModalProps> = ({ isOpen, onCl
     setTxStatus('signing');
 
     try {
-      const { web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      const { web3Enable, web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
 
       // Convert to smallest unit (12 decimals)

web/src/components/admin/CommissionSetupTab.tsx

@@ -70,7 +70,8 @@ export function CommissionSetupTab() {
 
     setProcessing(true);
     try {
-      const { web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      const { web3Enable, web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
 
       // Parse addresses (one per line, trim whitespace)
@@ -174,7 +175,8 @@ export function CommissionSetupTab() {
 
     setProcessing(true);
     try {
-      const { web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      const { web3Enable, web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
 
       if (import.meta.env.DEV) console.log('Initializing KYC Commission...');

web/src/components/admin/CommissionVotingTab.tsx

@@ -150,7 +150,8 @@ export function CommissionVotingTab() {
 
     setVoting(proposal.hash);
     try {
-      const { web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      const { web3Enable, web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
 
       if (import.meta.env.DEV) console.log(`Voting ${approve ? 'AYE' : 'NAY'} on proposal:`, proposal.hash);
@@ -257,7 +258,8 @@ export function CommissionVotingTab() {
 
     setVoting(proposal.hash);
     try {
-      const { web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      const { web3Enable, web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
 
       if (import.meta.env.DEV) console.log('Executing proposal:', proposal.hash);
@@ -431,7 +433,8 @@ export function CommissionVotingTab() {
       if (!api || !selectedAccount) return;
 
       try {
-        const { web3FromAddress } = await import('@pezkuwi/extension-dapp');
+        const { web3Enable, web3FromAddress } = await import('@pezkuwi/extension-dapp');
+        await web3Enable('PezkuwiChain');
         const injector = await web3FromAddress(selectedAccount.address);
 
         // Get current members

web/src/components/dashboard/CommissionProposalsCard.tsx

@@ -109,7 +109,8 @@ export function CommissionProposalsCard() {
 
     setVoting(proposal.hash);
     try {
-      const { web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      const { web3Enable, web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
 
       const tx = api.tx.dynamicCommissionCollective.vote(
@@ -199,7 +200,8 @@ export function CommissionProposalsCard() {
 
     setVoting(proposal.hash);
     try {
-      const { web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      const { web3Enable, web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
 
       // Get proposal length bound

web/src/components/dex/DEXDashboard.tsx

@@ -50,14 +50,14 @@ export const DEXDashboard: React.FC = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gray-950 text-white">
+    <div className="min-h-screen bg-gray-950 text-white pt-24 md:pt-24">
       {/* Header */}
-      <div className="bg-gradient-to-r from-green-900/30 via-yellow-900/30 to-red-900/30 border-b border-gray-800 py-8">
+      <div className="bg-gradient-to-r from-green-900/30 via-yellow-900/30 to-red-900/30 border-b border-gray-800 py-4 md:py-8">
         <div className="max-w-7xl mx-auto px-4">
-          <h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-green-400 via-yellow-400 to-red-400 bg-clip-text text-transparent">
+          <h1 className="text-2xl md:text-4xl font-bold mb-1 md:mb-2 bg-gradient-to-r from-green-400 via-yellow-400 to-red-400 bg-clip-text text-transparent">
             {t('dex.title')}
           </h1>
-          <p className="text-gray-400 text-lg">
+          <p className="text-gray-400 text-sm md:text-lg">
             {t('dex.description')}
           </p>
 

web/src/components/p2p/P2PDashboard.tsx

@@ -131,8 +131,26 @@ export function P2PDashboard() {
             />
           </div>
 
-          {/* Stats Cards */}
-          <div className="lg:col-span-3 grid grid-cols-1 sm:grid-cols-3 gap-4">
+          {/* Stats Cards - Compact on mobile */}
+          <div className="lg:col-span-3 grid grid-cols-3 gap-2 md:hidden">
+            <div className="bg-gray-900 border border-gray-800 rounded-lg p-3 flex flex-col items-center text-center">
+              <Clock className="w-4 h-4 text-yellow-400 mb-1" />
+              <span className="text-[10px] text-gray-400">{t('p2p.activeTrades')}</span>
+              <span className="text-lg font-bold text-white">{userStats.activeTrades}</span>
+            </div>
+            <div className="bg-gray-900 border border-gray-800 rounded-lg p-3 flex flex-col items-center text-center">
+              <CheckCircle2 className="w-4 h-4 text-green-400 mb-1" />
+              <span className="text-[10px] text-gray-400">{t('p2p.completed')}</span>
+              <span className="text-lg font-bold text-white">{userStats.completedTrades}</span>
+            </div>
+            <div className="bg-gray-900 border border-gray-800 rounded-lg p-3 flex flex-col items-center text-center">
+              <TrendingUp className="w-4 h-4 text-blue-400 mb-1" />
+              <span className="text-[10px] text-gray-400">{t('p2p.volume')}</span>
+              <span className="text-lg font-bold text-white">${userStats.totalVolume.toLocaleString()}</span>
+            </div>
+          </div>
+          {/* Stats Cards - Desktop */}
+          <div className="lg:col-span-3 hidden md:grid grid-cols-3 gap-4">
             <Card className="bg-gray-900 border-gray-800">
               <CardContent className="py-4 flex items-center gap-3">
                 <div className="p-2 bg-yellow-500/20 rounded-lg">

web/src/components/referral/InviteUserModal.tsx

@@ -81,7 +81,8 @@ export const InviteUserModal: React.FC<InviteUserModalProps> = ({ isOpen, onClos
     setInitiateSuccess(false);
 
     try {
-      const { web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      const { web3Enable, web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
 
       if (import.meta.env.DEV) console.log(`Initiating referral from ${selectedAccount.address} to ${inviteeAddress}...`);

web/src/components/referral/ReferralDashboard.tsx

@@ -100,8 +100,27 @@ export const ReferralDashboard: React.FC = () => {
         </Button>
       </div>
 
-      {/* Stats Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+      {/* Mobile Compact Stats */}
+      <div className="grid grid-cols-3 gap-2 md:hidden">
+        <div className="bg-gray-900 border border-gray-800 rounded-lg p-3 flex flex-col items-center text-center">
+          <Users className="w-4 h-4 text-green-500 mb-1" />
+          <span className="text-[10px] text-gray-400">{t('referral.totalReferrals')}</span>
+          <span className="text-lg font-bold text-green-500">{stats?.referralCount ?? 0}</span>
+        </div>
+        <div className="bg-gray-900 border border-gray-800 rounded-lg p-3 flex flex-col items-center text-center">
+          <Trophy className="w-4 h-4 text-yellow-500 mb-1" />
+          <span className="text-[10px] text-gray-400">{t('referral.referralScore')}</span>
+          <span className="text-lg font-bold text-yellow-500">{stats?.referralScore ?? 0}</span>
+        </div>
+        <div className="bg-gray-900 border border-gray-800 rounded-lg p-3 flex flex-col items-center text-center">
+          <Clock className="w-4 h-4 text-yellow-500 mb-1" />
+          <span className="text-[10px] text-gray-400">{t('referral.pendingApprovals')}</span>
+          <span className="text-lg font-bold text-yellow-500">{loadingApprovals ? '...' : pendingApprovals.length}</span>
+        </div>
+      </div>
+
+      {/* Desktop Stats Grid */}
+      <div className="hidden md:grid md:grid-cols-3 gap-6">
         {/* Referral Count */}
         <Card className="bg-gray-900 border-gray-800">
           <CardHeader className="pb-3">
@@ -165,8 +184,8 @@ export const ReferralDashboard: React.FC = () => {
         </Card>
       </div>
 
-      {/* Score Breakdown */}
-      <Card className="bg-gray-900 border-gray-800">
+      {/* Score Breakdown - Desktop only */}
+      <Card className="bg-gray-900 border-gray-800 hidden md:block">
         <CardHeader>
           <CardTitle className="text-white">{t('referral.scoreCalc')}</CardTitle>
           <CardDescription className="text-gray-400">

web/src/contexts/WalletContext.tsx

@@ -9,7 +9,7 @@ import { usePezkuwi } from './PezkuwiContext';
 import { WALLET_ERRORS, formatBalance, ASSET_IDS } from '@pezkuwi/lib/wallet';
 import type { InjectedAccountWithMeta } from '@pezkuwi/extension-inject/types';
 import type { Signer } from '@pezkuwi/api/types';
-import { web3FromAddress } from '@pezkuwi/extension-dapp';
+import { web3Enable, web3FromAddress } from '@pezkuwi/extension-dapp';
 import { isMobileApp, signTransactionNative, type TransactionPayload } from '@/lib/mobile-bridge';
 import { createWCSigner, isWCConnected, validateSession } from '@/lib/walletconnect-service';
 
@@ -275,8 +275,9 @@ export const WalletProvider: React.FC<{ children: React.ReactNode }> = ({ childr
       }
 
       // Desktop / pezWallet DApps browser: Use extension signer
-      const { web3FromAddress } = await import('@pezkuwi/extension-dapp');
-      const injector = await web3FromAddress(pezkuwi.selectedAccount.address);
+      const { web3Enable: enable, web3FromAddress: fromAddress } = await import('@pezkuwi/extension-dapp');
+      await enable('PezkuwiChain');
+      const injector = await fromAddress(pezkuwi.selectedAccount.address);
 
       const hash = await (tx as { signAndSend: (address: string, options: { signer: unknown }) => Promise<{ toHex: () => string }> }).signAndSend(
         pezkuwi.selectedAccount.address,
@@ -317,8 +318,9 @@ export const WalletProvider: React.FC<{ children: React.ReactNode }> = ({ childr
       }
 
       // Extension signing
-      const { web3FromAddress } = await import('@pezkuwi/extension-dapp');
-      const injector = await web3FromAddress(pezkuwi.selectedAccount.address);
+      const { web3Enable: enable, web3FromAddress: fromAddress } = await import('@pezkuwi/extension-dapp');
+      await enable('PezkuwiChain');
+      const injector = await fromAddress(pezkuwi.selectedAccount.address);
 
       if (!injector.signer.signRaw) {
         throw new Error('Wallet does not support message signing');
@@ -352,6 +354,7 @@ export const WalletProvider: React.FC<{ children: React.ReactNode }> = ({ childr
           setSigner(wcSigner as unknown as Signer);
           if (import.meta.env.DEV) console.log('✅ WC Signer obtained for', pezkuwi.selectedAccount.address);
         } else if (pezkuwi.walletSource !== 'walletconnect') {
+          await web3Enable('PezkuwiChain');
           const injector = await web3FromAddress(pezkuwi.selectedAccount.address);
           setSigner(injector.signer);
           if (import.meta.env.DEV) console.log('✅ Extension Signer obtained for', pezkuwi.selectedAccount.address);

web/src/pages/Dashboard.tsx

@@ -12,7 +12,7 @@ import { User, Mail, Phone, Globe, MapPin, Calendar, Shield, AlertCircle, ArrowL
 import { useToast } from '@/hooks/use-toast';
 import { fetchUserTikis, getPrimaryRole, getTikiDisplayName, getTikiColor, getTikiEmoji, getUserRoleCategories, getAllTikiNFTDetails, generateCitizenNumber, type TikiNFTDetails } from '@pezkuwi/lib/tiki';
 import { getAllScores, getStakingScoreStatus, startScoreTracking, getPezRewards, recordTrustScore, claimPezReward, type UserScores, type StakingScoreStatus, type PezRewardInfo, formatDuration } from '@pezkuwi/lib/scores';
-import { web3FromAddress } from '@pezkuwi/extension-dapp';
+import { web3Enable, web3FromAddress } from '@pezkuwi/extension-dapp';
 import { getKycStatus } from '@pezkuwi/lib/kyc';
 import { ReferralDashboard } from '@/components/referral/ReferralDashboard';
 // Commission proposals card removed - no longer using notary system for KYC approval
@@ -157,6 +157,7 @@ export default function Dashboard() {
 
     setStartingScoreTracking(true);
     try {
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
       // startScoreTracking on People Chain - staking data comes from Asset Hub via XCM
       const result = await startScoreTracking(peopleApi, selectedAccount.address, injector.signer);
@@ -192,6 +193,7 @@ export default function Dashboard() {
 
     setIsRecordingScore(true);
     try {
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
       const result = await recordTrustScore(peopleApi, selectedAccount.address, injector.signer);
 
@@ -213,6 +215,7 @@ export default function Dashboard() {
 
     setIsClaimingReward(true);
     try {
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
       const result = await claimPezReward(peopleApi, selectedAccount.address, epochIndex, injector.signer);
 
@@ -329,7 +332,8 @@ export default function Dashboard() {
 
     setRenouncingCitizenship(true);
     try {
-      const { web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      const { web3Enable, web3FromAddress } = await import('@pezkuwi/extension-dapp');
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
 
       if (import.meta.env.DEV) console.log('Renouncing citizenship...');
@@ -411,16 +415,19 @@ export default function Dashboard() {
   }
 
   return (
-    <div className="container mx-auto p-6 max-w-6xl relative">
-      <button
-        onClick={() => navigate('/')}
-        className="absolute top-4 left-4 text-gray-400 hover:text-white transition-colors"
-      >
-        <ArrowLeft className="w-5 h-5" />
-      </button>
-      <h1 className="text-3xl font-bold mb-6">{t('dashboard.title')}</h1>
+    <div className="container mx-auto p-4 sm:p-6 max-w-6xl">
+      <div className="flex items-center gap-3 mb-4 sm:mb-6">
+        <button
+          onClick={() => navigate('/')}
+          className="text-gray-400 hover:text-white transition-colors shrink-0"
+        >
+          <ArrowLeft className="w-5 h-5" />
+        </button>
+        <h1 className="text-2xl sm:text-3xl font-bold">{t('dashboard.title')}</h1>
+      </div>
       
-      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-6">
+      {/* Account Status, Member Since, Role, Total Score - desktop only */}
+      <div className="hidden md:grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-6">
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">{t('dashboard.accountStatus')}</CardTitle>
@@ -488,7 +495,59 @@ export default function Dashboard() {
         </Card>
       </div>
 
-      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-6">
+      {/* Scores - compact 2x2 grid on mobile, full cards on desktop */}
+      <div className="grid grid-cols-2 gap-2 md:hidden mb-4">
+        <div className="flex items-center gap-2 rounded-lg border p-2.5">
+          <Shield className="h-4 w-4 text-purple-500 shrink-0" />
+          <div className="min-w-0">
+            <p className="text-xs text-muted-foreground truncate">{t('dashboard.trustScore')}</p>
+            <p className="text-lg font-bold text-purple-600 leading-tight">{loadingScores ? '...' : scores.trustScore}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 rounded-lg border p-2.5">
+          <Users className="h-4 w-4 text-cyan-500 shrink-0" />
+          <div className="min-w-0">
+            <p className="text-xs text-muted-foreground truncate">{t('dashboard.referralScore')}</p>
+            <p className="text-lg font-bold text-cyan-600 leading-tight">{loadingScores ? '...' : scores.referralScore}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 rounded-lg border p-2.5">
+          <TrendingUp className="h-4 w-4 text-green-500 shrink-0" />
+          <div className="min-w-0">
+            <p className="text-xs text-muted-foreground truncate">{t('dashboard.stakingScore')}</p>
+            <p className="text-lg font-bold text-green-600 leading-tight">{loadingScores ? '...' : scores.stakingScore}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 rounded-lg border p-2.5">
+          <Award className="h-4 w-4 text-pink-500 shrink-0" />
+          <div className="min-w-0">
+            <p className="text-xs text-muted-foreground truncate">{t('dashboard.tikiScore')}</p>
+            <p className="text-lg font-bold text-pink-600 leading-tight">{loadingScores ? '...' : scores.tikiScore}</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Staking Start Tracking - mobile only, separate card */}
+      {!stakingStatus?.isTracking && selectedAccount && (
+        <div className="md:hidden mb-4">
+          <Button
+            size="sm"
+            variant="outline"
+            className="w-full"
+            onClick={handleStartScoreTracking}
+            disabled={startingScoreTracking || loadingScores}
+          >
+            {startingScoreTracking ? (
+              <><Loader2 className="h-3 w-3 mr-1 animate-spin" />{t('dashboard.starting')}</>
+            ) : (
+              <><Play className="h-3 w-3 mr-1" />{t('dashboard.startTracking')}</>
+            )}
+          </Button>
+        </div>
+      )}
+
+      {/* Scores - full cards on desktop */}
+      <div className="hidden md:grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-6">
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">{t('dashboard.trustScore')}</CardTitle>
@@ -664,7 +723,7 @@ export default function Dashboard() {
           <TabsTrigger value="roles" className="text-xs sm:text-sm px-2 sm:px-3">{t('dashboard.rolesTab')}</TabsTrigger>
           <TabsTrigger value="referrals" className="text-xs sm:text-sm px-2 sm:px-3">{t('dashboard.referralsTab')}</TabsTrigger>
           <TabsTrigger value="security" className="text-xs sm:text-sm px-2 sm:px-3">{t('dashboard.securityTab')}</TabsTrigger>
-          <TabsTrigger value="activity" className="text-xs sm:text-sm px-2 sm:px-3">{t('dashboard.activityTab')}</TabsTrigger>
+          <TabsTrigger value="activity" className="hidden md:inline-flex text-xs sm:text-sm px-2 sm:px-3">{t('dashboard.activityTab')}</TabsTrigger>
         </TabsList>
 
         <TabsContent value="profile" className="space-y-4">

web/src/pages/Presale.tsx

@@ -7,11 +7,13 @@ import { Input } from '@/components/ui/input';
 import { Card } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
 import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Loader2, AlertCircle, CheckCircle2, Timer, TrendingUp, Users } from 'lucide-react';
+import { Loader2, AlertCircle, CheckCircle2, Timer, TrendingUp, Users, ArrowLeft } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
 export default function Presale() {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const { api, selectedAccount, isApiReady } = usePezkuwi();
   const { balances } = useWallet();
 
@@ -163,6 +165,17 @@ export default function Presale() {
   if (!active) {
     return (
       <div className="container mx-auto py-12 px-4">
+        <div className="max-w-2xl mx-auto">
+          <div className="flex items-center gap-3 mb-4">
+            <button
+              onClick={() => navigate('/')}
+              className="text-gray-400 hover:text-white transition-colors"
+            >
+              <ArrowLeft className="w-5 h-5" />
+            </button>
+            <span className="text-gray-400 text-sm">Back</span>
+          </div>
+        </div>
         <Card className="p-8 text-center max-w-2xl mx-auto">
           <div className="mb-6">
             <div className="w-20 h-20 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
@@ -199,13 +212,21 @@ export default function Presale() {
   return (
     <div className="container mx-auto py-12 px-4">
       <div className="max-w-6xl mx-auto">
-        <div className="text-center mb-8">
-          <h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-green-500 via-yellow-400 to-red-500 bg-clip-text text-transparent">
-            PEZ Token Pre-Sale
-          </h1>
-          <p className="text-muted-foreground">
-            Contribute wUSDT and receive PEZ tokens at a special rate
-          </p>
+        <div className="flex items-center gap-3 mb-4 sm:mb-6">
+          <button
+            onClick={() => navigate('/')}
+            className="text-gray-400 hover:text-white transition-colors"
+          >
+            <ArrowLeft className="w-5 h-5" />
+          </button>
+          <div>
+            <h1 className="text-2xl md:text-4xl font-bold mb-1 bg-gradient-to-r from-green-500 via-yellow-400 to-red-500 bg-clip-text text-transparent">
+              PEZ Token Pre-Sale
+            </h1>
+            <p className="text-muted-foreground text-sm md:text-base">
+              Contribute wUSDT and receive PEZ tokens at a special rate
+            </p>
+          </div>
         </div>
 
         {paused && (

web/src/pages/ProfileSettings.tsx

@@ -212,14 +212,16 @@ export default function ProfileSettings() {
   };
 
   return (
-    <div className="container mx-auto py-8 max-w-4xl relative">
-      <button
-        onClick={() => navigate('/')}
-        className="absolute top-4 left-4 text-gray-400 hover:text-white transition-colors"
-      >
-        <ArrowLeft className="w-5 h-5" />
-      </button>
-      <h1 className="text-3xl font-bold mb-8">{t('profileSettings.title')}</h1>
+    <div className="container mx-auto py-8 max-w-4xl">
+      <div className="flex items-center gap-3 mb-4 sm:mb-6">
+        <button
+          onClick={() => navigate('/')}
+          className="text-gray-400 hover:text-white transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5" />
+        </button>
+        <h1 className="text-3xl font-bold">{t('profileSettings.title')}</h1>
+      </div>
 
       <Tabs defaultValue="profile" className="space-y-4">
         <TabsList className="grid w-full grid-cols-4">

web/src/pages/WalletDashboard.tsx

@@ -10,7 +10,7 @@ import { NftList } from '@/components/NftList';
 import { Button } from '@/components/ui/button';
 import { ArrowUpRight, ArrowDownRight, History, ArrowLeft, RefreshCw, Coins, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
-import { web3FromAddress } from '@pezkuwi/extension-dapp';
+import { web3Enable, web3FromAddress } from '@pezkuwi/extension-dapp';
 import { getPezRewards, recordTrustScore, claimPezReward, type PezRewardInfo } from '@pezkuwi/lib/scores';
 
 interface Transaction {
@@ -239,6 +239,7 @@ const WalletDashboard: React.FC = () => {
     if (!peopleApi || !selectedAccount) return;
     setIsRecordingScore(true);
     try {
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
       const result = await recordTrustScore(peopleApi, selectedAccount.address, injector.signer);
       if (result.success) {
@@ -259,6 +260,7 @@ const WalletDashboard: React.FC = () => {
     if (!peopleApi || !selectedAccount) return;
     setIsClaimingReward(true);
     try {
+      await web3Enable('PezkuwiChain');
       const injector = await web3FromAddress(selectedAccount.address);
       const result = await claimPezReward(peopleApi, selectedAccount.address, epochIndex, injector.signer);
       if (result.success) {
@@ -299,20 +301,22 @@ const WalletDashboard: React.FC = () => {
   return (
     <div className="min-h-screen bg-gray-950 pt-24 pb-12">
       <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative">
-        <button
-          onClick={() => navigate('/')}
-          className="absolute top-4 left-4 text-gray-400 hover:text-white transition-colors"
-        >
-          <ArrowLeft className="w-5 h-5" />
-        </button>
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-white mb-2">{t('wallet.dashboard')}</h1>
-          <p className="text-gray-400">{t('wallet.manageTokens')}</p>
+        <div className="flex items-center gap-3 mb-4 sm:mb-6">
+          <button
+            onClick={() => navigate('/')}
+            className="text-gray-400 hover:text-white transition-colors"
+          >
+            <ArrowLeft className="w-5 h-5" />
+          </button>
+          <div>
+            <h1 className="text-3xl font-bold text-white mb-1">{t('wallet.dashboard')}</h1>
+            <p className="text-gray-400">{t('wallet.manageTokens')}</p>
+          </div>
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Left Column - Recent Activity & NFTs */}
-          <div className="lg:col-span-1 space-y-6">
+          {/* Left Column - Recent Activity & NFTs (hidden on mobile) */}
+          <div className="hidden md:block lg:col-span-1 space-y-6">
             {/* Recent Activity */}
             <div className="bg-gray-900 border border-gray-800 rounded-lg p-6">
               <div className="flex items-center justify-between mb-4">