diff --git a/admin-spa/src/components/filters/DateRange.tsx b/admin-spa/src/components/filters/DateRange.tsx
index d6daf3e..50df1c5 100644
--- a/admin-spa/src/components/filters/DateRange.tsx
+++ b/admin-spa/src/components/filters/DateRange.tsx
@@ -47,12 +47,12 @@ export default function DateRange({ value, onChange }: Props) {
       setEnd(pr.date_end);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [preset]);
+  }, [preset, start, end]);
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex flex-col gap-2 w-full">
       <Select value={preset} onValueChange={(v) => setPreset(v)}>
-        <SelectTrigger className="min-w-[140px]">
+        <SelectTrigger className="w-full">
           <SelectValue placeholder={__("Last 7 days")} />
         </SelectTrigger>
         <SelectContent position="popper" className="z-[1000]">
@@ -66,26 +66,23 @@ export default function DateRange({ value, onChange }: Props) {
       </Select>
 
       {preset === "custom" && (
-        <div className="flex items-center gap-2">
+        <div className="flex flex-col gap-2 w-full">
           <input
             type="date"
-            className="border rounded-md px-3 py-2 text-sm"
+            className="w-full border border-input rounded-md px-3 py-2 text-sm bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-calendar-picker-indicator]:cursor-pointer"
+            style={{ WebkitAppearance: 'none', MozAppearance: 'textfield' } as any}
             value={start || ""}
             onChange={(e) => setStart(e.target.value || undefined)}
+            placeholder={__("Start date")}
           />
-          <span className="opacity-60 text-sm">{__("to")}</span>
           <input
             type="date"
-            className="border rounded-md px-3 py-2 text-sm"
+            className="w-full border border-input rounded-md px-3 py-2 text-sm bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-calendar-picker-indicator]:cursor-pointer"
+            style={{ WebkitAppearance: 'none', MozAppearance: 'textfield' } as any}
             value={end || ""}
             onChange={(e) => setEnd(e.target.value || undefined)}
+            placeholder={__("End date")}
           />
-          <button
-            className="border rounded-md px-3 py-2 text-sm"
-            onClick={() => onChange?.({ date_start: start, date_end: end, preset })}
-          >
-            {__("Apply")}
-          </button>
         </div>
       )}
     </div>
diff --git a/admin-spa/src/routes/Orders/components/FilterBottomSheet.tsx b/admin-spa/src/routes/Orders/components/FilterBottomSheet.tsx
index 7cdffe9..d3243f0 100644
--- a/admin-spa/src/routes/Orders/components/FilterBottomSheet.tsx
+++ b/admin-spa/src/routes/Orders/components/FilterBottomSheet.tsx
@@ -42,9 +42,9 @@ export function FilterBottomSheet({
 
   return (
     <>
-      {/* Backdrop */}
+      {/* Backdrop - use !m-0 to override parent spacing */}
       <div
-        className="fixed inset-0 bg-black/50 z-[60] md:hidden"
+        className="!m-0 fixed inset-0 bg-black/50 z-[60] md:hidden"
         onClick={onClose}
       />
 
@@ -67,7 +67,7 @@ export function FilterBottomSheet({
         </div>
 
         {/* Content */}
-        <div className="flex-1 overflow-y-auto p-4 space-y-4 pb-24">
+        <div className="flex-1 overflow-y-auto p-4 space-y-4">
           {/* Status Filter */}
           <div className="space-y-2">
             <label className="text-sm font-medium">{__('Status')}</label>
@@ -129,24 +129,21 @@ export function FilterBottomSheet({
           </div>
         </div>
 
-        {/* Footer */}
-        <div className="sticky bottom-0 bg-background border-t p-4 flex gap-3">
-          {hasActiveFilters && (
+        {/* Footer - Only show Reset if filters active */}
+        {hasActiveFilters && (
+          <div className="sticky bottom-0 bg-background border-t p-4">
             <Button
               variant="outline"
-              onClick={onReset}
-              className="flex-1"
+              onClick={() => {
+                onReset();
+                onClose();
+              }}
+              className="w-full"
             >
-              {__('Reset')}
+              {__('Clear all filters')}
             </Button>
-          )}
-          <Button
-            onClick={onClose}
-            className="flex-1"
-          >
-            {__('Apply')} {hasActiveFilters && `(${activeFiltersCount})`}
-          </Button>
-        </div>
+          </div>
+        )}
       </div>
     </>
   );
diff --git a/admin-spa/src/routes/Orders/components/OrderCard.tsx b/admin-spa/src/routes/Orders/components/OrderCard.tsx
index 76d4e03..fae8f6e 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-xl p-4 hover:bg-accent/50 transition-colors active:scale-[0.98] active:transition-transform shadow-sm"
+      className="block bg-card border border-border rounded-xl p-3 hover:bg-accent/50 transition-colors active:scale-[0.98] active:transition-transform shadow-sm"
     >
-      <div className="flex items-start gap-4">
+      <div className="flex items-center gap-3">
         {/* Checkbox */}
         {onSelect && (
           <div 
@@ -40,7 +40,6 @@ export function OrderCard({ order, selected, onSelect, currencyConfig }: OrderCa
               e.stopPropagation();
               onSelect(order.id);
             }}
-            className="pt-0.5"
           >
             <Checkbox
               checked={selected}
@@ -50,53 +49,55 @@ export function OrderCard({ order, selected, onSelect, currencyConfig }: OrderCa
           </div>
         )}
 
-        {/* Icon */}
-        <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>
+        <div className="flex flex-1 flex-col">
+            {/* Icon - inline with first 2 lines */}
+            <div className="flex items-center gap-2">
+                <div className={`flex-shrink-0 p-2 rounded-xl flex items-center justify-center ${statusClass}`}>
+                    {/* Line 2: Order Number (big) */}
+                    <span className="font-bold text-lg leading-tight">#{order.number}</span>
+                </div>
 
-        {/* Content */}
-        <div className="flex-1 min-w-0 space-y-2">
-          {/* Order Number & Status */}
-          <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 font-medium text-foreground">
-            {order.customer || __('Guest')}
-          </div>
-
-          {/* Items Brief */}
-          {order.items_brief && (
-            <div className="text-sm text-muted-foreground truncate">
-              {order.items_count} {order.items_count === 1 ? __('item') : __('items')} · {order.items_brief}
+                <div className="flex flex-col">
+                    {/* Line 1: Date (small) */}
+                    <div className="text-xs text-muted-foreground leading-tight mb-0.5">
+                        {formatRelativeOrDate(order.date_ts)}
+                    </div>
+                </div>
             </div>
-          )}
 
-          {/* Date & Total */}
-          <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-bold text-lg tabular-nums text-primary">
-              {formatMoney(order.total, {
-                currency: order.currency || currencyConfig.currency,
-                symbol: order.currency_symbol || currencyConfig.symbol,
-                thousandSep: currencyConfig.thousand_sep,
-                decimalSep: currencyConfig.decimal_sep,
-                position: currencyConfig.position,
-                decimals: currencyConfig.decimals,
-              })}
-            </span>
-          </div>
+            {/* Content - 2 lines inline with icon */}
+            <div className="flex-1 min-w-0">
+            {/* Line 3: Customer */}
+            <div className="text-lg font-medium text-foreground mb-1">
+                {order.customer || __('Guest')}
+            </div>
+
+            {/* Line 4: Items */}
+            {order.items_brief && (
+                <div className="text-sm text-muted-foreground truncate mb-2">
+                {order.items_count} {order.items_count === 1 ? __('item') : __('items')} · {order.items_brief}
+                </div>
+            )}
+
+            {/* Line 5: Total & Status */}
+            <div className="flex items-center justify-between gap-2">
+                <span className="font-bold text-base tabular-nums">
+                {formatMoney(order.total, {
+                    currency: order.currency || currencyConfig.currency,
+                    symbol: order.currency_symbol || currencyConfig.symbol,
+                    thousandSep: currencyConfig.thousand_sep,
+                    decimalSep: currencyConfig.decimal_sep,
+                    position: currencyConfig.position,
+                    decimals: currencyConfig.decimals,
+                })}
+                </span>
+            </div>
+            </div>
         </div>
 
+
         {/* Chevron */}
-        <ChevronRight className="w-5 h-5 text-muted-foreground flex-shrink-0 self-center" />
+        <ChevronRight className="w-5 h-5 text-muted-foreground flex-shrink-0" />
       </div>
     </Link>
   );