diff --git a/assets/router/index.js b/assets/router/index.js
index 526b664..231642c 100644
--- a/assets/router/index.js
+++ b/assets/router/index.js
@@ -1,12 +1,16 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import DashboardView from '../vue/views/DashboardView.vue'
 import SubscribersView from '../vue/views/SubscribersView.vue'
+import ListsView from '../vue/views/ListsView.vue'
+import ListSubscribersView from '../vue/views/ListSubscribersView.vue'
 
 export const router = createRouter({
     history: createWebHistory(),
     routes: [
         { path: '/', name: 'dashboard', component: DashboardView, meta: { title: 'Dashboard' } },
         { path: '/subscribers', name: 'subscribers', component: SubscribersView, meta: { title: 'Subscribers' } },
+        { path: '/lists', name: 'lists', component: ListsView, meta: { title: 'Lists' } },
+        { path: '/lists/:listId/subscribers', name: 'list-subscribers', component: ListSubscribersView, meta: { title: 'List Subscribers' } },
         { path: '/:pathMatch(.*)*', redirect: '/' },
     ],
 });
diff --git a/assets/vue/api.js b/assets/vue/api.js
index b61c721..95c3cbc 100644
--- a/assets/vue/api.js
+++ b/assets/vue/api.js
@@ -1,4 +1,4 @@
-import { Client, SubscribersClient } from '@tatevikgr/rest-api-client';
+import {Client, ListClient, SubscribersClient, SubscriptionClient, SubscriberAttributesClient} from '@tatevikgr/rest-api-client';
 
 const appElement = document.getElementById('vue-app');
 const apiToken = appElement?.dataset.apiToken;
@@ -15,4 +15,8 @@ if (apiToken) {
 }
 
 export const subscribersClient = new SubscribersClient(client);
+export const listClient = new ListClient(client);
+export const subscriptionClient = new SubscriptionClient(client);
+export const subscriberAttributesClient = new SubscriberAttributesClient(client);
+
 export default client;
diff --git a/assets/vue/components/lists/AddSubscribersModal.vue b/assets/vue/components/lists/AddSubscribersModal.vue
new file mode 100644
index 0000000..b54f3f8
--- /dev/null
+++ b/assets/vue/components/lists/AddSubscribersModal.vue
@@ -0,0 +1,165 @@
+<template>
+  <div
+      v-if="isOpen"
+      class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0"
+      aria-labelledby="add-subscribers-modal-title"
+      role="dialog"
+      aria-modal="true"
+  >
+    <div class="fixed inset-0 bg-slate-900/50 transition-opacity" aria-hidden="true" @click="close"></div>
+
+    <div class="relative z-10 w-full overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:max-w-lg sm:w-full">
+      <form class="mt-4 space-y-4" @submit.prevent="submitAddSubscribers">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
+          <div class="flex items-center justify-between">
+            <h3 id="add-subscribers-modal-title" class="text-lg font-medium leading-6 text-slate-900">
+              Add subscribers
+            </h3>
+
+            <button type="button" class="text-slate-400 hover:text-slate-500" @click="close">
+              <BaseIcon name="close" class="w-5 h-5" />
+            </button>
+          </div>
+
+            <div>
+              <label for="subscriber-emails" class="block text-sm font-medium text-slate-700">
+                Email addresses
+              </label>
+              <textarea
+                  id="subscriber-emails"
+                  v-model.trim="addSubsForm.emails"
+                  rows="8"
+                  placeholder="john@example.com&#10;jane@example.com&#10;team@example.com"
+                  class="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
+              ></textarea>
+              <p class="mt-1 text-xs text-slate-500">
+                Enter one email per line, or separate multiple emails with commas.
+              </p>
+            </div>
+
+            <label class="flex items-center gap-2 text-sm text-slate-700">
+              <input
+                  v-model="addSubsForm.autoConfirm"
+                  type="checkbox"
+                  class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-blue-500"
+              />
+              Auto confirm subscribers
+            </label>
+
+            <p v-if="addSubsError" class="text-sm text-red-600">
+              {{ addSubsError }}
+            </p>
+        </div>
+
+        <div class="bg-slate-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 gap-2">
+        <button
+            type="submit"
+            :disabled="addingSubscribers || !addSubsForm.emails.trim()"
+            class="w-full inline-flex justify-center rounded-md border border-transparent bg-ext-wf1 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-ext-wf3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:w-auto sm:text-sm disabled:opacity-50"
+        >
+          {{ addingSubscribers ? 'Adding...' : 'Add subscribers' }}
+        </button>
+
+        <button
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-base font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
+            @click="close"
+        >
+          Cancel
+        </button>
+      </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import BaseIcon from '../base/BaseIcon.vue'
+import { subscriptionClient } from '../../api'
+
+const props = defineProps({
+  isOpen: Boolean,
+  list: {
+    type: Object,
+    default: null
+  }
+})
+
+const emit = defineEmits(['close', 'added'])
+
+const addingSubscribers = ref(false)
+const addSubsError = ref('')
+const addSubsForm = ref({
+  emails: '',
+  autoConfirm: false
+})
+
+const resetAddSubsForm = () => {
+  addSubsForm.value = {
+    emails: '',
+    autoConfirm: false
+  }
+  addSubsError.value = ''
+}
+
+watch(
+    () => props.isOpen,
+    (isOpen) => {
+      if (isOpen) {
+        resetAddSubsForm()
+      }
+    }
+)
+
+const close = () => {
+  if (addingSubscribers.value) return
+  emit('close')
+}
+
+const parseEmails = (raw) => {
+  return raw
+      .split(/[\n,;]/)
+      .map(email => email.trim())
+      .filter(Boolean)
+}
+
+const isValidEmail = (email) => {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
+}
+
+const submitAddSubscribers = async () => {
+  if (addingSubscribers.value) return
+
+  if (!props.list?.id) {
+    addSubsError.value = 'No mailing list selected.'
+    return
+  }
+
+  const emails = parseEmails(addSubsForm.value.emails)
+
+  if (!emails.length) {
+    addSubsError.value = 'At least one email is required.'
+    return
+  }
+
+  const invalidEmails = emails.filter(email => !isValidEmail(email))
+  if (invalidEmails.length) {
+    addSubsError.value = `Invalid email(s): ${invalidEmails.join(', ')}`
+    return
+  }
+
+  addingSubscribers.value = true
+  addSubsError.value = ''
+
+  try {
+    await subscriptionClient.createSubscriptions(emails, props.list.id, addSubsForm.value.autoConfirm)
+    emit('added')
+    emit('close')
+  } catch (error) {
+    addSubsError.value = error?.message || 'Failed to add subscribers to the list.'
+  } finally {
+    addingSubscribers.value = false
+  }
+}
+</script>
diff --git a/assets/vue/components/lists/CreateListModal.vue b/assets/vue/components/lists/CreateListModal.vue
new file mode 100644
index 0000000..dcd58ca
--- /dev/null
+++ b/assets/vue/components/lists/CreateListModal.vue
@@ -0,0 +1,177 @@
+<template>
+  <div
+    v-if="isOpen"
+    class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0"
+    aria-labelledby="create-list-modal-title"
+    role="dialog"
+    aria-modal="true"
+  >
+    <div class="fixed inset-0 bg-slate-900/50 transition-opacity" aria-hidden="true" @click="close"></div>
+    <form class="mt-4 space-y-4" @submit.prevent="submitCreateList">
+      <div class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg md:min-w-xl sm:w-full z-10">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
+          <div class="flex justify-between items-center">
+            <h3 id="create-list-modal-title" class="text-lg leading-6 font-medium text-slate-900">
+              Create New List
+            </h3>
+            <button type="button" class="text-slate-400 hover:text-slate-500" @click="close">
+              <BaseIcon name="close" class="w-5 h-5" />
+            </button>
+          </div>
+
+            <div>
+              <label for="list-name" class="block text-sm font-medium text-slate-700">Name</label>
+              <input
+                id="list-name"
+                v-model.trim="createForm.name"
+                type="text"
+                required
+                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              >
+            </div>
+
+            <div class="flex items-center">
+              <input
+                id="list-public"
+                v-model="createForm.public"
+                type="checkbox"
+                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded"
+              >
+              <label for="list-public" class="ml-2 block text-sm text-slate-900">
+                Public
+              </label>
+            </div>
+
+            <div>
+              <label for="list-position" class="block text-sm font-medium text-slate-700">List Position (optional)</label>
+              <input
+                id="list-position"
+                v-model="createForm.listPosition"
+                type="number"
+                min="0"
+                step="1"
+                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              >
+            </div>
+
+            <div>
+              <label for="list-description" class="block text-sm font-medium text-slate-700">Description (optional)</label>
+              <textarea
+                id="list-description"
+                v-model.trim="createForm.description"
+                rows="3"
+                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              ></textarea>
+            </div>
+
+            <p v-if="createError" class="text-sm text-red-600">{{ createError }}</p>
+        </div>
+
+        <div class="bg-slate-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
+          <button
+            type="submit"
+            :disabled="creatingList || !createForm.name.trim()"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-ext-wf1 text-base font-medium text-white hover:bg-ext-wf3 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm disabled:opacity-50"
+        >
+            {{ creatingList ? 'Creating...' : 'Create' }}
+          </button>
+          <button
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
+            @click="close"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { Requests } from '@tatevikgr/rest-api-client'
+import BaseIcon from '../base/BaseIcon.vue'
+import { listClient } from '../../api'
+
+const props = defineProps({
+  isOpen: Boolean
+})
+
+const emit = defineEmits(['close', 'created'])
+
+const creatingList = ref(false)
+const createError = ref('')
+const createForm = ref({
+  name: '',
+  public: false,
+  listPosition: '',
+  description: ''
+})
+
+const resetCreateForm = () => {
+  createForm.value = {
+    name: '',
+    public: false,
+    listPosition: '',
+    description: ''
+  }
+  createError.value = ''
+}
+
+watch(
+  () => props.isOpen,
+  (isOpen) => {
+    if (isOpen) {
+      resetCreateForm()
+    }
+  }
+)
+
+const close = () => {
+  if (creatingList.value) {
+    return
+  }
+
+  emit('close')
+}
+
+const submitCreateList = async () => {
+  if (creatingList.value) {
+    return
+  }
+
+  const name = createForm.value.name.trim()
+  if (!name) {
+    createError.value = 'Name is required.'
+    return
+  }
+
+  const parsedPosition = createForm.value.listPosition === '' ? null : Number(createForm.value.listPosition)
+
+  if (parsedPosition !== null && (!Number.isInteger(parsedPosition) || parsedPosition < 0)) {
+    createError.value = 'List Position must be a whole number greater than or equal to 0.'
+    return
+  }
+
+  creatingList.value = true
+  createError.value = ''
+
+  try {
+    const request = new Requests.CreateSubscriberListRequest(
+      name,
+      !!createForm.value.public,
+      parsedPosition,
+      createForm.value.description.trim() || null
+    )
+
+    const createdList = await listClient.createList(request)
+    emit('created', createdList)
+    emit('close')
+  } catch (error) {
+    createError.value = error?.message || 'Failed to create list.'
+  } finally {
+    creatingList.value = false
+  }
+}
+</script>
diff --git a/assets/vue/components/lists/EditListModal.vue b/assets/vue/components/lists/EditListModal.vue
new file mode 100644
index 0000000..41d5981
--- /dev/null
+++ b/assets/vue/components/lists/EditListModal.vue
@@ -0,0 +1,230 @@
+<template>
+  <div
+    v-if="isOpen"
+    class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0"
+    aria-labelledby="edit-list-modal-title"
+    role="dialog"
+    aria-modal="true"
+  >
+    <div class="fixed inset-0 bg-slate-900/50 transition-opacity" aria-hidden="true" @click="close"></div>
+    <form class="mt-4 space-y-4" @submit.prevent="submitEditList">
+      <div class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg md:min-w-xl sm:w-full z-10">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
+          <div class="flex justify-between items-center">
+            <h3 id="edit-list-modal-title" class="text-lg leading-6 font-medium text-slate-900">
+              Edit List
+            </h3>
+            <button type="button" class="text-slate-400 hover:text-slate-500" @click="close">
+              <BaseIcon name="close" class="w-5 h-5" />
+            </button>
+          </div>
+
+            <div>
+              <label for="list-name" class="block text-sm font-medium text-slate-700">Name</label>
+              <input
+                id="list-name"
+                v-model.trim="editForm.name"
+                type="text"
+                required
+                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              >
+            </div>
+
+            <div class="flex items-center">
+              <input
+                id="list-public"
+                v-model="editForm.public"
+                type="checkbox"
+                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded"
+              >
+              <label for="list-public" class="ml-2 block text-sm text-slate-900">
+                Public
+              </label>
+            </div>
+
+            <div>
+              <label for="list-position" class="block text-sm font-medium text-slate-700">
+                List Position (optional)
+              </label>
+              <input
+                id="list-position"
+                v-model="editForm.listPosition"
+                type="number"
+                min="0"
+                step="1"
+                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              >
+            </div>
+
+            <div>
+              <label for="list-description" class="block text-sm font-medium text-slate-700">
+                Description (optional)
+              </label>
+              <textarea
+                id="list-description"
+                v-model.trim="editForm.description"
+                rows="3"
+                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              ></textarea>
+            </div>
+
+            <div>
+              <label for="list-category" class="block text-sm font-medium text-slate-700">Category</label>
+              <input
+                id="list-category"
+                v-model.trim="editForm.category"
+                type="text"
+                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              >
+            </div>
+
+            <div>
+              <label for="list-rss" class="block text-sm font-medium text-slate-700">RssFeed url</label>
+              <input
+                id="list-rss"
+                v-model.trim="editForm.rssFeed"
+                type="text"
+                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              >
+            </div>
+
+            <div>
+              <label for="list-prefix" class="block text-sm font-medium text-slate-700">Subject Prefix</label>
+              <input
+                id="list-prefix"
+                v-model.trim="editForm.subjectPrefix"
+                type="text"
+                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              >
+            </div>
+
+            <p v-if="editError" class="text-sm text-red-600">{{ editError }}</p>
+        </div>
+
+        <div class="bg-slate-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
+          <button
+            type="submit"
+            :disabled="updatingList || !editForm.name.trim()"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-ext-wf1 text-base font-medium text-white hover:bg-ext-wf3 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm disabled:opacity-50"
+          >
+            {{ updatingList ? 'Saving...' : 'Save' }}
+          </button>
+          <button
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
+            @click="close"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { Requests } from '@tatevikgr/rest-api-client'
+import BaseIcon from '../base/BaseIcon.vue'
+import { listClient } from '../../api'
+
+const props = defineProps({
+  isOpen: Boolean,
+  list: {
+    type: Object,
+    default: null
+  }
+})
+
+const emit = defineEmits(['close', 'updated'])
+
+const updatingList = ref(false)
+const editError = ref('')
+const editForm = ref({
+  name: '',
+  public: false,
+  listPosition: '',
+  description: '',
+  category: '',
+  rssFeed: '',
+  subjectPrefix: ''
+})
+
+const fillEditForm = () => {
+  const sourcePosition = props.list?.listPosition ?? props.list?.list_position
+
+  editForm.value = {
+    name: props.list?.name || '',
+    public: !!props.list?.public,
+    listPosition: sourcePosition == null ? '' : String(sourcePosition),
+    description: props.list?.description || '',
+    category: props.list?.category || '',
+    rssFeed: props.list?.rss_feed || '',
+    subjectPrefix: props.list?.subject_prefix || ''
+  }
+  editError.value = ''
+}
+
+watch(
+    () => [props.isOpen, props.list],
+    ([isOpen]) => {
+      if (isOpen) {
+        fillEditForm()
+      }
+    },
+    { immediate: true }
+)
+
+const close = () => {
+  if (updatingList.value) {
+    return
+  }
+
+  emit('close')
+}
+
+const submitEditList = async () => {
+  if (updatingList.value || !props.list?.id) {
+    return
+  }
+
+  const name = editForm.value.name.trim()
+  if (!name) {
+    editError.value = 'Name is required.'
+    return
+  }
+
+  let parsedPosition = null
+  if (String(editForm.value.listPosition).trim() !== '') {
+    parsedPosition = Number(editForm.value.listPosition)
+  }
+
+  if (parsedPosition !== null && (!Number.isInteger(parsedPosition) || parsedPosition < 0)) {
+    editError.value = 'List Position must be a whole number greater than or equal to 0.'
+    return
+  }
+
+  updatingList.value = true
+  editError.value = ''
+
+  try {
+    const request = new Requests.CreateSubscriberListRequest(
+      name,
+      !!editForm.value.public,
+      parsedPosition,
+      editForm.value.description.trim() || null,
+      editForm.value.subjectPrefix.trim() || null,
+      editForm.value.rssFeed.trim() || null,
+      editForm.value.category.trim() || null,
+    )
+
+    const updatedList = await listClient.updateList(props.list.id, request)
+    emit('updated', updatedList)
+    emit('close')
+  } catch (error) {
+    editError.value = error?.message || 'Failed to update list.'
+  } finally {
+    updatingList.value = false
+  }
+}
+</script>
diff --git a/assets/vue/components/lists/ListDirectory.vue b/assets/vue/components/lists/ListDirectory.vue
new file mode 100644
index 0000000..5c94021
--- /dev/null
+++ b/assets/vue/components/lists/ListDirectory.vue
@@ -0,0 +1,377 @@
+<template>
+  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+    <div class="p-4 sm:p-6 border-b border-slate-200 flex justify-between items-center">
+      <h2 class="text-xl font-bold text-slate-900">Mailing Lists</h2>
+
+      <button
+        type="button"
+        class="inline-flex shrink-0 items-center gap-2 whitespace-nowrap min-w-max px-4 py-2 bg-ext-wf1 text-white text-xs font-bold rounded-lg hover:bg-ext-wf3 transition-shadow shadow-sm shadow-indigo-500/20"
+        @click="openCreateModal"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M5 12h14"></path>
+          <path d="M12 5v14"></path>
+        </svg>
+        Add new list
+      </button>
+    </div>
+
+    <div class="overflow-x-auto">
+      <table class="w-full text-left text-sm hidden md:table">
+        <thead class="bg-slate-50 text-slate-500 font-medium">
+        <tr>
+          <th class="px-6 py-4">ID</th>
+          <th class="px-6 py-4">Name</th>
+          <th class="px-6 py-4">Public/Active</th>
+          <th class="px-6 py-4 text-right">Actions</th>
+        </tr>
+        </thead>
+        <tbody class="divide-y divide-slate-200">
+        <tr
+            v-for="list in mailingLists"
+            :key="list.id"
+            class="hover:bg-slate-50 transition-colors"
+        >
+          <td class="px-6 py-4 text-slate-600">{{ list.id }}</td>
+          <td class="px-6 py-4 font-medium text-slate-900">{{ list.name }}</td>
+          <td class="px-6 py-4">
+              <span
+                  class="px-2.5 py-0.5 rounded-full text-xs font-medium"
+                  :class="isPublic(list) ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-600'"
+              >
+                {{ isPublic(list) ? 'Yes' : 'No' }}
+              </span>
+          </td>
+          <td class="px-6 py-4">
+            <div class="flex flex-wrap justify-end gap-2">
+              <button
+                  type="button"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
+                  @click="handleDelete(list)"
+              >
+                <BaseIcon name="delete" class="w-3.5 h-3.5" />
+                Delete
+              </button>
+
+              <button
+                  type="button"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-emerald-200 text-emerald-700 hover:bg-emerald-50 transition-colors"
+                  @click="handleAddSubscriber(list)"
+              >
+                <BaseIcon name="addUser" class="w-3.5 h-3.5" />
+                Add Subscribers
+              </button>
+
+              <button
+                  type="button"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                  @click="handleEdit(list)"
+              >
+                <BaseIcon name="edit" class="w-3.5 h-3.5" />
+                Edit
+              </button>
+
+              <button
+                  type="button"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-blue-200 text-blue-700 hover:bg-blue-50 transition-colors"
+                  @click="handleStartCampaign(list)"
+              >
+                <BaseIcon name="plane" class="w-3.5 h-3.5" />
+                Start Campaign
+              </button>
+
+              <button
+                  type="button"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                  @click="handleViewMembers(list)"
+              >
+                <BaseIcon name="eye" class="w-3.5 h-3.5" />
+                View Members
+              </button>
+            </div>
+          </td>
+        </tr>
+
+        <tr v-if="!isLoading && !loadError && mailingLists.length === 0">
+          <td colspan="4" class="px-6 py-8 text-center text-slate-500">
+            No mailing lists found.
+          </td>
+        </tr>
+        <tr v-if="isLoading">
+          <td colspan="4" class="px-6 py-8 text-center text-slate-500">
+            Loading mailing lists...
+          </td>
+        </tr>
+
+        <tr v-else-if="loadError">
+          <td colspan="4" class="px-6 py-8 text-center text-red-600">
+            {{ loadError }}
+          </td>
+        </tr>
+
+        <tr v-else-if="mailingLists.length === 0">
+          <td colspan="4" class="px-6 py-8 text-center text-slate-500">
+            No mailing lists found.
+          </td>
+        </tr>
+        </tbody>
+      </table>
+
+      <div class="block md:hidden divide-y divide-slate-100">
+        <div
+            v-for="list in mailingLists"
+            :key="`mobile-${list.id}`"
+            class="p-4 space-y-3"
+        >
+          <div class="flex items-start justify-between gap-3">
+            <div>
+              <p class="text-xs uppercase tracking-wide text-slate-500">#{{ list.id }}</p>
+              <p class="font-semibold text-slate-900">{{ list.name }}</p>
+            </div>
+
+            <span
+                class="px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap"
+                :class="isPublic(list) ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-600'"
+            >
+              {{ isPublic(list) ? 'Public' : 'Private' }}
+            </span>
+          </div>
+
+          <div class="grid grid-cols-2 gap-2">
+            <button
+                type="button"
+                class="px-2.5 py-2 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
+                @click="handleDelete(list)"
+            >
+              Delete
+            </button>
+
+            <button
+                type="button"
+                class="px-2.5 py-2 text-xs font-medium rounded-md border border-emerald-200 text-emerald-700 hover:bg-emerald-50 transition-colors"
+                @click="handleAddSubscriber(list)"
+            >
+              Add Subscriber
+            </button>
+
+            <button
+                type="button"
+                class="px-2.5 py-2 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                @click="handleEdit(list)"
+            >
+              Edit
+            </button>
+
+            <button
+                type="button"
+                class="px-2.5 py-2 text-xs font-medium rounded-md border border-blue-200 text-blue-700 hover:bg-blue-50 transition-colors"
+                @click="handleStartCampaign(list)"
+            >
+              Start Campaign
+            </button>
+
+            <button
+                type="button"
+                class="col-span-2 px-2.5 py-2 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                @click="handleViewMembers(list)"
+            >
+              View Members
+            </button>
+          </div>
+        </div>
+
+        <div
+            v-if="isLoading"
+            class="px-4 py-8 text-center text-slate-500 text-sm"
+        >
+          Loading mailing lists...
+        </div>
+
+        <div
+            v-else-if="loadError"
+            class="px-4 py-8 text-center text-red-600 text-sm"
+        >
+          {{ loadError }}
+        </div>
+
+        <div
+            v-else-if="mailingLists.length === 0"
+            class="px-4 py-8 text-center text-slate-500 text-sm"
+        >
+          No mailing lists found.
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <CreateListModal
+      :is-open="isCreateModalOpen"
+      @close="closeCreateModal"
+      @created="handleListCreated"
+  />
+
+  <EditListModal
+      :is-open="isEditModalOpen"
+      :list="selectedList"
+      @close="closeEditModal"
+      @updated="handleListUpdated"
+  />
+
+  <AddSubscribersModal
+      :is-open="isAddSubscribersModalOpen"
+      :list="selectedList"
+      @close="closeAddSubscribersModal"
+      @added="handleSubscribersAdded"
+  />
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import BaseIcon from '../base/BaseIcon.vue'
+import CreateListModal from './CreateListModal.vue'
+import EditListModal from './EditListModal.vue'
+import AddSubscribersModal from './AddSubscribersModal.vue'
+import { listClient } from '../../api'
+
+const router = useRouter()
+
+const mailingLists = ref([])
+const isLoading = ref(false)
+const loadError = ref('')
+const isCreateModalOpen = ref(false)
+const selectedList = ref(null)
+const isEditModalOpen = ref(false)
+const isAddSubscribersModalOpen = ref(false)
+
+const fetchMailingLists = async () => {
+  const url = new URL('/lists', window.location.origin)
+
+  isLoading.value = true
+  loadError.value = ''
+
+  try {
+    const response = await fetch(url, {
+      headers: {
+        Accept: 'application/json',
+        'X-Requested-With': 'XMLHttpRequest'
+      }
+    })
+
+    const contentType = response.headers.get('content-type') || ''
+
+    if (response.status === 401) {
+      if (contentType.includes('application/json')) {
+        const data = await response.json()
+
+        if (data?.redirect) {
+          window.location.href = data.redirect
+          return
+        }
+      }
+
+      throw new Error('Authentication required. Please sign in again.')
+    }
+
+    if (!response.ok) {
+      throw new Error(`Failed to load mailing lists (${response.status}).`)
+    }
+
+    if (!contentType.includes('application/json')) {
+      throw new Error('Server returned an unexpected response format.')
+    }
+
+    const data = await response.json()
+    mailingLists.value = Array.isArray(data?.items) ? data.items : []
+  } catch (error) {
+    console.error('Failed to fetch mailing lists:', error)
+    mailingLists.value = []
+    loadError.value = error?.message || 'Failed to load mailing lists.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchMailingLists()
+})
+
+const emit = defineEmits([
+  'delete',
+  'add-subscriber',
+  'edit',
+  'start-campaign'
+])
+
+const handleDelete = async (list) => {
+  const confirmed = window.confirm(
+      `Delete mailing list "${list.name}"?\n\nThis action cannot be undone.`
+  )
+
+  if (!confirmed) return
+
+  try {
+    await listClient.deleteList(list.id)
+    await fetchMailingLists()
+  } catch (e) {
+    console.error('Delete failed', e)
+  }
+}
+
+const handleAddSubscriber = (list) => {
+  selectedList.value = list
+  isAddSubscribersModalOpen.value = true
+  emit('add-subscriber', list)
+}
+
+const closeAddSubscribersModal = () => {
+  isAddSubscribersModalOpen.value = false
+  selectedList.value = null
+}
+
+const handleSubscribersAdded = async () => {
+  await fetchMailingLists()
+}
+
+const handleEdit = (list) => {
+  selectedList.value = list
+  isEditModalOpen.value = true
+  emit('edit', list)
+}
+
+const closeEditModal = () => {
+  isEditModalOpen.value = false
+  selectedList.value = null
+}
+
+const handleListUpdated = async () => {
+  await fetchMailingLists()
+}
+
+const handleStartCampaign = (list) => emit('start-campaign', list)
+
+const handleViewMembers = (list) => {
+  if (!list?.id) return
+
+  router.push({
+    name: 'list-subscribers',
+    params: { listId: list.id },
+    query: list.name ? { listName: list.name } : {}
+  })
+}
+
+const isPublic = (list) =>
+    list?.public === true || list?.public === 1 || list?.public === '1'
+
+const openCreateModal = () => {
+  isCreateModalOpen.value = true
+}
+
+const closeCreateModal = () => {
+  isCreateModalOpen.value = false
+}
+
+const handleListCreated = async () => {
+  await fetchMailingLists()
+}
+</script>
diff --git a/assets/vue/components/lists/ListSubscribersExportPanel.vue b/assets/vue/components/lists/ListSubscribersExportPanel.vue
new file mode 100644
index 0000000..bcc03ee
--- /dev/null
+++ b/assets/vue/components/lists/ListSubscribersExportPanel.vue
@@ -0,0 +1,284 @@
+<template>
+  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+    <div class="p-4 sm:p-6 space-y-5">
+      <!-- Date type -->
+      <div class="space-y-2">
+        <p class="text-sm font-medium text-slate-800">What date needs to be used:</p>
+
+        <div class="flex flex-wrap gap-x-5 gap-y-2">
+          <label
+              v-for="option in dateTypeOptions"
+              :key="option.value"
+              class="inline-flex items-center gap-2 text-sm text-slate-700 cursor-pointer mr-2"
+          >
+            <input
+                v-model="form.dateType"
+                type="radio"
+                name="list-export-date-type"
+                class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf1"
+                :value="option.value"
+            >
+            <span>{{ option.label }}</span>
+          </label>
+        </div>
+      </div>
+
+      <!-- Date range -->
+      <div class="grid grid-cols-1 lg:grid-cols-[1fr_auto_1fr] gap-3 items-end">
+        <div>
+          <label class="block text-sm font-medium text-slate-700 mb-1" for="list-export-date-from">
+            Date From
+          </label>
+          <input
+              id="list-export-date-from"
+              v-model="form.dateFrom"
+              type="date"
+              class="block w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500 disabled:bg-slate-100 disabled:text-slate-400"
+              :disabled="usesAnyDate"
+          >
+        </div>
+
+        <div class="hidden lg:flex items-center justify-center pb-2 text-slate-400">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path
+                fill-rule="evenodd"
+                d="M3 10a1 1 0 011-1h9.586l-2.293-2.293a1 1 0 111.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L13.586 11H4a1 1 0 01-1-1z"
+                clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-slate-700 mb-1" for="list-export-date-to">
+            Date To
+          </label>
+          <input
+              id="list-export-date-to"
+              v-model="form.dateTo"
+              type="date"
+              class="block w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500 disabled:bg-slate-100 disabled:text-slate-400"
+              :disabled="usesAnyDate"
+          >
+        </div>
+      </div>
+
+      <!-- Columns -->
+      <div class="space-y-3">
+        <div class="flex flex-wrap items-center justify-between gap-3">
+          <p class="text-sm font-medium text-slate-800">Columns</p>
+
+          <label class="inline-flex items-center gap-2 text-sm font-medium text-slate-900 cursor-pointer">
+            <input
+                ref="selectAllColumnsCheckbox"
+                type="checkbox"
+                class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1"
+                :checked="allColumnsSelected"
+                @change="toggleAllColumns"
+            >
+            <span>Select all</span>
+          </label>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-x-8 gap-y-3">
+          <label
+              v-for="column in columnOptions"
+              :key="column.value"
+              class="inline-flex items-center gap-2 text-sm text-slate-700 cursor-pointer min-w-0"
+          >
+            <input
+                v-model="form.columns"
+                type="checkbox"
+                class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1 shrink-0"
+                :value="column.value"
+            >
+            <span class="truncate">{{ column.label }}</span>
+          </label>
+        </div>
+      </div>
+
+      <p v-if="exportError" class="text-sm text-red-600">{{ exportError }}</p>
+    </div>
+
+    <!-- Footer -->
+    <div class="px-4 sm:px-6 py-4 border-t border-slate-200 flex items-center justify-between gap-3">
+      <button
+          type="button"
+          class="inline-flex items-center justify-center rounded-md border border-transparent bg-ext-wf1 px-5 py-2 text-sm font-medium text-white shadow-sm hover:bg-ext-wf3 disabled:opacity-50 disabled:cursor-not-allowed"
+          @click="exportSubscribers"
+      >
+        Export
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, watch, watchEffect } from 'vue'
+// todo: check why subscriberAttributesClient was not working
+import client, { subscriberAttributesClient } from '../../api'
+
+onMounted(async () => {
+  try {
+    const allAttributes = []
+    let offset = 0
+    const limit = 100
+    let hasMore = true
+
+    while (hasMore) {
+      const data = await client.get('attributes', { limit, offset })
+      const items = Array.isArray(data?.items) ? data.items : []
+
+      allAttributes.push(...items)
+
+      if (items.length < limit) {
+        hasMore = false
+      } else {
+        offset += limit
+      }
+    }
+
+    const dynamicColumns = allAttributes.map(attr => ({
+      value: attr.name,
+      label: capitalizeFirst(attr.name)
+    }))
+
+    columnOptions.value = [
+      ...columnOptions.value,
+      ...dynamicColumns
+    ]
+
+    if (!form.value.columns?.length) {
+      form.value.columns = columnOptions.value.map(c => c.value)
+    }
+  } catch (err) {
+    console.error('Failed to load attribute definitions', err)
+  }
+})
+const capitalizeFirst = (s) => s ? s[0].toUpperCase() + s.slice(1) : ''
+
+const props = defineProps({
+  listId: {
+    type: Number,
+  },
+  listName: {
+    type: String,
+    default: ''
+  },
+  directoryFilter: {
+    type: String,
+    default: 'all'
+  },
+})
+
+const dateTypeOptions = [
+  { value: 'any', label: 'Any date (Export all subscribers)' },
+  { value: 'signup', label: 'When they signed up' },
+  { value: 'changed', label: 'When the record was changed' },
+  { value: 'changelog', label: 'Based on changelog' },
+  { value: 'subscribed', label: 'When they subscribed to new list' }
+]
+
+const columnOptions = ref([
+  { value: 'id', label: 'ID' },
+  { value: 'email', label: 'Email' },
+  { value: 'confirmed', label: 'Is this subscriber confirmed' },
+  { value: 'blacklisted', label: 'Is this subscriber blacklisted' },
+  // { value: 'manualConfirm', label: 'Did this subscriber manually confirm' },
+  { value: 'bounceCount', label: 'Number of bounces' },
+  { value: 'createdAt', label: 'Entered' },
+  { value: 'updatedAt', label: 'Last Modified' },
+  { value: 'uniqueId', label: 'Unique ID' },
+  { value: 'htmlEmail', label: 'Send this subscriber HTML emails' },
+  { value: 'rssFrequency', label: 'RSS Frequency' },
+  { value: 'disabled', label: 'Is this account disabled?' },
+  { value: 'extraData', label: 'Additional data' },
+  { value: 'foreignKey', label: 'Foreign Key' },
+])
+
+const form = ref({
+  dateType: 'any',
+  dateFrom: '',
+  dateTo: '',
+  columns: columnOptions.value.map((column) => column.value)
+})
+
+const exportError = ref('')
+const selectAllColumnsCheckbox = ref(null)
+
+const usesAnyDate = computed(() => form.value.dateType === 'any')
+
+const allColumnsSelected = computed(() => {
+  return (
+      columnOptions.value.length > 0 &&
+      form.value.columns.length === columnOptions.value.length
+  )
+})
+
+const someColumnsSelected = computed(() => {
+  return form.value.columns.length > 0 && !allColumnsSelected.value
+})
+
+watchEffect(() => {
+  if (!selectAllColumnsCheckbox.value) return
+  selectAllColumnsCheckbox.value.indeterminate = someColumnsSelected.value
+})
+
+watch(() => form.value.dateType, (dateType) => {
+  exportError.value = ''
+  if (dateType === 'any') {
+    form.value.dateFrom = ''
+    form.value.dateTo = ''
+  }
+})
+
+watch(() => [form.value.dateFrom, form.value.dateTo], () => {
+  exportError.value = ''
+})
+
+const toggleAllColumns = (event) => {
+  if (event.target.checked) {
+    form.value.columns = columnOptions.value.map((column) => column.value)
+    return
+  }
+
+  form.value.columns = []
+}
+
+const exportSubscribers = () => {
+  if (form.value.columns.length === 0) {
+    exportError.value = 'Select at least one column.'
+    return
+  }
+  if (!usesAnyDate.value && form.value.dateFrom && form.value.dateTo && form.value.dateFrom > form.value.dateTo) {
+    exportError.value = 'Date From cannot be after Date To.'
+    return
+  }
+
+  const params = new URLSearchParams()
+  if (props.listId) {
+    params.set('list_id', String(props.listId))
+  }
+
+  if (props.directoryFilter && props.directoryFilter !== 'all') {
+    params.set(props.directoryFilter, 'true')
+  }
+
+  params.set('date_type', form.value.dateType)
+
+  if (!usesAnyDate.value) {
+    if (form.value.dateFrom) {
+      params.set('date_from', form.value.dateFrom)
+    }
+
+    if (form.value.dateTo) {
+      params.set('date_to', form.value.dateTo)
+    }
+  }
+
+  form.value.columns.forEach((column) => {
+    params.append('columns[]', column)
+  })
+
+  window.location.href = `/subscribers/export?${params.toString()}`
+}
+</script>
diff --git a/assets/vue/components/subscribers/SubscriberDirectory.vue b/assets/vue/components/subscribers/SubscriberDirectory.vue
index d7bce38..5b6539f 100644
--- a/assets/vue/components/subscribers/SubscriberDirectory.vue
+++ b/assets/vue/components/subscribers/SubscriberDirectory.vue
@@ -83,6 +83,8 @@
       </div>
     </div>
   </div>
+
+  <ListSubscribersExportPanel :directory-filter="currentFilter || 'all'"/>
 </template>
 
 <script setup>
@@ -94,6 +96,7 @@ import ImportResult from './ImportResult.vue'
 import {inject, onMounted, ref} from 'vue'
 import {subscriberFilters} from './subscriberFilters'
 import {subscribersClient} from '../../api'
+import ListSubscribersExportPanel from "../lists/ListSubscribersExportPanel.vue";
 
 const initialSubscribers = inject('subscribers', [])
 const initialPagination = inject('pagination', {
@@ -303,21 +306,4 @@ const handleFileChange = async (event) => {
   }
 }
 
-const exportSubscribers = () => {
-  const params = new URLSearchParams()
-  if (currentFilter.value && currentFilter.value !== 'all') {
-    params.set(currentFilter.value, 'true')
-  }
-
-  if (searchQuery.value && isAllowedSearchColumn(searchColumn.value)) {
-    params.set('findColumn', searchColumn.value)
-    params.set('findValue', searchQuery.value)
-  }
-
-  if (pagination.value.total > 0) {
-    params.set('limit', pagination.value.total)
-  }
-
-  window.location.href = `/subscribers/export?${params.toString()}`
-}
 </script>
diff --git a/assets/vue/components/subscribers/SubscribersTable.vue b/assets/vue/components/subscribers/SubscribersTable.vue
deleted file mode 100644
index 790d854..0000000
--- a/assets/vue/components/subscribers/SubscribersTable.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <table class="w-full text-left border-collapse">
-    <thead class="border-b">
-    <tr class="uppercase text-xs text-gray-500 font-semibold">
-      <th class="py-3 pr-4">Campaign Name</th>
-      <th class="py-3 px-4">Status</th>
-      <th class="py-3 px-4">Date</th>
-      <th class="py-3 px-4">Open Rate</th>
-      <th class="py-3 pl-4">Click Rate</th>
-    </tr>
-    </thead>
-
-    <tbody>
-    <tr
-        v-for="row in rows"
-        :key="row.id"
-        class="border-b last:border-0 hover:bg-gray-50"
-    >
-      <td class="py-3 pr-4 font-medium text-gray-900">
-        {{ row.name }}
-      </td>
-
-      <td class="py-3 px-4">
-          <span
-              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold"
-              :class="statusClass(row.status)"
-          >
-            {{ row.status }}
-          </span>
-      </td>
-
-      <td class="py-3 px-4 text-sm text-gray-500">{{ row.date }}</td>
-      <td class="py-3 px-4 text-sm text-gray-500">{{ row.openRate ?? '—' }}</td>
-      <td class="py-3 pl-4 text-sm text-gray-500">{{ row.clickRate ?? '—' }}</td>
-    </tr>
-
-    <!-- empty state -->
-    <tr v-if="!rows.length">
-      <td colspan="5" class="text-center py-8 text-gray-500">
-        No subscribers yet.
-      </td>
-    </tr>
-    </tbody>
-  </table>
-</template>
-
-<script setup>
-const props = defineProps({
-  rows: {
-    type: Array,
-    default: () => [],
-  },
-})
-
-const statusClass = (status) => {
-  const s = status.toLowerCase()
-
-  return {
-    sent: 'bg-green-100 text-green-800',
-    scheduled: 'bg-blue-100 text-blue-800',
-    draft: 'bg-gray-100 text-gray-800',
-  }[s] || 'bg-gray-100 text-gray-800'
-}
-</script>
diff --git a/assets/vue/views/ListSubscribersView.vue b/assets/vue/views/ListSubscribersView.vue
new file mode 100644
index 0000000..f51b621
--- /dev/null
+++ b/assets/vue/views/ListSubscribersView.vue
@@ -0,0 +1,562 @@
+<template>
+  <AdminLayout>
+    <div class="space-y-6 animate-in fade-in duration-300">
+      <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4 sm:p-6">
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+          <div>
+            <p class="text-xs uppercase tracking-wide text-slate-500">Mailing List</p>
+            <h2 class="text-xl font-bold text-slate-900">
+              {{ listName || `List #${listId}` }}
+            </h2>
+          </div>
+
+          <RouterLink
+              to="/lists"
+              class="inline-flex items-center gap-2 px-3 py-2 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50"
+          >
+            Back to Lists
+          </RouterLink>
+        </div>
+      </div>
+
+      <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+        <div
+            class="p-4 sm:p-6 border-b border-slate-200 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+          <h3 class="text-lg font-semibold text-slate-900">Subscribers</h3>
+          <div class="flex flex-col sm:flex-row gap-2 sm:items-center">
+            <label class="text-sm text-slate-600">Status</label>
+            <select
+                v-model="statusFilter"
+                class="px-3 py-2 text-sm border border-slate-200 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 outline-none"
+            >
+              <option value="all">All</option>
+              <option value="confirmed">Confirmed</option>
+              <option value="unconfirmed">Unconfirmed</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="p-4 sm:p-6 border-b border-slate-200 bg-slate-50/50">
+          <div class="flex flex-col xl:flex-row xl:items-center gap-3">
+            <div class="flex flex-wrap items-center gap-2">
+              <span class="text-sm text-slate-600">Selected: {{ selectedSubscribers.length }}</span>
+              <button
+                  type="button"
+                  class="px-3 py-2 text-xs font-medium rounded-lg border border-red-200 text-red-700 hover:bg-red-50 disabled:opacity-50"
+                  :disabled="!hasSelection || actionLoading"
+                  @click="deleteSelectedSubscribers"
+              >
+                Delete Selected
+              </button>
+            </div>
+
+            <div class="flex flex-col sm:flex-row sm:items-center gap-2 xl:ml-auto">
+              <select
+                  v-model="selectedTargetListId"
+                  class="px-3 py-2 text-sm border border-slate-200 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 outline-none"
+                  :disabled="actionLoading"
+              >
+                <option value="">Select target list</option>
+                <option v-for="list in availableLists" :key="list.id" :value="String(list.id)">
+                  {{ list.name || `List #${list.id}` }}
+                </option>
+              </select>
+
+              <button
+                  type="button"
+                  class="px-3 py-2 text-xs font-medium rounded-lg border border-blue-200 text-blue-700 hover:bg-blue-50 disabled:opacity-50"
+                  :disabled="!hasSelection || !selectedTargetListId || actionLoading"
+                  @click="copySelectedSubscribers"
+              >
+                Copy Selected
+              </button>
+
+              <button
+                  type="button"
+                  class="px-3 py-2 text-xs font-medium rounded-lg border border-amber-200 text-amber-700 hover:bg-amber-50 disabled:opacity-50"
+                  :disabled="!hasSelection || !selectedTargetListId || actionLoading"
+                  @click="moveSelectedSubscribers"
+              >
+                Move Selected
+              </button>
+            </div>
+          </div>
+
+          <p v-if="actionError" class="mt-3 text-sm text-red-600">{{ actionError }}</p>
+          <p v-if="actionMessage" class="mt-3 text-sm text-emerald-700">{{ actionMessage }}</p>
+        </div>
+
+        <div class="overflow-x-auto">
+          <table class="w-full text-left text-sm hidden md:table">
+            <thead class="bg-slate-50 text-slate-500 font-medium">
+            <tr>
+              <th class="px-4 py-4 w-10">
+                <input
+                    ref="selectAllCheckbox"
+                    type="checkbox"
+                    class="w-4 h-4 rounded border-slate-300"
+                    :checked="allVisibleSelected"
+                    :disabled="filteredSubscribers.length === 0"
+                    @change="toggleSelectAllVisible"
+                >
+              </th>
+              <th class="px-6 py-4">ID</th>
+              <th class="px-6 py-4">Email</th>
+              <th class="px-6 py-4">Status</th>
+              <th class="px-6 py-4">Created</th>
+              <th class="px-6 py-4 text-right">Actions</th>
+            </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-200">
+            <tr v-if="loading">
+              <td colspan="6" class="px-6 py-8 text-center text-slate-500">Loading...</td>
+            </tr>
+
+            <tr v-else-if="errorMessage">
+              <td colspan="6" class="px-6 py-8 text-center text-red-600">{{ errorMessage }}</td>
+            </tr>
+
+            <tr
+                v-for="subscriber in filteredSubscribers"
+                v-else
+                :key="subscriber.id"
+                class="hover:bg-slate-50 transition-colors"
+            >
+              <td class="px-4 py-4">
+                <input
+                    v-model="selectedIds"
+                    type="checkbox"
+                    class="w-4 h-4 rounded border-slate-300"
+                    :value="subscriber.id"
+                >
+              </td>
+              <td class="px-6 py-4 text-slate-600">{{ subscriber.id }}</td>
+              <td class="px-6 py-4 font-mono text-slate-900">{{ subscriber.email }}</td>
+              <td class="px-6 py-4">
+                  <span
+                      class="px-2.5 py-0.5 rounded-full text-xs font-medium"
+                      :class="subscriber.confirmed ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700'"
+                  >
+                    {{ subscriber.confirmed ? 'Confirmed' : 'Unconfirmed' }}
+                  </span>
+              </td>
+              <td class="px-6 py-4 text-slate-600">{{ formatDate(subscriber.createdAt) }}</td>
+              <td class="px-6 py-4 text-right">
+                <button
+                    type="button"
+                    class="px-3 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-700 hover:bg-red-50 disabled:opacity-50"
+                    :disabled="actionLoading"
+                    @click="deleteSingleSubscriber(subscriber)"
+                >
+                  Delete
+                </button>
+              </td>
+            </tr>
+
+            <tr v-if="!loading && !errorMessage && filteredSubscribers.length === 0">
+              <td colspan="6" class="px-6 py-8 text-center text-slate-500">No subscribers for this filter.</td>
+            </tr>
+            </tbody>
+          </table>
+
+          <div class="block md:hidden divide-y divide-slate-100">
+            <div v-if="loading" class="px-4 py-8 text-center text-slate-500 text-sm">Loading...</div>
+            <div v-else-if="errorMessage" class="px-4 py-8 text-center text-red-600 text-sm">{{ errorMessage }}</div>
+
+            <div class="p-4 border-b border-slate-100" v-if="!loading && !errorMessage && filteredSubscribers.length">
+              <label class="inline-flex items-center gap-2 text-sm text-slate-700">
+                <input
+                    type="checkbox"
+                    class="w-4 h-4 rounded border-slate-300"
+                    :checked="allVisibleSelected"
+                    @change="toggleSelectAllVisible"
+                >
+                Select all visible
+              </label>
+            </div>
+
+            <div
+                v-for="subscriber in filteredSubscribers"
+                :key="`mobile-${subscriber.id}`"
+                class="p-4"
+            >
+              <div class="flex items-start gap-3">
+                <input
+                    v-model="selectedIds"
+                    type="checkbox"
+                    class="mt-1 w-4 h-4 rounded border-slate-300"
+                    :value="subscriber.id"
+                >
+
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center justify-between gap-3">
+                    <p class="text-sm font-medium text-slate-900 truncate">{{ subscriber.email }}</p>
+                    <span
+                        class="px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap"
+                        :class="subscriber.confirmed ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700'"
+                    >
+                      {{ subscriber.confirmed ? 'Confirmed' : 'Unconfirmed' }}
+                    </span>
+                  </div>
+                  <p class="mt-2 text-xs text-slate-500">#{{ subscriber.id }} · {{formatDate(subscriber.createdAt) }}</p>
+                  <button
+                      type="button"
+                      class="mt-3 px-3 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-700 hover:bg-red-50 disabled:opacity-50"
+                      :disabled="actionLoading"
+                      @click="deleteSingleSubscriber(subscriber)"
+                  >
+                    Delete
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div
+                v-if="!loading && !errorMessage && filteredSubscribers.length === 0"
+                class="px-4 py-8 text-center text-slate-500 text-sm"
+            >
+              No subscribers for this filter.
+            </div>
+          </div>
+        </div>
+
+        <div
+            class="p-4 sm:p-6 border-t border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-3 text-sm">
+          <span class="text-slate-500">Showing {{ filteredSubscribers.length }} on page · Total: {{ total }}</span>
+          <div class="flex gap-2 w-full sm:w-auto">
+            <button
+                type="button"
+                class="flex-1 sm:flex-none px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+                :disabled="!canGoPrevious || loading || actionLoading"
+                @click="previousPage"
+            >
+              Previous
+            </button>
+            <button
+                type="button"
+                class="flex-1 sm:flex-none px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+                :disabled="!canGoNext || loading || actionLoading"
+                @click="nextPage"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <ListSubscribersExportPanel :list-id="listId" :list-name="listName"/>
+
+    </div>
+  </AdminLayout>
+</template>
+
+<script setup>
+import {computed, onMounted, ref, watch, watchEffect} from 'vue'
+import {useRoute} from 'vue-router'
+import AdminLayout from '../layouts/AdminLayout.vue'
+import ListSubscribersExportPanel from '../components/lists/ListSubscribersExportPanel.vue'
+import client, {subscriptionClient} from '../api'
+
+const route = useRoute()
+const listId = computed(() => Number(route.params.listId))
+const listName = ref(typeof route.query.listName === 'string' ? route.query.listName : '')
+
+const subscribers = ref([])
+const total = ref(0)
+const pageSize = ref(10)
+const loading = ref(false)
+const actionLoading = ref(false)
+const errorMessage = ref('')
+const actionError = ref('')
+const actionMessage = ref('')
+const nextCursor = ref(null)
+const cursorHistory = ref([null])
+const statusFilter = ref('all')
+const selectedIds = ref([])
+const selectedTargetListId = ref('')
+const availableLists = ref([])
+const selectAllCheckbox = ref(null)
+
+const filteredSubscribers = computed(() => {
+  if (statusFilter.value === 'confirmed') {
+    return subscribers.value.filter((subscriber) => subscriber.confirmed)
+  }
+
+  if (statusFilter.value === 'unconfirmed') {
+    return subscribers.value.filter((subscriber) => !subscriber.confirmed)
+  }
+
+  return subscribers.value
+})
+
+const selectedSubscribers = computed(() => (
+    subscribers.value.filter((subscriber) => selectedIds.value.includes(subscriber.id))
+))
+
+const hasSelection = computed(() => selectedSubscribers.value.length > 0)
+const canGoPrevious = computed(() => cursorHistory.value.length > 1)
+const canGoNext = computed(() => nextCursor.value !== null)
+
+const allVisibleSelected = computed(() => {
+  if (filteredSubscribers.value.length === 0) return false
+  return filteredSubscribers.value.every((subscriber) => selectedIds.value.includes(subscriber.id))
+})
+
+const someVisibleSelected = computed(() => {
+  if (filteredSubscribers.value.length === 0) return false
+  return filteredSubscribers.value.some((subscriber) => selectedIds.value.includes(subscriber.id))
+})
+
+watchEffect(() => {
+  if (!selectAllCheckbox.value) return
+  selectAllCheckbox.value.indeterminate = !allVisibleSelected.value && someVisibleSelected.value
+})
+
+watch(statusFilter, () => {
+  actionError.value = ''
+  actionMessage.value = ''
+})
+
+const formatDate = (value) => {
+  if (!value) return '-'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return '-'
+  return date.toLocaleDateString()
+}
+
+const clearSelection = () => {
+  selectedIds.value = []
+}
+
+const getCurrentCursor = () => cursorHistory.value[cursorHistory.value.length - 1]
+
+const toggleSelectAllVisible = (event) => {
+  const visibleIds = filteredSubscribers.value.map((subscriber) => subscriber.id)
+
+  if (event.target.checked) {
+    const merged = new Set([...selectedIds.value, ...visibleIds])
+    selectedIds.value = Array.from(merged)
+    return
+  }
+
+  const visibleSet = new Set(visibleIds)
+  selectedIds.value = selectedIds.value.filter((id) => !visibleSet.has(id))
+}
+
+const getSelectedEmails = () => selectedSubscribers.value
+    .map((subscriber) => subscriber.email)
+    .filter((email) => typeof email === 'string' && email.length > 0)
+
+const loadListMeta = async () => {
+  try {
+    const list = await subscriptionClient.getSubscriberList(listId.value)
+    if (list?.name) {
+      listName.value = list.name
+    }
+  } catch (error) {
+    console.error('Failed to load list metadata:', error)
+  }
+}
+
+const loadAvailableLists = async () => {
+  const lists = []
+  let cursor = null
+
+  try {
+    while (true) {
+      const response = await subscriptionClient.getSubscriberLists(cursor, 100)
+      const items = Array.isArray(response.items) ? response.items : []
+
+      for (const list of items) {
+        if (list.id !== listId.value) {
+          lists.push(list)
+        }
+      }
+
+      if (!response.pagination?.hasMore || response.pagination?.nextCursor == null) {
+        break
+      }
+
+      cursor = response.pagination.nextCursor
+    }
+  } catch (error) {
+    console.error('Failed to load available lists:', error)
+  }
+
+  availableLists.value = lists
+}
+
+const fetchSubscribers = async (cursor = null) => {
+  if (!Number.isInteger(listId.value) || listId.value <= 0) {
+    errorMessage.value = 'Invalid list ID.'
+    subscribers.value = []
+    return
+  }
+
+  loading.value = true
+  errorMessage.value = ''
+
+  try {
+    const response = await subscriptionClient.getSubscribersOfList(listId.value, cursor, pageSize.value)
+    subscribers.value = Array.isArray(response.items) ? response.items : []
+    total.value = response.pagination?.total ?? subscribers.value.length
+    nextCursor.value = response.pagination?.nextCursor ?? null
+    clearSelection()
+    return true
+  } catch (error) {
+    console.error('Failed to load list subscribers:', error)
+    errorMessage.value = 'Failed to load subscribers for this list.'
+    subscribers.value = []
+    nextCursor.value = null
+    clearSelection()
+    return false
+  } finally {
+    loading.value = false
+  }
+}
+
+const refreshCurrentPage = async () => {
+  await fetchSubscribers(getCurrentCursor())
+}
+
+const deleteEmailsFromCurrentList = async (emails) => {
+  if (emails.length === 0) return
+  // todo: check why subscription client delete is not working
+  await client.delete(`lists/${listId.value}/subscribers`, {emails})
+}
+
+const deleteSingleSubscriber = async (subscriber) => {
+  if (!subscriber?.email) return
+
+  actionError.value = ''
+  actionMessage.value = ''
+
+  const confirmed = window.confirm(`Remove ${subscriber.email} from this list?`)
+  if (!confirmed) return
+
+  actionLoading.value = true
+  try {
+    await deleteEmailsFromCurrentList([subscriber.email])
+    actionMessage.value = 'Subscriber removed from this list.'
+    await refreshCurrentPage()
+  } catch (error) {
+    console.error('Failed to delete subscriber from list:', error)
+    actionError.value = 'Failed to remove subscriber from this list.'
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+const deleteSelectedSubscribers = async () => {
+  const emails = getSelectedEmails()
+  if (emails.length === 0) return
+
+  actionError.value = ''
+  actionMessage.value = ''
+
+  const confirmed = window.confirm(`Remove ${emails.length} selected subscriber(s) from this list?`)
+  if (!confirmed) return
+
+  actionLoading.value = true
+  try {
+    await deleteEmailsFromCurrentList(emails)
+    actionMessage.value = `Removed ${emails.length} subscriber(s) from this list.`
+    await refreshCurrentPage()
+  } catch (error) {
+    console.error('Failed to delete selected subscribers from list:', error)
+    actionError.value = 'Failed to remove selected subscribers from this list.'
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+const copySelectedSubscribers = async () => {
+  const emails = getSelectedEmails()
+  const targetListId = Number(selectedTargetListId.value)
+
+  if (emails.length === 0 || !Number.isInteger(targetListId) || targetListId <= 0) return
+
+  actionError.value = ''
+  actionMessage.value = ''
+
+  actionLoading.value = true
+  try {
+    await subscriptionClient.createSubscriptions(emails, targetListId)
+    actionMessage.value = `Copied ${emails.length} subscriber(s) to the selected list.`
+  } catch (error) {
+    console.error('Failed to copy selected subscribers:', error)
+    actionError.value = 'Failed to copy selected subscribers.'
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+const moveSelectedSubscribers = async () => {
+  const emails = getSelectedEmails()
+  const targetListId = Number(selectedTargetListId.value)
+
+  if (emails.length === 0 || !Number.isInteger(targetListId) || targetListId <= 0) return
+
+  actionError.value = ''
+  actionMessage.value = ''
+
+  const confirmed = window.confirm(`Move ${emails.length} selected subscriber(s) to the selected list?`)
+  if (!confirmed) return
+
+  actionLoading.value = true
+  let copied = false
+
+  try {
+    await subscriptionClient.createSubscriptions(emails, targetListId)
+    copied = true
+
+    await deleteEmailsFromCurrentList(emails)
+
+    actionMessage.value = `Moved ${emails.length} subscriber(s) to the selected list.`
+    selectedTargetListId.value = ''
+    await refreshCurrentPage()
+  } catch (error) {
+    console.error('Failed to move selected subscribers:', error)
+
+    if (copied) {
+      actionError.value =
+          `Copied ${emails.length} subscriber(s) to the selected list, ` +
+          `but failed to remove them from the current list. ` +
+          `They may now exist in both lists.`
+      await refreshCurrentPage()
+    } else {
+      actionError.value = 'Failed to move selected subscribers.'
+    }
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+const nextPage = async () => {
+  if (nextCursor.value === null || loading.value || actionLoading.value) return
+
+  const requestedCursor = nextCursor.value
+  const ok = await fetchSubscribers(requestedCursor)
+  if (ok) {
+    cursorHistory.value.push(requestedCursor)
+  }
+}
+
+const previousPage = async () => {
+  if (cursorHistory.value.length <= 1 || loading.value || actionLoading.value) return
+
+  const previousCursor = cursorHistory.value[cursorHistory.value.length - 2]
+  const ok = await fetchSubscribers(previousCursor)
+  if (ok) {
+    cursorHistory.value.pop()
+  }
+}
+
+onMounted(async () => {
+  await Promise.all([
+    loadListMeta(),
+    loadAvailableLists(),
+    fetchSubscribers(getCurrentCursor())
+  ])
+})
+</script>
diff --git a/assets/vue/views/ListsView.vue b/assets/vue/views/ListsView.vue
new file mode 100644
index 0000000..dd66bc4
--- /dev/null
+++ b/assets/vue/views/ListsView.vue
@@ -0,0 +1,12 @@
+<template>
+  <AdminLayout>
+    <div class="space-y-6 animate-in fade-in duration-300">
+      <ListDirectory />
+    </div>
+  </AdminLayout>
+</template>
+
+<script setup>
+import AdminLayout from '../layouts/AdminLayout.vue'
+import ListDirectory from '../components/lists/ListDirectory.vue'
+</script>
diff --git a/package.json b/package.json
index 7b5b04a..d609a35 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "webpack-notifier": "^1.15.0"
   },
   "dependencies": {
-    "@tatevikgr/rest-api-client": "^1.0.2",
+    "@tatevikgr/rest-api-client": "^1.3.1",
     "apexcharts": "^5.10.4",
     "vue": "^3.5.16",
     "vue-router": "4",
diff --git a/src/Controller/ListsController.php b/src/Controller/ListsController.php
new file mode 100644
index 0000000..f52d49d
--- /dev/null
+++ b/src/Controller/ListsController.php
@@ -0,0 +1,47 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Controller;
+
+use PhpList\RestApiClient\Endpoint\ListClient;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+#[Route('/lists', name: 'list_')]
+class ListsController extends AbstractController
+{
+    public function __construct(private readonly ListClient $listClient)
+    {
+    }
+
+    #[Route('/', name: 'list', methods: ['GET'])]
+    public function index(Request $request): JsonResponse|Response
+    {
+        $accept = (string) $request->headers->get('Accept', '');
+        $wantsJson = $request->isXmlHttpRequest() || str_contains($accept, 'application/json');
+        if (! $wantsJson) {
+            return $this->render('spa.html.twig', [
+                'page' => 'Lists',
+                'api_token' => $request->getSession()->get('auth_token'),
+                'api_base_url' => $this->getParameter('api_base_url'),
+            ]);
+        }
+        $initialData = $this->listClient->getLists();
+
+        return $this->json($initialData);
+    }
+
+    #[Route('/{listId}/subscribers', name: 'list_subscribers', methods: ['GET'])]
+    public function view(Request $request, int $listId): JsonResponse|Response
+    {
+        return $this->render('spa.html.twig', [
+            'page' => 'List Subscribers',
+            'api_token' => $request->getSession()->get('auth_token'),
+            'api_base_url' => $this->getParameter('api_base_url'),
+        ]);
+    }
+}
diff --git a/src/Controller/SubscribersController.php b/src/Controller/SubscribersController.php
index 9eaccb8..171e97c 100644
--- a/src/Controller/SubscribersController.php
+++ b/src/Controller/SubscribersController.php
@@ -4,21 +4,25 @@
 
 namespace PhpList\WebFrontend\Controller;
 
-use DateTimeImmutable;
 use PhpList\RestApiClient\Endpoint\SubscribersClient;
-use PhpList\RestApiClient\Entity\Subscriber;
 use PhpList\RestApiClient\Request\Subscriber\SubscribersFilterRequest;
+use PhpList\WebFrontend\Service\SubscriberCollectionNormalizer;
+use PhpList\WebFrontend\Service\SubscriberExportRequestFactory;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpFoundation\StreamedResponse;
 use Symfony\Component\Routing\Attribute\Route;
 
 #[Route('/subscribers', name: 'subscriber_')]
 class SubscribersController extends AbstractController
 {
-    public function __construct(private readonly SubscribersClient $subscribersClient)
-    {
+    public function __construct(
+        private readonly SubscribersClient $subscribersClient,
+        private readonly SubscriberCollectionNormalizer $subscriberCollectionNormalizer,
+        private readonly SubscriberExportRequestFactory $subscriberExportRequestFactory
+    ) {
     }
 
     /**
@@ -28,7 +32,9 @@ public function __construct(private readonly SubscribersClient $subscribersClien
     #[Route('/', name: 'list', methods: ['GET'])]
     public function index(Request $request): JsonResponse|Response
     {
-        if (! $request->isXmlHttpRequest() && $request->headers->get('Accept') !== 'application/json') {
+        $accept = (string) $request->headers->get('Accept', '');
+        $wantsJson = $request->isXmlHttpRequest() || str_contains($accept, 'application/json');
+        if (! $wantsJson) {
             return $this->render('spa.html.twig', [
                 'page' => 'Subscribers',
                 'api_token' => $request->getSession()->get('auth_token'),
@@ -36,8 +42,7 @@ public function index(Request $request): JsonResponse|Response
             ]);
         }
 
-        $afterId = (int) $request->query->get('after_id');
-        $limit = max(1, (int) $request->query->get('limit', 10));
+        $afterId = $request->query->has('after_id') ? $request->query->getInt('after_id') : null;
 
         $filter = new SubscribersFilterRequest(
             isConfirmed: $request->query->has('confirmed') ? true :
@@ -48,7 +53,7 @@ public function index(Request $request): JsonResponse|Response
             findValue: $request->query->get('findValue'),
         );
 
-        $collection = $this->subscribersClient->getSubscribers($filter, $afterId, $limit);
+        $collection = $this->subscribersClient->getSubscribers($filter, $afterId, 10);
 
         $history = $request->getSession()->get('subscribers_history', []);
         if (!in_array($afterId, $history, true)) {
@@ -64,91 +69,53 @@ public function index(Request $request): JsonResponse|Response
             $prevId = $history[$index - 1];
         }
 
-        $initialData = [
-            'items' => array_map(static function (Subscriber $subscriber) {
-                return [
-                    'id' => $subscriber->id,
-                    'email' => $subscriber->email,
-                    'confirmed' => $subscriber->confirmed,
-                    'blacklisted' => $subscriber->blacklisted,
-                    'createdAt' => (new DateTimeImmutable($subscriber->createdAt))->format('Y-m-d H:i:s'),
-                    'uniqueId' => $subscriber->uniqueId,
-                    'listCount' => count($subscriber->subscribedLists),
-                ];
-            }, $collection->items ?? []),
-            'pagination' => [
-                'limit' => $collection->pagination->limit,
-                'afterId' => $collection->pagination->nextCursor,
-                'hasMore' => $collection->pagination->hasMore ,
-                'total' => $collection->pagination->total,
-                'prevId' => $prevId,
-                'isFirstPage' => $afterId === 0,
-            ],
-        ];
-
-        return $this->json($initialData);
+        return $this->json($this->subscriberCollectionNormalizer->normalize($collection, $prevId, $afterId));
     }
 
+    /**
+     * @SuppressWarnings("CyclomaticComplexity")
+     */
     #[Route('/export', name: 'export', methods: ['GET'])]
     public function export(Request $request): Response
     {
-        $filter = new SubscribersFilterRequest(
-            isConfirmed: $request->query->has('confirmed') ? true :
-                ($request->query->has('unconfirmed') ? false : null),
-            isBlacklisted: $request->query->has('blacklisted') ? true :
-                ($request->query->has('non-blacklisted') ? false : null),
-            findColumn: $request->query->get('findColumn'),
-            findValue: $request->query->get('findValue'),
-        );
+        $exportRequest = $this->subscriberExportRequestFactory->fromQuery($request->query);
 
-        $collection = $this->subscribersClient->getSubscribers($filter, 0, $request->query->getInt('limit'));
-        $exportData = $collection->items;
-        if (empty($exportData)) {
-            return new Response('No subscribers to export.', Response::HTTP_NOT_FOUND);
-        }
-        $handle = fopen('php://temp', 'r+');
-
-        $headers = [
-            'id',
-            'email',
-            'createdAt',
-            'confirmed',
-            'blacklisted',
-            'bounceCount',
-            'uniqueId',
-            'htmlEmail',
-            'disabled',
-            'lists',
-        ];
-        fputcsv($handle, $headers);
-
-        foreach ($exportData as $data) {
-            $row = [
-                'id' => $data->id,
-                'email' => $data->email,
-                'createdAt' => (new DateTimeImmutable($data->createdAt))->format('Y-m-d H:i:s'),
-                'confirmed' => $data->confirmed,
-                'blacklisted' => $data->blacklisted,
-                'bounceCount' => $data->bounceCount,
-                'uniqueId' => $data->uniqueId,
-                'htmlEmail' => $data->htmlEmail,
-                'disabled' => $data->disabled,
-                'lists' => implode('|', array_map(fn($list) => $list['name'], $data->subscribedLists)),
-            ];
-
-            fputcsv($handle, $row);
+        $upstreamResponse = $this->subscribersClient->exportSubscribers($exportRequest);
+        $statusCode = $upstreamResponse->getStatusCode();
+        $isSuccessfulExport = $statusCode >= 200 && $statusCode < 300;
+
+        $contentType = $upstreamResponse->getHeaderLine('Content-Type');
+        if ($isSuccessfulExport && $contentType === '') {
+            $contentType = 'text/csv; charset=UTF-8';
         }
 
-        rewind($handle);
-        $csvContent = stream_get_contents($handle);
-        fclose($handle);
+        $contentDisposition = $upstreamResponse->getHeaderLine('Content-Disposition');
+        if ($isSuccessfulExport && $contentDisposition === '') {
+            $contentDisposition = sprintf(
+                'attachment; filename="subscribers_export_%s.csv"',
+                date('Y-m-d_H-i-s')
+            );
+        }
 
-        $response = new Response($csvContent);
-        $response->headers->set('Content-Type', 'text/csv');
-        $response->headers->set(
-            'Content-Disposition',
-            'attachment; filename="subscribers_export_' . date('Y-m-d_H-i-s') . '.csv"'
+        $body = $upstreamResponse->getBody();
+        $response = new StreamedResponse(
+            static function () use ($body): void {
+                if ($body->isSeekable()) {
+                    $body->rewind();
+                }
+                while (! $body->eof()) {
+                    echo $body->read(8192);
+                }
+            },
+            $statusCode
         );
+        if ($contentType !== '') {
+            $response->headers->set('Content-Type', $contentType);
+        }
+
+        if ($contentDisposition !== '') {
+            $response->headers->set('Content-Disposition', $contentDisposition);
+        }
 
         return $response;
     }
diff --git a/src/Service/SubscriberCollectionNormalizer.php b/src/Service/SubscriberCollectionNormalizer.php
new file mode 100644
index 0000000..9be312e
--- /dev/null
+++ b/src/Service/SubscriberCollectionNormalizer.php
@@ -0,0 +1,37 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Service;
+
+use DateTimeImmutable;
+use PhpList\RestApiClient\Entity\Subscriber;
+use PhpList\RestApiClient\Response\Subscribers\SubscriberCollection;
+
+class SubscriberCollectionNormalizer
+{
+    public function normalize(SubscriberCollection $collection, ?int $prevId, ?int $afterId): array
+    {
+        return [
+            'items' => array_map(static function (Subscriber $subscriber) {
+                return [
+                    'id' => $subscriber->id,
+                    'email' => $subscriber->email,
+                    'confirmed' => $subscriber->confirmed,
+                    'blacklisted' => $subscriber->blacklisted,
+                    'createdAt' => (new DateTimeImmutable($subscriber->createdAt))->format('Y-m-d H:i:s'),
+                    'uniqueId' => $subscriber->uniqueId,
+                    'listCount' => count($subscriber->subscribedLists),
+                ];
+            }, $collection->items ?? []),
+            'pagination' => [
+                'limit' => $collection->pagination->limit,
+                'afterId' => $collection->pagination->nextCursor,
+                'hasMore' => $collection->pagination->hasMore,
+                'total' => $collection->pagination->total,
+                'prevId' => $prevId,
+                'isFirstPage' => $afterId === null,
+            ],
+        ];
+    }
+}
diff --git a/src/Service/SubscriberExportRequestFactory.php b/src/Service/SubscriberExportRequestFactory.php
new file mode 100644
index 0000000..3a32509
--- /dev/null
+++ b/src/Service/SubscriberExportRequestFactory.php
@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Service;
+
+use PhpList\RestApiClient\Request\Subscriber\ExportSubscriberRequest;
+use Symfony\Component\HttpFoundation\ParameterBag;
+
+class SubscriberExportRequestFactory
+{
+    public function fromQuery(ParameterBag $query): ExportSubscriberRequest
+    {
+        return new ExportSubscriberRequest(
+            dateType: (string) $query->get('date_type', 'any'),
+            listId: $query->has('list_id') ? $query->getInt('list_id') : null,
+            dateFrom: $query->get('date_from') ?: null,
+            dateTo: $query->get('date_to') ?: null,
+            columns: array_values(array_filter($query->all('columns'))),
+            isConfirmed: $query->has('confirmed') ? true :
+                ($query->has('unconfirmed') ? false : null),
+            isBlacklisted: $query->has('blacklisted') ? true :
+                ($query->has('non-blacklisted') ? false : null),
+        );
+    }
+}
diff --git a/yarn.lock b/yarn.lock
index c3bd267..8f2be7f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1089,10 +1089,10 @@
     postcss "^8.5.6"
     tailwindcss "4.2.1"
 
-"@tatevikgr/rest-api-client@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-1.0.2.tgz#d78c28a35a037fb3bfdf3ebe6d3e46163498be89"
-  integrity sha512-b/pu0LEt/p3TTDmsDIAWU95rb60weF7wGK1iuYOd+BNPCS9sineADQQ90z83C+vviU+DoEGSUqa3Uhr/jJwJLw==
+"@tatevikgr/rest-api-client@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-1.3.1.tgz#787416e20efb6ea404f57ad38fcc95d0264b08ef"
+  integrity sha512-qU4muzitBPT1fUkfuzKIa36D1v4PSNeBtVb3gPJ9QKgxuDz4Qp3JeVFfUDxIUUHF0qlBIPf2bD12TcI4rkdjGw==
   dependencies:
     axios "^1.6.0"