diff --git a/src/admin/pages/Offers.tsx b/src/admin/pages/Offers.tsx
index 1bddcce..5a363b4 100644
--- a/src/admin/pages/Offers.tsx
+++ b/src/admin/pages/Offers.tsx
@@ -1,22 +1,42 @@
 import { useState, useEffect, useRef } from "react";
+import { Link as RouterLink, useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import CircularProgress from "@mui/material/CircularProgress";
 import { useAlert } from "../context/AlertContext";
 import { useAuth } from "../context/AuthContext";
-import { Link, useNavigate } from "react-router-dom";
-import { motion, AnimatePresence } from "framer-motion";
-import ConfirmModal from "../components/ConfirmModal";
-import FormModal from "../components/FormModal";
 import Forbidden from "../components/Forbidden";
 
 import apiFetch from "../utils/api";
 import { formatCurrency, formatDate, czechPlural } from "../utils/formatters";
-import SortIcon from "../components/SortIcon";
 import useTableSort from "../hooks/useTableSort";
+import useDebounce from "../hooks/useDebounce";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { usePaginatedQuery } from "../hooks/usePaginatedQuery";
 import { offerListOptions, offerCustomersOptions } from "../lib/queries/offers";
-import Pagination from "../components/Pagination";
-import FormField from "../components/FormField";
 import { useApiMutation } from "../lib/queries/mutations";
+import {
+  Button,
+  Card,
+  DataTable,
+  Pagination,
+  Modal,
+  ConfirmDialog,
+  Field,
+  TextField,
+  Select,
+  StatusChip,
+  FileUpload,
+  Alert,
+  EmptyState,
+  FilterBar,
+  Tabs,
+  PageHeader,
+  type DataColumn,
+  type TabDef,
+} from "../ui";
 
 const API_BASE = "/api/admin";
 const DRAFT_KEY = "boha_offer_draft";
@@ -54,14 +74,160 @@ interface Draft {
   savedAt?: string;
 }
 
+const TemplatesIcon = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <rect x="3" y="3" width="18" height="18" rx="2" />
+    <path d="M3 9h18M9 21V9" />
+  </svg>
+);
+const PlusIcon = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <line x1="12" y1="5" x2="12" y2="19" />
+    <line x1="5" y1="12" x2="19" y2="12" />
+  </svg>
+);
+const ViewIcon = (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+    <circle cx="12" cy="12" r="3" />
+  </svg>
+);
+const EditIcon = (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+  </svg>
+);
+const DuplicateIcon = (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+  </svg>
+);
+const OrderViewIcon = (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <polyline points="14 2 14 8 20 8" />
+    <text
+      x="12"
+      y="16.5"
+      textAnchor="middle"
+      fill="currentColor"
+      stroke="none"
+      fontSize="9"
+      fontWeight="700"
+    >
+      O
+    </text>
+  </svg>
+);
+const OrderCreateIcon = (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <polyline points="14 2 14 8 20 8" />
+    <line x1="12" y1="11" x2="12" y2="17" />
+    <line x1="9" y1="14" x2="15" y2="14" />
+  </svg>
+);
+const InvalidateIcon = (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <circle cx="12" cy="12" r="10" />
+    <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
+  </svg>
+);
+const PdfIcon = (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <polyline points="14 2 14 8 20 8" />
+    <line x1="16" y1="13" x2="8" y2="13" />
+    <line x1="16" y1="17" x2="8" y2="17" />
+  </svg>
+);
+const DeleteIcon = (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <polyline points="3 6 5 6 21 6" />
+    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+  </svg>
+);
+
 export default function Offers() {
   const alert = useAlert();
   const { hasPermission } = useAuth();
   const navigate = useNavigate();
 
-  const { sort, order, handleSort, activeSort } =
-    useTableSort("quotation_number");
+  const { sort, order, handleSort } = useTableSort("quotation_number");
   const [search, setSearch] = useState("");
+  const debouncedSearch = useDebounce(search, 300);
   const [page, setPage] = useState(1);
   const [statusFilter, setStatusFilter] = useState("");
   const [customerFilter, setCustomerFilter] = useState<number | "">("");
@@ -117,7 +283,7 @@ export default function Offers() {
     isFetching,
   } = usePaginatedQuery<Quotation>(
     offerListOptions({
-      search,
+      search: debouncedSearch,
       sort,
       order,
       page,
@@ -173,17 +339,6 @@ export default function Offers() {
     setDraft(null);
   };
 
-  const getRowClass = (
-    invalidated: boolean,
-    expired: boolean,
-    completed: boolean,
-  ) => {
-    if (invalidated) return "offers-invalidated-row";
-    if (completed) return "offers-completed-row";
-    if (expired) return "offers-expired-row";
-    return "";
-  };
-
   if (!hasPermission("offers.view")) return <Forbidden />;
 
   const handleDuplicate = async (quotation: Quotation) => {
@@ -302,63 +457,272 @@ export default function Offers() {
     );
   }
 
+  const total = pagination?.total ?? quotations.length;
+  const subtitle = `${total} ${czechPlural(
+    total,
+    "nabídka",
+    "nabídky",
+    "nabídek",
+  )}`;
+
+  const tabs: TabDef[] = STATUS_FILTERS.map((f) => ({
+    value: f.value,
+    label: f.label,
+  }));
+
+  const columns: DataColumn<Quotation>[] = [
+    {
+      key: "quotation_number",
+      header: "Číslo",
+      width: "13%",
+      sortKey: "quotation_number",
+      render: (q) => (
+        <Box
+          component={RouterLink}
+          to={`/offers/${q.id}`}
+          sx={{
+            color: "primary.main",
+            textDecoration: "none",
+            "&:hover": { textDecoration: "underline" },
+          }}
+        >
+          {q.quotation_number}
+        </Box>
+      ),
+    },
+    {
+      key: "project_code",
+      header: "Projekt",
+      width: "13%",
+      sortKey: "project_code",
+      render: (q) => q.project_code || "—",
+    },
+    {
+      key: "customer_name",
+      header: "Zákazník",
+      width: "18%",
+      render: (q) => q.customer_name || "—",
+    },
+    {
+      key: "created_at",
+      header: "Datum",
+      width: "11%",
+      sortKey: "created_at",
+      mono: true,
+      render: (q) => formatDate(q.created_at),
+    },
+    {
+      key: "valid_until",
+      header: "Platnost",
+      width: "11%",
+      sortKey: "valid_until",
+      mono: true,
+      render: (q) => formatDate(q.valid_until),
+    },
+    {
+      key: "currency",
+      header: "Měna",
+      width: "8%",
+      sortKey: "currency",
+      render: (q) => <StatusChip label={q.currency} color="default" />,
+    },
+    {
+      key: "total",
+      header: "Celkem",
+      width: "12%",
+      align: "right",
+      mono: true,
+      bold: true,
+      render: (q) => formatCurrency(q.total, q.currency),
+    },
+    {
+      key: "actions",
+      header: "Akce",
+      width: "16%",
+      align: "right",
+      render: (q) => {
+        const isInvalidated = q.status === "invalidated";
+        const isCompleted = !isInvalidated && q.order_status === "dokoncena";
+        const readOnly = isInvalidated || isCompleted;
+        return (
+          <Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
+            <IconButton
+              size="small"
+              onClick={() => navigate(`/offers/${q.id}`)}
+              aria-label={readOnly ? "Zobrazit" : "Upravit"}
+              title={readOnly ? "Zobrazit" : "Upravit"}
+            >
+              {readOnly ? ViewIcon : EditIcon}
+            </IconButton>
+            {!readOnly && hasPermission("offers.create") && (
+              <IconButton
+                size="small"
+                onClick={() => handleDuplicate(q)}
+                aria-label="Duplikovat"
+                title="Duplikovat"
+                disabled={duplicating === q.id}
+              >
+                {duplicating === q.id ? (
+                  <CircularProgress size={16} />
+                ) : (
+                  DuplicateIcon
+                )}
+              </IconButton>
+            )}
+            {!readOnly && q.order_id ? (
+              <IconButton
+                size="small"
+                color="primary"
+                onClick={() => navigate(`/orders/${q.order_id}`)}
+                aria-label="Zobrazit objednávku"
+                title="Zobrazit objednávku"
+              >
+                {OrderViewIcon}
+              </IconButton>
+            ) : (
+              !readOnly &&
+              hasPermission("orders.create") && (
+                <IconButton
+                  size="small"
+                  onClick={() => {
+                    setCustomerOrderNumber("");
+                    setOrderAttachment(null);
+                    setOrderModal({ show: true, quotation: q });
+                  }}
+                  aria-label="Vytvořit objednávku"
+                  title="Vytvořit objednávku"
+                  disabled={creatingOrder === q.id}
+                >
+                  {creatingOrder === q.id ? (
+                    <CircularProgress size={16} />
+                  ) : (
+                    OrderCreateIcon
+                  )}
+                </IconButton>
+              )
+            )}
+            {!isInvalidated &&
+              !isCompleted &&
+              !q.order_id &&
+              hasPermission("offers.edit") && (
+                <IconButton
+                  size="small"
+                  onClick={() =>
+                    setInvalidateConfirm({ show: true, quotation: q })
+                  }
+                  aria-label="Zneplatnit"
+                  title="Zneplatnit"
+                >
+                  {InvalidateIcon}
+                </IconButton>
+              )}
+            {hasPermission("offers.export") && (
+              <IconButton
+                size="small"
+                onClick={() => handlePdf(q)}
+                aria-label="Zobrazit nabídku"
+                title="Zobrazit nabídku"
+                disabled={pdfLoading === q.id}
+              >
+                {pdfLoading === q.id ? <CircularProgress size={16} /> : PdfIcon}
+              </IconButton>
+            )}
+            {hasPermission("offers.delete") && (
+              <IconButton
+                size="small"
+                color="error"
+                onClick={() => setDeleteConfirm({ show: true, quotation: q })}
+                aria-label="Smazat"
+                title="Smazat"
+              >
+                {DeleteIcon}
+              </IconButton>
+            )}
+          </Box>
+        );
+      },
+    },
+  ];
+
+  // Per-status row tints (replaces offers-invalidated-row / offers-completed-row
+  // / offers-expired-row). Subtle, theme-token based so they stay dark/light-safe.
+  const rowSx = (q: Quotation) => {
+    const isInvalidated = q.status === "invalidated";
+    const isCompleted = !isInvalidated && q.order_status === "dokoncena";
+    const isExpired =
+      !isInvalidated &&
+      !isCompleted &&
+      !q.order_id &&
+      q.valid_until &&
+      new Date(q.valid_until) < new Date(new Date().toDateString());
+    if (isInvalidated) {
+      return {
+        bgcolor: "error.light",
+        opacity: 0.9,
+        "&:hover": {
+          bgcolor: "error.light",
+          filter: "brightness(0.97)",
+        },
+      };
+    }
+    if (isCompleted) {
+      return {
+        bgcolor: "success.light",
+        opacity: 0.85,
+        "&:hover": {
+          bgcolor: "success.light",
+          filter: "brightness(0.97)",
+        },
+      };
+    }
+    if (isExpired) {
+      return {
+        bgcolor: "warning.light",
+        opacity: 0.85,
+        "&:hover": {
+          bgcolor: "warning.light",
+          filter: "brightness(0.97)",
+        },
+      };
+    }
+    return {};
+  };
+
   return (
-    <div>
+    <Box>
       <motion.div
-        className="admin-page-header"
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25 }}
       >
-        <div>
-          <h1 className="admin-page-title">Nabídky</h1>
-          <p className="admin-page-subtitle">
-            {pagination?.total ?? quotations.length}{" "}
-            {czechPlural(
-              pagination?.total ?? quotations.length,
-              "nabídka",
-              "nabídky",
-              "nabídek",
-            )}
-          </p>
-        </div>
-        <div className="admin-page-actions">
-          {hasPermission("settings.templates") && (
-            <Link
-              to="/offers/templates"
-              className="admin-btn admin-btn-secondary"
-            >
-              <svg
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-              >
-                <rect x="3" y="3" width="18" height="18" rx="2" />
-                <path d="M3 9h18M9 21V9" />
-              </svg>
-              Šablony
-            </Link>
-          )}
-          {hasPermission("offers.create") && (
-            <Link to="/offers/new" className="admin-btn admin-btn-primary">
-              <svg
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-              >
-                <line x1="12" y1="5" x2="12" y2="19" />
-                <line x1="5" y1="12" x2="19" y2="12" />
-              </svg>
-              Nová nabídka
-            </Link>
-          )}
-        </div>
+        <PageHeader
+          title="Nabídky"
+          subtitle={subtitle}
+          actions={
+            <>
+              {hasPermission("settings.templates") && (
+                <Button
+                  component={RouterLink}
+                  to="/offers/templates"
+                  variant="outlined"
+                  color="inherit"
+                  startIcon={TemplatesIcon}
+                >
+                  Šablony
+                </Button>
+              )}
+              {hasPermission("offers.create") && (
+                <Button
+                  component={RouterLink}
+                  to="/offers/new"
+                  startIcon={PlusIcon}
+                >
+                  Nová nabídka
+                </Button>
+              )}
+            </>
+          }
+        />
       </motion.div>
 
       <motion.div
@@ -366,677 +730,214 @@ export default function Offers() {
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25, delay: 0.1 }}
       >
-        <div className="admin-tabs mb-6">
-          {STATUS_FILTERS.map((f) => (
-            <button
-              key={f.value}
-              className={`admin-tab ${statusFilter === f.value ? "active" : ""}`}
-              onClick={() => {
-                setStatusFilter(f.value);
-                setPage(1);
-              }}
-            >
-              {f.label}
-            </button>
-          ))}
-        </div>
+        <Box sx={{ mb: 2.5 }}>
+          <Tabs
+            value={statusFilter}
+            onChange={(v) => {
+              setStatusFilter(v);
+              setPage(1);
+            }}
+            tabs={tabs}
+          />
+        </Box>
       </motion.div>
 
+      <FilterBar>
+        <Box sx={{ flex: "1 1 320px" }}>
+          <TextField
+            value={search}
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setPage(1);
+            }}
+            placeholder="Hledat podle čísla, projektu nebo zákazníka..."
+            fullWidth
+          />
+        </Box>
+        <Box sx={{ flex: "0 1 240px" }}>
+          <Field label="Zákazník">
+            <Select
+              value={customerFilter === "" ? "" : String(customerFilter)}
+              onChange={(value) => {
+                setCustomerFilter(value ? Number(value) : "");
+                setPage(1);
+              }}
+              options={[
+                { value: "", label: "Všichni" },
+                ...(customers ?? []).map((c) => ({
+                  value: String(c.id),
+                  label: c.name,
+                })),
+              ]}
+            />
+          </Field>
+        </Box>
+      </FilterBar>
+
+      {draft && !debouncedSearch && (
+        <Box sx={{ mb: 2 }}>
+          <Alert severity="info" onClose={discardDraft}>
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                flexWrap: "wrap",
+                gap: 1.5,
+              }}
+            >
+              <Box>
+                <Typography component="span" sx={{ fontWeight: 600 }}>
+                  Rozpracovaný koncept
+                </Typography>
+                {draft.savedAt && (
+                  <Typography
+                    component="span"
+                    sx={{ ml: 1, opacity: 0.8, fontSize: "0.875rem" }}
+                  >
+                    ·{" "}
+                    {new Date(draft.savedAt).toLocaleTimeString("cs-CZ", {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}
+                  </Typography>
+                )}
+                <Typography
+                  variant="body2"
+                  sx={{ color: "text.secondary", mt: 0.25 }}
+                >
+                  {draft.form.project_code || "—"} ·{" "}
+                  {draft.form.customer_name || "—"} ·{" "}
+                  {draft.form.created_at
+                    ? formatDate(draft.form.created_at)
+                    : "—"}
+                  {" — "}
+                  {draft.form.valid_until
+                    ? formatDate(draft.form.valid_until)
+                    : "—"}
+                  {draft.form.currency ? ` · ${draft.form.currency}` : ""}
+                </Typography>
+              </Box>
+              <Box sx={{ display: "flex", gap: 1, flexShrink: 0 }}>
+                <Button
+                  component={RouterLink}
+                  to="/offers/new"
+                  size="small"
+                  startIcon={EditIcon}
+                >
+                  Pokračovat v konceptu
+                </Button>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  color="inherit"
+                  onClick={discardDraft}
+                >
+                  Zahodit koncept
+                </Button>
+              </Box>
+            </Box>
+          </Alert>
+        </Box>
+      )}
+
       <motion.div
-        className="admin-card"
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25, delay: 0.15 }}
-        style={{ opacity: isFetching ? 0.6 : 1, transition: "opacity 0.2s" }}
       >
-        <div className="admin-card-body">
-          <div className="admin-search-bar mb-4">
-            <input
-              type="text"
-              value={search}
-              onChange={(e) => {
-                setSearch(e.target.value);
-                setPage(1);
-              }}
-              className="admin-form-input"
-              placeholder="Hledat podle čísla, projektu nebo zákazníka..."
-            />
-          </div>
-
-          <div className="admin-filters mb-4">
-            <div className="admin-filter-group">
-              <label className="admin-filter-label">Zákazník</label>
-              <select
-                value={customerFilter}
-                onChange={(e) => {
-                  setCustomerFilter(
-                    e.target.value ? Number(e.target.value) : "",
-                  );
-                  setPage(1);
-                }}
-                className="admin-form-select"
-              >
-                <option value="">Všichni</option>
-                {customers?.map((c) => (
-                  <option key={c.id} value={c.id}>
-                    {c.name}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
-
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={`${statusFilter}-${customerFilter}-${search}-${page}-${quotations.length}`}
-              initial={{ opacity: 0, y: 6 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.15 }}
-            >
-              {quotations.length === 0 && !draft ? (
-                <div className="admin-empty-state">
-                  <div className="admin-empty-icon">
-                    <svg
-                      width="28"
-                      height="28"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="1.5"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    >
-                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                      <polyline points="14 2 14 8 20 8" />
-                      <line x1="12" y1="18" x2="12" y2="12" />
-                      <line x1="9" y1="15" x2="15" y2="15" />
-                    </svg>
-                  </div>
-                  <p>Zatím nejsou žádné nabídky.</p>
-                  {hasPermission("offers.create") && (
-                    <Link
-                      to="/offers/new"
-                      className="admin-btn admin-btn-primary"
-                    >
-                      Vytvořit první nabídku
-                    </Link>
-                  )}
-                </div>
+        <Card sx={{ opacity: isFetching ? 0.6 : 1, transition: "opacity .2s" }}>
+          <DataTable<Quotation>
+            columns={columns}
+            rows={quotations}
+            rowKey={(q) => q.id}
+            rowSx={rowSx}
+            sortBy={sort}
+            sortDir={order}
+            onSort={handleSort}
+            empty={
+              debouncedSearch ? (
+                <EmptyState title="Žádné nabídky odpovídající hledání." />
               ) : (
-                <div className="admin-table-responsive">
-                  <table className="admin-table">
-                    <thead>
-                      <tr>
-                        <th
-                          style={{ cursor: "pointer" }}
-                          onClick={() => handleSort("quotation_number")}
-                        >
-                          Číslo{" "}
-                          <SortIcon
-                            column="quotation_number"
-                            sort={activeSort}
-                            order={order}
-                          />
-                        </th>
-                        <th
-                          style={{ cursor: "pointer" }}
-                          onClick={() => handleSort("project_code")}
-                        >
-                          Projekt{" "}
-                          <SortIcon
-                            column="project_code"
-                            sort={activeSort}
-                            order={order}
-                          />
-                        </th>
-                        <th>Zákazník</th>
-                        <th
-                          style={{ cursor: "pointer" }}
-                          onClick={() => handleSort("created_at")}
-                        >
-                          Datum{" "}
-                          <SortIcon
-                            column="created_at"
-                            sort={activeSort}
-                            order={order}
-                          />
-                        </th>
-                        <th
-                          style={{ cursor: "pointer" }}
-                          onClick={() => handleSort("valid_until")}
-                        >
-                          Platnost{" "}
-                          <SortIcon
-                            column="valid_until"
-                            sort={activeSort}
-                            order={order}
-                          />
-                        </th>
-                        <th
-                          style={{ cursor: "pointer" }}
-                          onClick={() => handleSort("currency")}
-                        >
-                          Měna{" "}
-                          <SortIcon
-                            column="currency"
-                            sort={activeSort}
-                            order={order}
-                          />
-                        </th>
-                        <th className="text-right">Celkem</th>
-                        <th>Akce</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {draft && !search && (
-                        <tr className="offers-draft-row">
-                          <td>
-                            <span className="offers-draft-row-label">
-                              Koncept
-                              {draft.savedAt && (
-                                <span style={{ fontWeight: 400, opacity: 0.8 }}>
-                                  {" · "}
-                                  {new Date(draft.savedAt).toLocaleTimeString(
-                                    "cs-CZ",
-                                    { hour: "2-digit", minute: "2-digit" },
-                                  )}
-                                </span>
-                              )}
-                            </span>
-                          </td>
-                          <td>{draft.form.project_code || "—"}</td>
-                          <td>{draft.form.customer_name || "—"}</td>
-                          <td className="admin-mono">
-                            {draft.form.created_at
-                              ? formatDate(draft.form.created_at)
-                              : "—"}
-                          </td>
-                          <td className="admin-mono">
-                            {draft.form.valid_until
-                              ? formatDate(draft.form.valid_until)
-                              : "—"}
-                          </td>
-                          <td>
-                            <span className="admin-badge admin-badge-secondary">
-                              {draft.form.currency || "—"}
-                            </span>
-                          </td>
-                          <td />
-                          <td>
-                            <div className="admin-table-actions">
-                              <Link
-                                to="/offers/new"
-                                className="admin-btn-icon"
-                                title="Pokračovat v konceptu"
-                                aria-label="Pokračovat v konceptu"
-                              >
-                                <svg
-                                  width="18"
-                                  height="18"
-                                  viewBox="0 0 24 24"
-                                  fill="none"
-                                  stroke="currentColor"
-                                  strokeWidth="2"
-                                >
-                                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-                                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-                                </svg>
-                              </Link>
-                              <button
-                                onClick={discardDraft}
-                                className="admin-btn-icon danger"
-                                title="Zahodit koncept"
-                              >
-                                <svg
-                                  width="18"
-                                  height="18"
-                                  viewBox="0 0 24 24"
-                                  fill="none"
-                                  stroke="currentColor"
-                                  strokeWidth="2"
-                                >
-                                  <polyline points="3 6 5 6 21 6" />
-                                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                                </svg>
-                              </button>
-                            </div>
-                          </td>
-                        </tr>
-                      )}
-                      {(quotations as Quotation[]).map((q) => {
-                        const isInvalidated = q.status === "invalidated";
-                        const isCompleted =
-                          !isInvalidated && q.order_status === "dokoncena";
-                        const isExpired =
-                          !isInvalidated &&
-                          !isCompleted &&
-                          !q.order_id &&
-                          q.valid_until &&
-                          new Date(q.valid_until) <
-                            new Date(new Date().toDateString());
-                        const readOnly = isInvalidated || isCompleted;
-                        return (
-                          <tr
-                            key={q.id}
-                            className={getRowClass(
-                              isInvalidated,
-                              !!isExpired,
-                              isCompleted,
-                            )}
-                          >
-                            <td>
-                              <Link
-                                to={`/offers/${q.id}`}
-                                className="link-accent"
-                              >
-                                {q.quotation_number}
-                              </Link>
-                            </td>
-                            <td>{q.project_code || "—"}</td>
-                            <td>{q.customer_name || "—"}</td>
-                            <td className="admin-mono">
-                              {formatDate(q.created_at)}
-                            </td>
-                            <td className="admin-mono">
-                              {formatDate(q.valid_until)}
-                            </td>
-                            <td>
-                              <span className="admin-badge admin-badge-secondary">
-                                {q.currency}
-                              </span>
-                            </td>
-                            <td className="admin-mono text-right fw-500">
-                              {formatCurrency(q.total, q.currency)}
-                            </td>
-                            <td>
-                              <div className="admin-table-actions">
-                                <Link
-                                  to={`/offers/${q.id}`}
-                                  className="admin-btn-icon"
-                                  title={readOnly ? "Zobrazit" : "Upravit"}
-                                  aria-label={readOnly ? "Zobrazit" : "Upravit"}
-                                >
-                                  {readOnly ? (
-                                    <svg
-                                      width="18"
-                                      height="18"
-                                      viewBox="0 0 24 24"
-                                      fill="none"
-                                      stroke="currentColor"
-                                      strokeWidth="2"
-                                    >
-                                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-                                      <circle cx="12" cy="12" r="3" />
-                                    </svg>
-                                  ) : (
-                                    <svg
-                                      width="18"
-                                      height="18"
-                                      viewBox="0 0 24 24"
-                                      fill="none"
-                                      stroke="currentColor"
-                                      strokeWidth="2"
-                                    >
-                                      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-                                      <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-                                    </svg>
-                                  )}
-                                </Link>
-                                {!readOnly &&
-                                  hasPermission("offers.create") && (
-                                    <button
-                                      onClick={() => handleDuplicate(q)}
-                                      className="admin-btn-icon"
-                                      title="Duplikovat"
-                                      disabled={duplicating === q.id}
-                                    >
-                                      <svg
-                                        width="18"
-                                        height="18"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        strokeWidth="2"
-                                      >
-                                        <rect
-                                          x="9"
-                                          y="9"
-                                          width="13"
-                                          height="13"
-                                          rx="2"
-                                          ry="2"
-                                        />
-                                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-                                      </svg>
-                                    </button>
-                                  )}
-                                {!readOnly && q.order_id ? (
-                                  <Link
-                                    to={`/orders/${q.order_id}`}
-                                    className="admin-btn-icon accent"
-                                    title="Zobrazit objednávku"
-                                    aria-label="Zobrazit objednávku"
-                                  >
-                                    <svg
-                                      width="18"
-                                      height="18"
-                                      viewBox="0 0 24 24"
-                                      fill="none"
-                                      stroke="currentColor"
-                                      strokeWidth="2"
-                                    >
-                                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                                      <polyline points="14 2 14 8 20 8" />
-                                      <text
-                                        x="12"
-                                        y="16.5"
-                                        textAnchor="middle"
-                                        fill="currentColor"
-                                        stroke="none"
-                                        fontSize="9"
-                                        fontWeight="700"
-                                      >
-                                        O
-                                      </text>
-                                    </svg>
-                                  </Link>
-                                ) : (
-                                  !readOnly &&
-                                  hasPermission("orders.create") && (
-                                    <button
-                                      onClick={() => {
-                                        setCustomerOrderNumber("");
-                                        setOrderAttachment(null);
-                                        setOrderModal({
-                                          show: true,
-                                          quotation: q,
-                                        });
-                                      }}
-                                      className="admin-btn-icon"
-                                      title="Vytvořit objednávku"
-                                      disabled={creatingOrder === q.id}
-                                    >
-                                      {creatingOrder === q.id ? (
-                                        <div
-                                          className="admin-spinner"
-                                          style={{
-                                            width: 18,
-                                            height: 18,
-                                            borderWidth: 2,
-                                          }}
-                                        />
-                                      ) : (
-                                        <svg
-                                          width="18"
-                                          height="18"
-                                          viewBox="0 0 24 24"
-                                          fill="none"
-                                          stroke="currentColor"
-                                          strokeWidth="2"
-                                        >
-                                          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                                          <polyline points="14 2 14 8 20 8" />
-                                          <line
-                                            x1="12"
-                                            y1="11"
-                                            x2="12"
-                                            y2="17"
-                                          />
-                                          <line
-                                            x1="9"
-                                            y1="14"
-                                            x2="15"
-                                            y2="14"
-                                          />
-                                        </svg>
-                                      )}
-                                    </button>
-                                  )
-                                )}
-                                {!isInvalidated &&
-                                  !isCompleted &&
-                                  !q.order_id &&
-                                  hasPermission("offers.edit") && (
-                                    <button
-                                      onClick={() =>
-                                        setInvalidateConfirm({
-                                          show: true,
-                                          quotation: q,
-                                        })
-                                      }
-                                      className="admin-btn-icon"
-                                      title="Zneplatnit"
-                                    >
-                                      <svg
-                                        width="18"
-                                        height="18"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        strokeWidth="2"
-                                      >
-                                        <circle cx="12" cy="12" r="10" />
-                                        <line
-                                          x1="4.93"
-                                          y1="4.93"
-                                          x2="19.07"
-                                          y2="19.07"
-                                        />
-                                      </svg>
-                                    </button>
-                                  )}
-                                {hasPermission("offers.export") && (
-                                  <button
-                                    onClick={() => handlePdf(q)}
-                                    className="admin-btn-icon"
-                                    title="Zobrazit nabídku"
-                                    disabled={pdfLoading === q.id}
-                                  >
-                                    {pdfLoading === q.id ? (
-                                      <div
-                                        className="admin-spinner"
-                                        style={{
-                                          width: 18,
-                                          height: 18,
-                                          borderWidth: 2,
-                                        }}
-                                      />
-                                    ) : (
-                                      <svg
-                                        width="18"
-                                        height="18"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        strokeWidth="2"
-                                      >
-                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                                        <polyline points="14 2 14 8 20 8" />
-                                        <line x1="16" y1="13" x2="8" y2="13" />
-                                        <line x1="16" y1="17" x2="8" y2="17" />
-                                      </svg>
-                                    )}
-                                  </button>
-                                )}
-                                {hasPermission("offers.delete") && (
-                                  <button
-                                    onClick={() =>
-                                      setDeleteConfirm({
-                                        show: true,
-                                        quotation: q,
-                                      })
-                                    }
-                                    className="admin-btn-icon danger"
-                                    title="Smazat"
-                                  >
-                                    <svg
-                                      width="18"
-                                      height="18"
-                                      viewBox="0 0 24 24"
-                                      fill="none"
-                                      stroke="currentColor"
-                                      strokeWidth="2"
-                                    >
-                                      <polyline points="3 6 5 6 21 6" />
-                                      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                                    </svg>
-                                  </button>
-                                )}
-                              </div>
-                            </td>
-                          </tr>
-                        );
-                      })}
-                      {quotations.length === 0 && draft && search && (
-                        <tr>
-                          <td
-                            colSpan={8}
-                            className="text-muted text-center"
-                            style={{ padding: "1.5rem" }}
-                          >
-                            Žádné nabídky odpovídající hledání.
-                          </td>
-                        </tr>
-                      )}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </motion.div>
-          </AnimatePresence>
-          <Pagination pagination={pagination} onPageChange={setPage} />
-        </div>
+                <EmptyState
+                  title="Zatím nejsou žádné nabídky."
+                  action={
+                    hasPermission("offers.create") ? (
+                      <Button component={RouterLink} to="/offers/new">
+                        Vytvořit první nabídku
+                      </Button>
+                    ) : undefined
+                  }
+                />
+              )
+            }
+          />
+          <Pagination
+            page={page}
+            pageCount={pagination?.total_pages ?? 1}
+            onChange={setPage}
+          />
+        </Card>
       </motion.div>
 
-      <ConfirmModal
+      <ConfirmDialog
         isOpen={deleteConfirm.show}
         onClose={() => setDeleteConfirm({ show: false, quotation: null })}
         onConfirm={handleDelete}
         title="Smazat nabídku"
         message={`Opravdu chcete smazat nabídku "${deleteConfirm.quotation?.quotation_number}"? Budou smazány i všechny položky a sekce. Tato akce je nevratná.`}
         confirmText="Smazat"
-        cancelText="Zrušit"
-        type="danger"
+        confirmVariant="danger"
         loading={deleting}
       />
 
-      <ConfirmModal
+      <ConfirmDialog
         isOpen={invalidateConfirm.show}
         onClose={() => setInvalidateConfirm({ show: false, quotation: null })}
         onConfirm={handleInvalidate}
         title="Zneplatnit nabídku"
         message={`Opravdu chcete zneplatnit nabídku "${invalidateConfirm.quotation?.quotation_number}"? Nabídka bude pouze pro čtení a nepůjde upravovat.`}
         confirmText="Zneplatnit"
-        cancelText="Zrušit"
-        type="danger"
+        confirmVariant="danger"
         loading={invalidating}
       />
 
-      <FormModal
+      <Modal
         isOpen={orderModal.show}
         onClose={() => setOrderModal({ show: false, quotation: null })}
         onSubmit={handleCreateOrder}
         title="Vytvořit objednávku"
-        submitLabel={creatingOrder ? "Vytváření..." : "Vytvořit"}
+        subtitle={`Nabídka: ${orderModal.quotation?.quotation_number ?? ""}`}
+        submitText="Vytvořit"
         loading={!!creatingOrder}
       >
-        <p
-          className="text-secondary text-md"
-          style={{ marginTop: "-0.5rem", marginBottom: "0.5rem" }}
-        >
-          Nabídka: <strong>{orderModal.quotation?.quotation_number}</strong>
-        </p>
-        <div className="admin-form">
-          <FormField label="Číslo objednávky zákazníka" required>
-            <input
-              type="text"
-              value={customerOrderNumber}
-              onChange={(e) => setCustomerOrderNumber(e.target.value)}
-              onKeyDown={(e) =>
-                e.key === "Enter" && !creatingOrder && handleCreateOrder()
-              }
-              className="admin-form-input"
-              placeholder="Např. PO-2026-001"
-              autoFocus
-            />
-          </FormField>
-          <FormField label="Příloha (PDF)">
-            {orderAttachment ? (
-              <div className="flex-row gap-2">
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="var(--accent-color)"
-                  strokeWidth="2"
-                >
-                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                  <polyline points="14 2 14 8 20 8" />
-                </svg>
-                <span className="text-md">
-                  {orderAttachment.name}{" "}
-                  <span className="text-tertiary">
-                    ({(orderAttachment.size / 1024).toFixed(0)} KB)
-                  </span>
-                </span>
-                <button
-                  type="button"
-                  onClick={() => setOrderAttachment(null)}
-                  className="admin-btn-icon"
-                  title="Odebrat"
-                  style={{ marginLeft: "auto" }}
-                >
-                  <svg
-                    width="16"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                  >
-                    <path d="M18 6L6 18M6 6l12 12" />
-                  </svg>
-                </button>
-              </div>
-            ) : (
-              <label
-                className="admin-btn admin-btn-secondary admin-btn-sm inline-flex"
-                style={{
-                  cursor: "pointer",
-                  gap: "0.4rem",
-                }}
-              >
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                >
-                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                  <polyline points="17 8 12 3 7 8" />
-                  <line x1="12" y1="3" x2="12" y2="15" />
-                </svg>
-                Vybrat soubor
-                <input
-                  type="file"
-                  accept="application/pdf"
-                  onChange={(e) =>
-                    setOrderAttachment(e.target.files?.[0] || null)
-                  }
-                  style={{ display: "none" }}
-                />
-              </label>
-            )}
-            <small className="admin-form-hint" style={{ marginTop: "0.25rem" }}>
-              Max 10 MB
-            </small>
-          </FormField>
-        </div>
-      </FormModal>
-    </div>
+        <Field label="Číslo objednávky zákazníka" required>
+          <TextField
+            value={customerOrderNumber}
+            onChange={(e) => setCustomerOrderNumber(e.target.value)}
+            onKeyDown={(e) =>
+              e.key === "Enter" && !creatingOrder && handleCreateOrder()
+            }
+            placeholder="Např. PO-2026-001"
+            autoFocus
+          />
+        </Field>
+        <Field label="Příloha (PDF)">
+          <FileUpload
+            files={orderAttachment ? [orderAttachment] : []}
+            onFilesChange={(files) => setOrderAttachment(files[0] ?? null)}
+            accept="application/pdf"
+            multiple={false}
+          />
+          <Typography
+            variant="caption"
+            color="text.secondary"
+            sx={{ display: "block", mt: 0.5 }}
+          >
+            Max 10 MB
+          </Typography>
+        </Field>
+      </Modal>
+    </Box>
   );
 }