diff --git a/src/components/logistics/LogisticsReadinessBoard.jsx b/src/components/logistics/LogisticsReadinessBoard.jsx
index 081fe67..cb834c5 100644
--- a/src/components/logistics/LogisticsReadinessBoard.jsx
+++ b/src/components/logistics/LogisticsReadinessBoard.jsx
@@ -10,7 +10,7 @@ import { Badge } from "../UI/Badge";
 import { Panel } from "../UI/Panel";
 import { SkeletonPage } from "../UI/Loading";
 import { OrderFilters } from "../orders/OrderFilters";
-import { formatDateTime } from "../../utils/formatters";
+import { formatDate, formatDateTime } from "../../utils/formatters";
 
 export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusOptions = ORDER_GROUP_DISPLAY_STATUS_OPTIONS, isLoading = false }) => {
   const [filters, setFilters] = React.useState({ query: "", displayStatus: "all", city: "" });
@@ -60,17 +60,17 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusO
 
   const totalGroups = filteredGroups.length;
 
+  const COLS = "grid-cols-[minmax(140px,2fr)_minmax(80px,1fr)_minmax(100px,1.2fr)_minmax(80px,1fr)_minmax(100px,1fr)_minmax(120px,1fr)]";
+
   const TableHeader = () => (
-    <thead className="bg-[var(--color-surface-strong)] text-left text-xs uppercase tracking-[0.14em] text-[var(--color-text-muted)]">
-      <tr>
-        <th className="px-4 py-3 font-medium">Клиент</th>
-        <th className="px-4 py-3 font-medium hidden sm:table-cell">Город</th>
-        <th className="px-4 py-3 font-medium hidden md:table-cell">Дата доставки</th>
-        <th className="px-4 py-3 font-medium hidden lg:table-cell">Водитель</th>
-        <th className="px-4 py-3 font-medium">Статус</th>
-        <th className="px-4 py-3 font-medium hidden md:table-cell">Обновлён</th>
-      </tr>
-    </thead>
+    <div className={`grid ${COLS} gap-0 border-b border-[var(--color-border)] bg-[var(--color-surface-strong)] text-xs uppercase tracking-[0.14em] text-[var(--color-text-muted)]`}>
+      <div className="px-4 py-3 font-medium">Клиент</div>
+      <div className="px-4 py-3 font-medium">Город</div>
+      <div className="px-4 py-3 font-medium">Дата доставки</div>
+      <div className="px-4 py-3 font-medium">Водитель</div>
+      <div className="px-4 py-3 font-medium">Статус</div>
+      <div className="px-4 py-3 font-medium">Обновлён</div>
+    </div>
   );
 
   if (isLoading) {
@@ -146,42 +146,38 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], onSelectSet, statusO
 
                 {!isCollapsed && (
                   <div className="overflow-x-auto">
-                    <table className="min-w-full border-collapse border-t border-[var(--color-border)]">
-                      <TableHeader />
-                      <tbody>
-                        {groups.map((group) => (
-                          <tr
-                            key={group.id}
-                            className="cursor-pointer border-t border-[var(--color-border)] transition hover:bg-[var(--color-accent-soft)]"
-                            onClick={() => { if (onSelectSet) onSelectSet(group.id); }}
-                          >
-                            <td className="px-4 py-2.5">
-                              <div className="font-medium">{group.displayTitle || group.customerName || group.groupKey}</div>
-                              <div className="text-xs text-[var(--color-text-muted)] sm:hidden">{group.customerPhone || "—"}</div>
-                              <div className="text-xs text-[var(--color-text-muted)] md:hidden">{group.deliveryDate || "—"}</div>
-                            </td>
-                            <td className="px-4 py-2.5 text-sm hidden sm:table-cell">
-                              {group.city || group.customerAddress || "—"}
-                            </td>
-                            <td className="px-4 py-2.5 text-sm hidden md:table-cell">
-                              {group.deliveryDate
-                                ? <span>{group.deliveryDate}{group.deliveryTime ? <span className="text-[var(--color-text-muted)]"> · {group.deliveryTime}</span> : ""}</span>
-                                : <span className="text-[var(--color-text-muted)]">—</span>
-                              }
-                            </td>
-                            <td className="px-4 py-2.5 text-sm hidden lg:table-cell">
-                              {group.assignedDriverName || <span className="text-[var(--color-text-muted)]">—</span>}
-                            </td>
-                            <td className="px-4 py-2.5">
-                              <Badge tone={getOrderGroupStatusTone(group)}>{getOrderGroupDisplayStatusLabel(group)}</Badge>
-                            </td>
-                            <td className="px-4 py-2.5 text-sm text-[var(--color-text-muted)] hidden md:table-cell">
-                              {formatDateTime(group.updatedAt)}
-                            </td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </table>
+                    <TableHeader />
+                    {groups.map((group) => (
+                      <button
+                        key={group.id}
+                        type="button"
+                        className={`grid ${COLS} gap-0 w-full border-t border-[var(--color-border)] text-left transition hover:bg-[var(--color-accent-soft)]`}
+                        onClick={() => { if (onSelectSet) onSelectSet(group.id); }}
+                      >
+                        <div className="px-4 py-2.5">
+                          <div className="font-medium">{group.displayTitle || group.customerName || group.groupKey}</div>
+                          <div className="text-xs text-[var(--color-text-muted)]">{group.customerPhone || "—"}</div>
+                        </div>
+                        <div className="px-4 py-2.5 text-sm">
+                          {group.city || group.customerAddress || "—"}
+                        </div>
+                        <div className="px-4 py-2.5 text-sm">
+                          {group.deliveryDate
+                            ? <span>{formatDate(group.deliveryDate)}{group.deliveryTime ? <span className="text-[var(--color-text-muted)]"> · {group.deliveryTime}</span> : ""}</span>
+                            : <span className="text-[var(--color-text-muted)]">—</span>
+                          }
+                        </div>
+                        <div className="px-4 py-2.5 text-sm">
+                          {group.assignedDriverName || <span className="text-[var(--color-text-muted)]">—</span>}
+                        </div>
+                        <div className="px-4 py-2.5">
+                          <Badge tone={getOrderGroupStatusTone(group)}>{getOrderGroupDisplayStatusLabel(group)}</Badge>
+                        </div>
+                        <div className="px-4 py-2.5 text-sm text-[var(--color-text-muted)]">
+                          {formatDateTime(group.updatedAt)}
+                        </div>
+                      </button>
+                    ))}
                   </div>
                 )}
               </Panel>
diff --git a/src/components/orders/OrdersTable.jsx b/src/components/orders/OrdersTable.jsx
index 7551d00..7b6436e 100644
--- a/src/components/orders/OrdersTable.jsx
+++ b/src/components/orders/OrdersTable.jsx
@@ -141,57 +141,51 @@ export const OrdersTable = ({
             Группы не найдены. Попробуйте изменить поиск или статус.
           </div>
         ) : (
-          <table className="min-w-full border-collapse">
-          <thead className="bg-[var(--color-surface-strong)] text-left text-xs uppercase tracking-[0.16em] text-[var(--color-text-muted)]">
-            <tr>
-              <th className="px-5 py-4 font-medium">Группа / Клиент</th>
-              <th className="px-5 py-4 font-medium">Счёта</th>
-              <th className="px-5 py-4 font-medium">Статус</th>
-              <th className="px-5 py-4 font-medium">Водитель</th>
-              <th className="px-5 py-4 font-medium">Дата доставки</th>
-              <th className="px-5 py-4 font-medium">Обновлён</th>
-            </tr>
-          </thead>
-          <tbody>
+          <div>
+            <div className="grid grid-cols-[minmax(180px,2.5fr)_minmax(100px,1.2fr)_minmax(100px,1fr)_minmax(80px,1fr)_minmax(120px,1.2fr)_minmax(130px,1.2fr)] gap-0 border-b border-[var(--color-border)] bg-[var(--color-surface-strong)] text-xs uppercase tracking-[0.16em] text-[var(--color-text-muted)]">
+              <div className="px-5 py-4 font-medium">Группа / Клиент</div>
+              <div className="px-5 py-4 font-medium">Счёта</div>
+              <div className="px-5 py-4 font-medium">Статус</div>
+              <div className="px-5 py-4 font-medium">Водитель</div>
+              <div className="px-5 py-4 font-medium">Дата доставки</div>
+              <div className="px-5 py-4 font-medium">Обновлён</div>
+            </div>
             {orderGroups.map((group) => (
-              <tr
+              <button
                 key={group.id}
-                className={[
-                  "cursor-pointer border-t border-[var(--color-border)] transition hover:bg-[var(--color-accent-soft)]",
-                  selectedOrderGroupId === group.id ? "bg-[var(--color-accent-soft)]" : "",
-                ].join(" ")}
+                type="button"
+                className={`grid grid-cols-[minmax(180px,2.5fr)_minmax(100px,1.2fr)_minmax(100px,1fr)_minmax(80px,1fr)_minmax(120px,1.2fr)_minmax(130px,1.2fr)] gap-0 w-full border-t border-[var(--color-border)] text-left transition hover:bg-[var(--color-accent-soft)] ${selectedOrderGroupId === group.id ? "bg-[var(--color-accent-soft)]" : ""}`}
                 onClick={() => onOpenOrder(group.id)}
               >
-                <td className="px-5 py-4">
+                <div className="px-5 py-4">
                   <div className="font-medium">{group.displayTitle || group.customerName || group.groupKey}</div>
                   <div className="mt-1 text-sm text-[var(--color-text-muted)]">
                     {[group.customerName, group.customerPhone].filter(Boolean).join(" · ")}
                   </div>
                   <div className="text-xs text-[var(--color-text-muted)]">{group.groupKey}</div>
-                </td>
-                <td className="max-w-[260px] px-5 py-4 text-sm text-[var(--color-text-muted)]">
+                </div>
+                <div className="max-w-[260px] px-5 py-4 text-sm text-[var(--color-text-muted)]">
                   {renderOrderNumbers(group)}
-                </td>
-                <td className="px-5 py-4 text-center">
+                </div>
+                <div className="px-5 py-4">
                   <Badge tone={getOrderGroupStatusTone(group)}>{getOrderGroupDisplayStatusLabel(group)}</Badge>
-                </td>
-                <td className="px-5 py-4 text-sm">
+                </div>
+                <div className="px-5 py-4 text-sm">
                   {group.assignedDriverName || <span className="text-[var(--color-text-muted)]">—</span>}
-                </td>
-                <td className="px-5 py-4 text-sm">
+                </div>
+                <div className="px-5 py-4 text-sm">
                   {group.deliveryDate ? (
                     <span>{fmtDate(group.deliveryDate)}{group.deliveryTime ? <span className="text-[var(--color-text-muted)]"> · {group.deliveryTime}</span> : ""}</span>
                   ) : (
                     <span className="text-[var(--color-text-muted)]">—</span>
                   )}
-                </td>
-                <td className="px-5 py-4 text-sm text-[var(--color-text-muted)]">
+                </div>
+                <div className="px-5 py-4 text-sm text-[var(--color-text-muted)]">
                   {formatDateTime(group.updatedAt)}
-                </td>
-              </tr>
+                </div>
+              </button>
             ))}
-          </tbody>
-          </table>
+          </div>
         )}
       </div>
     </Panel>