diff --git a/packages/nc-gui/components/cell/attachment/AttachFile.vue b/packages/nc-gui/components/cell/attachment/AttachFile.vue
index 1c636a0d96..9ce0306f92 100644
--- a/packages/nc-gui/components/cell/attachment/AttachFile.vue
+++ b/packages/nc-gui/components/cell/attachment/AttachFile.vue
@@ -47,8 +47,8 @@ watch(activeMenu, (newVal, oldValue) => {
     @keydown.esc="dialogShow = false"
   >
     <div class="flex h-full flex-row">
-      <div style="border-top-left-radius: 1rem; border-bottom-left-radius: 1rem" class="px-2 !-full flex-grow bg-gray-100">
-        <NcMenu class="!h-full !bg-gray-100">
+      <div style="border-top-left-radius: 1rem; border-bottom-left-radius: 1rem" class="px-2 !-full flex-grow bg-gray-50">
+        <NcMenu class="!h-full !bg-gray-50">
           <NcMenuItem
             key="local"
             :class="{
diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index 4e664ab12f..aea60ff891 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -28,8 +28,6 @@ const dropZoneRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
-const { isMobileMode } = useGlobal()
-
 const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, readOnly)
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
@@ -136,70 +134,84 @@ const handleFileDelete = (i: number) => {
         class="grid max-h-140 overflow-auto nc-scrollbar-md md:grid-cols-3 xl:grid-cols-5 gap-y-8 gap-x-4 relative"
       >
         <div
-          v-for="(item, i) of visibleItems"
-          :key="`${item.title}-${i}`"
-          class="nc-attachment-item group flex border-1 gap-2 rounded-md border-gray-200 flex-col relative"
+          v-for="(item, i) in visibleItems"
+          :key="`${item?.title}-${i}`"
+          class="nc-attachment-item group gap-2 flex border-1 rounded-md border-gray-200 flex-col relative"
         >
           <NcCheckbox
             v-model:checked="selectedVisibleItems[i]"
             class="nc-attachment-checkbox absolute top-2 left-2 group-hover:(opacity-100)"
             :class="{ '!opacity-100': selectedVisibleItems[i] }"
           />
-
           <div
-            :class="[dragging ? 'cursor-move' : 'cursor-pointer']"
-            class="nc-attachment h-full flex justify-center items-center overflow-hidden"
+            :class="{
+              'cursor-move': dragging,
+              'cursor-pointer': !dragging,
+              'h-full': !isImage(item.title, item.mimetype),
+            }"
+            class="nc-attachment flex justify-center items-center overflow-hidden"
           >
             <LazyCellAttachmentPreviewImage
               v-if="isImage(item.title, item.mimetype)"
               :srcs="getPossibleAttachmentSrc(item)"
-              class="max-h-full h-64 m-auto rounded-md justify-center"
+              object-fit="cover"
+              class="!w-full h-42 object-cover !m-0 rounded-t-[5px] justify-center"
               @click.stop="onClick(item)"
             />
 
             <component
               :is="FileIcon(item.icon)"
               v-else-if="item.icon"
-              :height="isMobileMode ? 45 : 150"
-              :width="isMobileMode ? 45 : 150"
+              :height="45"
+              :width="45"
               @click.stop="openAttachment(item)"
             />
 
-            <IcOutlineInsertDriveFile
-              v-else
-              :height="isMobileMode ? 45 : 150"
-              :width="isMobileMode ? 45 : 150"
-              @click.stop="openAttachment(item)"
-            />
+            <IcOutlineInsertDriveFile v-else :height="45" :width="45" @click.stop="openAttachment(item)" />
           </div>
 
-          <div class="relative px-4 pb-2 flex text-gray-500 text-sm" :title="item.title">
-            <div class="flex-auto truncate line-height-4">
+          <div class="relative px-1 flex" :title="item.title">
+            <NcTooltip show-on-truncate-only class="flex-auto truncate w-full text-[13px] items-center text-sm line-height-4">
               {{ item.title }}
-            </div>
-            <div class="flex-none hide-ui transition-all transition-ease-in-out !h-6 flex items-center bg-white">
+
+              <template #title>
+                {{ item.title }}
+              </template>
+            </NcTooltip>
+            <div class="flex-none hide-ui transition-all transition-ease-in-out !h-5 gap-0.5 pb-2 flex items-center bg-white">
               <NcTooltip placement="bottom">
                 <template #title> {{ $t('title.downloadFile') }} </template>
-                <NcButton class="!text-gray-500" size="xsmall" type="text" @click="downloadAttachment(item)">
-                  <component :is="iconMap.download" class="h-[14px] w-[14px]" />
+                <NcButton
+                  class="!p-0 !w-5 !h-5 text-gray-500 !min-w-[fit-content]"
+                  size="xsmall"
+                  type="text"
+                  @click="downloadAttachment(item)"
+                >
+                  <component :is="iconMap.download" class="!text-xs" />
                 </NcButton>
               </NcTooltip>
 
               <NcTooltip v-if="!isSharedForm || (!readOnly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
                 <template #title> {{ $t('title.renameFile') }} </template>
-                <NcButton size="xsmall" class="nc-attachment-rename !text-gray-500" type="text" @click="renameFile(item, i)">
-                  <component :is="iconMap.rename" class="h-[14px] w-[14px]" />
+                <NcButton
+                  size="xsmall"
+                  class="!p-0 nc-attachment-rename !h-5 !w-5 !text-gray-500 !min-w-[fit-content]"
+                  type="text"
+                  @click="renameFile(item, i)"
+                >
+                  <component :is="iconMap.rename" class="text-xs" />
                 </NcButton>
               </NcTooltip>
 
-              <NcTooltip v-if="!readOnly" placement="bottom">
+              <NcTooltip v-if="isSharedForm || (!readOnly && isUIAllowed('dataEdit') && !isPublic)" placement="bottom">
                 <template #title> {{ $t('title.removeFile') }} </template>
-                <NcButton class="!text-red-500" size="xsmall" type="text" @click="onRemoveFileClick(item.title, i)">
-                  <component
-                    :is="iconMap.delete"
-                    v-if="isSharedForm || (isUIAllowed('dataEdit') && !isPublic)"
-                    class="h-[14px] w-[14px]"
-                  />
+                <NcButton
+                  class="!p-0 !h-4 !w-4 !text-red-500 nc-attachment-remove !min-w-[fit-content]"
+                  size="xsmall"
+                  type="text"
+                  @click="onRemoveFileClick(item.title, i)"
+                >
+                  <component :is="iconMap.delete" />
                 </NcButton>
               </NcTooltip>
             </div>
@@ -251,5 +263,9 @@ const handleFileDelete = (i: number) => {
       @apply !pointer-events-none;
     }
   }
+
+  .nc-checkbox > .ant-checkbox {
+    box-shadow: none !important;
+  }
 }
 </style>
diff --git a/packages/nc-gui/components/cell/attachment/UploadProviders/Local.vue b/packages/nc-gui/components/cell/attachment/UploadProviders/Local.vue
index 035569cf1d..704cefe33f 100644
--- a/packages/nc-gui/components/cell/attachment/UploadProviders/Local.vue
+++ b/packages/nc-gui/components/cell/attachment/UploadProviders/Local.vue
@@ -106,7 +106,7 @@ onBeforeUnmount(() => {
       ref="dropZoneRef"
       :class="{
         'border-brand-500': isOverDropZone,
-        'border-dashed border-1': !tempFiles.length,
+        'border-dashed border-2': !tempFiles.length,
       }"
       data-testid="attachment-drop-zone"
       :style="`height: ${tempFiles.length > 0 ? '324px' : '100%'}`"
@@ -115,11 +115,11 @@ onBeforeUnmount(() => {
     >
       <div v-if="!tempFiles.length" class="flex cursor-pointer items-center justify-center flex-col gap-2">
         <template v-if="!isOverDropZone">
-          <component :is="iconMap.upload" class="w-5 h-5" />
+          <component :is="iconMap.upload" class="w-6 h-6" />
           <h1>
             {{ $t('labels.clickTo') }}
 
-            <span class="font-semibold"> {{ $t('labels.browseFiles') }} </span>
+            <span class="font-semibold text-brand-500"> {{ $t('labels.browseFiles') }} </span>
             {{ $t('general.or') }}
             <span class="font-semibold"> {{ $t('labels.dragFilesHere') }} </span>
 
diff --git a/packages/nc-gui/components/cell/attachment/UploadProviders/Url.vue b/packages/nc-gui/components/cell/attachment/UploadProviders/Url.vue
index 55571c69de..148fb217c1 100644
--- a/packages/nc-gui/components/cell/attachment/UploadProviders/Url.vue
+++ b/packages/nc-gui/components/cell/attachment/UploadProviders/Url.vue
@@ -38,7 +38,7 @@ const deleteAttachment = (index: number) => {
   tempAttachments.value.splice(index, 1)
 }
 
-const isValidUrl = ref(true)
+const isValidUrl = ref(false)
 
 const errorMessage = ref('')
 
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 2bcf8a52b8..ef1edacd1b 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -129,6 +129,7 @@ watch(
 const isNewAttachmentModalOpen = ref(false)
 
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
+  if (modalVisible.value) return
   if (e.key === 'Enter' && !isReadonly.value && !selectedFile.value) {
     if (isNewAttachmentModalOpen.value) return
     e.stopPropagation()
@@ -238,9 +239,13 @@ const handleFileDelete = (i: number) => {
         </div>
 
         <div class="relative px-1 flex" :title="item.title">
-          <div class="flex-auto text-[13px] items-center truncate text-sm line-height-4">
+          <NcTooltip show-on-truncate-only class="flex-auto truncate w-full text-[13px] items-center text-sm line-height-4">
             {{ item.title }}
-          </div>
+
+            <template #title>
+              {{ item.title }}
+            </template>
+          </NcTooltip>
           <div class="flex-none hide-ui transition-all transition-ease-in-out !h-5 gap-0.5 pb-2 flex items-center bg-white">
             <NcTooltip placement="bottom">
               <template #title> {{ $t('title.downloadFile') }} </template>