From 0cd924f64871bb1337fe11ac25af8dc49972d09d Mon Sep 17 00:00:00 2001
From: DeveloperAmrit <kittyamrit005@gmail.com>
Date: Sun, 19 Jul 2026 12:18:54 +0530
Subject: [PATCH 1/3] fix: Improved UI/UX

---
 dashboard/app/globals.css                     | 303 ++++++++----------
 dashboard/app/layout.tsx                      |   5 +-
 dashboard/app/transactions/page.tsx           |  30 +-
 .../components/dashboard/layout/index.tsx     |  23 +-
 .../dashboard/mobile-header/index.tsx         |  35 +-
 .../components/dashboard/sidebar/index.tsx    |  52 +--
 dashboard/components/dashboard/stat/index.tsx |  93 ++----
 dashboard/components/text-size-control.tsx    |  65 ++++
 .../components/theme-toggle-simple-click.tsx  |   4 -
 .../components/transactions/filter-panel.tsx  |  11 +-
 dashboard/components/ui/card.tsx              |   2 +-
 dashboard/hooks/use-font-scale.tsx            |  85 +++++
 dashboard/hooks/use-theme-permissions.ts      |   2 +-
 dashboard/providers.tsx                       |   5 +-
 14 files changed, 404 insertions(+), 311 deletions(-)
 create mode 100644 dashboard/components/text-size-control.tsx
 create mode 100644 dashboard/hooks/use-font-scale.tsx

diff --git a/dashboard/app/globals.css b/dashboard/app/globals.css
index 65e5fbe..24c3409 100644
--- a/dashboard/app/globals.css
+++ b/dashboard/app/globals.css
@@ -13,7 +13,8 @@
 
 @theme inline {
   --font-display: var(--font-rebels);
-  --font-mono: var(--font-roboto-mono);
+  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-roboto-mono), ui-monospace, monospace;
 
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -71,43 +72,45 @@
 }
 
 :root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
+  --radius: 0.75rem;
+  --background: oklch(0.985 0.002 250);
+  --foreground: oklch(0.205 0.01 260);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --card-foreground: oklch(0.205 0.01 260);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --border: oklch(0.922 0 0);
-  --pop: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-
-  --success: oklch(0.7775 0.2447 144.9);
-  --destructive: oklch(0.577 0.245 27.325);
-  --warning: oklch(0.769 0.188 70.08);
-
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --popover-foreground: oklch(0.205 0.01 260);
+  /* Brand orange as primary in light mode (slightly deeper for contrast) */
+  --primary: oklch(0.62 0.2 45);
+  --primary-foreground: oklch(0.99 0 0);
+  --secondary: oklch(0.965 0.004 250);
+  --secondary-foreground: oklch(0.28 0.01 260);
+  --muted: oklch(0.965 0.004 250);
+  --muted-foreground: oklch(0.5 0.012 260);
+  --accent: oklch(0.96 0.006 250);
+  --accent-foreground: oklch(0.28 0.01 260);
+  --border: oklch(0.91 0.004 250);
+  --pop: oklch(0.94 0.004 250);
+  --input: oklch(0.91 0.004 250);
+  --ring: oklch(0.62 0.2 45);
+
+  --success: oklch(0.62 0.17 150);
+  --destructive: oklch(0.58 0.21 27.3);
+  --warning: oklch(0.72 0.16 65);
+
+  --chart-1: oklch(0.62 0.2 45);
+  --chart-2: oklch(0.62 0.11 195);
+  --chart-3: oklch(0.55 0.14 250);
+  --chart-4: oklch(0.6 0.17 300);
+  --chart-5: oklch(0.72 0.15 80);
+  --sidebar: oklch(0.99 0.002 250);
+  --sidebar-foreground: oklch(0.205 0.01 260);
+  --sidebar-primary: oklch(0.62 0.2 45);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.96 0.006 250);
+  --sidebar-accent-hover: oklch(0.93 0.008 250);
+  --sidebar-accent-foreground: oklch(0.28 0.01 260);
+  --sidebar-border: oklch(0.91 0.004 250);
+  --sidebar-ring: oklch(0.62 0.2 45);
 
   --gap: 2rem;
   --sides: 1rem;
@@ -115,48 +118,47 @@
 }
 
 .dark {
-  --background: oklch(0.12 0.002 345.62);
-  --foreground: oklch(0.9851 0 0);
-  --card: oklch(0.15 0.002 345.62);
-  --card-foreground: oklch(0.9851 0 0);
-  --popover: oklch(0.15 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  /* Updated primary color to orange shade from reference */
-  --primary: oklch(0.65 0.22 45);
-  --primary-foreground: oklch(0.9851 0 0);
-  --secondary: oklch(0.18 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.16 0 0);
-  --muted-foreground: oklch(0.65 0 0);
-  --accent: oklch(0.18 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --border: oklch(0.25 0 0);
-  --pop: oklch(0.2 0 0);
-  --input: oklch(0.22 0 0);
-  --ring: oklch(0.556 0 0);
-
-  --success: oklch(0.7775 0.2447 144.9);
-  --warning: oklch(0.769 0.188 70.08);
-  --destructive: oklch(0.5961 0.2006 36.48);
-
-  /* Updated chart colors to orange-based palette */
-  --chart-1: oklch(0.65 0.22 45);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-
-  /* Updated sidebar to darker background */
-  --sidebar: oklch(0.12 0.002 345.62);
-  --sidebar-foreground: oklch(0.9851 0 0);
-  /* Updated sidebar primary to orange */
-  --sidebar-primary: oklch(0.65 0.22 45);
-  --sidebar-primary-foreground: oklch(0.9851 0 0);
-  --sidebar-accent: oklch(0.18 0 0);
-  --sidebar-accent-hover: oklch(0.22 0 0);
-  --sidebar-accent-foreground: oklch(0.9851 0 0);
-  --sidebar-border: oklch(0.25 0 0);
-  --sidebar-ring: oklch(0.556 0 0);
+  /* Modern cool-slate dark surfaces */
+  --background: oklch(0.165 0.006 265);
+  --foreground: oklch(0.97 0 0);
+  --card: oklch(0.205 0.006 265);
+  --card-foreground: oklch(0.97 0 0);
+  --popover: oklch(0.21 0.006 265);
+  --popover-foreground: oklch(0.97 0 0);
+  /* Calmer brand orange */
+  --primary: oklch(0.68 0.19 47);
+  --primary-foreground: oklch(0.99 0 0);
+  --secondary: oklch(0.245 0.006 265);
+  --secondary-foreground: oklch(0.97 0 0);
+  --muted: oklch(0.225 0.006 265);
+  --muted-foreground: oklch(0.7 0.01 265);
+  --accent: oklch(0.245 0.006 265);
+  --accent-foreground: oklch(0.97 0 0);
+  --border: oklch(0.28 0.006 265);
+  --pop: oklch(0.225 0.006 265);
+  --input: oklch(0.26 0.006 265);
+  --ring: oklch(0.68 0.19 47);
+
+  --success: oklch(0.72 0.17 150);
+  --warning: oklch(0.78 0.15 75);
+  --destructive: oklch(0.62 0.2 25);
+
+  /* Coherent modern chart palette */
+  --chart-1: oklch(0.68 0.19 47);
+  --chart-2: oklch(0.72 0.12 195);
+  --chart-3: oklch(0.66 0.14 255);
+  --chart-4: oklch(0.68 0.17 305);
+  --chart-5: oklch(0.8 0.15 80);
+
+  --sidebar: oklch(0.185 0.006 265);
+  --sidebar-foreground: oklch(0.97 0 0);
+  --sidebar-primary: oklch(0.68 0.19 47);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.245 0.006 265);
+  --sidebar-accent-hover: oklch(0.285 0.006 265);
+  --sidebar-accent-foreground: oklch(0.97 0 0);
+  --sidebar-border: oklch(0.28 0.006 265);
+  --sidebar-ring: oklch(0.68 0.19 47);
 }
 
 @layer base {
@@ -164,146 +166,107 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-muted text-foreground font-mono overscroll-none;
+    @apply bg-background text-foreground font-sans overscroll-none;
   }
 }
 
-/* Enhanced shadows that work in both light and dark modes */
+/* Soft, calm shadows for both light and dark modes */
 .shadow-navbar {
-  box-shadow: 
-    0 2px 4px -1px rgb(0 0 0 / 0.1), 
-    0 4px 6px -1px rgb(0 0 0 / 0.1),
-    0 1px 0px 0px rgb(0 0 0 / 0.05);
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.04),
+    0 1px 0 rgb(0 0 0 / 0.03);
 }
 
 .dark .shadow-navbar {
-  box-shadow: 
-    0 2px 4px -1px rgb(0 0 0 / 0.8), 
-    0 4px 6px -1px rgb(0 0 0 / 0.6),
-    0 1px 0px 0px oklch(0.65 0.22 45 / 0.2),
-    inset 0 1px 0 0 oklch(0.65 0.22 45 / 0.1);
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.35),
+    0 1px 0 rgb(255 255 255 / 0.02);
 }
 
 .shadow-sidebar {
-  box-shadow: 
-    4px 0 6px -1px rgb(0 0 0 / 0.1), 
-    2px 0 4px -1px rgb(0 0 0 / 0.06),
-    8px 0 15px -3px rgb(0 0 0 / 0.1);
+  box-shadow:
+    1px 0 2px rgb(0 0 0 / 0.04),
+    2px 0 8px -4px rgb(0 0 0 / 0.06);
 }
 
 .dark .shadow-sidebar {
-  box-shadow: 
-    4px 0 6px -1px rgb(0 0 0 / 0.9), 
-    2px 0 4px -1px rgb(0 0 0 / 0.7),
-    8px 0 15px -3px rgb(0 0 0 / 0.8),
-    inset -1px 0 0 0 oklch(0.65 0.22 45 / 0.15),
-    4px 0 20px -5px oklch(0.65 0.22 45 / 0.1);
+  box-shadow:
+    1px 0 3px rgb(0 0 0 / 0.4),
+    4px 0 16px -8px rgb(0 0 0 / 0.5);
 }
 
 .shadow-panel {
-  box-shadow: 
-    0 4px 6px -1px rgb(0 0 0 / 0.1), 
-    0 2px 4px -1px rgb(0 0 0 / 0.06),
-    0 10px 15px -3px rgb(0 0 0 / 0.1);
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.04),
+    0 4px 12px -6px rgb(0 0 0 / 0.08);
 }
 
 .dark .shadow-panel {
-  box-shadow: 
-    0 4px 6px -1px rgb(0 0 0 / 0.8), 
-    0 2px 4px -1px rgb(0 0 0 / 0.6),
-    0 10px 15px -3px rgb(0 0 0 / 0.7),
-    inset 0 1px 0 0 oklch(0.65 0.22 45 / 0.08),
-    0 0 30px -10px oklch(0.65 0.22 45 / 0.05);
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.4),
+    0 8px 20px -10px rgb(0 0 0 / 0.5);
 }
 
 .shadow-card {
-  box-shadow: 
-    0 1px 3px 0 rgb(0 0 0 / 0.1), 
-    0 1px 2px 0 rgb(0 0 0 / 0.06),
-    0 4px 6px -1px rgb(0 0 0 / 0.1);
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.05),
+    0 2px 6px -3px rgb(0 0 0 / 0.08);
 }
 
 .dark .shadow-card {
-  box-shadow: 
-    0 1px 3px 0 rgb(0 0 0 / 0.8), 
-    0 1px 2px 0 rgb(0 0 0 / 0.6),
-    0 4px 6px -1px rgb(0 0 0 / 0.7),
-    inset 0 1px 0 0 oklch(0.65 0.22 45 / 0.12),
-    0 0 0 1px oklch(0.65 0.22 45 / 0.08);
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.35),
+    0 4px 12px -6px rgb(0 0 0 / 0.45);
 }
 
 .shadow-elevated {
-  box-shadow: 
-    0 10px 15px -3px rgb(0 0 0 / 0.1), 
-    0 4px 6px -2px rgb(0 0 0 / 0.05),
-    0 20px 25px -5px rgb(0 0 0 / 0.1);
+  box-shadow:
+    0 4px 12px -4px rgb(0 0 0 / 0.1),
+    0 12px 28px -12px rgb(0 0 0 / 0.14);
 }
 
 .dark .shadow-elevated {
-  box-shadow: 
-    0 10px 15px -3px rgb(0 0 0 / 0.9), 
-    0 4px 6px -2px rgb(0 0 0 / 0.7),
-    0 20px 25px -5px rgb(0 0 0 / 0.8),
-    inset 0 1px 0 0 oklch(0.65 0.22 45 / 0.15),
-    0 0 0 1px oklch(0.65 0.22 45 / 0.1),
-    0 0 40px -10px oklch(0.65 0.22 45 / 0.08);
+  box-shadow:
+    0 4px 12px -4px rgb(0 0 0 / 0.5),
+    0 16px 32px -16px rgb(0 0 0 / 0.6);
 }
 
 .shadow-button {
-  box-shadow: 
-    0 1px 2px 0 rgb(0 0 0 / 0.05),
-    0 1px 3px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
 }
 
 .dark .shadow-button {
-  box-shadow: 
-    0 1px 2px 0 rgb(0 0 0 / 0.6),
-    0 1px 3px 0 rgb(0 0 0 / 0.8),
-    inset 0 1px 0 0 oklch(0.65 0.22 45 / 0.1);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
 }
 
 .shadow-button:hover {
-  box-shadow: 
-    0 2px 4px 0 rgb(0 0 0 / 0.1),
-    0 4px 6px -1px rgb(0 0 0 / 0.1);
+  box-shadow: 0 2px 6px -2px rgb(0 0 0 / 0.12);
 }
 
 .dark .shadow-button:hover {
-  box-shadow: 
-    0 2px 4px 0 rgb(0 0 0 / 0.8),
-    0 4px 6px -1px rgb(0 0 0 / 0.9),
-    inset 0 1px 0 0 oklch(0.65 0.22 45 / 0.2),
-    0 0 15px -5px oklch(0.65 0.22 45 / 0.15);
+  box-shadow: 0 2px 8px -3px rgb(0 0 0 / 0.5);
 }
 
-/* Additional dark mode enhancements with orange theme */
 .dark .shadow-glow {
-  box-shadow: 
-    0 0 20px oklch(0.65 0.22 45 / 0.08),
-    0 0 40px oklch(0.65 0.22 45 / 0.04),
-    inset 0 0 0 1px oklch(0.65 0.22 45 / 0.1);
+  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.04);
 }
 
 .dark .shadow-border {
-  box-shadow: 
-    inset 0 0 0 1px oklch(0.65 0.22 45 / 0.15),
-    0 1px 3px 0 rgb(0 0 0 / 0.8),
-    0 0 10px -3px oklch(0.65 0.22 45 / 0.1);
+  box-shadow:
+    inset 0 0 0 1px oklch(1 0 0 / 0.04),
+    0 1px 3px rgb(0 0 0 / 0.4);
 }
 
 .dark .shadow-orange-glow {
-  box-shadow: 
-    0 0 30px oklch(0.65 0.22 45 / 0.1),
-    0 0 60px oklch(0.65 0.22 45 / 0.05),
-    inset 0 1px 0 0 oklch(0.65 0.22 45 / 0.2);
+  box-shadow:
+    1px 0 3px rgb(0 0 0 / 0.4),
+    4px 0 16px -8px rgb(0 0 0 / 0.5);
 }
 
 .dark .shadow-accent {
-  box-shadow: 
-    0 4px 6px -1px rgb(0 0 0 / 0.8),
-    0 2px 4px -1px rgb(0 0 0 / 0.6),
-    inset 0 1px 0 0 oklch(0.769 0.188 70.08 / 0.1),
-    0 0 0 1px oklch(0.769 0.188 70.08 / 0.08);
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.35),
+    0 4px 12px -6px rgb(0 0 0 / 0.45);
 }
 
 .recharts-cartesian-grid-vertical :first-child,
@@ -311,27 +274,33 @@
   opacity: 0;
 }
 
+/* Root font size scales with the user-adjustable --font-scale (default 1).
+   Base sizes bumped for readability across breakpoints. */
+html {
+  font-size: calc(100% * var(--font-scale, 1));
+}
+
 @media (min-width: 1028px) {
   html {
-    font-size: 0.7em;
+    font-size: calc(80% * var(--font-scale, 1));
   }
 }
 
 @media (min-width: 1240px) and (max-width: 1920px) {
   html {
-    font-size: 0.75em;
+    font-size: calc(85% * var(--font-scale, 1));
   }
 }
 
 @media (min-width: 1920px) {
   html {
-    font-size: 1em;
+    font-size: calc(100% * var(--font-scale, 1));
   }
 }
 
 @media (min-width: 2160px) {
   html {
-    font-size: 1.2em;
+    font-size: calc(120% * var(--font-scale, 1));
   }
 }
 
diff --git a/dashboard/app/layout.tsx b/dashboard/app/layout.tsx
index 1b63c43..3c250e1 100644
--- a/dashboard/app/layout.tsx
+++ b/dashboard/app/layout.tsx
@@ -1,5 +1,6 @@
 import type React from "react"
 import { Roboto_Mono } from "next/font/google"
+import { GeistSans } from "geist/font/sans"
 import "./globals.css"
 import type { Metadata } from "next"
 import localFont from "next/font/local"
@@ -7,6 +8,7 @@ import { SidebarProvider } from "@/components/ui/sidebar"
 import { MobileHeader } from "@/components/dashboard/mobile-header"
 import { DashboardSidebar } from "@/components/dashboard/sidebar"
 import { Providers } from "@/providers"
+import { FONT_SCALE_SCRIPT } from "@/hooks/use-font-scale"
 
 const robotoMono = Roboto_Mono({
   variable: "--font-roboto-mono",
@@ -70,8 +72,9 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <head>
         <link rel="preload" href="/fonts/Rebels-Fett.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
+        <script dangerouslySetInnerHTML={{ __html: FONT_SCALE_SCRIPT }} />
       </head>
-      <body className={`${rebelGrotesk.variable} ${robotoMono.variable} antialiased`}>
+      <body className={`${rebelGrotesk.variable} ${robotoMono.variable} ${GeistSans.variable} antialiased`}>
         <Providers>
           <SidebarProvider>
             <MobileHeader />
diff --git a/dashboard/app/transactions/page.tsx b/dashboard/app/transactions/page.tsx
index 1069d8c..9711616 100644
--- a/dashboard/app/transactions/page.tsx
+++ b/dashboard/app/transactions/page.tsx
@@ -198,8 +198,8 @@ export default function TransactionsPage() {
         {/* Title Section */}
         <div className="flex flex-col md:flex-row items-start justify-between mb-8 gap-4 md:gap-0">
           <div>
-            <h1 className="text-4xl font-serif mb-2">Transaction Network</h1>
-            <p className="text-muted-foreground">Manage and monitor payment operations</p>
+            <h1 className="text-2xl md:text-3xl font-semibold tracking-tight mb-1.5">Transaction Network</h1>
+            <p className="text-sm text-muted-foreground">Manage and monitor payment operations</p>
           </div>
           <div className="flex gap-3">
             <Button 
@@ -256,7 +256,7 @@ export default function TransactionsPage() {
         {/* Stats Cards */}
         <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
           {/* Search Card */}
-          <div className="bg-card border border-border/40 rounded-lg p-6">
+          <div className="bg-card border border-border/60 rounded-xl p-5 shadow-card">
             <div className="relative">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
               <Input placeholder="Search transactions" className="pl-10 bg-background/50 border-border/40" />
@@ -264,49 +264,49 @@ export default function TransactionsPage() {
           </div>
 
           {/* Active Transactions */}
-          <div className="bg-card border border-border/40 rounded-lg p-6">
+          <div className="bg-card border border-border/60 rounded-xl p-5 shadow-card">
             <div className="flex items-start justify-between">
               <div>
                 <div className="text-sm text-muted-foreground mb-2">TOTAL TRANSACTIONS</div>
-                <div className="text-4xl font-bold">
+                <div className="text-3xl font-bold tabular-nums tracking-tight">
                   {loading && transactionStats.total === 0 ? "..." : (!isAllTransactionsFetched && transactionStats.total !== 0 ? `${transactionStats.total}+` : transactionStats.total)}
                 </div>
                 {!isAllTransactionsFetched && transactionStats.total >= 1000 && !loading && (
                   <div className="text-xs text-muted-foreground mt-1 text-primary font-medium">1k+ limit reached</div>
                 )}
               </div>
-              <Shield className="size-8 text-foreground" />
+              <Shield className="size-7 text-primary" />
             </div>
           </div>
 
           {/* Failed */}
-          <div className="bg-card border border-border/40 rounded-lg p-6">
+          <div className="bg-card border border-border/60 rounded-xl p-5 shadow-card">
             <div className="flex items-start justify-between">
               <div>
                 <div className="text-sm text-muted-foreground mb-2">FAILED</div>
-                <div className="text-4xl font-bold text-red-500">0</div>
+                <div className="text-3xl font-bold tabular-nums tracking-tight text-destructive">0</div>
               </div>
-              <Shield className="size-8 text-red-500" />
+              <Shield className="size-7 text-destructive" />
             </div>
           </div>
 
           {/* Pending */}
-          <div className="bg-card border border-border/40 rounded-lg p-6">
+          <div className="bg-card border border-border/60 rounded-xl p-5 shadow-card">
             <div className="flex items-start justify-between">
               <div>
                 <div className="text-sm text-muted-foreground mb-2">PENDING</div>
-                <div className="text-4xl font-bold text-primary">0</div>
+                <div className="text-3xl font-bold tabular-nums tracking-tight text-warning">0</div>
               </div>
-              <Shield className="size-8 text-primary" />
+              <Shield className="size-7 text-warning" />
             </div>
           </div>
         </div>
 
         {/* Transaction Table */}
-        <div className="bg-card border border-border/40 rounded-lg overflow-hidden flex-1 flex flex-col">
+        <div className="bg-card border border-border/60 rounded-xl overflow-hidden flex-1 flex flex-col shadow-card">
           <div className="p-6 border-b border-border/40 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
             <div className="flex items-center gap-4">
-              <h2 className="text-xl font-serif">TRANSACTION ROSTER</h2>
+              <h2 className="text-base font-semibold uppercase tracking-wide">Transaction Roster</h2>
               {/* Fetching timestamps indicator */}
               {hasFetched && fetchingTimestamps && (
                 <div className="flex items-center gap-2 text-sm text-muted-foreground">
@@ -612,7 +612,7 @@ export default function TransactionsPage() {
       <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
         <DialogContent className="max-w-2xl bg-card border-border/40">
           <DialogHeader className="relative">
-            <DialogTitle className="text-3xl font-display mb-2">{selectedTransaction ? formatAddress(selectedTransaction.buyer) : ''}</DialogTitle>
+            <DialogTitle className="text-2xl font-mono font-semibold mb-2">{selectedTransaction ? formatAddress(selectedTransaction.buyer) : ''}</DialogTitle>
              <div className="flex items-center gap-2 text-muted-foreground font-mono">
                 <span className="break-all">{selectedTransaction?.transactionHash}</span>
                 {selectedTransaction && (
diff --git a/dashboard/components/dashboard/layout/index.tsx b/dashboard/components/dashboard/layout/index.tsx
index 48fc8ea..c183df2 100644
--- a/dashboard/components/dashboard/layout/index.tsx
+++ b/dashboard/components/dashboard/layout/index.tsx
@@ -16,20 +16,27 @@ export default function DashboardPageLayout({
 }: DashboardPageLayoutProps) {
   return (
     <div className="flex flex-col relative w-full gap-1 min-h-full">
-      <div className="flex items-center lg:items-baseline gap-2.5 md:gap-4 px-4 md:px-6 py-3 md:pb-4 lg:pt-7 ring-2 ring-pop sticky top-header-mobile lg:top-0 bg-background z-10 shadow-navbar">
-        <div className="max-lg:contents rounded bg-primary size-7 md:size-9 flex items-center justify-center my-auto shadow-card">
-          <header.icon className="ml-1 lg:ml-0 opacity-50 md:opacity-100 size-5 text-primary-foreground" />
+      <div className="flex items-center gap-3 md:gap-4 px-4 md:px-6 py-3.5 md:py-5 border border-border/60 rounded-xl sticky top-header-mobile lg:top-0 bg-background/95 backdrop-blur-sm z-10 shadow-navbar">
+        <div className="shrink-0 rounded-lg bg-primary size-8 md:size-10 flex items-center justify-center shadow-button">
+          <header.icon className="size-5 text-primary-foreground" />
+        </div>
+        <div className="flex flex-col min-w-0">
+          <h1 className="text-lg md:text-2xl lg:text-3xl font-semibold tracking-tight leading-tight truncate">
+            {header.title}
+          </h1>
+          {header.description && (
+            <span className="text-xs md:text-sm text-muted-foreground truncate lg:hidden">
+              {header.description}
+            </span>
+          )}
         </div>
-        <h1 className="text-xl lg:text-4xl font-serif leading-[1] mb-1">
-          {header.title}
-        </h1>
         {header.description && (
-          <span className="ml-auto text-xs md:text-sm text-muted-foreground block">
+          <span className="ml-auto hidden lg:block text-sm text-muted-foreground text-right">
             {header.description}
           </span>
         )}
       </div>
-      <div className="min-h-full flex-1 flex flex-col gap-8 md:gap-14 px-3 lg:px-6 py-6 md:py-10 ring-2 ring-pop bg-background shadow-panel dark:shadow-border">
+      <div className="min-h-full flex-1 flex flex-col gap-8 md:gap-12 px-3 md:px-6 py-6 md:py-9 border border-border/60 rounded-xl bg-background shadow-panel">
         {children}
       </div>
     </div>
diff --git a/dashboard/components/dashboard/mobile-header/index.tsx b/dashboard/components/dashboard/mobile-header/index.tsx
index 241d95a..8909c1a 100644
--- a/dashboard/components/dashboard/mobile-header/index.tsx
+++ b/dashboard/components/dashboard/mobile-header/index.tsx
@@ -1,28 +1,31 @@
 import Image from "next/image"
 import { SidebarTrigger } from "@/components/ui/sidebar"
 import { ThemeToggleSimple } from "@/components/theme-toggle-simple"
+import { TextSizeControl } from "@/components/text-size-control"
 
 export function MobileHeader() {
   return (
     <div className="lg:hidden h-header-mobile sticky top-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border">
-      <div className="flex items-center px-4 py-3 relative">
-        <SidebarTrigger className="absolute left-4" />
-        <div className="flex items-center gap-3 mx-auto">
-          <div className="flex items-center gap-2">
-            <div className="h-8 w-16 flex items-center justify-center">
-              <Image
-                src="/StablePay.svg"
-                alt="StablePay Logo"
-                width={32}
-                height={32}
-                className="w-8 h-8 object-contain"
-              />
-            </div>
+      <div className="flex items-center justify-between px-4 py-3 relative">
+        <SidebarTrigger />
+        <div className="flex items-center gap-2 absolute left-1/2 -translate-x-1/2">
+          <div className="h-8 w-16 flex items-center justify-center">
+            <Image
+              src="/StablePay.svg"
+              alt="StablePay Logo"
+              width={32}
+              height={32}
+              className="w-8 h-8 object-contain"
+            />
           </div>
+          <span className="text-lg font-display tracking-tight">StablePay</span>
+        </div>
+
+        {/* Right: controls */}
+        <div className="flex items-center gap-0.5">
+          <TextSizeControl />
+          <ThemeToggleSimple />
         </div>
-        
-        {/* Right: Theme Toggle */}
-        <ThemeToggleSimple />
       </div>
     </div>
   )
diff --git a/dashboard/components/dashboard/sidebar/index.tsx b/dashboard/components/dashboard/sidebar/index.tsx
index f4d6c08..eaeefe2 100644
--- a/dashboard/components/dashboard/sidebar/index.tsx
+++ b/dashboard/components/dashboard/sidebar/index.tsx
@@ -11,6 +11,7 @@ import LockIcon from "@/components/icons/lock"
 import CreditCardIcon from "@/components/icons/credit-card"
 import { usePathname } from "next/navigation"
 import { ThemeToggleSimpleClick } from "@/components/theme-toggle-simple-click"
+import { TextSizeControl } from "@/components/text-size-control"
 
 import {
   Sidebar,
@@ -134,21 +135,26 @@ export function DashboardSidebar({ className, ...props }: React.ComponentProps<t
 
   return (
     <Sidebar {...props} className={cn("py-sides", className)}>
-      <SidebarHeader className="rounded-t-lg flex gap-3 flex-row rounded-b-none">
-        <div className="flex overflow-clip size-24 shrink-0 items-center justify-center">
-          <Image
-            src="/StablePay.svg"
-            alt="StablePay Logo"
-            width={80}
-            height={80}
-            className="w-16 h-16 object-contain"
-          />
-        </div>
-        <div className="grid flex-1 text-left text-sm leading-tight">
-          <span className="text-2xl font-serif font-bold">StablePay</span>
-          <span className="text-xs uppercase">Merchant Dashboard for Payment Management</span>
+      <SidebarHeader className="rounded-t-lg rounded-b-none gap-2">
+        <div className="flex items-center gap-2.5">
+          <div className="flex shrink-0 items-center justify-center">
+            <Image
+              src="/StablePay.svg"
+              alt="StablePay Logo"
+              width={40}
+              height={40}
+              className="w-10 h-10 object-contain"
+            />
+          </div>
+          <div className="grid flex-1 text-left leading-tight min-w-0">
+            <span className="text-xl font-display tracking-tight truncate">StablePay</span>
+            <span className="text-[0.65rem] uppercase tracking-wide text-muted-foreground truncate">
+              Merchant Payments
+            </span>
+          </div>
         </div>
-        <div className="flex items-start pt-1">
+        <div className="flex items-center justify-end gap-0.5 border-t border-sidebar-border/60 pt-1.5">
+          <TextSizeControl />
           <ThemeToggleSimpleClick />
         </div>
       </SidebarHeader>
@@ -220,11 +226,11 @@ export function DashboardSidebar({ className, ...props }: React.ComponentProps<t
                         <CreditCardIcon className="size-8" />
                       </div>
                       <div className="group/item pl-3 pr-1.5 pt-2 pb-1.5 flex-1 flex bg-sidebar-accent hover:bg-sidebar-accent-active/75 items-center rounded group-data-[state=open]:bg-sidebar-accent-active group-data-[state=open]:hover:bg-sidebar-accent-active group-data-[state=open]:text-sidebar-accent-foreground">
-                        <div className="grid flex-1 text-left text-sm leading-tight">
-                          <span className="truncate text-xl font-display">
+                        <div className="grid flex-1 text-left leading-tight min-w-0">
+                          <span className="truncate text-base font-mono font-medium">
                             {`${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}`}
                           </span>
-                          <span className="truncate text-xs uppercase opacity-50 group-hover/item:opacity-100 font-mono">
+                          <span className="truncate text-[0.65rem] uppercase tracking-wide opacity-60 group-hover/item:opacity-100">
                             Connected
                           </span>
                         </div>
@@ -252,9 +258,9 @@ export function DashboardSidebar({ className, ...props }: React.ComponentProps<t
                       <CreditCardIcon className="size-8" />
                     </div>
                     <div className="group/item pl-3 pr-1.5 pt-2 pb-1.5 flex-1 flex bg-sidebar-accent hover:bg-sidebar-accent-active/75 items-center rounded">
-                      <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate text-xl font-display">Connect Wallet</span>
-                        <span className="truncate text-xs uppercase opacity-50 group-hover/item:opacity-100 font-mono">
+                      <div className="grid flex-1 text-left leading-tight min-w-0">
+                        <span className="truncate text-base font-semibold">Connect Wallet</span>
+                        <span className="truncate text-[0.65rem] uppercase tracking-wide opacity-60 group-hover/item:opacity-100">
                           Not Connected
                         </span>
                       </div>
@@ -269,11 +275,11 @@ export function DashboardSidebar({ className, ...props }: React.ComponentProps<t
                       <CreditCardIcon className="size-8" />
                     </div>
                     <div className="group/item pl-3 pr-1.5 pt-2 pb-1.5 flex-1 flex bg-sidebar-accent hover:bg-sidebar-accent-active/75 items-center rounded">
-                      <div className="grid flex-1 text-left text-sm leading-tight">
-                        <span className="truncate text-xl font-display">
+                      <div className="grid flex-1 text-left leading-tight min-w-0">
+                        <span className="truncate text-base font-mono font-medium">
                           {`${addr.slice(0, 6)}...${addr.slice(-4)}`}
                         </span>
-                        <span className="truncate text-xs uppercase opacity-50 group-hover/item:opacity-100 font-mono">
+                        <span className="truncate text-[0.65rem] uppercase tracking-wide opacity-60 group-hover/item:opacity-100">
                           Added
                         </span>
                       </div>
diff --git a/dashboard/components/dashboard/stat/index.tsx b/dashboard/components/dashboard/stat/index.tsx
index 45cf847..910f2eb 100644
--- a/dashboard/components/dashboard/stat/index.tsx
+++ b/dashboard/components/dashboard/stat/index.tsx
@@ -1,5 +1,6 @@
 import type React from "react"
 import NumberFlow from "@number-flow/react"
+import { ArrowUpRight, ArrowDownRight } from "lucide-react"
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Bullet } from "@/components/ui/bullet"
@@ -41,96 +42,50 @@ export default function DashboardStat({ label, value, description, icon, tag, in
     }
   }
 
-  const getIntentClassName = () => {
-    if (intent === "positive") return "text-success"
-    if (intent === "negative") return "text-destructive"
-    return "text-muted-foreground"
-  }
-
   const { prefix, numericValue, suffix, isNumeric } = parseValue(value)
 
   return (
-    <Card className="relative overflow-hidden min-h-[200px] shadow-card hover:shadow-elevated transition-shadow duration-300 dark:shadow-border">
+    <Card className="group relative overflow-hidden shadow-card hover:shadow-elevated transition-shadow duration-300">
       <CardHeader className="flex items-center justify-between pb-4">
-        <CardTitle className="flex items-center gap-2.5 text-base whitespace-nowrap">
+        <CardTitle className="flex items-center gap-2.5 text-xs font-medium uppercase tracking-wide text-muted-foreground whitespace-nowrap">
           <Bullet />
           {label}
         </CardTitle>
         <Icon className="size-5 text-muted-foreground" />
       </CardHeader>
 
-      <CardContent className="bg-accent flex-1 pt-4 md:pt-8 pb-6 overflow-clip relative">
-        <div className="flex items-center">
-          <span className="text-5xl md:text-6xl font-display">
+      <CardContent className="bg-card flex-1 pt-5 md:pt-6 pb-6 overflow-clip relative">
+        <div className="flex items-end gap-3">
+          <span className="text-4xl md:text-5xl font-bold tracking-tight tabular-nums leading-none">
             {isNumeric ? <NumberFlow value={numericValue} prefix={prefix} suffix={suffix} /> : value}
           </span>
           {tag && (
-            <Badge variant="default" className="uppercase ml-3">
+            <Badge variant="default" className="uppercase mb-1">
               {tag}
             </Badge>
           )}
-        </div>
-
-        {description && (
-          <div className="justify-between mt-2">
-            <p className="text-sm md:text-base font-medium text-muted-foreground tracking-wide">{description}</p>
-          </div>
-        )}
-
-        {/* Marquee Animation */}
-        {direction && (
-          <div className="absolute top-0 right-0 w-14 h-full pointer-events-none overflow-hidden group">
-            <div
+          {direction && (
+            <span
               className={cn(
-                "flex flex-col transition-all duration-500",
-                "group-hover:scale-105 group-hover:brightness-110",
-                getIntentClassName(),
-                direction === "up" ? "animate-marquee-up" : "animate-marquee-down",
+                "mb-1.5 inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-medium",
+                intent === "positive" && "bg-success/10 text-success",
+                intent === "negative" && "bg-destructive/10 text-destructive",
+                intent === "neutral" && "bg-muted text-muted-foreground",
               )}
             >
-              <div className={cn("flex", direction === "up" ? "flex-col-reverse" : "flex-col")}>
-                {Array.from({ length: 6 }, (_, i) => (
-                  <Arrow key={i} direction={direction} index={i} />
-                ))}
-              </div>
-              <div className={cn("flex", direction === "up" ? "flex-col-reverse" : "flex-col")}>
-                {Array.from({ length: 6 }, (_, i) => (
-                  <Arrow key={i} direction={direction} index={i} />
-                ))}
-              </div>
-            </div>
-          </div>
+              {direction === "up" ? (
+                <ArrowUpRight className="size-3.5" />
+              ) : (
+                <ArrowDownRight className="size-3.5" />
+              )}
+            </span>
+          )}
+        </div>
+
+        {description && (
+          <p className="mt-2.5 text-sm font-medium text-muted-foreground tracking-wide">{description}</p>
         )}
       </CardContent>
     </Card>
   )
 }
-
-interface ArrowProps {
-  direction: "up" | "down"
-  index: number
-}
-
-const Arrow = ({ direction, index }: ArrowProps) => {
-  const staggerDelay = index * 0.15 // Faster stagger
-  const phaseDelay = (index % 3) * 0.8 // Different phase groups
-
-  return (
-    <span
-      style={{
-        animationDelay: `${staggerDelay + phaseDelay}s`,
-        animationDuration: "3s",
-        animationTimingFunction: "cubic-bezier(0.4, 0.0, 0.2, 1)",
-      }}
-      className={cn(
-        "text-center text-5xl size-14 font-display leading-none block",
-        "transition-all duration-700 ease-out",
-        "animate-marquee-pulse",
-
-        "will-change-transform",
-      )}
-    >
-      {direction === "up" ? "↑" : "↓"}
-    </span>
-  )
-}
diff --git a/dashboard/components/text-size-control.tsx b/dashboard/components/text-size-control.tsx
new file mode 100644
index 0000000..35ccaac
--- /dev/null
+++ b/dashboard/components/text-size-control.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import { Type } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
+import { FONT_SCALE_OPTIONS, useFontScale } from "@/hooks/use-font-scale"
+
+export function TextSizeControl({ className }: { className?: string }) {
+  const { fontScale, setFontScale, mounted } = useFontScale()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn("size-8 text-muted-foreground hover:text-foreground", className)}
+          aria-label="Adjust text size"
+          title="Adjust text size"
+        >
+          <Type className="size-4" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-52 p-2">
+        <div className="px-1 pb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+          Text size
+        </div>
+        <div className="grid grid-cols-1 gap-1">
+          {FONT_SCALE_OPTIONS.map((option) => {
+            const isActive = mounted && fontScale === option.value
+            return (
+              <button
+                key={option.value}
+                type="button"
+                onClick={() => setFontScale(option.value)}
+                aria-pressed={isActive}
+                className={cn(
+                  "flex items-center justify-between rounded-md px-2.5 py-1.5 text-left transition-colors",
+                  isActive
+                    ? "bg-primary/10 text-foreground"
+                    : "text-muted-foreground hover:bg-accent hover:text-foreground",
+                )}
+              >
+                <span
+                  className={cn(
+                    option.value === "sm" && "text-sm",
+                    option.value === "base" && "text-base",
+                    option.value === "lg" && "text-lg",
+                    option.value === "xl" && "text-xl",
+                  )}
+                >
+                  {option.label}
+                </span>
+                {isActive && <span className="size-1.5 rounded-full bg-primary" />}
+              </button>
+            )
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/dashboard/components/theme-toggle-simple-click.tsx b/dashboard/components/theme-toggle-simple-click.tsx
index 4a98cc5..a0ba07d 100644
--- a/dashboard/components/theme-toggle-simple-click.tsx
+++ b/dashboard/components/theme-toggle-simple-click.tsx
@@ -15,16 +15,12 @@ export function ThemeToggleSimpleClick() {
   }, [])
 
   const cycleTheme = () => {
-    console.log('Current theme:', theme)
     if (theme === "light") {
       setTheme("dark")
-      console.log('Switching to dark')
     } else if (theme === "dark") {
       setTheme("system")
-      console.log('Switching to system')
     } else {
       setTheme("light")
-      console.log('Switching to light')
     }
   }
 
diff --git a/dashboard/components/transactions/filter-panel.tsx b/dashboard/components/transactions/filter-panel.tsx
index 2991eaa..9238996 100644
--- a/dashboard/components/transactions/filter-panel.tsx
+++ b/dashboard/components/transactions/filter-panel.tsx
@@ -44,9 +44,12 @@ export function FilterPanel({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side="right" className="w-[400px] sm:w-[540px] pl-4 overflow-y-auto">
-        <SheetHeader className="pb-4 border-b border-border/40">
-          <SheetTitle className="text-2xl font-serif">Filter Transactions</SheetTitle>
+      <SheetContent
+        side="right"
+        className="w-full max-w-[440px] sm:max-w-[520px] px-5 sm:px-6 gap-0 overflow-x-hidden overflow-y-auto"
+      >
+        <SheetHeader className="px-0 pt-1 pb-4 border-b border-border/40">
+          <SheetTitle className="text-2xl font-semibold tracking-tight pr-8">Filter Transactions</SheetTitle>
           <SheetDescription>
             Refine your transaction roster by applying multiple filters.
           </SheetDescription>
@@ -218,7 +221,7 @@ export function FilterPanel({
           </div>
         </div>
 
-        <SheetFooter className="flex-row justify-between gap-3 pt-4 border-t border-border/40 sm:justify-between pb-8">
+        <SheetFooter className="flex-row flex-wrap justify-between gap-3 px-0 pt-4 pb-6 border-t border-border/40 sm:justify-between">
           <Button variant="outline" onClick={handleClear} className="w-full sm:w-auto">
             <RotateCcw className="size-4 mr-2" />
             Clear
diff --git a/dashboard/components/ui/card.tsx b/dashboard/components/ui/card.tsx
index a49639c..4903a09 100644
--- a/dashboard/components/ui/card.tsx
+++ b/dashboard/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "text-card-foreground flex flex-col gap-2 rounded-lg p-1.5 bg-pop",
+        "text-card-foreground flex flex-col gap-2 rounded-xl p-1.5 bg-pop border border-border/60",
         className
       )}
       {...props}
diff --git a/dashboard/hooks/use-font-scale.tsx b/dashboard/hooks/use-font-scale.tsx
new file mode 100644
index 0000000..138f532
--- /dev/null
+++ b/dashboard/hooks/use-font-scale.tsx
@@ -0,0 +1,85 @@
+"use client"
+
+import * as React from "react"
+
+export type FontScaleValue = "sm" | "base" | "lg" | "xl"
+
+export const FONT_SCALES: Record<FontScaleValue, number> = {
+  sm: 0.9,
+  base: 1,
+  lg: 1.1,
+  xl: 1.2,
+}
+
+export const FONT_SCALE_OPTIONS: { value: FontScaleValue; label: string }[] = [
+  { value: "sm", label: "Small" },
+  { value: "base", label: "Default" },
+  { value: "lg", label: "Large" },
+  { value: "xl", label: "Extra Large" },
+]
+
+const STORAGE_KEY = "stablepay_font_scale"
+const DEFAULT_SCALE: FontScaleValue = "base"
+
+/** Applies the numeric multiplier to the document root as a CSS variable. */
+function applyScale(value: FontScaleValue) {
+  if (typeof document === "undefined") return
+  document.documentElement.style.setProperty("--font-scale", String(FONT_SCALES[value]))
+}
+
+type FontScaleContextValue = {
+  fontScale: FontScaleValue
+  setFontScale: (value: FontScaleValue) => void
+  mounted: boolean
+}
+
+const FontScaleContext = React.createContext<FontScaleContextValue | null>(null)
+
+export function FontScaleProvider({ children }: { children: React.ReactNode }) {
+  const [fontScale, setFontScaleState] = React.useState<FontScaleValue>(DEFAULT_SCALE)
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY) as FontScaleValue | null
+      if (saved && saved in FONT_SCALES) {
+        setFontScaleState(saved)
+        applyScale(saved)
+      }
+    } catch {
+      // ignore storage access errors
+    }
+  }, [])
+
+  const setFontScale = React.useCallback((value: FontScaleValue) => {
+    setFontScaleState(value)
+    applyScale(value)
+    try {
+      localStorage.setItem(STORAGE_KEY, value)
+    } catch {
+      // ignore storage access errors
+    }
+  }, [])
+
+  const contextValue = React.useMemo(
+    () => ({ fontScale, setFontScale, mounted }),
+    [fontScale, setFontScale, mounted],
+  )
+
+  return <FontScaleContext.Provider value={contextValue}>{children}</FontScaleContext.Provider>
+}
+
+export function useFontScale() {
+  const ctx = React.useContext(FontScaleContext)
+  if (!ctx) {
+    throw new Error("useFontScale must be used within a FontScaleProvider")
+  }
+  return ctx
+}
+
+/**
+ * Inline script that runs before paint to set --font-scale from localStorage,
+ * preventing a flash of the default text size on first load.
+ */
+export const FONT_SCALE_SCRIPT = `(function(){try{var s=localStorage.getItem("${STORAGE_KEY}");var m={sm:0.9,base:1,lg:1.1,xl:1.2};if(s&&m[s]){document.documentElement.style.setProperty("--font-scale",String(m[s]));}}catch(e){}})();`
diff --git a/dashboard/hooks/use-theme-permissions.ts b/dashboard/hooks/use-theme-permissions.ts
index 3361e92..4b8baab 100644
--- a/dashboard/hooks/use-theme-permissions.ts
+++ b/dashboard/hooks/use-theme-permissions.ts
@@ -14,7 +14,7 @@ const DEFAULT_PERMISSIONS: ThemePermissions = {
   allowLightMode: true,
   allowDarkMode: true,
   allowSystemMode: true,
-  defaultTheme: "dark",
+  defaultTheme: "system",
   lockTheme: false,
 }
 
diff --git a/dashboard/providers.tsx b/dashboard/providers.tsx
index dbe6007..ae073c7 100644
--- a/dashboard/providers.tsx
+++ b/dashboard/providers.tsx
@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { WagmiProvider } from "wagmi"
 import { config } from "@/lib/wagmi-config"
 import { ThemeProvider } from "@/components/theme-provider"
+import { FontScaleProvider } from "@/hooks/use-font-scale"
 
 const queryClient = new QueryClient()
 
@@ -13,11 +14,11 @@ export function Providers({ children }: { children: React.ReactNode }) {
       <QueryClientProvider client={queryClient}>
         <ThemeProvider
           attribute="class"
-          defaultTheme="dark"
+          defaultTheme="system"
           enableSystem
           disableTransitionOnChange
         >
-          {children}
+          <FontScaleProvider>{children}</FontScaleProvider>
         </ThemeProvider>
       </QueryClientProvider>
     </WagmiProvider>

From 50d61c18a46e88e235678594c5f3b16b040f4239 Mon Sep 17 00:00:00 2001
From: DeveloperAmrit <kittyamrit005@gmail.com>
Date: Sun, 19 Jul 2026 12:19:27 +0530
Subject: [PATCH 2/3] fix: Improved UI/UX

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index 9308a4b..21708a0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -324,3 +324,5 @@ TSWLatexianTemp*
 # option is specified. Footnotes are the stored in a file with suffix Notes.bib.
 # Uncomment the next line to have this generated file ignored.
 #*Notes.bib
+
+.claude/
\ No newline at end of file

From 3a995cf93e5bc15da6edda88537dddcb7efe0627 Mon Sep 17 00:00:00 2001
From: DeveloperAmrit <kittyamrit005@gmail.com>
Date: Sun, 19 Jul 2026 12:44:43 +0530
Subject: [PATCH 3/3] fix: Fixed coderabbit marked issues

---
 dashboard/components/dashboard/stat/index.tsx | 20 ++++++++++++++-----
 dashboard/hooks/use-font-scale.tsx            |  9 ++++++++-
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/dashboard/components/dashboard/stat/index.tsx b/dashboard/components/dashboard/stat/index.tsx
index 910f2eb..e48696f 100644
--- a/dashboard/components/dashboard/stat/index.tsx
+++ b/dashboard/components/dashboard/stat/index.tsx
@@ -44,6 +44,15 @@ export default function DashboardStat({ label, value, description, icon, tag, in
 
   const { prefix, numericValue, suffix, isNumeric } = parseValue(value)
 
+  // `intent` is optional, so anything other than positive/negative falls back
+  // to the neutral styling rather than rendering an uncolored pill.
+  const trendPillClassName =
+    intent === "positive"
+      ? "bg-success/10 text-success"
+      : intent === "negative"
+        ? "bg-destructive/10 text-destructive"
+        : "bg-muted text-muted-foreground"
+
   return (
     <Card className="group relative overflow-hidden shadow-card hover:shadow-elevated transition-shadow duration-300">
       <CardHeader className="flex items-center justify-between pb-4">
@@ -68,16 +77,17 @@ export default function DashboardStat({ label, value, description, icon, tag, in
             <span
               className={cn(
                 "mb-1.5 inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-medium",
-                intent === "positive" && "bg-success/10 text-success",
-                intent === "negative" && "bg-destructive/10 text-destructive",
-                intent === "neutral" && "bg-muted text-muted-foreground",
+                trendPillClassName,
               )}
             >
               {direction === "up" ? (
-                <ArrowUpRight className="size-3.5" />
+                <ArrowUpRight className="size-3.5" aria-hidden="true" />
               ) : (
-                <ArrowDownRight className="size-3.5" />
+                <ArrowDownRight className="size-3.5" aria-hidden="true" />
               )}
+              <span className="sr-only">
+                {direction === "up" ? "Trending up" : "Trending down"}
+              </span>
             </span>
           )}
         </div>
diff --git a/dashboard/hooks/use-font-scale.tsx b/dashboard/hooks/use-font-scale.tsx
index 138f532..13b9c85 100644
--- a/dashboard/hooks/use-font-scale.tsx
+++ b/dashboard/hooks/use-font-scale.tsx
@@ -81,5 +81,12 @@ export function useFontScale() {
 /**
  * Inline script that runs before paint to set --font-scale from localStorage,
  * preventing a flash of the default text size on first load.
+ *
+ * The scale map is serialized from FONT_SCALES so it can never drift from the
+ * values used at runtime.
  */
-export const FONT_SCALE_SCRIPT = `(function(){try{var s=localStorage.getItem("${STORAGE_KEY}");var m={sm:0.9,base:1,lg:1.1,xl:1.2};if(s&&m[s]){document.documentElement.style.setProperty("--font-scale",String(m[s]));}}catch(e){}})();`
+export const FONT_SCALE_SCRIPT = `(function(){try{var s=localStorage.getItem(${JSON.stringify(
+  STORAGE_KEY,
+)});var m=${JSON.stringify(
+  FONT_SCALES,
+)};if(s&&Object.prototype.hasOwnProperty.call(m,s)){document.documentElement.style.setProperty("--font-scale",String(m[s]));}}catch(e){}})();`