diff --git a/admin-spa/src/routes/Orders/Detail.tsx b/admin-spa/src/routes/Orders/Detail.tsx
index 14cd6fc..0fffeae 100644
--- a/admin-spa/src/routes/Orders/Detail.tsx
+++ b/admin-spa/src/routes/Orders/Detail.tsx
@@ -21,6 +21,7 @@ import { showErrorToast, showSuccessToast, getPageLoadErrorMessage } from '@/lib
 import { ErrorCard } from '@/components/ErrorCard';
 import { InlineLoadingState } from '@/components/LoadingState';
 import { __ } from '@/lib/i18n';
+import { usePageHeader } from '@/contexts/PageHeaderContext';
 
 function Money({ value, currency, symbol }: { value?: number; currency?: string; symbol?: string }) {
   return <>{formatMoney(value, { currency, symbol })}</>;
@@ -44,6 +45,7 @@ export default function OrderShow() {
   const { id } = useParams<{ id: string }>();
   const qc = useQueryClient();
   const siteTitle = (window as any).wnw?.siteTitle || 'WooNooW';
+  const { setPageHeader, clearPageHeader } = usePageHeader();
 
   const [params, setParams] = useSearchParams();
   const mode = params.get('mode'); // undefined | 'label' | 'invoice'
@@ -140,6 +142,36 @@ export default function OrderShow() {
     retryPaymentMutation.mutate();
   }
 
+  // Set page header with actions
+  useEffect(() => {
+    if (!order || isPrintMode) {
+      clearPageHeader();
+      return;
+    }
+
+    const actions = (
+      <div className="flex gap-2">
+        <Button size="sm" variant="outline" onClick={printInvoice}>
+          <FileText className="w-4 h-4 mr-1" />
+          {__('Invoice')}
+        </Button>
+        <Link to={`/orders/${id}/edit`}>
+          <Button size="sm">
+            <Pencil className="w-4 h-4 mr-1" />
+            {__('Edit')}
+          </Button>
+        </Link>
+      </div>
+    );
+
+    setPageHeader(
+      order.number ? `${__('Order')} #${order.number}` : __('Order'),
+      actions
+    );
+
+    return () => clearPageHeader();
+  }, [order, isPrintMode, id, setPageHeader, clearPageHeader]);
+
   useEffect(() => {
     if (!isPrintMode || !qrRef.current || !order) return;
     (async () => {
diff --git a/admin-spa/src/routes/Orders/Edit.tsx b/admin-spa/src/routes/Orders/Edit.tsx
index a6971ac..329e20e 100644
--- a/admin-spa/src/routes/Orders/Edit.tsx
+++ b/admin-spa/src/routes/Orders/Edit.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import OrderForm from '@/routes/Orders/partials/OrderForm';
@@ -8,12 +8,14 @@ import { ErrorCard } from '@/components/ErrorCard';
 import { LoadingState } from '@/components/LoadingState';
 import { ArrowLeft } from 'lucide-react';
 import { __, sprintf } from '@/lib/i18n';
+import { usePageHeader } from '@/contexts/PageHeaderContext';
 
 export default function OrdersEdit() {
   const { id } = useParams();
   const orderId = Number(id);
   const nav = useNavigate();
   const qc = useQueryClient();
+  const { setPageHeader, clearPageHeader } = usePageHeader();
 
   const countriesQ = useQuery({ queryKey: ['countries'], queryFn: OrdersApi.countries });
   const paymentsQ  = useQuery({ queryKey: ['payments'], queryFn: OrdersApi.payments });
@@ -56,6 +58,16 @@ export default function OrdersEdit() {
 
   const order = orderQ.data || {};
 
+  // Set page header
+  useEffect(() => {
+    if (order.number) {
+      setPageHeader(sprintf(__('Edit Order #%s'), order.number));
+    } else {
+      setPageHeader(__('Edit Order'));
+    }
+    return () => clearPageHeader();
+  }, [order.number, setPageHeader, clearPageHeader]);
+
   return (
     <div className="space-y-4">
       <div className="flex flex-wrap items-center gap-2">
diff --git a/admin-spa/src/routes/Orders/New.tsx b/admin-spa/src/routes/Orders/New.tsx
index b55e7fb..894d8ce 100644
--- a/admin-spa/src/routes/Orders/New.tsx
+++ b/admin-spa/src/routes/Orders/New.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { OrdersApi } from '@/lib/api';
 import { useNavigate } from 'react-router-dom';
@@ -6,10 +6,13 @@ import OrderForm from '@/routes/Orders/partials/OrderForm';
 import { getStoreCurrency } from '@/lib/currency';
 import { showErrorToast, showSuccessToast } from '@/lib/errorHandling';
 import { __, sprintf } from '@/lib/i18n';
+import { usePageHeader } from '@/contexts/PageHeaderContext';
+import { Button } from '@/components/ui/button';
 
 export default function OrdersNew() {
   const nav = useNavigate();
   const qc = useQueryClient();
+  const { setPageHeader, clearPageHeader } = usePageHeader();
 
   // Countries from Woo (allowed + default + states)
   const countriesQ = useQuery({ queryKey: ['countries'], queryFn: OrdersApi.countries });
@@ -37,6 +40,12 @@ export default function OrdersNew() {
   // Prefer global store currency injected by PHP
   const { currency: storeCurrency, symbol: storeSymbol } = getStoreCurrency();
 
+  // Set page header
+  useEffect(() => {
+    setPageHeader(__('New Order'));
+    return () => clearPageHeader();
+  }, [setPageHeader, clearPageHeader]);
+
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
diff --git a/admin-spa/src/routes/Orders/components/FilterBottomSheet.tsx b/admin-spa/src/routes/Orders/components/FilterBottomSheet.tsx
index 711431d..7cdffe9 100644
--- a/admin-spa/src/routes/Orders/components/FilterBottomSheet.tsx
+++ b/admin-spa/src/routes/Orders/components/FilterBottomSheet.tsx
@@ -44,12 +44,12 @@ export function FilterBottomSheet({
     <>
       {/* Backdrop */}
       <div
-        className="fixed inset-0 bg-black/50 z-40 md:hidden"
+        className="fixed inset-0 bg-black/50 z-[60] md:hidden"
         onClick={onClose}
       />
 
       {/* Bottom Sheet */}
-      <div className="fixed inset-x-0 bottom-0 z-50 bg-background rounded-t-2xl shadow-2xl max-h-[85vh] overflow-y-auto md:hidden animate-in slide-in-from-bottom duration-300">
+      <div className="fixed inset-x-0 bottom-0 z-[70] bg-background rounded-t-2xl shadow-2xl max-h-[85vh] flex flex-col md:hidden animate-in slide-in-from-bottom duration-300">
         {/* Drag Handle */}
         <div className="flex justify-center pt-3 pb-2">
           <div className="w-12 h-1.5 bg-muted-foreground/30 rounded-full" />
@@ -67,7 +67,7 @@ export function FilterBottomSheet({
         </div>
 
         {/* Content */}
-        <div className="p-4 space-y-4">
+        <div className="flex-1 overflow-y-auto p-4 space-y-4 pb-24">
           {/* Status Filter */}
           <div className="space-y-2">
             <label className="text-sm font-medium">{__('Status')}</label>
diff --git a/admin-spa/src/routes/Orders/components/OrderCard.tsx b/admin-spa/src/routes/Orders/components/OrderCard.tsx
index 7dce108..76d4e03 100644
--- a/admin-spa/src/routes/Orders/components/OrderCard.tsx
+++ b/admin-spa/src/routes/Orders/components/OrderCard.tsx
@@ -29,9 +29,9 @@ export function OrderCard({ order, selected, onSelect, currencyConfig }: OrderCa
   return (
     <Link 
       to={`/orders/${order.id}`}
-      className="block bg-card border border-border rounded-lg p-4 hover:bg-accent/50 transition-colors active:scale-[0.98] active:transition-transform"
+      className="block bg-card border border-border rounded-xl p-4 hover:bg-accent/50 transition-colors active:scale-[0.98] active:transition-transform shadow-sm"
     >
-      <div className="flex items-start gap-3">
+      <div className="flex items-start gap-4">
         {/* Checkbox */}
         {onSelect && (
           <div 
@@ -40,48 +40,49 @@ export function OrderCard({ order, selected, onSelect, currencyConfig }: OrderCa
               e.stopPropagation();
               onSelect(order.id);
             }}
-            className="pt-1"
+            className="pt-0.5"
           >
             <Checkbox
               checked={selected}
               aria-label={__('Select order')}
+              className="w-5 h-5"
             />
           </div>
         )}
 
         {/* Icon */}
-        <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
-          <Package className="w-5 h-5" />
+        <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-primary/10 text-primary flex items-center justify-center">
+          <Package className="w-6 h-6" />
         </div>
 
         {/* Content */}
-        <div className="flex-1 min-w-0">
+        <div className="flex-1 min-w-0 space-y-2">
           {/* Order Number & Status */}
-          <div className="flex items-center justify-between gap-2 mb-1">
-            <h3 className="font-semibold text-base">#{order.number}</h3>
-            <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium capitalize ${statusClass}`}>
+          <div className="flex items-start justify-between gap-3">
+            <h3 className="font-bold text-lg leading-tight">#{order.number}</h3>
+            <span className={`inline-flex items-center px-2.5 py-1 rounded-md text-xs font-semibold capitalize whitespace-nowrap ${statusClass}`}>
               {order.status || 'unknown'}
             </span>
           </div>
 
           {/* Customer */}
-          <div className="text-sm text-muted-foreground mb-2">
+          <div className="text-sm font-medium text-foreground">
             {order.customer || __('Guest')}
           </div>
 
           {/* Items Brief */}
           {order.items_brief && (
-            <div className="text-sm text-muted-foreground mb-2 truncate">
+            <div className="text-sm text-muted-foreground truncate">
               {order.items_count} {order.items_count === 1 ? __('item') : __('items')} · {order.items_brief}
             </div>
           )}
 
           {/* Date & Total */}
-          <div className="flex items-center justify-between gap-2 mt-2">
+          <div className="flex items-center justify-between gap-3 pt-1">
             <span className="text-xs text-muted-foreground">
               {formatRelativeOrDate(order.date_ts)}
             </span>
-            <span className="font-semibold text-base tabular-nums">
+            <span className="font-bold text-lg tabular-nums text-primary">
               {formatMoney(order.total, {
                 currency: order.currency || currencyConfig.currency,
                 symbol: order.currency_symbol || currencyConfig.symbol,
@@ -95,7 +96,7 @@ export function OrderCard({ order, selected, onSelect, currencyConfig }: OrderCa
         </div>
 
         {/* Chevron */}
-        <ChevronRight className="w-5 h-5 text-muted-foreground flex-shrink-0 mt-2" />
+        <ChevronRight className="w-5 h-5 text-muted-foreground flex-shrink-0 self-center" />
       </div>
     </Link>
   );
diff --git a/admin-spa/src/routes/Orders/components/SearchBar.tsx b/admin-spa/src/routes/Orders/components/SearchBar.tsx
index 201bbda..1368070 100644
--- a/admin-spa/src/routes/Orders/components/SearchBar.tsx
+++ b/admin-spa/src/routes/Orders/components/SearchBar.tsx
@@ -16,7 +16,6 @@ export function SearchBar({ value, onChange, onFilterClick, filterCount = 0 }: S
       <div className="relative flex-1">
         <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
         <input
-          type="text"
           value={value}
           onChange={(e) => onChange(e.target.value)}
           placeholder={__('Search orders...')}