From 8b829d0012342016781f0474a49ea1d48677aefe Mon Sep 17 00:00:00 2001
From: Nursca Ajah <margretnursca@gmail.com>
Date: Thu, 23 Apr 2026 21:12:47 +0100
Subject: [PATCH] refactor: update styles and improve accessibility across
 components

- Changed toast notification library from react-hot-toast to sonner in CheckoutQrModal.
- Updated text colors and hover effects in various components for better visibility and consistency.
- Enhanced accessibility by adding aria attributes and roles in forms and buttons.
- Adjusted password strength indicator to provide clearer feedback on strength levels.
- Improved layout and spacing in forms and tooltips for better user experience.
- Refined component structure and styles in WalletSelector, MerchantProfileCard, and RegistrationForm.
- Updated package-lock.json to reflect project name change to "pluto".
---
 .../src/app/(public)/forgot-password/page.tsx |  10 +-
 frontend/src/app/(public)/login/page.tsx      |  14 +--
 frontend/src/app/(public)/page.tsx            |  46 ++++----
 frontend/src/app/(public)/register/page.tsx   |   4 +-
 frontend/src/components/ApiHealthBadge.tsx    |  21 +++-
 frontend/src/components/ApiUsageChart.tsx     |  19 +++-
 frontend/src/components/CheckoutQrModal.tsx   |   8 +-
 frontend/src/components/CopyButton.tsx        |  14 ++-
 frontend/src/components/InfoTooltip.tsx       |  27 +++--
 frontend/src/components/MaskedValue.tsx       |  10 +-
 .../src/components/MerchantProfileCard.tsx    |  30 +++--
 frontend/src/components/Navbar.tsx            |   2 +-
 .../src/components/PaymentDetailModal.tsx     |  18 +--
 frontend/src/components/PaymentMetrics.tsx    |  21 ++--
 frontend/src/components/RegistrationForm.tsx  | 105 +++++++++++-------
 frontend/src/components/WalletSelector.tsx    |  18 +--
 frontend/src/components/login/HeroSection.tsx |   2 +-
 frontend/src/components/login/LoginForm.tsx   |  29 +++--
 package-lock.json                             |   4 +-
 19 files changed, 240 insertions(+), 162 deletions(-)

diff --git a/frontend/src/app/(public)/forgot-password/page.tsx b/frontend/src/app/(public)/forgot-password/page.tsx
index 05265dab..9aa9ab73 100644
--- a/frontend/src/app/(public)/forgot-password/page.tsx
+++ b/frontend/src/app/(public)/forgot-password/page.tsx
@@ -17,7 +17,7 @@ export default function ForgotPasswordPage() {
     <GuestGuard>
       <main className="mx-auto flex min-h-screen w-full max-w-lg flex-col justify-center gap-10 px-6 py-24 bg-white text-[#0A0A0A]">
         <header className="text-center">
-          <p className="text-[10px] font-bold uppercase tracking-[0.4em] text-[#6B6B6B]">
+          <p className="text-xs font-bold uppercase tracking-[0.4em] text-[#6B6B6B]">
             Account Recovery
           </p>
           <h1 className="mt-4 text-5xl font-serif font-black uppercase tracking-tight">
@@ -31,7 +31,7 @@ export default function ForgotPasswordPage() {
         <section className="rounded-[2rem] border border-[#E8E8E8] bg-white p-8 shadow-[0_20px_60px_rgb(0,0,0,0.05)]">
           {!submitted ? (
             <form onSubmit={handleSubmit} className="flex flex-col gap-5">
-              <label htmlFor="email" className="text-[10px] font-bold uppercase tracking-[0.2em] text-[#6B6B6B]">
+              <label htmlFor="email" className="text-xs font-bold uppercase tracking-[0.2em] text-[#6B6B6B]">
                 Email Address
               </label>
               <input
@@ -46,13 +46,13 @@ export default function ForgotPasswordPage() {
               />
               <button
                 type="submit"
-                className="mt-2 flex h-14 w-full items-center justify-center rounded-2xl bg-[var(--pluto-500)] text-[10px] font-bold uppercase tracking-[0.3em] text-white transition-all hover:bg-[var(--pluto-600)]"
+                className="mt-2 flex h-14 w-full items-center justify-center rounded-2xl bg-[var(--pluto-500)] text-xs font-bold uppercase tracking-[0.3em] text-white transition-all hover:bg-[var(--pluto-600)]"
               >
                 Continue
               </button>
             </form>
           ) : (
-            <div className="space-y-4">
+            <div className="space-y-4" role="status">
               <p className="rounded-2xl border border-[#DDE7DD] bg-[#F6FBF6] px-4 py-3 text-sm font-medium text-[#235B23]">
                 Request received. If an account exists for {email}, recovery instructions will be sent.
               </p>
@@ -63,7 +63,7 @@ export default function ForgotPasswordPage() {
           )}
         </section>
 
-        <footer className="text-center text-[10px] font-bold uppercase tracking-widest text-[#6B6B6B]">
+        <footer className="text-center text-xs font-bold uppercase tracking-widest text-[#6B6B6B]">
           Remembered your password?{" "}
           <Link href="/login" className="text-[#0A0A0A] underline underline-offset-4 hover:text-black">
             Back to login
diff --git a/frontend/src/app/(public)/login/page.tsx b/frontend/src/app/(public)/login/page.tsx
index 717982a2..65f6a266 100644
--- a/frontend/src/app/(public)/login/page.tsx
+++ b/frontend/src/app/(public)/login/page.tsx
@@ -17,26 +17,26 @@ export default function LoginPage() {
       {/* Main Content */}
       <div className="flex-1 w-full max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 relative z-10">
         {/* Left Column (Hero) */}
-        <div className="flex flex-col justify-center items-start px-6 md:px-12 lg:px-20 py-10 md:py-0">
+        <section className="flex flex-col justify-center items-start px-6 md:px-12 lg:px-20 py-10 md:py-0" aria-labelledby="hero-heading">
           <HeroSection />
-        </div>
+        </section>
         
         {/* Right Column (Form) */}
-        <div className="flex flex-col justify-center items-center px-6 md:px-12 lg:px-20 py-10 md:py-0">
+        <section className="flex flex-col justify-center items-center px-6 md:px-12 lg:px-20 py-10 md:py-0" aria-labelledby="login-heading">
           <LoginForm />
-        </div>
+        </section>
       </div>
 
       {/* Footer */}
-      <footer className="w-full max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 px-6 md:px-10 py-8 mt-auto z-50 text-[10px] font-bold tracking-widest text-[#6B6B6B] uppercase border-t border-[#E8E8E8]">
+      <footer className="w-full max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 px-6 md:px-10 py-8 mt-auto z-50 text-xs font-bold tracking-widest text-[#6B6B6B] uppercase border-t border-[#E8E8E8]">
           <div className="text-[#0A0A0A] mb-4 md:mb-0 uppercase tracking-[0.4em] font-serif font-black">
             PLUTO
           </div>
-         <div className="flex gap-8 mb-4 md:mb-0">
+         <nav className="flex gap-8 mb-4 md:mb-0" aria-label="Footer navigation">
             <Link href="#" className="hover:text-[#0A0A0A] transition-colors">Privacy Policy</Link>
             <Link href="#" className="hover:text-[#0A0A0A] transition-colors">Terms of Service</Link>
             <Link href="#" className="hover:text-[#0A0A0A] transition-colors">Help Center</Link>
-         </div>
+         </nav>
           <div className="text-[#6B6B6B] uppercase tracking-widest">
             © {new Date().getFullYear()} PLUTO. THE HUB FOR MODERN COMMERCE.
           </div>
diff --git a/frontend/src/app/(public)/page.tsx b/frontend/src/app/(public)/page.tsx
index da019d16..b49c59d5 100644
--- a/frontend/src/app/(public)/page.tsx
+++ b/frontend/src/app/(public)/page.tsx
@@ -80,7 +80,7 @@ function HeroSection() {
       <div className="pointer-events-none absolute inset-0 z-0 bg-gradient-to-b from-transparent via-transparent to-white" />
 
       <div className="relative z-10 flex flex-col items-center gap-6">
-        <span className="inline-flex items-center gap-2 rounded-full border border-[#E8E8E8] bg-white/80 px-5 py-2 font-bold text-[10px] uppercase tracking-[0.2em] text-[#6B6B6B] shadow-sm">
+        <span className="inline-flex items-center gap-2 rounded-full border border-[#E8E8E8] bg-white/80 px-5 py-2 font-bold text-xs uppercase tracking-[0.2em] text-[#6B6B6B] shadow-sm">
           <span className="h-1.5 w-1.5 rounded-full bg-[#0A0A0A]" />
           Surgical Precision Payments
         </span>
@@ -114,7 +114,7 @@ function HeroSection() {
           </Link>
         </div>
 
-        <div className="mt-20 flex flex-wrap items-center justify-center gap-x-10 gap-y-3 text-[10px] font-bold uppercase tracking-[0.2em] text-[#6B6B6B]">
+        <div className="mt-20 flex flex-wrap items-center justify-center gap-x-10 gap-y-3 text-xs font-bold uppercase tracking-[0.2em] text-[#6B6B6B]">
           {["Non-custodial", "5-minute integration", "Sandbox included"].map((t) => (
             <span key={t} className="flex items-center gap-2">
               <span className="h-1 w-1 rounded-full bg-[#0A0A0A]" />
@@ -131,7 +131,7 @@ function FeaturesSection() {
   return (
     <div className="mx-auto max-w-7xl px-6 py-32 lg:py-48">
       <div className="mb-20 text-center">
-        <p className="mb-4 font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B]">Engineered for Performance</p>
+        <p className="mb-4 font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B]">Engineered for Performance</p>
         <h2 className="mx-auto max-w-3xl text-5xl font-bold leading-[1.1] text-[#0A0A0A] sm:text-7xl">
           Everything you need to scale
         </h2>
@@ -145,7 +145,7 @@ function FeaturesSection() {
           >
             <div className="flex items-center justify-between">
               <span className="text-3xl text-[#0A0A0A] transition-transform duration-300 group-hover:scale-110">{f.icon}</span>
-              <span className="rounded-full border border-[#E8E8E8] px-4 py-1.5 font-bold text-[10px] uppercase tracking-widest text-[#6B6B6B]">
+              <span className="rounded-full border border-[#E8E8E8] px-4 py-1.5 font-bold text-xs uppercase tracking-widest text-[#6B6B6B]">
                 {f.tag}
               </span>
             </div>
@@ -172,7 +172,7 @@ function HowItWorksSection() {
     <div className="border-y border-[#E8E8E8] bg-[#F9F9F9]">
       <div className="mx-auto max-w-7xl px-6 py-32 lg:py-48">
         <div className="mb-20 text-center">
-          <p className="mb-4 font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B]">Simple Workflow</p>
+          <p className="mb-4 font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B]">Simple Workflow</p>
           <h2 className="mx-auto max-w-3xl text-5xl font-bold leading-[1.1] text-[#0A0A0A] sm:text-7xl">Four steps to scale</h2>
         </div>
 
@@ -185,7 +185,7 @@ function HowItWorksSection() {
                   <div className="absolute left-full top-1/2 hidden h-px w-[calc(100%+3rem)] -translate-y-1/2 bg-[#E8E8E8] lg:block" />
                 )}
               </div>
-              <h3 className="mb-3 text-[10px] font-bold text-[#0A0A0A] uppercase tracking-[0.4em]">{step.title}</h3>
+              <h3 className="mb-3 text-xs font-bold text-[#0A0A0A] uppercase tracking-[0.4em]">{step.title}</h3>
               <p className="text-sm font-medium leading-relaxed text-[#6B6B6B]">{step.description}</p>
             </div>
           ))}
@@ -199,26 +199,26 @@ function IntegrationModesSection() {
   return (
     <div className="mx-auto max-w-7xl px-6 py-24 lg:py-32">
       <div className="mb-12 text-center">
-        <p className="mb-4 font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B]">Agentic Payments</p>
+        <p className="mb-4 font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B]">Agentic Payments</p>
         <h2 className="mx-auto max-w-4xl text-4xl font-bold leading-[1.1] text-[#0A0A0A] sm:text-6xl">
           Build with x402 mode
         </h2>
       </div>
 
       <div className="mx-auto max-w-3xl rounded-[2rem] border border-[var(--pluto-200)] bg-[var(--pluto-50)] p-8 shadow-sm">
-        <p className="text-[10px] font-bold uppercase tracking-[0.3em] text-[var(--pluto-600)]">x402</p>
+        <p className="text-xs font-bold uppercase tracking-[0.3em] text-[var(--pluto-600)]">x402</p>
         <h3 className="mt-3 text-3xl font-bold tracking-tight text-[var(--pluto-800)]">Pay-per-request API access</h3>
         <p className="mt-4 text-sm text-[var(--pluto-700)]">
           Start integrating with x402-protected create-payment calls and let your backend handle 402 challenge, on-chain payment, verification, and retry.
         </p>
-        <ul className="mt-6 flex flex-col gap-2 text-[10px] font-bold uppercase tracking-widest text-[var(--pluto-700)]">
+        <ul className="mt-6 flex flex-col gap-2 text-xs font-bold uppercase tracking-widest text-[var(--pluto-700)]">
           <li>Request with x402 pricing mode</li>
           <li>Pay challenge on Stellar</li>
           <li>Retry with payment token</li>
         </ul>
         <Link
           href="/docs/x402-agentic-payments"
-          className="mt-8 inline-flex items-center gap-2 rounded-xl bg-[var(--pluto-500)] px-5 py-3 text-[10px] font-bold uppercase tracking-widest text-white transition-colors hover:bg-[var(--pluto-600)]"
+          className="mt-8 inline-flex items-center gap-2 rounded-xl bg-[var(--pluto-500)] px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors hover:bg-[var(--pluto-600)]"
         >
           View x402 Guide →
         </Link>
@@ -280,7 +280,7 @@ function PricingSection() {
       />
       <div className="relative z-10 mx-auto max-w-7xl px-6 py-24 lg:py-32">
         <div className="mb-20 text-center">
-          <p className="mb-4 font-bold text-[10px] uppercase tracking-[0.4em] text-[var(--pluto-600)]">Pricing</p>
+          <p className="mb-4 font-bold text-xs uppercase tracking-[0.4em] text-[var(--pluto-600)]">Pricing</p>
           <h2 className="mx-auto max-w-3xl text-5xl font-bold leading-[1.1] tracking-tight text-[#0A0A0A] sm:text-7xl">
             Predictable pricing.<br />Infinite scale.
           </h2>
@@ -326,7 +326,7 @@ function PricingSection() {
 
                 <Link
                   href={plan.cta.href}
-                  className={`mt-auto inline-flex items-center justify-center rounded-2xl px-6 py-4 text-[10px] font-bold uppercase tracking-[0.2em] transition-all hover:scale-[1.02] active:scale-[0.98] ${
+                  className={`mt-auto inline-flex items-center justify-center rounded-2xl px-6 py-4 text-xs font-bold uppercase tracking-[0.2em] transition-all hover:scale-[1.02] active:scale-[0.98] ${
                     plan.cta.primary 
                       ? "bg-[var(--pluto-500)] text-white shadow-xl shadow-[var(--pluto-500)]/20 hover:bg-[var(--pluto-600)]" 
                       : "border border-[#E8E8E8] bg-white text-[#0A0A0A] hover:bg-[#F9F9F9]"
@@ -350,7 +350,7 @@ function CodeSnippetSection() {
     <div className="mx-auto max-w-7xl px-6 py-32 lg:py-48">
       <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-20">
         <div>
-          <p className="mb-4 font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B]">Developer First</p>
+          <p className="mb-4 font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B]">Developer First</p>
           <h2 className="mb-8 text-5xl font-bold leading-[1.1] text-[#0A0A0A] sm:text-7xl">
             One endpoint.<br />Total control.
           </h2>
@@ -359,7 +359,7 @@ function CodeSnippetSection() {
           </p>
           <ul className="flex flex-col gap-4">
             {["Atomic transactions", "HMAC-SHA256 signed webhooks", "Customizable metadata", "Scalable architecture"].map((item) => (
-              <li key={item} className="flex items-center gap-3 text-[10px] font-bold uppercase tracking-widest text-[#6B6B6B]">
+              <li key={item} className="flex items-center gap-3 text-xs font-bold uppercase tracking-widest text-[#6B6B6B]">
                 <span className="h-1.5 w-1.5 rounded-full bg-[#0A0A0A] shrink-0" />
                 {item}
               </li>
@@ -373,7 +373,7 @@ function CodeSnippetSection() {
               <button
                 key={t}
                 onClick={() => setTab(t)}
-                className={`relative px-8 py-4 font-bold text-[10px] uppercase tracking-widest transition-colors ${tab === t ? "bg-white text-[#0A0A0A]" : "text-[#6B6B6B] hover:text-[#0A0A0A]"}`}
+                className={`relative px-8 py-4 font-bold text-xs uppercase tracking-widest transition-colors ${tab === t ? "bg-white text-[#0A0A0A]" : "text-[#6B6B6B] hover:text-[#0A0A0A]"}`}
               >
                 {t}
                 {tab === t && <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#0A0A0A]" />}
@@ -401,7 +401,7 @@ function PayWithLinkDemo() {
   return (
     <div className="mx-auto max-w-6xl px-6 py-32 lg:py-48">
       <div className="mb-20 text-center">
-        <p className="mb-4 font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B]">User Experience</p>
+        <p className="mb-4 font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B]">User Experience</p>
         <h2 className="mx-auto max-w-3xl text-5xl font-bold leading-[1.1] text-[#0A0A0A] sm:text-7xl">Precision Checkout</h2>
         <p className="mx-auto mt-6 max-w-lg text-base font-medium text-[#6B6B6B]">
           A sleek, branded checkout experience generated instantly through the PLUTO API.
@@ -416,12 +416,12 @@ function PayWithLinkDemo() {
             <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#F9F9F9] border border-[#E8E8E8] text-lg">⬡</div>
             <div>
               <p className="text-sm font-bold text-[#0A0A0A]">Acme Store</p>
-              <p className="text-[10px] font-bold text-[#6B6B6B] uppercase tracking-widest">Order #8842</p>
+              <p className="text-xs font-bold text-[#6B6B6B] uppercase tracking-widest">Order #8842</p>
             </div>
           </div>
 
           <div className="mb-8 text-center">
-            <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-[#6B6B6B]">Amount Due</p>
+            <p className="text-xs font-bold uppercase tracking-[0.2em] text-[#6B6B6B]">Amount Due</p>
             <p className="mt-1 text-5xl font-bold tracking-tight text-[#0A0A0A]">
               25.00 <span className="text-lg font-medium text-[#6B6B6B]">USDC</span>
             </p>
@@ -429,7 +429,7 @@ function PayWithLinkDemo() {
 
           <div className="mb-8 space-y-3 rounded-2xl border border-[#E8E8E8] bg-[#F9F9F9] p-5">
             {[["Network", "Stellar Mainnet"], ["Expires In", "29:42"]].map(([k, v]) => (
-              <div key={k} className="flex items-center justify-between text-[10px] font-bold uppercase tracking-widest">
+              <div key={k} className="flex items-center justify-between text-xs font-bold uppercase tracking-widest">
                 <span className="text-[#6B6B6B]">{k}</span>
                 <span className="text-[#0A0A0A]">{v}</span>
               </div>
@@ -439,7 +439,7 @@ function PayWithLinkDemo() {
           {!paid ? (
             <button
               onClick={() => setPaid(true)}
-              className="w-full rounded-2xl bg-[var(--pluto-500)] py-5 text-[10px] font-bold uppercase tracking-[0.3em] text-white shadow-xl shadow-[var(--pluto-500)]/10 transition-all hover:bg-[var(--pluto-600)] active:scale-[0.97]"
+              className="w-full rounded-2xl bg-[var(--pluto-500)] py-5 text-xs font-bold uppercase tracking-[0.3em] text-white shadow-xl shadow-[var(--pluto-500)]/10 transition-all hover:bg-[var(--pluto-600)] active:scale-[0.97]"
             >
               Complete Payment
             </button>
@@ -476,11 +476,11 @@ function CTASection() {
         <div className="mt-14 flex flex-col items-center gap-6 sm:flex-row">
           <Link
             href="/register"
-            className="inline-flex items-center gap-2 rounded-xl bg-[var(--pluto-500)] px-12 py-6 text-[10px] font-bold uppercase tracking-widest text-white shadow-2xl shadow-[var(--pluto-500)]/10 transition-all hover:bg-[var(--pluto-600)] active:scale-[0.97]"
+            className="inline-flex items-center gap-2 rounded-xl bg-[var(--pluto-500)] px-12 py-6 text-xs font-bold uppercase tracking-widest text-white shadow-2xl shadow-[var(--pluto-500)]/10 transition-all hover:bg-[var(--pluto-600)] active:scale-[0.97]"
           >
             Create Free Account →
           </Link>
-          <Link href="/login" className="font-bold text-[10px] uppercase tracking-widest text-[#6B6B6B] transition-colors hover:text-[#0A0A0A]">
+          <Link href="/login" className="font-bold text-xs uppercase tracking-widest text-[#6B6B6B] transition-colors hover:text-[#0A0A0A]">
             Sign in →
           </Link>
         </div>
@@ -497,7 +497,7 @@ function Footer() {
           <span className="font-serif text-xl font-bold tracking-tight text-[#0A0A0A]">PLUTO</span>
           <SystemStatus />
         </div>
-        <div className="flex gap-10 font-bold text-[10px] uppercase tracking-widest text-[#6B6B6B]">
+        <div className="flex gap-10 font-bold text-xs uppercase tracking-widest text-[#6B6B6B]">
           {[["Login", "/login"], ["Register", "/register"], ["Dashboard", "/dashboard"], ["Docs", "/docs"]].map(([label, href]) => (
             <Link key={label} href={href} className="transition-colors hover:text-[#0A0A0A]">{label}</Link>
           ))}
diff --git a/frontend/src/app/(public)/register/page.tsx b/frontend/src/app/(public)/register/page.tsx
index 503e46a4..c1e0b6d6 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] animate-pulse">Onboarding</p>
+        <p className="font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B] motion-safe: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.
@@ -19,7 +19,7 @@ export default function RegisterPage() {
       </div>
 
       <footer className="text-center">
-        <p className="text-[10px] font-bold uppercase tracking-widest text-[#6B6B6B]">
+        <p className="text-xs font-bold uppercase tracking-widest text-[#6B6B6B]">
           Already have an account?{" "}
           <Link href="/login" className="text-[#0A0A0A] underline underline-offset-8 font-bold hover:text-black">
             Log in here
diff --git a/frontend/src/components/ApiHealthBadge.tsx b/frontend/src/components/ApiHealthBadge.tsx
index ed8b3c7f..6d2e7373 100644
--- a/frontend/src/components/ApiHealthBadge.tsx
+++ b/frontend/src/components/ApiHealthBadge.tsx
@@ -77,25 +77,34 @@ export default function ApiHealthBadge() {
   }[status];
 
   return (
-    <div className="group relative flex items-center gap-2 rounded-full border border-[#E8E8E8] bg-white px-3 py-1.5 transition-all hover:border-[#0A0A0A] hover:bg-[#F9F9F9] cursor-default">
+    <div 
+      className="group relative flex items-center gap-2 rounded-full border border-[var(--border-subtle)] bg-white px-3.5 py-2 transition-all duration-300 hover:border-[var(--pluto-300)] hover:bg-[var(--pluto-50)]/50 cursor-default"
+      aria-describedby="api-status-tooltip"
+    >
       <div className="relative flex h-2 w-2 items-center justify-center">
         {status !== "loading" && (
           <span
-            className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${config.pulse}`}
+            className={`absolute inline-flex h-full w-full motion-safe:animate-ping rounded-full opacity-75 ${config.pulse}`}
           />
         )}
         <span className={`relative inline-flex h-1.5 w-1.5 rounded-full ${config.color}`} />
       </div>
-      <span className={`text-[10px] font-bold uppercase tracking-widest ${config.text}`}>
+      <span className={`text-[10px] font-bold uppercase tracking-[0.2em] ${config.text}`}>
         {status === "healthy" ? "API Active" : status === "error" ? "API Down" : "Checking"}
       </span>
 
       {/* Tooltip */}
-      <div className="pointer-events-none absolute left-1/2 top-full z-50 mt-3 -translate-x-1/2 whitespace-nowrap rounded-xl border border-[#E8E8E8] bg-white px-4 py-3 text-[10px] font-bold uppercase tracking-widest text-[#0A0A0A] opacity-0 shadow-[0_10px_30px_rgb(0,0,0,0.08)] transition-all group-hover:opacity-100 group-hover:translate-y-1">
-        <p className="text-center">{config.label}</p>
+      <div 
+        id="api-status-tooltip"
+        role="tooltip"
+        className="pointer-events-none absolute left-1/2 top-full z-50 mt-4 -translate-x-1/2 whitespace-nowrap rounded-2xl border border-[var(--pluto-100)] bg-white/95 px-5 py-3.5 text-[10px] font-bold uppercase tracking-[0.2em] text-[var(--text-primary)] opacity-0 shadow-[0_20px_50px_rgba(0,0,0,0.12)] backdrop-blur-md transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-1.5"
+      >
+        <p className="text-center leading-none">{config.label}</p>
         {(errorMsg && status !== "loading") && (
-          <p className="mt-1.5 text-[9px] text-[#6B6B6B] lowercase tracking-normal font-medium text-center">{errorMsg}</p>
+          <p className="mt-2 text-[9px] text-[var(--text-secondary)] lowercase tracking-normal font-medium text-center">{errorMsg}</p>
         )}
+        {/* Arrow */}
+        <div className="absolute bottom-full left-1/2 h-2.5 w-2.5 -translate-x-1/2 translate-y-1.5 rotate-45 border-l border-t border-[var(--pluto-100)] bg-white/95" />
       </div>
     </div>
   );
diff --git a/frontend/src/components/ApiUsageChart.tsx b/frontend/src/components/ApiUsageChart.tsx
index e9864d02..75304849 100644
--- a/frontend/src/components/ApiUsageChart.tsx
+++ b/frontend/src/components/ApiUsageChart.tsx
@@ -170,14 +170,23 @@ export default function ApiUsageChart() {
             />
             <Tooltip
               contentStyle={{
-                backgroundColor: "rgba(0, 0, 0, 0.9)",
-                border: "1px solid rgba(255, 255, 255, 0.1)",
-                borderRadius: "8px",
-                color: "#fff",
+                backgroundColor: "rgba(255, 255, 255, 0.95)",
+                border: "1px solid var(--pluto-100)",
+                borderRadius: "16px",
+                padding: "12px 16px",
+                boxShadow: "0 20px 50px rgba(0, 0, 0, 0.12)",
+                backdropFilter: "blur(8px)",
+              }}
+              itemStyle={{
+                color: "var(--pluto-600)",
+                fontSize: "12px",
+                fontWeight: "600",
+                textTransform: "uppercase",
+                letterSpacing: "0.05em",
               }}
               formatter={(value: number) => [value.toLocaleString(locale), "Requests"]}
               labelFormatter={formatTooltipLabel}
-              labelStyle={{ color: "#94a3b8" }}
+              labelStyle={{ color: "var(--text-secondary)", fontSize: "10px", fontWeight: "600", marginBottom: "4px" }}
             />
               <Bar dataKey="requests" fill="#5ef2c0" radius={[4, 4, 0, 0]} maxBarSize={isCompact ? 22 : 32} />
             </BarChart>
diff --git a/frontend/src/components/CheckoutQrModal.tsx b/frontend/src/components/CheckoutQrModal.tsx
index e14d1f32..7c34f045 100644
--- a/frontend/src/components/CheckoutQrModal.tsx
+++ b/frontend/src/components/CheckoutQrModal.tsx
@@ -2,7 +2,7 @@
 
 import { useRef } from "react";
 import { useTranslations } from "next-intl";
-import toast from "react-hot-toast";
+import { toast } from "sonner";
 import { QRCodeCanvas } from "qrcode.react";
 import { Modal } from "@/components/ui/Modal";
 
@@ -44,10 +44,10 @@ export default function CheckoutQrModal({
   return (
     <Modal isOpen={isOpen} onClose={onClose} title={t("qrModalTitle")}>
       <div className="flex flex-col gap-5">
-        <p className="text-sm text-slate-400">{t("qrModalDescription")}</p>
+        <p className="text-sm text-[#6B6B6B]">{t("qrModalDescription")}</p>
         <div
           ref={qrWrapperRef}
-          className="flex items-center justify-center rounded-2xl border border-white/10 bg-white p-5 transition-all hover:border-mint/30 hover:shadow-lg hover:shadow-mint/10"
+          className="flex items-center justify-center rounded-2xl border border-[#E8E8E8] bg-white p-5 transition-all hover:border-[var(--pluto-400)] hover:shadow-lg hover:shadow-[var(--pluto-400)]/10"
         >
           <QRCodeCanvas
             value={qrValue}
@@ -60,7 +60,7 @@ export default function CheckoutQrModal({
         <button
           type="button"
           onClick={handleDownload}
-          className="inline-flex h-11 items-center justify-center gap-2 rounded-xl border border-mint/30 bg-mint/10 px-4 font-semibold text-mint transition-all hover:bg-mint/20 hover:border-mint/50 hover:shadow-md hover:shadow-mint/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-mint focus-visible:ring-offset-2 focus-visible:ring-offset-[#16171a]"
+          className="inline-flex h-11 items-center justify-center gap-2 rounded-xl border border-[var(--pluto-200)] bg-[var(--pluto-50)] px-4 font-bold uppercase tracking-widest text-xs text-[var(--pluto-700)] transition-all hover:bg-[var(--pluto-100)] hover:border-[var(--pluto-400)] hover:shadow-md hover:shadow-[var(--pluto-500)]/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--pluto-300)] focus-visible:ring-offset-2 focus-visible:ring-offset-white"
         >
           <svg
             className="h-4 w-4"
diff --git a/frontend/src/components/CopyButton.tsx b/frontend/src/components/CopyButton.tsx
index 20dc0a6c..4920f5ef 100644
--- a/frontend/src/components/CopyButton.tsx
+++ b/frontend/src/components/CopyButton.tsx
@@ -135,7 +135,7 @@ export default function CopyButton({ text, className = "" }: CopyButtonProps) {
         type="button"
         onClick={handleCopy}
         aria-label={t("ariaLabel")}
-        className={`relative overflow-hidden rounded-lg border border-white/10 bg-black/20 p-1.5 text-slate-300 transition-all hover:border-mint/40 hover:text-mint active:scale-95 ${className}`}
+        className={`relative overflow-hidden rounded-lg border border-[var(--border-subtle)] bg-white p-1.5 text-[var(--text-secondary)] transition-all duration-300 hover:border-[var(--pluto-300)] hover:text-[var(--pluto-600)] hover:bg-[var(--pluto-50)]/50 active:scale-95 ${className}`}
         whileTap={{ scale: 0.95 }}
         whileHover={{ scale: 1.05 }}
         variants={glitchButtonVariants}
@@ -234,13 +234,15 @@ export default function CopyButton({ text, className = "" }: CopyButtonProps) {
       <AnimatePresence>
         {copied && (
           <motion.span
-            initial={{ opacity: 0, y: 10, scale: 0.8 }}
-            animate={{ opacity: 1, y: 0, scale: 1 }}
-            exit={{ opacity: 0, y: -10, scale: 0.8 }}
-            transition={{ duration: 0.3, ease: "easeOut" }}
-            className="absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md border border-mint/30 bg-tide px-2 py-1 font-mono text-xs text-mint shadow-lg"
+            initial={{ opacity: 0, y: 8, scale: 0.9, x: "-50%" }}
+            animate={{ opacity: 1, y: 0, scale: 1, x: "-50%" }}
+            exit={{ opacity: 0, y: -8, scale: 0.9, x: "-50%" }}
+            transition={{ duration: 0.2, ease: [0.23, 1, 0.32, 1] }}
+            className="absolute -top-11 left-1/2 whitespace-nowrap rounded-xl border border-[var(--pluto-100)] bg-white/95 px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest text-[var(--pluto-600)] shadow-[0_10px_30px_rgba(0,0,0,0.08)] backdrop-blur-md"
           >
             {t("copied")}
+            {/* Arrow */}
+            <div className="absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1 rotate-45 border-b border-r border-[var(--pluto-100)] bg-white/95" />
           </motion.span>
         )}
       </AnimatePresence>
diff --git a/frontend/src/components/InfoTooltip.tsx b/frontend/src/components/InfoTooltip.tsx
index 6de39c92..aa8aa355 100644
--- a/frontend/src/components/InfoTooltip.tsx
+++ b/frontend/src/components/InfoTooltip.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 
 interface InfoTooltipProps {
@@ -17,12 +17,23 @@ export function InfoTooltip({
   const [isVisible, setIsVisible] = useState(false);
   const triggerRef = useRef<HTMLButtonElement>(null);
 
+  // Close on escape
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsVisible(false);
+    };
+    if (isVisible) {
+      window.addEventListener("keydown", handleKeyDown);
+    }
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isVisible]);
+
   return (
     <div className={`relative inline-flex items-center ${className}`}>
       <button
         ref={triggerRef}
         type="button"
-        className="cursor-help border-b border-dotted border-white/30 decoration-white/30 transition-colors hover:border-mint hover:text-mint focus-visible:border-mint focus-visible:text-mint focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-mint focus-visible:ring-offset-2 focus-visible:ring-offset-[#16171a]"
+        className="group/tooltip cursor-help rounded px-0.5 border-b border-dotted border-[var(--text-secondary)]/40 decoration-[var(--text-secondary)]/40 transition-all duration-300 text-[var(--text-secondary)] hover:text-[var(--pluto-600)] hover:border-[var(--pluto-600)] hover:bg-[var(--pluto-50)] focus-visible:text-[var(--pluto-600)] focus-visible:border-[var(--pluto-600)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--pluto-300)] focus-visible:ring-offset-2 focus-visible:ring-offset-white"
         onMouseEnter={() => setIsVisible(true)}
         onMouseLeave={() => setIsVisible(false)}
         onFocus={() => setIsVisible(true)}
@@ -38,15 +49,15 @@ export function InfoTooltip({
           <motion.div
             id="tooltip-content"
             role="tooltip"
-            initial={{ opacity: 0, scale: 0.95, y: 5 }}
+            initial={{ opacity: 0, scale: 0.95, y: 8 }}
             animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={{ opacity: 0, scale: 0.95, y: 5 }}
-            transition={{ duration: 0.15, ease: "easeOut" }}
-            className="absolute bottom-full left-1/2 z-[100] mb-2 w-64 -translate-x-1/2 rounded-lg border border-white/10 bg-[#16171a] p-2.5 text-xs leading-relaxed text-slate-200 shadow-2xl backdrop-blur-md"
+            exit={{ opacity: 0, scale: 0.95, y: 8 }}
+            transition={{ duration: 0.2, ease: [0.23, 1, 0.32, 1] }}
+            className="absolute bottom-full left-1/2 z-[100] mb-4 w-64 -translate-x-1/2 rounded-2xl border border-[var(--pluto-100)] bg-white/95 p-4 text-[12px] font-medium leading-relaxed text-[var(--text-primary)] shadow-[0_20px_50px_rgba(0,0,0,0.12)] backdrop-blur-md"
           >
-            {content}
+            <div className="relative z-10">{content}</div>
             {/* Arrow */}
-            <div className="absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1 rotate-45 border-b border-r border-white/10 bg-[#16171a]" />
+            <div className="absolute top-full left-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1.5 rotate-45 border-b border-r border-[var(--pluto-100)] bg-white/95" />
           </motion.div>
         )}
       </AnimatePresence>
diff --git a/frontend/src/components/MaskedValue.tsx b/frontend/src/components/MaskedValue.tsx
index 9536cd30..d05729b3 100644
--- a/frontend/src/components/MaskedValue.tsx
+++ b/frontend/src/components/MaskedValue.tsx
@@ -94,7 +94,7 @@ export default function MaskedValue({
     <section className={`flex flex-col gap-3 ${className}`.trim()}>
       <div className="flex items-center justify-between">
         {label ? (
-          <h2 className="text-xs font-medium uppercase tracking-wider text-slate-300">
+          <h2 className="text-xs font-bold uppercase tracking-wider text-[#6B6B6B]">
             {label}
           </h2>
         ) : (
@@ -104,17 +104,17 @@ export default function MaskedValue({
           type="button"
           onClick={toggle}
           aria-label={ariaLabel}
-          className="flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs text-slate-300 transition-colors hover:bg-white/5 hover:text-white focus-visible:bg-white/10 focus-visible:text-white"
+          className="flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs font-bold uppercase tracking-widest text-[#6B6B6B] transition-colors hover:bg-black/5 hover:text-[#0A0A0A] focus-visible:bg-black/10 focus-visible:text-[#0A0A0A]"
         >
           <EyeIcon open={isRevealed} />
           {isRevealed ? hideLabel : showLabel}
         </button>
       </div>
 
-      <div className="flex items-center gap-2 overflow-hidden rounded-xl border border-white/10 bg-black/40 p-1 pl-4">
+      <div className="flex items-center gap-2 overflow-hidden rounded-xl border border-[#E8E8E8] bg-[#F9F9F9] p-1 pl-4">
         <code
           className={`flex-1 truncate font-mono text-sm transition-colors ${
-            isRevealed ? "text-mint" : "text-slate-300"
+            isRevealed ? "text-[#0A0A0A]" : "text-[#6B6B6B]"
           }`}
         >
           {displayValue}
@@ -123,7 +123,7 @@ export default function MaskedValue({
       </div>
 
       {helperText ? (
-        <p className="text-[11px] text-slate-400">{helperText}</p>
+        <p className="text-xs text-[#6B6B6B]">{helperText}</p>
       ) : null}
     </section>
   );
diff --git a/frontend/src/components/MerchantProfileCard.tsx b/frontend/src/components/MerchantProfileCard.tsx
index 1bcc0e24..f64d8a19 100644
--- a/frontend/src/components/MerchantProfileCard.tsx
+++ b/frontend/src/components/MerchantProfileCard.tsx
@@ -24,7 +24,7 @@ export default function MerchantProfileCard() {
     return (
       <Link
         href="/login"
-        className="inline-flex h-10 items-center gap-2 rounded-full border border-[#E8E8E8] bg-white px-4 text-[10px] font-bold uppercase tracking-widest text-[#0A0A0A] transition-colors hover:bg-[#F5F5F5]"
+        className="inline-flex h-10 items-center gap-2 rounded-full border border-[#E8E8E8] bg-white px-4 text-xs font-bold uppercase tracking-widest text-[#0A0A0A] transition-colors hover:bg-[#F5F5F5]"
       >
         <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5.121 17.804A9 9 0 1118.879 17.804M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
@@ -52,6 +52,8 @@ export default function MerchantProfileCard() {
         onClick={() => setShowDropdown((v) => !v)}
         className="group flex h-10 items-center gap-2.5 rounded-full border border-[#E8E8E8] bg-white px-2.5 pr-3.5 transition-all hover:border-[#DADADA] hover:bg-[#F8F8F8]"
         aria-label="Open profile menu"
+        aria-expanded={showDropdown}
+        aria-haspopup="true"
       >
         <Avatar
           size={30}
@@ -62,7 +64,7 @@ export default function MerchantProfileCard() {
           <p className="truncate text-xs font-bold text-[#0A0A0A]">
             {displayName}
           </p>
-          <p className="truncate text-[9px] font-bold uppercase tracking-[0.18em] text-[#6B6B6B]">{email}</p>
+          <p className="truncate text-[10px] font-bold uppercase tracking-[0.18em] text-[#6B6B6B]">{email}</p>
         </div>
         <svg
           className={`h-3.5 w-3.5 text-[#8A8A8A] transition-transform duration-300 ${
@@ -71,6 +73,7 @@ export default function MerchantProfileCard() {
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
+          aria-hidden="true"
         >
           <path
             strokeLinecap="round"
@@ -89,7 +92,11 @@ export default function MerchantProfileCard() {
             onClick={() => setShowDropdown(false)}
           />
           
-          <div className="absolute right-0 z-50 mt-3 w-72 origin-top-right rounded-2xl border border-[#E8E8E8] bg-white p-5 shadow-[0_20px_50px_rgba(0,0,0,0.12)]">
+          <div 
+            className="absolute right-0 z-50 mt-3 w-72 origin-top-right rounded-2xl border border-[#E8E8E8] bg-white p-5 shadow-[0_20px_50px_rgba(0,0,0,0.12)]"
+            role="menu"
+            aria-orientation="vertical"
+          >
             {/* Profile Header */}
             <div className="mb-5 flex items-center gap-3.5 border-b border-[#F0F0F0] pb-5">
               <Avatar
@@ -110,13 +117,15 @@ export default function MerchantProfileCard() {
               <Link
                 href="/dashboard"
                 onClick={() => setShowDropdown(false)}
-                className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-[11px] font-bold uppercase tracking-widest text-[#0A0A0A] bg-[#F5F5F5] transition-all hover:bg-[#E8E8E8]"
+                role="menuitem"
+                className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-xs font-bold uppercase tracking-widest text-[#0A0A0A] bg-[#F5F5F5] transition-all hover:bg-[#E8E8E8]"
               >
                 <svg
                   className="h-4 w-4"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
+                  aria-hidden="true"
                 >
                   <path
                     strokeLinecap="round"
@@ -131,14 +140,15 @@ export default function MerchantProfileCard() {
               <Link
                 href="/settings"
                 onClick={() => setShowDropdown(false)}
-                className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-[11px] font-bold uppercase tracking-widest text-[#6B6B6B] transition-all hover:bg-[#F5F5F5] hover:text-[#0A0A0A]"
+                role="menuitem"
+                className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-xs font-bold uppercase tracking-widest text-[#6B6B6B] transition-all hover:bg-[#F5F5F5] hover:text-[#0A0A0A]"
               >
-                {/* icon svg same */}
                 <svg
                   className="h-4 w-4"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
+                  aria-hidden="true"
                 >
                   <path
                     strokeLinecap="round"
@@ -159,13 +169,15 @@ export default function MerchantProfileCard() {
               <Link
                 href="/dashboard/create"
                 onClick={() => setShowDropdown(false)}
-                className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-[11px] font-bold uppercase tracking-widest text-[#6B6B6B] transition-all hover:bg-[#F5F5F5] hover:text-[#0A0A0A]"
+                role="menuitem"
+                className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-xs font-bold uppercase tracking-widest text-[#6B6B6B] transition-all hover:bg-[#F5F5F5] hover:text-[#0A0A0A]"
               >
                 <svg
                   className="h-4 w-4"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
+                  aria-hidden="true"
                 >
                   <path
                     strokeLinecap="round"
@@ -179,13 +191,15 @@ export default function MerchantProfileCard() {
 
               <button
                 onClick={handleLogout}
-                className="mt-2 flex items-center gap-3 rounded-xl bg-red-50 px-3 py-2.5 text-[11px] font-bold uppercase tracking-widest text-red-600 transition-all hover:bg-red-100"
+                role="menuitem"
+                className="mt-2 flex items-center gap-3 rounded-xl bg-red-50 px-3 py-2.5 text-xs font-bold uppercase tracking-widest text-red-600 transition-all hover:bg-red-100"
               >
                 <svg
                   className="h-4 w-4"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
+                  aria-hidden="true"
                 >
                   <path
                     strokeLinecap="round"
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index a90aefa2..af74f5ab 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -75,7 +75,7 @@ export default function Navbar() {
                 key={link.href}
                 href={link.href}
                 aria-current={isActive(pathname, link.href) ? "page" : undefined}
-                className={`group relative rounded-full px-4 py-1.5 text-[10px] font-bold uppercase tracking-widest transition-all ${
+                className={`group relative rounded-full px-4 py-1.5 text-xs font-bold uppercase tracking-widest transition-all ${
                   isActive(pathname, link.href)
                     ? "text-pluto-900"
                     : "text-pluto-600 hover:text-pluto-900"
diff --git a/frontend/src/components/PaymentDetailModal.tsx b/frontend/src/components/PaymentDetailModal.tsx
index 39224baf..62b15981 100644
--- a/frontend/src/components/PaymentDetailModal.tsx
+++ b/frontend/src/components/PaymentDetailModal.tsx
@@ -72,7 +72,7 @@ function AssetBadge({
     return (
       <span
         aria-hidden="true"
-        className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-white/15 via-mint/20 to-mint/40 text-mint shadow-[0_0_0_1px_rgba(255,255,255,0.08)]"
+        className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-[#0A0A0A] to-[#6B6B6B] text-white shadow-[0_0_0_1px_rgba(255,255,255,0.08)]"
       >
         <svg
           viewBox="0 0 24 24"
@@ -116,11 +116,11 @@ const STATUS_MAP: Record<string, { label: string; classes: string }> = {
   },
   confirmed: {
     label: "Confirmed",
-    classes: "bg-mint/10 text-mint border border-mint/30",
+    classes: "bg-[var(--pluto-500)]/15 text-[var(--pluto-400)] border border-[var(--pluto-500)]/30",
   },
   completed: {
     label: "Completed",
-    classes: "bg-green-500/15 text-green-400 border border-green-500/30",
+    classes: "bg-emerald-500/15 text-emerald-400 border border-emerald-500/30",
   },
   failed: {
     label: "Failed",
@@ -420,7 +420,7 @@ export default function PaymentDetailModal({
         {/* Header */}
         <div className="flex flex-shrink-0 items-center justify-between border-b border-white/10 p-6">
           <div>
-            <p className="font-mono text-xs uppercase tracking-[0.3em] text-mint">
+            <p className="font-mono text-xs uppercase tracking-[0.3em] text-[var(--pluto-400)]">
               Payment Details
             </p>
             <p className="mt-1 font-mono text-xs text-slate-500">
@@ -584,7 +584,7 @@ export default function PaymentDetailModal({
                         href={`${EXPLORER_BASE}/tx/${payment.tx_id}`}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="flex-1 truncate font-mono text-sm text-mint underline underline-offset-2 hover:text-glow"
+                        className="flex-1 truncate font-mono text-sm text-[var(--pluto-400)] underline underline-offset-2 hover:text-white"
                       >
                         {payment.tx_id}
                       </a>
@@ -657,7 +657,7 @@ export default function PaymentDetailModal({
                       type="button"
                       onClick={handlePay}
                       disabled={isProcessing}
-                      className="group relative flex h-12 w-full items-center justify-center rounded-xl bg-mint font-bold text-black transition-all hover:bg-glow disabled:cursor-not-allowed disabled:opacity-50"
+                      className="group relative flex h-12 w-full items-center justify-center rounded-xl bg-[var(--pluto-500)] font-bold text-white transition-all hover:bg-[var(--pluto-600)] disabled:cursor-not-allowed disabled:opacity-50"
                     >
                       {isProcessing ? (
                         <span className="flex items-center gap-2">
@@ -685,7 +685,7 @@ export default function PaymentDetailModal({
                       ) : (
                         `Pay with ${activeProvider!.name}`
                       )}
-                      <div className="absolute inset-0 -z-10 bg-mint/20 opacity-0 blur-xl transition-opacity group-hover:opacity-100" />
+                      <div className="absolute inset-0 -z-10 bg-[var(--pluto-500)]/20 opacity-0 blur-xl transition-opacity group-hover:opacity-100" />
                     </button>
                   ) : (
                     <WalletSelector
@@ -698,8 +698,8 @@ export default function PaymentDetailModal({
 
               {/* ── Status messages ── */}
               {isSettled && (
-                <div className="rounded-xl border border-mint/30 bg-mint/5 p-4 text-center">
-                  <p className="text-sm font-semibold text-mint">
+                <div className="rounded-xl border border-[var(--pluto-500)]/30 bg-[var(--pluto-500)]/5 p-4 text-center">
+                  <p className="text-sm font-semibold text-[var(--pluto-400)]">
                     This payment has been received.
                   </p>
                   <p className="mt-1 text-xs text-slate-400">
diff --git a/frontend/src/components/PaymentMetrics.tsx b/frontend/src/components/PaymentMetrics.tsx
index 2473b415..03354483 100644
--- a/frontend/src/components/PaymentMetrics.tsx
+++ b/frontend/src/components/PaymentMetrics.tsx
@@ -383,26 +383,27 @@ export default function PaymentMetrics({
                 />
                 <Tooltip
                   contentStyle={{
-                    backgroundColor: "#FFFFFF",
-                    border: "1px solid #E8E8E8",
-                    borderRadius: "4px",
-                    padding: "12px",
-                    boxShadow: "0 4px 12px rgba(0,0,0,0.05)",
+                    backgroundColor: "rgba(255, 255, 255, 0.95)",
+                    border: "1px solid var(--pluto-100)",
+                    borderRadius: "16px",
+                    padding: "16px",
+                    boxShadow: "0 20px 50px rgba(0, 0, 0, 0.12)",
+                    backdropFilter: "blur(8px)",
                   }}
                   labelStyle={{
-                    color: "#0A0A0A",
+                    color: "var(--pluto-600)",
                     fontSize: "10px",
                     fontWeight: "700",
                     textTransform: "uppercase",
-                    letterSpacing: "0.05em",
-                    marginBottom: "4px",
+                    letterSpacing: "0.08em",
+                    marginBottom: "8px",
                   }}
                   formatter={(value: number, name: string) => [
                     <span key={name} className="flex items-center gap-2">
-                      <span className="text-[11px] font-bold text-[#0A0A0A]">
+                      <span className="text-[12px] font-bold text-[var(--text-primary)]">
                         {value.toLocaleString()}
                       </span>
-                      <span className="text-[9px] font-medium text-[#6B6B6B] uppercase">
+                      <span className="text-[10px] font-medium text-[var(--text-secondary)] uppercase tracking-widest">
                         {name}
                       </span>
                     </span>,
diff --git a/frontend/src/components/RegistrationForm.tsx b/frontend/src/components/RegistrationForm.tsx
index 322bf629..cc377290 100644
--- a/frontend/src/components/RegistrationForm.tsx
+++ b/frontend/src/components/RegistrationForm.tsx
@@ -17,35 +17,50 @@ const BUSINESS_NAME_REGEX = /^[a-zA-Z0-9][a-zA-Z0-9\s&'.,-]{1,79}$/;
 
 // Memoized password strength indicator to prevent unnecessary re-renders
 const PasswordStrengthIndicator = React.memo(
-  ({ score, passwordLength }: { score: number; passwordLength: number }) => (
-    <div className="mt-1 flex flex-col gap-2">
-      <div className="flex h-1 gap-1">
-        {[0, 1, 2, 3].map((index) => {
-          const activeBars = score === 0 ? 1 : score === 4 ? 4 : score + 1;
-          const isActive = passwordLength > 0 && index < activeBars;
-          let bgColor = "bg-[#E8E8E8]";
-
-          if (isActive) {
-            if (score <= 1) bgColor = "bg-red-400";
-            else if (score === 2) bgColor = "bg-yellow-400";
-            else bgColor = "bg-[#0A0A0A]";
-          }
-
-          return (
-            <div
-              key={index}
-              className={`flex-1 rounded-full transition-colors duration-300 ${bgColor}`}
-            />
-          );
-        })}
+  ({ score, passwordLength }: { score: number; passwordLength: number }) => {
+    const labels = ["Weak", "Fair", "Good", "Strong", "Strong"];
+    const currentLabel = labels[score];
+
+    return (
+      <div className="mt-1 flex flex-col gap-2">
+        <div
+          className="flex h-1 gap-1"
+          role="progressbar"
+          aria-valuenow={passwordLength > 0 ? score + 1 : 0}
+          aria-valuemin={0}
+          aria-valuemax={4}
+          aria-label={`Password strength: ${passwordLength > 0 ? currentLabel : "None"}`}
+        >
+          {[0, 1, 2, 3].map((index) => {
+            const activeBars = score === 0 ? 1 : score === 4 ? 4 : score + 1;
+            const isActive = passwordLength > 0 && index < activeBars;
+            let bgColor = "bg-[#E8E8E8]";
+
+            if (isActive) {
+              if (score <= 1) bgColor = "bg-red-400";
+              else if (score === 2) bgColor = "bg-yellow-400";
+              else bgColor = "bg-[#0A0A0A]";
+            }
+
+            return (
+              <div
+                key={index}
+                className={`flex-1 rounded-full transition-colors duration-300 ${bgColor}`}
+              />
+            );
+          })}
+        </div>
+        {passwordLength > 0 && (
+          <p
+            className="text-[10px] text-[#6B6B6B] text-right font-black uppercase tracking-widest"
+            aria-live="polite"
+          >
+            {currentLabel}
+          </p>
+        )}
       </div>
-      {passwordLength > 0 && (
-        <p className="text-[9px] text-[#6B6B6B] text-right font-black uppercase tracking-widest">
-          {["Weak", "Fair", "Good", "Strong", "Strong"][score]}
-        </p>
-      )}
-    </div>
-  ),
+    );
+  },
 );
 
 PasswordStrengthIndicator.displayName = "PasswordStrengthIndicator";
@@ -180,7 +195,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
       <div className="flex flex-col gap-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
         <div className="rounded-[3rem] border border-[#E8E8E8] bg-white p-12 shadow-[0_20px_60px_rgb(0,0,0,0.05)]">
           <div className="flex flex-col gap-4 text-center sm:text-left mb-8">
-            <p className="font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B]">
+            <p className="font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B]">
               Success
             </p>
             <h2 className="text-4xl font-bold text-[#0A0A0A] font-serif tracking-tight uppercase">
@@ -210,7 +225,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
 
         <a
           href="/dashboard"
-          className="text-center text-[10px] font-bold uppercase tracking-widest text-[#6B6B6B] transition-colors underline underline-offset-8 hover:text-[#0A0A0A]"
+          className="text-center text-xs font-bold uppercase tracking-widest text-[#6B6B6B] transition-colors underline underline-offset-8 hover:text-[#0A0A0A]"
         >
           Enter Dashboard
         </a>
@@ -219,9 +234,17 @@ const RegistrationForm = React.memo(function RegistrationForm() {
   }
 
   return (
-    <form onSubmit={handleSubmit} className="flex flex-col gap-8" noValidate>
+    <form
+      onSubmit={handleSubmit}
+      className="flex flex-col gap-8"
+      noValidate
+      aria-busy={loading}
+    >
       {error && (
-        <div className="rounded-2xl border border-red-100 bg-red-50 p-5 text-xs font-bold text-red-600">
+        <div
+          className="rounded-2xl border border-red-100 bg-red-50 p-5 text-xs font-bold text-red-600"
+          role="alert"
+        >
           {error}
         </div>
       )}
@@ -230,7 +253,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
         <div className="flex flex-col gap-2">
           <label
             htmlFor="businessName"
-            className="text-[10px] font-bold text-[#6B6B6B] uppercase tracking-widest"
+            className="text-xs font-bold text-[#6B6B6B] uppercase tracking-widest"
           >
             Business Name
           </label>
@@ -258,7 +281,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
           {businessNameError && (
             <p
               id="business-name-error"
-              className="text-[10px] font-bold text-red-500 uppercase tracking-widest"
+              className="text-xs font-bold text-red-500 uppercase tracking-widest"
               role="alert"
             >
               {businessNameError}
@@ -269,7 +292,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
         <div className="flex flex-col gap-2">
           <label
             htmlFor="email"
-            className="text-[10px] font-bold text-[#6B6B6B] uppercase tracking-widest"
+            className="text-xs font-bold text-[#6B6B6B] uppercase tracking-widest"
           >
             Primary Email
           </label>
@@ -295,7 +318,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
           {emailError && (
             <p
               id="primary-email-error"
-              className="text-[10px] font-bold text-red-500 uppercase tracking-widest"
+              className="text-xs font-bold text-red-500 uppercase tracking-widest"
               role="alert"
             >
               {emailError}
@@ -306,7 +329,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
         <div className="flex flex-col gap-2">
           <label
             htmlFor="password"
-            className="text-[10px] font-bold text-[#6B6B6B] uppercase tracking-widest"
+            className="text-xs font-bold text-[#6B6B6B] uppercase tracking-widest"
           >
             Password
           </label>
@@ -335,7 +358,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
           {passwordError && (
             <p
               id="password-error"
-              className="text-[10px] font-bold text-red-500 uppercase tracking-widest"
+              className="text-xs font-bold text-red-500 uppercase tracking-widest"
               role="alert"
             >
               {passwordError}
@@ -346,7 +369,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
         <div className="flex flex-col gap-2">
           <label
             htmlFor="notificationEmail"
-            className="text-[10px] font-bold text-[#6B6B6B] uppercase tracking-widest"
+            className="text-xs font-bold text-[#6B6B6B] uppercase tracking-widest"
           >
             Notification Email
           </label>
@@ -374,7 +397,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
           {notificationEmailError && (
             <p
               id="notification-email-error"
-              className="text-[10px] font-bold text-red-500 uppercase tracking-widest"
+              className="text-xs font-bold text-red-500 uppercase tracking-widest"
               role="alert"
             >
               {notificationEmailError}
@@ -386,7 +409,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
       <button
         type="submit"
         disabled={loading || !isFormValid}
-        className="group relative flex h-16 items-center justify-center rounded-2xl bg-[#0A0A0A] px-8 text-[10px] font-bold uppercase tracking-[0.3em] text-white transition-all hover:bg-black shadow-xl shadow-black/10 disabled:cursor-not-allowed disabled:opacity-50"
+        className="group relative flex h-16 items-center justify-center rounded-2xl bg-[#0A0A0A] px-8 text-xs font-bold uppercase tracking-[0.3em] text-white transition-all hover:bg-black shadow-xl shadow-black/10 disabled:cursor-not-allowed disabled:opacity-50"
       >
         {loading ? (
           <span className="flex items-center gap-3">
diff --git a/frontend/src/components/WalletSelector.tsx b/frontend/src/components/WalletSelector.tsx
index 8943506b..cfd25bdb 100644
--- a/frontend/src/components/WalletSelector.tsx
+++ b/frontend/src/components/WalletSelector.tsx
@@ -173,8 +173,8 @@ export default function WalletSelector({
   return (
     <div className="flex flex-col gap-4">
       <div>
-        <p className="text-sm font-bold text-white">{t("chooseWallet")}</p>
-        <p className="mt-0.5 text-xs text-slate-400">{t("description")}</p>
+        <p className="text-sm font-bold text-[#0A0A0A]">{t("chooseWallet")}</p>
+        <p className="mt-0.5 text-xs text-[#6B6B6B]">{t("description")}</p>
       </div>
 
       <div className="flex flex-col gap-3">
@@ -215,16 +215,16 @@ export default function WalletSelector({
               {/* 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">
+                  <span className="flex items-center gap-2 text-sm font-bold text-[#0A0A0A]">
                     <Spinner size="sm" />
                     {isWc ? t("walletConnectWaiting") : "Connecting…"}
                   </span>
                 ) : (
                   <>
-                    <span className="text-sm font-bold text-white transition-colors group-hover:text-mint">
+                    <span className="text-sm font-bold text-[#0A0A0A] transition-colors group-hover:text-[var(--pluto-600)]">
                       {p.name}
                     </span>
-                    <span className="text-[10px] font-medium text-slate-500">
+                    <span className="text-[10px] font-medium text-[#6B6B6B]">
                       {isDisabled
                         ? isWc
                           ? t("noProjectId")
@@ -259,13 +259,13 @@ export default function WalletSelector({
       {/* WalletConnect QR */}
       {wcUri && (
         <div
-          className="flex flex-col items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.02] p-6"
+          className="flex flex-col items-center gap-3 rounded-2xl border border-[#E8E8E8] bg-[#F9F9F9] p-6"
           aria-live="polite"
         >
-          <p className="text-xs font-bold uppercase tracking-widest text-slate-500">
+          <p className="text-xs font-bold uppercase tracking-widest text-[#6B6B6B]">
             {t("scanTitle")}
           </p>
-          <div className="rounded-xl bg-white p-3 shadow-[0_0_20px_rgba(255,255,255,0.05)]">
+          <div className="rounded-xl bg-white p-3 shadow-[0_4px_20px_rgba(0,0,0,0.05)] border border-[#E8E8E8]">
             <QRCodeSVG
               value={wcUri}
               size={200}
@@ -274,7 +274,7 @@ export default function WalletSelector({
               bgColor="#ffffff"
             />
           </div>
-          <p className="text-center text-[10px] text-slate-500">
+          <p className="text-center text-[10px] text-[#6B6B6B] font-medium">
             {t("scanDescription")}
           </p>
         </div>
diff --git a/frontend/src/components/login/HeroSection.tsx b/frontend/src/components/login/HeroSection.tsx
index 7713023a..bdeab5ea 100644
--- a/frontend/src/components/login/HeroSection.tsx
+++ b/frontend/src/components/login/HeroSection.tsx
@@ -39,7 +39,7 @@ export default function HeroSection() {
         </div>
       </div> */}
 
-      <h1 className="text-5xl leading-[1.05] font-bold text-[#0A0A0A] mb-6 tracking-tighter uppercase">
+      <h1 id="hero-heading" className="text-5xl leading-[1.05] font-bold text-[#0A0A0A] mb-6 tracking-tighter uppercase">
         Commerce <br />
         <span className="text-[#6B6B6B]">Re-Engineered</span>
       </h1>
diff --git a/frontend/src/components/login/LoginForm.tsx b/frontend/src/components/login/LoginForm.tsx
index fcc32874..212c0c12 100644
--- a/frontend/src/components/login/LoginForm.tsx
+++ b/frontend/src/components/login/LoginForm.tsx
@@ -34,24 +34,31 @@ export default function LoginForm() {
   return (
     <div className="w-full max-w-[440px] rounded-[3rem] bg-white p-10 sm:p-14 shadow-[0_20px_60px_rgb(0,0,0,0.05)] border border-[#E8E8E8]">
       <div className="mb-12 text-center sm:text-left">
-        <h2 className="text-4xl font-bold tracking-tight text-[#0A0A0A] mb-4 uppercase">Welcome Back</h2>
+        <h2 id="login-heading" className="text-4xl font-bold tracking-tight text-[#0A0A0A] mb-4 uppercase">Welcome Back</h2>
         <p className="text-sm font-medium text-[#6B6B6B]">Sign in to your professional PLUTO dashboard.</p>
       </div>
 
       {error && (
-        <div className="mb-6 rounded-2xl bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700 font-medium">
+        <div
+          role="alert"
+          className="mb-6 rounded-2xl bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700 font-medium"
+        >
           {error}
         </div>
       )}
 
-      <form onSubmit={handleSubmit} className="flex flex-col gap-6">
+      <form
+        onSubmit={handleSubmit}
+        className="flex flex-col gap-6"
+        aria-busy={loading}
+      >
         <div className="flex flex-col gap-2">
-          <label htmlFor="email" className="text-[10px] font-bold tracking-[0.2em] text-[#6B6B6B] uppercase">
+          <label htmlFor="email" className="text-xs font-bold tracking-[0.2em] text-[#6B6B6B] uppercase">
             Email Address
           </label>
           <div className="relative">
             <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-[#6B6B6B]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-[#6B6B6B]" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
               </svg>
             </div>
@@ -69,12 +76,12 @@ export default function LoginForm() {
         </div>
 
         <div className="flex flex-col gap-2">
-          <label htmlFor="password" className="text-[10px] font-bold tracking-[0.2em] text-[#6B6B6B] uppercase">
+          <label htmlFor="password" className="text-xs font-bold tracking-[0.2em] text-[#6B6B6B] uppercase">
             Password
           </label>
           <div className="relative">
             <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-[#6B6B6B]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-[#6B6B6B]" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
               </svg>
             </div>
@@ -100,11 +107,11 @@ export default function LoginForm() {
               onChange={(e) => setRememberMe(e.target.checked)}
               className="h-4 w-4 rounded border-[#E8E8E8] text-[#0A0A0A] focus:ring-[#0A0A0A] transition-all"
             />
-            <label htmlFor="remember_me" className="text-[10px] font-bold uppercase tracking-widest text-[#6B6B6B] group-hover:text-[#0A0A0A] transition-colors">
+            <label htmlFor="remember_me" className="text-xs font-bold uppercase tracking-widest text-[#6B6B6B] group-hover:text-[#0A0A0A] transition-colors">
               Remember me
             </label>
           </div>
-          <Link href="/forgot-password" className="text-[10px] font-bold uppercase tracking-widest text-[#0A0A0A] hover:underline">
+          <Link href="/forgot-password" className="text-xs font-bold uppercase tracking-widest text-[#0A0A0A] hover:underline">
             Forgot password?
           </Link>
         </div>
@@ -112,13 +119,13 @@ export default function LoginForm() {
         <button
           type="submit"
           disabled={loading}
-          className="flex h-14 w-full justify-center rounded-2xl bg-[var(--pluto-500)] py-5 text-[10px] font-bold uppercase tracking-[0.3em] text-white shadow-xl shadow-[var(--pluto-500)]/20 transition-all hover:bg-[var(--pluto-600)] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
+          className="flex h-14 w-full justify-center rounded-2xl bg-[var(--pluto-500)] py-5 text-xs font-bold uppercase tracking-[0.3em] text-white shadow-xl shadow-[var(--pluto-500)]/20 transition-all hover:bg-[var(--pluto-600)] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
         >
           {loading ? "Signing in..." : "Sign in to PLUTO"}
         </button>
       </form>
 
-      <p className="mt-10 text-center text-[10px] font-bold uppercase tracking-widest text-[#6B6B6B]">
+      <p className="mt-10 text-center text-xs font-bold uppercase tracking-widest text-[#6B6B6B]">
         New to PLUTO?{" "}
         <Link href="/register" className="text-[#0A0A0A] underline underline-offset-4 hover:text-black">
           Create account
diff --git a/package-lock.json b/package-lock.json
index f3ae20a8..fe30046f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,9 +1,11 @@
 {
-  "name": "Stellar_Payment_API",
+  "name": "pluto",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
+      "name": "pluto",
+      "hasInstallScript": true,
       "dependencies": {
         "@sentry/nextjs": "^10.46.0",
         "canvas-confetti": "^1.9.4",