diff --git a/src/admin/pages/WarehouseItems.tsx b/src/admin/pages/WarehouseItems.tsx
index 6e59f6c..136b39d 100644
--- a/src/admin/pages/WarehouseItems.tsx
+++ b/src/admin/pages/WarehouseItems.tsx
@@ -1,12 +1,10 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "react-router-dom";
-import { useAlert } from "../context/AlertContext";
+import { motion } from "framer-motion";
+import Box from "@mui/material/Box";
 import { useAuth } from "../context/AuthContext";
 import Forbidden from "../components/Forbidden";
-import { motion, AnimatePresence } from "framer-motion";
-import Pagination from "../components/Pagination";
-import SortIcon from "../components/SortIcon";
 import useTableSort from "../hooks/useTableSort";
 import useDebounce from "../hooks/useDebounce";
 import { usePaginatedQuery } from "../hooks/usePaginatedQuery";
@@ -17,11 +15,38 @@ import {
   warehouseCategoryListOptions,
   type WarehouseItem,
 } from "../lib/queries/warehouse";
+import {
+  Button,
+  Card,
+  DataTable,
+  Pagination,
+  TextField,
+  Select,
+  StatusChip,
+  PageHeader,
+  FilterBar,
+  EmptyState,
+  LoadingState,
+  type DataColumn,
+} from "../ui";
 
 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>
+);
+
 export default function WarehouseItems() {
-  const alert = useAlert();
   const { hasPermission } = useAuth();
   const navigate = useNavigate();
 
@@ -30,7 +55,7 @@ export default function WarehouseItems() {
   const [categoryId, setCategoryId] = useState<number | "">("");
   const debouncedSearch = useDebounce(search, 300);
 
-  const { sort, order, handleSort, activeSort } = useTableSort("item_number");
+  const { sort, order, handleSort } = useTableSort("item_number");
 
   const { data: categories = [] } = useQuery(warehouseCategoryListOptions());
 
@@ -50,266 +75,174 @@ export default function WarehouseItems() {
 
   const canManage = hasPermission("warehouse.manage");
 
-  const handleRowClick = (item: WarehouseItem) => {
-    navigate(`/warehouse/items/${item.id}`);
-  };
-
   if (isPending) {
-    return (
-      <div className="admin-loading">
-        <div className="admin-spinner" />
-      </div>
-    );
+    return <LoadingState />;
   }
 
+  const total = pagination?.total ?? items.length;
+  const subtitle = `${total} ${czechPlural(total, "položka", "položky", "položek")}`;
+
+  const columns: DataColumn<WarehouseItem>[] = [
+    {
+      key: "item_number",
+      header: "Číslo",
+      width: "10%",
+      sortKey: "item_number",
+      mono: true,
+      render: (i) => i.item_number || "—",
+    },
+    {
+      key: "name",
+      header: "Název",
+      width: "24%",
+      sortKey: "name",
+      bold: true,
+      render: (i) => i.name,
+    },
+    {
+      key: "category",
+      header: "Kategorie",
+      width: "14%",
+      render: (i) => i.category?.name || "—",
+    },
+    {
+      key: "unit",
+      header: "Jednotka",
+      width: "9%",
+      render: (i) => i.unit,
+    },
+    {
+      key: "total_quantity",
+      header: "Množství",
+      width: "10%",
+      sortKey: "total_quantity",
+      mono: true,
+      render: (i) => String(i.total_quantity ?? 0),
+    },
+    {
+      key: "available_quantity",
+      header: "K dispozici",
+      width: "10%",
+      mono: true,
+      render: (i) => String(i.available_quantity ?? 0),
+    },
+    {
+      key: "stock_value",
+      header: "Hodnota",
+      width: "12%",
+      sortKey: "stock_value",
+      mono: true,
+      render: (i) =>
+        i.stock_value != null
+          ? formatCurrency(i.stock_value, "CZK")
+          : "0,00 Kč",
+    },
+    {
+      key: "status",
+      header: "Stav",
+      width: "11%",
+      render: (i) =>
+        i.below_minimum ? (
+          <StatusChip label="Pod min." color="error" />
+        ) : i.is_active ? (
+          <StatusChip label="OK" color="success" />
+        ) : (
+          <StatusChip label="Neaktivní" color="default" />
+        ),
+    },
+  ];
+
   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">Skladové položky</h1>
-          <p className="admin-page-subtitle">
-            {pagination?.total ?? items.length}{" "}
-            {czechPlural(
-              pagination?.total ?? items.length,
-              "položka",
-              "položky",
-              "položek",
-            )}
-          </p>
-        </div>
-        <div className="admin-page-actions">
-          {canManage && (
-            <button
-              onClick={() => navigate("/warehouse/items/new")}
-              className="admin-btn admin-btn-primary"
-            >
-              <svg
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
+        <PageHeader
+          title="Skladové položky"
+          subtitle={subtitle}
+          actions={
+            canManage ? (
+              <Button
+                startIcon={PlusIcon}
+                onClick={() => navigate("/warehouse/items/new")}
               >
-                <line x1="12" y1="5" x2="12" y2="19" />
-                <line x1="5" y1="12" x2="19" y2="12" />
-              </svg>
-              Přidat položku
-            </button>
-          )}
-        </div>
+                Přidat položku
+              </Button>
+            ) : undefined
+          }
+        />
       </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 podle názvu nebo čísla položky..."
-                className="admin-form-input"
-              />
-            </div>
-            {categories.length > 0 && (
-              <select
-                value={categoryId}
-                onChange={(e) => {
-                  setCategoryId(
-                    e.target.value === "" ? "" : Number(e.target.value),
-                  );
-                  setPage(1);
-                }}
-                className="admin-form-select"
-              >
-                <option value="">Všechny kategorie</option>
-                {categories.map((cat) => (
-                  <option key={cat.id} value={cat.id}>
-                    {cat.name}
-                  </option>
-                ))}
-              </select>
-            )}
-          </div>
+      <FilterBar>
+        <Box sx={{ flex: "1 1 280px" }}>
+          <TextField
+            value={search}
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setPage(1);
+            }}
+            placeholder="Hledat podle názvu nebo čísla položky..."
+            fullWidth
+          />
+        </Box>
+        {categories.length > 0 && (
+          <Box sx={{ flex: "0 0 200px" }}>
+            <Select
+              value={categoryId === "" ? "" : String(categoryId)}
+              onChange={(val) => {
+                setCategoryId(val === "" ? "" : Number(val));
+                setPage(1);
+              }}
+              options={[
+                { value: "", label: "Všechny kategorie" },
+                ...categories.map((cat) => ({
+                  value: String(cat.id),
+                  label: cat.name,
+                })),
+              ]}
+            />
+          </Box>
+        )}
+      </FilterBar>
 
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={`${debouncedSearch}-${categoryId}-${page}-${sort}-${order}-${items.length}`}
-              initial={{ opacity: 0, y: 6 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.15 }}
-            >
-              {items.length === 0 && (
-                <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="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
-                      <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
-                      <line x1="12" y1="22.08" x2="12" y2="12" />
-                    </svg>
-                  </div>
-                  <p>
-                    {search || categoryId
-                      ? "Žádné položky pro zadaný filtr."
-                      : "Zatím nejsou žádné skladové položky."}
-                  </p>
-                  {canManage && !search && !categoryId && (
-                    <button
+      <Card sx={{ opacity: isFetching ? 0.6 : 1, transition: "opacity .2s" }}>
+        <DataTable<WarehouseItem>
+          columns={columns}
+          rows={items}
+          rowKey={(i) => i.id}
+          rowInactive={(i) => !i.is_active}
+          onRowClick={(i) => navigate(`/warehouse/items/${i.id}`)}
+          sortBy={sort}
+          sortDir={order}
+          onSort={handleSort}
+          empty={
+            search || categoryId ? (
+              <EmptyState title="Žádné položky pro zadaný filtr." />
+            ) : (
+              <EmptyState
+                title="Zatím nejsou žádné skladové položky."
+                action={
+                  canManage ? (
+                    <Button
+                      startIcon={PlusIcon}
                       onClick={() => navigate("/warehouse/items/new")}
-                      className="admin-btn admin-btn-primary"
                     >
                       Přidat první položku
-                    </button>
-                  )}
-                </div>
-              )}
-              {items.length > 0 && (
-                <div className="admin-table-responsive">
-                  <table className="admin-table">
-                    <thead>
-                      <tr>
-                        <th
-                          style={{ cursor: "pointer" }}
-                          onClick={() => handleSort("item_number")}
-                        >
-                          Číslo{" "}
-                          <SortIcon
-                            column="item_number"
-                            sort={activeSort}
-                            order={order}
-                          />
-                        </th>
-                        <th
-                          style={{ cursor: "pointer" }}
-                          onClick={() => handleSort("name")}
-                        >
-                          Název{" "}
-                          <SortIcon
-                            column="name"
-                            sort={activeSort}
-                            order={order}
-                          />
-                        </th>
-                        <th>Kategorie</th>
-                        <th>Jednotka</th>
-                        <th
-                          style={{ cursor: "pointer" }}
-                          onClick={() => handleSort("total_quantity")}
-                        >
-                          Množství{" "}
-                          <SortIcon
-                            column="total_quantity"
-                            sort={activeSort}
-                            order={order}
-                          />
-                        </th>
-                        <th>K dispozici</th>
-                        <th
-                          style={{ cursor: "pointer" }}
-                          onClick={() => handleSort("stock_value")}
-                        >
-                          Hodnota{" "}
-                          <SortIcon
-                            column="stock_value"
-                            sort={activeSort}
-                            order={order}
-                          />
-                        </th>
-                        <th>Stav</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {items.map((item) => (
-                        <tr
-                          key={item.id}
-                          onClick={() => handleRowClick(item)}
-                          className={
-                            !item.is_active ? "admin-table-row-inactive" : ""
-                          }
-                          style={{ cursor: "pointer" }}
-                        >
-                          <td className="admin-mono">
-                            {item.item_number || "—"}
-                          </td>
-                          <td className="fw-500">{item.name}</td>
-                          <td>{item.category?.name || "—"}</td>
-                          <td>{item.unit}</td>
-                          <td className="admin-mono">
-                            {item.total_quantity ?? 0}
-                          </td>
-                          <td className="admin-mono">
-                            {item.available_quantity ?? 0}
-                          </td>
-                          <td className="admin-mono">
-                            {item.stock_value != null
-                              ? formatCurrency(item.stock_value, "CZK")
-                              : "0,00 Kč"}
-                          </td>
-                          <td>
-                            {item.below_minimum ? (
-                              <span className="admin-badge admin-badge-danger">
-                                Pod min.
-                              </span>
-                            ) : item.is_active ? (
-                              <span className="admin-badge admin-badge-active">
-                                OK
-                              </span>
-                            ) : (
-                              <span className="admin-badge admin-badge-inactive">
-                                Neaktivní
-                              </span>
-                            )}
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </motion.div>
-          </AnimatePresence>
-
-          <Pagination pagination={pagination} onPageChange={setPage} />
-        </div>
-      </motion.div>
-    </div>
+                    </Button>
+                  ) : undefined
+                }
+              />
+            )
+          }
+        />
+        <Pagination
+          page={page}
+          pageCount={pagination?.total_pages ?? 1}
+          onChange={setPage}
+        />
+      </Card>
+    </Box>
   );
 }