diff --git a/admin-spa/src/routes/Customers/Detail.tsx b/admin-spa/src/routes/Customers/Detail.tsx
index 37d2d3f..a84f054 100644
--- a/admin-spa/src/routes/Customers/Detail.tsx
+++ b/admin-spa/src/routes/Customers/Detail.tsx
@@ -201,40 +201,90 @@ export default function CustomerDetail() {
                 <p className="text-sm mt-1">{__('This customer hasn\'t placed any orders')}</p>
               </div>
             ) : (
-              <div className="space-y-2">
-                {orders.map((order: any) => (
-                  <Link
-                    key={order.id}
-                    to={`/orders/${order.id}`}
-                    className="block p-4 rounded-lg border border-border hover:bg-accent/50 transition-colors"
-                  >
-                    <div className="flex items-center justify-between">
-                      <div className="flex-1">
-                        <div className="flex items-center gap-3">
-                          <span className="font-medium">#{order.number}</span>
-                          <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
-                            order.status === 'completed' ? 'bg-green-100 text-green-800' :
-                            order.status === 'processing' ? 'bg-blue-100 text-blue-800' :
-                            order.status === 'pending' ? 'bg-yellow-100 text-yellow-800' :
-                            'bg-gray-100 text-gray-800'
-                          }`}>
-                            {order.status}
-                          </span>
+              <>
+                {/* Desktop: Table */}
+                <div className="hidden md:block overflow-hidden rounded-lg border">
+                  <table className="w-full">
+                    <thead className="bg-muted/50">
+                      <tr className="border-b">
+                        <th className="text-left p-3 font-medium">{__('Order')}</th>
+                        <th className="text-left p-3 font-medium">{__('Date')}</th>
+                        <th className="text-left p-3 font-medium">{__('Status')}</th>
+                        <th className="text-right p-3 font-medium">{__('Items')}</th>
+                        <th className="text-right p-3 font-medium">{__('Total')}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {orders.map((order: any) => (
+                        <tr
+                          key={order.id}
+                          onClick={() => navigate(`/orders/${order.id}`)}
+                          className="border-b hover:bg-muted/30 last:border-0 cursor-pointer"
+                        >
+                          <td className="p-3">
+                            <span className="font-medium">#{order.number}</span>
+                          </td>
+                          <td className="p-3 text-sm text-muted-foreground">
+                            {order.date ? new Date(order.date).toLocaleDateString('id-ID') : '-'}
+                          </td>
+                          <td className="p-3">
+                            <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
+                              order.status === 'completed' ? 'bg-green-100 text-green-800' :
+                              order.status === 'processing' ? 'bg-blue-100 text-blue-800' :
+                              order.status === 'pending' ? 'bg-yellow-100 text-yellow-800' :
+                              'bg-gray-100 text-gray-800'
+                            }`}>
+                              {order.status}
+                            </span>
+                          </td>
+                          <td className="p-3 text-right text-sm">
+                            {order.items_count || 0}
+                          </td>
+                          <td className="p-3 text-right font-medium">
+                            {formatMoney(parseFloat(order.total || '0'))}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+
+                {/* Mobile: Cards */}
+                <div className="md:hidden space-y-2">
+                  {orders.map((order: any) => (
+                    <Link
+                      key={order.id}
+                      to={`/orders/${order.id}`}
+                      className="block p-4 rounded-lg border border-border hover:bg-accent/50 transition-colors"
+                    >
+                      <div className="flex items-center justify-between">
+                        <div className="flex-1">
+                          <div className="flex items-center gap-3">
+                            <span className="font-medium">#{order.number}</span>
+                            <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
+                              order.status === 'completed' ? 'bg-green-100 text-green-800' :
+                              order.status === 'processing' ? 'bg-blue-100 text-blue-800' :
+                              order.status === 'pending' ? 'bg-yellow-100 text-yellow-800' :
+                              'bg-gray-100 text-gray-800'
+                            }`}>
+                              {order.status}
+                            </span>
+                          </div>
+                          <div className="text-sm text-muted-foreground mt-1">
+                            {order.date ? new Date(order.date).toLocaleDateString('id-ID') : '-'}
+                          </div>
                         </div>
-                        <div className="text-sm text-muted-foreground mt-1">
-                          {order.date ? new Date(order.date).toLocaleDateString('id-ID') : '-'}
+                        <div className="text-right">
+                          <div className="font-bold">{formatMoney(parseFloat(order.total || '0'))}</div>
+                          <div className="text-sm text-muted-foreground">
+                            {order.items_count || 0} {__('items')}
+                          </div>
                         </div>
                       </div>
-                      <div className="text-right">
-                        <div className="font-bold">{formatMoney(parseFloat(order.total || '0'))}</div>
-                        <div className="text-sm text-muted-foreground">
-                          {order.items_count || 0} {__('items')}
-                        </div>
-                      </div>
-                    </div>
-                  </Link>
-                ))}
-              </div>
+                    </Link>
+                  ))}
+                </div>
+              </>
             )}
           </Card>
         </FormSection>