diff --git a/src/admin/pages/OffersTemplates.tsx b/src/admin/pages/OffersTemplates.tsx
index 4f91c14..107fcca 100644
--- a/src/admin/pages/OffersTemplates.tsx
+++ b/src/admin/pages/OffersTemplates.tsx
@@ -1,11 +1,11 @@
-import { useState, useRef, type ReactNode } from "react";
+import { useState, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
+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 { motion } from "framer-motion";
-import ConfirmModal from "../components/ConfirmModal";
-import FormModal from "../components/FormModal";
-import FormField from "../components/FormField";
 import Forbidden from "../components/Forbidden";
 import RichEditor from "../components/RichEditor";
 import {
@@ -16,8 +16,24 @@ import {
   type ScopeSection,
 } from "../lib/queries/offers";
 import { useApiMutation } from "../lib/queries/mutations";
-
 import apiFetch from "../utils/api";
+import {
+  Button,
+  Card,
+  DataTable,
+  Modal,
+  ConfirmDialog,
+  Field,
+  TextField,
+  StatusChip,
+  PageHeader,
+  EmptyState,
+  LoadingState,
+  Tabs,
+  TabPanel,
+  type DataColumn,
+  type TabDef,
+} from "../ui";
 
 const API_BASE = "/api/admin";
 
@@ -33,45 +49,130 @@ interface ScopeForm {
   sections: ScopeSection[];
 }
 
+const PlusIcon = (
+  <svg
+    width="16"
+    height="16"
+    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>
+);
+const UpIcon = (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <path d="M18 15l-6-6-6 6" />
+  </svg>
+);
+const DownIcon = (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <path d="M6 9l6 6 6-6" />
+  </svg>
+);
+const RemoveIcon = (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+);
+
 export default function OffersTemplates() {
   const { hasPermission } = useAuth();
   const [activeTab, setActiveTab] = useState<"items" | "scopes">("items");
 
   if (!hasPermission("settings.templates")) return <Forbidden />;
 
+  const tabs: TabDef[] = [
+    { value: "items", label: "Šablony položek" },
+    { value: "scopes", label: "Šablony rozsahu" },
+  ];
+
   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">Šablony</h1>
-          <p className="admin-page-subtitle">
-            Šablony položek a rozsahu projektu
-          </p>
-        </div>
+        <PageHeader
+          title="Šablony"
+          subtitle="Šablony položek a rozsahu projektu"
+        />
       </motion.div>
 
-      <div className="admin-tabs mb-4">
-        <button
-          className={`admin-tab ${activeTab === "items" ? "active" : ""}`}
-          onClick={() => setActiveTab("items")}
-        >
-          Šablony položek
-        </button>
-        <button
-          className={`admin-tab ${activeTab === "scopes" ? "active" : ""}`}
-          onClick={() => setActiveTab("scopes")}
-        >
-          Šablony rozsahu
-        </button>
-      </div>
+      <motion.div
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.25, delay: 0.06 }}
+      >
+        <Tabs
+          value={activeTab}
+          onChange={(v) => setActiveTab(v as "items" | "scopes")}
+          tabs={tabs}
+        />
+      </motion.div>
 
-      {activeTab === "items" ? <ItemTemplatesTab /> : <ScopeTemplatesTab />}
-    </div>
+      <TabPanel value="items" current={activeTab}>
+        <ItemTemplatesTab />
+      </TabPanel>
+      <TabPanel value="scopes" current={activeTab}>
+        <ScopeTemplatesTab />
+      </TabPanel>
+    </Box>
   );
 }
 
@@ -169,183 +270,158 @@ function ItemTemplatesTab() {
   };
 
   if (isPending) {
-    return (
-      <div className="admin-loading">
-        <div className="admin-spinner" />
-      </div>
-    );
+    return <LoadingState />;
   }
-  return (
-    <>
-      <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-header flex-between">
-          <h3 className="admin-card-title">
-            Šablony položek ({templates.length})
-          </h3>
-          <button
-            onClick={openCreate}
-            className="admin-btn admin-btn-primary admin-btn-sm"
+
+  const columns: DataColumn<ItemTemplate>[] = [
+    {
+      key: "name",
+      header: "Název",
+      width: "26%",
+      bold: true,
+      render: (t) => t.name,
+    },
+    {
+      key: "description",
+      header: "Popis",
+      width: "30%",
+      render: (t) => (
+        <Box component="span" sx={{ color: "text.secondary" }}>
+          {t.description || "—"}
+        </Box>
+      ),
+    },
+    {
+      key: "default_price",
+      header: "Cena",
+      width: "14%",
+      mono: true,
+      render: (t) => Number(t.default_price).toFixed(2),
+    },
+    {
+      key: "category",
+      header: "Kategorie",
+      width: "18%",
+      render: (t) => (
+        <Box component="span" sx={{ color: "text.secondary" }}>
+          {t.category || "—"}
+        </Box>
+      ),
+    },
+    {
+      key: "actions",
+      header: "Akce",
+      width: "12%",
+      align: "right",
+      render: (t) => (
+        <Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
+          <IconButton
+            size="small"
+            onClick={() => openEdit(t)}
+            aria-label="Upravit"
+            title="Upravit"
           >
-            <svg
-              width="16"
-              height="16"
-              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
-          </button>
-        </div>
-        <div className="admin-card-body">
-          {templates.length === 0 ? (
-            <div className="admin-empty-state">
-              <p>Zatím žádné šablony položek.</p>
-            </div>
-          ) : (
-            <div className="admin-table-responsive">
-              <table className="admin-table">
-                <thead>
-                  <tr>
-                    <th>Název</th>
-                    <th>Popis</th>
-                    <th>Cena</th>
-                    <th>Kategorie</th>
-                    <th>Akce</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {templates.map((t) => (
-                    <tr key={t.id}>
-                      <td className="fw-500">{t.name}</td>
-                      <td style={{ color: "var(--text-secondary)" }}>
-                        {t.description || "—"}
-                      </td>
-                      <td>{Number(t.default_price).toFixed(2)}</td>
-                      <td style={{ color: "var(--text-secondary)" }}>
-                        {t.category || "—"}
-                      </td>
-                      <td>
-                        <div className="admin-table-actions">
-                          <button
-                            onClick={() => openEdit(t)}
-                            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"
-                            >
-                              <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={() =>
-                              setDeleteConfirm({ show: true, template: t })
-                            }
-                            className="admin-btn-icon danger"
-                            title="Smazat"
-                            aria-label="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>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
-      </motion.div>
+            {EditIcon}
+          </IconButton>
+          <IconButton
+            size="small"
+            color="error"
+            onClick={() => setDeleteConfirm({ show: true, template: t })}
+            aria-label="Smazat"
+            title="Smazat"
+          >
+            {DeleteIcon}
+          </IconButton>
+        </Box>
+      ),
+    },
+  ];
+
+  return (
+    <Box>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          mb: 2,
+        }}
+      >
+        <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+          Šablony položek ({templates.length})
+        </Typography>
+        <Button size="small" startIcon={PlusIcon} onClick={openCreate}>
+          Přidat
+        </Button>
+      </Box>
+
+      <Card>
+        <DataTable<ItemTemplate>
+          columns={columns}
+          rows={templates}
+          rowKey={(t) => t.id}
+          empty={<EmptyState title="Zatím žádné šablony položek." />}
+        />
+      </Card>
 
       {/* Item Template Modal */}
-      <FormModal
+      <Modal
         isOpen={showModal}
         onClose={() => setShowModal(false)}
         onSubmit={handleSubmit}
         title={editingTemplate ? "Upravit šablonu" : "Nová šablona položky"}
-        submitLabel={editingTemplate ? "Uložit" : "Vytvořit"}
+        submitText={editingTemplate ? "Uložit" : "Vytvořit"}
         loading={saving}
+        maxWidth="md"
       >
-        <div className="admin-form">
-          <FormField label="Název" required>
-            <input
-              type="text"
-              value={form.name}
-              onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
-              className="admin-form-input"
-            />
-          </FormField>
-          <FormField label="Popis">
-            <textarea
-              value={form.description}
+        <Field label="Název" required>
+          <TextField
+            value={form.name}
+            onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
+          />
+        </Field>
+        <Field label="Popis">
+          <TextField
+            value={form.description}
+            onChange={(e) =>
+              setForm((p) => ({ ...p, description: e.target.value }))
+            }
+            multiline
+            rows={2}
+          />
+        </Field>
+        <Box
+          sx={{
+            display: "grid",
+            gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+            gap: 2,
+          }}
+        >
+          <Field label="Výchozí cena">
+            <TextField
+              type="number"
+              value={form.default_price}
               onChange={(e) =>
                 setForm((p) => ({
                   ...p,
-                  description: e.target.value,
+                  default_price: parseFloat(e.target.value),
                 }))
               }
-              className="admin-form-input"
-              rows={2}
+              slotProps={{ htmlInput: { step: "0.01", inputMode: "decimal" } }}
             />
-          </FormField>
-          <div className="admin-form-row">
-            <FormField label="Výchozí cena">
-              <input
-                type="number"
-                value={form.default_price}
-                onChange={(e) =>
-                  setForm((p) => ({
-                    ...p,
-                    default_price: parseFloat(e.target.value),
-                  }))
-                }
-                className="admin-form-input"
-                step="0.01"
-                inputMode="decimal"
-              />
-            </FormField>
-            <FormField label="Kategorie">
-              <input
-                type="text"
-                value={form.category}
-                onChange={(e) =>
-                  setForm((p) => ({ ...p, category: e.target.value }))
-                }
-                className="admin-form-input"
-              />
-            </FormField>
-          </div>
-        </div>
-      </FormModal>
+          </Field>
+          <Field label="Kategorie">
+            <TextField
+              value={form.category}
+              onChange={(e) =>
+                setForm((p) => ({ ...p, category: e.target.value }))
+              }
+            />
+          </Field>
+        </Box>
+      </Modal>
 
-      <ConfirmModal
+      <ConfirmDialog
         isOpen={deleteConfirm.show}
         onClose={() => setDeleteConfirm({ show: false, template: null })}
         onConfirm={handleDelete}
@@ -353,10 +429,10 @@ function ItemTemplatesTab() {
         message={`Opravdu chcete smazat šablonu "${deleteConfirm.template?.name}"?`}
         confirmText="Smazat"
         cancelText="Zrušit"
-        type="danger"
+        confirmVariant="danger"
         loading={deleting}
       />
-    </>
+    </Box>
   );
 }
 
@@ -533,268 +609,256 @@ function ScopeTemplatesTab() {
     }
   };
 
-  return (
-    <>
-      <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-header flex-between">
-          <h3 className="admin-card-title">
-            Šablony rozsahu ({templates.length})
-          </h3>
-          <button
-            onClick={openCreate}
-            className="admin-btn admin-btn-primary admin-btn-sm"
+  if (isPending) {
+    return <LoadingState />;
+  }
+
+  const columns: DataColumn<ScopeTemplate>[] = [
+    {
+      key: "name",
+      header: "Název",
+      width: "80%",
+      bold: true,
+      render: (t) => t.name,
+    },
+    {
+      key: "actions",
+      header: "Akce",
+      width: "20%",
+      align: "right",
+      render: (t) => (
+        <Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
+          <IconButton
+            size="small"
+            onClick={() => openEdit(t)}
+            aria-label="Upravit"
+            title="Upravit"
           >
-            <svg
-              width="16"
-              height="16"
-              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
-          </button>
-        </div>
-        <div className="admin-card-body">
-          {templates.length === 0 ? (
-            <div className="admin-empty-state">
-              <p>Zatím žádné šablony rozsahu.</p>
-            </div>
-          ) : (
-            <div className="admin-table-responsive">
-              <table className="admin-table">
-                <thead>
-                  <tr>
-                    <th>Název</th>
-                    <th>Akce</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {templates.map((t) => (
-                    <tr key={t.id}>
-                      <td className="fw-500">{t.name}</td>
-                      <td>
-                        <div className="admin-table-actions">
-                          <button
-                            onClick={() => openEdit(t)}
-                            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"
-                            >
-                              <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={() =>
-                              setDeleteConfirm({ show: true, template: t })
-                            }
-                            className="admin-btn-icon danger"
-                            title="Smazat"
-                            aria-label="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>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
-      </motion.div>
+            {EditIcon}
+          </IconButton>
+          <IconButton
+            size="small"
+            color="error"
+            onClick={() => setDeleteConfirm({ show: true, template: t })}
+            aria-label="Smazat"
+            title="Smazat"
+          >
+            {DeleteIcon}
+          </IconButton>
+        </Box>
+      ),
+    },
+  ];
+
+  return (
+    <Box>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          mb: 2,
+        }}
+      >
+        <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+          Šablony rozsahu ({templates.length})
+        </Typography>
+        <Button size="small" startIcon={PlusIcon} onClick={openCreate}>
+          Přidat
+        </Button>
+      </Box>
+
+      <Card>
+        <DataTable<ScopeTemplate>
+          columns={columns}
+          rows={templates}
+          rowKey={(t) => t.id}
+          empty={<EmptyState title="Zatím žádné šablony rozsahu." />}
+        />
+      </Card>
 
       {/* Scope Template Modal (large) */}
-      <FormModal
+      <Modal
         isOpen={showModal}
         onClose={() => setShowModal(false)}
         onSubmit={handleSubmit}
         title={
           editingTemplate ? "Upravit šablonu rozsahu" : "Nová šablona rozsahu"
         }
-        submitLabel={editingTemplate ? "Uložit" : "Vytvořit"}
-        size="lg"
+        submitText={editingTemplate ? "Uložit" : "Vytvořit"}
+        maxWidth="lg"
         loading={saving}
       >
-        <div className="admin-form">
-          <FormField label="Název šablony" required>
-            <input
-              type="text"
-              value={form.name}
-              onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
-              className="admin-form-input"
-            />
-          </FormField>
+        <Field label="Název šablony" required>
+          <TextField
+            value={form.name}
+            onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
+          />
+        </Field>
 
-          <div className="admin-form-group">
-            <label className="admin-form-label mb-2">Sekce</label>
-            <div className="admin-scope-list">
-              {form.sections.map((section, index) => (
-                <div key={section._key} className="admin-scope-section">
-                  <div className="admin-scope-section-header">
-                    <span className="admin-scope-number">{index + 1}.</span>
-                    <span className="admin-scope-title">
-                      {section.title ||
-                        section.title_cz ||
-                        `Sekce ${index + 1}`}
-                    </span>
-                    <div className="admin-scope-actions">
-                      <button
-                        type="button"
-                        onClick={() => moveSection(index, -1)}
-                        disabled={index === 0}
-                        className="admin-btn-icon"
-                        title="Posunout nahoru"
-                        aria-label="Posunout nahoru"
-                      >
-                        <svg
-                          width="14"
-                          height="14"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                        >
-                          <path d="M18 15l-6-6-6 6" />
-                        </svg>
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => moveSection(index, 1)}
-                        disabled={index === form.sections.length - 1}
-                        className="admin-btn-icon"
-                        title="Posunout dolů"
-                        aria-label="Posunout dolů"
-                      >
-                        <svg
-                          width="14"
-                          height="14"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                        >
-                          <path d="M6 9l6 6 6-6" />
-                        </svg>
-                      </button>
-                      {form.sections.length > 1 && (
-                        <button
-                          type="button"
-                          onClick={() => removeSection(index)}
-                          className="admin-btn-icon danger"
-                          title="Odebrat"
-                          aria-label="Odebrat"
-                        >
-                          <svg
-                            width="14"
-                            height="14"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                          >
-                            <line x1="18" y1="6" x2="6" y2="18" />
-                            <line x1="6" y1="6" x2="18" y2="18" />
-                          </svg>
-                        </button>
-                      )}
-                    </div>
-                  </div>
-                  <div className="admin-form">
-                    <div className="admin-form-row">
-                      <FormField
-                        label={
-                          <>
-                            <span className="offers-lang-badge">EN</span> Název
-                            sekce
-                          </>
-                        }
-                      >
-                        <input
-                          type="text"
-                          value={section.title}
-                          onChange={(e) =>
-                            updateSection(index, "title", e.target.value)
-                          }
-                          className="admin-form-input"
-                          placeholder="Název sekce (anglicky)"
-                        />
-                      </FormField>
-                      <FormField
-                        label={
-                          <>
-                            <span className="offers-lang-badge offers-lang-badge-cz">
-                              CZ
-                            </span>{" "}
-                            Název sekce
-                          </>
-                        }
-                      >
-                        <input
-                          type="text"
-                          value={section.title_cz}
-                          onChange={(e) =>
-                            updateSection(index, "title_cz", e.target.value)
-                          }
-                          className="admin-form-input"
-                          placeholder="Název sekce (česky)"
-                        />
-                      </FormField>
-                    </div>
-                    <FormField label="Obsah">
-                      <RichEditor
-                        value={section.content}
-                        onChange={(val) => updateSection(index, "content", val)}
-                        placeholder="Obsah sekce..."
-                        minHeight="150px"
-                      />
-                    </FormField>
-                  </div>
-                </div>
-              ))}
-            </div>
-            <div style={{ marginTop: "0.75rem" }}>
-              <button
-                type="button"
-                onClick={addSection}
-                className="admin-btn admin-btn-secondary admin-btn-sm"
+        <Box>
+          <Typography
+            component="label"
+            variant="body2"
+            sx={{
+              display: "block",
+              mb: 1,
+              fontWeight: 600,
+              color: "text.secondary",
+            }}
+          >
+            Sekce
+          </Typography>
+          <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+            {form.sections.map((section, index) => (
+              <Box
+                key={section._key}
+                sx={{
+                  border: 1,
+                  borderColor: "divider",
+                  borderRadius: 2,
+                  p: 2,
+                }}
               >
-                + Přidat sekci
-              </button>
-            </div>
-          </div>
-        </div>
-      </FormModal>
+                <Box
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1,
+                    mb: 1.5,
+                  }}
+                >
+                  <Typography
+                    variant="body2"
+                    sx={{ fontWeight: 700, color: "text.secondary" }}
+                  >
+                    {index + 1}.
+                  </Typography>
+                  <Typography
+                    variant="body2"
+                    sx={{ fontWeight: 600, flex: 1 }}
+                    noWrap
+                  >
+                    {section.title || section.title_cz || `Sekce ${index + 1}`}
+                  </Typography>
+                  <IconButton
+                    size="small"
+                    onClick={() => moveSection(index, -1)}
+                    disabled={index === 0}
+                    title="Posunout nahoru"
+                    aria-label="Posunout nahoru"
+                  >
+                    {UpIcon}
+                  </IconButton>
+                  <IconButton
+                    size="small"
+                    onClick={() => moveSection(index, 1)}
+                    disabled={index === form.sections.length - 1}
+                    title="Posunout dolů"
+                    aria-label="Posunout dolů"
+                  >
+                    {DownIcon}
+                  </IconButton>
+                  {form.sections.length > 1 && (
+                    <IconButton
+                      size="small"
+                      color="error"
+                      onClick={() => removeSection(index)}
+                      title="Odebrat"
+                      aria-label="Odebrat"
+                    >
+                      {RemoveIcon}
+                    </IconButton>
+                  )}
+                </Box>
 
-      <ConfirmModal
+                <Box
+                  sx={{
+                    display: "grid",
+                    gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+                    gap: 2,
+                  }}
+                >
+                  <Box sx={{ mb: 2 }}>
+                    <Box
+                      sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 0.75,
+                        mb: 0.5,
+                      }}
+                    >
+                      <StatusChip label="EN" color="info" />
+                      <Typography
+                        component="label"
+                        variant="body2"
+                        sx={{ fontWeight: 600, color: "text.secondary" }}
+                      >
+                        Název sekce
+                      </Typography>
+                    </Box>
+                    <TextField
+                      value={section.title}
+                      onChange={(e) =>
+                        updateSection(index, "title", e.target.value)
+                      }
+                      placeholder="Název sekce (anglicky)"
+                    />
+                  </Box>
+                  <Box sx={{ mb: 2 }}>
+                    <Box
+                      sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 0.75,
+                        mb: 0.5,
+                      }}
+                    >
+                      <StatusChip label="CZ" color="success" />
+                      <Typography
+                        component="label"
+                        variant="body2"
+                        sx={{ fontWeight: 600, color: "text.secondary" }}
+                      >
+                        Název sekce
+                      </Typography>
+                    </Box>
+                    <TextField
+                      value={section.title_cz}
+                      onChange={(e) =>
+                        updateSection(index, "title_cz", e.target.value)
+                      }
+                      placeholder="Název sekce (česky)"
+                    />
+                  </Box>
+                </Box>
+
+                <Field label="Obsah">
+                  <RichEditor
+                    value={section.content}
+                    onChange={(val) => updateSection(index, "content", val)}
+                    placeholder="Obsah sekce..."
+                    minHeight="150px"
+                  />
+                </Field>
+              </Box>
+            ))}
+          </Box>
+          <Box sx={{ mt: 1.5 }}>
+            <Button
+              variant="outlined"
+              color="inherit"
+              size="small"
+              startIcon={PlusIcon}
+              onClick={addSection}
+            >
+              Přidat sekci
+            </Button>
+          </Box>
+        </Box>
+      </Modal>
+
+      <ConfirmDialog
         isOpen={deleteConfirm.show}
         onClose={() => setDeleteConfirm({ show: false, template: null })}
         onConfirm={handleDelete}
@@ -802,9 +866,9 @@ function ScopeTemplatesTab() {
         message={`Opravdu chcete smazat šablonu "${deleteConfirm.template?.name}"?`}
         confirmText="Smazat"
         cancelText="Zrušit"
-        type="danger"
+        confirmVariant="danger"
         loading={deleting}
       />
-    </>
+    </Box>
   );
 }