diff --git a/src/components/assistant/DoormileAI/AIMessage.jsx b/src/components/assistant/DoormileAI/AIMessage.jsx
index a619585..5559eb3 100644
--- a/src/components/assistant/DoormileAI/AIMessage.jsx
+++ b/src/components/assistant/DoormileAI/AIMessage.jsx
@@ -6,6 +6,7 @@ import { LuChevronDown } from 'react-icons/lu';
 import { HStack } from '@astryxdesign/core/HStack';
 import { VStack } from '@astryxdesign/core/VStack';
 import { Text } from '@astryxdesign/core/Text';
+import { IconButton } from '@astryxdesign/core/IconButton';
 import { Button } from '@/components/ui/button';
 import { ChatToolCalls } from '@astryxdesign/core/Chat';
 
diff --git a/src/pages/doormile/orders/MultipleOrders.jsx b/src/pages/doormile/orders/MultipleOrders.jsx
index 9595789..ac16cf9 100644
--- a/src/pages/doormile/orders/MultipleOrders.jsx
+++ b/src/pages/doormile/orders/MultipleOrders.jsx
@@ -852,27 +852,27 @@ export default function MultipleOrders() {
               ) : previewMode === 'preview' ? (
                 /* Raw spreadsheet preview table */
                 <table className="w-full text-left border-collapse text-xs">
-                  <thead className="bg-slate-50 text-[11px] font-bold text-slate-500 uppercase tracking-wider sticky top-0 border-b border-slate-200">
+                  <thead className="bg-slate-100 text-[11px] font-bold text-slate-700 uppercase tracking-wider sticky top-0 border-b border-slate-200 z-10">
                     <tr>
-                      <th className="py-2.5 pl-4 pr-2 w-10">#</th>
-                      <th className="py-2.5 px-3">Customer</th>
-                      <th className="py-2.5 px-3">Phone</th>
-                      <th className="py-2.5 px-3">Address</th>
-                      <th className="py-2.5 px-3">City</th>
-                      <th className="py-2.5 px-3">Qty</th>
+                      <th className="py-3 pl-4 pr-2 w-10">#</th>
+                      <th className="py-3 px-3">Customer</th>
+                      <th className="py-3 px-3">Phone</th>
+                      <th className="py-3 px-3">Address</th>
+                      <th className="py-3 px-3">City</th>
+                      <th className="py-3 px-3 text-center">Qty</th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-slate-100">
+                  <tbody className="divide-y divide-slate-100 bg-white">
                     {users.map((row, idx) => (
                       <tr key={row._rowkey || idx} className="hover:bg-slate-50/70 transition-colors">
-                        <td className="py-2.5 pl-4 pr-2 text-slate-400 font-mono text-[11px]">{idx + 1}</td>
-                        <td className="py-2.5 px-3 font-semibold text-slate-900">{row.firstname || '—'}</td>
-                        <td className="py-2.5 px-3 text-slate-600 font-mono text-[11px]">{row.contactno || '—'}</td>
-                        <td className="py-2.5 px-3 text-slate-600 max-w-[200px] truncate" title={row.address}>
+                        <td className="py-2.5 pl-4 pr-2 text-slate-600 font-mono text-xs font-bold">{idx + 1}</td>
+                        <td className="py-2.5 px-3 font-bold text-slate-900">{row.firstname || '—'}</td>
+                        <td className="py-2.5 px-3 text-slate-700 font-mono text-xs font-medium">{row.contactno || '—'}</td>
+                        <td className="py-2.5 px-3 text-slate-800 font-medium max-w-[200px] truncate" title={row.address}>
                           {row.address || '—'}
                         </td>
-                        <td className="py-2.5 px-3 text-slate-600">{row.city || '—'}</td>
-                        <td className="py-2.5 px-3 text-slate-700 font-bold">{row.quantity || 1}</td>
+                        <td className="py-2.5 px-3 text-slate-700 font-medium">{row.city || '—'}</td>
+                        <td className="py-2.5 px-3 text-center text-slate-900 font-bold">{row.quantity || 1}</td>
                       </tr>
                     ))}
                   </tbody>
@@ -880,29 +880,29 @@ export default function MultipleOrders() {
               ) : (
                 /* Interactive Drop List table */
                 <table className="w-full text-left border-collapse text-xs">
-                  <thead className="bg-slate-50 text-[11px] font-bold text-slate-500 uppercase tracking-wider sticky top-0 border-b border-slate-200">
+                  <thead className="bg-slate-100 text-[11px] font-bold text-slate-700 uppercase tracking-wider sticky top-0 border-b border-slate-200 z-10">
                     <tr>
-                      <th className="py-2.5 pl-4 pr-2 w-8">#</th>
-                      <th className="py-2.5 px-3 w-36">Customer</th>
-                      <th className="py-2.5 px-3">Address</th>
-                      <th className="py-2.5 px-2 w-16 text-center">Qty</th>
-                      <th className="py-2.5 px-2 w-24 text-center">Cash (₹)</th>
-                      <th className="py-2.5 px-2 w-16 text-center">Km</th>
-                      <th className="py-2.5 px-3 w-20 text-right">Charge</th>
-                      <th className="py-2.5 pr-4 pl-2 w-10 text-center"></th>
+                      <th className="py-3 pl-4 pr-2 w-8">#</th>
+                      <th className="py-3 px-3 w-40">Customer</th>
+                      <th className="py-3 px-3">Address</th>
+                      <th className="py-3 px-2 w-16 text-center">Qty</th>
+                      <th className="py-3 px-2 w-24 text-center">Cash (₹)</th>
+                      <th className="py-3 px-2 w-16 text-center">Km</th>
+                      <th className="py-3 px-3 w-20 text-right">Charge</th>
+                      <th className="py-3 pr-4 pl-2 w-10 text-center"></th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-slate-100">
+                  <tbody className="divide-y divide-slate-100 bg-white">
                     {dropCust.map((row, idx) => {
                       const needsAddress = row.latitude == null || row.longitude == null || !row.address;
                       return (
                         <tr key={row._rowkey || idx} className="hover:bg-slate-50/70 transition-colors">
-                          <td className="py-2.5 pl-4 pr-2 text-slate-400 font-mono text-[11px]">{idx + 1}</td>
-                          <td className="py-2.5 px-3">
-                            <div className="font-semibold text-slate-900 truncate max-w-[130px]">{row.firstname || '—'}</div>
-                            <div className="text-[10px] text-slate-400 font-mono mt-0.5">{row.contactno || '—'}</div>
+                          <td className="py-3 pl-4 pr-2 text-slate-600 font-mono text-xs font-bold">{idx + 1}</td>
+                          <td className="py-3 px-3">
+                            <div className="font-bold text-slate-900 text-xs truncate max-w-[150px]">{row.firstname || '—'}</div>
+                            <div className="text-[11px] text-slate-600 font-mono font-medium mt-0.5">{row.contactno || '—'}</div>
                           </td>
-                          <td className="py-2.5 px-3 min-w-[220px]">
+                          <td className="py-3 px-3 min-w-[220px]">
                             {needsAddress ? (
                               <AddressAutocomplete
                                 id={`addr-${row._rowkey}`}
@@ -911,15 +911,15 @@ export default function MultipleOrders() {
                                 bias={pickCust?.latitude ? { lat: Number(pickCust.latitude), lng: Number(pickCust.longitude) } : undefined}
                                 onChange={(val) => handleUpdateDropField(row._rowkey, 'address', val)}
                                 onPlaceSelected={(place) => handleRowPlaceSelected(row._rowkey, place)}
-                                inputClassName="!h-7 text-xs border-amber-300 bg-amber-50/30"
+                                inputClassName="!h-8 text-xs border-amber-300 bg-amber-50/40 text-slate-900 font-medium"
                               />
                             ) : (
-                              <div className="truncate max-w-[220px] text-slate-700" title={row.address}>
+                              <div className="truncate max-w-[220px] text-slate-800 font-medium" title={row.address}>
                                 {row.address}
                               </div>
                             )}
                           </td>
-                          <td className="py-2.5 px-2 text-center">
+                          <td className="py-3 px-2 text-center">
                             <input
                               type="number"
                               min="1"
@@ -927,36 +927,36 @@ export default function MultipleOrders() {
                               onChange={(e) =>
                                 handleUpdateDropField(row._rowkey, 'quantity', Number(e.target.value) || 1)
                               }
-                              className="w-12 h-7 text-center font-mono text-xs border border-slate-200 rounded focus:outline-none focus:border-black"
+                              className="w-14 h-8 text-center font-bold text-slate-900 bg-white border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-black/10 focus:border-black shadow-2xs"
                             />
                           </td>
-                          <td className="py-2.5 px-2 text-center">
+                          <td className="py-3 px-2 text-center">
                             <input
                               type="number"
                               min="0"
                               step="0.01"
-                              value={row.collectionamt || ''}
+                              value={row.collectionamt != null ? row.collectionamt : ''}
                               placeholder="0.00"
                               onChange={(e) =>
                                 handleUpdateDropField(row._rowkey, 'collectionamt', Number(e.target.value) || 0)
                               }
-                              className="w-20 h-7 text-center font-mono text-xs border border-slate-200 rounded focus:outline-none focus:border-black"
+                              className="w-20 h-8 text-center font-bold text-slate-900 bg-white border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-black/10 focus:border-black shadow-2xs"
                             />
                           </td>
-                          <td className="py-2.5 px-2 text-center font-mono text-[11px] text-slate-600">
-                            {row.distance ? `${row.distance}` : '—'}
+                          <td className="py-3 px-2 text-center font-mono text-xs font-semibold text-slate-800">
+                            {row.distance ? `${row.distance} km` : '—'}
                           </td>
-                          <td className="py-2.5 px-3 text-right font-bold text-slate-900 font-mono text-xs">
+                          <td className="py-3 px-3 text-right font-black text-slate-950 font-mono text-xs">
                             ₹{Number(row.totalcharge || 0).toFixed(2)}
                           </td>
-                          <td className="py-2.5 pr-4 pl-2 text-center">
+                          <td className="py-3 pr-4 pl-2 text-center">
                             <button
                               type="button"
                               onClick={() => handleRemoveDropRow(row._rowkey)}
-                              className="p-1 text-slate-400 hover:text-red-600 rounded transition-colors cursor-pointer"
+                              className="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors cursor-pointer"
                               title="Remove drop"
                             >
-                              <Trash2 className="w-3.5 h-3.5" />
+                              <Trash2 className="w-4 h-4" />
                             </button>
                           </td>
                         </tr>