diff --git a/custom/ImageGenerationCarousel.vue b/custom/ImageGenerationCarousel.vue
index b4208dd..9d6a038 100644
--- a/custom/ImageGenerationCarousel.vue
+++ b/custom/ImageGenerationCarousel.vue
@@ -1,144 +1,98 @@
 
 <template>
-  <!-- Main modal -->
-  <div tabindex="-1" class="[scrollbar-gutter:stable] fixed inset-0 z-40 flex justify-center items-center bg-gray-800/50 dark:bg-gray-900/50 overflow-y-auto">
-    <div class="relative p-4 w-full max-w-[1600px]">
-        <!-- Modal content -->
-        <div class="relative bg-white rounded-lg shadow-xl dark:bg-gray-700">
-            <!-- Modal header -->
-            <div class="flex items-center justify-between p-3 md:p-4 border-b rounded-t dark:border-gray-600">
-                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
-                    {{ $t('Generate image with AI') }}
-                </h3>
-                <button type="button" 
-                  @click="emit('close')"
-                  class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" >
-                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-                    </svg>
-                    <span class="sr-only">{{ $t('Close modal') }}</span>
-                </button>
+  <Dialog
+    ref="dialogRef"
+    :header="$t('Generate image with AI')"
+    :closable="true"
+    class="w-full lg:w-[1100px]"
+    :beforeCancelFunction="async () => { emit('close'); return true; }"
+    :buttons="dialogButtons"
+    :click-to-close-outside="false"
+  >
+    <div class="flex flex-col gap-4">
+      <Textarea
+        v-model="prompt"
+        :placeholder="$t('Prompt which will be passed to AI network')"
+        class="w-full text-sm leading-relaxed border border-gray-200 bg-gray-50/30 dark:border-gray-700 dark:bg-gray-800/40 dark:text-gray-100 rounded-xl focus:outline-none focus:border-gray-300 resize-none"
+      />
+
+      <div class="grid grid-cols-2 gap-4">
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+            {{ $t('Source Image') }}
+          </p>
+          <div class="h-96 rounded-default border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 overflow-hidden flex items-center justify-center">
+            <img
+              v-if="attachmentFiles[0]"
+              :src="attachmentFiles[0]"
+              class="w-full h-full object-contain"
+            />
+            <div v-else class="flex flex-col items-center justify-center gap-2 text-gray-400">
+              <svg class="w-12 h-12 text-gray-300 stroke-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+              </svg>
+              <p class="text-xs font-medium">{{ $t('No source image') }}</p>
             </div>
-            <!-- Modal body -->
-            <div class="p-4 md:p-5">
-              <!-- PROMPT TEXTAREA -->
-              <!-- Textarea -->
-              <textarea
-                id="message"
-                rows="3"
-                class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                :placeholder="$t('Prompt which will be passed to AI network')"
-                v-model="prompt"
-                :title="$t('Prompt which will be passed to AI network')"
-              ></textarea>
-
-              <!-- Thumbnails -->
-              <div class="mt-2 flex flex-wrap gap-2">
-                <img
-                  v-for="(img, idx) in attachmentFiles"
-                  :key="idx"
-                  :src="img"
-                  class="w-20 h-20 object-cover rounded cursor-pointer border hover:border-blue-500 transition"
-                  :alt="`Generated image ${idx + 1}`"
-                  @click="zoomImage(img)"
-                />
-              </div>
-
-              <!-- Fullscreen Modal -->
-              <div
-                v-if="zoomedImage"
-                class="w-full h-full fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80"
-                @click.self="closeZoom"
-              >
-                <img
-                  :src="zoomedImage"
-                  ref="zoomedImg"
-                  class="max-w-full max-h-full rounded-lg object-contain cursor-grab z-75"
-              />
-            </div>
-
-              <div class="flex flex-col items-center justify-center w-full relative">
-                <div 
-                  v-if="loading"  
-                  class=" absolute flex items-center justify-center w-full h-full z-40 bg-white/80 dark:bg-gray-900/80 rounded-lg"
-                >
-                    <div role="status" class="absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2">
-                        <svg aria-hidden="true" class="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/></svg>
-                        <span class="sr-only">{{ $t('Loading...') }}</span>
-                    </div>
-                </div>
-
-                <div v-if="loadingTimer" class="absolute pt-12 flex items-center justify-center w-full h-full z-40 bg-white/80 dark:bg-gray-900/80 rounded-lg">
-                  <div class="text-gray-800 dark:text-gray-100 text-lg font-semibold" 
-                    v-if="!historicalAverage"
-                  >
-                   {{ formatTime(loadingTimer) }} {{ $t('passed...') }} 
-                  </div>
-                  <div class="w-64" v-else>
-                    <ProgressBar
-                      class="absolute max-w-full"
-                      :currentValue="loadingTimer < historicalAverage ? loadingTimer : historicalAverage"
-                      :minValue="0"
-                      :maxValue="historicalAverage"
-                      :showValues="false"
-                      :progressFormatter="(value: number, percentage: number) => `${ formatTime(loadingTimer) } ( ~ ${ Math.floor( (
-                        loadingTimer < historicalAverage ? loadingTimer : historicalAverage
-                      ) / historicalAverage * 100) }% )`"
-                    />
-                  </div>
-                </div>
+          </div>
+          <div v-if="attachmentFiles.length > 1" class="flex flex-wrap gap-1.5">
+            <img
+              v-for="(img, idx) in attachmentFiles"
+              :key="idx"
+              :src="img"
+              class="w-10 h-10 object-cover rounded border border-gray-200"
+            />
+          </div>
+        </div>
 
-                <div v-if="errorMessage" class="absolute flex items-center justify-center w-full h-full z-40 bg-white/80 dark:bg-gray-900/80 rounded-lg">
-                  <div class="pt-20 text-red-500 dark:text-red-400 text-lg font-semibold">
-                    {{ errorMessage }}
-                  </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+            {{ $t('Generated Image') }}
+          </p>
+          <div class="relative h-96 rounded-default border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 overflow-hidden">
+            <div v-if="loading || loadingTimer" class="absolute inset-0 z-10 flex flex-col items-center justify-center bg-white/80 dark:bg-gray-900/80">
+              <Spinner v-if="loading" class="w-8 h-8" />
+              <div v-if="loadingTimer" class="mt-3">
+                <div v-if="!historicalAverage" class="text-gray-800 dark:text-gray-100 text-sm font-semibold">
+                  {{ formatTime(loadingTimer) }} {{ $t('passed...') }}
                 </div>
-
-                
-                <div id="gallery" class="relative w-full min-w-0" data-carousel="static">
-                  <!-- Carousel wrapper -->
-                  <div class="relative h-56 overflow-hidden rounded-lg md:h-[calc(100vh-400px)]">
-                    <Swiper
-                      ref="sliderRef"
-                      :images="images"
-                    />
-                  </div>
+                <div v-else class="w-40">
+                  <ProgressBar
+                    :currentValue="loadingTimer < historicalAverage ? loadingTimer : historicalAverage"
+                    :minValue="0"
+                    :maxValue="historicalAverage"
+                    :showValues="false"
+                    :progressFormatter="(_value: number, _percentage: number) => `${ formatTime(loadingTimer) } ( ~ ${ Math.floor( (
+                      loadingTimer < historicalAverage ? loadingTimer : historicalAverage
+                    ) / historicalAverage * 100) }% )`"
+                  />
                 </div>
               </div>
             </div>
-            <!-- Modal footer -->
-            <div class="flex justify-between p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600 gap-3">
-                <button type="button" class="px-5 py-2.5 bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 rounded-md text-white"
-                  @click="generateImages"
-                >{{ $t('Regenerate') }}</button>
-                <div class="flex gap-3">
-                  <button type="button" class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
-                    @click="emit('close')"
-                  >{{ $t('Cancel') }}</button>
-                  <button type="button" @click="confirmImage"
-                    :disabled="loading || images.length === 0"
-                    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center 
-                    dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 
-                    disabled:opacity-50 disabled:cursor-not-allowed"
-                  >{{ $t('Use image') }}</button>
-                </div>
+
+            <div v-if="errorMessage" class="absolute inset-0 z-10 flex items-center justify-center bg-white/80 dark:bg-gray-900/80">
+              <p class="text-red-500 dark:text-red-400 text-sm font-semibold px-4 text-center">{{ errorMessage }}</p>
             </div>
+
+            <Swiper ref="sliderRef" :images="images" class="h-full" />
+          </div>
         </div>
+      </div>
     </div>
-  </div>
+  </Dialog>
+
 </template>
 
 <script setup lang="ts">
 
-import { ref, onMounted, nextTick, Ref, watch } from 'vue'
-import { Carousel } from 'flowbite';
+import { ref, onMounted, nextTick, Ref, computed } from 'vue'
 import { callAdminForthApi } from '@/utils';
 import { useI18n } from 'vue-i18n';
 import adminforth from '@/adminforth';
-import { ProgressBar } from '@/afcl';
+import { ProgressBar, Dialog, Textarea, Spinner } from '@/afcl';
 import Swiper from './Swiper.vue';
 
-const { t: $t } = useI18n();
+const { t } = useI18n();
+const dialogRef = ref(null)
 const sliderRef = ref(null)
 
 const prompt = ref('');
@@ -168,8 +122,35 @@ onMounted(async () => {
     template = 'Generate image for field {{field}} in {{resource}}. No text should be on image.';
   }
   prompt.value = template;
+  dialogRef.value?.open();
 });
 
+const dialogButtons = computed(() => [
+  {
+    label: t('Cancel'),
+    options: {
+      class: 'afcl-button',
+      mode: 'secondary',
+    },
+    onclick: () => emit('close'),
+  },
+  {
+    label: t('Use image'),
+    options: {
+      class: 'afcl-button',
+      disabled: loading.value || images.value.length === 0,
+      loader: loading.value,
+    },
+    onclick: () => confirmImage(),
+  },
+  {
+    label: t('Regenerate'),
+    options: {
+      class: 'afcl-button',
+    },
+    onclick: () => generateImages(),
+  },
+]);
 
 async function confirmImage() {
   loading.value = true;
@@ -275,7 +256,7 @@ async function generateImages() {
     error = resp.error;
   }
   if (!resp) {
-    error = $t('Error creating image generation job');
+    error = t('Error creating image generation job');
   }
 
   if (error) {
@@ -306,7 +287,7 @@ async function generateImages() {
     };
     jobStatus = jobResponse?.job?.status;
     if (jobStatus === 'failed') {
-      error = jobResponse?.job?.error || $t('Image generation job failed');
+      error = jobResponse?.job?.error || t('Image generation job failed');
     }
     await new Promise((resolve) => setTimeout(resolve, props.regenerateImagesRefreshRate));
   }
@@ -339,31 +320,8 @@ async function generateImages() {
   sliderRef.value?.slideTo(images.value.length-1);
 
   await nextTick();
-  
-  loading.value = false;
-}
-
-import mediumZoom from 'medium-zoom'
 
-const zoomedImage = ref(null)
-const zoomedImg = ref(null)
-
-function zoomImage(img) {
-  zoomedImage.value = img
-}
-
-function closeZoom() {
-  zoomedImage.value = null
+  loading.value = false;
 }
 
-watch(zoomedImage, async (val) => {
-  await nextTick()
-  if (val && zoomedImg.value) {
-    mediumZoom(zoomedImg.value, {
-      margin: 24,
-      background: 'rgba(0, 0, 0, 0.9)',
-      scrollOffset: 150
-    }).show()
-  }
-})
 </script>
\ No newline at end of file
diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index a498cd3..dd18e47 100644
--- a/custom/VisionAction.vue
+++ b/custom/VisionAction.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-end justify-start gap-2 cursor-pointer">
-    <div class="flex items-center justify-center text-white bg-gradient-to-r h-[18px] from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 font-medium rounded-md text-sm px-1 text-center">
+    <div class="flex items-center justify-center text-white bg-gradient-to-r h-[18px] from-lightPrimary via-lightPrimary/90 to-lightPrimary/80 hover:opacity-90 focus:ring-4 focus:outline-none focus:ring-lightPrimary/30 dark:focus:ring-darkPrimary/30 font-medium rounded-md text-sm px-1 text-center dark:bg-none dark:bg-darkPrimary/10 dark:text-darkPrimary dark:brightness-200">
       {{t('AI')}}
     </div>
     <p class="text-justify max-h-[18px] truncate max-w-[60vw] md:max-w-none">{{ props.meta.actionName }}</p>
@@ -8,17 +8,25 @@
   <Dialog 
     ref="confirmDialog"
     header="Bulk AI Generation"
-    class="[scrollbar-gutter:stable] !max-w-full w-fit h-fit"
+    class="[scrollbar-gutter:stable] max-w-full h-fit"
+    :beforeCancelFunction="handleBeforeCancel"
     :class="popupMode === 'generation' ? 'lg:w-auto !lg:max-w-[1600px]' 
       : popupMode === 'settings' ? 'lg:w-[1000px] !lg:max-w-[1000px]' 
         : 'lg:w-[500px] !lg:max-w-[500px]'"
-    :beforeCloseFunction="handleBeforeClose"
-    :closable="false"
+    :closable="true"
     :buttons="popupMode === 'generation' ? generationModeButtons : popupMode === 'settings' ? [
+          {
+            label: t('Cancel'),
+            options: {
+              class: 'afcl-button w-1/6',
+              mode: 'secondary'
+            },
+            onclick: () => { popupMode = 'confirmation'; }
+          },
           {
             label: t('Save settings'),
             options: {
-              class: 'w-fit'
+              class: 'afcl-button w-1/6',
             },
             onclick: (dialog) => { saveSettings(); }
           },
@@ -27,29 +35,36 @@
             {
               label: t('Cancel'),
               options: {
-                class: 'w-2/5 bg-white hover:!bg-gray-100 !text-gray-900 hover:!text-gray-800 dark:!bg-gray-800 dark:!text-gray-100 dark:hover:!bg-gray-700 !border-gray-200 dark:!border-gray-600'
+                class: 'afcl-button w-1/2',
+                mode: 'secondary'
               },
               onclick: (dialog) => confirmDialog.tryToHideModal()
             },
             {
               label: t('Start generation'),
               options: {
-                class: 'w-3/5 px-5 py-2.5 bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 rounded-md text-white border-none',
+                class: 'afcl-button w-1/2',
                 loader: isCheckingRateLimits
               },
-              onclick: (dialog) => { runAiActions(); }
+              onclick: async () => { await runAiActions(); }
             }
           ]"
     :click-to-close-outside="false"
   >
-    <div class="bulk-vision-table flex flex-col items-center gap-3 md:gap-4 overflow-y-auto">
+    <div
+      class="bulk-vision-table flex flex-col gap-3 w-full"
+      :class="{
+        'h-[830px]': popupMode === 'generation',
+        'h-auto max-h-[720px]': popupMode !== 'generation'
+      }"
+    >
       <template v-if="recordsList.length && popupMode === 'generation'" >
-        <div class="w-full">
-          <p :class="isGenerationPaused ? '' : 'opacity-0'" class="text-sm font-semibold text-yellow-800">{{ t(`Generated ${startedRecordCount} records. `) + t('Generation on pause. Resume generation?') }}</p>
+        <div class="w-full min-w-[980px]">
           <div v-if="isGenerationPaused" class="flex flex-col gap-2 mb-2">
+            <p class="text-sm font-semibold text-yellow-800">{{ t(`Generated ${startedRecordCount} records. `) + t('Generation on pause. Resume generation?') }}</p>
             <div class="flex items-center gap-2">
               <button
-                class="h-8 px-3 py-1.5 text-sm rounded-md bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 text-white hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 border-none ml-2"
+                class="h-8 px-3 py-1.5 text-sm rounded-md bg-gradient-to-r from-lightPrimary to-lightPrimary/80 text-white border-none ml-2"
                 @click="resumeGeneration"
               >
                 {{ t('Resume generation') }}
@@ -62,36 +77,59 @@
               </button>
             </div>
           </div>
-          <div
-            v-if="!isGenerationPaused"
-            class="w-full h-8 rounded-md bg-gray-200 dark:bg-gray-700 overflow-hidden relative"
-            :class="isGenerationPaused ? 'opacity-80' : ''"
-            role="progressbar"
-            :aria-valuenow="displayedProcessedCount"
-            :aria-valuemin="0"
-            :aria-valuemax="totalRecords"
-          >
-            <div
-              class="h-full bg-gradient-to-r from-lightPrimary/70 via-lightPrimary/80 to-lightPrimary/90 dark:from-darkPrimary/70 dark:via-darkPrimary/80 dark:to-darkPrimary/90 transition-all duration-200 "
-              :style="{ width: `${displayedProgressPercent}%` }"
-            ></div>
-            <div class="absolute inset-0 flex items-center justify-center text-sm font-medium text-white drop-shadow">
-              <template v-if="isProcessingAny || isGenerationPaused">
-                {{ Math.floor((displayedProcessedCount  /  totalRecords) * 100) }}%
-              </template>
-              <template v-else-if="isGenerationCancelled">
-                {{ t('Generation cancelled') }}
-              </template>
-              <template v-else>
-                {{ t('Processed') }}
-              </template>
+
+          <div class="w-full bg-white dark:bg-gray-900 border border-gray-200/80 dark:border-gray-800 p-5 m-1 rounded-2xl shadow-sm flex flex-col gap-4">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-3">
+                <div 
+                  class="p-2 rounded-xl shrink-0"
+                  :class="generationStatusClass"
+                >
+                  <IconShieldCheckOutline v-if="displayedProcessedCount === totalRecords" class="w-5 h-5" />
+                  <IconRefreshOutline v-else :class="isProcessingAny ? 'animate-spin' : ''" class="w-5 h-5" />
+                </div>
+                
+                <div>
+                  <h4 class="text-sm font-bold text-gray-800 dark:text-gray-200 tracking-tight">
+                    {{ displayedProcessedCount }} {{ t('of') }} {{ totalRecords }} {{ t('fields ready to save') }}
+                  </h4>
+                </div>
+              </div>
+
+              <span
+                class="px-2.5 py-1 text-xs rounded-default border flex items-center gap-1.5"
+                :class="generationStatusClass"
+              >
+                <span 
+                  class="w-1.5 h-1.5 rounded-full"
+                  :class="isGenerationPaused ? 'bg-yellow-500' : displayedProcessedCount === totalRecords ? 'bg-green-500' : 'bg-blue-500'"
+                ></span>
+                {{ 
+                  isGenerationPaused ? t('On pause') 
+                  : displayedProcessedCount === totalRecords ? t('Ready') 
+                  : t('Processing') 
+                }}
+              </span>
             </div>
+
+            <ProgressBar 
+              class="w-full"
+              :class="isGenerationPaused ? 'opacity-80' : ''"
+              :current-value="Math.floor((displayedProcessedCount / totalRecords) * 100)" 
+              :max-value="100" 
+              :min-value="0"
+              :showAnimation="isProcessingAny && !isGenerationPaused"
+              :showLabels="false"
+              :showValues="false"
+              :show-progress="false"
+            />
+
           </div>
         </div>
 
 
         <VisionTable
-          class="md:max-h-[75vh] max-w-[1560px] w-full h-full"
+          class="w-full flex-1 min-h-0 overflow-y-auto [scrollbar-gutter:stable]"
           ref="tableRef"
           :records="recordsList"
           :meta="props.meta"
@@ -105,62 +143,167 @@
           :outputImageFields="props.meta.outputImageFields"
           :outputFieldsForAnalizeFromImages="props.meta.outputFieldsForAnalizeFromImages"
           :outputPlainFields="props.meta.outputPlainFields"
+          :overwriteExistingValues="overwriteExistingValues"
           @error="handleTableError"
           @regenerate-images="regenerateImages"
-          @regenerate-cell="regenerateCell"
+          @regenerate-record="regenerateRecord"
         />
+        <div class="mt-2 flex items-center text-lightPrimary dark:text-darkPrimary bg-lightPrimary/10 dark:bg-darkPrimary/10 px-4 py-3 rounded-default border border-lightPrimary/20 dark:border-darkPrimary/20 text-sm">
+          <IconInfoCircleSolid class="w-5 h-5 me-2 shrink-0 text-lightPrimary dark:text-darkPrimary dark:brightness-200" />
+          <p class="text-lightPrimary dark:text-darkPrimary dark:brightness-200">
+            <span class="font-semibold text-lightPrimary dark:text-darkPrimary dark:brightness-200">{{ t('Only checked fields will be saved.') }}</span> 
+            {{ t('You can regenerate fields before saving if needed.') }}
+          </p>
+        </div>
         <div class="text-red-600 flex items-center w-full">
           <p v-if="isError === true">{{ errorMessage }}</p>
         </div>
       </template>
       <template v-else-if="!recordsList.length && popupMode === 'generation'">
-        <p>No data to save. Feel free to click "Cancel"</p>
+        <p>{{ t('No data to save. Feel free to click "Cancel"') }}</p>
       </template>
-      <div 
-        v-else-if="popupMode === 'settings'" 
-        v-for="(promptsCategory, key) in generationPrompts" 
-        :key="key" 
-        class="w-full"
-      >
-        <div v-if="Object.keys(promptsCategory).length > 0" class="gap-4 mb-6 ml-1">
-          <p class="text-start w-full text-xl font-bold mb-2">{{
-           key === "plainFieldsPrompts" ? "Prompts for non-image fields" 
-            : key === "generateImages" ? "Prompts for image fields" 
-              : "Prompts for image analysis"
-          }}</p>
-          <div class="grid grid-cols-2 gap-4">
-            <div v-for="(prompt, promptKey) in promptsCategory" :key="promptKey">
-              {{ formatLabel(promptKey) }} {{ t('prompt') }}:
-              <Textarea 
-                v-model="generationPrompts[key][promptKey]" 
-                class="w-full h-64 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
-              ></Textarea>
-              <p class="text-red-500 hover:underline hover:cursor-pointer mt-2" @click="resetPromptToDefault(key, promptKey)">reset to default</p>
+      <div v-else-if="popupMode === 'settings'" class="w-full flex flex-col gap-6 overflow-y-auto overflow-x-hidden pr-2 max-h-[70vh]">
+        <template v-for="(promptsCategory, key) in generationPrompts" :key="key">
+        <div v-if="Object.keys(promptsCategory).length > 0" class="w-full flex flex-col">
+          <div class="flex items-start gap-3.5 mb-6 border-b border-gray-100 dark:border-gray-800">
+            
+            <div class="flex-1 min-w-0">
+              <h3 class="text-base font-bold text-gray-900 dark:text-white tracking-tight">
+                {{
+                 key === "plainFieldsPrompts" ? t("Prompts for non-image fields") 
+                  : key === "generateImages" ? t("Prompts for image fields") 
+                    : t("Prompts for image analysis")
+                }}
+              </h3>
+              <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
+                {{ 
+                  key === "plainFieldsPrompts" ? t("Define how AI should generate content for text-based fields.") 
+                  : key === "generateImages" ? t("Configure prompt rules for generating media and images.") 
+                    : t("Instructions for extracting text specifications from images.")
+                }}
+              </p>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div 
+              v-for="(prompt, promptKey) in promptsCategory" 
+              :key="promptKey" 
+              class="
+              flex flex-col bg-white dark:bg-gray-900 border border-gray-200/80 p-5 rounded-default shadow-sm transition-all duration-200
+              hover:shadow-md hover:border-gray-300
+              dark:border-gray-800
+              dark:hover:border-gray-700"
+            >
+              <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center gap-3">
+                  <div class="p-2 bg-lightPrimary/10 text-lightPrimary rounded-lg shrink-0
+                    dark:bg-darkPrimary/20
+                    dark:text-darkPrimary ">
+                    <IconImageSolid 
+                      v-if="key === 'generateImages'" 
+                      class="w-5 h-5 dark:brightness-200" 
+                    />
+                    <IconFileLinesOutline 
+                      v-else 
+                      class="w-5 h-5 dark:brightness-200" 
+                    />
+                  </div>
+                  <div>
+                    <h4 class="text-sm font-bold text-gray-800 dark:text-gray-200 capitalize tracking-tight">
+                      {{ formatLabel(promptKey) }}
+                    </h4>
+                    <p class="text-[11px] text-gray-400 dark:text-gray-500">
+                      {{ key === 'generateImages' ? t('Generate source media') : t('Generate a detailed content') }}
+                    </p>
+                  </div>
+                </div>
+
+                <span class="px-2 py-0.5 text-[10px] font-semibold tracking-wide rounded-md bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/10 dark:text-darkPrimary">
+                  {{ key === 'generateImages' ? t('Image field') : t('Text field') }}
+                </span>
+              </div>
+
+              <div class="relative flex-1">
+                <Textarea 
+                  v-model="generationPrompts[key][promptKey]" 
+                  class="w-full h-56 p-3.5 text-sm leading-relaxed border border-gray-200 bg-gray-50/30 text-gray-800 shadow-sm resize-none font-sans
+                  dark:border-gray-700  
+                  dark:bg-gray-800/40  
+                  dark:text-gray-100 rounded-xl 
+                  dark:focus:border-gray-700
+                  focus:outline-none 
+                  focus:border-gray-200"
+                  placeholder="Enter prompt instructions..."
+                ></Textarea>
+              </div>
+
+              <button 
+                type="button"
+                mode="secondary"
+                @click="resetPromptToDefault(key, promptKey)"
+                class="
+                mt-4 flex items-center gap-1.5 text-xs font-semibold bg-transparent px-2.5 py-1 w-fit rounded-default
+                border border-red-200 hover:border-red-600
+                text-red-600 hover:text-red-700 
+                dark:border-red-900/50 dark:hover:border-red-500
+                dark:text-red-500 dark:hover:text-red-400
+                transition-colors duration-150"
+              >
+                <IconUndoOutline class="w-3.5 h-3.5 dark:brightness-200" />
+                {{ t('Reset') }}
+              </button>
+
             </div>
           </div>
         </div>
+      </template>
       </div>
-      <div v-else class="flex flex-col gap-2 mt-2 w-full h-full">
-        <div class="flex items-center justify-between mb-2 w-full">
-          <div class="flex items-center justify-center gap-2">
-            <IconShieldSolid class="w-6 h-6 text-lightPrimary dark:text-darkPrimary" />
-            <p class="sm:text-base text-sm">{{ t('Overwrite existing values') }}</p>
-            <Tooltip>
-                <IconInfoCircleSolid class="w-5 h-5 me-2 text-lightPrimary dark:text-darkPrimary"/>
-                <template #tooltip>
-                  <p class="max-w-64">{{ t('When enabled, the AI will overwrite content for fields that already have data. When off - this helps to preserve existing information and avoid overwriting valuable content.') }}</p>
-                </template>
-            </Tooltip>
+      <div v-else class="flex flex-col gap-4 w-full h-full">
+        <div class="flex flex-col p-5 rounded-default border border-gray-100 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900/40">
+          <div class="flex items-start justify-between gap-4">
+            <div class="flex items-start gap-3 min-w-0">
+              <div class="p-2 bg-lightPrimary/10 dark:bg-darkPrimary/10 rounded-xl text-lightPrimary dark:text-darkPrimary shrink-0 mt-0.5">
+                <IconShieldCheckOutline class="w-5 h-5 dark:brightness-200"  />
+              </div>
+              <div class="min-w-0">
+                <p class="text-base font-semibold text-gray-900 dark:text-white leading-tight">{{ t('Overwrite existing values') }}</p>
+                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 break-words pr-2">{{ t('AI-generated data will replace existing values.') }}</p>
+              </div>
+            </div>
+            <div class="shrink-0 pt-1">
+              <Toggle v-model="overwriteExistingValues" />
+            </div>
+          </div>
+
+          <div v-if="overwriteExistingValues" class="mt-4 flex items-start text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30 px-3 py-2.5 rounded-xl border border-amber-200 dark:border-amber-900/50 text-sm">
+            <IconInfoCircleSolid class="w-4 h-4 me-2 shrink-0 mt-0.5 " />
+            <p>{{ t('Warning: Existing values will be overwritten.') }}</p>
           </div>
-          <Toggle
-            v-model="overwriteExistingValues"
-          />
         </div>
-        <div :class="overwriteExistingValues === true ? 'opacity-100' : 'opacity-0'" class="flex items-center text-yellow-800 bg-yellow-100 p-2 rounded-md border border-yellow-300">
-          <IconExclamationTriangle class="w-6 h-6 me-2"/>
-          <p class="sm:text-base text-sm">{{ t('Warning: Existing values will be overwritten.') }}</p>
+
+        <div 
+          @click="clickSettingsButton()"
+          class="
+          flex items-center justify-between p-5 rounded-default border border-gray-100 bg-white shadow-sm cursor-pointer transition-all duration-150
+          dark:border-gray-800 dark:bg-gray-900/40 "
+        >
+          <div class="flex items-start gap-3 min-w-0">
+            <div class="p-2 bg-lightPrimary/10 dark:bg-darkPrimary/10 rounded-xl text-lightPrimary dark:text-darkPrimary shrink-0 mt-0.5">
+              <IconMessageCaptionOutline class="w-5 h-5 dark:brightness-200" />
+            </div>
+            <div class="min-w-0">
+              <p class="text-base font-semibold text-gray-900 dark:text-white leading-tight">{{ t('Configure prompts')}}</p>
+              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 break-words">{{ t('Change the instructions for AI to generate actual data.')}}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex items-center gap-2 px-1 text-xs font-medium text-gray-400 dark:text-gray-500">
+          <IconInfoCircleSolid class="w-4 h-4 " />
+          <p>{{ t('This action will only apply to the fields included in your prompts.') }}</p>
         </div>
-        <p class="w-fit flex justify-start text-lightPrimary dark:text-white hover:underline cursor-pointer" @click="clickSettingsButton()">{{ t('Configure prompts') }}</p>
+    
       </div>
     </div>
   </Dialog>
@@ -179,6 +322,9 @@ import { useCoreStore } from '@/stores/core';
 import { IconShieldSolid, IconInfoCircleSolid } from '@iconify-prerendered/vue-flowbite';
 import { IconExclamationTriangle } from '@iconify-prerendered/vue-humbleicons';
 import { useFiltersStore } from '@/stores/filters';
+import { Button } from '@/afcl'
+import { IconMessageCaptionOutline, IconShieldCheckOutline, IconFileLinesOutline, IconUndoOutline, IconImageSolid, IconRefreshOutline } from '@iconify-prerendered/vue-flowbite';
+import { ProgressBar } from '@/afcl';
 
 
 const coreStore = useCoreStore();
@@ -309,16 +455,18 @@ const generationModeButtons = computed(() => {
       label: checkedCount.value > 1 ? t('Save fields') : t('Save field'), 
       options: { 
         disabled: isLoading.value || checkedCount.value < 1 || isFetchingRecords.value || isProcessingAny.value || isGenerationPaused.value, 
-        loader: isLoading.value, class: 'w-fit' 
+        loader: isLoading.value, 
+        class: 'afcl-button w-1/6'
       }, 
-      onclick: async (dialog) => { await saveData(); dialog.hide(); } 
+      onclick: async (dialog) => { await saveData(); closeDialog(); dialog.hide(false); } 
     },
     { 
       label: t('Cancel'), 
       options: {
-        class: 'bg-white hover:!bg-gray-100 !text-gray-900 hover:!text-gray-800 dark:!bg-gray-800 dark:!text-gray-100 dark:hover:!bg-gray-700 !border-gray-200 dark:!border-gray-600'
+        class: 'afcl-button w-1/6',
+        mode: 'secondary'
       }, 
-      onclick: async (dialog) => { await handleBeforeClose(dialog); } 
+      onclick: async (dialog) => { await dialog.hide(true); } 
     },
   ]
 
@@ -327,7 +475,8 @@ const generationModeButtons = computed(() => {
       label: t('Save processed'),
       options: {
         disabled: isLoading.value || isSavingCurrent.value || completedRecordIds.value.size < 1,
-        loader: isSavingCurrent.value, class: 'w-fit'
+        loader: isSavingCurrent.value,
+        class: 'afcl-button w-1/6',
       },
       onclick: async () => { await saveCurrentGenerated(); }
     })
@@ -335,6 +484,35 @@ const generationModeButtons = computed(() => {
   return arrayToReturn;
 });
 
+async function regenerateRecord({ recordId }) {
+
+  const promises = [];
+
+  if (props.meta.isImageGeneration) {
+    promises.push(regenerateImages({ recordId }));
+  }
+
+  for (const fieldName of props.meta.outputFieldsForAnalizeFromImages || []) {
+    promises.push(
+      regenerateCell({
+        recordId,
+        fieldName,
+      })
+    );
+  }
+
+  for (const fieldName of props.meta.outputPlainFields || []) {
+    promises.push(
+      regenerateCell({
+        recordId,
+        fieldName,
+      })
+    );
+
+  await Promise.allSettled(promises);
+}
+}
+
 const handleBeforeClose = async (dialog?: any) => {
   if (popupMode.value === 'generation') {
     const confirmed = await adminforth.confirm({
@@ -344,16 +522,16 @@ const handleBeforeClose = async (dialog?: any) => {
       no: t('Cancel'),
     });
 
-  if (confirmed) {
-    closeDialog();
-      
-    if (confirmDialog.value && typeof confirmDialog.value.hide === 'function') {
-      confirmDialog.value.hide();
-    } else if (dialog && typeof dialog.hide === 'function') {
-      dialog.hide();
+    if (confirmed) {
+      closeDialog();
+
+      if (confirmDialog.value && typeof confirmDialog.value.hide === 'function') {
+        confirmDialog.value.hide();
+      } else if (dialog && typeof dialog.hide === 'function') {
+        dialog.hide();
+      }
+      return true;
     }
-    return true; 
-  }
     return false;
   }
 }
@@ -384,6 +562,25 @@ const openDialog = async () => {
   }
 }
 
+const handleBeforeCancel = async () => {
+  if (popupMode.value === 'generation') {
+    const confirmed = await adminforth.confirm({
+      title: t('Close without saving?'),
+      message: t('Are you sure you want to close without saving?'),
+      yes: t('Yes'),
+      no: t('Cancel'),
+    });
+
+    if (confirmed) {
+      closeDialog();
+      return true;
+    }
+    return false;
+  }
+  closeDialog();
+  return true;
+};
+
 async function getListOfIds() {
   if ( props.meta.recordSelector === 'filtered' ) {
     const filters = filtersStore.getFilters(props.resource.resourceId);
@@ -490,7 +687,7 @@ function registerGenerationFailure(record: RecordState, actionType: GenerationAc
 }
 
 function showGenerationFailureSummary() {
-  for (const group of generationFailureGroups.values()) {
+  for (const group of Array.from(generationFailureGroups.values())) {
     const failedCount = group.recordIds.size;
     const firstRecordId = Array.from(group.recordIds)[0];
     adminforth.alert({
@@ -754,7 +951,7 @@ async function checkRateLimits() {
   return true;
 }
 
-async function runActionForRecord(record: RecordState, actionType: GenerationAction) {
+async function runActionForRecord(record: RecordState, actionType: GenerationAction, forceFilterFilledFields?: boolean) {
   if (!checkIfDialogOpen()) {
     return;
   }
@@ -786,7 +983,7 @@ async function runActionForRecord(record: RecordState, actionType: GenerationAct
         actionType,
         recordId: record.id,
         ...(customPrompt !== undefined ? { customPrompt: JSON.stringify(customPrompt) } : {}),
-        filterFilledFields: !overwriteExistingValues.value,
+        filterFilledFields: forceFilterFilledFields !== undefined ? forceFilterFilledFields: !overwriteExistingValues.value,
       },
       silentError: true,
     });
@@ -1242,7 +1439,7 @@ async function uploadImage(imgBlob, id, fieldName) {
   }
 }
 
-function regenerateImages({ recordId }: { recordId: any }) {
+async function regenerateImages({ recordId }: { recordId: any }) {
   if (coreStore.isInternetError) {
     adminforth.alert({
       message: t('Cannot regenerate images while internet connection is lost. Please check your connection and try again.'),
@@ -1256,11 +1453,27 @@ function regenerateImages({ recordId }: { recordId: any }) {
     return;
   }
   record.aiStatus.generatedImages = false;
+  record.status = 'processing';
   touchRecords();
-  runActionForRecord(record, 'generate_images').catch(() => {
+
+  try {
+    await runActionForRecord(
+      record,
+      'generate_images',
+      false
+    );
+
+    record.status = 'completed';
+    completedRecordIds.value.add(String(recordId));
+
     record.aiStatus.generatedImages = true;
     touchRecords();
-  });
+
+  } catch (e) {
+    record.aiStatus.generatedImages = true;
+    record.status = 'failed';
+    touchRecords();
+  }
 }
 
 async function findPreviewURLForImages() {
@@ -1326,10 +1539,14 @@ async function getGenerationPrompts() {
   const calculatedGenerationPrompts: any = {};
   const savedPrompts = localStorage.getItem(`bulkAiFlowGenerationPrompts_${props.meta.pluginInstanceId}`);
   if (props.meta.generationPrompts.plainFieldsPrompts) {
-    calculatedGenerationPrompts.plainFieldsPrompts = props.meta.generationPrompts.plainFieldsPrompts;
+    calculatedGenerationPrompts.plainFieldsPrompts = {
+      ...props.meta.generationPrompts.plainFieldsPrompts
+    };
   }
   if (props.meta.generationPrompts.imageFieldsPrompts) {
-    calculatedGenerationPrompts.imageFieldsPrompts = props.meta.generationPrompts.imageFieldsPrompts;
+    calculatedGenerationPrompts.imageFieldsPrompts = {
+      ...props.meta.generationPrompts.imageFieldsPrompts
+    };
   }
   if (props.meta.generationPrompts.imageGenerationPrompts) {
     let imageFields = {};
@@ -1596,4 +1813,16 @@ async function saveCurrentGenerated() {
   props.updateList();
 }
 
+const generationStatusClass = computed(() => {
+  if (isGenerationPaused.value) {
+    return 'bg-yellow-100 text-yellow-800 border-yellow-200 dark:bg-yellow-950/30 dark:text-yellow-400 dark:border-yellow-900/50'
+  }
+
+  if (displayedProcessedCount.value === totalRecords.value) {
+    return 'bg-green-100 text-green-800 border-green-200 dark:bg-green-950/30 dark:text-green-400 dark:border-green-900/50'
+  }
+
+  return 'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-950/30 dark:text-blue-400 dark:border-blue-900/50'
+})
+
 </script>
diff --git a/custom/VisionTable.vue b/custom/VisionTable.vue
index 2205fc2..b64f13f 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -1,222 +1,331 @@
 <template>
-    <Table
-      ref="tableRef"
-      :columns="tableHeaders"
-      :data="tableDataProvider"
-      :pageSize="pageSize"
-      makeHeaderSticky
-      makePaginationSticky
+  <div class="overflow-auto pr-2" style="max-height: calc(100vh - 260px);">
+    <div class="p-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
+      <div 
+        v-for="item in paginatedRecords" 
+        :key="item.id"
+        class="bg-white border border-gray-200 rounded-default p-4 shadow-sm hover:shadow-md transition-shadow relative flex flex-col justify-between gap-4"
       >
-      <!-- HEADER TEMPLATE -->
-      <template #header:checkboxes="{ item }">
-        {{ $t('MARK FOR SAVE') }}
-      </template>
-      <!-- CHECKBOX CELL TEMPLATE -->
-      <template #cell:checkboxes="{ item }">
-        <div class="max-w-[100px] flex items-center justify-center">
-          <Checkbox
-            v-model="item.isChecked"
-          />
-        </div>
-      </template>
-      <!-- IMAGE CELL TEMPLATE -->
-      <template #cell:images="{item}">
-        <div class="flex flex-shrink-0 gap-2">
-          <div v-if="item.images.length" v-for="image in item.images" :key="image">
-            <div class="mt-2 flex items-center justify-center gap-2">
-              <img
-                  v-if="isValidUrl(image)" 
-                  :src="image"  
-                  class="w-20 h-20 object-cover rounded cursor-pointer border hover:border-blue-500 transition my-2" 
-                  @click="zoomImage(image)"
+        <div class="flex flex-col h-full">
+          <div class="flex items-start justify-between gap-4 mb-4">
+            <div class="flex items-center gap-3 w-full min-w-0">
+              <Checkbox 
+                v-model="item.isChecked" 
+                class="shrink-0"
               />
-              <div v-else class="w-20 h-20">
-                <p>{{ $t('Invalid source image') }}</p>
+              <!-- CRITICAL WRAPPER -->
+              <div class="flex-1 min-w-0 w-0">
+                <h3 class="font-bold text-gray-900 w-full truncate overflow-hidden whitespace-nowrap">
+                  {{ item.label || item.data?.name || $t('Item Record') }}
+                </h3>
+              </div>
+            </div>
+            <div class="flex items-center gap-3 shrink-0" v-if="hasNonImageOutputFields">
+              <div class="flex items-center gap-2">
+                <span class="text-xs font-medium text-gray-600 dark:text-gray-400">
+                  {{ cardValueMode?.[String(item.id)] === 'old' ? $t('OLD VALUE') : $t('NEW VALUE') }}
+                </span>
+                <button
+                  @click="toggleCardValueMode(item.id)"
+                  class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+                  :class="cardValueMode?.[String(item.id)] === 'old' ? 'bg-lightPrimary dark:bg-darkPrimary' : 'bg-gray-200 dark:bg-gray-700'"
+                >
+                  <span
+                    class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform dark:bg-gray-200"
+                    :class="cardValueMode?.[String(item.id)] === 'old' ? 'translate-x-6' : 'translate-x-1'"
+                  />
+                </button>
               </div>
             </div>
           </div>
-          <div class="flex items-center justify-center text-center w-20 h-20" v-else>
-            <p>{{ $t('No images found') }}</p>
-          </div>
-          <transition name="fade">
+
+          <div class="flex flex-col gap-3 flex-grow">
             <div
-              v-if="zoomedImage"
-              class="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
-              @click.self="closeZoom"
+              class="w-full flex flex-col items-center justify-center bg-gray-50 border border-dashed border-gray-200 h-full max-h-[260px] max-w-[428.5px] rounded-default text-center "
             >
-              <transition name="zoom">
-                <img
-                  v-if="zoomedImage"
-                  :src="zoomedImage"
-                  class="max-w-full max-h-full rounded-lg object-contain cursor-grab z-75"
-                />
-              </transition>
-            </div>
-          </transition>
-        </div>
-      </template>
-      <!-- CUSTOM FIELD TEMPLATES -->
-      <template v-for="n in customFieldNames" :key="n" #[`cell:${n}`]="{ item }">
-        <div v-if="(isAnalyzing(item, n) && !item.regeneratingFieldsStatus?.[n]) && !isInColumnImage(n)" @mouseenter="(() => { setHover(item.id, n, true) })" @mouseleave="(() => { setHover(item.id, n, false) })">
-          <div class="flex gap-1 justify-end">
-            <Tooltip v-if="checkForError(item, n)">
-              <IconExclamationCircleSolid class="my-2 w-5 h-5 text-red-500" />
-              <template #tooltip> 
-                {{ checkForError(item, n) }}
-              </template>
-            </Tooltip>
-            <Tooltip>
-              <IconRefreshOutline class="my-2 w-5 h-5 hover:text-blue-500 cursor-pointer" :class="{ 'opacity-50 cursor-not-allowed hover': shouldDisableRegenerateFieldIcon(item, n) }" @click="regerenerateFieldIconClick(item, n)"/>
-              <template #tooltip> 
-                {{ shouldDisableRegenerateFieldIcon(item, n) ? $t("Can't analyze image without source image") : $t('Regenerate') }}
+              <!-- HAS IMAGES -->
+              <template v-if="item.images?.length">
+                <template
+                  v-for="(image, index) in item.images"
+                  :key="image || index"
+                >
+                  <img
+                    v-if="image && isValidUrl(image)"
+                    :src="image"
+                    class="w-full h-full object-cover rounded-default cursor-pointer border hover:border-blue-500 transition"
+                    @click="zoomImage(image)"
+                  />
+
+                  <div
+                    v-else
+                    class="text-xs text-red-500 flex flex-col items-center justify-center h-full p-2"
+                  >
+                    <IconExclamationCircleSolid class="w-6 h-6 mb-1" />
+                    <p>{{ $t('Invalid source image') }}</p>
+                  </div>
+                </template>
               </template>
-            </Tooltip>
-          </div>
-          <div v-if="isInColumnEnum(n)" class="flex flex-col items-start justify-end min-h-[90px]">
-              <Select
-                class="min-w-[150px]"
-                :options="convertColumnEnumToSelectOptions(props.meta.columnEnums, n)"
-                v-model="item.data[n]"
-                :teleportToTop="true"
-                :teleportToBody="false"
-              >
-              </Select>
-              <Tooltip>
-                <div class="mt-2 flex items-center justify-start gap-1 hover:text-blue-500" :class="{ 'opacity-0': !isHovered(item.id, n) }">
-                  <p class="text-sm ">{{ $t('old value') }}</p>
+
+              <!-- EMPTY ARRAY -->
+              <template v-else-if="item.images?.length === 0">
+                <div class="text-gray-400 flex flex-col items-center justify-center w-[426.5px] h-[258px]">
+                  <svg
+                    class="w-20 h-20 mb-2 stroke-1 text-gray-300"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                    />
+                  </svg>
+                  <p class="text-xs font-medium">{{ $t('No images found') }}</p>
                 </div>
-                <template #tooltip>
-                  {{  item.oldData?.[n] ?? "No old value" }}
-                </template>
-              </Tooltip>
-          </div>
-            <div v-else-if="typeof item.data?.[n] === 'string' || typeof item.data?.[n] === 'object'" class="flex flex-col items-start justify-end min-h-[90px]">
-            <Textarea
-              class="min-w-[150px] h-full"
-              type="text"
-              v-model="item.data[n]"
-            >
-            </Textarea>
-            <Tooltip>
-                <div class="mt-2 flex items-center justify-start gap-1 hover:text-blue-500" :class="{ 'opacity-0': !isHovered(item.id, n) }">
-                  <p class="text-sm ">{{ $t('old value') }}</p>
+              </template>
+
+              <!-- NO DATA -->
+              <template v-else>
+                <div class="text-gray-400 flex flex-col items-center justify-center h-full">
+                  <svg
+                    class="w-20 h-20 mb-2 stroke-1 text-gray-300"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                    />
+                  </svg>
+                  <p class="text-xs font-medium">{{ $t('No image found') }}</p>
                 </div>
-              <template #tooltip>
-                <p class="max-w-[200px]">{{  item.oldData?.[n] ?? "No old value" }}</p>
               </template>
-            </Tooltip>
             </div>
-          <div v-else-if="typeof item.data?.[n] === 'boolean'" class="flex flex-col items-center justify-end min-h-[90px]">
-            <Toggle
-              class="p-2"
-              v-model="item.data[n]"
-            >
-            </Toggle>
-            <Tooltip>
-                <div class="mt-2 flex items-center justify-start gap-1 hover:text-blue-500" :class="{ 'opacity-0': !isHovered(item.id, n) }">
-                  <p class="text-sm ">{{ $t('old value') }}</p>
+            
+            <div class="flex flex-col gap-3">
+              <div 
+                v-for="n in customFieldNames" 
+                :key="n"
+                class="flex flex-col relative"
+                @mouseenter="(() => { setHover(item.id, n, true) })" 
+                @mouseleave="(() => { setHover(item.id, n, false) })"
+              >
+                <div class="flex justify-between items-center mb-1">
+                  <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                    {{ n.replace(/([A-Z])/g, ' $1').trim() }}
+                  </label>
+                  
+                  <div class="flex gap-1 items-center" v-if="!isInColumnImage(n)">
+                    <Tooltip v-if="checkForError(item, n)">
+                      <IconExclamationCircleSolid class="w-4 h-4 text-red-500" />
+                      <template #tooltip>{{ checkForError(item, n) }}</template>
+                    </Tooltip>
+                  </div>
                 </div>
-              <template #tooltip>
-                {{  item.oldData?.[n] ?? "No old value" }}
-              </template>
-            </Tooltip>
-          </div>
-          <div v-else class="flex flex-col items-start justify-end min-h-[90px]">
-            <Input
-              type="number"
-              v-model="item.data[n]"
-              class="w-full min-w-[80px]"
-              :fullWidth="true"
-            />
-            <Tooltip>
-                <div class="mt-2 flex items-center justify-start gap-1 hover:text-blue-500" :class="{ 'opacity-0': !isHovered(item.id, n) }">
-                  <p class="text-sm ">{{ $t('old value') }}</p>
+
+                <div v-if="isInColumnImage(n)">
+                  <div v-if="item.aiStatus?.generatedImages" class="flex flex-col gap-2">
+                    <div v-if="isValidUrl(item.data?.[n])" class="flex items-center gap-3 relative">
+                      <img 
+                        :src="item.data?.[n]" 
+                        class="w-full max-h-[280px] object-cover border cursor-pointer  hover:border-blue-500 rounded-default"
+                        @click="() => {
+                          openGenerationCarousel[item.id] ??= {}
+                          openGenerationCarousel[item.id][n] = true
+                        }"
+                        style="image-rendering: auto;"
+                      />
+                      <p
+                        v-if="isImageHasPreviewUrl[n]"
+                        class="text-xs text-blue-500 hover:underline cursor-pointer transition-opacity"
+                        :class="{ 'opacity-0': !isHovered(item.id, n) }"
+                        @click="() => { item.openImageCompare[n] = true }"  
+                      >
+                        {{ $t('old image') }}
+                      </p>
+                    </div>
+                    <div v-else>
+                      <div class="text-gray-400 flex flex-col items-center justify-center w-[426.5px] h-[258px] bg-gray-50 border border-dashed border-gray-200">
+                        <svg
+                          class="w-20 h-20 mb-2 stroke-1 text-gray-300"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                          />
+                        </svg>
+                        <p class="text-xs font-medium">{{ $t('No images found') }}</p>
+                      </div>
+                    </div>
+
+                    <GenerationCarousel
+                      v-if="openGenerationCarousel[item.id]?.[n]"
+                      :images="item.carouselSaveImages?.[n]"
+                      :recordId="item.id"
+                      :meta="props.meta"
+                      :fieldName="n"
+                      :carouselImageIndex="item.carouselImageIndex?.[n]"
+                      :regenerateImagesRefreshRate="regenerateImagesRefreshRate"
+                      :sourceImage="item.images && item.images.length ? item.images : null"
+                      :imageGenerationPrompts="imageGenerationPrompts[n]"
+                      @error="handleError"
+                      @close="() => {
+                        if (openGenerationCarousel[item.id]) {
+                          openGenerationCarousel[item.id][n] = false
+                        }
+                      }"
+                      @selectImage="updateSelectedImage"
+                      @updateCarouselIndex="updateActiveIndex"
+                    />
+                    <ImageCompare
+                      v-if="item.openImageCompare?.[n]"
+                      :meta="props.meta"
+                      :columnName="n"
+                      :oldImage="item.oldData?.[n]"
+                      :newImage="item.data?.[n]"
+                      @close="item.openImageCompare[n] = false"
+                    />
+                  </div>
+                  <div v-else>
+                    <Skeleton type="image" class=" w-[426.5px] h-[258px] rounded-default" />
+                  </div>
                 </div>
-              <template #tooltip>
-                {{  item.oldData?.[n] ?? "No old value" }}
-              </template>
-            </Tooltip>
-          </div>
-        </div>
 
-        <div v-if="item.aiStatus.generatedImages" @mouseenter="(() => { setHover(item.id, n, true) })" @mouseleave="(() => { setHover(item.id, n, false) })">
-          <div v-if="isInColumnImage(n)">
-            <div class="mt-2 mb-2 flex items-center justify-start gap-2">
-              <div v-if="isValidUrl(item.data?.[n])" class="flex flex-col items-center relative">
-              <img 
-                :src="item.data?.[n]"
-                class="w-20 h-20 object-cover rounded cursor-pointer border hover:border-blue-500 transition"
-                @click="() => {item.openGenerationCarousel[n] = true}"
-              />
-              <p
-                v-if="isImageHasPreviewUrl[n]"
-                class="absolute mt-20 text-sm hover:text-blue-500 hover:underline hover:cursor-pointer flex items-center gap-1"
-                :class="{ 'opacity-0': !isHovered(item.id, n) }"
-                @click="() => {item.openImageCompare[n] = true}"  
-              >
-                {{ $t('old image') }}
-              </p>
-              </div>
-              <div v-else class="flex items-center justify-center text-center w-20 h-20">
-                <Tooltip v-if="item.imageGenerationErrorMessage === 'No source images found'">
-                  <p
-                  >
-                    {{ $t("Can't generate image.") }}
-                  </p>
-                  <template #tooltip>
-                    {{ item.imageGenerationErrorMessage }}
-                  </template>
-                </Tooltip>
-                <Tooltip v-else>
-                  <div>
-                    <IconRefreshOutline
-                      @click="() => {regenerateImages(item.id)}"
-                      class="w-20 h-20 hover:text-blue-500 cursor-pointer transition hover:scale-105"
+                <div v-else-if="(isAnalyzing(item, n) && !item.regeneratingFieldsStatus?.[n])">
+                  <div v-if="isInColumnEnum(n)">
+                    <Select
+                      v-if="cardValueMode?.[String(item.id)] !== 'old'"
+                      class="w-full"
+                      :options="convertColumnEnumToSelectOptions(props.meta.columnEnums, n)"
+                      v-model="item.data[n]"
+                      :teleportToTop="true"
+                    />
+                    
+                    <input
+                      v-else
+                      type="text"
+                      :value="item.oldData?.[n] || item.oldData?.[n] === 0 ? item.oldData[n] : $t('no old value')"
+                      disabled
+                      class="w-full h-10 px-3 border border-gray-200 rounded-default bg-gray-50 text-gray-400 text-sm focus:outline-none"
+                    />
+                  </div>
+                  
+                  <div v-else-if="typeof item.data?.[n] === 'string' || typeof item.data?.[n] === 'object'">
+                    <textarea
+                      :value="cardValueMode?.[String(item.id)] === 'old' ? (item.oldData?.[n] || item.oldData?.[n] === 0 ? item.oldData[n] : $t('no old value')) : item.data[n]"
+                      @input="(e) => { if (cardValueMode?.[String(item.id)] !== 'old') item.data[n] = e.target.value }"
+                      :disabled="cardValueMode?.[String(item.id)] === 'old'"
+                      class="w-full min-h-[42px] text-sm p-2 border border-gray-200 rounded-default focus:outline-none focus:border-blue-500 disabled:bg-gray-50 disabled:text-gray-400"
                     />
                   </div>
-                  <template #tooltip>
-                    {{ item.imageGenerationErrorMessage + '. Click to retry.' }}
-                  </template>
-                </Tooltip>
+
+                  <div v-else-if="typeof item.data?.[n] === 'boolean'" class="flex items-center h-10">
+                    <Toggle v-model="item.data[n]" />
+                  </div>
+
+                  <div v-else>
+                    <input
+                      :type="cardValueMode?.[String(item.id)] === 'old' && !item.oldData?.[n] && item.oldData?.[n] !== 0 ? 'text' : 'number'"
+                      :value="cardValueMode?.[String(item.id)] === 'old' ? (item.oldData?.[n] || item.oldData?.[n] === 0 ? item.oldData[n] : $t('no old value')) : item.data[n]"
+                      @input="(e) => { if (cardValueMode?.[String(item.id)] !== 'old') item.data[n] = Number(e.target.value) }"
+                      :disabled="cardValueMode?.[String(item.id)] === 'old'"
+                      class="w-full h-10 px-3 border border-gray-200 rounded-default focus:outline-none focus:border-blue-500 disabled:bg-gray-50 disabled:text-gray-400 text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div v-else>
+                  <Skeleton type="input" class="w-full h-10 rounded-default" />
+                </div>
               </div>
             </div>
-            <div>
-              <GenerationCarousel
-                v-if="item.openGenerationCarousel[n]"
-                :images="item.carouselSaveImages[n]"
-                :recordId="item.id"
-                :meta="props.meta"
-                :fieldName="n"
-                :carouselImageIndex="item.carouselImageIndex[n]"
-                :regenerateImagesRefreshRate="regenerateImagesRefreshRate"
-                :sourceImage="item.images && item.images.length ? item.images : null"
-                :imageGenerationPrompts="imageGenerationPrompts[n]"
-                @error="handleError"
-                @close="item.openGenerationCarousel[n] = false"
-                @selectImage="updateSelectedImage"
-                @updateCarouselIndex="updateActiveIndex"
-              />
-              <ImageCompare
-                v-if="item.openImageCompare[n]"
-                :meta="props.meta"
-                :columnName="n"
-                :oldImage="item.oldData?.[n]"
-                :newImage="item.data?.[n]"
-                @close="item.openImageCompare[n] = false"
-              />
-            </div>
+
           </div>
         </div>
 
-        <div v-if="!item.aiStatus.generatedImages && isInColumnImage(n)">
-            <Skeleton type="image" class="w-20 h-20" />
+        <div class="flex justify-end shrink-0">
+          <button
+            @click="() => canRegenerate(item) && regenerateRecord(item.id)"
+            :disabled="!canRegenerate(item)"
+            class="px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-default hover:bg-gray-50 flex items-center gap-1.5 transition disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white"
+          >
+            <IconRefreshOutline class="w-3.5 h-3.5" /> {{ $t('Regenerate') }}
+          </button>
         </div>
-
-        <div v-if="(!isAnalyzing(item, n) || item.regeneratingFieldsStatus?.[n]) && !isInColumnImage(n)">
-          <Skeleton class="w-full h-6" />
+      </div>
+    </div>
+
+    
+
+    <transition name="fade">
+      <div v-if="zoomedImage" class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm" @click.self="closeZoom">
+        <transition name="zoom">
+          <img v-if="zoomedImage" :src="zoomedImage" class="max-w-[90vw] max-h-[90vh] rounded-default object-contain shadow-2xl" />
+        </transition>
+      </div>
+    </transition>
+
+    <nav v-show="totalItems > 0" class="bg-lightTableBackground dark:bg-darkTableBackground pt-2 flex flex-col gap-2 items-center sm:flex-row justify-center sm:justify-between px-4 pb-4">
+      <span class="text-sm font-normal text-center text-lightTablePaginationText dark:text-darkTablePaginationText sm:mb-4 md:mb-0 block w-full md:inline md:w-auto">
+        {{ $t('Showing') }}
+        <span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ fromIndex }}</span>
+        {{ $t('to') }}
+        <span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ toIndex }}</span>
+        {{ $t('of') }}
+        <span class="font-semibold text-lightTablePaginationNumeration dark:text-darkTablePaginationNumeration">{{ totalItems }}</span>
+      </span>
+      <div class="af-pagination-container flex flex-row items-center gap-3">
+        <div class="inline-flex">
+          <button
+            class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightActivePaginationButtonText bg-lightActivePaginationButtonBackground border-r-0 rounded-s hover:opacity-90 dark:bg-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText disabled:opacity-50"
+            :disabled="currentPage <= 1"
+            @click="previousPage"
+          >
+            <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"/>
+            </svg>
+          </button>
+          <button
+            class="flex items-center py-1 px-3 text-sm font-medium text-lightUnactivePaginationButtonText focus:outline-none bg-lightUnactivePaginationButtonBackground border-r-0 border border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:text-darkUnactivePaginationButtonText dark:border-darkUnactivePaginationButtonBorder dark:hover:text-darkUnactivePaginationButtonHoverText dark:hover:bg-darkUnactivePaginationButtonHoverBackground disabled:opacity-50"
+            :disabled="currentPage <= 1"
+            @click="goToPage(1)"
+          >1</button>
+          <input
+            type="text"
+            v-model="pageInput"
+            :style="{ width: `${Math.max(1, pageInput.length + 4)}ch` }"
+            class="min-w-10 outline-none inline-block w-auto py-1.5 px-3 text-sm text-center text-lightTablePaginationInputText border border-lightTablePaginationInputBorder bg-lightTablePaginationInputBackground dark:border-darkTablePaginationInputBorder dark:text-darkTablePaginationInputText dark:bg-darkTablePaginationInputBackground z-10"
+            @keydown="onPageKeydown"
+            @blur="validatePageInput"
+          />
+          <button
+            class="flex items-center py-1 px-3 text-sm font-medium text-lightUnactivePaginationButtonText focus:outline-none bg-lightUnactivePaginationButtonBackground border-l-0 border border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:text-darkUnactivePaginationButtonText dark:border-darkUnactivePaginationButtonBorder dark:hover:text-darkUnactivePaginationButtonHoverText dark:hover:bg-darkUnactivePaginationButtonHoverBackground disabled:opacity-50"
+            :disabled="currentPage >= totalPages"
+            @click="goToPage(totalPages)"
+          >{{ totalPages }}</button>
+          <button
+            class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightActivePaginationButtonText focus:outline-none bg-lightActivePaginationButtonBackground border-l-0 rounded-e hover:opacity-90 dark:bg-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText disabled:opacity-50"
+            :disabled="currentPage >= totalPages"
+            @click="nextPage"
+          >
+            <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+            </svg>
+          </button>
         </div>
-      </template>
-    </Table>
+      </div>
+    </nav>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -239,14 +348,32 @@ const props = defineProps<{
   outputImageFields: string[],
   outputFieldsForAnalizeFromImages: string[],
   outputPlainFields: string[],
+  overwriteExistingValues: boolean,
 }>();
-const emit = defineEmits(['error', 'regenerateImages', 'regenerateCell']);
+const emit = defineEmits(['error', 'regenerateImages', 'regenerateCell', 'regenerateRecord']);
 
-const pageSize = 6;
-const pagination = reactive({ offset: 0, limit: pageSize });
+function regenerateRecord(recordId: any) {
+  emit('regenerateRecord', { recordId });
+}
+
+function canRegenerate(item: any): boolean {
+  if (props.overwriteExistingValues) return true;
+  for (const n of props.customFieldNames) {
+    const val = item.data?.[n];
+    if (val === null || val === undefined || val === '') return true;
+  }
+  return false;
+}
+
+const DEFAULT_PAGE_SIZE = 7;
+const initialPageSize = props.meta?.pageSize ?? DEFAULT_PAGE_SIZE;
+console.log(props.meta?.pageSize);
+
+const pagination = reactive({ offset: 0, limit: initialPageSize });
 const zoomedImage = ref(null);
 const hovers = ref<Record<string, Record<string, boolean>>>({});
 const tableRef = ref(null);
+const cardValueMode = ref<Record<string, 'old' | 'new'>>({});
 
 defineExpose({
   refresh() {
@@ -258,6 +385,13 @@ defineExpose({
 
 const paginatedRecords = computed(() => props.records.slice(pagination.offset, pagination.offset + pagination.limit));
 
+const openGenerationCarousel = ref<Record<string, Record<string, boolean>>>({})
+
+const totalItems = computed(() => props.records.length);
+const currentPage = computed(() => Math.floor(pagination.offset / pagination.limit) + 1);
+const totalPages = computed(() => Math.max(1, Math.ceil(totalItems.value / pagination.limit)));
+const fromIndex = computed(() => totalItems.value === 0 ? 0 : Math.min(pagination.offset + 1, totalItems.value));
+const toIndex = computed(() => Math.min(pagination.offset + pagination.limit, totalItems.value));
 const tableDataProvider = async ({ offset, limit }) => {
   pagination.offset = offset;
   pagination.limit = limit;
@@ -267,8 +401,29 @@ const tableDataProvider = async ({ offset, limit }) => {
   };
 };
 
+watch(() => props.records.length, (newLength) => {
+  const maxOffset = Math.max(0, (Math.ceil(newLength / pagination.limit) - 1) * pagination.limit);
+  if (pagination.offset > maxOffset) {
+    pagination.offset = maxOffset;
+  }
+});
+
+watch(() => props.meta?.pageSize, (newSize) => {
+  const size = Number(newSize) || DEFAULT_PAGE_SIZE;
+  pagination.limit = size;
+  const maxOffset = Math.max(0, (Math.ceil(props.records.length / pagination.limit) - 1) * pagination.limit);
+  if (pagination.offset > maxOffset) {
+    pagination.offset = maxOffset;
+  }
+}, { immediate: true });
+
 watch(() => props.records, (newVal) => {
   hovers.value = Object.fromEntries((newVal || []).map(record => [String(record.id), {}]));
+  const newCardValueMode = {};
+  (newVal || []).forEach(record => {
+    newCardValueMode[String(record.id)] = 'new';
+  });
+  cardValueMode.value = newCardValueMode;
 }, { immediate: true, deep: true });
 
 function zoomImage(img) {
@@ -291,6 +446,17 @@ function isInColumnImage(key: string): boolean {
   return props.meta.outputImageFields?.includes(key) || false;
 }
 
+const hasNonImageOutputFields = computed(() => {
+  if (!props.customFieldNames) return false;
+  
+  for (const fieldName of props.customFieldNames) {
+    const isImage = isInColumnImage(fieldName);
+    if (!isImage) return true;
+  }
+  
+  return false;
+});
+
 function convertColumnEnumToSelectOptions(columnEnumArray: any[], key: string) {
   const col = columnEnumArray.find(c => c.name === key);
   if (!col) return [];
@@ -399,8 +565,37 @@ function isHovered(recordId: string | number, field: string) {
   return Boolean(hovers.value?.[String(recordId)]?.[field]);
 }
 
+function toggleCardValueMode(recordId: string | number) {
+  const key = String(recordId);
+  const currentMode = cardValueMode.value[key] || 'new';
+  cardValueMode.value[key] = currentMode === 'new' ? 'old' : 'new';
+}
+
+const pageInput = ref(String(currentPage.value));
+watch(currentPage, (val) => { pageInput.value = String(val); });
+
+function goToPage(page: number) {
+  const clampedPage = Math.min(Math.max(page, 1), totalPages.value);
+  pagination.offset = (clampedPage - 1) * pagination.limit;
+}
+
+function previousPage() {
+  goToPage(currentPage.value - 1);
+}
 
+function nextPage() {
+  goToPage(currentPage.value + 1);
+}
 
+function onPageKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter') validatePageInput();
+}
+
+function validatePageInput() {
+  const parsed = parseInt(pageInput.value);
+  if (!isNaN(parsed)) goToPage(parsed);
+  pageInput.value = String(currentPage.value);
+}
 </script>
 
 <style scoped>
diff --git a/index.ts b/index.ts
index 3f50d74..361fa4f 100644
--- a/index.ts
+++ b/index.ts
@@ -5,8 +5,6 @@ import type { PluginOptions } from './types.js';
 import Handlebars from 'handlebars';
 import { RateLimiter } from "adminforth";
 import { randomUUID } from "crypto";
-
-
 const STUB_MODE = false;
 const jobs = new Map(); 
 export default class  BulkAiFlowPlugin extends AdminForthPlugin {
@@ -643,7 +641,8 @@ export default class  BulkAiFlowPlugin extends AdminForthPlugin {
           plainFieldsPrompts: this.options.fillPlainFields || {},
           imageFieldsPrompts: this.options.fillFieldsFromImages || {},
           imageGenerationPrompts: this.options.generateImages || {},
-        }
+        },
+        pageSize: this.options.pageSize || undefined
       }
     }
     
diff --git a/package.json b/package.json
index 3af26cd..1a57988 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   "description": "Bulk AI workflow plugin for AdminForth for batch field generation and image processing",
   "devDependencies": {
     "@types/node": "latest",
-    "adminforth": "^2.60.2",
+    "adminforth": "2.70.0",
     "semantic-release": "^24.2.1",
     "semantic-release-slack-bot": "^4.0.2",
     "typescript": "^5.7.3"
@@ -35,7 +35,7 @@
     "handlebars": "^4.7.8"
   },
   "peerDependencies": {
-    "adminforth": "^2.42.0"
+    "adminforth": "^2.70.0"
   },
   "release": {
     "plugins": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 56fc272..63e90f7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,8 +19,8 @@ importers:
         specifier: latest
         version: 25.3.3
       adminforth:
-        specifier: ^2.60.2
-        version: 2.60.2(@types/node@25.3.3)(typescript@5.9.3)
+        specifier: 2.70.0
+        version: 2.70.0(@types/node@25.3.3)(typescript@5.9.3)
       semantic-release:
         specifier: ^24.2.1
         version: 24.2.9(typescript@5.9.3)
@@ -416,8 +416,8 @@ packages:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
 
-  adminforth@2.60.2:
-    resolution: {integrity: sha512-WHttE8tZKLYNw3dpFqLOAsenyX9Ymv/3/6kfpsU8npMpZQk55H2p39MJm4vtAhUbz4aSroV37B7nPO3V/dZ5dw==}
+  adminforth@2.70.0:
+    resolution: {integrity: sha512-E/zvEtAU7Woh3nLR7xrfgaVtH0Y+NAQnbSlZhTMpSpjrwwwGPAmE6lKsEaVAD7T+y1TvNhk+yCh/Mb6me3owzA==}
     hasBin: true
 
   agent-base@7.1.4:
@@ -2978,7 +2978,7 @@ snapshots:
       mime-types: 2.1.35
       negotiator: 0.6.3
 
-  adminforth@2.60.2(@types/node@25.3.3)(typescript@5.9.3):
+  adminforth@2.70.0(@types/node@25.3.3)(typescript@5.9.3):
     dependencies:
       '@babel/parser': 7.29.0
       '@clickhouse/client': 1.18.1
diff --git a/types.ts b/types.ts
index 4ad5039..c4fce5e 100644
--- a/types.ts
+++ b/types.ts
@@ -153,4 +153,10 @@ export interface PluginOptions extends PluginsCommonOptions {
    */
   askConfirmation?: ({ afterRecords: number } | { everyRecords: number })[]
 
+  /**
+   * Number of cards to show per page in the VisionTable component.
+   * If omitted, the component falls back to 6.
+   */
+  pageSize?: number;
+
 }