diff --git a/src/components/dv/OrderDetail.tsx b/src/components/dv/OrderDetail.tsx
index eaf4ad1..5f75672 100644
--- a/src/components/dv/OrderDetail.tsx
+++ b/src/components/dv/OrderDetail.tsx
@@ -4,7 +4,7 @@ import { ORDER_BOOKING } from '../../api/config';
 import { Card } from '../reusable/Card';
 import { Spinner } from '../reusable/Spinner';
 import { EmptyState } from '../reusable/EmptyState';
-import { Store, User, Package, Calendar, Hash, Mail, Weight, List, MapPin } from 'lucide-react';
+import { Store, User, Package, Calendar, Hash, Weight, MapPin, ShoppingBag } from 'lucide-react';
 
 export interface WiredDetailViewProps {
   instanceId: number | string;
@@ -116,163 +116,169 @@ export function OrderDetail({ instanceId }: WiredDetailViewProps) {
   const totalKgs = extract('total_kgs_3', remainingData) || 0;
 
   return (
-    <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-[var(--tiles-card-bg)] shadow-sm flex flex-col md:flex-row md:items-start justify-between gap-4">
+    <div className="flex flex-col gap-6 bg-transparent">
+      {/* Header */}
+      <div className="flex items-center 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>
-          <div className="flex items-center gap-3 text-xs text-slate-500 font-medium">
-             <span className="flex items-center gap-1.5"><Calendar size={14} /> {String(dateOfOrder)}</span>
-             <span className="flex items-center gap-1.5"><Hash size={14} /> Instance #{instanceId}</span>
+          <h1 className="text-xl font-semibold tracking-tight text-slate-900">Order Detail</h1>
+          <p className="text-sm text-slate-500">#{orderId}</p>
+        </div>
+      </div>
+
+      {/* Status + Date ribbon */}
+      <div className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-[var(--tiles-card-bg)] p-4 shadow-sm">
+        <div className="flex items-center gap-3">
+          <span className="inline-flex items-center gap-1.5 rounded-full bg-emerald-100 px-3 py-1 text-sm font-semibold text-emerald-800">
+            <span className="h-2 w-2 rounded-full bg-emerald-600" />
+            {String(stateName)}
+          </span>
+          <span className="text-sm text-slate-500 hidden sm:inline">Order ID</span>
+          <span className="font-mono text-sm font-semibold text-slate-800 hidden sm:inline">{String(orderId)}</span>
+        </div>
+        <div className="flex items-center gap-2 text-sm text-slate-500">
+          <Calendar className="h-4 w-4" />
+          <span>{String(dateOfOrder)}</span>
+          <span className="ml-2 pl-2 border-l border-slate-200 flex items-center gap-1.5 text-xs">
+            <Hash className="h-3 w-3" />
+            Instance #{instanceId}
+          </span>
+        </div>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-3">
+        {/* Main content */}
+        <div className="space-y-6 lg:col-span-2">
+          {/* Store summary */}
+          <div className="rounded-2xl border border-slate-200 bg-[var(--tiles-card-bg)] p-5 shadow-sm">
+            <div className="mb-4 flex items-center gap-2">
+              <div className="grid h-8 w-8 place-items-center rounded-full bg-emerald-100 text-emerald-600">
+                <Store className="h-4 w-4" />
+              </div>
+              <h2 className="text-sm font-semibold uppercase tracking-wider text-emerald-800">Store</h2>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div>
+                <p className="text-xs text-slate-500">Business</p>
+                <p className="font-medium text-slate-900">{String(storeName)}</p>
+              </div>
+              <div>
+                <p className="text-xs text-slate-500">Distributor</p>
+                <p className="font-medium text-slate-900">{String(distributorName)}</p>
+              </div>
+              <div>
+                <p className="text-xs text-slate-500">Route</p>
+                <p className="font-medium text-slate-900">
+                  {String(routeName)} ({String(routeCode)})
+                </p>
+              </div>
+              <div>
+                <p className="text-xs text-slate-500">Store Code</p>
+                <p className="font-mono font-medium text-slate-800">{(storeRaw as any)?.store_code_2 || (storeRaw as any)?.store_code || '-'}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Order items */}
+          <div className="rounded-2xl border border-slate-200 bg-[var(--tiles-card-bg)] p-5 shadow-sm">
+            <div className="mb-4 flex items-center gap-2">
+              <div className="grid h-8 w-8 place-items-center rounded-full bg-emerald-100 text-emerald-600">
+                <ShoppingBag className="h-4 w-4" />
+              </div>
+              <h2 className="text-sm font-semibold uppercase tracking-wider text-emerald-800">Order Items</h2>
+              <span className="ml-auto text-xs text-slate-500 font-semibold bg-slate-100 px-2 py-1 rounded-md">{itemsArray.length} items</span>
+            </div>
+            <div className="divide-y divide-slate-100">
+              {itemsArray.map((item: any, index: number) => {
+                const product = item.product_name_3 || item.product_name || '-';
+                const category = item.product_category_3 || item.product_category || '-';
+                const sku = item.sku_code_3 || item.sku_code || item.sku || '-';
+                const bags = item.bags_3 || item.bags || item.quantity || 0;
+                const weight = item.sku_3 || item.sku || '';
+
+                return (
+                  <div key={index} className="group flex flex-col sm:flex-row sm:items-center justify-between py-4 first:pt-2 last:pb-2 gap-3">
+                    <div className="flex items-start gap-4">
+                      <div className="grid h-10 w-10 place-items-center rounded-xl bg-emerald-50 text-emerald-600 border border-emerald-100 shrink-0 mt-1 sm:mt-0">
+                        <Package className="h-5 w-5" />
+                      </div>
+                      <div>
+                        <p className="font-medium text-slate-900">{String(product)}</p>
+                        <div className="mt-1 flex flex-wrap items-center gap-2 text-[10px] text-slate-500">
+                          <span className="rounded text-slate-600 font-medium">
+                            {String(category)}
+                          </span>
+                          <span className="w-1 h-1 rounded-full bg-slate-300"></span>
+                          <span className="font-mono text-slate-500">{String(sku)}</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="text-left sm:text-right pl-14 sm:pl-0">
+                      <p className="font-bold text-slate-900 text-sm">{String(bags)} bag{Number(bags) === 1 ? "" : "s"}</p>
+                      {weight && <p className="text-xs text-slate-500 mt-0.5">SKU {String(weight)}</p>}
+                    </div>
+                  </div>
+                )
+              })}
+              {itemsArray.length === 0 && (
+                <div className="py-6 text-center text-sm text-slate-500 italic">No items found in this order.</div>
+              )}
+            </div>
           </div>
         </div>
-        <div className="border border-emerald-200 bg-[#E8FBF0] rounded-xl p-4 flex flex-col gap-1 min-w-[200px]">
-           <div className="flex items-center gap-1.5 text-[10px] font-bold text-emerald-600 uppercase tracking-wider mb-1">
-              <Store size={12} className="text-emerald-500" /> Store
-           </div>
-           <div className="text-sm font-bold text-slate-900">{String(storeName)}</div>
-           <div className="flex items-center gap-2 text-[10px] text-slate-500 mt-1">
-              <span className="flex items-center gap-1"><MapPin size={12} /> {String(routeCode)} - {String(routeName)}</span>
-           </div>
-           <div className="flex items-center gap-2 text-[10px] text-slate-500 mt-0.5">
-              <span className="flex items-center gap-1"><User size={12} /> {String(distributorName)}</span>
-           </div>
-        </div>
-      </div>
 
-      {/* 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-[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-[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-[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" /> Order Items
-           </div>
-           <div className="text-2xl font-bold text-slate-900">{itemsArray.length}</div>
-        </div>
-      </div>
-
-      {/* 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-[var(--tiles-card-bg)] shadow-sm overflow-hidden flex flex-col min-w-0">
-            <div className="p-4 border-b border-emerald-200 flex items-center gap-2 bg-[#E8FBF0]">
-               <Package size={14} className="text-emerald-500" />
-               <span className="text-xs font-bold text-emerald-600 uppercase tracking-wider">Order Items</span>
+        {/* Sidebar */}
+        <div className="space-y-6">
+          {/* Totals */}
+          <div className="rounded-2xl border border-slate-200 bg-[var(--tiles-card-bg)] p-5 shadow-sm">
+            <div className="mb-4 flex items-center gap-2">
+              <div className="grid h-8 w-8 place-items-center rounded-full bg-blue-100 text-blue-600">
+                <Weight className="h-4 w-4" />
+              </div>
+              <h2 className="text-sm font-semibold uppercase tracking-wider text-blue-800">Totals</h2>
             </div>
-            <div className="overflow-x-auto flex-1">
-               <table className="w-full text-sm text-left">
-                  <thead className="bg-[#E8FBF0]/50 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
-                     <tr>
-                        <th className="px-5 py-3 border-b border-emerald-200">Product</th>
-                        <th className="px-5 py-3 border-b border-emerald-200">Category</th>
-                        <th className="px-5 py-3 border-b border-emerald-200">SKU</th>
-                        <th className="px-5 py-3 border-b border-emerald-200 text-right">Bags</th>
-                     </tr>
-                  </thead>
-                  <tbody className="divide-y divide-slate-100">
-                     {itemsArray.map((item: any, idx: number) => {
-                        const product = item.product_name_3 || '-';
-                        const category = item.product_category_3 || '-';
-                        const sku = item.sku_code_3 || '-';
-                        const bags = item.bags_3 || '0';
-                        const brCode = item.br_code_3 || '-';
-                        const weight = item.sku_3 ? `${item.sku_3} kg` : '-';
-
-                        return (
-                          <tr key={idx} className="hover:bg-[#E8FBF0]/50 transition-colors">
-                             <td className="px-5 py-3">
-                                <div className="font-bold text-slate-900 text-xs mb-0.5 whitespace-nowrap">{String(product)}</div>
-                                <div className="text-[10px] text-slate-500">BR Code {String(brCode)}</div>
-                             </td>
-                             <td className="px-5 py-3 text-xs text-slate-600 whitespace-nowrap">{String(category)}</td>
-                             <td className="px-5 py-3">
-                                <div className="text-xs text-slate-600 mb-0.5 whitespace-nowrap">{String(sku)}</div>
-                                <div className="text-[10px] text-slate-500 whitespace-nowrap">{String(weight)}</div>
-                             </td>
-                             <td className="px-5 py-3 text-right font-semibold text-slate-900 text-xs whitespace-nowrap">{String(bags)}</td>
-                          </tr>
-                        );
-                     })}
-                     <tr className="bg-[#E8FBF0] font-bold">
-                        <td colSpan={3} className="px-5 py-3 text-slate-900 text-xs">Total</td>
-                        <td className="px-5 py-3 text-right text-slate-900 text-xs">{String(totalBags)}</td>
-                     </tr>
-                  </tbody>
-               </table>
+            <div className="space-y-3">
+              <div className="flex items-center justify-between rounded-xl bg-slate-50 border border-slate-100 p-3.5">
+                <span className="text-sm font-medium text-slate-600">Total Bags</span>
+                <span className="font-mono text-lg font-bold text-slate-800">{String(totalBags)}</span>
+              </div>
+              <div className="flex items-center justify-between rounded-xl bg-slate-50 border border-slate-100 p-3.5">
+                <span className="text-sm font-medium text-slate-600">Total Weight</span>
+                <span className="font-mono text-lg font-bold text-slate-800">{Number(totalKgs).toLocaleString()} kg</span>
+              </div>
             </div>
-         </div>
+          </div>
 
-         {/* 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-[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>
-               <div className="flex items-center gap-3 mb-5">
-                  <div className="w-10 h-10 rounded-full bg-slate-900 text-white flex items-center justify-center font-bold text-sm shrink-0">
-                     {soInitials}
-                  </div>
-                  <div>
-                     <div className="text-sm font-bold text-slate-900">{String(soName)}</div>
-                     <div className="text-[10px] text-slate-500">Sales Officer - ID {String(soId)}</div>
-                  </div>
-               </div>
-               <div className="flex flex-col gap-4">
-                 <div className="flex items-center gap-3">
-                    <div className="w-8 h-8 rounded-full bg-[#E8FBF0] border border-emerald-200 flex items-center justify-center shrink-0">
-                       <Mail size={12} className="text-emerald-500" />
-                    </div>
-                    <div className="overflow-hidden">
-                       <div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">Email</div>
-                       <div className="text-xs font-semibold text-slate-900 truncate">{String(soEmail)}</div>
-                    </div>
-                 </div>
-                 <div className="flex items-center gap-3">
-                    <div className="w-8 h-8 rounded-full bg-[#E8FBF0] border border-emerald-200 flex items-center justify-center shrink-0">
-                       <Hash size={12} className="text-emerald-500" />
-                    </div>
-                    <div>
-                       <div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">User ID</div>
-                       <div className="text-xs font-semibold text-slate-900">{String(soId)}</div>
-                    </div>
-                 </div>
-               </div>
+          {/* Sales officer */}
+          <div className="rounded-2xl border border-slate-200 bg-[var(--tiles-card-bg)] p-5 shadow-sm">
+            <div className="mb-4 flex items-center gap-2">
+              <div className="grid h-8 w-8 place-items-center rounded-full bg-purple-100 text-purple-600">
+                <User className="h-4 w-4" />
+              </div>
+              <h2 className="text-sm font-semibold uppercase tracking-wider text-purple-800">Sales Officer</h2>
             </div>
+            <div className="flex items-center gap-3">
+              <div className="grid h-11 w-11 place-items-center rounded-full bg-slate-800 text-white text-sm font-bold shrink-0">
+                {soInitials}
+              </div>
+              <div className="min-w-0">
+                <p className="font-medium text-slate-900 truncate">{String(soName)}</p>
+                <p className="text-xs text-slate-500 truncate">{String(soEmail)}</p>
+                <p className="text-[10px] text-slate-400 mt-0.5">ID: {String(soId)}</p>
+              </div>
+            </div>
+          </div>
 
-            {/* Order Meta */}
-            <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>
-               <div className="flex flex-col gap-3">
-                  <div className="flex justify-between items-center text-xs">
-                     <span className="text-slate-500">Instance</span>
-                     <span className="font-bold text-slate-900">#{instanceId}</span>
-                  </div>
-                  <div className="flex justify-between items-center text-xs">
-                     <span className="text-slate-500">State</span>
-                     <span className="font-bold text-slate-900">{String(stateName)}</span>
-                  </div>
-                  <div className="flex justify-between items-center text-xs">
-                     <span className="text-slate-500">Date of Order</span>
-                     <span className="font-bold text-slate-900">{String(dateOfOrder)}</span>
-                  </div>
-               </div>
+          {/* Location hint */}
+          <div className="rounded-2xl border border-slate-200 bg-[var(--tiles-card-bg)] p-5 shadow-sm">
+            <div className="mb-3 flex items-center gap-2">
+              <div className="grid h-8 w-8 place-items-center rounded-full bg-amber-100 text-amber-600">
+                <MapPin className="h-4 w-4" />
+              </div>
+              <h2 className="text-sm font-semibold uppercase tracking-wider text-amber-800">Location</h2>
             </div>
-         </div>
+            <p className="text-sm text-slate-500 leading-relaxed">Order placed in route <span className="font-semibold text-slate-800">{String(routeName)}</span>.</p>
+          </div>
+        </div>
       </div>
     </div>
   );