diff --git a/frontend/src/components/AppLayout.tsx b/frontend/src/components/AppLayout.tsx
index 1ec8b82..b10b425 100644
--- a/frontend/src/components/AppLayout.tsx
+++ b/frontend/src/components/AppLayout.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import { Outlet, NavLink, useLocation } from 'react-router-dom';
-import ConnectAccount from '../components/ConnectAccount';
-import AppNav from './AppNav';
-import ThemeToggle from './ThemeToggle';
+import React from "react";
+import { Outlet, NavLink, useLocation } from "react-router-dom";
+import { DesktopNav, MobileNav, HamburgerButton, useMobileNav } from "./AppNav";
+import ThemeToggle from "./ThemeToggle";
 
 // ── Page Wrapper ───────────────────────
 const PageWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
@@ -12,59 +11,54 @@ const PageWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
 // ── Layout ────────────────────────────
 const AppLayout: React.FC = () => {
   const location = useLocation();
+  const nav = useMobileNav();
 
   return (
-    <div
-      className="flex flex-col min-h-screen"
-      style={{ background: 'var(--bg)', color: 'var(--text)' }}
-    >
-      {/* Header */}
-      <header
-        className="fixed top-0 left-0 right-0 z-50 h-(--header-h) items-center px-16 flex justify-between backdrop-blur-[20px] backdrop-saturate-180 border-b"
-        style={{
-          background: 'color-mix(in srgb, var(--bg) 85%, transparent)',
-          borderColor: 'var(--border-hi)',
-        }}
-      >
+    <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-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="/">
-          <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-linear-to-br from-(--accent) to-(--accent2)">
+        <NavLink className="flex items-center gap-2.5 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-(--accent) to-(--accent2)">
             P
           </div>
           <span className="text-lg font-extrabold tracking-tight">
             Pay<span className="text-(--accent)">D</span>
           </span>
-          <span className="text-[9px] font-normal font-mono text-(--muted) tracking-widest uppercase border border-(--border-hi) px-1.5 py-0.5 rounded ml-0.5">
+          <span className="text-[9px] font-normal font-mono text-(--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">
-            <ThemeToggle />
-            <ConnectAccount />
-          </div>
+          <ThemeToggle />
+          <DesktopNav />
         </div>
+
+        {/* Hamburger (visible only on mobile) */}
+        <HamburgerButton isOpen={nav.isOpen} onToggle={nav.toggle} />
       </header>
 
-      {/* Main */}
-      <main className="flex flex-col flex-1 pt-(--header-h)">
+      {/* 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 text-xs font-mono text-(--muted)"
-        style={{ borderColor: 'var(--border-hi)' }}
-      >
+      {/* ── 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-(--muted)">
         <span>
-          © {new Date().getFullYear()} PayD — Licensed under the{' '}
+          © {new Date().getFullYear()} PayD — Licensed under the{" "}
           <a
             href="http://www.apache.org/licenses/LICENSE-2.0"
             target="_blank"
@@ -83,4 +77,6 @@ const AppLayout: React.FC = () => {
   );
 };
 
+
 export default AppLayout;
+
diff --git a/frontend/src/components/AppNav.tsx b/frontend/src/components/AppNav.tsx
index 5844130..9af11c5 100644
--- a/frontend/src/components/AppNav.tsx
+++ b/frontend/src/components/AppNav.tsx
@@ -1,197 +1,289 @@
-import React, { useState } from 'react';
-import { Link, NavLink } from 'react-router-dom';
-import {
-  Code,
-  User,
-  Wallet,
-  FileText,
-  Globe,
-  LayoutDashboard,
-  Activity,
-  Menu,
-  X,
-} from 'lucide-react';
-import { Avatar } from './Avatar';
-
-const AppNav: React.FC = () => {
-  const [mobileOpen, setMobileOpen] = useState(false);
-
-  // Mock user data - replace with actual user context
-  const currentUser = {
-    email: 'user@example.com',
-    name: 'John Doe',
-    imageUrl: undefined,
-  };
-
-  const navLinks = (
-    <>
-      <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-(--accent) bg-white/5'
-              : 'text-(--muted) hover:bg-white/10 hover:text-white'
-          }`
-        }
-        onClick={() => setMobileOpen(false)}
-      >
-        <span className="opacity-70">
-          <Wallet className="w-4 h-4" />
-        </span>
-        <span className="hidden sm:inline">Payroll</span>
-      </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-(--accent) bg-white/5'
-              : 'text-(--muted) hover:bg-white/10 hover:text-white'
-          }`
-        }
-        onClick={() => setMobileOpen(false)}
-      >
-        <span className="opacity-70">
-          <User className="w-4 h-4" />
-        </span>
-        <span className="hidden sm:inline">Employees</span>
-      </NavLink>
-
-      <NavLink
-        to="/portal"
-        className={({ isActive }) =>
-          `flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[13px] font-semibold transition ${
-            isActive
-              ? 'text-(--accent) bg-white/5'
-              : 'text-(--muted) hover:bg-white/10 hover:text-white'
-          }`
-        }
-      >
-        <span className="opacity-70">
-          <LayoutDashboard className="w-4 h-4" />
-        </span>
-        My Portal
-      </NavLink>
-
-      <NavLink
-        to="/reports"
-        className={({ isActive }) =>
-          `flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[13px] font-semibold transition ${
-            isActive
-              ? 'text-(--accent) bg-white/5'
-              : 'text-(--muted) hover:bg-white/10 hover:text-white'
-          }`
-        }
-        onClick={() => setMobileOpen(false)}
-      >
-        <span className="opacity-70">
-          <FileText className="w-4 h-4" />
-        </span>
-        <span className="hidden sm:inline">Reports</span>
-      </NavLink>
-
-      <NavLink
-        to="/cross-asset-payment"
-        className={({ isActive }) =>
-          `flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[13px] font-semibold transition ${
-            isActive
-              ? 'text-(--accent) bg-white/5'
-              : 'text-(--muted) hover:bg-white/10 hover:text-white'
-          }`
-        }
-        onClick={() => setMobileOpen(false)}
-      >
-        <span className="opacity-70">
-          <Globe className="w-4 h-4" />
-        </span>
-        <span className="hidden sm:inline">Cross-Asset</span>
-      </NavLink>
-
-      <NavLink
-        to="/transactions"
-        className={({ isActive }) =>
-          `flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[13px] font-semibold transition ${
-            isActive
-              ? 'text-(--accent) bg-white/5'
-              : 'text-(--muted) hover:bg-white/10 hover:text-white'
-          }`
-        }
-      >
-        <span className="opacity-70">
-          <Activity className="w-4 h-4" />
-        </span>
-        History
-      </NavLink>
-
-      <div className="w-px h-5 bg-(--border-hi) mx-2" />
-      <NavLink
-        to="/debug"
+import React, { useState, useEffect } from "react";
+import { Link, NavLink, useLocation } from "react-router-dom";
+import { Code, User, Wallet, FileText, Globe, X, Menu, Activity } from "lucide-react";
+import { Avatar } from "./Avatar";
+import ConnectAccount from "./ConnectAccount";
+
+// ── 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-(--muted) hover:text-white hover:border-(--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 }) =>
-          `flex items-center gap-1 px-3 py-1.5 rounded-lg text-[11px] font-mono tracking-wide border transition ${
-            isActive
-              ? 'text-(--accent2) bg-[rgba(124,111,247,0.06)] border-[rgba(124,111,247,0.25)]'
-              : 'text-(--accent2) bg-[rgba(124,111,247,0.06)] border-[rgba(124,111,247,0.25)] hover:bg-[rgba(124,111,247,0.12)]'
-          }`
+            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-(--accent2) bg-[rgba(124,111,247,0.10)] border-[rgba(124,111,247,0.35)]"
+                    : "text-(--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-(--accent) bg-white/5"
+                    : "text-(--muted) hover:bg-white/10 hover:text-white"
+                }`
         }
-        onClick={() => setMobileOpen(false)}
-      >
-        <Code className="w-4 h-4" />
-        <span className="hidden sm:inline">debugger</span>
-      </NavLink>
-
-      <Link
-        to="/help"
-        onClick={() => setMobileOpen(false)}
-        className="text-blue-500 text-xs underline"
-      >
-        Help
-      </Link>
-    </>
-  );
-
-  return (
-    <nav className="relative w-full">
-      <div className="flex items-center justify-between gap-4 px-3 py-2">
-        {/* Desktop links */}
-        <div className="hidden lg:flex items-center gap-4">{navLinks}</div>
-
-        {/* Mobile menu button */}
-        <button
-          aria-label="Toggle menu"
-          aria-expanded={mobileOpen}
-          onClick={() => setMobileOpen(!mobileOpen)}
-          className="lg:hidden p-2 rounded-md hover:bg-white/5 transition"
+    >
+        <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 as string | undefined,
+    };
+
+    return (
+        <nav
+            className="hidden md:flex items-center gap-2 lg:gap-4"
+            aria-label="Main navigation"
         >
-          {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
-        </button>
-
-        {/* User profile */}
-        <div className="ml-auto flex items-center gap-2">
-          <div className="p-1 bg-gray-50 rounded-lg flex items-center gap-2">
-            <Avatar
-              email={currentUser.email}
-              name={currentUser.name}
-              imageUrl={currentUser.imageUrl}
-              size="sm"
+            <NavItem to="/payroll" icon={<Wallet className="w-4 h-4" />} label="Payroll" />
+            <NavItem to="/employee" icon={<User className="w-4 h-4" />} label="Employees" />
+            <NavItem to="/reports" icon={<FileText className="w-4 h-4" />} label="Reports" />
+            <NavItem
+                to="/cross-asset-payment"
+                icon={<Globe className="w-4 h-4" />}
+                label="Cross-Asset"
             />
-            <div className="hidden md:block flex-1 min-w-0">
-              <p className="text-[10px] font-semibold text-gray-800 truncate">{currentUser.name}</p>
-              <p className="text-[10px] text-gray-500 truncate">{currentUser.email}</p>
+
+            <div className="w-px h-5 bg-(--border-hi) mx-1" />
+
+            <NavItem
+                to="/debug"
+                icon={<Code className="w-4 h-4" />}
+                label="debugger"
+                isDebug
+            />
+            <NavItem
+                to="/transactions"
+                icon={<Activity className="w-4 h-4" />}
+                label="History"
+            />
+
+            <Link
+                to="/help"
+                className="text-blue-500 text-[11px] font-medium hover:underline ml-1"
+            >
+                Need help?
+            </Link>
+
+            <div className="ml-2 flex items-center gap-2">
+                <ConnectAccount />
+            </div>
+
+            <div className="ml-1 pl-2 border-l border-(--border-hi) hidden lg:flex items-center gap-2">
+                <Avatar
+                    email={currentUser.email}
+                    name={currentUser.name}
+                    imageUrl={currentUser.imageUrl}
+                    size="sm"
+                />
+                <div className="flex-1 min-w-0 hidden xl:block">
+                    <p className="text-xs font-semibold text-(--text) truncate leading-tight">
+                        {currentUser.name}
+                    </p>
+                    <p className="text-[10px] text-(--muted) truncate leading-tight">
+                        {currentUser.email}
+                    </p>
+                </div>
             </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Mobile dropdown menu */}
-      {mobileOpen && (
-        <div className="lg:hidden absolute left-0 right-0 top-full z-40 bg-white shadow-lg border-t">
-          <div className="px-4 py-3 flex flex-col gap-2">{navLinks}</div>
-        </div>
-      )}
-    </nav>
-  );
+        </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-(--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-(--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-(--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-(--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}
+                    />
+                    <NavItem
+                        to="/reports"
+                        icon={<FileText className="w-4 h-4" />}
+                        label="Reports"
+                        onClick={onClose}
+                    />
+                    <NavItem
+                        to="/cross-asset-payment"
+                        icon={<Globe className="w-4 h-4" />}
+                        label="Cross-Asset"
+                        onClick={onClose}
+                    />
+                    <NavItem
+                        to="/transactions"
+                        icon={<Activity className="w-4 h-4" />}
+                        label="History"
+                        onClick={onClose}
+                    />
+
+                    <div className="h-px bg-[var(--border)] my-3" />
+
+                    <p className="text-[10px] uppercase tracking-widest text-(--muted) font-mono px-3 mb-1">
+                        Developer
+                    </p>
+                    <NavItem
+                        to="/debug"
+                        icon={<Code className="w-4 h-4" />}
+                        label="debugger"
+                        isDebug
+                        onClick={onClose}
+                    />
+
+                    <Link
+                        to="/help"
+                        onClick={onClose}
+                        className="px-3 py-2.5 text-blue-500 text-xs hover:underline mt-2 inline-block"
+                    >
+                        Need help?
+                    </Link>
+                </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-(--text) truncate leading-tight">
+                                {currentUser.name}
+                            </p>
+                            <p className="text-xs text-(--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;
+
diff --git a/frontend/src/components/EmployeeList.tsx b/frontend/src/components/EmployeeList.tsx
index e5856ac..e607616 100644
--- a/frontend/src/components/EmployeeList.tsx
+++ b/frontend/src/components/EmployeeList.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Avatar } from './Avatar';
+import { Icon } from '@stellar/design-system';
 import { CSVUploader } from './CSVUploader';
 import type { CSVRow } from './CSVUploader';
 import { Pencil, Trash2 } from 'lucide-react';
@@ -18,13 +19,14 @@ interface Employee {
 interface EmployeeListProps {
   employees: Employee[];
   onEmployeeClick?: (employee: Employee) => void;
-  onAddEmployee: (employee: Employee) => void;
+  onAddEmployee?: (employee: Employee) => void;
   onEditEmployee?: (employee: Employee) => void;
   onRemoveEmployee?: (id: string) => void;
 }
 
 export const EmployeeList: React.FC<EmployeeListProps> = ({
   employees,
+  onEmployeeClick,
   onAddEmployee,
   onEditEmployee,
   onRemoveEmployee,
@@ -40,6 +42,50 @@ export const EmployeeList: React.FC<EmployeeListProps> = ({
   });
   const [sortKey, setSortKey] = useState<keyof Employee>('name');
   const [sortAsc, setSortAsc] = useState(true);
+  const [newEmployee, setNewEmployee] = useState<Employee>({
+    id: '',
+    name: '',
+    email: '',
+    position: '',
+    wallet: '',
+    salary: 0,
+    status: 'Active',
+  });
+  const [editSalary, setEditSalary] = useState<number>(0);
+
+  const handleAddModalSubmit = () => {
+    onAddEmployee?.({
+      ...newEmployee,
+      id: String(Date.now() + Math.random()),
+    });
+    setNewEmployee({
+      id: '',
+      name: '',
+      email: '',
+      position: '',
+      wallet: '',
+      salary: 0,
+      status: 'Active',
+    });
+    setShowAddModal(false);
+  };
+
+  const handleEditModalSubmit = () => {
+    if (showEditModal.employee && onEditEmployee) {
+      onEditEmployee({
+        ...showEditModal.employee,
+        salary: editSalary,
+      });
+    }
+    setShowEditModal({ open: false });
+  };
+
+  const handleDeleteConfirm = () => {
+    if (showDeleteConfirm.id && onRemoveEmployee) {
+      onRemoveEmployee(showDeleteConfirm.id);
+    }
+    setShowDeleteConfirm({ open: false });
+  };
 
   const handleDataParsed = (data: CSVRow[]) => {
     const newEmployees = data.map((row) => ({
@@ -56,7 +102,7 @@ export const EmployeeList: React.FC<EmployeeListProps> = ({
 
   const handleAddEmployees = () => {
     csvData.forEach((employee) => {
-      onAddEmployee(employee);
+      onAddEmployee?.(employee);
     });
     setCsvData([]);
     setShowCSVUploader(false);
@@ -83,194 +129,165 @@ export const EmployeeList: React.FC<EmployeeListProps> = ({
   });
 
   const shortenWallet = (wallet: string) => {
-    if (!wallet) return '';
-    return `${wallet.slice(0, 4)}...${wallet.slice(-4)}`;
-  };
-
-  // Add Modal (simple inline for demo)
-  const [newEmployee, setNewEmployee] = useState<Employee>({
-    id: '',
-    name: '',
-    email: '',
-    position: '',
-    wallet: '',
-    salary: 0,
-    status: 'Active',
-  });
-
-  const handleAddModalSubmit = () => {
-    onAddEmployee({
-      ...newEmployee,
-      id: String(Date.now() + Math.random()),
-    });
-    setNewEmployee({
-      id: '',
-      name: '',
-      email: '',
-      position: '',
-      wallet: '',
-      salary: 0,
-      status: 'Active',
-    });
-    setShowAddModal(false);
-  };
-
-  // Edit Modal (simple inline for demo)
-  const [editSalary, setEditSalary] = useState<number>(0);
-
-  const handleEditModalSubmit = () => {
-    if (showEditModal.employee && onEditEmployee) {
-      onEditEmployee({
-        ...showEditModal.employee,
-        salary: editSalary,
-      });
-    }
-    setShowEditModal({ open: false });
+    if (!wallet) return "—";
+    return `${wallet.slice(0, 6)}…${wallet.slice(-4)}`;
   };
 
-  // Delete Confirm
-  const handleDeleteConfirm = () => {
-    if (showDeleteConfirm.id && onRemoveEmployee) {
-      onRemoveEmployee(showDeleteConfirm.id);
-    }
-    setShowDeleteConfirm({ open: false });
-  };
+  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">
-      <div className="flex justify-between items-center p-6">
-        <span className="font-bold text-lg">Employees</span>
-      </div>
-      <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 cursor-pointer"
-              onClick={() => handleSort('name')}
-            >
-              Name {sortKey === 'name' && (sortAsc ? '▲' : '▼')}
-            </th>
-            <th
-              className="p-6 text-xs font-bold uppercase tracking-widest text-muted cursor-pointer"
-              onClick={() => handleSort('position')}
-            >
-              Role {sortKey === 'position' && (sortAsc ? '▲' : '▼')}
-            </th>
-            <th
-              className="p-6 text-xs font-bold uppercase tracking-widest text-muted cursor-pointer"
-              onClick={() => handleSort('wallet')}
-            >
-              Wallet {sortKey === 'wallet' && (sortAsc ? '▲' : '▼')}
-            </th>
-            <th
-              className="p-6 text-xs font-bold uppercase tracking-widest text-muted cursor-pointer"
-              onClick={() => handleSort('salary')}
-            >
-              Salary {sortKey === 'salary' && (sortAsc ? '▲' : '▼')}
-            </th>
-            <th
-              className="p-6 text-xs font-bold uppercase tracking-widest text-muted cursor-pointer"
-              onClick={() => handleSort('status')}
-            >
-              Status {sortKey === 'status' && (sortAsc ? '▲' : '▼')}
-            </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">
-          {sortedEmployees.length === 0 ? (
-            <tr>
-              <td colSpan={6} 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-(--border-hi)">
+              <th className="px-5 py-4 text-xs font-bold uppercase tracking-widest text-(--muted)">
+                Employee
+              </th>
+              <th className="px-5 py-4 text-xs font-bold uppercase tracking-widest text-(--muted)">
+                Role
+              </th>
+              <th className="px-5 py-4 text-xs font-bold uppercase tracking-widest text-(--muted)">
+                Wallet
+              </th>
+              <th className="px-5 py-4 text-xs font-bold uppercase tracking-widest text-(--muted)">
+                Status
+              </th>
+              <th className="px-5 py-4 text-xs font-bold uppercase tracking-widest text-(--muted)">
+                Actions
+              </th>
             </tr>
-          ) : (
-            sortedEmployees.map((employee) => (
-              <tr key={employee.id} 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 || '')}
+          </thead>
+          <tbody className="divide-y divide-(--border)">
+            {employees.length === 0 ? (
+              <tr>
+                <td colSpan={5} className="px-5 py-10 text-center text-(--muted)">
+                  No employees found
                 </td>
-                <td className="p-6">
-                  {/* Inline salary edit */}
-                  {onEditEmployee ? (
+              </tr>
+            ) : (
+              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-(--text) truncate">
+                          {employee.name}
+                        </p>
+                        <p className="text-xs text-(--muted) truncate">
+                          {employee.email}
+                        </p>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-5 py-4 text-sm font-medium text-(--text)">
+                    {employee.position}
+                  </td>
+                  <td className="px-5 py-4 font-mono text-xs text-(--muted)">
+                    {shortenWallet(employee.wallet ?? "")}
+                  </td>
+                  <td className="px-5 py-4">
+                    <StatusBadge status={employee.status} />
+                  </td>
+                  <td className="px-5 py-4">
                     <button
-                      className="text-blue-500 underline"
-                      onClick={() => {
-                        setEditSalary(employee.salary || 0);
-                        setShowEditModal({ open: true, employee });
-                      }}
+                      className="touch-target flex items-center justify-center w-9 h-9 rounded-lg text-(--muted) hover:text-(--text) hover:bg-white/10 transition-all"
+                      aria-label={`Settings for ${employee.name}`}
                     >
-                      {employee.salary ?? 0}
+                      <Icon.Settings01 size="sm" />
                     </button>
-                  ) : (
-                    (employee.salary ?? 0)
-                  )}
-                </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 flex gap-2">
-                  <button
-                    className="text-blue-500 hover:text-blue-700"
-                    title="Edit"
-                    onClick={() => {
-                      setEditSalary(employee.salary || 0);
-                      setShowEditModal({ open: true, employee });
-                    }}
-                  >
-                    <Pencil className="w-5 h-5" />
-                  </button>
-                  <button
-                    className="text-red-500 hover:text-red-700"
-                    title="Remove"
-                    onClick={() => setShowDeleteConfirm({ open: true, id: employee.id })}
-                  >
-                    <Trash2 className="w-5 h-5" />
-                  </button>
-                </td>
-              </tr>
-            ))
-          )}
-        </tbody>
-      </table>
-      {/* CSV Import */}
-      <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>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* ── Mobile card stack (visible only on xs) ── */}
+      <div className="sm:hidden flex flex-col divide-y divide-(--border)">
+        {employees.length === 0 ? (
+          <p className="px-5 py-10 text-center text-(--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-(--text) truncate">
+                    {employee.name}
+                  </p>
+                  <StatusBadge status={employee.status} />
+                </div>
+                <p className="text-xs text-(--muted) truncate">
+                  {employee.position}
+                </p>
+                <p className="text-[10px] font-mono text-(--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-(--muted) hover:text-(--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-(--border)">
+        <p className="text-(--muted) font-medium text-sm">
+          Need to migrate your legacy payroll system?
+        </p>
         {!showCSVUploader && (
           <button
-            className="text-accent font-bold text-sm hover:underline"
+            className="text-(--accent) font-bold text-sm hover:underline"
             onClick={() => setShowCSVUploader(true)}
           >
             Import from CSV
           </button>
         )}
         {showCSVUploader && (
-          <div className="w-full max-w-2xl mx-auto">
+          <div className="w-full max-w-2xl mx-auto mt-2">
             <CSVUploader
               requiredColumns={['name', 'email', 'wallet', 'position', 'salary', 'status']}
               onDataParsed={handleDataParsed}
@@ -278,7 +295,7 @@ export const EmployeeList: React.FC<EmployeeListProps> = ({
             <div className="flex gap-2 justify-center mt-4">
               <button
                 onClick={handleAddEmployees}
-                className="px-4 py-2 bg-blue-500 text-white rounded"
+                className="px-4 py-2 bg-(--accent) text-bg rounded-lg font-medium"
                 disabled={csvData.length === 0}
               >
                 Add Employees from CSV
@@ -288,7 +305,7 @@ export const EmployeeList: React.FC<EmployeeListProps> = ({
                   setShowCSVUploader(false);
                   setCsvData([]);
                 }}
-                className="px-4 py-2 bg-gray-200 text-gray-700 rounded"
+                className="px-4 py-2 glass border border-(--border-hi) rounded-lg text-(--muted) hover:text-(--text)"
               >
                 Cancel
               </button>
diff --git a/frontend/src/pages/EmployeeEntry.tsx b/frontend/src/pages/EmployeeEntry.tsx
index 4b86f5d..3b50040 100644
--- a/frontend/src/pages/EmployeeEntry.tsx
+++ b/frontend/src/pages/EmployeeEntry.tsx
@@ -80,6 +80,7 @@ export default function EmployeeEntry() {
     walletAddress?: string;
     employeeName?: string;
   } | null>(null);
+
   const { notifySuccess } = useNotification();
   const { saving, lastSaved, loadSavedData } = useAutosave<EmployeeFormState>(
     'employee-entry-draft',
@@ -128,105 +129,79 @@ export default function EmployeeEntry() {
     );
 
     setNotification({
-      message: `Employee ${submitData.fullName} added successfully! ${
-        generatedWallet ? 'A wallet was created for them.' : ''
-      }`,
+      message: `Employee ${submitData.fullName} added successfully! ${generatedWallet ? 'A wallet was created for them.' : ''
+        }`,
       secretKey: generatedWallet?.secretKey,
       walletAddress: submitData.walletAddress,
       employeeName: submitData.fullName,
     });
   };
 
+  // ── Add Employee Form View ──
   if (isAdding) {
     return (
-      <div
-        style={{
-          maxWidth: notification?.walletAddress ? '800px' : '600px',
-          margin: '2rem auto',
-          padding: '0 1rem',
-        }}
-      >
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginBottom: '1.5rem',
-          }}
-        >
-          <div
-            className="cursor-pointer"
-            style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}
-          >
+      <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="text-muted cursor-pointer hover:text-text transition-colors"
+              className="touch-target flex items-center justify-center w-10 h-10 rounded-lg glass border border-[var(--border-hi)] text-(--muted) hover:text-white transition-all"
               title="Back to Directory"
+              aria-label="Back to Directory"
             >
               <Icon.ArrowLeft />
             </button>
-            <h1
-              style={{
-                fontWeight: 'bold',
-                fontSize: '1.5rem',
-                margin: 0,
-              }}
-            >
+            <h1 className="text-xl sm:text-2xl font-black tracking-tight">
               Add New Employee
             </h1>
           </div>
           <AutosaveIndicator saving={saving} lastSaved={lastSaved} />
         </div>
 
-        {notification && notification.walletAddress && (
-          <div style={{ marginBottom: '1.5rem' }}>
-            <WalletQRCode
-              walletAddress={notification.walletAddress}
-              secretKey={notification.secretKey}
-              employeeName={notification.employeeName}
-            />
+        {notification && (
+          <div className="mb-6 space-y-4">
+            <Alert variant="success" title="Success" placement="inline">
+              {notification.message}
+            </Alert>
+
+            {notification.walletAddress && (
+              <WalletQRCode
+                walletAddress={notification.walletAddress}
+                secretKey={notification.secretKey}
+                employeeName={notification.employeeName}
+              />
+            )}
+
             {notification.secretKey && (
-              <div
-                style={{
-                  marginTop: '1rem',
-                  padding: '1rem',
-                  backgroundColor: 'rgba(245, 158, 11, 0.1)',
-                  color: 'var(--accent2)',
-                  borderRadius: '8px',
-                  border: '1px solid var(--border)',
-                  fontSize: '0.875rem',
-                }}
-              >
-                <strong style={{ display: 'block', marginBottom: '0.5rem' }}>
+              <div className="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.
+                Hello {notification.employeeName}, your employer has added you to the
+                payroll.
                 <br />
-                A default Stellar wallet has been created for you to receive claimable balances.
+                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>
+                <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 style={{ display: 'block', marginTop: '0.5rem' }}>
-                  Please save this secret key securely to claim your future salary.
+                <i className="block mt-2 text-yellow-400/80">
+                  Please save this secret key securely to claim your future
+                  salary.
                 </i>
               </div>
             )}
           </div>
         )}
 
-        {notification && !notification.walletAddress && (
-          <div style={{ marginBottom: '1.5rem' }}>
-            <Alert variant="success" title="Success" placement="inline">
-              {notification.message}
-            </Alert>
-          </div>
-        )}
-
         <Card>
           <form
             onSubmit={handleSubmit}
-            style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}
+            className="flex flex-col gap-6"
           >
             <Input
               id="fullName"
@@ -279,22 +254,30 @@ export default function EmployeeEntry() {
     );
   }
 
+  // ── Directory View ──
   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 className="flex-1 flex flex-col items-start justify-start w-full max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-12">
+      {/* Page header */}
+      <div className="w-full mb-6 sm:mb-10 flex flex-wrap items-end justify-between gap-4 border-b border-(--border-hi) pb-6">
         <div>
-          <h1 className="text-4xl font-black mb-2 tracking-tight">
-            {t('employees.title', { highlight: '' }).replace('{{highlight}}', '')}
-            <span className="text-accent"> {t('employees.titleHighlight')}</span>
+          <h1 className="text-3xl sm:text-4xl font-black mb-1 tracking-tight">
+            {t("employees.title", { highlight: "" }).replace(
+              "{{highlight}}",
+              "",
+            )}
+            <span className="text-(--accent)">
+              {" "}
+              {t("employees.titleHighlight")}
+            </span>
           </h1>
-          <p className="text-muted font-mono text-sm tracking-wider uppercase">
-            {t('employees.subtitle')}
+          <p className="text-(--muted) font-mono text-xs sm:text-sm tracking-wider uppercase">
+            {t("employees.subtitle")}
           </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"
+          className="touch-target 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" />
           {t('employees.addEmployee')}
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 85e3018..9cacd2b 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -7,28 +7,36 @@ export default function Home() {
   const { t } = useTranslation();
 
   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-(--accent) relative z-20" />
+        <div className="absolute inset-0 bg-(--accent) opacity-5 blur-2xl rounded-full" />
       </div>
 
-      <h1 className="text-6xl font-black mb-6 tracking-tighter leading-none">
-        {t('home.titleLine1Prefix')}{' '}
-        <span className="text-accent">{t('home.titleLine1Highlight')}</span>
-        <br />
-        {t('home.titleLine2Prefix')}{' '}
-        <span className="text-accent2">{t('home.titleLine2Highlight')}</span>
-        {t('home.titleLine2Suffix')}
+      {/* 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">
+        {t("home.titleLine1Prefix")}{" "}
+        <span className="text-(--accent)">{t("home.titleLine1Highlight")}</span>
+        <br className="hidden sm:block" /> {t("home.titleLine2Prefix")}{" "}
+        <span className="text-(--accent2)">
+          {t("home.titleLine2Highlight")}
+        </span>
+        {t("home.titleLine2Suffix")}
       </h1>
 
-      <p className="text-xl text-muted max-w-2xl mb-12 leading-relaxed font-medium">
-        {t('home.tagline')}
+      {/* Sub-headline */}
+      <p className="text-base sm:text-xl text-(--muted) max-w-2xl mb-10 sm:mb-12 leading-relaxed font-medium">
+        {t("home.tagline")}
       </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-(--accent) text-bg font-bold rounded-xl hover:scale-105 transition-transform shadow-lg shadow-(--accent)/20 text-sm sm:text-base"
           onClick={() => {
             void navigate('/payroll');
           }}
@@ -36,7 +44,7 @@ export default function Home() {
           {t('home.ctaManagePayroll')}
         </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-(--border-hi) text-(--text) font-bold rounded-xl hover:bg-white/5 transition-all outline-none text-sm sm:text-base"
           onClick={() => {
             void navigate('/employee');
           }}
@@ -45,29 +53,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-(--accent)/10 flex items-center justify-center mb-5 border border-(--accent)/20">
+            <Icon.CreditCard01 size="lg" className="text-(--accent)" />
           </div>
-          <h3 className="text-xl font-bold mb-3">{t('home.card1Title')}</h3>
-          <p className="text-muted text-sm leading-relaxed">{t('home.card1Body')}</p>
+          <h3 className="text-lg sm:text-xl font-bold mb-2">{t("home.card1Title")}</h3>
+          <p className="text-(--muted) text-sm leading-relaxed">
+            {t("home.card1Body")}
+          </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-(--accent2)/10 flex items-center justify-center mb-5 border border-(--accent2)/20">
+            <Icon.Users01 size="lg" className="text-(--accent2)" />
           </div>
-          <h3 className="text-xl font-bold mb-3">{t('home.card2Title')}</h3>
-          <p className="text-muted text-sm leading-relaxed">{t('home.card2Body')}</p>
+          <h3 className="text-lg sm:text-xl font-bold mb-2">{t("home.card2Title")}</h3>
+          <p className="text-(--muted) text-sm leading-relaxed">
+            {t("home.card2Body")}
+          </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-(--danger)/10 flex items-center justify-center mb-5 border border-(--danger)/20">
+            <Icon.ShieldTick size="lg" className="text-(--danger)" />
           </div>
-          <h3 className="text-xl font-bold mb-3">{t('home.card3Title')}</h3>
-          <p className="text-muted text-sm leading-relaxed">{t('home.card3Body')}</p>
+          <h3 className="text-lg sm:text-xl font-bold mb-2">{t("home.card3Title")}</h3>
+          <p className="text-(--muted) text-sm leading-relaxed">
+            {t("home.card3Body")}
+          </p>
         </div>
       </div>
     </div>
diff --git a/frontend/src/pages/PayrollScheduler.tsx b/frontend/src/pages/PayrollScheduler.tsx
index 6d9987c..3868f16 100644
--- a/frontend/src/pages/PayrollScheduler.tsx
+++ b/frontend/src/pages/PayrollScheduler.tsx
@@ -96,31 +96,6 @@ export default function PayrollScheduler() {
     }
   }, [loadSavedData]);
 
-  const handleScheduleComplete = (config: { frequency: string; timeOfDay: string }) => {
-    setActiveSchedule(config);
-    setIsWizardOpen(false);
-    notifySuccess(
-      'Payroll schedule configured!',
-      `Frequency: ${config.frequency}, time: ${config.timeOfDay}`
-    );
-
-    // Compute next run for countdown demo
-    const d = new Date();
-    if (config.frequency === 'monthly') d.setMonth(d.getMonth() + 1);
-    else if (config.frequency === 'weekly') d.setDate(d.getDate() + 7);
-    else d.setDate(d.getDate() + 14);
-
-    setNextRunDate(d);
-  };
-
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>
-  ) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({ ...prev, [name]: value }));
-    if (simulationResult) resetSimulation();
-  };
-
   useEffect(() => {
     if (!socket) return;
 
@@ -144,7 +119,33 @@ export default function PayrollScheduler() {
     };
   }, [socket, notifySuccess]);
 
-  const handleInitialize = async () => {
+  const handleScheduleComplete = (config: { frequency: string; timeOfDay: string }) => {
+    setActiveSchedule(config);
+    setIsWizardOpen(false);
+    notifySuccess(
+      'Payroll schedule configured!',
+      `Frequency: ${config.frequency}, time: ${config.timeOfDay}`
+    );
+
+    // Compute next run for countdown demo
+    const d = new Date();
+    if (config.frequency === "monthly") d.setMonth(d.getMonth() + 1);
+    else if (config.frequency === "weekly") d.setDate(d.getDate() + 7);
+    else d.setDate(d.getDate() + 14);
+
+    setNextRunDate(d);
+  };
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+    if (simulationResult) resetSimulation();
+  };
+
+  const handleInitialize = async (e: React.FormEvent) => {
+    e.preventDefault();
     if (!formData.employeeName || !formData.amount) {
       notifyError('Missing required fields', 'Please provide employee name and amount.');
       return;
@@ -236,25 +237,23 @@ export default function PayrollScheduler() {
   };
 
   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 className="flex-1 flex flex-col items-center justify-start p-6 sm:p-12 max-w-6xl mx-auto w-full">
+      <div className="w-full mb-8 sm:mb-12 flex flex-wrap items-end justify-between gap-4 border-b border-(--border-hi) pb-6 sm:pb-8">
         <div>
-          <Heading as="h1" size="lg" weight="bold" addlClassName="mb-2 tracking-tight">
-            {t('payroll.title', 'Workforce')}{' '}
-            <span className="text-accent">{t('payroll.titleHighlight', 'Scheduler')}</span>
-          </Heading>
-          <Text
-            as="p"
-            size="sm"
-            weight="regular"
-            addlClassName="text-muted font-mono tracking-wider uppercase"
-          >
+          <h1 className="text-3xl sm:text-4xl font-black mb-2 tracking-tight">
+            {t('payroll.title', 'Payroll')}{' '}
+            <span className="text-(--accent)">{t('payroll.titleHighlight', 'Scheduler')}</span>
+          </h1>
+          <p className="text-(--muted) font-mono text-xs sm:text-sm tracking-wider uppercase">
             {t('payroll.subtitle', 'Automated distribution engine')}
-          </Text>
+          </p>
         </div>
         <div className="flex flex-col items-end gap-2">
           <AutosaveIndicator saving={saving} lastSaved={lastSaved} />
-          <button onClick={() => setIsWizardOpen(true)}>
+          <button
+            onClick={() => setIsWizardOpen(true)}
+            className="bg-(--accent)/10 border border-(--accent)/30 text-(--accent) font-bold px-4 py-2 rounded-lg text-sm hover:bg-(--accent)/20 transition-colors flex items-center gap-2"
+          >
             <svg
               width="14"
               height="14"
@@ -273,10 +272,10 @@ export default function PayrollScheduler() {
       </div>
 
       {activeSchedule && (
-        <div className="w-full mb-12 bg-black/20 border border-success/30 rounded-2xl p-6 flex flex-col md:flex-row items-center justify-between gap-6 relative overflow-hidden">
-          <div className="absolute top-0 left-0 w-1 h-full bg-success"></div>
+        <div className="w-full mb-8 sm:mb-12 bg-black/20 border border-(--success)/30 rounded-2xl p-6 flex flex-col md:flex-row items-center justify-between gap-6 relative overflow-hidden">
+          <div className="absolute top-0 left-0 w-1 h-full bg-(--success)"></div>
           <div>
-            <h3 className="text-success font-black text-lg mb-1 flex items-center gap-2">
+            <h3 className="text-(--success) font-black text-lg mb-1 flex items-center gap-2">
               <svg
                 width="18"
                 height="18"
@@ -291,14 +290,14 @@ export default function PayrollScheduler() {
               </svg>
               Automation Active
             </h3>
-            <p className="text-muted text-sm">
+            <p className="text-(--muted) text-sm">
               Scheduled to run{' '}
-              <span className="font-bold text-text capitalize">{activeSchedule.frequency}</span> at{' '}
-              <span className="font-mono text-text">{activeSchedule.timeOfDay}</span>
+              <span className="font-bold text-(--text) capitalize">{activeSchedule.frequency}</span> at{' '}
+              <span className="font-mono text-(--text)">{activeSchedule.timeOfDay}</span>
             </p>
           </div>
-          <div className="bg-bg border border-hi rounded-xl p-4 shadow-inner">
-            <span className="block text-[10px] uppercase font-bold text-muted mb-2 tracking-widest text-center">
+          <div className="bg-[#080b0f] border border-(--border-hi) rounded-xl p-4 shadow-inner">
+            <span className="block text-[10px] uppercase font-bold text-(--muted) mb-2 tracking-widest text-center">
               Next Scheduled Run
             </span>
             <CountdownTimer targetDate={nextRunDate} />
@@ -312,62 +311,90 @@ export default function PayrollScheduler() {
           onCancel={() => setIsWizardOpen(false)}
         />
       ) : (
-        <div className="w-full grid grid-cols-1 lg:grid-cols-5 gap-8 mb-12">
+        <div className="w-full grid grid-cols-1 lg:grid-cols-5 gap-6 sm:gap-8 mb-8 sm:mb-12">
+          {/* Form Section */}
           <div className="lg:col-span-3">
             <form
               onSubmit={(e: React.FormEvent) => {
-                e.preventDefault();
-                void handleInitialize();
+                void handleInitialize(e);
               }}
               className="w-full grid grid-cols-1 md:grid-cols-2 gap-6 card glass noise"
             >
               <div className="md:col-span-2">
-                <Input
-                  id="employeeName"
-                  fieldSize="md"
-                  label={t('payroll.employeeName', 'Employee Name')}
+                <label className="block text-xs font-bold uppercase tracking-widest text-(--muted) mb-3 ml-1">
+                  {t('payroll.employeeName', 'Employee Name')}
+                </label>
+                <input
+                  type="text"
                   name="employeeName"
                   value={formData.employeeName}
                   onChange={handleChange}
+                  className="w-full bg-black/20 border border-(--border-hi) rounded-xl p-4 text-(--text) outline-none focus:border-(--accent)/50 focus:bg-(--accent)/5 transition-all font-medium"
                   placeholder="e.g. Satoshi Nakamoto"
                 />
               </div>
 
               <div>
-                <Input
-                  id="amount"
-                  fieldSize="md"
-                  label={t('payroll.amountLabel', 'Amount (USD equivalent)')}
-                  name="amount"
-                  value={formData.amount}
-                  onChange={handleChange}
-                  placeholder="0.00"
-                />
+                <label className="block text-xs font-bold uppercase tracking-widest text-(--muted) mb-3 ml-1">
+                  {t('payroll.amountLabel', 'Amount (USD equivalent)')}
+                </label>
+                <div className="relative">
+                  <span className="absolute left-4 top-1/2 -translate-y-1/2 text-(--muted) font-mono">
+                    $
+                  </span>
+                  <input
+                    type="number"
+                    name="amount"
+                    value={formData.amount}
+                    onChange={handleChange}
+                    className="w-full bg-black/20 border border-(--border-hi) rounded-xl p-4 pl-8 text-(--text) outline-none focus:border-(--accent)/50 focus:bg-(--accent)/5 transition-all font-mono"
+                    placeholder="0.00"
+                  />
+                </div>
               </div>
 
               <div>
-                <Select
-                  id="frequency"
-                  fieldSize="md"
-                  label={t('payroll.distributionFrequency', 'Distribution Frequency')}
+                <label className="block text-xs font-bold uppercase tracking-widest text-(--muted) mb-3 ml-1">
+                  {t('payroll.distributionFrequency', 'Distribution Frequency')}
+                </label>
+                <select
                   name="frequency"
                   value={formData.frequency}
                   onChange={handleChange}
+                  className="w-full bg-black/20 border border-(--border-hi) rounded-xl p-4 text-(--text) outline-none focus:border-(--accent)/50 focus:bg-(--accent)/5 transition-all appearance-none cursor-pointer"
                 >
-                  <option value="weekly">{t('payroll.frequencyWeekly', 'Weekly')}</option>
-                  <option value="monthly">{t('payroll.frequencyMonthly', 'Monthly')}</option>
-                </Select>
+                  <option value="weekly" className="bg-(--surface)">
+                    {t('payroll.frequencyWeekly', 'Weekly')}
+                  </option>
+                  <option value="monthly" className="bg-(--surface)">
+                    {t('payroll.frequencyMonthly', 'Monthly')}
+                  </option>
+                </select>
               </div>
 
               <div className="md:col-span-2">
-                <Input
-                  id="startDate"
-                  fieldSize="md"
-                  label={t('payroll.commencementDate', 'Commencement Date')}
-                  name="startDate"
+                <label className="block text-xs font-bold uppercase tracking-widest text-(--muted) mb-3 ml-1">
+                  {t('payroll.commencementDate', 'Commencement Date')}
+                </label>
+                <input
                   type="date"
+                  name="startDate"
                   value={formData.startDate}
                   onChange={handleChange}
+                  className="w-full bg-black/20 border border-(--border-hi) rounded-xl p-4 text-(--text) outline-none focus:border-(--accent)/50 focus:bg-(--accent)/5 transition-all font-mono"
+                />
+              </div>
+
+              <div className="md:col-span-2">
+                <label className="block text-xs font-bold uppercase tracking-widest text-(--muted) mb-3 ml-1">
+                  Transaction Memo (Optional)
+                </label>
+                <textarea
+                  name="memo"
+                  value={formData.memo}
+                  onChange={handleChange}
+                  className="w-full bg-black/20 border border-(--border-hi) rounded-xl p-4 text-(--text) outline-none focus:border-(--accent)/50 focus:bg-(--accent)/5 transition-all font-medium resize-none h-24"
+                  placeholder="e.g. Feb 2026 Salary"
                 />
               </div>
 
@@ -376,9 +403,7 @@ export default function PayrollScheduler() {
                   <Button
                     type="submit"
                     disabled={isSimulating}
-                    variant="primary"
-                    size="md"
-                    isFullWidth
+                    className="w-full py-4 bg-(--accent) text-bg font-black rounded-xl hover:scale-[1.01] transition-transform shadow-lg shadow-(--accent)/10 uppercase tracking-widest text-sm flex items-center justify-center gap-2"
                   >
                     {isSimulating
                       ? 'Simulating...'
@@ -391,9 +416,7 @@ export default function PayrollScheduler() {
                       void handleBroadcast();
                     }}
                     disabled={isBroadcasting}
-                    variant="primary"
-                    size="md"
-                    isFullWidth
+                    className="w-full py-4 bg-(--success) text-bg font-black rounded-xl hover:scale-[1.01] transition-transform shadow-lg shadow-(--success)/10 uppercase tracking-widest text-sm flex items-center justify-center gap-2"
                   >
                     {isBroadcasting ? 'Broadcasting...' : 'Confirm & Broadcast to Network'}
                   </Button>
@@ -411,7 +434,7 @@ export default function PayrollScheduler() {
             />
 
             <div className="card glass noise h-fit">
-              <Heading as="h3" size="xs" weight="bold" addlClassName="mb-4 flex items-center gap-2">
+              <h3 className="text-sm font-bold uppercase tracking-widest text-(--muted) mb-4 flex items-center gap-2">
                 <svg
                   width="14"
                   height="14"
@@ -427,17 +450,12 @@ export default function PayrollScheduler() {
                   <line x1="12" y1="8" x2="12.01" y2="8" />
                 </svg>
                 Pre-flight Validation
-              </Heading>
-              <Text
-                as="p"
-                size="xs"
-                weight="regular"
-                addlClassName="text-muted leading-relaxed mb-4"
-              >
+              </h3>
+              <p className="text-xs text-(--muted) leading-relaxed mb-4">
                 All transactions are simulated via Stellar Horizon before submission. This catches
                 common errors like:
-              </Text>
-              <ul className="text-xs text-muted space-y-2 list-disc pl-4 font-medium">
+              </p>
+              <ul className="text-xs text-(--muted) space-y-2 list-disc pl-4 font-medium">
                 <li>Insufficient XLM balance for fees</li>
                 <li>Invalid sequence numbers</li>
                 <li>Missing trustlines for tokens</li>
@@ -449,50 +467,59 @@ export default function PayrollScheduler() {
       )}
 
       <div className="w-full">
-        <Heading as="h2" size="sm" weight="bold" addlClassName="mb-4">
-          Pending Claims
-        </Heading>
+        <h2 className="text-xl font-bold mb-4">Pending Claims</h2>
         <Card>
           {pendingClaims.length === 0 ? (
-            <Text as="p" size="sm" weight="regular" addlClassName="text-muted">
+            <p className="text-(--muted) text-sm text-center py-4">
               No pending claimable balances.
-            </Text>
+            </p>
           ) : (
-            <ul className="flex flex-col gap-4">
-              {pendingClaims.map((claim: PendingClaim) => (
-                <li key={claim.id} className="border border-hi p-4 rounded-lg">
-                  <div className="flex justify-between mb-2">
-                    <Heading as="h3" size="xs" weight="bold">
+            <ul className="flex flex-col gap-3 p-0 m-0 list-none">
+              {pendingClaims.map((claim) => (
+                <li
+                  key={claim.id}
+                  className="border border-(--border-hi) rounded-xl p-4 hover:border-(--accent)/30 transition"
+                >
+                  <div className="flex items-start justify-between gap-2 mb-3">
+                    <h3 className="font-semibold text-sm text-(--text)">
                       {claim.employeeName}
-                    </Heading>
-                    <span className="bg-accent/20 text-accent px-2 py-1 rounded-full text-xs">
-                      {claim.status}
-                    </span>
-                  </div>
-                  <div className="text-sm text-muted flex justify-between items-center">
-                    <div>
-                      <Text as="p" size="xs" weight="regular">
-                        Amount: {claim.amount} USDC
-                      </Text>
-                      <Text as="p" size="xs" weight="regular">
-                        Scheduled: {formatDate(claim.dateScheduled)}
-                      </Text>
-                      <Text
-                        as="p"
-                        size="xs"
-                        weight="regular"
-                        addlClassName="font-mono truncate max-w-[200px]"
-                        title={claim.claimantPublicKey}
+                    </h3>
+                    <div className="flex items-center gap-2">
+                      <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>
+                      <button
+                        onClick={() => handleRemoveClaim(claim.id)}
+                        className="text-red-500 hover:text-red-400 text-[10px] font-bold uppercase tracking-wider transition-colors"
                       >
-                        To: {claim.claimantPublicKey}
-                      </Text>
+                        Cancel
+                      </button>
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col gap-1 text-xs text-(--muted)">
+                    <div className="flex items-center justify-between">
+                      <span>Amount</span>
+                      <span className="font-mono text-(--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>
-                    <button
-                      onClick={() => handleRemoveClaim(claim.id)}
-                      className="text-danger hover:text-danger/80 text-sm font-medium"
-                    >
-                      Cancel
-                    </button>
+                    {claim.claimantPublicKey && (
+                      <div className="flex items-center justify-between gap-2 mt-1 pt-1 border-t border-(--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>
               ))}