diff --git a/src/api/config.ts b/src/api/config.ts
index 037fa06..8fd9172 100644
--- a/src/api/config.ts
+++ b/src/api/config.ts
@@ -197,16 +197,17 @@ export const SALES_REPORT_ROUTES = [
   'West-4'
 ];
 
-export const SALES_REPORT_DISTRIBUTORS = [
-  'Banashree Multi Millet Flour',
-  'Shiva nandi Enterprises',
-  'BPK & Co',
-  'Gaviranga',
-  'Bhagwan Enterprises',
-  'Shreshtaa Trading Co',
-  'Rajarajeshwari Enterprises',
-  'Byraveshwara Trading Co'
-];
+export const ROUTE_WISE_DISTRIBUTORS: Record<string, string[]> = {
+  "Krishna": ["Banashree Multi Millet Flour"],
+  "East-1": ["Shiva nandi Enterprises"],
+  "East-2": ["BPK & Co"],
+  "East-3": ["BPK & Co"],
+  "East-4": ["Gaviranga "],
+  "West-1": ["Bhagwan Enterprises"],
+  "West-2": ["Shreshtaa Trading Co "],
+  "West-3": ["Rajarajeshwari Enterprises "],
+  "West-4": ["Byraveshwara Trading Co"],
+};
 
 export const SALES_REPORT_SO_NAMES = [
   'Surya C'
diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
index 44b5df6..6e7a0d7 100644
--- a/src/components/buttons/Button.tsx
+++ b/src/components/buttons/Button.tsx
@@ -29,7 +29,7 @@ const VARIANTS: Record<ButtonVariant, string> = {
   secondary: 'bg-card text-strong border border-border-default shadow-xs',
   ghost: 'bg-transparent text-body border border-transparent',
   danger: 'bg-ruby-600 text-white border border-transparent shadow-sm',
-  outline: 'z-btn-outline'
+  outline: 'z-btn-outline border-rounded-full'
 };
 
 /**
diff --git a/src/components/buttons/style.css b/src/components/buttons/style.css
index 9af2bfc..0ef3aaf 100644
--- a/src/components/buttons/style.css
+++ b/src/components/buttons/style.css
@@ -4,7 +4,7 @@
     justify-content: center;
     gap: 6px;
     padding: 8px 16px;
-    border-radius: var(--z-border-radius-md);
+    border-radius: var(--z-border-radius-pill);
     font-size: var(--z-font-sm);
     font-weight: 500;
     font-family: inherit;
diff --git a/src/components/dv/CallDetail.tsx b/src/components/dv/CallDetail.tsx
index 2f57b2f..72bdc81 100644
--- a/src/components/dv/CallDetail.tsx
+++ b/src/components/dv/CallDetail.tsx
@@ -79,7 +79,7 @@ export function CallDetail({
 
   if (error) {
     return (
-      <div className="bg-white p-8 rounded-2xl border border-border-default shadow-sm text-center">
+      <div className="bg-[var(--tiles-card-bg)] p-8 rounded-2xl border border-border-default shadow-sm text-center">
         <EmptyState title="Couldn’t load record" hint={error} />
       </div>
     );
@@ -87,7 +87,7 @@ export function CallDetail({
 
   if (loading) {
     return (
-      <div className="bg-white p-12 rounded-2xl border border-border-default shadow-sm flex justify-center items-center">
+      <div className="bg-[var(--tiles-card-bg)] p-12 rounded-2xl border border-border-default shadow-sm flex justify-center items-center">
         <Spinner label="Loading call details…" />
       </div>
     );
@@ -353,7 +353,7 @@ export function CallDetail({
     <div className="text-slate-800 p-4 sm:p-6 lg:p-8 font-sans space-y-6">
 
       {/* 1. Primary Summary & Status Banner */}
-      <div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-6">
+      <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-6">
         <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
 
           {/* Title & Badges */}
@@ -436,7 +436,7 @@ export function CallDetail({
                   ✓
                 </div>
               ) : (
-                <div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-white text-slate-400 flex items-center justify-center text-xs shrink-0">
+                <div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-[var(--tiles-card-bg)] text-slate-400 flex items-center justify-center text-xs shrink-0">
                   <Clock size={12} />
                 </div>
               )}
@@ -455,7 +455,7 @@ export function CallDetail({
                   ✓
                 </div>
               ) : (
-                <div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-white text-slate-400 flex items-center justify-center text-xs shrink-0">
+                <div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-[var(--tiles-card-bg)] text-slate-400 flex items-center justify-center text-xs shrink-0">
                   <Clock size={12} />
                 </div>
               )}
@@ -474,7 +474,7 @@ export function CallDetail({
                   ✓
                 </div>
               ) : (
-                <div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-white text-slate-400 flex items-center justify-center text-xs shrink-0">
+                <div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-[var(--tiles-card-bg)] text-slate-400 flex items-center justify-center text-xs shrink-0">
                   <Clock size={12} />
                 </div>
               )}
@@ -493,7 +493,7 @@ export function CallDetail({
                   ✓
                 </div>
               ) : (
-                <div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-white text-slate-400 flex items-center justify-center text-xs shrink-0">
+                <div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-[var(--tiles-card-bg)] text-slate-400 flex items-center justify-center text-xs shrink-0">
                   <Clock size={12} />
                 </div>
               )}
@@ -517,7 +517,7 @@ export function CallDetail({
 
           {/* Order Details Card */}
           {currentStateName.toLowerCase() !== 'no order' && (
-            <div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
+            <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
               <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between border-b border-slate-100 pb-3 gap-3">
                 <div className="flex items-center gap-2">
                   <ShoppingCart className="text-slate-700" size={18} />
@@ -617,7 +617,7 @@ export function CallDetail({
 
           {/* Call Potential Card (Below Orders) */}
           {callPotentialList.length > 0 && (
-            <div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
+            <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
               <div className="flex items-center justify-between border-b border-slate-100 pb-3">
                 <div className="flex items-center gap-2">
                   <TrendingUp className="text-slate-700" size={18} />
@@ -697,7 +697,7 @@ export function CallDetail({
 
 
           {/* Visit Log Card */}
-          <div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
+          <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
             <div className="flex items-center justify-between border-b border-slate-100 pb-3">
               <div className="flex items-center gap-2">
                 <ClipboardList className="text-slate-700" size={18} />
@@ -769,7 +769,7 @@ export function CallDetail({
         <div className="lg:order-first space-y-6">
 
           {/* Store Banner Image Card */}
-          <div className="bg-white rounded-2xl border border-slate-200/80 overflow-hidden shadow-sm">
+          <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 overflow-hidden shadow-sm">
             {storeImages.length > 0 ? (
               <div className="relative w-full h-44 bg-slate-100 flex items-center justify-center overflow-hidden">
                 <img
@@ -783,7 +783,7 @@ export function CallDetail({
               </div>
             ) : (
               <div className="h-40 bg-gradient-to-br from-slate-100 to-slate-200/70 p-6 flex flex-col items-center justify-center text-center gap-2 border-b border-slate-200/50">
-                <div className="w-12 h-12 rounded-full bg-white shadow-sm flex items-center justify-center text-slate-500">
+                <div className="w-12 h-12 rounded-full bg-[var(--tiles-card-bg)] shadow-sm flex items-center justify-center text-slate-500">
                   <ImageIcon size={22} />
                 </div>
                 <span className="text-xs font-bold text-slate-600 uppercase tracking-wider">{storeName}</span>
@@ -792,7 +792,7 @@ export function CallDetail({
           </div>
 
           {/* Store Info Card */}
-          <div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
+          <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
             <div className="flex items-center justify-between border-b border-slate-100 pb-3">
               <div className="flex items-center gap-2">
                 <Store className="text-slate-700" size={18} />
@@ -857,7 +857,7 @@ export function CallDetail({
 
           {/* Store Potential Card */}
           {storePotentialList.length > 0 && (
-            <div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
+            <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
               <div className="flex items-center justify-between border-b border-slate-100 pb-3">
                 <div className="flex items-center gap-2">
                   <TrendingUp className="text-slate-700" size={18} />
@@ -890,7 +890,7 @@ export function CallDetail({
           )}
 
           {/* Distributor Card */}
-          <div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
+          <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
             <div className="flex items-center gap-2 border-b border-slate-100 pb-3">
               <Truck className="text-slate-700" size={18} />
               <h2 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Distributor</h2>
@@ -921,7 +921,7 @@ export function CallDetail({
           </div>
 
           {/* Performed By Card */}
-          <div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
+          <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
             <div className="flex items-center gap-2 border-b border-slate-100 pb-3">
               <User className="text-slate-700" size={18} />
               <h2 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Performed by</h2>
diff --git a/src/components/dv/DailyLogDetail.tsx b/src/components/dv/DailyLogDetail.tsx
index 54fb45a..d8ebc78 100644
--- a/src/components/dv/DailyLogDetail.tsx
+++ b/src/components/dv/DailyLogDetail.tsx
@@ -128,7 +128,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
       <div className="w-full max-w-[1000px] mx-auto flex flex-col gap-6 pb-12">
 
                {/* Top Header Card */}
-               <div className="border border-slate-200 rounded-xl p-6 shadow-sm bg-white">
+               <div className="border border-slate-200 rounded-xl p-6 shadow-sm bg-[var(--tiles-card-bg)]">
                   <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
                      <div className="flex items-start gap-4">
                         {onBack && (
@@ -219,7 +219,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
                   {/* Left Column */}
                   <div className="flex-[2] flex flex-col gap-6">
                      {/* Timeline */}
-                     <div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden p-6">
+                     <div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-6">
                         <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-6">
                            <Calendar size={14} className="text-slate-500" /> Day Timeline
                         </div>
@@ -227,7 +227,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
                         <div className="relative pl-6 flex flex-col gap-8 border-l border-slate-200 ml-3">
                            {/* Punched In */}
                            <div className="relative">
-                              <div className="absolute -left-[31px] bg-white rounded-full p-0.5">
+                              <div className="absolute -left-[31px] bg-[var(--tiles-card-bg)] rounded-full p-0.5">
                                  <div className="w-4 h-4 rounded-full bg-blue-500 flex items-center justify-center">
                                     <Clock size={10} className="text-white" />
                                  </div>
@@ -238,8 +238,8 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
 
                            {/* Day Plan */}
                            <div className="relative">
-                              <div className="absolute -left-[31px] bg-white rounded-full p-0.5">
-                                 <div className="w-4 h-4 rounded-full border-2 border-slate-300 bg-white flex items-center justify-center"></div>
+                              <div className="absolute -left-[31px] bg-[var(--tiles-card-bg)] rounded-full p-0.5">
+                                 <div className="w-4 h-4 rounded-full border-2 border-slate-300 bg-[var(--tiles-card-bg)] flex items-center justify-center"></div>
                               </div>
                               <div className="text-sm font-bold text-slate-900 -mt-0.5">Day Plan Recorded</div>
                               <div className="text-[10px] text-slate-600 mt-1">{String(dayPlanNotes)}</div>
@@ -247,7 +247,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
 
                            {/* EOD Submitted */}
                            <div className="relative">
-                              <div className="absolute -left-[31px] bg-white rounded-full p-0.5">
+                              <div className="absolute -left-[31px] bg-[var(--tiles-card-bg)] rounded-full p-0.5">
                                  <div className={`w-4 h-4 rounded-full flex items-center justify-center ${isPunchedIn ? 'bg-slate-300' : 'bg-slate-900'}`}>
                                     <ClipboardList size={10} className="text-white" />
                                  </div>
@@ -262,14 +262,14 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
 
                      {/* Notes Row */}
                      <div className={`grid grid-cols-1 ${!isPunchedIn ? 'md:grid-cols-2' : ''} gap-6`}>
-                        <div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden p-6 flex flex-col">
+                        <div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-6 flex flex-col">
                            <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4">
                               <ClipboardList size={14} className="text-slate-500" /> Day Plan Notes
                            </div>
                            <div className="text-xs text-slate-700 leading-relaxed whitespace-pre-wrap">{String(dayPlanNotes)}</div>
                         </div>
                         {!isPunchedIn && (
-                           <div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden p-6 flex flex-col">
+                           <div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-6 flex flex-col">
                               <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4">
                                  <ClipboardList size={14} className="text-slate-500" /> EOD Remarks
                               </div>
@@ -279,7 +279,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
                      </div>
 
                      {/* Route Assignment */}
-                     <div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden p-6">
+                     <div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-6">
                         <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-6">
                            <Map size={14} className="text-slate-500" /> Route Assignment
                         </div>
@@ -299,7 +299,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
                   {/* Right Column */}
                   <div className="flex-1 flex flex-col gap-6 min-w-[280px]">
                      {/* Store Image */}
-                     <div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden p-6">
+                     <div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-6">
                         <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4">
                            <Camera size={14} className="text-slate-500" /> Store Image
                         </div>
@@ -322,7 +322,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
                      </div>
 
                      {/* SO Card */}
-                     <div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden p-6">
+                     <div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-6">
                         <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-5">
                            <User size={14} className="text-slate-500" /> Sales Officer
                         </div>
@@ -359,7 +359,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
                      </div>
 
                      {/* Meta Card */}
-                     <div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden p-6">
+                     <div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-6">
                         <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4">
                            <Hash size={14} className="text-slate-500" /> Meta
                         </div>
diff --git a/src/components/dv/DetailView.tsx b/src/components/dv/DetailView.tsx
index e503912..13d8080 100644
--- a/src/components/dv/DetailView.tsx
+++ b/src/components/dv/DetailView.tsx
@@ -115,7 +115,7 @@ export function DetailView({ client, dvUid, instanceId, title, fields, columns =
                         {key.replace(/_/g, ' ')}
                       </dt>
                       <dd className="m-0 text-sm text-strong font-medium overflow-x-auto rounded border border-border-subtle shadow-sm">
-                        <table className="min-w-full divide-y divide-border-subtle text-left bg-white">
+                        <table className="min-w-full divide-y divide-border-subtle text-left bg-[var(--tiles-card-bg)]">
                           <thead className="bg-slate-50">
                             <tr>
                               {headers.map(h => (
diff --git a/src/components/dv/GridTable.tsx b/src/components/dv/GridTable.tsx
index dddec3b..b81226f 100644
--- a/src/components/dv/GridTable.tsx
+++ b/src/components/dv/GridTable.tsx
@@ -10,7 +10,7 @@ export interface GridTableProps {
 
 export function GridTable({ data, columns, onEdit, onDelete }: GridTableProps) {
   return (
-    <div className="w-full bg-white rounded-lg shadow-sm border border-slate-200 overflow-x-auto">
+    <div className="w-full bg-[var(--tiles-card-bg)] rounded-lg shadow-sm border border-slate-200 overflow-x-auto">
       <table className="w-full text-sm text-left whitespace-nowrap">
         <thead className="bg-slate-100 border-b border-slate-200 text-[11px] font-bold text-slate-700 uppercase tracking-wider">
           <tr>
@@ -24,7 +24,7 @@ export function GridTable({ data, columns, onEdit, onDelete }: GridTableProps) {
         </thead>
         <tbody className="divide-y divide-slate-100">
           {data.map((row, rowIdx) => (
-            <tr key={rowIdx} className="hover:bg-slate-50 transition-colors bg-white group">
+            <tr key={rowIdx} className="hover:bg-slate-50 transition-colors bg-[var(--tiles-card-bg)] group">
               {columns.map((col, colIdx) => {
                 const val = row[col.id];
                 let displayVal = String(val ?? '-');
diff --git a/src/components/dv/OrderDetail.tsx b/src/components/dv/OrderDetail.tsx
index 448e14e..e4e99d9 100644
--- a/src/components/dv/OrderDetail.tsx
+++ b/src/components/dv/OrderDetail.tsx
@@ -116,9 +116,9 @@ export function OrderDetail({ instanceId }: WiredDetailViewProps) {
   const totalKgs = extract('total_kgs_3', remainingData) || 0;
 
   return (
-    <div className="flex flex-col gap-4 bg-white p-1">
+    <div className="flex flex-col gap-4 bg-[var(--tiles-card-bg)] p-1">
       {/* Top Section */}
-      <div className="border border-slate-200 rounded-xl p-6 bg-white shadow-sm flex flex-col md:flex-row md:items-start justify-between gap-4">
+      <div className="border border-slate-200 rounded-xl p-6 bg-[var(--tiles-card-bg)] shadow-sm flex flex-col md:flex-row md:items-start justify-between gap-4">
         <div>
           <div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Order ID</div>
           <div className="text-2xl font-black text-slate-900 mb-2">{String(orderId)}</div>
@@ -143,19 +143,19 @@ export function OrderDetail({ instanceId }: WiredDetailViewProps) {
 
       {/* Middle Stats Section */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div className="border border-slate-200 rounded-xl p-5 bg-white shadow-sm flex flex-col justify-between">
+        <div className="border border-slate-200 rounded-xl p-5 bg-[var(--tiles-card-bg)] shadow-sm flex flex-col justify-between">
            <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3">
               <Package size={14} className="text-emerald-500" /> Total Bags
            </div>
            <div className="text-2xl font-bold text-slate-900">{String(totalBags)}</div>
         </div>
-        <div className="border border-slate-200 rounded-xl p-5 bg-white shadow-sm flex flex-col justify-between">
+        <div className="border border-slate-200 rounded-xl p-5 bg-[var(--tiles-card-bg)] shadow-sm flex flex-col justify-between">
            <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3">
               <Weight size={14} className="text-blue-500" /> Total Kilograms
            </div>
            <div className="text-2xl font-bold text-slate-900">{Number(totalKgs).toLocaleString()}</div>
         </div>
-        <div className="border border-slate-200 rounded-xl p-5 bg-white shadow-sm flex flex-col justify-between">
+        <div className="border border-slate-200 rounded-xl p-5 bg-[var(--tiles-card-bg)] shadow-sm flex flex-col justify-between">
            <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3">
               <List size={14} className="text-slate-500" /> Line Items
            </div>
@@ -166,7 +166,7 @@ export function OrderDetail({ instanceId }: WiredDetailViewProps) {
       {/* Bottom Section */}
       <div className="flex flex-col lg:flex-row gap-4">
          {/* Left Table */}
-         <div className="flex-[2] border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden flex flex-col min-w-0">
+         <div className="flex-[2] border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden flex flex-col min-w-0">
             <div className="p-4 border-b border-slate-100 flex items-center gap-2 bg-slate-50">
                <Package size={14} className="text-slate-500" />
                <span className="text-xs font-bold text-slate-500 uppercase tracking-wider">Order Items</span>
@@ -217,7 +217,7 @@ export function OrderDetail({ instanceId }: WiredDetailViewProps) {
          {/* Right Sidebar */}
          <div className="flex-1 flex flex-col gap-4 min-w-[280px]">
             {/* SO Card */}
-            <div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden p-5">
+            <div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-5">
                <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4">
                   <User size={14} className="text-slate-500" /> Sales Officer
                </div>
@@ -253,7 +253,7 @@ export function OrderDetail({ instanceId }: WiredDetailViewProps) {
             </div>
 
             {/* Order Meta */}
-            <div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden p-5">
+            <div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-5">
                <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4">
                   <Hash size={14} className="text-slate-500" /> Order Meta
                </div>
diff --git a/src/components/dv/PotentialMiningTable.tsx b/src/components/dv/PotentialMiningTable.tsx
index d42b3c1..49b4c23 100644
--- a/src/components/dv/PotentialMiningTable.tsx
+++ b/src/components/dv/PotentialMiningTable.tsx
@@ -22,7 +22,7 @@ export interface PotentialMiningTableProps {
 
 export function PotentialMiningTable({ data, onEdit, onDelete, hideOrderDetails }: PotentialMiningTableProps) {
   return (
-    <div className="w-full bg-white rounded-lg shadow-sm border border-slate-200 overflow-x-auto">
+    <div className="w-full bg-[var(--tiles-card-bg)] rounded-lg shadow-sm border border-slate-200 overflow-x-auto">
       <table className="w-full text-sm text-left whitespace-nowrap">
         <thead className="bg-slate-100 border-b border-slate-200 text-[11px] font-bold text-slate-700 uppercase tracking-wider">
           <tr>
@@ -46,7 +46,7 @@ export function PotentialMiningTable({ data, onEdit, onDelete, hideOrderDetails
             const absDiff = Math.abs(difference);
 
             return (
-              <tr key={item.id} className="hover:bg-slate-50 transition-colors bg-white group">
+              <tr key={item.id} className="hover:bg-slate-50 transition-colors bg-[var(--tiles-card-bg)] group">
                 <td className="px-6 py-4">
                   <div className="flex items-center gap-3">
                     <span className="font-normal text-slate-600 text-sm">{item.productName}</span>
diff --git a/src/components/dv/StoreDetail.tsx b/src/components/dv/StoreDetail.tsx
index e4a5e9c..646a0e1 100644
--- a/src/components/dv/StoreDetail.tsx
+++ b/src/components/dv/StoreDetail.tsx
@@ -183,7 +183,7 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
          </div>
 
          {/* Hero Card */}
-         <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col md:flex-row">
+         <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col md:flex-row">
             {/* Image Section */}
             {imageUrl ? (
                <div className="md:w-1/3 lg:w-1/4 h-48 md:h-auto relative bg-slate-100">
@@ -248,11 +248,11 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
 
                {/* Contact Card */}
                <Card pad={false} className="overflow-hidden border-slate-200 shadow-sm">
-                  <div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-white">
+                  <div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-[var(--tiles-card-bg)]">
                      <User size={16} className="text-slate-400" />
                      <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Contact</h3>
                   </div>
-                  <div className="p-5 grid grid-cols-1 sm:grid-cols-2 gap-y-6 gap-x-8 bg-white">
+                  <div className="p-5 grid grid-cols-1 sm:grid-cols-2 gap-y-6 gap-x-8 bg-[var(--tiles-card-bg)]">
                      <div className="flex gap-3">
                         <div className="w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 border border-slate-100">
                            <User size={14} className="text-slate-400" />
@@ -296,11 +296,11 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
 
                {/* Route Assignment Card */}
                <Card pad={false} className="overflow-hidden border-slate-200 shadow-sm">
-                  <div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-white">
+                  <div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-[var(--tiles-card-bg)]">
                      <TrendingUp size={16} className="text-slate-400" />
                      <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Route Assignment</h3>
                   </div>
-                  <div className="p-5 grid grid-cols-1 sm:grid-cols-3 gap-4 bg-white">
+                  <div className="p-5 grid grid-cols-1 sm:grid-cols-3 gap-4 bg-[var(--tiles-card-bg)]">
                      <div className="p-4 rounded-xl border border-slate-100 bg-slate-50">
                         <div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Route</div>
                         <div className="text-base font-bold text-slate-900">{routeName ? String(routeName) : '-'}</div>
@@ -321,11 +321,11 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
                {/* Order Potential Card */}
                {Array.isArray(potential) && potential.length > 0 && (
                   <Card pad={false} className="overflow-hidden border-slate-200 shadow-sm">
-                     <div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-white">
+                     <div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-[var(--tiles-card-bg)]">
                         <FileText size={16} className="text-slate-400" />
                         <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Order Potential</h3>
                      </div>
-                     <div className="bg-white">
+                     <div className="bg-[var(--tiles-card-bg)]">
                         <table className="w-full text-sm text-left">
                            <thead className="bg-slate-50 border-b border-slate-100">
                               <tr>
@@ -355,18 +355,18 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
 
                {/* Distributor Card */}
                <Card pad={false} className="overflow-hidden border-slate-200 shadow-sm">
-                  <div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-white">
+                  <div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-[var(--tiles-card-bg)]">
                      <Truck size={16} className="text-slate-400" />
                      <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Distributor</h3>
                   </div>
-                  <div className="p-5 bg-white">
+                  <div className="p-5 bg-[var(--tiles-card-bg)]">
                      <div className="p-4 rounded-xl border border-slate-100 bg-slate-50">
                         <div className="text-sm font-bold text-slate-900 mb-1">{distributorName ? String(distributorName) : '-'}</div>
                         <div className="text-xs text-slate-500 mb-4">Owner · {distributorOwnerName ? String(distributorOwnerName) : '-'}</div>
 
                         <div className="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-8">
                            <div className="flex items-center gap-2">
-                              <div className="w-7 h-7 rounded-full bg-white flex items-center justify-center border border-slate-200">
+                              <div className="w-7 h-7 rounded-full bg-[var(--tiles-card-bg)] flex items-center justify-center border border-slate-200">
                                  <Phone size={12} className="text-slate-400" />
                               </div>
                               <div>
@@ -375,7 +375,7 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
                               </div>
                            </div>
                            <div className="flex items-center gap-2">
-                              <div className="w-7 h-7 rounded-full bg-white flex items-center justify-center border border-slate-200">
+                              <div className="w-7 h-7 rounded-full bg-[var(--tiles-card-bg)] flex items-center justify-center border border-slate-200">
                                  <Mail size={12} className="text-slate-400" />
                               </div>
                               <div>
@@ -395,7 +395,7 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
 
                {/* Location Map */}
                <Card pad={false} className="overflow-hidden border-slate-200 shadow-sm flex flex-col">
-                  <div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-white">
+                  <div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-[var(--tiles-card-bg)]">
                      <MapPin size={16} className="text-slate-400" />
                      <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Location</h3>
                   </div>
@@ -412,7 +412,7 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
                               src={`https://maps.google.com/maps?q=${lat},${lng}&hl=en&z=15&output=embed`}
                            ></iframe>
                            <div
-                              className="absolute bottom-3 right-3 w-8 h-8 bg-white/90 backdrop-blur-sm rounded shadow flex items-center justify-center cursor-pointer hover:bg-white transition-colors"
+                              className="absolute bottom-3 right-3 w-8 h-8 bg-[var(--tiles-card-bg)]/90 backdrop-blur-sm rounded shadow flex items-center justify-center cursor-pointer hover:bg-[var(--tiles-card-bg)] transition-colors"
                               onClick={() => window.open(`https://maps.google.com/maps?q=${lat},${lng}`, '_blank')}
                            >
                               <Navigation2 size={16} className="text-slate-700" />
@@ -426,7 +426,7 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
                      )}
                   </div>
                   {lat && lng && (
-                     <div className="p-3 bg-white text-[10px] text-slate-500 text-center border-t border-slate-100">
+                     <div className="p-3 bg-[var(--tiles-card-bg)] text-[10px] text-slate-500 text-center border-t border-slate-100">
                         Tap map icon to open in Google Maps.
                      </div>
                   )}
@@ -434,11 +434,11 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
 
                {/* Meta */}
                <Card pad={false} className="overflow-hidden border-slate-200 shadow-sm">
-                  <div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-white">
+                  <div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-[var(--tiles-card-bg)]">
                      <Hash size={16} className="text-slate-400" />
                      <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Meta</h3>
                   </div>
-                  <div className="p-5 flex flex-col gap-3 bg-white">
+                  <div className="p-5 flex flex-col gap-3 bg-[var(--tiles-card-bg)]">
                      <div className="flex justify-between items-center">
                         <span className="text-xs text-slate-500">Store Code</span>
                         <span className="text-xs font-bold text-slate-900">{String(storeCode)}</span>
diff --git a/src/components/forms/fields/OrderGrid.tsx b/src/components/forms/fields/OrderGrid.tsx
index 3822870..95639b7 100644
--- a/src/components/forms/fields/OrderGrid.tsx
+++ b/src/components/forms/fields/OrderGrid.tsx
@@ -296,7 +296,7 @@ export function OrderGrid({
   const displayTotalKgs = totalKgsValue !== undefined ? totalKgsValue : calculatedKgs;
 
   return (
-    <div className="max-w-full bg-white rounded-xl border border-border-default p-6 space-y-6 shadow-sm font-sans">
+    <div className="max-w-full bg-[var(--tiles-card-bg)] rounded-xl border border-border-default p-6 space-y-6 shadow-sm font-sans">
       <div className="flex items-center justify-between">
         <p className="text-sm font-bold text-slate-700 uppercase tracking-wide">
           {label || 'Order details'}
diff --git a/src/components/forms/fields/PotentialMiningGrid.tsx b/src/components/forms/fields/PotentialMiningGrid.tsx
index 2985f65..68ee2ab 100644
--- a/src/components/forms/fields/PotentialMiningGrid.tsx
+++ b/src/components/forms/fields/PotentialMiningGrid.tsx
@@ -73,7 +73,7 @@ export function PotentialMiningGrid({
   }, [rows, columns, onChange]);
 
   return (
-    <div className="max-w-full bg-white rounded-xl border border-border-default p-6 space-y-6 shadow-sm font-sans">
+    <div className="max-w-full bg-[var(--tiles-card-bg)] rounded-xl border border-border-default p-6 space-y-6 shadow-sm font-sans">
       <div className="flex items-center justify-between">
         <p className="text-sm font-bold text-slate-700 uppercase tracking-wide">
           {label || 'Potential Mining'}
@@ -172,6 +172,7 @@ export function PotentialMiningGrid({
                         disabled={isReadOnly}
                         value={String(row[fieldId] ?? '')}
                         onChange={(e) => updateRowField(rowIdx, fieldId, e.target.value)}
+                        placeholder={col.name ? `Enter ${col.name.toLowerCase()}...` : 'Enter details...'}
                         className="w-full"
                       />
                     );
diff --git a/src/components/forms/fields/StorePotentialGrid.tsx b/src/components/forms/fields/StorePotentialGrid.tsx
index a9045da..fa8f47f 100644
--- a/src/components/forms/fields/StorePotentialGrid.tsx
+++ b/src/components/forms/fields/StorePotentialGrid.tsx
@@ -139,7 +139,7 @@ export function StorePotentialGrid({
   }, [rows, columns, onChange]);
 
   return (
-    <div className="max-w-full bg-white rounded-xl border border-border-default p-6 space-y-6 shadow-sm font-sans">
+    <div className="max-w-full bg-[var(--tiles-card-bg)] rounded-xl border border-border-default p-6 space-y-6 shadow-sm font-sans">
       <div className="flex items-center justify-between">
         <p className="text-sm font-bold text-slate-700 uppercase tracking-wide">
           {label || 'Store Potential'}
diff --git a/src/components/reusable/AnalyticsChart.tsx b/src/components/reusable/AnalyticsChart.tsx
index 812da64..ef5ab64 100644
--- a/src/components/reusable/AnalyticsChart.tsx
+++ b/src/components/reusable/AnalyticsChart.tsx
@@ -93,6 +93,16 @@ export function AnalyticsChart({ data }: AnalyticsChartProps) {
         const renderChartContent = () => {
           return (
             <>
+              <defs>
+                <linearGradient id={`barGradient-${idx}-0`} x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor="#1F4D36" stopOpacity={1} />
+                  <stop offset="100%" stopColor="#1F4D36" stopOpacity={0.6} />
+                </linearGradient>
+                <linearGradient id={`barGradient-${idx}-1`} x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor="#3B82F6" stopOpacity={1} />
+                  <stop offset="100%" stopColor="#3B82F6" stopOpacity={0.6} />
+                </linearGradient>
+              </defs>
               <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E2E8F0" />
               <XAxis 
                 dataKey="dimension" 
@@ -142,12 +152,13 @@ export function AnalyticsChart({ data }: AnalyticsChartProps) {
                     />
                   );
                 } else {
+                  const barFill = i === 0 ? `url(#barGradient-${idx}-0)` : (i === 1 ? `url(#barGradient-${idx}-1)` : color);
                   return (
                     <Bar 
                       key={key}
                       dataKey={key} 
                       name={hasSeries ? key : "Value"}
-                      fill={color} 
+                      fill={barFill} 
                       radius={[4, 4, 0, 0]}
                       maxBarSize={40}
                     />
@@ -159,7 +170,7 @@ export function AnalyticsChart({ data }: AnalyticsChartProps) {
         };
 
         return (
-          <Card key={chart.chart_uid || idx} title={title} className="shadow-sm border border-gray-100">
+          <Card key={chart.chart_uid || idx} title={title} className="shadow-sm border border-gray-100 !bg-[var(--tiles-card-bg)]">
             <div className="h-[320px] w-full mt-4">
               {chartType === 5 ? (
                 <div className="w-full h-full overflow-y-auto pr-2 scrollbar-slim">
diff --git a/src/components/reusable/Pagination.tsx b/src/components/reusable/Pagination.tsx
index 7891cd4..1ef58c6 100644
--- a/src/components/reusable/Pagination.tsx
+++ b/src/components/reusable/Pagination.tsx
@@ -74,14 +74,14 @@ export function Pagination({ page, pageSize, total, onPage, onPageSizeChange }:
         </div>
 
         <div className="flex items-center gap-2">
-          <Button variant="secondary" size="sm" disabled={safePage <= 1} onClick={() => onPage(safePage - 1)}>
+          <Button variant="outline" size="sm" className="!rounded-full" disabled={safePage <= 1} onClick={() => onPage(safePage - 1)}>
             <ChevronLeft size={15} />
             Prev
           </Button>
           <span className="px-1 text-xs font-medium text-muted nums">
             {safePage} / {totalPages}
           </span>
-          <Button variant="secondary" size="sm" disabled={safePage >= totalPages} onClick={() => onPage(safePage + 1)}>
+          <Button variant="outline" size="sm" className="!rounded-full" disabled={safePage >= totalPages} onClick={() => onPage(safePage + 1)}>
             Next
             <ChevronRight size={15} />
           </Button>
diff --git a/src/components/reusable/StatsTiles.tsx b/src/components/reusable/StatsTiles.tsx
index e0f9f1b..d1c2301 100644
--- a/src/components/reusable/StatsTiles.tsx
+++ b/src/components/reusable/StatsTiles.tsx
@@ -1,4 +1,4 @@
-import { Phone, TrendingUp, Activity, BarChart2, ShoppingCart, ShoppingBag, Scale } from 'lucide-react';
+import { Phone, TrendingUp, Activity, BarChart2, ShoppingCart, ShoppingBag, Scale } from 'lucide-react';
 import type { TileItem } from "../../api/types";
 
 export interface StatsTilesProps {
@@ -49,12 +49,11 @@ export function StatsTiles({ tiles }: StatsTilesProps) {
         return (
           <div
             key={tile.tile_uid || idx}
-            className={`flex flex-col justify-between w-full h-[100px] p-5 rounded-2xl bg-white border border-gray-100 shadow-sm transition-all duration-200 hover:shadow-md hover:-translate-y-1 cursor-pointer`}
+            className={`flex flex-col justify-between w-full h-[100px] p-5 rounded-xl bg-[var(--tiles-card-bg)] border border-[var(--tiles-card-border)] shadow-sm transition-all duration-200 hover:shadow-md hover:-translate-y-1 cursor-pointer`}
           >
             <div className="flex justify-between items-center w-full">
-              <span className={`text-sm font-bold truncate pr-2 ${
-                isDanger ? 'text-red-600' : 'text-gray-600'
-              }`}>
+              <span className={`text-sm font-bold truncate pr-2 ${isDanger ? 'text-red-600' : 'text-[var(--tiles-font-color)]'
+                }`}>
                 {displayLabel}
               </span>
               <div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${iconBgColor} ${iconColor}`}>
@@ -62,9 +61,8 @@ export function StatsTiles({ tiles }: StatsTilesProps) {
               </div>
             </div>
 
-            <p className={`text-[26px] font-extrabold leading-none tabular-nums mt-auto ${
-              isDanger ? 'text-red-600' : 'text-[#0058be]'
-            }`}>
+            <p className={`text-[26px] font-extrabold leading-none tabular-nums mt-auto ${isDanger ? 'text-red-600' : 'text-[var(--tiles-font-color)]'
+              }`}>
               {(tile.value as React.ReactNode) ?? "-"}
             </p>
           </div>
diff --git a/src/components/rv/RecordView.tsx b/src/components/rv/RecordView.tsx
index 1476101..e3f50a3 100644
--- a/src/components/rv/RecordView.tsx
+++ b/src/components/rv/RecordView.tsx
@@ -161,6 +161,7 @@ export function RecordView({
         title={title}
         action={headerActions}
         pad={false}
+        className="!bg-[var(--z-rv-table-header)]"
       >
         <div className="flex flex-wrap items-center justify-between gap-4 p-4 border-b border-[var(--z-block-border)] bg-[var(--z-rv-table-header)]">
           <div className="flex flex-wrap items-center gap-3">
@@ -241,13 +242,13 @@ export function RecordView({
                   {fields.map((f) => (
                     <th
                       key={f.field_key}
-                      className="text-left px-[18px] py-4 text-sm font-bold uppercase tracking-wider text-black/70 whitespace-nowrap bg-slate-50/50"
+                      className="text-left px-[18px] py-4 text-sm font-bold uppercase tracking-wider text-black/70 whitespace-nowrap bg-[var(--z-rv-table-header)]"
                     >
                       {f.output_label}
                     </th>
                   ))}
                   {rowActions && (
-                    <th className="sticky right-0 bg-slate-50/50 px-4 py-4 text-left text-sm font-extrabold uppercase tracking-wider text-[#1b37a5] border-b border-border-subtle z-10 w-24">
+                    <th className="sticky right-0 bg-[var(--z-rv-table-header)] px-4 py-4 text-left text-sm font-extrabold uppercase tracking-wider text-[#1b37a5] border-b border-border-subtle z-10 w-24">
                       Actions
                     </th>
                   )}
diff --git a/src/screens/ConsoleLayout.tsx b/src/screens/ConsoleLayout.tsx
index 6700e14..6e53bbb 100644
--- a/src/screens/ConsoleLayout.tsx
+++ b/src/screens/ConsoleLayout.tsx
@@ -29,12 +29,12 @@ export function ConsoleLayout() {
   if (!authed) return <Navigate to="/login" replace />;
 
   return (
-    <div className="h-screen bg-app flex flex-col">
+    <div className="h-screen bg-[var(--secondary-color)] flex flex-col">
       <header className="sticky top-0 z-10 shrink-0 flex items-center justify-between gap-6 px-6 h-[56px] shadow-sm" style={{ background: 'var(--nav-bg-color)' }}>
         <div className="flex items-center min-w-max w-48">
           <span className="text-lg font-bold text-white tracking-wide leading-none">Krishna Sales</span>
         </div>
-        <nav className="flex items-center justify-center gap-2 h-full flex-1">
+        <nav className="flex items-center justify-end gap-2 h-full flex-1 mr-4">
           {SCREENS.map((t) => {
             return (
               <NavLink
@@ -61,7 +61,7 @@ export function ConsoleLayout() {
               <ChevronDown size={14} className="ml-0.5 opacity-70" />
             </button>
 
-            <div className="absolute top-[80%] left-0 mt-1 w-56 bg-white rounded-md shadow-lg py-1 border border-gray-200 hidden group-hover:block z-50">
+            <div className="absolute top-[80%] right-0 mt-1 w-56 bg-white rounded-md shadow-lg py-1 border border-gray-200 hidden group-hover:block z-50">
               {Object.entries(REPORT_MAP).map(([key, report]) => (
                 <NavLink
                   key={key}
@@ -85,7 +85,7 @@ export function ConsoleLayout() {
           >
             {user?.name ? user.name.charAt(0).toUpperCase() : 'S'}
           </button>
-          
+
           <div className="absolute top-[85%] right-0 mt-1 w-60 bg-white rounded-md shadow-xl py-2 border border-gray-200 hidden group-hover:block z-50 text-left">
             <div className="px-4 py-3 border-b border-gray-100 mb-1">
               <p className="text-sm font-bold text-gray-900 truncate">{user?.name || 'User'}</p>
diff --git a/src/screens/DailySalesReportPage.tsx b/src/screens/DailySalesReportPage.tsx
index b9c326e..fd2bd84 100644
--- a/src/screens/DailySalesReportPage.tsx
+++ b/src/screens/DailySalesReportPage.tsx
@@ -3,7 +3,7 @@ import { Card, Input, Select } from '../components/reusable';
 import { Button } from '../components/buttons/Button';
 import {
   SALES_REPORT_ROUTES,
-  SALES_REPORT_DISTRIBUTORS,
+  ROUTE_WISE_DISTRIBUTORS,
   SALES_REPORT_SO_NAMES
 } from '../api/config';
 import { Download, Printer } from 'lucide-react';
@@ -161,14 +161,17 @@ export function DailySalesReportPage() {
           <Select
             label="Route"
             value={route}
-            onChange={(e) => setRoute(e.target.value)}
+            onChange={(e) => {
+              setRoute(e.target.value);
+              setDistributor('');
+            }}
             options={[{ value: '', label: 'Select Route' }, ...SALES_REPORT_ROUTES.map(r => ({ value: r, label: r }))]}
           />
           <Select
             label="Distributor"
             value={distributor}
             onChange={(e) => setDistributor(e.target.value)}
-            options={[{ value: '', label: 'Select Distributor' }, ...SALES_REPORT_DISTRIBUTORS.map(d => ({ value: d, label: d }))]}
+            options={[{ value: '', label: 'Select Distributor' }, ...(route ? (ROUTE_WISE_DISTRIBUTORS[route] || []) : []).map(d => ({ value: d, label: d }))]}
           />
           <Select
             label="SO Name"
diff --git a/src/styles/styles.css b/src/styles/styles.css
index 0cb1329..741b12c 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -191,8 +191,8 @@
 /* root variable  */
 
 :root {
-  --primary-color: #1d4ed8;
-  --secondary-color: #f9fafb;
+  --primary-color: #1F4D36;
+  --secondary-color: #fdf4e4de;
   --font-color: #10182b;
   --font-family: "IBM Plex Sans", serif;
   --light-font-color: #667085;
@@ -209,7 +209,7 @@
 
 
   /* Navbar background color */
-  --nav-bg-color: linear-gradient(91deg, #1b37a5 0.17%, #2e56e1 99.89%);
+  --nav-bg-color: linear-gradient(91deg, #063b21 0.17%, #0d663a 99.89%);
   --nav-item-color: #10182b;
   --nav-item-active: #1b84ff;
   --nav-item-active-bg: #c0d4ed45;
@@ -229,22 +229,22 @@
   --nav-left-separator-line: #484848;
 
   /* tiles card */
-  --tiles-card-bg: #fff;
-  --tiles-card-border: #e5e7eb;
-  --tiles-font-color: #10182b;
+  --tiles-card-bg: #FFFBF4;
+  --tiles-card-border: #e5e7eb00;
+  --tiles-font-color: #1F4D36;
   --tiles-font-size: 16px;
   --tiles-count-size: 20px;
 
   /* button */
-  --z-btn-primary-bg: #0058be;
+  --z-btn-primary-bg: #1F4D36;
   --z-btn-primary-color: #fff;
-  --primary-btn-active: #0059bed8;
+  --primary-btn-active: #1d613f;
   --primary-btn-activeClr: #fff;
   --z-btn-secondary-bg: #f4f4f4;
   --z-btn-secondary-color: #10182b;
   --secondary-btn-active-bg: #eaeaea;
-  --z-btn-outline-color: #0058be;
-  --z-btn-outline-border: #0058be;
+  --z-btn-outline-color: #1F4D36;
+  --z-btn-outline-border: #1F4D36;
 
   --button-height: 36px;
   --z-btn-sm-height: 32px;
@@ -252,7 +252,7 @@
   --z-btn-lg-height: 48px;
 
   /* blocks */
-  --block-bg: #fff;
+  --block-bg: var(--tiles-card-bg);
   --block-padding: 20px;
   --block-radius: 20px;
   --block-border: #e5e7eb;
@@ -275,8 +275,8 @@
   --small-icon: 24px;
 
   /* record view table color */
-  --rv-table-bg: #fff;
-  --rv-table-header: #f9fafb;
+  --rv-table-bg: #FFFBF4;
+  --rv-table-header: #FFFBF4;
   --table-row-bg-select: #fafafa;
   --table-tr-active: #f9fafb;
   --rv-table-height: 40px;
@@ -285,7 +285,7 @@
 
   /* form input tags */
   --form-input-height: 40px;
-  --form-bg: #fff;
+  --form-bg: var(--tiles-card-bg);
   --form-input-bg: #fff;
   --inputBox-border: ##e5e7eb;
   --inputBox-border-active: #a2acbf;
@@ -353,14 +353,15 @@
   --z-btn-height: 44px;
 
   /* block and section styles */
-  --z-block-bg: #fff;
+  --z-block-bg: var(--tiles-card-bg);
   --z-block-radius: 8px;
   --z-block-border: #e5e7eb;
   --z-block-shadow: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
   /* record view table */
-  --z-rv-table-header: #fff;
-  --z-rv-td-padding: 8px 20px;
+  --z-rv-table-bg: var(--rv-table-bg);
+  --z-rv-table-header: var(--rv-table-header);
+  --z-rv-td-padding: var(--table-td-padding);
   --z-rv-table-border: #e5e7eb;
   --z-rv-td-height: 40px;