diff --git a/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseDashboardPage.tsx b/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseDashboardPage.tsx
index c63852caa..9c1b18578 100644
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseDashboardPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseDashboardPage.tsx
@@ -1,9 +1,10 @@
 import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Badge, Card, Center, Divider, Group, Loader, Select, SimpleGrid, Stack, Text, ThemeIcon } from '@mantine/core';
+import { Button, Card, Center, Group, Loader, Popover, Select, SimpleGrid, Stack, Text, ThemeIcon } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
 import {
   ClipboardList,
+  Filter,
   PackageCheck,
   PackageOpen,
   PackagePlus,
@@ -17,7 +18,6 @@ import {
 } from 'lucide-react';
 
 import { PageContainer, PageHeader } from '@/components/page';
-import { getDateRangePresets } from '@/components/common/dateRangePresets';
 import {
   AccrualDashboard,
   CycleTimeCard,
@@ -44,44 +44,42 @@ interface Metric {
   icon: React.ReactNode;
   /** Route to navigate to when the card is clicked. */
   to: string;
-  theme: string;
 }
 
-const ORANGE = 'rgb(241, 147, 23)';
-const GREEN = '#084b21';
-
 const METRICS: Metric[] = [
-  { key: 'totalWarehouses', label: 'Total Warehouses', icon: <WarehouseIcon size={22} />, to: '/dashboard/warehouses', theme: ORANGE },
-  { key: 'totalInventory', label: 'Total Inventory', icon: <Boxes size={22} />, to: '/dashboard/warehouse-inventory', theme: GREEN },
-  { key: 'received', label: 'Received Today', icon: <PackagePlus size={22} />, to: '/dashboard/warehouse-inventory?status=RECEIVED', theme: ORANGE },
-  { key: 'awaitingInspection', label: 'Awaiting Inspection', icon: <ClipboardList size={22} />, to: '/dashboard/warehouse-inventory?status=RECEIVED', theme: GREEN },
-  { key: 'emptyContainers', label: 'Empty Containers', icon: <PackageOpen size={22} />, to: '/dashboard/containers', theme: ORANGE },
-  { key: 'importTrains', label: 'Import Trains', icon: <Train size={22} />, to: '/dashboard/import-warehouse', theme: GREEN },
-  { key: 'exportTrains', label: 'Export Trains', icon: <Train size={22} />, to: '/dashboard/export-warehouse', theme: ORANGE },
-  { key: 'loaded', label: 'Loaded', icon: <Truck size={22} />, to: '/dashboard/loaded-inventory', theme: GREEN },
-  { key: 'dispatched', label: 'Dispatched', icon: <Send size={22} />, to: '/dashboard/dispatch-queue', theme: ORANGE },
-  { key: 'readyForPickup', label: 'Ready For Pickup', icon: <PackageSearch size={22} />, to: '/dashboard/warehouse-inventory?status=READY_FOR_PICKUP', theme: GREEN },
-  { key: 'readyForLoading', label: 'Ready For Loading', icon: <PackageCheck size={22} />, to: '/dashboard/loading-queue', theme: ORANGE },
-  { key: 'delivered', label: 'Delivered', icon: <CircleCheck size={22} />, to: '/dashboard/warehouse-inventory?status=DELIVERED', theme: GREEN },
+  { key: 'totalWarehouses', label: 'Total Warehouses', icon: <WarehouseIcon size={18} />, to: '/dashboard/warehouses' },
+  { key: 'totalInventory', label: 'Total Inventory', icon: <Boxes size={18} />, to: '/dashboard/warehouse-inventory' },
+  { key: 'received', label: 'Received Today', icon: <PackagePlus size={18} />, to: '/dashboard/warehouse-inventory?status=RECEIVED' },
+  { key: 'awaitingInspection', label: 'Awaiting Inspection', icon: <ClipboardList size={18} />, to: '/dashboard/warehouse-inventory?status=RECEIVED' },
+  { key: 'emptyContainers', label: 'Empty Containers', icon: <PackageOpen size={18} />, to: '/dashboard/containers' },
+  { key: 'importTrains', label: 'Import Trains', icon: <Train size={18} />, to: '/dashboard/import-warehouse' },
+  { key: 'exportTrains', label: 'Export Trains', icon: <Train size={18} />, to: '/dashboard/export-warehouse' },
+  { key: 'loaded', label: 'Loaded', icon: <Truck size={18} />, to: '/dashboard/loaded-inventory' },
+  { key: 'dispatched', label: 'Dispatched', icon: <Send size={18} />, to: '/dashboard/dispatch-queue' },
+  { key: 'readyForPickup', label: 'Ready For Pickup', icon: <PackageSearch size={18} />, to: '/dashboard/warehouse-inventory?status=READY_FOR_PICKUP' },
+  { key: 'readyForLoading', label: 'Ready For Loading', icon: <PackageCheck size={18} />, to: '/dashboard/loading-queue' },
+  { key: 'delivered', label: 'Delivered', icon: <CircleCheck size={18} />, to: '/dashboard/warehouse-inventory?status=DELIVERED' },
 ];
 
 export default function WarehouseDashboardPage() {
   const navigate = useNavigate();
-  // Both null → the API defaults `received` to "today", matching the page's original behaviour.
-  const [dateRange, setDateRange] = useState<[string | null, string | null]>([null, null]);
+  // null → the API defaults `received` to "today", matching the page's original behaviour.
+  const [receivedDate, setReceivedDate] = useState<string | null>(null);
   const [warehouseId, setWarehouseId] = useState<string | null>(null);
-  const [dateFrom, dateTo] = dateRange;
-  const hasCustomRange = Boolean(dateFrom || dateTo);
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const hasCustomDate = Boolean(receivedDate);
 
   const warehousesQuery = useWarehouses();
   const warehouseOptions = useMemo(
     () => (warehousesQuery.data ?? []).map((w) => ({ value: w.id, label: `${w.name} (${w.code})` })),
     [warehousesQuery.data],
   );
+  const activeFilterCount = (warehouseId ? 1 : 0) + (hasCustomDate ? 1 : 0);
 
   const { data, isError, isLoading } = useWarehouseDashboard({
-    dateFrom: dateFrom ?? undefined,
-    dateTo: dateTo ?? undefined,
+    // Same date both ends → the one day the picker selected, inclusive.
+    dateFrom: receivedDate ?? undefined,
+    dateTo: receivedDate ?? undefined,
     warehouseId: warehouseId ?? undefined,
   });
 
@@ -89,57 +87,64 @@ export default function WarehouseDashboardPage() {
     <PageContainer>
       <PageHeader
         title="Warehouse Dashboard"
-        subtitle="Live overview of warehouse capacity and inventory lifecycle."
+        subtitle="Freight import/export logistics operations overview"
         action={
           <Group gap="sm" wrap="wrap" justify="flex-end">
-            <Select
-              placeholder="All warehouses"
-              clearable
-              searchable
-              data={warehouseOptions}
-              value={warehouseId}
-              onChange={setWarehouseId}
-              w={220}
-            />
             <DatePickerInput
-              type="range"
               placeholder="Received: today"
-              value={dateRange}
-              onChange={setDateRange}
-              presets={getDateRangePresets()}
+              value={receivedDate}
+              onChange={setReceivedDate}
               clearable
-              w={230}
+              w={180}
             />
-            <Badge
-              color="edr-green"
-              variant="light"
-              size="lg"
-              leftSection={
-                <span
-                  style={{
-                    display: 'inline-block',
-                    width: 8,
-                    height: 8,
-                    borderRadius: '50%',
-                    background: 'var(--mantine-color-edr-green-6)',
-                  }}
-                />
-              }
-            >
-              Live · updates every 60s
-            </Badge>
+            <Popover opened={filtersOpen} onChange={setFiltersOpen} position="bottom-end" withArrow shadow="md">
+              <Popover.Target>
+                <Button
+                  variant="default"
+                  leftSection={<Filter size={16} />}
+                  rightSection={activeFilterCount > 0 ? <Text size="xs" fw={700} c="edr-green">{activeFilterCount}</Text> : null}
+                  onClick={() => setFiltersOpen((o) => !o)}
+                >
+                  Filters
+                </Button>
+              </Popover.Target>
+              <Popover.Dropdown>
+                <Stack gap="sm" w={240}>
+                  <Select
+                    label="Warehouse"
+                    placeholder="All warehouses"
+                    clearable
+                    searchable
+                    data={warehouseOptions}
+                    value={warehouseId}
+                    onChange={setWarehouseId}
+                  />
+                  {activeFilterCount > 0 && (
+                    <Button
+                      variant="subtle"
+                      color="gray"
+                      size="xs"
+                      onClick={() => {
+                        setWarehouseId(null);
+                        setReceivedDate(null);
+                      }}
+                    >
+                      Clear filters
+                    </Button>
+                  )}
+                </Stack>
+              </Popover.Dropdown>
+            </Popover>
           </Group>
         }
       />
 
-      {(warehouseId || hasCustomRange) && (
+      {(warehouseId || hasCustomDate) && (
         <Text size="xs" c="dimmed" mt={-8}>
           Scoped to{' '}
           {warehouseId ? warehouseOptions.find((o) => o.value === warehouseId)?.label ?? 'selected warehouse' : 'all warehouses'}
-          {hasCustomRange
-            ? ` · Received counts ${dateFrom ?? '…'} to ${dateTo ?? '…'}`
-            : ' · Received counts: today'}
-          . Status-backlog and fleet counters are always current regardless of the date range.
+          {hasCustomDate ? ` · Received counts for ${receivedDate}` : ' · Received counts: today'}
+          . Status-backlog and fleet counters are always current regardless of the date filter.
         </Text>
       )}
 
@@ -152,41 +157,33 @@ export default function WarehouseDashboardPage() {
           <Text c="red">Failed to load warehouse dashboard.</Text>
         </Center>
       ) : (
-        <Stack gap="xl">
+        <Stack gap="lg">
           {/* Needs attention — live ops counters (received today, pending
               inspection, trucks on-site, items aging > 7 days). */}
-          <Stack gap="sm">
-            <SectionTitle>Needs attention</SectionTitle>
-            <WarehouseOpsKpiStrip />
-          </Stack>
-
-          <Divider />
+          <WarehouseOpsKpiStrip />
 
           <SimpleGrid cols={{ base: 1, xs: 2, md: 4 }} spacing="md">
             {METRICS.map((metric) => (
               <Card
                 key={metric.key}
-                padding="lg"
+                padding="md"
+                withBorder
+                radius="md"
                 onClick={() => navigate(metric.to)}
                 className="cursor-pointer transition-[transform,border-color] duration-150 hover:-translate-y-0.5 hover:border-edr-primary!"
               >
-                <Group justify="space-between" align="flex-start" wrap="nowrap">
-                  <div>
-                    <Text size="xs" c="edr-muted" tt="uppercase" fw={700} style={{ letterSpacing: 0.4 }}>
-                      {metric.key === 'received' && hasCustomRange ? 'Received' : metric.label}
-                    </Text>
-                    <Text fw={800} fz={32} mt={8} c="edr-text" lh={1.1}>
-                      {data ? data[metric.key] : 0}
-                    </Text>
-                  </div>
-                  <ThemeIcon
-                    variant="light"
-                    size={46}
-                    radius="md"
-                    style={{ backgroundColor: `${metric.theme}1a`, color: metric.theme }}
-                  >
+                <Group gap="sm" wrap="nowrap">
+                  <ThemeIcon color="edr-green" variant="light" size={40} radius="md">
                     {metric.icon}
                   </ThemeIcon>
+                  <Stack gap={0} style={{ minWidth: 0 }}>
+                    <Text size="xs" c="edr-muted" fw={600}>
+                      {metric.key === 'received' && hasCustomDate ? 'Received' : metric.label}
+                    </Text>
+                    <Text fw={700} fz={20} c="edr-text" lh={1.2}>
+                      {data ? data[metric.key] : 0}
+                    </Text>
+                  </Stack>
                 </Group>
               </Card>
             ))}