diff --git a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
index 8019a9d3bd..5bfdbe6250 100644
--- a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
@@ -31,7 +31,7 @@ const emit = defineEmits(['resize-start'])
       'h-full': size === 'auto',
       'rounded-l-[4px] !border-r-0 ml-1': position === 'leftRounded',
       'rounded-r-[4px] !border-l-0 mr-1': position === 'rightRounded',
-      'rounded-[4px] mx-1': position === 'rounded',
+      'rounded-[4px] ml-0.8 mr-1': position === 'rounded',
       'rounded-none !border-x-0': position === 'none',
       'bg-maroon-50': color === 'maroon',
       'bg-blue-50': color === 'blue',
@@ -40,6 +40,7 @@ const emit = defineEmits(['resize-start'])
       'bg-pink-50': color === 'pink',
       'bg-purple-50': color === 'purple',
       'bg-white border-gray-300': color === 'gray',
+      '!bg-nc-bg-gray-light': hover || dragging,
     }"
     :style="{
       boxShadow:
@@ -76,9 +77,14 @@ const emit = defineEmits(['resize-start'])
         :class="{
           'pr-7': position === 'leftRounded',
         }"
-        class="flex mb-0.5 overflow-x-hidden break-word whitespace-nowrap overflow-hidden text-ellipsis w-full truncate text-ellipsis flex-col gap-1"
+        class="flex mb-0.5 overflow-x-hidden w-full truncate flex-col gap-1"
       >
-        <NcTooltip :disabled="selected || dragging" class="inline-block" show-on-truncate-only wrap-child="span">
+        <NcTooltip
+          :disabled="selected || dragging"
+          class="break-word whitespace-nowrap overflow-hidden text-ellipsis pr-1"
+          show-on-truncate-only
+          wrap-child="span"
+        >
           <slot class="text-sm text-nowrap text-gray-800 leading-7" />
           <template #title>
             <slot />
diff --git a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
index fdb03c22bc..9efa362a2f 100644
--- a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
@@ -36,8 +36,9 @@ const emit = defineEmits(['resize-start'])
       'bg-purple-50': color === 'purple',
       'bg-white border-gray-300': color === 'gray',
       'z-90': hover,
+      '!bg-nc-bg-gray-light': hover || dragging,
     }"
-    class="relative flex gap-2 border-1 relative rounded-md h-full"
+    class="relative flex gap-1 border-1 relative rounded-md h-full"
   >
     <div
       v-if="resize"
@@ -59,7 +60,11 @@ const emit = defineEmits(['resize-start'])
 
     <div class="flex overflow-x-hidden whitespace-nowrap text-ellipsis pt-1 w-full truncate text-ellipsis flex-col gap-1">
       <div class="truncate">
-        <NcTooltip show-on-truncate-only :disabled="selected">
+        <NcTooltip
+          class="break-word whitespace-nowrap overflow-hidden text-ellipsis pr-1"
+          show-on-truncate-only
+          :disabled="selected"
+        >
           <template #title>
             <slot />
           </template>
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 0363c8d5e7..702b908919 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -116,7 +116,6 @@ const calculateHourIndices = (dayIndex: number, startDate: dayjs.Dayjs, endDate:
   return {
     startHourIndex,
     endHourIndex,
-    // You might also want these for more precise calculations
     startMinutes: startDate.minute(),
     endMinutes: endDate.minute(),
   }
@@ -956,7 +955,7 @@ watch(
         <div class="flex-1 border-b-1 border-brand-500"></div>
       </div>
     </div>
-    <div class="flex sticky h-6 z-3 top-0 pl-16 bg-gray-50 w-full">
+    <div class="flex sticky h-6 z-4 top-0 pl-16 bg-gray-50 w-full">
       <div
         v-for="date in datesHours"
         :key="date[0].toISOString()"
@@ -988,7 +987,7 @@ watch(
     </div>
     <div
       v-if="isRangeEnabled && recordsAcrossAllRange.spanningRecords?.length"
-      class="sticky top-6 bg-white z-3 inset-x-0 w-full"
+      class="sticky top-6 bg-white z-4 inset-x-0 w-full"
     >
       <SmartsheetCalendarDateTimeSpanningContainer
         ref="spanningRecordsContainer"
@@ -1039,7 +1038,7 @@ watch(
           <NcButton
             v-if="isOverflowAcrossHourRange(hour).isOverflow"
             v-e="`['c:calendar:week-view-more']`"
-            class="!absolute bottom-1 text-center w-15 ml-auto inset-x-0 z-2 text-gray-500"
+            class="!absolute bottom-1 text-center w-15 ml-auto inset-x-0 z-3 text-gray-500"
             size="xxsmall"
             type="secondary"
             @click="viewMore(hour)"