diff --git a/custom/VisionAction.vue b/custom/VisionAction.vue
index a498cd3..ea450b0 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,61 @@
               </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="isGenerationPaused ? 'bg-yellow-50 text-yellow-600 dark:bg-yellow-950/40 dark:text-yellow-400' 
+                    : displayedProcessedCount === totalRecords ? 'bg-green-50 text-green-600 dark:bg-green-950/40 dark:text-green-400'
+                    : 'bg-blue-50 text-blue-600 dark:bg-blue-950/40 dark:text-blue-400'"
+                >
+                  <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"
@@ -107,60 +147,164 @@
           :outputPlainFields="props.meta.outputPlainFields"
           @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 +323,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 +456,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 +476,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 +485,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 +523,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 +563,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 +688,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 +952,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 +984,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 +1440,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 +1454,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 +1540,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 +1814,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..a4e0243 100644
--- a/custom/VisionTable.vue
+++ b/custom/VisionTable.vue
@@ -1,222 +1,318 @@
 <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">
+              <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 class="text-right text-gray-400 text-sm">
+                ID: {{ item.id }}
               </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>
         </div>
 
-        <div v-if="(!isAnalyzing(item, n) || item.regeneratingFieldsStatus?.[n]) && !isInColumnImage(n)">
-          <Skeleton class="w-full h-6" />
+        <div class="flex justify-end shrink-0">
+          <button @click="() => regenerateRecord(item.id)" 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">
+            <IconRefreshOutline class="w-3.5 h-3.5" /> {{ $t('Regenerate') }}
+          </button>
         </div>
-      </template>
-    </Table>
+      </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>
+
+    <div v-show="totalItems > 0" class="w-full flex flex-col sm:flex-row sm:items-center sm:justify-between px-1 py-2 bg-transparent">
+      <p class="text-sm text-gray-500">
+        {{ $t('Showing') }}
+        <span class="font-semibold text-gray-900">{{ fromIndex }}</span>
+        {{ $t('to') }}
+        <span class="font-semibold text-gray-900">{{ toIndex }}</span>
+        {{ $t('of') }}
+        <span class="font-semibold text-gray-900">{{ totalItems }}</span>
+      </p>
+
+      <div class="inline-flex items-center gap-1 rounded-default border border-gray-200 bg-white px-2 py-1 shadow-sm">
+        <button
+          class="inline-flex items-center justify-center rounded-default px-3 py-1 text-sm font-medium text-gray-500 transition hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
+          :disabled="currentPage <= 1"
+          @click="previousPage"
+        >
+          {{ $t('Prev') }}
+        </button>
+
+        <template v-for="page in pageButtons" :key="page">
+          <button
+            class="inline-flex items-center justify-center rounded-default px-3 py-1 text-sm font-medium transition"
+            :class="page === currentPage ? 'bg-blue-600 text-white shadow-sm' : 'text-gray-600 hover:bg-gray-100'"
+            @click="goToPage(page)"
+          >
+            {{ page }}
+          </button>
+        </template>
+
+        <button
+          class="inline-flex items-center justify-center rounded-default px-3 py-1 text-sm font-medium text-gray-500 transition hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
+          :disabled="currentPage >= totalPages"
+          @click="nextPage"
+        >
+          {{ $t('Next') }}
+        </button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -240,13 +336,21 @@ const props = defineProps<{
   outputFieldsForAnalizeFromImages: string[],
   outputPlainFields: string[],
 }>();
-const emit = defineEmits(['error', 'regenerateImages', 'regenerateCell']);
+const emit = defineEmits(['error', 'regenerateImages', 'regenerateCell', 'regenerateRecord']);
+
+function regenerateRecord(recordId: any) {
+  emit('regenerateRecord', { recordId });
+}
 
-const pageSize = 6;
-const pagination = reactive({ offset: 0, limit: pageSize });
+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 +362,25 @@ 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 pageButtons = computed(() => {
+  const pages = [];
+  const current = currentPage.value;
+  const total = totalPages.value;
+  const start = Math.max(1, current - 2);
+  const end = Math.min(total, current + 2);
+
+  for (let number = start; number <= end; number += 1) {
+    pages.push(number);
+  }
+  return pages;
+});
 const tableDataProvider = async ({ offset, limit }) => {
   pagination.offset = offset;
   pagination.limit = limit;
@@ -267,8 +390,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) {
@@ -399,8 +543,24 @@ 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';
+}
 
+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);
+}
 </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..c36118d 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.67.2",
     "semantic-release": "^24.2.1",
     "semantic-release-slack-bot": "^4.0.2",
     "typescript": "^5.7.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 56fc272..a5f5892 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.67.2
+        version: 2.67.2(@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.67.2:
+    resolution: {integrity: sha512-7RZOf/qQuJGWIco9sjIuLaHz5gjjFkZMNnkjGJQDhvqQ1NWG21tG6pQi0/ilQxhaGTsLtzxw5jce8O/RUpH1Hw==}
     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.67.2(@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;
+
 }