diff --git a/src/admin/pages/WarehouseSuppliers.tsx b/src/admin/pages/WarehouseSuppliers.tsx
index 5302722..4f7f83f 100644
--- a/src/admin/pages/WarehouseSuppliers.tsx
+++ b/src/admin/pages/WarehouseSuppliers.tsx
@@ -1,20 +1,34 @@
 import { useState } from "react";
+import { motion } from "framer-motion";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
 import { useAlert } from "../context/AlertContext";
 import { useAuth } from "../context/AuthContext";
 import Forbidden from "../components/Forbidden";
-import { motion, AnimatePresence } from "framer-motion";
-import ConfirmModal from "../components/ConfirmModal";
-import FormModal from "../components/FormModal";
-import Pagination from "../components/Pagination";
 import useDebounce from "../hooks/useDebounce";
 import { usePaginatedQuery } from "../hooks/usePaginatedQuery";
-
-import FormField from "../components/FormField";
 import {
   warehouseSupplierListOptions,
   type WarehouseSupplier,
 } from "../lib/queries/warehouse";
 import { useApiMutation } from "../lib/queries/mutations";
+import {
+  Button,
+  Card,
+  DataTable,
+  Pagination,
+  Modal,
+  ConfirmDialog,
+  Field,
+  TextField,
+  StatusChip,
+  PageHeader,
+  FilterBar,
+  EmptyState,
+  LoadingState,
+  type DataColumn,
+} from "../ui";
 
 const API_BASE = "/api/admin/warehouse/suppliers";
 
@@ -31,6 +45,50 @@ interface SupplierForm {
 
 const PER_PAGE = 20;
 
+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 EditIcon = (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <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 DeleteIcon = (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <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 WarehouseSuppliers() {
   const alert = useAlert();
   const { hasPermission } = useAuth();
@@ -191,347 +249,261 @@ export default function WarehouseSuppliers() {
   };
 
   if (isPending) {
-    return (
-      <div className="admin-loading">
-        <div className="admin-spinner" />
-      </div>
-    );
+    return <LoadingState />;
   }
 
+  const total = pagination?.total ?? suppliers.length;
+  const subtitle = `${total} ${
+    total === 1
+      ? "dodavatel"
+      : total >= 2 && total <= 4
+        ? "dodavatelé"
+        : "dodavatelů"
+  }`;
+
+  const columns: DataColumn<WarehouseSupplier>[] = [
+    {
+      key: "name",
+      header: "Název",
+      width: "20%",
+      bold: true,
+      render: (s) => s.name,
+    },
+    {
+      key: "ico",
+      header: "IČO",
+      width: "11%",
+      mono: true,
+      render: (s) => s.ico || "—",
+    },
+    {
+      key: "dic",
+      header: "DIČ",
+      width: "11%",
+      mono: true,
+      render: (s) => s.dic || "—",
+    },
+    {
+      key: "contact_person",
+      header: "Kontaktní osoba",
+      width: "16%",
+      render: (s) => s.contact_person || "—",
+    },
+    {
+      key: "email",
+      header: "E-mail",
+      width: "16%",
+      render: (s) => s.email || "—",
+    },
+    {
+      key: "phone",
+      header: "Telefon",
+      width: "12%",
+      mono: true,
+      render: (s) => s.phone || "—",
+    },
+    {
+      key: "status",
+      header: "Stav",
+      width: "8%",
+      render: (s) => (
+        <StatusChip
+          label={s.is_active ? "Aktivní" : "Neaktivní"}
+          color={s.is_active ? "success" : "default"}
+          onClick={() => toggleActive(s)}
+        />
+      ),
+    },
+    {
+      key: "actions",
+      header: "Akce",
+      width: "10%",
+      align: "right",
+      render: (s) => (
+        <Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
+          <IconButton
+            size="small"
+            onClick={() => openEditModal(s)}
+            aria-label="Upravit"
+            title="Upravit"
+          >
+            {EditIcon}
+          </IconButton>
+          <IconButton
+            size="small"
+            color="error"
+            onClick={() => setDeactivateConfirm({ show: true, supplier: s })}
+            aria-label={s.is_active ? "Deaktivovat" : "Smazat"}
+            title={s.is_active ? "Deaktivovat" : "Smazat"}
+          >
+            {DeleteIcon}
+          </IconButton>
+        </Box>
+      ),
+    },
+  ];
+
   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">Dodavatelé</h1>
-          <p className="admin-page-subtitle">
-            {pagination?.total ?? suppliers.length}{" "}
-            {pagination?.total === 1
-              ? "dodavatel"
-              : pagination?.total !== undefined &&
-                  pagination.total >= 2 &&
-                  pagination.total <= 4
-                ? "dodavatelé"
-                : "dodavatelů"}
-          </p>
-        </div>
-        <div className="admin-page-actions">
-          <button
-            onClick={openCreateModal}
-            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>
-            Přidat dodavatele
-          </button>
-        </div>
+        <PageHeader
+          title="Dodavatelé"
+          subtitle={subtitle}
+          actions={
+            <Button startIcon={PlusIcon} onClick={openCreateModal}>
+              Přidat dodavatele
+            </Button>
+          }
+        />
       </motion.div>
 
-      <motion.div
-        className="admin-card"
-        initial={{ opacity: 0, y: 12 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.25, delay: 0.06 }}
-        style={{ opacity: isFetching ? 0.6 : 1, transition: "opacity 0.2s" }}
-      >
-        <div className="admin-card-body">
-          <div className="admin-search-bar mb-4">
-            <div className="admin-search">
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <circle cx="11" cy="11" r="8" />
-                <line x1="21" y1="21" x2="16.65" y2="16.65" />
-              </svg>
-              <input
-                type="text"
-                value={search}
-                onChange={(e) => {
-                  setSearch(e.target.value);
-                  setPage(1);
-                }}
-                placeholder="Hledat dodavatele..."
-                className="admin-form-input"
-              />
-            </div>
-          </div>
+      <FilterBar>
+        <Box sx={{ flex: "1 1 320px" }}>
+          <TextField
+            value={search}
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setPage(1);
+            }}
+            placeholder="Hledat dodavatele..."
+            fullWidth
+          />
+        </Box>
+      </FilterBar>
 
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={`${debouncedSearch}-${page}-${suppliers.length}`}
-              initial={{ opacity: 0, y: 6 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.15 }}
-            >
-              {suppliers.length === 0 && !search && (
-                <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="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-                      <circle cx="9" cy="7" r="4" />
-                      <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-                      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
-                    </svg>
-                  </div>
-                  <p>Zatím nejsou žádní dodavatelé.</p>
-                  <button
-                    onClick={openCreateModal}
-                    className="admin-btn admin-btn-primary"
-                  >
+      <Card sx={{ opacity: isFetching ? 0.6 : 1, transition: "opacity .2s" }}>
+        <DataTable<WarehouseSupplier>
+          columns={columns}
+          rows={suppliers}
+          rowKey={(s) => s.id}
+          rowInactive={(s) => !s.is_active}
+          empty={
+            search ? (
+              <EmptyState title={`Žádní dodavatelé pro „${search}".`} />
+            ) : (
+              <EmptyState
+                title="Zatím nejsou žádní dodavatelé."
+                action={
+                  <Button startIcon={PlusIcon} onClick={openCreateModal}>
                     Přidat prvního dodavatele
-                  </button>
-                </div>
-              )}
-              {suppliers.length === 0 && search && (
-                <div className="admin-empty-state">
-                  <p>Žádní dodavatelé pro &quot;{search}&quot;.</p>
-                </div>
-              )}
-              {suppliers.length > 0 && (
-                <div className="admin-table-responsive">
-                  <table className="admin-table">
-                    <thead>
-                      <tr>
-                        <th>Název</th>
-                        <th>IČO</th>
-                        <th>DIČ</th>
-                        <th>Kontaktní osoba</th>
-                        <th>E-mail</th>
-                        <th>Telefon</th>
-                        <th>Stav</th>
-                        <th>Akce</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {suppliers.map((supplier) => (
-                        <tr
-                          key={supplier.id}
-                          className={
-                            !supplier.is_active
-                              ? "admin-table-row-inactive"
-                              : ""
-                          }
-                        >
-                          <td className="fw-500">{supplier.name}</td>
-                          <td className="admin-mono">{supplier.ico || "—"}</td>
-                          <td className="admin-mono">{supplier.dic || "—"}</td>
-                          <td>{supplier.contact_person || "—"}</td>
-                          <td>{supplier.email || "—"}</td>
-                          <td className="admin-mono">
-                            {supplier.phone || "—"}
-                          </td>
-                          <td>
-                            <button
-                              onClick={() => toggleActive(supplier)}
-                              className={`admin-badge ${supplier.is_active ? "admin-badge-active" : "admin-badge-inactive"}`}
-                            >
-                              {supplier.is_active ? "Aktivní" : "Neaktivní"}
-                            </button>
-                          </td>
-                          <td>
-                            <div className="admin-table-actions">
-                              <button
-                                onClick={() => openEditModal(supplier)}
-                                className="admin-btn-icon"
-                                title="Upravit"
-                                aria-label="Upravit"
-                              >
-                                <svg
-                                  width="18"
-                                  height="18"
-                                  viewBox="0 0 24 24"
-                                  fill="none"
-                                  stroke="currentColor"
-                                  strokeWidth="2"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                >
-                                  <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>
-                              </button>
-                              <button
-                                onClick={() =>
-                                  setDeactivateConfirm({
-                                    show: true,
-                                    supplier,
-                                  })
-                                }
-                                className={`admin-btn-icon ${supplier.is_active ? "danger" : ""}`}
-                                title={
-                                  supplier.is_active ? "Deaktivovat" : "Smazat"
-                                }
-                                aria-label={
-                                  supplier.is_active ? "Deaktivovat" : "Smazat"
-                                }
-                              >
-                                <svg
-                                  width="18"
-                                  height="18"
-                                  viewBox="0 0 24 24"
-                                  fill="none"
-                                  stroke="currentColor"
-                                  strokeWidth="2"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                >
-                                  <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>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </motion.div>
-          </AnimatePresence>
-
-          <Pagination pagination={pagination} onPageChange={setPage} />
-        </div>
-      </motion.div>
+                  </Button>
+                }
+              />
+            )
+          }
+        />
+        <Pagination
+          page={page}
+          pageCount={pagination?.total_pages ?? 1}
+          onChange={setPage}
+        />
+      </Card>
 
       {/* Add/Edit Modal */}
-      <FormModal
+      <Modal
         isOpen={showModal}
         onClose={() => setShowModal(false)}
         onSubmit={handleSubmit}
         title={editingSupplier ? "Upravit dodavatele" : "Přidat dodavatele"}
         loading={saving}
       >
-        <div className="admin-form">
-          <FormField label="Název" error={errors.name} required>
-            <input
-              type="text"
-              value={form.name}
-              onChange={(e) => {
-                setForm({ ...form, name: e.target.value });
-                setErrors((prev) => ({ ...prev, name: "" }));
-              }}
-              className="admin-form-input"
-              placeholder="Název dodavatele"
-              aria-invalid={!!errors.name}
+        <Field label="Název" required error={errors.name}>
+          <TextField
+            value={form.name}
+            error={!!errors.name}
+            onChange={(e) => {
+              setForm({ ...form, name: e.target.value });
+              setErrors((prev) => ({ ...prev, name: "" }));
+            }}
+            placeholder="Název dodavatele"
+          />
+        </Field>
+
+        <Box
+          sx={{
+            display: "grid",
+            gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+            gap: 2,
+          }}
+        >
+          <Field label="IČO">
+            <TextField
+              value={form.ico}
+              onChange={(e) => setForm({ ...form, ico: e.target.value })}
+              placeholder="12345678"
             />
-          </FormField>
-
-          <div className="admin-form-row">
-            <FormField label="IČO">
-              <input
-                type="text"
-                value={form.ico}
-                onChange={(e) => setForm({ ...form, ico: e.target.value })}
-                className="admin-form-input"
-                placeholder="12345678"
-              />
-            </FormField>
-
-            <FormField label="DIČ">
-              <input
-                type="text"
-                value={form.dic}
-                onChange={(e) => setForm({ ...form, dic: e.target.value })}
-                className="admin-form-input"
-                placeholder="CZ12345678"
-              />
-            </FormField>
-          </div>
-
-          <div className="admin-form-row">
-            <FormField label="Kontaktní osoba">
-              <input
-                type="text"
-                value={form.contact_person}
-                onChange={(e) =>
-                  setForm({
-                    ...form,
-                    contact_person: e.target.value,
-                  })
-                }
-                className="admin-form-input"
-                placeholder="Jan Novák"
-              />
-            </FormField>
-
-            <FormField label="E-mail">
-              <input
-                type="email"
-                value={form.email}
-                onChange={(e) => setForm({ ...form, email: e.target.value })}
-                className="admin-form-input"
-                placeholder="info@firma.cz"
-              />
-            </FormField>
-          </div>
-
-          <div className="admin-form-row">
-            <FormField label="Telefon">
-              <input
-                type="tel"
-                value={form.phone}
-                onChange={(e) => setForm({ ...form, phone: e.target.value })}
-                className="admin-form-input"
-                placeholder="+420 123 456 789"
-              />
-            </FormField>
-          </div>
-
-          <FormField label="Adresa">
-            <textarea
-              value={form.address}
-              onChange={(e) => setForm({ ...form, address: e.target.value })}
-              className="admin-form-input"
-              rows={3}
-              placeholder="Ulice, město, PSČ"
+          </Field>
+          <Field label="DIČ">
+            <TextField
+              value={form.dic}
+              onChange={(e) => setForm({ ...form, dic: e.target.value })}
+              placeholder="CZ12345678"
             />
-          </FormField>
+          </Field>
+        </Box>
 
-          <FormField label="Poznámky">
-            <textarea
-              value={form.notes}
-              onChange={(e) => setForm({ ...form, notes: e.target.value })}
-              className="admin-form-input"
-              rows={3}
-              placeholder="Volitelné poznámky"
+        <Box
+          sx={{
+            display: "grid",
+            gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+            gap: 2,
+          }}
+        >
+          <Field label="Kontaktní osoba">
+            <TextField
+              value={form.contact_person}
+              onChange={(e) =>
+                setForm({ ...form, contact_person: e.target.value })
+              }
+              placeholder="Jan Novák"
             />
-          </FormField>
-        </div>
-      </FormModal>
+          </Field>
+          <Field label="E-mail">
+            <TextField
+              type="email"
+              value={form.email}
+              onChange={(e) => setForm({ ...form, email: e.target.value })}
+              placeholder="info@firma.cz"
+            />
+          </Field>
+        </Box>
+
+        <Field label="Telefon">
+          <TextField
+            type="tel"
+            value={form.phone}
+            onChange={(e) => setForm({ ...form, phone: e.target.value })}
+            placeholder="+420 123 456 789"
+          />
+        </Field>
+
+        <Field label="Adresa">
+          <TextField
+            multiline
+            minRows={3}
+            value={form.address}
+            onChange={(e) => setForm({ ...form, address: e.target.value })}
+            placeholder="Ulice, město, PSČ"
+          />
+        </Field>
+
+        <Field label="Poznámky">
+          <TextField
+            multiline
+            minRows={3}
+            value={form.notes}
+            onChange={(e) => setForm({ ...form, notes: e.target.value })}
+            placeholder="Volitelné poznámky"
+          />
+        </Field>
+      </Modal>
 
       {/* Deactivate/Delete Confirmation */}
-      <ConfirmModal
+      <ConfirmDialog
         isOpen={deactivateConfirm.show}
         onClose={() => setDeactivateConfirm({ show: false, supplier: null })}
         onConfirm={handleDeactivate}
@@ -551,7 +523,8 @@ export default function WarehouseSuppliers() {
           deactivateConfirm.supplier?.is_active ? "Deaktivovat" : "Smazat"
         }
         confirmVariant="danger"
+        loading={deleteMutation.isPending}
       />
-    </div>
+    </Box>
   );
 }