diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0967ef42..2c63c085 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1 +1,2 @@
-{}
+{
+}
diff --git a/electron/workflow/db/schema.ts b/electron/workflow/db/schema.ts
index 7e190fa2..13561ca6 100644
--- a/electron/workflow/db/schema.ts
+++ b/electron/workflow/db/schema.ts
@@ -1,5 +1,9 @@
 /**
  * SQLite database schema definitions and migrations (sql.js version).
+ *
+ * Uses named migrations instead of sequential version numbers to avoid
+ * conflicts when multiple branches define migrations independently.
+ * Each migration has a unique string ID and an idempotent apply function.
  */
 
 import type { Database as SqlJsDatabase } from "sql.js";
@@ -7,9 +11,87 @@ import type { Database as SqlJsDatabase } from "sql.js";
 const DEFAULT_PER_EXECUTION_LIMIT = 10.0;
 const DEFAULT_DAILY_LIMIT = 100.0;
 
+/** Map old numeric versions to the named migration IDs they correspond to. */
+const LEGACY_VERSION_MAP: Record<number, string[]> = {
+  1: ["001_initial_schema"],
+  2: ["001_initial_schema", "002_add_templates"],
+  3: ["001_initial_schema", "002_add_templates"],
+};
+
+interface NamedMigration {
+  id: string;
+  apply: (db: SqlJsDatabase) => void;
+}
+
+/**
+ * All migrations in order. Each `apply` MUST be idempotent so that
+ * re-running a migration on a database that already has the change
+ * is safe (e.g. use IF NOT EXISTS, check columns before ALTER).
+ */
+const migrations: NamedMigration[] = [
+  {
+    id: "001_initial_schema",
+    apply: (_db: SqlJsDatabase) => {
+      // Handled by initializeSchema — listed here for completeness.
+    },
+  },
+  {
+    id: "002_add_templates",
+    apply: (db: SqlJsDatabase) => {
+      console.log("[Schema] Applying migration: 002_add_templates");
+      db.run(`CREATE TABLE IF NOT EXISTS templates (
+        id TEXT PRIMARY KEY,
+        name TEXT NOT NULL,
+        description TEXT,
+        tags TEXT,
+        type TEXT NOT NULL CHECK (type IN ('public', 'custom')),
+        template_type TEXT NOT NULL CHECK (template_type IN ('playground', 'workflow')),
+        is_favorite INTEGER NOT NULL DEFAULT 0 CHECK (is_favorite IN (0, 1)),
+        created_at TEXT NOT NULL DEFAULT (datetime('now')),
+        updated_at TEXT NOT NULL DEFAULT (datetime('now')),
+        author TEXT,
+        use_count INTEGER NOT NULL DEFAULT 0,
+        thumbnail TEXT,
+        playground_data TEXT,
+        workflow_data TEXT
+      )`);
+
+      db.run(
+        "CREATE INDEX IF NOT EXISTS idx_templates_type ON templates(type)",
+      );
+      db.run(
+        "CREATE INDEX IF NOT EXISTS idx_templates_template_type ON templates(template_type)",
+      );
+      db.run(
+        "CREATE INDEX IF NOT EXISTS idx_templates_favorite ON templates(is_favorite)",
+      );
+      db.run(
+        "CREATE INDEX IF NOT EXISTS idx_templates_created ON templates(created_at DESC)",
+      );
+      db.run(
+        "CREATE INDEX IF NOT EXISTS idx_templates_use_count ON templates(use_count DESC)",
+      );
+    },
+  },
+  {
+    id: "003_add_search_text",
+    apply: (db: SqlJsDatabase) => {
+      console.log("[Schema] Applying migration: 003_add_search_text");
+      const cols = db.exec("PRAGMA table_info(templates)");
+      const hasColumn = cols[0]?.values?.some(
+        (row) => row[1] === "search_text",
+      );
+      if (!hasColumn) {
+        db.run("ALTER TABLE templates ADD COLUMN search_text TEXT");
+      }
+    },
+  },
+];
+
 export function initializeSchema(db: SqlJsDatabase): void {
-  db.run(`CREATE TABLE IF NOT EXISTS schema_version (
-    version INTEGER PRIMARY KEY,
+  // Use the new named migrations table from the start
+  db.run(`CREATE TABLE IF NOT EXISTS schema_migrations (
+    id TEXT PRIMARY KEY,
     applied_at TEXT NOT NULL DEFAULT (datetime('now'))
   )`);
 
@@ -91,7 +173,8 @@ export function initializeSchema(db: SqlJsDatabase): void {
     use_count INTEGER NOT NULL DEFAULT 0,
     thumbnail TEXT,
     playground_data TEXT,
-    workflow_data TEXT
+    workflow_data TEXT,
+    search_text TEXT
   )`);
 
   // Indexes
@@ -144,64 +227,73 @@ export function initializeSchema(db: SqlJsDatabase): void {
   db.run(
     "INSERT OR IGNORE INTO api_keys (id, wavespeed_key, llm_key) VALUES (1, NULL, NULL)",
   );
-  db.run("INSERT OR IGNORE INTO schema_version (version) VALUES (1)");
+
+  // Mark all migrations as applied for a fresh database
+  for (const m of migrations) {
+    db.run("INSERT OR IGNORE INTO schema_migrations (id) VALUES (?)", [m.id]);
+  }
 }
 
 export function runMigrations(db: SqlJsDatabase): void {
-  const result = db.exec("SELECT MAX(version) as version FROM schema_version");
-  const currentVersion = (result[0]?.values?.[0]?.[0] as number) ?? 0;
-
-  const migrations: Array<{
-    version: number;
-    apply: (db: SqlJsDatabase) => void;
-  }> = [
-    // Migration 2: Add templates table
-    {
-      version: 2,
-      apply: (db: SqlJsDatabase) => {
-        console.log("[Schema] Applying migration 2: Add templates table");
-
-        db.run(`CREATE TABLE IF NOT EXISTS templates (
-          id TEXT PRIMARY KEY,
-          name TEXT NOT NULL,
-          description TEXT,
-          tags TEXT,
-          type TEXT NOT NULL CHECK (type IN ('public', 'custom')),
-          template_type TEXT NOT NULL CHECK (template_type IN ('playground', 'workflow')),
-          is_favorite INTEGER NOT NULL DEFAULT 0 CHECK (is_favorite IN (0, 1)),
-          created_at TEXT NOT NULL DEFAULT (datetime('now')),
-          updated_at TEXT NOT NULL DEFAULT (datetime('now')),
-          author TEXT,
-          use_count INTEGER NOT NULL DEFAULT 0,
-          thumbnail TEXT,
-          playground_data TEXT,
-          workflow_data TEXT
-        )`);
-
-        db.run(
-          "CREATE INDEX IF NOT EXISTS idx_templates_type ON templates(type)",
-        );
-        db.run(
-          "CREATE INDEX IF NOT EXISTS idx_templates_template_type ON templates(template_type)",
-        );
-        db.run(
-          "CREATE INDEX IF NOT EXISTS idx_templates_favorite ON templates(is_favorite)",
-        );
-        db.run(
-          "CREATE INDEX IF NOT EXISTS idx_templates_created ON templates(created_at DESC)",
-        );
-        db.run(
-          "CREATE INDEX IF NOT EXISTS idx_templates_use_count ON templates(use_count DESC)",
-        );
-
-        db.run("INSERT INTO schema_version (version) VALUES (2)");
-      },
-    },
-  ];
+  // --- Step 1: Detect and upgrade from legacy numeric schema_version ---
+  const tables = db.exec(
+    "SELECT name FROM sqlite_master WHERE type='table' AND name IN ('schema_version', 'schema_migrations')",
+  );
+  const tableNames = tables[0]?.values?.map((r) => r[0] as string) ?? [];
+  const hasLegacyTable = tableNames.includes("schema_version");
+  const hasNewTable = tableNames.includes("schema_migrations");
+
+  if (hasLegacyTable && !hasNewTable) {
+    // Migrate from old numeric system to named migrations
+    console.log(
+      "[Schema] Upgrading from legacy schema_version to named migrations",
+    );
+
+    const result = db.exec(
+      "SELECT MAX(version) as version FROM schema_version",
+    );
+    const legacyVersion = (result[0]?.values?.[0]?.[0] as number) ?? 0;
+
+    // Create the new table
+    db.run(`CREATE TABLE IF NOT EXISTS schema_migrations (
+      id TEXT PRIMARY KEY,
+      applied_at TEXT NOT NULL DEFAULT (datetime('now'))
+    )`);
+
+    // Map old version number to known migration IDs
+    const knownApplied = LEGACY_VERSION_MAP[legacyVersion] ?? [
+      "001_initial_schema",
+    ];
+    for (const id of knownApplied) {
+      db.run("INSERT OR IGNORE INTO schema_migrations (id) VALUES (?)", [id]);
+    }
+
+    // Drop the old table
+    db.run("DROP TABLE IF EXISTS schema_version");
+  }
+
+  if (!hasLegacyTable && !hasNewTable) {
+    // No migration tracking at all — treat as version 1 (initial schema exists)
+    db.run(`CREATE TABLE IF NOT EXISTS schema_migrations (
+      id TEXT PRIMARY KEY,
+      applied_at TEXT NOT NULL DEFAULT (datetime('now'))
+    )`);
+    db.run("INSERT OR IGNORE INTO schema_migrations (id) VALUES (?)", [
+      "001_initial_schema",
+    ]);
+  }
+
+  // --- Step 2: Run any missing migrations ---
+  const applied = db.exec("SELECT id FROM schema_migrations");
+  const appliedSet = new Set(
+    applied[0]?.values?.map((r) => r[0] as string) ?? [],
+  );
 
   for (const m of migrations) {
-    if (m.version > currentVersion) {
+    if (!appliedSet.has(m.id)) {
+      console.log(`[Schema] Running migration: ${m.id}`);
       m.apply(db);
+      db.run("INSERT INTO schema_migrations (id) VALUES (?)", [m.id]);
     }
   }
 }
diff --git a/electron/workflow/db/template.repo.ts b/electron/workflow/db/template.repo.ts
index 694a4637..59d6a4e6 100644
--- a/electron/workflow/db/template.repo.ts
+++ b/electron/workflow/db/template.repo.ts
@@ -28,8 +28,8 @@ export function createTemplate(input: CreateTemplateInput): Template {
     `INSERT INTO templates (
       id, name, description, tags, type, template_type, is_favorite,
       created_at, updated_at, author, use_count, thumbnail,
-      playground_data, workflow_data
-    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+      playground_data, workflow_data, search_text
+    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
     [
       id,
       input.name,
@@ -45,6 +45,7 @@ export function createTemplate(input: CreateTemplateInput): Template {
       input.thumbnail || null,
       playgroundData,
       workflowData,
+      input._searchText || null,
     ],
   );
 
@@ -57,7 +58,7 @@ export function getTemplateById(id: string): Template | null {
   const result = db.exec(
     `SELECT id, name, description, tags, type, template_type, is_favorite,
             created_at, updated_at, author, use_count, thumbnail,
-            playground_data, workflow_data
+            playground_data, workflow_data, search_text
      FROM templates WHERE id = ?`,
     [id],
   );
@@ -87,14 +88,23 @@ export function queryTemplates(filter?: TemplateFilter): Template[] {
   }
 
   if (filter?.category && filter.templateType === "workflow") {
-    conditions.push("json_extract(workflow_data, '$.category') = ?");
-    params.push(filter.category);
+    conditions.push("workflow_data LIKE ?");
+    params.push(`%"category":"${filter.category}"%`);
   }
 
   if (filter?.search) {
     const searchPattern = `%${filter.search}%`;
-    conditions.push("(name LIKE ? OR description LIKE ? OR tags LIKE ?)");
-    params.push(searchPattern, searchPattern, searchPattern);
+    conditions.push(
+      "(name LIKE ? OR description LIKE ? OR tags LIKE ? OR playground_data LIKE ? OR workflow_data LIKE ? OR search_text LIKE ?)",
+    );
+    params.push(
+      searchPattern,
+      searchPattern,
+      searchPattern,
+      searchPattern,
+      searchPattern,
+      searchPattern,
+    );
   }
 
   const whereClause =
@@ -106,7 +116,7 @@ export function queryTemplates(filter?: TemplateFilter): Template[] {
 
   const query = `SELECT id, name, description, tags, type, template_type, is_favorite,
                         created_at, updated_at, author, use_count, thumbnail,
-                        playground_data, workflow_data
+                        playground_data, workflow_data, search_text
                  FROM templates ${whereClause} ${orderBy}`;
   const result = db.exec(query, params);
 
@@ -192,6 +202,19 @@ export function deleteTemplates(ids: string[]): void {
   persistDatabase();
 }
 
+export function queryTemplateNames(templateType?: string): string[] {
+  const db = getDatabase();
+  let query = "SELECT name FROM templates";
+  const params: any[] = [];
+  if (templateType) {
+    query += " WHERE template_type = ?";
+    params.push(templateType);
+  }
+  const result = db.exec(query, params);
+  if (!result.length) return [];
+  return result[0].values.map((row: any[]) => row[0] as string);
+}
+
 function rowToTemplate(row: any[]): Template {
   const tags = row[3] ? JSON.parse(row[3] as string) : [];
   const playgroundData = row[12] ? JSON.parse(row[12] as string) : null;
@@ -212,5 +235,6 @@ function rowToTemplate(row: any[]): Template {
     thumbnail: row[11] as string | null,
     playgroundData,
     workflowData,
+    _searchText: (row[14] as string) || undefined,
   };
 }
diff --git a/electron/workflow/db/workflow.repo.ts b/electron/workflow/db/workflow.repo.ts
index c52ba7c8..4b38a625 100644
--- a/electron/workflow/db/workflow.repo.ts
+++ b/electron/workflow/db/workflow.repo.ts
@@ -155,8 +155,23 @@ export function updateWorkflow(
   try {
     db.run("DELETE FROM nodes WHERE workflow_id = ?", [id]);
     db.run("DELETE FROM edges WHERE workflow_id = ?", [id]);
-    for (const node of graphDefinition.nodes) {
-      // Insert with NULL first (safe), then restore outputId
+
+    // Deduplicate by id — guards against React Flow state containing
+    // duplicate entries after undo/paste/rapid operations.
+    const seenNodeIds = new Set<string>();
+    const uniqueNodes = graphDefinition.nodes.filter((n) => {
+      if (seenNodeIds.has(n.id)) return false;
+      seenNodeIds.add(n.id);
+      return true;
+    });
+    const seenEdgeIds = new Set<string>();
+    const uniqueEdges = graphDefinition.edges.filter((e) => {
+      if (seenEdgeIds.has(e.id)) return false;
+      seenEdgeIds.add(e.id);
+      return true;
+    });
+
+    for (const node of uniqueNodes) {
       db.run(
         `INSERT INTO nodes (id, workflow_id, node_type, position_x, position_y, params, current_output_id) VALUES (?, ?, ?, ?, ?, ?, NULL)`,
         [
@@ -169,7 +184,7 @@ export function updateWorkflow(
         ],
       );
     }
-    for (const edge of graphDefinition.edges) {
+    for (const edge of uniqueEdges) {
       db.run(
         `INSERT INTO edges (id, workflow_id, source_node_id, source_output_key, target_node_id, target_input_key) VALUES (?, ?, ?, ?, ?, ?)`,
         [
@@ -183,7 +198,7 @@ export function updateWorkflow(
       );
     }
     // Restore currentOutputId where the execution record still exists
-    for (const node of graphDefinition.nodes) {
+    for (const node of uniqueNodes) {
       const outputId =
         node.currentOutputId ?? existingOutputIds.get(node.id) ?? null;
       if (outputId) {
diff --git a/electron/workflow/ipc/template.ipc.ts b/electron/workflow/ipc/template.ipc.ts
index 48e08aec..e8fda64d 100644
--- a/electron/workflow/ipc/template.ipc.ts
+++ b/electron/workflow/ipc/template.ipc.ts
@@ -1,4 +1,6 @@
-import { ipcMain } from "electron";
+import { ipcMain, dialog, BrowserWindow } from "electron";
+import { writeFileSync, existsSync, readFileSync } from "fs";
+import { join } from "path";
 import * as templateRepo from "../db/template.repo";
 import { migrateTemplatesSync } from "../services/template-migration";
 import {
@@ -12,6 +14,24 @@ import type {
   TemplateExport,
 } from "../../../src/types/template";
 
+function sanitizeFilename(name: string): string {
+  return name.replace(/[<>:"/\\|?*]/g, "_").trim() || "template";
+}
+
+function getUniqueFilePath(dir: string, baseName: string, ext: string): string {
+  let candidate = join(dir, `${baseName}${ext}`);
+  if (!existsSync(candidate)) return candidate;
+  let counter = 1;
+  while (existsSync(join(dir, `${baseName} (${counter})${ext}`))) counter++;
+  return join(dir, `${baseName} (${counter})${ext}`);
+}
+
+function getTemplateById(id: string): Template | null {
+  return id.startsWith("file-")
+    ? getFileTemplateById(id)
+    : templateRepo.getTemplateById(id);
+}
+
 export function registerTemplateIpc(): void {
   ipcMain.handle(
     "template:migrate",
@@ -52,7 +72,10 @@ export function registerTemplateIpc(): void {
       // Deduplicate: file templates take priority over DB templates with the same name
       const fileNames = new Set(fileTemps.map((t) => t.name));
       const dedupedDb = dbTemplates.filter((t) => !fileNames.has(t.name));
-      return [...fileTemps, ...dedupedDb];
+      // Sort: file (public) first, then DB public, then custom last
+      const dbPublic = dedupedDb.filter((t) => t.type === "public");
+      const dbCustom = dedupedDb.filter((t) => t.type !== "public");
+      return [...fileTemps, ...dbPublic, ...dbCustom];
     },
   );
 
@@ -97,14 +120,31 @@ export function registerTemplateIpc(): void {
     },
   );
 
+  ipcMain.handle(
+    "template:queryNames",
+    async (_event, args?: { templateType?: string }): Promise<string[]> => {
+      const dbNames = templateRepo.queryTemplateNames(args?.templateType);
+      const fileTemps = getFileTemplates(
+        args?.templateType
+          ? { templateType: args.templateType as "playground" | "workflow" }
+          : undefined,
+      );
+      const fileNames = fileTemps.map((t) => t.name);
+      return [...new Set([...fileNames, ...dbNames])];
+    },
+  );
+
   ipcMain.handle(
     "template:export",
     async (_event, args: { ids?: string[] }): Promise<TemplateExport> => {
-      const templates = args.ids
-        ? (args.ids
-            .map((id) => templateRepo.getTemplateById(id))
-            .filter(Boolean) as Template[])
-        : templateRepo.queryTemplates();
+      let templates: Template[];
+      if (args.ids) {
+        templates = args.ids
+          .map((id) => getTemplateById(id))
+          .filter(Boolean) as Template[];
+      } else {
+        templates = templateRepo.queryTemplates();
+      }
 
       return {
         version: "1.0",
@@ -114,47 +154,227 @@ export function registerTemplateIpc(): void {
     },
   );
 
+  // Single template export — save dialog
+  ipcMain.handle(
+    "template:exportSingle",
+    async (
+      _event,
+      args: { id: string; defaultName: string },
+    ): Promise<{ success: boolean; filePath?: string; canceled?: boolean }> => {
+      const template = getTemplateById(args.id);
+      if (!template) throw new Error(`Template ${args.id} not found`);
+
+      const win = BrowserWindow.getFocusedWindow();
+      const result = await dialog.showSaveDialog(win!, {
+        defaultPath: `${sanitizeFilename(args.defaultName)}.json`,
+        filters: [{ name: "JSON", extensions: ["json"] }],
+      });
+
+      if (result.canceled || !result.filePath) {
+        return { success: false, canceled: true };
+      }
+
+      const data: TemplateExport = {
+        version: "1.0",
+        exportedAt: new Date().toISOString(),
+        templates: [template],
+      };
+      writeFileSync(result.filePath, JSON.stringify(data, null, 2), "utf-8");
+      return { success: true, filePath: result.filePath };
+    },
+  );
+
+  // Batch template export — folder picker, one file per template
+  ipcMain.handle(
+    "template:exportBatch",
+    async (
+      _event,
+      args: { ids: string[] },
+    ): Promise<{
+      success: boolean;
+      count?: number;
+      folderPath?: string;
+      canceled?: boolean;
+    }> => {
+      const templates = args.ids
+        .map((id) => getTemplateById(id))
+        .filter(Boolean) as Template[];
+      if (templates.length === 0) throw new Error("No templates found");
+
+      const win = BrowserWindow.getFocusedWindow();
+      const result = await dialog.showOpenDialog(win!, {
+        properties: ["openDirectory", "createDirectory"],
+      });
+
+      if (result.canceled || !result.filePaths.length) {
+        return { success: false, canceled: true };
+      }
+
+      const folder = result.filePaths[0];
+      const now = new Date().toISOString();
+      let count = 0;
+
+      for (const tpl of templates) {
+        const baseName = sanitizeFilename(tpl.name);
+        const filePath = getUniqueFilePath(folder, baseName, ".json");
+        const data: TemplateExport = {
+          version: "1.0",
+          exportedAt: now,
+          templates: [tpl],
+        };
+        writeFileSync(filePath, JSON.stringify(data, null, 2), "utf-8");
+        count++;
+      }
+
+      return { success: true, count, folderPath: folder };
+    },
+  );
+
+  // Export all templates merged into one file — save dialog
+  ipcMain.handle(
+    "template:exportMerged",
+    async (
+      _event,
+      args: { ids: string[]; defaultName: string },
+    ): Promise<{ success: boolean; filePath?: string; canceled?: boolean }> => {
+      const templates = args.ids
+        .map((id) => getTemplateById(id))
+        .filter(Boolean) as Template[];
+      if (templates.length === 0) throw new Error("No templates found");
+
+      const win = BrowserWindow.getFocusedWindow();
+      const result = await dialog.showSaveDialog(win!, {
+        defaultPath: `${sanitizeFilename(args.defaultName)}.json`,
+        filters: [{ name: "JSON", extensions: ["json"] }],
+      });
+
+      if (result.canceled || !result.filePath) {
+        return { success: false, canceled: true };
+      }
+
+      const data: TemplateExport = {
+        version: "1.0",
+        exportedAt: new Date().toISOString(),
+        templates,
+      };
+      writeFileSync(result.filePath, JSON.stringify(data, null, 2), "utf-8");
+      return { success: true, filePath: result.filePath };
+    },
+  );
+
+  // Import picker — multi-file selection, returns parsed data
+  ipcMain.handle(
+    "template:importPick",
+    async (): Promise<{
+      canceled: boolean;
+      templates?: TemplateExport[];
+    }> => {
+      const win = BrowserWindow.getFocusedWindow();
+      const result = await dialog.showOpenDialog(win!, {
+        properties: ["openFile", "multiSelections"],
+        filters: [{ name: "JSON", extensions: ["json"] }],
+      });
+
+      if (result.canceled || !result.filePaths.length) {
+        return { canceled: true };
+      }
+
+      const templates: TemplateExport[] = [];
+      for (const filePath of result.filePaths) {
+        const content = readFileSync(filePath, "utf-8");
+        const data = JSON.parse(content) as TemplateExport;
+        templates.push(data);
+      }
+
+      return { canceled: false, templates };
+    },
+  );
+
   ipcMain.handle(
     "template:import",
     async (
       _event,
-      args: { data: TemplateExport; mode: "merge" | "replace" },
-    ): Promise<{ imported: number; skipped: number }> => {
+      args: { data: TemplateExport; mode: "merge" | "replace" | "rename" },
+    ): Promise<{ imported: number; skipped: number; replaced: number }> => {
       validateImportData(args.data);
 
+      let replaced = 0;
+
       if (args.mode === "replace") {
-        const existing = templateRepo.queryTemplates({ type: "custom" });
-        templateRepo.deleteTemplates(existing.map((t) => t.id));
+        // Replace: delete existing custom templates that have the same name+type as imports
+        const importedTypes = new Set(
+          args.data.templates.map((t) => t.templateType),
+        );
+        for (const tplType of importedTypes) {
+          const existing = templateRepo.queryTemplates({
+            templateType: tplType as "playground" | "workflow",
+            type: "custom",
+          });
+          const importNames = new Set(
+            args.data.templates
+              .filter((t) => t.templateType === tplType)
+              .map((t) => t.name),
+          );
+          const toDelete = existing.filter((t) => importNames.has(t.name));
+          if (toDelete.length > 0) {
+            templateRepo.deleteTemplates(toDelete.map((t) => t.id));
+            replaced += toDelete.length;
+          }
+        }
       }
 
       let imported = 0;
       let skipped = 0;
 
-      const existingKeys = new Set(
-        templateRepo.queryTemplates().map((t) => `${t.templateType}:${t.name}`),
-      );
+      // Build a live set of existing names (per templateType) for dedup / rename
+      const existingNamesByType: Record<string, Set<string>> = {};
+      for (const t of templateRepo.queryTemplates()) {
+        if (!existingNamesByType[t.templateType])
+          existingNamesByType[t.templateType] = new Set();
+        existingNamesByType[t.templateType].add(t.name);
+      }
+      // Also include file template names
+      for (const t of getFileTemplates()) {
+        if (!existingNamesByType[t.templateType])
+          existingNamesByType[t.templateType] = new Set();
+        existingNamesByType[t.templateType].add(t.name);
+      }
 
       for (const template of args.data.templates) {
-        const key = `${template.templateType}:${template.name}`;
-        if (args.mode === "merge" && existingKeys.has(key)) {
-          skipped++;
-        } else {
-          templateRepo.createTemplate({
-            name: template.name,
-            description: template.description,
-            tags: template.tags,
-            type: "custom",
-            templateType: template.templateType,
-            author: template.author,
-            thumbnail: template.thumbnail,
-            playgroundData: template.playgroundData,
-            workflowData: template.workflowData,
-          });
-          imported++;
+        const typeNames =
+          existingNamesByType[template.templateType] ?? new Set();
+        let finalName = template.name;
+
+        if (typeNames.has(template.name)) {
+          if (args.mode === "merge") {
+            skipped++;
+            continue;
+          }
+          if (args.mode === "rename") {
+            // Auto-rename: append (2), (3), etc.
+            let counter = 2;
+            while (typeNames.has(`${template.name} (${counter})`)) counter++;
+            finalName = `${template.name} (${counter})`;
+          }
+          // For "replace" mode, conflicting ones were already deleted above, so name is free
         }
+
+        templateRepo.createTemplate({
+          name: finalName,
+          description: template.description,
+          tags: template.tags,
+          type: "custom",
+          templateType: template.templateType,
+          author: template.author,
+          thumbnail: template.thumbnail,
+          playgroundData: template.playgroundData,
+          workflowData: template.workflowData,
+        });
+        typeNames.add(finalName);
+        imported++;
       }
 
-      return { imported, skipped };
+      return { imported, skipped, replaced };
     },
   );
 }
diff --git a/electron/workflow/services/template-init.ts b/electron/workflow/services/template-init.ts
index 2a33921c..2c1c0a7f 100644
--- a/electron/workflow/services/template-init.ts
+++ b/electron/workflow/services/template-init.ts
@@ -53,16 +53,15 @@ export function initializeDefaultTemplates(): void {
  */
 function cleanupOldPublicTemplates(): void {
   try {
-    const fileNames = new Set(fileTemplates.map((t) => t.name));
+    // Remove ALL old public workflow templates from DB — they are now file-based
     const dbPublic = templateRepo.queryTemplates({
       type: "public",
       templateType: "workflow",
     });
-    const toDelete = dbPublic.filter((t) => fileNames.has(t.name));
-    if (toDelete.length > 0) {
-      templateRepo.deleteTemplates(toDelete.map((t) => t.id));
+    if (dbPublic.length > 0) {
+      templateRepo.deleteTemplates(dbPublic.map((t) => t.id));
       console.log(
-        `[TemplateInit] Cleaned up ${toDelete.length} old public templates from DB: [${toDelete.map((t) => t.name).join(", ")}]`,
+        `[TemplateInit] Cleaned up ${dbPublic.length} old public templates from DB: [${dbPublic.map((t) => t.name).join(", ")}]`,
       );
     }
   } catch (error) {
diff --git a/package.json b/package.json
index 2f1a809c..8e06148f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wavespeed-desktop",
-  "version": "2.0.22",
+  "version": "2.0.23",
   "description": "WaveSpeedAI Desktop Application - A playground for AI models",
   "main": "./out/main/index.js",
   "author": {
diff --git a/src/components/playground/FeaturedModelsPanel.tsx b/src/components/playground/FeaturedModelsPanel.tsx
index e35044c6..ec5d7605 100644
--- a/src/components/playground/FeaturedModelsPanel.tsx
+++ b/src/components/playground/FeaturedModelsPanel.tsx
@@ -4,6 +4,17 @@ import { Badge } from "@/components/ui/badge";
 import type { Model } from "@/types/model";
 
 const FEATURED_MODEL_FAMILIES = [
+  // ── Top row: poster cards (3:4) ──
+  {
+    name: "Nano Banana 2",
+    provider: "google",
+    description: "Next-gen text-to-image with improved quality and speed",
+    poster:
+      "https://static.wavespeed.ai/models/google/nano-banana-2/text-to-image/1772126604028089269_JhJR3cly.png",
+    primaryVariant: "google/nano-banana-2/text-to-image",
+    tags: ["Text-to-Image"],
+    ratio: "poster" as const,
+  },
   {
     name: "Nano Banana Pro",
     provider: "google",
@@ -15,15 +26,17 @@ const FEATURED_MODEL_FAMILIES = [
     ratio: "poster" as const,
   },
   {
-    name: "InfiniteTalk",
-    provider: "wavespeed-ai",
-    description: "Natural talking-head video from a single portrait photo",
+    name: "Seedream 4.5",
+    provider: "bytedance",
+    description:
+      "Ultra-realistic image generation with stunning detail and accuracy",
     poster:
-      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766575571686877852_Sckigeck.png",
-    primaryVariant: "wavespeed-ai/infinitetalk",
-    tags: ["Talking Head"],
+      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1764761216479761378_Yy864da9.png",
+    primaryVariant: "bytedance/seedream-v4.5",
+    tags: ["Photorealistic", "High Detail"],
     ratio: "poster" as const,
   },
+  // ── Bottom row: square cards (1:1) ──
   {
     name: "Wan Spicy",
     provider: "wavespeed-ai",
@@ -32,28 +45,26 @@ const FEATURED_MODEL_FAMILIES = [
       "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766298334453523753_f975da96.png",
     primaryVariant: "wavespeed-ai/wan-2.2-spicy/image-to-video",
     tags: ["Artistic", "Soft", "Paint"],
-    ratio: "poster" as const,
+    ratio: "square" as const,
   },
   {
-    name: "Seedream 4.5",
-    provider: "bytedance",
-    description:
-      "Ultra-realistic image generation with stunning detail and accuracy",
+    name: "InfiniteTalk",
+    provider: "wavespeed-ai",
+    description: "Natural talking-head video from a single portrait photo",
     poster:
-      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1764761216479761378_Yy864da9.png",
-    primaryVariant: "bytedance/seedream-v4.5",
-    tags: ["Photorealistic", "High Detail"],
-    isNew: true,
+      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766575571686877852_Sckigeck.png",
+    primaryVariant: "wavespeed-ai/infinitetalk",
+    tags: ["Talking Head"],
     ratio: "square" as const,
   },
   {
-    name: "Seedance 1.5 Pro",
-    provider: "bytedance",
-    description: "Cinematic video creation with breathtaking sci-fi aesthetics",
+    name: "Wan Animate",
+    provider: "wavespeed-ai",
+    description: "Bring characters to life with smooth animation",
     poster:
-      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766494048998434655_qEMLsAI0.png",
-    primaryVariant: "bytedance/seedance-v1.5-pro/image-to-video",
-    tags: ["Sci-Fi", "Neon", "Future"],
+      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1758433474532574441_SkTQLIEA.jpeg",
+    primaryVariant: "wavespeed-ai/wan-2.2/animate",
+    tags: ["Animation"],
     ratio: "square" as const,
   },
   {
@@ -66,16 +77,6 @@ const FEATURED_MODEL_FAMILIES = [
     tags: ["Motion", "Control"],
     ratio: "square" as const,
   },
-  {
-    name: "Wan Animate",
-    provider: "wavespeed-ai",
-    description: "Bring characters to life with smooth animation",
-    poster:
-      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1758433474532574441_SkTQLIEA.jpeg",
-    primaryVariant: "wavespeed-ai/wan-2.2/animate",
-    tags: ["Animation"],
-    ratio: "square" as const,
-  },
 ];
 
 const TAG_COLORS = [
diff --git a/src/components/playground/TemplatesPanel.tsx b/src/components/playground/TemplatesPanel.tsx
index 7ad83258..d94bef1b 100644
--- a/src/components/playground/TemplatesPanel.tsx
+++ b/src/components/playground/TemplatesPanel.tsx
@@ -1,12 +1,20 @@
-import { useCallback, useState } from "react";
+import { useCallback, useState, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { TemplateBrowser } from "@/components/templates/TemplateBrowser";
 import {
   TemplateDialog,
   type TemplateFormData,
 } from "@/components/templates/TemplateDialog";
 import { useTemplateStore } from "@/stores/templateStore";
 import { toast } from "@/hooks/useToast";
+import {
+  Search,
+  Pencil,
+  Trash2,
+  Download,
+  FolderOpen,
+  ChevronRight,
+  ChevronDown,
+} from "lucide-react";
 import type { Template } from "@/types/template";
 
 interface TemplatesPanelProps {
@@ -15,28 +23,140 @@ interface TemplatesPanelProps {
 
 export function TemplatesPanel({ onUseTemplate }: TemplatesPanelProps) {
   const { t } = useTranslation();
-  const { updateTemplate, deleteTemplate, exportTemplates } =
+  const { loadTemplates, updateTemplate, deleteTemplate, exportTemplates } =
     useTemplateStore();
   const [editingTemplate, setEditingTemplate] = useState<Template | null>(null);
   const [deletingTemplate, setDeletingTemplate] = useState<Template | null>(
     null,
   );
+  const [searchQuery, setSearchQuery] = useState("");
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(
+    new Set(),
+  );
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const [localTemplates, setLocalTemplates] = useState<Template[]>([]);
+  const [loadCounter, setLoadCounter] = useState(0);
+  const reloadTemplates = () => setLoadCounter((c) => c + 1);
+
+  useEffect(() => {
+    let cancelled = false;
+    loadTemplates({ templateType: "playground" }).then(() => {
+      if (!cancelled) {
+        // Read templates immediately after load completes
+        const storeTemplates = useTemplateStore.getState().templates;
+        // Filter to playground only in case another load overwrote the store
+        setLocalTemplates(
+          storeTemplates.filter((t) => t.templateType === "playground"),
+        );
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loadCounter]);
+
+  // Local search filtering (supports modelId, modelName, name, i18n)
+  const filteredTemplates = useMemo(() => {
+    if (!searchQuery.trim()) return localTemplates;
+    const q = searchQuery.trim().toLowerCase();
+    return localTemplates.filter((tpl) => {
+      const i18nName = tpl.i18nKey
+        ? t(`presetTemplates.${tpl.i18nKey}.name`, { defaultValue: "" })
+        : "";
+      return (
+        tpl.name.toLowerCase().includes(q) ||
+        (tpl.description ?? "").toLowerCase().includes(q) ||
+        (tpl.tags ?? []).some((tag) => tag.toLowerCase().includes(q)) ||
+        (tpl.playgroundData?.modelId ?? "").toLowerCase().includes(q) ||
+        (tpl.playgroundData?.modelName ?? "").toLowerCase().includes(q) ||
+        (tpl._searchText ?? "").toLowerCase().includes(q) ||
+        i18nName.toLowerCase().includes(q)
+      );
+    });
+  }, [localTemplates, searchQuery, t]);
+
+  const grouped = useMemo(() => {
+    const groups: Record<string, Template[]> = {};
+    for (const tpl of filteredTemplates) {
+      const key = tpl.playgroundData?.modelId || "other";
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(tpl);
+    }
+    return Object.entries(groups).sort(([a], [b]) => a.localeCompare(b));
+  }, [filteredTemplates]);
+
+  // Flat list of visible (non-collapsed) templates for keyboard navigation
+  const visibleTemplates = useMemo(() => {
+    const result: Template[] = [];
+    for (const [groupKey, groupTemplates] of grouped) {
+      if (!collapsedGroups.has(groupKey)) {
+        result.push(...groupTemplates);
+      }
+    }
+    return result;
+  }, [grouped, collapsedGroups]);
+
+  // Reset selection when results change
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [visibleTemplates.length, searchQuery]);
+
+  // Scroll selected item into view
+  useEffect(() => {
+    if (!listRef.current) return;
+    const el = listRef.current.querySelector(
+      `[data-tpl-index="${selectedIndex}"]`,
+    );
+    el?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+
+  const handleSearchKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (editingTemplate || deletingTemplate) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.min(i + 1, visibleTemplates.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const tpl = visibleTemplates[selectedIndex];
+        if (tpl) onUseTemplate(tpl);
+      }
+    },
+    [
+      visibleTemplates,
+      selectedIndex,
+      onUseTemplate,
+      editingTemplate,
+      deletingTemplate,
+    ],
+  );
+
+  const toggleGroup = (groupKey: string) => {
+    setCollapsedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(groupKey)) next.delete(groupKey);
+      else next.add(groupKey);
+      return next;
+    });
+  };
 
   const handleSaveEdit = useCallback(
     async (data: TemplateFormData) => {
       if (!editingTemplate) return;
       try {
-        await updateTemplate(editingTemplate.id, {
-          name: data.name,
-          description: data.description,
-          tags: data.tags,
-          thumbnail: data.thumbnail ?? null,
-        });
+        await updateTemplate(editingTemplate.id, { name: data.name });
         toast({
           title: t("templates.templateUpdated"),
           description: t("templates.updatedSuccessfully", { name: data.name }),
         });
         setEditingTemplate(null);
+        reloadTemplates();
       } catch (error) {
         toast({
           title: t("common.error"),
@@ -59,6 +179,7 @@ export function TemplatesPanel({ onUseTemplate }: TemplatesPanelProps) {
         }),
       });
       setDeletingTemplate(null);
+      reloadTemplates();
     } catch (error) {
       toast({
         title: t("common.error"),
@@ -89,15 +210,141 @@ export function TemplatesPanel({ onUseTemplate }: TemplatesPanelProps) {
     [exportTemplates, t],
   );
 
+  const formatDate = (dateStr: string) => {
+    const d = new Date(dateStr);
+    return `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, "0")}/${String(d.getDate()).padStart(2, "0")}`;
+  };
+
   return (
     <div className="flex flex-col h-full">
-      <TemplateBrowser
-        templateType="playground"
-        onUseTemplate={onUseTemplate}
-        onEditTemplate={setEditingTemplate}
-        onDeleteTemplate={setDeletingTemplate}
-        onExportTemplate={handleExport}
-      />
+      {/* Search */}
+      <div className="px-4 py-3 border-b border-border/50">
+        <div className="relative">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            onKeyDown={handleSearchKeyDown}
+            placeholder={t("templates.searchPlaceholder")}
+            className="w-full pl-8 pr-3 py-1.5 text-sm rounded-md border border-border bg-background focus:outline-none focus:ring-1 focus:ring-primary/50"
+          />
+        </div>
+      </div>
+
+      {/* Template List */}
+      <div ref={listRef} className="flex-1 overflow-y-auto">
+        {filteredTemplates.length === 0 && (
+          <div className="flex flex-col items-center justify-center h-40 text-muted-foreground">
+            <FolderOpen className="h-10 w-10 mb-2 opacity-40" />
+            <p className="text-xs">{t("templates.noTemplates")}</p>
+          </div>
+        )}
+
+        {grouped.map(([groupKey, groupTemplates]) => {
+          const isCollapsed = collapsedGroups.has(groupKey);
+          return (
+            <div
+              key={groupKey}
+              className="mx-3 mt-3 rounded-lg border border-border/50 overflow-hidden"
+            >
+              {/* Group Header */}
+              <button
+                onClick={() => toggleGroup(groupKey)}
+                className="w-full flex items-center gap-2 px-3 py-2.5 text-sm font-semibold hover:bg-muted/30 transition-colors"
+              >
+                {isCollapsed ? (
+                  <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                ) : (
+                  <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                )}
+                <span className="truncate">{groupKey}</span>
+              </button>
+              <div className="px-3 pb-1.5 -mt-1 text-xs text-muted-foreground">
+                {t("templates.templateCount", {
+                  count: groupTemplates.length,
+                })}
+              </div>
+
+              {/* Template Rows */}
+              {!isCollapsed &&
+                groupTemplates.map((tpl) => {
+                  const displayName = tpl.i18nKey
+                    ? t(`presetTemplates.${tpl.i18nKey}.name`, {
+                        defaultValue: tpl.name,
+                      })
+                    : tpl.name;
+                  const isCustom = tpl.type === "custom";
+                  const flatIndex = visibleTemplates.indexOf(tpl);
+                  const isSelected = flatIndex === selectedIndex;
+                  return (
+                    <div
+                      key={tpl.id}
+                      data-tpl-index={flatIndex}
+                      onClick={() => onUseTemplate(tpl)}
+                      onMouseEnter={() => {
+                        if (flatIndex >= 0) setSelectedIndex(flatIndex);
+                      }}
+                      className={`group flex items-center gap-2 mx-2 mb-1.5 px-2.5 py-2 rounded-md border transition-colors cursor-pointer ${
+                        isSelected
+                          ? "border-primary/40 bg-primary/5"
+                          : "border-border/30 hover:bg-primary/5 hover:border-primary/30"
+                      }`}
+                    >
+                      <div className="flex-1 min-w-0">
+                        <span
+                          className={`text-sm font-medium truncate block transition-colors ${isSelected ? "text-primary" : "group-hover:text-primary"}`}
+                        >
+                          {displayName}
+                        </span>
+                        <span className="text-xs text-muted-foreground">
+                          {t("templates.lastUpdated")}:{" "}
+                          {formatDate(tpl.updatedAt)}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-0.5 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+                        {isCustom && (
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setEditingTemplate(tpl);
+                            }}
+                            className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                            title={t("common.edit")}
+                          >
+                            <Pencil className="h-3.5 w-3.5" />
+                          </button>
+                        )}
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleExport(tpl);
+                          }}
+                          className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                          title={t("templates.export")}
+                        >
+                          <Download className="h-3.5 w-3.5" />
+                        </button>
+                        {isCustom && (
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setDeletingTemplate(tpl);
+                            }}
+                            className="p-1.5 rounded-md text-destructive/70 hover:text-destructive hover:bg-destructive/10 transition-colors"
+                            title={t("common.delete")}
+                          >
+                            <Trash2 className="h-3.5 w-3.5" />
+                          </button>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+            </div>
+          );
+        })}
+      </div>
 
       {/* Edit Dialog */}
       <TemplateDialog
diff --git a/src/components/templates/TemplateBrowser.tsx b/src/components/templates/TemplateBrowser.tsx
deleted file mode 100644
index cf9a240c..00000000
--- a/src/components/templates/TemplateBrowser.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-/**
- * TemplateBrowser — reusable template browsing UI with left sidebar filters + gallery grid.
- * Used by both TemplatesPage (full page) and WorkflowTemplateDialog (modal).
- */
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { TemplateGallery } from "./TemplateGallery";
-import {
-  Folder,
-  Globe,
-  User,
-  Star,
-  Grid3x3,
-  Image,
-  Video,
-  Music,
-  Sparkle,
-} from "lucide-react";
-import type { Template } from "@/types/template";
-
-interface TemplateBrowserProps {
-  templateType: "playground" | "workflow";
-  onUseTemplate: (template: Template, mode?: "new" | "replace") => void;
-  onEditTemplate?: (template: Template) => void;
-  onDeleteTemplate?: (template: Template) => void;
-  onExportTemplate?: (template: Template) => void;
-  externalSearch?: string; // search from top bar
-}
-
-export function TemplateBrowser({
-  templateType,
-  onUseTemplate,
-  onEditTemplate,
-  onDeleteTemplate,
-  onExportTemplate,
-  externalSearch,
-}: TemplateBrowserProps) {
-  const { t } = useTranslation();
-  const [sourceFilter, setSourceFilter] = useState<
-    "public" | "custom" | "favorites" | undefined
-  >(undefined);
-  const [categoryFilter, setCategoryFilter] = useState<string | undefined>(
-    undefined,
-  );
-
-  return (
-    <div className="flex flex-1 overflow-hidden">
-      {/* Left Sidebar Navigation */}
-      <aside className="w-48 flex-shrink-0 border-r border-border/50 py-4 px-3 overflow-y-auto">
-        <div className="space-y-5">
-          {/* Source Filter */}
-          <div className="space-y-0.5">
-            <h3 className="px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-              {t("templates.source")}
-            </h3>
-            {(
-              [
-                {
-                  key: undefined,
-                  icon: <Folder className="h-4 w-4" />,
-                  label: t("templates.allSources"),
-                },
-                {
-                  key: "public" as const,
-                  icon: <Globe className="h-4 w-4" />,
-                  label: t("templates.public"),
-                },
-                {
-                  key: "custom" as const,
-                  icon: <User className="h-4 w-4" />,
-                  label: t("templates.myTemplates"),
-                },
-                {
-                  key: "favorites" as const,
-                  icon: <Star className="h-4 w-4" />,
-                  label: t("templates.favorites"),
-                },
-              ] as const
-            ).map((opt) => (
-              <button
-                key={opt.key ?? "all"}
-                onClick={() => setSourceFilter(opt.key)}
-                className={`w-full flex items-center gap-3 ml-1 px-3 py-1.5 text-sm rounded-lg transition-colors ${
-                  sourceFilter === opt.key
-                    ? "bg-accent text-foreground"
-                    : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
-                }`}
-              >
-                {opt.icon}
-                {opt.label}
-              </button>
-            ))}
-          </div>
-
-          {/* Category Filter (only for workflow) */}
-          {templateType === "workflow" && (
-            <div className="space-y-0.5">
-              <h3 className="px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-                {t("templates.category")}
-              </h3>
-              {(
-                [
-                  {
-                    key: undefined,
-                    icon: <Grid3x3 className="h-4 w-4" />,
-                    label: t("templates.allCategories"),
-                  },
-                  {
-                    key: "image-processing",
-                    icon: <Image className="h-4 w-4" />,
-                    label: t("templates.imageProcessing"),
-                  },
-                  {
-                    key: "video-editing",
-                    icon: <Video className="h-4 w-4" />,
-                    label: t("templates.videoEditing"),
-                  },
-                  {
-                    key: "audio-conversion",
-                    icon: <Music className="h-4 w-4" />,
-                    label: t("templates.audioConversion"),
-                  },
-                  {
-                    key: "ai-generation",
-                    icon: <Sparkle className="h-4 w-4" />,
-                    label: t("templates.aiGeneration"),
-                  },
-                ] as const
-              ).map((opt) => (
-                <button
-                  key={opt.key ?? "all"}
-                  onClick={() => setCategoryFilter(opt.key)}
-                  className={`w-full flex items-center gap-3 ml-1 px-3 py-1.5 text-sm rounded-lg transition-colors ${
-                    categoryFilter === opt.key
-                      ? "bg-accent text-foreground"
-                      : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
-                  }`}
-                >
-                  {opt.icon}
-                  {opt.label}
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-      </aside>
-
-      {/* Main Content — Gallery */}
-      <div className="flex-1 flex flex-col overflow-hidden px-5 py-4">
-        <div className="flex-1 overflow-hidden">
-          <TemplateGallery
-            initialFilter={{
-              templateType,
-              type: sourceFilter === "favorites" ? undefined : sourceFilter,
-              category: categoryFilter,
-              isFavorite: sourceFilter === "favorites" ? true : undefined,
-            }}
-            onUseTemplate={onUseTemplate}
-            onEditTemplate={onEditTemplate}
-            onDeleteTemplate={onDeleteTemplate}
-            onExportTemplate={onExportTemplate}
-            showFilters={false}
-            externalSearch={externalSearch}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/templates/TemplateCard.tsx b/src/components/templates/TemplateCard.tsx
deleted file mode 100644
index d9592341..00000000
--- a/src/components/templates/TemplateCard.tsx
+++ /dev/null
@@ -1,253 +0,0 @@
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Card } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import {
-  Heart,
-  Play,
-  Pencil,
-  Trash2,
-  Download,
-  MoreVertical,
-  Sparkles,
-  Workflow,
-  BarChart3,
-  RefreshCw,
-} from "lucide-react";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import type { Template } from "@/types/template";
-import { cn } from "@/lib/utils";
-
-interface TemplateCardProps {
-  template: Template;
-  onUse: (template: Template, mode?: "new" | "replace") => void;
-  onEdit?: (template: Template) => void;
-  onDelete?: (template: Template) => void;
-  onExport?: (template: Template) => void;
-  onToggleFavorite: (template: Template) => void;
-  compact?: boolean;
-}
-
-export function TemplateCard({
-  template,
-  onUse,
-  onEdit,
-  onDelete,
-  onExport,
-  onToggleFavorite,
-  compact: _compact,
-}: TemplateCardProps) {
-  const { t } = useTranslation();
-  const [imageError, setImageError] = useState(false);
-
-  const isCustom = template.type === "custom";
-  const isPlayground = template.templateType === "playground";
-  const isFileTemplate = template.id.startsWith("file-");
-
-  const displayName = template.i18nKey
-    ? t(`presetTemplates.${template.i18nKey}.name`, {
-        defaultValue: template.name,
-      })
-    : template.name;
-  const displayDesc =
-    template.i18nKey && template.description
-      ? t(`presetTemplates.${template.i18nKey}.description`, {
-          defaultValue: template.description,
-        })
-      : template.description;
-
-  return (
-    <TooltipProvider delayDuration={200}>
-      <Card
-        className="group relative overflow-hidden hover:shadow-lg transition-all duration-200 cursor-pointer"
-        onClick={() => onUse(template)}
-      >
-        {/* Favorite Button */}
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onToggleFavorite(template);
-          }}
-          className={cn(
-            "absolute top-2.5 right-2.5 z-10 p-2 rounded-full transition-all duration-200",
-            "hover:scale-110 active:scale-95",
-            template.isFavorite
-              ? "opacity-100 text-rose-500 bg-rose-500/15 backdrop-blur-md hover:bg-rose-500/25"
-              : "opacity-0 group-hover:opacity-100 text-white/80 bg-black/30 backdrop-blur-md hover:text-rose-400 hover:bg-black/40",
-          )}
-        >
-          <Heart
-            className={cn(
-              "h-4 w-4 transition-all duration-200",
-              template.isFavorite &&
-                "fill-current drop-shadow-[0_0_4px_rgba(244,63,94,0.5)]",
-            )}
-          />
-        </button>
-
-        {/* Thumbnail */}
-        <div className="relative aspect-square bg-gradient-to-br from-muted/50 to-muted overflow-hidden">
-          {template.thumbnail && !imageError ? (
-            <img
-              src={template.thumbnail}
-              alt={displayName}
-              className="w-full h-full object-cover"
-              onError={() => setImageError(true)}
-            />
-          ) : (
-            <div className="w-full h-full flex items-center justify-center">
-              {isPlayground ? (
-                <Sparkles className="h-12 w-12 text-muted-foreground/30" />
-              ) : (
-                <Workflow className="h-12 w-12 text-muted-foreground/30" />
-              )}
-            </div>
-          )}
-          {/* Hover overlay */}
-          <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-200 opacity-0 group-hover:opacity-100">
-            {/* Center: New tab button */}
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onUse(template, "new");
-                  }}
-                  className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/90 hover:bg-white text-gray-800 flex items-center justify-center shadow-lg transition-transform hover:scale-110"
-                >
-                  <Play className="h-5 w-5 ml-0.5" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom">
-                {t("models.openInNewTab")}
-              </TooltipContent>
-            </Tooltip>
-            {/* Bottom-left: Replace current tab */}
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                onUse(template, "replace");
-              }}
-              className="absolute bottom-2 left-2 px-2 py-1 rounded-md text-[11px] font-medium bg-black/50 text-white/90 hover:bg-black/70 backdrop-blur-sm transition-colors flex items-center gap-1"
-            >
-              <RefreshCw className="h-3 w-3" />
-              {t("models.replaceCurrentTab")}
-            </button>
-          </div>
-        </div>
-
-        {/* Content */}
-        <div className="px-3 py-2">
-          <div className="flex items-center justify-between gap-2 mb-1">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <h3 className="font-semibold text-xs truncate flex-1">
-                  {displayName}
-                </h3>
-              </TooltipTrigger>
-              <TooltipContent side="bottom">{displayName}</TooltipContent>
-            </Tooltip>
-            {(onEdit || onDelete || onExport) && (
-              <DropdownMenu>
-                <DropdownMenuTrigger
-                  asChild
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-7 w-7 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
-                  >
-                    <MoreVertical className="h-4 w-4" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  {onEdit && !isFileTemplate && (
-                    <DropdownMenuItem
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onEdit(template);
-                      }}
-                    >
-                      <Pencil className="mr-2 h-4 w-4" />
-                      {t("common.edit")}
-                    </DropdownMenuItem>
-                  )}
-                  {onExport && (
-                    <DropdownMenuItem
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onExport(template);
-                      }}
-                    >
-                      <Download className="mr-2 h-4 w-4" />
-                      {t("templates.export")}
-                    </DropdownMenuItem>
-                  )}
-                  {onDelete && !isFileTemplate && isCustom && (
-                    <DropdownMenuItem
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onDelete(template);
-                      }}
-                      className="text-destructive"
-                    >
-                      <Trash2 className="mr-2 h-4 w-4" />
-                      {t("common.delete")}
-                    </DropdownMenuItem>
-                  )}
-                </DropdownMenuContent>
-              </DropdownMenu>
-            )}
-          </div>
-
-          {displayDesc && (
-            <p className="text-[11px] text-muted-foreground truncate mb-1">
-              {displayDesc}
-            </p>
-          )}
-
-          {/* Meta Info */}
-          <div className="flex items-center text-[11px] text-muted-foreground min-w-0">
-            <div className="flex-1 min-w-0">
-              {isPlayground && template.playgroundData && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <span className="block truncate">
-                      {template.playgroundData.modelName}
-                    </span>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom">
-                    {template.playgroundData.modelName}
-                  </TooltipContent>
-                </Tooltip>
-              )}
-              {!isPlayground && template.workflowData && (
-                <span className="flex items-center gap-1">
-                  <BarChart3 className="h-3 w-3 flex-shrink-0" />
-                  {template.workflowData.nodeCount} {t("templates.nodes")}
-                </span>
-              )}
-            </div>
-            {template.useCount > 0 && (
-              <span className="flex-shrink-0 ml-2 whitespace-nowrap">
-                {template.useCount} {t("templates.uses")}
-              </span>
-            )}
-          </div>
-        </div>
-      </Card>
-    </TooltipProvider>
-  );
-}
diff --git a/src/components/templates/TemplateDialog.tsx b/src/components/templates/TemplateDialog.tsx
index 163de927..0094ff26 100644
--- a/src/components/templates/TemplateDialog.tsx
+++ b/src/components/templates/TemplateDialog.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import {
   Dialog,
@@ -10,10 +10,7 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
-import { Badge } from "@/components/ui/badge";
-import { X, ImagePlus, Trash2 } from "lucide-react";
 import type { Template } from "@/types/template";
 
 interface TemplateDialogProps {
@@ -22,9 +19,7 @@ interface TemplateDialogProps {
   template?: Template | null;
   onSave: (data: TemplateFormData) => void | Promise<void>;
   mode: "create" | "edit";
-  /** Pre-fill name for create mode */
   defaultName?: string;
-  /** Whether this is a workflow template (shows category field) */
   isWorkflow?: boolean;
 }
 
@@ -43,81 +38,28 @@ export function TemplateDialog({
   onSave,
   mode,
   defaultName,
-  isWorkflow,
 }: TemplateDialogProps) {
   const { t } = useTranslation();
   const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
-  const [tags, setTags] = useState<string[]>([]);
-  const [tagInput, setTagInput] = useState("");
-  const [category, setCategory] = useState("");
-  const [thumbnail, setThumbnail] = useState<string | null>(null);
   const [isSaving, setIsSaving] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
 
-  const showCategoryField = isWorkflow ?? template?.templateType === "workflow";
-
-  // Initialize form with template data
   useEffect(() => {
     if (template) {
       setName(template.name);
-      setDescription(template.description || "");
-      setTags(template.tags || []);
-      setThumbnail(template.thumbnail || null);
-      if (template.workflowData) {
-        setCategory(template.workflowData.category || "");
-      }
     } else {
       setName(defaultName || "");
-      setDescription("");
-      setTags([]);
-      setCategory("");
-      setThumbnail(null);
     }
   }, [template, open, defaultName]);
 
-  const handleAddTag = () => {
-    const trimmed = tagInput.trim();
-    if (trimmed && !tags.includes(trimmed)) {
-      setTags([...tags, trimmed]);
-      setTagInput("");
-    }
-  };
-
-  const handleRemoveTag = (tag: string) => {
-    setTags(tags.filter((t) => t !== tag));
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      handleAddTag();
-    }
-  };
-
-  const handleThumbnailSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    // Convert to base64 data URL
-    const reader = new FileReader();
-    reader.onload = () => {
-      setThumbnail(reader.result as string);
-    };
-    reader.readAsDataURL(file);
-    e.target.value = "";
-  };
-
   const handleSave = async () => {
     if (!name.trim()) return;
-
     setIsSaving(true);
     try {
       await onSave({
         name: name.trim(),
-        description: description.trim(),
-        tags,
-        category: category.trim() || undefined,
-        thumbnail,
+        description: "",
+        tags: [],
+        thumbnail: null,
       });
       onOpenChange(false);
     } finally {
@@ -125,9 +67,16 @@ export function TemplateDialog({
     }
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && name.trim()) {
+      e.preventDefault();
+      handleSave();
+    }
+  };
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-md max-h-[85vh] overflow-y-auto">
+      <DialogContent className="max-w-sm">
         <DialogHeader>
           <DialogTitle>
             {mode === "create"
@@ -142,119 +91,17 @@ export function TemplateDialog({
         </DialogHeader>
 
         <div className="space-y-4">
-          {/* Thumbnail / Cover Image */}
-          <div className="space-y-2">
-            <Label>{t("templates.coverImage", "Cover Image")}</Label>
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept="image/*"
-              onChange={handleThumbnailSelect}
-              className="hidden"
-            />
-            {thumbnail ? (
-              <div className="relative group rounded-lg overflow-hidden border border-border">
-                <img
-                  src={thumbnail}
-                  alt="Cover"
-                  className="w-full h-32 object-cover"
-                />
-                <button
-                  onClick={() => setThumbnail(null)}
-                  className="absolute top-2 right-2 p-1.5 rounded-full bg-black/60 text-white opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/80"
-                >
-                  <Trash2 className="h-3.5 w-3.5" />
-                </button>
-              </div>
-            ) : (
-              <button
-                onClick={() => fileInputRef.current?.click()}
-                className="w-full h-24 rounded-lg border-2 border-dashed border-border hover:border-primary/50 transition-colors flex flex-col items-center justify-center gap-1.5 text-muted-foreground hover:text-foreground"
-              >
-                <ImagePlus className="h-5 w-5" />
-                <span className="text-xs">
-                  {t("templates.uploadCover", "Click to upload cover image")}
-                </span>
-              </button>
-            )}
-          </div>
-
-          {/* Name */}
           <div className="space-y-2">
             <Label htmlFor="template-name">{t("templates.templateName")}</Label>
             <Input
               id="template-name"
               value={name}
               onChange={(e) => setName(e.target.value)}
+              onKeyDown={handleKeyDown}
               placeholder={t("templates.templateNamePlaceholder")}
+              autoFocus
             />
           </div>
-
-          {/* Description */}
-          <div className="space-y-2">
-            <Label htmlFor="template-description">
-              {t("templates.descriptionLabel", "Description")}
-            </Label>
-            <Textarea
-              id="template-description"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              placeholder={t("templates.descriptionPlaceholder")}
-              rows={3}
-            />
-          </div>
-
-          {/* Category (for workflow templates) */}
-          {showCategoryField && (
-            <div className="space-y-2">
-              <Label htmlFor="template-category">
-                {t("templates.category")}
-              </Label>
-              <Input
-                id="template-category"
-                value={category}
-                onChange={(e) => setCategory(e.target.value)}
-                placeholder={t("templates.categoryPlaceholder")}
-              />
-            </div>
-          )}
-
-          {/* Tags */}
-          <div className="space-y-2">
-            <Label htmlFor="template-tags">{t("templates.tags")}</Label>
-            <div className="flex gap-2">
-              <Input
-                id="template-tags"
-                value={tagInput}
-                onChange={(e) => setTagInput(e.target.value)}
-                onKeyDown={handleKeyDown}
-                placeholder={t("templates.tagsPlaceholder")}
-              />
-              <Button
-                type="button"
-                variant="outline"
-                onClick={handleAddTag}
-                disabled={!tagInput.trim()}
-              >
-                {t("common.add")}
-              </Button>
-            </div>
-            {tags.length > 0 && (
-              <div className="flex flex-wrap gap-2 mt-2">
-                {tags.map((tag) => (
-                  <Badge key={tag} variant="secondary" className="gap-1">
-                    {tag}
-                    <button
-                      onClick={() => handleRemoveTag(tag)}
-                      className="ml-1 hover:text-destructive"
-                    >
-                      <X className="h-3 w-3" />
-                    </button>
-                  </Badge>
-                ))}
-              </div>
-            )}
-          </div>
         </div>
 
         <DialogFooter>
diff --git a/src/components/templates/TemplateDrawer.tsx b/src/components/templates/TemplateDrawer.tsx
deleted file mode 100644
index 45b25bf3..00000000
--- a/src/components/templates/TemplateDrawer.tsx
+++ /dev/null
@@ -1,237 +0,0 @@
-import { useEffect, useState, useCallback } from "react";
-import { useNavigate } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetDescription,
-} from "@/components/ui/sheet";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Button } from "@/components/ui/button";
-import { TemplateCard } from "./TemplateCard";
-import { TemplateSearch } from "./TemplateSearch";
-import {
-  Loader2,
-  FolderOpen,
-  ExternalLink,
-  Folder,
-  Globe,
-  User,
-  Star,
-} from "lucide-react";
-import { useTemplateStore } from "@/stores/templateStore";
-import { cn } from "@/lib/utils";
-import type { Template, TemplateFilter } from "@/types/template";
-
-interface TemplateDrawerProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  templateType: "playground" | "workflow";
-  onUseTemplate: (template: Template) => void;
-}
-
-type SourceFilter = "all" | "public" | "custom" | "favorites";
-
-export function TemplateDrawer({
-  open,
-  onOpenChange,
-  templateType,
-  onUseTemplate,
-}: TemplateDrawerProps) {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const [searchQuery, setSearchQuery] = useState("");
-  const [sourceFilter, setSourceFilter] = useState<SourceFilter>("all");
-  const [sortBy, setSortBy] = useState<"updatedAt" | "useCount">("updatedAt");
-
-  // Use a separate store instance for the drawer to avoid interfering with TemplatesPage
-  const [templates, setTemplates] = useState<Template[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const { toggleFavorite, useTemplate: incrementUseCount } = useTemplateStore();
-
-  const loadTemplates = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      const filter: TemplateFilter = {
-        templateType,
-        search: searchQuery || undefined,
-        sortBy,
-        type:
-          sourceFilter === "public"
-            ? "public"
-            : sourceFilter === "custom"
-              ? "custom"
-              : undefined,
-        isFavorite: sourceFilter === "favorites" ? true : undefined,
-      };
-      const result = await (window.workflowAPI?.invoke?.(
-        "template:query",
-        filter,
-      ) as Promise<Template[]>);
-      setTemplates(result ?? []);
-    } catch {
-      setTemplates([]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [templateType, searchQuery, sortBy, sourceFilter]);
-
-  // Load templates when drawer opens or filters change
-  useEffect(() => {
-    if (open) loadTemplates();
-  }, [open, loadTemplates]);
-
-  const handleUse = async (template: Template) => {
-    await incrementUseCount(template.id);
-    onUseTemplate(template);
-    onOpenChange(false);
-  };
-
-  const handleToggleFavorite = async (template: Template) => {
-    await toggleFavorite(template.id);
-    // Refresh local list
-    setTemplates((prev) =>
-      prev.map((t) =>
-        t.id === template.id ? { ...t, isFavorite: !t.isFavorite } : t,
-      ),
-    );
-  };
-
-  const handleBrowseAll = () => {
-    onOpenChange(false);
-    navigate("/templates");
-  };
-
-  const sourceOptions: {
-    key: SourceFilter;
-    icon: React.ReactNode;
-    label: string;
-  }[] = [
-    {
-      key: "all",
-      icon: <Folder className="h-3 w-3" />,
-      label: t("templates.allSources"),
-    },
-    {
-      key: "public",
-      icon: <Globe className="h-3 w-3" />,
-      label: t("templates.public"),
-    },
-    {
-      key: "custom",
-      icon: <User className="h-3 w-3" />,
-      label: t("templates.myTemplates"),
-    },
-    {
-      key: "favorites",
-      icon: <Star className="h-3 w-3" />,
-      label: t("templates.favorites"),
-    },
-  ];
-
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="flex flex-col p-0">
-        {/* Header */}
-        <SheetHeader className="px-5 pt-5 pb-3">
-          <SheetTitle>{t("templates.title")}</SheetTitle>
-          <SheetDescription>
-            {t("templates.drawerDesc", "Browse and apply templates")}
-          </SheetDescription>
-        </SheetHeader>
-
-        {/* Search */}
-        <div className="px-5 pb-3">
-          <TemplateSearch value={searchQuery} onChange={setSearchQuery} />
-        </div>
-
-        {/* Source filter pills */}
-        <div className="px-5 pb-2 flex items-center gap-1.5 flex-wrap">
-          {sourceOptions.map((opt) => (
-            <button
-              key={opt.key}
-              onClick={() => setSourceFilter(opt.key)}
-              className={cn(
-                "flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-full border transition-colors",
-                sourceFilter === opt.key
-                  ? "bg-primary/10 border-primary/30 text-primary"
-                  : "border-border text-muted-foreground hover:text-foreground hover:bg-accent",
-              )}
-            >
-              {opt.icon}
-              {opt.label}
-            </button>
-          ))}
-        </div>
-
-        {/* Sort */}
-        <div className="px-5 pb-3">
-          <select
-            value={sortBy}
-            onChange={(e) =>
-              setSortBy(e.target.value as "updatedAt" | "useCount")
-            }
-            className="w-full px-3 py-1.5 text-xs border rounded-md bg-card hover:bg-accent/50 transition-colors cursor-pointer"
-          >
-            <option value="updatedAt">
-              ⏰ {t("templates.sortBy")}: {t("templates.newest")}
-            </option>
-            <option value="useCount">
-              🔥 {t("templates.sortBy")}: {t("templates.mostUsed")}
-            </option>
-          </select>
-        </div>
-
-        {/* Template list */}
-        <ScrollArea className="flex-1 px-5">
-          {isLoading && (
-            <div className="flex items-center justify-center py-16">
-              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-            </div>
-          )}
-
-          {!isLoading && templates.length === 0 && (
-            <div className="flex flex-col items-center justify-center py-16 text-center">
-              <FolderOpen className="h-10 w-10 mb-3 text-muted-foreground opacity-50" />
-              <p className="text-sm font-medium mb-1">
-                {t("templates.noTemplates")}
-              </p>
-              <p className="text-xs text-muted-foreground">
-                {t("templates.noResultsDesc")}
-              </p>
-            </div>
-          )}
-
-          {!isLoading && templates.length > 0 && (
-            <div className="space-y-2 pb-4">
-              {templates.map((template) => (
-                <TemplateCard
-                  key={template.id}
-                  template={template}
-                  onUse={handleUse}
-                  onToggleFavorite={handleToggleFavorite}
-                  compact
-                />
-              ))}
-            </div>
-          )}
-        </ScrollArea>
-
-        {/* Footer — browse all link */}
-        <div className="border-t px-5 py-3">
-          <Button
-            variant="outline"
-            size="sm"
-            className="w-full"
-            onClick={handleBrowseAll}
-          >
-            <ExternalLink className="mr-2 h-3.5 w-3.5" />
-            {t("templates.browseAll", "Browse All Templates")}
-          </Button>
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
-}
diff --git a/src/components/templates/TemplateFilters.tsx b/src/components/templates/TemplateFilters.tsx
deleted file mode 100644
index 1ea55424..00000000
--- a/src/components/templates/TemplateFilters.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Checkbox } from "@/components/ui/checkbox";
-import { X, Star } from "lucide-react";
-import type { TemplateFilter } from "@/types/template";
-
-interface TemplateFiltersProps {
-  filter: TemplateFilter;
-  onChange: (filter: TemplateFilter) => void;
-  onClear: () => void;
-}
-
-export function TemplateFilters({
-  filter,
-  onChange,
-  onClear,
-}: TemplateFiltersProps) {
-  const { t } = useTranslation();
-
-  const hasActiveFilters =
-    filter.type || filter.isFavorite !== undefined || filter.category;
-
-  return (
-    <div className="space-y-4">
-      {/* Header with Clear */}
-      <div className="flex items-center justify-between mb-2">
-        <h3 className="font-semibold">{t("templates.filters")}</h3>
-        {hasActiveFilters && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onClear}
-            className="h-8 px-2 text-xs"
-          >
-            <X className="h-3 w-3 mr-1" />
-            {t("common.clear")}
-          </Button>
-        )}
-      </div>
-
-      {/* Source Filter */}
-      <div>
-        <select
-          value={filter.type || "all"}
-          onChange={(e) =>
-            onChange({
-              ...filter,
-              type:
-                e.target.value === "all"
-                  ? undefined
-                  : (e.target.value as "public" | "custom"),
-            })
-          }
-          className="w-full px-3 py-2 text-sm border rounded-lg bg-card hover:bg-accent/50 transition-colors cursor-pointer"
-        >
-          <option value="all">{t("templates.source")}</option>
-          <option value="public">{t("templates.public")}</option>
-          <option value="custom">{t("templates.myTemplates")}</option>
-        </select>
-      </div>
-
-      {/* Category Filter (for workflow templates) */}
-      {filter.templateType === "workflow" && (
-        <div>
-          <select
-            value={filter.category || "all"}
-            onChange={(e) =>
-              onChange({
-                ...filter,
-                category: e.target.value === "all" ? undefined : e.target.value,
-              })
-            }
-            className="w-full px-3 py-2 text-sm border rounded-lg bg-card hover:bg-accent/50 transition-colors cursor-pointer"
-          >
-            <option value="all">{t("templates.category")}</option>
-            <option value="image-processing">
-              {t("templates.imageProcessing")}
-            </option>
-            <option value="video-editing">{t("templates.videoEditing")}</option>
-            <option value="audio-conversion">
-              {t("templates.audioConversion")}
-            </option>
-            <option value="ai-generation">{t("templates.aiGeneration")}</option>
-          </select>
-        </div>
-      )}
-
-      {/* Favorites Toggle */}
-      <div className="flex items-center space-x-2 pt-2">
-        <Checkbox
-          id="favorites"
-          checked={filter.isFavorite === true}
-          onCheckedChange={(checked) =>
-            onChange({
-              ...filter,
-              isFavorite: checked ? true : undefined,
-            })
-          }
-        />
-        <Label
-          htmlFor="favorites"
-          className="font-normal cursor-pointer text-sm flex items-center gap-2"
-        >
-          <Star className="h-3.5 w-3.5" />
-          {t("templates.favoritesOnly")}
-        </Label>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/templates/TemplateGallery.tsx b/src/components/templates/TemplateGallery.tsx
deleted file mode 100644
index ce91ea0c..00000000
--- a/src/components/templates/TemplateGallery.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useTemplateStore } from "@/stores/templateStore";
-import { TemplateCard } from "./TemplateCard";
-import { TemplateFilters } from "./TemplateFilters";
-import { TemplateSearch } from "./TemplateSearch";
-import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Loader2, FolderOpen, ArrowUpDown } from "lucide-react";
-import type { Template, TemplateFilter } from "@/types/template";
-
-interface TemplateGalleryProps {
-  onUseTemplate: (template: Template, mode?: "new" | "replace") => void;
-  onEditTemplate?: (template: Template) => void;
-  onDeleteTemplate?: (template: Template) => void;
-  onExportTemplate?: (template: Template) => void;
-  initialFilter?: TemplateFilter;
-  showFilters?: boolean;
-  externalSearch?: string;
-}
-
-export function TemplateGallery({
-  onUseTemplate,
-  onEditTemplate,
-  onDeleteTemplate,
-  onExportTemplate,
-  initialFilter = {},
-  showFilters = true,
-  externalSearch,
-}: TemplateGalleryProps) {
-  const { t } = useTranslation();
-  const {
-    templates,
-    isLoading,
-    error,
-    loadTemplates,
-    toggleFavorite,
-    setFilter,
-    currentFilter,
-  } = useTemplateStore();
-  const [searchQuery, setSearchQuery] = useState("");
-  const prevSearchRef = useRef(searchQuery);
-
-  // Use external search when provided, otherwise use internal
-  const effectiveSearch =
-    externalSearch !== undefined ? externalSearch : searchQuery;
-
-  // Sync filter whenever initialFilter props change
-  useEffect(() => {
-    const filter = { ...initialFilter, search: effectiveSearch };
-    setFilter(filter);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    initialFilter?.templateType,
-    initialFilter?.type,
-    initialFilter?.category,
-    initialFilter?.isFavorite,
-  ]);
-
-  // Update filter when search query changes (skip initial mount)
-  useEffect(() => {
-    if (prevSearchRef.current === effectiveSearch) return;
-    prevSearchRef.current = effectiveSearch;
-    // Use store's current filter to avoid stale closure
-    const storeFilter = useTemplateStore.getState().currentFilter;
-    setFilter({ ...storeFilter, search: effectiveSearch });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [effectiveSearch]);
-
-  const handleFilterChange = (newFilter: TemplateFilter) => {
-    setFilter({ ...newFilter, search: effectiveSearch });
-  };
-
-  const handleClearFilters = () => {
-    setFilter({ search: effectiveSearch });
-  };
-
-  const handleToggleFavorite = async (template: Template) => {
-    await toggleFavorite(template.id);
-  };
-
-  if (error) {
-    return (
-      <div className="flex items-center justify-center h-64">
-        <div className="text-center">
-          <p className="text-destructive mb-2">{t("common.error")}</p>
-          <p className="text-sm text-muted-foreground">{error}</p>
-          <Button
-            variant="outline"
-            onClick={() => loadTemplates(currentFilter)}
-            className="mt-4"
-          >
-            {t("common.retry")}
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex gap-6 h-full">
-      {/* Sidebar Filters */}
-      {showFilters && (
-        <aside className="w-64 flex-shrink-0">
-          <div className="sticky top-4">
-            <TemplateFilters
-              filter={currentFilter}
-              onChange={handleFilterChange}
-              onClear={handleClearFilters}
-            />
-          </div>
-        </aside>
-      )}
-
-      {/* Main Content */}
-      <div className="flex-1 min-w-0 flex flex-col">
-        {/* Search and Filters Bar */}
-        <div className="mb-6">
-          <div className="flex items-center gap-3">
-            {/* Search Bar — hidden when external search is provided */}
-            {externalSearch === undefined && (
-              <div className="w-64">
-                <TemplateSearch value={searchQuery} onChange={setSearchQuery} />
-              </div>
-            )}
-
-            {/* Sort By Dropdown */}
-            <div className="relative">
-              <ArrowUpDown className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
-              <select
-                value={currentFilter.sortBy || "updatedAt"}
-                onChange={(e) =>
-                  handleFilterChange({
-                    ...currentFilter,
-                    sortBy: e.target.value as "updatedAt" | "useCount",
-                  })
-                }
-                className="pl-9 pr-3 py-2 text-sm border rounded-lg bg-card hover:bg-accent/50 transition-colors cursor-pointer min-w-[130px] appearance-none"
-              >
-                <option value="updatedAt">{t("templates.newest")}</option>
-                <option value="useCount">{t("templates.mostUsed")}</option>
-              </select>
-            </div>
-          </div>
-        </div>
-
-        {/* Loading State */}
-        {isLoading && (
-          <div className="flex items-center justify-center h-64">
-            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-          </div>
-        )}
-
-        {/* Empty State */}
-        {!isLoading && templates.length === 0 && (
-          <div className="flex items-center justify-center h-64">
-            <div className="text-center">
-              <FolderOpen className="h-12 w-12 mx-auto mb-4 text-muted-foreground opacity-50" />
-              <h3 className="text-lg font-medium mb-2">
-                {t("templates.noTemplates")}
-              </h3>
-              <p className="text-sm text-muted-foreground">
-                {effectiveSearch ||
-                currentFilter.templateType ||
-                currentFilter.type ||
-                currentFilter.isFavorite
-                  ? t("templates.noResultsDesc")
-                  : t("templates.noTemplatesDesc")}
-              </p>
-            </div>
-          </div>
-        )}
-
-        {/* Templates Grid */}
-        {!isLoading && templates.length > 0 && (
-          <ScrollArea className="flex-1">
-            <div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4 pb-4">
-              {templates.map((template) => (
-                <TemplateCard
-                  key={template.id}
-                  template={template}
-                  onUse={onUseTemplate}
-                  onEdit={onEditTemplate}
-                  onDelete={onDeleteTemplate}
-                  onExport={onExportTemplate}
-                  onToggleFavorite={handleToggleFavorite}
-                />
-              ))}
-            </div>
-          </ScrollArea>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/templates/TemplatePickerDialog.tsx b/src/components/templates/TemplatePickerDialog.tsx
index e2f56d4a..8870b770 100644
--- a/src/components/templates/TemplatePickerDialog.tsx
+++ b/src/components/templates/TemplatePickerDialog.tsx
@@ -1,17 +1,18 @@
 /**
  * TemplatePickerDialog — modal dialog for browsing templates.
- * Reuses TemplateBrowser (same layout as TemplatesPage) without the type tabs.
- * Used by both PlaygroundPage and WorkflowPage.
+ * Simple list view matching TemplatesPage style, no category sidebar.
+ * Click a row to use the template. Hover to see action buttons.
+ * Keyboard: arrow keys to navigate, Enter to use, Escape to close.
  */
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { TemplateBrowser } from "@/components/templates/TemplateBrowser";
 import {
   TemplateDialog,
   type TemplateFormData,
 } from "@/components/templates/TemplateDialog";
 import { useTemplateStore } from "@/stores/templateStore";
 import { toast } from "@/hooks/useToast";
+import { Search, Pencil, Trash2, Download, FolderOpen } from "lucide-react";
 import type { Template } from "@/types/template";
 
 interface TemplatePickerDialogProps {
@@ -28,16 +29,82 @@ export function TemplatePickerDialog({
   onUseTemplate,
 }: TemplatePickerDialogProps) {
   const { t } = useTranslation();
-  const { updateTemplate, deleteTemplate, exportTemplates } =
+  const { loadTemplates, updateTemplate, deleteTemplate, exportTemplates } =
     useTemplateStore();
   const [editingTemplate, setEditingTemplate] = useState<Template | null>(null);
   const [deletingTemplate, setDeletingTemplate] = useState<Template | null>(
     null,
   );
+  const [searchQuery, setSearchQuery] = useState("");
+  const [localTemplates, setLocalTemplates] = useState<Template[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // Load templates when dialog opens
+  useEffect(() => {
+    if (!open) return;
+    setSearchQuery("");
+    setSelectedIndex(0);
+    let cancelled = false;
+    loadTemplates({ templateType }).then(() => {
+      if (!cancelled) {
+        const storeTemplates = useTemplateStore.getState().templates;
+        setLocalTemplates(
+          storeTemplates.filter((t) => t.templateType === templateType),
+        );
+      }
+    });
+    // Focus search input when dialog opens
+    setTimeout(() => searchInputRef.current?.focus(), 50);
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, templateType]);
+
+  const filteredTemplates = useMemo(() => {
+    if (!searchQuery.trim()) return localTemplates;
+    const q = searchQuery.trim().toLowerCase();
+    return localTemplates.filter((tpl) => {
+      const i18nName = tpl.i18nKey
+        ? t(`presetTemplates.${tpl.i18nKey}.name`, { defaultValue: "" })
+        : "";
+      const i18nDesc = tpl.i18nKey
+        ? t(`presetTemplates.${tpl.i18nKey}.description`, { defaultValue: "" })
+        : "";
+      return (
+        tpl.name.toLowerCase().includes(q) ||
+        (tpl.description ?? "").toLowerCase().includes(q) ||
+        (tpl.tags ?? []).some((tag) => tag.toLowerCase().includes(q)) ||
+        (tpl.playgroundData?.modelId ?? "").toLowerCase().includes(q) ||
+        (tpl.playgroundData?.modelName ?? "").toLowerCase().includes(q) ||
+        (tpl.workflowData?.category ?? "").toLowerCase().includes(q) ||
+        (tpl._searchText ?? "").toLowerCase().includes(q) ||
+        i18nName.toLowerCase().includes(q) ||
+        i18nDesc.toLowerCase().includes(q)
+      );
+    });
+  }, [localTemplates, searchQuery, t]);
+
+  // Reset selection when filtered results change
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [filteredTemplates.length]);
+
+  const reload = useCallback(() => {
+    loadTemplates({ templateType }).then(() => {
+      const storeTemplates = useTemplateStore.getState().templates;
+      setLocalTemplates(
+        storeTemplates.filter((t) => t.templateType === templateType),
+      );
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [templateType]);
 
   const handleUse = useCallback(
-    (template: Template, mode?: "new" | "replace") => {
-      onUseTemplate(template, mode);
+    (template: Template) => {
+      onUseTemplate(template);
       onOpenChange(false);
     },
     [onUseTemplate, onOpenChange],
@@ -47,17 +114,13 @@ export function TemplatePickerDialog({
     async (data: TemplateFormData) => {
       if (!editingTemplate) return;
       try {
-        await updateTemplate(editingTemplate.id, {
-          name: data.name,
-          description: data.description,
-          tags: data.tags,
-          thumbnail: data.thumbnail ?? null,
-        });
+        await updateTemplate(editingTemplate.id, { name: data.name });
         toast({
           title: t("templates.templateUpdated"),
           description: t("templates.updatedSuccessfully", { name: data.name }),
         });
         setEditingTemplate(null);
+        reload();
       } catch (error) {
         toast({
           title: t("common.error"),
@@ -66,7 +129,7 @@ export function TemplatePickerDialog({
         });
       }
     },
-    [editingTemplate, updateTemplate, t],
+    [editingTemplate, updateTemplate, t, reload],
   );
 
   const handleDeleteConfirm = useCallback(async () => {
@@ -80,6 +143,7 @@ export function TemplatePickerDialog({
         }),
       });
       setDeletingTemplate(null);
+      reload();
     } catch (error) {
       toast({
         title: t("common.error"),
@@ -87,7 +151,7 @@ export function TemplatePickerDialog({
         variant: "destructive",
       });
     }
-  }, [deletingTemplate, deleteTemplate, t]);
+  }, [deletingTemplate, deleteTemplate, t, reload]);
 
   const handleExport = useCallback(
     async (template: Template) => {
@@ -110,18 +174,46 @@ export function TemplatePickerDialog({
     [exportTemplates, t],
   );
 
-  // Close on Escape key
-  useEffect(() => {
-    if (!open) return;
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
+  // Keyboard navigation: arrows, Enter, Escape
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (editingTemplate || deletingTemplate) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.min(i + 1, filteredTemplates.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const tpl = filteredTemplates[selectedIndex];
+        if (tpl) handleUse(tpl);
+      } else if (e.key === "Escape") {
         e.preventDefault();
         onOpenChange(false);
       }
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [open, onOpenChange]);
+    },
+    [
+      filteredTemplates,
+      selectedIndex,
+      handleUse,
+      onOpenChange,
+      editingTemplate,
+      deletingTemplate,
+    ],
+  );
+
+  // Scroll selected item into view
+  useEffect(() => {
+    if (!listRef.current) return;
+    const el = listRef.current.querySelector(`[data-index="${selectedIndex}"]`);
+    el?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+
+  const formatDate = (dateStr: string) => {
+    const d = new Date(dateStr);
+    return `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, "0")}/${String(d.getDate()).padStart(2, "0")}`;
+  };
 
   if (!open) return null;
 
@@ -131,8 +223,9 @@ export function TemplatePickerDialog({
       onClick={() => onOpenChange(false)}
     >
       <div
-        className="w-[85vw] max-w-[1100px] h-[75vh] rounded-xl border border-border bg-card shadow-2xl flex flex-col overflow-hidden"
+        className="w-[70vw] max-w-[800px] h-[70vh] rounded-xl border border-border bg-card shadow-2xl flex flex-col overflow-hidden"
         onClick={(e) => e.stopPropagation()}
+        onKeyDown={handleKeyDown}
       >
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-3 border-b border-border">
@@ -145,14 +238,100 @@ export function TemplatePickerDialog({
           </button>
         </div>
 
-        {/* Body — reuse TemplateBrowser */}
-        <TemplateBrowser
-          templateType={templateType}
-          onUseTemplate={handleUse}
-          onEditTemplate={setEditingTemplate}
-          onDeleteTemplate={setDeletingTemplate}
-          onExportTemplate={handleExport}
-        />
+        {/* Search */}
+        <div className="px-5 py-3 border-b border-border/50">
+          <div className="relative max-w-sm">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <input
+              ref={searchInputRef}
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder={t("templates.searchPlaceholder")}
+              className="w-full pl-8 pr-3 py-1.5 text-sm rounded-md border border-border bg-background focus:outline-none focus:ring-1 focus:ring-primary/50"
+            />
+          </div>
+        </div>
+
+        {/* Template List */}
+        <div ref={listRef} className="flex-1 overflow-y-auto px-5 py-3">
+          {filteredTemplates.length === 0 && (
+            <div className="flex flex-col items-center justify-center h-40 text-muted-foreground">
+              <FolderOpen className="h-10 w-10 mb-2 opacity-40" />
+              <p className="text-sm">{t("templates.noTemplates")}</p>
+            </div>
+          )}
+
+          {filteredTemplates.map((tpl, index) => {
+            const displayName = tpl.i18nKey
+              ? t(`presetTemplates.${tpl.i18nKey}.name`, {
+                  defaultValue: tpl.name,
+                })
+              : tpl.name;
+            const isCustom = tpl.type === "custom";
+            const isSelected = index === selectedIndex;
+            return (
+              <div
+                key={tpl.id}
+                data-index={index}
+                onClick={() => handleUse(tpl)}
+                onMouseEnter={() => setSelectedIndex(index)}
+                className={`group flex items-center gap-3 mb-1 px-3 py-2.5 rounded-md border transition-colors cursor-pointer ${
+                  isSelected
+                    ? "border-primary/40 bg-primary/5"
+                    : "border-transparent hover:bg-primary/5"
+                }`}
+              >
+                <div className="flex-1 min-w-0">
+                  <span
+                    className={`text-sm font-medium truncate block transition-colors ${isSelected ? "text-primary" : "group-hover:text-primary"}`}
+                  >
+                    {displayName}
+                  </span>
+                  <span className="text-xs text-muted-foreground">
+                    {t("templates.lastUpdated")}: {formatDate(tpl.updatedAt)}
+                  </span>
+                </div>
+                <div className="flex items-center gap-0.5 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+                  {isCustom && (
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setEditingTemplate(tpl);
+                      }}
+                      className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                      title={t("common.edit")}
+                    >
+                      <Pencil className="h-4 w-4" />
+                    </button>
+                  )}
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleExport(tpl);
+                    }}
+                    className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                    title={t("templates.export")}
+                  >
+                    <Download className="h-4 w-4" />
+                  </button>
+                  {isCustom && (
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setDeletingTemplate(tpl);
+                      }}
+                      className="p-1.5 rounded-md text-destructive/70 hover:text-destructive hover:bg-destructive/10 transition-colors"
+                      title={t("common.delete")}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </button>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
       </div>
 
       {/* Edit Dialog */}
diff --git a/src/components/templates/TemplateSearch.tsx b/src/components/templates/TemplateSearch.tsx
deleted file mode 100644
index 7eaaa66e..00000000
--- a/src/components/templates/TemplateSearch.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Search, X } from "lucide-react";
-
-interface TemplateSearchProps {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-}
-
-export function TemplateSearch({
-  value,
-  onChange,
-  placeholder,
-}: TemplateSearchProps) {
-  const { t } = useTranslation();
-  const [localValue, setLocalValue] = useState(value);
-
-  // Debounce search
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      onChange(localValue);
-    }, 300);
-
-    return () => clearTimeout(timer);
-  }, [localValue, onChange]);
-
-  // Sync with external value changes
-  useEffect(() => {
-    setLocalValue(value);
-  }, [value]);
-
-  const handleClear = () => {
-    setLocalValue("");
-    onChange("");
-  };
-
-  return (
-    <div className="relative">
-      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground pointer-events-none" />
-      <Input
-        value={localValue}
-        onChange={(e) => setLocalValue(e.target.value)}
-        placeholder={placeholder || t("templates.searchPlaceholder")}
-        className="pl-10 pr-10"
-      />
-      {localValue && (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={handleClear}
-          className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 p-0"
-        >
-          <X className="h-4 w-4" />
-        </Button>
-      )}
-    </div>
-  );
-}
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 3f2f3f53..e561240f 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -401,6 +401,14 @@
     "mergeDesc": "Add imported templates, skip duplicates (same name + model)",
     "replaceAll": "Replace All",
     "replaceAllDesc": "Delete existing templates and replace with imported ones",
+    "autoRename": "Auto Rename",
+    "autoRenameDesc": "Import all and add (2), (3) suffix to conflicting names",
+    "autoRenamed": "\"{{original}}\" already exists, saved as \"{{renamed}}\"",
+    "skipConflicts": "Skip Conflicts",
+    "skipConflictsDesc": "Only import templates that don't have name conflicts",
+    "replaceConflictsDesc": "Overwrite existing templates with the same name",
+    "importConflictAction": "Name conflicts found. Choose how to handle:",
+    "conflictCount": "{{count}} template(s) have name conflicts.",
     "templatesImported": "Templates imported",
     "filters": "Filters",
     "templateType": "Template Type",
@@ -430,6 +438,7 @@
     "importedCount": "Imported {{imported}} template(s){{skipped}}",
     "skippedCount": ", {{count}} skipped (duplicates)",
     "importFailed": "Import failed",
+    "noMatchingTypeTemplates": "No {{type}} templates found in this file",
     "invalidFile": "Invalid file",
     "invalidFileDesc": "The selected file is not a valid templates export",
     "deleteSelected": "Delete ({{count}})",
@@ -1080,6 +1089,7 @@
     "modelSyncDesktopOnly": "Model sync is available in the WaveSpeed Desktop app.",
     "aiTaskNodeLabel": "WaveSpeed API",
     "save": "Save",
+    "saveAsTemplate": "Save as Template",
     "saved": "Saved",
     "saving": "Saving...",
     "saveFailed": "Save failed",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 9e43267b..d9315d3f 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -401,10 +401,19 @@
     "mergeDesc": "添加导入的模板，跳过重复项（相同名称和模型）",
     "replaceAll": "全部替换",
     "replaceAllDesc": "删除现有模板并替换为导入的模板",
+    "autoRename": "自动重命名",
+    "autoRenameDesc": "全部导入，冲突的名称自动添加 (2)、(3) 后缀",
+    "autoRenamed": "「{{original}}」已存在，已保存为「{{renamed}}」",
+    "skipConflicts": "跳过冲突",
+    "skipConflictsDesc": "仅导入没有名称冲突的模板",
+    "replaceConflictsDesc": "覆盖同名的现有模板",
+    "importConflictAction": "发现名称冲突，请选择处理方式：",
+    "conflictCount": "{{count}} 个模板存在名称冲突。",
     "templatesImported": "模板已导入",
     "importedCount": "已导入 {{imported}} 个模板{{skipped}}",
     "skippedCount": "，{{count}} 个跳过（重复）",
     "importFailed": "导入失败",
+    "noMatchingTypeTemplates": "文件中没有找到{{type}}模板",
     "invalidFile": "无效文件",
     "invalidFileDesc": "所选文件不是有效的模板导出文件",
     "deleteSelected": "删除 ({{count}})",
@@ -1078,6 +1087,7 @@
     "newWorkflow": "新建工作流",
     "untitled": "未命名工作流",
     "save": "保存",
+    "saveAsTemplate": "保存为模板",
     "saved": "已保存",
     "saving": "保存中...",
     "saveFailed": "保存失败",
diff --git a/src/pages/PlaygroundPage.tsx b/src/pages/PlaygroundPage.tsx
index 432c361f..722fa92e 100644
--- a/src/pages/PlaygroundPage.tsx
+++ b/src/pages/PlaygroundPage.tsx
@@ -459,23 +459,42 @@ export function PlaygroundPage() {
   const handleSaveTemplate = async (data: TemplateFormData) => {
     if (!activeTab?.selectedModel) return;
 
-    await createTemplate({
-      name: data.name,
-      description: data.description || null,
-      tags: data.tags,
-      thumbnail: data.thumbnail || null,
-      type: "custom",
-      templateType: "playground",
-      playgroundData: {
-        modelId: activeTab.selectedModel.model_id,
-        modelName: activeTab.selectedModel.name,
-        values: activeTab.formValues,
-      },
-    });
-    toast({
-      title: t("playground.templateSaved"),
-      description: t("playground.savedAs", { name: data.name }),
-    });
+    try {
+      const template = await createTemplate({
+        name: data.name,
+        description: data.description || null,
+        tags: data.tags,
+        thumbnail: data.thumbnail || null,
+        type: "custom",
+        templateType: "playground",
+        playgroundData: {
+          modelId: activeTab.selectedModel.model_id,
+          modelName: activeTab.selectedModel.name,
+          values: activeTab.formValues,
+        },
+      });
+      const savedName = template.name;
+      if (savedName !== data.name) {
+        toast({
+          title: t("playground.templateSaved"),
+          description: t("templates.autoRenamed", {
+            original: data.name,
+            renamed: savedName,
+          }),
+        });
+      } else {
+        toast({
+          title: t("playground.templateSaved"),
+          description: t("playground.savedAs", { name: savedName }),
+        });
+      }
+    } catch (err) {
+      toast({
+        title: t("common.error"),
+        description: err instanceof Error ? err.message : t("common.error"),
+        variant: "destructive",
+      });
+    }
   };
 
   // Create tab when navigating to playground with a specific model (only on initial load)
diff --git a/src/pages/TemplatesPage.tsx b/src/pages/TemplatesPage.tsx
index bfb2dd9d..b7d2cafd 100644
--- a/src/pages/TemplatesPage.tsx
+++ b/src/pages/TemplatesPage.tsx
@@ -1,12 +1,9 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { useTemplateStore } from "@/stores/templateStore";
-import { TemplateBrowser } from "@/components/templates/TemplateBrowser";
-import {
-  TemplateDialog,
-  type TemplateFormData,
-} from "@/components/templates/TemplateDialog";
+import { useModelsStore } from "@/stores/modelsStore";
+import { usePlaygroundStore } from "@/stores/playgroundStore";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -16,90 +13,320 @@ import {
   DialogDescription,
   DialogFooter,
 } from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
 import { toast } from "@/hooks/useToast";
-import { Upload, GitBranch, PlayCircle, FolderOpen } from "lucide-react";
+import {
+  Upload,
+  Download,
+  Plus,
+  Search,
+  SquarePen,
+  Trash2,
+  PlayCircle,
+  FolderOpen,
+  ChevronRight,
+  ChevronDown,
+} from "lucide-react";
 import type { Template } from "@/types/template";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
 
 export function TemplatesPage() {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const {
+    loadTemplates,
     updateTemplate,
     deleteTemplate,
-    exportTemplates,
+    deleteTemplates,
+    exportSingleTemplate,
+    exportBatchTemplates,
+    exportMergedTemplates,
     importTemplates,
     useTemplate,
+    queryTemplateNames,
   } = useTemplateStore();
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  // Edit dialog state
-  const [editingTemplate, setEditingTemplate] = useState<Template | null>(null);
-
-  // Delete confirmation state
+  const [templateType, setTemplateType] = useState<"playground" | "workflow">(
+    "playground",
+  );
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingName, setEditingName] = useState("");
+  const [focusedId, setFocusedId] = useState<string | null>(null);
   const [deletingTemplate, setDeletingTemplate] = useState<Template | null>(
     null,
   );
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(
+    new Set(),
+  );
+  const [localTemplates, setLocalTemplates] = useState<Template[]>([]);
+  const [loadCounter, setLoadCounter] = useState(0);
 
-  // Import dialog state
-  const [importFile, setImportFile] = useState<File | null>(null);
-  const [importMode, setImportMode] = useState<"merge" | "replace">("merge");
+  // Clear search when switching tabs
+  const handleSetTemplateType = (type: "playground" | "workflow") => {
+    setSearchQuery("");
+    setSelectedIds(new Set());
+    setTemplateType(type);
+  };
 
-  // Template type filter (for top tabs)
-  const [templateType, setTemplateType] = useState<"playground" | "workflow">(
-    "playground",
+  // Reload helper �?bumps counter to trigger re-fetch
+  const reloadTemplates = () => setLoadCounter((c) => c + 1);
+
+  // Load templates for the current type directly into local state
+  useEffect(() => {
+    let cancelled = false;
+    loadTemplates({ templateType }).then(() => {
+      if (!cancelled) {
+        const storeTemplates = useTemplateStore.getState().templates;
+        // Filter to current type in case another load overwrote the store
+        setLocalTemplates(
+          storeTemplates.filter((t) => t.templateType === templateType),
+        );
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [templateType, loadCounter]);
+
+  // Local search filtering (supports modelId, modelName, name, description, tags, i18n)
+  const filteredTemplates = useMemo(() => {
+    if (!searchQuery.trim()) return localTemplates;
+    const q = searchQuery.trim().toLowerCase();
+    return localTemplates.filter((tpl) => {
+      const i18nName = tpl.i18nKey
+        ? t(`presetTemplates.${tpl.i18nKey}.name`, { defaultValue: "" })
+        : "";
+      const i18nDesc = tpl.i18nKey
+        ? t(`presetTemplates.${tpl.i18nKey}.description`, { defaultValue: "" })
+        : "";
+      return (
+        tpl.name.toLowerCase().includes(q) ||
+        (tpl.description ?? "").toLowerCase().includes(q) ||
+        (tpl.tags ?? []).some((tag) => tag.toLowerCase().includes(q)) ||
+        (tpl.playgroundData?.modelId ?? "").toLowerCase().includes(q) ||
+        (tpl.playgroundData?.modelName ?? "").toLowerCase().includes(q) ||
+        (tpl.workflowData?.category ?? "").toLowerCase().includes(q) ||
+        (tpl._searchText ?? "").toLowerCase().includes(q) ||
+        i18nName.toLowerCase().includes(q) ||
+        i18nDesc.toLowerCase().includes(q)
+      );
+    });
+  }, [localTemplates, searchQuery, t]);
+
+  // Group playground templates by modelId; workflow templates are flat (no grouping)
+  const grouped = useMemo(() => {
+    if (templateType === "workflow") {
+      // No grouping for workflow �?single flat list
+      if (filteredTemplates.length === 0) return [];
+      return [["workflow", filteredTemplates] as [string, Template[]]];
+    }
+    const groups: Record<string, Template[]> = {};
+    for (const tpl of filteredTemplates) {
+      const key = tpl.playgroundData?.modelId || "other";
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(tpl);
+    }
+    return Object.entries(groups).sort(([a], [b]) => a.localeCompare(b));
+  }, [filteredTemplates, templateType]);
+
+  const allIds = useMemo(
+    () => filteredTemplates.map((t) => t.id),
+    [filteredTemplates],
   );
+  const allSelected =
+    filteredTemplates.length > 0 &&
+    selectedIds.size === filteredTemplates.length;
+
+  const toggleSelectAll = () => {
+    if (allSelected) {
+      setSelectedIds(new Set());
+    } else {
+      setSelectedIds(new Set(allIds));
+    }
+  };
 
-  const handleUseTemplate = async (
-    template: Template,
-    mode?: "new" | "replace",
-  ) => {
+  const toggleSelect = (id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const toggleGroup = (groupKey: string) => {
+    setCollapsedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(groupKey)) next.delete(groupKey);
+      else next.add(groupKey);
+      return next;
+    });
+  };
+
+  const handleUseTemplate = async (template: Template) => {
+    await useTemplate(template.id);
     if (template.playgroundData) {
-      // Increment use count
-      await useTemplate(template.id);
-      // Navigate to playground with the template's model
-      const modeParam = mode ? `&mode=${mode}` : "";
-      navigate(
-        `/playground/${encodeURIComponent(template.playgroundData.modelId)}?template=${template.id}${modeParam}`,
-      );
+      const { modelId, values } = template.playgroundData;
+      const model = useModelsStore
+        .getState()
+        .models.find((m) => m.model_id === modelId);
+      if (model) {
+        usePlaygroundStore.getState().createTab(model, values);
+      }
+      navigate(`/playground/${encodeURIComponent(modelId)}`);
     } else if (template.workflowData) {
-      // Navigate to workflow editor with template
-      const modeParam = mode ? `&mode=${mode}` : "";
-      navigate(`/workflow?template=${template.id}${modeParam}`);
+      navigate(`/workflow?template=${template.id}`);
     }
   };
 
-  const handleEditTemplate = (template: Template) => {
-    setEditingTemplate(template);
+  const startRename = (tpl: Template) => {
+    setEditingId(tpl.id);
+    setEditingName(tpl.name);
   };
 
-  const handleSaveEdit = async (data: TemplateFormData) => {
-    if (!editingTemplate) return;
-
+  const commitRename = async () => {
+    if (!editingId) return;
+    const trimmed = editingName.trim();
+    const tpl = localTemplates.find((t) => t.id === editingId);
+    if (!trimmed || !tpl || trimmed === tpl.name) {
+      setEditingId(null);
+      return;
+    }
     try {
-      await updateTemplate(editingTemplate.id, {
-        name: data.name,
-        description: data.description,
-        tags: data.tags,
-        thumbnail: data.thumbnail ?? null,
-      });
+      const finalUpdates = await updateTemplate(editingId, { name: trimmed });
+      const finalName = finalUpdates.name ?? trimmed;
+      if (finalName !== trimmed) {
+        toast({
+          title: t("templates.templateUpdated"),
+          description: t("templates.autoRenamed", {
+            original: trimmed,
+            renamed: finalName,
+          }),
+        });
+      } else {
+        toast({
+          title: t("templates.templateUpdated"),
+          description: t("templates.updatedSuccessfully", { name: finalName }),
+        });
+      }
+      reloadTemplates();
+    } catch (error) {
       toast({
-        title: t("templates.templateUpdated"),
-        description: t("templates.updatedSuccessfully", { name: data.name }),
+        title: t("common.error"),
+        description: (error as Error).message,
+        variant: "destructive",
       });
-      setEditingTemplate(null);
+    }
+    setEditingId(null);
+  };
+
+  const cancelRename = () => {
+    setEditingId(null);
+  };
+
+  // JSON editor state
+  const [jsonEditTemplate, setJsonEditTemplate] = useState<Template | null>(
+    null,
+  );
+  const [jsonEditValue, setJsonEditValue] = useState("");
+  const [jsonEditError, setJsonEditError] = useState<string | null>(null);
+  const [jsonSaving, setJsonSaving] = useState(false);
+
+  const openJsonEditor = (tpl: Template) => {
+    // Show the editable data portion (playgroundData or workflowData)
+    const editableData = tpl.playgroundData
+      ? { name: tpl.name, playgroundData: tpl.playgroundData }
+      : { name: tpl.name, workflowData: tpl.workflowData };
+    setJsonEditValue(JSON.stringify(editableData, null, 2));
+    setJsonEditError(null);
+    setJsonEditTemplate(tpl);
+  };
+
+  const handleJsonSave = async () => {
+    if (!jsonEditTemplate) return;
+    let parsed: Record<string, unknown>;
+    try {
+      parsed = JSON.parse(jsonEditValue);
+    } catch (e) {
+      setJsonEditError((e as Error).message);
+      return;
+    }
+    setJsonSaving(true);
+    try {
+      const updates: Partial<Template> = {};
+      if (parsed.name && typeof parsed.name === "string") {
+        updates.name = parsed.name;
+      }
+      if (parsed.playgroundData) {
+        updates.playgroundData =
+          parsed.playgroundData as Template["playgroundData"];
+      }
+      if (parsed.workflowData) {
+        updates.workflowData = parsed.workflowData as Template["workflowData"];
+      }
+      const requestedName = updates.name;
+      const finalUpdates = await updateTemplate(jsonEditTemplate.id, updates);
+      const finalName =
+        finalUpdates.name ?? requestedName ?? jsonEditTemplate.name;
+      if (requestedName && finalName !== requestedName) {
+        toast({
+          title: t("templates.templateUpdated"),
+          description: t("templates.autoRenamed", {
+            original: requestedName,
+            renamed: finalName,
+          }),
+        });
+      } else {
+        toast({
+          title: t("templates.templateUpdated"),
+          description: t("templates.updatedSuccessfully", { name: finalName }),
+        });
+      }
+      setJsonEditTemplate(null);
+      reloadTemplates();
     } catch (error) {
       toast({
         title: t("common.error"),
         description: (error as Error).message,
         variant: "destructive",
       });
+    } finally {
+      setJsonSaving(false);
     }
   };
 
+  // Keyboard shortcut: F2 (Windows/Linux) or Enter (Mac) to rename focused template
+  const isMac =
+    typeof navigator !== "undefined" && /Mac/i.test(navigator.userAgent);
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (editingId) return;
+      if (jsonEditTemplate) return;
+      const tag = (e.target as HTMLElement)?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA") return;
+
+      const triggerRename = isMac ? e.key === "Enter" : e.key === "F2";
+      if (triggerRename && focusedId) {
+        const tpl = localTemplates.find((t) => t.id === focusedId);
+        if (tpl?.type === "custom") {
+          e.preventDefault();
+          startRename(tpl);
+        }
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [focusedId, editingId, jsonEditTemplate, localTemplates, isMac]);
+
   const handleDeleteTemplate = async () => {
     if (!deletingTemplate) return;
-
     try {
       await deleteTemplate(deletingTemplate.id);
       toast({
@@ -109,6 +336,33 @@ export function TemplatesPage() {
         }),
       });
       setDeletingTemplate(null);
+      setSelectedIds((prev) => {
+        const next = new Set(prev);
+        next.delete(deletingTemplate.id);
+        return next;
+      });
+      reloadTemplates();
+    } catch (error) {
+      toast({
+        title: t("common.error"),
+        description: (error as Error).message,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleDeleteSelected = async () => {
+    if (selectedIds.size === 0) return;
+    try {
+      await deleteTemplates(Array.from(selectedIds));
+      toast({
+        title: t("templates.templatesDeleted"),
+        description: t("templates.deletedCount", {
+          count: selectedIds.size,
+        }),
+      });
+      setSelectedIds(new Set());
+      reloadTemplates();
     } catch (error) {
       toast({
         title: t("common.error"),
@@ -120,7 +374,8 @@ export function TemplatesPage() {
 
   const handleExportTemplate = async (template: Template) => {
     try {
-      await exportTemplates([template.id]);
+      const result = await exportSingleTemplate(template.id, template.name);
+      if (result.canceled) return;
       toast({
         title: t("templates.templateExported"),
         description: t("templates.exportedSuccessfully", {
@@ -136,16 +391,164 @@ export function TemplatesPage() {
     }
   };
 
-  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleExportAll = async () => {
+    try {
+      // No selection �?export all to one merged file
+      if (selectedIds.size === 0) {
+        const allIds = localTemplates.map((t) => t.id);
+        if (allIds.length === 0) return;
+        const result = await exportMergedTemplates(
+          allIds,
+          t("templates.allTemplates", "All Templates"),
+        );
+        if (result.canceled) return;
+        toast({
+          title: t("templates.templatesExported"),
+          description: t("templates.exportedCount", { count: allIds.length }),
+        });
+        return;
+      }
+
+      const ids = Array.from(selectedIds);
+
+      // Single selected �?save dialog with template name
+      if (ids.length === 1) {
+        const tpl = localTemplates.find((t) => t.id === ids[0]);
+        if (tpl) {
+          const result = await exportSingleTemplate(tpl.id, tpl.name);
+          if (result.canceled) return;
+          toast({
+            title: t("templates.templateExported"),
+            description: t("templates.exportedSuccessfully", {
+              name: tpl.name,
+            }),
+          });
+        }
+        return;
+      }
+
+      // Multiple selected �?folder picker, one file per template
+      const result = await exportBatchTemplates(ids);
+      if (result.canceled) return;
+      toast({
+        title: t("templates.templatesExported"),
+        description: t("templates.exportedCount", {
+          count: result.count || ids.length,
+        }),
+      });
+    } catch (error) {
+      toast({
+        title: t("common.error"),
+        description: (error as Error).message,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const [importFile, setImportFile] = useState<File | null>(null);
+  const [importPreview, setImportPreview] = useState<{
+    count: number;
+    exportedAt: string;
+    conflicts: number;
+  } | null>(null);
+  const [importMode, setImportMode] = useState<"merge" | "replace" | "rename">(
+    "merge",
+  );
+
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
-    setImportFile(file);
     e.target.value = "";
+    try {
+      const text = await file.text();
+      const data = JSON.parse(text);
+      const allTemplates = data?.templates ?? [];
+
+      // Filter templates to match the current tab's templateType
+      const templates = allTemplates.filter(
+        (t: Template) => t.templateType === templateType,
+      );
+      const skippedOtherType = allTemplates.length - templates.length;
+      const count = templates.length;
+      const exportedAt = data?.exportedAt ?? "";
+
+      if (count === 0) {
+        toast({
+          title: t("templates.importFailed"),
+          description:
+            skippedOtherType > 0
+              ? t("templates.noMatchingTypeTemplates", {
+                  type:
+                    templateType === "workflow"
+                      ? t("templates.workflow")
+                      : t("templates.playground"),
+                })
+              : t("common.error"),
+          variant: "destructive",
+        });
+        return;
+      }
+
+      // Build a filtered file with only matching templates
+      const filteredData = { ...data, templates };
+      const filteredFile = new File([JSON.stringify(filteredData)], file.name, {
+        type: file.type,
+      });
+
+      // Check for name conflicts
+      const importTypes = [
+        ...new Set(templates.map((t: Template) => t.templateType)),
+      ] as string[];
+      const existingNamesByType: Record<string, Set<string>> = {};
+      for (const tType of importTypes) {
+        const names = await queryTemplateNames(tType);
+        existingNamesByType[tType] = new Set(names);
+      }
+      let conflicts = 0;
+      for (const tpl of templates) {
+        const typeNames = existingNamesByType[tpl.templateType];
+        if (typeNames?.has(tpl.name)) conflicts++;
+      }
+
+      if (count === 1 && conflicts === 0) {
+        // Single template, no conflict �?import directly
+        const result = await importTemplates(filteredFile, "merge");
+        toast({
+          title: t("templates.templatesImported"),
+          description: t("templates.importedSuccessfully", {
+            imported: result.imported,
+            skipped: result.skipped,
+          }),
+        });
+        reloadTemplates();
+      } else if (conflicts === 0) {
+        // Multiple templates, no conflicts �?import directly
+        const result = await importTemplates(filteredFile, "merge");
+        toast({
+          title: t("templates.templatesImported"),
+          description: t("templates.importedSuccessfully", {
+            imported: result.imported,
+            skipped: result.skipped,
+          }),
+        });
+        reloadTemplates();
+      } else {
+        // Has conflicts �?show dialog
+        setImportFile(filteredFile);
+        setImportPreview({ count, exportedAt, conflicts });
+        setImportMode("rename");
+      }
+    } catch {
+      toast({
+        title: t("templates.importFailed"),
+        description: t("common.error"),
+        variant: "destructive",
+      });
+    }
   };
 
   const handleImportConfirm = async () => {
     if (!importFile) return;
-
     try {
       const result = await importTemplates(importFile, importMode);
       toast({
@@ -155,174 +558,489 @@ export function TemplatesPage() {
           skipped: result.skipped,
         }),
       });
-      setImportFile(null);
+      reloadTemplates();
     } catch (err) {
       toast({
         title: t("templates.importFailed"),
         description: err instanceof Error ? err.message : t("common.error"),
         variant: "destructive",
       });
+    } finally {
+      setImportFile(null);
+      setImportPreview(null);
     }
   };
 
+  const formatDate = (dateStr: string) => {
+    const d = new Date(dateStr);
+    return `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, "0")}/${String(d.getDate()).padStart(2, "0")}`;
+  };
+
   return (
     <div className="h-full flex flex-col">
-      {/* Header + Top Bar */}
+      {/* Header: Title + Playground/Workflow tabs */}
       <div className="px-4 md:px-6 py-4 pt-14 md:pt-4 animate-in fade-in slide-in-from-bottom-2 duration-300 fill-mode-both">
-        <h1 className="text-xl md:text-2xl font-bold tracking-tight mb-5 flex items-center gap-2">
-          <FolderOpen className="h-5 w-5 text-primary" />
-          {t("templates.title")}
-        </h1>
-
-        {/* Top Bar: Template Type + Actions in one row */}
         <div className="flex items-center gap-4">
-          {/* Template Type Buttons */}
-          <div className="flex items-center gap-1">
+          <h1 className="text-xl md:text-2xl font-bold tracking-tight flex items-center gap-2">
+            <FolderOpen className="h-5 w-5 text-primary" />
+            {t("templates.title")}
+          </h1>
+          <div className="flex items-center rounded-full p-1 border border-border/60">
             <button
-              onClick={() => setTemplateType("playground")}
-              className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
+              onClick={() => handleSetTemplateType("playground")}
+              className={`px-4 py-1.5 text-sm font-medium rounded-full transition-all ${
                 templateType === "playground"
-                  ? "bg-primary/10 text-primary"
-                  : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                  ? "bg-primary/15 text-primary"
+                  : "text-muted-foreground hover:text-foreground"
               }`}
             >
-              <PlayCircle className="h-4 w-4" />
               {t("templates.playground")}
             </button>
             <button
-              onClick={() => setTemplateType("workflow")}
-              className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
+              onClick={() => handleSetTemplateType("workflow")}
+              className={`px-4 py-1.5 text-sm font-medium rounded-full transition-all ${
                 templateType === "workflow"
-                  ? "bg-primary/10 text-primary"
-                  : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                  ? "bg-primary/15 text-primary"
+                  : "text-muted-foreground hover:text-foreground"
               }`}
             >
-              <GitBranch className="h-4 w-4" />
               {t("templates.workflow")}
             </button>
           </div>
+        </div>
+      </div>
 
-          {/* Spacer */}
-          <div className="flex-1" />
+      {/* Toolbar */}
+      <div
+        className="mx-4 md:mx-6 mt-2 mb-3 flex items-center gap-3 rounded-xl border border-border/50 bg-muted/20 px-4 py-3 animate-in fade-in slide-in-from-bottom-2 duration-300 fill-mode-both"
+        style={{ animationDelay: "60ms" }}
+      >
+        <label className="flex items-center gap-2 pl-2 text-sm cursor-pointer select-none whitespace-nowrap flex-shrink-0">
+          <input
+            type="checkbox"
+            checked={allSelected}
+            onChange={toggleSelectAll}
+            className="rounded border-border"
+          />
+          {t("common.selectAll")}
+        </label>
 
-          {/* Hidden file input for import */}
+        <div className="relative flex-1 min-w-0">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
           <input
-            ref={fileInputRef}
-            type="file"
-            accept=".json"
-            onChange={handleFileSelect}
-            className="hidden"
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder={t("templates.searchPlaceholder")}
+            className="w-full h-9 pl-9 pr-3 text-sm rounded-lg border border-border/60 bg-background focus:outline-none focus:ring-1 focus:ring-primary/50 placeholder:text-muted-foreground/50"
           />
         </div>
+
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".json"
+          onChange={handleFileSelect}
+          className="hidden"
+        />
+
+        {selectedIds.size > 0 && (
+          <Button
+            variant="destructive"
+            size="sm"
+            className="flex-shrink-0 h-9 px-4 animate-in fade-in slide-in-from-left-2 duration-200"
+            onClick={handleDeleteSelected}
+          >
+            <Trash2 className="h-4 w-4 mr-1.5" />
+            {t("templates.deleteSelected", { count: selectedIds.size })}
+          </Button>
+        )}
+
+        <Button
+          variant="outline"
+          size="sm"
+          className="flex-shrink-0 h-9 px-4"
+          onClick={() => fileInputRef.current?.click()}
+        >
+          <Upload className="h-4 w-4 mr-1.5" />
+          {t("templates.import")}
+        </Button>
+
+        <Button
+          variant="outline"
+          size="sm"
+          className={`flex-shrink-0 h-9 px-4 transition-all duration-200 ${
+            selectedIds.size > 0
+              ? "border-primary/60 text-primary bg-primary/5"
+              : ""
+          }`}
+          onClick={handleExportAll}
+        >
+          <Download className="h-4 w-4 mr-1.5" />
+          {selectedIds.size > 0
+            ? `${t("templates.export")} (${selectedIds.size})`
+            : t("templates.exportAll")}
+        </Button>
+
+        <Button
+          size="sm"
+          className="flex-shrink-0 h-9 px-4"
+          onClick={() =>
+            navigate(
+              templateType === "playground" ? "/playground" : "/workflow",
+            )
+          }
+        >
+          <Plus className="h-4 w-4 mr-1.5" />
+          {t("templates.newTemplate")}
+        </Button>
       </div>
 
+      {/* Template List */}
       <div
-        className="flex flex-1 overflow-hidden border-t border-border/50 animate-in fade-in duration-300 fill-mode-both"
-        style={{ animationDelay: "100ms" }}
+        key={templateType}
+        className="flex-1 overflow-y-auto animate-in fade-in slide-in-from-bottom-1 duration-200 fill-mode-both"
       >
-        <TemplateBrowser
-          templateType={templateType}
-          onUseTemplate={handleUseTemplate}
-          onEditTemplate={handleEditTemplate}
-          onDeleteTemplate={setDeletingTemplate}
-          onExportTemplate={handleExportTemplate}
-        />
-      </div>
+        {filteredTemplates.length === 0 && (
+          <div className="flex flex-col items-center justify-center h-64 text-muted-foreground">
+            <FolderOpen className="h-12 w-12 mb-3 opacity-40" />
+            <p className="text-sm">{t("templates.noTemplates")}</p>
+          </div>
+        )}
+
+        {grouped.map(([groupKey, groupTemplates]) => {
+          const isCollapsed = collapsedGroups.has(groupKey);
+          const showGroupHeader = templateType === "playground";
+          return (
+            <div
+              key={groupKey}
+              className={
+                templateType === "playground"
+                  ? "mx-4 md:mx-6 mt-4 rounded-lg border border-border/50 overflow-hidden"
+                  : "mx-4 md:mx-6 mt-4"
+              }
+            >
+              {/* Group Header �?only for playground */}
+              {showGroupHeader && (
+                <button
+                  onClick={() => toggleGroup(groupKey)}
+                  className="w-full flex items-center px-4 py-3 hover:bg-muted/30 transition-colors"
+                >
+                  <div className="flex-1 min-w-0 text-left">
+                    <div className="text-sm font-semibold truncate">
+                      {groupKey}
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      {t("templates.templateCount", {
+                        count: groupTemplates.length,
+                      })}
+                    </div>
+                  </div>
+                  {isCollapsed ? (
+                    <ChevronRight className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+                  ) : (
+                    <ChevronDown className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+                  )}
+                </button>
+              )}
 
-      {/* Edit Dialog */}
-      <TemplateDialog
-        open={!!editingTemplate}
-        onOpenChange={(open) => !open && setEditingTemplate(null)}
-        template={editingTemplate}
-        onSave={handleSaveEdit}
-        mode="edit"
-      />
+              {/* Template Rows */}
+              {(!showGroupHeader || !isCollapsed) &&
+                groupTemplates.map((tpl) => {
+                  const displayName = tpl.i18nKey
+                    ? t(`presetTemplates.${tpl.i18nKey}.name`, {
+                        defaultValue: tpl.name,
+                      })
+                    : tpl.name;
+                  const isCustom = tpl.type === "custom";
+                  const isEditing = editingId === tpl.id;
+                  return (
+                    <div
+                      key={tpl.id}
+                      onClick={() => setFocusedId(tpl.id)}
+                      className={`flex items-center gap-3 mx-3 mb-2 px-3 py-2.5 rounded-md border transition-colors cursor-default ${
+                        focusedId === tpl.id
+                          ? "border-primary/50 bg-primary/5"
+                          : "border-border/30 hover:bg-accent/30"
+                      }`}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={selectedIds.has(tpl.id)}
+                        onChange={() => toggleSelect(tpl.id)}
+                        className="rounded border-border flex-shrink-0"
+                      />
+                      <div className="flex-1 min-w-0">
+                        {isEditing ? (
+                          <input
+                            type="text"
+                            value={editingName}
+                            onChange={(e) => setEditingName(e.target.value)}
+                            onBlur={commitRename}
+                            onKeyDown={(e) => {
+                              if (e.key === "Enter") {
+                                e.preventDefault();
+                                commitRename();
+                              }
+                              if (e.key === "Escape") {
+                                e.preventDefault();
+                                cancelRename();
+                              }
+                            }}
+                            autoFocus
+                            onFocus={(e) => e.target.select()}
+                            className="text-sm font-medium w-full bg-transparent border-b border-primary outline-none py-0.5"
+                          />
+                        ) : (
+                          <span
+                            className={`text-sm font-medium truncate block ${isCustom ? "cursor-text" : ""}`}
+                            onDoubleClick={() => isCustom && startRename(tpl)}
+                          >
+                            {displayName}
+                          </span>
+                        )}
+                        <span className="text-xs text-muted-foreground">
+                          {t("templates.lastUpdated")}:{" "}
+                          {formatDate(tpl.updatedAt)}
+                        </span>
+                      </div>
+                      {/* Always-visible action buttons */}
+                      <div className="flex items-center gap-5 flex-shrink-0">
+                        <Button
+                          size="sm"
+                          className="h-8 px-4 text-xs rounded-lg"
+                          onClick={() => handleUseTemplate(tpl)}
+                        >
+                          <PlayCircle className="h-4 w-4 mr-1.5" />
+                          {t("templates.use")}
+                        </Button>
+                        <div className="h-5 w-px bg-border/60" />
+                        {isCustom && (
+                          <Tooltip delayDuration={0}>
+                            <TooltipTrigger asChild>
+                              <button
+                                onClick={() => openJsonEditor(tpl)}
+                                className="p-2.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                              >
+                                <SquarePen className="h-4 w-4" />
+                              </button>
+                            </TooltipTrigger>
+                            <TooltipContent side="bottom">
+                              {t("common.edit")}
+                            </TooltipContent>
+                          </Tooltip>
+                        )}
+                        <Tooltip delayDuration={0}>
+                          <TooltipTrigger asChild>
+                            <button
+                              onClick={() => handleExportTemplate(tpl)}
+                              className="p-2.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                            >
+                              <Download className="h-4 w-4" />
+                            </button>
+                          </TooltipTrigger>
+                          <TooltipContent side="bottom">
+                            {t("templates.export")}
+                          </TooltipContent>
+                        </Tooltip>
+                        {isCustom && (
+                          <Tooltip delayDuration={0}>
+                            <TooltipTrigger asChild>
+                              <button
+                                onClick={() => setDeletingTemplate(tpl)}
+                                className="p-2.5 rounded-md text-destructive/70 hover:text-destructive hover:bg-destructive/10 transition-colors"
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </button>
+                            </TooltipTrigger>
+                            <TooltipContent side="bottom">
+                              {t("common.delete")}
+                            </TooltipContent>
+                          </Tooltip>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+            </div>
+          );
+        })}
+      </div>
 
-      {/* Delete Confirmation Dialog */}
+      {/* JSON Editor Dialog */}
       <Dialog
-        open={!!deletingTemplate}
-        onOpenChange={(open) => !open && setDeletingTemplate(null)}
+        open={!!jsonEditTemplate}
+        onOpenChange={(open) => {
+          if (!open) setJsonEditTemplate(null);
+        }}
       >
-        <DialogContent className="max-w-sm">
+        <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
           <DialogHeader>
-            <DialogTitle>{t("templates.deleteTemplate")}</DialogTitle>
-            <DialogDescription>
-              {t("templates.deleteConfirm", { name: deletingTemplate?.name })}
-            </DialogDescription>
+            <DialogTitle>{t("templates.editTemplate")}</DialogTitle>
+            <DialogDescription>{jsonEditTemplate?.name}</DialogDescription>
           </DialogHeader>
+          <div className="flex-1 min-h-0 flex flex-col gap-2">
+            <textarea
+              value={jsonEditValue}
+              onChange={(e) => {
+                setJsonEditValue(e.target.value);
+                setJsonEditError(null);
+              }}
+              spellCheck={false}
+              className="flex-1 min-h-[300px] w-full rounded-md border border-border bg-muted/30 p-3 text-sm font-mono leading-relaxed resize-none focus:outline-none focus:ring-1 focus:ring-primary/50"
+            />
+            {jsonEditError && (
+              <p className="text-xs text-destructive px-1">
+                JSON Error: {jsonEditError}
+              </p>
+            )}
+          </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setDeletingTemplate(null)}>
+            <Button
+              variant="outline"
+              onClick={() => setJsonEditTemplate(null)}
+              disabled={jsonSaving}
+            >
               {t("common.cancel")}
             </Button>
-            <Button variant="destructive" onClick={handleDeleteTemplate}>
-              {t("common.delete")}
+            <Button onClick={handleJsonSave} disabled={jsonSaving}>
+              {jsonSaving ? t("common.saving") : t("common.save")}
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      {/* Import Dialog */}
+      {/* Import Conflict Dialog */}
       <Dialog
-        open={!!importFile}
-        onOpenChange={(open) => !open && setImportFile(null)}
+        open={!!importPreview}
+        onOpenChange={(open) => {
+          if (!open) {
+            setImportFile(null);
+            setImportPreview(null);
+          }
+        }}
       >
-        <DialogContent className="max-w-md">
+        <DialogContent className="max-w-sm">
           <DialogHeader>
             <DialogTitle>{t("templates.importTemplates")}</DialogTitle>
-            <DialogDescription>{t("templates.importDesc")}</DialogDescription>
+            <DialogDescription>
+              {t("templates.foundTemplates", {
+                count: importPreview?.count ?? 0,
+              })}
+              {importPreview?.conflicts ? (
+                <>
+                  <br />
+                  {t("templates.conflictCount", {
+                    count: importPreview.conflicts,
+                  })}
+                </>
+              ) : null}
+              {importPreview?.exportedAt && (
+                <>
+                  <br />
+                  {t("templates.exportedOn", {
+                    date: new Date(importPreview.exportedAt).toLocaleString(),
+                  })}
+                </>
+              )}
+            </DialogDescription>
           </DialogHeader>
-          <div className="space-y-4">
-            <div className="space-y-3">
-              <Label>{t("templates.importMode")}</Label>
-              <div className="space-y-2">
-                <label className="flex items-start gap-3 p-3 border rounded-lg cursor-pointer hover:bg-muted/50">
-                  <input
-                    type="radio"
-                    name="importMode"
-                    value="merge"
-                    checked={importMode === "merge"}
-                    onChange={() => setImportMode("merge")}
-                    className="mt-0.5"
-                  />
-                  <div>
-                    <div className="font-medium">{t("templates.merge")}</div>
-                    <div className="text-sm text-muted-foreground">
-                      {t("templates.mergeDesc")}
-                    </div>
-                  </div>
-                </label>
-                <label className="flex items-start gap-3 p-3 border rounded-lg cursor-pointer hover:bg-muted/50">
-                  <input
-                    type="radio"
-                    name="importMode"
-                    value="replace"
-                    checked={importMode === "replace"}
-                    onChange={() => setImportMode("replace")}
-                    className="mt-0.5"
-                  />
-                  <div>
-                    <div className="font-medium">
-                      {t("templates.replaceAll")}
-                    </div>
-                    <div className="text-sm text-muted-foreground">
-                      {t("templates.replaceAllDesc")}
-                    </div>
-                  </div>
-                </label>
+          <div className="space-y-3 py-2">
+            <p className="text-sm font-medium">
+              {t("templates.importConflictAction")}
+            </p>
+            <label className="flex items-start gap-3 p-3 border border-border rounded-lg cursor-pointer hover:bg-accent/30 transition-colors">
+              <input
+                type="radio"
+                name="importMode"
+                checked={importMode === "rename"}
+                onChange={() => setImportMode("rename")}
+                className="mt-0.5"
+              />
+              <div>
+                <p className="text-sm font-medium">
+                  {t("templates.autoRename")}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {t("templates.autoRenameDesc")}
+                </p>
               </div>
-            </div>
+            </label>
+            <label className="flex items-start gap-3 p-3 border border-border rounded-lg cursor-pointer hover:bg-accent/30 transition-colors">
+              <input
+                type="radio"
+                name="importMode"
+                checked={importMode === "replace"}
+                onChange={() => setImportMode("replace")}
+                className="mt-0.5"
+              />
+              <div>
+                <p className="text-sm font-medium">
+                  {t("templates.replaceAll")}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {t("templates.replaceConflictsDesc")}
+                </p>
+              </div>
+            </label>
+            <label className="flex items-start gap-3 p-3 border border-border rounded-lg cursor-pointer hover:bg-accent/30 transition-colors">
+              <input
+                type="radio"
+                name="importMode"
+                checked={importMode === "merge"}
+                onChange={() => setImportMode("merge")}
+                className="mt-0.5"
+              />
+              <div>
+                <p className="text-sm font-medium">
+                  {t("templates.skipConflicts")}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {t("templates.skipConflictsDesc")}
+                </p>
+              </div>
+            </label>
           </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setImportFile(null)}>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setImportFile(null);
+                setImportPreview(null);
+              }}
+            >
               {t("common.cancel")}
             </Button>
             <Button onClick={handleImportConfirm}>
-              <Upload className="mr-2 h-4 w-4" />
+              <Upload className="h-4 w-4 mr-1" />
               {t("templates.import")}
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog
+        open={!!deletingTemplate}
+        onOpenChange={(open) => !open && setDeletingTemplate(null)}
+      >
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>{t("templates.deleteTemplate")}</DialogTitle>
+            <DialogDescription>
+              {t("templates.deleteConfirm", { name: deletingTemplate?.name })}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeletingTemplate(null)}>
+              {t("common.cancel")}
+            </Button>
+            <Button variant="destructive" onClick={handleDeleteTemplate}>
+              {t("common.delete")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
diff --git a/src/stores/templateStore.ts b/src/stores/templateStore.ts
index ed5538df..628fb3b6 100644
--- a/src/stores/templateStore.ts
+++ b/src/stores/templateStore.ts
@@ -66,7 +66,11 @@ function applyFilter(
       (t) =>
         t.name.toLowerCase().includes(q) ||
         (t.description ?? "").toLowerCase().includes(q) ||
-        (t.tags ?? []).some((tag) => tag.toLowerCase().includes(q)),
+        (t.tags ?? []).some((tag) => tag.toLowerCase().includes(q)) ||
+        (t.playgroundData?.modelId ?? "").toLowerCase().includes(q) ||
+        (t.playgroundData?.modelName ?? "").toLowerCase().includes(q) ||
+        (t.workflowData?.category ?? "").toLowerCase().includes(q) ||
+        (t._searchText ?? "").toLowerCase().includes(q),
     );
   }
   if (filter.sortBy === "useCount")
@@ -219,6 +223,15 @@ async function browserTemplateInvoke<T = unknown>(
       }
       return undefined as T;
     }
+    case "template:queryNames": {
+      const { templateType: tType } = (args ?? {}) as { templateType?: string };
+      let names = templates.map((t) => t.name);
+      if (tType)
+        names = templates
+          .filter((t) => t.templateType === tType)
+          .map((t) => t.name);
+      return [...new Set(names)] as T;
+    }
     case "template:export": {
       const { ids } = (args ?? {}) as { ids?: string[] };
       const list = ids
@@ -234,32 +247,82 @@ async function browserTemplateInvoke<T = unknown>(
     case "template:import": {
       const { data, mode } = (args ?? {}) as {
         data: TemplateExport;
-        mode: "merge" | "replace";
+        mode: "merge" | "replace" | "rename";
       };
       if (!data?.templates || !Array.isArray(data.templates))
         throw new Error("Invalid import data");
-      let next = mode === "replace" ? [] : [...templates];
-      const existingKeys = new Set(
-        next.map((t) => `${t.templateType}:${t.name}`),
-      );
+
+      let next: Template[];
+      let replaced = 0;
+
+      if (mode === "replace") {
+        // Replace: delete existing custom templates that have the same name+type as imports
+        const importedTypes = new Set(
+          data.templates.map((t) => t.templateType),
+        );
+        const importNamesByType: Record<string, Set<string>> = {};
+        for (const t of data.templates) {
+          if (!importNamesByType[t.templateType])
+            importNamesByType[t.templateType] = new Set();
+          importNamesByType[t.templateType].add(t.name);
+        }
+        next = templates.filter((t) => {
+          if (t.type !== "custom" || !importedTypes.has(t.templateType))
+            return true;
+          const names = importNamesByType[t.templateType];
+          if (names?.has(t.name)) {
+            replaced++;
+            return false;
+          }
+          return true;
+        });
+      } else {
+        next = [...templates];
+      }
+
+      // Build live name sets per type
+      const namesByType: Record<string, Set<string>> = {};
+      for (const t of next) {
+        if (!namesByType[t.templateType])
+          namesByType[t.templateType] = new Set();
+        namesByType[t.templateType].add(t.name);
+      }
+
       let imported = 0;
+      let skipped = 0;
       for (const t of data.templates) {
-        const key = `${t.templateType}:${t.name}`;
-        if (existingKeys.has(key)) continue;
+        const typeNames = namesByType[t.templateType] ?? new Set();
+        let finalName = t.name;
+
+        if (typeNames.has(t.name)) {
+          if (mode === "merge") {
+            skipped++;
+            continue;
+          }
+          if (mode === "rename") {
+            let counter = 2;
+            while (typeNames.has(`${t.name} (${counter})`)) counter++;
+            finalName = `${t.name} (${counter})`;
+          }
+        }
+
         const id = `custom-${Date.now()}-${imported}-${Math.random().toString(36).slice(2, 9)}`;
         next.push({
           ...t,
           id,
+          name: finalName,
           type: "custom",
           createdAt: now,
           updatedAt: now,
           useCount: 0,
         });
-        existingKeys.add(key);
+        typeNames.add(finalName);
+        if (!namesByType[t.templateType])
+          namesByType[t.templateType] = typeNames;
         imported++;
       }
       writeTemplatesToStorage(next);
-      return { imported, skipped: data.templates.length - imported } as T;
+      return { imported, skipped, replaced } as T;
     }
     default:
       throw new Error(`Unknown template channel: ${channel}`);
@@ -288,7 +351,10 @@ interface TemplateState {
   // CRUD operations
   loadTemplates: (filter?: TemplateFilter) => Promise<void>;
   createTemplate: (input: CreateTemplateInput) => Promise<Template>;
-  updateTemplate: (id: string, updates: Partial<Template>) => Promise<void>;
+  updateTemplate: (
+    id: string,
+    updates: Partial<Template>,
+  ) => Promise<Partial<Template>>;
   deleteTemplate: (id: string) => Promise<void>;
   deleteTemplates: (ids: string[]) => Promise<void>;
 
@@ -297,11 +363,31 @@ interface TemplateState {
   useTemplate: (id: string) => Promise<void>;
 
   // Import/Export
-  exportTemplates: (ids?: string[]) => Promise<void>;
+  exportTemplates: (ids?: string[], exportAll?: boolean) => Promise<void>;
+  exportSingleTemplate: (
+    id: string,
+    defaultName: string,
+  ) => Promise<{ success: boolean; canceled?: boolean }>;
+  exportBatchTemplates: (
+    ids: string[],
+  ) => Promise<{ success: boolean; count?: number; canceled?: boolean }>;
+  exportMergedTemplates: (
+    ids: string[],
+    defaultName: string,
+  ) => Promise<{ success: boolean; canceled?: boolean }>;
   importTemplates: (
     file: File,
-    mode: "merge" | "replace",
-  ) => Promise<{ imported: number; skipped: number }>;
+    mode: "merge" | "replace" | "rename",
+  ) => Promise<{ imported: number; skipped: number; replaced: number }>;
+  pickAndImportTemplates: (mode: "merge" | "replace" | "rename") => Promise<{
+    imported: number;
+    skipped: number;
+    replaced: number;
+    canceled?: boolean;
+  }>;
+
+  // Query existing names for uniqueness checks
+  queryTemplateNames: (templateType?: string) => Promise<string[]>;
 
   // Filters
   currentFilter: TemplateFilter;
@@ -370,10 +456,26 @@ export const useTemplateStore = create<TemplateState>((set, get) => ({
   createTemplate: async (input: CreateTemplateInput) => {
     set({ isLoading: true, error: null });
     try {
-      const template = await invokeTemplateIpc<Template>(
-        "template:create",
-        input,
-      );
+      // Auto-rename if name already exists for this templateType
+      let finalName = input.name;
+      try {
+        const existingNames = await get().queryTemplateNames(
+          input.templateType,
+        );
+        const nameSet = new Set(existingNames);
+        if (nameSet.has(finalName)) {
+          let counter = 2;
+          while (nameSet.has(`${input.name} (${counter})`)) counter++;
+          finalName = `${input.name} (${counter})`;
+        }
+      } catch {
+        // If queryNames fails (e.g. IPC not available), proceed with original name
+      }
+
+      const template = await invokeTemplateIpc<Template>("template:create", {
+        ...input,
+        name: finalName,
+      });
       set((state) => ({
         templates: [template, ...state.templates],
         isLoading: false,
@@ -386,6 +488,29 @@ export const useTemplateStore = create<TemplateState>((set, get) => ({
   },
 
   updateTemplate: async (id: string, updates: Partial<Template>) => {
+    // If renaming, auto-rename to avoid conflicts
+    if (updates.name) {
+      const current = get().templates.find((t) => t.id === id);
+      if (current) {
+        try {
+          const existingNames = await get().queryTemplateNames(
+            current.templateType,
+          );
+          const nameSet = new Set(existingNames);
+          nameSet.delete(current.name);
+          let finalName = updates.name;
+          if (nameSet.has(finalName)) {
+            let counter = 2;
+            while (nameSet.has(`${updates.name} (${counter})`)) counter++;
+            finalName = `${updates.name} (${counter})`;
+          }
+          updates = { ...updates, name: finalName };
+        } catch {
+          // If queryNames fails, proceed with original name
+        }
+      }
+    }
+
     // Optimistic update
     set((state) => ({
       templates: state.templates.map((t) =>
@@ -397,6 +522,7 @@ export const useTemplateStore = create<TemplateState>((set, get) => ({
 
     try {
       await invokeTemplateIpc("template:update", { id, updates });
+      return updates;
     } catch (error) {
       // Revert on error
       await get().loadTemplates(get().currentFilter);
@@ -467,16 +593,31 @@ export const useTemplateStore = create<TemplateState>((set, get) => ({
     }
   },
 
-  exportTemplates: async (ids?: string[]) => {
+  exportTemplates: async (ids?: string[], exportAll?: boolean) => {
     try {
-      const data = await invokeTemplateIpc("template:export", { ids });
+      const data = await invokeTemplateIpc<TemplateExport>("template:export", {
+        ids,
+      });
       const blob = new Blob([JSON.stringify(data, null, 2)], {
         type: "application/json",
       });
       const url = URL.createObjectURL(blob);
       const a = document.createElement("a");
       a.href = url;
-      a.download = `templates-${new Date().toISOString().split("T")[0]}.json`;
+      const now = new Date();
+      const ts = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, "0")}${String(now.getDate()).padStart(2, "0")}_${String(now.getHours()).padStart(2, "0")}${String(now.getMinutes()).padStart(2, "0")}${String(now.getSeconds()).padStart(2, "0")}`;
+      const tpls = data.templates ?? [];
+      const types = new Set(tpls.map((t: Template) => t.templateType));
+      const typePrefix = types.size === 1 ? [...types][0] : "mixed";
+      let namePrefix: string;
+      if (tpls.length === 1) {
+        namePrefix = tpls[0].name.replace(/[^a-zA-Z0-9\u4e00-\u9fff_-]/g, "_");
+      } else if (exportAll) {
+        namePrefix = `export_all_${tpls.length}`;
+      } else {
+        namePrefix = `export_${tpls.length}`;
+      }
+      a.download = `${typePrefix}_${namePrefix}_${ts}.json`;
       a.click();
       URL.revokeObjectURL(url);
     } catch (error) {
@@ -485,7 +626,49 @@ export const useTemplateStore = create<TemplateState>((set, get) => ({
     }
   },
 
-  importTemplates: async (file: File, mode: "merge" | "replace") => {
+  exportSingleTemplate: async (id: string, defaultName: string) => {
+    try {
+      const result = await invokeTemplateIpc<{
+        success: boolean;
+        filePath?: string;
+        canceled?: boolean;
+      }>("template:exportSingle", { id, defaultName });
+      return result;
+    } catch (error) {
+      set({ error: (error as Error).message });
+      throw error;
+    }
+  },
+
+  exportBatchTemplates: async (ids: string[]) => {
+    try {
+      const result = await invokeTemplateIpc<{
+        success: boolean;
+        count?: number;
+        folderPath?: string;
+        canceled?: boolean;
+      }>("template:exportBatch", { ids });
+      return result;
+    } catch (error) {
+      set({ error: (error as Error).message });
+      throw error;
+    }
+  },
+
+  exportMergedTemplates: async (ids: string[], defaultName: string) => {
+    try {
+      const result = await invokeTemplateIpc<{
+        success: boolean;
+        filePath?: string;
+        canceled?: boolean;
+      }>("template:exportMerged", { ids, defaultName });
+      return result;
+    } catch (error) {
+      set({ error: (error as Error).message });
+      throw error;
+    }
+  },
+  importTemplates: async (file: File, mode: "merge" | "replace" | "rename") => {
     set({ isLoading: true, error: null });
     try {
       const text = await file.text();
@@ -493,6 +676,7 @@ export const useTemplateStore = create<TemplateState>((set, get) => ({
       const result = await invokeTemplateIpc<{
         imported: number;
         skipped: number;
+        replaced: number;
       }>("template:import", { data, mode });
       await get().loadTemplates(get().currentFilter);
       set({ isLoading: false });
@@ -503,6 +687,52 @@ export const useTemplateStore = create<TemplateState>((set, get) => ({
     }
   },
 
+  pickAndImportTemplates: async (mode: "merge" | "replace" | "rename") => {
+    try {
+      const pickResult = await invokeTemplateIpc<{
+        canceled: boolean;
+        templates?: TemplateExport[];
+      }>("template:importPick");
+
+      if (pickResult.canceled || !pickResult.templates?.length) {
+        return { imported: 0, skipped: 0, replaced: 0, canceled: true };
+      }
+
+      set({ isLoading: true, error: null });
+
+      // Merge all templates from all selected files into one import
+      const allTemplates: Template[] = [];
+      for (const data of pickResult.templates) {
+        if (data.templates) {
+          allTemplates.push(...data.templates);
+        }
+      }
+
+      const mergedData: TemplateExport = {
+        version: "1.0",
+        exportedAt: new Date().toISOString(),
+        templates: allTemplates,
+      };
+
+      const result = await invokeTemplateIpc<{
+        imported: number;
+        skipped: number;
+        replaced: number;
+      }>("template:import", { data: mergedData, mode });
+
+      await get().loadTemplates(get().currentFilter);
+      set({ isLoading: false });
+      return result;
+    } catch (error) {
+      set({ error: (error as Error).message, isLoading: false });
+      throw error;
+    }
+  },
+
+  queryTemplateNames: async (templateType?: string) => {
+    return invokeTemplateIpc<string[]>("template:queryNames", { templateType });
+  },
+
   setFilter: (filter: TemplateFilter) => {
     set({ currentFilter: filter });
     get().loadTemplates(filter);
diff --git a/src/workflow/WorkflowPage.tsx b/src/workflow/WorkflowPage.tsx
index ec854bb1..05699d98 100644
--- a/src/workflow/WorkflowPage.tsx
+++ b/src/workflow/WorkflowPage.tsx
@@ -1371,9 +1371,8 @@ export function WorkflowPage() {
   const [showSaveTemplateDialog, setShowSaveTemplateDialog] = useState(false);
 
   const handleSaveAsTemplate = useCallback(() => {
-    if (!workflowId) return;
     setShowSaveTemplateDialog(true);
-  }, [workflowId]);
+  }, []);
 
   const handleSaveTemplateConfirm = useCallback(
     async (
@@ -1403,7 +1402,7 @@ export function WorkflowPage() {
           new Set(nodes.map((n) => n.data.nodeType)),
         );
 
-        await createTemplate({
+        const template = await createTemplate({
           name: data.name,
           description: data.description || null,
           tags: data.tags,
@@ -1418,10 +1417,20 @@ export function WorkflowPage() {
             useCases: [],
           },
         });
-        showIoToast(
-          "success",
-          t("workflow.templateSaved", "Saved as template"),
-        );
+        if (template.name !== data.name) {
+          showIoToast(
+            "success",
+            t("templates.autoRenamed", {
+              original: data.name,
+              renamed: template.name,
+            }),
+          );
+        } else {
+          showIoToast(
+            "success",
+            t("workflow.templateSaved", "Saved as template"),
+          );
+        }
       } catch (err) {
         console.error("Save template failed:", err);
         showIoToast(
@@ -1990,7 +1999,6 @@ export function WorkflowPage() {
             <div className="h-px bg-border" />
             {/* More menu (Import / Export / Save) */}
             <MoreMenu
-              workflowId={workflowId}
               onImport={handleImport}
               onExport={handleExport}
               onSave={handleSave}
@@ -2664,7 +2672,6 @@ function MonitorToggleBtn() {
 
 /* ── More Menu — collapsed Import / Export / Save ──────────────────── */
 function MoreMenu({
-  workflowId,
   onImport,
   onExport,
   onSave,
@@ -2673,7 +2680,6 @@ function MoreMenu({
   "data-guide": dataGuide,
   position = "top",
 }: {
-  workflowId: string | null;
   onImport: () => void;
   onExport: () => void;
   onSave: () => void;
@@ -2807,31 +2813,29 @@ function MoreMenu({
               </svg>
               {t("workflow.export", "Export")}
             </button>
-            {workflowId && (
-              <button
-                onClick={() => {
-                  onSaveAsTemplate();
-                  setOpen(false);
-                }}
-                className="w-full px-3 py-1.5 text-xs text-left hover:bg-[hsl(var(--accent))] transition-colors flex items-center gap-2"
+            <button
+              onClick={() => {
+                onSaveAsTemplate();
+                setOpen(false);
+              }}
+              className="w-full px-3 py-1.5 text-xs text-left hover:bg-[hsl(var(--accent))] transition-colors flex items-center gap-2"
+            >
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
               >
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
-                  <polyline points="17 21 17 13 7 13 7 21" />
-                  <polyline points="7 3 7 8 15 8" />
-                </svg>
-                {t("workflow.saveAsTemplate", "Save as Template")}
-              </button>
-            )}
+                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+                <polyline points="17 21 17 13 7 13 7 21" />
+                <polyline points="7 3 7 8 15 8" />
+              </svg>
+              {t("workflow.saveAsTemplate", "Save as Template")}
+            </button>
             <button
               onClick={() => {
                 onSave();
diff --git a/src/workflow/components/panels/TemplatePanel.tsx b/src/workflow/components/panels/TemplatePanel.tsx
index c0fe6af7..954fc9bc 100644
--- a/src/workflow/components/panels/TemplatePanel.tsx
+++ b/src/workflow/components/panels/TemplatePanel.tsx
@@ -1,24 +1,14 @@
 /**
  * TemplatePanel — left sidebar panel for browsing workflow templates.
- * Matches the design of NodePalette and WorkflowList.
+ * Simple list view, no category grouping.
  */
 import { useEffect, useState, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { useUIStore } from "../../stores/ui.store";
 import { useTemplateStore } from "@/stores/templateStore";
-import {
-  Heart,
-  Flame,
-  BarChart3,
-  Play,
-  Sparkles,
-  Workflow,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
+import { Search, Download, FolderOpen } from "lucide-react";
 import type { Template, TemplateFilter } from "@/types/template";
 
-type SourceFilter = "all" | "public" | "custom" | "favorites";
-
 interface TemplatePanelProps {
   onUseTemplate: (template: Template) => void;
   onClose?: () => void;
@@ -28,13 +18,12 @@ export function TemplatePanel({ onUseTemplate, onClose }: TemplatePanelProps) {
   const { t } = useTranslation();
   const width = useUIStore((s) => s.sidebarWidth);
   const setSidebarWidth = useUIStore((s) => s.setSidebarWidth);
-  const { toggleFavorite, useTemplate: incrementUseCount } = useTemplateStore();
+  const { useTemplate: incrementUseCount, exportTemplates } =
+    useTemplateStore();
 
   const [templates, setTemplates] = useState<Template[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [query, setQuery] = useState("");
-  const [sourceFilter, setSourceFilter] = useState<SourceFilter>("all");
-  const [sortBy, setSortBy] = useState<"updatedAt" | "useCount">("updatedAt");
   const [dragging, setDragging] = useState(false);
 
   const loadTemplates = useCallback(async () => {
@@ -43,14 +32,6 @@ export function TemplatePanel({ onUseTemplate, onClose }: TemplatePanelProps) {
       const filter: TemplateFilter = {
         templateType: "workflow",
         search: query || undefined,
-        sortBy,
-        type:
-          sourceFilter === "public"
-            ? "public"
-            : sourceFilter === "custom"
-              ? "custom"
-              : undefined,
-        isFavorite: sourceFilter === "favorites" ? true : undefined,
       };
       const result = await (window.workflowAPI?.invoke?.(
         "template:query",
@@ -62,7 +43,7 @@ export function TemplatePanel({ onUseTemplate, onClose }: TemplatePanelProps) {
     } finally {
       setIsLoading(false);
     }
-  }, [query, sortBy, sourceFilter]);
+  }, [query]);
 
   useEffect(() => {
     loadTemplates();
@@ -73,13 +54,12 @@ export function TemplatePanel({ onUseTemplate, onClose }: TemplatePanelProps) {
     onUseTemplate(template);
   };
 
-  const handleToggleFavorite = async (template: Template) => {
-    await toggleFavorite(template.id);
-    setTemplates((prev) =>
-      prev.map((t) =>
-        t.id === template.id ? { ...t, isFavorite: !t.isFavorite } : t,
-      ),
-    );
+  const handleExport = async (template: Template) => {
+    try {
+      await exportTemplates([template.id]);
+    } catch {
+      // silent
+    }
   };
 
   const onResizeStart = useCallback(
@@ -102,12 +82,10 @@ export function TemplatePanel({ onUseTemplate, onClose }: TemplatePanelProps) {
     [width, setSidebarWidth],
   );
 
-  const sourceOptions: { key: SourceFilter; label: string }[] = [
-    { key: "all", label: t("templates.allSources") },
-    { key: "public", label: t("templates.public") },
-    { key: "custom", label: t("templates.myTemplates") },
-    { key: "favorites", label: "★" },
-  ];
+  const formatDate = (dateStr: string) => {
+    const d = new Date(dateStr);
+    return `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, "0")}/${String(d.getDate()).padStart(2, "0")}`;
+  };
 
   return (
     <div
@@ -120,7 +98,7 @@ export function TemplatePanel({ onUseTemplate, onClose }: TemplatePanelProps) {
         <button
           onClick={onClose}
           className="text-muted-foreground hover:text-foreground text-xs px-1"
-          title={t("common.close", "Close")}
+          title={t("common.close")}
         >
           ✕
         </button>
@@ -128,45 +106,16 @@ export function TemplatePanel({ onUseTemplate, onClose }: TemplatePanelProps) {
 
       {/* Search */}
       <div className="px-2.5 py-2 border-b border-border">
-        <input
-          type="text"
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          placeholder={t("templates.searchPlaceholder", "Search templates...")}
-          className="w-full rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-xs text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50"
-        />
-      </div>
-
-      {/* Source filter pills */}
-      <div className="px-2.5 py-1.5 border-b border-border flex items-center gap-1 flex-wrap">
-        {sourceOptions.map((opt) => (
-          <button
-            key={opt.key}
-            onClick={() => setSourceFilter(opt.key)}
-            className={cn(
-              "px-2 py-0.5 text-[10px] rounded-full border transition-colors",
-              sourceFilter === opt.key
-                ? "bg-primary/15 border-primary/30 text-primary"
-                : "border-transparent text-muted-foreground hover:text-foreground hover:bg-accent",
-            )}
-          >
-            {opt.label}
-          </button>
-        ))}
-        {/* Sort toggle */}
-        <button
-          onClick={() =>
-            setSortBy((s) => (s === "updatedAt" ? "useCount" : "updatedAt"))
-          }
-          className="ml-auto px-1.5 py-0.5 text-[10px] text-muted-foreground hover:text-foreground transition-colors"
-          title={
-            sortBy === "updatedAt"
-              ? t("templates.newest")
-              : t("templates.mostUsed")
-          }
-        >
-          {sortBy === "updatedAt" ? "⏰" : "🔥"}
-        </button>
+        <div className="relative">
+          <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={t("templates.searchPlaceholder")}
+            className="w-full pl-7 pr-2 py-1.5 rounded-md border border-border bg-background text-xs focus:outline-none focus:ring-1 focus:ring-primary/50"
+          />
+        </div>
       </div>
 
       {/* Template list */}
@@ -178,8 +127,9 @@ export function TemplatePanel({ onUseTemplate, onClose }: TemplatePanelProps) {
         )}
 
         {!isLoading && templates.length === 0 && (
-          <div className="px-3 py-8 text-xs text-muted-foreground text-center">
-            {t("templates.noTemplates")}
+          <div className="flex flex-col items-center justify-center h-32 text-muted-foreground">
+            <FolderOpen className="h-8 w-8 mb-2 opacity-40" />
+            <p className="text-xs">{t("templates.noTemplates")}</p>
           </div>
         )}
 
@@ -190,77 +140,31 @@ export function TemplatePanel({ onUseTemplate, onClose }: TemplatePanelProps) {
                   defaultValue: template.name,
                 })
               : template.name;
-            const tDesc =
-              template.i18nKey && template.description
-                ? t(`presetTemplates.${template.i18nKey}.description`, {
-                    defaultValue: template.description,
-                  })
-                : template.description;
             return (
               <div
                 key={template.id}
-                className="group mx-1.5 mb-0.5 rounded-md hover:bg-accent transition-colors"
+                onClick={() => handleUse(template)}
+                className="group flex items-center gap-2 mx-1.5 mb-1 px-2.5 py-2 rounded-md border border-border/30 hover:bg-primary/5 hover:border-primary/30 transition-colors cursor-pointer"
               >
-                <div className="flex items-start gap-2 px-2.5 py-2">
-                  {/* Icon */}
-                  <div className="w-8 h-8 flex-shrink-0 rounded bg-muted/50 flex items-center justify-center mt-0.5">
-                    {template.templateType === "playground" ? (
-                      <Sparkles className="h-4 w-4 text-muted-foreground/60" />
-                    ) : (
-                      <Workflow className="h-4 w-4 text-muted-foreground/60" />
-                    )}
-                  </div>
-                  {/* Info */}
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-1">
-                      <span className="text-xs font-medium truncate">
-                        {tName}
-                      </span>
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleToggleFavorite(template);
-                        }}
-                        className={cn(
-                          "p-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity",
-                          template.isFavorite
-                            ? "text-red-500 opacity-100"
-                            : "text-muted-foreground hover:text-red-500",
-                        )}
-                      >
-                        <Heart
-                          className={cn(
-                            "h-3 w-3",
-                            template.isFavorite && "fill-current",
-                          )}
-                        />
-                      </button>
-                    </div>
-                    {tDesc && (
-                      <p className="text-[10px] text-muted-foreground line-clamp-1 mt-0.5">
-                        {tDesc}
-                      </p>
-                    )}
-                    <div className="flex items-center gap-2 text-[10px] text-muted-foreground mt-0.5">
-                      <span className="flex items-center gap-0.5">
-                        <Flame className="h-2.5 w-2.5" />
-                        {template.useCount}
-                      </span>
-                      {template.workflowData && (
-                        <span className="flex items-center gap-0.5">
-                          <BarChart3 className="h-2.5 w-2.5" />
-                          {template.workflowData.nodeCount}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                  {/* Use button */}
+                <div className="flex-1 min-w-0">
+                  <span className="text-xs font-medium truncate block group-hover:text-primary transition-colors">
+                    {tName}
+                  </span>
+                  <span className="text-[10px] text-muted-foreground">
+                    {t("templates.lastUpdated")}:{" "}
+                    {formatDate(template.updatedAt)}
+                  </span>
+                </div>
+                <div className="flex items-center gap-0.5 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
                   <button
-                    onClick={() => handleUse(template)}
-                    className="self-center flex-shrink-0 h-6 px-2 rounded text-[10px] font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex items-center gap-1 opacity-0 group-hover:opacity-100"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleExport(template);
+                    }}
+                    className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                    title={t("templates.export")}
                   >
-                    <Play className="h-2.5 w-2.5" />
-                    {t("templates.use")}
+                    <Download className="h-3.5 w-3.5" />
                   </button>
                 </div>
               </div>