From b229dcd81b4855ecc072cd6d84b6689bde6c2c17 Mon Sep 17 00:00:00 2001
From: MAYUR <mayuresh1377@gmail.com>
Date: Fri, 1 Aug 2025 00:37:56 +0530
Subject: [PATCH] feat: add dark mode

---
 package-lock.json                             | 136 +++++++++++++++---
 src/app/dashboard/layout.tsx                  |  14 +-
 src/app/i/[id]/page.tsx                       |   2 +-
 src/app/invoices/create/page.tsx              |   2 +-
 src/app/layout.tsx                            |  23 +--
 src/components/background-wrapper.tsx         |  59 +++++---
 src/components/batch-payout.tsx               |  70 ++++-----
 src/components/compliance-status.tsx          |  20 +--
 .../blocks/create-recurring-payment-form.tsx  |   4 +-
 .../create-recurring-payment.tsx              |  32 +++--
 .../dashboard/blocks/invoice-row.tsx          |  19 ++-
 .../dashboard/invoices-received.tsx           |  22 +--
 src/components/dashboard/invoices-sent.tsx    |  14 +-
 src/components/dashboard/subscriptions.tsx    |  20 +--
 src/components/direct-payout.tsx              |  40 +++---
 src/components/footer.tsx                     |   2 +-
 src/components/header.tsx                     |  24 ++--
 src/components/invoice-form.tsx               |   8 +-
 src/components/invoice-me-link.tsx            |  12 +-
 src/components/invoice-me-links.tsx           |   6 +-
 src/components/invoice-preview.tsx            |  54 ++++---
 src/components/mode-toggle.tsx                |  40 ++++++
 src/components/payment-route.tsx              |  28 ++--
 src/components/payment-section.tsx            |  62 ++++----
 .../payment-secured-using-request.tsx         |   6 +-
 src/components/short-address.tsx              |   2 +-
 src/components/stat-card.tsx                  |   4 +-
 src/components/subscription-plan-preview.tsx  |  36 +++--
 .../blocks/subscription-plan-link.tsx         |  18 +--
 src/components/ui/table/empty-state.tsx       |   6 +-
 src/components/ui/table/pagination.tsx        |   4 +-
 src/components/ui/table/table-head-cell.tsx   |   2 +-
 src/components/ui/tooltip.tsx                 |   4 +-
 .../blocks/completed-payments.tsx             |   2 +-
 .../blocks/frequency-badge.tsx                |   8 +-
 .../blocks/status-badge.tsx                   |  10 +-
 .../view-recurring-payments.tsx               |  38 ++---
 37 files changed, 535 insertions(+), 318 deletions(-)
 create mode 100644 src/components/mode-toggle.tsx

diff --git a/package-lock.json b/package-lock.json
index a42931ea..202eb068 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -82,6 +82,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -1861,6 +1862,7 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "string-width": "^5.1.2",
@@ -1878,12 +1880,14 @@
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@isaacs/cliui/node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "eastasianwidth": "^0.2.0",
@@ -1901,6 +1905,7 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^6.1.0",
@@ -1918,6 +1923,7 @@
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
       "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
@@ -1932,6 +1938,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1941,6 +1948,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1950,12 +1958,14 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
       "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -2204,6 +2214,7 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
@@ -2217,6 +2228,7 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -2226,6 +2238,7 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
@@ -2285,6 +2298,7 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "engines": {
@@ -3892,7 +3906,7 @@
       "version": "20.17.17",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.17.tgz",
       "integrity": "sha512-/WndGO4kIfMicEQLTi/mDANUu/iVUhT7KboZPdEqqHQ4aTS+3qT3U5gIqWDFV+XouorjfgGqvKILJeHhuQgFYg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.19.2"
@@ -3902,7 +3916,7 @@
       "version": "8.11.11",
       "resolved": "https://registry.npmjs.org/@types/pg/-/pg-8.11.11.tgz",
       "integrity": "sha512-kGT1qKM8wJQ5qlawUrEkXgvMSXoV213KfMGXcwfDwUIfUHXqXYXOfS1nE1LINRJVVVx5wCm70XnFlMHaIcQAfw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/node": "*",
@@ -3914,14 +3928,14 @@
       "version": "15.7.14",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
       "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.18",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
       "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -3932,7 +3946,7 @@
       "version": "18.3.5",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz",
       "integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^18.0.0"
@@ -4480,6 +4494,7 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -4492,6 +4507,7 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
       "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -4504,6 +4520,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
       "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/anymatch": {
@@ -4534,6 +4551,7 @@
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/aria-hidden": {
@@ -4584,6 +4602,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/base-x": {
@@ -4635,6 +4654,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -4659,6 +4679,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -4668,6 +4689,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -4745,6 +4767,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -4787,6 +4810,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "anymatch": "~3.1.2",
@@ -4811,6 +4835,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -5059,6 +5084,7 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -5088,6 +5114,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "cssesc": "bin/cssesc"
@@ -5100,7 +5127,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/date-fns": {
@@ -5217,6 +5244,7 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/dijkstrajs": {
@@ -5229,6 +5257,7 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/dotenv": {
@@ -5426,6 +5455,7 @@
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/emoji-regex": {
@@ -5614,6 +5644,7 @@
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
       "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -5630,6 +5661,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -5651,6 +5683,7 @@
       "version": "1.19.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.0.tgz",
       "integrity": "sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
@@ -5660,6 +5693,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -5714,6 +5748,7 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
       "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "cross-spawn": "^7.0.0",
@@ -5744,6 +5779,7 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -5758,6 +5794,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -5823,6 +5860,7 @@
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
       "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "foreground-child": "^3.1.0",
@@ -5843,6 +5881,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.3"
@@ -5888,6 +5927,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -6002,6 +6042,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "binary-extensions": "^2.0.0"
@@ -6014,6 +6055,7 @@
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
       "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -6029,6 +6071,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -6051,6 +6094,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -6063,6 +6107,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -6097,6 +6142,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/isows": {
@@ -6118,6 +6164,7 @@
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
       "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
@@ -6133,6 +6180,7 @@
       "version": "1.21.7",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "jiti": "bin/jiti.js"
@@ -6160,6 +6208,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
       "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=14"
@@ -6172,6 +6221,7 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/lint-staged": {
@@ -6366,6 +6416,7 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -6375,6 +6426,7 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
@@ -6447,6 +6499,7 @@
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
       "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
@@ -6472,6 +6525,7 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -6493,6 +6547,7 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0",
@@ -6680,6 +6735,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -6689,6 +6745,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -6698,7 +6755,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
       "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/ofetch": {
@@ -6828,6 +6885,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
       "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
       "license": "BlueOak-1.0.0"
     },
     "node_modules/path-exists": {
@@ -6843,6 +6901,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -6852,12 +6911,14 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-scurry": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
       "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "lru-cache": "^10.2.0",
@@ -6923,7 +6984,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pg-numeric/-/pg-numeric-1.0.2.tgz",
       "integrity": "sha512-BM/Thnrw5jm2kKLE5uJkXqqExRUY/toLHda65XgFTBTFYZyopbKjBe29Ii3RbkvlsMoFwD+tHeGaCjjv0gHlyw==",
-      "devOptional": true,
+      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=4"
@@ -6948,7 +7009,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-4.0.2.tgz",
       "integrity": "sha512-cRL3JpS3lKMGsKaWndugWQoLOCoP+Cic8oseVcbr0qhPzYD5DWXK+RZ9LY9wxRf7RQia4SCwQlXk0q6FCPrVng==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "pg-int8": "1.0.1",
@@ -7062,6 +7123,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -7109,6 +7171,7 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -7127,6 +7190,7 @@
       "version": "8.5.2",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.2.tgz",
       "integrity": "sha512-MjOadfU3Ys9KYoX0AdkBlFEF1Vx37uCCeN4ZHnmwm9FfpbsGWMZeBLMmmpY+6Ocqod7mkdZ0DT31OlbsFrLlkA==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -7155,6 +7219,7 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
@@ -7172,6 +7237,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "camelcase-css": "^2.0.1"
@@ -7191,6 +7257,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -7226,6 +7293,7 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
       "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -7251,6 +7319,7 @@
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -7264,13 +7333,14 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/postgres-array": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-3.0.2.tgz",
       "integrity": "sha512-6faShkdFugNQCLwucjPcY5ARoW1SlbnrZjmGl0IrrqewpvxvhSLHimCVzqeuULCbG0fQv7Dtk1yDbG3xv7Veog==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -7280,7 +7350,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-3.0.0.tgz",
       "integrity": "sha512-CNd4jim9RFPkObHSjVHlVrxoVQXz7quwNFpz7RY1okNNme49+sVyiTvTRobiLV548Hx/hb1BG+iE7h9493WzFw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "obuf": "~1.1.2"
@@ -7293,7 +7363,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-2.1.0.tgz",
       "integrity": "sha512-K7Juri8gtgXVcDfZttFKVmhglp7epKb1K4pgrkLxehjqkrgPhfG6OO8LHLkfaqkbpjNRnra018XwAr1yQFWGcA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -7303,7 +7373,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-3.0.0.tgz",
       "integrity": "sha512-BSNDnbyZCXSxgA+1f5UU2GmwhoI0aU5yMxRGO8CdFEcY2BQF9xm/7MqKnYoM1nJDk8nONNWDk9WeSmePFhQdlw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -7313,7 +7383,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/postgres-range/-/postgres-range-1.1.4.tgz",
       "integrity": "sha512-i/hbxIE9803Alj/6ytL7UHQxRvZkI9O4Sy+J3HGc4F4oo/2eQAjTSNJ0bfxyse3bH0nuVesCk+3IRLaMtG3H6w==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/preact": {
@@ -7385,6 +7455,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7544,6 +7615,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "pify": "^2.3.0"
@@ -7567,6 +7639,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "picomatch": "^2.2.1"
@@ -7624,6 +7697,7 @@
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
       "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.16.0",
@@ -7686,6 +7760,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "iojs": ">=1.0.0",
@@ -7703,6 +7778,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7788,6 +7864,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -7800,6 +7877,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -7809,6 +7887,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=14"
@@ -7970,6 +8049,7 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -7984,6 +8064,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -7993,12 +8074,14 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/string-width-cjs/node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -8008,6 +8091,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -8020,6 +8104,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
@@ -8036,6 +8121,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -8048,6 +8134,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -8093,6 +8180,7 @@
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
       "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
@@ -8115,6 +8203,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -8136,6 +8225,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -8158,6 +8248,7 @@
       "version": "3.4.17",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
       "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
@@ -8204,6 +8295,7 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0"
@@ -8213,6 +8305,7 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
@@ -8240,6 +8333,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -8258,6 +8352,7 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/tslib": {
@@ -8270,7 +8365,7 @@
       "version": "5.7.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
       "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -8314,7 +8409,7 @@
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
       "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/unstorage": {
@@ -8637,6 +8732,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -8677,6 +8773,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
@@ -8694,6 +8791,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -8703,6 +8801,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -8718,12 +8817,14 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/wrap-ansi-cjs/node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -8733,6 +8834,7 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -8747,6 +8849,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -8801,6 +8904,7 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
       "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
+      "dev": true,
       "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 53825753..aeb5c5a0 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -2,6 +2,7 @@ import { BackgroundWrapper } from "@/components/background-wrapper";
 import { DashboardNavigation } from "@/components/dashboard-navigation";
 import { Footer } from "@/components/footer";
 import { Header } from "@/components/header";
+import { Button } from "@/components/ui/button";
 import { getCurrentSession } from "@/server/auth";
 import { PlusCircle } from "lucide-react";
 import Link from "next/link";
@@ -24,13 +25,12 @@ export default async function DashboardLayout({
       <main className="flex-grow flex flex-col w-full max-w-sm sm:max-w-2xl md:max-w-4xl lg:max-w-6xl xl:max-w-[72rem] mx-auto px-4 sm:px-6 lg:px-8 py-8 z-10">
         <div className="flex justify-between items-center mb-8">
           <h1 className="mb-2 text-4xl font-bold tracking-tight">Dashboard</h1>
-          <Link
-            href="/invoices/create"
-            className="bg-black hover:bg-zinc-800 text-white transition-colors px-4 py-2 rounded-md flex items-center"
-          >
-            <PlusCircle className="mr-2 h-4 w-4" />
-            Create Invoice
-          </Link>
+          <Button asChild variant="default" className="flex items-center gap-2">
+            <Link href="/invoices/create">
+              <PlusCircle className="mr-2 h-4 w-4" />
+              Create Invoice
+            </Link>
+          </Button>
         </div>
         <DashboardNavigation />
         {children}
diff --git a/src/app/i/[id]/page.tsx b/src/app/i/[id]/page.tsx
index abaa45c3..764b0a7e 100644
--- a/src/app/i/[id]/page.tsx
+++ b/src/app/i/[id]/page.tsx
@@ -39,7 +39,7 @@ export default async function InvoiceMePage({
         <div className="flex items-center mb-8">
           <Link
             href="/"
-            className="text-zinc-600 hover:text-black transition-colors mr-4"
+            className="text-muted-foreground hover:text-foreground transition-colors mr-4"
           >
             <ArrowLeft className="h-6 w-6" />
           </Link>
diff --git a/src/app/invoices/create/page.tsx b/src/app/invoices/create/page.tsx
index 249388da..bf87bd6c 100644
--- a/src/app/invoices/create/page.tsx
+++ b/src/app/invoices/create/page.tsx
@@ -27,7 +27,7 @@ export default async function CreateInvoicePage() {
         <div className="flex items-center mb-8">
           <Link
             href="/dashboard"
-            className="text-zinc-600 hover:text-black transition-colors mr-4"
+            className="text-muted-foreground hover:text-foreground transition-colors mr-4"
           >
             <ArrowLeft className="h-6 w-6" />
           </Link>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index fa0736f7..f5fa6c52 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -9,6 +9,7 @@ import type { Metadata } from "next";
 import localFont from "next/font/local";
 import { cookies } from "next/headers";
 import "./globals.css";
+import { ThemeProvider } from "next-themes";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -32,20 +33,22 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GTM_ID as string} />
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <AppKit>
-          <TooltipProvider>
-            <TRPCReactProvider cookies={cookies().toString()}>
-              <BackgroundWrapper>{children}</BackgroundWrapper>
-            </TRPCReactProvider>
-            <Toaster />
-          </TooltipProvider>
-        </AppKit>
-        <VersionDisplay githubRelease="https://github.com/RequestNetwork/easy-invoice/releases" />
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <AppKit>
+            <TooltipProvider>
+              <TRPCReactProvider cookies={cookies().toString()}>
+                <BackgroundWrapper>{children}</BackgroundWrapper>
+              </TRPCReactProvider>
+              <Toaster />
+            </TooltipProvider>
+          </AppKit>
+          <VersionDisplay githubRelease="https://github.com/RequestNetwork/easy-invoice/releases" />
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/src/components/background-wrapper.tsx b/src/components/background-wrapper.tsx
index a3642ff7..1e67350e 100644
--- a/src/components/background-wrapper.tsx
+++ b/src/components/background-wrapper.tsx
@@ -1,3 +1,5 @@
+"use client";
+import { useTheme } from "next-themes";
 import type { ReactNode } from "react";
 
 interface BackgroundWrapperProps {
@@ -23,6 +25,8 @@ export function BackgroundWrapper({
     to: "zinc-200",
   },
 }: BackgroundWrapperProps) {
+  const { theme } = useTheme();
+
   // Convert Tailwind color names to CSS variables or hex values
   const getTailwindColor = (colorName: string): string => {
     const colors: Record<string, string> = {
@@ -42,38 +46,53 @@ export function BackgroundWrapper({
       "zinc-100": "#f4f4f5",
       "zinc-200": "#e4e4e7",
 
+      // Dark mode colors
+      "zinc-800": "#27272a",
+      "zinc-900": "#18181b",
+      "slate-800": "#1e293b",
+      "slate-900": "#0f172a",
+
       // Add any other colors you need here
     };
 
     return colors[colorName] || "#f4f4f5"; // Default to zinc-100 if color not found
   };
 
+  const isDark = theme === "dark";
+
   return (
-    <div className="min-h-screen relative overflow-hidden bg-[#FAFAFA]">
-      {/* Decorative elements */}
-      <div className="absolute top-0 right-0 w-[600px] h-[600px] -translate-y-1/2 translate-x-1/2">
-        <div
-          className="w-full h-full rounded-full opacity-30 blur-3xl"
-          style={{
-            background: `linear-gradient(to bottom right, ${getTailwindColor(topGradient.from)}, ${getTailwindColor(topGradient.to)})`,
-          }}
-        />
-      </div>
-      <div className="absolute bottom-0 left-0 w-[600px] h-[600px] translate-y-1/2 -translate-x-1/2">
-        <div
-          className="w-full h-full rounded-full opacity-30 blur-3xl"
-          style={{
-            background: `linear-gradient(to top right, ${getTailwindColor(bottomGradient.from)}, ${getTailwindColor(bottomGradient.to)})`,
-          }}
-        />
-      </div>
+    <div
+      className={`min-h-screen relative overflow-hidden ${isDark ? "bg-[#0A0A0A]" : "bg-[#FAFAFA]"}`}
+    >
+      {/* Decorative elements - only show in light mode */}
+      {!isDark && (
+        <>
+          <div className="absolute top-0 right-0 w-[600px] h-[600px] -translate-y-1/2 translate-x-1/2">
+            <div
+              className="w-full h-full rounded-full opacity-30 blur-3xl"
+              style={{
+                background: `linear-gradient(to bottom right, ${getTailwindColor(topGradient.from)}, ${getTailwindColor(topGradient.to)})`,
+              }}
+            />
+          </div>
+          <div className="absolute bottom-0 left-0 w-[600px] h-[600px] translate-y-1/2 -translate-x-1/2">
+            <div
+              className="w-full h-full rounded-full opacity-30 blur-3xl"
+              style={{
+                background: `linear-gradient(to top right, ${getTailwindColor(bottomGradient.from)}, ${getTailwindColor(bottomGradient.to)})`,
+              }}
+            />
+          </div>
+        </>
+      )}
 
       {/* Dot pattern background */}
       <div
         className="absolute inset-0"
         style={{
-          backgroundImage:
-            "radial-gradient(circle at 1px 1px, #e5e5e5 1px, transparent 0)",
+          backgroundImage: isDark
+            ? "radial-gradient(circle at 1px 1px, #1f1f1f 1px, transparent 0)"
+            : "radial-gradient(circle at 1px 1px, #e5e5e5 1px, transparent 0)",
           backgroundSize: "40px 40px",
         }}
       />
diff --git a/src/components/batch-payout.tsx b/src/components/batch-payout.tsx
index 7637e4fb..0635e1de 100644
--- a/src/components/batch-payout.tsx
+++ b/src/components/batch-payout.tsx
@@ -259,8 +259,8 @@ export function BatchPayout() {
 
   return (
     <div className="flex justify-center mx-auto w-full">
-      <Card className="w-full shadow-lg border-zinc-200/80">
-        <CardHeader className="bg-zinc-50 rounded-t-lg border-b border-zinc-200/80">
+      <Card className="w-full shadow-lg border border-border bg-card text-card-foreground">
+        <CardHeader className="bg-muted rounded-t-lg border-b border-border">
           <div className="flex items-center justify-between">
             <div>
               <CardTitle className="flex items-center gap-2">
@@ -282,8 +282,10 @@ export function BatchPayout() {
         {!isAppKitReady ? (
           <CardContent className="py-16">
             <div className="flex flex-col items-center justify-center space-y-4">
-              <Loader2 className="h-10 w-10 animate-spin text-zinc-400" />
-              <p className="text-zinc-500">Initializing payment system...</p>
+              <Loader2 className="h-10 w-10 animate-spin text-muted-foreground" />
+              <p className="text-muted-foreground">
+                Initializing payment system...
+              </p>
             </div>
           </CardContent>
         ) : (
@@ -293,13 +295,13 @@ export function BatchPayout() {
               <div className="flex justify-center mb-6">
                 <div className="flex items-center space-x-4">
                   <div
-                    className={`flex items-center ${currentStep >= 1 ? "text-black" : "text-zinc-300"}`}
+                    className={`flex items-center ${currentStep >= 1 ? "text-foreground" : "text-muted-foreground"}`}
                   >
                     <div
                       className={`w-8 h-8 rounded-full border-2 flex items-center justify-center ${
                         currentStep >= 1
-                          ? "border-black bg-zinc-50"
-                          : "border-zinc-300"
+                          ? "border-foreground bg-muted"
+                          : "border-border"
                       }`}
                     >
                       <Wallet className="w-4 h-4" />
@@ -308,17 +310,17 @@ export function BatchPayout() {
                   </div>
 
                   <div
-                    className={`w-16 h-0.5 ${currentStep >= 2 ? "bg-black" : "bg-zinc-300"}`}
+                    className={`w-16 h-0.5 ${currentStep >= 2 ? "bg-foreground" : "bg-border"}`}
                   />
 
                   <div
-                    className={`flex items-center ${currentStep >= 2 ? "text-black" : "text-zinc-300"}`}
+                    className={`flex items-center ${currentStep >= 2 ? "text-foreground" : "text-muted-foreground"}`}
                   >
                     <div
                       className={`w-8 h-8 rounded-full border-2 flex items-center justify-center ${
                         currentStep >= 2
-                          ? "border-black bg-zinc-50"
-                          : "border-zinc-300"
+                          ? "border-foreground bg-muted"
+                          : "border-border"
                       }`}
                     >
                       <Send className="w-4 h-4" />
@@ -330,7 +332,7 @@ export function BatchPayout() {
 
               {currentStep === 1 ? (
                 <div className="flex flex-col items-center justify-center py-10 space-y-4">
-                  <p className="text-zinc-600 text-center max-w-md">
+                  <p className="text-muted-foreground text-center max-w-md">
                     Connect your wallet to send batch payments to multiple
                     addresses
                   </p>
@@ -345,10 +347,10 @@ export function BatchPayout() {
                   className="space-y-6"
                 >
                   {/* Excel-like table */}
-                  <div className="border rounded-lg overflow-hidden">
+                  <div className="border rounded-lg overflow-hidden border-border">
                     <Table>
                       <TableHeader>
-                        <TableRow className="bg-zinc-50">
+                        <TableRow className="bg-muted">
                           <TableHead className="w-12 text-center">#</TableHead>
                           <TableHead className="min-w-[300px]">
                             Recipient Address
@@ -376,9 +378,9 @@ export function BatchPayout() {
                           return (
                             <TableRow
                               key={field.id}
-                              className="hover:bg-zinc-50/50"
+                              className="hover:bg-muted/50"
                             >
-                              <TableCell className="text-center text-sm text-zinc-500 font-medium">
+                              <TableCell className="text-center text-sm text-muted-foreground font-medium">
                                 {index + 1}
                               </TableCell>
                               <TableCell>
@@ -386,7 +388,7 @@ export function BatchPayout() {
                                   placeholder="0x..."
                                   {...form.register(`payouts.${index}.payee`)}
                                   disabled={paymentStatus === "processing"}
-                                  className="font-mono text-sm border-0 shadow-none focus-visible:ring-1 focus-visible:ring-zinc-300"
+                                  className="font-mono text-sm border-0 shadow-none focus-visible:ring-1 focus-visible:ring-border"
                                 />
                               </TableCell>
                               <TableCell>
@@ -399,7 +401,7 @@ export function BatchPayout() {
                                     valueAsNumber: true,
                                   })}
                                   disabled={paymentStatus === "processing"}
-                                  className="text-sm border-0 shadow-none focus-visible:ring-1 focus-visible:ring-zinc-300"
+                                  className="text-sm border-0 shadow-none focus-visible:ring-1 focus-visible:ring-border"
                                 />
                               </TableCell>
                               <TableCell>
@@ -410,7 +412,7 @@ export function BatchPayout() {
                                   }
                                   disabled={paymentStatus === "processing"}
                                 >
-                                  <SelectTrigger className="text-sm border-0 shadow-none focus:ring-1 focus:ring-zinc-300">
+                                  <SelectTrigger className="text-sm border-0 shadow-none focus:ring-1 focus:ring-border">
                                     <SelectValue />
                                   </SelectTrigger>
                                   <SelectContent>
@@ -441,7 +443,7 @@ export function BatchPayout() {
                                     }
                                     disabled={paymentStatus === "processing"}
                                   >
-                                    <SelectTrigger className="text-sm border-0 shadow-none focus:ring-1 focus:ring-zinc-300">
+                                    <SelectTrigger className="text-sm border-0 shadow-none focus:ring-1 focus:ring-border">
                                       <SelectValue />
                                     </SelectTrigger>
                                     <SelectContent>
@@ -458,7 +460,7 @@ export function BatchPayout() {
                                     </SelectContent>
                                   </Select>
                                 ) : (
-                                  <div className="text-sm text-zinc-500 px-3 py-2">
+                                  <div className="text-sm text-muted-foreground px-3 py-2">
                                     {formatCurrencyLabel(invoiceCurrency)}
                                   </div>
                                 )}
@@ -471,7 +473,7 @@ export function BatchPayout() {
                                     size="sm"
                                     onClick={() => duplicatePayment(index)}
                                     disabled={fields.length >= MAX_PAYMENTS}
-                                    className="h-8 w-8 p-0 text-zinc-500 hover:text-zinc-700"
+                                    className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
                                   >
                                     <Copy className="h-3 w-3" />
                                   </Button>
@@ -481,7 +483,7 @@ export function BatchPayout() {
                                       variant="ghost"
                                       size="sm"
                                       onClick={() => removePayment(index)}
-                                      className="h-8 w-8 p-0 text-red-500 hover:text-red-700 hover:bg-red-50"
+                                      className="h-8 w-8 p-0 text-destructive hover:text-destructive-foreground hover:bg-destructive/10"
                                     >
                                       <Trash2 className="h-3 w-3" />
                                     </Button>
@@ -504,26 +506,28 @@ export function BatchPayout() {
                       fields.length >= MAX_PAYMENTS ||
                       paymentStatus === "processing"
                     }
-                    className="w-full border-dashed border-2 border-zinc-300 text-zinc-600 hover:border-zinc-400 hover:text-zinc-700"
+                    className="w-full border-dashed border-2 border-border text-muted-foreground hover:border-foreground hover:text-foreground"
                   >
                     <Plus className="h-4 w-4 mr-2" />
                     Add Payment Row ({fields.length}/{MAX_PAYMENTS})
                   </Button>
 
                   {/* Enhanced Summary */}
-                  <Card className="bg-zinc-50 border-zinc-200">
+                  <Card className="bg-muted border border-border">
                     <CardContent className="p-4">
-                      <h3 className="font-medium text-zinc-900 mb-3">
+                      <h3 className="font-medium text-foreground mb-3">
                         Batch Summary
                       </h3>
                       <div className="grid grid-cols-2 gap-6">
                         <div className="space-y-2 text-sm">
                           <div className="flex justify-between">
-                            <span className="text-zinc-600">Total Items:</span>
+                            <span className="text-muted-foreground">
+                              Total Items:
+                            </span>
                             <span className="font-medium">{fields.length}</span>
                           </div>
                           <div className="flex justify-between">
-                            <span className="text-zinc-600">
+                            <span className="text-muted-foreground">
                               Ready to Process:
                             </span>
                             <span className="font-medium">
@@ -531,7 +535,7 @@ export function BatchPayout() {
                             </span>
                           </div>
                           <div className="flex justify-between">
-                            <span className="text-zinc-600">
+                            <span className="text-muted-foreground">
                               Unique Addresses:
                             </span>
                             <span className="font-medium">
@@ -540,7 +544,7 @@ export function BatchPayout() {
                           </div>
                         </div>
                         <div className="space-y-2 text-sm">
-                          <div className="font-medium text-zinc-900 mb-2">
+                          <div className="font-medium text-foreground mb-2">
                             Totals by Currency:
                           </div>
                           {Object.keys(totalsByCurrency).length > 0 ? (
@@ -550,7 +554,7 @@ export function BatchPayout() {
                                   key={currency}
                                   className="flex justify-between"
                                 >
-                                  <span className="text-zinc-600">
+                                  <span className="text-muted-foreground">
                                     {formatCurrencyLabel(currency)}:
                                   </span>
                                   <span className="font-medium">{total}</span>
@@ -558,7 +562,7 @@ export function BatchPayout() {
                               ),
                             )
                           ) : (
-                            <div className="text-zinc-500 italic">
+                            <div className="text-muted-foreground italic">
                               No amounts entered
                             </div>
                           )}
@@ -571,7 +575,7 @@ export function BatchPayout() {
                     <button
                       type="button"
                       onClick={() => open()}
-                      className="flex items-center text-sm text-zinc-500 hover:text-zinc-800 transition-colors"
+                      className="flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
                     >
                       <span className="font-mono mr-2">
                         {address?.substring(0, 6)}...
diff --git a/src/components/compliance-status.tsx b/src/components/compliance-status.tsx
index 815bfe33..56c910e8 100644
--- a/src/components/compliance-status.tsx
+++ b/src/components/compliance-status.tsx
@@ -28,29 +28,29 @@ type StatusConfig = {
 
 const STATUS_CONFIG: Record<StatusType, StatusConfig> = {
   not_started: {
-    icon: <AlertCircle className="h-5 w-5 text-red-500" />,
+    icon: <AlertCircle className="h-5 w-5 text-destructive" />,
     text: "Not Started",
-    color: "bg-red-50 border-red-200 text-red-700",
+    color: "bg-destructive/10 border-destructive text-destructive-foreground",
   },
   initiated: {
-    icon: <Clock className="h-5 w-5 text-amber-500" />,
+    icon: <Clock className="h-5 w-5 text-warning" />,
     text: "Initiated",
-    color: "bg-amber-50 border-amber-200 text-amber-700",
+    color: "bg-warning/10 border-warning text-warning-foreground",
   },
   pending: {
-    icon: <Clock className="h-5 w-5 text-amber-500" />,
+    icon: <Clock className="h-5 w-5 text-warning" />,
     text: "Pending",
-    color: "bg-amber-50 border-amber-200 text-amber-700",
+    color: "bg-warning/10 border-warning text-warning-foreground",
   },
   completed: {
-    icon: <CheckCircle className="h-5 w-5 text-green-500" />,
+    icon: <CheckCircle className="h-5 w-5 text-success" />,
     text: "Completed",
-    color: "bg-green-50 border-green-200 text-green-700",
+    color: "bg-success/10 border-success text-success-foreground",
   },
   approved: {
-    icon: <CheckCircle className="h-5 w-5 text-green-500" />,
+    icon: <CheckCircle className="h-5 w-5 text-success" />,
     text: "Completed",
-    color: "bg-green-50 border-green-200 text-green-700",
+    color: "bg-success/10 border-success text-success-foreground",
   },
 };
 
diff --git a/src/components/create-recurring-payment/blocks/create-recurring-payment-form.tsx b/src/components/create-recurring-payment/blocks/create-recurring-payment-form.tsx
index b5976c5f..e1de3d6a 100644
--- a/src/components/create-recurring-payment/blocks/create-recurring-payment-form.tsx
+++ b/src/components/create-recurring-payment/blocks/create-recurring-payment-form.tsx
@@ -190,7 +190,7 @@ export function CreateRecurringPaymentForm() {
                     />
                   </FormControl>
                   <FormMessage />
-                  <p className="text-xs text-zinc-500">
+                  <p className="text-xs text-muted-foreground">
                     Minimum 2, maximum 256 executions
                   </p>
                 </FormItem>
@@ -276,7 +276,7 @@ export function CreateRecurringPaymentForm() {
           <button
             type="button"
             onClick={() => open()}
-            className="flex items-center text-sm text-zinc-500 hover:text-zinc-800 transition-colors"
+            className="flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
             disabled={isProcessing}
           >
             <span className="font-mono mr-2">
diff --git a/src/components/create-recurring-payment/create-recurring-payment.tsx b/src/components/create-recurring-payment/create-recurring-payment.tsx
index 3c524c1d..0974c2a8 100644
--- a/src/components/create-recurring-payment/create-recurring-payment.tsx
+++ b/src/components/create-recurring-payment/create-recurring-payment.tsx
@@ -35,8 +35,8 @@ export function CreateRecurringPayment() {
 
   return (
     <div className="flex justify-center mx-auto w-full max-w-6xl">
-      <Card className="w-full shadow-lg border-zinc-200/80">
-        <CardHeader className="bg-zinc-50 rounded-t-lg border-b border-zinc-200/80">
+      <Card className="w-full shadow-lg border border-border bg-card text-card-foreground">
+        <CardHeader className="bg-muted rounded-t-lg border-b border-border">
           <CardTitle className="flex items-center gap-2">
             <Plus className="h-5 w-5" />
             Create New Recurring Payout
@@ -46,8 +46,10 @@ export function CreateRecurringPayment() {
         {!isAppKitReady ? (
           <CardContent className="py-16">
             <div className="flex flex-col items-center justify-center space-y-4">
-              <Loader2 className="h-10 w-10 animate-spin text-zinc-400" />
-              <p className="text-zinc-500">Initializing payment system...</p>
+              <Loader2 className="h-10 w-10 animate-spin text-muted-foreground" />
+              <p className="text-muted-foreground">
+                Initializing payment system...
+              </p>
             </div>
           </CardContent>
         ) : (
@@ -60,16 +62,16 @@ export function CreateRecurringPayment() {
                     className={`flex items-center ${
                       currentStep === "connect-wallet" ||
                       currentStep === "create-payment"
-                        ? "text-black"
-                        : "text-zinc-300"
+                        ? "text-foreground"
+                        : "text-muted-foreground"
                     }`}
                   >
                     <div
                       className={`w-8 h-8 rounded-full border-2 flex items-center justify-center ${
                         currentStep === "connect-wallet" ||
                         currentStep === "create-payment"
-                          ? "border-black bg-zinc-50"
-                          : "border-zinc-300"
+                          ? "border-foreground bg-muted"
+                          : "border-border"
                       }`}
                     >
                       <Wallet className="w-4 h-4" />
@@ -80,23 +82,23 @@ export function CreateRecurringPayment() {
                   <div
                     className={`w-16 h-0.5 ${
                       currentStep === "create-payment"
-                        ? "bg-black"
-                        : "bg-zinc-300"
+                        ? "bg-foreground"
+                        : "bg-border"
                     }`}
                   />
 
                   <div
                     className={`flex items-center ${
                       currentStep === "create-payment"
-                        ? "text-black"
-                        : "text-zinc-300"
+                        ? "text-foreground"
+                        : "text-muted-foreground"
                     }`}
                   >
                     <div
                       className={`w-8 h-8 rounded-full border-2 flex items-center justify-center ${
                         currentStep === "create-payment"
-                          ? "border-black bg-zinc-50"
-                          : "border-zinc-300"
+                          ? "border-foreground bg-muted"
+                          : "border-border"
                       }`}
                     >
                       <Send className="w-4 h-4" />
@@ -108,7 +110,7 @@ export function CreateRecurringPayment() {
 
               {currentStep === "connect-wallet" ? (
                 <div className="flex flex-col items-center justify-center py-10 space-y-4">
-                  <p className="text-zinc-600 text-center max-w-md">
+                  <p className="text-muted-foreground text-center max-w-md">
                     Connect your wallet to create recurring payouts
                   </p>
                   <Button onClick={() => open()} size="lg" className="mt-2">
diff --git a/src/components/dashboard/blocks/invoice-row.tsx b/src/components/dashboard/blocks/invoice-row.tsx
index 3d1f69a8..5ed9bb49 100644
--- a/src/components/dashboard/blocks/invoice-row.tsx
+++ b/src/components/dashboard/blocks/invoice-row.tsx
@@ -62,13 +62,13 @@ export const InvoiceRow = ({ invoice, type, children }: InvoiceRowProps) => {
 
   return (
     <>
-      <TableRow className="hover:bg-zinc-50/50">
+      <TableRow className="hover:bg-muted/50">
         {children && <TableCell>{children}</TableCell>}
         <TableCell className="font-medium">
           <div className="flex flex-col">
             <span>{invoice.invoiceNumber}</span>
             {invoice.recurrence && (
-              <span className="text-xs text-zinc-500 flex items-center gap-1">
+              <span className="text-xs text-muted-foreground flex items-center gap-1">
                 ↻ {invoice.recurrence?.frequency?.toLowerCase()}
                 {invoice.isRecurrenceStopped && (
                   <Badge variant="outline" className="ml-1 text-xs py-0 px-1">
@@ -84,7 +84,7 @@ export const InvoiceRow = ({ invoice, type, children }: InvoiceRowProps) => {
             <span>
               {type === "sent" ? invoice.clientName : invoice.creatorName}
             </span>
-            <code className="text-xs text-zinc-500">
+            <code className="text-xs text-muted-foreground">
               {type === "sent" ? invoice.clientEmail : invoice.creatorEmail}
             </code>
           </div>
@@ -93,12 +93,9 @@ export const InvoiceRow = ({ invoice, type, children }: InvoiceRowProps) => {
           <div className="flex flex-col">
             <span>${Number(invoice.amount).toLocaleString()}</span>
             {invoice?.recurrence?.startDate && (
-              <span className="text-xs text-zinc-500">
+              <span className="text-xs text-muted-foreground">
                 from{" "}
-                {format(
-                  new Date(invoice?.recurrence?.startDate),
-                  "do MMM yyyy",
-                )}
+                {format(new Date(invoice?.recurrence?.startDate), "do MMM yyyy")}
               </span>
             )}
           </div>
@@ -116,9 +113,9 @@ export const InvoiceRow = ({ invoice, type, children }: InvoiceRowProps) => {
           <div className="flex items-center space-x-2">
             <Link
               href={`/invoices/${invoice.id}`}
-              className="inline-flex items-center justify-center h-8 w-8 rounded-md border border-zinc-200 bg-white hover:bg-zinc-50 transition-colors"
+              className="inline-flex items-center justify-center h-8 w-8 rounded-md border border-border bg-card hover:bg-muted transition-colors"
             >
-              <Eye className="h-4 w-4 text-zinc-600" />
+              <Eye className="h-4 w-4 text-muted-foreground" />
               <span className="sr-only">View</span>
             </Link>
 
@@ -132,7 +129,7 @@ export const InvoiceRow = ({ invoice, type, children }: InvoiceRowProps) => {
                   disabled={stopRecurrenceMutation.isLoading}
                   className="h-8 w-8"
                 >
-                  <Ban className="h-4 w-4 text-zinc-600" />
+                  <Ban className="h-4 w-4 text-muted-foreground" />
                   <span className="sr-only">
                     {stopRecurrenceMutation.isLoading
                       ? "Stopping..."
diff --git a/src/components/dashboard/invoices-received.tsx b/src/components/dashboard/invoices-received.tsx
index cdf8d054..dc2cb198 100644
--- a/src/components/dashboard/invoices-received.tsx
+++ b/src/components/dashboard/invoices-received.tsx
@@ -35,7 +35,7 @@ const RETRIEVE_ALL_INVOICES_POLLING_INTERVAL = 3000;
 
 const TableColumns = () => (
   <TableRow className="hover:bg-transparent border-none">
-    <TableHeadCell className="text-zinc-500 font-medium w-[1%]">
+    <TableHeadCell className="text-muted-foreground font-medium w-[1%]">
       Select
     </TableHeadCell>
     <TableHeadCell>Invoice #</TableHeadCell>
@@ -44,7 +44,7 @@ const TableColumns = () => (
     <TableHeadCell>Currency</TableHeadCell>
     <TableHeadCell>Due Date</TableHeadCell>
     <TableHeadCell>Status</TableHeadCell>
-    <TableHeadCell className="text-zinc-500 font-medium w-[1%]">
+    <TableHeadCell className="text-muted-foreground font-medium w-[1%]">
       Actions
     </TableHeadCell>
   </TableRow>
@@ -187,14 +187,14 @@ export const InvoicesReceived = ({
   return (
     <div className="space-y-6">
       {selectedInvoices.length > 0 && (
-        <div className="bg-zinc-50 border border-zinc-200 rounded-lg p-4">
+        <div className="bg-muted border border-border rounded-lg p-4">
           <div className="flex items-center justify-between">
             <div>
               <p className="font-medium">
                 {selectedInvoices.length} invoice
                 {selectedInvoices.length > 1 ? "s" : ""} selected
               </p>
-              <p className="text-sm text-zinc-600">
+              <p className="text-sm text-muted-foreground">
                 Total: $
                 {selectedInvoices
                   .reduce((sum, invoice) => sum + Number(invoice.amount), 0)
@@ -204,7 +204,7 @@ export const InvoicesReceived = ({
             <Button
               onClick={handleBatchPayInvoices}
               disabled={isPayingInvoices}
-              className="bg-black hover:bg-zinc-800 text-white"
+              className="bg-primary hover:bg-primary/80 text-primary-foreground"
             >
               {isPayingInvoices ? "Paying..." : "Pay Selected"}
             </Button>
@@ -216,21 +216,21 @@ export const InvoicesReceived = ({
         <StatCard
           title="Total Invoices"
           value={invoices?.length || 0}
-          icon={<FileText className="h-4 w-4 text-zinc-600" />}
+          icon={<FileText className="h-4 w-4 text-muted-foreground" />}
         />
         <StatCard
           title="Outstanding Invoices"
           value={outstanding}
-          icon={<AlertCircle className="h-4 w-4 text-zinc-600" />}
+          icon={<AlertCircle className="h-4 w-4 text-muted-foreground" />}
         />
         <StatCard
           title="Total Due"
           value={`$${total.toLocaleString()}`}
-          icon={<DollarSign className="h-4 w-4 text-zinc-600" />}
+          icon={<DollarSign className="h-4 w-4 text-muted-foreground" />}
         />
       </div>
 
-      <Card className="border border-zinc-100">
+      <Card className="border border-border">
         <CardContent className="p-0">
           <Table>
             <TableHeader>
@@ -241,7 +241,9 @@ export const InvoicesReceived = ({
                 <TableRow>
                   <TableCell colSpan={8} className="p-0">
                     <EmptyState
-                      icon={<DollarSign className="h-6 w-6 text-zinc-600" />}
+                      icon={
+                        <DollarSign className="h-6 w-6 text-muted-foreground" />
+                      }
                       title="No invoices to pay"
                       subtitle="When someone creates an invoice for you, it will appear here"
                     />
diff --git a/src/components/dashboard/invoices-sent.tsx b/src/components/dashboard/invoices-sent.tsx
index 871f5de2..b22bcd84 100644
--- a/src/components/dashboard/invoices-sent.tsx
+++ b/src/components/dashboard/invoices-sent.tsx
@@ -60,21 +60,21 @@ export const InvoicesSent = ({ initialSentInvoices }: InvoicesSentProps) => {
         <StatCard
           title="Total Invoices"
           value={invoices?.length || 0}
-          icon={<FileText className="h-4 w-4 text-zinc-600" />}
+          icon={<FileText className="h-4 w-4 text-muted-foreground" />}
         />
         <StatCard
           title="Outstanding Invoices"
           value={outstanding}
-          icon={<AlertCircle className="h-4 w-4 text-zinc-600" />}
+          icon={<AlertCircle className="h-4 w-4 text-muted-foreground" />}
         />
         <StatCard
           title="Total Payments"
           value={`$${total.toLocaleString()}`}
-          icon={<DollarSign className="h-4 w-4 text-zinc-600" />}
+          icon={<DollarSign className="h-4 w-4 text-muted-foreground" />}
         />
       </div>
 
-      <Card className="border border-zinc-100">
+      <Card className="border border-border">
         <CardContent className="p-0">
           <Table>
             <TableHeader>
@@ -85,12 +85,14 @@ export const InvoicesSent = ({ initialSentInvoices }: InvoicesSentProps) => {
                 <TableRow>
                   <TableCell colSpan={7} className="p-0">
                     <EmptyState
-                      icon={<FileText className="h-6 w-6 text-zinc-600" />}
+                      icon={
+                        <FileText className="h-6 w-6 text-muted-foreground" />
+                      }
                       title="No invoices yet"
                       subtitle="Create your first invoice to get paid"
                       callToAction={
                         <Link href="/invoices/create">
-                          <Button className="bg-black hover:bg-zinc-800 text-white">
+                          <Button className="bg-primary hover:bg-primary/80 text-primary-foreground">
                             <Plus className="h-4 w-4 mr-2" />
                             Create Invoice
                           </Button>
diff --git a/src/components/dashboard/subscriptions.tsx b/src/components/dashboard/subscriptions.tsx
index d5854e9e..0d96d9a5 100644
--- a/src/components/dashboard/subscriptions.tsx
+++ b/src/components/dashboard/subscriptions.tsx
@@ -42,7 +42,7 @@ const ITEMS_PER_PAGE = 10;
 const ACTIVE_STATUSES = ["pending", "active"];
 
 const SubscriptionTableColumns = () => (
-  <TableRow className="hover:bg-transparent border-none">
+  <TableRow className="hover:bg-muted/50 border-none">
     <TableHeadCell>Start Date</TableHeadCell>
     <TableHeadCell>Plan Name</TableHeadCell>
     <TableHeadCell>Status</TableHeadCell>
@@ -95,7 +95,7 @@ const SubscriptionRow = ({
   const canCancel = getCanCancelPayment(subscription.status);
 
   return (
-    <TableRow className="hover:bg-zinc-50/50">
+    <TableRow className="hover:bg-muted/50">
       <TableCell>
         {subscription.createdAt
           ? format(new Date(subscription.createdAt), "do MMM yyyy")
@@ -123,7 +123,7 @@ const SubscriptionRow = ({
           <span className="text-sm font-bold">
             {subscription.totalNumberOfPayments}
           </span>
-          <span className="text-xs text-zinc-500">scheduled</span>
+          <span className="text-xs text-muted-foreground">scheduled</span>
         </div>
       </TableCell>
       <TableCell>
@@ -131,7 +131,7 @@ const SubscriptionRow = ({
           <span className="text-sm font-bold">
             {subscription.currentNumberOfPayments}
           </span>
-          <span className="text-xs text-zinc-500">completed</span>
+          <span className="text-xs text-muted-foreground">completed</span>
         </div>
       </TableCell>
       <TableCell>{subscription.chain || "N/A"}</TableCell>
@@ -274,21 +274,21 @@ export const Subscriptions = ({ initialSubscriptions }: SubscriptionProps) => {
             subscriptions?.filter((sub) => ACTIVE_STATUSES.includes(sub.status))
               .length || 0
           }
-          icon={<CreditCard className="h-4 w-4 text-zinc-600" />}
+          icon={<CreditCard className="h-4 w-4 text-muted-foreground" />}
         />
         <MultiCurrencyStatCard
           title="Subscription Commitments"
-          icon={<DollarSign className="h-4 w-4 text-zinc-600" />}
+          icon={<DollarSign className="h-4 w-4 text-muted-foreground" />}
           values={commitmentValues}
         />
         <MultiCurrencyStatCard
           title="Total Spent"
-          icon={<DollarSign className="h-4 w-4 text-zinc-600" />}
+          icon={<DollarSign className="h-4 w-4 text-muted-foreground" />}
           values={spentValues}
         />
       </div>
 
-      <Card className="border border-zinc-100">
+      <Card className="border border-border">
         <CardContent className="p-0">
           <Table>
             <TableHeader>
@@ -299,7 +299,9 @@ export const Subscriptions = ({ initialSubscriptions }: SubscriptionProps) => {
                 <TableRow>
                   <TableCell colSpan={12} className="p-0">
                     <EmptyState
-                      icon={<CreditCard className="h-6 w-6 text-zinc-600" />}
+                      icon={
+                        <CreditCard className="h-6 w-6 text-muted-foreground" />
+                      }
                       title="No active subscriptions"
                       subtitle="You haven't subscribed to any plans yet"
                     />
diff --git a/src/components/direct-payout.tsx b/src/components/direct-payout.tsx
index c3c90362..73aa2e86 100644
--- a/src/components/direct-payout.tsx
+++ b/src/components/direct-payout.tsx
@@ -189,8 +189,8 @@ export function DirectPayment() {
 
   return (
     <div className="flex justify-center mx-auto w-full">
-      <Card className="w-full shadow-lg border-zinc-200/80">
-        <CardHeader className="bg-zinc-50 rounded-t-lg border-b border-zinc-200/80">
+      <Card className="w-full shadow-lg border border-border bg-card text-card-foreground">
+        <CardHeader className="bg-muted rounded-t-lg border-b border-border">
           <CardTitle className="flex items-center gap-2">
             <CreditCard className="h-5 w-5" />
             Direct Payout
@@ -200,8 +200,10 @@ export function DirectPayment() {
         {!isAppKitReady ? (
           <CardContent className="py-16">
             <div className="flex flex-col items-center justify-center space-y-4">
-              <Loader2 className="h-10 w-10 animate-spin text-zinc-400" />
-              <p className="text-zinc-500">Initializing payment system...</p>
+              <Loader2 className="h-10 w-10 animate-spin text-muted-foreground" />
+              <p className="text-muted-foreground">
+                Initializing payment system...
+              </p>
             </div>
           </CardContent>
         ) : (
@@ -212,14 +214,16 @@ export function DirectPayment() {
                 <div className="flex items-center space-x-4">
                   <div
                     className={`flex items-center ${
-                      currentStep >= 1 ? "text-black" : "text-zinc-300"
+                      currentStep >= 1
+                        ? "text-foreground"
+                        : "text-muted-foreground"
                     }`}
                   >
                     <div
                       className={`w-8 h-8 rounded-full border-2 flex items-center justify-center ${
                         currentStep >= 1
-                          ? "border-black bg-zinc-50"
-                          : "border-zinc-300"
+                          ? "border-foreground bg-muted"
+                          : "border-border"
                       }`}
                     >
                       <Wallet className="w-4 h-4" />
@@ -229,20 +233,22 @@ export function DirectPayment() {
 
                   <div
                     className={`w-16 h-0.5 ${
-                      currentStep >= 2 ? "bg-black" : "bg-zinc-300"
+                      currentStep >= 2 ? "bg-foreground" : "bg-border"
                     }`}
                   />
 
                   <div
                     className={`flex items-center ${
-                      currentStep >= 2 ? "text-black" : "text-zinc-300"
+                      currentStep >= 2
+                        ? "text-foreground"
+                        : "text-muted-foreground"
                     }`}
                   >
                     <div
                       className={`w-8 h-8 rounded-full border-2 flex items-center justify-center ${
                         currentStep >= 2
-                          ? "border-black bg-zinc-50"
-                          : "border-zinc-300"
+                          ? "border-foreground bg-muted"
+                          : "border-border"
                       }`}
                     >
                       <Send className="w-4 h-4" />
@@ -254,7 +260,7 @@ export function DirectPayment() {
 
               {currentStep === 1 ? (
                 <div className="flex flex-col items-center justify-center py-10 space-y-4">
-                  <p className="text-zinc-600 text-center max-w-md">
+                  <p className="text-muted-foreground text-center max-w-md">
                     Connect your wallet to send direct payments to any address
                   </p>
                   <Button onClick={() => open()} size="lg" className="mt-2">
@@ -297,7 +303,7 @@ export function DirectPayment() {
                           </SelectContent>
                         </Select>
                         {form.formState.errors.invoiceCurrency && (
-                          <p className="text-sm text-red-500">
+                          <p className="text-sm text-destructive">
                             {form.formState.errors.invoiceCurrency.message}
                           </p>
                         )}
@@ -332,7 +338,7 @@ export function DirectPayment() {
                             </SelectContent>
                           </Select>
                           {form.formState.errors.paymentCurrency && (
-                            <p className="text-sm text-red-500">
+                            <p className="text-sm text-destructive">
                               {form.formState.errors.paymentCurrency.message}
                             </p>
                           )}
@@ -355,7 +361,7 @@ export function DirectPayment() {
                         disabled={paymentStatus === "processing"}
                       />
                       {form.formState.errors.amount && (
-                        <p className="text-sm text-red-500">
+                        <p className="text-sm text-destructive">
                           {form.formState.errors.amount.message}
                         </p>
                       )}
@@ -371,7 +377,7 @@ export function DirectPayment() {
                         className="font-mono"
                       />
                       {form.formState.errors.payee && (
-                        <p className="text-sm text-red-500">
+                        <p className="text-sm text-destructive">
                           {form.formState.errors.payee.message}
                         </p>
                       )}
@@ -382,7 +388,7 @@ export function DirectPayment() {
                     <button
                       type="button"
                       onClick={() => open()}
-                      className="flex items-center text-sm text-zinc-500 hover:text-zinc-800 transition-colors"
+                      className="flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
                     >
                       <span className="font-mono mr-2">
                         {address?.substring(0, 6)}...
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 7ac32804..42230ad8 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 export function Footer() {
   return (
     <footer className="w-full p-6" aria-label="Site footer">
-      <div className="max-w-7xl mx-auto flex justify-center items-center text-sm text-zinc-600">
+      <div className="max-w-7xl mx-auto flex justify-center items-center text-sm text-muted-foreground">
         <div>
           © {new Date().getFullYear()} EasyInvoice. All rights reserved. Built
           by{" "}
diff --git a/src/components/header.tsx b/src/components/header.tsx
index b49d4f85..06d03d33 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { ModeToggle } from "@/components/mode-toggle";
 import type { User } from "@/server/db/schema";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -20,10 +21,12 @@ export function Header({ user }: { user?: User | undefined }) {
           href={user ? "/dashboard" : "/"}
           className="flex items-center gap-x-2"
         >
-          <div className="w-10 h-10 rounded-xl bg-black flex items-center justify-center">
-            <span className="text-white font-bold">EI</span>
+          <div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center">
+            <span className="text-primary-foreground font-bold">EI</span>
           </div>
-          <span className="text-xl font-semibold">EasyInvoice</span>
+          <span className="text-xl font-semibold text-foreground">
+            EasyInvoice
+          </span>
         </Link>
 
         <div className="flex items-center space-x-4">
@@ -31,38 +34,38 @@ export function Header({ user }: { user?: User | undefined }) {
             <>
               <Link
                 href="/dashboard"
-                className="text-zinc-900 hover:text-zinc-600 transition-colors"
+                className="text-foreground hover:text-muted-foreground transition-colors"
               >
                 Dashboard
               </Link>
               <Link
                 href="/payouts"
-                className="text-zinc-900 hover:text-zinc-600 transition-colors"
+                className="text-foreground hover:text-muted-foreground transition-colors"
               >
                 Payouts
               </Link>
               <Link
                 href="/invoice-me"
-                className="text-zinc-900 hover:text-zinc-600 transition-colors"
+                className="text-foreground hover:text-muted-foreground transition-colors"
               >
                 Invoice Me
               </Link>
               <Link
                 href="/subscription-plans"
-                className="text-zinc-900 hover:text-zinc-600 transition-colors"
+                className="text-foreground hover:text-muted-foreground transition-colors"
               >
                 Subscription Plans
               </Link>
               <Link
                 href="/crypto-to-fiat"
-                className="text-zinc-900 hover:text-zinc-600 transition-colors"
+                className="text-foreground hover:text-muted-foreground transition-colors"
               >
                 Crypto-to-fiat
               </Link>
               {demoMeetingUrl && (
                 <Link
                   href={demoMeetingUrl}
-                  className="font-semibold text-zinc-900 underline underline-offset-4 decoration-zinc-400 hover:text-zinc-600 transition-colors"
+                  className="font-semibold text-foreground underline underline-offset-4 decoration-border hover:text-muted-foreground transition-colors"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
@@ -76,7 +79,7 @@ export function Header({ user }: { user?: User | undefined }) {
           {demoMeetingUrl && !user && (
             <Button
               asChild
-              className="bg-black hover:bg-zinc-800 text-white transition-colors"
+              className="bg-primary hover:bg-primary/80 text-primary-foreground transition-colors"
             >
               <Link
                 href={demoMeetingUrl}
@@ -87,6 +90,7 @@ export function Header({ user }: { user?: User | undefined }) {
               </Link>
             </Button>
           )}
+          <ModeToggle />
         </div>
       </nav>
     </header>
diff --git a/src/components/invoice-form.tsx b/src/components/invoice-form.tsx
index c6d8ae93..4669a208 100644
--- a/src/components/invoice-form.tsx
+++ b/src/components/invoice-form.tsx
@@ -587,12 +587,12 @@ export function InvoiceForm({
             <DialogTitle>Payment Method Pending Approval</DialogTitle>
           </DialogHeader>
           <div className="flex flex-col items-center justify-center py-8 space-y-4">
-            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-zinc-900" />
-            <p className="text-center text-zinc-600">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-foreground" />
+            <p className="text-center text-muted-foreground">
               The payment method you selected is currently pending approval.
               Please wait until it is approved before creating an invoice.
             </p>
-            <p className="text-center text-zinc-500 text-sm">
+            <p className="text-center text-muted-foreground text-sm">
               You can close this dialog. We'll notify you when approval is
               complete.
             </p>
@@ -1036,7 +1036,7 @@ export function InvoiceForm({
         <div className="flex justify-end">
           <Button
             type="submit"
-            className="bg-black hover:bg-zinc-800 text-white transition-colors"
+            className="bg-primary hover:bg-primary/80 text-primary-foreground transition-colors"
             disabled={isLoading || isSubmitting}
           >
             {isLoading || isSubmitting
diff --git a/src/components/invoice-me-link.tsx b/src/components/invoice-me-link.tsx
index d2bca56f..b73c7d9b 100644
--- a/src/components/invoice-me-link.tsx
+++ b/src/components/invoice-me-link.tsx
@@ -46,9 +46,9 @@ export function InvoiceMeLink({ link, origin }: InvoiceMeLinkProps) {
       <CardContent className="p-6">
         <div className="flex items-center justify-between gap-4">
           <div className="flex flex-col gap-2 flex-1 min-w-0">
-            <h3 className="font-medium text-zinc-900">{link.label}</h3>
+            <h3 className="font-medium text-foreground">{link.label}</h3>
             <div className="flex items-center gap-3 max-w-full">
-              <code className="text-xs text-zinc-600 bg-zinc-50 px-3 py-1.5 rounded-md truncate flex-1">
+              <code className="text-xs text-muted-foreground bg-muted px-3 py-1.5 rounded-md truncate flex-1">
                 {linkUrl}
               </code>
               <div className="flex items-center gap-1 shrink-0">
@@ -56,16 +56,16 @@ export function InvoiceMeLink({ link, origin }: InvoiceMeLinkProps) {
                   variant="ghost"
                   size="sm"
                   onClick={() => copyLink(linkUrl)}
-                  className="h-8 w-8 p-0 hover:bg-zinc-100"
+                  className="h-8 w-8 p-0 hover:bg-muted"
                   title="Copy link"
                 >
-                  <Copy className="h-4 w-4 text-zinc-600" />
+                  <Copy className="h-4 w-4 text-muted-foreground" />
                 </Button>
                 <Button
                   variant="ghost"
                   size="sm"
                   asChild
-                  className="h-8 w-8 p-0 hover:bg-zinc-100"
+                  className="h-8 w-8 p-0 hover:bg-muted"
                   title="Open link"
                 >
                   <Link
@@ -73,7 +73,7 @@ export function InvoiceMeLink({ link, origin }: InvoiceMeLinkProps) {
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    <ExternalLink className="h-4 w-4 text-zinc-600" />
+                    <ExternalLink className="h-4 w-4 text-muted-foreground" />
                   </Link>
                 </Button>
                 <AlertDialog>
diff --git a/src/components/invoice-me-links.tsx b/src/components/invoice-me-links.tsx
index 6ae06e4f..ed271420 100644
--- a/src/components/invoice-me-links.tsx
+++ b/src/components/invoice-me-links.tsx
@@ -57,7 +57,7 @@ export function InvoiceMeLinks({ initialLinks }: InvoiceMeLinksProps) {
         <div className="flex items-center ">
           <Link
             href="/dashboard"
-            className="text-zinc-600 hover:text-black transition-colors mr-4"
+            className="text-muted-foreground hover:text-foreground transition-colors mr-4"
           >
             <ArrowLeft className="h-6 w-6" />
           </Link>
@@ -67,7 +67,7 @@ export function InvoiceMeLinks({ initialLinks }: InvoiceMeLinksProps) {
         </div>
         <Button
           onClick={() => setIsCreating(true)}
-          className="bg-black text-white hover:bg-zinc-800 rounded-md px-4 py-2 text-sm font-medium"
+          className="bg-primary text-primary-foreground hover:bg-primary/80 rounded-md px-4 py-2 text-sm font-medium"
         >
           + New Link
         </Button>
@@ -96,7 +96,7 @@ export function InvoiceMeLinks({ initialLinks }: InvoiceMeLinksProps) {
                 onClick={async () => {
                   await handleCreateInvoiceMeLink();
                 }}
-                className="bg-black hover:bg-zinc-800 text-white"
+                className="bg-primary hover:bg-primary/80 text-primary-foreground"
                 disabled={isCreatingInvoiceMeLink}
               >
                 {isCreatingInvoiceMeLink ? "Creating..." : "Create"}
diff --git a/src/components/invoice-preview.tsx b/src/components/invoice-preview.tsx
index 5e07cc67..4344e8ad 100644
--- a/src/components/invoice-preview.tsx
+++ b/src/components/invoice-preview.tsx
@@ -29,25 +29,27 @@ export function InvoicePreview({
     );
 
   return (
-    <Card className="w-full bg-white shadow-sm border-0">
+    <Card className="w-full bg-card text-card-foreground shadow-sm border border-border">
       <CardContent className="p-8 min-h-[842px]">
         {/* Header Section */}
         <div className="mb-12">
           <div className="grid grid-cols-12 gap-4">
             <div className="col-span-4">
-              <div className="text-xs text-neutral-500 mb-1">INVOICE NO</div>
+              <div className="text-xs text-muted-foreground mb-1">
+                INVOICE NO
+              </div>
               <div className="text-sm font-medium">
                 {data.invoiceNumber || "INV-001"}
               </div>
             </div>
             <div className="col-span-4">
-              <div className="text-xs text-neutral-500 mb-1">ISSUED</div>
+              <div className="text-xs text-muted-foreground mb-1">ISSUED</div>
               <div className="text-sm">
                 {formatDate(new Date().toISOString())}
               </div>
             </div>
             <div className="col-span-4">
-              <div className="text-xs text-neutral-500 mb-1">DUE DATE</div>
+              <div className="text-xs text-muted-foreground mb-1">DUE DATE</div>
               <div className="text-sm">
                 {data.dueDate ? formatDate(data.dueDate) : "MM/DD/YY"}
               </div>
@@ -55,7 +57,9 @@ export function InvoicePreview({
           </div>
           {data.isRecurring && data.frequency && (
             <div className="mt-4">
-              <div className="text-xs text-neutral-500 mb-1">RECURRING</div>
+              <div className="text-xs text-muted-foreground mb-1">
+                RECURRING
+              </div>
               <div className="text-sm flex items-center gap-1">
                 <span>↻ {data.frequency.toLowerCase()}</span>
                 {data.startDate && (
@@ -70,30 +74,32 @@ export function InvoicePreview({
         <div className="grid grid-cols-2 gap-16 mb-12">
           <div className="space-y-6">
             <div>
-              <div className="text-xs text-neutral-500 mb-3">FROM</div>
+              <div className="text-xs text-muted-foreground mb-3">FROM</div>
               <div className="space-y-1">
                 <div className="text-sm font-medium">
                   {data.creatorName || "Your name"}
                 </div>
-                <div className="text-sm text-neutral-600">
+                <div className="text-sm text-muted-foreground">
                   {data.creatorEmail || "your@email.com"}
                 </div>
               </div>
             </div>
             <div>
-              <div className="text-xs text-neutral-500 mb-1">PAYABLE TO</div>
-              <div className="text-sm text-neutral-600 font-mono break-all">
+              <div className="text-xs text-muted-foreground mb-1">
+                PAYABLE TO
+              </div>
+              <div className="text-sm text-muted-foreground font-mono break-all">
                 {data.walletAddress || "Payee address"}
               </div>
             </div>
           </div>
           <div>
-            <div className="text-xs text-neutral-500 mb-3">TO</div>
+            <div className="text-xs text-muted-foreground mb-3">TO</div>
             <div className="space-y-1">
               <div className="text-sm font-medium">
                 {data.clientName || "Client name"}
               </div>
-              <div className="text-sm text-neutral-600">
+              <div className="text-sm text-muted-foreground">
                 {data.clientEmail || "client@email.com"}
               </div>
             </div>
@@ -105,21 +111,21 @@ export function InvoicePreview({
           <table className="w-full">
             <thead>
               <tr>
-                <th className="text-xs text-neutral-500 text-left pb-3">
+                <th className="text-xs text-muted-foreground text-left pb-3">
                   DESCRIPTION
                 </th>
-                <th className="text-xs text-neutral-500 text-right pb-3">
+                <th className="text-xs text-muted-foreground text-right pb-3">
                   QTY
                 </th>
-                <th className="text-xs text-neutral-500 text-right pb-3">
+                <th className="text-xs text-muted-foreground text-right pb-3">
                   PRICE
                 </th>
-                <th className="text-xs text-neutral-500 text-right pb-3">
+                <th className="text-xs text-muted-foreground text-right pb-3">
                   AMOUNT
                 </th>
               </tr>
             </thead>
-            <tbody className="border-y border-neutral-200">
+            <tbody className="border-y border-border">
               {(
                 data.items || [
                   { description: "Description", quantity: 1, price: 0 },
@@ -145,16 +151,16 @@ export function InvoicePreview({
           <div className="flex justify-end mt-6">
             <div className="w-48">
               <div className="flex justify-between py-2">
-                <span className="text-sm text-neutral-600">Subtotal</span>
+                <span className="text-sm text-muted-foreground">Subtotal</span>
                 <span className="text-sm">{calculateTotal().toString()}</span>
               </div>
-              <div className="flex justify-between py-2 border-t border-neutral-200">
+              <div className="flex justify-between py-2 border-t border-border">
                 <span className="text-sm font-medium">Total</span>
                 <div>
                   <div className="text-sm text-right font-medium">
                     {calculateTotal().toString()}
                   </div>
-                  <div className="text-xs text-neutral-500">
+                  <div className="text-xs text-muted-foreground">
                     {formatCurrencyLabel(data.invoiceCurrency || "USD")}
                   </div>
                 </div>
@@ -167,7 +173,9 @@ export function InvoicePreview({
         <div className="grid grid-cols-2 gap-16">
           <div className="space-y-6">
             <div>
-              <div className="text-xs text-neutral-500 mb-1">PAYABLE IN</div>
+              <div className="text-xs text-muted-foreground mb-1">
+                PAYABLE IN
+              </div>
               <div className="text-sm">
                 {!data.paymentCurrency
                   ? "Choose payment currency"
@@ -182,7 +190,7 @@ export function InvoicePreview({
             {/* Bank Account Details */}
             {selectedPaymentDetails && (
               <div>
-                <div className="text-xs text-neutral-500 mb-1">
+                <div className="text-xs text-muted-foreground mb-1">
                   BANK ACCOUNT DETAILS
                 </div>
                 <div className="space-y-1 text-sm">
@@ -230,8 +238,8 @@ export function InvoicePreview({
           </div>
           {data.notes && (
             <div>
-              <div className="text-xs text-neutral-500 mb-1">NOTES</div>
-              <div className="text-sm text-neutral-600 whitespace-pre-wrap break-words max-w-[300px]">
+              <div className="text-xs text-muted-foreground mb-1">NOTES</div>
+              <div className="text-sm text-muted-foreground whitespace-pre-wrap break-words max-w-[300px]">
                 {data.notes}
               </div>
             </div>
diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx
new file mode 100644
index 00000000..1dd4ffb0
--- /dev/null
+++ b/src/components/mode-toggle.tsx
@@ -0,0 +1,40 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+export function ModeToggle() {
+  const { theme, setTheme } = useTheme();
+  const isDark = theme === "dark";
+
+  return (
+    <Button
+      variant="ghost"
+      className="relative h-8 w-16 rounded-full bg-muted p-0 dark:bg-muted"
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      aria-label="Toggle dark mode"
+    >
+      <div
+        className="absolute left-[2px] h-7 w-7 rounded-full bg-background shadow dark:bg-background"
+        style={{
+          transform: `translateX(${isDark ? 32 : 0}px) scale(1)`,
+          transition: "transform 0.3s cubic-bezier(0.4,0,0.2,1)",
+        }}
+      >
+        <div
+          className="flex h-full w-full items-center justify-center"
+          style={{
+            transform: `rotate(${isDark ? 360 : 0}deg)`,
+            transition: "transform 0.6s cubic-bezier(0.4,0,0.2,1)",
+          }}
+        >
+          {isDark ? (
+            <Moon className="h-4 w-4 text-foreground" />
+          ) : (
+            <Sun className="h-4 w-4 text-foreground" />
+          )}
+        </div>
+      </div>
+    </Button>
+  );
+}
diff --git a/src/components/payment-route.tsx b/src/components/payment-route.tsx
index 122e3bf7..f33cec6c 100644
--- a/src/components/payment-route.tsx
+++ b/src/components/payment-route.tsx
@@ -40,31 +40,31 @@ export function PaymentRoute({
   const getBadgeStyles = () => {
     if (isCryptoToFiat) {
       return {
-        bgColor: "bg-amber-100",
-        textColor: "text-amber-700",
+        bgColor: "bg-warning/10",
+        textColor: "text-warning-foreground",
         icon: <ArrowRight className="w-3 h-3 mr-1" />,
       };
     }
 
     if (isDirectPayment) {
       return {
-        bgColor: "bg-blue-100",
-        textColor: "text-blue-700",
+        bgColor: "bg-primary/10",
+        textColor: "text-primary-foreground",
         icon: <ArrowRight className="w-3 h-3 mr-1" />,
       };
     }
 
     if (isGasFreePayment) {
       return {
-        bgColor: "bg-green-100",
-        textColor: "text-green-700",
+        bgColor: "bg-success/10",
+        textColor: "text-success-foreground",
         icon: <Zap className="w-3 h-3 mr-1" />,
       };
     }
 
     return {
-      bgColor: "bg-purple-100",
-      textColor: "text-purple-700",
+      bgColor: "bg-muted",
+      textColor: "text-muted-foreground",
       icon: <Globe className="w-3 h-3 mr-1" />,
     };
   };
@@ -77,10 +77,10 @@ export function PaymentRoute({
       onClick={onClick}
       className={`w-full p-4 border rounded-lg transition-colors ${
         variant === "selected"
-          ? "border-2 border-black bg-zinc-50"
+          ? "border-2 border-primary bg-card"
           : isSelected
-            ? "bg-zinc-50 border-black"
-            : "bg-white hover:border-zinc-400"
+            ? "bg-card border-primary"
+            : "bg-background hover:border-border"
       }`}
     >
       <div className="flex items-center justify-between">
@@ -107,7 +107,7 @@ export function PaymentRoute({
                   (isDirectPayment ? "Direct Payment" : "via Paygrid")}
               </span>
             </div>
-            <div className="text-sm text-zinc-600">
+            <div className="text-sm text-muted-foreground">
               {routeType?.description || `via ${route.token}`}
             </div>
           </div>
@@ -122,11 +122,11 @@ export function PaymentRoute({
               </span>
             )}
           </div>
-          <div className="text-sm text-zinc-600">
+          <div className="text-sm text-muted-foreground">
             {typeof route.speed === "number" ? `~${route.speed}s` : "Fast"}
           </div>
           {platformFee?.percentage && platformFee?.percentage > 0 && (
-            <div className="text-sm text-zinc-600 mt-1">
+            <div className="text-sm text-muted-foreground mt-1">
               <span className="text-purple-600">
                 {platformFee?.percentage}% {route.token} platform fee
               </span>
diff --git a/src/components/payment-section.tsx b/src/components/payment-section.tsx
index 1eafd99f..4de3fb60 100644
--- a/src/components/payment-section.tsx
+++ b/src/components/payment-section.tsx
@@ -401,21 +401,21 @@ export function PaymentSection({ serverInvoice }: PaymentSectionProps) {
       </CardHeader>
       <CardContent className="space-y-6">
         {/* Secure Payment Section */}
-        <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
-          <h3 className="font-semibold text-green-800 mb-2">Secure Payment</h3>
-          <p className="text-sm text-green-700">
+        <div className="p-4 bg-success/10 border border-success rounded-lg">
+          <h3 className="font-semibold text-success mb-2">Secure Payment</h3>
+          <p className="text-sm text-success-foreground">
             This payment is secured using Request Network. Your transaction will
             be processed safely and transparently.
           </p>
         </div>
 
         {MAINNET_CURRENCIES.includes(invoice.invoiceCurrency as any) && (
-          <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg">
-            <h3 className="font-semibold text-amber-800 mb-2 flex items-center gap-2">
+          <div className="p-4 bg-warning/10 border border-warning rounded-lg">
+            <h3 className="font-semibold text-warning mb-2 flex items-center gap-2">
               <AlertCircle className="w-4 h-4" />
               Real Cryptocurrency Warning
             </h3>
-            <p className="text-sm text-amber-700">
+            <p className="text-sm text-warning-foreground">
               This invoice uses{" "}
               <span className="font-bold">
                 {formatCurrencyLabel(invoice.invoiceCurrency)}
@@ -436,10 +436,10 @@ export function PaymentSection({ serverInvoice }: PaymentSectionProps) {
               {Number(invoice.amount).toString()}
             </div>
             {showCurrencyConversion && (
-              <div className="text-sm text-zinc-600">
+              <div className="text-sm text-muted-foreground">
                 Payment will be processed in{" "}
                 {formatCurrencyLabel(invoice.paymentCurrency)}
-                <div className="mt-1 p-2 bg-amber-50 border border-amber-200 rounded text-amber-700">
+                <div className="mt-1 p-2 bg-muted border border-border rounded text-muted-foreground">
                   Note: The final amount in{" "}
                   {formatCurrencyLabel(invoice.paymentCurrency)} will be
                   calculated at the current exchange rate when payment is
@@ -452,7 +452,7 @@ export function PaymentSection({ serverInvoice }: PaymentSectionProps) {
 
         <div className="space-y-2">
           <Label>Recipient Address</Label>
-          <div className="font-mono bg-zinc-100 p-2 rounded">
+          <div className="font-mono bg-muted p-2 rounded">
             {invoice.payee}
             {selectedRoute?.isCryptoToFiat && (
               <div className="mt-2 text-sm text-amber-700">
@@ -471,15 +471,17 @@ export function PaymentSection({ serverInvoice }: PaymentSectionProps) {
               <div className="flex items-center space-x-4">
                 <div
                   className={`flex items-center ${
-                    currentStep >= 1 ? "text-black" : "text-zinc-300"
+                    currentStep >= 1
+                      ? "text-foreground"
+                      : "text-muted-foreground"
                   }`}
                 >
                   <div
                     className={`w-8 h-8 rounded-full border-2 flex items-center justify-center
                   ${
                     currentStep >= 1
-                      ? "border-black bg-zinc-50"
-                      : "border-zinc-300"
+                      ? "border-foreground bg-muted"
+                      : "border-muted"
                   }`}
                   >
                     <Wallet className="w-4 h-4" />
@@ -488,20 +490,22 @@ export function PaymentSection({ serverInvoice }: PaymentSectionProps) {
                 </div>
                 <div
                   className={`w-16 h-0.5 ${
-                    currentStep >= 2 ? "bg-black" : "bg-zinc-300"
+                    currentStep >= 2 ? "bg-foreground" : "bg-muted"
                   }`}
                 />
                 <div
                   className={`flex items-center ${
-                    currentStep >= 2 ? "text-black" : "text-zinc-300"
+                    currentStep >= 2
+                      ? "text-foreground"
+                      : "text-muted-foreground"
                   }`}
                 >
                   <div
                     className={`w-8 h-8 rounded-full border-2 flex items-center justify-center
                   ${
                     currentStep >= 2
-                      ? "border-black bg-zinc-50"
-                      : "border-zinc-300"
+                      ? "border-foreground bg-muted"
+                      : "border-muted"
                   }`}
                   >
                     <CheckCircle className="w-4 h-4" />
@@ -515,7 +519,7 @@ export function PaymentSection({ serverInvoice }: PaymentSectionProps) {
             <div className="space-y-4">
               {currentStep === 1 && (
                 <div className="space-y-4">
-                  <p className="text-sm text-zinc-600 text-center">
+                  <p className="text-sm text-muted-foreground text-center">
                     Connect your wallet to proceed with the payment
                   </p>
                   <Button
@@ -549,11 +553,11 @@ export function PaymentSection({ serverInvoice }: PaymentSectionProps) {
                         Disconnect
                       </Button>
                     </div>
-                    <div className="font-mono bg-zinc-100 p-2 rounded">
+                    <div className="font-mono bg-muted p-2 rounded">
                       {address}
                     </div>
                   </div>
-                  <p className="text-sm text-zinc-600">
+                  <p className="text-sm text-muted-foreground">
                     Please confirm the payment amount and recipient address
                     before proceeding.
                     {showCurrencyConversion &&
@@ -580,13 +584,13 @@ export function PaymentSection({ serverInvoice }: PaymentSectionProps) {
                     {isLoadingPaymentRoutes ? (
                       <div className="p-8 border border-dashed rounded-lg">
                         <div className="text-center">
-                          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-zinc-100 mb-4">
-                            <Loader2 className="w-6 h-6 text-zinc-600 animate-spin" />
+                          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-muted mb-4">
+                            <Loader2 className="w-6 h-6 text-muted animate-spin" />
                           </div>
-                          <h3 className="text-sm font-medium text-zinc-900 mb-1">
+                          <h3 className="text-sm font-medium text-foreground mb-1">
                             Loading Payment Routes
                           </h3>
-                          <p className="text-sm text-zinc-500">
+                          <p className="text-sm text-muted">
                             Finding the best payment routes for your wallet
                           </p>
                         </div>
@@ -594,13 +598,13 @@ export function PaymentSection({ serverInvoice }: PaymentSectionProps) {
                     ) : !paymentRoutes || paymentRoutes.length === 0 ? (
                       <div className="p-8 border border-dashed rounded-lg">
                         <div className="text-center">
-                          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-zinc-100 mb-4">
-                            <AlertCircle className="w-6 h-6 text-zinc-600" />
+                          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-muted mb-4">
+                            <AlertCircle className="w-6 h-6 text-muted" />
                           </div>
-                          <h3 className="text-sm font-medium text-zinc-900 mb-1">
+                          <h3 className="text-sm font-medium text-foreground mb-1">
                             No Payment Routes Available
                           </h3>
-                          <p className="text-sm text-zinc-500">
+                          <p className="text-sm text-muted">
                             There are currently no available payment routes for
                             this transaction.
                           </p>
@@ -625,7 +629,7 @@ export function PaymentSection({ serverInvoice }: PaymentSectionProps) {
                         {/* Route Options - Only show if there are multiple routes */}
                         {showRoutes && paymentRoutes.length > 1 && (
                           <div className="mt-4 space-y-2">
-                            <div className="text-sm text-zinc-500 mb-3">
+                            <div className="text-sm text-muted mb-3">
                               Available Payment Routes
                             </div>
                             {paymentRoutes.map((route: PaymentRouteType) => (
@@ -647,7 +651,7 @@ export function PaymentSection({ serverInvoice }: PaymentSectionProps) {
                   {/* Payment button should be disabled if there are no routes */}
                   <Button
                     onClick={handlePayment}
-                    className="w-full bg-black hover:bg-zinc-800 text-white"
+                    className="w-full bg-foreground hover:bg-zinc-800 text-white"
                     disabled={
                       paymentProgress !== "idle" ||
                       !hasRoutes ||
diff --git a/src/components/payment-secured-using-request.tsx b/src/components/payment-secured-using-request.tsx
index 8c4bf6f4..64cd11ec 100644
--- a/src/components/payment-secured-using-request.tsx
+++ b/src/components/payment-secured-using-request.tsx
@@ -1,10 +1,10 @@
 export const PaymentSecuredUsingRequest = () => {
   return (
-    <div className="p-4 bg-green-50 border border-green-200 rounded-lg mt-4">
-      <h3 className="font-semibold text-green-800 mb-1 text-sm">
+    <div className="p-4 bg-success/10 border border-success rounded-lg mt-4">
+      <h3 className="font-semibold text-success mb-1 text-sm">
         Secure Transaction
       </h3>
-      <p className="text-xs text-green-700">
+      <p className="text-xs text-success-foreground">
         This payment is secured using Request Network. Your transaction will be
         processed safely and transparently on the blockchain.
       </p>
diff --git a/src/components/short-address.tsx b/src/components/short-address.tsx
index 5e163305..9c474c6e 100644
--- a/src/components/short-address.tsx
+++ b/src/components/short-address.tsx
@@ -25,7 +25,7 @@ export function ShortAddress({ address, className = "" }: ShortAddressProps) {
         <button
           type="button"
           onClick={handleCopy}
-          className={`text-zinc-500 hover:text-zinc-700 transition-colors flex items-center gap-2 ${className}`}
+          className={`text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2 ${className}`}
         >
           <span className="font-mono text-sm">{shortAddress}</span>
           <Copy className="h-3 w-3" />
diff --git a/src/components/stat-card.tsx b/src/components/stat-card.tsx
index a6674c60..ae438dbe 100644
--- a/src/components/stat-card.tsx
+++ b/src/components/stat-card.tsx
@@ -7,9 +7,9 @@ interface StatCardProps {
 }
 
 export const StatCard = ({ title, value, icon }: StatCardProps) => (
-  <Card className="bg-white border border-zinc-100">
+  <Card className="bg-card border border-border text-card-foreground">
     <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-      <CardTitle className="text-sm font-medium text-zinc-600">
+      <CardTitle className="text-sm font-medium text-muted-foreground">
         {title}
       </CardTitle>
       {icon}
diff --git a/src/components/subscription-plan-preview.tsx b/src/components/subscription-plan-preview.tsx
index 4363dad3..ebf895d9 100644
--- a/src/components/subscription-plan-preview.tsx
+++ b/src/components/subscription-plan-preview.tsx
@@ -125,7 +125,7 @@ export function SubscriptionPlanPreview({
       <div className="flex items-center mb-8">
         <Link
           href="/"
-          className="text-zinc-600 hover:text-black transition-colors mr-4"
+          className="text-muted-foreground hover:text-foreground transition-colors mr-4"
         >
           <ArrowLeft className="h-6 w-6" />
         </Link>
@@ -146,7 +146,9 @@ export function SubscriptionPlanPreview({
           <CardContent className="space-y-6">
             <div className="space-y-4">
               <div>
-                <p className="text-sm text-zinc-600 mb-1">Amount Per Payment</p>
+                <p className="text-sm text-muted-foreground mb-1">
+                  Amount Per Payment
+                </p>
                 <p className="text-2xl font-bold">
                   {displayCurrency} {displayAmount}
                 </p>
@@ -154,13 +156,17 @@ export function SubscriptionPlanPreview({
 
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <p className="text-sm text-zinc-600 mb-1">Frequency</p>
+                  <p className="text-sm text-muted-foreground mb-1">
+                    Frequency
+                  </p>
                   <p className="font-semibold">
                     {subscriptionPlan.recurrenceFrequency}
                   </p>
                 </div>
                 <div>
-                  <p className="text-sm text-zinc-600 mb-1">Total Payments</p>
+                  <p className="text-sm text-muted-foreground mb-1">
+                    Total Payments
+                  </p>
                   <p className="font-semibold">
                     {subscriptionPlan.totalNumberOfPayments}
                   </p>
@@ -168,7 +174,9 @@ export function SubscriptionPlanPreview({
               </div>
 
               <div>
-                <p className="text-sm text-zinc-600 mb-1">Total Amount</p>
+                <p className="text-sm text-muted-foreground mb-1">
+                  Total Amount
+                </p>
                 <p className="font-semibold">
                   {displayCurrency} {displayTotalAmount}
                 </p>
@@ -176,7 +184,9 @@ export function SubscriptionPlanPreview({
               <div>
                 {subscriptionPlan.trialDays > 0 ? (
                   <>
-                    <p className="text-sm text-zinc-600 mb-1">Trial Period</p>
+                    <p className="text-sm text-muted-foreground mb-1">
+                      Trial Period
+                    </p>
                     <p className="font-semibold">
                       {`${subscriptionPlan.trialDays} day${
                         subscriptionPlan.trialDays > 1 ? "s" : ""
@@ -184,7 +194,9 @@ export function SubscriptionPlanPreview({
                     </p>
                   </>
                 ) : (
-                  <p className="text-sm text-zinc-600 mb-1">No Trial Period</p>
+                  <p className="text-sm text-muted-foreground mb-1">
+                    No Trial Period
+                  </p>
                 )}
               </div>
             </div>
@@ -247,7 +259,7 @@ export function SubscriptionPlanPreview({
                     <button
                       type="button"
                       onClick={() => open()}
-                      className="flex items-center text-sm text-zinc-500 hover:text-zinc-800 transition-colors"
+                      className="flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
                       disabled={isProcessing}
                     >
                       <span className="font-mono mr-2">
@@ -278,7 +290,7 @@ export function SubscriptionPlanPreview({
                 </>
               ) : (
                 <div className="flex flex-col items-center py-6 space-y-4">
-                  <p className="text-zinc-600 text-center">
+                  <p className="text-muted-foreground text-center">
                     Connect your wallet to subscribe
                   </p>
                   <Button onClick={() => open()} size="lg" className="w-full">
@@ -289,8 +301,10 @@ export function SubscriptionPlanPreview({
               )
             ) : (
               <div className="flex flex-col items-center justify-center py-6 space-y-4">
-                <Loader2 className="h-8 w-8 animate-spin text-zinc-400" />
-                <p className="text-zinc-500">Initializing payment system...</p>
+                <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+                <p className="text-muted-foreground">
+                  Initializing payment system...
+                </p>
               </div>
             )}
           </CardContent>
diff --git a/src/components/subscription-plans/blocks/subscription-plan-link.tsx b/src/components/subscription-plans/blocks/subscription-plan-link.tsx
index f5cfdb51..01d5bc66 100644
--- a/src/components/subscription-plans/blocks/subscription-plan-link.tsx
+++ b/src/components/subscription-plans/blocks/subscription-plan-link.tsx
@@ -118,13 +118,13 @@ export function SubscriptionPlanLink({ plan }: SubscriptionPlanLinkProps) {
   const isProcessing = isDeletingPlan || isCancellingPayment;
 
   return (
-    <Card className="overflow-hidden bg-white hover:shadow-md transition-shadow">
+    <Card className="overflow-hidden bg-card border border-border text-card-foreground hover:shadow-md transition-shadow">
       <CardContent className="p-6">
         <div className="flex items-center justify-between gap-4">
           <div className="flex flex-col gap-2 flex-1 min-w-0">
             <div className="flex items-center gap-4">
-              <h3 className="font-bold text-zinc-900">{plan.label}</h3>
-              <div className="flex items-center gap-3 text-sm text-zinc-600">
+              <h3 className="font-bold text-foreground">{plan.label}</h3>
+              <div className="flex items-center gap-3 text-sm text-muted-foreground">
                 <div className="flex items-center gap-1">
                   <Users className="h-4 w-4" />
                   <span>{totalNumberOfSubscribers} subscriber(s)</span>
@@ -137,14 +137,14 @@ export function SubscriptionPlanLink({ plan }: SubscriptionPlanLinkProps) {
                 </div>
               </div>
             </div>
-            <p className="text-sm text-zinc-600">
+            <p className="text-sm text-muted-foreground">
               {displayCurrency} {displayAmount} · {plan.recurrenceFrequency} ·{" "}
               {plan.totalNumberOfPayments} payments ·{" "}
               {plan.trialDays > 0
                 ? `${plan.trialDays} day${plan.trialDays > 1 ? "s" : ""} trial`
                 : "No trial"}{" "}
             </p>
-            <code className="text-xs text-zinc-600 bg-zinc-50 px-3 py-1.5 rounded-md truncate flex-1">
+            <code className="text-xs text-muted-foreground bg-muted px-3 py-1.5 rounded-md truncate flex-1">
               {linkUrl}
             </code>
           </div>
@@ -153,21 +153,21 @@ export function SubscriptionPlanLink({ plan }: SubscriptionPlanLinkProps) {
               variant="ghost"
               size="sm"
               onClick={() => copyLink(linkUrl)}
-              className="h-8 w-8 p-0 hover:bg-zinc-100"
+              className="h-8 w-8 p-0 hover:bg-muted"
               title="Copy link"
               disabled={isProcessing}
             >
-              <Copy className="h-4 w-4 text-zinc-600" />
+              <Copy className="h-4 w-4 text-muted-foreground" />
             </Button>
             <Button
               variant="ghost"
               size="sm"
               asChild
-              className="h-8 w-8 p-0 hover:bg-zinc-100"
+              className="h-8 w-8 p-0 hover:bg-muted"
               title="Open link"
             >
               <Link href={linkUrl} target="_blank" rel="noopener noreferrer">
-                <ExternalLink className="h-4 w-4 text-zinc-600" />
+                <ExternalLink className="h-4 w-4 text-muted-foreground" />
               </Link>
             </Button>
             <AlertDialog
diff --git a/src/components/ui/table/empty-state.tsx b/src/components/ui/table/empty-state.tsx
index 4a0a1c34..4140f03c 100644
--- a/src/components/ui/table/empty-state.tsx
+++ b/src/components/ui/table/empty-state.tsx
@@ -14,11 +14,11 @@ export const EmptyState = ({
   callToAction,
 }: EmptyStateProps) => (
   <div className="flex flex-col items-center justify-center py-12 px-4">
-    <div className="h-12 w-12 rounded-full bg-zinc-100 flex items-center justify-center mb-4">
+    <div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center mb-4">
       {icon}
     </div>
-    <h3 className="text-lg font-medium text-zinc-900 mb-1">{title}</h3>
-    <p className="text-sm text-zinc-500 text-center mb-4">{subtitle}</p>
+    <h3 className="text-lg font-medium text-foreground mb-1">{title}</h3>
+    <p className="text-sm text-muted-foreground text-center mb-4">{subtitle}</p>
     {callToAction}
   </div>
 );
diff --git a/src/components/ui/table/pagination.tsx b/src/components/ui/table/pagination.tsx
index 06010aa4..a90e8193 100644
--- a/src/components/ui/table/pagination.tsx
+++ b/src/components/ui/table/pagination.tsx
@@ -20,7 +20,7 @@ export const Pagination = ({
   }
 
   return (
-    <div className="flex items-center justify-between px-4 py-4 border-t border-zinc-100">
+    <div className="flex items-center justify-between px-4 py-4 border-t border-border">
       <Button
         variant="outline"
         onClick={() => setPage(Math.max(1, page - 1))}
@@ -29,7 +29,7 @@ export const Pagination = ({
       >
         Previous
       </Button>
-      <span className="text-sm text-zinc-600">
+      <span className="text-sm text-muted-foreground">
         Page {page} of {totalPages}
       </span>
       <Button
diff --git a/src/components/ui/table/table-head-cell.tsx b/src/components/ui/table/table-head-cell.tsx
index 663916eb..32fb9551 100644
--- a/src/components/ui/table/table-head-cell.tsx
+++ b/src/components/ui/table/table-head-cell.tsx
@@ -7,7 +7,7 @@ interface TableHeadCellProps {
 }
 
 export const TableHeadCell = ({ children, className }: TableHeadCellProps) => (
-  <TableHead className={cn("text-zinc-500 font-medium", className)}>
+  <TableHead className={cn("text-muted-foreground font-medium", className)}>
     {children}
   </TableHead>
 );
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index fe68d45a..e5395c27 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -14,11 +14,11 @@ export function Tooltip({ tooltipTrigger, tooltipContent }: TooltipProps) {
       <RadixTooltip.Trigger asChild>{tooltipTrigger}</RadixTooltip.Trigger>
       <RadixTooltip.Portal>
         <RadixTooltip.Content
-          className="bg-zinc-900 text-white text-xs px-2 py-1 rounded shadow-lg z-50"
+          className="bg-popover text-popover-foreground text-xs px-2 py-1 rounded shadow-lg z-50"
           sideOffset={5}
         >
           {tooltipContent}
-          <RadixTooltip.Arrow className="fill-zinc-900" />
+          <RadixTooltip.Arrow className="fill-popover" />
         </RadixTooltip.Content>
       </RadixTooltip.Portal>
     </RadixTooltip.Root>
diff --git a/src/components/view-recurring-payments/blocks/completed-payments.tsx b/src/components/view-recurring-payments/blocks/completed-payments.tsx
index 166806e3..927174b1 100644
--- a/src/components/view-recurring-payments/blocks/completed-payments.tsx
+++ b/src/components/view-recurring-payments/blocks/completed-payments.tsx
@@ -15,7 +15,7 @@ export function CompletedPayments({ payments }: CompletedPaymentsProps) {
   const [isExpanded, setIsExpanded] = useState(false);
 
   if (!payments || payments.length === 0) {
-    return <div className="text-xs text-zinc-500">No payments yet</div>;
+    return <div className="text-xs text-muted-foreground">No payments yet</div>;
   }
 
   const visiblePayments = isExpanded ? payments : payments.slice(0, 2);
diff --git a/src/components/view-recurring-payments/blocks/frequency-badge.tsx b/src/components/view-recurring-payments/blocks/frequency-badge.tsx
index 9639b6bc..e956f3de 100644
--- a/src/components/view-recurring-payments/blocks/frequency-badge.tsx
+++ b/src/components/view-recurring-payments/blocks/frequency-badge.tsx
@@ -4,10 +4,10 @@ import { Badge } from "@/components/ui/badge";
 import type { RecurrenceFrequencyType } from "@/server/db/schema";
 
 const BADGE_FREQUENCY_COLOR: Record<RecurrenceFrequencyType, string> = {
-  DAILY: "bg-blue-100 text-blue-800 border-blue-200",
-  WEEKLY: "bg-green-100 text-green-800 border-green-200",
-  MONTHLY: "bg-yellow-100 text-yellow-800 border-yellow-200",
-  YEARLY: "bg-red-100 text-red-800 border-red-200",
+  DAILY: "bg-primary/10 text-primary-foreground border-primary",
+  WEEKLY: "bg-success/10 text-success-foreground border-success",
+  MONTHLY: "bg-warning/10 text-warning-foreground border-warning",
+  YEARLY: "bg-destructive/10 text-destructive-foreground border-destructive",
 };
 
 interface FrequencyBadgeProps {
diff --git a/src/components/view-recurring-payments/blocks/status-badge.tsx b/src/components/view-recurring-payments/blocks/status-badge.tsx
index 9742dc68..3c06ed16 100644
--- a/src/components/view-recurring-payments/blocks/status-badge.tsx
+++ b/src/components/view-recurring-payments/blocks/status-badge.tsx
@@ -4,11 +4,11 @@ import { Badge } from "@/components/ui/badge";
 import type { RecurringPaymentStatusType } from "@/server/db/schema";
 
 const BADGE_STATUS_COLOR: Record<RecurringPaymentStatusType, string> = {
-  pending: "bg-yellow-100 text-yellow-800 border-yellow-200",
-  active: "bg-green-100 text-green-800 border-green-200",
-  paused: "bg-orange-100 text-orange-800 border-orange-200",
-  completed: "bg-blue-100 text-blue-800 border-blue-200",
-  cancelled: "bg-red-100 text-red-800 border-red-200",
+  pending: "bg-warning/10 text-warning-foreground border-warning",
+  active: "bg-success/10 text-success-foreground border-success",
+  paused: "bg-muted text-muted-foreground border-border",
+  completed: "bg-primary/10 text-primary-foreground border-primary",
+  cancelled: "bg-destructive/10 text-destructive-foreground border-destructive",
 };
 
 interface StatusBadgeProps {
diff --git a/src/components/view-recurring-payments/view-recurring-payments.tsx b/src/components/view-recurring-payments/view-recurring-payments.tsx
index 0b1472b6..4fa3d061 100644
--- a/src/components/view-recurring-payments/view-recurring-payments.tsx
+++ b/src/components/view-recurring-payments/view-recurring-payments.tsx
@@ -87,10 +87,12 @@ export function ViewRecurringPayments({
   if (isLoading) {
     return (
       <div className="flex justify-center mx-auto w-full max-w-6xl">
-        <Card className="w-full shadow-lg border-zinc-200/80">
+        <Card className="w-full shadow-lg border border-border bg-card text-card-foreground">
           <CardContent className="py-16">
             <div className="flex flex-col items-center justify-center space-y-4">
-              <p className="text-zinc-500">Loading recurring payments...</p>
+              <p className="text-muted-foreground">
+                Loading recurring payments...
+              </p>
             </div>
           </CardContent>
         </Card>
@@ -101,9 +103,9 @@ export function ViewRecurringPayments({
   if (error) {
     return (
       <div className="flex justify-center mx-auto w-full max-w-6xl">
-        <Card className="w-full shadow-lg border-red-200/80">
-          <CardHeader className="bg-red-50 rounded-t-lg border-b border-red-200/80">
-            <CardTitle className="flex items-center gap-2 text-red-800">
+        <Card className="w-full shadow-lg border border-destructive/30 bg-card text-card-foreground">
+          <CardHeader className="bg-destructive/10 rounded-t-lg border-b border-destructive/30">
+            <CardTitle className="flex items-center gap-2 text-destructive">
               <AlertCircle className="h-5 w-5" />
               Error Loading Recurring Payments
             </CardTitle>
@@ -111,7 +113,7 @@ export function ViewRecurringPayments({
 
           <CardContent className="py-16">
             <div className="flex flex-col items-center justify-center space-y-4">
-              <p className="text-red-600">
+              <p className="text-destructive-foreground">
                 {error.message || "Failed to load recurring payments"}
               </p>
               <Button
@@ -135,8 +137,8 @@ export function ViewRecurringPayments({
   if (!recurringPayments || recurringPayments.length === 0) {
     return (
       <div className="flex justify-center mx-auto w-full max-w-6xl">
-        <Card className="w-full shadow-lg border-zinc-200/80">
-          <CardHeader className="bg-zinc-50 rounded-t-lg border-b border-zinc-200/80">
+        <Card className="w-full shadow-lg border border-border bg-card text-card-foreground">
+          <CardHeader className="bg-muted rounded-t-lg border-b border-border">
             <CardTitle className="flex items-center gap-2">
               <Eye className="h-5 w-5" />
               View Recurring Payouts
@@ -145,8 +147,8 @@ export function ViewRecurringPayments({
 
           <CardContent className="py-16">
             <div className="flex flex-col items-center justify-center space-y-4">
-              <p className="text-zinc-500">No recurring payouts found</p>
-              <p className="text-zinc-400 text-sm">
+              <p className="text-muted-foreground">No recurring payouts found</p>
+              <p className="text-muted-foreground text-sm">
                 Your recurring payouts will appear here
               </p>
             </div>
@@ -167,8 +169,8 @@ export function ViewRecurringPayments({
 
   return (
     <div className="flex justify-center mx-auto w-full">
-      <Card className="w-full shadow-lg border-zinc-200/80">
-        <CardHeader className="bg-zinc-50 rounded-t-lg border-b border-zinc-200/80">
+      <Card className="w-full shadow-lg border border-border bg-card text-card-foreground">
+        <CardHeader className="bg-muted rounded-t-lg border-b border-border">
           <CardTitle className="flex items-center gap-2">
             <Eye className="h-5 w-5" />
             View Recurring Payments ({recurringPayments.length})
@@ -226,7 +228,9 @@ export function ViewRecurringPayments({
                         <span className="text-sm font-bold">
                           {payment.totalNumberOfPayments}
                         </span>
-                        <span className="text-xs text-zinc-500">scheduled</span>
+                        <span className="text-xs text-muted-foreground">
+                          scheduled
+                        </span>
                       </div>
                     </TableCell>
                     <TableCell>
@@ -234,7 +238,9 @@ export function ViewRecurringPayments({
                         <span className="text-sm font-bold">
                           {payment.currentNumberOfPayments}
                         </span>
-                        <span className="text-xs text-zinc-500">completed</span>
+                        <span className="text-xs text-muted-foreground">
+                          completed
+                        </span>
                       </div>
                     </TableCell>
                     <TableCell>{payment.chain}</TableCell>
@@ -313,7 +319,7 @@ export function ViewRecurringPayments({
           </Table>
 
           {recurringPayments.length > ITEMS_PER_PAGE && (
-            <div className="flex items-center justify-between px-4 py-4 border-t border-zinc-100">
+            <div className="flex items-center justify-between px-4 py-4 border-t border-border">
               <Button
                 variant="outline"
                 onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
@@ -322,7 +328,7 @@ export function ViewRecurringPayments({
               >
                 Previous
               </Button>
-              <span className="text-sm text-zinc-600">
+              <span className="text-sm text-muted-foreground">
                 Page {currentPage} of {totalPages}
               </span>
               <Button