From e000b434dae41cdb2ec66aa89992eb0c021c56ea Mon Sep 17 00:00:00 2001
From: Emmanuel Anyigor <emanuelanyigor@gmail.com>
Date: Fri, 20 Feb 2026 18:02:27 +0100
Subject: [PATCH] fix: mobile responsive optimization

---
 frontend/package-lock.json               | 212 ++++----------
 frontend/src/components/AppLayout.tsx    |  38 +--
 frontend/src/components/AppNav.tsx       | 269 ++++++++++++++----
 frontend/src/components/EmployeeList.tsx | 217 +++++++++-----
 frontend/src/pages/EmployeeEntry.tsx     | 343 ++++++++++++-----------
 frontend/src/pages/Home.tsx              |  60 ++--
 frontend/src/pages/PayrollScheduler.tsx  | 306 +++++++++-----------
 7 files changed, 773 insertions(+), 672 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9cf66bb..5f5ace6 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -464,6 +464,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -480,6 +481,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -496,6 +498,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -512,6 +515,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -528,6 +532,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -544,6 +549,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -560,6 +566,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -576,6 +583,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -592,6 +600,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -608,6 +617,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -624,6 +634,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -640,6 +651,7 @@
       "cpu": [
         "loong64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -656,6 +668,7 @@
       "cpu": [
         "mips64el"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -672,6 +685,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -688,6 +702,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -704,6 +719,7 @@
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -720,6 +736,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -736,6 +753,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -752,6 +770,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -768,6 +787,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -784,6 +804,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -800,6 +821,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -816,6 +838,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -832,6 +855,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -848,6 +872,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -864,6 +889,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1549,132 +1575,6 @@
       "integrity": "sha512-fSVWzzemnyfF89EPwlUNsrS5swF5CrtiN4e+h0/lLf4dz2he4L3ndM20PS9wj7ICSkXJe/TQUHdaPTq15b1mNQ==",
       "license": "Apache-2.0"
     },
-    "node_modules/@near-js/keystores": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@near-js/keystores/-/keystores-0.2.2.tgz",
-      "integrity": "sha512-DLhi/3a4qJUY+wgphw2Jl4S+L0AKsUYm1mtU0WxKYV5OBwjOXvbGrXNfdkheYkfh3nHwrQgtjvtszX6LrRXLLw==",
-      "license": "ISC",
-      "peer": true,
-      "dependencies": {
-        "@near-js/crypto": "1.4.2",
-        "@near-js/types": "0.3.1"
-      }
-    },
-    "node_modules/@near-js/keystores-browser": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@near-js/keystores-browser/-/keystores-browser-0.2.2.tgz",
-      "integrity": "sha512-Pxqm7WGtUu6zj32vGCy9JcEDpZDSB5CCaLQDTQdF3GQyL0flyRv2I/guLAgU5FLoYxU7dJAX9mslJhPW7P2Bfw==",
-      "license": "ISC",
-      "peer": true,
-      "dependencies": {
-        "@near-js/crypto": "1.4.2",
-        "@near-js/keystores": "0.2.2"
-      }
-    },
-    "node_modules/@near-js/keystores-node": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@near-js/keystores-node/-/keystores-node-0.1.2.tgz",
-      "integrity": "sha512-MWLvTszZOVziiasqIT/LYNhUyWqOJjDGlsthOsY6dTL4ZcXjjmhmzrbFydIIeQr+CcEl5wukTo68ORI9JrHl6g==",
-      "license": "ISC",
-      "peer": true,
-      "dependencies": {
-        "@near-js/crypto": "1.4.2",
-        "@near-js/keystores": "0.2.2"
-      }
-    },
-    "node_modules/@near-js/providers": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@near-js/providers/-/providers-1.0.3.tgz",
-      "integrity": "sha512-VJMboL14R/+MGKnlhhE3UPXCGYvMd1PpvF9OqZ9yBbulV7QVSIdTMfY4U1NnDfmUC2S3/rhAEr+3rMrIcNS7Fg==",
-      "license": "ISC",
-      "peer": true,
-      "dependencies": {
-        "@near-js/transactions": "1.3.3",
-        "@near-js/types": "0.3.1",
-        "@near-js/utils": "1.1.0",
-        "borsh": "1.0.0",
-        "exponential-backoff": "^3.1.2"
-      },
-      "optionalDependencies": {
-        "node-fetch": "2.6.7"
-      }
-    },
-    "node_modules/@near-js/providers/node_modules/borsh": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/borsh/-/borsh-1.0.0.tgz",
-      "integrity": "sha512-fSVWzzemnyfF89EPwlUNsrS5swF5CrtiN4e+h0/lLf4dz2he4L3ndM20PS9wj7ICSkXJe/TQUHdaPTq15b1mNQ==",
-      "license": "Apache-2.0",
-      "peer": true
-    },
-    "node_modules/@near-js/providers/node_modules/node-fetch": {
-      "version": "2.6.7",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "whatwg-url": "^5.0.0"
-      },
-      "engines": {
-        "node": "4.x || >=6.0.0"
-      },
-      "peerDependencies": {
-        "encoding": "^0.1.0"
-      },
-      "peerDependenciesMeta": {
-        "encoding": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@near-js/signers": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@near-js/signers/-/signers-0.2.2.tgz",
-      "integrity": "sha512-M6ib+af9zXAPRCjH2RyIS0+RhCmd9gxzCeIkQ+I2A3zjgGiEDkBZbYso9aKj8Zh2lPKKSH7h+u8JGymMOSwgyw==",
-      "license": "ISC",
-      "peer": true,
-      "dependencies": {
-        "@near-js/crypto": "1.4.2",
-        "@near-js/keystores": "0.2.2",
-        "@noble/hashes": "1.3.3"
-      }
-    },
-    "node_modules/@near-js/signers/node_modules/@noble/hashes": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.3.tgz",
-      "integrity": "sha512-V7/fPHgl+jsVPXqqeOzT8egNj2iBIVt+ECeMMG8TdcnTikP3oaBtUVqpT/gYCR68aEBJSF+XbYUxStjbFMqIIA==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@near-js/transactions": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@near-js/transactions/-/transactions-1.3.3.tgz",
-      "integrity": "sha512-1AXD+HuxlxYQmRTLQlkVmH+RAmV3HwkAT8dyZDu+I2fK/Ec9BQHXakOJUnOBws3ihF+akQhamIBS5T0EXX/Ylw==",
-      "license": "ISC",
-      "peer": true,
-      "dependencies": {
-        "@near-js/crypto": "1.4.2",
-        "@near-js/signers": "0.2.2",
-        "@near-js/types": "0.3.1",
-        "@near-js/utils": "1.1.0",
-        "@noble/hashes": "1.7.1",
-        "borsh": "1.0.0"
-      }
-    },
-    "node_modules/@near-js/transactions/node_modules/borsh": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/borsh/-/borsh-1.0.0.tgz",
-      "integrity": "sha512-fSVWzzemnyfF89EPwlUNsrS5swF5CrtiN4e+h0/lLf4dz2he4L3ndM20PS9wj7ICSkXJe/TQUHdaPTq15b1mNQ==",
-      "license": "Apache-2.0",
-      "peer": true
-    },
     "node_modules/@near-js/types": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/@near-js/types/-/types-0.3.1.tgz",
@@ -1929,6 +1829,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1942,6 +1843,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1955,6 +1857,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1968,6 +1871,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1981,6 +1885,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1994,6 +1899,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2007,6 +1913,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2020,6 +1927,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2033,6 +1941,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2046,6 +1955,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2059,6 +1969,7 @@
       "cpu": [
         "loong64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2072,6 +1983,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2085,6 +1997,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2098,6 +2011,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2111,6 +2025,7 @@
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2124,6 +2039,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2137,6 +2053,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2150,6 +2067,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2163,6 +2081,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2176,6 +2095,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2189,6 +2109,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2202,6 +2123,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4140,6 +4062,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/history": {
@@ -6279,29 +6202,6 @@
         "node": "*"
       }
     },
-    "node_modules/crypto-browserify": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
-      "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "browserify-cipher": "^1.0.0",
-        "browserify-sign": "^4.0.0",
-        "create-ecdh": "^4.0.0",
-        "create-hash": "^1.1.0",
-        "create-hmac": "^1.1.0",
-        "diffie-hellman": "^5.0.0",
-        "inherits": "^2.0.1",
-        "pbkdf2": "^3.0.3",
-        "public-encrypt": "^4.0.0",
-        "randombytes": "^2.0.0",
-        "randomfill": "^1.0.3"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/crypto-js": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
@@ -6715,6 +6615,7 @@
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
       "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -7343,6 +7244,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,
@@ -8973,6 +8875,7 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
       "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -9468,6 +9371,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -9579,6 +9483,7 @@
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
       "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -10351,6 +10256,7 @@
       "version": "4.53.3",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.3.tgz",
       "integrity": "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.8"
@@ -11041,6 +10947,7 @@
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
       "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -11057,6 +10964,7 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -11074,6 +10982,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -11686,6 +11595,7 @@
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.6.tgz",
       "integrity": "sha512-tI2l/nFHC5rLh7+5+o7QjKjSR04ivXDF4jcgV0f/bTQ+OJiITy5S6gaynVsEM+7RqzufMnVbIon6Sr5x1SDYaQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
@@ -11787,6 +11697,7 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -11804,6 +11715,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -11976,7 +11888,7 @@
       "version": "2.8.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
       "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
-      "devOptional": true,
+      "dev": true,
       "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"
diff --git a/frontend/src/components/AppLayout.tsx b/frontend/src/components/AppLayout.tsx
index e9728d7..07a3b25 100644
--- a/frontend/src/components/AppLayout.tsx
+++ b/frontend/src/components/AppLayout.tsx
@@ -1,59 +1,59 @@
 import React from "react";
 import { Outlet, NavLink, useLocation } from "react-router-dom";
-import ConnectAccount from "../components/ConnectAccount";
-import AppNav from "./AppNav";
-
-
+import { DesktopNav, MobileNav, HamburgerButton, useMobileNav } from "./AppNav";
 
 // ── Page Wrapper ───────────────────────
 const PageWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
     <div className="flex flex-col flex-1">{children}</div>
 );
 
-
 // ── Layout ────────────────────────────
 const AppLayout: React.FC = () => {
     const location = useLocation();
+    const nav = useMobileNav();
 
     return (
         <div className="flex flex-col min-h-screen bg-[#080b10] text-white">
-            {/* Header */}
-            <header className="fixed top-0 left-0 right-0 z-50 h-[var(--header-h)] flex items-center px-16 flex justify-between bg-[#080b10]/85 backdrop-blur-[20px] backdrop-saturate-180 border-b border-white/10">
+            {/* ── Header ── */}
+            <header className="fixed top-0 left-0 right-0 z-50 h-[var(--header-h)] flex items-center px-4 sm:px-6 lg:px-16 gap-4 justify-between bg-[#080b10]/85 backdrop-blur-[20px] backdrop-saturate-180 border-b border-white/10">
                 {/* Logo */}
-                <NavLink className="flex items-center gap-2.5" to="/">
+                <NavLink className="flex items-center gap-2 flex-shrink-0" to="/">
                     <div className="w-8 h-8 rounded-lg grid place-items-center font-extrabold text-black text-sm tracking-tight shadow-[0_0_20px_rgba(74,240,184,0.3)] bg-gradient-to-br from-[var(--accent)] to-[var(--accent2)]">
                         P
                     </div>
                     <span className="text-lg font-extrabold tracking-tight">
                         Pay<span className="text-[var(--accent)]">D</span>
                     </span>
-                    <span className="text-[9px] font-normal font-mono text-[var(--muted)] tracking-widest uppercase border border-[var(--border-hi)] px-1.5 py-0.5 rounded ml-0.5">
+                    <span className="text-[9px] font-normal font-mono text-[var(--muted)] tracking-widest uppercase border border-[var(--border-hi)] px-1.5 py-0.5 rounded ml-0.5 hidden sm:inline">
                         BETA
                     </span>
                 </NavLink>
 
-                {/* Nav */}
+                {/* Desktop nav (hidden on mobile) */}
                 <div className="flex items-center gap-6 ml-auto">
-                    <AppNav />
-                    <div className="ml-4 flex items-center gap-3">
-                        <ConnectAccount />
-                    </div>
+                    <DesktopNav />
                 </div>
+
+                {/* Hamburger (visible only on mobile) */}
+                <HamburgerButton isOpen={nav.isOpen} onToggle={nav.toggle} />
             </header>
 
-            {/* Main */}
+            {/* Mobile drawer nav */}
+            <MobileNav isOpen={nav.isOpen} onClose={nav.close} />
+
+            {/* ── Main ── */}
             <main className="flex flex-col flex-1 pt-[var(--header-h)]">
                 <PageWrapper>
-                    <div key={location.pathname} className="flex flex-col flex-1 px-6 py-8">
+                    <div key={location.pathname} className="flex flex-col flex-1 px-4 sm:px-6 py-6 sm:py-8 page-fade">
                         <Outlet />
                     </div>
                 </PageWrapper>
             </main>
 
-            {/* Footer */}
-            <footer className="flex flex-wrap justify-between items-center gap-2 px-6 py-5 border-t border-white/10 text-xs font-mono text-[var(--muted)]">
+            {/* ── Footer ── */}
+            <footer className="flex flex-wrap justify-between items-center gap-2 px-4 sm:px-6 py-4 sm:py-5 border-t border-white/10 text-xs font-mono text-[var(--muted)]">
                 <span>
-                    © {new Date().getFullYear()} PayD — Licensed under the{" "}
+                    © {new Date().getFullYear()} PayD —{" "}
                     <a
                         href="http://www.apache.org/licenses/LICENSE-2.0"
                         target="_blank"
diff --git a/frontend/src/components/AppNav.tsx b/frontend/src/components/AppNav.tsx
index 22b55c6..7bc575e 100644
--- a/frontend/src/components/AppNav.tsx
+++ b/frontend/src/components/AppNav.tsx
@@ -1,81 +1,236 @@
-import React from "react";
-import { NavLink } from "react-router-dom";
-import { Code, User, Wallet } from "lucide-react";
+import React, { useState, useEffect, useRef } from "react";
+import { NavLink, useLocation } from "react-router-dom";
+import { Code, User, Wallet, X, Menu } from "lucide-react";
 import { Avatar } from "./Avatar";
+import ConnectAccount from "./ConnectAccount";
 
-const AppNav: React.FC = () => {
-    // Mock user data - replace with actual user context
+// ── Mobile Hamburger Button ─────────────────────────────────────────
+interface HamburgerProps {
+    isOpen: boolean;
+    onToggle: () => void;
+}
+
+export const HamburgerButton: React.FC<HamburgerProps> = ({ isOpen, onToggle }) => (
+    <button
+        aria-label={isOpen ? "Close navigation menu" : "Open navigation menu"}
+        aria-expanded={isOpen}
+        aria-controls="mobile-nav"
+        onClick={onToggle}
+        className="md:hidden flex items-center justify-center w-10 h-10 rounded-lg glass border border-[var(--border-hi)] text-[var(--muted)] hover:text-white hover:border-[var(--accent)]/40 transition-all touch-target"
+    >
+        {isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+    </button>
+);
+
+// ── Nav Link Item (shared between desktop & mobile) ─────────────────
+interface NavItemProps {
+    to: string;
+    icon: React.ReactNode;
+    label: string;
+    isDebug?: boolean;
+    onClick?: () => void;
+}
+
+const NavItem: React.FC<NavItemProps> = ({ to, icon, label, isDebug, onClick }) => (
+    <NavLink
+        to={to}
+        onClick={onClick}
+        className={({ isActive }) =>
+            isDebug
+                ? `flex items-center gap-2 px-3 py-2.5 rounded-lg text-[11px] font-mono tracking-wide border transition touch-target ${
+                      isActive
+                          ? "text-[var(--accent2)] bg-[rgba(124,111,247,0.10)] border-[rgba(124,111,247,0.35)]"
+                          : "text-[var(--accent2)] bg-[rgba(124,111,247,0.06)] border-[rgba(124,111,247,0.20)] hover:bg-[rgba(124,111,247,0.12)] hover:border-[rgba(124,111,247,0.35)]"
+                  }`
+                : `flex items-center gap-2 px-3 py-2.5 rounded-lg text-[13px] font-semibold transition touch-target ${
+                      isActive
+                          ? "text-[var(--accent)] bg-white/5"
+                          : "text-[var(--muted)] hover:bg-white/10 hover:text-white"
+                  }`
+        }
+    >
+        <span className="opacity-70 flex-shrink-0">{icon}</span>
+        {label}
+    </NavLink>
+);
+
+// ── Desktop Nav (horizontal, hidden on mobile) ──────────────────────
+const DesktopNav: React.FC = () => {
     const currentUser = {
         email: "user@example.com",
         name: "John Doe",
-        imageUrl: undefined,
+        imageUrl: undefined as string | undefined,
     };
 
     return (
-        <nav className="flex items-center gap-8">
-            <NavLink
-                to="/payroll"
-                className={({ isActive }) =>
-                    `flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[13px] font-semibold transition ${isActive
-                        ? "text-[var(--accent)] bg-white/5"
-                        : "text-[var(--muted)] hover:bg-white/10 hover:text-white"
-                    }`
-                }
-            >
-                <span className="opacity-70">
-                    <Wallet className="w-4 h-4" />
-                </span>
-                Payroll
-            </NavLink>
-
-            <NavLink
-                to="/employee"
-                className={({ isActive }) =>
-                    `flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[13px] font-semibold transition ${isActive
-                        ? "text-[var(--accent)] bg-white/5"
-                        : "text-[var(--muted)] hover:bg-white/10 hover:text-white"
-                    }`
-                }
-            >
-                <span className="opacity-70">
-                    <User className="w-4 h-4" />
-                </span>
-                Employees
-            </NavLink>
-
-            <div className="w-px h-5 bg-[var(--border-hi)] mx-2" />
-
-            <NavLink
-                to="/debug"
-                className={({ isActive }) =>
-                    `flex items-center gap-1 px-3 py-1.5 rounded-lg text-[11px] font-mono tracking-wide border transition ${isActive
-                        ? "text-[var(--accent2)] bg-[rgba(124,111,247,0.06)] border-[rgba(124,111,247,0.25)]"
-                        : "text-[var(--accent2)] bg-[rgba(124,111,247,0.06)] border-[rgba(124,111,247,0.25)] hover:bg-[rgba(124,111,247,0.12)]"
-                    }`
-                }
-            >
-                <Code className="w-4 h-4" />
-                debugger
-            </NavLink>
+        <nav className="hidden md:flex items-center gap-2" aria-label="Main navigation">
+            <NavItem to="/payroll" icon={<Wallet className="w-4 h-4" />} label="Payroll" />
+            <NavItem to="/employee" icon={<User className="w-4 h-4" />} label="Employees" />
+
+            <div className="w-px h-5 bg-[var(--border-hi)] mx-1" />
 
+            <NavItem to="/debug" icon={<Code className="w-4 h-4" />} label="debugger" isDebug />
+
+            <div className="ml-2 flex items-center gap-2">
+                <ConnectAccount />
+            </div>
 
-            <div className="mb-2 p-1 bg-gray-50 rounded-lg flex items-center gap-2">
+            <div className="ml-1 pl-2 border-l border-[var(--border-hi)] hidden lg:flex items-center gap-2">
                 <Avatar
                     email={currentUser.email}
                     name={currentUser.name}
                     imageUrl={currentUser.imageUrl}
-                    size="md"
+                    size="sm"
                 />
-                <div className="flex-1 min-w-0">
-                    <p className="text-sm font-semibold text-gray-800 truncate">
+                <div className="flex-1 min-w-0 hidden xl:block">
+                    <p className="text-xs font-semibold text-[var(--text)] truncate leading-tight">
                         {currentUser.name}
                     </p>
-                    <p className="text-xs text-gray-500 truncate">{currentUser.email}</p>
+                    <p className="text-[10px] text-[var(--muted)] truncate leading-tight">{currentUser.email}</p>
                 </div>
             </div>
-
         </nav>
     );
 };
 
+// ── Mobile Drawer Nav ───────────────────────────────────────────────
+interface MobileNavProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+const MobileNav: React.FC<MobileNavProps> = ({ isOpen, onClose }) => {
+    const currentUser = {
+        email: "user@example.com",
+        name: "John Doe",
+        imageUrl: undefined as string | undefined,
+    };
+
+    // Trap scroll when drawer is open
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = "hidden";
+        } else {
+            document.body.style.overflow = "";
+        }
+        return () => {
+            document.body.style.overflow = "";
+        };
+    }, [isOpen]);
+
+    return (
+        <>
+            {/* Backdrop */}
+            <div
+                className={`md:hidden fixed inset-0 z-40 bg-black/60 backdrop-blur-sm transition-opacity duration-300 ${
+                    isOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
+                }`}
+                onClick={onClose}
+                aria-hidden="true"
+            />
+
+            {/* Drawer */}
+            <nav
+                id="mobile-nav"
+                role="navigation"
+                aria-label="Mobile navigation"
+                className={`md:hidden fixed top-0 right-0 h-full z-50 w-[280px] max-w-[85vw] flex flex-col
+                    bg-[var(--surface)] border-l border-[var(--border-hi)]
+                    shadow-2xl shadow-black/50
+                    transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]
+                    ${isOpen ? "translate-x-0" : "translate-x-full"}`}
+            >
+                {/* Drawer Header */}
+                <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--border)]">
+                    <span className="text-sm font-bold text-[var(--muted)] uppercase tracking-widest font-mono">
+                        Navigation
+                    </span>
+                    <button
+                        onClick={onClose}
+                        aria-label="Close navigation"
+                        className="flex items-center justify-center w-9 h-9 rounded-lg text-[var(--muted)] hover:text-white hover:bg-white/10 transition-all"
+                    >
+                        <X className="w-4 h-4" />
+                    </button>
+                </div>
+
+                {/* Drawer Body */}
+                <div className="flex flex-col gap-1 p-4 flex-1 overflow-y-auto">
+                    <p className="text-[10px] uppercase tracking-widest text-[var(--muted)] font-mono px-3 mb-1">
+                        App
+                    </p>
+                    <NavItem
+                        to="/payroll"
+                        icon={<Wallet className="w-4 h-4" />}
+                        label="Payroll"
+                        onClick={onClose}
+                    />
+                    <NavItem
+                        to="/employee"
+                        icon={<User className="w-4 h-4" />}
+                        label="Employees"
+                        onClick={onClose}
+                    />
+
+                    <div className="h-px bg-[var(--border)] my-3" />
+
+                    <p className="text-[10px] uppercase tracking-widest text-[var(--muted)] font-mono px-3 mb-1">
+                        Developer
+                    </p>
+                    <NavItem
+                        to="/debug"
+                        icon={<Code className="w-4 h-4" />}
+                        label="debugger"
+                        isDebug
+                        onClick={onClose}
+                    />
+                </div>
+
+                {/* Drawer Footer: User + Wallet */}
+                <div className="border-t border-[var(--border)] p-4 flex flex-col gap-3">
+                    <div className="flex items-center gap-3 p-3 rounded-xl bg-white/[0.03] border border-[var(--border)]">
+                        <Avatar
+                            email={currentUser.email}
+                            name={currentUser.name}
+                            imageUrl={currentUser.imageUrl}
+                            size="md"
+                        />
+                        <div className="flex-1 min-w-0">
+                            <p className="text-sm font-semibold text-[var(--text)] truncate leading-tight">
+                                {currentUser.name}
+                            </p>
+                            <p className="text-xs text-[var(--muted)] truncate leading-tight">
+                                {currentUser.email}
+                            </p>
+                        </div>
+                    </div>
+                    <ConnectAccount />
+                </div>
+            </nav>
+        </>
+    );
+};
+
+// ── Public hook so AppLayout can control open state ─────────────────
+export function useMobileNav() {
+    const [isOpen, setIsOpen] = useState(false);
+    const location = useLocation();
+
+    // Close on route change
+    useEffect(() => {
+        setIsOpen(false);
+    }, [location.pathname]);
+
+    return {
+        isOpen,
+        open: () => setIsOpen(true),
+        close: () => setIsOpen(false),
+        toggle: () => setIsOpen((v) => !v),
+    };
+}
+
+// ── Default export: thin wrapper that wires everything ──────────────
+const AppNav: React.FC = () => null; // kept for compatibility; layout now uses sub-exports
+
+export { DesktopNav, MobileNav };
 export default AppNav;
\ No newline at end of file
diff --git a/frontend/src/components/EmployeeList.tsx b/frontend/src/components/EmployeeList.tsx
index 8561086..7a162aa 100644
--- a/frontend/src/components/EmployeeList.tsx
+++ b/frontend/src/components/EmployeeList.tsx
@@ -21,87 +21,158 @@ export const EmployeeList: React.FC<EmployeeListProps> = ({
     employees,
     onEmployeeClick,
 }) => {
-
     const shortenWallet = (wallet: string) => {
-        if (!wallet) return "";
-        return `${wallet.slice(0, 4)}...${wallet.slice(-4)}`;
+        if (!wallet) return "—";
+        return `${wallet.slice(0, 6)}…${wallet.slice(-4)}`;
     };
 
+    const StatusBadge: React.FC<{ status?: string }> = ({ status }) => (
+        <span
+            className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider border ${status === "Active"
+                    ? "bg-green-950/60 text-green-400 border-green-800/60"
+                    : "bg-red-950/60 text-red-400 border-red-800/60"
+                }`}
+        >
+            <div
+                className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${status === "Active" ? "bg-green-400" : "bg-red-400"
+                    }`}
+            />
+            {status ?? "—"}
+        </span>
+    );
+
     return (
         <div className="w-full card glass noise overflow-hidden p-0">
-            <table className="w-full text-left border-collapse">
-                <thead>
-                    <tr className="border-b border-hi">
-                        <th className="p-6 text-xs font-bold uppercase tracking-widest text-muted">Employee</th>
-                        <th className="p-6 text-xs font-bold uppercase tracking-widest text-muted">Role</th>
-                        <th className="p-6 text-xs font-bold uppercase tracking-widest text-muted">Wallet Address</th>
-                        <th className="p-6 text-xs font-bold uppercase tracking-widest text-muted">Status</th>
-                        <th className="p-6 text-xs font-bold uppercase tracking-widest text-muted">Actions</th>
-                    </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200">
-                    {employees.length === 0 ? (
-                        <tr>
-                            <td colSpan={5} className="p-6 text-center text-gray-500">
-                                No employees found
-                            </td>
+            {/* ── Desktop / tablet table (hidden on xs) ── */}
+            <div className="hidden sm:block overflow-x-auto">
+                <table className="w-full text-left border-collapse min-w-[640px]">
+                    <thead>
+                        <tr className="border-b border-[var(--border-hi)]">
+                            <th className="px-5 py-4 text-xs font-bold uppercase tracking-widest text-[var(--muted)]">
+                                Employee
+                            </th>
+                            <th className="px-5 py-4 text-xs font-bold uppercase tracking-widest text-[var(--muted)]">
+                                Role
+                            </th>
+                            <th className="px-5 py-4 text-xs font-bold uppercase tracking-widest text-[var(--muted)]">
+                                Wallet
+                            </th>
+                            <th className="px-5 py-4 text-xs font-bold uppercase tracking-widest text-[var(--muted)]">
+                                Status
+                            </th>
+                            <th className="px-5 py-4 text-xs font-bold uppercase tracking-widest text-[var(--muted)]">
+                                Actions
+                            </th>
                         </tr>
-                    ) : (
-                        employees.map((employee) => (
-                            <tr
-                                key={employee.id}
-                                onClick={() => onEmployeeClick?.(employee)}
-                                className="cursor-pointer transition"
-                            >
-                                <td className="p-6">
-                                    <div className="flex items-center gap-3">
-                                        <Avatar
-                                            email={employee.email}
-                                            name={employee.name}
-                                            imageUrl={employee.imageUrl}
-                                            size="sm"
-                                        />
-                                        <span className="text-xs text-muted">
-                                            {employee.name}
-                                        </span>
-                                    </div>
-                                </td>
-                                <td className="p-6 text-sm font-medium">
-                                    {employee.position}
-                                </td>
-                                <td className="p-6 font-mono text-xs text-muted">
-                                    {shortenWallet(employee.wallet || "")}
-                                </td>
-                                <td className="p-6">
-                                    <span
-                                        className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider border ${employee.status === "Active"
-                                            ? "bg-green-100 text-green-600 border-green-200"
-                                            : "bg-red-100 text-red-600 border-red-200"
-                                            }`}
-                                    >
-                                        <div
-                                            className={`w-1 h-1 rounded-full ${employee.status === "Active"
-                                                ? "bg-green-600"
-                                                : "bg-red-600"
-                                                }`}
-                                        />
-                                        {employee.status || "-"}
-                                    </span>
-                                </td>
-                                <td className="p-6">
-                                    <button className="text-muted hover:text-text transition-colors">
-                                        <Icon.Settings01 size="sm" />
-                                    </button>
+                    </thead>
+                    <tbody className="divide-y divide-[var(--border)]">
+                        {employees.length === 0 ? (
+                            <tr>
+                                <td colSpan={5} className="px-5 py-10 text-center text-[var(--muted)]">
+                                    No employees found
                                 </td>
                             </tr>
-                        ))
-                    )}
-                </tbody>
-            </table>
-                 <div className="p-6 w-full flex flex-col items-center justify-center text-center bg-black/10">
-                    <p className="text-muted mb-4 font-medium">Need to migrate your legacy payroll system?</p>
-                    <button className="text-accent font-bold text-sm hover:underline">Import from CSV (Coming Soon)</button>
-                </div>
+                        ) : (
+                            employees.map((employee) => (
+                                <tr
+                                    key={employee.id}
+                                    onClick={() => onEmployeeClick?.(employee)}
+                                    className="cursor-pointer transition hover:bg-white/[0.02]"
+                                >
+                                    <td className="px-5 py-4">
+                                        <div className="flex items-center gap-3">
+                                            <Avatar
+                                                email={employee.email}
+                                                name={employee.name}
+                                                imageUrl={employee.imageUrl}
+                                                size="sm"
+                                            />
+                                            <div className="min-w-0">
+                                                <p className="text-sm font-medium text-[var(--text)] truncate">
+                                                    {employee.name}
+                                                </p>
+                                                <p className="text-xs text-[var(--muted)] truncate">
+                                                    {employee.email}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td className="px-5 py-4 text-sm font-medium text-[var(--text)]">
+                                        {employee.position}
+                                    </td>
+                                    <td className="px-5 py-4 font-mono text-xs text-[var(--muted)]">
+                                        {shortenWallet(employee.wallet ?? "")}
+                                    </td>
+                                    <td className="px-5 py-4">
+                                        <StatusBadge status={employee.status} />
+                                    </td>
+                                    <td className="px-5 py-4">
+                                        <button
+                                            className="touch-target flex items-center justify-center w-9 h-9 rounded-lg text-[var(--muted)] hover:text-[var(--text)] hover:bg-white/10 transition-all"
+                                            aria-label={`Settings for ${employee.name}`}
+                                        >
+                                            <Icon.Settings01 size="sm" />
+                                        </button>
+                                    </td>
+                                </tr>
+                            ))
+                        )}
+                    </tbody>
+                </table>
+            </div>
+
+            {/* ── Mobile card stack (visible only on xs) ── */}
+            <div className="sm:hidden flex flex-col divide-y divide-[var(--border)]">
+                {employees.length === 0 ? (
+                    <p className="px-5 py-10 text-center text-[var(--muted)] text-sm">
+                        No employees found
+                    </p>
+                ) : (
+                    employees.map((employee) => (
+                        <div
+                            key={employee.id}
+                            onClick={() => onEmployeeClick?.(employee)}
+                            className="flex items-center gap-3 px-4 py-4 cursor-pointer hover:bg-white/[0.02] transition active:bg-white/[0.04]"
+                        >
+                            <Avatar
+                                email={employee.email}
+                                name={employee.name}
+                                imageUrl={employee.imageUrl}
+                                size="md"
+                            />
+                            <div className="flex-1 min-w-0">
+                                <div className="flex items-center justify-between gap-2 mb-0.5">
+                                    <p className="text-sm font-semibold text-[var(--text)] truncate">
+                                        {employee.name}
+                                    </p>
+                                    <StatusBadge status={employee.status} />
+                                </div>
+                                <p className="text-xs text-[var(--muted)] truncate">{employee.position}</p>
+                                <p className="text-[10px] font-mono text-[var(--muted)] mt-0.5 truncate">
+                                    {shortenWallet(employee.wallet ?? "")}
+                                </p>
+                            </div>
+                            <button
+                                className="flex-shrink-0 touch-target flex items-center justify-center w-10 h-10 rounded-lg text-[var(--muted)] hover:text-[var(--text)] hover:bg-white/10 transition-all"
+                                aria-label={`Settings for ${employee.name}`}
+                                onClick={(e) => e.stopPropagation()}
+                            >
+                                <Icon.Settings01 size="sm" />
+                            </button>
+                        </div>
+                    ))
+                )}
+            </div>
+
+            {/* CSV footer */}
+            <div className="px-5 py-4 flex flex-col sm:flex-row items-center justify-center gap-2 text-center bg-black/10 border-t border-[var(--border)]">
+                <p className="text-[var(--muted)] font-medium text-sm">
+                    Need to migrate your legacy payroll system?
+                </p>
+                <button className="text-[var(--accent)] font-bold text-sm hover:underline">
+                    Import from CSV (Coming Soon)
+                </button>
+            </div>
         </div>
     );
 };
\ No newline at end of file
diff --git a/frontend/src/pages/EmployeeEntry.tsx b/frontend/src/pages/EmployeeEntry.tsx
index 79235b3..5f50b11 100644
--- a/frontend/src/pages/EmployeeEntry.tsx
+++ b/frontend/src/pages/EmployeeEntry.tsx
@@ -27,184 +27,187 @@ const initialFormState: EmployeeFormState = {
 };
 
 export default function EmployeeEntry() {
-    const [isAdding, setIsAdding] = useState(false);
-    const [formData, setFormData] = useState<EmployeeFormState>(initialFormState);
-    const [notification, setNotification] = useState<{
-      message: string;
-      secretKey?: string;
-    } | null>(null);
-
-    const { saving, lastSaved, loadSavedData } = useAutosave<EmployeeFormState>(
-      "employee-entry-draft",
-      formData
-    );
+  const [isAdding, setIsAdding] = useState(false);
+  const [formData, setFormData] = useState<EmployeeFormState>(initialFormState);
+  const [notification, setNotification] = useState<{
+    message: string;
+    secretKey?: string;
+  } | null>(null);
+
+  const { saving, lastSaved, loadSavedData } = useAutosave<EmployeeFormState>(
+    "employee-entry-draft",
+    formData
+  );
+
+  useEffect(() => {
+    const saved = loadSavedData();
+    if (saved) {
+      setFormData(saved);
+    }
+  }, [loadSavedData]);
+
+  const mockEmployees = [
+    {
+      id: "1",
+      name: "Wilfred G.",
+      email: "wilfred@example.com",
+      imageUrl: "",
+      position: "Lead Developer",
+      wallet: "GDUKMGUGKAAZBAMNSMUA4Y6G4XDSZPSZ3SW5UN3ARVMO6QSRDWP5YLEXT2U2D6",
+      status: "Active" as "Active",
+    },
+    {
+      id: "2",
+      name: "Chinelo A.",
+      email: "chinelo@example.com",
+      imageUrl: "",
+      position: "Product Manager",
+      wallet: "GDUKMGUGKAAZBAMNSMUA4Y6G4XDSZPSZ3SW5UN3ARVMO6QSRDWP5YLEXT2U2D6",
+      status: "Active" as "Active",
+    },
+    {
+      id: "3",
+      name: "Emeka N.",
+      email: "emeka@example.com",
+      imageUrl: "https://i.pravatar.cc/150?img=3",
+      position: "UX Designer",
+      wallet: "GDUKMGUGKAAZBAMNSMUA4Y6G4XDSZPSZ3SW5UN3ARVMO6QSRDWP5YLEXT2U2D6",
+      status: "Active" as "Active",
+    },
+    {
+      id: "4",
+      name: "Fatima K.",
+      email: "fatima@example.com",
+      imageUrl: "",
+      position: "HR Specialist",
+      wallet: "GDUKMGUGKAAZBAMNSMUA4Y6G4XDSZPSZ3SW5UN3ARVMO6QSRDWP5YLEXT2U2D6",
+      status: "Active" as "Active",
+    }
+  ];
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSelectChange = (name: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    let generatedWallet: { publicKey: string; secretKey: string } | undefined;
+    if (!formData.walletAddress) {
+      generatedWallet = generateWallet();
+      setFormData((prev) => ({
+        ...prev,
+        walletAddress: generatedWallet!.publicKey,
+      }));
+    }
 
-    useEffect(() => {
-      const saved = loadSavedData();
-      if (saved) {
-        setFormData(saved);
-      }
-    }, [loadSavedData]);
-
-    const mockEmployees = [
-        {
-            id: "1",
-            name: "Wilfred G.",
-            email: "wilfred@example.com",
-            imageUrl: "",
-            position: "Lead Developer",
-            wallet: "GDUKMGUGKAAZBAMNSMUA4Y6G4XDSZPSZ3SW5UN3ARVMO6QSRDWP5YLEXT2U2D6",
-            status: "Active" as "Active",
-        },
-        {
-            id: "2",
-            name: "Chinelo A.",
-            email: "chinelo@example.com",
-            imageUrl: "",
-            position: "Product Manager",
-            wallet: "GDUKMGUGKAAZBAMNSMUA4Y6G4XDSZPSZ3SW5UN3ARVMO6QSRDWP5YLEXT2U2D6",
-            status: "Active" as "Active",
-        },
-        {
-            id: "3",
-            name: "Emeka N.",
-            email: "emeka@example.com",
-            imageUrl: "https://i.pravatar.cc/150?img=3", // custom image
-            position: "UX Designer",
-            wallet: "GDUKMGUGKAAZBAMNSMUA4Y6G4XDSZPSZ3SW5UN3ARVMO6QSRDWP5YLEXT2U2D6",
-            status: "Active" as "Active",
-        },
-        {
-            id: "4",
-            name: "Fatima K.",
-            email: "fatima@example.com",
-            imageUrl: "",
-            position: "HR Specialist",
-            wallet: "GDUKMGUGKAAZBAMNSMUA4Y6G4XDSZPSZ3SW5UN3ARVMO6QSRDWP5YLEXT2U2D6",
-            status: "Active" as "Active",
-        }
-    ];
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const { name, value } = e.target;
-      setFormData((prev) => ({ ...prev, [name]: value }));
+    const submitData = {
+      ...formData,
+      walletAddress: generatedWallet
+        ? generatedWallet.publicKey
+        : formData.walletAddress,
     };
 
-    const handleSelectChange = (name: string, value: string) => {
-      setFormData((prev) => ({ ...prev, [name]: value }));
-    };
+    console.log("Form submitted, employee saved:", submitData);
 
-    const handleSubmit = (e: React.FormEvent) => {
-      e.preventDefault();
-
-      let generatedWallet: { publicKey: string; secretKey: string } | undefined;
-      if (!formData.walletAddress) {
-        generatedWallet = generateWallet();
-        setFormData((prev) => ({
-          ...prev,
-          walletAddress: generatedWallet!.publicKey,
-        }));
-      }
-
-      const submitData = {
-        ...formData,
-        walletAddress: generatedWallet
-          ? generatedWallet.publicKey
-          : formData.walletAddress,
-      };
-
-      console.log("Form submitted, employee saved:", submitData);
-
-      setNotification({
-        message: `Employee ${submitData.fullName} added successfully! ${
-          generatedWallet ? "A wallet was created for them." : ""
+    setNotification({
+      message: `Employee ${submitData.fullName} added successfully! ${generatedWallet ? "A wallet was created for them." : ""
         }`,
-        secretKey: generatedWallet?.secretKey,
-      });
-    };
+      secretKey: generatedWallet?.secretKey,
+    });
+  };
 
-    if (isAdding) {
-      return (
-        <div style={{ maxWidth: "600px", margin: "2rem auto", padding: "0 1rem" }}>
-          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1.5rem" }}>
-            <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
-              <button 
-                onClick={() => setIsAdding(false)} 
-                className="text-muted hover:text-text transition-colors"
-                title="Back to Directory"
-              >
-                <Icon.ArrowLeft />
-              </button>
-              <h1 style={{ fontWeight: "bold", fontSize: "1.5rem", margin: 0 }}>Add New Employee</h1>
-            </div>
-            <AutosaveIndicator saving={saving} lastSaved={lastSaved} />
+  // ── Add Employee Form View ──
+  if (isAdding) {
+    return (
+      <div className="w-full max-w-xl mx-auto px-0 sm:px-2 py-2">
+        {/* Header row */}
+        <div className="flex flex-wrap items-center justify-between gap-3 mb-6">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => setIsAdding(false)}
+              className="touch-target flex items-center justify-center w-10 h-10 rounded-lg glass border border-[var(--border-hi)] text-[var(--muted)] hover:text-white transition-all"
+              title="Back to Directory"
+              aria-label="Back to Directory"
+            >
+              <Icon.ArrowLeft />
+            </button>
+            <h1 className="text-xl sm:text-2xl font-black tracking-tight">Add New Employee</h1>
           </div>
-
-          {notification && (
-            <div style={{ marginBottom: "1.5rem" }}>
-              <Alert variant="success" title="Success" placement="inline">
-                {notification.message}
-              </Alert>
-              {notification.secretKey && (
-                <div style={{
-                  marginTop: "0.5rem", padding: "1rem", backgroundColor: "var(--color-yellow-100)",
-                  color: "var(--color-yellow-900)", borderRadius: "8px", border: "1px solid var(--color-yellow-300)",
-                  fontSize: "0.875rem"
-                }}>
-                  <strong style={{ display: "block", marginBottom: "0.5rem" }}>[SIMULATED EMAIL NOTIFICATION TO EMPLOYEE]</strong>
-                  Hello {formData.fullName}, your employer has added you to the payroll.<br />
-                  A default Stellar wallet has been created for you to receive claimable balances.<br />
-                  <b style={{ display: "block", marginTop: "0.5rem" }}>Your Secret Key:</b>{" "}
-                  <code style={{ wordBreak: "break-all" }}>{notification.secretKey}</code><br />
-                  <i style={{ display: "block", marginTop: "0.5rem" }}>Please save this secret key securely to claim your future salary.</i>
-                </div>
-              )}
-            </div>
-          )}
-
-          <Card>
-            <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
-              <Input id="fullName" fieldSize="md" label="Full Name" name="fullName" value={formData.fullName} onChange={handleChange} placeholder="Jane Smith" required />
-              <Input id="walletAddress" fieldSize="md" label="Stellar Wallet Address (Optional)" note="If no wallet is provided, a claimable balance will be created using a new wallet generated for them." name="walletAddress" value={formData.walletAddress} onChange={handleChange} placeholder="Leave blank to generate a wallet" />
-              <Select id="role" fieldSize="md" label="Role" value={formData.role} onChange={(e) => handleSelectChange("role", e.target.value)}>
-                <option value="contractor">Contractor</option>
-                <option value="full-time">Full Time</option>
-                <option value="part-time">Part Time</option>
-              </Select>
-              <Select id="currency" fieldSize="md" label="Preferred Currency" value={formData.currency} onChange={(e) => handleSelectChange("currency", e.target.value)}>
-                <option value="USDC">USDC</option>
-                <option value="XLM">XLM</option>
-                <option value="EURC">EURC</option>
-              </Select>
-              <Button type="submit" variant="primary" size="md">Add Employee</Button>
-            </form>
-          </Card>
+          <AutosaveIndicator saving={saving} lastSaved={lastSaved} />
         </div>
-      );
-    }
-
-    return (
-        <div className="flex-1 flex flex-col items-center justify-start p-12 max-w-6xl mx-auto w-full">
-            <div className="w-full mb-12 flex items-end justify-between border-b border-hi pb-8">
-                <div>
-                    <h1 className="text-4xl font-black mb-2 tracking-tight">Workforce <span className="text-accent">Directory</span></h1>
-                    <p className="text-muted font-mono text-sm tracking-wider uppercase">Employee roster and compliance</p>
-                </div>
-                <button 
-                  id="tour-add-employee" 
-                  onClick={() => setIsAdding(true)}
-                  className="px-5 py-2.5 bg-accent text-bg font-bold rounded-lg hover:bg-accent/90 transition-all flex items-center gap-2 text-sm shadow-lg shadow-accent/10"
-                >
-                    <Icon.Plus size="sm" />
-                    Add Employee
-                </button>
-            </div>
-
-            <EmployeeList
-                employees={mockEmployees}
-                onEmployeeClick={(employee) => alert(`Clicked: ${employee.name}`)}
-            />
 
-        </div>
+        {notification && (
+          <div className="mb-6">
+            <Alert variant="success" title="Success" placement="inline">
+              {notification.message}
+            </Alert>
+            {notification.secretKey && (
+              <div className="mt-3 p-4 bg-yellow-900/20 text-yellow-300 rounded-xl border border-yellow-700/40 text-sm leading-relaxed">
+                <strong className="block mb-2 text-yellow-200">[SIMULATED EMAIL NOTIFICATION TO EMPLOYEE]</strong>
+                Hello {formData.fullName}, your employer has added you to the payroll.<br />
+                A default Stellar wallet has been created for you to receive claimable balances.<br />
+                <b className="block mt-2 text-yellow-200">Your Secret Key:</b>{" "}
+                <code className="break-all text-xs font-mono">{notification.secretKey}</code><br />
+                <i className="block mt-2 text-yellow-400/80">Please save this secret key securely.</i>
+              </div>
+            )}
+          </div>
+        )}
+
+        <Card>
+          <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
+            <Input id="fullName" fieldSize="md" label="Full Name" name="fullName" value={formData.fullName} onChange={handleChange} placeholder="Jane Smith" required />
+            <Input id="walletAddress" fieldSize="md" label="Stellar Wallet Address (Optional)" note="If no wallet is provided, a claimable balance will be created using a new wallet generated for them." name="walletAddress" value={formData.walletAddress} onChange={handleChange} placeholder="Leave blank to generate a wallet" />
+            <Select id="role" fieldSize="md" label="Role" value={formData.role} onChange={(e) => handleSelectChange("role", e.target.value)}>
+              <option value="contractor">Contractor</option>
+              <option value="full-time">Full Time</option>
+              <option value="part-time">Part Time</option>
+            </Select>
+            <Select id="currency" fieldSize="md" label="Preferred Currency" value={formData.currency} onChange={(e) => handleSelectChange("currency", e.target.value)}>
+              <option value="USDC">USDC</option>
+              <option value="XLM">XLM</option>
+              <option value="EURC">EURC</option>
+            </Select>
+            <Button type="submit" variant="primary" size="md">Add Employee</Button>
+          </form>
+        </Card>
+      </div>
     );
+  }
+
+  // ── Directory View ──
+  return (
+    <div className="flex-1 flex flex-col items-start justify-start w-full max-w-6xl mx-auto">
+      {/* Page header */}
+      <div className="w-full mb-6 sm:mb-10 flex flex-wrap items-end justify-between gap-4 border-b border-[var(--border-hi)] pb-6">
+        <div>
+          <h1 className="text-3xl sm:text-4xl font-black mb-1 tracking-tight">
+            Workforce <span className="text-[var(--accent)]">Directory</span>
+          </h1>
+          <p className="text-[var(--muted)] font-mono text-xs tracking-wider uppercase">
+            Employee roster and compliance
+          </p>
+        </div>
+        <button
+          id="tour-add-employee"
+          onClick={() => setIsAdding(true)}
+          className="touch-target px-5 py-2.5 bg-[var(--accent)] text-bg font-bold rounded-lg hover:bg-[var(--accent)]/90 transition-all flex items-center gap-2 text-sm shadow-lg shadow-[var(--accent)]/10"
+        >
+          <Icon.Plus size="sm" />
+          Add Employee
+        </button>
+      </div>
+
+      <EmployeeList
+        employees={mockEmployees}
+        onEmployeeClick={(employee) => alert(`Clicked: ${employee.name}`)}
+      />
+    </div>
+  );
 }
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 47b5a7b..5690a7a 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -5,25 +5,30 @@ export default function Home() {
   const navigate = useNavigate();
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-[80vh] text-center px-6 py-12">
-      <div id="tour-welcome" className="mb-10 p-8 glass glow-mint rounded-full relative">
-        <Icon.Rocket01 size="xl" className="text-accent relative z-20" />
-        <div className="absolute inset-0 bg-accent opacity-5 blur-2xl rounded-full" />
+    <div className="flex flex-col items-center justify-center min-h-[80vh] text-center px-4 sm:px-6 py-12">
+      {/* Icon glow */}
+      <div id="tour-welcome" className="mb-8 sm:mb-10 p-6 sm:p-8 glass glow-mint rounded-full relative">
+        <Icon.Rocket01 size="xl" className="text-[var(--accent)] relative z-20" />
+        <div className="absolute inset-0 bg-[var(--accent)] opacity-5 blur-2xl rounded-full" />
       </div>
 
-      <h1 className="text-6xl font-black mb-6 tracking-tighter leading-none">
-        Automate your <span className="text-accent">Payroll</span> <br />
-        on the <span className="text-accent2">Stellar</span> Network.
+      {/* Hero headline — scales down on mobile */}
+      <h1 className="text-4xl sm:text-5xl lg:text-6xl font-black mb-5 sm:mb-6 tracking-tighter leading-tight sm:leading-none">
+        Automate your <span className="text-[var(--accent)]">Payroll</span>
+        <br className="hidden sm:block" />
+        {" "}on the <span className="text-[var(--accent2)]">Stellar</span> Network.
       </h1>
 
-      <p className="text-xl text-muted max-w-2xl mb-12 leading-relaxed font-medium">
+      {/* Sub-headline */}
+      <p className="text-base sm:text-xl text-[var(--muted)] max-w-2xl mb-10 sm:mb-12 leading-relaxed font-medium">
         PayD is the next-gen dashboard for real-time employee payments.
         Secure, transparent, and ultra-fast.
       </p>
 
-      <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6">
+      {/* CTA buttons — stack on mobile, side-by-side on sm+ */}
+      <div className="flex flex-col sm:flex-row gap-3 sm:gap-6 w-full sm:w-auto mt-4">
         <button
-          className="px-8 py-4 bg-accent text-bg font-bold rounded-xl hover:scale-105 transition-transform shadow-lg shadow-accent/20"
+          className="touch-target w-full sm:w-auto px-8 py-4 bg-[var(--accent)] text-bg font-bold rounded-xl hover:scale-105 transition-transform shadow-lg shadow-[var(--accent)]/20 text-sm sm:text-base"
           onClick={() => {
             void navigate("/payroll");
           }}
@@ -31,7 +36,7 @@ export default function Home() {
           Manage Payroll
         </button>
         <button
-          className="px-8 py-4 glass border-hi text-text font-bold rounded-xl hover:bg-white/5 transition-all outline-none"
+          className="touch-target w-full sm:w-auto px-8 py-4 glass border-[var(--border-hi)] text-[var(--text)] font-bold rounded-xl hover:bg-white/5 transition-all outline-none text-sm sm:text-base"
           onClick={() => {
             void navigate("/employee");
           }}
@@ -40,29 +45,36 @@ export default function Home() {
         </button>
       </div>
 
-      <div className="mt-24 grid grid-cols-1 md:grid-cols-3 gap-6 text-left max-w-6xl w-full">
+      {/* Feature cards — 1 col on mobile, 3 on md+ */}
+      <div className="mt-16 sm:mt-24 grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6 text-left max-w-6xl w-full">
         <div className="card glass noise">
-          <div className="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center mb-6 border border-accent/20">
-            <Icon.CreditCard01 size="lg" className="text-accent" />
+          <div className="w-11 h-11 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center mb-5 border border-[var(--accent)]/20">
+            <Icon.CreditCard01 size="lg" className="text-[var(--accent)]" />
           </div>
-          <h3 className="text-xl font-bold mb-3">Instant Settlement</h3>
-          <p className="text-muted text-sm leading-relaxed">No more waiting for banks. Pay your staff in seconds with sub-cent fees.</p>
+          <h3 className="text-lg sm:text-xl font-bold mb-2">Instant Settlement</h3>
+          <p className="text-[var(--muted)] text-sm leading-relaxed">
+            No more waiting for banks. Pay your staff in seconds with sub-cent fees.
+          </p>
         </div>
 
         <div className="card glass noise">
-          <div className="w-12 h-12 rounded-lg bg-accent2/10 flex items-center justify-center mb-6 border border-accent2/20">
-            <Icon.Users01 size="lg" className="text-accent2" />
+          <div className="w-11 h-11 rounded-lg bg-[var(--accent2)]/10 flex items-center justify-center mb-5 border border-[var(--accent2)]/20">
+            <Icon.Users01 size="lg" className="text-[var(--accent2)]" />
           </div>
-          <h3 className="text-xl font-bold mb-3">Global Workforce</h3>
-          <p className="text-muted text-sm leading-relaxed">Onboard anyone, anywhere. Pay in USDC, XLM, or local stablecoins.</p>
+          <h3 className="text-lg sm:text-xl font-bold mb-2">Global Workforce</h3>
+          <p className="text-[var(--muted)] text-sm leading-relaxed">
+            Onboard anyone, anywhere. Pay in USDC, XLM, or local stablecoins.
+          </p>
         </div>
 
         <div className="card glass noise">
-          <div className="w-12 h-12 rounded-lg bg-danger/10 flex items-center justify-center mb-6 border border-danger/20">
-            <Icon.ShieldTick size="lg" className="text-danger" />
+          <div className="w-11 h-11 rounded-lg bg-[var(--danger)]/10 flex items-center justify-center mb-5 border border-[var(--danger)]/20">
+            <Icon.ShieldTick size="lg" className="text-[var(--danger)]" />
           </div>
-          <h3 className="text-xl font-bold mb-3">On-Chain Audit</h3>
-          <p className="text-muted text-sm leading-relaxed">Full transparency. Every transaction is immutable and verifiable on-ledger.</p>
+          <h3 className="text-lg sm:text-xl font-bold mb-2">On-Chain Audit</h3>
+          <p className="text-[var(--muted)] text-sm leading-relaxed">
+            Full transparency. Every transaction is immutable and verifiable on-ledger.
+          </p>
         </div>
       </div>
     </div>
diff --git a/frontend/src/pages/PayrollScheduler.tsx b/frontend/src/pages/PayrollScheduler.tsx
index abf9233..d4d2224 100644
--- a/frontend/src/pages/PayrollScheduler.tsx
+++ b/frontend/src/pages/PayrollScheduler.tsx
@@ -79,11 +79,6 @@ export default function PayrollScheduler() {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-
-    // Assume employee's wallet address would be looked up by name or stored.
-    // Since we are mocking, we will just generate a random recipient for the claim test
-    // if we don't know it, or we could prompt for it.
-    // In a real flow, employeeName would map to their database record -> walletAddress.
     const mockRecipientPublicKey = generateWallet().publicKey;
 
     const result = createClaimableBalanceTransaction(
@@ -122,189 +117,142 @@ export default function PayrollScheduler() {
   };
 
   return (
-    <div
-      style={{
-        maxWidth: "900px",
-        margin: "2rem auto",
-        padding: "0 1rem",
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fit, minmax(350px, 1fr))",
-        gap: "2rem",
-      }}
-    >
-      <div>
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            marginBottom: "1.5rem",
-          }}
-        >
-          <h1 style={{ fontWeight: "bold", fontSize: "1.5rem" }}>
-            Payroll Scheduler
-          </h1>
-          <AutosaveIndicator saving={saving} lastSaved={lastSaved} />
+    <div className="w-full max-w-4xl mx-auto">
+      {/* Page title row */}
+      <div className="flex flex-wrap items-center justify-between gap-3 mb-6">
+        <h1 className="text-2xl sm:text-3xl font-black tracking-tight">
+          Payroll <span className="text-[var(--accent)]">Scheduler</span>
+        </h1>
+        <AutosaveIndicator saving={saving} lastSaved={lastSaved} />
+      </div>
+
+      {txResult && (
+        <div className="mb-6">
+          <Alert
+            variant={txResult.success ? "success" : "error"}
+            title={txResult.success ? "Success" : "Error"}
+            placement="inline"
+          >
+            {txResult.message}
+          </Alert>
         </div>
+      )}
 
-        {txResult && (
-          <div style={{ marginBottom: "1.5rem" }}>
-            <Alert
-              variant={txResult.success ? "success" : "error"}
-              title={txResult.success ? "Success" : "Error"}
-              placement="inline"
+      {/* Two-column grid: stacks to 1 column on mobile */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* ── Schedule Form ── */}
+        <div>
+          <h2 className="text-sm font-bold uppercase tracking-widest text-[var(--muted)] font-mono mb-4">
+            New Schedule
+          </h2>
+          <Card>
+            <form
+              onSubmit={handleSubmit}
+              style={{ display: "flex", flexDirection: "column", gap: "1.25rem" }}
             >
-              {txResult.message}
-            </Alert>
-          </div>
-        )}
+              <Input
+                id="employeeName"
+                fieldSize="md"
+                label="Employee Name"
+                name="employeeName"
+                value={formData.employeeName}
+                onChange={handleChange}
+                placeholder="John Doe"
+              />
 
-        <Card>
-          <form
-            onSubmit={handleSubmit}
-            style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}
-          >
-            <Input
-              id="employeeName"
-              fieldSize="md"
-              label="Employee Name"
-              name="employeeName"
-              value={formData.employeeName}
-              onChange={handleChange}
-              placeholder="John Doe"
-            />
-
-            <Input
-              id="amount"
-              fieldSize="md"
-              label="Amount (USD)"
-              name="amount"
-              value={formData.amount}
-              onChange={handleChange}
-              placeholder="5000"
-            />
+              <Input
+                id="amount"
+                fieldSize="md"
+                label="Amount (USD)"
+                name="amount"
+                value={formData.amount}
+                onChange={handleChange}
+                placeholder="5000"
+              />
 
-            <Select
-              id="frequency"
-              fieldSize="md"
-              label="Frequency"
-              value={formData.frequency}
-              onChange={(e) => handleSelectChange("frequency", e.target.value)}
-            >
-              <option value="weekly">Weekly</option>
-              <option value="monthly">Monthly</option>
-            </Select>
+              <Select
+                id="frequency"
+                fieldSize="md"
+                label="Frequency"
+                value={formData.frequency}
+                onChange={(e) => handleSelectChange("frequency", e.target.value)}
+              >
+                <option value="weekly">Weekly</option>
+                <option value="monthly">Monthly</option>
+              </Select>
 
-            <Input
-              id="startDate"
-              fieldSize="md"
-              label="Start Date (YYYY-MM-DD)"
-              name="startDate"
-              value={formData.startDate}
-              onChange={handleChange}
-              placeholder="2024-01-01"
-            />
+              <Input
+                id="startDate"
+                fieldSize="md"
+                label="Start Date (YYYY-MM-DD)"
+                name="startDate"
+                value={formData.startDate}
+                onChange={handleChange}
+                placeholder="2024-01-01"
+              />
 
-            <Button id="tour-init-payroll" type="submit" variant="primary" size="md">
-              Schedule Payroll
-            </Button>
-          </form>
-        </Card>
-      </div>
+              <Button id="tour-init-payroll" type="submit" variant="primary" size="md">
+                Schedule Payroll
+              </Button>
+            </form>
+          </Card>
+        </div>
 
-      <div>
-        <h2
-          style={{
-            fontWeight: "bold",
-            fontSize: "1.25rem",
-            marginBottom: "1.5rem",
-          }}
-        >
-          Pending Claims
-        </h2>
-        <Card>
-          {pendingClaims.length === 0 ? (
-            <p style={{ color: "var(--color-gray-500)", margin: 0 }}>
-              No pending claimable balances.
-            </p>
-          ) : (
-            <ul
-              style={{
-                listStyle: "none",
-                padding: 0,
-                margin: 0,
-                display: "flex",
-                flexDirection: "column",
-                gap: "1rem",
-              }}
-            >
-              {pendingClaims.map((claim) => (
-                <li
-                  key={claim.id}
-                  style={{
-                    border: "1px solid var(--color-gray-300)",
-                    padding: "1rem",
-                    borderRadius: "8px",
-                  }}
-                >
-                  <div
-                    style={{
-                      display: "flex",
-                      justifyContent: "space-between",
-                      alignItems: "flex-start",
-                      marginBottom: "0.5rem",
-                    }}
+        {/* ── Pending Claims ── */}
+        <div>
+          <h2 className="text-sm font-bold uppercase tracking-widest text-[var(--muted)] font-mono mb-4">
+            Pending Claims
+          </h2>
+          <Card>
+            {pendingClaims.length === 0 ? (
+              <p className="text-[var(--muted)] text-sm text-center py-4">
+                No pending claimable balances.
+              </p>
+            ) : (
+              <ul className="flex flex-col gap-3 p-0 m-0 list-none">
+                {pendingClaims.map((claim) => (
+                  <li
+                    key={claim.id}
+                    className="border border-[var(--border-hi)] rounded-xl p-4 hover:border-[var(--accent)]/30 transition"
                   >
-                    <h3 style={{ fontWeight: "500", margin: 0 }}>
-                      {claim.employeeName}
-                    </h3>
-                    <span
-                      style={{
-                        display: "inline-flex",
-                        alignItems: "center",
-                        padding: "0.125rem 0.625rem",
-                        borderRadius: "9999px",
-                        fontSize: "0.75rem",
-                        fontWeight: "500",
-                        backgroundColor: "var(--color-yellow-100)",
-                        color: "var(--color-yellow-800)",
-                      }}
-                    >
-                      {claim.status}
-                    </span>
-                  </div>
-                  <div
-                    style={{
-                      fontSize: "0.875rem",
-                      color: "var(--color-gray-600)",
-                      display: "flex",
-                      flexDirection: "column",
-                      gap: "0.25rem",
-                    }}
-                  >
-                    <p style={{ margin: 0 }}>
-                      Amount: {claim.amount} USDC
-                    </p>
-                    <p style={{ margin: 0 }}>
-                      Scheduled: {claim.dateScheduled}
-                    </p>
-                    <p
-                      style={{
-                        margin: 0,
-                        whiteSpace: "nowrap",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                      }}
-                      title={claim.claimantPublicKey}
-                    >
-                      To: {claim.claimantPublicKey}
-                    </p>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          )}
-        </Card>
+                    {/* Claim header */}
+                    <div className="flex items-start justify-between gap-2 mb-3">
+                      <h3 className="font-semibold text-sm text-[var(--text)]">
+                        {claim.employeeName}
+                      </h3>
+                      <span className="flex-shrink-0 inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-yellow-900/30 text-yellow-400 border border-yellow-700/30">
+                        {claim.status}
+                      </span>
+                    </div>
+
+                    {/* Claim details */}
+                    <div className="flex flex-col gap-1 text-xs text-[var(--muted)]">
+                      <div className="flex items-center justify-between">
+                        <span>Amount</span>
+                        <span className="font-mono text-[var(--text)] font-semibold">
+                          {claim.amount} USDC
+                        </span>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <span>Scheduled</span>
+                        <span className="font-mono">{claim.dateScheduled}</span>
+                      </div>
+                      <div className="flex items-center justify-between gap-2 mt-1 pt-1 border-t border-[var(--border)]">
+                        <span className="flex-shrink-0">To</span>
+                        <span
+                          className="font-mono text-[10px] truncate"
+                          title={claim.claimantPublicKey}
+                        >
+                          {claim.claimantPublicKey.slice(0, 8)}…{claim.claimantPublicKey.slice(-6)}
+                        </span>
+                      </div>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </Card>
+        </div>
       </div>
     </div>
   );