diff --git a/README.md b/README.md
index 185b65d..0971e85 100644
--- a/README.md
+++ b/README.md
@@ -67,3 +67,56 @@ To add new Vue components:
 1. Create the component in the `assets/vue/` directory
 2. Import and mount it in `assets/app.js`
 3. Add a mount point in the appropriate template
+
+## CKEditor 5 Integration
+
+The rich text editor lives in `assets/editor/` and is exposed to the existing forms through `assets/vue/components/base/CkEditorField.vue`.
+
+### Architecture
+
+- `assets/editor/CkEditor.vue` is the reusable Vue 3 editor component.
+- `assets/editor/uploadAdapter.ts` provides CKEditor upload support against a Symfony endpoint.
+- `assets/editor/assetBrowserPlugin.js` adds a toolbar button that opens the native asset browser.
+- `assets/editor/EditorAssetPicker.vue` shows existing uploaded files and inserts them as images or links.
+- `assets/editor/plugins.ts` and `assets/editor/toolbar.ts` keep the editor configuration isolated and reusable.
+- `src/Service/EditorUploadService.php` stores uploads in the public filesystem and returns a browser URL.
+- `src/Controller/EditorUploadController.php` accepts authenticated uploads and lists existing assets.
+
+### Reused from the legacy plugin
+
+- upload path conventions
+- image validation rules
+- public-file URL generation strategy
+- file storage separation for editor content
+- asset browsing behavior, expressed as a native Vue modal instead of a popup window
+
+### New behavior
+
+- Vue component with `v-model`
+- configurable toolbar and CKEditor options
+- upload adapter with progress support
+- cleanup on unmount
+- read-only mode support
+- existing file browser for reusing uploaded content
+
+### Build and test
+
+```bash
+yarn encore dev
+yarn test:vue
+vendor/bin/phpunit
+```
+
+### Configuration
+
+The backend uses the existing phpList upload directory parameters:
+
+- `phplist.upload_images_dir`
+
+Uploads are stored below `public/<phplist.upload_images_dir>/ckeditor5/`.
+
+### Limitations
+
+- This integration only covers image uploads from CKEditor.
+- elFinder is not embedded in the frontend UI; the frontend now provides a native asset browser instead.
+- Existing legacy HTML content is preserved as-is, but custom HTML support still depends on CKEditor 5 output rules.
diff --git a/assets/editor/CkEditor.vue b/assets/editor/CkEditor.vue
new file mode 100644
index 0000000..1439afb
--- /dev/null
+++ b/assets/editor/CkEditor.vue
@@ -0,0 +1,278 @@
+<template>
+  <ckeditor
+    :id="fieldId"
+    v-model="localValue"
+    :editor="ClassicEditor"
+    :config="editorConfig"
+    :disabled="isDisabled"
+    :style="editorStyle"
+    @ready="handleReady"
+  />
+
+  <EditorAssetPicker
+    :open="assetPickerOpen"
+    :items="assetItems"
+    :query="assetQuery"
+    :loading="assetLoading"
+    :error="assetError"
+    @close="closeAssetPicker"
+    @refresh="loadAssets"
+    @select="insertAsset"
+    @update:query="assetQuery = $event"
+  />
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, ref, shallowRef, useId, watch } from 'vue';
+import { Ckeditor } from '@ckeditor/ckeditor5-vue';
+import { ClassicEditor } from 'ckeditor5';
+
+import { DEFAULT_PLUGINS } from './plugins.ts';
+import { DEFAULT_IMAGE_TOOLBAR, DEFAULT_TOOLBAR } from './toolbar.ts';
+import EditorUploadAdapter from './uploadAdapter.ts';
+import EditorAssetPicker from './EditorAssetPicker.vue';
+
+import 'ckeditor5/ckeditor5.css';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  id: {
+    type: String,
+    default: '',
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  minHeight: {
+    type: [Number, String],
+    default: 300,
+  },
+  uploadEndpoint: {
+    type: String,
+    default: '/editor/upload',
+  },
+  assetsEndpoint: {
+    type: String,
+    default: '/editor/assets',
+  },
+  uploadHeaders: {
+    type: Object,
+    default: () => ({}),
+  },
+  withCredentials: {
+    type: Boolean,
+    default: true,
+  },
+  toolbar: {
+    type: Array,
+    default: null,
+  },
+  plugins: {
+    type: Array,
+    default: () => [],
+  },
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'ready', 'error']);
+
+const generatedId = useId();
+const fieldId = computed(() => props.id || `ckeditor-${generatedId}`);
+
+const localValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
+
+const editorRef = shallowRef(null);
+const assetPickerOpen = ref(false);
+const assetLoading = ref(false);
+const assetError = ref('');
+const assetItems = ref([]);
+const assetQuery = ref('');
+
+const isDisabled = computed(() => props.disabled || props.readonly);
+const editorStyle = computed(() => ({
+  '--editor-min-height': typeof props.minHeight === 'number'
+    ? `${props.minHeight}px`
+    : String(props.minHeight),
+}));
+
+const editorConfig = computed(() => {
+  const config = props.config || {};
+  const extraPlugins = Array.isArray(config.plugins) ? config.plugins : [];
+  const toolbar = Array.isArray(props.toolbar) && props.toolbar.length > 0
+    ? props.toolbar
+    : Array.isArray(config.toolbar) && config.toolbar.length > 0
+      ? config.toolbar
+      : DEFAULT_TOOLBAR;
+
+  const imageConfig = {
+    toolbar: DEFAULT_IMAGE_TOOLBAR,
+    ...(config.image || {}),
+  };
+  const htmlSupportConfig = config.htmlSupport || {};
+  const htmlSupport = {
+    allow: htmlSupportConfig.allow || [
+      {
+        name: /.*/,
+        attributes: true,
+        classes: true,
+        styles: true,
+      },
+    ],
+    disallow: [
+      { name: 'script' },
+      { name: 'iframe' },
+      { name: /.*/, attributes: { key: /^on.*/ } },
+      ...(Array.isArray(htmlSupportConfig.disallow) ? htmlSupportConfig.disallow : []),
+    ],
+  };
+
+  return {
+    ...config,
+    licenseKey: config.licenseKey || 'GPL',
+    plugins: [
+      ...DEFAULT_PLUGINS,
+      ...(Array.isArray(props.plugins) ? props.plugins : []),
+      ...extraPlugins,
+    ],
+    toolbar,
+    image: imageConfig,
+    htmlSupport,
+    openAssetPicker: openAssetPicker,
+  };
+});
+
+const installUploadAdapter = (editor) => {
+  const fileRepository = editor.plugins.get('FileRepository');
+
+  fileRepository.createUploadAdapter = (loader) => new EditorUploadAdapter(loader, {
+    endpoint: props.uploadEndpoint,
+    headers: props.uploadHeaders,
+    withCredentials: props.withCredentials,
+  });
+};
+
+const syncReadOnlyState = (editor) => {
+  if (props.readonly) {
+    editor.enableReadOnlyMode('ckeditor-field');
+    return;
+  }
+
+  editor.disableReadOnlyMode('ckeditor-field');
+};
+
+const loadAssets = async () => {
+  assetLoading.value = true;
+  assetError.value = '';
+
+  try {
+    const response = await fetch(props.assetsEndpoint, {
+      headers: {
+        'X-Requested-With': 'XMLHttpRequest',
+      },
+      credentials: props.withCredentials ? 'include' : 'same-origin',
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to load assets (${response.status})`);
+    }
+
+    const payload = await response.json();
+    assetItems.value = Array.isArray(payload?.items) ? payload.items : [];
+  } catch (error) {
+    assetError.value = error?.message || 'Failed to load assets.';
+  } finally {
+    assetLoading.value = false;
+  }
+};
+
+const openAssetPicker = async () => {
+  assetPickerOpen.value = true;
+
+  if (assetItems.value.length === 0 && !assetLoading.value) {
+    await loadAssets();
+  }
+};
+
+const closeAssetPicker = () => {
+  assetPickerOpen.value = false;
+};
+
+const getSelectedEditor = () => editorRef.value;
+
+const insertAsset = (asset) => {
+  if (!asset) {
+    return;
+  }
+
+  const editor = getSelectedEditor();
+  if (!editor) {
+    return;
+  }
+
+  editor.model.change((writer) => {
+    if (asset.isImage) {
+      const imageElement = writer.createElement('imageBlock', {
+        src: asset.url,
+        alt: asset.fileName,
+      });
+      editor.model.insertContent(imageElement, editor.model.document.selection);
+      return;
+    }
+
+    const linkText = asset.fileName || asset.url;
+    const textNode = writer.createText(linkText, { linkHref: asset.url });
+    editor.model.insertContent(textNode, editor.model.document.selection);
+  });
+
+  closeAssetPicker();
+};
+
+const handleReady = (editor) => {
+  editorRef.value = editor;
+  installUploadAdapter(editor);
+  syncReadOnlyState(editor);
+  emit('ready', editor);
+};
+
+watch(
+  () => props.readonly,
+  () => {
+    if (!editorRef.value) {
+      return;
+    }
+
+    syncReadOnlyState(editorRef.value);
+  }
+);
+
+onBeforeUnmount(() => {
+  if (!editorRef.value) {
+    return;
+  }
+
+  const editor = editorRef.value;
+  editorRef.value = null;
+  editor.destroy();
+});
+</script>
+
+<style scoped>
+:deep(.ck-editor__editable_inline) {
+  min-height: var(--editor-min-height, 300px);
+  overflow-y: auto;
+}
+</style>
diff --git a/assets/editor/EditorAssetPicker.vue b/assets/editor/EditorAssetPicker.vue
new file mode 100644
index 0000000..ba16dc2
--- /dev/null
+++ b/assets/editor/EditorAssetPicker.vue
@@ -0,0 +1,218 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/50 p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="editor-asset-picker-title"
+      @keydown.esc="$emit('close')"
+    >
+      <div class="w-full max-w-5xl overflow-hidden rounded-lg border border-slate-200 bg-white shadow-xl">
+        <div class="flex items-center justify-between gap-3 border-b border-slate-200 px-4 py-3">
+          <div class="min-w-0">
+            <h3 id="editor-asset-picker-title" class="text-sm font-semibold text-slate-900">
+              Choose an existing asset
+            </h3>
+            <p class="text-xs text-slate-500">Pick a file to insert it at the cursor position.</p>
+          </div>
+
+          <button
+            type="button"
+            class="rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
+            @click="$emit('close')"
+          >
+            Close
+          </button>
+        </div>
+
+        <div class="flex flex-col gap-3 border-b border-slate-200 px-4 py-3 sm:flex-row sm:items-center">
+          <input
+            ref="searchInput"
+            :value="query"
+            type="search"
+            class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 outline-none focus:border-ext-wf1 focus:ring-2 focus:ring-ext-wf2"
+            placeholder="Search by file name"
+            @input="$emit('update:query', $event.target.value)"
+          >
+
+          <button
+            type="button"
+            class="rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
+            @click="$emit('refresh')"
+          >
+            Refresh
+          </button>
+        </div>
+
+        <div class="max-h-[60vh] overflow-auto">
+          <div v-if="loading" class="px-4 py-8 text-sm text-slate-500">
+            Loading assets...
+          </div>
+
+          <div v-else-if="error" class="px-4 py-8 text-sm text-red-600">
+            {{ error }}
+          </div>
+
+          <table v-else class="w-full table-fixed border-separate border-spacing-0">
+            <thead class="sticky top-0 bg-slate-50">
+              <tr class="text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
+                <th class="w-24 border-b border-slate-200 px-4 py-3">Preview</th>
+                <th class="border-b border-slate-200 px-4 py-3">Name</th>
+                <th class="w-32 border-b border-slate-200 px-4 py-3">Type</th>
+                <th class="w-28 border-b border-slate-200 px-4 py-3">Size</th>
+                <th class="w-40 border-b border-slate-200 px-4 py-3">Updated</th>
+                <th class="w-28 border-b border-slate-200 px-4 py-3"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="!filteredItems.length">
+                <td colspan="6" class="px-4 py-8 text-center text-sm text-slate-500">
+                  No assets found.
+                </td>
+              </tr>
+
+              <tr
+                v-for="item in filteredItems"
+                :key="item.url"
+                class="border-b border-slate-100 text-sm text-slate-700 hover:bg-slate-50"
+              >
+                <td class="px-4 py-3 align-top">
+                  <img
+                    v-if="item.isImage"
+                    :src="item.url"
+                    :alt="item.fileName.slice(0, 5) + '...'"
+                    class="h-14 w-14 rounded border border-slate-200 object-cover"
+                  >
+                  <div
+                    v-else
+                    class="flex h-14 w-14 items-center justify-center rounded border border-slate-200 bg-slate-50 text-xs font-semibold uppercase text-slate-500"
+                  >
+                    {{ extensionLabel(item.fileName) }}
+                  </div>
+                </td>
+                <td class="px-4 py-3 align-top">
+                  <p class="break-all font-medium text-slate-900">{{ item.fileName }}</p>
+                  <p class="break-all text-xs text-slate-500">{{ item.url }}</p>
+                </td>
+                <td class="px-4 py-3 align-top text-xs uppercase text-slate-500">
+                  {{ item.mimeType }}
+                </td>
+                <td class="px-4 py-3 align-top text-sm text-slate-600">
+                  {{ formatBytes(item.size) }}
+                </td>
+                <td class="px-4 py-3 align-top text-sm text-slate-600">
+                  {{ formatDate(item.modifiedAt) }}
+                </td>
+                <td class="px-4 py-3 align-top text-right">
+                  <button
+                    type="button"
+                    class="rounded-lg bg-ext-wf1 px-3 py-2 text-sm font-medium text-white hover:bg-ext-wf3"
+                    @click="$emit('select', item)"
+                  >
+                    Insert
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="flex items-center justify-between gap-3 border-t border-slate-200 px-4 py-3 text-sm text-slate-600">
+          <span>{{ filteredItems.length }} asset{{ filteredItems.length === 1 ? '' : 's' }}</span>
+          <span class="text-xs text-slate-500">Choose a row to insert it immediately.</span>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, nextTick, ref, watch } from 'vue'
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: false,
+  },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  query: {
+    type: String,
+    default: '',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: String,
+    default: '',
+  },
+})
+
+defineEmits(['close', 'refresh', 'select', 'update:query'])
+
+const searchInput = ref(null)
+let previouslyFocused = null
+
+watch(
+  () => props.open,
+  (isOpen) => {
+    if (isOpen) {
+      previouslyFocused = document.activeElement
+      nextTick(() => {
+        searchInput.value?.focus()
+      })
+    } else if (previouslyFocused instanceof HTMLElement) {
+      previouslyFocused.focus()
+      previouslyFocused = null
+    }
+  },
+)
+
+const filteredItems = computed(() => {
+  const needle = props.query.trim().toLowerCase()
+
+  if (!needle) {
+    return props.items
+  }
+
+  return props.items.filter((item) => {
+    const haystack = `${item.fileName} ${item.mimeType}`.toLowerCase()
+    return haystack.includes(needle)
+  })
+})
+
+const formatBytes = (size) => {
+  if (!Number.isFinite(size) || size <= 0) {
+    return '0 B'
+  }
+
+  const units = ['B', 'KB', 'MB', 'GB']
+  let value = size
+  let unitIndex = 0
+
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024
+    unitIndex += 1
+  }
+
+  return `${value.toFixed(value >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`
+}
+
+const formatDate = (timestamp) => {
+  if (!Number.isFinite(timestamp) || timestamp <= 0) {
+    return 'Unknown'
+  }
+
+  return new Date(timestamp * 1000).toLocaleString()
+}
+
+const extensionLabel = (fileName) => {
+  const parts = String(fileName).split('.')
+  return parts.length > 1 ? parts.pop().toUpperCase() : 'FILE'
+}
+</script>
diff --git a/assets/editor/assetBrowserPlugin.js b/assets/editor/assetBrowserPlugin.js
new file mode 100644
index 0000000..1bf752e
--- /dev/null
+++ b/assets/editor/assetBrowserPlugin.js
@@ -0,0 +1,26 @@
+import { ButtonView, Plugin } from 'ckeditor5';
+
+export default class AssetBrowserPlugin extends Plugin {
+  init() {
+    const editor = this.editor;
+
+    editor.ui.componentFactory.add('assetBrowser', (locale) => {
+      const view = new ButtonView(locale);
+      const openAssetPicker = editor.config.get('openAssetPicker');
+
+      view.set({
+        label: 'Browse files',
+        tooltip: true,
+        withText: true,
+      });
+
+      view.on('execute', () => {
+        if (typeof openAssetPicker === 'function') {
+          openAssetPicker(editor);
+        }
+      });
+
+      return view;
+    });
+  }
+}
diff --git a/assets/editor/index.ts b/assets/editor/index.ts
new file mode 100644
index 0000000..a5c67cf
--- /dev/null
+++ b/assets/editor/index.ts
@@ -0,0 +1,6 @@
+export { default as CkEditor } from './CkEditor.vue';
+export { default as EditorUploadAdapter } from './uploadAdapter.ts';
+export { DEFAULT_TOOLBAR, DEFAULT_IMAGE_TOOLBAR } from './toolbar.ts';
+export { DEFAULT_PLUGINS } from './plugins.ts';
+export { default as EditorAssetPicker } from './EditorAssetPicker.vue';
+export { default as AssetBrowserPlugin } from './assetBrowserPlugin.js';
diff --git a/assets/editor/plugins.ts b/assets/editor/plugins.ts
new file mode 100644
index 0000000..8809fcf
--- /dev/null
+++ b/assets/editor/plugins.ts
@@ -0,0 +1,118 @@
+import {
+  Alignment,
+  AutoImage,
+  AutoLink,
+  Autosave,
+  BlockQuote,
+  Bold,
+  Code,
+  FontBackgroundColor,
+  FontColor,
+  FontFamily,
+  FontSize,
+  Essentials,
+  FileRepository,
+  GeneralHtmlSupport,
+  Heading,
+  Highlight,
+  HorizontalLine,
+  HtmlEmbed,
+  Indent,
+  IndentBlock,
+  Image,
+  ImageCaption,
+  ImageBlock,
+  ImageInsert,
+  ImageInsertUI,
+  ImageInsertViaUrl,
+  ImageInline,
+  ImageResize,
+  ImageStyle,
+  ImageToolbar,
+  ImageUpload,
+  Italic,
+  Link,
+  LinkImage,
+  List,
+  ListProperties,
+  MediaEmbed,
+  Paragraph,
+  PictureEditing,
+  PlainTableOutput,
+  RemoveFormat,
+  SourceEditing,
+  Strikethrough,
+  Subscript,
+  Superscript,
+  Table,
+  TableCaption,
+  TableCellProperties,
+  TableColumnResize,
+  TableLayout,
+  TableProperties,
+  TableToolbar,
+  TextTransformation,
+  TodoList,
+  Underline,
+} from 'ckeditor5';
+
+import AssetBrowserPlugin from './assetBrowserPlugin.js';
+
+export const DEFAULT_PLUGINS = [
+  Essentials,
+  Alignment,
+  AutoLink,
+  Autosave,
+  Paragraph,
+  Bold,
+  Italic,
+  Code,
+  Heading,
+  FontBackgroundColor,
+  FontColor,
+  FontFamily,
+  FontSize,
+  Link,
+  List,
+  ListProperties,
+  BlockQuote,
+  Highlight,
+  Table,
+  TableCaption,
+  TableCellProperties,
+  TableColumnResize,
+  TableLayout,
+  TableProperties,
+  TableToolbar,
+  HorizontalLine,
+  HtmlEmbed,
+  SourceEditing,
+  RemoveFormat,
+  Strikethrough,
+  Subscript,
+  Superscript,
+  Underline,
+  TextTransformation,
+  TodoList,
+  Indent,
+  IndentBlock,
+  MediaEmbed,
+  Image,
+  ImageToolbar,
+  ImageCaption,
+  ImageStyle,
+  ImageResize,
+  ImageUpload,
+  ImageInsert,
+  ImageInsertUI,
+  ImageInsertViaUrl,
+  ImageInline,
+  ImageBlock,
+  LinkImage,
+  AutoImage,
+  PictureEditing,
+  PlainTableOutput,
+  FileRepository,
+  GeneralHtmlSupport,
+  AssetBrowserPlugin,
+];
diff --git a/assets/editor/toolbar.ts b/assets/editor/toolbar.ts
new file mode 100644
index 0000000..b711b54
--- /dev/null
+++ b/assets/editor/toolbar.ts
@@ -0,0 +1,50 @@
+export const DEFAULT_TOOLBAR = [
+  'undo',
+  'redo',
+  '|',
+  'heading',
+  '|',
+  'fontSize',
+  'fontFamily',
+  'fontColor',
+  'fontBackgroundColor',
+  '|',
+  'bold',
+  'italic',
+  'underline',
+  'strikethrough',
+  'subscript',
+  'superscript',
+  'code',
+  'removeFormat',
+  '|',
+  'link',
+  'highlight',
+  'alignment',
+  '|',
+  'bulletedList',
+  'numberedList',
+  'todoList',
+  '|',
+  'blockQuote',
+  'insertTable',
+  'insertTableLayout',
+  'insertImage',
+  'sourceEditing',
+  'htmlEmbed',
+  'mediaEmbed',
+  'assetBrowser',
+  '|',
+  'horizontalLine',
+  'outdent',
+  'indent',
+];
+
+export const DEFAULT_IMAGE_TOOLBAR = [
+  'imageStyle:inline',
+  'imageStyle:wrapText',
+  'imageStyle:breakText',
+  '|',
+  'toggleImageCaption',
+  'imageTextAlternative',
+];
diff --git a/assets/editor/uploadAdapter.ts b/assets/editor/uploadAdapter.ts
new file mode 100644
index 0000000..f54c273
--- /dev/null
+++ b/assets/editor/uploadAdapter.ts
@@ -0,0 +1,88 @@
+export default class EditorUploadAdapter {
+  constructor(loader, options = {}) {
+    this.loader = loader;
+    this.endpoint = options.endpoint || '/editor/upload';
+    this.headers = options.headers || {};
+    this.withCredentials = options.withCredentials !== false;
+    this.xhr = null;
+  }
+
+  upload() {
+    return this.loader.file.then((file) => new Promise((resolve, reject) => {
+      const xhr = this.xhr = new XMLHttpRequest();
+      const formData = new FormData();
+
+      xhr.open('POST', this.endpoint, true);
+      xhr.responseType = 'json';
+      xhr.withCredentials = this.withCredentials;
+      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+
+      Object.entries(this.headers).forEach(([key, value]) => {
+        xhr.setRequestHeader(key, value);
+      });
+
+      xhr.upload.addEventListener('progress', (event) => {
+        if (!event.lengthComputable) {
+          return;
+        }
+
+        this.loader.uploadTotal = event.total;
+        this.loader.uploaded = event.loaded;
+      });
+
+      xhr.addEventListener('error', () => {
+        reject('The file could not be uploaded.');
+      });
+
+      xhr.addEventListener('abort', () => {
+        reject('The upload was aborted.');
+      });
+
+      xhr.addEventListener('load', () => {
+        const response = xhr.response || parseResponse(xhr.responseText);
+
+        if (!response) {
+          reject('The upload response was empty.');
+          return;
+        }
+
+        if (response.error?.message) {
+          reject(response.error.message);
+          return;
+        }
+
+        if (typeof response.url === 'string' && response.url.length > 0) {
+          resolve({
+            default: response.url,
+          });
+          return;
+        }
+
+        reject('The upload response did not include a file URL.');
+      });
+
+      formData.append('upload', file);
+      formData.append('fileName', file.name);
+
+      xhr.send(formData);
+    }));
+  }
+
+  abort() {
+    if (this.xhr) {
+      this.xhr.abort();
+    }
+  }
+}
+
+function parseResponse(responseText) {
+  if (typeof responseText !== 'string' || responseText.trim() === '') {
+    return null;
+  }
+
+  try {
+    return JSON.parse(responseText);
+  } catch (_error) {
+    return null;
+  }
+}
diff --git a/assets/vue/App.vue b/assets/vue/App.vue
index e38be10..dacfe52 100644
--- a/assets/vue/App.vue
+++ b/assets/vue/App.vue
@@ -2,7 +2,7 @@
   <div class="min-h-screen bg-[#F8FAFC] flex text-slate-900 font-sans">
     <AppSidebar />
 
-    <div class="flex flex-col flex-1 min-h-screen">
+    <div class="flex flex-col flex-1 min-h-screen min-w-0">
       <RouterView />
     </div>
   </div>
diff --git a/assets/vue/components/base/CkEditorField.vue b/assets/vue/components/base/CkEditorField.vue
index 9a56ad6..2f8e3b3 100644
--- a/assets/vue/components/base/CkEditorField.vue
+++ b/assets/vue/components/base/CkEditorField.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="editor-field" :style="{ '--editor-min-height': `300px` }">
+  <div class="editor-field" :style="editorFieldStyle">
     <label
         v-if="label"
         :for="fieldId"
@@ -8,49 +8,28 @@
       {{ label }}
     </label>
 
-    <ckeditor
+    <CkEditor
         :id="fieldId"
         v-model="localValue"
-        :editor="ClassicEditor"
-        :config="editorConfig"
+        :min-height="minHeight"
+        :readonly="readonly"
+        :disabled="disabled"
+        :upload-endpoint="uploadEndpoint"
+        :upload-headers="uploadHeaders"
+        :with-credentials="withCredentials"
+        :toolbar="toolbar"
+        :plugins="plugins"
+        :config="config"
     />
+
+    <p v-if="helperText" class="mt-1 text-xs text-slate-500">{{ helperText }}</p>
+    <p v-if="errorMessage" class="mt-1 text-xs text-red-600">{{ errorMessage }}</p>
   </div>
 </template>
 
 <script setup>
 import { computed, useId } from 'vue'
-import { Ckeditor } from '@ckeditor/ckeditor5-vue'
-
-import {
-  ClassicEditor,
-  Essentials,
-  Paragraph,
-  Bold,
-  Italic,
-  Heading,
-  Link,
-  List,
-  BlockQuote,
-  Table,
-  TableToolbar,
-  HorizontalLine,
-
-  Image,
-  ImageToolbar,
-  ImageCaption,
-  ImageStyle,
-  ImageResize,
-  AutoImage,
-  PictureEditing
-} from 'ckeditor5'
-
-import 'ckeditor5/ckeditor5.css'
-
-defineOptions({
-  components: {
-    ckeditor: Ckeditor
-  }
-})
+import { CkEditor } from '../../../editor/index.ts'
 
 const props = defineProps({
   modelValue: {
@@ -64,6 +43,50 @@ const props = defineProps({
   id: {
     type: String,
     default: ''
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  helperText: {
+    type: String,
+    default: ''
+  },
+  errorMessage: {
+    type: String,
+    default: ''
+  },
+  minHeight: {
+    type: [Number, String],
+    default: 300
+  },
+  uploadEndpoint: {
+    type: String,
+    default: '/editor/upload'
+  },
+  uploadHeaders: {
+    type: Object,
+    default: () => ({})
+  },
+  withCredentials: {
+    type: Boolean,
+    default: true
+  },
+  toolbar: {
+    type: Array,
+    default: null
+  },
+  plugins: {
+    type: Array,
+    default: () => []
+  },
+  config: {
+    type: Object,
+    default: () => ({})
   }
 })
 
@@ -76,63 +99,16 @@ const localValue = computed({
 
 const generatedId = useId()
 const fieldId = computed(() => props.id || `ckeditor-${generatedId}`)
-
-const editorConfig = {
-  licenseKey: 'GPL',
-  plugins: [
-    Essentials,
-    Paragraph,
-    Bold,
-    Italic,
-    Heading,
-    Link,
-    List,
-    BlockQuote,
-    Table,
-    TableToolbar,
-    HorizontalLine,
-    Image,
-    ImageToolbar,
-    ImageCaption,
-    ImageStyle,
-    ImageResize,
-    AutoImage,
-    PictureEditing
-  ],
-  toolbar: [
-    'undo',
-    'redo',
-    '|',
-    'heading',
-    '|',
-    'bold',
-    'italic',
-    'link',
-    '|',
-    'bulletedList',
-    'numberedList',
-    '|',
-    'blockQuote',
-    'insertTable',
-    '|',
-    'horizontalLine'
-  ],
-  image: {
-    toolbar: [
-      'imageStyle:inline',
-      'imageStyle:block',
-      'imageStyle:side',
-      '|',
-      'toggleImageCaption',
-      'imageTextAlternative'
-    ]
-  }
-}
+const editorFieldStyle = computed(() => ({
+  '--editor-min-height': typeof props.minHeight === 'number'
+    ? `${props.minHeight}px`
+    : String(props.minHeight)
+}))
 </script>
 
 <style scoped>
 :deep(.ck-editor__editable_inline) {
-  min-height: var(--editor-min-height) !important;
+  min-height: var(--editor-min-height, 300px) !important;
   overflow-y: auto;
 }
 </style>
diff --git a/assets/vue/views/CampaignEditView.vue b/assets/vue/views/CampaignEditView.vue
index 55a3acd..9f39a4c 100644
--- a/assets/vue/views/CampaignEditView.vue
+++ b/assets/vue/views/CampaignEditView.vue
@@ -27,7 +27,7 @@
 
       <div v-else class="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
         <div class="border-b border-slate-200 px-4 pt-4 sm:px-6 sm:pt-6">
-          <div class="grid grid-cols-3 gap-2 sm:grid-cols-6">
+          <div class="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-6">
             <button
               v-for="step in steps"
               :key="step.id"
@@ -117,7 +117,7 @@
 
           <section v-else-if="currentStep === 2" class="space-y-5">
             <h3 class="text-2xl font-semibold text-slate-900">Format</h3>
-            <div class="grid grid-cols-1 gap-4 sm:grid-cols-[2fr_2fr_1fr]">
+            <div class="grid grid-cols-1 gap-4 md:grid-cols-[2fr_2fr_1fr]">
 
               <div>
                 <label class="mb-1 block text-sm font-medium text-slate-700" for="campaign-template">Use template</label>
@@ -133,12 +133,12 @@
                 </select>
               </div>
 
-              <div class="sm:justify-self-center justify-self-start">
+              <div class="md:justify-self-center justify-self-start">
                 <label class="mb-1 block text-sm font-medium text-slate-700">
                   Send format
                 </label>
 
-                <div class="flex gap-4">
+                <div class="flex flex-wrap gap-4">
                   <label class="flex items-center gap-2 text-sm text-slate-900">
                     <input type="radio" value="html" v-model="form.sendFormat" class="h-4 w-4 border-slate-300 text-blue-600 focus:ring-blue-500"/>
                     HTML
@@ -156,7 +156,7 @@
                 </div>
               </div>
 
-              <label class="flex items-center gap-2 text-sm text-slate-800 sm:mt-2">
+              <label class="flex items-center gap-2 text-sm text-slate-800 md:mt-2">
                 <input
                   v-model="form.htmlFormated"
                   disabled
@@ -331,7 +331,7 @@
         </div>
 
         <div class="border-t border-slate-200 px-4 py-4 sm:px-6">
-          <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
             <div class="text-sm">
               <div v-if="saveErrors.length" class="text-red-600">
                 <p class="font-medium">Please fix the following fields:</p>
@@ -343,7 +343,7 @@
               <p v-else-if="saveSuccess" class="text-emerald-700">{{ saveSuccess }}</p>
             </div>
 
-            <div class="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
+            <div class="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap lg:justify-end">
               <button
                 type="button"
                 class="rounded-md border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50"
diff --git a/composer.json b/composer.json
index 2b1dd66..fdfa974 100755
--- a/composer.json
+++ b/composer.json
@@ -57,7 +57,8 @@
         "symfony/security-bundle": "^6.4",
         "tatevikgr/rest-api-client": "dev-dev",
         "phplist/phplist-lan-texts": "^2021.05",
-        "psr/simple-cache": "^3.0"
+        "psr/simple-cache": "^3.0",
+        "ext-fileinfo": "*"
     },
     "require-dev": {
         "phpunit/phpunit": "^9.5",
diff --git a/package.json b/package.json
index dd09ffb..217de08 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@ckeditor/ckeditor5-vue": "^7.4.0",
-    "@tatevikgr/rest-api-client": "^2.1.15",
+    "@tatevikgr/rest-api-client": "^2.1.16",
     "apexcharts": "^5.10.4",
     "ckeditor5": "^48.0.0",
     "vue": "^3.5.16",
diff --git a/src/Controller/AuthController.php b/src/Controller/AuthController.php
index 7a06a17..00182f5 100755
--- a/src/Controller/AuthController.php
+++ b/src/Controller/AuthController.php
@@ -7,6 +7,8 @@
 use Exception;
 use GuzzleHttp\Exception\GuzzleException;
 use PhpList\RestApiClient\Endpoint\AuthClient;
+use PhpList\RestApiClient\Exception\ApiException;
+use PhpList\RestApiClient\Exception\AuthenticationException;
 use PhpList\WebFrontend\Trait\RedirectValidationTrait;
 use Psr\Log\LoggerInterface;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
@@ -20,7 +22,7 @@ class AuthController extends AbstractController
     use RedirectValidationTrait;
 
     public function __construct(
-        private readonly AuthClient      $authClient,
+        private readonly AuthClient $authClient,
         private readonly LoggerInterface $logger
     ) {
     }
@@ -88,12 +90,17 @@ public function about(): JsonResponse
     {
         try {
             $user = $this->authClient->getSessionUser();
-        } catch (Exception | GuzzleException $e) {
+        } catch (AuthenticationException) {
+            return new JsonResponse(
+                ['error' => 'Unable to load current user.'],
+                401
+            );
+        } catch (ApiException $e) {
             $this->logger->error('Unable to load current user: ' . $e->getMessage());
 
             return new JsonResponse(
                 ['error' => 'Unable to load current user.'],
-                Response::HTTP_SERVICE_UNAVAILABLE
+                Response::HTTP_BAD_GATEWAY
             );
         }
 
diff --git a/src/Controller/BaseController.php b/src/Controller/BaseController.php
index b796bff..142ad6f 100644
--- a/src/Controller/BaseController.php
+++ b/src/Controller/BaseController.php
@@ -23,6 +23,10 @@ protected function getAdmin(): ?Administrator
         try {
             $admin = $this->authClient->getSessionUser();
         } catch (ApiException | AuthenticationException | AuthorizationException) {
+            // Best-effort context: knowing whether an admin is viewing is optional, so any
+            // failure (including an upstream ApiException) degrades to "anonymous visitor"
+            // rather than breaking public pages. Callers that need the API result to succeed
+            // must not rely on this method.
             $admin = null;
         }
 
diff --git a/src/Controller/DashboardController.php b/src/Controller/DashboardController.php
index 6e865e7..aea6970 100755
--- a/src/Controller/DashboardController.php
+++ b/src/Controller/DashboardController.php
@@ -4,7 +4,6 @@
 
 namespace PhpList\WebFrontend\Controller;
 
-use PhpList\RestApiClient\Exception\AuthenticationException;
 use PhpList\RestApiClient\Exception\AuthorizationException;
 use PhpList\RestApiClient\Endpoint\StatisticsClient;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
@@ -27,7 +26,7 @@ public function index(Request $request): Response
         try {
             $stats = $this->statisticsClient->getDashboardStats();
             $dashboardStats = $this->buildDashboardStats($stats);
-        } catch (AuthenticationException | AuthorizationException $e) {
+        } catch (AuthorizationException $e) {
             $dashboardError = $e->getMessage() ?: 'Unable to load dashboard statistics.';
         }
 
diff --git a/src/Controller/EditorUploadController.php b/src/Controller/EditorUploadController.php
new file mode 100644
index 0000000..743d9d7
--- /dev/null
+++ b/src/Controller/EditorUploadController.php
@@ -0,0 +1,72 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Controller;
+
+use PhpList\WebFrontend\Exception\UpstreamServiceException;
+use PhpList\WebFrontend\Service\EditorUploadService;
+use RuntimeException;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+#[Route('/editor', name: 'editor_')]
+final class EditorUploadController
+{
+    public function __construct(
+        private readonly EditorUploadService $editorUploadService,
+    ) {
+    }
+
+    #[Route('/upload', name: 'upload', methods: ['POST'])]
+    public function upload(Request $request): JsonResponse
+    {
+        $uploadedFile = $request->files->get('upload');
+
+        if (!$uploadedFile) {
+            return new JsonResponse([
+                'error' => [
+                    'message' => 'No file was provided.',
+                ],
+            ], Response::HTTP_BAD_REQUEST);
+        }
+
+        try {
+            $result = $this->editorUploadService->storeImage($uploadedFile);
+        } catch (UpstreamServiceException $exception) {
+            return new JsonResponse([
+                'error' => [
+                    'message' => $exception->getMessage(),
+                ],
+            ], Response::HTTP_BAD_GATEWAY);
+        }
+
+        return new JsonResponse([
+            'url' => $result->relativeUrl,
+            'fileName' => $result->fileName,
+        ]);
+    }
+
+    #[Route('/assets', name: 'assets', methods: ['GET'])]
+    public function assets(): JsonResponse
+    {
+        try {
+            $assets = $this->editorUploadService->listAssets();
+        } catch (UpstreamServiceException $exception) {
+            return new JsonResponse([
+                'error' => [
+                    'message' => $exception->getMessage(),
+                ],
+            ], Response::HTTP_BAD_GATEWAY);
+        }
+
+        return new JsonResponse([
+            'items' => array_map(
+                static fn ($asset) => $asset->toArray(),
+                $assets
+            ),
+        ]);
+    }
+}
diff --git a/src/Controller/PublicSubscribeController.php b/src/Controller/PublicSubscribeController.php
index c0ef1ec..2bab727 100644
--- a/src/Controller/PublicSubscribeController.php
+++ b/src/Controller/PublicSubscribeController.php
@@ -9,7 +9,6 @@
 use PhpList\Core\Domain\Configuration\Service\Provider\DefaultConfigProvider;
 use PhpList\RestApiClient\Endpoint\AuthClient;
 use PhpList\RestApiClient\Endpoint\SubscribePagesClient;
-use PhpList\RestApiClient\Exception\ApiException;
 use PhpList\RestApiClient\Exception\ValidationException;
 use PhpList\RestApiClient\Request\SubscribePage\PublicSubscriptionRequest;
 use PhpList\WebFrontend\Service\LanguageService;
@@ -139,7 +138,10 @@ public function subscribe(Request $request, int $pageId): Response
                     }
 
                     $successHtml = trim((string) ($pageData['thankyoupage'] ?? ''));
-                } catch (ValidationException | ApiException $exception) {
+                } catch (ValidationException $exception) {
+                    // Genuine client-input rejection from the API: show it inline on the form.
+                    // A bare ApiException (upstream failure) is intentionally left to propagate
+                    // so the global handler can map it to a 502 rather than masking it here.
                     $errorMessages[] = $exception->getMessage();
                 }
             }
diff --git a/src/Dto/EditorAssetItem.php b/src/Dto/EditorAssetItem.php
new file mode 100644
index 0000000..ef010d6
--- /dev/null
+++ b/src/Dto/EditorAssetItem.php
@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Dto;
+
+final class EditorAssetItem
+{
+    public function __construct(
+        public readonly string $fileName,
+        public readonly string $url,
+        public readonly string $mimeType,
+        public readonly int $size,
+        public readonly int $modifiedAt,
+        public readonly bool $isImage,
+    ) {
+    }
+
+    public function toArray(): array
+    {
+        return [
+            'fileName' => $this->fileName,
+            'url' => $this->url,
+            'mimeType' => $this->mimeType,
+            'size' => $this->size,
+            'modifiedAt' => $this->modifiedAt,
+            'isImage' => $this->isImage,
+        ];
+    }
+}
diff --git a/src/Dto/EditorUploadResult.php b/src/Dto/EditorUploadResult.php
new file mode 100644
index 0000000..c2aa731
--- /dev/null
+++ b/src/Dto/EditorUploadResult.php
@@ -0,0 +1,14 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Dto;
+
+final class EditorUploadResult
+{
+    public function __construct(
+        public readonly string $fileName,
+        public readonly string $relativeUrl,
+    ) {
+    }
+}
diff --git a/src/EventSubscriber/ApiExceptionSubscriber.php b/src/EventSubscriber/ApiExceptionSubscriber.php
new file mode 100644
index 0000000..41c41c9
--- /dev/null
+++ b/src/EventSubscriber/ApiExceptionSubscriber.php
@@ -0,0 +1,55 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\EventSubscriber;
+
+use PhpList\RestApiClient\Exception\ApiException;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpKernel\Event\ExceptionEvent;
+use Symfony\Component\HttpKernel\KernelEvents;
+
+class ApiExceptionSubscriber
+{
+    public static function getSubscribedEvents(): array
+    {
+        return [
+            KernelEvents::EXCEPTION => 'onKernelException',
+        ];
+    }
+
+    public function onKernelException(ExceptionEvent $event): void
+    {
+        $exception = $event->getThrowable();
+        // An ApiException whose status is a transport failure (code 0) or a 5xx means the
+        // upstream REST API failed or was unreachable. Surface that as a 502 Bad Gateway
+        // rather than letting it fall through to a generic 500, which would wrongly imply the
+        // fault is in this frontend. Client-shaped subclasses (NotFoundException 404,
+        // ValidationException 400/422) carry their own status and are left untouched here.
+        if ($exception instanceof ApiException && $this->isUpstreamFailure($exception)) {
+            $message = 'The upstream service is currently unavailable. Please try again later.';
+
+            if ($event->getRequest()->isXmlHttpRequest()) {
+                $event->setResponse(new JsonResponse([
+                    'error' => 'upstream_unavailable',
+                    'message' => $message,
+                ], Response::HTTP_BAD_GATEWAY));
+
+                return;
+            }
+
+            $event->setResponse(new Response($message, Response::HTTP_BAD_GATEWAY, [
+                'Content-Type' => 'text/plain; charset=UTF-8',
+            ]));
+        }
+    }
+
+    private function isUpstreamFailure(ApiException $exception): bool
+    {
+        $statusCode = $exception->getStatusCode();
+
+        // Code 0 is a transport error (connection refused/timeout); >= 500 is an upstream 5xx.
+        return $statusCode === 0 || $statusCode >= 500;
+    }
+}
diff --git a/src/Exception/UpstreamServiceException.php b/src/Exception/UpstreamServiceException.php
new file mode 100644
index 0000000..0abcc12
--- /dev/null
+++ b/src/Exception/UpstreamServiceException.php
@@ -0,0 +1,19 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Exception;
+
+use RuntimeException;
+
+/**
+ * Thrown when a request to the phpList REST API fails for reasons outside the
+ * caller's control (outage, network error, unexpected server response).
+ *
+ * Controllers map this to a 5xx status so upstream failures are not reported as
+ * client (4xx) errors.
+ */
+final class UpstreamServiceException extends RuntimeException
+{
+
+}
diff --git a/src/Service/EditorUploadService.php b/src/Service/EditorUploadService.php
new file mode 100644
index 0000000..fbe0519
--- /dev/null
+++ b/src/Service/EditorUploadService.php
@@ -0,0 +1,197 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Service;
+
+use Exception;
+use PhpList\WebFrontend\Dto\EditorAssetItem;
+use PhpList\WebFrontend\Dto\EditorUploadResult;
+use PhpList\WebFrontend\Exception\UpstreamServiceException;
+use PhpList\RestApiClient\Endpoint\UploadsClient as RestApiUploadsClient;
+use PhpList\RestApiClient\Exception\AuthenticationException;
+use PhpList\RestApiClient\Exception\AuthorizationException;
+use PhpList\RestApiClient\Exception\NotFoundException;
+use RuntimeException;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+
+final class EditorUploadService
+{
+    private const UPLOAD_DIRECTORY = 'uploadimages';
+
+    private const MAX_FILE_SIZE = 10 * 1024 * 1024;
+
+    public function __construct(
+        private readonly RestApiUploadsClient $uploadsClient,
+    ) {
+    }
+
+    /**
+     * @throws AuthorizationException
+     * @throws AuthenticationException
+     * @throws UpstreamServiceException on API/transport failure
+     */
+    public function storeImage(UploadedFile $uploadedFile): EditorUploadResult
+    {
+        $tempPath = $this->validateUploadedFile($uploadedFile);
+
+        // The API validates the extension of the transmitted filename, and the REST
+        // client derives that filename from the path's basename. The framework stores
+        // uploads under an extensionless temp name (e.g. /tmp/phpAB12), so hand the
+        // client a path whose basename carries the real extension.
+        $uploadPath = $this->prepareUploadPath($uploadedFile, $tempPath);
+
+        try {
+            $response = $this->uploadsClient->upload($uploadPath, 'upload');
+        } catch (AuthenticationException | AuthorizationException $e) {
+            throw $e;
+        } catch (Exception $e) {
+            throw new UpstreamServiceException('Upload failed: ' . $e->getMessage(), 0, $e);
+        } finally {
+            if ($uploadPath !== $tempPath && is_file($uploadPath)) {
+                unlink($uploadPath);
+            }
+        }
+
+        $fileName = $response['fileName']
+            ?? ($uploadedFile->getClientOriginalName() ?: basename($uploadPath));
+        $relativeUrl = $response['url'] ?? $this->buildRelativeUrl($fileName);
+
+        return new EditorUploadResult(
+            fileName: $fileName,
+            relativeUrl: $relativeUrl,
+        );
+    }
+
+    /**
+     * @throws AuthorizationException
+     * @throws AuthenticationException
+     * @throws UpstreamServiceException on API/transport failure
+     * @return array<int, EditorAssetItem>
+     */
+    public function listAssets(): array
+    {
+        try {
+            $response = $this->uploadsClient->getUploads();
+        } catch (AuthenticationException | AuthorizationException $e) {
+            throw $e;
+        } catch (NotFoundException) {
+            // The upload directory is created lazily on first upload; treat a missing
+            // directory as an empty asset list rather than an error.
+            return [];
+        } catch (Exception $e) {
+            throw new UpstreamServiceException('Failed to list assets: ' . $e->getMessage(), 0, $e);
+        }
+
+        $files = $response['files'] ?? [];
+
+        return $this->loadItems($files);
+    }
+
+    public function buildRelativeUrl(string $fileName): string
+    {
+        return '/' . self::UPLOAD_DIRECTORY . '/' . rawurlencode(basename($fileName));
+    }
+
+    public function getTargetDirectory(): string
+    {
+        return '/' . self::UPLOAD_DIRECTORY;
+    }
+
+    /**
+     * Return a filesystem path whose basename carries the upload's real extension so
+     * the API can validate it. Returns the original temp path when no extension can be
+     * determined or the copy fails.
+     */
+    private function prepareUploadPath(UploadedFile $uploadedFile, string $tempPath): string
+    {
+        $extension = $uploadedFile->getClientOriginalExtension();
+        if ($extension === '') {
+            $extension = (string) $uploadedFile->guessExtension();
+        }
+
+        if ($extension === '' || pathinfo($tempPath, PATHINFO_EXTENSION) !== '') {
+            return $tempPath;
+        }
+
+        $namedPath = $tempPath . '.' . strtolower($extension);
+        if (!copy($tempPath, $namedPath)) {
+            return $tempPath;
+        }
+
+        return $namedPath;
+    }
+
+    private function loadItems(array $files): array
+    {
+        $items = [];
+        foreach ($files as $file) {
+            $fileName = (string) ($file['name'] ?? '');
+            if ($fileName === '') {
+                continue;
+            }
+
+            if (($file['type'] ?? '') === 'directory') {
+                continue;
+            }
+
+            $mimeType = (string) ($file['mime_type'] ?? $this->guessMimeType($fileName));
+
+            $items[] = new EditorAssetItem(
+                fileName: $fileName,
+                url: $file['url'],
+                mimeType: $mimeType,
+                size: (int) ($file['size'] ?? 0),
+                modifiedAt: (int) ($file['modified'] ?? time()),
+                isImage: str_starts_with($mimeType, 'image/'),
+            );
+        }
+
+        // Newest first, so the most recently uploaded assets surface at the top of the picker.
+        usort(
+            $items,
+            static fn (EditorAssetItem $as1, EditorAssetItem $as2): int => $as2->modifiedAt <=> $as1->modifiedAt
+        );
+
+        return $items;
+    }
+
+    private function guessMimeType(string $fileName): string
+    {
+        return match (strtolower(pathinfo($fileName, PATHINFO_EXTENSION))) {
+            'jpg', 'jpeg' => 'image/jpeg',
+            'png' => 'image/png',
+            'gif' => 'image/gif',
+            'webp' => 'image/webp',
+            'bmp' => 'image/bmp',
+            'svg' => 'image/svg+xml',
+            default => 'application/octet-stream',
+        };
+    }
+
+    private function validateUploadedFile(UploadedFile $uploadedFile): string
+    {
+        if (!$uploadedFile->isValid()) {
+            throw new RuntimeException($uploadedFile->getErrorMessage());
+        }
+
+        if ($uploadedFile->getSize() > self::MAX_FILE_SIZE) {
+            throw new RuntimeException(sprintf(
+                'The uploaded file exceeds the maximum allowed size of %d MB.',
+                intdiv(self::MAX_FILE_SIZE, 1024 * 1024)
+            ));
+        }
+
+        $mimeType = (string) $uploadedFile->getMimeType();
+        if (!str_starts_with($mimeType, 'image/')) {
+            throw new RuntimeException('Only image uploads are supported.');
+        }
+
+        $tempPath = $uploadedFile->getRealPath();
+        if (!is_string($tempPath) || $tempPath === '') {
+            throw new RuntimeException('Failed to get uploaded file path.');
+        }
+
+        return $tempPath;
+    }
+}
diff --git a/tests/Integration/Controller/DashboardControllerTest.php b/tests/Integration/Controller/DashboardControllerTest.php
index 309bd9c..a24a786 100644
--- a/tests/Integration/Controller/DashboardControllerTest.php
+++ b/tests/Integration/Controller/DashboardControllerTest.php
@@ -57,7 +57,7 @@ public function testDashboardRendersSpaPayloadWithStats(): void
         self::assertStringContainsString('data-dashboard-error=""', $content);
     }
 
-    public function testDashboardRendersDashboardErrorWhenAuthFails(): void
+    public function testDashboardPropagatesAuthenticationExceptionForLoginRedirect(): void
     {
         self::bootKernel();
 
@@ -74,12 +74,12 @@ public function testDashboardRendersDashboardErrorWhenAuthFails(): void
         $session->set('auth_token', 'integration-token');
         $request->setSession($session);
 
-        $response = $controller->index($request);
-        $content = (string) $response->getContent();
+        // An expired session must not be rendered inline: the controller lets the
+        // AuthenticationException propagate so UnauthorizedSubscriber redirects to /login.
+        $this->expectException(AuthenticationException::class);
+        $this->expectExceptionMessage('Session expired');
 
-        self::assertSame(200, $response->getStatusCode());
-        self::assertStringContainsString('data-dashboard-error="Session&#x20;expired"', $content);
-        self::assertStringContainsString('data-dashboard-stats="&#x5B;&#x5D;"', $content);
+        $controller->index($request);
     }
 
     public function testDashboardRendersDashboardErrorWhenAuthorizationFails(): void
diff --git a/tests/Integration/Controller/EditorUploadControllerTest.php b/tests/Integration/Controller/EditorUploadControllerTest.php
new file mode 100644
index 0000000..33d3d3b
--- /dev/null
+++ b/tests/Integration/Controller/EditorUploadControllerTest.php
@@ -0,0 +1,151 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Tests\Integration\Controller;
+
+use PhpList\RestApiClient\Endpoint\UploadsClient;
+use PhpList\RestApiClient\Exception\ApiException;
+use PhpList\WebFrontend\Controller\EditorUploadController;
+use PhpList\WebFrontend\Service\EditorUploadService;
+use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Session\Session;
+use Symfony\Component\HttpFoundation\Session\Storage\MockArraySessionStorage;
+use Symfony\Component\Routing\RouterInterface;
+
+final class EditorUploadControllerTest extends KernelTestCase
+{
+    public function testUploadRouteIsRegistered(): void
+    {
+        self::bootKernel();
+
+        /** @var RouterInterface $router */
+        $router = static::getContainer()->get('router');
+
+        self::assertSame('/editor/upload', $router->generate('editor_upload'));
+    }
+
+    public function testAssetsRouteIsRegistered(): void
+    {
+        self::bootKernel();
+
+        /** @var RouterInterface $router */
+        $router = static::getContainer()->get('router');
+
+        self::assertSame('/editor/assets', $router->generate('editor_assets'));
+    }
+
+    public function testUploadReturnsAJsonUrl(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->expects(self::once())
+            ->method('upload')
+            ->willReturn([
+                'fileName' => 'newsletter-image.jpg',
+                'url' => '/uploadimages/newsletter-image.jpg',
+            ]);
+
+        $controller = new EditorUploadController(new EditorUploadService($uploadsClient));
+
+        $response = $controller->upload($this->createUploadRequest());
+
+        self::assertSame(200, $response->getStatusCode());
+        $payload = json_decode((string) $response->getContent(), true, 512, JSON_THROW_ON_ERROR);
+
+        self::assertSame('/uploadimages/newsletter-image.jpg', $payload['url']);
+        self::assertSame('newsletter-image.jpg', $payload['fileName']);
+    }
+
+    public function testUploadReturnsBadRequestWhenNoFileProvided(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->expects(self::never())->method('upload');
+
+        $controller = new EditorUploadController(new EditorUploadService($uploadsClient));
+
+        $response = $controller->upload(Request::create('/editor/upload', 'POST'));
+
+        self::assertSame(400, $response->getStatusCode());
+        $payload = json_decode((string) $response->getContent(), true, 512, JSON_THROW_ON_ERROR);
+        self::assertSame('No file was provided.', $payload['error']['message']);
+    }
+
+    public function testUploadReturnsBadGatewayWhenApiFails(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->method('upload')
+            ->willThrowException(new ApiException('boom', 500));
+
+        $controller = new EditorUploadController(new EditorUploadService($uploadsClient));
+
+        $response = $controller->upload($this->createUploadRequest());
+
+        self::assertSame(502, $response->getStatusCode());
+        $payload = json_decode((string) $response->getContent(), true, 512, JSON_THROW_ON_ERROR);
+        self::assertSame('Upload failed: boom', $payload['error']['message']);
+    }
+
+    public function testAssetsReturnsMappedItems(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->expects(self::once())
+            ->method('getUploads')
+            ->with('/')
+            ->willReturn([
+                'files' => [
+                    [
+                        'name' => 'asset.png',
+                        'url' => 'http://api.phplist.test/uploadimages/asset.png',
+                        'size' => 12,
+                        'type' => 'file',
+                        'modified' => 100,
+                    ],
+                ],
+            ]);
+
+        $controller = new EditorUploadController(new EditorUploadService($uploadsClient));
+
+        $response = $controller->assets();
+        self::assertSame(200, $response->getStatusCode());
+
+        $payload = json_decode((string) $response->getContent(), true, 512, JSON_THROW_ON_ERROR);
+        self::assertCount(1, $payload['items']);
+        self::assertSame('asset.png', $payload['items'][0]['fileName']);
+        self::assertTrue($payload['items'][0]['isImage']);
+    }
+
+    public function testAssetsReturnsBadGatewayWhenApiFails(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->method('getUploads')
+            ->willThrowException(new ApiException('unavailable', 500));
+
+        $controller = new EditorUploadController(new EditorUploadService($uploadsClient));
+
+        $response = $controller->assets();
+
+        self::assertSame(502, $response->getStatusCode());
+        $payload = json_decode((string) $response->getContent(), true, 512, JSON_THROW_ON_ERROR);
+        self::assertSame('Failed to list assets: unavailable', $payload['error']['message']);
+    }
+
+    private function createUploadRequest(): Request
+    {
+        $sourceFile = tempnam(sys_get_temp_dir(), 'editor-upload-');
+        self::assertIsString($sourceFile);
+        file_put_contents($sourceFile, base64_decode(
+            'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO3Z4foAAAAASUVORK5CYII='
+        ));
+
+        $uploadedFile = new UploadedFile($sourceFile, 'newsletter-image.jpg', 'image/png', null, true);
+
+        $request = Request::create('/editor/upload', 'POST', [], [], ['upload' => $uploadedFile]);
+        $session = new Session(new MockArraySessionStorage());
+        $session->set('auth_token', 'integration-token');
+        $request->setSession($session);
+
+        return $request;
+    }
+}
diff --git a/tests/Unit/Controller/AuthControllerTest.php b/tests/Unit/Controller/AuthControllerTest.php
index dced01b..261d9bf 100644
--- a/tests/Unit/Controller/AuthControllerTest.php
+++ b/tests/Unit/Controller/AuthControllerTest.php
@@ -5,6 +5,7 @@
 namespace PhpList\WebFrontend\Tests\Unit\Controller;
 
 use PhpList\RestApiClient\Entity\Administrator;
+use PhpList\RestApiClient\Exception\ApiException;
 use PhpList\WebFrontend\Controller\AuthController;
 use PhpList\RestApiClient\Endpoint\AuthClient;
 use PHPUnit\Framework\Assert;
@@ -317,4 +318,16 @@ public function testAbout(): void
             $response->getContent()
         );
     }
+
+    public function testAboutReturnsBadGatewayWhenUpstreamFails(): void
+    {
+        $this->authClient->expects($this->once())
+            ->method('getSessionUser')
+            ->willThrowException(new ApiException('upstream down', 500));
+
+        $response = $this->controller->about();
+
+        $this->assertInstanceOf(JsonResponse::class, $response);
+        $this->assertEquals(Response::HTTP_BAD_GATEWAY, $response->getStatusCode());
+    }
 }
diff --git a/tests/Unit/EventSubscriber/ApiExceptionSubscriberTest.php b/tests/Unit/EventSubscriber/ApiExceptionSubscriberTest.php
new file mode 100644
index 0000000..653bf22
--- /dev/null
+++ b/tests/Unit/EventSubscriber/ApiExceptionSubscriberTest.php
@@ -0,0 +1,124 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Tests\Unit\EventSubscriber;
+
+use Exception;
+use PhpList\RestApiClient\Exception\ApiException;
+use PhpList\RestApiClient\Exception\ValidationException;
+use PhpList\WebFrontend\EventSubscriber\ApiExceptionSubscriber;
+use Symfony\Component\HttpFoundation\Response;
+use PHPUnit\Framework\TestCase;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpKernel\Event\ExceptionEvent;
+use Symfony\Component\HttpKernel\HttpKernelInterface;
+use Symfony\Component\HttpKernel\KernelEvents;
+
+class ApiExceptionSubscriberTest extends TestCase
+{
+    private ApiExceptionSubscriber $subscriber;
+
+    protected function setUp(): void
+    {
+        $this->subscriber = new ApiExceptionSubscriber();
+    }
+
+    public function testGetSubscribedEvents(): void
+    {
+        $events = ApiExceptionSubscriber::getSubscribedEvents();
+
+        $this->assertArrayHasKey(KernelEvents::EXCEPTION, $events);
+        $this->assertEquals('onKernelException', $events[KernelEvents::EXCEPTION]);
+    }
+
+    public function testOnKernelExceptionWithOtherException(): void
+    {
+        $exception = new Exception('Some other error');
+
+        $request = $this->createMock(Request::class);
+
+        $kernel = $this->createMock(HttpKernelInterface::class);
+        $event = new ExceptionEvent(
+            $kernel,
+            $request,
+            HttpKernelInterface::MAIN_REQUEST,
+            $exception
+        );
+
+        $this->subscriber->onKernelException($event);
+
+        $this->assertNull($event->getResponse());
+    }
+
+    public function testOnKernelExceptionMapsUpstreamApiFailureToBadGateway(): void
+    {
+        $apiException = new ApiException('API request failed', 500);
+
+        $request = $this->createMock(Request::class);
+        $request->method('isXmlHttpRequest')->willReturn(false);
+
+        $kernel = $this->createMock(HttpKernelInterface::class);
+        $event = new ExceptionEvent(
+            $kernel,
+            $request,
+            HttpKernelInterface::MAIN_REQUEST,
+            $apiException
+        );
+
+        $this->subscriber->onKernelException($event);
+
+        $response = $event->getResponse();
+        $this->assertInstanceOf(Response::class, $response);
+        $this->assertEquals(Response::HTTP_BAD_GATEWAY, $response->getStatusCode());
+    }
+
+    public function testOnKernelExceptionMapsUpstreamApiFailureToBadGatewayForXhr(): void
+    {
+        // statusCode 0 models a transport failure (connection refused / timeout).
+        $apiException = new ApiException('API request failed', 0);
+
+        $request = $this->createMock(Request::class);
+        $request->method('isXmlHttpRequest')->willReturn(true);
+
+        $kernel = $this->createMock(HttpKernelInterface::class);
+        $event = new ExceptionEvent(
+            $kernel,
+            $request,
+            HttpKernelInterface::MAIN_REQUEST,
+            $apiException
+        );
+
+        $this->subscriber->onKernelException($event);
+
+        $response = $event->getResponse();
+        $this->assertInstanceOf(JsonResponse::class, $response);
+        $this->assertEquals(Response::HTTP_BAD_GATEWAY, $response->getStatusCode());
+
+        $data = json_decode($response->getContent(), true);
+        $this->assertEquals('upstream_unavailable', $data['error']);
+    }
+
+    public function testOnKernelExceptionLeavesClientShapedApiExceptionUntouched(): void
+    {
+        // A ValidationException (400/422) extends ApiException but is a genuine client error;
+        // it must not be converted to a 502.
+        $validationException = new ValidationException('Validation failed', 422);
+
+        $request = $this->createMock(Request::class);
+        $request->method('isXmlHttpRequest')->willReturn(false);
+
+        $kernel = $this->createMock(HttpKernelInterface::class);
+        $event = new ExceptionEvent(
+            $kernel,
+            $request,
+            HttpKernelInterface::MAIN_REQUEST,
+            $validationException
+        );
+
+        $this->subscriber->onKernelException($event);
+
+        $this->assertNull($event->getResponse());
+    }
+}
diff --git a/tests/Unit/Service/EditorUploadServiceTest.php b/tests/Unit/Service/EditorUploadServiceTest.php
new file mode 100644
index 0000000..72c5683
--- /dev/null
+++ b/tests/Unit/Service/EditorUploadServiceTest.php
@@ -0,0 +1,232 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Tests\Unit\Service;
+
+use PhpList\RestApiClient\Endpoint\UploadsClient;
+use PhpList\RestApiClient\Exception\ApiException;
+use PhpList\RestApiClient\Exception\AuthenticationException;
+use PhpList\RestApiClient\Exception\NotFoundException;
+use PhpList\WebFrontend\Exception\UpstreamServiceException;
+use PhpList\WebFrontend\Service\EditorUploadService;
+use PHPUnit\Framework\TestCase;
+use RuntimeException;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+
+final class EditorUploadServiceTest extends TestCase
+{
+    public function testStoreImageUploadsThroughApiAndReturnsResult(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->expects(self::once())
+            ->method('upload')
+            ->with(
+                self::callback(static fn (string $path): bool => str_ends_with($path, '.png')),
+                'upload'
+            )
+            ->willReturn([
+                'fileName' => 'hero-image.png',
+                'url' => '/uploadimages/hero-image.png',
+            ]);
+
+        $service = new EditorUploadService($uploadsClient);
+        $result = $service->storeImage($this->createImageUpload());
+
+        self::assertSame('hero-image.png', $result->fileName);
+        self::assertSame('/uploadimages/hero-image.png', $result->relativeUrl);
+    }
+
+    public function testStoreImageFallsBackToClientNameAndBuiltUrl(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->method('upload')->willReturn([]);
+
+        $service = new EditorUploadService($uploadsClient);
+        $result = $service->storeImage($this->createImageUpload('hero image.png'));
+
+        self::assertSame('hero image.png', $result->fileName);
+        self::assertSame('/uploadimages/hero%20image.png', $result->relativeUrl);
+    }
+
+    public function testStoreImageRejectsNonImageUploads(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->expects(self::never())->method('upload');
+
+        $sourceFile = tempnam(sys_get_temp_dir(), 'editor-upload-');
+        self::assertIsString($sourceFile);
+        file_put_contents($sourceFile, 'just some plain text, definitely not an image');
+        $upload = new UploadedFile($sourceFile, 'notes.txt', 'text/plain', null, true);
+
+        $service = new EditorUploadService($uploadsClient);
+
+        $this->expectException(RuntimeException::class);
+        $this->expectExceptionMessage('Only image uploads are supported.');
+
+        $service->storeImage($upload);
+    }
+
+    public function testStoreImageRejectsFilesExceedingMaxSize(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->expects(self::never())->method('upload');
+
+        $sourceFile = tempnam(sys_get_temp_dir(), 'editor-upload-');
+        self::assertIsString($sourceFile);
+        // Write just over the 10 MB limit so the size check trips before upload.
+        file_put_contents($sourceFile, str_repeat("\0", 10 * 1024 * 1024 + 1));
+        $upload = new UploadedFile($sourceFile, 'huge.png', 'image/png', null, true);
+
+        $service = new EditorUploadService($uploadsClient);
+
+        $this->expectException(RuntimeException::class);
+        $this->expectExceptionMessage('The uploaded file exceeds the maximum allowed size of 10 MB.');
+
+        $service->storeImage($upload);
+    }
+
+    public function testStoreImageWrapsApiErrorsInUpstreamServiceException(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->method('upload')
+            ->willThrowException(new ApiException('boom', 500));
+
+        $service = new EditorUploadService($uploadsClient);
+
+        $this->expectException(UpstreamServiceException::class);
+        $this->expectExceptionMessage('Upload failed: boom');
+
+        $service->storeImage($this->createImageUpload());
+    }
+
+    public function testStoreImageRethrowsAuthenticationException(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->method('upload')
+            ->willThrowException(new AuthenticationException('Session expired', 401));
+
+        $service = new EditorUploadService($uploadsClient);
+
+        $this->expectException(AuthenticationException::class);
+
+        $service->storeImage($this->createImageUpload());
+    }
+
+    public function testListAssetsMapsApiFieldsAndSortsByNewestFirst(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->expects(self::once())
+            ->method('getUploads')
+            ->with('/')
+            ->willReturn([
+                // Real API listing shape: name/url/size/type/modified, no mimeType.
+                'files' => [
+                    [
+                        'name' => 'image-one.png',
+                        'url' => 'http://api.phplist.test/uploadimages/image-one.png',
+                        'size' => 120,
+                        'type' => 'file',
+                        'modified' => 100,
+                    ],
+                    [
+                        'name' => 'notes.txt',
+                        'url' => 'http://api.phplist.test/uploadimages/notes.txt',
+                        'size' => 8,
+                        'type' => 'file',
+                        'modified' => 200,
+                    ],
+                ],
+            ]);
+
+        $service = new EditorUploadService($uploadsClient);
+        $assets = $service->listAssets();
+
+        self::assertCount(2, $assets);
+        self::assertSame('notes.txt', $assets[0]->fileName);
+        self::assertFalse($assets[0]->isImage);
+        self::assertSame('http://api.phplist.test/uploadimages/notes.txt', $assets[0]->url);
+        self::assertSame(200, $assets[0]->modifiedAt);
+        self::assertSame('image-one.png', $assets[1]->fileName);
+        self::assertTrue($assets[1]->isImage);
+        self::assertSame('image/png', $assets[1]->mimeType);
+        self::assertSame(100, $assets[1]->modifiedAt);
+    }
+
+    public function testListAssetsSkipsDirectoriesAndUnnamedEntries(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->method('getUploads')->willReturn([
+            'files' => [
+                ['type' => 'file'],
+                ['name' => 'nested', 'type' => 'directory'],
+                [
+                    'name' => 'kept.png',
+                    'type' => 'file',
+                    'url' => 'http://api.phplist.test/uploads/kept.png',
+                    'size' => '2MB',
+                ],
+            ],
+        ]);
+
+        $service = new EditorUploadService($uploadsClient);
+        $assets = $service->listAssets();
+
+        self::assertCount(1, $assets);
+        self::assertSame('kept.png', $assets[0]->fileName);
+    }
+
+    public function testListAssetsReturnsEmptyWhenDirectoryMissing(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->method('getUploads')
+            ->willThrowException(new NotFoundException('Directory "uploadimages" not found.', 404));
+
+        $service = new EditorUploadService($uploadsClient);
+
+        self::assertSame([], $service->listAssets());
+    }
+
+    public function testListAssetsWrapsApiErrorsInUpstreamServiceException(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->method('getUploads')
+            ->willThrowException(new ApiException('unavailable', 500));
+
+        $service = new EditorUploadService($uploadsClient);
+
+        $this->expectException(UpstreamServiceException::class);
+        $this->expectExceptionMessage('Failed to list assets: unavailable');
+
+        $service->listAssets();
+    }
+
+    public function testListAssetsRethrowsAuthenticationException(): void
+    {
+        $uploadsClient = $this->createMock(UploadsClient::class);
+        $uploadsClient->method('getUploads')
+            ->willThrowException(new AuthenticationException('Session expired', 401));
+
+        $service = new EditorUploadService($uploadsClient);
+
+        $this->expectException(AuthenticationException::class);
+
+        $service->listAssets();
+    }
+
+    private function createImageUpload(string $clientName = 'newsletter-image.png'): UploadedFile
+    {
+        return new UploadedFile($this->createSourceFile(), $clientName, 'image/png', null, true);
+    }
+
+    private function createSourceFile(): string
+    {
+        $sourceFile = tempnam(sys_get_temp_dir(), 'editor-upload-');
+        self::assertIsString($sourceFile);
+        file_put_contents($sourceFile, base64_decode(
+            'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO3Z4foAAAAASUVORK5CYII='
+        ));
+
+        return $sourceFile;
+    }
+}
diff --git a/tests/Unit/assets/editor/CkEditor.spec.js b/tests/Unit/assets/editor/CkEditor.spec.js
new file mode 100644
index 0000000..1848b12
--- /dev/null
+++ b/tests/Unit/assets/editor/CkEditor.spec.js
@@ -0,0 +1,140 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import CkEditor from '../../../../assets/editor/CkEditor.vue'
+
+vi.mock('ckeditor5', () => ({
+  ClassicEditor: {},
+  Alignment: {},
+  AutoImage: {},
+  AutoLink: {},
+  Autosave: {},
+  Essentials: {},
+  Paragraph: {},
+  Bold: {},
+  Italic: {},
+  Heading: {},
+  Code: {},
+  FontBackgroundColor: {},
+  FontColor: {},
+  FontFamily: {},
+  FontSize: {},
+  Link: {},
+  List: {},
+  ListProperties: {},
+  BlockQuote: {},
+  Highlight: {},
+  Table: {},
+  TableCaption: {},
+  TableCellProperties: {},
+  TableColumnResize: {},
+  TableLayout: {},
+  TableProperties: {},
+  TableToolbar: {},
+  HorizontalLine: {},
+  HtmlEmbed: {},
+  SourceEditing: {},
+  RemoveFormat: {},
+  Strikethrough: {},
+  Subscript: {},
+  Superscript: {},
+  Underline: {},
+  TextTransformation: {},
+  TodoList: {},
+  Indent: {},
+  IndentBlock: {},
+  MediaEmbed: {},
+  Image: {},
+  ImageToolbar: {},
+  ImageCaption: {},
+  ImageStyle: {},
+  ImageResize: {},
+  ImageUpload: {},
+  ImageInsert: {},
+  ImageInsertUI: {},
+  ImageInsertViaUrl: {},
+  ImageInline: {},
+  ImageBlock: {},
+  LinkImage: {},
+  PictureEditing: {},
+  PlainTableOutput: {},
+  FileRepository: {},
+  GeneralHtmlSupport: {},
+  Plugin: class {},
+  ButtonView: class {},
+}))
+
+vi.mock('@ckeditor/ckeditor5-vue', () => ({
+  Ckeditor: {
+    name: 'ckeditor',
+    props: [
+      'modelValue',
+      'editor',
+      'config',
+      'id',
+      'disabled',
+    ],
+    emits: ['update:modelValue', 'ready'],
+    template: `
+      <div class="ckeditor-stub">
+        <button class="change-value" @click="$emit('update:modelValue', '<p>Updated</p>')">
+          Update
+        </button>
+        <button class="ready" @click="$emit('ready', {
+          plugins: { get: () => ({ createUploadAdapter: null }) },
+          enableReadOnlyMode: () => {},
+          disableReadOnlyMode: () => {},
+          destroy: () => Promise.resolve(),
+        })">
+          Ready
+        </button>
+      </div>
+    `,
+  },
+}))
+
+describe('CkEditor', () => {
+  const createWrapper = (props = {}) =>
+    mount(CkEditor, {
+      props: {
+        ...props,
+      },
+    })
+
+  it('syncs v-model updates', async () => {
+    const wrapper = createWrapper({ modelValue: '<p>Initial</p>' })
+
+    await wrapper.find('.change-value').trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([
+      ['<p>Updated</p>'],
+    ])
+  })
+
+  it('passes the expected editor config', () => {
+    const wrapper = createWrapper()
+
+    const editor = wrapper.findComponent({ name: 'ckeditor' })
+    const config = editor.props('config')
+
+    expect(config.licenseKey).toBe('GPL')
+    expect(config.toolbar).toContain('insertImage')
+    expect(config.toolbar).toContain('assetBrowser')
+    expect(config.htmlSupport.allow[0].name).toBeDefined()
+  })
+
+  it('exposes an asset picker hook in the editor config', () => {
+    const wrapper = createWrapper()
+
+    const editor = wrapper.findComponent({ name: 'ckeditor' })
+    const config = editor.props('config')
+
+    expect(typeof config.openAssetPicker).toBe('function')
+  })
+
+  it('disables the editor when readonly is set', () => {
+    const wrapper = createWrapper({ readonly: true })
+
+    const editor = wrapper.findComponent({ name: 'ckeditor' })
+    expect(editor.props('disabled')).toBe(true)
+  })
+})
diff --git a/tests/Unit/assets/editor/uploadAdapter.spec.js b/tests/Unit/assets/editor/uploadAdapter.spec.js
new file mode 100644
index 0000000..7f60758
--- /dev/null
+++ b/tests/Unit/assets/editor/uploadAdapter.spec.js
@@ -0,0 +1,78 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import EditorUploadAdapter from '../../../../assets/editor/uploadAdapter.ts'
+
+const originalXhr = global.XMLHttpRequest
+
+describe('EditorUploadAdapter', () => {
+  let listeners
+  let sendMock
+
+  beforeEach(() => {
+    listeners = {}
+    sendMock = vi.fn()
+
+    global.XMLHttpRequest = class {
+      constructor() {
+        this.upload = {
+          addEventListener: (event, handler) => {
+            listeners[`upload:${event}`] = handler
+          },
+        }
+        this.addEventListener = (event, handler) => {
+          listeners[event] = handler
+        }
+        this.open = vi.fn()
+        this.setRequestHeader = vi.fn()
+        this.send = sendMock
+        this.abort = vi.fn()
+        this.response = null
+        this.responseText = ''
+        this.responseType = ''
+        this.withCredentials = false
+      }
+    }
+  })
+
+  afterEach(() => {
+    global.XMLHttpRequest = originalXhr
+  })
+
+  it('uploads files and resolves the returned URL', async () => {
+    const loader = {
+      file: Promise.resolve(new File(['image'], 'banner.png', { type: 'image/png' })),
+    }
+
+    const adapter = new EditorUploadAdapter(loader, {
+      endpoint: '/editor/upload',
+    })
+
+    const uploadPromise = adapter.upload()
+    await Promise.resolve()
+    const xhr = adapter.xhr
+
+    xhr.response = { url: '/uploadimages/ckeditor5/banner.png' }
+    listeners.load()
+
+    await expect(uploadPromise).resolves.toEqual({
+      default: '/uploadimages/ckeditor5/banner.png',
+    })
+
+    expect(sendMock).toHaveBeenCalledOnce()
+    expect(xhr.open).toHaveBeenCalledWith('POST', '/editor/upload', true)
+  })
+
+  it('rejects when the backend returns an error message', async () => {
+    const loader = {
+      file: Promise.resolve(new File(['image'], 'banner.png', { type: 'image/png' })),
+    }
+
+    const adapter = new EditorUploadAdapter(loader)
+    const uploadPromise = adapter.upload()
+    await Promise.resolve()
+
+    adapter.xhr.response = { error: { message: 'Upload failed.' } }
+    listeners.load()
+
+    await expect(uploadPromise).rejects.toBe('Upload failed.')
+  })
+})
diff --git a/tests/Unit/assets/vue/components/base/CkEditorField.spec.js b/tests/Unit/assets/vue/components/base/CkEditorField.spec.js
index 25047ce..21bf85a 100644
--- a/tests/Unit/assets/vue/components/base/CkEditorField.spec.js
+++ b/tests/Unit/assets/vue/components/base/CkEditorField.spec.js
@@ -1,50 +1,30 @@
-// CkEditorField.spec.js
-
 import { describe, it, expect, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 import CkEditorField from '../../../../../../assets/vue/components/base/CkEditorField.vue'
 
-vi.mock('ckeditor5', () => ({
-    ClassicEditor: {},
-    Essentials: {},
-    Paragraph: {},
-    Bold: {},
-    Italic: {},
-    Heading: {},
-    Link: {},
-    List: {},
-    BlockQuote: {},
-    Table: {},
-    TableToolbar: {},
-    HorizontalLine: {},
-    Image: {},
-    ImageToolbar: {},
-    ImageCaption: {},
-    ImageStyle: {},
-    ImageResize: {},
-    AutoImage: {},
-    PictureEditing: {},
-}))
-
-const CkeditorStub = {
-    name: 'ckeditor',
+const CkEditorStub = {
+    name: 'CkEditor',
     props: [
         'modelValue',
-        'editor',
-        'config',
         'id',
+        'readonly',
+        'disabled',
+        'minHeight',
+        'uploadEndpoint',
+        'uploadHeaders',
+        'withCredentials',
+        'toolbar',
+        'plugins',
+        'config',
     ],
     emits: ['update:modelValue'],
     template: `
-    <div class="ckeditor-stub">
-      <button
-        class="change-value"
-        @click="$emit('update:modelValue', '<p>Updated</p>')"
-      >
-        Update
-      </button>
-    </div>
-  `,
+      <div class="ckeditor-stub">
+        <button class="change-value" @click="$emit('update:modelValue', '<p>Updated</p>')">
+          Update
+        </button>
+      </div>
+    `,
 }
 
 describe('CkEditorField', () => {
@@ -55,7 +35,7 @@ describe('CkEditorField', () => {
             },
             global: {
                 stubs: {
-                    ckeditor: CkeditorStub,
+                    CkEditor: CkEditorStub,
                 },
             },
         })
@@ -80,8 +60,7 @@ describe('CkEditorField', () => {
             modelValue: '<p>Hello</p>',
         })
 
-        const editor =
-            wrapper.findComponent(CkeditorStub)
+        const editor = wrapper.findComponent(CkEditorStub)
 
         expect(editor.props('modelValue'))
             .toBe('<p>Hello</p>')
@@ -130,55 +109,33 @@ describe('CkEditorField', () => {
             id: 'editor-1',
         })
 
-        const editor =
-            wrapper.findComponent(CkeditorStub)
+        const editor = wrapper.findComponent(CkEditorStub)
 
         expect(editor.props('id'))
             .toBe('editor-1')
     })
 
-    it('passes editor instance to ckeditor', () => {
-        const wrapper = createWrapper()
-
-        const editor =
-            wrapper.findComponent(CkeditorStub)
-
-        expect(editor.props('editor'))
-            .toBeDefined()
-    })
-
-    it('passes editor config to ckeditor', () => {
+    it('passes editor options through to the editor component', () => {
         const wrapper = createWrapper()
 
-        const editor =
-            wrapper.findComponent(CkeditorStub)
+        const editor = wrapper.findComponent(CkEditorStub)
 
-        const config = editor.props('config')
+        expect(editor.props('uploadEndpoint'))
+            .toBe('/editor/upload')
 
-        expect(config.licenseKey)
-            .toBe('GPL')
-
-        expect(config.toolbar)
-            .toContain('bold')
-
-        expect(config.toolbar)
-            .toContain('italic')
-
-        expect(config.toolbar)
-            .toContain('insertTable')
+        expect(editor.props('minHeight'))
+            .toBe(300)
     })
 
-    it('contains image toolbar configuration', () => {
-        const wrapper = createWrapper()
-
-        const config =
-            wrapper.findComponent(CkeditorStub)
-                .props('config')
-
-        expect(config.image.toolbar)
-            .toContain('toggleImageCaption')
+    it('forwards custom config and toolbar props', () => {
+        const toolbar = ['undo', 'bold']
+        const wrapper = createWrapper({
+            toolbar,
+            config: { placeholder: 'Write here' },
+        })
 
-        expect(config.image.toolbar)
-            .toContain('imageTextAlternative')
+        const editor = wrapper.findComponent(CkEditorStub)
+        expect(editor.props('toolbar')).toEqual(toolbar)
+        expect(editor.props('config')).toEqual({ placeholder: 'Write here' })
     })
 })
diff --git a/vitest.config.mjs b/vitest.config.mjs
index df36cd0..6bd1776 100644
--- a/vitest.config.mjs
+++ b/vitest.config.mjs
@@ -6,6 +6,10 @@ export default defineConfig({
   test: {
     environment: 'jsdom',
     globals: true,
-    include: ['assets/vue/**/*.spec.js', 'tests/Unit/assets/vue/**/*.spec.js'],
+    include: [
+      'assets/vue/**/*.spec.js',
+      'tests/Unit/assets/vue/**/*.spec.js',
+      'tests/Unit/assets/editor/**/*.spec.js',
+    ],
   },
 })
diff --git a/yarn.lock b/yarn.lock
index 2b374b3..af05d36 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2119,10 +2119,10 @@
     postcss "^8.5.6"
     tailwindcss "4.2.1"
 
-"@tatevikgr/rest-api-client@^2.1.15":
-  version "2.1.15"
-  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-2.1.15.tgz#5bf87fbaac2b4a8c0d34d478045c113da14f4756"
-  integrity sha512-HSzpfG5bSsZpEu/gSeiyDzSCpk3+BsIxp9F8zJOTgwoWGPiuJoyQqUs1oE+Md4okqvEt+ZwJKpsgnOYzcDiXhw==
+"@tatevikgr/rest-api-client@^2.1.16":
+  version "2.1.16"
+  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-2.1.16.tgz#bcbc25a6177705e7c629b508dc333689d21f5c92"
+  integrity sha512-VOVp+Z/iXqozgRIDKzZfsevAkmzJ0OwxpnXZt9N9uwz+Xlg+nYBKyb6kJjrBtAJjKDmHQY3LWG4/B9gr2XgRbA==
   dependencies:
     axios "^1.6.0"