emdevelopa · emdevelopa · Apr 23, 2026 · Apr 23, 2026 · Apr 23, 2026 · Apr 23, 2026
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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}
-Original file line number
+Diff line change
@@ Expand Up / @@ -555,7 +555,7 @@ export default function RecentPayments({ @@
                       </button>
                     </td>
                   </tr>
-                )))}
+                ))}
               </tbody>
             </table>
           </div>
@@ Expand Down @@