diff --git a/frontend/src/app/(authenticated)/dashboard/page.tsx b/frontend/src/app/(authenticated)/dashboard/page.tsx
index ba29dcb4..0c040057 100644
--- a/frontend/src/app/(authenticated)/dashboard/page.tsx
+++ b/frontend/src/app/(authenticated)/dashboard/page.tsx
@@ -16,6 +16,7 @@ import FirstApiKeyModal from "@/components/FirstApiKeyModal";
 import PaymentMetrics from "@/components/PaymentMetrics";
 import RecentPayments from "@/components/RecentPayments";
 import WithdrawModal from "@/components/WithdrawModal";
+import FirstPaymentCelebration from "@/components/FirstPaymentCelebration";
 
 export default function DashboardPage() {
   const t = useTranslations("dashboardPage");
diff --git a/frontend/src/app/(authenticated)/payment-history/page.tsx b/frontend/src/app/(authenticated)/payment-history/page.tsx
index 2dd8abaa..c5ef716c 100644
--- a/frontend/src/app/(authenticated)/payment-history/page.tsx
+++ b/frontend/src/app/(authenticated)/payment-history/page.tsx
@@ -857,8 +857,72 @@ export default function PaymentHistoryPage() {
         </p>
       </div>
 
-      {/* Payment Table */}
-      <div className="overflow-x-auto rounded-xl border border-[#E8E8E8]">
+      {/* Payment List (Mobile Card View) */}
+      <div className="flex flex-col gap-4 sm:hidden">
+        {payments.map((payment) => (
+          <div
+            key={payment.id}
+            onClick={() => handlePaymentClick(payment.id)}
+            className={`cursor-pointer rounded-2xl border border-[#E8E8E8] bg-white p-5 transition-all active:scale-[0.98] shadow-sm ${
+              flashedIds.has(payment.id)
+                ? "animate-payment-confirmed bg-green-500/10 border-green-500/30"
+                : ""
+            }`}
+          >
+            <div className="flex items-center justify-between mb-4">
+              <span
+                className={`inline-flex rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider ${
+                  payment.status === "confirmed"
+                    ? "bg-green-500/20 text-green-400"
+                    : payment.status === "failed"
+                    ? "bg-red-500/20 text-red-400"
+                    : payment.status === "refunded"
+                    ? "bg-blue-500/20 text-blue-400"
+                    : "bg-yellow-500/20 text-yellow-400"
+                }`}
+              >
+                {toStatusLabel(t, payment.status)}
+              </span>
+              <p className="text-[10px] font-bold text-[#6B6B6B] uppercase tracking-widest">
+                {new Date(payment.created_at).toLocaleDateString(locale, {
+                  month: "short",
+                  day: "numeric",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                })}
+              </p>
+            </div>
+            <div className="flex items-end justify-between">
+              <div className="min-w-0">
+                <p className="text-xl font-bold text-[#0A0A0A] tracking-tight truncate">
+                  {payment.amount} {payment.asset}
+                </p>
+                <p className="mt-1 text-xs font-medium text-[#6B6B6B] truncate">
+                  {payment.description || "No description"}
+                </p>
+              </div>
+              <div className="shrink-0 text-[var(--pluto-500)]">
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Payment Table (Desktop View) */}
+      <div className="hidden sm:block overflow-x-auto rounded-xl border border-[#E8E8E8]">
         <table className="w-full text-left text-sm">
           <thead>
             <tr className="border-b border-[#E8E8E8] bg-[#F9F9F9]">
diff --git a/frontend/src/app/(public)/register/page.tsx b/frontend/src/app/(public)/register/page.tsx
index de586f85..503e46a4 100644
--- a/frontend/src/app/(public)/register/page.tsx
+++ b/frontend/src/app/(public)/register/page.tsx
@@ -7,7 +7,7 @@ export default function RegisterPage() {
     <GuestGuard>
     <main className="mx-auto flex min-h-screen max-w-lg flex-col justify-center gap-10 px-6 py-14 md:py-20 bg-white">
       <header className="flex flex-col gap-6 text-center">
-        <p className="font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B]">Onboarding</p>
+        <p className="font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B] animate-pulse">Onboarding</p>
         <h1 className="text-4xl md:text-5xl font-bold text-[#0A0A0A] tracking-tight font-serif uppercase">Join PLUTO</h1>
         <p className="text-sm font-medium text-[#6B6B6B] leading-relaxed">
           Create your merchant profile to start accepting modern payments and managing assets on the PLUTO infrastructure.
diff --git a/frontend/src/components/RecentPayments.tsx b/frontend/src/components/RecentPayments.tsx
index 97424be1..95e6de25 100644
--- a/frontend/src/components/RecentPayments.tsx
+++ b/frontend/src/components/RecentPayments.tsx
@@ -555,7 +555,7 @@ export default function RecentPayments({
                   </button>
                 </td>
               </tr>
-            )))}
+            ))}
           </tbody>
         </table>
       </div>
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 4b51a80d..3137e7b2 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -84,6 +84,7 @@ const NavLinks = memo(function NavLinks({
 
   return (
     <nav aria-label="Dashboard navigation" className="flex flex-1 flex-col gap-1 px-4 py-6">
+      <ul className="flex flex-col gap-1">
       {navItems.map((item) => {
         const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
         const isHighlight = "highlight" in item && item.highlight;
@@ -101,24 +102,27 @@ const NavLinks = memo(function NavLinks({
         }
 
         return (
-          <Link
-            key={item.href}
-            href={item.href}
-            prefetch={true}
-            onClick={onNavigate}
-            className={`flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--pluto-300)] ${
-              isActive
-                ? "bg-[var(--pluto-500)] text-white"
-                : isHighlight
-                ? "border border-[var(--pluto-200)] bg-[var(--pluto-50)] text-[var(--pluto-700)] hover:border-[var(--pluto-500)] hover:bg-[var(--pluto-500)] hover:text-white"
-                : "text-pluto-600 hover:bg-[var(--pluto-100)] hover:text-[var(--pluto-800)]"
-            }`}
-          >
-            <span className="shrink-0">{item.icon}</span>
-            <span className="text-xs font-semibold tracking-wide">{item.label}</span>
-          </Link>
+          <li key={item.href}>
+            <Link
+              href={item.href}
+              prefetch={true}
+              onClick={onNavigate}
+              aria-current={isActive ? "page" : undefined}
+              className={`flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--pluto-300)] ${
+                isActive
+                  ? "bg-[var(--pluto-500)] text-white"
+                  : isHighlight
+                  ? "border border-[var(--pluto-200)] bg-[var(--pluto-50)] text-[var(--pluto-700)] hover:border-[var(--pluto-500)] hover:bg-[var(--pluto-500)] hover:text-white"
+                  : "text-pluto-600 hover:bg-[var(--pluto-100)] hover:text-[var(--pluto-800)]"
+              }`}
+            >
+              <span className="shrink-0">{item.icon}</span>
+              <span className="text-xs font-semibold tracking-wide">{item.label}</span>
+            </Link>
+          </li>
         );
       })}
+      </ul>
 
       <div className="mt-auto pt-4 border-t border-pluto-200">
         <Link href="/" onClick={onNavigate}
diff --git a/frontend/src/components/WalletSelector.tsx b/frontend/src/components/WalletSelector.tsx
index 6b13decf..8b491bac 100644
--- a/frontend/src/components/WalletSelector.tsx
+++ b/frontend/src/components/WalletSelector.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslations } from "next-intl";
 import { useWallet } from "@/lib/wallet-context";
 import { connectWalletConnect } from "@/lib/wallet-walletconnect";
@@ -41,6 +41,51 @@ const SUBTITLES: Record<string, string> = {
   walletconnect: "Mobile & desktop wallets",
 };
 
+function getFriendlyErrorMessage(id: string, err: unknown, t: (key: string) => string) {
+  const message = err instanceof Error ? err.message : String(err ?? "");
+  const normalized = message.toLowerCase();
+
+  if (
+    normalized.includes("4001") ||
+    normalized.includes("reject") ||
+    normalized.includes("declin") ||
+    normalized.includes("denied") ||
+    normalized.includes("canceled") ||
+    normalized.includes("cancelled")
+  ) {
+    return t("userRejected");
+  }
+
+  if (
+    normalized.includes("project_id") ||
+    normalized.includes("project id") ||
+    normalized.includes("walletconnect is disabled") ||
+    normalized.includes("pairing uri")
+  ) {
+    return t("walletConnectUnavailable");
+  }
+
+  if (
+    normalized.includes("not installed") ||
+    normalized.includes("not found") ||
+    normalized.includes("extension")
+  ) {
+    return t("extensionNotFound");
+  }
+
+  if (
+    normalized.includes("no stellar accounts") ||
+    normalized.includes("public key") ||
+    normalized.includes("session not established")
+  ) {
+    return t("noAccountFound");
+  }
+
+  return id === "walletconnect"
+    ? t("walletConnectFailed")
+    : t("connectionFailed");
+}
+
 export default function WalletSelector({ networkPassphrase, onConnected }: WalletSelectorProps) {
   const t = useTranslations("walletSelector");
   const { providers, activeProvider, selectProvider } = useWallet();
@@ -65,54 +110,7 @@ export default function WalletSelector({ networkPassphrase, onConnected }: Walle
     return () => { cancelled = true; };
   }, [providers]);
 
-  if (activeProvider) return null;
-
-  function getFriendlyErrorMessage(id: string, err: unknown) {
-    const message = err instanceof Error ? err.message : String(err ?? "");
-    const normalized = message.toLowerCase();
-
-    if (
-      normalized.includes("4001") ||
-      normalized.includes("reject") ||
-      normalized.includes("declin") ||
-      normalized.includes("denied") ||
-      normalized.includes("canceled") ||
-      normalized.includes("cancelled")
-    ) {
-      return t("userRejected");
-    }
-
-    if (
-      normalized.includes("project_id") ||
-      normalized.includes("project id") ||
-      normalized.includes("walletconnect is disabled") ||
-      normalized.includes("pairing uri")
-    ) {
-      return t("walletConnectUnavailable");
-    }
-
-    if (
-      normalized.includes("not installed") ||
-      normalized.includes("not found") ||
-      normalized.includes("extension")
-    ) {
-      return t("extensionNotFound");
-    }
-
-    if (
-      normalized.includes("no stellar accounts") ||
-      normalized.includes("public key") ||
-      normalized.includes("session not established")
-    ) {
-      return t("noAccountFound");
-    }
-
-    return id === "walletconnect"
-      ? t("walletConnectFailed")
-      : t("connectionFailed");
-  }
-
-  async function handleSelect(id: string) {
+  const handleSelect = useCallback(async (id: string) => {
     setConnectError(null);
     setWcError(null);
     setWcUri(null);
@@ -120,7 +118,6 @@ export default function WalletSelector({ networkPassphrase, onConnected }: Walle
 
     try {
       if (id === "walletconnect") {
-        setWcError(null);
         const { uri, approval } = await connectWalletConnect(networkPassphrase);
         setWcUri(uri);
         await approval;
@@ -144,7 +141,7 @@ export default function WalletSelector({ networkPassphrase, onConnected }: Walle
       selectProvider(id);
       onConnected();
     } catch (err) {
-      const msg = getFriendlyErrorMessage(id, err);
+      const msg = getFriendlyErrorMessage(id, err, t);
       if (id === "walletconnect") {
         setWcError(msg);
         setWcUri(null);
@@ -154,7 +151,64 @@ export default function WalletSelector({ networkPassphrase, onConnected }: Walle
     } finally {
       setConnecting(null);
     }
-  }
+  }, [networkPassphrase, onConnected, selectProvider, providers, t]);
+
+  const providerButtons = useMemo(() => {
+    return providers.map((p) => {
+      const isWc = p.id === "walletconnect";
+      const isConnecting = connecting === p.id;
+      const isInstalled = installed[p.id] ?? false;
+      const isDisabled = !isInstalled;
+
+      return (
+        <button
+          key={p.id}
+          type="button"
+          disabled={isDisabled || connecting !== null}
+          onClick={() => handleSelect(p.id)}
+          aria-busy={isConnecting}
+          className="group relative flex h-16 w-full items-center gap-4 rounded-2xl border border-[#E8E8E8] bg-white px-5 text-left shadow-sm transition-[border-color,box-shadow,transform] duration-200 hover:-translate-y-px hover:border-[var(--pluto-400)] hover:shadow-[0_6px_22px_rgba(74,111,165,0.12)] active:translate-y-0 active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--pluto-300)] disabled:cursor-not-allowed disabled:opacity-40"
+        >
+          {/* Icon */}
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-[#E8E8E8] bg-[#F9F9F9] transition-colors duration-200 group-hover:border-[var(--pluto-200)] group-hover:bg-[var(--pluto-50)]">
+            {ICONS[p.id] ?? (
+              <svg className="h-5 w-5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+              </svg>
+            )}
+          </div>
+
+          {/* Label */}
+          <div className="flex flex-1 flex-col gap-0.5">
+            {isConnecting ? (
+              <span className="flex items-center gap-2 text-sm font-bold text-white">
+                <Spinner size="sm" />
+                {isWc ? t("walletConnectWaiting") : "Connecting…"}
+              </span>
+            ) : (
+              <>
+                <span className="text-sm font-bold text-white transition-colors group-hover:text-mint">{p.name}</span>
+                <span className="text-[10px] font-medium text-slate-500">
+                  {isDisabled
+                    ? (isWc ? t("noProjectId") : t("notInstalled"))
+                    : SUBTITLES[p.id] ?? t("tapToConnect")}
+                </span>
+              </>
+            )}
+          </div>
+
+          {/* Arrow */}
+          {!isConnecting && !isDisabled && (
+            <svg className="h-4 w-4 shrink-0 text-[#C0C0C0] transition-colors duration-200 group-hover:text-[var(--pluto-500)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          )}
+        </button>
+      );
+    });
+  }, [providers, connecting, installed, handleSelect, t]);
+
+  if (activeProvider) return null;
 
   return (
     <div className="flex flex-col gap-4">
@@ -164,59 +218,7 @@ export default function WalletSelector({ networkPassphrase, onConnected }: Walle
       </div>
 
       <div className="flex flex-col gap-3">
-        {providers.map((p) => {
-          const isWc = p.id === "walletconnect";
-          const isConnecting = connecting === p.id;
-          const isInstalled = installed[p.id] ?? false;
-          const isDisabled = !isInstalled;
-
-          return (
-            <button
-              key={p.id}
-              type="button"
-              disabled={isDisabled || connecting !== null}
-              onClick={() => handleSelect(p.id)}
-              aria-busy={isConnecting}
-              className="group relative flex h-16 w-full items-center gap-4 rounded-2xl border border-[#E8E8E8] bg-white px-5 text-left shadow-sm transition-[border-color,box-shadow,transform] duration-200 hover:-translate-y-px hover:border-[var(--pluto-400)] hover:shadow-[0_6px_22px_rgba(74,111,165,0.12)] active:translate-y-0 active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--pluto-300)] disabled:cursor-not-allowed disabled:opacity-40"
-              className="group relative flex h-16 w-full items-center gap-4 rounded-2xl border border-[#E8E8E8] bg-white px-5 text-left shadow-sm transition-[border-color,box-shadow,transform] duration-200 hover:-translate-y-px hover:border-[var(--pluto-400)] hover:shadow-[0_6px_22px_rgba(74,111,165,0.12)] active:translate-y-0 active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--pluto-300)] disabled:cursor-not-allowed disabled:opacity-40"
-            >
-              {/* Icon */}
-              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-[#E8E8E8] bg-[#F9F9F9] transition-colors duration-200 group-hover:border-[var(--pluto-200)] group-hover:bg-[var(--pluto-50)]">
-                {ICONS[p.id] ?? (
-                  <svg className="h-5 w-5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
-                  </svg>
-                )}
-              </div>
-
-              {/* Label */}
-              <div className="flex flex-1 flex-col gap-0.5">
-                {isConnecting ? (
-                  <span className="flex items-center gap-2 text-sm font-bold text-white">
-                    <Spinner size="sm" />
-                    {isWc ? t("walletConnectWaiting") : "Connecting…"}
-                  </span>
-                ) : (
-                  <>
-                    <span className="text-sm font-bold text-white transition-colors group-hover:text-mint">{p.name}</span>
-                    <span className="text-[10px] font-medium text-slate-500">
-                      {isDisabled
-                        ? (isWc ? t("noProjectId") : t("notInstalled"))
-                        : SUBTITLES[p.id] ?? t("tapToConnect")}
-                    </span>
-                  </>
-                )}
-              </div>
-
-              {/* Arrow */}
-              {!isConnecting && !isDisabled && (
-                <svg className="h-4 w-4 shrink-0 text-[#C0C0C0] transition-colors duration-200 group-hover:text-[var(--pluto-500)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                </svg>
-              )}
-            </button>
-          );
-        })}
+        {providerButtons}
       </div>
 
       {/* WalletConnect QR */}