diff --git a/extensions/app.py b/extensions/app.py
index 0a10a91b77..38a3baa145 100644
--- a/extensions/app.py
+++ b/extensions/app.py
@@ -224,6 +224,39 @@ def _m8flow_migration(app: Flask) -> None:
 _register_request_active_hooks(flask_app)
 _register_request_tenant_context_hooks(flask_app)
 
+
+def _register_template_file_fallback_routes(app: Flask) -> None:
+    """
+    Register explicit Flask routes for PUT/DELETE template file so they work even
+    if Connexion does not register them (e.g. when spec is passed as dict and
+    operationId resolution fails). Fixes 405 Method Not Allowed on Save.
+    """
+    from m8flow_backend.routes.templates_controller import (
+        template_put_file,
+        template_delete_file,
+    )
+
+    base_path = app.config.get("SPIFFWORKFLOW_BACKEND_API_PATH_PREFIX", "/v1.0")
+    rule = f"{base_path}/m8flow/templates/<int:id>/files/<path:file_name>"
+
+    def put_view(id: int, file_name: str):
+        return template_put_file(id, file_name)
+
+    def delete_view(id: int, file_name: str):
+        return template_delete_file(id, file_name)
+
+    app.add_url_rule(rule, "m8flow_template_put_file", put_view, methods=["PUT"])
+    app.add_url_rule(rule, "m8flow_template_delete_file", delete_view, methods=["DELETE"])
+
+
+if flask_app is None:
+    raise RuntimeError("Could not access underlying Flask app from Connexion app")
+
+try:
+    _register_template_file_fallback_routes(flask_app)
+except Exception:
+    logger.warning("Failed to register template file fallback routes – may already exist", exc_info=True)
+
 # Assert again AFTER create_app (catches re-init/duplicate db/base during app creation)
 _assert_model_identity()
 _assert_db_engine_bound(flask_app)
@@ -231,9 +264,6 @@ def _m8flow_migration(app: Flask) -> None:
 # Run migrations at startup 
 _m8flow_migration(flask_app)
 
-if flask_app is None:
-    raise RuntimeError("Could not access underlying Flask app from Connexion app")
-
 # Configure SQL echo if enabled
 _configure_sql_echo(flask_app)
 
diff --git a/extensions/frontend/src/ContainerForExtensions.tsx b/extensions/frontend/src/ContainerForExtensions.tsx
index b7524667af..f569bfdb3a 100644
--- a/extensions/frontend/src/ContainerForExtensions.tsx
+++ b/extensions/frontend/src/ContainerForExtensions.tsx
@@ -42,6 +42,9 @@ import TenantPage from "./views/TenantPage";
 // m8 Extension: Import Template Gallery and Template Modeler pages
 import TemplateGalleryPage from './views/TemplateGalleryPage';
 import TemplateModelerPage from './views/TemplateModelerPage';
+import TemplateFileDiagramPage from './views/TemplateFileDiagramPage';
+import TemplateFileFormPage from './views/TemplateFileFormPage';
+import ProcessModelShowWithSaveAsTemplate from './views/ProcessModelShowWithSaveAsTemplate';
 
 const fadeIn = 'fadeIn';
 const fadeOutImmediate = 'fadeOutImmediate';
@@ -253,9 +256,12 @@ export default function ContainerForExtensions() {
         <Route path="reports" element={<ReportsPage />} />
         {/* M8Flow Extension: Tenant route */}
         <Route path="/tenants" element={<TenantPage />} />
-        {/* m8 Extension: Template Gallery and Template Modeler routes */}
+        {/* m8 Extension: Template Gallery and Template Modeler routes (more specific first) */}
+        <Route path="templates/:templateId/files/:fileName" element={<TemplateFileDiagramPage />} />
+        <Route path="templates/:templateId/form/:fileName" element={<TemplateFileFormPage />} />
         <Route path="templates/:templateId" element={<TemplateModelerPage />} />
         <Route path="templates" element={<TemplateGalleryPage />} />
+        <Route path="process-models/:process_model_id" element={<ProcessModelShowWithSaveAsTemplate />} />
         <Route path="extensions/:page_identifier" element={<Extension />} />
         <Route path="login" element={<Login />} />
         {/* Catch-all route must be last */}
diff --git a/extensions/frontend/src/components/CreateTemplateModal.tsx b/extensions/frontend/src/components/CreateTemplateModal.tsx
new file mode 100644
index 0000000000..26c85f0f27
--- /dev/null
+++ b/extensions/frontend/src/components/CreateTemplateModal.tsx
@@ -0,0 +1,195 @@
+import {
+  Alert,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  Stack,
+  TextField,
+} from "@mui/material";
+import { useEffect, useState } from "react";
+import TemplateService from "../services/TemplateService";
+import type { CreateTemplateMetadata, Template, TemplateVisibility } from "../types/template";
+import { nameToTemplateKey } from "../utils/templateKey";
+
+const VISIBILITY_OPTIONS: { value: TemplateVisibility; label: string }[] = [
+  { value: "PRIVATE", label: "Private (only you)" },
+  { value: "TENANT", label: "Tenant-wide (all users in your tenant)" },
+];
+
+export interface CreateTemplateModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess?: (template: Template) => void;
+}
+
+export default function CreateTemplateModal({
+  open,
+  onClose,
+  onSuccess,
+}: CreateTemplateModalProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [category, setCategory] = useState("");
+  const [tags, setTags] = useState("");
+  const [visibility, setVisibility] = useState<TemplateVisibility>("PRIVATE");
+  const [files, setFiles] = useState<File[]>([]);
+
+  useEffect(() => {
+    if (!open) {
+      setName("");
+      setDescription("");
+      setCategory("");
+      setTags("");
+      setVisibility("PRIVATE");
+      setFiles([]);
+      setError(null);
+    }
+  }, [open]);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selected = e.target.files;
+    if (selected) {
+      setFiles(Array.from(selected));
+    }
+  };
+
+  const handleSubmit = async () => {
+    const trimmedName = name.trim();
+    if (!trimmedName) {
+      setError("Name is required.");
+      return;
+    }
+    const template_key = nameToTemplateKey(trimmedName);
+    if (!template_key) {
+      setError("Name must contain at least one letter or number.");
+      return;
+    }
+    const hasBpmn = files.some(
+      (f) => f.name.toLowerCase().endsWith(".bpmn")
+    );
+    if (!hasBpmn) {
+      setError("At least one BPMN file is required.");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const metadata: CreateTemplateMetadata = {
+        template_key,
+        name: trimmedName,
+        visibility,
+      };
+      if (description.trim()) metadata.description = description.trim();
+      if (category.trim()) metadata.category = category.trim();
+      if (tags.trim()) {
+        metadata.tags = tags.split(",").map((s) => s.trim()).filter(Boolean);
+      }
+      const filesWithContent = files.map((f) => ({
+        name: f.name,
+        content: f,
+      }));
+      const template = await TemplateService.createTemplateWithFiles(
+        metadata,
+        filesWithContent
+      );
+      onClose();
+      onSuccess?.(template);
+    } catch (err: unknown) {
+      setError(
+        err instanceof Error ? err.message : "Failed to create template."
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <DialogTitle>Create template</DialogTitle>
+      <DialogContent>
+        <Stack spacing={2} sx={{ pt: 1 }}>
+          {error && (
+            <Alert severity="error" sx={{ mb: 1 }}>{error}</Alert>
+          )}
+          <TextField
+            label="Name"
+            required
+            fullWidth
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            disabled={loading}
+            placeholder="e.g. Approval Workflow"
+          />
+          <TextField
+            label="Description"
+            fullWidth
+            multiline
+            minRows={2}
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            disabled={loading}
+          />
+          <TextField
+            label="Category"
+            fullWidth
+            value={category}
+            onChange={(e) => setCategory(e.target.value)}
+            disabled={loading}
+          />
+          <TextField
+            label="Tags"
+            fullWidth
+            placeholder="Comma-separated"
+            value={tags}
+            onChange={(e) => setTags(e.target.value)}
+            disabled={loading}
+          />
+          <FormControl fullWidth disabled={loading}>
+            <InputLabel>Visibility</InputLabel>
+            <Select
+              value={visibility}
+              label="Visibility"
+              onChange={(e) =>
+                setVisibility(e.target.value as TemplateVisibility)
+              }
+            >
+              {VISIBILITY_OPTIONS.map((opt) => (
+                <MenuItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          <Button variant="outlined" component="label" disabled={loading}>
+            {files.length > 0
+              ? `${files.length} file(s) selected (include .bpmn)`
+              : "Choose files (BPMN required)"}
+            <input
+              type="file"
+              hidden
+              multiple
+              accept=".bpmn,.json,.dmn,.md"
+              onChange={handleFileChange}
+            />
+          </Button>
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} disabled={loading}>
+          Cancel
+        </Button>
+        <Button variant="contained" onClick={handleSubmit} disabled={loading}>
+          {loading ? "Creating..." : "Create"}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/extensions/frontend/src/components/DiagramEditorToolbar.tsx b/extensions/frontend/src/components/DiagramEditorToolbar.tsx
index 9deae39b8c..d1df0cfa6c 100644
--- a/extensions/frontend/src/components/DiagramEditorToolbar.tsx
+++ b/extensions/frontend/src/components/DiagramEditorToolbar.tsx
@@ -22,7 +22,7 @@ export type DiagramEditorToolbarProps = {
   onSetPrimaryFile: () => void;
   onDownload: () => void;
   onViewXml: () => void;
-  onSaveAsTemplate: () => void;
+  onSaveAsTemplate?: () => void;
   referencesButton: React.ReactNode;
   activeUserElement?: React.ReactElement;
   onSetPrimaryFileAvailable?: boolean;
@@ -111,15 +111,7 @@ export default function DiagramEditorToolbar({
           </Button>
         )}
       </Can>
-      {diagramType === 'bpmn' && (
-        <Button
-          variant="contained"
-          onClick={onSaveAsTemplate}
-          data-testid="save-as-template-button"
-        >
-          Save as Template
-        </Button>
-      )}
+      {/* Save as Template moved to Process Model page (not in diagram editor) */}
       {referencesButton}
       <Can
         I="PUT"
diff --git a/extensions/frontend/src/components/ImportTemplateModal.tsx b/extensions/frontend/src/components/ImportTemplateModal.tsx
new file mode 100644
index 0000000000..7b21c1baec
--- /dev/null
+++ b/extensions/frontend/src/components/ImportTemplateModal.tsx
@@ -0,0 +1,135 @@
+import {
+  Alert,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  Stack,
+  TextField,
+} from "@mui/material";
+import { useState } from "react";
+import TemplateService from "../services/TemplateService";
+import type { CreateTemplateMetadata, Template, TemplateVisibility } from "../types/template";
+import { nameToTemplateKey } from "../utils/templateKey";
+
+export interface ImportTemplateModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess?: (template: Template) => void;
+}
+
+export default function ImportTemplateModal({
+  open,
+  onClose,
+  onSuccess,
+}: ImportTemplateModalProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [name, setName] = useState("");
+  const [file, setFile] = useState<File | null>(null);
+  const [visibility, setVisibility] = useState<TemplateVisibility>("PRIVATE");
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const f = e.target.files?.[0];
+    setFile(f ?? null);
+  };
+
+  const handleSubmit = async () => {
+    const trimmedName = name.trim();
+    if (!trimmedName) {
+      setError("Name is required.");
+      return;
+    }
+    const template_key = nameToTemplateKey(trimmedName);
+    if (!template_key) {
+      setError("Name must contain at least one letter or number.");
+      return;
+    }
+    if (!file) {
+      setError("Please select a zip file.");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const metadata: CreateTemplateMetadata = {
+        template_key,
+        name: trimmedName,
+        visibility,
+      };
+      const template = await TemplateService.importTemplate(file, metadata);
+      onClose();
+      onSuccess?.(template);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Import failed.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    setName("");
+    setFile(null);
+    setVisibility("PRIVATE");
+    setError(null);
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+      <DialogTitle>Import template from zip</DialogTitle>
+      <DialogContent>
+        <Stack spacing={2} sx={{ pt: 1 }}>
+          {error && (
+            <Alert severity="error" sx={{ mb: 1 }}>{error}</Alert>
+          )}
+          <TextField
+            label="Name"
+            required
+            fullWidth
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            disabled={loading}
+            placeholder="e.g. My Workflow"
+          />
+          <FormControl fullWidth size="medium">
+            <InputLabel id="import-visibility-label">Visibility</InputLabel>
+            <Select
+              labelId="import-visibility-label"
+              label="Visibility"
+              value={visibility}
+              onChange={(e) => setVisibility(e.target.value as TemplateVisibility)}
+              disabled={loading}
+            >
+              <MenuItem value="PRIVATE">Private</MenuItem>
+              <MenuItem value="TENANT">Tenant</MenuItem>
+              <MenuItem value="PUBLIC">Public</MenuItem>
+            </Select>
+          </FormControl>
+          <Button variant="outlined" component="label" disabled={loading}>
+            {file ? file.name : "Choose zip file"}
+            <input
+              type="file"
+              hidden
+              accept=".zip"
+              onChange={handleFileChange}
+            />
+          </Button>
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose} disabled={loading}>
+          Cancel
+        </Button>
+        <Button variant="contained" onClick={handleSubmit} disabled={loading}>
+          {loading ? "Importing..." : "Import"}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/extensions/frontend/src/components/ReactDiagramEditor.tsx b/extensions/frontend/src/components/ReactDiagramEditor.tsx
index f6226c97ba..ae241f5dbe 100644
--- a/extensions/frontend/src/components/ReactDiagramEditor.tsx
+++ b/extensions/frontend/src/components/ReactDiagramEditor.tsx
@@ -26,7 +26,6 @@ import { useDiagramImport } from './useDiagramImport';
 import ReferencesModal from './ReferencesModal';
 import DiagramEditorToolbar from './DiagramEditorToolbar';
 import DiagramEditorControls from './DiagramEditorControls';
-import SaveAsTemplateModal from './SaveAsTemplateModal';
 import type { ReactDiagramEditorProps } from './ReactDiagramEditor.types';
 
 export default function ReactDiagramEditor(props: ReactDiagramEditorProps) {
@@ -50,7 +49,6 @@ export default function ReactDiagramEditor(props: ReactDiagramEditorProps) {
 
   const [performingXmlUpdates, setPerformingXmlUpdates] = useState(false);
   const [showingReferences, setShowingReferences] = useState(false);
-  const [saveAsTemplateModalOpen, setSaveAsTemplateModalOpen] = useState(false);
 
   const { targetUris } = useUriListForPermissions();
   const permissionRequestData: PermissionsToCheck = {};
@@ -166,7 +164,6 @@ export default function ReactDiagramEditor(props: ReactDiagramEditorProps) {
         onViewXml={() =>
           navigate(`/process-models/${processModelId}/form/${fileName}`)
         }
-        onSaveAsTemplate={() => setSaveAsTemplateModalOpen(true)}
         referencesButton={referencesButton}
         activeUserElement={activeUserElement}
         onSetPrimaryFileAvailable={!!onSetPrimaryFile}
@@ -176,18 +173,6 @@ export default function ReactDiagramEditor(props: ReactDiagramEditorProps) {
         onClose={() => setShowingReferences(false)}
         callers={callers}
       />
-      <SaveAsTemplateModal
-        open={saveAsTemplateModalOpen}
-        onClose={() => setSaveAsTemplateModalOpen(false)}
-        onSuccess={() => setSaveAsTemplateModalOpen(false)}
-        getBpmnXml={() =>
-          diagramModelerState
-            ? (diagramModelerState as any)
-                .saveXML({ format: true })
-                .then((xmlObject: any) => xmlObject.xml)
-            : Promise.resolve('')
-        }
-      />
       <DiagramEditorControls
         onZoomIn={() => zoom(1)}
         onZoomOut={() => zoom(-1)}
diff --git a/extensions/frontend/src/components/SaveAsTemplateModal.test.tsx b/extensions/frontend/src/components/SaveAsTemplateModal.test.tsx
index 18b2b0b3a6..f8c3aa285d 100644
--- a/extensions/frontend/src/components/SaveAsTemplateModal.test.tsx
+++ b/extensions/frontend/src/components/SaveAsTemplateModal.test.tsx
@@ -6,7 +6,7 @@ import SaveAsTemplateModal from "./SaveAsTemplateModal";
 
 vi.mock("../services/TemplateService", () => ({
   default: {
-    createTemplate: vi.fn(),
+    createTemplateWithFiles: vi.fn(),
   },
 }));
 
@@ -14,6 +14,10 @@ import TemplateService from "../services/TemplateService";
 
 const theme = createTheme();
 
+const defaultFiles = [
+  { name: "diagram.bpmn", content: new Blob(["<bpmn:definitions/>"], { type: "application/xml" }) },
+];
+
 function renderWithTheme(ui: React.ReactElement) {
   return render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>);
 }
@@ -27,14 +31,14 @@ describe("SaveAsTemplateModal", () => {
   const defaultProps = {
     open: true,
     onClose: vi.fn(),
-    getBpmnXml: vi.fn().mockResolvedValue("<bpmn:definitions/>"),
+    getFiles: vi.fn().mockResolvedValue(defaultFiles),
   };
 
   beforeEach(() => {
     vi.clearAllMocks();
     vi.mocked(defaultProps.onClose).mockClear();
-    vi.mocked(defaultProps.getBpmnXml).mockClear().mockResolvedValue("<bpmn:definitions/>");
-    vi.mocked(TemplateService.createTemplate).mockResolvedValue({
+    vi.mocked(defaultProps.getFiles).mockClear().mockResolvedValue(defaultFiles);
+    vi.mocked(TemplateService.createTemplateWithFiles).mockResolvedValue({
       id: 1,
       templateKey: "test-key",
       name: "Test Template",
@@ -68,7 +72,7 @@ describe("SaveAsTemplateModal", () => {
     await waitFor(() => {
       expect(screen.getByText("Template key is required.")).toBeInTheDocument();
     });
-    expect(TemplateService.createTemplate).not.toHaveBeenCalled();
+    expect(TemplateService.createTemplateWithFiles).not.toHaveBeenCalled();
   });
 
   it("shows validation error when name is empty on submit", async () => {
@@ -78,25 +82,25 @@ describe("SaveAsTemplateModal", () => {
     await waitFor(() => {
       expect(screen.getByText("Name is required.")).toBeInTheDocument();
     });
-    expect(TemplateService.createTemplate).not.toHaveBeenCalled();
+    expect(TemplateService.createTemplateWithFiles).not.toHaveBeenCalled();
   });
 
-  it("calls getBpmnXml and createTemplate with trimmed key and name on submit", async () => {
+  it("calls getFiles and createTemplateWithFiles with trimmed key and name on submit", async () => {
     renderWithTheme(<SaveAsTemplateModal {...defaultProps} />);
     typeInField(/Template key/i, "  my-key  ");
     typeInField(/Name/i, "  My Template  ");
     fireEvent.click(screen.getByRole("button", { name: /Create Template/i }));
     await waitFor(() => {
-      expect(defaultProps.getBpmnXml).toHaveBeenCalledTimes(1);
+      expect(defaultProps.getFiles).toHaveBeenCalledTimes(1);
     });
     await waitFor(() => {
-      expect(TemplateService.createTemplate).toHaveBeenCalledWith(
-        "<bpmn:definitions/>",
+      expect(TemplateService.createTemplateWithFiles).toHaveBeenCalledWith(
         expect.objectContaining({
           template_key: "my-key",
           name: "My Template",
           visibility: "PRIVATE",
-        })
+        }),
+        defaultFiles
       );
     });
   });
@@ -110,33 +114,47 @@ describe("SaveAsTemplateModal", () => {
     typeInField(/Tags/i, "tag1, tag2 , tag3");
     fireEvent.click(screen.getByRole("button", { name: /Create Template/i }));
     await waitFor(() => {
-      expect(TemplateService.createTemplate).toHaveBeenCalledWith(
-        "<bpmn:definitions/>",
+      expect(TemplateService.createTemplateWithFiles).toHaveBeenCalledWith(
         expect.objectContaining({
           template_key: "my-key",
           name: "My Template",
           description: "A description",
           category: "Approval",
           tags: ["tag1", "tag2", "tag3"],
-        })
+        }),
+        defaultFiles
       );
     });
   });
 
-  it("shows error when getBpmnXml returns empty string", async () => {
-    vi.mocked(defaultProps.getBpmnXml).mockResolvedValue("");
+  it("shows error when getFiles returns no bpmn file", async () => {
+    vi.mocked(defaultProps.getFiles).mockResolvedValue([
+      { name: "data.json", content: new Blob(["{}"], { type: "application/json" }) },
+    ]);
+    renderWithTheme(<SaveAsTemplateModal {...defaultProps} />);
+    typeInField(/Template key/i, "my-key");
+    typeInField(/Name/i, "My Template");
+    fireEvent.click(screen.getByRole("button", { name: /Create Template/i }));
+    await waitFor(() => {
+      expect(screen.getByText("At least one BPMN file is required.")).toBeInTheDocument();
+    });
+    expect(TemplateService.createTemplateWithFiles).not.toHaveBeenCalled();
+  });
+
+  it("shows error when getFiles returns empty array", async () => {
+    vi.mocked(defaultProps.getFiles).mockResolvedValue([]);
     renderWithTheme(<SaveAsTemplateModal {...defaultProps} />);
     typeInField(/Template key/i, "my-key");
     typeInField(/Name/i, "My Template");
     fireEvent.click(screen.getByRole("button", { name: /Create Template/i }));
     await waitFor(() => {
-      expect(screen.getByText("Could not get diagram content. Please try again.")).toBeInTheDocument();
+      expect(screen.getByText("No files to save. Please try again.")).toBeInTheDocument();
     });
-    expect(TemplateService.createTemplate).not.toHaveBeenCalled();
+    expect(TemplateService.createTemplateWithFiles).not.toHaveBeenCalled();
   });
 
-  it("shows error when createTemplate rejects", async () => {
-    vi.mocked(TemplateService.createTemplate).mockRejectedValue(new Error("Server error"));
+  it("shows error when createTemplateWithFiles rejects", async () => {
+    vi.mocked(TemplateService.createTemplateWithFiles).mockRejectedValue(new Error("Server error"));
     renderWithTheme(<SaveAsTemplateModal {...defaultProps} />);
     typeInField(/Template key/i, "my-key");
     typeInField(/Name/i, "My Template");
@@ -160,6 +178,18 @@ describe("SaveAsTemplateModal", () => {
     });
   });
 
+  it("shows error when getFiles rejects", async () => {
+    vi.mocked(defaultProps.getFiles).mockRejectedValue(new Error("Could not load files"));
+    renderWithTheme(<SaveAsTemplateModal {...defaultProps} />);
+    typeInField(/Template key/i, "my-key");
+    typeInField(/Name/i, "My Template");
+    fireEvent.click(screen.getByRole("button", { name: /Create Template/i }));
+    await waitFor(() => {
+      expect(screen.getByText("Could not load files")).toBeInTheDocument();
+    });
+    expect(TemplateService.createTemplateWithFiles).not.toHaveBeenCalled();
+  });
+
   it("Cancel button calls onClose", () => {
     renderWithTheme(<SaveAsTemplateModal {...defaultProps} />);
     fireEvent.click(screen.getByRole("button", { name: /Cancel/i }));
@@ -176,9 +206,9 @@ describe("SaveAsTemplateModal", () => {
     fireEvent.click(tenantOption);
     fireEvent.click(screen.getByRole("button", { name: /Create Template/i }));
     await waitFor(() => {
-      expect(TemplateService.createTemplate).toHaveBeenCalledWith(
-        "<bpmn:definitions/>",
-        expect.objectContaining({ visibility: "TENANT" })
+      expect(TemplateService.createTemplateWithFiles).toHaveBeenCalledWith(
+        expect.objectContaining({ visibility: "TENANT" }),
+        defaultFiles
       );
     });
   });
diff --git a/extensions/frontend/src/components/SaveAsTemplateModal.tsx b/extensions/frontend/src/components/SaveAsTemplateModal.tsx
index 48a28e3778..fc43555432 100644
--- a/extensions/frontend/src/components/SaveAsTemplateModal.tsx
+++ b/extensions/frontend/src/components/SaveAsTemplateModal.tsx
@@ -1,4 +1,5 @@
 import {
+  Alert,
   Button,
   Dialog,
   DialogActions,
@@ -13,6 +14,7 @@ import {
 } from "@mui/material";
 import { useEffect, useState } from "react";
 import TemplateService from "../services/TemplateService";
+import { nameToTemplateKey } from "../utils/templateKey";
 import type { CreateTemplateMetadata, Template, TemplateVisibility } from "../types/template";
 
 const VISIBILITY_OPTIONS: { value: TemplateVisibility; label: string }[] = [
@@ -20,23 +22,30 @@ const VISIBILITY_OPTIONS: { value: TemplateVisibility; label: string }[] = [
   { value: "TENANT", label: "Tenant-wide (all users in your tenant)" },
 ];
 
+const SUPPORTED_EXT = [".bpmn", ".json", ".dmn", ".md"];
+
+export interface SaveAsTemplateFile {
+  name: string;
+  content: Blob;
+}
+
 export interface SaveAsTemplateModalProps {
   open: boolean;
   onClose: () => void;
   onSuccess?: (template?: Template) => void;
-  getBpmnXml: () => Promise<string>;
+  /** Return all files to save with the template (at least one must be .bpmn). */
+  getFiles: () => Promise<SaveAsTemplateFile[]>;
 }
 
 export default function SaveAsTemplateModal({
   open,
   onClose,
   onSuccess,
-  getBpmnXml,
+  getFiles,
 }: SaveAsTemplateModalProps) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const [templateKey, setTemplateKey] = useState("");
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [category, setCategory] = useState("");
@@ -45,7 +54,6 @@ export default function SaveAsTemplateModal({
 
   useEffect(() => {
     if (!open) {
-      setTemplateKey("");
       setName("");
       setDescription("");
       setCategory("");
@@ -56,28 +64,36 @@ export default function SaveAsTemplateModal({
   }, [open]);
 
   const handleSubmit = async () => {
-    const trimmedKey = templateKey.trim();
     const trimmedName = name.trim();
-    if (!trimmedKey) {
-      setError("Template key is required.");
-      return;
-    }
     if (!trimmedName) {
       setError("Name is required.");
       return;
     }
+    const template_key = nameToTemplateKey(trimmedName);
+    if (!template_key) {
+      setError("Name must contain at least one letter or number.");
+      return;
+    }
 
     setLoading(true);
     setError(null);
     try {
-      const bpmnXml = await getBpmnXml();
-      if (!bpmnXml || !bpmnXml.trim()) {
-        setError("Could not get diagram content. Please try again.");
+      const files = await getFiles();
+      if (!files?.length) {
+        setError("No files to save. Please try again.");
+        setLoading(false);
+        return;
+      }
+      const hasBpmn = files.some((f) =>
+        f.name.toLowerCase().endsWith(".bpmn")
+      );
+      if (!hasBpmn) {
+        setError("At least one BPMN file is required.");
         setLoading(false);
         return;
       }
       const metadata: CreateTemplateMetadata = {
-        template_key: trimmedKey,
+        template_key,
         name: trimmedName,
         visibility,
       };
@@ -86,7 +102,11 @@ export default function SaveAsTemplateModal({
       if (tags.trim()) {
         metadata.tags = tags.split(",").map((s) => s.trim()).filter(Boolean);
       }
-      const template = await TemplateService.createTemplate(bpmnXml, metadata);
+      const filesForApi = files.map((f) => ({ name: f.name, content: f.content }));
+      const template = await TemplateService.createTemplateWithFiles(
+        metadata,
+        filesForApi
+      );
       onClose();
       onSuccess?.(template);
     } catch (err: unknown) {
@@ -111,27 +131,8 @@ export default function SaveAsTemplateModal({
       <DialogContent>
         <Stack spacing={2.5} sx={{ pt: 1 }}>
           {error && (
-            <TextField
-              fullWidth
-              size="small"
-              value={error}
-              error
-              multiline
-              minRows={1}
-              InputProps={{ readOnly: true }}
-              sx={{ "& .MuiInputBase-input": { color: "error.main" } }}
-            />
+            <Alert severity="error" sx={{ mb: 1 }}>{error}</Alert>
           )}
-          <TextField
-            label="Template key"
-            fullWidth
-            required
-            placeholder="e.g. approval-workflow"
-            value={templateKey}
-            onChange={(e) => setTemplateKey(e.target.value)}
-            disabled={loading}
-            helperText="Unique identifier (letters, numbers, hyphens)"
-          />
           <TextField
             label="Name"
             fullWidth
diff --git a/extensions/frontend/src/components/TemplateCard.tsx b/extensions/frontend/src/components/TemplateCard.tsx
index 0dcbe35044..3d9c7b7b4c 100644
--- a/extensions/frontend/src/components/TemplateCard.tsx
+++ b/extensions/frontend/src/components/TemplateCard.tsx
@@ -127,9 +127,9 @@ export default function TemplateCard({
             )}
             {template.tags && template.tags.length > 0 && (
               <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 0.5 }}>
-                {template.tags.slice(0, 3).map((tag, index) => (
+                {template.tags.slice(0, 3).map((tag) => (
                   <Chip
-                    key={index}
+                    key={tag}
                     label={tag}
                     size="small"
                     variant="outlined"
diff --git a/extensions/frontend/src/components/TemplateFileList.tsx b/extensions/frontend/src/components/TemplateFileList.tsx
new file mode 100644
index 0000000000..c5fd75a37b
--- /dev/null
+++ b/extensions/frontend/src/components/TemplateFileList.tsx
@@ -0,0 +1,117 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Visibility, GetApp } from "@mui/icons-material";
+import {
+  Box,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TableContainer,
+  IconButton,
+  Typography,
+} from "@mui/material";
+import TemplateService from "../services/TemplateService";
+import type { Template, TemplateFile } from "../types/template";
+
+const SUPPORTED_EXT = /\.(bpmn|json|dmn|md)$/i;
+
+function isSupportedFile(f: TemplateFile): boolean {
+  return SUPPORTED_EXT.test(f.fileName);
+}
+
+function getFileViewPath(templateId: number, fileName: string): string {
+  const lower = fileName.toLowerCase();
+  if (lower.endsWith(".bpmn") || lower.endsWith(".dmn")) {
+    return `/templates/${templateId}/files/${encodeURIComponent(fileName)}`;
+  }
+  if (lower.endsWith(".json") || lower.endsWith(".md")) {
+    return `/templates/${templateId}/form/${encodeURIComponent(fileName)}`;
+  }
+  return `/templates/${templateId}`;
+}
+
+interface TemplateFileListProps {
+  template: Template;
+  templateId: number;
+}
+
+export default function TemplateFileList({ template, templateId }: TemplateFileListProps) {
+  const files = (template.files ?? []).filter(isSupportedFile);
+  const primaryFileName = files.find((f) =>
+    f.fileName.toLowerCase().endsWith(".bpmn")
+  )?.fileName;
+
+  if (files.length === 0) {
+    return null;
+  }
+
+  const handleDownload = (fileName: string) => {
+    TemplateService.downloadTemplateFile(templateId, fileName).catch(() => {
+      // Error could be shown via a toast or parent state if needed
+    });
+  };
+
+  return (
+    <Box sx={{ mt: 1 }}>
+      <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
+        Files
+      </Typography>
+      <TableContainer>
+        <Table size="medium" className="process-model-file-table">
+          <TableHead>
+            <TableRow>
+              <TableCell>Name</TableCell>
+              <TableCell align="right">Actions</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {files.map((f) => {
+              const viewPath = getFileViewPath(templateId, f.fileName);
+              const isPrimary = f.fileName === primaryFileName;
+              return (
+                <TableRow key={f.fileName}>
+                  <TableCell className="process-model-file-table-filename" title={f.fileName}>
+                    <Link to={viewPath} style={{ textDecoration: "none" }}>
+                      {f.fileName}
+                    </Link>
+                    {isPrimary && (
+                      <Typography
+                        component="span"
+                        variant="caption"
+                        color="text.secondary"
+                        sx={{ ml: 0.5 }}
+                      >
+                        – Primary File
+                      </Typography>
+                    )}
+                  </TableCell>
+                  <TableCell align="right">
+                    <IconButton
+                      component={Link}
+                      to={viewPath}
+                      size="small"
+                      aria-label="View file"
+                      title="View"
+                    >
+                      <Visibility fontSize="small" />
+                    </IconButton>
+                    <IconButton
+                      size="small"
+                      aria-label="Download file"
+                      title="Download"
+                      onClick={() => handleDownload(f.fileName)}
+                    >
+                      <GetApp fontSize="small" />
+                    </IconButton>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </Box>
+  );
+}
diff --git a/extensions/frontend/src/hooks/useTemplates.ts b/extensions/frontend/src/hooks/useTemplates.ts
index 55148592d4..5d7d0d19a7 100644
--- a/extensions/frontend/src/hooks/useTemplates.ts
+++ b/extensions/frontend/src/hooks/useTemplates.ts
@@ -1,6 +1,8 @@
 import { useState, useCallback } from 'react';
 import HttpService from '../services/HttpService';
 import { Template, TemplateFilters } from '../types/template';
+import { normalizeTemplate } from '../utils/templateHelpers';
+import { PaginationObject } from '@spiffworkflow-frontend/interfaces';
 
 const FILTER_PARAM_KEYS: (keyof TemplateFilters)[] = [
   'search',
@@ -9,6 +11,8 @@ const FILTER_PARAM_KEYS: (keyof TemplateFilters)[] = [
   'visibility',
   'owner',
   'latest_only',
+  'page',
+  'per_page',
 ];
 
 function buildTemplateQueryParams(filters?: TemplateFilters): URLSearchParams {
@@ -17,7 +21,7 @@ function buildTemplateQueryParams(filters?: TemplateFilters): URLSearchParams {
   for (const key of FILTER_PARAM_KEYS) {
     const value = filters[key];
     if (value !== undefined && value !== null) {
-      params.append(key, typeof value === 'boolean' ? String(value) : value);
+      params.append(key, typeof value === 'boolean' ? String(value) : String(value));
     }
   }
   return params;
@@ -33,6 +37,7 @@ function getErrorMessage(err: unknown, fallback: string): string {
 
 interface UseTemplatesReturn {
   templates: Template[];
+  pagination: PaginationObject | null;
   templatesLoading: boolean;
   templateByIdLoading: boolean;
   templateByKeyLoading: boolean;
@@ -44,6 +49,7 @@ interface UseTemplatesReturn {
 
 export function useTemplates(): UseTemplatesReturn {
   const [templates, setTemplates] = useState<Template[]>([]);
+  const [pagination, setPagination] = useState<PaginationObject | null>(null);
   const [templatesLoading, setTemplatesLoading] = useState<boolean>(false);
   const [templateByIdLoading, setTemplateByIdLoading] = useState<boolean>(false);
   const [templateByKeyLoading, setTemplateByKeyLoading] = useState<boolean>(false);
@@ -60,8 +66,11 @@ export function useTemplates(): UseTemplatesReturn {
     HttpService.makeCallToBackend({
       path,
       httpMethod: HttpService.HttpMethods.GET,
-      successCallback: (result: Template[]) => {
-        setTemplates(result);
+      successCallback: (result: Record<string, unknown>) => {
+        const results = result.results as Record<string, unknown>[];
+        const pag = result.pagination as PaginationObject | undefined;
+        setTemplates(Array.isArray(results) ? results.map((r) => normalizeTemplate(r)) : []);
+        setPagination(pag ?? null);
         setTemplatesLoading(false);
       },
       failureCallback: (err: unknown) => {
@@ -82,9 +91,9 @@ export function useTemplates(): UseTemplatesReturn {
       HttpService.makeCallToBackend({
         path: `/v1.0/m8flow/templates/${id}`,
         httpMethod: HttpService.HttpMethods.GET,
-        successCallback: (result: Template) => {
+        successCallback: (result: Record<string, unknown>) => {
           setTemplateByIdLoading(false);
-          resolve(result);
+          resolve(normalizeTemplate(result));
         },
         failureCallback: (err: unknown) => {
           setError(getErrorMessage(err, 'Failed to fetch template'));
@@ -117,9 +126,9 @@ export function useTemplates(): UseTemplatesReturn {
         HttpService.makeCallToBackend({
           path,
           httpMethod: HttpService.HttpMethods.GET,
-          successCallback: (result: Template) => {
+          successCallback: (result: Record<string, unknown>) => {
             setTemplateByKeyLoading(false);
-            resolve(result);
+            resolve(normalizeTemplate(result));
           },
           failureCallback: (err: unknown) => {
             setError(getErrorMessage(err, 'Failed to fetch template'));
@@ -137,6 +146,7 @@ export function useTemplates(): UseTemplatesReturn {
 
   return {
     templates,
+    pagination,
     templatesLoading,
     templateByIdLoading,
     templateByKeyLoading,
diff --git a/extensions/frontend/src/services/HttpService.ts b/extensions/frontend/src/services/HttpService.ts
index 6555734850..de3850cc1d 100644
--- a/extensions/frontend/src/services/HttpService.ts
+++ b/extensions/frontend/src/services/HttpService.ts
@@ -248,6 +248,7 @@ const HttpService = {
   makeCallToBackend,
   fetchTextFromBackend,
   messageForHttpError,
+  getBasicHeaders,
 };
 
 export default HttpService;
diff --git a/extensions/frontend/src/services/TemplateService.test.ts b/extensions/frontend/src/services/TemplateService.test.ts
index c7be373dff..7d78ee7738 100644
--- a/extensions/frontend/src/services/TemplateService.test.ts
+++ b/extensions/frontend/src/services/TemplateService.test.ts
@@ -1,10 +1,11 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import HttpService from "@spiffworkflow-frontend/services/HttpService";
+import HttpService from "./HttpService";
 import TemplateService from "./TemplateService";
 
-vi.mock("@spiffworkflow-frontend/services/HttpService", () => ({
+vi.mock("./HttpService", () => ({
   default: {
     makeCallToBackend: vi.fn(),
+    getBasicHeaders: vi.fn().mockReturnValue({}),
   },
 }));
 
@@ -92,4 +93,36 @@ describe("TemplateService", () => {
       expect(HttpService.makeCallToBackend).not.toHaveBeenCalled();
     });
   });
+
+  describe("deleteTemplate", () => {
+    const fetchMock = vi.fn();
+
+    beforeEach(() => {
+      fetchMock.mockClear();
+      vi.stubGlobal("fetch", fetchMock);
+    });
+
+    it("sends DELETE to correct URL and resolves when response is ok", async () => {
+      fetchMock.mockResolvedValue({ ok: true });
+
+      await expect(TemplateService.deleteTemplate(7)).resolves.toBeUndefined();
+
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+      expect(fetchMock).toHaveBeenCalledWith(
+        expect.stringContaining("/templates/7"),
+        expect.objectContaining({
+          method: "DELETE",
+          credentials: "include",
+        })
+      );
+    });
+
+    it("rejects with error when response is not ok", async () => {
+      fetchMock.mockResolvedValue({ ok: false });
+
+      await expect(TemplateService.deleteTemplate(7)).rejects.toThrow("Delete failed");
+
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+    });
+  });
 });
diff --git a/extensions/frontend/src/services/TemplateService.ts b/extensions/frontend/src/services/TemplateService.ts
index 6bdf098218..51cf39dbba 100644
--- a/extensions/frontend/src/services/TemplateService.ts
+++ b/extensions/frontend/src/services/TemplateService.ts
@@ -1,11 +1,20 @@
-import HttpService from "@spiffworkflow-frontend/services/HttpService";
-import type { CreateTemplateMetadata, Template } from "../types/template";
+import { BACKEND_BASE_URL } from "@spiffworkflow-frontend/config";
+import HttpService, { getBasicHeaders } from "./HttpService";
+import type {
+  CreateTemplateMetadata,
+  Template,
+  TemplateFile,
+} from "../types/template";
 
 const BASE_PATH = "/v1.0/m8flow";
 
+function backendPath(path: string): string {
+  const p = path.replace(/^\/v1\.0/, "");
+  return `${BACKEND_BASE_URL}${p}`;
+}
+
 function buildHeaders(metadata: CreateTemplateMetadata): Record<string, string> {
   const headers: Record<string, string> = {
-    "Content-Type": "application/xml",
     "X-Template-Key": metadata.template_key.trim(),
     "X-Template-Name": metadata.name.trim(),
   };
@@ -41,6 +50,26 @@ function buildHeaders(metadata: CreateTemplateMetadata): Record<string, string>
   return headers;
 }
 
+function secondsFromApiOrIso(seconds: unknown, iso: unknown): number {
+  if (typeof seconds === "number" && !Number.isNaN(seconds)) return seconds;
+  if (typeof iso === "string") {
+    const ms = Date.parse(iso);
+    if (!Number.isNaN(ms)) return Math.floor(ms / 1000);
+  }
+  return 0;
+}
+
+function parseTemplateResponse(data: Record<string, unknown>): Template {
+  const createdAtInSeconds = secondsFromApiOrIso(data.createdAtInSeconds, data.createdAt);
+  const updatedAtInSeconds = secondsFromApiOrIso(data.updatedAtInSeconds, data.updatedAt);
+  return {
+    ...data,
+    files: (data.files as TemplateFile[]) ?? [],
+    createdAtInSeconds,
+    updatedAtInSeconds,
+  } as Template;
+}
+
 const TemplateService = {
   /**
    * Create a template with BPMN XML body and metadata via X-Template-* headers.
@@ -54,14 +83,18 @@ const TemplateService = {
         new Error("Template key and name are required")
       );
     }
-    const extraHeaders = buildHeaders(metadata);
+    const extraHeaders = {
+      ...buildHeaders(metadata),
+      "Content-Type": "application/xml",
+    };
     return new Promise((resolve, reject) => {
       HttpService.makeCallToBackend({
         path: `${BASE_PATH}/templates`,
         httpMethod: "POST",
         postBody: bpmnXml,
         extraHeaders,
-        successCallback: resolve,
+        successCallback: (data: Record<string, unknown>) =>
+          resolve(parseTemplateResponse(data)),
         failureCallback: (err: unknown) => {
           const message =
             err && typeof err === "object" && "message" in err
@@ -72,6 +105,288 @@ const TemplateService = {
       });
     });
   },
+
+  /**
+   * Create a template with multiple files (multipart). At least one BPMN required.
+   */
+  createTemplateWithFiles(
+    metadata: CreateTemplateMetadata,
+    files: { name: string; content: Blob | File }[]
+  ): Promise<Template> {
+    if (!metadata.template_key?.trim() || !metadata.name?.trim()) {
+      return Promise.reject(
+        new Error("Template key and name are required")
+      );
+    }
+    if (!files.length) {
+      return Promise.reject(new Error("At least one file is required"));
+    }
+    const form = new FormData();
+    files.forEach((f) => form.append("files", f.content, f.name));
+    const headers = { ...getBasicHeaders(), ...buildHeaders(metadata) };
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.open("POST", backendPath(`${BASE_PATH}/templates`));
+      xhr.withCredentials = true;
+      Object.keys(headers).forEach((k) => xhr.setRequestHeader(k, headers[k]));
+      xhr.onload = () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          try {
+            const data = JSON.parse(xhr.responseText) as Record<string, unknown>;
+            resolve(parseTemplateResponse(data));
+          } catch {
+            reject(new Error("Invalid response"));
+          }
+        } else {
+          let msg = "Failed to create template";
+          try {
+            const err = JSON.parse(xhr.responseText);
+            if (err?.message) msg = err.message;
+          } catch {
+            // ignore
+          }
+          reject(new Error(msg));
+        }
+      };
+      xhr.onerror = () => reject(new Error("Network error"));
+      xhr.send(form);
+    });
+  },
+
+  getTemplateById(
+    id: number,
+    includeContents = true
+  ): Promise<Template> {
+    const q = includeContents ? "?include_contents=true" : "?include_contents=false";
+    return new Promise((resolve, reject) => {
+      HttpService.makeCallToBackend({
+        path: `${BASE_PATH}/templates/${id}${q}`,
+        httpMethod: "GET",
+        successCallback: (data: Record<string, unknown>) =>
+          resolve(parseTemplateResponse(data)),
+        failureCallback: (err: unknown) => {
+          const message =
+            err && typeof err === "object" && "message" in err
+              ? String((err as { message: unknown }).message)
+              : "Failed to fetch template";
+          reject(new Error(message));
+        },
+      });
+    });
+  },
+
+  updateTemplate(
+    id: number,
+    updates: Record<string, unknown>,
+    bpmnXml?: string
+  ): Promise<Template> {
+    const extraHeaders: Record<string, string> = {};
+    if (bpmnXml !== undefined) {
+      extraHeaders["Content-Type"] = "application/xml";
+    }
+    return new Promise((resolve, reject) => {
+      HttpService.makeCallToBackend({
+        path: `${BASE_PATH}/templates/${id}`,
+        httpMethod: "PUT",
+        postBody: bpmnXml !== undefined ? bpmnXml : JSON.stringify(updates),
+        extraHeaders:
+          Object.keys(extraHeaders).length > 0 ? extraHeaders : undefined,
+        successCallback: (data: Record<string, unknown>) =>
+          resolve(parseTemplateResponse(data)),
+        failureCallback: (err: unknown) => {
+          const message =
+            err && typeof err === "object" && "message" in err
+              ? String((err as { message: unknown }).message)
+              : "Failed to update template";
+          reject(new Error(message));
+        },
+      });
+    });
+  },
+
+  getTemplateFileUrl(id: number, fileName: string): string {
+    return backendPath(
+      `${BASE_PATH}/templates/${id}/files/${encodeURIComponent(fileName)}`
+    );
+  },
+
+  /**
+   * Fetch a template file as text (for in-app viewer). Uses auth headers.
+   */
+  getTemplateFileContent(id: number, fileName: string): Promise<string> {
+    const url = backendPath(
+      `${BASE_PATH}/templates/${id}/files/${encodeURIComponent(fileName)}`
+    );
+    return fetch(url, {
+      credentials: "include",
+      headers: new Headers(HttpService.getBasicHeaders()),
+    }).then((r) => {
+      if (!r.ok) throw new Error("Failed to load file");
+      return r.text();
+    });
+  },
+
+  /**
+   * Update a template file by name. Uses auth headers. Template must not be published.
+   */
+  updateTemplateFile(
+    id: number,
+    fileName: string,
+    content: string,
+    contentType?: string
+  ): Promise<void> {
+    const url = backendPath(
+      `${BASE_PATH}/templates/${id}/files/${encodeURIComponent(fileName)}`
+    );
+    const headers = new Headers(HttpService.getBasicHeaders());
+    if (contentType) headers.set("Content-Type", contentType);
+    return fetch(url, {
+      method: "PUT",
+      credentials: "include",
+      headers,
+      body: content,
+    }).then((r) => {
+      if (!r.ok) throw new Error("Update failed");
+    });
+  },
+
+  /**
+   * Delete a template file by name. Uses auth headers. Template must not be published.
+   */
+  deleteTemplateFile(id: number, fileName: string): Promise<void> {
+    const url = backendPath(
+      `${BASE_PATH}/templates/${id}/files/${encodeURIComponent(fileName)}`
+    );
+    return fetch(url, {
+      method: "DELETE",
+      credentials: "include",
+      headers: new Headers(HttpService.getBasicHeaders()),
+    }).then((r) => {
+      if (!r.ok) throw new Error("Delete failed");
+    });
+  },
+
+  /**
+   * Soft-delete a template by ID. Uses auth headers. Template must not be published.
+   */
+  deleteTemplate(id: number): Promise<void> {
+    const url = backendPath(`${BASE_PATH}/templates/${id}`);
+    return fetch(url, {
+      method: "DELETE",
+      credentials: "include",
+      headers: new Headers(HttpService.getBasicHeaders()),
+    }).then((r) => {
+      if (!r.ok) throw new Error("Delete failed");
+    });
+  },
+
+  /**
+   * Fetch a template file as blob and trigger browser download. Uses auth headers.
+   */
+  downloadTemplateFile(id: number, fileName: string): Promise<void> {
+    const url = backendPath(
+      `${BASE_PATH}/templates/${id}/files/${encodeURIComponent(fileName)}`
+    );
+    return fetch(url, {
+      credentials: "include",
+      headers: new Headers(HttpService.getBasicHeaders()),
+    }).then((r) => {
+      if (!r.ok) throw new Error("Download failed");
+      return r.blob();
+    }).then((blob) => {
+      const a = document.createElement("a");
+      a.href = URL.createObjectURL(blob);
+      a.download = fileName;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(a.href);
+    });
+  },
+
+  exportTemplate(id: number): Promise<Blob> {
+    return fetch(backendPath(`${BASE_PATH}/templates/${id}/export`), {
+      credentials: "include",
+      headers: new Headers(HttpService.getBasicHeaders()),
+    }).then((r) => {
+      if (!r.ok) throw new Error("Export failed");
+      return r.blob();
+    });
+  },
+
+  /**
+   * Fetch published versions of a template by template key.
+   * Uses GET /templates?template_key=...&published_only=true&latest_only=false.
+   */
+  getPublishedVersions(templateKey: string): Promise<Template[]> {
+    const query = new URLSearchParams({
+      template_key: templateKey,
+      published_only: "true",
+      latest_only: "false",
+    }).toString();
+    return new Promise((resolve, reject) => {
+      HttpService.makeCallToBackend({
+        path: `${BASE_PATH}/templates?${query}`,
+        httpMethod: "GET",
+        successCallback: (result: Record<string, unknown>) => {
+          const results = result.results as Record<string, unknown>[];
+          resolve(
+            Array.isArray(results)
+              ? results.map((r) => parseTemplateResponse(r))
+              : []
+          );
+        },
+        failureCallback: (err: unknown) => {
+          const message =
+            err && typeof err === "object" && "message" in err
+              ? String((err as { message: unknown }).message)
+              : "Failed to fetch published versions";
+          reject(new Error(message));
+        },
+      });
+    });
+  },
+
+  importTemplate(
+    zipFile: File,
+    metadata: CreateTemplateMetadata
+  ): Promise<Template> {
+    if (!metadata.template_key?.trim() || !metadata.name?.trim()) {
+      return Promise.reject(
+        new Error("Template key and name are required")
+      );
+    }
+    const form = new FormData();
+    form.append("file", zipFile);
+    const headers = { ...HttpService.getBasicHeaders(), ...buildHeaders(metadata) };
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.open("POST", backendPath(`${BASE_PATH}/templates/import`));
+      xhr.withCredentials = true;
+      Object.keys(headers).forEach((k) => xhr.setRequestHeader(k, headers[k]));
+      xhr.onload = () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          try {
+            const data = JSON.parse(xhr.responseText) as Record<string, unknown>;
+            resolve(parseTemplateResponse(data));
+          } catch {
+            reject(new Error("Invalid response"));
+          }
+        } else {
+          let msg = "Import failed";
+          try {
+            const err = JSON.parse(xhr.responseText);
+            if (err?.message) msg = err.message;
+          } catch {
+            // ignore
+          }
+          reject(new Error(msg));
+        }
+      };
+      xhr.onerror = () => reject(new Error("Network error"));
+      xhr.send(form);
+    });
+  },
 };
 
 export default TemplateService;
diff --git a/extensions/frontend/src/types/template.ts b/extensions/frontend/src/types/template.ts
index 193fb41a84..2a2079847e 100644
--- a/extensions/frontend/src/types/template.ts
+++ b/extensions/frontend/src/types/template.ts
@@ -1,5 +1,12 @@
 export type TemplateVisibility = 'PRIVATE' | 'TENANT' | 'PUBLIC';
 
+export type TemplateFileType = 'bpmn' | 'json' | 'dmn' | 'md';
+
+export interface TemplateFile {
+  fileType: TemplateFileType;
+  fileName: string;
+}
+
 export interface Template {
   id: number;
   templateKey: string;
@@ -10,8 +17,8 @@ export interface Template {
   category: string | null;
   tenantId: string | null;
   visibility: TemplateVisibility;
-  bpmnObjectKey: string;
-  bpmnContent?: string; // Included in GET responses
+  files: TemplateFile[];
+  bpmnContent?: string; // Included in GET when include_contents true
   isPublished: boolean;
   status: string | null;
   /** Epoch seconds for display (Spiff-style). */
@@ -29,6 +36,8 @@ export interface TemplateFilters {
   visibility?: TemplateVisibility;
   owner?: string;
   latest_only?: boolean;
+  page?: number;
+  per_page?: number;
 }
 
 /** Metadata for creating a template via POST (maps to X-Template-* headers). */
diff --git a/extensions/frontend/src/utils/templateHelpers.test.ts b/extensions/frontend/src/utils/templateHelpers.test.ts
new file mode 100644
index 0000000000..54ca77338f
--- /dev/null
+++ b/extensions/frontend/src/utils/templateHelpers.test.ts
@@ -0,0 +1,226 @@
+import { describe, it, expect } from "vitest";
+import { normalizeTemplate, sortFilesWithPrimaryFirst } from "./templateHelpers";
+
+describe("normalizeTemplate", () => {
+  it("uses createdAtInSeconds and updatedAtInSeconds from API when present", () => {
+    const createdSec = Math.floor(new Date("2025-06-15T10:30:00.000Z").getTime() / 1000);
+    const updatedSec = Math.floor(new Date("2025-06-16T12:00:00.000Z").getTime() / 1000);
+    const raw = {
+      id: 1,
+      createdAtInSeconds: createdSec,
+      updatedAtInSeconds: updatedSec,
+      files: [],
+    };
+    const result = normalizeTemplate(raw);
+    expect(result.createdAtInSeconds).toBe(createdSec);
+    expect(result.updatedAtInSeconds).toBe(updatedSec);
+  });
+
+  it("defaults createdAtInSeconds to 0 when not provided or invalid", () => {
+    const raw = {
+      id: 2,
+      updatedAtInSeconds: 1718542800,
+      files: [],
+    };
+    const result = normalizeTemplate(raw);
+    expect(result.createdAtInSeconds).toBe(0);
+  });
+
+  it("defaults updatedAtInSeconds to 0 when not provided or invalid", () => {
+    const raw = {
+      id: 3,
+      createdAtInSeconds: 1718456400,
+      files: [],
+    };
+    const result = normalizeTemplate(raw);
+    expect(result.updatedAtInSeconds).toBe(0);
+  });
+
+  it("defaults both timestamps to 0 when both are missing", () => {
+    const raw = { id: 4, files: [] };
+    const result = normalizeTemplate(raw);
+    expect(result.createdAtInSeconds).toBe(0);
+    expect(result.updatedAtInSeconds).toBe(0);
+  });
+
+  it("defaults files to an empty array when files is null", () => {
+    const raw = { id: 5, files: null };
+    const result = normalizeTemplate(raw);
+    expect(result.files).toEqual([]);
+  });
+
+  it("defaults files to an empty array when files is undefined", () => {
+    const raw = { id: 6 };
+    const result = normalizeTemplate(raw);
+    expect(result.files).toEqual([]);
+  });
+
+  it("preserves existing files array", () => {
+    const files = [
+      { fileType: "bpmn" as const, fileName: "diagram.bpmn" },
+      { fileType: "json" as const, fileName: "form.json" },
+    ];
+    const raw = { id: 7, files };
+    const result = normalizeTemplate(raw);
+    expect(result.files).toEqual(files);
+  });
+
+  it("preserves all pass-through fields", () => {
+    const raw = {
+      id: 10,
+      templateKey: "my-template",
+      version: "V1",
+      name: "My Template",
+      description: "A test template",
+      tags: ["tag1", "tag2"],
+      category: "workflow",
+      tenantId: "tenant-a",
+      visibility: "PRIVATE",
+      isPublished: false,
+      status: "draft",
+      createdBy: "user1",
+      modifiedBy: "user2",
+      files: [],
+      createdAtInSeconds: 1735689600,
+      updatedAtInSeconds: 1735776000,
+    };
+    const result = normalizeTemplate(raw);
+    expect(result.id).toBe(10);
+    expect(result.templateKey).toBe("my-template");
+    expect(result.version).toBe("V1");
+    expect(result.name).toBe("My Template");
+    expect(result.description).toBe("A test template");
+    expect(result.tags).toEqual(["tag1", "tag2"]);
+    expect(result.category).toBe("workflow");
+    expect(result.tenantId).toBe("tenant-a");
+    expect(result.visibility).toBe("PRIVATE");
+    expect(result.isPublished).toBe(false);
+    expect(result.status).toBe("draft");
+    expect(result.createdBy).toBe("user1");
+    expect(result.modifiedBy).toBe("user2");
+    expect(result.createdAtInSeconds).toBe(1735689600);
+    expect(result.updatedAtInSeconds).toBe(1735776000);
+  });
+
+  it("handles a completely empty object gracefully", () => {
+    const raw = {};
+    const result = normalizeTemplate(raw);
+    expect(result.createdAtInSeconds).toBe(0);
+    expect(result.updatedAtInSeconds).toBe(0);
+    expect(result.files).toEqual([]);
+  });
+
+  it("defaults to 0 when createdAtInSeconds is missing or not a positive number", () => {
+    const raw = {
+      id: 11,
+      files: [],
+    };
+    const result = normalizeTemplate(raw);
+    expect(result.createdAtInSeconds).toBe(0);
+    expect(result.updatedAtInSeconds).toBe(0);
+  });
+
+  it("derives createdAtInSeconds from createdAt ISO string when createdAtInSeconds not provided", () => {
+    const raw = {
+      id: 12,
+      createdAt: "2025-06-15T10:30:00.000Z",
+      updatedAt: "2025-06-16T12:00:00.000Z",
+      files: [],
+    };
+    const result = normalizeTemplate(raw);
+    expect(result.createdAtInSeconds).toBe(Math.floor(new Date("2025-06-15T10:30:00.000Z").getTime() / 1000));
+    expect(result.updatedAtInSeconds).toBe(Math.floor(new Date("2025-06-16T12:00:00.000Z").getTime() / 1000));
+  });
+
+  it("prefers createdAtInSeconds/updatedAtInSeconds over ISO strings when both present", () => {
+    const raw = {
+      id: 13,
+      createdAt: "2020-01-01T00:00:00.000Z",
+      updatedAt: "2020-01-02T00:00:00.000Z",
+      createdAtInSeconds: 1735689600,
+      updatedAtInSeconds: 1735776000,
+      files: [],
+    };
+    const result = normalizeTemplate(raw);
+    expect(result.createdAtInSeconds).toBe(1735689600);
+    expect(result.updatedAtInSeconds).toBe(1735776000);
+  });
+});
+
+describe("sortFilesWithPrimaryFirst", () => {
+  it("moves the primary file to the front of the array", () => {
+    const files = [
+      { name: "test.bpmn" },
+      { name: "form.json" },
+      { name: "primary.bpmn" },
+    ];
+    const sorted = sortFilesWithPrimaryFirst(files, "primary.bpmn");
+    expect(sorted[0].name).toBe("primary.bpmn");
+    expect(sorted).toHaveLength(3);
+  });
+
+  it("preserves order when primary is already first", () => {
+    const files = [
+      { name: "primary.bpmn" },
+      { name: "test.bpmn" },
+      { name: "form.json" },
+    ];
+    const sorted = sortFilesWithPrimaryFirst(files, "primary.bpmn");
+    expect(sorted[0].name).toBe("primary.bpmn");
+    expect(sorted[1].name).toBe("test.bpmn");
+    expect(sorted[2].name).toBe("form.json");
+  });
+
+  it("returns files unchanged when primaryFileName is empty", () => {
+    const files = [
+      { name: "b.bpmn" },
+      { name: "a.bpmn" },
+    ];
+    const sorted = sortFilesWithPrimaryFirst(files, "");
+    expect(sorted[0].name).toBe("b.bpmn");
+    expect(sorted[1].name).toBe("a.bpmn");
+  });
+
+  it("returns files unchanged when primaryFileName does not match any file", () => {
+    const files = [
+      { name: "test.bpmn" },
+      { name: "form.json" },
+    ];
+    const sorted = sortFilesWithPrimaryFirst(files, "nonexistent.bpmn");
+    expect(sorted[0].name).toBe("test.bpmn");
+    expect(sorted[1].name).toBe("form.json");
+  });
+
+  it("does not mutate the original array", () => {
+    const files = [
+      { name: "b.bpmn" },
+      { name: "a.bpmn" },
+    ];
+    const sorted = sortFilesWithPrimaryFirst(files, "a.bpmn");
+    expect(sorted[0].name).toBe("a.bpmn");
+    // Original should be unchanged
+    expect(files[0].name).toBe("b.bpmn");
+  });
+
+  it("handles a single-element array", () => {
+    const files = [{ name: "only.bpmn" }];
+    const sorted = sortFilesWithPrimaryFirst(files, "only.bpmn");
+    expect(sorted).toHaveLength(1);
+    expect(sorted[0].name).toBe("only.bpmn");
+  });
+
+  it("handles an empty array", () => {
+    const sorted = sortFilesWithPrimaryFirst([], "primary.bpmn");
+    expect(sorted).toEqual([]);
+  });
+
+  it("works with objects that have additional properties", () => {
+    const files = [
+      { name: "test.bpmn", content: new Blob(["x"]) },
+      { name: "primary.bpmn", content: new Blob(["y"]) },
+    ];
+    const sorted = sortFilesWithPrimaryFirst(files, "primary.bpmn");
+    expect(sorted[0].name).toBe("primary.bpmn");
+    expect(sorted[0].content).toBeDefined();
+  });
+});
diff --git a/extensions/frontend/src/utils/templateHelpers.ts b/extensions/frontend/src/utils/templateHelpers.ts
new file mode 100644
index 0000000000..6c09d5dac3
--- /dev/null
+++ b/extensions/frontend/src/utils/templateHelpers.ts
@@ -0,0 +1,41 @@
+import type { Template, TemplateFile } from "../types/template";
+
+/**
+ * Sort an array of files so the primary file (identified by name) comes first.
+ * Preserves relative order of all other files (stable sort).
+ */
+export function sortFilesWithPrimaryFirst<T extends { name: string }>(
+  files: T[],
+  primaryFileName: string
+): T[] {
+  if (!primaryFileName) return files;
+  return [...files].sort((a, b) => {
+    if (a.name === primaryFileName) return -1;
+    if (b.name === primaryFileName) return 1;
+    return 0;
+  });
+}
+
+function secondsFromApiOrIso(seconds: unknown, iso: unknown): number {
+  if (typeof seconds === "number" && !Number.isNaN(seconds)) return seconds;
+  if (typeof iso === "string") {
+    const ms = Date.parse(iso);
+    if (!Number.isNaN(ms)) return Math.floor(ms / 1000);
+  }
+  return 0;
+}
+
+/**
+ * Normalize a raw API response object into a typed Template.
+ * Uses createdAtInSeconds/updatedAtInSeconds from API when present, else derives from createdAt/updatedAt ISO strings.
+ */
+export function normalizeTemplate(raw: Record<string, unknown>): Template {
+  const createdAtInSeconds = secondsFromApiOrIso(raw.createdAtInSeconds, raw.createdAt);
+  const updatedAtInSeconds = secondsFromApiOrIso(raw.updatedAtInSeconds, raw.updatedAt);
+  return {
+    ...raw,
+    files: (raw.files as TemplateFile[]) ?? [],
+    createdAtInSeconds,
+    updatedAtInSeconds,
+  } as Template;
+}
diff --git a/extensions/frontend/src/utils/templateKey.test.ts b/extensions/frontend/src/utils/templateKey.test.ts
new file mode 100644
index 0000000000..c4188ff075
--- /dev/null
+++ b/extensions/frontend/src/utils/templateKey.test.ts
@@ -0,0 +1,68 @@
+import { describe, it, expect } from "vitest";
+import { nameToTemplateKey } from "./templateKey";
+
+describe("nameToTemplateKey", () => {
+  it("converts a simple name to a slug", () => {
+    expect(nameToTemplateKey("My Template")).toBe("my-template");
+  });
+
+  it("trims leading and trailing whitespace", () => {
+    expect(nameToTemplateKey("  hello  ")).toBe("hello");
+  });
+
+  it("collapses multiple spaces into a single hyphen", () => {
+    expect(nameToTemplateKey("a   b")).toBe("a-b");
+  });
+
+  it("strips special characters", () => {
+    expect(nameToTemplateKey("test@#$%")).toBe("test");
+  });
+
+  it("preserves underscores", () => {
+    expect(nameToTemplateKey("my_template")).toBe("my_template");
+  });
+
+  it("returns empty string for all-special-character input", () => {
+    expect(nameToTemplateKey("@#$%")).toBe("");
+  });
+
+  it("returns empty string for empty input", () => {
+    expect(nameToTemplateKey("")).toBe("");
+  });
+
+  it("returns empty string for whitespace-only input", () => {
+    expect(nameToTemplateKey("   ")).toBe("");
+  });
+
+  it("strips leading and trailing hyphens from the result", () => {
+    expect(nameToTemplateKey("-hello-")).toBe("hello");
+  });
+
+  it("strips unicode characters that are not a-z, 0-9, hyphen, or underscore", () => {
+    expect(nameToTemplateKey("caf\u00e9")).toBe("caf");
+  });
+
+  it("handles mixed case and numbers", () => {
+    expect(nameToTemplateKey("Approval Workflow V2")).toBe(
+      "approval-workflow-v2"
+    );
+  });
+
+  it("collapses repeated hyphens from special chars between words", () => {
+    expect(nameToTemplateKey("a--b--c")).toBe("a-b-c");
+  });
+
+  it("handles a name with only numbers", () => {
+    expect(nameToTemplateKey("123")).toBe("123");
+  });
+
+  it("handles a name with hyphens, underscores, and spaces", () => {
+    expect(nameToTemplateKey("my - cool_template name")).toBe(
+      "my-cool_template-name"
+    );
+  });
+
+  it("handles tab characters as whitespace", () => {
+    expect(nameToTemplateKey("a\tb")).toBe("a-b");
+  });
+});
diff --git a/extensions/frontend/src/utils/templateKey.ts b/extensions/frontend/src/utils/templateKey.ts
new file mode 100644
index 0000000000..fd586b4098
--- /dev/null
+++ b/extensions/frontend/src/utils/templateKey.ts
@@ -0,0 +1,16 @@
+/**
+ * Derive a template_key from a display name: trim, lowercase, spaces to hyphens,
+ * strip non-alphanumeric except hyphen/underscore, collapse repeated hyphens.
+ * Returns empty string if result would be empty.
+ */
+export function nameToTemplateKey(name: string): string {
+  const trimmed = name.trim();
+  if (!trimmed) return "";
+  const slug = trimmed
+    .toLowerCase()
+    .replace(/\s+/g, "-")
+    .replace(/[^a-z0-9_-]/g, "")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "");
+  return slug;
+}
diff --git a/extensions/frontend/src/views/ProcessModelShowWithSaveAsTemplate.tsx b/extensions/frontend/src/views/ProcessModelShowWithSaveAsTemplate.tsx
new file mode 100644
index 0000000000..9bcf540e51
--- /dev/null
+++ b/extensions/frontend/src/views/ProcessModelShowWithSaveAsTemplate.tsx
@@ -0,0 +1,116 @@
+import React, { useState } from "react";
+import { useParams } from "react-router-dom";
+import { Box, Button } from "@mui/material";
+import ProcessModelShow from "@spiffworkflow-frontend/views/ProcessModelShow";
+import HttpService from "../services/HttpService";
+import { modifyProcessIdentifierForPathParam } from "../helpers";
+import { sortFilesWithPrimaryFirst } from "../utils/templateHelpers";
+import SaveAsTemplateModal from "../components/SaveAsTemplateModal";
+import type { SaveAsTemplateFile } from "../components/SaveAsTemplateModal";
+
+const SUPPORTED_EXT = [".bpmn", ".json", ".dmn", ".md"];
+
+function isSupportedFileName(name: string): boolean {
+  const lower = name.toLowerCase();
+  return SUPPORTED_EXT.some((ext) => lower.endsWith(ext));
+}
+
+/**
+ * Wraps ProcessModelShow and adds a "Save as Template" button on the Process Model page.
+ * When clicked, opens a modal to save all supported process-model files (.bpmn, .json, .dmn, .md) as a template.
+ */
+export default function ProcessModelShowWithSaveAsTemplate() {
+  const params = useParams<{ process_model_id: string }>();
+  const [saveAsTemplateOpen, setSaveAsTemplateOpen] = useState(false);
+
+  const modifiedProcessModelId = params.process_model_id
+    ? modifyProcessIdentifierForPathParam(params.process_model_id)
+    : "";
+
+  const getFiles = (): Promise<SaveAsTemplateFile[]> => {
+    return new Promise((resolve, reject) => {
+      HttpService.makeCallToBackend({
+        path: `/process-models/${modifiedProcessModelId}`,
+        httpMethod: "GET",
+        successCallback: (model: {
+          files?: { name?: string }[];
+          primary_file_name?: string;
+        }) => {
+          const primaryName = model?.primary_file_name ?? "";
+          const fileList = model?.files ?? [];
+          const supported = fileList.filter((f) =>
+            isSupportedFileName(f?.name ?? "")
+          );
+          if (supported.length === 0) {
+            reject(new Error("No supported files (.bpmn, .json, .dmn, .md) in this process model"));
+            return;
+          }
+          const results: SaveAsTemplateFile[] = [];
+          let pending = supported.length;
+          let hasError = false;
+          supported.forEach((f) => {
+            const fileName = f?.name ?? "";
+            HttpService.makeCallToBackend({
+              path: `/process-models/${modifiedProcessModelId}/files/${fileName}`,
+              httpMethod: "GET",
+              successCallback: (file: { file_contents?: string }) => {
+                if (hasError) return;
+                const content = file?.file_contents;
+                const str =
+                  typeof content === "string" ? content : "";
+                const ext = fileName.toLowerCase().slice(fileName.lastIndexOf("."));
+                const mime =
+                  ext === ".json"
+                    ? "application/json"
+                    : ext === ".md"
+                      ? "text/markdown"
+                      : "application/xml";
+                results.push({
+                  name: fileName,
+                  content: new Blob([str], { type: mime }),
+                });
+                pending -= 1;
+                if (pending === 0) {
+                  // Sort so the primary BPMN file is first in the list.
+                  // This ensures the backend's get_first_bpmn_content() and
+                  // the frontend's TemplateFileList both treat it as primary.
+                  resolve(sortFilesWithPrimaryFirst(results, primaryName));
+                }
+              },
+              failureCallback: () => {
+                if (!hasError) {
+                  hasError = true;
+                  reject(new Error(`Failed to load file: ${fileName}`));
+                }
+              },
+            });
+          });
+        },
+        failureCallback: (err: unknown) => {
+          reject(err instanceof Error ? err : new Error("Failed to load process model"));
+        },
+      });
+    });
+  };
+
+  return (
+    <Box sx={{ position: "relative", padding: "16px" }}>
+      <ProcessModelShow />
+      <Box sx={{ position: "absolute", top: 16, right: 16, zIndex: 10 }}>
+        <Button
+          variant="contained"
+          onClick={() => setSaveAsTemplateOpen(true)}
+          data-testid="save-as-template-button"
+        >
+          Save as Template
+        </Button>
+      </Box>
+      <SaveAsTemplateModal
+        open={saveAsTemplateOpen}
+        onClose={() => setSaveAsTemplateOpen(false)}
+        onSuccess={() => setSaveAsTemplateOpen(false)}
+        getFiles={getFiles}
+      />
+    </Box>
+  );
+}
diff --git a/extensions/frontend/src/views/TemplateFileDiagramPage.test.tsx b/extensions/frontend/src/views/TemplateFileDiagramPage.test.tsx
new file mode 100644
index 0000000000..ace1feddd6
--- /dev/null
+++ b/extensions/frontend/src/views/TemplateFileDiagramPage.test.tsx
@@ -0,0 +1,140 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+import { MemoryRouter, useParams, useNavigate } from "react-router-dom";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import type React from "react";
+import TemplateFileDiagramPage from "./TemplateFileDiagramPage";
+
+const mockNavigate = vi.fn();
+
+vi.mock("react-router-dom", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-router-dom")>();
+  return {
+    ...actual,
+    useParams: vi.fn(),
+    useNavigate: vi.fn(() => mockNavigate),
+  };
+});
+
+vi.mock("../services/HttpService", () => ({
+  default: {
+    HttpMethods: { GET: "GET", PUT: "PUT" },
+    makeCallToBackend: vi.fn(),
+  },
+}));
+
+vi.mock("../services/TemplateService", () => ({
+  default: {
+    getTemplateFileContent: vi.fn(),
+    updateTemplateFile: vi.fn(),
+  },
+}));
+
+vi.mock("@spiffworkflow-frontend/components/ProcessBreadcrumb", () => ({
+  default: () => <div data-testid="breadcrumb">Breadcrumb</div>,
+}));
+
+vi.mock("@spiffworkflow-frontend/components/ReactDiagramEditor", () => ({
+  default: function MockReactDiagramEditor({
+    onLaunchJsonSchemaEditor,
+  }: {
+    onLaunchJsonSchemaEditor?: (
+      el: unknown,
+      fileName: string,
+      eventBus: unknown
+    ) => void;
+  }) {
+    return (
+      <div data-testid="mock-diagram-editor">
+        <button
+          type="button"
+          onClick={() =>
+            onLaunchJsonSchemaEditor?.(null, "my-form-schema.json", {})
+          }
+        >
+          Launch schema editor
+        </button>
+        <button
+          type="button"
+          onClick={() =>
+            onLaunchJsonSchemaEditor?.(null, "file name.json", {})
+          }
+        >
+          Launch schema editor with space
+        </button>
+      </div>
+    );
+  },
+}));
+
+import HttpService from "../services/HttpService";
+import TemplateService from "../services/TemplateService";
+
+const theme = createTheme();
+
+function renderWithRouter(ui: React.ReactElement) {
+  return render(
+    <ThemeProvider theme={theme}>
+      <MemoryRouter>{ui}</MemoryRouter>
+    </ThemeProvider>
+  );
+}
+
+const minimalTemplate = {
+  id: 5,
+  name: "Test Template",
+  version: "V1",
+  files: [],
+  createdAt: "2024-01-01T00:00:00.000Z",
+  updatedAt: "2024-01-01T00:00:00.000Z",
+};
+
+describe("TemplateFileDiagramPage", () => {
+  beforeEach(() => {
+    vi.mocked(useParams).mockReturnValue({
+      templateId: "5",
+      fileName: "diagram.bpmn",
+    });
+    mockNavigate.mockClear();
+    vi.mocked(HttpService.makeCallToBackend).mockImplementation((opts) => {
+      opts.successCallback?.(minimalTemplate as any);
+    });
+    vi.mocked(TemplateService.getTemplateFileContent).mockResolvedValue(
+      "<xml/>"
+    );
+  });
+
+  it("navigates to form editor when Launch Editor is clicked", async () => {
+    renderWithRouter(<TemplateFileDiagramPage />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("mock-diagram-editor")).toBeInTheDocument();
+    });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Launch schema editor" })
+    );
+
+    expect(mockNavigate).toHaveBeenCalledTimes(1);
+    expect(mockNavigate).toHaveBeenCalledWith(
+      "/templates/5/form/my-form-schema.json"
+    );
+  });
+
+  it("encodes schema file name in navigation path when it contains special characters", async () => {
+    renderWithRouter(<TemplateFileDiagramPage />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("mock-diagram-editor")).toBeInTheDocument();
+    });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: /Launch schema editor with space/i })
+    );
+
+    expect(mockNavigate).toHaveBeenCalledTimes(1);
+    expect(mockNavigate).toHaveBeenCalledWith(
+      "/templates/5/form/file%20name.json"
+    );
+  });
+});
diff --git a/extensions/frontend/src/views/TemplateFileDiagramPage.tsx b/extensions/frontend/src/views/TemplateFileDiagramPage.tsx
new file mode 100644
index 0000000000..81328cba89
--- /dev/null
+++ b/extensions/frontend/src/views/TemplateFileDiagramPage.tsx
@@ -0,0 +1,274 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { Box, Button, CircularProgress, Alert } from "@mui/material";
+import ProcessBreadcrumb from "@spiffworkflow-frontend/components/ProcessBreadcrumb";
+import ReactDiagramEditor from "@spiffworkflow-frontend/components/ReactDiagramEditor";
+import HttpService from "../services/HttpService";
+import TemplateService from "../services/TemplateService";
+import type { Template } from "../types/template";
+import { normalizeTemplate } from "../utils/templateHelpers";
+
+const noop = () => {};
+const DIAGRAM_EDITOR_NOOP_PROPS = {
+  onLaunchBpmnEditor: noop,
+  onLaunchDmnEditor: noop,
+  onLaunchMarkdownEditor: noop,
+  onLaunchScriptEditor: noop,
+  onLaunchMessageEditor: noop,
+  onSearchProcessModels: noop,
+  onDataStoresRequested: noop,
+  onMessagesRequested: noop,
+  onServiceTasksRequested: noop,
+};
+
+function getFirstBpmnFileName(template: Template | null): string | null {
+  const files = template?.files ?? [];
+  const first = files.find((f) => (f.fileType ?? "").toLowerCase() === "bpmn");
+  return first?.fileName ?? null;
+}
+
+export default function TemplateFileDiagramPage() {
+  const { templateId, fileName } = useParams<{ templateId: string; fileName: string }>();
+  const navigate = useNavigate();
+  const [template, setTemplate] = useState<Template | null>(null);
+  const [fileContent, setFileContent] = useState<string | null>(null);
+  const [diagramHasChanges, setDiagramHasChanges] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [saveSuccess, setSaveSuccess] = useState(false);
+
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const id = templateId ? parseInt(templateId, 10) : NaN;
+  const decodedFileName = fileName ? decodeURIComponent(fileName) : "";
+  const firstBpmnFileName = getFirstBpmnFileName(template);
+
+  // Cleanup save success timer on unmount
+  useEffect(() => {
+    return () => {
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    };
+  }, []);
+  const isFirstBpmn =
+    decodedFileName.toLowerCase().endsWith(".bpmn") &&
+    firstBpmnFileName !== null &&
+    decodedFileName === firstBpmnFileName;
+
+  useEffect(() => {
+    if (!templateId || !fileName || isNaN(id)) {
+      setError("Invalid template or file");
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    HttpService.makeCallToBackend({
+      path: `/v1.0/m8flow/templates/${id}`,
+      httpMethod: HttpService.HttpMethods.GET,
+      successCallback: (result: Record<string, unknown>) => {
+        setTemplate(normalizeTemplate(result));
+      },
+      failureCallback: () => {
+        // Template name is used for breadcrumb; fall back to generic name
+        setTemplate(null);
+      },
+    });
+
+    TemplateService.getTemplateFileContent(id, decodedFileName)
+      .then((text) => {
+        setFileContent(text);
+        setLoading(false);
+      })
+      .catch(() => {
+        setError("Failed to load file");
+        setLoading(false);
+      });
+  }, [templateId, id, fileName, decodedFileName]);
+
+  const saveDiagram = useCallback(
+    (xml: string) => {
+      if (isNaN(id)) return;
+      setError(null);
+      setSaveSuccess(false);
+      const isBpmn = decodedFileName.toLowerCase().endsWith(".bpmn");
+      if (isBpmn) {
+        HttpService.makeCallToBackend({
+          path: `/v1.0/m8flow/templates/${id}`,
+          httpMethod: HttpService.HttpMethods.PUT,
+          extraHeaders: {
+            "Content-Type": "application/xml",
+            "X-Template-File-Name": decodedFileName,
+          },
+          postBody: xml,
+          successCallback: () => {
+            setFileContent(xml);
+            setDiagramHasChanges(false);
+            setSaveSuccess(true);
+            if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+            saveTimerRef.current = setTimeout(() => setSaveSuccess(false), 3000);
+          },
+          failureCallback: (err: unknown) => {
+            setError(err instanceof Error ? err.message : "Save failed");
+          },
+        });
+      } else {
+        TemplateService.updateTemplateFile(id, decodedFileName, xml, "application/xml")
+          .then(() => {
+            setFileContent(xml);
+            setDiagramHasChanges(false);
+            setSaveSuccess(true);
+            if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+            saveTimerRef.current = setTimeout(() => setSaveSuccess(false), 3000);
+          })
+          .catch((err) => setError(err instanceof Error ? err.message : "Save failed"));
+      }
+    },
+    [id, decodedFileName]
+  );
+
+  const onElementsChanged = useCallback(() => {
+    setDiagramHasChanges(true);
+  }, []);
+
+  // Provide JSON schema files from the template's file list to the BPMN modeler's
+  // properties panel dropdown (matches ProcessModelEditDiagram's pattern: *-schema.json).
+  const onJsonSchemaFilesRequested = useCallback(
+    (event: any) => {
+      const re = /.*[-.]schema\.json$/i;
+      const jsonFiles = (template?.files ?? []).filter(
+        (f) => f.fileName && re.test(f.fileName)
+      );
+      const options = jsonFiles.map((f) => ({
+        label: f.fileName,
+        value: f.fileName,
+      }));
+      event.eventBus.fire("spiff.json_schema_files.returned", { options });
+    },
+    [template]
+  );
+
+  // Provide DMN files from the template's file list to the BPMN modeler dropdown.
+  const onDmnFilesRequested = useCallback(
+    (event: any) => {
+      const dmnFiles = (template?.files ?? []).filter(
+        (f) => (f.fileType ?? "").toLowerCase() === "dmn"
+      );
+      const options = dmnFiles.map((f) => ({
+        label: f.fileName,
+        value: f.fileName,
+      }));
+      event.eventBus.fire("spiff.dmn_files.returned", { options });
+    },
+    [template]
+  );
+
+  // Navigate to the template form editor page when "Launch Editor" is clicked
+  // in the BPMN modeler properties panel (for JSON schema files).
+  const onLaunchJsonSchemaEditor = useCallback(
+    (_element: any, schemaFileName: string, _eventBus: any) => {
+      if (!isNaN(id) && schemaFileName) {
+        navigate(
+          `/templates/${id}/form/${encodeURIComponent(schemaFileName)}`
+        );
+      }
+    },
+    [id, navigate]
+  );
+
+  if (loading && !fileContent) {
+    return (
+      <Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Box sx={{ p: 3 }}>
+        <Alert severity="error" onClose={() => setError(null)}>
+          {error}
+        </Alert>
+        <Button onClick={() => navigate(`/templates/${id}`)} sx={{ mt: 2 }}>
+          Back to Template
+        </Button>
+      </Box>
+    );
+  }
+
+  if (!fileContent) {
+    return null;
+  }
+
+  const lower = decodedFileName.toLowerCase();
+  const diagramType = lower.endsWith(".dmn") ? "dmn" : "bpmn";
+  const hotCrumbs: [string, string?][] = [
+    ["Templates", "/templates"],
+    [template?.name ?? "Template", `/templates/${id}`],
+    [decodedFileName],
+  ];
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: "60vh",
+        overflow: "hidden",
+        px: 2,
+        pl: 3,
+      }}
+    >
+      <Box sx={{ mb: 1 }}>
+        <ProcessBreadcrumb hotCrumbs={hotCrumbs} />
+      </Box>
+      {error && (
+        <Alert severity="error" sx={{ mb: 1 }} onClose={() => setError(null)}>
+          {error}
+        </Alert>
+      )}
+      {saveSuccess && (
+        <Alert severity="success" sx={{ mb: 1 }} onClose={() => setSaveSuccess(false)}>
+          File saved successfully.
+        </Alert>
+      )}
+      <Box
+        sx={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          minHeight: 0,
+          pl: 2,
+        }}
+      >
+        <Box className="template-modeler-editor-wrap" sx={{ flexShrink: 0 }}>
+          <ReactDiagramEditor
+            key={`template-file-${id}-${decodedFileName}`}
+            diagramType={diagramType}
+            diagramXML={fileContent}
+            processModelId={`template-${id}`}
+            fileName={decodedFileName}
+            disableSaveButton={!diagramHasChanges}
+            saveDiagram={saveDiagram}
+            onElementsChanged={onElementsChanged}
+            onJsonSchemaFilesRequested={onJsonSchemaFilesRequested}
+            onDmnFilesRequested={onDmnFilesRequested}
+            onLaunchJsonSchemaEditor={onLaunchJsonSchemaEditor}
+            {...DIAGRAM_EDITOR_NOOP_PROPS}
+          />
+        </Box>
+        <div
+          id="diagram-container"
+          style={{
+            flex: 1,
+            minHeight: 400,
+            position: "relative",
+          }}
+        />
+      </Box>
+    </Box>
+  );
+}
diff --git a/extensions/frontend/src/views/TemplateFileFormPage.tsx b/extensions/frontend/src/views/TemplateFileFormPage.tsx
new file mode 100644
index 0000000000..5f7106aad1
--- /dev/null
+++ b/extensions/frontend/src/views/TemplateFileFormPage.tsx
@@ -0,0 +1,185 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Alert,
+  Stack,
+  Typography,
+} from "@mui/material";
+import ProcessBreadcrumb from "@spiffworkflow-frontend/components/ProcessBreadcrumb";
+import { Editor } from "@monaco-editor/react";
+import MDEditor from "@uiw/react-md-editor";
+import HttpService from "../services/HttpService";
+import TemplateService from "../services/TemplateService";
+import type { Template } from "../types/template";
+import { normalizeTemplate } from "../utils/templateHelpers";
+
+export default function TemplateFileFormPage() {
+  const { templateId, fileName } = useParams<{ templateId: string; fileName: string }>();
+  const navigate = useNavigate();
+  const [template, setTemplate] = useState<Template | null>(null);
+  const [fileContent, setFileContent] = useState<string>("");
+  const [loading, setLoading] = useState(true);
+  const [fileLoaded, setFileLoaded] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [saveSuccess, setSaveSuccess] = useState(false);
+
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const id = templateId ? parseInt(templateId, 10) : NaN;
+  const decodedFileName = fileName ? decodeURIComponent(fileName) : "";
+  const lower = decodedFileName.toLowerCase();
+  const isJson = lower.endsWith(".json");
+  const isMd = lower.endsWith(".md");
+
+  // Cleanup save success timer on unmount
+  useEffect(() => {
+    return () => {
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!templateId || !fileName || isNaN(id)) {
+      setError("Invalid template or file");
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    HttpService.makeCallToBackend({
+      path: `/v1.0/m8flow/templates/${id}`,
+      httpMethod: HttpService.HttpMethods.GET,
+      successCallback: (result: Record<string, unknown>) => {
+        setTemplate(normalizeTemplate(result));
+      },
+      failureCallback: () => {
+        // Template name is used for breadcrumb; fall back to generic name
+        setTemplate(null);
+      },
+    });
+
+    TemplateService.getTemplateFileContent(id, decodedFileName)
+      .then((text) => {
+        setFileContent(text);
+        setFileLoaded(true);
+        setLoading(false);
+      })
+      .catch(() => {
+        setError("Failed to load file");
+        setLoading(false);
+      });
+  }, [templateId, id, fileName, decodedFileName]);
+
+  const handleSave = () => {
+    if (isNaN(id)) return;
+    setError(null);
+    const contentType = isMd ? "text/markdown" : "text/plain";
+    TemplateService.updateTemplateFile(id, decodedFileName, fileContent, contentType)
+      .then(() => {
+        setSaveSuccess(true);
+        if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+        saveTimerRef.current = setTimeout(() => setSaveSuccess(false), 3000);
+      })
+      .catch((err) => setError(err instanceof Error ? err.message : "Save failed"));
+  };
+
+  const handleDelete = () => {
+    if (isNaN(id)) return;
+    if (!window.confirm(`Delete file "${decodedFileName}"? This cannot be undone.`)) return;
+    setError(null);
+    TemplateService.deleteTemplateFile(id, decodedFileName)
+      .then(() => navigate(`/templates/${id}`))
+      .catch((err) => setError(err instanceof Error ? err.message : "Delete failed"));
+  };
+
+  const handleDownload = () => {
+    if (isNaN(id)) return;
+    TemplateService.downloadTemplateFile(id, decodedFileName).catch((err) =>
+      setError(err instanceof Error ? err.message : "Download failed")
+    );
+  };
+
+  if (loading) {
+    return (
+      <Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (error && !fileLoaded) {
+    return (
+      <Box sx={{ p: 3 }}>
+        <Alert severity="error" onClose={() => setError(null)}>
+          {error}
+        </Alert>
+        <Button onClick={() => navigate(`/templates/${id}`)} sx={{ mt: 2 }}>
+          Back to Template
+        </Button>
+      </Box>
+    );
+  }
+
+  const hotCrumbs: [string, string?][] = [
+    ["Templates", "/templates"],
+    [template?.name ?? "Template", `/templates/${id}`],
+    [decodedFileName],
+  ];
+
+  const editorLanguage = isJson ? "json" : isMd ? "markdown" : "plaintext";
+
+  return (
+    <Box sx={{ p: 2, pl: 3, maxWidth: "100%", overflow: "hidden" }}>
+      <Box sx={{ mb: 1 }}>
+        <ProcessBreadcrumb hotCrumbs={hotCrumbs} />
+      </Box>
+      <Typography variant="h5" component="h1" sx={{ mb: 1 }}>
+        Template File: {decodedFileName}
+      </Typography>
+      {error && (
+        <Alert severity="error" sx={{ mb: 1 }} onClose={() => setError(null)}>
+          {error}
+        </Alert>
+      )}
+      {saveSuccess && (
+        <Alert severity="success" sx={{ mb: 1 }} onClose={() => setSaveSuccess(false)}>
+          File saved successfully.
+        </Alert>
+      )}
+      <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
+        <Button variant="contained" color="primary" onClick={handleSave}>
+          Save
+        </Button>
+        <Button variant="contained" color="error" onClick={handleDelete}>
+          Delete
+        </Button>
+        <Button variant="outlined" onClick={handleDownload}>
+          Download
+        </Button>
+      </Stack>
+      {isMd ? (
+        <div data-color-mode="light">
+          <MDEditor
+            height={600}
+            highlightEnable={false}
+            value={fileContent}
+            onChange={(v) => setFileContent(v ?? "")}
+          />
+        </div>
+      ) : (
+        <Editor
+          height={600}
+          width="100%"
+          defaultLanguage={editorLanguage}
+          value={fileContent}
+          onChange={(v) => setFileContent(v ?? "")}
+        />
+      )}
+    </Box>
+  );
+}
diff --git a/extensions/frontend/src/views/TemplateGalleryPage.tsx b/extensions/frontend/src/views/TemplateGalleryPage.tsx
index 378909d16d..5cb40a7f32 100644
--- a/extensions/frontend/src/views/TemplateGalleryPage.tsx
+++ b/extensions/frontend/src/views/TemplateGalleryPage.tsx
@@ -6,25 +6,47 @@ import {
   CircularProgress,
   Alert,
   Paper,
+  Button,
+  ToggleButtonGroup,
+  ToggleButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  IconButton,
 } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
+import { ViewModule, ViewList, Visibility } from '@mui/icons-material';
+import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import { formatDistanceToNow } from 'date-fns';
 import { useTemplates } from '../hooks/useTemplates';
 import { TemplateFilters as TemplateFiltersType, Template } from '../types/template';
 import TemplateCard from '../components/TemplateCard';
 import TemplateFilters from '../components/TemplateFilters';
+import ImportTemplateModal from '../components/ImportTemplateModal';
+import PaginationForTable from '@spiffworkflow-frontend/components/PaginationForTable';
+
+const DEFAULT_PER_PAGE = 10;
 
 export default function TemplateGalleryPage() {
   const navigate = useNavigate();
-  const { templates, templatesLoading, error, fetchTemplates } = useTemplates();
+  const [searchParams] = useSearchParams();
+  const { templates, pagination, templatesLoading, error, fetchTemplates } = useTemplates();
   const [filters, setFilters] = useState<TemplateFiltersType>({
     latest_only: true,
   });
+  const [importOpen, setImportOpen] = useState(false);
+  const [viewMode, setViewMode] = useState<'card' | 'table'>('card');
+
+  // Read page/per_page from URL search params (PaginationForTable manages them)
+  const page = parseInt(searchParams.get('page') || '1', 10) || 1;
+  const perPage = parseInt(searchParams.get('per_page') || String(DEFAULT_PER_PAGE), 10) || DEFAULT_PER_PAGE;
 
-  // Fetch templates on mount and when filters change
+  // Fetch templates on mount and when filters or pagination change
   useEffect(() => {
-    fetchTemplates(filters);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filters]);
+    fetchTemplates({ ...filters, page, per_page: perPage });
+  }, [filters, page, perPage, fetchTemplates]);
 
   // Extract unique categories and tags from templates for filter options
   const { availableCategories, availableTags } = useMemo(() => {
@@ -52,23 +74,57 @@ export default function TemplateGalleryPage() {
   }, [templates]);
 
   const handleFiltersChange = (newFilters: TemplateFiltersType) => {
+    // Reset to page 1 when filters change
+    const params = new URLSearchParams(searchParams);
+    params.set('page', '1');
+    navigate({ search: params.toString() }, { replace: true });
     setFilters(newFilters);
   };
 
   const handleUseTemplate = (template: Template) => {
-    // Navigate to template detail or start process
-    console.log('Use template:', template);
+    navigate(`/templates/${template.id}`);
   };
 
   const handleViewTemplate = (template: Template) => {
     navigate(`/templates/${template.id}`);
   };
 
+  const handleImportSuccess = (template: Template) => {
+    fetchTemplates(filters);
+    navigate(`/templates/${template.id}`);
+  };
+
   return (
     <Box sx={{ p: 3 }}>
-      <Typography variant="h4" sx={{ fontWeight: 700, mb: 3 }}>
-        Template Gallery
-      </Typography>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 2, mb: 3 }}>
+        <Typography variant="h4" sx={{ fontWeight: 700 }}>
+          Template Gallery
+        </Typography>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <ToggleButtonGroup
+            value={viewMode}
+            exclusive
+            onChange={(_, value) => value != null && setViewMode(value)}
+            size="small"
+            aria-label="View mode"
+          >
+            <ToggleButton value="card" aria-label="Card view">
+              <ViewModule />
+            </ToggleButton>
+            <ToggleButton value="table" aria-label="Table view">
+              <ViewList />
+            </ToggleButton>
+          </ToggleButtonGroup>
+          <Button variant="outlined" onClick={() => setImportOpen(true)}>
+            Import template (zip)
+          </Button>
+        </Box>
+      </Box>
+      <ImportTemplateModal
+        open={importOpen}
+        onClose={() => setImportOpen(false)}
+        onSuccess={handleImportSuccess}
+      />
 
       {error && (
         <Alert severity="error" sx={{ mb: 2 }}>
@@ -115,18 +171,90 @@ export default function TemplateGalleryPage() {
                   : 'No templates are available at this time.'}
               </Typography>
             </Paper>
+          ) : viewMode === 'table' ? (
+            <PaginationForTable
+              page={page}
+              perPage={perPage}
+              perPageOptions={[10, 25, 50, 100]}
+              pagination={pagination}
+              paginationDataTestidTag="template-gallery-pagination"
+              tableToDisplay={
+                <TableContainer component={Paper} elevation={0} sx={{ border: '1px solid', borderColor: 'borders.primary', borderRadius: 2 }}>
+                  <Table size="medium" className="process-model-file-table">
+                    <TableHead>
+                      <TableRow>
+                        <TableCell>Name</TableCell>
+                        <TableCell>Key</TableCell>
+                        <TableCell>Version</TableCell>
+                        <TableCell>Category</TableCell>
+                        <TableCell>Updated</TableCell>
+                        <TableCell align="right">Actions</TableCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {galleryTemplates.map((template) => (
+                        <TableRow
+                          key={template.id}
+                          hover
+                          sx={{ cursor: 'pointer' }}
+                          onClick={() => handleViewTemplate(template)}
+                        >
+                          <TableCell>
+                            <Link
+                              to={`/templates/${template.id}`}
+                              onClick={(e) => e.stopPropagation()}
+                              style={{ fontWeight: 600, textDecoration: 'none' }}
+                            >
+                              {template.name}
+                            </Link>
+                          </TableCell>
+                          <TableCell>{template.templateKey}</TableCell>
+                          <TableCell>{template.version}</TableCell>
+                          <TableCell>{template.category || '—'}</TableCell>
+                          <TableCell>
+                            <Typography variant="caption" title={new Date(template.updatedAtInSeconds * 1000).toISOString()}>
+                              {formatDistanceToNow(new Date(template.updatedAtInSeconds * 1000), { addSuffix: true })}
+                            </Typography>
+                          </TableCell>
+                          <TableCell align="right">
+                            <IconButton
+                              component={Link}
+                              to={`/templates/${template.id}`}
+                              size="small"
+                              aria-label="View template"
+                              onClick={(e) => e.stopPropagation()}
+                            >
+                              <Visibility />
+                            </IconButton>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              }
+            />
           ) : (
-            <Grid container spacing={2}>
-              {galleryTemplates.map((template) => (
-                <Grid item xs={12} sm={6} md={4} lg={3} key={template.id}>
-                  <TemplateCard
-                    template={template}
-                    onUseTemplate={() => handleUseTemplate(template)}
-                    onViewTemplate={() => handleViewTemplate(template)}
-                  />
+            <PaginationForTable
+              page={page}
+              perPage={perPage}
+              perPageOptions={[10, 25, 50, 100]}
+              pagination={pagination}
+              paginationDataTestidTag="template-gallery-pagination"
+              tableToDisplay={
+                <Grid container spacing={2}>
+                  {galleryTemplates.map((template) => (
+                    <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }} key={template.id}>
+                      <TemplateCard
+                        template={template}
+                        onUseTemplate={() => handleUseTemplate(template)}
+                        onViewTemplate={() => handleViewTemplate(template)}
+                      />
+                    </Grid>
+                  ))}
                 </Grid>
-              ))}
-            </Grid>
+              }
+            />
           )}
         </>
       )}
diff --git a/extensions/frontend/src/views/TemplateModelerPage.test.tsx b/extensions/frontend/src/views/TemplateModelerPage.test.tsx
new file mode 100644
index 0000000000..ce05436a85
--- /dev/null
+++ b/extensions/frontend/src/views/TemplateModelerPage.test.tsx
@@ -0,0 +1,119 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import type React from "react";
+import TemplateModelerPage from "./TemplateModelerPage";
+
+vi.mock("react-router-dom", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("react-router-dom")>();
+  return {
+    ...actual,
+    useParams: vi.fn(),
+    useNavigate: vi.fn(() => vi.fn()),
+  };
+});
+
+vi.mock("../services/HttpService", () => ({
+  default: {
+    HttpMethods: { GET: "GET", PUT: "PUT" },
+    makeCallToBackend: vi.fn(),
+  },
+}));
+
+vi.mock("../services/TemplateService", () => ({
+  default: {
+    exportTemplate: vi.fn(),
+  },
+}));
+
+vi.mock("@spiffworkflow-frontend/components/ProcessBreadcrumb", () => ({
+  default: () => <div data-testid="breadcrumb">Breadcrumb</div>,
+}));
+
+vi.mock("@spiffworkflow-frontend/services/DateAndTimeService", () => ({
+  default: {
+    convertSecondsToFormattedDateTime: vi.fn(() => "Jan 1, 2024"),
+  },
+}));
+
+vi.mock("../components/TemplateFileList", () => ({
+  default: () => <div data-testid="template-file-list">File list</div>,
+}));
+
+import { useParams } from "react-router-dom";
+import HttpService from "../services/HttpService";
+
+const theme = createTheme();
+
+function templatePayload(overrides: { isPublished?: boolean; name?: string } = {}) {
+  return {
+    id: 5,
+    templateKey: "test-key",
+    name: overrides.name ?? "Test Template",
+    version: "V1",
+    files: [],
+    isPublished: overrides.isPublished ?? false,
+    createdAt: "2024-01-01T00:00:00.000Z",
+    updatedAt: "2024-01-01T00:00:00.000Z",
+    ...overrides,
+  };
+}
+
+function renderWithRouter(ui: React.ReactElement) {
+  return render(
+    <ThemeProvider theme={theme}>
+      <MemoryRouter>{ui}</MemoryRouter>
+    </ThemeProvider>
+  );
+}
+
+describe("TemplateModelerPage", () => {
+  beforeEach(() => {
+    vi.mocked(useParams).mockReturnValue({ templateId: "5" });
+    vi.mocked(HttpService.makeCallToBackend).mockImplementation((opts) => {
+      opts.successCallback?.(templatePayload() as any);
+    });
+  });
+
+  it("renders template name and does not show Delete button", async () => {
+    vi.mocked(HttpService.makeCallToBackend).mockImplementation((opts) => {
+      opts.successCallback?.(templatePayload({ isPublished: false }) as any);
+    });
+
+    renderWithRouter(<TemplateModelerPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Template: Test Template/i)).toBeInTheDocument();
+    });
+
+    expect(screen.queryByRole("button", { name: "Delete" })).not.toBeInTheDocument();
+  });
+
+  it("shows Publish button when template is not published", async () => {
+    vi.mocked(HttpService.makeCallToBackend).mockImplementation((opts) => {
+      opts.successCallback?.(templatePayload({ isPublished: false }) as any);
+    });
+
+    renderWithRouter(<TemplateModelerPage />);
+
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: "Publish" })).toBeInTheDocument();
+    });
+  });
+
+  it("does not show Publish button when template is published", async () => {
+    vi.mocked(HttpService.makeCallToBackend).mockImplementation((opts) => {
+      opts.successCallback?.(templatePayload({ isPublished: true }) as any);
+    });
+
+    renderWithRouter(<TemplateModelerPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Template: Test Template/i)).toBeInTheDocument();
+    });
+
+    expect(screen.queryByRole("button", { name: "Publish" })).not.toBeInTheDocument();
+  });
+});
diff --git a/extensions/frontend/src/views/TemplateModelerPage.tsx b/extensions/frontend/src/views/TemplateModelerPage.tsx
index 36e67fcd73..0ea9b64acd 100644
--- a/extensions/frontend/src/views/TemplateModelerPage.tsx
+++ b/extensions/frontend/src/views/TemplateModelerPage.tsx
@@ -1,32 +1,36 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { Box, Button, Chip, CircularProgress, Alert, Typography, Paper } from '@mui/material';
+import {
+  Box,
+  Button,
+  Chip,
+  CircularProgress,
+  Alert,
+  Typography,
+  Paper,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+} from '@mui/material';
 import ProcessBreadcrumb from '@spiffworkflow-frontend/components/ProcessBreadcrumb';
-import ReactDiagramEditor from '@spiffworkflow-frontend/components/ReactDiagramEditor';
 import DateAndTimeService from '@spiffworkflow-frontend/services/DateAndTimeService';
 import HttpService from '../services/HttpService';
+import TemplateService from '../services/TemplateService';
+import TemplateFileList from '../components/TemplateFileList';
 import { Template } from '../types/template';
+import { normalizeTemplate } from '../utils/templateHelpers';
 import './TemplateModelerPage.css';
 
-const DEFAULT_FILE_NAME = 'template.bpmn';
-
-const noop = () => {};
-const DIAGRAM_EDITOR_NOOP_PROPS = {
-  onLaunchBpmnEditor: noop,
-  onLaunchDmnEditor: noop,
-  onLaunchJsonSchemaEditor: noop,
-  onLaunchMarkdownEditor: noop,
-  onLaunchScriptEditor: noop,
-  onLaunchMessageEditor: noop,
-  onSearchProcessModels: noop,
-  onDataStoresRequested: noop,
-  onDmnFilesRequested: noop,
-  onJsonSchemaFilesRequested: noop,
-  onMessagesRequested: noop,
-  onServiceTasksRequested: noop,
-};
-
-function TemplateDetailsCard({ template }: { template: Template }) {
+function TemplateDetailsCard({
+  template,
+  onExport,
+  onPublish,
+}: {
+  template: Template;
+  onExport: () => void;
+  onPublish: () => void;
+}) {
   return (
     <Paper
       elevation={0}
@@ -61,6 +65,14 @@ function TemplateDetailsCard({ template }: { template: Template }) {
         <Typography variant="caption" color="text.secondary">
           Updated: {DateAndTimeService.convertSecondsToFormattedDateTime(template.updatedAtInSeconds) ?? '—'}
         </Typography>
+        <Button size="small" variant="contained" onClick={onExport} sx={{ ml: 1 }}>
+          Export template
+        </Button>
+        {!template.isPublished && (
+          <Button size="small" variant="contained" color="primary" onClick={onPublish}>
+            Publish
+          </Button>
+        )}
       </Box>
       {template.description && (
         <Typography
@@ -73,6 +85,7 @@ function TemplateDetailsCard({ template }: { template: Template }) {
             : template.description}
         </Typography>
       )}
+      <TemplateFileList template={template} templateId={template.id} />
     </Paper>
   );
 }
@@ -81,15 +94,29 @@ export default function TemplateModelerPage() {
   const { templateId } = useParams<{ templateId: string }>();
   const navigate = useNavigate();
   const [template, setTemplate] = useState<Template | null>(null);
-  const [bpmnXml, setBpmnXml] = useState<string | null>(null);
-  const [diagramHasChanges, setDiagramHasChanges] = useState(false);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [saveSuccess, setSaveSuccess] = useState(false);
   const [publishSuccess, setPublishSuccess] = useState(false);
+  const [exportError, setExportError] = useState<string | null>(null);
+  const [publishedVersions, setPublishedVersions] = useState<Template[]>([]);
+  const [versionsLoading, setVersionsLoading] = useState(false);
 
   const id = templateId ? parseInt(templateId, 10) : NaN;
-  const fileName = DEFAULT_FILE_NAME;
+
+  const handleExport = useCallback(() => {
+    if (isNaN(id)) return;
+    setExportError(null);
+    TemplateService.exportTemplate(id)
+      .then((blob) => {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `template-${template?.templateKey ?? id}-${template?.version ?? 'export'}.zip`;
+        a.click();
+        URL.revokeObjectURL(url);
+      })
+      .catch((err) => setExportError(err instanceof Error ? err.message : 'Export failed'));
+  }, [id, template?.templateKey, template?.version]);
 
   useEffect(() => {
     if (!templateId || isNaN(id)) {
@@ -100,32 +127,13 @@ export default function TemplateModelerPage() {
 
     setLoading(true);
     setError(null);
-    setBpmnXml(null);
 
     HttpService.makeCallToBackend({
       path: `/v1.0/m8flow/templates/${id}`,
       httpMethod: HttpService.HttpMethods.GET,
-      successCallback: (result: Template) => {
-        setTemplate(result);
-        const content = result.bpmnContent ?? null;
-        const hasContent = typeof content === 'string' && content.trim().length > 0;
-        if (hasContent) {
-          setBpmnXml(content);
-          setLoading(false);
-        } else {
-          // Fallback: fetch raw BPMN from dedicated endpoint (e.g. if get response omits bpmnContent)
-          HttpService.fetchTextFromBackend(
-            `/v1.0/m8flow/templates/${id}/bpmn`,
-            (xml) => {
-              setBpmnXml(xml && xml.trim() ? xml : null);
-              setLoading(false);
-            },
-            () => {
-              setBpmnXml(null);
-              setLoading(false);
-            },
-          );
-        }
+      successCallback: (result: Record<string, unknown>) => {
+        setTemplate(normalizeTemplate(result));
+        setLoading(false);
       },
       failureCallback: (err: any) => {
         setError(err?.message ?? 'Failed to load template');
@@ -134,34 +142,17 @@ export default function TemplateModelerPage() {
     });
   }, [templateId, id]);
 
-  const saveDiagram = useCallback(
-    (xml: string) => {
-      if (!template || isNaN(id)) return;
-
-      setSaveSuccess(false);
-
-      HttpService.makeCallToBackend({
-        path: `/v1.0/m8flow/templates/${id}`,
-        httpMethod: HttpService.HttpMethods.PUT,
-        extraHeaders: { 'Content-Type': 'application/xml' },
-        postBody: xml,
-        successCallback: (result: Template) => {
-          setTemplate(result);
-          setBpmnXml(result.bpmnContent ?? xml);
-          setDiagramHasChanges(false);
-          setSaveSuccess(true);
-        },
-        failureCallback: (err: any) => {
-          setError(err?.message ?? 'Failed to save template');
-        },
-      });
-    },
-    [id, template],
-  );
-
-  const onElementsChanged = useCallback(() => {
-    setDiagramHasChanges(true);
-  }, []);
+  useEffect(() => {
+    if (!template?.templateKey) {
+      setPublishedVersions([]);
+      return;
+    }
+    setVersionsLoading(true);
+    TemplateService.getPublishedVersions(template.templateKey)
+      .then(setPublishedVersions)
+      .catch(() => setPublishedVersions([]))
+      .finally(() => setVersionsLoading(false));
+  }, [template?.templateKey]);
 
   const handlePublish = useCallback(() => {
     if (!template || isNaN(id)) return;
@@ -171,8 +162,8 @@ export default function TemplateModelerPage() {
       path: `/v1.0/m8flow/templates/${id}`,
       httpMethod: HttpService.HttpMethods.PUT,
       postBody: { is_published: true },
-      successCallback: (result: Template) => {
-        setTemplate(result);
+      successCallback: (result: Record<string, unknown>) => {
+        setTemplate(normalizeTemplate(result));
         setPublishSuccess(true);
       },
       failureCallback: (err: any) => {
@@ -183,13 +174,10 @@ export default function TemplateModelerPage() {
 
   const SUCCESS_ALERT_DURATION_MS = 5000;
   useEffect(() => {
-    if (!saveSuccess && !publishSuccess) return;
-    const timer = window.setTimeout(() => {
-      setSaveSuccess(false);
-      setPublishSuccess(false);
-    }, SUCCESS_ALERT_DURATION_MS);
+    if (!publishSuccess) return;
+    const timer = window.setTimeout(() => setPublishSuccess(false), SUCCESS_ALERT_DURATION_MS);
     return () => window.clearTimeout(timer);
-  }, [saveSuccess, publishSuccess]);
+  }, [publishSuccess]);
 
   if (loading && !template) {
     return (
@@ -216,112 +204,67 @@ export default function TemplateModelerPage() {
     return null;
   }
 
-  const hasBpmn = typeof bpmnXml === 'string' && bpmnXml.trim().length > 0;
-  if (!hasBpmn) {
-    return (
-      <Box sx={{ p: 3 }}>
-        <Alert severity="warning">
-          This template has no BPMN content to display.
-        </Alert>
-        <Button onClick={() => navigate('/templates')} sx={{ mt: 2 }}>
-          Back to Templates
-        </Button>
-      </Box>
-    );
-  }
-
   const hotCrumbs: [string, string?][] = [
     ['Templates', '/templates'],
     [template.name],
-    [fileName],
   ];
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-        minHeight: '60vh',
-        overflow: 'hidden',
-        px: 2,
-        pl: 3,
-      }}
-    >
-      {/* Row 1: Breadcrumb only */}
+    <Box sx={{ px: 2, pl: 3, pb: 3 }}>
       <Box sx={{ mb: 1 }}>
         <ProcessBreadcrumb hotCrumbs={hotCrumbs} />
       </Box>
-
-      {/* Row 2: Template details below breadcrumb, above button row */}
-      <TemplateDetailsCard template={template} />
-
+      <Typography variant="h5" component="h1" sx={{ mb: 1 }}>
+        Template: {template.name}
+      </Typography>
+      {publishedVersions.length > 0 && (
+        <Paper
+          elevation={0}
+          sx={{
+            p: 1.5,
+            mb: 1,
+            border: '1px solid',
+            borderColor: 'divider',
+            borderRadius: 1,
+          }}
+        >
+          <FormControl size="small" sx={{ minWidth: 220 }} disabled={versionsLoading}>
+            <InputLabel id="template-version-label">Published versions</InputLabel>
+            <Select
+              labelId="template-version-label"
+              label="Published versions"
+              value={template.id}
+              onChange={(e) => {
+                const selectedId = Number(e.target.value);
+                if (selectedId !== template.id) navigate(`/templates/${selectedId}`);
+              }}
+            >
+              {publishedVersions.map((v) => (
+                <MenuItem key={v.id} value={v.id}>
+                  {v.version}
+                  {v.id === template.id ? ' (current)' : ''}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Paper>
+      )}
+      <TemplateDetailsCard template={template} onExport={handleExport} onPublish={handlePublish} />
+      {exportError && (
+        <Alert severity="error" sx={{ mb: 1 }} onClose={() => setExportError(null)}>
+          {exportError}
+        </Alert>
+      )}
       {error && (
         <Alert severity="error" sx={{ mb: 1 }} onClose={() => setError(null)}>
           {error}
         </Alert>
       )}
-
-      {saveSuccess && (
-        <Alert severity="success" sx={{ mb: 1 }} onClose={() => setSaveSuccess(false)}>
-          Template saved successfully.
-        </Alert>
-      )}
-
       {publishSuccess && (
         <Alert severity="success" sx={{ mb: 1 }} onClose={() => setPublishSuccess(false)}>
           Template published successfully.
         </Alert>
       )}
-
-      <Box
-        sx={{
-          flex: 1,
-          display: 'flex',
-          flexDirection: 'column',
-          minHeight: 0,
-          pl: 2,
-        }}
-      >
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'flex-start',
-            gap: 2,
-            flexShrink: 0,
-          }}
-        >
-          <Box className="template-modeler-editor-wrap" sx={{ flexShrink: 0 }}>
-            <ReactDiagramEditor
-              key={`template-modeler-${id}`}
-              diagramType="bpmn"
-              diagramXML={bpmnXml}
-              processModelId={`template-${id}`}
-              fileName={fileName}
-              disableSaveButton={!diagramHasChanges}
-              saveDiagram={saveDiagram}
-              onElementsChanged={onElementsChanged}
-              {...DIAGRAM_EDITOR_NOOP_PROPS}
-            />
-          </Box>
-          {!template.isPublished && (
-            <Box sx={{ mt: 2 }}>
-              <Button size="small" variant="contained" color="primary" onClick={handlePublish}>
-                Publish
-              </Button>
-            </Box>
-          )}
-        </Box>
-        <div
-          id="diagram-container"
-          style={{
-            flex: 1,
-            minHeight: 400,
-            position: 'relative',
-          }}
-        />
-      </Box>
     </Box>
   );
 }
diff --git a/extensions/m8flow-backend/migrations/versions/b1c2d3e4f5a6_template_files_json.py b/extensions/m8flow-backend/migrations/versions/b1c2d3e4f5a6_template_files_json.py
new file mode 100644
index 0000000000..721a568075
--- /dev/null
+++ b/extensions/m8flow-backend/migrations/versions/b1c2d3e4f5a6_template_files_json.py
@@ -0,0 +1,134 @@
+"""template_files_json: add files JSON column, migrate from bpmn_object_key, drop bpmn_object_key
+
+Revision ID: b1c2d3e4f5a6
+Revises: 22aaaa61d8f6
+Create Date: 2026-02-09
+
+"""
+from alembic import op
+import sqlalchemy as sa
+import os
+import json
+
+
+revision = "b1c2d3e4f5a6"
+down_revision = "9f2d0e4c8abc"
+branch_labels = None
+depends_on = None
+
+
+def _get_base_dir():
+    base_dir = os.environ.get("M8FLOW_TEMPLATES_STORAGE_DIR")
+    if not base_dir:
+        bpmn_spec = os.environ.get("SPIFFWORKFLOW_BACKEND_BPMN_SPEC_ABSOLUTE_DIR")
+        if bpmn_spec:
+            base_dir = os.path.join(bpmn_spec, "m8flow-templates")
+    return os.path.abspath(base_dir) if base_dir else None
+
+
+def _sanitize(s: str) -> str:
+    invalid = ["/", "\\", ":", "*", "?", '"', "<", ">", "|"]
+    for c in invalid:
+        s = s.replace(c, "-")
+    return s
+
+
+def upgrade():
+    op.add_column(
+        "m8flow_templates",
+        sa.Column("files", sa.JSON(), nullable=True),
+    )
+
+    conn = op.get_bind()
+    result = conn.execute(
+        sa.text(
+            "SELECT id, m8f_tenant_id, template_key, version, bpmn_object_key FROM m8flow_templates"
+        )
+    )
+    rows = result.fetchall()
+    base_dir = _get_base_dir()
+
+    for row in rows:
+        id_, tenant_id, template_key, version, bpmn_object_key = row
+        files_json = json.dumps([{"file_type": "bpmn", "file_name": bpmn_object_key}])
+
+        if base_dir and bpmn_object_key:
+            old_path = os.path.join(base_dir, tenant_id, bpmn_object_key)
+            safe_key = _sanitize(template_key)
+            safe_version = _sanitize(version)
+            new_dir = os.path.join(base_dir, tenant_id, safe_key, safe_version)
+            new_path = os.path.join(new_dir, bpmn_object_key)
+            if os.path.isfile(old_path):
+                try:
+                    os.makedirs(new_dir, exist_ok=True)
+                    with open(old_path, "rb") as f:
+                        content = f.read()
+                    with open(new_path, "wb") as f:
+                        f.write(content)
+                except (OSError, IOError):
+                    pass
+
+        conn.execute(
+            sa.text("UPDATE m8flow_templates SET files = :files WHERE id = :id"),
+            {"files": files_json, "id": id_},
+        )
+
+    op.drop_column("m8flow_templates", "bpmn_object_key")
+
+
+def downgrade():
+    op.add_column(
+        "m8flow_templates",
+        sa.Column("bpmn_object_key", sa.String(length=1024), nullable=True),
+    )
+
+    conn = op.get_bind()
+    result = conn.execute(
+        sa.text("SELECT id, m8f_tenant_id, template_key, version, files FROM m8flow_templates")
+    )
+    rows = result.fetchall()
+    base_dir = _get_base_dir()
+
+    for row in rows:
+        id_, tenant_id, template_key, version, files = row
+        bpmn_object_key = None
+        if files and isinstance(files, list):
+            for entry in files:
+                if isinstance(entry, dict) and entry.get("file_type") == "bpmn":
+                    bpmn_object_key = entry.get("file_name")
+                    break
+        if not bpmn_object_key:
+            bpmn_object_key = "template.bpmn"
+
+        conn.execute(
+            sa.text(
+                "UPDATE m8flow_templates SET bpmn_object_key = :key WHERE id = :id"
+            ),
+            {"key": bpmn_object_key, "id": id_},
+        )
+
+        if base_dir and bpmn_object_key:
+            safe_key = _sanitize(template_key)
+            safe_version = _sanitize(version)
+            new_path = os.path.join(
+                base_dir, tenant_id, safe_key, safe_version, bpmn_object_key
+            )
+            if os.path.isfile(new_path):
+                old_dir = os.path.join(base_dir, tenant_id)
+                os.makedirs(old_dir, exist_ok=True)
+                old_path = os.path.join(old_dir, bpmn_object_key)
+                try:
+                    with open(new_path, "rb") as f:
+                        content = f.read()
+                    with open(old_path, "wb") as f:
+                        f.write(content)
+                except (OSError, IOError):
+                    pass
+
+    op.alter_column(
+        "m8flow_templates",
+        "bpmn_object_key",
+        existing_type=sa.String(1024),
+        nullable=False,
+    )
+    op.drop_column("m8flow_templates", "files")
diff --git a/extensions/m8flow-backend/src/m8flow_backend/api.yml b/extensions/m8flow-backend/src/m8flow_backend/api.yml
index b2cd9e8180..44cb710b7f 100644
--- a/extensions/m8flow-backend/src/m8flow_backend/api.yml
+++ b/extensions/m8flow-backend/src/m8flow_backend/api.yml
@@ -259,6 +259,41 @@ paths:
           schema:
             type: string
           description: Search templates by name or description
+        - name: template_key
+          in: query
+          schema:
+            type: string
+          description: Filter to this template key (returns all versions if latest_only=false)
+        - name: published_only
+          in: query
+          schema:
+            type: boolean
+          description: When true, return only published templates
+        - name: sort_by
+          in: query
+          schema:
+            type: string
+            enum: [created, name]
+          description: Sort results by created date or name
+        - name: order
+          in: query
+          schema:
+            type: string
+            enum: [asc, desc]
+            default: desc
+          description: Sort order (asc or desc)
+        - name: page
+          in: query
+          schema:
+            type: integer
+            default: 1
+          description: Page number (1-indexed)
+        - name: per_page
+          in: query
+          schema:
+            type: integer
+            default: 10
+          description: Items per page (max 100)
       responses:
         "200":
           description: List of templates retrieved successfully
@@ -348,7 +383,17 @@ paths:
           application/xml:
             schema:
               type: string
-              description: BPMN XML content
+              description: BPMN XML content (single file)
+          multipart/form-data:
+            schema:
+              type: object
+              properties:
+                files:
+                  type: array
+                  items:
+                    type: string
+                    format: binary
+              description: Multiple files (.bpmn, .json, .dmn, .md). At least one .bpmn required. Metadata via X-Template-* headers.
       responses:
         "201":
           description: Template created successfully
@@ -521,6 +566,55 @@ paths:
               schema:
                 $ref: "#/components/schemas/ErrorResponse"
 
+  /templates/import:
+    post:
+      summary: Import template from zip
+      description: Creates a new template from an uploaded zip file. Metadata via X-Template-* headers. Zip must contain at least one .bpmn file.
+      operationId: m8flow_backend.routes.templates_controller.template_import
+      tags:
+        - Template
+      requestBody:
+        content:
+          multipart/form-data:
+            schema:
+              type: object
+              properties:
+                file:
+                  type: string
+                  format: binary
+                zip:
+                  type: string
+                  format: binary
+          application/zip:
+            schema:
+              type: string
+              format: binary
+      responses:
+        "201":
+          description: Template created successfully
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Template"
+        "400":
+          description: Bad request
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ErrorResponse"
+        "401":
+          description: Unauthorized
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ErrorResponse"
+        "500":
+          description: Internal server error
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ErrorResponse"
+
   /templates/{id}/bpmn:
     get:
       summary: Get BPMN XML
@@ -562,6 +656,160 @@ paths:
               schema:
                 $ref: "#/components/schemas/ErrorResponse"
 
+  /templates/{id}/export:
+    get:
+      summary: Export template as zip
+      description: Returns a zip file containing all template files for this version
+      operationId: m8flow_backend.routes.templates_controller.template_export
+      tags:
+        - Template
+      parameters:
+        - name: id
+          in: path
+          required: true
+          schema:
+            type: integer
+      responses:
+        "200":
+          description: Zip file
+          content:
+            application/zip:
+              schema:
+                type: string
+                format: binary
+        "404":
+          description: Template not found
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ErrorResponse"
+        "500":
+          description: Internal server error
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ErrorResponse"
+
+  /templates/{id}/files/{file_name}:
+    get:
+      summary: Get a template file by name
+      description: Download a single file (BPMN, JSON, DMN, etc.) by filename
+      operationId: m8flow_backend.routes.templates_controller.template_get_file
+      tags:
+        - Template
+      parameters:
+        - name: id
+          in: path
+          required: true
+          schema:
+            type: integer
+        - name: file_name
+          in: path
+          required: true
+          schema:
+            type: string
+      responses:
+        "200":
+          description: File content
+          content:
+            application/xml:
+              schema:
+                type: string
+            application/json:
+              schema:
+                type: string
+            text/markdown:
+              schema:
+                type: string
+        "404":
+          description: Template or file not found
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ErrorResponse"
+        "500":
+          description: Internal server error
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ErrorResponse"
+    put:
+      summary: Update a template file by name
+      description: Update content of a single file. Template must not be published.
+      operationId: m8flow_backend.routes.templates_controller.template_put_file
+      tags:
+        - Template
+      parameters:
+        - name: id
+          in: path
+          required: true
+          schema:
+            type: integer
+        - name: file_name
+          in: path
+          required: true
+          schema:
+            type: string
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: string
+          application/xml:
+            schema:
+              type: string
+          text/markdown:
+            schema:
+              type: string
+          text/plain:
+            schema:
+              type: string
+      responses:
+        "200":
+          description: File updated
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  ok:
+                    type: boolean
+        "400":
+          description: Bad request
+        "403":
+          description: Template is published
+        "404":
+          description: Template or file not found
+        "500":
+          description: Internal server error
+    delete:
+      summary: Delete a template file by name
+      description: Remove a file from the template. Template must not be published. Cannot delete last file or only BPMN.
+      operationId: m8flow_backend.routes.templates_controller.template_delete_file
+      tags:
+        - Template
+      parameters:
+        - name: id
+          in: path
+          required: true
+          schema:
+            type: integer
+        - name: file_name
+          in: path
+          required: true
+          schema:
+            type: string
+      responses:
+        "204":
+          description: File deleted
+        "403":
+          description: Forbidden (published template or last file or only BPMN)
+        "404":
+          description: Template or file not found
+        "500":
+          description: Internal server error
+
 components:
   schemas:
     CreateTenantRequest:
@@ -644,8 +892,16 @@ components:
         visibility:
           type: string
           enum: [PRIVATE, TENANT, PUBLIC]
-        bpmnObjectKey:
-          type: string
+        files:
+          type: array
+          items:
+            type: object
+            properties:
+              fileType:
+                type: string
+                enum: [bpmn, json, dmn, md]
+              fileName:
+                type: string
         isPublished:
           type: boolean
         status:
@@ -697,8 +953,6 @@ components:
           type: boolean
         version:
           type: string
-        bpmn_object_key:
-          type: string
 
     TemplateUpdateRequest:
       type: object
diff --git a/extensions/m8flow-backend/src/m8flow_backend/models/_timestamps_bootstrap.py b/extensions/m8flow-backend/src/m8flow_backend/models/_timestamps_bootstrap.py
index 8e007d0308..bc38605a66 100644
--- a/extensions/m8flow-backend/src/m8flow_backend/models/_timestamps_bootstrap.py
+++ b/extensions/m8flow-backend/src/m8flow_backend/models/_timestamps_bootstrap.py
@@ -53,4 +53,4 @@ def apply() -> None:
         if not event.contains(cls, "before_update", update_modified_on_update_listener):
             event.listen(cls, "before_update", update_modified_on_update_listener)
 
-    _PATCHED = True
+    _PATCHED = True
\ No newline at end of file
diff --git a/extensions/m8flow-backend/src/m8flow_backend/models/template.py b/extensions/m8flow-backend/src/m8flow_backend/models/template.py
index a29daa8f33..8bd0db843f 100644
--- a/extensions/m8flow-backend/src/m8flow_backend/models/template.py
+++ b/extensions/m8flow-backend/src/m8flow_backend/models/template.py
@@ -46,7 +46,7 @@ class TemplateModel(SpiffworkflowBaseDBModel, AuditDateTimeMixin):
         nullable=False,
     )  # type: ignore
     visibility: str = db.Column(db.String(20), nullable=False, default=TemplateVisibility.private.value)
-    bpmn_object_key: str = db.Column(db.String(1024), nullable=False)
+    files: list[dict] | None = db.Column(db.JSON, nullable=True)  # [{"file_type": "bpmn"|"json"|"dmn"|"md", "file_name": str}]
     is_published: bool = db.Column(db.Boolean, default=False, nullable=False)
     status: Optional[str] = db.Column(db.String(50), nullable=True)
     is_deleted: bool = db.Column(db.Boolean, default=False, nullable=False)
diff --git a/extensions/m8flow-backend/src/m8flow_backend/routes/templates_controller.py b/extensions/m8flow-backend/src/m8flow_backend/routes/templates_controller.py
index ca335f50f1..6460cf572b 100644
--- a/extensions/m8flow-backend/src/m8flow_backend/routes/templates_controller.py
+++ b/extensions/m8flow-backend/src/m8flow_backend/routes/templates_controller.py
@@ -1,6 +1,7 @@
 from __future__ import annotations
 
 import json
+from urllib.parse import quote
 
 from flask import Response, jsonify, request, g
 
@@ -10,8 +11,15 @@
 from m8flow_backend.services.template_service import TemplateService
 
 
+def _safe_content_disposition(filename: str) -> dict[str, str]:
+    """Build Content-Disposition header safe from injection (RFC 5987)."""
+    safe = quote(filename, safe="")
+    return {"Content-Disposition": f"attachment; filename*=UTF-8''{safe}"}
+
+
 def _serialize_template(template: TemplateModel, include_bpmn: bool = True) -> dict:
-    """Serialize template with optional BPMN content."""
+    """Serialize template with optional BPMN content. Includes files list from template.files."""
+    files_list = template.files or []
     result = {
         "id": template.id,
         "templateKey": template.template_key,
@@ -22,24 +30,24 @@ def _serialize_template(template: TemplateModel, include_bpmn: bool = True) -> d
         "category": template.category,
         "tenantId": template.m8f_tenant_id,
         "visibility": template.visibility,
-        "bpmnObjectKey": template.bpmn_object_key,
+        "files": [
+            {"fileType": e.get("file_type", "bpmn"), "fileName": e.get("file_name", "")}
+            for e in files_list
+        ],
         "isPublished": template.is_published,
-        "status": "published" if template.is_published else template.status,
+        "status": "published" if template.is_published else (template.status or "draft"),
         "createdBy": template.created_by,
         "modifiedBy": template.modified_by,
         "createdAtInSeconds": template.created_at_in_seconds,
         "updatedAtInSeconds": template.updated_at_in_seconds,
     }
-    
-    # Include BPMN content if requested and available
-    if include_bpmn and template.bpmn_object_key and template.m8f_tenant_id:
+
+    if include_bpmn:
         try:
-            bpmn_bytes = TemplateService.storage.get_bpmn(template.bpmn_object_key, template.m8f_tenant_id)
-            result["bpmnContent"] = bpmn_bytes.decode("utf-8")
+            bpmn_bytes = TemplateService.get_first_bpmn_content(template)
+            result["bpmnContent"] = bpmn_bytes.decode("utf-8") if bpmn_bytes else None
         except Exception:
-            # If BPMN file can't be loaded, just omit it
             result["bpmnContent"] = None
-    
     return result
 
 
@@ -50,8 +58,25 @@ def template_list():
     owner = request.args.get("owner")  # created_by username
     visibility = request.args.get("visibility")  # PRIVATE, TENANT, PUBLIC
     search = request.args.get("search")  # Text search in name/description
+    template_key = request.args.get("template_key")
+    published_only = request.args.get("published_only", "false").lower() == "true"
+    sort_by = request.args.get("sort_by")  # created, name
+    order = request.args.get("order", "desc").lower()
+    if order not in ("asc", "desc"):
+        order = "desc"
+
+    # Pagination params
+    try:
+        page = max(1, int(request.args.get("page", 1)))
+    except (ValueError, TypeError):
+        page = 1
+    try:
+        per_page = max(1, min(int(request.args.get("per_page", 10)), 100))
+    except (ValueError, TypeError):
+        per_page = 10
+
     user = getattr(g, "user", None)
-    templates = TemplateService.list_templates(
+    templates, pagination = TemplateService.list_templates(
         user=user,
         tenant_id=getattr(g, "m8flow_tenant_id", None),
         latest_only=latest_only,
@@ -60,77 +85,103 @@ def template_list():
         owner=owner,
         visibility=visibility,
         search=search,
+        template_key=template_key,
+        published_only=published_only,
+        sort_by=sort_by,
+        order=order,
+        page=page,
+        per_page=per_page,
     )
     # For list responses, omit BPMN content for performance
-    return jsonify([_serialize_template(t, include_bpmn=False) for t in templates])
-
-
-def template_create():
-    user = getattr(g, "user", None)
+    return jsonify({
+        "results": [_serialize_template(t, include_bpmn=False) for t in templates],
+        "pagination": pagination,
+    })
 
-    # Require XML body (new format) with metadata in headers
-    if request.content_type != "application/xml":
-        raise ApiError(
-            "unsupported_media_type",
-            "Only application/xml is supported for template creation. "
-            "Send BPMN XML in the body and metadata via X-Template-* headers.",
-            status_code=415,
-        )
 
-    # Extract metadata from headers
-    metadata = {
+def _metadata_from_headers() -> dict:
+    tags_raw = request.headers.get("X-Template-Tags")
+    tags = None
+    if tags_raw:
+        try:
+            tags = json.loads(tags_raw)
+        except json.JSONDecodeError:
+            tags = [t.strip() for t in tags_raw.split(",") if t.strip()]
+    return {
         "template_key": request.headers.get("X-Template-Key"),
         "name": request.headers.get("X-Template-Name"),
         "description": request.headers.get("X-Template-Description"),
         "category": request.headers.get("X-Template-Category"),
-        "tags": request.headers.get("X-Template-Tags"),
+        "tags": tags,
         "visibility": request.headers.get("X-Template-Visibility", "PRIVATE"),
         "status": request.headers.get("X-Template-Status", "draft"),
         "is_published": request.headers.get("X-Template-Is-Published", "false").lower() == "true",
         "version": request.headers.get("X-Template-Version"),
     }
 
-    # Validate required headers
+
+def template_create():
+    user = getattr(g, "user", None)
+    tenant_id = getattr(g, "m8flow_tenant_id", None)
+
+    if request.content_type and "multipart/form-data" in (request.content_type or "").lower():
+        metadata = _metadata_from_headers()
+        if not metadata["template_key"] or not metadata["name"]:
+            raise ApiError(
+                "missing_fields",
+                "X-Template-Key and X-Template-Name headers are required",
+                status_code=400,
+            )
+        files_list = []
+        for f in request.files.getlist("files"):
+            if f and f.filename:
+                content = f.read()
+                if content:
+                    files_list.append((f.filename, content))
+        if not files_list:
+            raise ApiError("missing_content", "At least one file is required", status_code=400)
+        template = TemplateService.create_template_with_files(
+            metadata=metadata,
+            files=files_list,
+            user=user,
+            tenant_id=tenant_id,
+        )
+        return jsonify(_serialize_template(template)), 201
+
+    if request.content_type != "application/xml":
+        raise ApiError(
+            "unsupported_media_type",
+            "Use application/xml (single BPMN) or multipart/form-data (multiple files) with X-Template-* headers.",
+            status_code=415,
+        )
+
+    metadata = _metadata_from_headers()
     if not metadata["template_key"] or not metadata["name"]:
         raise ApiError(
             "missing_fields",
             "X-Template-Key and X-Template-Name headers are required",
             status_code=400,
         )
-
-    # Get BPMN content from request body
     bpmn_bytes = request.get_data()
     if not bpmn_bytes:
-        raise ApiError(
-            "missing_content",
-            "BPMN XML content is required in request body",
-            status_code=400,
-        )
-
-    # Parse tags if provided
-    if metadata["tags"]:
-        try:
-            metadata["tags"] = json.loads(metadata["tags"])
-        except json.JSONDecodeError:
-            # If not JSON, treat as comma-separated
-            metadata["tags"] = [tag.strip() for tag in metadata["tags"].split(",") if tag.strip()]
+        raise ApiError("missing_content", "BPMN XML content is required in request body", status_code=400)
 
     template = TemplateService.create_template(
         bpmn_bytes=bpmn_bytes,
         metadata=metadata,
         user=user,
-        tenant_id=getattr(g, "m8flow_tenant_id", None),
+        tenant_id=tenant_id,
     )
-
     return jsonify(_serialize_template(template)), 201
 
 
 def template_get_by_id(id: int):
     user = getattr(g, "user", None)
+    include_contents = request.args.get("include_contents", "true").lower() == "true"
     template = TemplateService.get_template_by_id(id, user=user)
     if template is None:
         raise ApiError("not_found", "Template not found", status_code=404)
-    return jsonify(_serialize_template(template))
+    return jsonify(_serialize_template(template, include_bpmn=include_contents))
 
 
 def template_show(template_key: str):
@@ -177,11 +228,15 @@ def template_update_by_id(id: int):
         
         # Get BPMN content from request body if provided
         bpmn_bytes = request.get_data() if request.get_data() else None
-        
+        bpmn_file_name = request.headers.get("X-Template-File-Name") or None
+        if bpmn_file_name:
+            bpmn_file_name = bpmn_file_name.strip() or None
+
         template = TemplateService.update_template_by_id(
             id,
             updates=updates,
             bpmn_bytes=bpmn_bytes,
+            bpmn_file_name=bpmn_file_name,
             user=user
         )
     else:
@@ -193,27 +248,109 @@ def template_update_by_id(id: int):
 
 
 def template_get_bpmn(id: int):
-    """Retrieve BPMN file for a template."""
+    """Retrieve first BPMN file for a template."""
     user = getattr(g, "user", None)
     template = TemplateService.get_template_by_id(id, user=user)
     if template is None:
         raise ApiError("not_found", "Template not found", status_code=404)
-    
-    if not template.bpmn_object_key:
+    bpmn_bytes = TemplateService.get_first_bpmn_content(template)
+    if not bpmn_bytes:
         raise ApiError("not_found", "BPMN file not found for this template", status_code=404)
-    
-    # bpmn_object_key now contains only filename, need tenant_id to retrieve
-    bpmn_bytes = TemplateService.storage.get_bpmn(template.bpmn_object_key, template.m8f_tenant_id)
+    bpmn_name = "diagram.bpmn"
+    for e in template.files or []:
+        if e.get("file_type") == "bpmn":
+            bpmn_name = e.get("file_name", bpmn_name)
+            break
     return Response(
         bpmn_bytes,
-        mimetype='application/xml',
-        headers={
-            'Content-Disposition': f'attachment; filename={template.bpmn_object_key}'
-        }
+        mimetype="application/xml",
+        headers=_safe_content_disposition(bpmn_name),
+    )
+
+
+def template_get_file(id: int, file_name: str):
+    """Download a single file by name."""
+    user = getattr(g, "user", None)
+    template = TemplateService.get_template_by_id(id, user=user)
+    if template is None:
+        raise ApiError("not_found", "Template not found", status_code=404)
+    found = None
+    for e in template.files or []:
+        if e.get("file_name") == file_name:
+            found = e
+            break
+    if not found:
+        raise ApiError("not_found", f"File not found: {file_name}", status_code=404)
+    try:
+        content = TemplateService.get_file_content(template, file_name)
+    except ApiError:
+        raise ApiError("not_found", f"File not found: {file_name}", status_code=404)
+    mimetypes = {"bpmn": "application/xml", "json": "application/json", "dmn": "application/xml", "md": "text/markdown"}
+    mime = mimetypes.get(found.get("file_type", ""), "application/octet-stream")
+    return Response(
+        content,
+        mimetype=mime,
+        headers=_safe_content_disposition(file_name),
+    )
+
+
+def template_put_file(id: int, file_name: str):
+    """Update a single file by name. Template must not be published."""
+    user = getattr(g, "user", None)
+    template = TemplateService.get_template_by_id(id, user=user)
+    if template is None:
+        raise ApiError("not_found", "Template not found", status_code=404)
+    content = request.get_data()
+    if not content:
+        raise ApiError("missing_content", "Request body is required", status_code=400)
+    TemplateService.update_file_content(template, file_name, content, user=user)
+    return jsonify({"ok": True}), 200
+
+
+def template_delete_file(id: int, file_name: str):
+    """Delete a single file from the template. Template must not be published."""
+    user = getattr(g, "user", None)
+    template = TemplateService.get_template_by_id(id, user=user)
+    if template is None:
+        raise ApiError("not_found", "Template not found", status_code=404)
+    TemplateService.delete_file_from_template(template, file_name, user=user)
+    return "", 204
+
+
+def template_export(id: int):
+    """Export template as zip."""
+    user = getattr(g, "user", None)
+    zip_bytes, filename = TemplateService.export_template_zip(id, user=user)
+    return Response(
+        zip_bytes,
+        mimetype="application/zip",
+        headers=_safe_content_disposition(filename),
+    )
+
+
+def template_import():
+    """Import template from zip. Send zip as body or multipart file; metadata in X-Template-* headers."""
+    user = getattr(g, "user", None)
+    if request.content_type and "multipart/form-data" in (request.content_type or "").lower():
+        f = request.files.get("file") or request.files.get("zip")
+        if not f or not f.filename:
+            raise ApiError("missing_content", "Upload a zip file (field 'file' or 'zip')", status_code=400)
+        zip_bytes = f.read()
+    else:
+        zip_bytes = request.get_data()
+    if not zip_bytes:
+        raise ApiError("missing_content", "Zip file content is required", status_code=400)
+    metadata = _metadata_from_headers()
+    template = TemplateService.import_template_from_zip(
+        zip_bytes=zip_bytes,
+        metadata=metadata,
+        user=user,
+        tenant_id=getattr(g, "m8flow_tenant_id", None),
     )
+    return jsonify(_serialize_template(template)), 201
 
 
 def template_delete_by_id(id: int):
     user = getattr(g, "user", None)
     TemplateService.delete_template_by_id(id, user=user)
-    return jsonify({"deleted": True})
+    return "", 204
diff --git a/extensions/m8flow-backend/src/m8flow_backend/services/template_service.py b/extensions/m8flow-backend/src/m8flow_backend/services/template_service.py
index 13ed8e10d9..8390945a40 100644
--- a/extensions/m8flow-backend/src/m8flow_backend/services/template_service.py
+++ b/extensions/m8flow-backend/src/m8flow_backend/services/template_service.py
@@ -1,5 +1,9 @@
 from __future__ import annotations
 
+import io
+import logging
+import os
+import zipfile
 from datetime import datetime, timezone
 from typing import Any
 
@@ -17,8 +21,16 @@
     FilesystemTemplateStorageService,
     NoopTemplateStorageService,
     TemplateStorageService,
+    file_type_from_filename,
 )
 
+logger = logging.getLogger(__name__)
+
+# Zip import safety limits
+MAX_ZIP_SIZE = 50 * 1024 * 1024        # 50 MB compressed
+MAX_EXTRACTED_SIZE = 200 * 1024 * 1024  # 200 MB total uncompressed
+MAX_ZIP_ENTRIES = 100
+
 UNIQUE_TEMPLATE_CONSTRAINT = "uq_template_key_version_tenant"  # keep in sync with TemplateModel __table_args__
 
 
@@ -69,7 +81,25 @@ def create_template(
         user: UserModel | None = None,
         tenant_id: str | None = None,
     ) -> TemplateModel:
-        """Create a template using BPMN bytes and metadata from headers."""
+        """Create a template with a single BPMN file (backward-compat)."""
+        if bpmn_bytes is None:
+            raise ApiError("missing_fields", "bpmn_content is required", status_code=400)
+        return cls.create_template_with_files(
+            metadata=metadata,
+            files=[("diagram.bpmn", bpmn_bytes)],
+            user=user,
+            tenant_id=tenant_id,
+        )
+
+    @classmethod
+    def create_template_with_files(
+        cls,
+        metadata: dict[str, Any],
+        files: list[tuple[str, bytes]],
+        user: UserModel | None = None,
+        tenant_id: str | None = None,
+    ) -> TemplateModel:
+        """Create a template with multiple files. At least one must be BPMN."""
         if user is None:
             raise ApiError("unauthorized", "User must be authenticated to create templates", status_code=403)
 
@@ -77,30 +107,33 @@ def create_template(
         if tenant is None:
             raise ApiError("tenant_required", "Tenant context required", status_code=400)
 
-        if metadata is None:
+        if not metadata:
             raise ApiError("missing_fields", "metadata is required", status_code=400)
 
         template_key = metadata.get("template_key")
         name = metadata.get("name")
-        provided_version = metadata.get("version")
+        if not template_key or not name:
+            raise ApiError("missing_fields", "template_key and name are required", status_code=400)
+
+        version = metadata.get("version") or cls._next_version(template_key, tenant)
         visibility = metadata.get("visibility", TemplateVisibility.private.value)
         tags = metadata.get("tags")
         category = metadata.get("category")
         description = metadata.get("description")
         status = metadata.get("status", "draft")
         is_published = bool(metadata.get("is_published", False))
-        bpmn_object_key = None  # Will be generated from storage
 
-        if not template_key or not name:
-            raise ApiError("missing_fields", "template_key and name are required", status_code=400)
-
-        version = provided_version or cls._next_version(template_key, tenant)
+        has_bpmn = any(
+            file_type_from_filename(fname) == "bpmn" for fname, _ in files
+        )
+        if not has_bpmn:
+            raise ApiError("missing_fields", "At least one BPMN file is required", status_code=400)
 
-        # Store BPMN file (now required)
-        if bpmn_bytes is not None:
-            bpmn_object_key = cls.storage.store_bpmn(template_key, version, bpmn_bytes, tenant)
-        else:
-            raise ApiError("missing_fields", "bpmn_content is required", status_code=400)
+        file_entries: list[dict] = []
+        for file_name, content in files:
+            ft = file_type_from_filename(file_name)
+            cls.storage.store_file(tenant, template_key, version, file_name, ft, content)
+            file_entries.append({"file_type": ft, "file_name": file_name})
 
         username = getattr(g, "user", None)
         username_str = username.username if username and hasattr(username, "username") else None
@@ -116,7 +149,7 @@ def create_template(
             category=category,
             m8f_tenant_id=tenant,
             visibility=visibility,
-            bpmn_object_key=bpmn_object_key,
+            files=file_entries,
             is_published=is_published,
             status=status,
             created_by=username_str,
@@ -150,7 +183,13 @@ def list_templates(
         owner: str | None = None,
         visibility: str | None = None,
         search: str | None = None,
-    ) -> list[TemplateModel]:
+        template_key: str | None = None,
+        published_only: bool = False,
+        sort_by: str | None = None,
+        order: str = "desc",
+        page: int = 1,
+        per_page: int = 10,
+    ) -> tuple[list[TemplateModel], dict]:
         query = TemplateModel.query
         query = TemplateAuthorizationService.filter_query_by_visibility(query, user=user)
         query = query.filter(TemplateModel.is_deleted.is_(False))
@@ -175,6 +214,12 @@ def list_templates(
         if visibility:
             query = query.filter(TemplateModel.visibility == visibility)
         
+        if template_key:
+            query = query.filter(TemplateModel.template_key == template_key)
+        
+        if published_only:
+            query = query.filter(TemplateModel.is_published.is_(True))
+        
         if search:
             # Text search in name and description
             search_pattern = f"%{search}%"
@@ -203,17 +248,33 @@ def list_templates(
                             filtered_results.append(row)
                 results = filtered_results
         
-        if not latest_only:
-            return results
-
-        # Scope latest versions by tenant + template_key combination
-        latest_per_tenant_key: dict[tuple[str, str], TemplateModel] = {}
-        for row in results:
-            key = (row.m8f_tenant_id or "", row.template_key)
-            current = latest_per_tenant_key.get(key)
-            if current is None or cls._version_key(row.version) > cls._version_key(current.version):
-                latest_per_tenant_key[key] = row
-        return list(latest_per_tenant_key.values())
+        if latest_only:
+            # Scope latest versions by tenant + template_key combination
+            latest_per_tenant_key: dict[tuple[str, str], TemplateModel] = {}
+            for row in results:
+                key = (row.m8f_tenant_id or "", row.template_key)
+                current = latest_per_tenant_key.get(key)
+                if current is None or cls._version_key(row.version) > cls._version_key(current.version):
+                    latest_per_tenant_key[key] = row
+            results = list(latest_per_tenant_key.values())
+
+        # Sort: created (by created_at_in_seconds) or name (case-insensitive)
+        if sort_by in ("created", "name"):
+            reverse = order.lower() == "desc"
+            if sort_by == "created":
+                results = sorted(results, key=lambda r: getattr(r, "created_at_in_seconds", 0) or 0, reverse=reverse)
+            else:
+                results = sorted(results, key=lambda r: (r.name or "").lower(), reverse=reverse)
+
+        # Paginate the final filtered results
+        total = len(results)
+        per_page = max(1, min(per_page, 100))
+        pages = max(1, (total + per_page - 1) // per_page)
+        page = max(1, min(page, pages))
+        start = (page - 1) * per_page
+        items = results[start : start + per_page]
+        pagination = {"count": len(items), "total": total, "pages": pages}
+        return items, pagination
 
     @classmethod
     def get_template(
@@ -281,10 +342,10 @@ def update_template(
         if not TemplateAuthorizationService.can_edit(template, user):
             raise ApiError("forbidden", "You cannot edit this template", status_code=403)
 
-        for field in ["name", "description", "tags", "category", "visibility", "bpmn_object_key", "status"]:
+        for field in ["name", "description", "tags", "category", "visibility", "status", "files"]:
             if field in updates:
                 setattr(template, field, updates[field])
-        
+
         username = getattr(g, "user", None)
         template.modified_by = username.username if username and hasattr(username, "username") else template.modified_by
         TemplateModel.commit_with_rollback_on_exception()
@@ -296,6 +357,7 @@ def update_template_by_id(
         template_id: int,
         updates: dict[str, Any],
         bpmn_bytes: bytes | None = None,
+        bpmn_file_name: str | None = None,
         user: UserModel | None = None,
     ) -> TemplateModel:
         """Update template by ID - updates in place if not published, creates new version if published."""
@@ -314,52 +376,89 @@ def update_template_by_id(
             raise ApiError("unauthorized", "User username not found in request context", status_code=403)
         
         tenant = existing_template.m8f_tenant_id
-        
-        # Handle BPMN content update if provided
+        key = existing_template.template_key
+        version = existing_template.version
+        files_list = list(existing_template.files or [])
+
+        # Handle BPMN content update if provided (replace specific file by name, or first bpmn)
         if bpmn_bytes is not None:
-            # Store new BPMN file
+            bpmn_name = bpmn_file_name or "diagram.bpmn"
+            ft = "bpmn"
             if not existing_template.is_published:
-                # Update in place - overwrite existing file
-                new_bpmn_object_key = cls.storage.store_bpmn(
-                    existing_template.template_key, existing_template.version, bpmn_bytes, tenant
-                )
+                if bpmn_file_name:
+                    # Update only the file with this name if it exists
+                    found = any(
+                        e.get("file_name") == bpmn_file_name and e.get("file_type") == "bpmn"
+                        for e in files_list
+                    )
+                    if found:
+                        cls.storage.store_file(tenant, key, version, bpmn_file_name, ft, bpmn_bytes)
+                    else:
+                        cls.storage.store_file(tenant, key, version, bpmn_file_name, ft, bpmn_bytes)
+                        files_list.append({"file_type": ft, "file_name": bpmn_file_name})
+                else:
+                    # Replace first bpmn or add (backward compatibility)
+                    for entry in files_list:
+                        if entry.get("file_type") == "bpmn":
+                            bpmn_name = entry.get("file_name", bpmn_name)
+                            cls.storage.store_file(tenant, key, version, bpmn_name, ft, bpmn_bytes)
+                            break
+                    else:
+                        cls.storage.store_file(tenant, key, version, bpmn_name, ft, bpmn_bytes)
+                        files_list.append({"file_type": ft, "file_name": bpmn_name})
             else:
-                # Create new version - will create new file with new version
-                next_version = cls._next_version(existing_template.template_key, tenant)
-                new_bpmn_object_key = cls.storage.store_bpmn(
-                    existing_template.template_key, next_version, bpmn_bytes, tenant
-                )
-        else:
-            new_bpmn_object_key = None
-        
-        allowed_fields = ["name", "description", "tags", "category", "visibility", "bpmn_object_key", "status"]
-        
-        # If template is not published, update in place
+                # Published: will create new version in the loop below; bpmn_bytes applied there by file name
+                pass
+
+        allowed_fields = ["name", "description", "tags", "category", "visibility", "status"]
+
         if not existing_template.is_published:
-            # Handle publish: set is_published and sync status (only allow setting to True)
             if updates.get("is_published") is True:
                 existing_template.is_published = True
                 existing_template.status = "published"
-            # Update the existing template record in place
             for field in allowed_fields:
                 if field in updates:
                     setattr(existing_template, field, updates[field])
-            
-            # Update BPMN object key if new BPMN was provided
-            if new_bpmn_object_key:
-                existing_template.bpmn_object_key = new_bpmn_object_key
-            
+            if files_list:
+                existing_template.files = files_list
             existing_template.modified_by = username_str
             TemplateModel.commit_with_rollback_on_exception()
             return existing_template
-        
-        # If template is published, create a new version
-        # Calculate next version
-        next_version = cls._next_version(existing_template.template_key, tenant)
-        
-        # Create new template version with copied fields
+
+        # Published: create new version and copy files
+        next_version = cls._next_version(key, tenant)
+        new_files: list[dict] = []
+        replaced_first_bpmn = False  # used when bpmn_file_name is not set (backward compat)
+        for entry in (existing_template.files or []):
+            fname = entry.get("file_name")
+            if not fname:
+                continue
+            try:
+                content = cls.storage.get_file(tenant, key, existing_template.version, fname)
+                if bpmn_bytes is not None and entry.get("file_type") == "bpmn":
+                    if bpmn_file_name and fname == bpmn_file_name:
+                        content = bpmn_bytes
+                    elif not bpmn_file_name and not replaced_first_bpmn:
+                        content = bpmn_bytes
+                        replaced_first_bpmn = True
+                ft = entry.get("file_type", file_type_from_filename(fname))
+                cls.storage.store_file(tenant, key, next_version, fname, ft, content)
+                new_files.append({"file_type": ft, "file_name": fname})
+            except ApiError as e:
+                logger.warning("Failed to copy file %s for new version %s: %s", fname, next_version, e)
+        if bpmn_bytes is not None and not any(e.get("file_type") == "bpmn" for e in (existing_template.files or [])):
+            add_name = bpmn_file_name or "diagram.bpmn"
+            cls.storage.store_file(tenant, key, next_version, add_name, "bpmn", bpmn_bytes)
+            new_files.append({"file_type": "bpmn", "file_name": add_name})
+        if not new_files:
+            raise ApiError(
+                "storage_error",
+                "Failed to copy any files for the new template version",
+                status_code=500,
+            )
+
         new_template = TemplateModel(
-            template_key=existing_template.template_key,
+            template_key=key,
             version=next_version,
             name=existing_template.name,
             description=existing_template.description,
@@ -367,20 +466,27 @@ def update_template_by_id(
             category=existing_template.category,
             m8f_tenant_id=existing_template.m8f_tenant_id,
             visibility=existing_template.visibility,
-            bpmn_object_key=new_bpmn_object_key or existing_template.bpmn_object_key,
-            is_published=False,  # New versions start as unpublished
-            status=existing_template.status,
+            files=new_files,
+            is_published=False,
+            status="draft",
             created_by=username_str,
             modified_by=username_str,
         )
-        
-        # Apply updates
         for field in allowed_fields:
+            if field == "status":
+                continue  # keep new version as draft, do not overwrite from updates
             if field in updates:
                 setattr(new_template, field, updates[field])
-        
-        db.session.add(new_template)
-        TemplateModel.commit_with_rollback_on_exception()
+        try:
+            db.session.add(new_template)
+            TemplateModel.commit_with_rollback_on_exception()
+        except IntegrityError:
+            db.session.rollback()
+            raise ApiError(
+                error_code="template_conflict",
+                message="A template with this key and version already exists for this tenant.",
+                status_code=409,
+            )
         return new_template
 
     @classmethod
@@ -404,3 +510,204 @@ def delete_template_by_id(
         template.is_deleted = True
 
         TemplateModel.commit_with_rollback_on_exception()
+
+    @classmethod
+    def get_file_content(
+        cls,
+        template: TemplateModel,
+        file_name: str,
+    ) -> bytes:
+        """Get content of one file by name. Raises ApiError if not found."""
+        return cls.storage.get_file(
+            template.m8f_tenant_id,
+            template.template_key,
+            template.version,
+            file_name,
+        )
+
+    @classmethod
+    def get_first_bpmn_content(cls, template: TemplateModel) -> bytes | None:
+        """Return content of first BPMN file, or None if none."""
+        for entry in template.files or []:
+            if entry.get("file_type") == "bpmn":
+                fname = entry.get("file_name")
+                if fname:
+                    try:
+                        return cls.get_file_content(template, fname)
+                    except ApiError:
+                        continue
+        return None
+
+    @classmethod
+    def update_file_content(
+        cls,
+        template: TemplateModel,
+        file_name: str,
+        content: bytes,
+        user: UserModel | None = None,
+    ) -> None:
+        """Update content of an existing file. Template must not be published."""
+        if template.is_published:
+            raise ApiError(
+                "forbidden",
+                "Cannot update files of a published template",
+                status_code=403,
+            )
+        found = None
+        for e in template.files or []:
+            if e.get("file_name") == file_name:
+                found = e
+                break
+        if not found:
+            raise ApiError("not_found", f"File not found: {file_name}", status_code=404)
+        ft = found.get("file_type") or file_type_from_filename(file_name)
+        cls.storage.store_file(
+            template.m8f_tenant_id,
+            template.template_key,
+            template.version,
+            file_name,
+            ft,
+            content,
+        )
+
+    @classmethod
+    def delete_file_from_template(
+        cls,
+        template: TemplateModel,
+        file_name: str,
+        user: UserModel | None = None,
+    ) -> None:
+        """Remove a file from the template. Template must not be published. Cannot delete last file or only BPMN."""
+        if template.is_published:
+            raise ApiError(
+                "forbidden",
+                "Cannot delete files from a published template",
+                status_code=403,
+            )
+        files_list = list(template.files or [])
+        if not files_list:
+            raise ApiError("not_found", "Template has no files", status_code=404)
+        remaining = [e for e in files_list if e.get("file_name") != file_name]
+        if len(remaining) == len(files_list):
+            raise ApiError("not_found", f"File not found: {file_name}", status_code=404)
+        if len(remaining) == 0:
+            raise ApiError(
+                "forbidden",
+                "Cannot delete the last file from a template",
+                status_code=403,
+            )
+        has_bpmn_after = any(e.get("file_type") == "bpmn" for e in remaining)
+        if not has_bpmn_after:
+            raise ApiError(
+                "forbidden",
+                "Template must have at least one BPMN file",
+                status_code=403,
+            )
+        template.files = remaining
+        if user and hasattr(user, "username"):
+            template.modified_by = user.username
+        template.modified_at = datetime.now(timezone.utc)
+        TemplateModel.commit_with_rollback_on_exception()
+        try:
+            cls.storage.delete_file(
+                template.m8f_tenant_id,
+                template.template_key,
+                template.version,
+                file_name,
+            )
+        except Exception:
+            pass
+
+    @classmethod
+    def export_template_zip(
+        cls,
+        template_id: int,
+        user: UserModel | None = None,
+    ) -> tuple[bytes, str]:
+        """Return (zip bytes, suggested filename)."""
+        template = cls.get_template_by_id(template_id, user=user)
+        if template is None:
+            raise ApiError("not_found", "Template not found", status_code=404)
+        entries = template.files or []
+        if not entries:
+            raise ApiError("not_found", "Template has no files to export", status_code=404)
+        zip_bytes = cls.storage.stream_zip(
+            template.m8f_tenant_id,
+            template.template_key,
+            template.version,
+            entries,
+        )
+        filename = f"template-{template.template_key}-{template.version}.zip"
+        return zip_bytes, filename
+
+    @classmethod
+    def import_template_from_zip(
+        cls,
+        zip_bytes: bytes,
+        metadata: dict[str, Any],
+        user: UserModel | None = None,
+        tenant_id: str | None = None,
+    ) -> TemplateModel:
+        """Create a template from a zip file. Zip must contain at least one .bpmn file."""
+        if user is None:
+            raise ApiError("unauthorized", "User must be authenticated", status_code=403)
+        tenant = tenant_id or getattr(g, "m8flow_tenant_id", None)
+        if tenant is None:
+            raise ApiError("tenant_required", "Tenant context required", status_code=400)
+        template_key = metadata.get("template_key")
+        name = metadata.get("name")
+        if not template_key or not name:
+            raise ApiError("missing_fields", "template_key and name are required", status_code=400)
+
+        # Validate zip size before extracting
+        if len(zip_bytes) > MAX_ZIP_SIZE:
+            raise ApiError(
+                "payload_too_large",
+                f"Zip file exceeds maximum allowed size of {MAX_ZIP_SIZE // (1024 * 1024)} MB",
+                status_code=400,
+            )
+
+        version = metadata.get("version") or cls._next_version(template_key, tenant)
+        files_to_add: list[tuple[str, bytes]] = []
+        has_bpmn = False
+        total_extracted = 0
+        try:
+            with zipfile.ZipFile(io.BytesIO(zip_bytes), "r") as zf:
+                entries = [n for n in zf.namelist() if not n.endswith("/")]
+                if len(entries) > MAX_ZIP_ENTRIES:
+                    raise ApiError(
+                        "payload_too_large",
+                        f"Zip contains too many entries (max {MAX_ZIP_ENTRIES})",
+                        status_code=400,
+                    )
+                for name_in_zip in entries:
+                    base_name = os.path.basename(name_in_zip)
+                    if not base_name:
+                        continue
+                    if base_name.startswith("."):
+                        continue
+                    content = zf.read(name_in_zip)
+                    total_extracted += len(content)
+                    if total_extracted > MAX_EXTRACTED_SIZE:
+                        raise ApiError(
+                            "payload_too_large",
+                            f"Extracted content exceeds maximum allowed size of {MAX_EXTRACTED_SIZE // (1024 * 1024)} MB",
+                            status_code=400,
+                        )
+                    ft = file_type_from_filename(base_name)
+                    if ft == "bpmn":
+                        has_bpmn = True
+                    files_to_add.append((base_name, content))
+        except zipfile.BadZipFile as e:
+            raise ApiError("invalid_content", f"Invalid zip file: {e}", status_code=400)
+
+        if not has_bpmn:
+            raise ApiError("missing_fields", "Zip must contain at least one .bpmn file", status_code=400)
+
+        metadata["version"] = version
+        return cls.create_template_with_files(
+            metadata=metadata,
+            files=files_to_add,
+            user=user,
+            tenant_id=tenant,
+        )
diff --git a/extensions/m8flow-backend/src/m8flow_backend/services/template_storage_service.py b/extensions/m8flow-backend/src/m8flow_backend/services/template_storage_service.py
index ab7d66bc97..3675fa40db 100644
--- a/extensions/m8flow-backend/src/m8flow_backend/services/template_storage_service.py
+++ b/extensions/m8flow-backend/src/m8flow_backend/services/template_storage_service.py
@@ -1,47 +1,145 @@
 from __future__ import annotations
 
+import io
+import logging
 import os
+import zipfile
 from typing import Protocol
 
 from flask import current_app
 
 from spiffworkflow_backend.exceptions.api_error import ApiError
 
+logger = logging.getLogger(__name__)
+
+FILE_EXT_TO_TYPE = {
+    ".bpmn": "bpmn",
+    ".json": "json",
+    ".dmn": "dmn",
+    ".md": "md",
+}
+
+
+def file_type_from_filename(filename: str) -> str:
+    ext = os.path.splitext(filename)[1].lower()
+    return FILE_EXT_TO_TYPE.get(ext, "other")
+
 
 class TemplateStorageService(Protocol):
-    """Abstraction for storing and retrieving BPMN content."""
+    """Abstraction for storing and retrieving template files."""
 
-    def store_bpmn(self, template_key: str, version: str, bpmn_bytes: bytes, tenant_id: str) -> str:
-        """Persist BPMN content and return filename only (e.g., 'template-key.bpmn')."""
+    def store_file(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+        file_name: str,
+        file_type: str,
+        content: bytes,
+    ) -> None:
+        """Persist a file under {tenant_id}/{template_key}/{version}/{file_name}."""
         ...
 
-    def get_bpmn(self, filename: str, tenant_id: str) -> bytes:
-        """Retrieve BPMN content by filename and tenant_id."""
+    def get_file(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+        file_name: str,
+    ) -> bytes:
+        """Retrieve file content by path."""
+        ...
+
+    def list_files(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+    ) -> list[dict]:
+        """List files under version prefix. Returns [{"file_name": str, "file_type": str}]."""
+        ...
+
+    def delete_file(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+        file_name: str,
+    ) -> None:
+        """Remove a single file (for replace/delete)."""
+        ...
+
+    def stream_zip(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+        file_entries: list[dict],
+    ) -> bytes:
+        """Build a zip of the given file entries (each has file_name, file_type). Returns zip bytes."""
         ...
 
 
 class NoopTemplateStorageService:
-    """Placeholder storage that assumes BPMN is already stored and key is provided."""
+    """Placeholder storage."""
+
+    def store_file(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+        file_name: str,
+        file_type: str,
+        content: bytes,
+    ) -> None:
+        raise NotImplementedError("Template storage is not configured.")
+
+    def get_file(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+        file_name: str,
+    ) -> bytes:
+        raise NotImplementedError("Template storage is not configured.")
+
+    def list_files(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+    ) -> list[dict]:
+        raise NotImplementedError("Template storage is not configured.")
 
-    def store_bpmn(self, template_key: str, version: str, bpmn_bytes: bytes, tenant_id: str) -> str:
-        raise NotImplementedError("BPMN storage is not configured; provide bpmn_object_key directly.")
+    def delete_file(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+        file_name: str,
+    ) -> None:
+        raise NotImplementedError("Template storage is not configured.")
 
-    def get_bpmn(self, filename: str, tenant_id: str) -> bytes:
-        raise NotImplementedError("BPMN storage is not configured; cannot fetch BPMN content.")
+    def stream_zip(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+        file_entries: list[dict],
+    ) -> bytes:
+        raise NotImplementedError("Template storage is not configured.")
 
 
 class FilesystemTemplateStorageService:
-    """Stores BPMN templates on the local filesystem in m8flow-specific directory."""
+    """Stores template files on the local filesystem at {base_dir}/{tenant_id}/{template_key}/{version}/{file_name}."""
 
     @staticmethod
     def _get_base_dir() -> str:
-        """Get m8flow templates base directory from Flask config."""
-        # Try m8flow-specific directory first
         base_dir = current_app.config.get("M8FLOW_TEMPLATES_STORAGE_DIR")
-
         if not base_dir:
-            # Fallback to subdirectory of BPMN spec dir for backward compatibility
-            bpmn_spec_dir = current_app.config.get("SPIFFWORKFLOW_BACKEND_BPMN_SPEC_ABSOLUTE_DIR")
+            bpmn_spec_dir = current_app.config.get(
+                "SPIFFWORKFLOW_BACKEND_BPMN_SPEC_ABSOLUTE_DIR"
+            )
             if bpmn_spec_dir:
                 base_dir = os.path.join(bpmn_spec_dir, "m8flow-templates")
             else:
@@ -50,53 +148,152 @@ def _get_base_dir() -> str:
                     "M8FLOW_TEMPLATES_STORAGE_DIR or SPIFFWORKFLOW_BACKEND_BPMN_SPEC_ABSOLUTE_DIR must be configured",
                     status_code=500,
                 )
-
         return os.path.abspath(base_dir)
 
     @staticmethod
-    def _sanitize_filename(filename: str) -> str:
-        """Remove invalid filesystem characters from filename."""
-        invalid_chars = ["/", "\\", ":", "*", "?", '"', "<", ">", "|"]
-        for char in invalid_chars:
-            filename = filename.replace(char, "-")
-        return filename
-
-    def store_bpmn(self, template_key: str, version: str, bpmn_bytes: bytes, tenant_id: str) -> str:
-        """Store BPMN content and return filename only (e.g., 'template-key_V2.bpmn')."""
-        base_dir = self._get_base_dir()
-        safe_key = self._sanitize_filename(template_key)
-        safe_version = self._sanitize_filename(version)
-        filename = f"{safe_key}_{safe_version}.bpmn"
-        # Store at: {base_dir}/{tenant_id}/{filename}
-        full_path = os.path.join(base_dir, tenant_id, filename)
-
-        # Create directory if needed
-        os.makedirs(os.path.dirname(full_path), exist_ok=True)
-
-        # Write file
-        try:
-            with open(full_path, "wb") as f:
-                f.write(bpmn_bytes)
-        except (IOError, OSError) as e:
-            raise ApiError("storage_error", f"Failed to write BPMN file: {str(e)}", status_code=500)
+    def _sanitize(s: str) -> str:
+        """Sanitize a path component: strip null bytes, replace invalid chars, enforce length."""
+        s = s.replace("\x00", "")
+        invalid = ["/", "\\", ":", "*", "?", '"', "<", ">", "|"]
+        for c in invalid:
+            s = s.replace(c, "-")
+        s = s.strip(". -")
+        if not s:
+            raise ApiError("invalid_input", "Name is empty after sanitization", status_code=400)
+        if len(s) > 255:
+            s = s[:255]
+        return s
 
-        # Return only filename for database storage
-        return filename
+    def _version_dir(self, tenant_id: str, template_key: str, version: str) -> str:
+        base = self._get_base_dir()
+        return os.path.join(
+            base,
+            self._sanitize(tenant_id),
+            self._sanitize(template_key),
+            self._sanitize(version),
+        )
 
-    def get_bpmn(self, filename: str, tenant_id: str) -> bytes:
-        """Retrieve BPMN content by filename and tenant_id."""
-        base_dir = self._get_base_dir()
-        # Reconstruct full path: {base_dir}/{tenant_id}/{filename}
-        full_path = os.path.join(base_dir, tenant_id, filename)
+    def _file_path(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+        file_name: str,
+    ) -> str:
+        safe_name = self._sanitize(os.path.basename(file_name))
+        return os.path.join(
+            self._version_dir(tenant_id, template_key, version),
+            safe_name,
+        )
 
-        if not os.path.exists(full_path):
-            raise ApiError("not_found", f"BPMN file not found: {filename} for tenant {tenant_id}", status_code=404)
+    def store_file(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+        file_name: str,
+        file_type: str,
+        content: bytes,
+    ) -> None:
+        path = self._file_path(tenant_id, template_key, version, file_name)
+        try:
+            os.makedirs(os.path.dirname(path), exist_ok=True)
+            with open(path, "wb") as f:
+                f.write(content)
+        except (IOError, OSError) as e:
+            raise ApiError(
+                "storage_error",
+                f"Failed to write file: {str(e)}",
+                status_code=500,
+            )
 
+    def get_file(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+        file_name: str,
+    ) -> bytes:
+        path = self._file_path(tenant_id, template_key, version, file_name)
+        if not os.path.isfile(path):
+            raise ApiError(
+                "not_found",
+                f"File not found: {file_name}",
+                status_code=404,
+            )
         try:
-            with open(full_path, "rb") as f:
+            with open(path, "rb") as f:
                 return f.read()
-        except FileNotFoundError:
-            # File might have been removed after the exists() check
-            raise ApiError("not_found", f"BPMN file not found: {filename} for tenant {tenant_id}", status_code=404)
         except (IOError, OSError) as e:
-            raise ApiError("storage_error", f"Failed to read BPMN file: {str(e)}", status_code=500)
+            raise ApiError(
+                "storage_error",
+                f"Failed to read file: {str(e)}",
+                status_code=500,
+            )
+
+    def list_files(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+    ) -> list[dict]:
+        vdir = self._version_dir(tenant_id, template_key, version)
+        if not os.path.isdir(vdir):
+            return []
+        result = []
+        for name in os.listdir(vdir):
+            path = os.path.join(vdir, name)
+            if os.path.isfile(path):
+                result.append({
+                    "file_name": name,
+                    "file_type": file_type_from_filename(name),
+                })
+        return result
+
+    def delete_file(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+        file_name: str,
+    ) -> None:
+        path = self._file_path(tenant_id, template_key, version, file_name)
+        if os.path.isfile(path):
+            try:
+                os.remove(path)
+            except (IOError, OSError) as e:
+                raise ApiError(
+                    "storage_error",
+                    f"Failed to delete file: {str(e)}",
+                    status_code=500,
+                )
+
+    def stream_zip(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+        file_entries: list[dict],
+    ) -> bytes:
+        buf = io.BytesIO()
+        skipped: list[str] = []
+        with zipfile.ZipFile(buf, "w", zipfile.ZIP_DEFLATED) as zf:
+            for entry in file_entries:
+                name = entry.get("file_name")
+                if not name:
+                    continue
+                try:
+                    content = self.get_file(tenant_id, template_key, version, name)
+                    zf.writestr(name, content)
+                except ApiError:
+                    logger.warning(
+                        "Skipping missing file during zip export: %s/%s/%s/%s",
+                        tenant_id, template_key, version, name,
+                    )
+                    skipped.append(name)
+        if skipped:
+            logger.warning(
+                "Zip export for %s/%s/%s skipped %d file(s): %s",
+                tenant_id, template_key, version, len(skipped), ", ".join(skipped),
+            )
+        return buf.getvalue()
diff --git a/extensions/m8flow-backend/tests/unit/m8flow_backend/models/test_template_model.py b/extensions/m8flow-backend/tests/unit/m8flow_backend/models/test_template_model.py
index edc6424025..018a6a3d1a 100644
--- a/extensions/m8flow-backend/tests/unit/m8flow_backend/models/test_template_model.py
+++ b/extensions/m8flow-backend/tests/unit/m8flow_backend/models/test_template_model.py
@@ -74,7 +74,7 @@ def test_timestamps_auto_populated_and_updated(self, app):
                 category=None,
                 m8f_tenant_id=tenant.id,
                 visibility="PRIVATE",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 is_published=False,
                 status="draft",
                 is_deleted=False,
diff --git a/extensions/m8flow-backend/tests/unit/m8flow_backend/services/test_template_service.py b/extensions/m8flow-backend/tests/unit/m8flow_backend/services/test_template_service.py
index 8ae97e5932..6a286e8ef2 100644
--- a/extensions/m8flow-backend/tests/unit/m8flow_backend/services/test_template_service.py
+++ b/extensions/m8flow-backend/tests/unit/m8flow_backend/services/test_template_service.py
@@ -34,14 +34,52 @@
 class MockTemplateStorageService:
     """Mock storage service for testing without file system dependencies."""
 
-    def store_bpmn(self, template_key: str, version: str, bpmn_bytes: bytes, tenant_id: str) -> str:
-        """Return a mock filename."""
-        return f"{template_key}.bpmn"
-
-    def get_bpmn(self, filename: str, tenant_id: str) -> bytes:
-        """Return mock BPMN content."""
+    def store_file(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+        file_name: str,
+        file_type: str,
+        content: bytes,
+    ) -> None:
+        pass
+
+    def get_file(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+        file_name: str,
+    ) -> bytes:
         return b"<bpmn>mock content</bpmn>"
 
+    def list_files(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+    ) -> list:
+        return [{"file_name": "test.bpmn", "file_type": "bpmn"}]
+
+    def delete_file(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+        file_name: str,
+    ) -> None:
+        pass
+
+    def stream_zip(
+        self,
+        tenant_id: str,
+        template_key: str,
+        version: str,
+        file_entries: list,
+    ) -> bytes:
+        return b"PK\x03\x04"  # minimal zip bytes
+
 
 # ============================================================================
 # Version Management Tests
@@ -93,7 +131,7 @@ def test_next_version_increments_patch() -> None:
             version="V1",
             name="Test Template",
             m8f_tenant_id="tenant-a",
-            bpmn_object_key="test.bpmn",
+            files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
             created_by="tester",
             modified_by="tester",
         )
@@ -110,7 +148,7 @@ def test_next_version_increments_patch() -> None:
             version=next_version,
             name="Test Template",
             m8f_tenant_id="tenant-a",
-            bpmn_object_key="test.bpmn",
+            files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
             created_by="tester",
             modified_by="tester",
         )
@@ -143,7 +181,7 @@ def test_next_version_handles_non_numeric() -> None:
             version="V1-alpha",
             name="Test Template",
             m8f_tenant_id="tenant-a",
-            bpmn_object_key="test.bpmn",
+            files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
             created_by="tester",
             modified_by="tester",
         )
@@ -177,7 +215,7 @@ def test_next_version_tenant_scoped() -> None:
             version="V1",
             name="Shared Template",
             m8f_tenant_id="tenant-a",
-            bpmn_object_key="test.bpmn",
+            files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
             created_by="tester",
             modified_by="tester",
         )
@@ -243,7 +281,8 @@ def test_create_template_with_bpmn_bytes() -> None:
                 assert template.visibility == TemplateVisibility.private.value
                 assert template.m8f_tenant_id == "tenant-a"
                 assert template.version == "V1"
-                assert template.bpmn_object_key == "test-template.bpmn"
+                assert template.files and len(template.files) == 1
+                assert template.files[0]["file_name"] == "diagram.bpmn"
                 assert template.created_by == "tester"
                 assert template.modified_by == "tester"
 
@@ -565,7 +604,7 @@ def test_list_templates_latest_only() -> None:
                 version="V1",
                 name="Test",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
@@ -574,7 +613,7 @@ def test_list_templates_latest_only() -> None:
                 version="V2",
                 name="Test",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
@@ -583,14 +622,14 @@ def test_list_templates_latest_only() -> None:
                 version="V3",
                 name="Test",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
             db.session.add_all([template1, template2, template3])
             db.session.commit()
 
-            results = TemplateService.list_templates(user=user, tenant_id="tenant-a", latest_only=True)
+            results, pagination = TemplateService.list_templates(user=user, tenant_id="tenant-a", latest_only=True)
             assert len(results) == 1
             assert results[0].version == "V3"
 
@@ -619,7 +658,7 @@ def test_list_templates_all_versions() -> None:
                 version="V1",
                 name="Test",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
@@ -628,14 +667,14 @@ def test_list_templates_all_versions() -> None:
                 version="V2",
                 name="Test",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
             db.session.add_all([template1, template2])
             db.session.commit()
 
-            results = TemplateService.list_templates(user=user, tenant_id="tenant-a", latest_only=False)
+            results, pagination = TemplateService.list_templates(user=user, tenant_id="tenant-a", latest_only=False)
             assert len(results) == 2
 
 
@@ -663,7 +702,7 @@ def test_list_templates_filter_by_category() -> None:
                 name="Category 1",
                 category="category1",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
@@ -673,14 +712,14 @@ def test_list_templates_filter_by_category() -> None:
                 name="Category 2",
                 category="category2",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
             db.session.add_all([template1, template2])
             db.session.commit()
 
-            results = TemplateService.list_templates(user=user, tenant_id="tenant-a", category="category1")
+            results, pagination = TemplateService.list_templates(user=user, tenant_id="tenant-a", category="category1")
             assert len(results) == 1
             assert results[0].category == "category1"
 
@@ -709,7 +748,7 @@ def test_list_templates_filter_by_tag() -> None:
                 name="Tag 1",
                 tags=["tag1", "tag2"],
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
@@ -719,14 +758,14 @@ def test_list_templates_filter_by_tag() -> None:
                 name="Tag 3",
                 tags=["tag3"],
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
             db.session.add_all([template1, template2])
             db.session.commit()
 
-            results = TemplateService.list_templates(user=user, tenant_id="tenant-a", tag="tag1")
+            results, pagination = TemplateService.list_templates(user=user, tenant_id="tenant-a", tag="tag1")
             assert len(results) == 1
             assert "tag1" in results[0].tags
 
@@ -755,7 +794,7 @@ def test_list_templates_filter_by_owner() -> None:
                 version="V1",
                 name="Owner 1",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="owner1",
                 modified_by="owner1",
             )
@@ -764,14 +803,14 @@ def test_list_templates_filter_by_owner() -> None:
                 version="V1",
                 name="Owner 2",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="owner2",
                 modified_by="owner2",
             )
             db.session.add_all([template1, template2])
             db.session.commit()
 
-            results = TemplateService.list_templates(user=user1, tenant_id="tenant-a", owner="owner1")
+            results, pagination = TemplateService.list_templates(user=user1, tenant_id="tenant-a", owner="owner1")
             assert len(results) == 1
             assert results[0].created_by == "owner1"
 
@@ -800,7 +839,7 @@ def test_list_templates_filter_by_visibility() -> None:
                 name="Public",
                 visibility=TemplateVisibility.public.value,
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
@@ -810,14 +849,14 @@ def test_list_templates_filter_by_visibility() -> None:
                 name="Private",
                 visibility=TemplateVisibility.private.value,
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
             db.session.add_all([template1, template2])
             db.session.commit()
 
-            results = TemplateService.list_templates(
+            results, pagination = TemplateService.list_templates(
                 user=user, tenant_id="tenant-a", visibility=TemplateVisibility.public.value
             )
             assert len(results) == 1
@@ -848,7 +887,7 @@ def test_list_templates_search() -> None:
                 name="Searchable Template",
                 description="This is searchable",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
@@ -858,14 +897,14 @@ def test_list_templates_search() -> None:
                 name="Other Template",
                 description="Unrelated content",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
             db.session.add_all([template1, template2])
             db.session.commit()
 
-            results = TemplateService.list_templates(user=user, tenant_id="tenant-a", search="searchable")
+            results, pagination = TemplateService.list_templates(user=user, tenant_id="tenant-a", search="searchable")
             assert len(results) == 1
             assert "searchable" in results[0].name.lower() or "searchable" in results[0].description.lower()
 
@@ -894,7 +933,7 @@ def test_list_templates_tenant_isolation() -> None:
                 version="V1",
                 name="Tenant A Template",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
@@ -909,7 +948,7 @@ def test_list_templates_tenant_isolation() -> None:
                 version="V1",
                 name="Tenant B Template",
                 m8f_tenant_id="tenant-b",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
@@ -918,7 +957,7 @@ def test_list_templates_tenant_isolation() -> None:
 
         with app.test_request_context("/"):
             g.m8flow_tenant_id = "tenant-a"
-            results = TemplateService.list_templates(user=user, tenant_id="tenant-a")
+            results, pagination = TemplateService.list_templates(user=user, tenant_id="tenant-a")
             assert len(results) == 1
             assert results[0].m8f_tenant_id == "tenant-a"
 
@@ -951,7 +990,7 @@ def test_get_template_by_key_and_version() -> None:
                 version="V2",
                 name="Test",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
@@ -988,7 +1027,7 @@ def test_get_template_latest() -> None:
                 version="V1",
                 name="Test",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
@@ -997,7 +1036,7 @@ def test_get_template_latest() -> None:
                 version="V3",
                 name="Test",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
@@ -1006,7 +1045,7 @@ def test_get_template_latest() -> None:
                 version="V2",
                 name="Test",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
@@ -1068,7 +1107,7 @@ def test_get_template_tenant_isolation() -> None:
                 version="V1",
                 name="Tenant A",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
@@ -1083,7 +1122,7 @@ def test_get_template_tenant_isolation() -> None:
                 version="V1",
                 name="Tenant B",
                 m8f_tenant_id="tenant-b",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
@@ -1127,7 +1166,7 @@ def test_get_template_by_id() -> None:
                 name="Test",
                 visibility=TemplateVisibility.public.value,
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
@@ -1165,7 +1204,7 @@ def test_get_template_by_id_visibility_check() -> None:
                 name="Private Template",
                 visibility=TemplateVisibility.private.value,
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="owner",
                 modified_by="owner",
             )
@@ -1206,7 +1245,7 @@ def test_get_template_suppress_visibility() -> None:
                 name="Test",
                 visibility=TemplateVisibility.private.value,
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 created_by="tester",
                 modified_by="tester",
             )
@@ -1253,7 +1292,7 @@ def test_update_template_by_key_version() -> None:
                 name="Original Name",
                 description="Original Description",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 is_published=False,
                 created_by="tester",
                 modified_by="tester",
@@ -1292,7 +1331,7 @@ def test_update_template_published_immutable() -> None:
                 version="V1",
                 name="Published Template",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 is_published=True,
                 created_by="tester",
                 modified_by="tester",
@@ -1333,7 +1372,7 @@ def test_update_template_unauthorized() -> None:
                 version="V1",
                 name="Test",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 is_published=False,
                 visibility=TemplateVisibility.public.value,
                 created_by="owner",
@@ -1402,7 +1441,7 @@ def test_update_template_by_id_unpublished() -> None:
                 version="V1",
                 name="Original",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 is_published=False,
                 created_by="tester",
                 modified_by="tester",
@@ -1443,7 +1482,7 @@ def test_update_template_by_id_publish_sets_status() -> None:
                 version="V1",
                 name="Draft Template",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 is_published=False,
                 status="draft",
                 created_by="tester",
@@ -1485,7 +1524,7 @@ def test_update_template_by_id_published_creates_new_version() -> None:
                 version="V1",
                 name="Published",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 is_published=True,
                 created_by="tester",
                 modified_by="tester",
@@ -1495,7 +1534,8 @@ def test_update_template_by_id_published_creates_new_version() -> None:
             template_id = template.id
 
             updates = {"name": "New Version"}
-            updated = TemplateService.update_template_by_id(template_id, updates, user=user)
+            with patch.object(TemplateService, "storage", MockTemplateStorageService()):
+                updated = TemplateService.update_template_by_id(template_id, updates, user=user)
 
             assert updated.id != template_id  # New record
             assert updated.name == "New Version"
@@ -1527,7 +1567,7 @@ def test_update_template_with_bpmn_bytes() -> None:
                 version="V1",
                 name="Test",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="old.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "old.bpmn"}],
                 is_published=False,
                 created_by="tester",
                 modified_by="tester",
@@ -1540,7 +1580,8 @@ def test_update_template_with_bpmn_bytes() -> None:
                 new_bpmn = b"<bpmn>new content</bpmn>"
                 updated = TemplateService.update_template_by_id(template_id, {}, bpmn_bytes=new_bpmn, user=user)
 
-                assert updated.bpmn_object_key == "bpmn-update.bpmn"
+                assert updated.files and len(updated.files) >= 1
+                assert any(e.get("file_type") == "bpmn" for e in updated.files)
 
 
 def test_update_template_allowed_fields() -> None:
@@ -1572,7 +1613,7 @@ def test_update_template_allowed_fields() -> None:
                 visibility=TemplateVisibility.private.value,
                 status="draft",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 is_published=False,
                 created_by="tester",
                 modified_by="tester",
@@ -1627,7 +1668,7 @@ def test_delete_template_by_id() -> None:
                 version="V1",
                 name="To Delete",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 is_published=False,
                 created_by="tester",
                 modified_by="tester",
@@ -1655,7 +1696,7 @@ def test_delete_template_by_id() -> None:
                 is None
             )
 
-            results = TemplateService.list_templates(user=user, tenant_id="tenant-a", latest_only=False)
+            results, pagination = TemplateService.list_templates(user=user, tenant_id="tenant-a", latest_only=False)
             assert all(t.id != template_id for t in results)
 
 
@@ -1684,7 +1725,7 @@ def test_soft_deleted_templates_are_excluded_from_queries() -> None:
                 version="V1",
                 name="Active",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 is_published=False,
                 created_by="tester",
                 modified_by="tester",
@@ -1694,7 +1735,7 @@ def test_soft_deleted_templates_are_excluded_from_queries() -> None:
                 version="V1",
                 name="Deleted",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 is_published=False,
                 is_deleted=True,
                 created_by="tester",
@@ -1704,7 +1745,7 @@ def test_soft_deleted_templates_are_excluded_from_queries() -> None:
             db.session.commit()
 
             # list_templates should only return the active template
-            results = TemplateService.list_templates(user=user, tenant_id="tenant-a", latest_only=False)
+            results, pagination = TemplateService.list_templates(user=user, tenant_id="tenant-a", latest_only=False)
             keys = {t.template_key for t in results}
             assert "active-template" in keys
             assert "deleted-template" not in keys
@@ -1748,7 +1789,7 @@ def test_delete_template_published_immutable() -> None:
                 version="V1",
                 name="Published",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 is_published=True,
                 created_by="tester",
                 modified_by="tester",
@@ -1790,7 +1831,7 @@ def test_delete_template_unauthorized() -> None:
                 version="V1",
                 name="Test",
                 m8f_tenant_id="tenant-a",
-                bpmn_object_key="test.bpmn",
+                files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
                 is_published=False,
                 visibility=TemplateVisibility.public.value,
                 created_by="owner",
@@ -1886,13 +1927,13 @@ def test_template_tenant_isolation_across_tenants() -> None:
         # Verify isolation
         with app.test_request_context("/"):
             g.m8flow_tenant_id = "tenant-a"
-            results_a = TemplateService.list_templates(user=user, tenant_id="tenant-a")
+            results_a, _ = TemplateService.list_templates(user=user, tenant_id="tenant-a")
             assert len(results_a) == 1
             assert results_a[0].m8f_tenant_id == "tenant-a"
 
         with app.test_request_context("/"):
             g.m8flow_tenant_id = "tenant-b"
-            results_b = TemplateService.list_templates(user=user, tenant_id="tenant-b")
+            results_b, _ = TemplateService.list_templates(user=user, tenant_id="tenant-b")
             assert len(results_b) == 1
             assert results_b[0].m8f_tenant_id == "tenant-b"
 
@@ -2039,10 +2080,1236 @@ def test_template_tags_json_handling() -> None:
                 assert isinstance(template.tags, list)
 
                 # Test filtering by tag
-                results = TemplateService.list_templates(user=user, tenant_id="tenant-a", tag="tag1")
+                results, _ = TemplateService.list_templates(user=user, tenant_id="tenant-a", tag="tag1")
                 assert len(results) == 1
                 assert "tag1" in results[0].tags
 
                 # Test filtering by multiple tags
-                results = TemplateService.list_templates(user=user, tenant_id="tenant-a", tag="tag1,tag2")
+                results, _ = TemplateService.list_templates(user=user, tenant_id="tenant-a", tag="tag1,tag2")
                 assert len(results) == 1
+
+
+# ============================================================================
+# Create Template with Multiple Files Tests
+# ============================================================================
+
+
+def test_create_template_with_multiple_files() -> None:
+    """Create template with BPMN + JSON files."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            with patch.object(TemplateService, "storage", MockTemplateStorageService()):
+                files = [
+                    ("diagram.bpmn", b"<bpmn>content</bpmn>"),
+                    ("form.json", b'{"field": "value"}'),
+                ]
+                metadata = {
+                    "template_key": "multi-file",
+                    "name": "Multi-File Template",
+                }
+                template = TemplateService.create_template_with_files(
+                    metadata=metadata,
+                    files=files,
+                    user=user,
+                    tenant_id="tenant-a",
+                )
+
+                assert template.template_key == "multi-file"
+                assert len(template.files) == 2
+                file_names = [f["file_name"] for f in template.files]
+                assert "diagram.bpmn" in file_names
+                assert "form.json" in file_names
+                file_types = {f["file_name"]: f["file_type"] for f in template.files}
+                assert file_types["diagram.bpmn"] == "bpmn"
+                assert file_types["form.json"] == "json"
+
+
+def test_create_template_with_files_requires_bpmn() -> None:
+    """Should raise ApiError when no BPMN file is included."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            with patch.object(TemplateService, "storage", MockTemplateStorageService()):
+                files = [
+                    ("form.json", b'{"field": "value"}'),
+                    ("readme.md", b"# Readme"),
+                ]
+                metadata = {
+                    "template_key": "no-bpmn",
+                    "name": "No BPMN Template",
+                }
+                try:
+                    TemplateService.create_template_with_files(
+                        metadata=metadata,
+                        files=files,
+                        user=user,
+                        tenant_id="tenant-a",
+                    )
+                    assert False, "Should have raised ApiError"
+                except ApiError as e:
+                    assert e.error_code == "missing_fields"
+                    assert e.status_code == 400
+
+
+def test_create_template_with_files_requires_user() -> None:
+    """Should raise ApiError when user is None."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+
+            try:
+                TemplateService.create_template_with_files(
+                    metadata={"template_key": "test", "name": "Test"},
+                    files=[("diagram.bpmn", b"<bpmn/>")],
+                    user=None,
+                    tenant_id="tenant-a",
+                )
+                assert False, "Should have raised ApiError"
+            except ApiError as e:
+                assert e.error_code == "unauthorized"
+
+
+def test_create_template_with_files_requires_metadata() -> None:
+    """Should raise ApiError when metadata is missing."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            try:
+                TemplateService.create_template_with_files(
+                    metadata=None,
+                    files=[("diagram.bpmn", b"<bpmn/>")],
+                    user=user,
+                    tenant_id="tenant-a",
+                )
+                assert False, "Should have raised ApiError"
+            except ApiError as e:
+                assert e.error_code == "missing_fields"
+
+
+# ============================================================================
+# Update File Content Tests
+# ============================================================================
+
+
+def test_update_file_content_unpublished() -> None:
+    """Update file content for an unpublished template."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            template = TemplateModel(
+                template_key="file-update",
+                version="V1",
+                name="Test",
+                m8f_tenant_id="tenant-a",
+                files=[
+                    {"file_type": "bpmn", "file_name": "diagram.bpmn"},
+                    {"file_type": "json", "file_name": "form.json"},
+                ],
+                is_published=False,
+                created_by="tester",
+                modified_by="tester",
+            )
+            db.session.add(template)
+            db.session.commit()
+
+            with patch.object(TemplateService, "storage", MockTemplateStorageService()):
+                # Should not raise - updates file content
+                TemplateService.update_file_content(
+                    template, "form.json", b'{"updated": true}', user=user
+                )
+
+
+def test_update_file_content_published_rejected() -> None:
+    """Should raise ApiError for published template."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            template = TemplateModel(
+                template_key="published-file",
+                version="V1",
+                name="Published",
+                m8f_tenant_id="tenant-a",
+                files=[{"file_type": "bpmn", "file_name": "diagram.bpmn"}],
+                is_published=True,
+                created_by="tester",
+                modified_by="tester",
+            )
+            db.session.add(template)
+            db.session.commit()
+
+            try:
+                TemplateService.update_file_content(
+                    template, "diagram.bpmn", b"<bpmn>new</bpmn>", user=user
+                )
+                assert False, "Should have raised ApiError"
+            except ApiError as e:
+                assert e.error_code == "forbidden"
+                assert e.status_code == 403
+
+
+def test_update_file_content_file_not_found() -> None:
+    """Should raise ApiError when file is not in template files list."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            template = TemplateModel(
+                template_key="missing-file",
+                version="V1",
+                name="Test",
+                m8f_tenant_id="tenant-a",
+                files=[{"file_type": "bpmn", "file_name": "diagram.bpmn"}],
+                is_published=False,
+                created_by="tester",
+                modified_by="tester",
+            )
+            db.session.add(template)
+            db.session.commit()
+
+            try:
+                TemplateService.update_file_content(
+                    template, "nonexistent.json", b"content", user=user
+                )
+                assert False, "Should have raised ApiError"
+            except ApiError as e:
+                assert e.error_code == "not_found"
+                assert e.status_code == 404
+
+
+# ============================================================================
+# Delete File from Template Tests
+# ============================================================================
+
+
+def test_delete_file_from_template_removes_entry() -> None:
+    """Delete a file from template removes it from files list."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            template = TemplateModel(
+                template_key="delete-file",
+                version="V1",
+                name="Test",
+                m8f_tenant_id="tenant-a",
+                files=[
+                    {"file_type": "bpmn", "file_name": "diagram.bpmn"},
+                    {"file_type": "json", "file_name": "form.json"},
+                ],
+                is_published=False,
+                created_by="tester",
+                modified_by="tester",
+            )
+            db.session.add(template)
+            db.session.commit()
+
+            with patch.object(TemplateService, "storage", MockTemplateStorageService()):
+                TemplateService.delete_file_from_template(template, "form.json", user=user)
+
+            assert len(template.files) == 1
+            assert template.files[0]["file_name"] == "diagram.bpmn"
+
+
+def test_delete_file_rejects_last_file() -> None:
+    """Cannot delete the last file from a template."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            template = TemplateModel(
+                template_key="last-file",
+                version="V1",
+                name="Test",
+                m8f_tenant_id="tenant-a",
+                files=[{"file_type": "bpmn", "file_name": "diagram.bpmn"}],
+                is_published=False,
+                created_by="tester",
+                modified_by="tester",
+            )
+            db.session.add(template)
+            db.session.commit()
+
+            try:
+                TemplateService.delete_file_from_template(template, "diagram.bpmn", user=user)
+                assert False, "Should have raised ApiError"
+            except ApiError as e:
+                assert e.error_code == "forbidden"
+                assert e.status_code == 403
+
+
+def test_delete_file_rejects_only_bpmn() -> None:
+    """Cannot delete the only BPMN file (even if other file types remain)."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            template = TemplateModel(
+                template_key="only-bpmn",
+                version="V1",
+                name="Test",
+                m8f_tenant_id="tenant-a",
+                files=[
+                    {"file_type": "bpmn", "file_name": "diagram.bpmn"},
+                    {"file_type": "json", "file_name": "form.json"},
+                ],
+                is_published=False,
+                created_by="tester",
+                modified_by="tester",
+            )
+            db.session.add(template)
+            db.session.commit()
+
+            try:
+                TemplateService.delete_file_from_template(template, "diagram.bpmn", user=user)
+                assert False, "Should have raised ApiError"
+            except ApiError as e:
+                assert e.error_code == "forbidden"
+                assert e.status_code == 403
+
+
+def test_delete_file_rejects_published() -> None:
+    """Cannot delete files from a published template."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            template = TemplateModel(
+                template_key="published-del-file",
+                version="V1",
+                name="Published",
+                m8f_tenant_id="tenant-a",
+                files=[
+                    {"file_type": "bpmn", "file_name": "diagram.bpmn"},
+                    {"file_type": "json", "file_name": "form.json"},
+                ],
+                is_published=True,
+                created_by="tester",
+                modified_by="tester",
+            )
+            db.session.add(template)
+            db.session.commit()
+
+            try:
+                TemplateService.delete_file_from_template(template, "form.json", user=user)
+                assert False, "Should have raised ApiError"
+            except ApiError as e:
+                assert e.error_code == "forbidden"
+                assert e.status_code == 403
+
+
+def test_delete_file_not_found() -> None:
+    """Should raise ApiError when file is not in template files list."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            template = TemplateModel(
+                template_key="del-not-found",
+                version="V1",
+                name="Test",
+                m8f_tenant_id="tenant-a",
+                files=[{"file_type": "bpmn", "file_name": "diagram.bpmn"}],
+                is_published=False,
+                created_by="tester",
+                modified_by="tester",
+            )
+            db.session.add(template)
+            db.session.commit()
+
+            try:
+                TemplateService.delete_file_from_template(template, "nonexistent.json", user=user)
+                assert False, "Should have raised ApiError"
+            except ApiError as e:
+                assert e.error_code == "not_found"
+                assert e.status_code == 404
+
+
+# ============================================================================
+# Export Template Zip Tests
+# ============================================================================
+
+
+def test_export_template_zip() -> None:
+    """Export template as zip returns zip bytes and filename."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            template = TemplateModel(
+                template_key="export-test",
+                version="V1",
+                name="Export Test",
+                m8f_tenant_id="tenant-a",
+                files=[
+                    {"file_type": "bpmn", "file_name": "diagram.bpmn"},
+                    {"file_type": "json", "file_name": "form.json"},
+                ],
+                is_published=False,
+                created_by="tester",
+                modified_by="tester",
+            )
+            db.session.add(template)
+            db.session.commit()
+            template_id = template.id
+
+            with patch.object(TemplateService, "storage", MockTemplateStorageService()):
+                zip_bytes, filename = TemplateService.export_template_zip(template_id, user=user)
+
+            assert isinstance(zip_bytes, bytes)
+            assert len(zip_bytes) > 0
+            assert "export-test" in filename
+            assert filename.endswith(".zip")
+
+
+def test_export_template_zip_not_found() -> None:
+    """Should raise ApiError for non-existent template."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+
+            try:
+                TemplateService.export_template_zip(9999, user=user)
+                assert False, "Should have raised ApiError"
+            except ApiError as e:
+                assert e.error_code == "not_found"
+                assert e.status_code == 404
+
+
+def test_export_template_zip_no_files() -> None:
+    """Should raise ApiError when template has no files."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            template = TemplateModel(
+                template_key="no-files",
+                version="V1",
+                name="No Files",
+                m8f_tenant_id="tenant-a",
+                files=[],
+                is_published=False,
+                created_by="tester",
+                modified_by="tester",
+            )
+            db.session.add(template)
+            db.session.commit()
+            template_id = template.id
+
+            try:
+                TemplateService.export_template_zip(template_id, user=user)
+                assert False, "Should have raised ApiError"
+            except ApiError as e:
+                assert e.error_code == "not_found"
+
+
+# ============================================================================
+# Import Template from Zip Tests
+# ============================================================================
+
+
+def _create_zip_bytes(files: dict[str, bytes]) -> bytes:
+    """Helper to create zip bytes from a dict of {filename: content}."""
+    import io as _io
+    import zipfile as _zipfile
+    buf = _io.BytesIO()
+    with _zipfile.ZipFile(buf, "w", _zipfile.ZIP_DEFLATED) as zf:
+        for name, content in files.items():
+            zf.writestr(name, content)
+    return buf.getvalue()
+
+
+def test_import_template_from_zip_valid() -> None:
+    """Import a valid zip with BPMN and JSON files."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            zip_bytes = _create_zip_bytes({
+                "diagram.bpmn": b"<bpmn>content</bpmn>",
+                "form.json": b'{"field": "value"}',
+            })
+            metadata = {
+                "template_key": "imported",
+                "name": "Imported Template",
+            }
+
+            with patch.object(TemplateService, "storage", MockTemplateStorageService()):
+                template = TemplateService.import_template_from_zip(
+                    zip_bytes=zip_bytes,
+                    metadata=metadata,
+                    user=user,
+                    tenant_id="tenant-a",
+                )
+
+            assert template.template_key == "imported"
+            assert len(template.files) == 2
+            file_names = sorted(f["file_name"] for f in template.files)
+            assert file_names == ["diagram.bpmn", "form.json"]
+
+
+def test_import_template_from_zip_no_bpmn() -> None:
+    """Should raise ApiError when zip contains no BPMN file."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            zip_bytes = _create_zip_bytes({
+                "form.json": b'{"field": "value"}',
+                "readme.md": b"# Readme",
+            })
+            metadata = {
+                "template_key": "no-bpmn-zip",
+                "name": "No BPMN",
+            }
+
+            try:
+                TemplateService.import_template_from_zip(
+                    zip_bytes=zip_bytes,
+                    metadata=metadata,
+                    user=user,
+                    tenant_id="tenant-a",
+                )
+                assert False, "Should have raised ApiError"
+            except ApiError as e:
+                assert e.error_code == "missing_fields"
+                assert e.status_code == 400
+
+
+def test_import_template_from_zip_requires_user() -> None:
+    """Should raise ApiError when user is None."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+
+            zip_bytes = _create_zip_bytes({"diagram.bpmn": b"<bpmn/>"})
+            try:
+                TemplateService.import_template_from_zip(
+                    zip_bytes=zip_bytes,
+                    metadata={"template_key": "test", "name": "Test"},
+                    user=None,
+                    tenant_id="tenant-a",
+                )
+                assert False, "Should have raised ApiError"
+            except ApiError as e:
+                assert e.error_code == "unauthorized"
+
+
+def test_import_template_from_zip_oversized_rejected() -> None:
+    """Should raise ApiError when zip exceeds maximum size."""
+    from m8flow_backend.services.template_service import MAX_ZIP_SIZE
+
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            # Create oversized zip bytes (bigger than MAX_ZIP_SIZE)
+            oversized_bytes = b"x" * (MAX_ZIP_SIZE + 1)
+            metadata = {
+                "template_key": "oversized",
+                "name": "Oversized",
+            }
+
+            try:
+                TemplateService.import_template_from_zip(
+                    zip_bytes=oversized_bytes,
+                    metadata=metadata,
+                    user=user,
+                    tenant_id="tenant-a",
+                )
+                assert False, "Should have raised ApiError"
+            except ApiError as e:
+                assert e.error_code == "payload_too_large"
+                assert e.status_code == 400
+
+
+def test_import_template_from_zip_missing_fields() -> None:
+    """Should raise ApiError when required metadata fields are missing."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            zip_bytes = _create_zip_bytes({"diagram.bpmn": b"<bpmn/>"})
+
+            # Missing template_key
+            try:
+                TemplateService.import_template_from_zip(
+                    zip_bytes=zip_bytes,
+                    metadata={"name": "Test"},
+                    user=user,
+                    tenant_id="tenant-a",
+                )
+                assert False, "Should have raised ApiError"
+            except ApiError as e:
+                assert e.error_code == "missing_fields"
+
+            # Missing name
+            try:
+                TemplateService.import_template_from_zip(
+                    zip_bytes=zip_bytes,
+                    metadata={"template_key": "test"},
+                    user=user,
+                    tenant_id="tenant-a",
+                )
+                assert False, "Should have raised ApiError"
+            except ApiError as e:
+                assert e.error_code == "missing_fields"
+
+
+# ============================================================================
+# Pagination Tests
+# ============================================================================
+
+
+def test_list_templates_pagination_returns_correct_structure() -> None:
+    """list_templates returns (items, pagination) tuple with correct metadata."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+
+            # Create 5 templates
+            for i in range(5):
+                db.session.add(TemplateModel(
+                    template_key=f"page-test-{i}",
+                    version="V1",
+                    name=f"Template {i}",
+                    m8f_tenant_id="tenant-a",
+                    files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
+                    created_by="tester",
+                    modified_by="tester",
+                ))
+            db.session.commit()
+
+            # Page 1, 2 per page
+            items, pagination = TemplateService.list_templates(
+                user=user, tenant_id="tenant-a", latest_only=False, page=1, per_page=2
+            )
+            assert len(items) == 2
+            assert pagination["total"] == 5
+            assert pagination["count"] == 2
+            assert pagination["pages"] == 3
+
+            # Page 2
+            items2, pagination2 = TemplateService.list_templates(
+                user=user, tenant_id="tenant-a", latest_only=False, page=2, per_page=2
+            )
+            assert len(items2) == 2
+            assert pagination2["total"] == 5
+            assert pagination2["count"] == 2
+
+            # Page 3 (last page, partial)
+            items3, pagination3 = TemplateService.list_templates(
+                user=user, tenant_id="tenant-a", latest_only=False, page=3, per_page=2
+            )
+            assert len(items3) == 1
+            assert pagination3["total"] == 5
+            assert pagination3["count"] == 1
+
+
+def test_list_templates_pagination_clamps_page() -> None:
+    """Page value is clamped to valid range."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+
+            # Create 3 templates
+            for i in range(3):
+                db.session.add(TemplateModel(
+                    template_key=f"clamp-test-{i}",
+                    version="V1",
+                    name=f"Template {i}",
+                    m8f_tenant_id="tenant-a",
+                    files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
+                    created_by="tester",
+                    modified_by="tester",
+                ))
+            db.session.commit()
+
+            # Page beyond max should be clamped
+            items, pagination = TemplateService.list_templates(
+                user=user, tenant_id="tenant-a", latest_only=False, page=999, per_page=10
+            )
+            assert len(items) == 3  # All items on page 1 (clamped)
+            assert pagination["pages"] == 1
+
+            # Page 0 or negative should be clamped to 1
+            items_neg, pagination_neg = TemplateService.list_templates(
+                user=user, tenant_id="tenant-a", latest_only=False, page=0, per_page=2
+            )
+            assert len(items_neg) == 2
+            assert pagination_neg["total"] == 3
+
+
+def test_list_templates_pagination_per_page_clamped() -> None:
+    """per_page is clamped to 1..100."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+
+            for i in range(3):
+                db.session.add(TemplateModel(
+                    template_key=f"perpage-test-{i}",
+                    version="V1",
+                    name=f"Template {i}",
+                    m8f_tenant_id="tenant-a",
+                    files=[{"file_type": "bpmn", "file_name": "test.bpmn"}],
+                    created_by="tester",
+                    modified_by="tester",
+                ))
+            db.session.commit()
+
+            # per_page=0 should be clamped to 1
+            items, pagination = TemplateService.list_templates(
+                user=user, tenant_id="tenant-a", latest_only=False, page=1, per_page=0
+            )
+            assert len(items) == 1
+            assert pagination["pages"] == 3
+
+            # per_page=200 should be clamped to 100
+            items2, pagination2 = TemplateService.list_templates(
+                user=user, tenant_id="tenant-a", latest_only=False, page=1, per_page=200
+            )
+            assert len(items2) == 3  # All 3 fit within 100
+            assert pagination2["pages"] == 1
+
+
+def test_list_templates_pagination_empty_results() -> None:
+    """Pagination with no results."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+
+            items, pagination = TemplateService.list_templates(
+                user=user, tenant_id="tenant-a", latest_only=False, page=1, per_page=10
+            )
+            assert len(items) == 0
+            assert pagination["total"] == 0
+            assert pagination["count"] == 0
+            assert pagination["pages"] == 1
+
+
+# ============================================================================
+# _safe_content_disposition Tests (Controller Helper)
+# ============================================================================
+
+
+def test_safe_content_disposition_simple_filename() -> None:
+    """Simple filename is properly encoded."""
+    from m8flow_backend.routes.templates_controller import _safe_content_disposition
+
+    result = _safe_content_disposition("diagram.bpmn")
+    assert "Content-Disposition" in result
+    assert "diagram.bpmn" in result["Content-Disposition"]
+    assert result["Content-Disposition"].startswith("attachment;")
+
+
+def test_safe_content_disposition_special_chars() -> None:
+    """Special characters are percent-encoded per RFC 5987."""
+    from m8flow_backend.routes.templates_controller import _safe_content_disposition
+
+    result = _safe_content_disposition("my template (1).bpmn")
+    header = result["Content-Disposition"]
+    assert "filename*=UTF-8''" in header
+    # Spaces and parens should be encoded
+    assert " " not in header.split("UTF-8''")[1]
+    assert "(" not in header.split("UTF-8''")[1]
+
+
+def test_safe_content_disposition_unicode() -> None:
+    """Unicode filename is properly percent-encoded."""
+    from m8flow_backend.routes.templates_controller import _safe_content_disposition
+
+    result = _safe_content_disposition("diagrama_\u00e9.bpmn")
+    header = result["Content-Disposition"]
+    assert "filename*=UTF-8''" in header
+    # The unicode char should be percent-encoded
+    assert "\u00e9" not in header
+
+
+# ============================================================================
+# get_first_bpmn_content Tests
+# ============================================================================
+
+
+def test_get_first_bpmn_content_returns_first_bpmn() -> None:
+    """get_first_bpmn_content returns the content of the first BPMN file in list order."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            # Files list has primary.bpmn FIRST, then secondary.bpmn
+            template = TemplateModel(
+                template_key="primary-first",
+                version="V1",
+                name="Primary First",
+                m8f_tenant_id="tenant-a",
+                files=[
+                    {"file_type": "bpmn", "file_name": "primary.bpmn"},
+                    {"file_type": "json", "file_name": "form.json"},
+                    {"file_type": "bpmn", "file_name": "secondary.bpmn"},
+                ],
+                is_published=False,
+                created_by="tester",
+                modified_by="tester",
+            )
+            db.session.add(template)
+            db.session.commit()
+
+            class OrderAwareMockStorage:
+                """Returns different content for each BPMN file to verify ordering."""
+                def store_file(self, *a, **kw): pass
+                def get_file(self, tenant_id, template_key, version, file_name):
+                    if file_name == "primary.bpmn":
+                        return b"<bpmn>PRIMARY CONTENT</bpmn>"
+                    if file_name == "secondary.bpmn":
+                        return b"<bpmn>SECONDARY CONTENT</bpmn>"
+                    return b""
+                def list_files(self, *a, **kw): return []
+                def delete_file(self, *a, **kw): pass
+                def stream_zip(self, *a, **kw): return b""
+
+            with patch.object(TemplateService, "storage", OrderAwareMockStorage()):
+                content = TemplateService.get_first_bpmn_content(template)
+
+            assert content is not None
+            assert b"PRIMARY CONTENT" in content
+            assert b"SECONDARY" not in content
+
+
+def test_get_first_bpmn_content_skips_non_bpmn() -> None:
+    """get_first_bpmn_content skips non-BPMN files and returns the first BPMN."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            # JSON file first, then BPMN
+            template = TemplateModel(
+                template_key="json-first",
+                version="V1",
+                name="JSON First",
+                m8f_tenant_id="tenant-a",
+                files=[
+                    {"file_type": "json", "file_name": "form.json"},
+                    {"file_type": "bpmn", "file_name": "diagram.bpmn"},
+                ],
+                is_published=False,
+                created_by="tester",
+                modified_by="tester",
+            )
+            db.session.add(template)
+            db.session.commit()
+
+            with patch.object(TemplateService, "storage", MockTemplateStorageService()):
+                content = TemplateService.get_first_bpmn_content(template)
+
+            assert content is not None
+
+
+def test_get_first_bpmn_content_no_bpmn_returns_none() -> None:
+    """get_first_bpmn_content returns None when no BPMN files exist."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            template = TemplateModel(
+                template_key="no-bpmn",
+                version="V1",
+                name="No BPMN",
+                m8f_tenant_id="tenant-a",
+                files=[
+                    {"file_type": "json", "file_name": "form.json"},
+                ],
+                is_published=False,
+                created_by="tester",
+                modified_by="tester",
+            )
+            db.session.add(template)
+            db.session.commit()
+
+            with patch.object(TemplateService, "storage", MockTemplateStorageService()):
+                content = TemplateService.get_first_bpmn_content(template)
+
+            assert content is None
+
+
+def test_get_first_bpmn_content_empty_files() -> None:
+    """get_first_bpmn_content returns None when files list is empty."""
+    app = Flask(__name__)
+    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SPIFFWORKFLOW_BACKEND_DATABASE_TYPE"] = "sqlite"
+    db.init_app(app)
+
+    with app.app_context():
+        db.create_all()
+        db.session.add(M8flowTenantModel(id="tenant-a", name="Tenant A", slug="tenant-a", created_by="test", modified_by="test"))
+        user = UserModel(username="tester", email="tester@example.com", service="local", service_id="tester")
+        db.session.add(user)
+        db.session.commit()
+
+        with app.test_request_context("/"):
+            g.m8flow_tenant_id = "tenant-a"
+            g.user = user
+
+            template = TemplateModel(
+                template_key="empty-files",
+                version="V1",
+                name="Empty Files",
+                m8f_tenant_id="tenant-a",
+                files=[],
+                is_published=False,
+                created_by="tester",
+                modified_by="tester",
+            )
+            db.session.add(template)
+            db.session.commit()
+
+            with patch.object(TemplateService, "storage", MockTemplateStorageService()):
+                content = TemplateService.get_first_bpmn_content(template)
+
+            assert content is None
diff --git a/extensions/m8flow-backend/tests/unit/m8flow_backend/services/test_template_storage_service.py b/extensions/m8flow-backend/tests/unit/m8flow_backend/services/test_template_storage_service.py
new file mode 100644
index 0000000000..cd015c7140
--- /dev/null
+++ b/extensions/m8flow-backend/tests/unit/m8flow_backend/services/test_template_storage_service.py
@@ -0,0 +1,330 @@
+# extensions/m8flow-backend/tests/unit/m8flow_backend/services/test_template_storage_service.py
+import io
+import os
+import shutil
+import tempfile
+import zipfile
+
+import pytest
+from flask import Flask
+
+from m8flow_backend.services.template_storage_service import (
+    FilesystemTemplateStorageService,
+    NoopTemplateStorageService,
+    file_type_from_filename,
+)
+from spiffworkflow_backend.exceptions.api_error import ApiError
+
+
+# ============================================================================
+# file_type_from_filename tests
+# ============================================================================
+
+
+class TestFileTypeFromFilename:
+    """Tests for the file_type_from_filename utility function."""
+
+    def test_bpmn_extension(self) -> None:
+        assert file_type_from_filename("diagram.bpmn") == "bpmn"
+
+    def test_json_extension(self) -> None:
+        assert file_type_from_filename("form.json") == "json"
+
+    def test_dmn_extension(self) -> None:
+        assert file_type_from_filename("rules.dmn") == "dmn"
+
+    def test_md_extension(self) -> None:
+        assert file_type_from_filename("readme.md") == "md"
+
+    def test_unknown_txt_extension(self) -> None:
+        assert file_type_from_filename("notes.txt") == "other"
+
+    def test_unknown_csv_extension(self) -> None:
+        assert file_type_from_filename("data.csv") == "other"
+
+    def test_case_insensitive_bpmn(self) -> None:
+        assert file_type_from_filename("Diagram.BPMN") == "bpmn"
+
+    def test_case_insensitive_json(self) -> None:
+        assert file_type_from_filename("Form.JSON") == "json"
+
+    def test_case_insensitive_dmn(self) -> None:
+        assert file_type_from_filename("Rules.DMN") == "dmn"
+
+    def test_no_extension(self) -> None:
+        assert file_type_from_filename("Makefile") == "other"
+
+    def test_dotfile(self) -> None:
+        assert file_type_from_filename(".gitignore") == "other"
+
+    def test_multiple_dots(self) -> None:
+        assert file_type_from_filename("my.diagram.bpmn") == "bpmn"
+
+    def test_empty_string(self) -> None:
+        assert file_type_from_filename("") == "other"
+
+
+# ============================================================================
+# FilesystemTemplateStorageService._sanitize tests
+# ============================================================================
+
+
+class TestSanitize:
+    """Tests for the _sanitize static method."""
+
+    def test_replaces_slashes(self) -> None:
+        result = FilesystemTemplateStorageService._sanitize("a/b\\c")
+        assert "/" not in result
+        assert "\\" not in result
+
+    def test_replaces_colon(self) -> None:
+        result = FilesystemTemplateStorageService._sanitize("file:name")
+        assert ":" not in result
+
+    def test_replaces_special_characters(self) -> None:
+        result = FilesystemTemplateStorageService._sanitize('file*name?<test>|"x"')
+        for ch in ['*', '?', '<', '>', '|', '"']:
+            assert ch not in result
+
+    def test_strips_null_bytes(self) -> None:
+        result = FilesystemTemplateStorageService._sanitize("file\x00name")
+        assert "\x00" not in result
+        assert "filename" in result.replace("-", "")
+
+    def test_strips_leading_trailing_dots_spaces_hyphens(self) -> None:
+        result = FilesystemTemplateStorageService._sanitize("...-hello-...")
+        assert not result.startswith(".")
+        assert not result.startswith("-")
+        assert not result.endswith(".")
+        assert not result.endswith("-")
+        assert "hello" in result
+
+    def test_raises_for_empty_after_sanitization(self) -> None:
+        with pytest.raises(ApiError) as exc_info:
+            FilesystemTemplateStorageService._sanitize("...")
+        assert exc_info.value.status_code == 400
+
+    def test_raises_for_empty_string(self) -> None:
+        with pytest.raises(ApiError) as exc_info:
+            FilesystemTemplateStorageService._sanitize("")
+        assert exc_info.value.status_code == 400
+
+    def test_truncates_long_names(self) -> None:
+        long_name = "a" * 300
+        result = FilesystemTemplateStorageService._sanitize(long_name)
+        assert len(result) <= 255
+
+    def test_preserves_normal_names(self) -> None:
+        result = FilesystemTemplateStorageService._sanitize("my-template_v1")
+        assert result == "my-template_v1"
+
+    def test_preserves_alphanumeric(self) -> None:
+        result = FilesystemTemplateStorageService._sanitize("hello123")
+        assert result == "hello123"
+
+
+# ============================================================================
+# FilesystemTemplateStorageService integration tests (with temp directory)
+# ============================================================================
+
+
+@pytest.fixture()
+def storage_app():
+    """Create a Flask app with a temp directory for storage tests."""
+    app = Flask(__name__)
+    tmpdir = tempfile.mkdtemp(prefix="test_storage_")
+    app.config["TESTING"] = True
+    app.config["M8FLOW_TEMPLATES_STORAGE_DIR"] = tmpdir
+    yield app, tmpdir
+    shutil.rmtree(tmpdir, ignore_errors=True)
+
+
+class TestFilesystemStorageService:
+    """Integration tests for FilesystemTemplateStorageService with a real temp directory."""
+
+    def test_store_and_get_file_roundtrip(self, storage_app: tuple) -> None:
+        """Store bytes, retrieve same bytes."""
+        app, _ = storage_app
+        svc = FilesystemTemplateStorageService()
+        content = b"<bpmn>test content</bpmn>"
+
+        with app.app_context():
+            svc.store_file("tenant-a", "my-template", "V1", "diagram.bpmn", "bpmn", content)
+            result = svc.get_file("tenant-a", "my-template", "V1", "diagram.bpmn")
+
+        assert result == content
+
+    def test_get_file_missing_raises_404(self, storage_app: tuple) -> None:
+        """get_file for missing file raises ApiError with 404."""
+        app, _ = storage_app
+        svc = FilesystemTemplateStorageService()
+
+        with app.app_context():
+            with pytest.raises(ApiError) as exc_info:
+                svc.get_file("tenant-a", "nonexistent", "V1", "missing.bpmn")
+            assert exc_info.value.status_code == 404
+
+    def test_list_files_returns_correct_list(self, storage_app: tuple) -> None:
+        """list_files returns correct file list for a version directory."""
+        app, _ = storage_app
+        svc = FilesystemTemplateStorageService()
+
+        with app.app_context():
+            svc.store_file("tenant-a", "tpl", "V1", "diagram.bpmn", "bpmn", b"bpmn content")
+            svc.store_file("tenant-a", "tpl", "V1", "form.json", "json", b'{"key":"value"}')
+            svc.store_file("tenant-a", "tpl", "V1", "rules.dmn", "dmn", b"dmn content")
+
+            files = svc.list_files("tenant-a", "tpl", "V1")
+
+        names = sorted(f["file_name"] for f in files)
+        types = {f["file_name"]: f["file_type"] for f in files}
+        assert names == ["diagram.bpmn", "form.json", "rules.dmn"]
+        assert types["diagram.bpmn"] == "bpmn"
+        assert types["form.json"] == "json"
+        assert types["rules.dmn"] == "dmn"
+
+    def test_list_files_empty_directory(self, storage_app: tuple) -> None:
+        """list_files returns empty list for non-existent version directory."""
+        app, _ = storage_app
+        svc = FilesystemTemplateStorageService()
+
+        with app.app_context():
+            files = svc.list_files("tenant-a", "nonexistent", "V1")
+
+        assert files == []
+
+    def test_delete_file_removes_from_storage(self, storage_app: tuple) -> None:
+        """delete_file removes the file from storage."""
+        app, _ = storage_app
+        svc = FilesystemTemplateStorageService()
+
+        with app.app_context():
+            svc.store_file("tenant-a", "tpl", "V1", "temp.bpmn", "bpmn", b"temp content")
+            # Verify it exists
+            assert svc.get_file("tenant-a", "tpl", "V1", "temp.bpmn") == b"temp content"
+            # Delete it
+            svc.delete_file("tenant-a", "tpl", "V1", "temp.bpmn")
+            # Verify it's gone
+            with pytest.raises(ApiError) as exc_info:
+                svc.get_file("tenant-a", "tpl", "V1", "temp.bpmn")
+            assert exc_info.value.status_code == 404
+
+    def test_delete_file_nonexistent_is_silent(self, storage_app: tuple) -> None:
+        """delete_file for nonexistent file does not raise."""
+        app, _ = storage_app
+        svc = FilesystemTemplateStorageService()
+
+        with app.app_context():
+            # Should not raise
+            svc.delete_file("tenant-a", "tpl", "V1", "nonexistent.bpmn")
+
+    def test_stream_zip_creates_valid_zip(self, storage_app: tuple) -> None:
+        """stream_zip creates a valid zip with the expected files."""
+        app, _ = storage_app
+        svc = FilesystemTemplateStorageService()
+
+        with app.app_context():
+            svc.store_file("tenant-a", "tpl", "V1", "diagram.bpmn", "bpmn", b"bpmn data")
+            svc.store_file("tenant-a", "tpl", "V1", "form.json", "json", b'{"k":"v"}')
+
+            file_entries = [
+                {"file_name": "diagram.bpmn", "file_type": "bpmn"},
+                {"file_name": "form.json", "file_type": "json"},
+            ]
+            zip_bytes = svc.stream_zip("tenant-a", "tpl", "V1", file_entries)
+
+        # Verify it's a valid zip
+        with zipfile.ZipFile(io.BytesIO(zip_bytes), "r") as zf:
+            names = sorted(zf.namelist())
+            assert names == ["diagram.bpmn", "form.json"]
+            assert zf.read("diagram.bpmn") == b"bpmn data"
+            assert zf.read("form.json") == b'{"k":"v"}'
+
+    def test_stream_zip_skips_missing_files(self, storage_app: tuple) -> None:
+        """stream_zip logs a warning and skips missing files."""
+        app, _ = storage_app
+        svc = FilesystemTemplateStorageService()
+
+        with app.app_context():
+            svc.store_file("tenant-a", "tpl", "V1", "diagram.bpmn", "bpmn", b"bpmn data")
+
+            file_entries = [
+                {"file_name": "diagram.bpmn", "file_type": "bpmn"},
+                {"file_name": "missing.json", "file_type": "json"},
+            ]
+            zip_bytes = svc.stream_zip("tenant-a", "tpl", "V1", file_entries)
+
+        # The zip should only contain the file that exists
+        with zipfile.ZipFile(io.BytesIO(zip_bytes), "r") as zf:
+            names = zf.namelist()
+            assert "diagram.bpmn" in names
+            assert "missing.json" not in names
+
+    def test_stream_zip_empty_entries(self, storage_app: tuple) -> None:
+        """stream_zip with empty file_entries produces a valid empty zip."""
+        app, _ = storage_app
+        svc = FilesystemTemplateStorageService()
+
+        with app.app_context():
+            zip_bytes = svc.stream_zip("tenant-a", "tpl", "V1", [])
+
+        with zipfile.ZipFile(io.BytesIO(zip_bytes), "r") as zf:
+            assert len(zf.namelist()) == 0
+
+    def test_store_file_creates_directories(self, storage_app: tuple) -> None:
+        """store_file creates nested directories if they don't exist."""
+        app, tmpdir = storage_app
+        svc = FilesystemTemplateStorageService()
+
+        with app.app_context():
+            svc.store_file("new-tenant", "new-tpl", "V1", "new.bpmn", "bpmn", b"content")
+            # Verify the directory structure was created
+            expected_dir = os.path.join(tmpdir, "new-tenant", "new-tpl", "V1")
+            assert os.path.isdir(expected_dir)
+            assert os.path.isfile(os.path.join(expected_dir, "new.bpmn"))
+
+    def test_store_file_overwrites_existing(self, storage_app: tuple) -> None:
+        """store_file overwrites an existing file with the same name."""
+        app, _ = storage_app
+        svc = FilesystemTemplateStorageService()
+
+        with app.app_context():
+            svc.store_file("tenant-a", "tpl", "V1", "diagram.bpmn", "bpmn", b"original")
+            svc.store_file("tenant-a", "tpl", "V1", "diagram.bpmn", "bpmn", b"updated")
+            result = svc.get_file("tenant-a", "tpl", "V1", "diagram.bpmn")
+
+        assert result == b"updated"
+
+
+# ============================================================================
+# NoopTemplateStorageService tests
+# ============================================================================
+
+
+class TestNoopStorageService:
+    """All methods raise NotImplementedError."""
+
+    def test_store_file_raises(self) -> None:
+        svc = NoopTemplateStorageService()
+        with pytest.raises(NotImplementedError):
+            svc.store_file("t", "k", "v", "f", "bpmn", b"data")
+
+    def test_get_file_raises(self) -> None:
+        svc = NoopTemplateStorageService()
+        with pytest.raises(NotImplementedError):
+            svc.get_file("t", "k", "v", "f")
+
+    def test_list_files_raises(self) -> None:
+        svc = NoopTemplateStorageService()
+        with pytest.raises(NotImplementedError):
+            svc.list_files("t", "k", "v")
+
+    def test_delete_file_raises(self) -> None:
+        svc = NoopTemplateStorageService()
+        with pytest.raises(NotImplementedError):
+            svc.delete_file("t", "k", "v", "f")
+
+    def test_stream_zip_raises(self) -> None:
+        svc = NoopTemplateStorageService()
+        with pytest.raises(NotImplementedError):
+            svc.stream_zip("t", "k", "v", [])