diff --git a/src/admin/pages/WarehouseInventoryDetail.tsx b/src/admin/pages/WarehouseInventoryDetail.tsx
index 517de9d..0f6f58a 100644
--- a/src/admin/pages/WarehouseInventoryDetail.tsx
+++ b/src/admin/pages/WarehouseInventoryDetail.tsx
@@ -1,23 +1,38 @@
 import { useState } from "react";
-import { useParams, Link } from "react-router-dom";
+import { useParams, Link as RouterLink } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
+import { motion } from "framer-motion";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
 import { useAlert } from "../context/AlertContext";
 import { useAuth } from "../context/AuthContext";
 import Forbidden from "../components/Forbidden";
-import { motion } from "framer-motion";
-import ConfirmModal from "../components/ConfirmModal";
-import FormField from "../components/FormField";
 
 import { formatDate } from "../utils/formatters";
 import {
   warehouseInventoryDetailOptions,
   type WarehouseInventorySession,
+  type WarehouseInventoryItem,
 } from "../lib/queries/warehouse";
 import { useApiMutation } from "../lib/queries/mutations";
+import {
+  Button,
+  Card,
+  DataTable,
+  StatusChip,
+  EmptyState,
+  LoadingState,
+  PageHeader,
+  ConfirmDialog,
+  type DataColumn,
+} from "../ui";
 
-const STATUS_BADGE: Record<string, string> = {
-  DRAFT: "admin-badge-warning",
-  CONFIRMED: "admin-badge-active",
+const STATUS_COLOR: Record<
+  string,
+  "default" | "success" | "error" | "warning" | "info"
+> = {
+  DRAFT: "warning",
+  CONFIRMED: "success",
 };
 
 const STATUS_LABEL: Record<string, string> = {
@@ -25,6 +40,19 @@ const STATUS_LABEL: Record<string, string> = {
   CONFIRMED: "Potvrzeno",
 };
 
+const BackIcon = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <path d="M19 12H5M12 19l-7-7 7-7" />
+  </svg>
+);
+
 export default function WarehouseInventoryDetail() {
   const { id } = useParams();
   const alert = useAlert();
@@ -65,206 +93,222 @@ export default function WarehouseInventoryDetail() {
   const confirming = confirmMutation.isPending;
 
   if (isPending) {
-    return (
-      <div className="admin-loading">
-        <div className="admin-spinner" />
-      </div>
-    );
+    return <LoadingState />;
   }
 
   if (error || !session) {
     return (
-      <div>
-        <div className="admin-page-header">
-          <div>
-            <Link
+      <Box>
+        <PageHeader
+          title="Inventura"
+          actions={
+            <Button
+              component={RouterLink}
               to="/warehouse/inventory"
-              className="admin-btn-icon"
-              title="Zpět na seznam"
+              variant="outlined"
+              color="inherit"
+              startIcon={BackIcon}
             >
-              <svg
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-              >
-                <path d="M19 12H5M12 19l-7-7 7-7" />
-              </svg>
-            </Link>
-          </div>
-        </div>
-        <div className="admin-card">
-          <div className="admin-card-body">
-            <div className="admin-empty-state">
-              <p>Inventura nebyla nalezena.</p>
-            </div>
-          </div>
-        </div>
-      </div>
+              Zpět
+            </Button>
+          }
+        />
+        <Card>
+          <EmptyState title="Inventura nebyla nalezena." />
+        </Card>
+      </Box>
     );
   }
 
   const s = session as WarehouseInventorySession;
   const items = s.items ?? [];
 
+  const itemColumns: DataColumn<WarehouseInventoryItem>[] = [
+    {
+      key: "item",
+      header: "Položka",
+      width: "25%",
+      bold: true,
+      render: (row) => row.item?.name || `ID: ${row.item_id}`,
+    },
+    {
+      key: "location",
+      header: "Lokace",
+      width: "15%",
+      mono: true,
+      render: (row) => row.location?.code || "—",
+    },
+    {
+      key: "system_qty",
+      header: "Systémové množství",
+      width: "18%",
+      mono: true,
+      render: (row) => String(Number(row.system_qty)),
+    },
+    {
+      key: "actual_qty",
+      header: "Skutečné množství",
+      width: "18%",
+      mono: true,
+      render: (row) => String(Number(row.actual_qty)),
+    },
+    {
+      key: "difference",
+      header: "Rozdíl",
+      width: "12%",
+      render: (row) => {
+        const diff = Number(row.difference);
+        const color =
+          diff > 0
+            ? "success.main"
+            : diff < 0
+              ? "error.main"
+              : "text.secondary";
+        return (
+          <Typography
+            variant="body2"
+            sx={{
+              fontFamily: "'DM Mono', Menlo, monospace",
+              fontWeight: 500,
+              color,
+            }}
+          >
+            {diff > 0 ? `+${diff}` : diff}
+          </Typography>
+        );
+      },
+    },
+    {
+      key: "notes",
+      header: "Poznámka",
+      width: "12%",
+      render: (row) => row.notes || "—",
+    },
+  ];
+
   return (
-    <div>
+    <Box>
       {/* Header */}
       <motion.div
-        className="admin-page-header"
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25 }}
       >
-        <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
-          <Link
-            to="/warehouse/inventory"
-            className="admin-btn-icon"
-            title="Zpět na seznam"
-            aria-label="Zpět na seznam"
-          >
-            <svg
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-            >
-              <path d="M19 12H5M12 19l-7-7 7-7" />
-            </svg>
-          </Link>
-          <div>
-            <h1 className="admin-page-title">
-              {s.session_number || "Inventura"}
-            </h1>
-          </div>
-          <span
-            className={`admin-badge ${STATUS_BADGE[s.status] ?? ""}`}
-            style={{ marginLeft: "0.5rem" }}
-          >
-            {STATUS_LABEL[s.status] ?? s.status}
-          </span>
-        </div>
-        <div className="admin-page-actions">
-          {s.status === "DRAFT" && (
-            <button
-              onClick={() => setShowConfirmModal(true)}
-              className="admin-btn admin-btn-primary"
-              disabled={confirming}
-            >
-              {confirming ? "Potvrzování..." : "Potvrdit inventuru"}
-            </button>
-          )}
-        </div>
+        <PageHeader
+          title={s.session_number || "Inventura"}
+          actions={
+            <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+              <Button
+                component={RouterLink}
+                to="/warehouse/inventory"
+                variant="outlined"
+                color="inherit"
+                startIcon={BackIcon}
+              >
+                Zpět
+              </Button>
+              <StatusChip
+                label={STATUS_LABEL[s.status] ?? s.status}
+                color={STATUS_COLOR[s.status] ?? "default"}
+              />
+              {s.status === "DRAFT" && (
+                <Button
+                  onClick={() => setShowConfirmModal(true)}
+                  disabled={confirming}
+                >
+                  {confirming ? "Potvrzování..." : "Potvrdit inventuru"}
+                </Button>
+              )}
+            </Box>
+          }
+        />
       </motion.div>
 
       {/* Header info */}
       <motion.div
-        className="admin-card"
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25, delay: 0.06 }}
       >
-        <div className="admin-card-body">
-          <h3 className="admin-card-title">Základní údaje</h3>
-          <div className="admin-form">
-            <div className="admin-form-row">
-              <FormField label="Číslo inventury">
-                <div className="admin-mono fw-500">
-                  {s.session_number || "—"}
-                </div>
-              </FormField>
-              <FormField label="Vytvořeno">
-                <div className="admin-mono">{formatDate(s.created_at)}</div>
-              </FormField>
-            </div>
+        <Card sx={{ mb: 3 }}>
+          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
+            Základní údaje
+          </Typography>
+          <Box
+            sx={{
+              display: "grid",
+              gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+              gap: 2,
+            }}
+          >
+            <Box>
+              <Typography variant="caption" color="text.secondary">
+                Číslo inventury
+              </Typography>
+              <Typography
+                variant="body2"
+                sx={{
+                  fontFamily: "'DM Mono', Menlo, monospace",
+                  fontWeight: 500,
+                }}
+              >
+                {s.session_number || "—"}
+              </Typography>
+            </Box>
+            <Box>
+              <Typography variant="caption" color="text.secondary">
+                Vytvořeno
+              </Typography>
+              <Typography
+                variant="body2"
+                sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
+              >
+                {formatDate(s.created_at)}
+              </Typography>
+            </Box>
             {s.notes && (
-              <FormField label="Poznámky">
-                <div style={{ whiteSpace: "pre-wrap" }}>{s.notes}</div>
-              </FormField>
+              <Box sx={{ gridColumn: { sm: "1 / -1" } }}>
+                <Typography variant="caption" color="text.secondary">
+                  Poznámky
+                </Typography>
+                <Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
+                  {s.notes}
+                </Typography>
+              </Box>
             )}
-          </div>
-        </div>
+          </Box>
+        </Card>
       </motion.div>
 
       {/* Lines table */}
       <motion.div
-        className="admin-card"
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25, delay: 0.08 }}
       >
-        <div className="admin-card-body">
-          <h3 className="admin-card-title">Položky</h3>
-          {items.length === 0 ? (
-            <div className="admin-empty-state">Žádné řádky</div>
-          ) : (
-            <div className="admin-table-responsive">
-              <table className="admin-table">
-                <thead>
-                  <tr>
-                    <th>Položka</th>
-                    <th>Lokace</th>
-                    <th>Systémové množství</th>
-                    <th>Skutečné množství</th>
-                    <th>Rozdíl</th>
-                    <th>Poznámka</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {items.map((item) => {
-                    const diff = Number(item.difference);
-                    const diffColor =
-                      diff > 0
-                        ? "var(--success)"
-                        : diff < 0
-                          ? "var(--danger)"
-                          : "var(--text-secondary)";
-                    return (
-                      <tr key={item.id}>
-                        <td className="fw-500">
-                          {item.item?.name || `ID: ${item.item_id}`}
-                        </td>
-                        <td className="admin-mono">
-                          {item.location?.code || "—"}
-                        </td>
-                        <td className="admin-mono">
-                          {Number(item.system_qty)}
-                        </td>
-                        <td className="admin-mono">
-                          {Number(item.actual_qty)}
-                        </td>
-                        <td
-                          className="admin-mono fw-500"
-                          style={{ color: diffColor }}
-                        >
-                          {diff > 0 ? `+${diff}` : diff}
-                        </td>
-                        <td>{item.notes || "—"}</td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
+        <Card sx={{ mb: 3 }}>
+          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
+            Položky
+          </Typography>
+          <DataTable<WarehouseInventoryItem>
+            columns={itemColumns}
+            rows={items}
+            rowKey={(row) => row.id}
+            empty={<EmptyState title="Žádné řádky" />}
+          />
+        </Card>
       </motion.div>
 
       {/* Confirm modal */}
-      <ConfirmModal
+      <ConfirmDialog
         isOpen={showConfirmModal}
         onClose={() => setShowConfirmModal(false)}
         onConfirm={handleConfirm}
         title="Potvrdit inventuru"
         message={`Opravdu chcete potvrdit inventuru „${s.session_number || s.id}"? Potvrzením se aktualizují skladové zásoby.`}
         confirmText="Potvrdit inventuru"
-        type="warning"
         loading={confirming}
       />
-    </div>
+    </Box>
   );
 }