diff --git a/src/admin/pages/WarehouseReservations.tsx b/src/admin/pages/WarehouseReservations.tsx
index 9bd064b..2ed8044 100644
--- a/src/admin/pages/WarehouseReservations.tsx
+++ b/src/admin/pages/WarehouseReservations.tsx
@@ -4,14 +4,11 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAlert } from "../context/AlertContext";
 import { useAuth } from "../context/AuthContext";
 import Forbidden from "../components/Forbidden";
-import { motion, AnimatePresence } from "framer-motion";
-import Pagination from "../components/Pagination";
-import ConfirmModal from "../components/ConfirmModal";
-import FormModal from "../components/FormModal";
-import FormField from "../components/FormField";
-import ItemPicker from "../components/warehouse/ItemPicker";
-import useDebounce from "../hooks/useDebounce";
+import { motion } from "framer-motion";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
 import { usePaginatedQuery } from "../hooks/usePaginatedQuery";
+import ItemPicker from "../components/warehouse/ItemPicker";
 
 import apiFetch from "../utils/api";
 import { formatDate, czechPlural } from "../utils/formatters";
@@ -20,13 +17,33 @@ import {
   type WarehouseReservation,
 } from "../lib/queries/warehouse";
 import { projectListOptions } from "../lib/queries/projects";
+import {
+  Button,
+  Card,
+  DataTable,
+  Pagination,
+  Modal,
+  ConfirmDialog,
+  Field,
+  TextField,
+  Select,
+  StatusChip,
+  PageHeader,
+  FilterBar,
+  EmptyState,
+  LoadingState,
+  type DataColumn,
+} from "../ui";
 
 const PER_PAGE = 20;
 
-const STATUS_BADGE: Record<string, string> = {
-  ACTIVE: "admin-badge-active",
-  FULFILLED: "admin-badge-info",
-  CANCELLED: "admin-badge-danger",
+const STATUS_COLOR: Record<
+  string,
+  "success" | "error" | "warning" | "info" | "default"
+> = {
+  ACTIVE: "success",
+  FULFILLED: "info",
+  CANCELLED: "error",
 };
 
 const STATUS_LABEL: Record<string, string> = {
@@ -35,6 +52,53 @@ const STATUS_LABEL: Record<string, string> = {
   CANCELLED: "Zrušena",
 };
 
+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 IssueIcon = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="7 13 12 18 17 13" />
+    <line x1="12" y1="18" x2="12" y2="6" />
+  </svg>
+);
+
+const CancelIcon = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="12" cy="12" r="10" />
+    <line x1="15" y1="9" x2="9" y2="15" />
+    <line x1="9" y1="9" x2="15" y2="15" />
+  </svg>
+);
+
 interface ReservationForm {
   item_id: number | null;
   project_id: number | null;
@@ -153,332 +217,270 @@ export default function WarehouseReservations() {
   };
 
   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, "rezervace", "rezervace", "rezervací")}`;
+
+  const columns: DataColumn<WarehouseReservation>[] = [
+    {
+      key: "item",
+      header: "Položka",
+      width: "22%",
+      bold: true,
+      render: (res) => res.item?.name || `ID: ${res.item_id}`,
+    },
+    {
+      key: "project",
+      header: "Projekt",
+      width: "20%",
+      render: (res) => res.project?.name || "—",
+    },
+    {
+      key: "quantity",
+      header: "Množství",
+      width: "10%",
+      mono: true,
+      render: (res) => String(Number(res.quantity)),
+    },
+    {
+      key: "remaining_qty",
+      header: "Zbývá",
+      width: "10%",
+      mono: true,
+      render: (res) => String(Number(res.remaining_qty)),
+    },
+    {
+      key: "status",
+      header: "Stav",
+      width: "11%",
+      render: (res) => (
+        <StatusChip
+          label={STATUS_LABEL[res.status] ?? res.status}
+          color={STATUS_COLOR[res.status] ?? "default"}
+        />
+      ),
+    },
+    {
+      key: "reserved_by",
+      header: "Rezervoval",
+      width: "15%",
+      render: (res) =>
+        res.reserved_by_user
+          ? `${res.reserved_by_user.first_name} ${res.reserved_by_user.last_name}`
+          : "—",
+    },
+    {
+      key: "created_at",
+      header: "Vytvořeno",
+      width: "12%",
+      mono: true,
+      render: (res) => formatDate(res.created_at),
+    },
+    ...(canOperate
+      ? [
+          {
+            key: "actions",
+            header: "Akce",
+            width: "10%",
+            align: "right" as const,
+            render: (res: WarehouseReservation) =>
+              res.status === "ACTIVE" ? (
+                <Box
+                  sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}
+                >
+                  <IconButton
+                    size="small"
+                    onClick={() =>
+                      navigate("/warehouse/issues/new", {
+                        state: {
+                          reservationId: res.id,
+                          itemId: res.item_id,
+                          projectId: res.project_id,
+                          quantity: Number(res.remaining_qty),
+                          itemName: res.item?.name,
+                        },
+                      })
+                    }
+                    aria-label="Vytvořit výdej"
+                    title="Vytvořit výdej"
+                  >
+                    {IssueIcon}
+                  </IconButton>
+                  <IconButton
+                    size="small"
+                    color="error"
+                    onClick={() => setCancelTarget(res)}
+                    aria-label="Zrušit rezervaci"
+                    title="Zrušit rezervaci"
+                  >
+                    {CancelIcon}
+                  </IconButton>
+                </Box>
+              ) : null,
+          },
+        ]
+      : []),
+  ];
+
   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">Rezervace</h1>
-          <p className="admin-page-subtitle">
-            {pagination?.total ?? items.length}{" "}
-            {czechPlural(
-              pagination?.total ?? items.length,
-              "rezervace",
-              "rezervace",
-              "rezervací",
-            )}
-          </p>
-        </div>
-        <div className="admin-page-actions">
-          {canOperate && (
-            <button
-              onClick={() => setShowCreateModal(true)}
-              className="admin-btn admin-btn-primary"
-            >
-              <svg
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
+        <PageHeader
+          title="Rezervace"
+          subtitle={subtitle}
+          actions={
+            canOperate ? (
+              <Button
+                startIcon={PlusIcon}
+                onClick={() => setShowCreateModal(true)}
               >
-                <line x1="12" y1="5" x2="12" y2="19" />
-                <line x1="5" y1="12" x2="19" y2="12" />
-              </svg>
-              Nová rezervace
-            </button>
-          )}
-        </div>
+                Nová rezervace
+              </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">
-            <select
-              value={statusFilter}
-              onChange={(e) => {
-                setStatusFilter(e.target.value);
+      <FilterBar>
+        <Box sx={{ flex: "0 0 160px" }}>
+          <Select
+            value={statusFilter}
+            onChange={(val) => {
+              setStatusFilter(val);
+              setPage(1);
+            }}
+            options={[
+              { value: "", label: "Všechny stavy" },
+              { value: "ACTIVE", label: "Aktivní" },
+              { value: "FULFILLED", label: "Splněna" },
+              { value: "CANCELLED", label: "Zrušena" },
+            ]}
+          />
+        </Box>
+        {projects.length > 0 && (
+          <Box sx={{ flex: "0 0 220px" }}>
+            <Select
+              value={projectId === "" ? "" : String(projectId)}
+              onChange={(val) => {
+                setProjectId(val === "" ? "" : Number(val));
                 setPage(1);
               }}
-              className="admin-form-select"
-            >
-              <option value="">Všechny stavy</option>
-              <option value="ACTIVE">Aktivní</option>
-              <option value="FULFILLED">Splněna</option>
-              <option value="CANCELLED">Zrušena</option>
-            </select>
-            {projects.length > 0 && (
-              <select
-                value={projectId}
-                onChange={(e) => {
-                  setProjectId(
-                    e.target.value === "" ? "" : Number(e.target.value),
-                  );
-                  setPage(1);
-                }}
-                className="admin-form-select"
-              >
-                <option value="">Všechny projekty</option>
-                {projects.map((p) => (
-                  <option key={p.id} value={p.id}>
-                    {p.project_number} – {p.name}
-                  </option>
-                ))}
-              </select>
-            )}
-            {hasActiveFilters && (
-              <button
-                type="button"
-                className="admin-btn admin-btn-secondary"
-                onClick={resetFilters}
-                style={{ whiteSpace: "nowrap" }}
-              >
-                Zrušit filtry
-              </button>
-            )}
-          </div>
+              options={[
+                { value: "", label: "Všechny projekty" },
+                ...projects.map((p) => ({
+                  value: String(p.id),
+                  label: `${p.project_number} – ${p.name}`,
+                })),
+              ]}
+            />
+          </Box>
+        )}
+        {hasActiveFilters && (
+          <Button variant="outlined" onClick={resetFilters}>
+            Zrušit filtry
+          </Button>
+        )}
+      </FilterBar>
 
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={`${statusFilter}-${projectId}-${page}-${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="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>
-                  </div>
-                  <p>
-                    {hasActiveFilters
-                      ? "Žádné rezervace pro zadaný filtr."
-                      : "Zatím nejsou žádné rezervace."}
-                  </p>
-                  {canOperate && !hasActiveFilters && (
-                    <button
+      <Card sx={{ opacity: isFetching ? 0.6 : 1, transition: "opacity .2s" }}>
+        <DataTable<WarehouseReservation>
+          columns={columns}
+          rows={items}
+          rowKey={(res) => res.id}
+          empty={
+            hasActiveFilters ? (
+              <EmptyState title="Žádné rezervace pro zadaný filtr." />
+            ) : (
+              <EmptyState
+                title="Zatím nejsou žádné rezervace."
+                action={
+                  canOperate ? (
+                    <Button
+                      startIcon={PlusIcon}
                       onClick={() => setShowCreateModal(true)}
-                      className="admin-btn admin-btn-primary"
                     >
                       Vytvořit první rezervaci
-                    </button>
-                  )}
-                </div>
-              )}
-              {items.length > 0 && (
-                <div className="admin-table-responsive">
-                  <table className="admin-table">
-                    <thead>
-                      <tr>
-                        <th>Položka</th>
-                        <th>Projekt</th>
-                        <th>Množství</th>
-                        <th>Zbývá</th>
-                        <th>Stav</th>
-                        <th>Rezervoval</th>
-                        <th>Vytvořeno</th>
-                        {canOperate && <th>Akce</th>}
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {items.map((res) => (
-                        <tr key={res.id}>
-                          <td className="fw-500">
-                            {res.item?.name || `ID: ${res.item_id}`}
-                          </td>
-                          <td>{res.project?.name || "—"}</td>
-                          <td className="admin-mono">{Number(res.quantity)}</td>
-                          <td className="admin-mono">
-                            {Number(res.remaining_qty)}
-                          </td>
-                          <td>
-                            <span
-                              className={`admin-badge ${STATUS_BADGE[res.status] ?? ""}`}
-                            >
-                              {STATUS_LABEL[res.status] ?? res.status}
-                            </span>
-                          </td>
-                          <td>
-                            {res.reserved_by_user
-                              ? `${res.reserved_by_user.first_name} ${res.reserved_by_user.last_name}`
-                              : "—"}
-                          </td>
-                          <td className="admin-mono">
-                            {formatDate(res.created_at)}
-                          </td>
-                          {canOperate && (
-                            <td>
-                              <div className="admin-table-actions">
-                                {res.status === "ACTIVE" && (
-                                  <button
-                                    onClick={() =>
-                                      navigate("/warehouse/issues/new", {
-                                        state: {
-                                          reservationId: res.id,
-                                          itemId: res.item_id,
-                                          projectId: res.project_id,
-                                          quantity: Number(res.remaining_qty),
-                                          itemName: res.item?.name,
-                                        },
-                                      })
-                                    }
-                                    className="admin-btn-icon"
-                                    title="Vytvořit výdej"
-                                    aria-label="Vytvořit výdej"
-                                  >
-                                    <svg
-                                      width="16"
-                                      height="16"
-                                      viewBox="0 0 24 24"
-                                      fill="none"
-                                      stroke="currentColor"
-                                      strokeWidth="2"
-                                      strokeLinecap="round"
-                                      strokeLinejoin="round"
-                                    >
-                                      <polyline points="7 13 12 18 17 13" />
-                                      <line x1="12" y1="18" x2="12" y2="6" />
-                                    </svg>
-                                  </button>
-                                )}
-                                {res.status === "ACTIVE" && (
-                                  <button
-                                    onClick={() => setCancelTarget(res)}
-                                    className="admin-btn-icon danger"
-                                    title="Zrušit rezervaci"
-                                    aria-label="Zrušit rezervaci"
-                                  >
-                                    <svg
-                                      width="16"
-                                      height="16"
-                                      viewBox="0 0 24 24"
-                                      fill="none"
-                                      stroke="currentColor"
-                                      strokeWidth="2"
-                                      strokeLinecap="round"
-                                      strokeLinejoin="round"
-                                    >
-                                      <circle cx="12" cy="12" r="10" />
-                                      <line x1="15" y1="9" x2="9" y2="15" />
-                                      <line x1="9" y1="9" x2="15" y2="15" />
-                                    </svg>
-                                  </button>
-                                )}
-                              </div>
-                            </td>
-                          )}
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </motion.div>
-          </AnimatePresence>
-
-          <Pagination pagination={pagination} onPageChange={setPage} />
-        </div>
-      </motion.div>
+                    </Button>
+                  ) : undefined
+                }
+              />
+            )
+          }
+        />
+        <Pagination
+          page={page}
+          pageCount={pagination?.total_pages ?? 1}
+          onChange={setPage}
+        />
+      </Card>
 
       {/* Create reservation modal */}
-      <FormModal
+      <Modal
         isOpen={showCreateModal}
         onClose={() => setShowCreateModal(false)}
         onSubmit={handleCreate}
         title="Nová rezervace"
-        submitLabel="Vytvořit rezervaci"
+        submitText="Vytvořit rezervaci"
         loading={saving}
       >
-        <div className="admin-form">
-          <FormField label="Položka" required>
-            <ItemPicker
-              value={form.item_id}
-              onChange={(id) => setForm((prev) => ({ ...prev, item_id: id }))}
-            />
-          </FormField>
-          <FormField label="Projekt" required>
-            <select
-              value={form.project_id ?? ""}
-              onChange={(e) =>
-                setForm((prev) => ({
-                  ...prev,
-                  project_id: e.target.value ? Number(e.target.value) : null,
-                }))
-              }
-              className="admin-form-select"
-            >
-              <option value="">Vyberte projekt</option>
-              {projects.map((p) => (
-                <option key={p.id} value={p.id}>
-                  {p.project_number} – {p.name}
-                </option>
-              ))}
-            </select>
-          </FormField>
-          <FormField label="Množství" required>
-            <input
-              type="number"
-              value={form.quantity || ""}
-              onChange={(e) =>
-                setForm((prev) => ({
-                  ...prev,
-                  quantity: Number(e.target.value),
-                }))
-              }
-              className="admin-form-input"
-              min="0"
-              step="0.001"
-            />
-          </FormField>
-          <FormField label="Poznámky">
-            <textarea
-              value={form.notes}
-              onChange={(e) =>
-                setForm((prev) => ({ ...prev, notes: e.target.value }))
-              }
-              className="admin-form-input"
-              rows={3}
-              placeholder="Volitelné poznámky"
-            />
-          </FormField>
-        </div>
-      </FormModal>
+        <Field label="Položka" required>
+          <ItemPicker
+            value={form.item_id}
+            onChange={(id) => setForm((prev) => ({ ...prev, item_id: id }))}
+          />
+        </Field>
+        <Field label="Projekt" required>
+          <Select
+            value={form.project_id === null ? "" : String(form.project_id)}
+            onChange={(val) =>
+              setForm((prev) => ({
+                ...prev,
+                project_id: val ? Number(val) : null,
+              }))
+            }
+            options={[
+              { value: "", label: "Vyberte projekt" },
+              ...projects.map((p) => ({
+                value: String(p.id),
+                label: `${p.project_number} – ${p.name}`,
+              })),
+            ]}
+          />
+        </Field>
+        <Field label="Množství" required>
+          <TextField
+            type="number"
+            value={form.quantity || ""}
+            onChange={(e) =>
+              setForm((prev) => ({
+                ...prev,
+                quantity: Number(e.target.value),
+              }))
+            }
+            inputProps={{ min: 0, step: 0.001 }}
+          />
+        </Field>
+        <Field label="Poznámky">
+          <TextField
+            multiline
+            minRows={3}
+            value={form.notes}
+            onChange={(e) =>
+              setForm((prev) => ({ ...prev, notes: e.target.value }))
+            }
+            placeholder="Volitelné poznámky"
+          />
+        </Field>
+      </Modal>
 
       {/* Cancel confirmation modal */}
-      <ConfirmModal
+      <ConfirmDialog
         isOpen={!!cancelTarget}
         onClose={() => setCancelTarget(null)}
         onConfirm={handleCancel}
@@ -488,6 +490,6 @@ export default function WarehouseReservations() {
         confirmVariant="danger"
         loading={cancelling}
       />
-    </div>
+    </Box>
   );
 }