diff --git a/dashboard/src/App.tsx b/dashboard/src/App.tsx
index 5216e08..cd6a031 100644
--- a/dashboard/src/App.tsx
+++ b/dashboard/src/App.tsx
@@ -126,6 +126,9 @@ export function App() {
           onClick={() => setCurrentPage('events')}
           type="button"
 import { NotificationTimelineView } from './components/NotificationTimelineView';
+import { TemplatesPage } from './pages/TemplatesPage';
+
+type Tab = 'explorer' | 'timeline' | 'templates';
 import { ActivityFeed } from './components/ActivityFeed';
 import { WebhookDashboardPage } from './pages/WebhookDashboardPage';
 import { ExportHistoryPage } from './pages/ExportHistoryPage';
diff --git a/dashboard/src/index.css b/dashboard/src/index.css
index 826e70e..16e0285 100644
--- a/dashboard/src/index.css
+++ b/dashboard/src/index.css
@@ -4187,6 +4187,11 @@ body {
   }
 }
 
+/* ─── Templates Page Styles ────────────────────────────────────────────────── */
+.templates-page {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 24px;
 @media (max-width: 600px) {
   /* Stack rows as definition lists on very small screens */
   .export-table,
@@ -4583,6 +4588,30 @@ body {
   border-color: var(--hm-cell-hover-ring);
 }
 
+.templates-preview__variable input {
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.05);
+  color: inherit;
+  font-size: 0.95rem;
+}
+
+.templates-preview__content {
+  padding: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.templates-preview__subject,
+.templates-preview__body {
+  margin-top: 12px;
+}
+
+.templates-preview__body pre {
+  margin: 8px 0 0;
+  white-space: pre-wrap;
 .theme-toggle:focus-visible {
   outline: 2px solid var(--hm-accent);
   outline-offset: 2px;
diff --git a/dashboard/src/pages/TemplatesPage.tsx b/dashboard/src/pages/TemplatesPage.tsx
new file mode 100644
index 0000000..20e932d
--- /dev/null
+++ b/dashboard/src/pages/TemplatesPage.tsx
@@ -0,0 +1,259 @@
+import { useState, useEffect } from 'react';
+import {
+  NotificationTemplate,
+  CreateNotificationTemplateInput,
+  UpdateNotificationTemplateInput
+} from '../types/notificationTemplate';
+import { templatesApi } from '../services/templatesApi';
+
+type ViewMode = 'list' | 'create' | 'edit' | 'preview';
+
+export function TemplatesPage() {
+  const [templates, setTemplates] = useState<NotificationTemplate[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [viewMode, setViewMode] = useState<ViewMode>('list');
+  const [selectedTemplate, setSelectedTemplate] = useState<NotificationTemplate | null>(null);
+  const [formData, setFormData] = useState<Partial<CreateNotificationTemplateInput>>({
+    type: 'email',
+    variables: []
+  });
+  const [previewVariables, setPreviewVariables] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    loadTemplates();
+  }, []);
+
+  async function loadTemplates() {
+    try {
+      setLoading(true);
+      const data = await templatesApi.getAll();
+      setTemplates(data);
+    } catch (error) {
+      console.error('Failed to load templates:', error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function handleCreateClick() {
+    setFormData({ type: 'email', variables: [] });
+    setViewMode('create');
+  }
+
+  function handleEditClick(template: NotificationTemplate) {
+    setSelectedTemplate(template);
+    setFormData({ ...template });
+    setViewMode('edit');
+  }
+
+  function handlePreviewClick(template: NotificationTemplate) {
+    setSelectedTemplate(template);
+    setPreviewVariables({});
+    setViewMode('preview');
+  }
+
+  async function handleSave() {
+    try {
+      if (viewMode === 'create' && formData.id && formData.name && formData.body) {
+        await templatesApi.create(formData as CreateNotificationTemplateInput);
+      } else if (viewMode === 'edit' && selectedTemplate) {
+        await templatesApi.update(selectedTemplate.id, formData as UpdateNotificationTemplateInput);
+      }
+      await loadTemplates();
+      setViewMode('list');
+      setSelectedTemplate(null);
+    } catch (error) {
+      console.error('Failed to save template:', error);
+    }
+  }
+
+  async function handleDelete(id: string) {
+    if (!confirm('Are you sure you want to delete this template?')) return;
+    try {
+      await templatesApi.delete(id);
+      await loadTemplates();
+    } catch (error) {
+      console.error('Failed to delete template:', error);
+    }
+  }
+
+  function renderPreview() {
+    if (!selectedTemplate) return null;
+    const renderedSubject = selectedTemplate.subject
+      ? selectedTemplate.subject.replace(/\{\{(\w+)\}\}/g, (_, key) => previewVariables[key] || `{{${key}}}`)
+      : '';
+    const renderedBody = selectedTemplate.body.replace(/\{\{(\w+)\}\}/g, (_, key) => previewVariables[key] || `{{${key}}}`);
+
+    return (
+      <div className="templates-preview">
+        <div className="templates-preview__header">
+          <h3>Preview: {selectedTemplate.name}</h3>
+          <button
+            type="button"
+            onClick={() => setViewMode('list')}
+          >
+            Back to List
+          </button>
+        </div>
+        <div className="templates-preview__variables">
+          <h4>Variables</h4>
+          {selectedTemplate.variables?.map((varName) => (
+            <div key={varName} className="templates-preview__variable">
+              <label>{varName}:</label>
+              <input
+                type="text"
+                value={previewVariables[varName] || ''}
+                onChange={(e) => setPreviewVariables({ ...previewVariables, [varName]: e.target.value })}
+              />
+            </div>
+          ))}
+        </div>
+        <div className="templates-preview__content">
+          <h4>Rendered Template</h4>
+          {renderedSubject && (
+            <div className="templates-preview__subject">
+              <strong>Subject:</strong> {renderedSubject}
+            </div>
+          )}
+          <div className="templates-preview__body">
+            <strong>Body:</strong>
+            <pre>{renderedBody}</pre>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  function renderForm() {
+    return (
+      <div className="templates-form">
+        <div className="templates-form__header">
+          <h3>{viewMode === 'create' ? 'Create Template' : 'Edit Template'}</h3>
+          <button
+            type="button"
+            onClick={() => {
+              setViewMode('list');
+              setSelectedTemplate(null);
+            }}
+          >
+            Cancel
+          </button>
+        </div>
+        <div className="templates-form__fields">
+          <div className="templates-form__field">
+            <label>ID</label>
+            <input
+              type="text"
+              value={formData.id || ''}
+              onChange={(e) => setFormData({ ...formData, id: e.target.value })}
+              disabled={viewMode === 'edit'}
+            />
+          </div>
+          <div className="templates-form__field">
+            <label>Name</label>
+            <input
+              type="text"
+              value={formData.name || ''}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            />
+          </div>
+          <div className="templates-form__field">
+            <label>Type</label>
+            <select
+              value={formData.type || 'email'}
+              onChange={(e) => setFormData({ ...formData, type: e.target.value })}
+            >
+              <option value="email">Email</option>
+              <option value="discord">Discord</option>
+              <option value="slack">Slack</option>
+              <option value="telegram">Telegram</option>
+            </select>
+          </div>
+          <div className="templates-form__field">
+            <label>Subject (optional)</label>
+            <input
+              type="text"
+              value={formData.subject || ''}
+              onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
+            />
+          </div>
+          <div className="templates-form__field">
+            <label>Body</label>
+            <textarea
+              value={formData.body || ''}
+              onChange={(e) => setFormData({ ...formData, body: e.target.value })}
+              rows={10}
+            />
+          </div>
+          <div className="templates-form__field">
+            <label>Variables (comma-separated)</label>
+            <input
+              type="text"
+              value={(formData.variables || []).join(', ')}
+              onChange={(e) => setFormData({
+                ...formData,
+                variables: e.target.value.split(',').map((v) => v.trim()).filter(Boolean)
+              })}
+            />
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={handleSave}
+          disabled={!formData.id || !formData.name || !formData.body}
+        >
+          Save Template
+        </button>
+      </div>
+    );
+  }
+
+  function renderList() {
+    if (loading) return <div>Loading templates...</div>;
+
+    return (
+      <div className="templates-list">
+        <div className="templates-list__header">
+          <h3>Templates</h3>
+          <button type="button" onClick={handleCreateClick}>
+            Create Template
+          </button>
+        </div>
+        <div className="templates-list__items">
+          {templates.map((template) => (
+            <div key={template.id} className="templates-list__item">
+              <div className="templates-list__item-info">
+                <h4>{template.name}</h4>
+                <p>Type: {template.type}</p>
+                {template.subject && <p>Subject: {template.subject}</p>}
+                <p className="templates-list__item-body">{template.body.substring(0, 100)}...</p>
+              </div>
+              <div className="templates-list__item-actions">
+                <button type="button" onClick={() => handlePreviewClick(template)}>
+                  Preview
+                </button>
+                <button type="button" onClick={() => handleEditClick(template)}>
+                  Edit
+                </button>
+                <button type="button" onClick={() => handleDelete(template.id)}>
+                  Delete
+                </button>
+              </div>
+            </div>
+          ))}
+          {templates.length === 0 && (
+            <p className="templates-list__empty">No templates yet. Create your first template!</p>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="templates-page">
+      {viewMode === 'list' && renderList()}
+      {(viewMode === 'create' || viewMode === 'edit') && renderForm()}
+      {viewMode === 'preview' && renderPreview()}
+    </div>
+  );
+}
diff --git a/dashboard/src/services/templatesApi.ts b/dashboard/src/services/templatesApi.ts
new file mode 100644
index 0000000..8b91ba0
--- /dev/null
+++ b/dashboard/src/services/templatesApi.ts
@@ -0,0 +1,48 @@
+import {
+  NotificationTemplate,
+  CreateNotificationTemplateInput,
+  UpdateNotificationTemplateInput
+} from '../types/notificationTemplate';
+
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:3000/api';
+
+export const templatesApi = {
+  async getAll(): Promise<NotificationTemplate[]> {
+    const response = await fetch(`${API_BASE}/templates`);
+    if (!response.ok) throw new Error('Failed to fetch templates');
+    return response.json();
+  },
+
+  async getById(id: string): Promise<NotificationTemplate> {
+    const response = await fetch(`${API_BASE}/templates/${encodeURIComponent(id)}`);
+    if (!response.ok) throw new Error('Failed to fetch template');
+    return response.json();
+  },
+
+  async create(input: CreateNotificationTemplateInput): Promise<NotificationTemplate> {
+    const response = await fetch(`${API_BASE}/templates`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(input)
+    });
+    if (!response.ok) throw new Error('Failed to create template');
+    return response.json();
+  },
+
+  async update(id: string, input: UpdateNotificationTemplateInput): Promise<NotificationTemplate> {
+    const response = await fetch(`${API_BASE}/templates/${encodeURIComponent(id)}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(input)
+    });
+    if (!response.ok) throw new Error('Failed to update template');
+    return response.json();
+  },
+
+  async delete(id: string): Promise<void> {
+    const response = await fetch(`${API_BASE}/templates/${encodeURIComponent(id)}`, {
+      method: 'DELETE'
+    });
+    if (!response.ok) throw new Error('Failed to delete template');
+  }
+};
diff --git a/dashboard/src/types/notificationTemplate.ts b/dashboard/src/types/notificationTemplate.ts
new file mode 100644
index 0000000..125bd02
--- /dev/null
+++ b/dashboard/src/types/notificationTemplate.ts
@@ -0,0 +1,30 @@
+export interface NotificationTemplate {
+  id: string;
+  name: string;
+  type: string;
+  subject?: string;
+  body: string;
+  variables?: string[];
+  metadata?: Record<string, unknown>;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreateNotificationTemplateInput {
+  id: string;
+  name: string;
+  type: string;
+  subject?: string;
+  body: string;
+  variables?: string[];
+  metadata?: Record<string, unknown>;
+}
+
+export interface UpdateNotificationTemplateInput {
+  name?: string;
+  type?: string;
+  subject?: string;
+  body?: string;
+  variables?: string[];
+  metadata?: Record<string, unknown>;
+}
diff --git a/listener/src/api/events-server.ts b/listener/src/api/events-server.ts
index 6bd5e46..e4ce703 100644
--- a/listener/src/api/events-server.ts
+++ b/listener/src/api/events-server.ts
@@ -1024,6 +1024,58 @@ export function createEventsServer(options: EventsServerOptions): http.Server {
       return;
     }
 
+    // GET /api/templates
+    if (req.method === 'GET' && url.pathname === '/api/templates') {
+      if (!options.templateService) {
+        res.writeHead(503, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Template service not enabled' }));
+        return;
+      }
+
+      logger.info('Handling GET /api/templates', { requestId, correlationId });
+      options.templateService.getAll()
+        .then((templates) => {
+          res.writeHead(200, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify(templates.map(serializeTemplate)));
+        })
+        .catch((error) => {
+          logger.error('Failed to load templates', { error, requestId, correlationId });
+          res.writeHead(500, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ error: (error as Error).message }));
+        });
+      return;
+    }
+
+    // DELETE /api/templates/:id
+    const deleteTemplateMatch = url.pathname.match(/^\/api\/templates\/([^/]+)$/);
+    if (req.method === 'DELETE' && deleteTemplateMatch) {
+      if (!options.templateService) {
+        res.writeHead(503, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Template service not enabled' }));
+        return;
+      }
+
+      const templateId = decodeURIComponent(deleteTemplateMatch[1]);
+      logger.info('Handling DELETE /api/templates/:id', { requestId, correlationId, templateId });
+
+      options.templateService.delete(templateId)
+        .then(() => {
+          res.writeHead(204);
+          res.end();
+        })
+        .catch((error) => {
+          if (error instanceof TemplateNotFoundError) {
+            res.writeHead(404, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: error.message }));
+            return;
+          }
+          logger.error('Failed to delete template', { error, requestId, correlationId, templateId });
+          res.writeHead(500, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ error: (error as Error).message }));
+        });
+      return;
+    }
+
     // POST /api/templates
     if (req.method === 'POST' && url.pathname === '/api/templates') {
       if (!options.templateService) {
diff --git a/listener/src/services/notification-template-repository.ts b/listener/src/services/notification-template-repository.ts
index 814c8a9..9cf13bb 100644
--- a/listener/src/services/notification-template-repository.ts
+++ b/listener/src/services/notification-template-repository.ts
@@ -149,6 +149,11 @@ export class NotificationTemplateRepository {
     return persisted;
   }
 
+  async getAll(): Promise<NotificationTemplate[]> {
+    const rows = await this.db.all<NotificationTemplateRow>(
+      'SELECT * FROM notification_templates',
+    );
+    return rows.map(row => this.rowToModel(row));
   async listAll(): Promise<NotificationTemplate[]> {
     const rows = await this.db.all<NotificationTemplateRow>(
       'SELECT * FROM notification_templates ORDER BY created_at DESC',
diff --git a/listener/src/services/notification-template-service.ts b/listener/src/services/notification-template-service.ts
index 013335a..92356bd 100644
--- a/listener/src/services/notification-template-service.ts
+++ b/listener/src/services/notification-template-service.ts
@@ -77,6 +77,14 @@ export class NotificationTemplateService {
     return this.repository.update(templateId, input, actor);
   }
 
+  async getAll(): Promise<NotificationTemplate[]> {
+    return this.repository.getAll();
+  }
+
+  async delete(templateId: string): Promise<void> {
+    return this.repository.delete(templateId);
+  }
+
   async getAuditHistory(templateId: string): Promise<TemplateAuditRecord[]> {
     return this.repository.getUpdateHistory(templateId);
   }