diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 4abe1e9c7e..625879f027 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -83,7 +83,7 @@ onClickOutside(carouselRef, () => {
           </template>
 
           <template #customPaging="props">
-            <div class="cursor-pointer h-full">
+            <div class="cursor-pointer h-full nc-attachment-img-wrapper">
               <LazyCellAttachmentImage
                 class="!block margin-auto h-full w-full"
                 :alt="imageItems[props.i].title || `#${props.i}`"
@@ -142,4 +142,8 @@ onClickOutside(carouselRef, () => {
 .ant-carousel :deep(.custom-slick-arrow:hover) {
   opacity: 0.5;
 }
+
+.nc-attachment-img-wrapper {
+  width: fit-content !important;
+}
 </style>
diff --git a/packages/nc-gui/components/cell/attachment/Image.vue b/packages/nc-gui/components/cell/attachment/Image.vue
index f37bc8ead4..a492c22d6e 100644
--- a/packages/nc-gui/components/cell/attachment/Image.vue
+++ b/packages/nc-gui/components/cell/attachment/Image.vue
@@ -14,7 +14,7 @@ const onError = () => index.value++
 <template>
   <LazyNuxtImg
     v-if="index < props.src.length"
-    class="nc-attachment-img"
+    class="m-auto"
     :src="props.src[index]"
     :onerror="onError"
     :alt="props?.alt || ''"
@@ -23,10 +23,3 @@ const onError = () => index.value++
   />
   <MdiFileImageBox v-else />
 </template>
-
-<style scoped lang="scss">
-.nc-attachment-img {
-  width: fit-content !important;
-  @apply m-auto;
-}
-</style>