diff --git a/src/app/globals.css b/src/app/globals.css
index c132dfa..db5397c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -7,8 +7,8 @@
     --foreground: 0 0% 3.9%;
     --card: 0 0% 100%;
     --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
+    --popover: 0 0% 98%;
+    --popover-foreground: 0 0% 3.9%;
     --primary: 0 0% 9%;
     --primary-foreground: 0 0% 98%;
     --secondary: 0 0% 96.1%;
@@ -27,15 +27,15 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --radius: 0.5rem
+    --radius: 0.5rem;
   }
   .dark {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
     --card: 0 0% 3.9%;
     --card-foreground: 0 0% 98%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
     --primary: 0 0% 98%;
     --primary-foreground: 0 0% 9%;
     --secondary: 0 0% 14.9%;
@@ -53,7 +53,7 @@
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%
+    --chart-5: 340 75% 55%;
   }
 }
 @layer base {
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 6ef2568..d2b8af6 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -6,26 +6,26 @@ export default async function NotFound() {
   const { user } = await getCurrentSession();
 
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 px-6">
+    <div className="min-h-screen flex flex-col items-center justify-center bg-background px-6">
       <div className="max-w-2xl w-full text-center">
         <div className="mb-8">
-          <div className="w-16 h-16 rounded-xl bg-black flex items-center justify-center mx-auto mb-6">
-            <span className="text-white font-bold text-xl">EI</span>
+          <div className="w-16 h-16 rounded-xl bg-foreground flex items-center justify-center mx-auto mb-6">
+            <span className="text-background font-bold text-xl">EI</span>
           </div>
         </div>
 
         <div className="mb-8">
-          <h1 className="text-8xl font-bold text-gray-900 mb-4">404</h1>
+          <h1 className="text-8xl font-bold text-foreground mb-4">404</h1>
           <div className="flex items-center justify-center gap-2 mb-4">
-            <Wallet className="w-5 h-5 text-gray-600" />
-            <span className="text-lg font-medium text-gray-700">
+            <Wallet className="w-5 h-5 text-muted-foreground" />
+            <span className="text-lg font-medium text-foreground">
               Page Not Found
             </span>
           </div>
-          <p className="text-gray-600 mb-2">
+          <p className="text-muted-foreground mb-2">
             The page you're looking for doesn't exist or may have been moved.
           </p>
-          <p className="text-gray-600">
+          <p className="text-muted-foreground">
             Your account and invoices remain secure.
           </p>
         </div>
@@ -33,13 +33,13 @@ export default async function NotFound() {
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
           <Link
             href="/payouts"
-            className="shadow-md group p-6 bg-white rounded-lg border border-gray-200 hover:border-gray-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2"
+            className="shadow-md group p-6 bg-card rounded-lg border border-border hover:bg-accent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
           >
-            <div className="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center mx-auto mb-4 group-hover:bg-blue-200 transition-colors">
-              <DollarSign className="w-6 h-6 text-blue-600" />
+            <div className="w-12 h-12 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mx-auto mb-4 group-hover:bg-blue-200 dark:group-hover:bg-blue-900/50 transition-colors">
+              <DollarSign className="w-6 h-6 text-blue-600 dark:text-blue-400" />
             </div>
-            <h3 className="font-semibold text-gray-900 mb-2">Payouts</h3>
-            <p className="text-sm text-gray-600">
+            <h3 className="font-semibold text-card-foreground mb-2">Payouts</h3>
+            <p className="text-sm text-muted-foreground">
               Single, batch or recurring payouts
             </p>
           </Link>
@@ -47,27 +47,27 @@ export default async function NotFound() {
           {user ? (
             <Link
               href="/invoices/create"
-              className="shadow-md group p-6 bg-white rounded-lg border border-gray-200 hover:border-gray-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2"
+              className="shadow-md group p-6 bg-card rounded-lg border border-border hover:bg-accent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
             >
-              <div className="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mx-auto mb-4 group-hover:bg-purple-200 transition-colors">
-                <Zap className="w-6 h-6 text-purple-600" />
+              <div className="w-12 h-12 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center mx-auto mb-4 group-hover:bg-purple-200 dark:group-hover:bg-purple-900/50 transition-colors">
+                <Zap className="w-6 h-6 text-purple-600 dark:text-purple-400" />
               </div>
-              <h3 className="font-semibold text-gray-900 mb-2">
+              <h3 className="font-semibold text-card-foreground mb-2">
                 Create Invoice
               </h3>
-              <p className="text-sm text-gray-600">
+              <p className="text-sm text-muted-foreground">
                 Start a new payment request
               </p>
             </Link>
           ) : (
-            <div className="shadow-md p-6 bg-white rounded-lg border border-gray-200 opacity-75 cursor-not-allowed">
-              <div className="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center mx-auto mb-4">
-                <Lock className="w-6 h-6 text-gray-500" />
+            <div className="shadow-md p-6 bg-card rounded-lg border border-border opacity-75 cursor-not-allowed">
+              <div className="w-12 h-12 rounded-lg bg-muted flex items-center justify-center mx-auto mb-4">
+                <Lock className="w-6 h-6 text-muted-foreground" />
               </div>
-              <h3 className="font-semibold text-gray-900 mb-2">
+              <h3 className="font-semibold text-card-foreground mb-2">
                 Sign in to create invoices
               </h3>
-              <p className="text-sm text-gray-600">
+              <p className="text-sm text-muted-foreground">
                 Start a new payment request
               </p>
             </div>
@@ -76,27 +76,27 @@ export default async function NotFound() {
           {user ? (
             <Link
               href="/subscription-plans"
-              className="shadow-md group p-6 bg-white rounded-lg border border-gray-200 hover:border-gray-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2"
+              className="shadow-md group p-6 bg-card rounded-lg border border-border hover:bg-accent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
             >
-              <div className="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center mx-auto mb-4 group-hover:bg-green-200 transition-colors">
-                <FileText className="w-6 h-6 text-green-600" />
+              <div className="w-12 h-12 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center mx-auto mb-4 group-hover:bg-green-200 dark:group-hover:bg-green-900/50 transition-colors">
+                <FileText className="w-6 h-6 text-green-600 dark:text-green-400" />
               </div>
-              <h3 className="font-semibold text-gray-900 mb-2">
+              <h3 className="font-semibold text-card-foreground mb-2">
                 Subscription Plans
               </h3>
-              <p className="text-sm text-gray-600">
+              <p className="text-sm text-muted-foreground">
                 Manage your subscription plans
               </p>
             </Link>
           ) : (
-            <div className="shadow-md p-6 bg-white rounded-lg border border-gray-200 opacity-75 cursor-not-allowed">
-              <div className="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center mx-auto mb-4">
-                <Lock className="w-6 h-6 text-gray-500" />
+            <div className="shadow-md p-6 bg-card rounded-lg border border-border opacity-75 cursor-not-allowed">
+              <div className="w-12 h-12 rounded-lg bg-muted flex items-center justify-center mx-auto mb-4">
+                <Lock className="w-6 h-6 text-muted-foreground" />
               </div>
-              <h3 className="font-semibold text-gray-900 mb-2">
+              <h3 className="font-semibold text-card-foreground mb-2">
                 Sign in to manage subscription plans
               </h3>
-              <p className="text-sm text-gray-600">
+              <p className="text-sm text-muted-foreground">
                 View and manage your subscription options
               </p>
             </div>
@@ -105,7 +105,7 @@ export default async function NotFound() {
 
         <Link
           href="/dashboard"
-          className="inline-flex items-center gap-2 px-6 py-3 bg-black text-white font-medium rounded-lg hover:bg-gray-800 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2"
+          className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-primary-foreground font-medium rounded-lg hover:bg-primary/90 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
         >
           <Home className="w-4 h-4" />
           Back to Dashboard
diff --git a/src/components/payment-route.tsx b/src/components/payment-route.tsx
index 9944270..ffa1419 100644
--- a/src/components/payment-route.tsx
+++ b/src/components/payment-route.tsx
@@ -47,7 +47,7 @@ export function PaymentRoute({
     if (isDirectPayment) {
       return {
         bgColor: "bg-primary/10",
-        textColor: "text-primary-foreground",
+        textColor: "text-primary",
         icon: <ArrowRight className="w-3 h-3 mr-1" />,
       };
     }
diff --git a/src/lib/invoice-status.ts b/src/lib/invoice-status.ts
index 50ec2a0..6d5e90f 100644
--- a/src/lib/invoice-status.ts
+++ b/src/lib/invoice-status.ts
@@ -75,18 +75,18 @@ export const getPaymentSectionStatusClass = (
   status: (typeof requestStatusEnum.enumValues)[number],
 ) => {
   if (status === "paid" || status === "crypto_paid") {
-    return "bg-green-100 text-green-800";
+    return "bg-success/10 text-success-foreground";
   }
 
   if (status === "offramp_failed") {
-    return "bg-red-100 text-red-800";
+    return "bg-destructive/10 text-destructive";
   }
 
   if (status.includes("offramp") || status === "processing") {
-    return "bg-orange-100 text-orange-800";
+    return "bg-warning/10 text-warning-foreground";
   }
 
-  return "bg-blue-100 text-blue-800";
+  return "bg-primary/10 text-primary";
 };
 
 /**
diff --git a/src/lib/schemas/ecommerce.ts b/src/lib/schemas/ecommerce.ts
index 7deb77f..e1421c7 100644
--- a/src/lib/schemas/ecommerce.ts
+++ b/src/lib/schemas/ecommerce.ts
@@ -30,22 +30,27 @@ const baseEcommerceClientApiSchema = z.object({
   domain: z.string().url(),
   feeAddress: z
     .string()
-    .transform((val) => (val === "" ? undefined : val))
+    .optional()
+    .transform((val) => {
+      if (val === undefined || val === "") return undefined;
+      return val;
+    })
     .refine((value) => {
       if (value === undefined) return true;
       return isEthereumAddress(value);
-    }, "Invalid Ethereum address format")
-    .optional(),
+    }, "Invalid Ethereum address format"),
   feePercentage: z
     .string()
-    .transform((val) => (val === "" ? undefined : val))
+    .optional()
+    .transform((val) => {
+      if (val === undefined || val === "") return undefined;
+      return val;
+    })
     .refine((value) => {
       if (value === undefined) return true;
       const num = Number(value);
-
       return !Number.isNaN(num) && num >= 0 && num <= 100;
-    }, "Fee percentage must be a number between 0 and 100")
-    .optional(),
+    }, "Fee percentage must be a number between 0 and 100"),
 });
 
 export const ecommerceClientApiSchema =
diff --git a/src/server/routers/ecommerce.ts b/src/server/routers/ecommerce.ts
index 78f75b2..55b59ea 100644
--- a/src/server/routers/ecommerce.ts
+++ b/src/server/routers/ecommerce.ts
@@ -32,8 +32,8 @@ export const ecommerceRouter = router({
         const response = await apiClient.post("v2/client-ids", {
           label: input.label,
           allowedDomains: [input.domain],
-          feePercentage: input.feePercentage ?? null,
-          feeAddress: input.feeAddress ?? null,
+          feePercentage: input.feePercentage ?? undefined,
+          feeAddress: input.feeAddress ?? undefined,
         });
 
         if (!response.data.clientId) {
diff --git a/src/server/routers/invoice.ts b/src/server/routers/invoice.ts
index c970b1b..3891a51 100644
--- a/src/server/routers/invoice.ts
+++ b/src/server/routers/invoice.ts
@@ -447,9 +447,15 @@ export const invoiceRouter = router({
     .query(async ({ input }) => {
       const { requestId, walletAddress } = input;
 
-      const response = await apiClient.get(
-        `/v2/request/${requestId}/routes?wallet=${walletAddress}&feePercentage=${process.env.FEE_PERCENTAGE_FOR_PAYMENT}&feeAddress=${process.env.FEE_ADDRESS_FOR_PAYMENT}`,
-      );
+      let url = `/v2/request/${requestId}/routes?wallet=${walletAddress}`;
+
+      if (
+        process.env.FEE_PERCENTAGE_FOR_PAYMENT &&
+        process.env.FEE_ADDRESS_FOR_PAYMENT
+      ) {
+        url += `&feePercentage=${process.env.FEE_PERCENTAGE_FOR_PAYMENT}&feeAddress=${process.env.FEE_ADDRESS_FOR_PAYMENT}`;
+      }
+      const response = await apiClient.get(url);
 
       if (response.status !== 200) {
         throw new TRPCError({