diff --git a/packages/nc-gui/components/general/Overlay.vue b/packages/nc-gui/components/general/Overlay.vue
index cebc59432e..da9ce2b175 100644
--- a/packages/nc-gui/components/general/Overlay.vue
+++ b/packages/nc-gui/components/general/Overlay.vue
@@ -11,6 +11,7 @@ interface Props {
   target?: TeleportProps['to']
   teleportDisabled?: TeleportProps['disabled']
   transition?: boolean
+  lightBackground?: boolean
 }
 
 interface Emits {
@@ -49,8 +50,10 @@ export default {
         vModel ? 'opacity-100' : 'opacity-0 pointer-events-none',
         inline ? 'absolute' : 'fixed',
         transition ? 'transition-opacity duration-200 ease-in-out' : '',
+        lightBackground ? 'bg-gray-100/25' : '',
+        !lightBackground ? 'bg-gray-700/75' : '',
       ]"
-      class="z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75"
+      class="z-100 top-0 left-0 bottom-0 right-0 bg-gray-100/25"
     >
       <slot :is-open="vModel" />
     </div>
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 9cf501cd7b..6e5886c512 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -381,7 +381,7 @@ onBeforeUnmount(async () => {
 
 <template>
   <div class="flex flex-col h-full min-h-0 w-full">
-    <general-overlay :model-value="isLoading" inline transition>
+    <general-overlay :model-value="isLoading" inline transition light-background>
       <div class="flex items-center justify-center h-full w-full">
         <a-spin size="large" />
       </div>