diff --git a/assets/router/index.js b/assets/router/index.js
index 9cdbb48..715f3f7 100644
--- a/assets/router/index.js
+++ b/assets/router/index.js
@@ -5,6 +5,8 @@ import ListsView from '../vue/views/ListsView.vue'
 import ListSubscribersView from '../vue/views/ListSubscribersView.vue'
 import CampaignsView from '../vue/views/CampaignsView.vue'
 import CampaignEditView from '../vue/views/CampaignEditView.vue'
+import TemplatesView from '../vue/views/TemplatesView.vue'
+import TemplateEditView from '../vue/views/TemplateEditView.vue'
 
 export const router = createRouter({
     history: createWebHistory(),
@@ -13,6 +15,8 @@ export const router = createRouter({
         { path: '/subscribers', name: 'subscribers', component: SubscribersView, meta: { title: 'Subscribers' } },
         { path: '/lists', name: 'lists', component: ListsView, meta: { title: 'Lists' } },
         { path: '/campaigns', name: 'campaigns', component: CampaignsView, meta: { title: 'Campaigns' } },
+        { path: '/templates', name: 'templates', component: TemplatesView, meta: { title: 'Templates' } },
+        { path: '/templates/:templateId/edit', name: 'template-edit', component: TemplateEditView, meta: { title: 'Edit Template' } },
         { path: '/campaigns/create', name: 'campaign-create', component: CampaignEditView, meta: { title: 'Create Campaign' } },
         { path: '/campaigns/:campaignId/edit', name: 'campaign-edit', component: CampaignEditView, meta: { title: 'Edit Campaign' } },
         { path: '/lists/:listId/subscribers', name: 'list-subscribers', component: ListSubscribersView, meta: { title: 'List Subscribers' } },
diff --git a/assets/vue/components/templates/TemplateLibrary.vue b/assets/vue/components/templates/TemplateLibrary.vue
new file mode 100644
index 0000000..c677f4d
--- /dev/null
+++ b/assets/vue/components/templates/TemplateLibrary.vue
@@ -0,0 +1,148 @@
+<template>
+  <section class="bg-white rounded-xl border border-slate-200 shadow-sm">
+    <header class="p-6 border-b border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-4">
+      <h2 class="text-xl font-bold text-slate-900">Email Template Library</h2>
+      <div class="flex gap-2">
+        <button
+          class="px-4 py-2 bg-ext-wf1 hover:bg-ext-wf3 text-white text-sm font-medium rounded-lg flex items-center gap-2 transition-colors"
+          type="button"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M5 12h14"></path>
+            <path d="M12 5v14"></path>
+          </svg>
+          New Template
+        </button>
+      </div>
+    </header>
+
+    <div class="p-6">
+      <div v-if="isLoading" class="py-12 text-center text-slate-500">
+        Loading templates...
+      </div>
+
+      <div v-else-if="errorMessage" class="py-12 text-center text-red-600">
+        {{ errorMessage }}
+      </div>
+
+      <div v-else-if="templates.length === 0" class="py-12 text-center text-slate-500">
+        No templates found.
+      </div>
+
+      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <article
+          v-for="templateItem in templates"
+          :key="templateItem.id"
+          class="border border-slate-200 rounded-lg overflow-hidden hover:shadow-lg transition-all"
+        >
+          <div class="aspect-video bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center text-6xl">
+            {{ getTemplateEmoji(templateItem.id) }}
+          </div>
+
+          <div class="p-4">
+            <h3 class="font-semibold text-slate-900 mb-1">{{ templateItem.title || `Template #${templateItem.id}` }}</h3>
+            <p class="text-xs text-slate-500 mb-3">
+              {{ getTemplateType(templateItem) }}
+            </p>
+
+            <div class="flex justify-between items-center text-xs text-slate-400">
+              <span>ID {{ templateItem.id }}</span>
+              <span>Order {{ templateItem.order ?? '-' }}</span>
+            </div>
+
+            <div class="mt-4 flex gap-2">
+              <button
+                class="flex-1 px-3 py-2 bg-ext-wf1 hover:bg-ext-wf3 text-white text-sm rounded-lg transition-colors flex items-center justify-center gap-1"
+                type="button"
+                @click="goToEditTemplate(templateItem.id)"
+              >
+                <BaseIcon name="edit" />
+                Edit
+              </button>
+
+              <button
+                class="px-3 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors"
+                type="button"
+                aria-label="Copy template"
+              >
+                <BaseIcon name="copy" />
+              </button>
+
+              <button
+                class="px-3 py-2 border border-slate-200 rounded-lg hover:bg-red-50 transition-colors"
+                type="button"
+                aria-label="Delete template"
+              >
+                <BaseIcon name="delete" />
+              </button>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import BaseIcon from '../base/BaseIcon.vue'
+import { templateClient } from '../../api'
+
+const router = useRouter()
+const templates = ref([])
+const isLoading = ref(false)
+const errorMessage = ref('')
+
+const emojiPool = ['📧', '🚀', '👋', '🛒', '🎉', '📝', '✨', '📢', '💼', '🎯']
+
+const getTemplateEmoji = (id) => {
+  if (!Number.isFinite(id)) {
+    return '📄'
+  }
+
+  return emojiPool[id % emojiPool.length]
+}
+
+const getTemplateType = (templateItem) => {
+  const hasHtml = typeof templateItem.content === 'string' && templateItem.content.trim().length > 0
+  const hasText = typeof templateItem.text === 'string' && templateItem.text.trim().length > 0
+
+  if (hasHtml && hasText) {
+    return 'html + text'
+  }
+
+  if (hasHtml) {
+    return 'html'
+  }
+
+  if (hasText) {
+    return 'text'
+  }
+
+  return 'empty'
+}
+
+const loadTemplates = async () => {
+  isLoading.value = true
+  errorMessage.value = ''
+
+  try {
+    const response = await templateClient.getTemplates(0, 1000)
+    templates.value = Array.isArray(response?.items) ? response.items : []
+  } catch (error) {
+    console.error('Failed to load templates:', error)
+    errorMessage.value = 'Failed to load templates.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const goToEditTemplate = (templateId) => {
+  router.push(`/templates/${templateId}/edit`)
+}
+
+onMounted(() => {
+  loadTemplates()
+})
+</script>
diff --git a/assets/vue/views/TemplateEditView.vue b/assets/vue/views/TemplateEditView.vue
new file mode 100644
index 0000000..b5e69d6
--- /dev/null
+++ b/assets/vue/views/TemplateEditView.vue
@@ -0,0 +1,238 @@
+<template>
+  <AdminLayout>
+    <section class="max-w-3xl bg-white rounded-xl border border-slate-200 shadow-sm">
+      <header class="p-6 border-b border-slate-200">
+        <h1 class="text-xl font-bold text-slate-900">Edit Template</h1>
+      </header>
+
+      <div class="p-6">
+        <div v-if="isLoading" class="py-8 text-center text-slate-500">
+          Loading template...
+        </div>
+
+        <div v-else class="space-y-6">
+          <div v-if="loadError" class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+            {{ loadError }}
+          </div>
+
+          <form v-else class="space-y-6" @submit.prevent="saveTemplate">
+            <div class="space-y-2">
+              <label for="template-title" class="block text-sm font-medium text-slate-700">Title</label>
+              <input
+                id="template-title"
+                v-model.trim="form.title"
+                type="text"
+                class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+                placeholder="Enter template title"
+                required
+              >
+            </div>
+
+            <CkEditorField
+              id="template-content"
+              v-model="form.content"
+              label="Content"
+            />
+
+            <div class="space-y-2">
+              <div class="flex items-center justify-between gap-2">
+                <label for="template-text" class="block text-sm font-medium text-slate-700">Text version</label>
+                <button
+                  type="button"
+                  class="px-3 py-1.5 border border-slate-200 rounded-lg hover:bg-slate-50 text-xs text-slate-700 transition-colors"
+                  @click="populateTextFromContent"
+                >
+                  Use HTML as plain text
+                </button>
+              </div>
+              <textarea
+                id="template-text"
+                v-model="form.text"
+                rows="7"
+                class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+                placeholder="[CONTENT]"
+              />
+            </div>
+
+            <div class="space-y-2">
+              <label for="template-file" class="block text-sm font-medium text-slate-700">Template file</label>
+              <input
+                id="template-file"
+                type="file"
+                accept=".html,.htm,.txt"
+                class="block w-full text-sm text-slate-700 file:mr-4 file:rounded-lg file:border-0 file:bg-ext-wf2 file:px-3 file:py-2 file:text-ext-wf3 hover:file:bg-indigo-100"
+                @change="handleFileChange"
+              >
+            </div>
+
+            <div class="space-y-2">
+              <label class="block text-sm font-medium text-slate-700">Checks</label>
+              <div class="space-y-2 rounded-lg border border-slate-200 p-4">
+                <label class="flex items-center gap-2 text-sm text-slate-700">
+                  <input
+                    v-model="form.checkLinks"
+                    type="checkbox"
+                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1"
+                  >
+                  Check that all links have a full URL
+                </label>
+                <label class="flex items-center gap-2 text-sm text-slate-700">
+                  <input
+                    v-model="form.checkImages"
+                    type="checkbox"
+                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1"
+                  >
+                  Check that all images have a full URL
+                </label>
+                <label class="flex items-center gap-2 text-sm text-slate-700">
+                  <input
+                    v-model="form.checkExternalImages"
+                    type="checkbox"
+                    class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1"
+                  >
+                  Check that all external images exist
+                </label>
+              </div>
+            </div>
+
+            <div v-if="saveError" class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+              {{ saveError }}
+            </div>
+            <div v-if="saveSuccess" class="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
+              {{ saveSuccess }}
+            </div>
+
+            <div class="flex items-center justify-end gap-2">
+              <RouterLink
+                to="/templates"
+                class="px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 text-sm text-slate-700 transition-colors"
+              >
+                Cancel
+              </RouterLink>
+              <button
+                type="submit"
+                class="px-4 py-2 bg-ext-wf1 hover:bg-ext-wf3 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
+                :disabled="isSaving"
+              >
+                {{ isSaving ? 'Saving...' : 'Save' }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+  </AdminLayout>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
+import AdminLayout from '../layouts/AdminLayout.vue'
+import CkEditorField from '../components/base/CkEditorField.vue'
+import apiClient, { templateClient } from '../api'
+
+const route = useRoute()
+
+const isLoading = ref(false)
+const loadError = ref('')
+const isSaving = ref(false)
+const saveError = ref('')
+const saveSuccess = ref('')
+const form = ref({
+  title: '',
+  content: '',
+  text: '',
+  file: null,
+  checkLinks: false,
+  checkImages: false,
+  checkExternalImages: false
+})
+
+const templateId = computed(() => route.params.templateId)
+
+const loadTemplate = async () => {
+  if (!templateId.value) {
+    loadError.value = 'Template ID is missing.'
+    return
+  }
+
+  isLoading.value = true
+  loadError.value = ''
+
+  try {
+    const template = await templateClient.getTemplate(templateId.value)
+    form.value.title = template?.title || ''
+    form.value.content = template?.content || ''
+    form.value.text = template?.text || ''
+    form.value.file = null
+  } catch (error) {
+    console.error('Failed to load template:', error)
+    loadError.value = 'Failed to load template.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const populateTextFromContent = () => {
+  if (!form.value.content) {
+    form.value.text = ''
+    return
+  }
+
+  form.value.text = form.value.content
+    .replace(/<style[\s\S]*?<\/style>/gi, ' ')
+    .replace(/<script[\s\S]*?<\/script>/gi, ' ')
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+const handleFileChange = (event) => {
+  const [file] = event.target.files || []
+  form.value.file = file || null
+}
+
+const saveTemplate = async () => {
+  if (!templateId.value) {
+    saveError.value = 'Template ID is missing.'
+    return
+  }
+
+  if (!form.value.title) {
+    saveError.value = 'Title is required.'
+    return
+  }
+
+  isSaving.value = true
+  saveError.value = ''
+  saveSuccess.value = ''
+
+  try {
+    const payload = new FormData()
+    payload.append('title', form.value.title)
+    payload.append('content', form.value.content || '')
+    payload.append('text', form.value.text || '')
+    payload.append('check_links', String(form.value.checkLinks))
+    payload.append('check_images', String(form.value.checkImages))
+    payload.append('check_external_images', String(form.value.checkExternalImages))
+
+    if (form.value.file instanceof File) {
+      payload.append('file', form.value.file)
+    }
+
+    await apiClient.put(`templates/${templateId.value}`, payload, {
+      'Content-Type': 'multipart/form-data'
+    })
+    saveSuccess.value = 'Template updated successfully.'
+  } catch (error) {
+    console.error('Failed to save template:', error)
+    saveError.value = error?.message || 'Failed to save template.'
+  } finally {
+    isSaving.value = false
+  }
+}
+
+onMounted(() => {
+  loadTemplate()
+})
+</script>
diff --git a/assets/vue/views/TemplatesView.vue b/assets/vue/views/TemplatesView.vue
new file mode 100644
index 0000000..06ddeda
--- /dev/null
+++ b/assets/vue/views/TemplatesView.vue
@@ -0,0 +1,12 @@
+<template>
+  <AdminLayout>
+    <div class="space-y-6 animate-in fade-in duration-300">
+      <TemplateLibrary />
+    </div>
+  </AdminLayout>
+</template>
+
+<script setup>
+import AdminLayout from '../layouts/AdminLayout.vue'
+import TemplateLibrary from '../components/templates/TemplateLibrary.vue'
+</script>
diff --git a/src/Controller/TemplatesController.php b/src/Controller/TemplatesController.php
new file mode 100644
index 0000000..b76c428
--- /dev/null
+++ b/src/Controller/TemplatesController.php
@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+#[Route('/templates', name: 'template_')]
+class TemplatesController extends AbstractController
+{
+    #[Route('/', name: 'templates', methods: ['GET'])]
+    public function index(Request $request): Response
+    {
+        return $this->render('@PhpListFrontend/spa.html.twig', [
+            'page' => 'Campaigns',
+            'api_token' => $request->getSession()->get('auth_token'),
+            'api_base_url' => $this->getParameter('api_base_url'),
+        ]);
+    }
+
+    #[Route('/{templateId}/edit', name: 'edit', methods: ['GET'])]
+    public function edit(Request $request, int $templateId): Response
+    {
+        return $this->render('@PhpListFrontend/spa.html.twig', [
+            'page' => sprintf('Edit Template #%d', $templateId),
+            'api_token' => $request->getSession()->get('auth_token'),
+            'api_base_url' => $this->getParameter('api_base_url'),
+        ]);
+    }
+}