diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 98098e4511..6e66cca0e3 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -89,7 +89,7 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
           <NcCarouselContent>
             <NcCarouselItem v-for="(item, index) in visibleItems" :key="index">
               <div class="w-full flex items-center">
-                <LazyCellAttachmentImage
+                <LazyCellAttachmentPreviewImage
                   v-if="isImage(item.title, item.mimeType)"
                   class="nc-attachment-img-wrapper"
                   object-fit="contain"
@@ -97,7 +97,7 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
                   :srcs="getPossibleAttachmentSrc(item)"
                 />
 
-                <LazyCellAttachmentVideo
+                <LazyCellAttachmentPreviewVideo
                   v-else-if="isVideo(item.title, item.mimeType)"
                   class="!h-full"
                   :src="getPossibleAttachmentSrc(item)[0]"
@@ -112,20 +112,25 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
           </NcCarouselContent>
         </NcCarousel>
 
-        <div class="absolute w-full !bottom-5 max-h-18 z-30 flex items-center justify-center">
+        <div class="absolute w-full !bottom-3 max-h-18 z-30 flex items-center justify-center">
           <NcCarousel class="absolute max-w-sm" @init-api="(val) => (emblaThumbnailApi = val)">
             <NcCarouselContent class="!flex !gap-2 ml-0">
               <NcCarouselItem
                 v-for="(item, index) in visibleItems"
                 :key="index"
                 :class="{
-                  ' opacity-100': index === selectedIndex,
+                  'opacity-100': index === selectedIndex,
+                  '!basis-1/2': visibleItems.length === 2,
+                  '!basis-1/3': visibleItems.length === 3,
+                  '!basis-1': visibleItems.length === 1,
+                  '!basis-1/4': visibleItems.length === 4,
+                  '!basis-1/8': visibleItems.length > 4,
                 }"
-                class="px-2 keep-open opacity-50 !basis-1/8 cursor-pointer"
+                class="px-2 keep-open opacity-50 cursor-pointer"
                 @click="onThumbClick(index)"
               >
                 <div class="flex items-center justify-center">
-                  <LazyCellAttachmentImage
+                  <LazyCellAttachmentPreviewImage
                     v-if="isImage(item.title, item.mimeType)"
                     class="nc-attachment-img-wrapper h-12"
                     object-fit="contain"
diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index 4c11785e44..6ceed95d6b 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -144,7 +144,7 @@ const handleFileDelete = (i: number) => {
               :class="[dragging ? 'cursor-move' : 'cursor-pointer']"
               class="nc-attachment h-full w-full flex items-center justify-center overflow-hidden"
             >
-              <LazyCellAttachmentImage
+              <LazyCellAttachmentPreviewImage
                 v-if="isImage(item.title, item.mimetype)"
                 :srcs="getPossibleAttachmentSrc(item)"
                 class="max-h-full h-64 m-auto justify-center"
diff --git a/packages/nc-gui/components/cell/attachment/Image.vue b/packages/nc-gui/components/cell/attachment/Preview/Image.vue
similarity index 100%
rename from packages/nc-gui/components/cell/attachment/Image.vue
rename to packages/nc-gui/components/cell/attachment/Preview/Image.vue
diff --git a/packages/nc-gui/components/cell/attachment/Video.vue b/packages/nc-gui/components/cell/attachment/Preview/Video.vue
similarity index 100%
rename from packages/nc-gui/components/cell/attachment/Video.vue
rename to packages/nc-gui/components/cell/attachment/Preview/Video.vue
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 9b428a1e19..fa49ba9ae1 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -293,7 +293,7 @@ const handleFileDelete = (i: number) => {
                 :class="{ '!w-30': isForm || isExpandedForm }"
                 @click="() => onFileClick(item)"
               >
-                <LazyCellAttachmentImage
+                <LazyCellAttachmentPreviewImage
                   :alt="item.title || `#${i}`"
                   class="rounded"
                   :class="{
diff --git a/packages/nc-gui/components/general/FormBanner.vue b/packages/nc-gui/components/general/FormBanner.vue
index 6a609a866e..04f42a9128 100644
--- a/packages/nc-gui/components/general/FormBanner.vue
+++ b/packages/nc-gui/components/general/FormBanner.vue
@@ -19,7 +19,11 @@ const getBannerImageSrc = computed(() => {
     :class="!bannerImageUrl ? 'shadow-sm' : ''"
     :style="{ aspectRatio: 4 / 1 }"
   >
-    <LazyCellAttachmentImage v-if="bannerImageUrl" :srcs="getBannerImageSrc" class="nc-form-banner-image object-cover w-full" />
+    <LazyCellAttachmentPreviewImage
+      v-if="bannerImageUrl"
+      :srcs="getBannerImageSrc"
+      class="nc-form-banner-image object-cover w-full"
+    />
     <div v-else class="h-full flex items-stretch justify-between bg-white">
       <div class="flex -mt-1">
         <img src="~assets/img/form-banner-left.png" alt="form-banner-left'" />
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 00e2e8d023..edb4e62f35 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -872,7 +872,7 @@ useEventListener(
                             "
                             style="transition: all 0.3s ease-in"
                           >
-                            <LazyCellAttachmentImage
+                            <LazyCellAttachmentPreviewImage
                               v-if="formViewData.logo_url"
                               :key="formViewData.logo_url?.path"
                               :srcs="getFormLogoSrc"
diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index 592298e1bd..9624445a2e 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -299,7 +299,7 @@ watch(
                   </template>
 
                   <template v-for="(attachment, index) in attachments(record)">
-                    <LazyCellAttachmentImage
+                    <LazyCellAttachmentPreviewImage
                       v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
                       :key="`carousel-${record.row.id}-${index}`"
                       class="h-52"
diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index 29e1bd6d25..2ce7b3a7c1 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -785,7 +785,7 @@ const handleSubmitRenameOrNewStack = async (loadMeta: boolean, stack?: any, stac
                                         </template>
 
                                         <template v-for="attachment in attachments(record)">
-                                          <LazyCellAttachmentImage
+                                          <LazyCellAttachmentPreviewImage
                                             v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
                                             :key="attachment.path"
                                             class="h-52"
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
index 421d8da88f..27e6a1c436 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
@@ -582,7 +582,7 @@ onClickOutside(searchRef, toggleSearch)
                     </template>
 
                     <template v-for="(attachment, index) in attachments(record)">
-                      <LazyCellAttachmentImage
+                      <LazyCellAttachmentPreviewImage
                         v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
                         :key="`carousel-${record.row.id}-${index}`"
                         class="h-10 !w-10 !object-contain"
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItem.vue b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
index b703638b23..952f34a6f4 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItem.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
@@ -88,7 +88,7 @@ const displayValue = computed(() => {
             <a-carousel autoplay class="!w-11 !h-11 !max-h-11 !max-w-11">
               <template #customPaging> </template>
               <template v-for="(attachmentObj, index) in attachments">
-                <LazyCellAttachmentImage
+                <LazyCellAttachmentPreviewImage
                   v-if="isImage(attachmentObj.title, attachmentObj.mimetype ?? attachmentObj.type)"
                   :key="`carousel-${attachmentObj.title}-${index}`"
                   class="!w-11 !h-11 !max-h-11 !max-w-11object-cover !rounded-l-xl"