diff --git a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
index 7140f25c7f..258c62adeb 100644
--- a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
@@ -39,8 +39,9 @@ const emit = defineEmits(['resize-start'])
       'bg-yellow-50': color === 'yellow',
       'bg-pink-50': color === 'pink',
       'bg-purple-50': color === 'purple',
+      'group-hover:(border-brand-500 border-2)': resize,
     }"
-    class="relative"
+    class="relative group"
   >
     <div class="h-full absolute py-2">
       <div
@@ -56,12 +57,18 @@ const emit = defineEmits(['resize-start'])
         class="block h-full min-h-5 ml-1 w-1 rounded mr-2"
       ></div>
     </div>
-    <span
-      v-if="resize"
-      class="absolute -left-1 resize mt-1.5 h-9 w-2"
-      @mousedown.stop="emit('resize-start', 'left', $event, record)"
+
+    <div
+      v-if="position === 'leftRounded' || position === 'rounded'"
+      :class="{
+        '!group-hover:(border-brand-500 block border-2 rounded-lg)': resize,
+      }"
+      class="absolute mt-0.6 h-7.1 hidden -left-3 resize"
     >
-    </span>
+      <NcButton v-if="resize" size="xsmall" type="secondary" @mousedown.stop="emit('resize-start', 'left', $event, record)">
+        <component :is="iconMap.drag" class="text-gray-400"></component>
+      </NcButton>
+    </div>
 
     <div class="ml-3 mt-2 text-ellipsis overflow-hidden w-full h-6 absolute">
       <span v-if="position === 'rightRounded' || position === 'none'"> .... </span>
@@ -69,12 +76,17 @@ const emit = defineEmits(['resize-start'])
       <span v-if="showDate" class="text-xs ml-1 text-gray-600">{{ date }}</span>
       <span v-if="position === 'leftRounded' || position === 'none'" class="absolute my-0 right-5"> .... </span>
     </div>
-    <span
-      v-if="resize"
-      class="absolute mt-1.5 right-1 w-2 h-9 px-1 resize"
-      @mousedown.stop="emit('resize-start', 'right', $event, record)"
+    <div
+      v-if="position === 'rightRounded' || position === 'rounded'"
+      :class="{
+        '!group-hover:(border-brand-500 border-2 block rounded-lg)': resize,
+      }"
+      class="absolute mt-0.6 hidden h-7.1 -right-3 border-1 resize"
     >
-    </span>
+      <NcButton v-if="resize" size="xsmall" type="secondary" @mousedown.stop="emit('resize-start', 'right', $event, record)">
+        <component :is="iconMap.drag" class="text-gray-400"></component>
+      </NcButton>
+    </div>
   </div>
 </template>
 
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
index ba601b3179..d52c2af4ee 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
@@ -262,39 +262,31 @@ const sideBarListScrollHandle = useDebounceFn(async (e: Event) => {
       year-picker
     />
 
-    <div class="px-4 flex flex-col gap-y-6 pt-4">
-      <div class="flex justify-between items-center">
-        <span class="text-lg font-bold">{{ t('objects.Records') }}</span>
-        <NcSelect v-model:value="sideBarFilterOption" :options="options" />
-      </div>
+    <div class="px-4 relative flex flex-col gap-y-6 pt-4">
       <div class="flex items-center gap-3">
-        <a-input
-          v-model:value="searchQuery.value"
-          class="!rounded-lg !border-gray-200 !px-4 !py-2"
-          placeholder="Search your records"
-        >
+        <a-input v-model:value="searchQuery.value" class="!rounded-lg !border-gray-200 !px-4 !py-2" placeholder="Search records">
           <template #prefix>
             <component :is="iconMap.search" class="h-4 w-4 mr-1 text-gray-500" />
           </template>
         </a-input>
-        <NcButton type="secondary" @click="emit('new-record', { row: {} })">
-          <div class="px-4 flex items-center gap-2 justify-center">
-            <component :is="iconMap.plus" class="h-4 w-4 text-gray-700" />
-            {{ t('activity.newRecord') }}
-          </div>
-        </NcButton>
+        <NcSelect v-model:value="sideBarFilterOption" :options="options" />
       </div>
 
       <div
         v-if="calendarRange"
         :ref="sideBarListRef"
         :class="{
-        'h-[calc(100vh-40rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const),
-        'h-[calc(100vh-29rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const),
+        'h-[calc(100vh-36.2rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const),
+        'h-[calc(100vh-25.1rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const),
       }"
         class="gap-2 flex flex-col nc-scrollbar-md overflow-y-auto nc-calendar-top-height"
         @scroll="sideBarListScrollHandle"
       >
+        <NcButton class="!absolute right-5 bottom-5 !h-12 !w-12" type="secondary" @click="emit('new-record', { row: {} })">
+          <div class="px-4 flex items-center gap-2 justify-center">
+            <component :is="iconMap.plus" class="h-6 w-6 text-lg text-brand-500" />
+          </div>
+        </NcButton>
         <div v-if="renderData.length === 0 || isSidebarLoading" class="flex h-full items-center justify-center">
           <GeneralLoader v-if="isSidebarLoading" size="large" />