diff --git a/api/index.py b/api/index.py
index 6913327f..4d68b5e5 100644
--- a/api/index.py
+++ b/api/index.py
@@ -979,12 +979,21 @@ def _latest_compose_key(prefix: str, keys: set) -> Optional[str]:
             pass
     specs["artDirection"] = art_direction_content
 
+    # Confirmed template name from deck.json (written by the agent at Art Direction)
+    template = None
+    try:
+        dj_resp = s3_client.get_object(Bucket=BUCKET_NAME, Key=f"decks/{deck_id}/deck.json")
+        template = json.loads(dj_resp["Body"].read()).get("template") or None
+    except Exception:
+        pass
+
     return {
         "deckId": deck_id,
         "name": deck.get("name", "Untitled"),
         "slideCount": len(slides),
         "slides": slides,
         "specs": specs,
+        "template": template,
         "defsUrl": preview_url(defs_key) if has_defs else None,
         "pptxUrl": (_cf_signed_url(pptx_key) or presigned_url(s3_client, BUCKET_NAME, pptx_key)) if pptx_key else None,
         "updatedAt": deck.get("updatedAt", ""),
diff --git a/web-ui/messages/en.json b/web-ui/messages/en.json
index 91a99bc4..7d508ba3 100644
--- a/web-ui/messages/en.json
+++ b/web-ui/messages/en.json
@@ -407,5 +407,12 @@
     "pinAria": "Pin {name}",
     "unpinAria": "Unpin {name}",
     "custom": "Custom"
+  },
+  "templatePicker": {
+    "sectionTitle": "Template",
+    "useTemplate": "Use this template",
+    "useTemplateAria": "Use the {name} template",
+    "currentLabel": "In use: {name}",
+    "custom": "Custom"
   }
 }
diff --git a/web-ui/messages/ja.json b/web-ui/messages/ja.json
index a88fdba5..822bcdf9 100644
--- a/web-ui/messages/ja.json
+++ b/web-ui/messages/ja.json
@@ -407,5 +407,12 @@
     "pinAria": "{name} をピン留め",
     "unpinAria": "{name} のピン留めを解除",
     "custom": "カスタム"
+  },
+  "templatePicker": {
+    "sectionTitle": "テンプレート",
+    "useTemplate": "このテンプレートを使う",
+    "useTemplateAria": "テンプレート {name} を使う",
+    "currentLabel": "使用中: {name}",
+    "custom": "カスタム"
   }
 }
diff --git a/web-ui/src/app/(authenticated)/decks/page.tsx b/web-ui/src/app/(authenticated)/decks/page.tsx
index b474d828..1ba90557 100644
--- a/web-ui/src/app/(authenticated)/decks/page.tsx
+++ b/web-ui/src/app/(authenticated)/decks/page.tsx
@@ -70,6 +70,15 @@ export default function DecksPage() {
     chatRef.current?.insertAtCursor(msg)
   }, [ws.deck?.specs?.artDirection])
 
+  /** Handle inline template selection — insert message into chat input.
+   *  isChange is true when deck.json already has a confirmed template. */
+  const handleTemplateSelect = useCallback((name: string, isChange: boolean) => {
+    const msg = isChange
+      ? `I want to change the template to "${name}". `
+      : `I'll use the "${name}" template. `
+    chatRef.current?.insertAtCursor(msg)
+  }, [])
+
   /* ── Render ── */
   return (
     <AppShell
@@ -144,6 +153,8 @@ export default function DecksPage() {
                     specs={ws.deck?.specs}
                     workflowPhase={workflowPhase}
                     onStyleSelect={handleStyleSelect}
+                    onTemplateSelect={handleTemplateSelect}
+                    currentTemplate={ws.deck?.template}
                     idToken={idToken}
                     ownerAlias={!ws.isOwner ? ws.deck?.ownerAlias : undefined}
                     headerActions={
diff --git a/web-ui/src/app/api/decks/[id]/route.ts b/web-ui/src/app/api/decks/[id]/route.ts
index f23800fb..be8134f0 100644
--- a/web-ui/src/app/api/decks/[id]/route.ts
+++ b/web-ui/src/app/api/decks/[id]/route.ts
@@ -99,6 +99,7 @@ export async function GET(_req: Request, { params }: { params: Promise<{ id: str
     name: deckJson.name || deckId,
     slideOrder: deckJson.slideOrder || [],
     slides,
+    template: deckJson.template || null,
     defsUrl: defsFilename ? `/api/preview/${deckId}/compose/${defsFilename}` : null,
     pptxUrl: fs.existsSync(pptxPath) ? `/api/preview/${deckId}/output.pptx` : null,
     specs,
diff --git a/web-ui/src/components/deck/SlideCarousel.tsx b/web-ui/src/components/deck/SlideCarousel.tsx
index 199779b7..f4e17cae 100644
--- a/web-ui/src/components/deck/SlideCarousel.tsx
+++ b/web-ui/src/components/deck/SlideCarousel.tsx
@@ -12,14 +12,13 @@
 import { useState, useEffect, useRef, useCallback } from "react"
 import { SlidePreview } from "@/services/deckService"
 import type { SpecFiles } from "@/services/deckService"
-import { Download, Layers, Loader2, LayoutGrid, Rows3, FolderOpen } from "lucide-react"
-import { useAuth } from "@/hooks/useAuth"
+import { Download, Layers, LayoutGrid, Rows3, FolderOpen } from "lucide-react"
 import { usePreferences } from "@/hooks/usePreferences"
 import { SpecStepNav, SpecMarkdownPreview } from "@/components/deck/SpecStepNav"
 import type { SpecTab } from "@/components/deck/SpecStepNav"
 import { SlideThumbnail } from "@/components/deck/SlideThumbnail"
 import { AnimatedSlidePreview } from "@/components/deck/AnimatedSlidePreview"
-import { CloudOnly, LocalOnly, IS_LOCAL } from "@/lib/mode"
+import { IS_LOCAL } from "@/lib/mode"
 import { notifyError } from "@/lib/errors"
 import { useTranslations } from "next-intl"
 
@@ -46,19 +45,20 @@ interface SlideCarouselProps {
   workflowPhase?: string | null
   /** Callback when user selects a style inline. */
   onStyleSelect?: (name: string) => void
+  /** Callback when user selects a template inline (isChange = template already confirmed). */
+  onTemplateSelect?: (name: string, isChange: boolean) => void
+  /** Confirmed template from deck.json (raw value, e.g. "corporate.pptx"). */
+  currentTemplate?: string | null
   /** Cognito ID token for style API calls. */
   idToken?: string
 }
 
-export function SlideCarousel({ slides, defsUrl, deckId, deckName, pptxUrl, isLoading, onSlideClick, scrollToSlide, onScrollComplete, headerActions, ownerAlias, specs, workflowPhase, onStyleSelect, idToken }: SlideCarouselProps) {
+export function SlideCarousel({ slides, defsUrl, deckId, deckName, pptxUrl, isLoading, onSlideClick, scrollToSlide, onScrollComplete, headerActions, ownerAlias, specs, workflowPhase, onStyleSelect, onTemplateSelect, currentTemplate, idToken }: SlideCarouselProps) {
   const t = useTranslations("carousel")
   const slidesWithPreview = slides.filter((s) => s.previewUrl || s.composeUrl)
-  // eslint-disable-next-line no-console
   const slugs = slides.map(s => s.slug)
-  // eslint-disable-next-line no-console
   if (new Set(slugs).size !== slugs.length) console.warn("[SlideCarousel] duplicate slugs:", slugs)
   // Check compose URL duplicates across different slugs
-  // eslint-disable-next-line no-console
   const urlBySlug: Record<string,string> = {}
   const dupUrls: string[] = []
   for (const s of slidesWithPreview) {
@@ -66,9 +66,7 @@ export function SlideCarousel({ slides, defsUrl, deckId, deckName, pptxUrl, isLo
     if (u && Object.values(urlBySlug).includes(u)) dupUrls.push(`${s.slug}→${u}`)
     if (u) urlBySlug[s.slug] = u
   }
-  // eslint-disable-next-line no-console
   if (dupUrls.length) console.warn("[SlideCarousel] same composeUrl used for multiple slides:", dupUrls, urlBySlug)
-  const auth = useAuth()
   const { viewMode, setViewMode } = usePreferences()
   const containerRef = useRef<HTMLDivElement>(null)
 
@@ -476,6 +474,8 @@ export function SlideCarousel({ slides, defsUrl, deckId, deckName, pptxUrl, isLo
           specName={specTab.charAt(0).toUpperCase() + specTab.slice(1)}
           specKey={specTab}
           onStyleSelect={specTab === "artDirection" ? onStyleSelect : undefined}
+          onTemplateSelect={specTab === "artDirection" ? onTemplateSelect : undefined}
+          currentTemplate={specTab === "artDirection" ? currentTemplate : undefined}
           idToken={specTab === "artDirection" ? idToken : undefined}
         />
       )}
diff --git a/web-ui/src/components/deck/SpecMarkdownPreview.tsx b/web-ui/src/components/deck/SpecMarkdownPreview.tsx
index f4274b88..e5e1954e 100644
--- a/web-ui/src/components/deck/SpecMarkdownPreview.tsx
+++ b/web-ui/src/components/deck/SpecMarkdownPreview.tsx
@@ -4,8 +4,10 @@
  * SpecMarkdownPreview — Renders spec markdown content with editorial styling.
  * Outline uses the dedicated OutlineView timeline component.
  * Brief uses react-markdown with HEX color swatches.
- * Art Direction renders HTML via sandboxed iframe with an inline
- * style gallery (gallery → preview → result states).
+ * Art Direction renders a persistent template picker section (header-like,
+ * non-sticky) above an inline style gallery (gallery → preview → result
+ * states). Both sections share one scroll container but keep independent
+ * display states.
  *
  * @param props.content - Markdown or HTML string to render
  * @param props.specName - Name of the spec (for empty state)
@@ -23,6 +25,7 @@ import { fetchStyles, fetchStyleHtml, pinStyle, type StyleEntry } from "@/servic
 import { OutlineView } from "./OutlineView"
 import { StyleSlidePreview } from "@/components/StyleSlidePreview"
 import { StyleCard } from "./StyleCard"
+import { TemplatePickerSection } from "./TemplatePickerSection"
 import { BriefWaiting, OutlineWaiting, ArtDirectionWaiting } from "./SpecWaiting"
 import { useTranslations } from "next-intl"
 
@@ -86,7 +89,7 @@ const specComponents = {
   },
 }
 
-export function SpecMarkdownPreview({ content, specName, specKey, onStyleSelect, idToken }: { content: string | null; specName: string; specKey?: string; onStyleSelect?: (name: string) => void; idToken?: string }) {
+export function SpecMarkdownPreview({ content, specName, specKey, onStyleSelect, onTemplateSelect, currentTemplate, idToken }: { content: string | null; specName: string; specKey?: string; onStyleSelect?: (name: string) => void; onTemplateSelect?: (name: string, isChange: boolean) => void; currentTemplate?: string | null; idToken?: string }) {
   const t = useTranslations("stylePicker")
   // Hooks must be called unconditionally — before any early returns.
 
@@ -169,11 +172,22 @@ export function SpecMarkdownPreview({ content, specName, specKey, onStyleSelect,
     return <div className="content-enter flex-1"><OutlineView content={content} /></div>
   }
 
-  // Art Direction: 3-state inline view
+  // Art Direction: template section (persistent) + style section (3-state)
+  // sharing one scroll container. The template picker is header-like and
+  // independent of the style state machine — it stays visible in all states.
   if (specKey === "artDirection") {
+    const wrap = (body: React.ReactNode) => (
+      <div ref={galleryContainerRef} className="flex-1 overflow-y-auto overflow-x-hidden flex flex-col">
+        {onTemplateSelect && (
+          <TemplatePickerSection idToken={idToken} currentTemplate={currentTemplate} onTemplateSelect={onTemplateSelect} />
+        )}
+        <div className="flex-1 flex flex-col min-h-0">{body}</div>
+      </div>
+    )
+
     // Waiting state (no content, not browsing styles)
     if (!content && adMode === "result") {
-      return (
+      return wrap(
         <div className="flex-1 flex flex-col items-center justify-center text-center px-6 py-20">
           <ArtDirectionWaiting />
         </div>
@@ -199,8 +213,8 @@ export function SpecMarkdownPreview({ content, specName, specKey, onStyleSelect,
       const hasPins = pinnedStyles.length > 0
       const unpinnedStyles = styles.filter(s => !s.pinned)
 
-      return (
-        <div ref={galleryContainerRef} className="flex-1 overflow-y-auto">
+      return wrap(
+        <div>
           {/* Header */}
           <div className="flex items-center justify-between px-6 py-3 border-b border-white/[0.06]">
             <div>
@@ -283,8 +297,8 @@ export function SpecMarkdownPreview({ content, specName, specKey, onStyleSelect,
         else { setPreview(null); setAdMode("gallery") }
       }
 
-      return (
-        <div className="flex-1 overflow-y-auto">
+      return wrap(
+        <div>
           {/* Header */}
           <div className="flex items-center justify-between px-6 py-3 border-b border-white/[0.06]">
             <div className="flex items-center gap-3">
@@ -324,8 +338,8 @@ export function SpecMarkdownPreview({ content, specName, specKey, onStyleSelect,
     }
 
     // RESULT state (default when content exists)
-    return (
-      <div className="flex-1 overflow-y-auto overflow-x-hidden">
+    return wrap(
+      <div>
         {onStyleSelect && (
           <div className="flex justify-end px-4 py-2">
             <button
diff --git a/web-ui/src/components/deck/TemplatePickerSection.test.tsx b/web-ui/src/components/deck/TemplatePickerSection.test.tsx
new file mode 100644
index 00000000..e5a340d7
--- /dev/null
+++ b/web-ui/src/components/deck/TemplatePickerSection.test.tsx
@@ -0,0 +1,140 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: MIT-0
+/**
+ * TemplatePickerSection tests — rendering, ordering, current-template
+ * indication, and selection callback arguments.
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
+import { screen, waitFor, fireEvent, cleanup } from "@testing-library/react"
+import { renderWithIntl } from "@/test/renderWithIntl"
+import { TemplatePickerSection } from "./TemplatePickerSection"
+import type { TemplateEntry } from "@/services/deckService"
+
+vi.mock("@/services/deckService", () => ({
+  fetchTemplates: vi.fn(),
+}))
+
+import { fetchTemplates } from "@/services/deckService"
+
+const TEMPLATES: TemplateEntry[] = [
+  {
+    name: "builtin-a",
+    source: "builtin",
+    description: "Builtin A",
+    theme_colors: { background: "#ffffff", text: "#111111", accent1: "#ff0000" },
+    fonts: { halfwidth: "Arial", fullwidth: null },
+    layout_count: 10,
+  },
+  {
+    name: "my-brand",
+    source: "user",
+    description: "Company brand",
+    theme_colors: { background: "#001122", text: "#eeeeee" },
+    fonts: {},
+    layout_count: 5,
+  },
+  {
+    name: "corporate",
+    source: "builtin",
+    description: "",
+    theme_colors: {},
+    fonts: {},
+    layout_count: 8,
+  },
+]
+
+describe("TemplatePickerSection", () => {
+  beforeEach(() => {
+    vi.mocked(fetchTemplates).mockResolvedValue(TEMPLATES)
+  })
+
+  afterEach(() => {
+    cleanup()
+    vi.clearAllMocks()
+  })
+
+  it("renders all templates after loading", async () => {
+    renderWithIntl(
+      <TemplatePickerSection idToken="tok" currentTemplate={null} onTemplateSelect={() => {}} />
+    )
+    expect(await screen.findByText("my-brand")).toBeTruthy()
+    expect(screen.getByText("builtin-a")).toBeTruthy()
+    expect(screen.getByText("corporate")).toBeTruthy()
+    expect(screen.getByText("Template")).toBeTruthy()
+  })
+
+  it("orders user templates before builtin when nothing is confirmed", async () => {
+    renderWithIntl(
+      <TemplatePickerSection idToken="tok" currentTemplate={null} onTemplateSelect={() => {}} />
+    )
+    await screen.findByText("my-brand")
+    const cards = screen.getAllByRole("button")
+    const names = cards.map((c) => c.getAttribute("aria-label"))
+    expect(names).toEqual([
+      "Use the my-brand template",
+      "Use the builtin-a template",
+      "Use the corporate template",
+    ])
+  })
+
+  it("marks the confirmed template with data-current without reordering", async () => {
+    renderWithIntl(
+      <TemplatePickerSection idToken="tok" currentTemplate="corporate.pptx" onTemplateSelect={() => {}} />
+    )
+    await screen.findByText("my-brand")
+    await waitFor(() => {
+      const card = screen.getByRole("button", { name: "Use the corporate template" })
+      expect(card.getAttribute("data-current")).toBe("true")
+    })
+    // Order stays user → builtin — the current card does NOT jump to the front
+    const names = screen.getAllByRole("button").map((c) => c.getAttribute("aria-label"))
+    expect(names).toEqual([
+      "Use the my-brand template",
+      "Use the builtin-a template",
+      "Use the corporate template",
+    ])
+    // Header shows the labelled current template name
+    expect(screen.getByText("In use: corporate")).toBeTruthy()
+  })
+
+  it("normalizes template values with directory prefixes", async () => {
+    renderWithIntl(
+      <TemplatePickerSection idToken="tok" currentTemplate="templates/my-brand.pptx" onTemplateSelect={() => {}} />
+    )
+    await screen.findByText("builtin-a")
+    expect(
+      screen.getByRole("button", { name: "Use the my-brand template" }).getAttribute("data-current")
+    ).toBe("true")
+    expect(screen.getByText("In use: my-brand")).toBeTruthy()
+  })
+
+  it("calls onTemplateSelect with isChange=false when unconfirmed", async () => {
+    const onSelect = vi.fn()
+    renderWithIntl(
+      <TemplatePickerSection idToken="tok" currentTemplate={null} onTemplateSelect={onSelect} />
+    )
+    await screen.findByText("my-brand")
+    fireEvent.click(screen.getByRole("button", { name: "Use the my-brand template" }))
+    expect(onSelect).toHaveBeenCalledWith("my-brand", false)
+  })
+
+  it("calls onTemplateSelect with isChange=true when a template is confirmed", async () => {
+    const onSelect = vi.fn()
+    renderWithIntl(
+      <TemplatePickerSection idToken="tok" currentTemplate="corporate.pptx" onTemplateSelect={onSelect} />
+    )
+    await screen.findByText("my-brand")
+    // The current card is NOT disabled — re-asserting the same template is allowed
+    fireEvent.click(screen.getByRole("button", { name: "Use the corporate template" }))
+    expect(onSelect).toHaveBeenCalledWith("corporate", true)
+  })
+
+  it("shows the custom badge only for user templates", async () => {
+    renderWithIntl(
+      <TemplatePickerSection idToken="tok" currentTemplate={null} onTemplateSelect={() => {}} />
+    )
+    await screen.findByText("my-brand")
+    expect(screen.getAllByText("Custom")).toHaveLength(1)
+  })
+})
diff --git a/web-ui/src/components/deck/TemplatePickerSection.tsx b/web-ui/src/components/deck/TemplatePickerSection.tsx
new file mode 100644
index 00000000..ef1b8a04
--- /dev/null
+++ b/web-ui/src/components/deck/TemplatePickerSection.tsx
@@ -0,0 +1,166 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: MIT-0
+/**
+ * TemplatePickerSection — Header-like template picker for the Art Direction pane.
+ *
+ * Always rendered at the top of the shared scroll container (non-sticky),
+ * independent of the style section's state machine below it.
+ *
+ * Selection model: the UI is an insertion device, not a state control —
+ * clicking a card inserts a chat message; the agent is the only actor that
+ * confirms a template (by writing deck.json). The confirmed template is
+ * read back via `useCurrentTemplate` and shown with an accent border.
+ */
+
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { Plus, Check } from "lucide-react"
+import { useTranslations } from "next-intl"
+import { fetchTemplates, type TemplateEntry } from "@/services/deckService"
+
+const PULSE_MS = 600
+
+/** Normalize a deck.json template value: "templates/corporate.pptx" → "corporate". */
+function normalizeTemplateName(raw?: string | null): string | null {
+  if (!raw) return null
+  const name = raw.replace(/\.pptx$/, "").split("/").pop() || ""
+  return name || null
+}
+
+export function TemplatePickerSection({ idToken, currentTemplate, onTemplateSelect }: {
+  idToken?: string
+  /** Raw template value from deck.json (e.g. "corporate.pptx"), null when unconfirmed. */
+  currentTemplate?: string | null
+  onTemplateSelect: (name: string, isChange: boolean) => void
+}) {
+  const t = useTranslations("templatePicker")
+  const [templates, setTemplates] = useState<TemplateEntry[]>([])
+  const [loading, setLoading] = useState(true)
+  const loadedRef = useRef(false)
+  const [pulsing, setPulsing] = useState<string | null>(null)
+  const pulseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const current = normalizeTemplateName(currentTemplate)
+
+  useEffect(() => {
+    if (!idToken || loadedRef.current) return
+    loadedRef.current = true
+    let cancelled = false
+    fetchTemplates(idToken).then((list) => {
+      if (cancelled) return
+      setTemplates(list)
+      setLoading(false)
+    })
+    return () => { cancelled = true }
+  }, [idToken])
+
+  useEffect(() => () => { if (pulseTimerRef.current) clearTimeout(pulseTimerRef.current) }, [])
+
+  const handleClick = (name: string) => {
+    onTemplateSelect(name, current != null)
+    setPulsing(name)
+    if (pulseTimerRef.current) clearTimeout(pulseTimerRef.current)
+    pulseTimerRef.current = setTimeout(() => setPulsing(null), PULSE_MS)
+  }
+
+  // Order: user (custom) → builtin. Stable sort preserves the API order
+  // within each group. Deliberately NOT current-first: reordering on
+  // confirmation breaks spatial memory — the check icon, accent border,
+  // and header label are the current-template indicators instead.
+  const rank = (tpl: TemplateEntry) => (tpl.source === "user" ? 0 : 1)
+  const sorted = [...templates].sort((a, b) => rank(a) - rank(b))
+
+  return (
+    <section className="px-6 pt-4 pb-4 border-b border-white/[0.06]">
+      <div className="flex items-center justify-between mb-3">
+        <h3 className="text-xs font-semibold text-foreground-muted uppercase tracking-wider">{t("sectionTitle")}</h3>
+        {current && (
+          <span className="inline-flex items-center gap-1 text-xs text-brand-teal/90">
+            <Check className="h-3 w-3" aria-hidden="true" />
+            {t("currentLabel", { name: current })}
+          </span>
+        )}
+      </div>
+      {loading ? (
+        <div className="flex gap-3">
+          {[0, 1, 2].map((i) => (
+            <div key={i} className="w-[180px] h-[68px] shrink-0 rounded-xl bg-white/[0.03] animate-pulse" />
+          ))}
+        </div>
+      ) : (
+        <div className="flex gap-3 overflow-x-auto pb-1">
+          {sorted.map((tpl) => (
+            <TemplatePickCard
+              key={tpl.name}
+              template={tpl}
+              isCurrent={tpl.name === current}
+              pulsing={tpl.name === pulsing}
+              onClick={() => handleClick(tpl.name)}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}
+
+function TemplatePickCard({ template, isCurrent, pulsing, onClick }: {
+  template: TemplateEntry
+  isCurrent: boolean
+  pulsing: boolean
+  onClick: () => void
+}) {
+  const t = useTranslations("templatePicker")
+  const colors = template.theme_colors || {}
+  const palette = [
+    colors.accent1, colors.accent2, colors.accent3,
+    colors.accent4, colors.accent5,
+  ].filter(Boolean) as string[]
+  const fonts = template.fonts || {}
+  const fontDisplay = [fonts.halfwidth, fonts.fullwidth].filter(Boolean).join(" / ")
+  const tooltip = [template.description, fontDisplay].filter(Boolean).join("\n") || template.name
+
+  return (
+    <button
+      onClick={onClick}
+      title={tooltip}
+      aria-label={t("useTemplateAria", { name: template.name })}
+      data-current={isCurrent || undefined}
+      className={`group relative w-[180px] shrink-0 rounded-xl border text-left overflow-hidden transition-all duration-200 cursor-pointer ${
+        isCurrent
+          ? "border-brand-teal ring-1 ring-brand-teal/50 bg-brand-teal/[0.06]"
+          : "border-white/[0.06] hover:border-white/[0.16] bg-white/[0.02]"
+      } ${pulsing ? "ring-2 ring-brand-teal/50" : ""}`}
+    >
+      {/* Theme strip — background + text color identity + palette */}
+      <div
+        className="h-8 w-full flex items-center px-2.5"
+        style={colors.background ? { backgroundColor: colors.background } : undefined}
+      >
+        {colors.text && (
+          <span className="text-[11px] font-medium opacity-70" style={{ color: colors.text }}>Aa</span>
+        )}
+        {palette.length > 0 && (
+          <span className="flex items-center gap-1 ml-auto">
+            {palette.map((c, i) => (
+              <span key={i} className="w-2 h-2 rounded-full ring-1 ring-black/10" style={{ backgroundColor: c }} />
+            ))}
+          </span>
+        )}
+      </div>
+      {/* Name row */}
+      <div className="px-2.5 py-2 flex items-center gap-1.5">
+        {isCurrent && <Check className="h-3 w-3 text-brand-teal shrink-0" aria-hidden="true" />}
+        <span className={`text-xs font-medium truncate ${isCurrent ? "text-brand-teal" : ""}`}>{template.name}</span>
+        {template.source === "user" && (
+          <span className="text-[11px] text-brand-teal/70 font-medium shrink-0">{t("custom")}</span>
+        )}
+      </div>
+      {/* Hover overlay — previews the click's meaning (insert into chat) */}
+      <span className="absolute inset-0 flex items-center justify-center gap-1 rounded-xl bg-black/60 text-xs font-medium text-foreground opacity-0 group-hover:opacity-100 transition-opacity duration-150">
+        <Plus className="h-3.5 w-3.5" />
+        {t("useTemplate")}
+      </span>
+    </button>
+  )
+}
diff --git a/web-ui/src/services/deckService.ts b/web-ui/src/services/deckService.ts
index 45ec26c7..809111b6 100644
--- a/web-ui/src/services/deckService.ts
+++ b/web-ui/src/services/deckService.ts
@@ -38,6 +38,8 @@ export interface DeckDetail {
   name: string
   slideOrder: string[]
   slides: SlidePreview[]
+  /** Confirmed template from deck.json (e.g. "corporate.pptx"), null when unconfirmed. */
+  template?: string | null
   defsUrl?: string | null
   pptxUrl: string | null
   specs?: SpecFiles | null